/* =========================================================
   NEUMORPHISM THEME OVERRIDE
   ---------------------------------------------------------
   Loaded after app.css and fluid3d.css, so every rule here
   wins the cascade at equal specificity without needing
   !important. Re-themes the whole site to soft-UI: page and
   card surfaces share the same base color, and depth comes
   entirely from a light/dark shadow pair (never a border)
   simulating a surface pressed into or extruded from that
   same base material.

   True neumorphism needs a calm, near-flat background for the
   shadow illusion to read - so the animated aurora blobs and
   WebGL glow orbs are turned off here (elements/JS untouched,
   just visually hidden) in favor of one flat soft base color.
   ========================================================= */

:root {
    --neu-bg: #e6e9ef;
    --neu-light: #ffffff;
    --neu-dark: #b3bac6;
    --neu-ink: #333a4d;
    --neu-ink-soft: #5b6478;
    --neu-muted: #838da0;
    --neu-radius: 20px;

    --neu-raised: 7px 7px 15px var(--neu-dark), -7px -7px 15px var(--neu-light);
    --neu-raised-sm: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
    --neu-raised-lg: 10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light);
    --neu-pressed: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
    --neu-pressed-sm: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);

    /* Re-point the tokens app.css itself uses, so every rule that
       already references var(--bg)/var(--surface)/var(--border)/
       var(--ink) etc. (most of the file) falls in line for free. */
    --bg: var(--neu-bg);
    --surface: var(--neu-bg);
    --ink: var(--neu-ink);
    --ink-soft: var(--neu-ink-soft);
    --muted: var(--neu-muted);
    --border: transparent;
    --navy: var(--neu-bg);
    --navy-2: var(--neu-bg);
    --navy-glow: rgba(179, 186, 198, .5);
}

body {
    background: var(--neu-bg);
}

/* Ambient decoration doesn't suit a flat soft-UI background -
   left in the DOM/JS (harmless, just invisible) rather than ripped
   out, so nothing downstream that references these elements breaks. */
#aurora-bg,
#webgl-scene {
    display: none;
}


/* ---------------------------------------------------------
   NAVBAR
   --------------------------------------------------------- */

.site-header {
    background: var(--neu-bg);
    border-bottom: none;
    box-shadow: 0 6px 16px rgba(179, 186, 198, .45);
}

.brand,
.nav-links a,
.logout-button,
.profile-name,
.nav-weather {
    color: var(--neu-ink);
}

.nav-weather {
    background: transparent;
    box-shadow: var(--neu-pressed-sm);
}

.nav-links a:hover {
    opacity: 1;
    color: var(--brand);
}

.nav-search input {
    background: var(--neu-bg);
    box-shadow: var(--neu-pressed-sm);
    border: none;
    color: var(--neu-ink);
}

.nav-search input:focus {
    background: var(--neu-bg);
    border-color: transparent;
}

.nav-search input::placeholder {
    color: var(--neu-muted);
}

.nav-search button {
    box-shadow: var(--neu-raised-sm);
}

.nav-search button:hover {
    background: var(--brand-dark);
}

.profile-avatar {
    box-shadow: var(--neu-raised-sm);
}

.profile-dropdown,
.hero-banner-edit-panel,
.admin-profile-menu,
.news-modal-panel {
    background: var(--neu-bg);
    border: none;
    box-shadow: var(--neu-raised-lg);
}

.profile-dropdown .logout-button:hover {
    background: transparent;
    color: var(--brand);
}


/* ---------------------------------------------------------
   BUTTONS - raised by default, pressed while active/held.
   --------------------------------------------------------- */

.btn {
    border: none;
    box-shadow: var(--neu-raised-sm);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    box-shadow: var(--neu-pressed-sm);
    transform: translateY(0);
}

/* Every button variant (dark/primary, outline/secondary, danger) reads
   as the same neumorphic surface - just one consistent button look
   site-wide, same as "View cart" on the homepage hero. Includes the
   handful of buttons styled outside the .btn family entirely (search,
   add-to-cart, filter apply, sign in, banner-edit save). */
