/* Site-wide dark-mode and seller-workspace audit layer.
   Loaded last so shared controls stay readable and compact after all legacy themes. */

/* Compact status treatment everywhere. */
.status-pill {
    width: fit-content !important;
    max-width: 100%;
    min-height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    justify-self: start;
    align-self: start;
    padding: 0 11px !important;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
}

html[data-theme="dark"] .status-pill {
    color: #e9f0f8 !important;
    border-color: #3a4759 !important;
    background: #253142 !important;
}
html[data-theme="dark"] :is(.status-active,.status-paid,.status-completed,.fulfilment-dispatched,.fulfilment-completed) {
    color: #b9f6ce !important;
    border-color: #2f7650 !important;
    background: #153b29 !important;
}
html[data-theme="dark"] :is(.status-ended,.status-expired,.status-closed,.status-cancelled,.fulfilment-cancelled) {
    color: #dbe4ef !important;
    border-color: #445265 !important;
    background: #293442 !important;
}
html[data-theme="dark"] :is(.status-pending,.status-pending_payment,.status-draft,.status-awaiting_dispatch,.fulfilment-awaiting_dispatch,.fulfilment-pending) {
    color: #ffe8a3 !important;
    border-color: #80652e !important;
    background: #453715 !important;
}
html[data-theme="dark"] :is(.status-blocked,.status-rejected,.status-disputed) {
    color: #ffc3cb !important;
    border-color: #8b3d49 !important;
    background: #48212a !important;
}
html[data-theme="dark"] :is(.status-refunded,.status-partially_refunded) {
    color: #d7c8ff !important;
    border-color: #665292 !important;
    background: #302548 !important;
}

/* Seller workspace cards: compact, grouped and easy to scan. */
.app-selling-card-list {
    display: grid !important;
    gap: 12px !important;
    margin-top: 14px;
}
.app-selling-card-list > article {
    display: grid !important;
    grid-template-columns: 132px minmax(0,1fr) 48px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--fx-line) !important;
    border-radius: 16px !important;
    background: var(--fx-panel) !important;
    overflow: hidden;
}
.app-selling-card-media {
    width: 132px !important;
    height: 104px !important;
    aspect-ratio: auto !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden;
    color: var(--fx-text);
    border: 1px solid var(--fx-line) !important;
    border-radius: 13px !important;
    background: var(--fx-panel-2) !important;
}
.app-selling-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.app-selling-card-list article > div {
    min-width: 0;
    display: grid !important;
    align-content: center;
    gap: 6px !important;
}
.app-selling-card-list h2 {
    margin: 0 !important;
    color: var(--fx-text) !important;
    font-size: 1.02rem !important;
    line-height: 1.32 !important;
}
.app-selling-card-list h2 a { color: inherit !important; }
.app-selling-card-list p,
.app-selling-card-list small { color: var(--fx-muted) !important; }
.app-selling-card-list article > div > strong { color: var(--fx-text) !important; font-size: 1rem; }
.app-selling-card-list .text-link { width: fit-content; color: var(--fx-cyan) !important; font-weight: 750; }
.app-selling-card-list .status-pill { margin-bottom: 1px; }
.app-selling-card-arrow {
    width: 44px;
    height: 44px;
    display: grid !important;
    place-items: center;
    justify-self: end !important;
    color: var(--fx-text) !important;
    border: 1px solid var(--fx-line-strong);
    border-radius: 999px;
    background: var(--fx-panel-2);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
}
.app-selling-card-arrow:hover,
.app-selling-card-arrow:focus-visible {
    color: var(--fx-cyan) !important;
    border-color: var(--fx-cyan);
    background: color-mix(in srgb, var(--fx-cyan) 9%, var(--fx-panel));
    outline: none;
}

html[data-theme="dark"] .app-selling-card-list > article {
    border-color: var(--fx-line) !important;
    background: #111824 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
html[data-theme="dark"] .app-selling-card-media {
    color: #f5f8fc !important;
    border-color: #334154 !important;
    background: #182232 !important;
}
html[data-theme="dark"] .app-selling-card-arrow {
    color: #f5f8fc !important;
    border-color: #3a485b !important;
    background: #182232 !important;
}

/* Selling status tabs and management table. */
.app-selling-status-tabs { gap: 8px !important; }
.app-selling-status-tabs a {
    color: var(--fx-muted) !important;
    border: 1px solid var(--fx-line) !important;
    border-radius: 999px !important;
    background: var(--fx-panel) !important;
}
.app-selling-status-tabs a.is-active {
    color: var(--fx-accent-ink) !important;
    border-color: var(--fx-blue) !important;
    background: var(--fx-blue) !important;
}
.dashboard-table-wrap {
    overflow: auto;
    border: 1px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-panel);
}
html[data-theme="dark"] .dashboard-table { color: var(--fx-text) !important; background: var(--fx-panel) !important; }
html[data-theme="dark"] .dashboard-table :is(th,td) { color: var(--fx-text-soft) !important; border-color: var(--fx-line) !important; }
html[data-theme="dark"] .dashboard-table th { color: var(--fx-text) !important; background: var(--fx-panel-2) !important; }
html[data-theme="dark"] .dashboard-table a { color: var(--fx-cyan) !important; }

