/* Shared SiswaMart visual system — "biru redam + amber", 60-30-10. */
:root {
    /* 60% - netral */
    --sm-bg: #F5F8FC;
    --sm-surface: #FFFFFF;
    --sm-primary-soft: #E3ECF5;

    /* 30% - biru redam */
    --sm-primary: #3F6A96;
    --sm-primary-hover: #35597E;
    --sm-ink: #1F3550;
    --sm-text-muted: #4C6078;
    --sm-on-primary: #F5F8FC;
    --sm-sidebar-label: #EAF1F8;

    /* 10% - aksen */
    --sm-accent: #F2B84B;
    --sm-accent-hover: #E5A735;
    --sm-on-accent: #1F2A3A;

    --sm-border: #1F3550;
    --sm-input-border: #7D93AC;

    /* Bootstrap variable overrides */
    --bs-primary: var(--sm-primary);
    --bs-body-bg: var(--sm-bg);
    --bs-body-color: var(--sm-ink);
    --bs-border-color: var(--sm-border);
    --bs-link-color: var(--sm-primary);

    --border-w: 2.5px;
    --border: var(--border-w) solid var(--sm-ink);
    --r-card: 28px;
    --r-tile: 28px;
    --r-block: 36px;
    --r-input: 18px;
    --r-pill: 999px;
    --shadow: 4px 4px 0 var(--sm-ink);
    --shadow-hover: 6px 6px 0 var(--sm-ink);
    --shadow-active: 2px 2px 0 var(--sm-ink);
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 24px);
    --section-gap: clamp(40px, 6vw, 80px);
    --container-home: 1280px;
    --gutter-home: clamp(18px, 3.5vw, 48px);
    --section-gap-home: clamp(40px, 4vw, 64px);
}

html {
    scroll-padding-top: 96px;
}

/* Shared controls for admin and seller forms. */
.ui-card { background:var(--sm-surface); border:3px solid var(--sm-ink); border-radius:24px; box-shadow:0 5px 0 var(--sm-ink); padding:24px; }
.ui-field { display:grid; gap:7px; }
.ui-field > label { color:var(--sm-ink); font-size:14px; font-weight:600; }
.ui-control { width:100%; min-height:46px; border:2px solid var(--sm-input-border); border-radius:14px; padding:10px 14px; background:var(--sm-surface); color:var(--sm-ink); box-shadow:none; }
.ui-control:focus { outline:none; border-color:var(--sm-primary); box-shadow:0 0 0 4px rgb(63 106 150 / 25%); }
.ui-textarea { min-height:112px; resize:vertical; }
.ui-help { margin:0; color:var(--sm-text-muted); font-size:13px; }
.ui-error { margin:0; color:#8B1E2D; font-size:13px; font-weight:600; }
.ui-error span { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#8B1E2D; color:white; }
.ui-button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 18px; border:3px solid var(--sm-ink); border-radius:999px; box-shadow:0 4px 0 var(--sm-ink); font-weight:700; text-decoration:none; cursor:pointer; }
.ui-button--primary { background:var(--sm-primary); color:var(--sm-on-primary); }
.ui-button--secondary { background:var(--sm-surface); color:var(--sm-ink); }
.ui-button:hover { transform:translateY(-1px); }
.ui-page-header { max-width:1240px; margin:0 0 24px; }
.ui-page-header nav ol { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 8px; color:var(--sm-text-muted); font-size:13px; }
.ui-page-header nav li+li::before { content:'/'; margin-right:8px; color:var(--sm-input-border); }
.ui-page-header h1 { margin:0; color:var(--sm-ink); font-size:28px; font-weight:800; }
.ui-form-actions { position:sticky; bottom:0; z-index:20; display:flex; justify-content:flex-end; gap:12px; margin:24px -24px -24px; padding:14px 24px; background:var(--sm-surface); border-top:3px solid var(--sm-ink); }
.ui-avatar-upload { display:grid; justify-items:center; gap:12px; color:var(--sm-text-muted); text-align:center; font-size:13px; }
.ui-avatar-upload__preview { width:112px; height:112px; display:grid; place-items:center; overflow:hidden; border:3px solid var(--sm-ink); border-radius:50%; background:var(--sm-primary-soft); color:var(--sm-ink); font-size:32px; font-weight:800; }
.ui-avatar-upload__preview img { width:100%; height:100%; object-fit:cover; }
.ui-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.ui-visually-hidden:focus-visible + * { outline:3px solid var(--sm-primary); outline-offset:3px; }
.ui-status-badge { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 10px; border:1px solid var(--sm-ink); border-radius:999px; color:var(--sm-ink); background:var(--sm-primary-soft); font-size:12px; font-weight:700; }
.ui-status-badge--pending { color:var(--sm-on-accent); background:var(--sm-accent); }
.ui-status-badge--rejected,.ui-status-badge--muted { background:var(--sm-primary-soft); }
.ui-table-scroll { overflow-x:auto; }
.ui-table-scroll table { min-width:680px; border-collapse:collapse; }
.ui-table-scroll th { background:var(--sm-primary-soft); }
.ui-table-scroll th,.ui-table-scroll td { border-bottom:1px solid var(--sm-input-border); }

@media(max-width:899px) { .ui-form-actions { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; } .ui-page-header h1 { font-size:24px; } }

body :is(nav[aria-label="Breadcrumb" i], [aria-label="Breadcrumb" i], .breadcrumb, [data-breadcrumb]) {
    display: none !important;
}

body:not(.home-page) {
    background: var(--sm-bg);
    color: var(--sm-ink);
    font-family: 'Plus Jakarta Sans', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

body.account-page>div {
    background: var(--sm-bg) !important;
}

body.account-page>div>nav {
    border: var(--border) !important;
    border-radius: var(--r-pill);
    background: var(--sm-primary) !important;
    box-shadow: var(--shadow);
}

body.account-page>div>nav a {
    color: var(--sm-on-primary);
}

body:not(.home-page) :is(h1, h2, h3, h4, .font-display) {
    color: var(--sm-ink);
    font-family: 'Fredoka', 'Plus Jakarta Sans', ui-sans-serif, sans-serif;
    letter-spacing: 0;
    line-height: 1.1;
}

body:not(.home-page) :is(p, li, label, small) {
    color: inherit;
}

body:not(.home-page) a,
body:not(.home-page) button,
body:not(.home-page) input,
body:not(.home-page) select,
body:not(.home-page) textarea {
    -webkit-tap-highlight-color: transparent;
}

body:not(.home-page) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--sm-ink) !important;
    outline-offset: 3px;
}

/* Dropdown controls keep their rounded border focus state without an outer outline. The site navbar keeps its existing focus treatment. */
body :is(select, [aria-haspopup], [aria-expanded]):focus-visible:not(header *):not(.home-navbar *) {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: var(--sm-primary) !important;
}

/* Shared public shell */
body:not(.home-page):not(.public-site-page)>header {
    top: 16px !important;
    width: min(calc(100% - 2 * var(--gutter)), calc(var(--container) - 2 * var(--gutter))) !important;
    max-width: var(--container) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body:not(.home-page):not(.public-site-page)>header>div {
    border: var(--border) !important;
    border-radius: var(--r-pill) !important;
    box-shadow: var(--shadow) !important;
    background: var(--sm-primary) !important;
}

body:not(.home-page):not(.public-site-page)>header a,
body:not(.home-page):not(.public-site-page)>header button {
    min-height: 44px;
    white-space: nowrap;
}

body:not(.home-page)>header a:not([id$="login"]):not([id*="dashboard"]),
body:not(.home-page)>header button {
    color: var(--sm-on-primary);
}

body:not(.home-page)>header :is(#nav-login, #nav-admin-dashboard, #nav-penjual-dashboard, #mobile-nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard) {
    background: var(--sm-ink) !important;
    color: var(--sm-on-primary) !important;
    border: 2px solid var(--sm-ink);
    box-shadow: var(--shadow);
}

body:not(.home-page)>header :is(#nav-admin-dashboard, #nav-penjual-dashboard, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard) {
    background: var(--sm-accent) !important;
    color: var(--sm-on-accent) !important;
}

body:not(.home-page)>header input {
    background: var(--sm-surface) !important;
    border-color: var(--sm-ink) !important;
    color: var(--sm-ink) !important;
    box-shadow: 2px 2px 0 var(--sm-ink) !important;
}

body:not(.home-page) main {
    scroll-margin-top: 96px;
}

body:not(.home-page) main> :is(div, section):first-child {
    scroll-margin-top: 96px;
}

body:not(.home-page)>main>div:first-child>div {
    border: var(--border) !important;
    border-radius: var(--r-card) !important;
    background: var(--sm-surface) !important;
    box-shadow: var(--shadow) !important;
}

body:not(.home-page):not(.public-site-page) footer {
    margin-top: 56px !important;
    background: var(--sm-primary-soft) !important;
    color: var(--sm-ink) !important;
    border-top: var(--border) !important;
    border-radius: 40px 40px 0 0;
}

body:not(.home-page):not(.public-site-page) footer a:hover {
    color: var(--sm-primary-hover) !important;
}

/* Keep every public page's shared navbar and footer visually identical to home. */
body.public-site-page .home-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--container-home);
    margin-inline: auto;
    padding-inline: var(--gutter-home);
}

body.public-site-page .home-navbar {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 99999;
    transform: translateX(-50%);
    pointer-events: auto;
    width: 100% !important;
    max-width: var(--container-home) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.public-site-page .home-navbar-shell {
    display: contents;
}

body.public-site-page .home-location-banner {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    gap: 9px;
    padding: 7px 13px 7px 8px;
}

body.public-site-page .home-location-banner>span:first-child {
    width: 38px;
    height: 38px;
}

body.public-site-page .home-location-banner>span:first-child svg {
    width: 25px;
    height: 25px;
}

body.public-site-page .home-location-banner>p {
    min-width: 0;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}

body.public-site-page .home-navbar>div:first-child {
    padding: 8px clamp(14px, 2vw, 26px);
    border: 2.5px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-primary);
    box-shadow: 4px 4px 0 var(--sm-ink);
}

body.public-site-page .home-navbar>div:first-child.rounded-2xl {
    border-radius: var(--r-card);
}

body.public-site-page .home-navbar__desktop {
    width: 100%;
    justify-content: space-between;
}