.btn.dark,
.btn-primary,
.btn.outline,
.btn-secondary,
.nav-search button,
.add-cart-button:not(:disabled),
.filter-button,
.auth-card form button,
.hero-banner-edit-panel button[type="submit"] {
    background: var(--neu-bg);
    color: var(--neu-ink);
    border: none;
}

.btn.dark:hover,
.btn-primary:hover,
.btn.outline:hover,
.btn-secondary:hover,
.nav-search button:hover,
.add-cart-button:hover:not(:disabled),
.filter-button:hover,
.auth-card form button:hover,
.hero-banner-edit-panel button[type="submit"]:hover {
    background: var(--neu-bg);
    color: var(--accent-orange);
    box-shadow: var(--neu-raised-sm);
}

/* Danger stays on the same raised neumorphic surface but reads as a
   destructive action (Cancel order, Delete) via red text/icon instead
   of the shared ink color, turning solid red only on hover. */
.btn.danger {
    background: var(--neu-bg);
    color: #d94436;
    border: none;
}

.btn.danger:hover {
    background: #d94436;
    color: #fff;
    box-shadow: var(--neu-raised-sm);
}

.qty-stepper {
    border: none;
    background: var(--neu-bg);
    box-shadow: var(--neu-pressed-sm);
}

.qty-btn:hover:not(:disabled) {
    background: transparent;
    color: var(--brand);
}

.qty-decrement,
.qty-increment {
    border-color: transparent;
}


/* ---------------------------------------------------------
   CARDS / PANELS / SURFACES
   Every "sheet" component in the site shares this look now -
   raised out of the same background it sits on.
   --------------------------------------------------------- */

.panel,
.product-card,
.form-card,
.auth-card,
.summary,
.order-card,
.cart-item,
.review,
.empty,
.stats > a,
.stats > div,
.coupon,
.news-card,
.approval-card,
.video-card {
    background: var(--neu-bg);
    border: none;
    box-shadow: var(--neu-raised);
}

.product-card.tilt-3d:hover,
.review.tilt-3d:hover,
.cart-item.tilt-3d:hover,
.order-card.tilt-3d:hover,
.summary.tilt-3d:hover,
.form-card.tilt-3d:hover,
.auth-card.tilt-3d:hover,
.panel.tilt-3d:hover,
.stats > a.tilt-3d:hover,
.stats > div.tilt-3d:hover,
.approval-card:hover {
    box-shadow: var(--neu-raised-lg);
}

.product-image,
.detail-image {
    background: var(--neu-bg);
    box-shadow: var(--neu-pressed);
}

.stats > a:hover {
    border-color: transparent;
}

.stats b {
    color: var(--neu-ink);
}


/* ---------------------------------------------------------
   FORM FIELDS - pressed into the surface, not raised.
   --------------------------------------------------------- */

.form-card > input,
.form-card > textarea,
.form-card .two input,
.auth-card form input,
.small-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
    background: var(--neu-bg);
    border: none;
    box-shadow: var(--neu-pressed-sm);
    color: var(--neu-ink);
}

.hero-banner-edit-panel input[type="text"] {
    background: var(--neu-bg);
    box-shadow: var(--neu-pressed-sm);
    border: none;
    color: var(--neu-ink);
}

.payment-option {
    background: var(--neu-bg);
    border: none;
    box-shadow: var(--neu-raised-sm);
}


/* ---------------------------------------------------------
   TABLES - soft row dividers instead of hard lines.
   --------------------------------------------------------- */

.table th,
.table td {
    border-bottom: 1px solid rgba(179, 186, 198, .35);
}

.status {
    background: var(--neu-bg);
    box-shadow: var(--neu-pressed-sm);
    color: var(--neu-ink-soft);
}


/* ---------------------------------------------------------
   ALERTS / TOASTS
   --------------------------------------------------------- */

.alert,
.success-msg {
    border: none;
    box-shadow: var(--neu-pressed-sm);
}