/* Native controls: dark means dark, including the opened option list where supported. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] :is(
    select,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    textarea
) {
    color: #f5f8fc !important;
    border-color: #3a485b !important;
    background-color: #0f1621 !important;
    caret-color: #f5f8fc;
}
html[data-theme="dark"] select {
    color-scheme: dark;
    accent-color: var(--fx-blue);
}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    color: #f5f8fc !important;
    background: #101720 !important;
}
html[data-theme="dark"] select option:disabled { color: #7f8b9d !important; }
html[data-theme="dark"] :is(input,textarea)::placeholder { color: #718096 !important; opacity: 1; }
html[data-theme="dark"] :is(select,input,textarea):focus {
    border-color: var(--fx-cyan) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(101,223,255,.14) !important;
}
html[data-theme="dark"] :is(select,input,textarea):disabled {
    color: #7f8b9d !important;
    background: #121923 !important;
    opacity: 1;
}

/* Custom menus/popovers share one dark palette. */
html[data-theme="dark"] :is(
    .app-card-popover,
    .dropdown-menu,
    .menu-panel,
    .filter-menu,
    .sort-menu,
    .app-filter-sheet,
    .app-card-actions-menu,
    [role="menu"]
) {
    color: #f5f8fc !important;
    border-color: #354153 !important;
    background: #101720 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.38) !important;
}
html[data-theme="dark"] :is(
    .app-card-popover,
    .dropdown-menu,
    .menu-panel,
    .filter-menu,
    .sort-menu,
    .app-filter-sheet,
    .app-card-actions-menu,
    [role="menu"]
) :is(a,button,[role="menuitem"],label) {
    color: #f5f8fc !important;
}
html[data-theme="dark"] :is(
    .app-card-popover,
    .dropdown-menu,
    .menu-panel,
    .filter-menu,
    .sort-menu,
    .app-filter-sheet,
    .app-card-actions-menu,
    [role="menu"]
) :is(a,button,[role="menuitem"]):hover,
html[data-theme="dark"] :is(
    .app-card-popover,
    .dropdown-menu,
    .menu-panel,
    .filter-menu,
    .sort-menu,
    .app-filter-sheet,
    .app-card-actions-menu,
    [role="menu"]
) :is(a,button,[role="menuitem"]):focus-visible {
    color: #fff !important;
    background: #1b2635 !important;
}

/* Common dark surfaces that still inherit light-era colours. */
html[data-theme="dark"] :is(
    .empty-state,
    .dashboard-section,
    .dashboard-table-wrap,
    .form-section,
    .filters-panel,
    .results-toolbar,
    .results-header,
    .app-results-toolbar,
    .app-search-save-row
) {
    color: var(--fx-text) !important;
    border-color: var(--fx-line) !important;
}
html[data-theme="dark"] :is(
    .empty-state,
    .form-section,
    .filters-panel,
    .results-toolbar,
    .results-header,
    .app-results-toolbar,
    .app-search-save-row
) { background: var(--fx-panel) !important; }
html[data-theme="dark"] :is(.empty-state,.dashboard-section,.form-section) :is(h1,h2,h3,strong) { color: var(--fx-text) !important; }
html[data-theme="dark"] :is(.empty-state,.dashboard-section,.form-section) :is(p,small,.helptext) { color: var(--fx-muted) !important; }

@media (max-width: 760px) {
    .app-selling-card-list > article {
        grid-template-columns: 88px minmax(0,1fr) 44px !important;
        gap: 12px !important;
        padding: 13px !important;
    }
    .app-selling-card-media {
        width: 88px !important;
        height: 76px !important;
        border-radius: 11px !important;
    }
    .app-selling-card-list h2 { font-size: .92rem !important; }
    .app-selling-card-arrow { width: 40px; height: 40px; font-size: 1.55rem; }
}

@media (max-width: 430px) {
    .app-selling-card-list > article {
        grid-template-columns: 72px minmax(0,1fr) !important;
        align-items: start !important;
    }
    .app-selling-card-media { width: 72px !important; height: 68px !important; }
    .app-selling-card-arrow {
        grid-column: 2;
        justify-self: start !important;
        width: auto;
        min-width: 92px;
        height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 0;
    }
    .app-selling-card-arrow::before {
        content: "Manage";
        font-size: .78rem;
        font-weight: 800;
    }
    .app-selling-card-arrow::after {
        content: "›";
        margin-left: 7px;
        font-size: 1.15rem;
    }
}