body.public-site-page .home-navbar #nav-logo {
    order: -1;
    flex-shrink: 0;
    white-space: nowrap;
}

body.public-site-page .home-navbar :is(#nav-beranda, #nav-kategori, #nav-cara-pemesanan, #nav-tentang-kami) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    color: var(--sm-ink);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

body.public-site-page .home-navbar :is(#nav-beranda, #nav-kategori, #nav-cara-pemesanan, #nav-tentang-kami):hover,
body.public-site-page .home-navbar :is(#nav-beranda, #nav-kategori, #nav-cara-pemesanan, #nav-tentang-kami).is-active,
body.public-site-page .home-navbar :is(#nav-beranda, #nav-kategori, #nav-cara-pemesanan, #nav-tentang-kami)[class*="bg-white/20"] {
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}

body.public-site-page .home-footer__grid>div:first-child>a>span:last-child {
    color: var(--sm-primary-hover);
}

body.public-site-page .home-navbar :is(#nav-admin-dashboard, #nav-penjual-dashboard, #nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard, #mobile-nav-login) {
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-ink);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--sm-ink) 42%, transparent);
    color: var(--sm-bg);
    font-weight: 700;
}

body.public-site-page .home-navbar :is(#nav-admin-dashboard, #nav-penjual-dashboard, #nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard, #mobile-nav-login):hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--sm-ink) 42%, transparent);
}

body.public-site-page .home-navbar :is(button[aria-label="Cari produk"], button[aria-label="Cari"], #mobile-menu-btn) {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    padding: 0;
    background: var(--sm-primary-soft);
    box-shadow: 2px 2px 0 var(--sm-ink);
    color: var(--sm-ink);
}

body.public-site-page .home-navbar :is(#nav-search-input, #mobile-nav-search-input) {
    border: 2px solid var(--sm-ink) !important;
    border-radius: var(--r-pill) !important;
    background: var(--sm-bg) !important;
    color: var(--sm-ink) !important;
    box-shadow: 2px 2px 0 var(--sm-ink) !important;
}

body.public-site-page .home-navbar #mobile-navigation-menu a:not(:is(#mobile-nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard)) {
    border-radius: var(--r-pill);
    color: var(--sm-ink);
}

body.public-site-page .home-navbar #mobile-navigation-menu a:not(:is(#mobile-nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard)):hover {
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}

body.public-site-page .home-navbar #mobile-navigation-menu :is(#mobile-nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard) {
    background: var(--sm-ink) !important;
    color: var(--sm-bg) !important;
}

body.public-site-page .home-navbar #mobile-navigation-menu :is(#mobile-nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard):hover {
    background: var(--sm-bg) !important;
    color: var(--sm-ink) !important;
}

body.public-site-page .home-navbar :is(#nav-search-form, #mobile-nav-search-form) svg {
    color: var(--sm-ink);
}

body.public-site-page .home-navbar :is(a, button, input):focus-visible,
body.public-site-page .home-footer a:focus-visible {
    outline: 3px solid var(--sm-ink);
    outline-offset: 4px;
}

body.public-site-page main {
    padding-bottom: clamp(48px, 4vw, 64px);
}

body.public-site-page .home-footer {
    margin-top: 0;
    border: 2.5px solid var(--sm-ink);
    border-bottom: 0;
    border-radius: 40px 40px 0 0;
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}

body.public-site-page .home-footer__inner {
    padding-top: 32px;
    padding-bottom: 20px;
}

body.public-site-page .home-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 28px 24px;
}

body.public-site-page .home-footer__grid>* {
    min-width: 0;
    color: var(--sm-ink);
}

body.public-site-page .home-footer__grid h2,
body.public-site-page .home-footer__grid>div:first-child>a {
    color: var(--sm-ink);
    font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.01em;
}

body.public-site-page .home-footer :is(p, ul) {
    color: var(--sm-text-muted);
}

body.public-site-page .home-footer__contact-button {
    display: inline-flex;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    border: 2.5px solid var(--sm-ink);
    border-radius: var(--r-pill);
    padding: 9px 18px;
    background: var(--sm-surface);
    box-shadow: 4px 4px 0 var(--sm-ink);
    color: var(--sm-ink);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

body.public-site-page .home-footer__contact-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--sm-ink);
}

body.public-site-page .home-footer__social-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-primary-soft);
}

body.public-site-page .home-footer__social-icon .home-icon-svg {
    width: 16px;
    height: 16px;
}

body.public-site-page .home-footer__grid>div:last-child li:nth-child(2) .home-footer__social-icon {
    background: var(--sm-primary-soft);
}

body.public-site-page .home-footer__grid>div:last-child li:nth-child(3) .home-footer__social-icon {
    background: var(--sm-primary-soft);
}

body.public-site-page .home-footer nav a {
    display: inline-block;
    transition: transform .18s ease, color .18s ease;
}

body.public-site-page .home-footer nav a:hover {
    transform: translateX(3px);
}

body.public-site-page .home-footer__copyright {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 28px;
    border-top: 1.5px solid color-mix(in srgb, var(--sm-ink) 30%, transparent);
    padding-top: 15px;
    color: var(--sm-text-muted);
    font-size: .72rem;
}

body.public-site-page .home-footer__copyright p {
    margin: 0;
}

@media(min-width:640px) {
    body.public-site-page .home-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.public-site-page .home-footer__copyright {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media(min-width:960px) {
    body.public-site-page .home-footer__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.2fr);
        gap: 24px clamp(20px, 3vw, 44px);
    }
}

@media(max-width:639px) {
    body.public-site-page .home-footer {
        border-radius: 28px 28px 0 0;
    }

    body.public-site-page .home-navbar>div:first-child {
        padding: 8px 14px;
    }

    body.public-site-page .home-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 18px;
    }

    body.public-site-page .home-footer__grid>div:first-child {
        display: contents;
    }

    body.public-site-page .home-footer__grid>div:first-child>a:first-child,
    body.public-site-page .home-footer__grid>div:first-child>p {
        grid-column: 1 / -1;
    }

    body.public-site-page .home-footer__grid>nav[aria-label="Jelajahi SiswaMart"] {
        grid-column: 1;
        grid-row: 3;
    }

    body.public-site-page .home-footer__grid>nav[aria-label="Informasi SiswaMart"] {
        grid-column: 2;
        grid-row: 3;
    }

    body.public-site-page .home-footer__contact-button {
        grid-column: 2;
        grid-row: 4;
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        padding-inline: 8px;
        font-size: .84rem;
    }

    body.public-site-page .home-footer__grid>div:last-child {
        grid-column: 1;
        grid-row: 4;
    }

    body.public-site-page .home-footer__grid>div:last-child li a {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 4px 6px;
        font-size: .78rem;
    }

    body.public-site-page .home-footer__grid>div:last-child li a>span:nth-child(3) {
        margin-left: 38px;
    }
}

/* Common cards, controls, and utility-class variants used by Blade views. */
body:not(.home-page) :is(.auth-card, .admin-card, .stat-card, .bg-white.border-2, .bg-\[var\(--sm-surface\)\].border-2) {
    background-color: var(--sm-surface) !important;
    border: var(--border) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--shadow) !important;
}

body:not(.home-page) :is(.form-input, .auth-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .auth-card select, .auth-card textarea, input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
    max-width: 100%;
    min-height: 48px;
    border: var(--border) !important;
    border-radius: var(--r-input) !important;
    background-color: var(--sm-surface) !important;
    color: var(--sm-ink) !important;
    box-shadow: 2px 2px 0 var(--sm-ink) !important;
}

body:not(.home-page) textarea {
    min-height: 112px;
}

body:not(.home-page) :is(input, textarea)::placeholder {
    color: var(--sm-text-muted);
    opacity: .78;
}

body:not(.home-page) :is(.btn-primary, .btn-outline, .btn-secondary, button[type=submit]:not(.notification-item-btn):not(.notification-header-action), a.btn-primary) {
    min-height: 44px;
    border: var(--border) !important;
    border-radius: var(--r-pill) !important;
    box-shadow: var(--shadow) !important;
    font-weight: 700;
}

body:not(.home-page) :is(.btn-primary, button[type=submit]:not(.notification-item-btn):not(.notification-header-action)) {
    background: var(--sm-accent) !important;
    color: var(--sm-on-accent) !important;
}

body:not(.home-page) :is(.btn-primary, button[type=submit]:not(.notification-item-btn):not(.notification-header-action)):hover {
    background: var(--sm-accent-hover) !important;
}

/* Keep foreground contrast readable on structural blue elements. */
body:not(.home-page) .bg-\[var\(--sm-primary\)\] {
    color: var(--sm-on-primary) !important;
}

body:not(.home-page) :is(.btn-primary, .btn-outline, .btn-secondary, button[type=submit]:not(.notification-item-btn):not(.notification-header-action), a.btn-primary):hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hover) !important;
}

body:not(.home-page) :is(.btn-primary, .btn-outline, .btn-secondary, button[type=submit]:not(.notification-item-btn):not(.notification-header-action), a.btn-primary):active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-active) !important;
}

body:not(.home-page) .admin-card-header {
    border-color: color-mix(in srgb, var(--sm-ink) 20%, transparent);
}

body:not(.home-page) :is(.admin-card, .stat-card, .overflow-x-auto) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

body:not(.home-page) th {
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
    font-weight: 700;
}

body:not(.home-page) :is(th, td) {
    padding: .75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--sm-ink) 16%, transparent);
    vertical-align: middle;
}

body:not(.home-page) tr:last-child td {
    border-bottom: 0;
}

body:not(.home-page) :is(.badge, .badge-aktif, .badge-pending, .badge-ditolak, .cat-chip) {
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    font-weight: 700;
}

body:not(.home-page) .badge-aktif {
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}

body:not(.home-page) .badge-pending {
    background: var(--sm-surface);
    color: var(--sm-ink);
}

body:not(.home-page) .badge-ditolak {
    background: var(--sm-ink);
    color: var(--sm-on-primary);
}

body:not(.home-page) :is(.pagination, .pagination nav, .pagination ul) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

body:not(.home-page) :is(.pagination a, .pagination span) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-surface);
    color: var(--sm-ink);
    box-shadow: 2px 2px 0 var(--sm-ink);
}

body:not(.home-page) :is(.pagination [aria-current], .pagination .active span) {
    background: var(--sm-primary);
    color: var(--sm-on-primary);
}

