/* SNBizPOS presentation layer. Kept separate from the original compiled assets. */
.theme-header-bg { background-image: var(--sn-gradient); }
.theme-logo-bg { background: var(--sn-gradient); }

.sn-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: #fff;
    line-height: 1;
}
.sn-brand-logo {
    display: block;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    object-fit: contain;
    padding: 3px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 12px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12), 0 5px 12px rgba(0, 0, 0, .1);
}
.sn-brand-name { font-size: 21px; font-weight: 750; letter-spacing: -.5px; white-space: nowrap; }
.sn-brand-link { padding: 7px 14px; text-decoration: none; }
.sn-brand-link:hover, .sn-brand-link:focus { text-decoration: none; }
.sn-mobile-brand { display: none; }
.sn-auth-brand { text-decoration: none; }
.sn-auth-brand .sn-brand-logo { width: 46px; height: 46px; }

.sn-dashboard-hero {
    padding-bottom: 20px;
    border-radius: 0 0 26px 26px;
    box-shadow: 0 8px 22px rgba(15, 118, 110, .09);
}
.sn-dashboard-hero > div:first-child { padding-top: 25px; }
.sn-dashboard-hero > .tw-relative > [aria-hidden="true"] { display: none; }
.sn-welcome-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.sn-welcome-slot { flex: 1 1 340px; min-width: 0; margin: 0; }
.sn-welcome-row > div:not(.sn-welcome-slot) { flex: 0 1 230px; width: auto; margin: 0; }
.sn-customer-welcome { display: flex; align-items: center; gap: 17px; min-width: 0; }
.sn-customer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    padding: 5px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 20px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1), 0 10px 22px rgba(0, 0, 0, .12);
}
.sn-customer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.sn-customer-initial { color: var(--theme-700); font-size: 32px; font-weight: 700; }
.sn-customer-title {
    margin: 0;
    color: #fff;
    font-size: clamp(23px, 2.25vw, 36px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.6px;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .08);
}
.sn-dashboard-hero #dashboard_date_filter {
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .08), 0 7px 14px rgba(0, 0, 0, .06);
}
.sn-dashboard-hero .select2-container--default .select2-selection--single {
    min-height: 40px;
    border-radius: 9px;
    border-color: #dcece6;
}

.sn-kpi-card {
    --sn-card-accent: #0284c7;
    --sn-card-light: #e0f2fe;
    position: relative;
    min-height: 120px;
    border: 1px solid #fff;
    border-top: 3px solid var(--sn-card-light);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff 35%, #f4f8fa 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #edf3f6,
        0 5px 0 #cfdddf, 0 13px 20px rgba(9, 48, 53, .16);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sn-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #edf3f6,
        0 6px 0 #cfdddf, 0 17px 26px rgba(9, 48, 53, .2);
}
.sn-kpi-card--net { --sn-card-accent: #059669; --sn-card-light: #d1fae5; }
.sn-kpi-card--invoice, .sn-kpi-card--purchase-due { --sn-card-accent: #b45309; --sn-card-light: #fef3c7; }
.sn-kpi-card--sell-return, .sn-kpi-card--purchase-return { --sn-card-accent: #e11d48; --sn-card-light: #ffe4e6; }
.sn-kpi-card--purchase { --sn-card-accent: #7c3aed; --sn-card-light: #ede9fe; }
.sn-kpi-card--expense { --sn-card-accent: #c2410c; --sn-card-light: #ffedd5; }
.sn-kpi-card .sn-kpi-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .95);
    background: linear-gradient(145deg, #fff -30%, var(--sn-card-light) 85%);
    color: var(--sn-card-accent);
    box-shadow: inset 1px 1px 1px #fff, inset -1px -2px 3px rgba(0, 0, 0, .04),
        0 3px 0 var(--sn-card-light), 0 6px 10px rgba(20, 50, 60, .09);
}
.sn-kpi-card .sn-kpi-icon svg { filter: drop-shadow(0 1px 0 #fff); }
.sn-kpi-card p.tw-text-sm {
    color: #52616f;
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    line-height: 1.4;
}
.sn-kpi-card p.tw-font-mono {
    color: #182f3d;
    font-size: clamp(18px, 1.65vw, 26px);
    line-height: 1.35;
    margin-top: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-shadow: 0 1px 0 #fff;
}
.sn-business-logo-preview { display: block; max-width: 100px; max-height: 72px; object-fit: contain; margin: 10px 0; }
.sn-settings-note { color: #52616f; font-size: 13px; margin-top: 7px; }

@media (max-width: 1023px) {
    .sn-mobile-brand { display: inline-flex; }
    .sn-mobile-brand .sn-brand-logo { width: 32px; height: 32px; border-radius: 9px; }
    .sn-mobile-brand .sn-brand-name { font-size: 17px; }
}
@media (max-width: 639px) {
    .sn-welcome-slot { flex-basis: 100%; }
    .sn-welcome-row > div:not(.sn-welcome-slot) { flex: 1 1 140px; }
    .sn-customer-logo { width: 56px; height: 56px; border-radius: 15px; }
    .sn-customer-welcome { gap: 12px; }
    .sn-kpi-card { min-height: 102px; }
    .sn-kpi-card p.tw-font-mono { font-size: 23px; }
    .sn-dashboard-hero { border-radius: 0 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .sn-kpi-card, .sn-kpi-card:hover { transition: none; transform: none; }
}
@media print {
    .sn-kpi-card, .sn-customer-logo { box-shadow: none; transform: none; }
    .sn-dashboard-hero { background: #fff; box-shadow: none; }
    .sn-customer-title { color: #182f3d; text-shadow: none; }
}