.pending-badge {
    box-shadow: var(--neu-raised-sm);
}


/* ---------------------------------------------------------
   HERO - only the default gradient hero, never a custom
   admin-uploaded banner image/video.
   --------------------------------------------------------- */

.hero-section:not(.has-banner-image):not(.has-banner-video) {
    background: var(--neu-bg);
    box-shadow: var(--neu-raised-lg);
    color: var(--neu-ink);
}

.hero-section:not(.has-banner-image):not(.has-banner-video) .hero-content p {
    color: var(--neu-ink-soft);
}

.hero-section:not(.has-banner-image):not(.has-banner-video) .hero-glow {
    display: none;
}

.hero-banner-edit-trigger {
    background: var(--neu-bg);
    color: var(--neu-ink);
    box-shadow: var(--neu-raised-sm);
}

.hero-banner-edit-trigger:hover {
    background: var(--neu-bg);
}

.hero-banner-upload {
    border: none;
    box-shadow: var(--neu-pressed-sm);
}


/* ---------------------------------------------------------
   ADMIN CONSOLE
   --------------------------------------------------------- */

.admin-side {
    background: var(--neu-bg);
    color: var(--neu-ink);
    box-shadow: var(--neu-raised);
}

.admin-side a {
    color: var(--neu-ink-soft);
}

.admin-side a:hover,
.admin-side a.active {
    background: var(--neu-bg);
    box-shadow: var(--neu-pressed-sm);
    color: var(--brand);
}

.admin-profile {
    border-top: 1px solid rgba(179, 186, 198, .4);
}

.admin-profile-trigger {
    color: var(--neu-ink);
}

.admin-profile-trigger:hover {
    background: transparent;
}

.admin-avatar {
    box-shadow: var(--neu-raised-sm);
}

.admin-profile-menu .logout-button {
    color: var(--neu-ink-soft);
}

.admin-profile-menu .logout-button:hover {
    background: transparent;
    color: var(--brand);
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer {
    background: var(--neu-bg);
    box-shadow: 0 -6px 16px rgba(179, 186, 198, .35);
}

.footer-logo,
.footer-column h4 {
    color: var(--neu-ink);
}

.footer-brand p,
.footer-column a {
    color: var(--neu-ink-soft);
}

.footer-column a:hover {
    color: var(--brand);
}


/* ---------------------------------------------------------
   TILT SHADOW - the dynamic pointer-driven shadow fluid3d.js
   already applies on hover would otherwise be a hard drop
   shadow fighting the soft ambient one above; keep depth
   entirely in the ambient neumorphic shadow instead.
   --------------------------------------------------------- */

.tilt-3d.is-tilting {
    box-shadow: var(--neu-raised-lg);
}


/* ---------------------------------------------------------
   BRAND LOGO - gradient cart mark + wordmark
   --------------------------------------------------------- */
a.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    transition: transform .25s ease;
}

a.brand:hover {
    transform: translateY(-1px) scale(1.03);
}

a.brand .brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(229, 69, 31, .35));
    transition: transform .4s ease;
}

a.brand:hover .brand-mark {
    transform: rotate(-8deg);
}

a.brand .brand-word {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--neu-ink);
}