body:not(.home-page) nav[role="navigation"] :is(a, span[aria-current]) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-surface);
    color: var(--sm-ink);
    box-shadow: 2px 2px 0 var(--sm-ink);
    text-decoration: none;
    transition: all .15s ease;
}

body:not(.home-page) nav[role="navigation"] a:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hover);
}

body:not(.home-page) nav[role="navigation"] a:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-active);
}

body:not(.home-page) nav[role="navigation"] span[aria-current] {
    background: var(--sm-primary);
    color: var(--sm-on-primary);
    font-weight: 800;
}

body:not(.home-page) nav[role="navigation"] span[aria-disabled="true"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid color-mix(in srgb, var(--sm-ink) 25%, transparent);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--sm-primary-soft) 30%, transparent);
    color: color-mix(in srgb, var(--sm-ink) 35%, transparent);
    cursor: not-allowed;
    opacity: .6;
    box-shadow: none;
}

body:not(.home-page) nav[role="navigation"] svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Auth screens */
body.auth-page {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: flex-start;
    gap: clamp(20px, 3vh, 32px);
    padding: 24px var(--gutter) 16px;
}

body.auth-page>.auth-shell {
    width: min(100%, 480px);
    display: flex;
    justify-content: center;
    margin-block: auto;
}

body.auth-page .auth-card {
    width: 100%;
    padding: clamp(24px, 5vw, 40px);
    border: var(--border);
    border-radius: var(--r-card);
    background: var(--sm-surface);
    box-shadow: var(--shadow);
}

body.auth-page .auth-card h2 {
    margin-bottom: 8px;
    font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

body.auth-page .auth-card>div:first-child p {
    max-width: 34ch;
    margin-inline: auto;
    color: var(--sm-text-muted);
    line-height: 1.55;
}

body.auth-page .auth-card .form-input {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: var(--border) !important;
    border-radius: var(--r-input) !important;
    background: var(--sm-bg) !important;
    box-shadow: 2px 2px 0 var(--sm-ink) !important;
    font-size: .95rem;
    transition: box-shadow .18s ease, background-color .18s ease;
}

body.auth-page .auth-card .form-input:focus {
    transform: none;
    background: var(--sm-surface) !important;
    box-shadow: 2px 2px 0 var(--sm-ink) !important;
}

body.auth-page .auth-card input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 2px solid var(--sm-ink);
    border-radius: 7px;
}

body.auth-page .auth-card button[type="submit"] {
    min-height: 56px;
    font-size: 1rem;
}

.auth-google-button {
    margin-top: 2px;
    border: var(--border) !important;
    border-radius: var(--r-pill) !important;
    background: var(--sm-primary-soft) !important;
    color: var(--sm-ink) !important;
    box-shadow: var(--shadow) !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-google-button:hover {
    transform: translate(-2px, -2px);
    background: var(--sm-primary-soft) !important;
    box-shadow: var(--shadow-hover) !important;
}

.auth-google-button:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-active) !important;
}

.auth-google-icon {
    border: 1.5px solid color-mix(in srgb, var(--sm-ink) 20%, transparent);
}

.auth-page .auth-card>p[aria-hidden="true"] {
    margin-block: 24px;
}

.auth-page .auth-card>aside {
    margin-top: 32px;
}

/* Compact non-scrollable Login page with comfortable breathing room */
body.auth-page--login {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
}

body.auth-page--login>.auth-shell {
    width: min(100%, 460px) !important;
    margin: auto !important;
}

body.auth-page--login .auth-card {
    padding: 32px 32px 28px !important;
    border-radius: var(--r-card) !important;
}

body.auth-page--login .auth-card .form-input {
    min-height: 48px !important;
    padding: 11px 16px !important;
    font-size: 0.92rem !important;
    margin-top: 4px !important;
}

body.auth-page--login .auth-card button[type="submit"] {
    min-height: 48px !important;
    font-size: 0.98rem !important;
    padding: 12px 18px !important;
    margin-top: 6px !important;
}

body.auth-page--login .auth-google-button {
    min-height: 48px !important;
    padding: 10px 18px !important;
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
}

body.auth-page--login .auth-card>p[aria-hidden="true"],
body.auth-page--login .auth-card>div[aria-hidden="true"] {
    margin-block: 20px !important;
}

body.auth-page--login .auth-card>aside {
    margin-top: 20px !important;
}

.auth-site-nav {
    box-sizing: border-box;
    width: min(100%, calc(var(--container-home) - 2 * var(--gutter-home)));
    min-height: 64px;
    margin-inline: auto;
    padding: 8px clamp(12px, 2vw, 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 20px);
    border: var(--border);
    border-radius: var(--r-pill);
    background: var(--sm-primary);
    color: var(--sm-ink);
    box-shadow: var(--shadow);
}

.auth-site-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.2vw, 18px);
}

.auth-site-links a,
.auth-site-action {
    min-height: 44px;
    padding: 10px clamp(8px, 1vw, 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    font-size: clamp(.78rem, .9vw, .9rem);
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.auth-site-links a:hover,
.auth-site-links a:focus-visible {
    background: var(--sm-primary-soft);
}

.auth-site-action {
    border: 2px solid var(--sm-ink);
    background: var(--sm-ink);
    box-shadow: 2px 2px 0 color-mix(in srgb, var(--sm-ink) 35%, transparent);
    color: var(--sm-bg);
}

.auth-site-action:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--sm-ink) 35%, transparent);
}

.auth-site-footer {
    box-sizing: border-box;
    width: min(100%, calc(var(--container-home) - 2 * var(--gutter-home)));
    margin: 0 auto;
    padding: 16px 0 8px;
    border-top: 1.5px solid color-mix(in srgb, var(--sm-ink) 24%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    color: var(--sm-text-muted);
    font-size: .82rem;
    line-height: 1.5;
}

.auth-site-footer span,
.auth-site-footer a {
    min-width: 0;
}

.auth-site-footer a {
    color: var(--sm-ink);
    font-weight: 700;
    text-underline-offset: 3px;
}

.auth-site-footer a:hover {
    color: var(--sm-primary-hover);
}

@media(max-width:800px) {
    .auth-site-nav {
        flex-wrap: wrap;
        border-radius: var(--r-card);
    }

    .auth-site-logo {
        margin-right: auto;
    }

    .auth-site-action {
        order: 2;
    }

    .auth-site-links {
        order: 3;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .auth-site-links a {
        justify-content: flex-start;
        padding-inline: 12px;
    }
}

@media(max-width:520px) {
    body.auth-page {
        padding: 16px 16px 12px;
        gap: 20px;
    }

    body.auth-page>.auth-shell {
        margin-block: 8px;
    }

    body.auth-page .auth-card {
        padding: 24px 20px;
    }

    .auth-site-nav {
        width: 100%;
        min-height: 58px;
        padding: 8px;
    }

    .auth-site-action {
        min-height: 40px;
        padding-inline: 10px;
        font-size: .78rem;
    }

    .auth-site-footer {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-top: 12px;
        font-size: .76rem;
    }
}

/* Shared public cards, placeholders, page headers, and empty states. */
body.public-site-page .product-review-trigger {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--r-pill) !important;
    color: var(--sm-ink) !important;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
}

body.public-site-page .product-review-trigger svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

@media(min-width:640px) {
    body.public-site-page .product-review-trigger {
        width: auto;
        min-width: 188px;
    }
}

body:not(.home-page) .product-card {
    border: var(--border) !important;
    border-radius: var(--r-card) !important;
    background: var(--sm-surface) !important;
    box-shadow: var(--shadow) !important;
    color: var(--sm-ink);
}

body:not(.home-page) .product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover) !important;
}

body:not(.home-page) .product-card__media {
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

body:not(.home-page) .product-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    transition: none;
}

body:not(.home-page) .product-card__fallback,
body:not(.home-page) .product-detail-fallback {
    background-color: var(--product-placeholder, var(--sm-primary-soft));
    background-image: radial-gradient(color-mix(in srgb, var(--sm-ink) 12%, transparent) 1px, transparent 1px), linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--sm-surface) 35%, transparent) 50%, transparent 52%);
    background-size: 16px 16px, 32px 32px;
}

body:not(.home-page) .product-card__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

body:not(.home-page) .product-card__fallback[hidden],
body:not(.home-page) .product-detail-fallback[hidden] {
    display: none !important;
}

body:not(.home-page) .product-card__fallback-icon {
    width: clamp(72px, 36%, 112px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: color-mix(in srgb, var(--sm-surface) 65%, transparent);
    color: var(--sm-ink);
}

body:not(.home-page) .product-card__fallback-icon svg {
    width: 55%;
    height: 55%;
    display: block;
}

body:not(.home-page) .product-detail-fallback {
    width: min(100%, 420px);
    min-height: 320px;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
}

body:not(.home-page) .product-detail-fallback__icon {
    width: 128px;
    height: 128px;
    display: grid;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-surface);
    color: var(--sm-ink);
}

body:not(.home-page) .product-detail-fallback__icon svg {
    width: 64px;
    height: 64px;
}

body:not(.home-page) .product-card__info {
    min-width: 0;
}

body:not(.home-page) :is(.public-page-header, .page-header) {
    margin-bottom: clamp(24px, 4vw, 40px);
}

body:not(.home-page) :is(.public-page-header, .page-header) h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: 0;
}

body:not(.home-page) :is(.breadcrumb-chip, .cat-chip) {
    background: var(--sm-primary-soft);
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    color: var(--sm-ink);
}

body:not(.home-page) .cat-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

body:not(.home-page) .category-select-option:hover {
    color: var(--sm-ink) !important;
    background-color: var(--sm-primary-soft) !important;
}

body:not(.home-page) :is(.content-block, .public-content-card) {
    border: var(--border);
    border-radius: var(--r-block);
    background: var(--sm-surface);
    box-shadow: var(--shadow);
}

body:not(.home-page) :is(.error-state, .empty-state) {
    margin-inline: auto;
    padding: clamp(28px, 5vw, 56px);
    border: var(--border);
    border-radius: var(--r-block);
    background: var(--sm-surface);
    box-shadow: var(--shadow);
    text-align: center;
}

body:not(.home-page) .empty-state__icon {
    width: 88px;
    height: 88px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}