a.brand .brand-word b {
    font-weight: 900;
    background: linear-gradient(135deg, #ff8a3d, #e5451f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

a.brand .brand-sub {
    align-self: flex-end;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #e5451f;
}

@media (max-width: 640px) {
    a.brand .brand-sub { display: none; }
    a.brand .brand-word { font-size: 21px; }
    a.brand .brand-mark { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------
   ROLE AVATARS - Admin (superadmin role) is orange, Watcher
   (admin role) is green, so the two are told apart at a glance.
   --------------------------------------------------------- */
.admin-avatar.avatar-admin,
.profile-avatar.avatar-admin {
    background: linear-gradient(135deg, #ff8a3d, #e5451f);
    color: #fff;
}

.admin-avatar.avatar-watcher,
.profile-avatar.avatar-watcher {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    color: #fff;
}

/* Profile (role-coloured avatar) sits at the top of the admin sidebar,
   under the logo, and its menu opens downward from there. */
@media (min-width: 1001px) {
    .admin-profile {
        margin-top: 0;
        margin-bottom: 12px;
        padding-top: 0;
        padding-bottom: 12px;
        border-top: 0;
        border-bottom: 1px solid rgba(179, 186, 198, .4);
    }

    .admin-profile-menu {
        bottom: auto;
        top: calc(100% - 6px);
    }
}

/* ---------------------------------------------------------
   USER AGREEMENT pop-up (login.html)
   --------------------------------------------------------- */
.agreement-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 24, 33, .62);
    backdrop-filter: blur(3px);
}

.agreement-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    border-radius: 22px;
    background: var(--neu-bg, #e6e9f0);
    color: var(--neu-ink, #2f3444);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.agreement-modal h2 {
    margin: 0 0 4px;
}

.agreement-scroll {
    flex: 1 1 auto;
    min-height: 160px;
    overflow-y: auto;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
    font-size: 13.5px;
    line-height: 1.6;
}

.agreement-scroll h3 {
    margin: 16px 0 6px;
    font-size: 15px;
}

.agreement-scroll p {
    margin: 0 0 8px;
}

.agreement-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    font-size: 13.5px;
    cursor: pointer;
}

.agreement-check input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: none;
}

.agreement-actions {
    margin-top: 12px;
}

.agreement-actions .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.agreement-decline {
    margin: 10px 0 0;
    text-align: center;
}

/* ---------------------------------------------------------
   WATCHER ACCESS slide switches (admin-watcher-access.html)
   --------------------------------------------------------- */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(179, 186, 198, .35);
}

.switch-row:last-child {
    border-bottom: 0;
}

.switch-row form {
    margin: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.switch .slider {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: #b9c0cf;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .18);
    transition: background .2s ease;
}

.switch .slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    transition: transform .2s ease;
}

.switch input:checked + .slider {
    background: linear-gradient(135deg, #43a047, #2e7d32);
}

.switch input:checked + .slider::before {
    transform: translateX(24px);
}

.switch input:focus-visible + .slider {
    outline: 2px solid #ff8a3d;
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   TOP NAVIGATION BAR (Admin / Watcher / Seller areas)
   Profile + Logout live here, at the top of every page, instead of
   at the bottom of the sidebar. Fixed to the top and offset by the
   230px sidebar; full width on small screens.
   --------------------------------------------------------- */
.app-topbar {
    position: fixed;
    top: 0;
    left: 230px;
    right: 0;
    height: 58px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 26px;
    background: var(--neu-bg, #e6e9f0);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    color: var(--neu-ink, #2f3444);
}

.app-topbar .topbar-link {
    margin-right: auto;
    color: var(--neu-ink-soft, #6b7286);
    font-size: 14px;
    text-decoration: none;
}

.app-topbar .topbar-link:hover {
    color: var(--brand, #e5451f);
}

.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.topbar-who {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.topbar-who .admin-profile-name {
    font-size: 14px;
    font-weight: 600;
    max-width: 180px;
}

.topbar-role {
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--neu-ink-soft, #6b7286);
}

.app-topbar .admin-avatar {
    width: 36px;
    height: 36px;
}

.admin-avatar.avatar-seller,
.profile-avatar.avatar-seller {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
}

.topbar-logout-form {
    margin: 0;
}

.topbar-logout {
    border: 0;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff8a3d, #e5451f);
    box-shadow: 0 3px 10px rgba(229, 69, 31, .3);
}

.topbar-logout:hover {
    filter: brightness(1.06);
}

/* Room for the fixed bar above the page content. */
.admin-shell .admin-main {
    padding-top: 96px;
}

@media (max-width: 1000px) {
    .app-topbar {
        left: 0;
        padding: 0 16px;
    }

    .admin-shell {
        padding-top: 58px;
    }

    .admin-shell .admin-main {
        padding-top: 22px;
    }

    .topbar-who .admin-profile-name {
        max-width: 110px;
    }
}

/* Frozen seller menu item (applicant not approved yet). */
.locked-link {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    opacity: .5;
    cursor: not-allowed;
    user-select: none;
}

.locked-tile {
    opacity: .45;
    filter: grayscale(1);
    pointer-events: none;
    user-select: none;
}

/* Top bar: seller/watcher details line and the Admin's ID search. */
.topbar-who .topbar-role {
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
    white-space: nowrap;
}

.topbar-search {
    margin: 0;
}

.topbar-search input {
    width: 230px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    background: rgba(255, 255, 255, .6);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .1);
}

@media (max-width: 1000px) {
    .topbar-search input { width: 130px; }
    .app-topbar .topbar-link { display: none; }
}

/* Top bar details: one line, items split by a vertical separator -
   Business : X | Seller ID : SELL-… | Registered date : … */
.topbar-details {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--neu-ink-soft, #6b7286);
    white-space: nowrap;
}

.topbar-details b {
    color: var(--neu-ink, #2f3444);
    font-weight: 600;
}

.topbar-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    overflow: hidden;
    color: transparent;
    background: rgba(107, 114, 134, .55);
}

.topbar-who .admin-profile-name {
    max-width: 320px;
}

@media (max-width: 1000px) {
    .topbar-details {
        flex-wrap: wrap;
        row-gap: 2px;
        white-space: normal;
    }

    .topbar-who .admin-profile-name {
        max-width: 140px;
    }
}

/* Top bar order: avatar, name (+ role) first, then the business details on
   the same row:  [avatar] Name / Seller  |  Business : X | Seller ID : … | Registered date : … */
.topbar-who {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.topbar-name-col {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.topbar-who > .topbar-details {
    padding-left: 14px;
    border-left: 1px solid rgba(107, 114, 134, .45);
}

@media (max-width: 1000px) {
    .topbar-who {
        flex-wrap: wrap;
        gap: 2px 10px;
    }

    .topbar-who > .topbar-details {
        padding-left: 0;
        border-left: 0;
    }
}

/* Products table - stock / barcode / cost column: two tidy, aligned rows. */
.stock-cell {
    min-width: 330px;
}

.stock-cell .stock-row,
.stock-cell .meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.stock-cell .meta-row {
    margin-top: 8px;
}

.stock-cell .small-input {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
}

.stock-cell .stock-row .small-input {
    width: 96px;
}

.stock-cell .barcode-input {
    flex: 1 1 auto;
    min-width: 110px;
    width: auto;
}

.stock-cell .cost-input {
    flex: 0 0 76px;
    width: 76px;
}

.stock-cell .btn {
    flex: none;
    min-width: 76px;
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Top bar: never let the right side (profile + Logout) get pushed off-screen. */
.app-topbar {
    gap: 12px;
    padding: 0 20px;
}

.app-topbar .topbar-user {
    min-width: 0;
    flex-shrink: 1;
}

.app-topbar .topbar-logout-form {
    flex-shrink: 0;
}

.topbar-search input {
    width: 190px;
}

.topbar-who .admin-profile-name {
    max-width: 200px;
}

/* Products table v2 - every cell on one aligned line, in the same order:
   Stock [input][Update]  |  Barcode / Cost [barcode][cost][Save] */
.table td {
    vertical-align: middle;
}

.stock-cell {
    min-width: 0;
    width: 200px;
}

.meta-cell {
    min-width: 0;
    width: 340px;
}

.stock-cell .stock-row,
.meta-cell .meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.stock-cell .meta-row,
.meta-cell .meta-row {
    margin-top: 0;
}

.stock-cell .small-input,
.meta-cell .small-input {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 14px;
}

.stock-cell .stock-row .small-input {
    width: 84px;
}

.meta-cell .barcode-input {
    flex: 1 1 auto;
    min-width: 120px;
    width: auto;
}

.meta-cell .cost-input {
    flex: 0 0 80px;
    width: 80px;
}

.stock-cell .btn,
.meta-cell .btn {
    flex: none;
    min-width: 72px;
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Images column: "N extra" and the Add photos button on the same line. */
.images-cell {
    white-space: nowrap;
}

.images-cell .muted {
    display: inline-block;
    margin-right: 8px;
}

.images-cell .row-upload-form {
    display: inline-block;
    margin: 0 !important;
    vertical-align: middle;
}

/* Products table v3 - compact enough that every column fits without side-scrolling. */
.products-table th,
.products-table td {
    padding: 10px 8px;
}

/* Long names and shop names wrap instead of stretching the table. */
.products-table td:nth-child(2),
.products-table td:nth-child(3) {
    white-space: normal;
    min-width: 120px;
}

.products-table td:nth-child(2) {
    max-width: 230px;
}

.products-table .stock-cell {
    width: 170px;
}

.products-table .stock-cell .stock-row .small-input {
    width: 64px;
}

.products-table .meta-cell {
    width: 270px;
}

.products-table .meta-cell .barcode-input {
    min-width: 96px;
}

.products-table .meta-cell .cost-input {
    flex-basis: 64px;
    width: 64px;
}

.products-table .stock-cell .btn,
.products-table .meta-cell .btn {
    min-width: 62px;
    padding: 0 10px;
}

.products-table .images-cell .muted {
    display: block;
    margin: 0 0 4px;
}

/* Use the page width: less side padding on admin pages, and keep the
   sidebar in view while scrolling instead of leaving a blank column. */
@media (min-width: 1001px) {
    .admin-shell .admin-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    .admin-shell > .admin-side {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        overflow-y: auto;
    }
}

/* Products table v4 - icon-only row buttons (the name shows on hover via title). */
.icon-btn,
.products-table .icon-btn,
.products-table .stock-cell .icon-btn,
.products-table .meta-cell .icon-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
}

.icon-btn .ico {
    width: 17px;
    height: 17px;
    flex: none;
}

/* The variants button also carries its count. */
.products-table a.icon-btn {
    width: auto;
    padding: 0 12px;
    border-radius: 999px;
    gap: 6px;
}

.count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(107, 114, 134, .2);
    color: var(--neu-ink, #2f3444);
}

.images-cell .count-chip {
    margin-right: 8px;
    vertical-align: middle;
}

.products-table .stock-cell { width: 140px; }
.products-table .meta-cell  { width: 230px; }
.products-table .stock-cell .stock-row .small-input { width: 70px; }
.products-table .meta-cell .barcode-input { min-width: 92px; }
.products-table .meta-cell .cost-input { flex-basis: 64px; width: 64px; }

/* Products table: a short Product column - a long name scrolls sideways inside it. */
.products-table td.name-cell {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    white-space: nowrap;
}

.name-scroll {
    max-width: 170px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 3px;
    scrollbar-width: thin;
}

.name-scroll::-webkit-scrollbar {
    height: 4px;
}

.name-scroll::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 134, .5);
    border-radius: 4px;
}

/* Products table: room for decimal prices/costs (e.g. 1499.50, 22.75) - and no
   spinner arrows eating the width of the number boxes. */
.products-table td:nth-child(4) {
    white-space: nowrap;
    min-width: 96px;
}

.products-table .stock-cell .stock-row .small-input {
    width: 84px;
}

.products-table .meta-cell {
    width: 280px;
}

.products-table .meta-cell .cost-input {
    flex: 0 0 96px;
    width: 96px;
}

.products-table .stock-cell input[type="number"],
.products-table .meta-cell input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.products-table .stock-cell input[type="number"]::-webkit-inner-spin-button,
.products-table .stock-cell input[type="number"]::-webkit-outer-spin-button,
.products-table .meta-cell input[type="number"]::-webkit-inner-spin-button,
.products-table .meta-cell input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =========================================================
   PRODUCTS SHEET - the products table laid out like a spreadsheet:
   fixed columns that share the page width (so every column is visible),
   a grid of cell borders, one compact line per row, header row on top.
   ========================================================= */
.products-table.sheet {
    table-layout: fixed;
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    border: 1px solid rgba(107, 114, 134, .45);
}

.products-table.sheet th,
.products-table.sheet td {
    border: 1px solid rgba(107, 114, 134, .3);
    padding: 6px 8px;
    height: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.products-table.sheet th {
    height: 38px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    background: rgba(107, 114, 134, .16);
    color: var(--neu-ink-soft, #6b7286);
    white-space: nowrap;
}

.products-table.sheet tr:nth-child(even) td {
    background: rgba(255, 255, 255, .28);
}

.products-table.sheet tr:hover td {
    background: rgba(255, 138, 61, .1);
}

/* The columns are sized by <colgroup>; cells just fill them. */
.products-table.sheet td.name-cell,
.products-table.sheet .stock-cell,
.products-table.sheet .meta-cell {
    width: auto;
    min-width: 0;
    max-width: none;
}

.products-table.sheet .name-scroll {
    max-width: 100%;
}

.products-table.sheet td:nth-child(3) {
    white-space: nowrap;
    min-width: 0;
}

.products-table.sheet td:nth-child(4) {
    min-width: 0;
}

/* Inputs fill their cell so nothing is clipped. */
.products-table.sheet .stock-row,
.products-table.sheet .meta-row {
    width: 100%;
}

.products-table.sheet .stock-cell .stock-row .small-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.products-table.sheet .meta-cell .barcode-input {
    flex: 1 1 0;
    min-width: 0;
}

.products-table.sheet .meta-cell .cost-input {
    flex: 0 0 76px;
    width: 76px;
    min-width: 0;
}

.products-table.sheet .images-cell,
.products-table.sheet td:last-child {
    text-align: center;
}

/* ---------------------------------------------------------
   No scrollbars on the products table: long names are cut with an
   ellipsis (the full name shows on hover), and the sheet always
   fits the page width instead of scrolling sideways.
   --------------------------------------------------------- */
.name-scroll {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.products-table.sheet {
    min-width: 0;
}

.panel:has(> .products-table) {
    overflow: visible;
}

/* ---------------------------------------------------------
   Frozen top bar: always above the page content while scrolling.
   The sticky sidebar makes its own stacking layer, so the layer that
   holds the fixed bar has to sit above the content, and the bar itself
   needs a solid background so nothing shows through it.
   --------------------------------------------------------- */
.app-topbar {
    z-index: 3000;
    background: #e6e9f0;
    backdrop-filter: none;
}

.admin-shell > .admin-side {
    z-index: 3000;
}

/* Top bar: "View store" on the left, the Admin's search in the middle, profile
   and Logout on the right. */
.app-topbar .topbar-link {
    flex: 1 1 0;
    margin-right: 0;
}

.app-topbar .topbar-spacer {
    flex: 1 1 0;
}

.app-topbar .topbar-search {
    flex: 0 1 380px;
}

.app-topbar .topbar-search input {
    width: 100%;
}

@media (max-width: 1000px) {
    .app-topbar .topbar-search {
        flex-basis: 200px;
    }
}

/* ---------------------------------------------------------
   RESIZABLE SIDEBAR (static/js/sidebar-resize.js)
   The sidebar width is the CSS variable --side-w (default 230px); the
   top bar and page grid follow it. Drag the handle on the sidebar's
   right edge; narrower than ~120px collapses it to icons only.
   --------------------------------------------------------- */
@media (min-width: 1001px) {
    .admin-shell {
        grid-template-columns: var(--side-w, 230px) 1fr;
        transition: grid-template-columns .12s ease;
    }

    .app-topbar {
        left: var(--side-w, 230px);
        transition: left .12s ease;
    }

    body.side-resizing .admin-shell,
    body.side-resizing .app-topbar {
        transition: none;
    }

    body.side-resizing {
        cursor: col-resize;
        user-select: none;
    }

    .side-resizer {
        position: sticky;
        float: right;
        top: 0;
        width: 8px;
        height: 100vh;
        margin: calc(-100vh) -18px 0 0;
        flex: none;
        cursor: col-resize;
        z-index: 5;
        align-self: flex-end;
    }

    .side-resizer::after {
        content: "";
        position: absolute;
        right: 3px;
        top: 50%;
        width: 3px;
        height: 46px;
        margin-top: -23px;
        border-radius: 3px;
        background: rgba(107, 114, 134, .35);
        transition: background .15s ease;
    }

    .side-resizer:hover::after,
    body.side-resizing .side-resizer::after {
        background: #e5451f;
    }

    /* Collapsed: icons only. */
    .admin-shell.side-collapsed > .admin-side {
        padding-left: 8px;
        padding-right: 8px;
        align-items: center;
    }

    .admin-shell.side-collapsed > .admin-side > a,
    .admin-shell.side-collapsed > .admin-side .admin-side-switcher a,
    .admin-shell.side-collapsed > .admin-side > .locked-link {
        font-size: 0;
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        width: 44px;
        text-align: center;
    }

    .admin-shell.side-collapsed > .admin-side .nav-ico {
        width: 20px;
        height: 20px;
        margin: 0;
    }

    .admin-shell.side-collapsed .brand-word,
    .admin-shell.side-collapsed .brand-sub,
    .admin-shell.side-collapsed .cart-count {
        display: none;
    }

    .admin-shell.side-collapsed > .admin-side > a.brand {
        width: auto;
    }
}

@media (max-width: 1000px) {
    .side-resizer {
        display: none;
    }
}

/* Sidebar drag handle: fixed to the screen edge of the sidebar. */
@media (min-width: 1001px) {
    .side-resizer {
        position: fixed;
        float: none;
        margin: 0;
        top: 0;
        bottom: 0;
        height: auto;
        left: calc(var(--side-w, 230px) - 5px);
        width: 10px;
        z-index: 3100;
        align-self: auto;
        transition: left .12s ease;
    }

    body.side-resizing .side-resizer {
        transition: none;
    }

    .side-resizer::after {
        right: auto;
        left: 3px;
    }
}

/* =========================================================
   USERS - spreadsheet-style table, detail page, email pop-up
   ========================================================= */
.data-sheet {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(107, 114, 134, .45);
    font-size: 13px;
}

.data-sheet th,
.data-sheet td {
    border: 1px solid rgba(107, 114, 134, .3);
    padding: 6px 8px;
    height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.data-sheet th {
    height: 36px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: rgba(107, 114, 134, .16);
    color: var(--neu-ink-soft, #6b7286);
}

.data-sheet tr:nth-child(even) td { background: rgba(255, 255, 255, .28); }
.data-sheet tr:hover td { background: rgba(255, 138, 61, .1); }

.data-sheet .actions-cell {
    text-align: center;
}

.data-sheet .actions-cell .icon-btn {
    margin: 0 2px;
}

.detail-table th {
    width: 220px;
    text-align: left;
    white-space: nowrap;
    color: var(--neu-ink-soft, #6b7286);
    font-weight: 600;
}

.detail-table td {
    white-space: normal;
    word-break: break-word;
}

.email-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 24, 33, .6);
    backdrop-filter: blur(3px);
}

.email-overlay[hidden] {
    display: none;
}

.email-modal {
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 20px 24px 22px;
    border-radius: 20px;
    background: var(--neu-bg, #e6e9f0);
    color: var(--neu-ink, #2f3444);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.email-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.email-head h2 {
    margin: 0;
    font-size: 19px;
}

.email-close {
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--neu-ink-soft, #6b7286);
}

.email-field {
    display: block;
    margin-bottom: 10px;
}

.email-field > span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--neu-ink-soft, #6b7286);
}

.email-field input,
.email-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(107, 114, 134, .35);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    background: rgba(255, 255, 255, .7);
}

.email-field input[readonly] {
    background: rgba(107, 114, 134, .12);
    color: var(--neu-ink-soft, #6b7286);
}

.email-field textarea {
    resize: vertical;
    min-height: 140px;
}

.email-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}