/* Seller/admin surfaces retain their existing navigation and information architecture. */
body:is(.seller-dashboard, .admin-dashboard) {
    background: var(--sm-bg);
    color: var(--sm-ink);
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar {
    background: var(--sm-primary);
    border-right: 3px solid var(--sm-ink);
    color: var(--sm-on-primary);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar :is(.border-b, .border-t-2) {
    border-color: color-mix(in srgb, var(--sm-on-primary) 24%, transparent) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar :is(.sidebar-section-title, p) {
    color: color-mix(in srgb, var(--sm-on-primary) 68%, transparent) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-section-title {
    color: var(--sm-sidebar-label) !important;
    letter-spacing: normal;
    text-transform: none;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar :is(a, button, svg) {
    color: var(--sm-on-primary);
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar > div:first-child a span:first-child {
    color: var(--sm-ink) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar > div:first-child a span:last-child {
    color: var(--sm-primary) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar > div:first-child a {
    min-height: 44px;
    padding: 4px 14px;
    background: var(--sm-surface);
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    box-shadow: 3px 3px 0 var(--sm-ink);
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-link {
    border-color: transparent;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-link:hover {
    background: color-mix(in srgb, var(--sm-on-primary) 10%, transparent);
    color: var(--sm-on-primary);
    transform: none;
    box-shadow: none;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-link.active {
    background: var(--sm-bg);
    color: var(--sm-ink);
    border: 2px solid var(--sm-ink);
    box-shadow: 3px 3px 0 var(--sm-ink);
    transform: translate(-1px, -1px);
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-link.active svg {
    color: var(--sm-ink) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .app-topbar {
    background: var(--sm-surface);
    border-bottom: 3px solid var(--sm-ink);
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar :is(a, button),
body:is(.seller-dashboard, .admin-dashboard) .app-topbar :is(a, button):not(.notification-item-btn):not(.notification-header-action):not(.notification-icon-btn) {
    min-height: 44px;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-link.active {
    background: var(--sm-bg);
    color: var(--sm-ink);
    border: 2px solid var(--sm-ink);
    box-shadow: 3px 3px 0 var(--sm-ink);
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-link.active svg {
    color: var(--sm-ink) !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.btn-primary, button[type="submit"]:not(.notification-item-btn):not(.notification-header-action)) {
    background: var(--sm-primary) !important;
    color: var(--sm-on-primary) !important;
    border-color: var(--sm-ink) !important;
    box-shadow: 3px 3px 0 var(--sm-ink) !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.btn-primary, button[type="submit"]:not(.notification-item-btn):not(.notification-header-action)):hover {
    background: var(--sm-primary-hover) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .app-topbar .notification-icon-btn,
body:is(.seller-dashboard, .admin-dashboard) .app-topbar > div > div:last-child > div:last-child {
    width: 44px;
    height: 44px;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--sm-ink);
}

body.admin-dashboard #adminNotificationCount,
body.admin-dashboard #adminNotificationBadge {
    background: var(--sm-accent) !important;
    color: var(--sm-on-accent) !important;
}

body.admin-dashboard .admin-dashboard-stats > .stat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    background: var(--sm-surface);
    border: 3px solid var(--sm-ink) !important;
    border-radius: 24px !important;
    box-shadow: 0 5px 0 var(--sm-ink) !important;
    text-align: left;
}

body.admin-dashboard .admin-stat-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    color: var(--sm-primary);
    background: var(--sm-primary-soft);
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
}

body.admin-dashboard .admin-stat-icon--attention {
    color: var(--sm-on-accent);
    background: var(--sm-accent);
}

body.admin-dashboard .admin-stat-copy { min-width: 0; }

body.admin-dashboard .admin-stat-label {
    display: block;
    color: var(--sm-text-muted);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
}

body.admin-dashboard .admin-stat-number {
    margin: 1px 0 0;
    color: var(--sm-ink);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
}

body.admin-dashboard .admin-stat-description {
    margin: 3px 0 0;
    color: var(--sm-text-muted);
    font-size: .75rem;
    line-height: 1.4;
}

body.admin-dashboard .admin-moderation-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    color: var(--sm-ink);
    background: var(--sm-primary-soft);
    border: 2px solid var(--sm-ink);
    border-radius: 20px;
    box-shadow: 0 4px 0 var(--sm-ink);
}

body.admin-dashboard .admin-moderation-status__icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: var(--sm-primary);
}

body.admin-dashboard .admin-moderation-status__copy { flex: 1; min-width: 0; }
body.admin-dashboard .admin-moderation-status__copy h3 { margin: 0; font-size: 1rem; font-weight: 800; }
body.admin-dashboard .admin-moderation-status__copy p { margin: 3px 0 0; color: var(--sm-text-muted); font-size: .8125rem; }

body.admin-dashboard .admin-moderation-status.has-pending .admin-moderation-status__icon { color: var(--sm-on-accent); }

body.admin-dashboard .admin-moderation-status__action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    color: var(--sm-on-accent);
    background: var(--sm-accent);
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    box-shadow: 3px 3px 0 var(--sm-ink);
    font-weight: 800;
    text-decoration: none;
}

body.admin-dashboard .admin-dashboard-shortcuts-title {
    margin: 0 0 14px;
    color: var(--sm-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

body.admin-dashboard .admin-dashboard-shortcuts-title + .grid > .admin-card > a.btn-primary {
    background: var(--sm-primary) !important;
    color: var(--sm-on-primary) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-backdrop { display: none; }

@media (max-width: 899px) {
    body.admin-dashboard .admin-dashboard-stats { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    body.admin-dashboard .admin-moderation-status { align-items: flex-start; flex-wrap: wrap; }
    body.admin-dashboard .admin-moderation-status__action { width: 100%; }
}

body:is(.seller-dashboard, .admin-dashboard) main {
    padding: clamp(16px, 3vw, 32px) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .admin-flash {
    border: var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    background: var(--sm-surface);
}

body:is(.seller-dashboard, .admin-dashboard) :is(.admin-card, .stat-card, .form-input, .btn-primary, .btn-outline, .badge) {
    border-width: var(--border-w);
}

body:is(.seller-dashboard, .admin-dashboard) :is(.btn-primary, .btn-outline) {
    padding: 10px 18px;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.bg-white, .bg-gray-50, .bg-neutral-50) {
    background-color: var(--sm-surface) !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.text-neutral-900, .text-gray-900, .text-slate-900, .text-gray-800) {
    color: var(--sm-ink) !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.text-neutral-500, .text-gray-500, .text-slate-500, .text-gray-600) {
    color: var(--sm-text-muted) !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.border-neutral-900, .border-gray-200, .border-gray-100, .border-slate-200) {
    border-color: color-mix(in srgb, var(--sm-ink) 24%, transparent) !important;
}

body:is(.seller-dashboard, .admin-dashboard) [class*="shadow-["]:not(.admin-notification-dropdown):not(.admin-notification-dropdown *) {
    box-shadow: var(--shadow) !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-lg, .rounded-md):not(.admin-notification-dropdown):not(.admin-notification-dropdown *) {
    border-radius: var(--r-card) !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(.border-2, .border-3, .border-4):not(.admin-notification-dropdown):not(.admin-notification-dropdown *) {
    border-width: var(--border-w) !important;
}

body:is(.seller-dashboard, .admin-dashboard) button[class]:not(.notification-item-btn):not(.notification-header-action):not(.notification-icon-btn):not(.admin-notification-dropdown *),
body:is(.seller-dashboard, .admin-dashboard) a[class*="btn-"]:not(.admin-notification-dropdown *) {
    min-height: 44px;
    border-radius: var(--r-pill) !important;
}

body:is(.seller-dashboard, .admin-dashboard) .bg-black\/60 {
    background-color: color-mix(in srgb, var(--sm-ink) 72%, transparent) !important;
    backdrop-filter: none !important;
}

body.seller-dashboard .seller-product-filter__link {
    box-shadow: none !important;
}

body.seller-dashboard .seller-product-filter__link:hover {
    box-shadow: none !important;
}

body.seller-dashboard .seller-report-page .home-icon-svg {
    stroke-width: 2.5 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Consistent Form Controls & Middle Vertical Alignment */
body:is(.seller-dashboard, .admin-dashboard) .form-input {
    width: 100%;
    background-color: var(--sm-surface) !important;
    border: var(--border-w) solid var(--sm-ink) !important;
    color: var(--sm-ink) !important;
    border-radius: 16px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    box-shadow: 2px 2px 0px 0px var(--sm-ink) !important;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
}

body:is(.seller-dashboard, .admin-dashboard) input.form-input:not([type="checkbox"]):not([type="radio"]) {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 20px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

body:is(.seller-dashboard, .admin-dashboard) select.form-input {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 22px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 16px !important;
    padding-right: 36px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

body:is(.seller-dashboard, .admin-dashboard) :is(div, label).form-input {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    padding-right: 14px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

body:is(.seller-dashboard, .admin-dashboard) textarea.form-input {
    padding: 14px 16px !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

body:is(.seller-dashboard, .admin-dashboard) .form-input::placeholder {
    color: var(--sm-text-muted) !important;
    opacity: 0.85 !important;
    line-height: normal !important;
}

body:is(.seller-dashboard, .admin-dashboard) .form-input:focus {
    outline: none !important;
    background-color: var(--sm-surface) !important;
    border-color: var(--sm-primary) !important;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px 0px var(--sm-ink) !important;
}

/* Static File Upload Box - No movement or scale on hover/press/focus */
body:is(.seller-dashboard, .admin-dashboard) label.form-input,
body:is(.seller-dashboard, .admin-dashboard) label.form-input:hover,
body:is(.seller-dashboard, .admin-dashboard) label.form-input:active,
body:is(.seller-dashboard, .admin-dashboard) label.form-input:focus,
body:is(.seller-dashboard, .admin-dashboard) label.form-input:focus-within {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    box-shadow: 2px 2px 0px 0px var(--sm-ink) !important;
    background-color: var(--sm-surface) !important;
    border-color: var(--sm-ink) !important;
    outline: none !important;
    cursor: pointer !important;
}

body:is(.seller-dashboard, .admin-dashboard) label.form-input * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* File Input Consistency & Middle Vertical Alignment */
body:is(.seller-dashboard, .admin-dashboard) input[type="file"].form-input {
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    color: var(--sm-text-muted) !important;
    font-size: 0.8125rem !important;
    line-height: normal !important;
}

body:is(.seller-dashboard, .admin-dashboard) input[type="file"].form-input::file-selector-button,
body:is(.seller-dashboard, .admin-dashboard) input[type="file"].form-input::-webkit-file-upload-button {
    margin-right: 14px;
    padding: 6px 16px;
    border-radius: 9999px;
    border: 2px solid var(--sm-ink);
    background: var(--sm-primary);
    color: var(--sm-ink);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 800;
    box-shadow: 2px 2px 0px 0px var(--sm-ink);
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: middle;
}

body:is(.seller-dashboard, .admin-dashboard) input[type="file"].form-input::file-selector-button:hover,
body:is(.seller-dashboard, .admin-dashboard) input[type="file"].form-input::-webkit-file-upload-button:hover {
    background: var(--sm-primary-hover);
    color: var(--sm-on-primary);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px 0px var(--sm-ink);
}

/* Form focus uses a border-color cue so controls never show a second outline ring. */
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus:not(header *):not(.home-navbar *) {
    outline: none !important;
    outline-offset: 0 !important;
}

body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-visible:not(header *):not(.home-navbar *) {
    border-color: var(--sm-primary) !important;
}

/* Constrain wide public content and keep responsive controls from causing overflow. */
body:not(.home-page) :is(.max-w-\[1400px\], .max-w-6xl, .max-w-7xl) {
    max-width: var(--container);
    padding-inline: var(--gutter) !important;
}

body:not(.home-page) :is(.product-card-grid, .grid) {
    min-width: 0;
}

body:not(.home-page) img {
    border-radius: 16px;
}

@media (max-width: 639px) {
    body:not(.home-page):not(.public-site-page) footer {
        border-radius: 28px 28px 0 0;
    }

    body:not(.home-page) :is(th, td) {
        padding: .65rem .55rem;
    }

    body:is(.seller-dashboard, .admin-dashboard) main {
        padding: 12px !important;
    }
}

body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-footer {
    border-top: 2px solid var(--sm-on-primary);
    border-radius: 0;
    background: transparent !important;
    opacity: 1;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-avatar {
    background: var(--sm-bg);
    color: var(--sm-ink);
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-name,
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-subtitle {
    opacity: 1;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-name {
    color: var(--sm-on-primary) !important;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-subtitle {
    color: #EAF1F8 !important;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-logout-button {
    min-height: 44px;
    gap: 8px;
    padding: 0 16px;
    border: 3px solid var(--sm-ink);
    background: var(--sm-surface) !important;
    color: var(--sm-ink) !important;
    box-shadow: 0 4px 0 var(--sm-ink);
    font-size: 14px;
    font-weight: 700;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-logout-button svg {
    width: 18px;
    height: 18px;
    color: var(--sm-ink) !important;
    stroke: currentColor;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-logout-button:hover {
    background: var(--sm-primary-soft) !important;
    color: var(--sm-ink) !important;
}
body.seller-dashboard .app-topbar .dashboard-catalog-button {
    min-height: 46px !important;
    gap: 8px;
    padding: 0 20px;
    white-space: nowrap;
}

.ui-status-badge {
    min-height: 28px;
    gap: 6px;
    border-width: 2px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.ui-status-badge--active {
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}
.ui-status-badge--pending {
    background: var(--sm-accent);
    color: var(--sm-on-accent);
}
.ui-status-badge--rejected {
    background: #FDECEC;
    color: #8A1F1F;
}
.ui-status-badge--muted {
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}

.seller-dashboard-page {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    color: var(--sm-ink);
}
.seller-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 28px;
}
.seller-dashboard-welcome h2 {
    margin: 0;
    color: var(--sm-ink);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.2;
}
.seller-dashboard-welcome p {
    margin: 7px 0 0;
    color: var(--sm-text-muted);
    font-size: 15px;
}
.seller-dashboard-welcome .seller-dashboard-add {
    flex: 0 0 auto;
}
.seller-dashboard-summary {
    margin-bottom: 30px;
}
.seller-dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
}
.seller-dashboard-section-heading h2 {
    margin: 0;
    color: var(--sm-ink);
    font-size: 20px;
    font-weight: 800;
}
.seller-dashboard-section-heading p {
    margin: 4px 0 0;
    color: var(--sm-text-muted);
    font-size: 14px;
}
.seller-dashboard-text-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--sm-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.seller-dashboard-text-link:hover {
    color: var(--sm-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.seller-dashboard-text-link:focus-visible,
.seller-dashboard-edit:focus-visible,
.seller-dashboard-add:focus-visible {
    outline: 3px solid var(--sm-primary);
    outline-offset: 3px;
}
.seller-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: stretch;
    gap: 20px;
}
.ui-card.seller-dashboard-stat {
    display: flex;
    min-width: 0;
    min-height: 154px;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}
.seller-dashboard-stat__heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}
.seller-dashboard-stat__icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}
.seller-dashboard-stat__label {
    color: var(--sm-text-muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.seller-dashboard-stat__value {
    margin: 12px 0 0;
    color: var(--sm-ink);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
}
.seller-dashboard-stat--pending.has-pending .seller-dashboard-stat__icon {
    background: var(--sm-accent);
    color: var(--sm-on-accent);
}
.seller-dashboard-content {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
}
.ui-card.seller-dashboard-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.seller-dashboard-panel__header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    border-bottom: 2px solid var(--sm-primary-soft);
}
.seller-dashboard-panel__header h2 {
    margin: 0;
    color: var(--sm-ink);
    font-size: 18px;
    font-weight: 800;
}
.seller-dashboard-panel__header .seller-dashboard-text-link {
    flex: 0 0 auto;
}
.seller-dashboard-table-wrap {
    min-width: 0;
    flex: 1;
}
.seller-dashboard-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
}
.seller-dashboard-table__status { width: 110px; }
.seller-dashboard-table__views { width: 80px; }
.seller-dashboard-table__actions { width: 96px; }
.seller-dashboard-table thead {
    background: var(--sm-primary-soft);
}
.seller-dashboard-table th,
.seller-dashboard-table td {
    padding: 12px 24px;
    vertical-align: middle;
}
.seller-dashboard-table th {
    color: var(--sm-text-muted);
    font-size: 13px;
    font-weight: 600;
}
.seller-dashboard-table tbody tr + tr {
    border-top: 2px solid var(--sm-primary-soft);
}
.seller-dashboard-table tbody tr:hover {
    background: var(--sm-bg);
}
.seller-dashboard-table th.is-numeric,
.seller-dashboard-table__views-cell,
.seller-dashboard-table__action-cell {
    text-align: right;
}
.seller-dashboard-table__product {
    min-width: 0;
}
.seller-dashboard-product-name,
.seller-dashboard-product-price {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seller-dashboard-product-name {
    color: var(--sm-ink);
    font-size: 16px;
    font-weight: 600;
}
.seller-dashboard-product-price {
    margin-top: 3px;
    color: var(--sm-text-muted);
    font-size: 14px;
}
.seller-dashboard-table__views-cell {
    color: var(--sm-ink);
    font-size: 14px;
    font-weight: 600;
}
.seller-dashboard-edit {
    display: inline-flex;
    min-width: 64px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-surface);
    color: var(--sm-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.seller-dashboard-edit:hover { background: var(--sm-primary-soft); }
.seller-dashboard-table__empty {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    color: var(--sm-text-muted);
    font-size: 14px;
}
.seller-dashboard-popular__list {
    display: grid;
    flex: 1;
    align-content: start;
    margin: 0;
    padding: 4px 24px 0;
    list-style: none;
}
.seller-dashboard-popular__item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 2px solid var(--sm-primary-soft);
}
.seller-dashboard-popular__rank {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
    font-size: 15px;
    font-weight: 800;
}
.seller-dashboard-popular__rank.is-first { background: var(--sm-accent); }
.seller-dashboard-popular__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.seller-dashboard-popular__name {
    overflow: hidden;
    color: var(--sm-ink);
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seller-dashboard-popular__meta {
    color: var(--sm-text-muted);
    font-size: 14px;
}
.seller-dashboard-popular__empty {
    padding: 18px 0;
    color: var(--sm-text-muted);
    font-size: 14px;
}
.seller-dashboard-popular__link {
    align-self: flex-start;
    margin: 6px 24px 10px;
}
.ui-card.seller-dashboard-promo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 24px;
    border-radius: 20px;
    box-shadow: 0 4px 0 var(--sm-ink);
}
.seller-dashboard-promo__icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
}
.seller-dashboard-promo h2 {
    margin: 0;
    color: var(--sm-ink);
    font-size: 17px;
    font-weight: 700;
}
.seller-dashboard-promo p {
    margin: 4px 0 0;
    color: var(--sm-text-muted);
    font-size: 15px;
}
body.seller-dashboard :is(.seller-dashboard-page a, .seller-dashboard-page button):focus-visible {
    outline: 3px solid var(--sm-primary);
    outline-offset: 3px;
}

@media (max-width: 1000px) {
    .seller-dashboard-content { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .seller-dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }
    .seller-dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .seller-dashboard-panel__header {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 16px;
    }
    .seller-dashboard-table__status { width: 84px; }
    .seller-dashboard-table__views { width: 58px; }
    .seller-dashboard-table__actions { width: 64px; }
    .seller-dashboard-table th,
    .seller-dashboard-table td {
        padding: 10px 8px;
    }
    .seller-dashboard-table th:first-child,
    .seller-dashboard-table td:first-child { padding-left: 16px; }
    .seller-dashboard-table th:last-child,
    .seller-dashboard-table td:last-child { padding-right: 16px; }
    .seller-dashboard-table .ui-status-badge {
        gap: 4px;
        padding-right: 6px;
        padding-left: 6px;
        font-size: 12px;
    }
    .seller-dashboard-table .ui-status-badge svg {
        width: 12px;
        height: 12px;
    }
    .seller-dashboard-edit {
        min-width: 48px;
        gap: 3px;
        padding: 0 5px;
    }
    .seller-dashboard-popular__list { padding-right: 16px; padding-left: 16px; }
    .seller-dashboard-popular__link { margin-left: 16px; }
    .ui-card.seller-dashboard-promo { align-items: flex-start; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {

    body:not(.home-page) *,
    body:not(.home-page) *::before,
    body:not(.home-page) *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ── Admin Notification Dropdown Refinement ── */
.admin-notification-dropdown {
    width: min(380px, calc(100vw - 24px)) !important;
    max-width: 380px !important;
    background: var(--sm-surface) !important;
    border: 1.5px solid color-mix(in srgb, var(--sm-ink) 20%, transparent) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px -4px color-mix(in srgb, var(--sm-ink) 16%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--sm-ink) 8%, transparent) !important;
    max-height: 420px !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 50 !important;
}

.admin-notification-dropdown[style*="display: none"] {
    display: none !important;
}

@media (min-width: 640px) {
    .admin-notification-dropdown {
        width: 380px !important;
    }
}

.admin-notification-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: var(--sm-surface) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--sm-ink) 10%, transparent) !important;
    flex-shrink: 0 !important;
}

.notification-header-action {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--sm-primary) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transform: none !important;
    transition: color 0.15s ease !important;
}

.notification-header-action:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--sm-primary-hover) !important;
    text-decoration: underline !important;
}

.admin-notification-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 350px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Slim scrollbar for notification list */
.admin-notification-list::-webkit-scrollbar {
    width: 5px !important;
}

.admin-notification-list::-webkit-scrollbar-track {
    background: transparent !important;
}

.admin-notification-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sm-ink) 18%, transparent) !important;
    border-radius: 999px !important;
}

.admin-notification-list::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--sm-ink) 35%, transparent) !important;
}

/* Notification Item Card */
.notification-item-card {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--sm-ink) 5%, transparent) !important;
    transform: none !important;
    transition: all 0.15s ease-in-out !important;
    color: var(--sm-ink) !important;
}

.notification-item-card.is-unread {
    background-color: var(--sm-bg) !important;
    border: 1px solid color-mix(in srgb, var(--sm-primary) 30%, transparent) !important;
    border-left: 3.5px solid var(--sm-primary) !important;
}

.notification-item-card.is-read {
    background-color: var(--sm-surface) !important;
    border: 1px solid color-mix(in srgb, var(--sm-ink) 10%, transparent) !important;
    border-left: 3.5px solid color-mix(in srgb, var(--sm-ink) 15%, transparent) !important;
}

.notification-item-card:hover {
    background-color: var(--sm-primary-soft) !important;
    border-color: color-mix(in srgb, var(--sm-primary) 45%, transparent) !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--sm-ink) 8%, transparent) !important;
    transform: translateY(-1px) !important;
}

.notification-item-card:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--sm-ink) 5%, transparent) !important;
}

/* Bell button reset to perfect circle */
.notification-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Search icons need dedicated room after the shared form-input resets. */
body:is(.seller-dashboard, .admin-dashboard) .admin-search-field {
    position: relative;
}

body:is(.seller-dashboard, .admin-dashboard) .admin-search-field > svg {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--sm-text-muted);
}

body:is(.seller-dashboard, .admin-dashboard) .admin-search-field input.form-input:not([type="checkbox"]):not([type="radio"]) {
    box-sizing: border-box;
    padding-left: 48px !important;
}
.admin-seller-form { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; max-width:1240px; }
.admin-seller-form__profile > .ui-card { position:sticky; top:88px; }
.admin-seller-form__identity { display:grid; gap:4px; margin-top:20px; text-align:center; color:var(--sm-ink); }
.admin-seller-form__identity span { color:var(--sm-text-muted); }
.admin-seller-form__details { display:grid; gap:20px; min-width:0; }
.admin-seller-form__details h2 { margin:0 0 18px; color:var(--sm-ink); font-size:20px; font-weight:700; }
.ui-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.ui-form-grid__full { grid-column:1/-1; }
@media(max-width:899px) { .admin-seller-form { grid-template-columns:1fr; } .admin-seller-form__profile > .ui-card { position:static; } }
@media(max-width:560px) { .ui-form-grid { grid-template-columns:1fr; } .ui-form-grid__full { grid-column:auto; } }

/* Final auth, dashboard interaction, and seller action overrides */
body.auth-page--login { min-height:100vh!important; justify-content:center!important; padding:28px!important; background:var(--sm-bg)!important; }
body.auth-page--login .auth-card { width:100%; max-width:440px; margin:0; padding:32px; overflow:visible; border:3px solid var(--sm-ink); border-radius:24px; background:var(--sm-surface); box-shadow:0 5px 0 var(--sm-ink); }
body.auth-page--login .auth-login-content { display:grid; gap:18px; }
body.auth-page--login .auth-login-content .auth-wordmark { justify-self:center; margin:0 0 2px; }
body.auth-page--login .auth-login-content h1 { margin:0; text-align:center; color:var(--sm-ink); font-size:28px; font-weight:700; line-height:1.2; }
body.auth-page--login .auth-login-subtitle { margin:-10px 0 0; text-align:center; color:var(--sm-text-muted); font-size:15px; line-height:1.5; }
body.auth-page--login .auth-error-summary { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:2px solid #8A1F1F; border-radius:14px; background:#FDECEC; color:#8A1F1F; font-size:14px; line-height:1.45; }
body.auth-page--login .auth-error-summary__icon { display:grid; width:21px; height:21px; flex:0 0 21px; place-items:center; border:2px solid currentColor; border-radius:50%; font-weight:800; }
body.auth-page--login .auth-error-summary ul { margin:5px 0 0; padding-left:18px; }
body.auth-page--login .auth-login-form { display:grid; gap:18px; margin:0; }
body.auth-page--login .auth-login-field { display:grid; gap:7px; }
body.auth-page--login .auth-login-field label { color:var(--sm-ink); font-size:14px; font-weight:600; }
body.auth-page--login .auth-login-field input { width:100%; min-height:48px; padding:10px 14px; border:2px solid var(--sm-input-border); border-radius:14px; background:var(--sm-surface); color:var(--sm-ink); font-size:16px; box-shadow:none; }
body.auth-page--login .auth-login-field input::placeholder { color:var(--sm-text-muted); opacity:1; }
body.auth-page--login .auth-login-field input:focus { outline:3px solid transparent; border-color:var(--sm-primary); box-shadow:0 0 0 4px rgb(63 106 150 / 25%); }
body.auth-page--login .auth-field-error { color:#8A1F1F!important; font-size:13px!important; font-weight:600; }
body.auth-page--login .auth-password-wrap { position:relative; }
body.auth-page--login .auth-password-wrap input { padding-right:54px; }
body.auth-page--login .auth-password-toggle { position:absolute; top:2px; right:2px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px; background:transparent; color:var(--sm-ink); cursor:pointer; }
body.auth-page--login .auth-password-toggle svg { width:21px; height:21px; }
body.auth-page--login .auth-password-toggle:hover { background:var(--sm-primary-soft); }
body.auth-page--login .auth-password-toggle:focus-visible { outline:3px solid var(--sm-primary); outline-offset:2px; }
body.auth-page--login .auth-login-options { display:flex; justify-content:space-between; align-items:center; gap:12px; }
body.auth-page--login .auth-remember-label { display:inline-flex; min-height:44px; align-items:center; gap:9px; color:var(--sm-ink); font-size:13px; font-weight:600; cursor:pointer; }
body.auth-page--login .auth-remember-label input { appearance:none; width:22px; height:22px; display:grid; flex:0 0 22px; place-content:center; margin:0; border:2px solid var(--sm-ink); border-radius:6px; background:var(--sm-surface); }
body.auth-page--login .auth-remember-label input::before { content:""; width:10px; height:6px; border:solid white; border-width:0 0 2px 2px; transform:rotate(-45deg) scale(0); }
body.auth-page--login .auth-remember-label input:checked { background:var(--sm-primary); }
body.auth-page--login .auth-remember-label input:checked::before { transform:rotate(-45deg) scale(1); }
body.auth-page--login .auth-remember-label input:focus-visible { outline:3px solid var(--sm-primary); outline-offset:3px; }
body.auth-page--login .auth-login-options>a { display:inline-flex; min-height:44px; align-items:center; color:var(--sm-primary); font-size:13px; font-weight:700; text-decoration:none; }
body.auth-page--login .auth-login-options>a:hover { color:var(--sm-primary-hover); text-decoration:underline; }
body.auth-page--login .auth-login-submit { width:100%; min-height:50px; border:3px solid var(--sm-ink); border-radius:999px; background:var(--sm-accent); color:var(--sm-on-accent); box-shadow:0 5px 0 var(--sm-ink); font-size:16px; font-weight:800; cursor:pointer; }
body.auth-page--login .auth-login-submit:hover { background:var(--sm-accent-hover); }
body.auth-page--login .auth-login-submit:focus-visible,body.auth-page--login .auth-google-button:focus-visible { outline:3px solid var(--sm-primary); outline-offset:4px; }
body.auth-page--login .auth-login-submit:active { transform:translateY(2px); box-shadow:0 3px 0 var(--sm-ink); }
body.auth-page--login .auth-login-submit:disabled { opacity:.65; cursor:wait; }
body.auth-page--login .auth-login-divider { position:relative; display:flex; justify-content:center; align-items:center; min-height:24px; color:var(--sm-text-muted); font-size:14px; }
body.auth-page--login .auth-login-divider::before { content:""; position:absolute; inset-inline:0; top:50%; border-top:2px solid var(--sm-input-border); }
body.auth-page--login .auth-login-divider span { position:relative; padding:0 12px; background:var(--sm-surface); }
body.auth-page--login .auth-google-button { min-height:50px; display:flex; align-items:center; justify-content:center; gap:10px; border:3px solid var(--sm-ink); border-radius:999px; background:var(--sm-surface); color:var(--sm-ink); box-shadow:0 4px 0 var(--sm-ink); font-size:15px; font-weight:700; text-decoration:none; }
body.auth-page--login .auth-google-button:hover { background:var(--sm-primary-soft); }
body.auth-page--login .auth-google-button:active { transform:translateY(2px); box-shadow:0 2px 0 var(--sm-ink); }
body.auth-page--login .auth-google-logo { width:20px; height:20px; flex:0 0 20px; }
body.auth-page--login [x-cloak] { display:none!important; }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-link { color:var(--sm-on-primary); }
body.admin-dashboard #dashboardSidebar .sidebar-user-name { color:var(--sm-on-primary) !important; }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-link:hover,body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-link:focus-visible { background:var(--sm-primary-hover); color:var(--sm-on-primary); border-color:var(--sm-on-primary); outline:3px solid transparent; }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-link.active,body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-link.active:hover,body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-link.active:focus-visible { background:var(--sm-bg); color:var(--sm-ink); border-color:var(--sm-ink); }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-link.active svg { color:var(--sm-ink)!important; }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-logout-button { background:var(--sm-surface)!important; color:var(--sm-ink)!important; border-color:var(--sm-ink)!important; }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-logout-button:hover,body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-logout-button:focus-visible { background:var(--sm-primary-hover)!important; color:var(--sm-on-primary)!important; }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar :is(.sidebar-logout-button,.sidebar-link):focus-visible { outline:3px solid var(--sm-accent); outline-offset:3px; }
body:is(.seller-dashboard,.admin-dashboard) #dashboardSidebar .sidebar-logout-button:active { background:var(--sm-ink)!important; color:var(--sm-on-primary)!important; }
body:is(.seller-dashboard,.admin-dashboard) .seller-action--deactivate { background:#3F6B95!important; color:#fff!important; border-color:#1F3550!important; }
body:is(.seller-dashboard,.admin-dashboard) .seller-action--activate { background:#15803D!important; color:#fff!important; border-color:#1F3550!important; }
body:is(.seller-dashboard,.admin-dashboard) .seller-action--delete { background:#DC2626!important; color:#fff!important; border-color:#1F3550!important; }
body:is(.seller-dashboard,.admin-dashboard) .seller-action--deactivate:hover { background:#35597E!important; color:#fff!important; }
body:is(.seller-dashboard,.admin-dashboard) .seller-action--activate:hover { background:#166534!important; color:#fff!important; }
body:is(.seller-dashboard,.admin-dashboard) .seller-action--delete:hover { background:#B91C1C!important; color:#fff!important; }
@media(max-width:1023px) { body.auth-page--login .auth-login-shell { display:block!important; width:min(440px,100%)!important; min-height:auto; } body.auth-page--login .auth-login-hero { display:none!important; } }
@media(max-width:480px) { body.auth-page--login { padding:18px!important; } body.auth-page--login .auth-login-shell { width:100%!important; } body.auth-page--login .auth-card { padding:24px 20px; } }

body.admin-dashboard .seller-export-button { background:var(--sm-primary)!important; color:var(--sm-on-primary)!important; border-color:var(--sm-ink)!important; }
body.admin-dashboard .seller-export-button:hover { background:var(--sm-primary-hover)!important; color:var(--sm-on-primary)!important; }
body.admin-dashboard .seller-confirm-submit--delete { background:#DC2626!important; color:#fff!important; border-color:#1F3550!important; }
body.admin-dashboard .seller-confirm-submit--delete:hover { background:#B91C1C!important; color:#fff!important; }

@media (max-width: 899px) {
    body.public-site-page .home-navbar-shell {
        position: fixed;
        z-index: 99999;
        top: 0;
        right: 0;
        left: 0;
        display: block;
        padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
        background: transparent;
        pointer-events: none;
    }

    body.public-site-page .home-navbar {
        position: relative;
        inset: auto;
        transform: none;
        pointer-events: auto;
    }

    body.public-site-page .home-navbar>div:first-child {
        position: relative;
        box-sizing: border-box;
        height: 56px;
        min-height: 56px;
        padding: 5px 10px;
        border: 2px solid var(--sm-ink);
        border-radius: 999px !important;
        background: var(--sm-primary) !important;
        box-shadow: 0 4px 0 var(--sm-ink);
    }

    body.public-site-page .home-navbar :is(#mobile-menu-btn, button[aria-label="Cari"]) {
        display: inline-flex;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--sm-ink);
        border-radius: 50%;
        padding: 0;
        background: var(--sm-primary-soft);
        color: var(--sm-ink);
    }

    body.public-site-page .home-navbar #mobile-navigation-menu {
        position: absolute;
        top: calc(100% + 11px);
        right: 16px;
        left: 16px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 0;
        border: 3px solid var(--sm-ink);
        border-radius: 22px;
        padding: 12px;
        background: var(--sm-surface);
        box-shadow: 0 5px 0 var(--sm-ink);
        color: var(--sm-ink);
    }

    body.public-site-page .home-navbar #mobile-navigation-menu a {
        display: flex;
        min-height: 48px;
        align-items: center;
        border-radius: 12px;
        padding: 10px 14px;
        background: var(--sm-surface);
        color: var(--sm-ink);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    body.public-site-page .home-navbar #mobile-navigation-menu a:hover,
    body.public-site-page .home-navbar #mobile-navigation-menu a:focus-visible {
        background: var(--sm-primary-soft);
        color: var(--sm-ink);
    }

    body.public-site-page .home-navbar #mobile-navigation-menu :is(#mobile-nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard) {
        min-height: 48px;
        justify-content: center;
        border: 3px solid var(--sm-ink);
        border-radius: 999px;
        background: var(--sm-primary) !important;
        box-shadow: 0 4px 0 var(--sm-ink);
        color: var(--sm-on-primary) !important;
    }

    body.public-site-page .home-navbar #mobile-navigation-menu :is(#mobile-nav-login, #mobile-nav-admin-dashboard, #mobile-nav-penjual-dashboard):hover {
        background: var(--sm-primary-hover) !important;
        color: var(--sm-on-primary) !important;
    }

    body.public-site-page main {
        padding-top: 0 !important;
    }

    body.public-site-page > main {
        padding-top: calc(78px + env(safe-area-inset-top)) !important;
    }
}
body:is(.seller-dashboard,.admin-dashboard) .seller-action { min-height:44px; }

/* Shared wordmark: the same mark is used in public, auth, and dashboard navigation. */
.sm-brand-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 4px 16px;
    border: 2px solid var(--sm-ink);
    border-radius: 999px;
    background: var(--sm-surface);
    color: var(--sm-ink);
    font-family: 'Fredoka', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.sm-brand-logo > span {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: inherit;
    line-height: inherit;
}

.sm-brand-logo > span:first-child { color: var(--sm-ink); }
.sm-brand-logo > span:last-child { color: var(--sm-primary); }

/* Login split layout: informative brand panel at desktop, focused form on mobile. */
body.auth-login-layout {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: block !important;
    padding: 0 !important;
    background: var(--sm-bg) !important;
}

body.auth-login-layout .auth-login-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 45%) minmax(0, 55%) !important;
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    align-items: stretch;
    gap: 0;
}

body.auth-login-layout .auth-login-hero {
    display: flex !important;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 48px;
    border-right: 3px solid var(--sm-ink);
    background: var(--sm-primary);
    color: var(--sm-on-primary);
    text-align: left;
}

body.auth-login-layout .auth-login-hero > .sm-brand-logo { margin-bottom: 8px; }

body.auth-page--login.auth-login-layout .auth-login-hero .auth-login-tagline {
    max-width: 16ch;
    margin: 0;
    color: var(--sm-on-primary);
    font-size: clamp(32px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
}

body.auth-login-layout .auth-login-benefits {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.auth-login-layout .auth-login-benefits li {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    color: var(--sm-on-primary);
    font-size: 16px;
    font-weight: 600;
}

body.auth-login-layout .auth-login-benefit-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-surface);
    color: var(--sm-ink);
}

body.auth-login-layout .auth-login-column {
    display: flex;
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px clamp(24px, 5vw, 72px);
    background: var(--sm-bg);
}

body.auth-login-layout .auth-login-column > .auth-home-link,
body.auth-login-layout .auth-login-column > .auth-card {
    width: min(100%, 440px);
}

body.auth-login-layout .auth-login-column > .auth-home-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--sm-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

body.auth-login-layout .auth-home-link svg {
    flex: 0 0 18px;
    transition: transform .16s ease;
}

body.auth-login-layout .auth-home-link:hover { text-decoration: underline; }
body.auth-login-layout .auth-home-link:hover svg { transform: translateX(-2px); }
body.auth-login-layout .auth-home-link:focus-visible { outline: 3px solid var(--sm-primary); outline-offset: 3px; border-radius: 4px; }
body.auth-login-layout .auth-login-content .auth-wordmark { display: none; }
body.auth-login-layout .auth-card { width: 100%; max-width: 440px; }

@media (max-width: 899px) {
    body.auth-login-layout .auth-login-shell {
        display: flex !important;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: center;
        justify-content: center;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }

    body.auth-login-layout .auth-login-hero { display: none !important; }

    body.auth-login-layout .auth-login-column {
        width: min(100%, 440px);
        margin: auto;
        padding: 0;
        background: transparent;
    }

    body.auth-login-layout .auth-login-content .auth-wordmark { display: inline-flex; }
}

@media (max-width: 480px) {
    body.auth-login-layout .auth-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-login-layout .auth-home-link svg { transition: none; }
}

/* Keep admin seller row actions styled and aligned in one compact row. */
body.admin-dashboard .seller-action-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: end;
    gap: 6px;
    min-width: 242px;
}

body.admin-dashboard .seller-action-list > .seller-confirm-form {
    display: contents;
    margin: 0;
}

body.admin-dashboard .seller-action {
    display: inline-flex;
    min-width: 82px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 2px solid var(--sm-ink);
    border-radius: 999px !important;
    background: var(--sm-surface);
    color: var(--sm-ink);
    box-shadow: 0 3px 0 var(--sm-ink);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

body.admin-dashboard .seller-action--detail {
    border-color: var(--sm-ink);
    background: var(--sm-surface);
    color: var(--sm-ink);
}

body.admin-dashboard .seller-action--edit {
    border-color: var(--sm-accent);
    background: var(--sm-surface);
    color: #D97706;
}

body.admin-dashboard .seller-action--detail:hover { background: var(--sm-primary-soft); color: var(--sm-ink); }
body.admin-dashboard .seller-action--edit:hover { background: var(--sm-surface); color: #D97706; text-decoration: underline; }
body.admin-dashboard .seller-action:is(:hover, :focus-visible) { transform: translateY(-1px); box-shadow: 0 4px 0 var(--sm-ink); }
body.admin-dashboard .seller-action:focus-visible { outline: 3px solid var(--sm-primary); outline-offset: 2px; }
body.admin-dashboard .seller-action:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--sm-ink); }
@media (max-width: 640px) {
    body.admin-dashboard .seller-action-list { justify-content: start; }
}

/* Submit-button theme defaults are broad; preserve each seller action's own semantic color. */
body.admin-dashboard .seller-action-list .seller-action.seller-action--deactivate {
    border-color: var(--sm-ink) !important;
    background: #3F6B95 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 0 var(--sm-ink) !important;
}
body.admin-dashboard .seller-action-list .seller-action.seller-action--deactivate:hover { background: #35597E !important; }
body.admin-dashboard .seller-action-list .seller-action.seller-action--activate {
    border-color: var(--sm-ink) !important;
    background: #15803D !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 0 var(--sm-ink) !important;
}
body.admin-dashboard .seller-action-list .seller-action.seller-action--activate:hover { background: #166534 !important; }
body.admin-dashboard .seller-action-list .seller-action.seller-action--delete {
    border-color: var(--sm-ink) !important;
    background: #DC2626 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 0 var(--sm-ink) !important;
}
body.admin-dashboard .seller-action-list .seller-action.seller-action--delete:hover,
body.admin-dashboard .seller-action-list .seller-action.seller-action--delete:focus-visible { background: #B91C1C !important; }

/* Keep the destructive action visibly red even against generic submit-button rules. */
body.admin-dashboard button[type="submit"].seller-action.seller-action--delete {
    background-color: #DC2626 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
}
body.admin-dashboard button[type="submit"].seller-action.seller-action--delete:hover,
body.admin-dashboard button[type="submit"].seller-action.seller-action--delete:focus-visible {
    background-color: #B91C1C !important;
    background-image: none !important;
}

body:is(.seller-dashboard, .admin-dashboard) .app-sidebar {
    width: var(--sm-sidebar-width, 264px);
    border-right: 3px solid var(--sm-ink);
    background: var(--sm-primary);
}
body:is(.seller-dashboard, .admin-dashboard) .app-sidebar .sidebar-brand-header,
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-brand {
    height: 72px;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 3px solid var(--sm-ink);
    background: var(--sm-surface);
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-brand .sm-brand-logo {
    min-height: 44px;
    padding: 4px 12px;
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-surface);
    box-shadow: 3px 3px 0 var(--sm-ink);
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-role-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 3px 9px;
    border: 2px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-section-title {
    padding: 16px 16px 6px;
    color: var(--sm-on-primary) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-link {
    min-height: 46px;
    gap: 12px;
    margin: 4px 12px;
    padding: 8px 14px;
    border: 2px solid transparent;
    color: var(--sm-on-primary);
    font-size: 14px;
    font-weight: 600;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-link svg {
    width: 22px;
    height: 22px;
    color: currentColor;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-link:hover {
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
    border-color: var(--sm-ink);
    box-shadow: none;
    transform: none;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-link.active,
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-link.active:hover {
    min-height: 46px;
    border: 2px solid var(--sm-ink);
    background: var(--sm-bg);
    color: var(--sm-ink);
    box-shadow: 0 3px 0 var(--sm-ink);
    transform: none;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-link.active svg {
    color: var(--sm-ink) !important;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar :is(a, button):focus-visible,
body:is(.seller-dashboard, .admin-dashboard) .app-topbar :is(a, button):focus-visible {
    outline: 3px solid var(--sm-ink);
    outline-offset: 3px;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-link:focus-visible {
    outline-color: var(--sm-on-primary);
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-footer {
    display: grid;
    gap: 12px;
    flex-shrink: 0;
    padding: 16px;
    border-top: 2px solid var(--sm-on-primary);
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-profile {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
    font-size: 16px;
    font-weight: 800;
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-profile-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-name,
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-name {
    color: var(--sm-on-primary);
    font-size: 16px;
    font-weight: 600;
}
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-subtitle {
    color: #EAF1F8;
    font-size: 13px;
    font-weight: 500;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-logout-button,
body:is(.seller-dashboard, .admin-dashboard) .dashboard-catalog-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 3px solid var(--sm-ink);
    border-radius: var(--r-pill);
    background: var(--sm-surface);
    color: var(--sm-ink);
    box-shadow: 0 4px 0 var(--sm-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-logout-button {
    width: 100%;
    cursor: pointer;
}
body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .sidebar-logout-button:hover,
body:is(.seller-dashboard, .admin-dashboard) .dashboard-catalog-button:hover {
    background: var(--sm-primary-soft);
}
body:is(.seller-dashboard, .admin-dashboard) .app-topbar {
    height: 72px;
    min-height: 72px;
    padding: 0 24px;
}
body:is(.seller-dashboard, .admin-dashboard) .app-topbar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
}
body:is(.seller-dashboard, .admin-dashboard) .app-topbar [data-sidebar-toggle] {
    display: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sm-ink);
    background: var(--sm-surface);
    color: var(--sm-ink);
}
body.seller-dashboard .dashboard-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.seller-dashboard .dashboard-catalog-icon,
body.seller-dashboard .dashboard-profile-menu {
    display: none;
    position: relative;
}
body.seller-dashboard .dashboard-profile-trigger {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 3px solid var(--sm-ink);
    border-radius: 50%;
    background: var(--sm-primary-soft);
    color: var(--sm-ink);
    box-shadow: 0 3px 0 var(--sm-ink);
    font-size: 16px;
    font-weight: 800;
}
body.seller-dashboard .dashboard-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    width: min(300px, calc(100vw - 24px));
    padding: 12px;
    border: 3px solid var(--sm-ink);
    border-radius: 18px;
    background: var(--sm-surface);
    box-shadow: 0 5px 0 var(--sm-ink);
}
body.seller-dashboard .dashboard-profile-dropdown__identity {
    display: grid;
    gap: 3px;
    padding: 5px 8px 10px;
    border-bottom: 2px solid var(--sm-primary-soft);
}
body.seller-dashboard .dashboard-profile-dropdown__identity :is(strong, span) {
    overflow: hidden;
    color: var(--sm-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.seller-dashboard .dashboard-profile-dropdown__identity strong { font-size: 15px; }
body.seller-dashboard .dashboard-profile-dropdown__identity span { color: var(--sm-text-muted); font-size: 13px; }
body.seller-dashboard .dashboard-profile-dropdown > a,
body.seller-dashboard .dashboard-profile-dropdown form button {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sm-ink);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
body.seller-dashboard .dashboard-profile-dropdown > a:hover,
body.seller-dashboard .dashboard-profile-dropdown form button:hover { background: var(--sm-primary-soft); }
body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-backdrop { display: none; }

/* ── Dashboard Shell & Fixed Sidebar Architecture ── */
:root {
    --sm-sidebar-width: 264px;
}

html.dashboard-document {
    scroll-padding-top: 72px;
}

body:is(.seller-dashboard, .admin-dashboard).dashboard-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-backdrop {
    display: none;
}

body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-brand {
    flex-shrink: 0;
}

body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-menu {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 241, 248, .55) transparent;
}

body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-menu::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(234, 241, 248, .55);
}

body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar .dashboard-sidebar-footer {
    flex-shrink: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

body:is(.seller-dashboard, .admin-dashboard) .app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--sm-surface);
    border-bottom: 3px solid var(--sm-ink);
}

body:is(.seller-dashboard, .admin-dashboard) .dashboard-main {
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: clip;
}

/* Desktop layout (>= 900px): Fixed sidebar, offset content shell */
@media (min-width: 900px) {
    body:is(.seller-dashboard, .admin-dashboard) .app-sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sm-sidebar-width, 264px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        z-index: 40 !important;
        flex-shrink: 0 !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

    body:is(.seller-dashboard, .admin-dashboard) .dashboard-content-shell {
        margin-left: var(--sm-sidebar-width, 264px) !important;
        width: calc(100% - var(--sm-sidebar-width, 264px)) !important;
        max-width: calc(100% - var(--sm-sidebar-width, 264px)) !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }

    body:is(.seller-dashboard, .admin-dashboard) .admin-flash {
        left: calc(var(--sm-sidebar-width, 264px) + 24px) !important;
    }

    body.seller-dashboard .dashboard-catalog-button--desktop {
        display: inline-flex;
    }
}

/* Mobile & Tablet layout (< 900px): Off-canvas drawer */
@media (max-width: 899px) {
    body:is(.seller-dashboard, .admin-dashboard) .app-sidebar {
        display: flex !important;
        position: fixed !important;
        z-index: 60 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(300px, calc(100vw - 48px)) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transform: translateX(-100%) !important;
        transition: transform .2s ease !important;
        box-shadow: 5px 0 0 var(--sm-ink) !important;
    }

    body:is(.seller-dashboard, .admin-dashboard):not(.mobile-sidebar-open) #dashboardSidebar {
        left: 0 !important;
        transform: translateX(-100%) !important;
    }

    body:is(.seller-dashboard, .admin-dashboard).mobile-sidebar-open #dashboardSidebar,
    body:is(.seller-dashboard, .admin-dashboard).mobile-sidebar-open .app-sidebar {
        left: 0 !important;
        transform: translateX(0) !important;
    }

    body:is(.seller-dashboard, .admin-dashboard).mobile-sidebar-open .dashboard-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        z-index: 50 !important;
        inset: 0 !important;
        background: color-mix(in srgb, var(--sm-ink) 64%, transparent) !important;
    }

    body:is(.seller-dashboard, .admin-dashboard) .dashboard-content-shell {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body:is(.seller-dashboard, .admin-dashboard) .app-topbar [data-sidebar-toggle] {
        display: inline-flex !important;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    body.seller-dashboard .dashboard-catalog-button--desktop {
        display: none;
    }
    body.seller-dashboard .dashboard-catalog-icon,
    body.seller-dashboard .dashboard-profile-menu {
        display: block;
    }
    body.seller-dashboard .dashboard-catalog-icon {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 3px solid var(--sm-ink);
        border-radius: 50%;
        background: var(--sm-surface);
        color: var(--sm-ink);
        box-shadow: 0 3px 0 var(--sm-ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.seller-dashboard, .admin-dashboard) .app-sidebar {
        transition: none;
    }
}

@media print {
    body:is(.seller-dashboard, .admin-dashboard) #dashboardSidebar,
    body:is(.seller-dashboard, .admin-dashboard) .app-topbar,
    body:is(.seller-dashboard, .admin-dashboard) .dashboard-sidebar-backdrop {
        display: none !important;
    }
}