/*
 * Plugsosolog user-facing theme foundation.
 *
 * The root data-theme attribute is the only theme state. Feature stylesheets
 * consume these semantic tokens; this file owns palette and shared adapters.
 */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Brand tokens are deliberately separate from UI semantics. */
    --brand-primary: #1c9b5e;
    --brand-primary-hover: #178a52;
    --brand-primary-active: #146e43;
    --brand-accent: #20c978;
    --brand-on-primary: #ffffff;
    --brand-soft: #eaf8f1;
    --brand-on-soft: #0d6f42;
    --brand-text: #0d6f42;

    /* Semantic surfaces and text. */
    --surface-page: #f8fafc;
    --surface-primary: #ffffff;
    --surface-secondary: #f1f5f9;
    --surface-elevated: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.86);
    --surface-hover: #edf7f2;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    --text-link: #0d6f42;
    --text-placeholder: #7b8d84;
    --border-default: #dbe3ec;
    --border-subtle: rgba(30, 41, 59, 0.16);
    --border-focus: #1c9b5e;

    /* Component surfaces. */
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --input-placeholder: #7b8d84;
    --input-border: #cbd5e1;
    --dropdown-bg: #ffffff;
    --modal-bg: #ffffff;
    --table-bg: #ffffff;
    --table-row-hover: #f2f8f5;
    --overlay-bg: rgba(15, 23, 42, 0.54);
    --disabled-bg: #e2e8f0;
    --disabled-text: #8495a9;

    /* Semantic feedback. */
    --success-bg: #ecfdf3;
    --success-text: #166534;
    --success-border: #a7e7c0;
    --warning-bg: #fffbeb;
    --warning-text: #854d0e;
    --warning-border: #fde68a;
    --danger-bg: #fff1f2;
    --danger-text: #be123c;
    --danger-border: #fecdd3;
    --info-bg: #eff6ff;
    --info-text: #1d4ed8;
    --info-border: #bfdbfe;

    --shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.08);
    --shadow-elevated: 0 18px 46px rgba(15, 23, 42, 0.13);
    --focus-ring: 0 0 0 3px rgba(28, 155, 94, 0.22);
    --skeleton-start: #eef2f7;
    --skeleton-mid: #dfe7e2;

    /* Legacy template HSL hooks resolve through this palette. */
    --heading-color: 222 47% 11%;
    --body-color: 215 16% 35%;
    --border-color: 214 24% 88%;
    --section-bg: 210 40% 98%;

    /* Compatibility aliases. New component CSS should use semantic names. */
    --app-bg: var(--surface-page);
    --page-bg: var(--surface-page);
    --surface: var(--surface-primary);
    --app-surface: var(--surface-primary);
    --app-surface-secondary: var(--surface-secondary);
    --app-surface-elevated: var(--surface-elevated);
    --app-text: var(--text-primary);
    --app-text-secondary: var(--text-secondary);
    --app-muted: var(--text-muted);
    --app-border: var(--border-default);
    --app-border-subtle: var(--border-subtle);
    --app-input-bg: var(--input-bg);
    --app-input-text: var(--input-text);
    --app-placeholder: var(--input-placeholder);
    --app-hover: var(--surface-hover);
    --app-overlay: var(--overlay-bg);
    --app-shadow: var(--shadow-soft);
    --app-shadow-soft: var(--shadow-soft);
    --app-brand: var(--brand-primary);
    --app-brand-soft: var(--brand-soft);
    --app-brand-on-soft: var(--brand-on-soft);
    --app-brand-text: var(--brand-text);
    --app-on-brand: var(--brand-on-primary);
    --app-disabled-bg: var(--disabled-bg);
    --app-disabled-text: var(--disabled-text);
    --app-success-bg: var(--success-bg);
    --app-success-text: var(--success-text);
    --app-warning-bg: var(--warning-bg);
    --app-warning-text: var(--warning-text);
    --app-danger-bg: var(--danger-bg);
    --app-danger-text: var(--danger-text);
    --app-danger-border: var(--danger-border);
    --app-info-bg: var(--info-bg);
    --app-info-text: var(--info-text);
    --app-skeleton-start: var(--skeleton-start);
    --app-skeleton-mid: var(--skeleton-mid);
    --bg: var(--surface-page);
    --border: var(--border-default);
    --border-soft: var(--border-subtle);
    --text-hint: var(--text-secondary);
    --green: var(--brand-primary);
    --green-hover: var(--brand-primary-hover);
    --green-active: var(--brand-primary-active);
    --error: var(--danger-text);
    --shadow: var(--shadow-soft);

    /* Bootstrap 5 consumes these without selector fights. */
    --bs-body-bg: var(--surface-page);
    --bs-body-color: var(--text-primary);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-bg: var(--surface-secondary);
    --bs-border-color: var(--border-default);
    --bs-emphasis-color: var(--text-primary);
    --bs-link-color: var(--text-link);
}

[data-theme="dark"] {
    color-scheme: dark;
    --brand-primary: #39bd7c;
    --brand-primary-hover: #4dcd8c;
    --brand-primary-active: #2ca86b;
    --brand-accent: #62d69c;
    --brand-on-primary: #06130d;
    --brand-soft: #153a2a;
    --brand-on-soft: #9af0bc;
    --brand-text: #7be4ae;

    --surface-page: #09120f;
    --surface-primary: #111d19;
    --surface-secondary: #17251f;
    --surface-elevated: #1b2b24;
    --surface-glass: rgba(17, 29, 25, 0.9);
    --surface-hover: #1d3329;
    --text-primary: #edf7f1;
    --text-secondary: #bdcec5;
    --text-muted: #9fb2a9;
    --text-inverse: #07110c;
    --text-link: #7be4ae;
    --text-placeholder: #82978d;
    --border-default: #30463c;
    --border-subtle: rgba(185, 211, 199, 0.18);
    --border-focus: #62d69c;

    --input-bg: #0d1713;
    --input-text: #f2faf6;
    --input-placeholder: #82978d;
    --input-border: #385047;
    --dropdown-bg: #15231d;
    --modal-bg: #15231d;
    --table-bg: #111d19;
    --table-row-hover: #1a3026;
    --overlay-bg: rgba(0, 0, 0, 0.74);
    --disabled-bg: #263830;
    --disabled-text: #81958b;

    --success-bg: #123a28;
    --success-text: #94efb7;
    --success-border: #2b684a;
    --warning-bg: #3a2c12;
    --warning-text: #f8d66d;
    --warning-border: #70571e;
    --danger-bg: #3c1d23;
    --danger-text: #ffb1bb;
    --danger-border: #71313c;
    --info-bg: #172d46;
    --info-text: #a7d0ff;
    --info-border: #315b82;

    --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.28);
    --shadow-elevated: 0 22px 56px rgba(0, 0, 0, 0.42);
    --focus-ring: 0 0 0 3px rgba(98, 214, 156, 0.28);
    --skeleton-start: #14241d;
    --skeleton-mid: #274036;

    --heading-color: 143 38% 95%;
    --body-color: 148 16% 77%;
    --border-color: 151 19% 23%;
    --section-bg: 150 23% 8%;
}

html,
body {
    background: var(--surface-page);
    color: var(--text-primary);
}

body {
    transition: background-color 160ms ease, color 160ms ease;
}

a { color: var(--text-link); }
a:hover { color: var(--brand-primary-hover); }
hr { border-color: var(--border-default); }
::selection { background: var(--brand-primary); color: var(--brand-on-primary); }

/* Small semantic helpers for markup that cannot use a shared component. */
.theme-surface { background: var(--surface-primary); color: var(--text-primary); }
.theme-surface-muted { background: var(--surface-secondary); color: var(--text-primary); }
.theme-text { color: var(--text-primary); }
.theme-text-muted { color: var(--text-muted); }
.theme-border { border-color: var(--border-default); }

/* Theme switcher */
.app-theme-toggle {
    display: inline-grid;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border-default);
    border-radius: 11px;
    background: var(--surface-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.app-theme-toggle:hover { border-color: var(--border-focus); background: var(--surface-hover); color: var(--brand-text); transform: translateY(-1px); }
.app-theme-toggle:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.app-theme-toggle__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-theme-toggle] [data-theme-toggle-label] {
    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;
}
[data-theme="light"] .app-theme-toggle__sun,
[data-theme="dark"] .app-theme-toggle__moon { display: none; }
html[data-theme="light"] .color-switcher .light-icon { display: none !important; }
html[data-theme="dark"] .color-switcher .dark-icon { display: none !important; }
html[data-theme="light"] .color-switcher .dark-icon,
html[data-theme="dark"] .color-switcher .light-icon { display: inline-block !important; }
.app-theme-toggle--auth { position: fixed; top: 18px; right: 18px; z-index: 1060; }
.app-theme-toggle--menu {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
    box-shadow: none;
}
.profile-dropdown__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    width: 100%;
    padding: 6px 8px 6px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}
.profile-dropdown__theme:hover { background: var(--surface-hover); color: var(--brand-text); }
.profile-dropdown__theme:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.profile-dropdown__theme--icon-only {
    justify-content: flex-end;
    min-height: 40px;
    padding: 4px;
}
.profile-dropdown__theme--icon-only .profile-dropdown__theme-label {
    display: none !important;
}
.profile-dropdown__theme-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}
.profile-dropdown__theme-label i {
    color: var(--brand-primary);
    font-size: 17px;
}
.profile-dropdown__theme-icon {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid var(--border-default);
    border-radius: 9px;
    background: var(--surface-elevated);
    color: var(--text-primary);
}
.mobile-drawer-theme-toggle {
    width: 100%;
    min-height: 48px;
}
.mobile-drawer-theme-action {
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
}

/* Shared navigation and footer */
.top-nav,
.panel-header,
.header,
.sidebar,
.mobile-drawer,
.footer,
.footer-area {
    border-color: var(--border-default);
    background-color: var(--surface-primary);
    color: var(--text-primary);
}
.navi-link,
.mobile-drawer-link,
.sidebar-menu__link { color: var(--text-secondary); }
.navi-link:hover,
.navi-link.active,
.mobile-drawer-link:hover,
.sidebar-menu__link:hover,
.sidebar-menu__link.active { background: var(--brand-soft); color: var(--brand-text); }
.nav-icon-btn,
.icon-button { border-color: var(--border-default); background: var(--surface-secondary); color: var(--text-primary); }
.nav-icon-btn:hover,
.icon-button:hover { border-color: var(--border-focus); background: var(--surface-hover); color: var(--brand-text); }

/* Shared surfaces */
.card:not([class*="bg-"]),
.content-card,
.dashboard-card,
.seller-card,
.stat-card,
.metric-card,
.account-card,
.filter-card,
.wallet-card,
.order-card,
.review-card,
.support-card,
.credentials-card,
.accordion-card,
.empty-state,
.panel-layout,
.section-content {
    border-color: var(--border-default);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
}
.card-header:not([class*="bg-"]),
.card-footer,
.panel-heading,
.section-header,
.filter-header,
.modal-header:not([class*="bg-"]),
.modal-footer:not([class*="bg-"]) {
    border-color: var(--border-default);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
}
.page-container,
.main-content,
.marketplace-layout,
.seller-dashboard,
.seller-wizard-page { background-color: var(--surface-page); color: var(--text-primary); }

/* Forms */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]),
select,
textarea,
.form-control,
.form-select,
.nice-select,
[contenteditable="true"] {
    border-color: var(--input-border);
    background-color: var(--input-bg);
    color: var(--input-text);
}
input::placeholder,
textarea::placeholder,
[contenteditable="true"]:empty::before { color: var(--input-placeholder); opacity: 1; }
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
[contenteditable="true"]:focus {
    border-color: var(--border-focus);
    background-color: var(--input-bg);
    color: var(--input-text);
    box-shadow: var(--focus-ring);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--input-text);
    box-shadow: 0 0 0 1000px var(--input-bg) inset;
}
label,
.form-label { color: var(--text-primary); }
.form-text,
.field-hint,
.text-muted { color: var(--text-muted) !important; }
:disabled,
.disabled { opacity: 1; background-color: var(--disabled-bg); color: var(--disabled-text); }

/* Bootstrap and shared overlays */
.dropdown-menu,
.profile-dropdown,
.cart-dropdown,
.notification-dropdown,
.modal-content,
.account-modal {
    border-color: var(--border-default);
    background-color: var(--modal-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-elevated);
}
.dropdown-menu { --bs-dropdown-bg: var(--dropdown-bg); --bs-dropdown-color: var(--text-primary); --bs-dropdown-border-color: var(--border-default); --bs-dropdown-link-color: var(--text-primary); --bs-dropdown-link-hover-bg: var(--surface-hover); --bs-dropdown-link-hover-color: var(--brand-text); }
.dropdown-item,
.profile-menu-item,
.cart-item,
.notification-item { border-color: var(--border-default); color: var(--text-primary); }
.dropdown-item:hover,
.profile-menu-item:hover { background: var(--surface-hover); color: var(--brand-text); }
.modal-backdrop,
.mfp-bg { background: var(--overlay-bg); }
.modal-close,
.btn-close { color: var(--text-primary); filter: none; opacity: .8; }

/* Tables */
.table,
table {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-default);
    --bs-table-striped-bg: var(--surface-secondary);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-row-hover);
    --bs-table-hover-color: var(--text-primary);
    border-color: var(--border-default);
    color: var(--text-primary);
}
.table > :not(caption) > * > *,
table th,
table td { border-color: var(--border-default); color: inherit; }
.table-light,
thead { background: var(--surface-secondary); color: var(--text-primary); }

/* Pagination, tabs and neutral buttons */
.page-link,
.pagination-btn,
.nav-tabs .nav-link,
.tab-button,
.btn-light,
.btn-outline-secondary,
.bttn-secondary {
    border-color: var(--border-default);
    background: var(--surface-primary);
    color: var(--text-primary);
}
.page-link:hover,
.pagination-btn:hover,
.nav-tabs .nav-link:hover,
.tab-button:hover { border-color: var(--border-focus); background: var(--surface-hover); color: var(--brand-text); }
.pagination .active > .page-link,
.nav-tabs .nav-link.active,
.tab-button.active { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-on-primary); }

/* Alerts and badges */
.alert-success,
.status-success,
.badge-success { border-color: var(--success-border); background: var(--success-bg); color: var(--success-text); }
.alert-warning,
.status-warning,
.status-pending,
.badge-warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-text); }
.alert-danger,
.status-danger,
.status-error,
.badge-danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.alert-info,
.status-info,
.badge-info { border-color: var(--info-border); background: var(--info-bg); color: var(--info-text); }

.theme-state { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.theme-state-success { background: var(--success-bg); color: var(--success-text); }
.theme-state-warning { background: var(--warning-bg); color: var(--warning-text); }
.theme-state-danger { background: var(--danger-bg); color: var(--danger-text); }
.theme-state-info { background: var(--info-bg); color: var(--info-text); }
.theme-state-muted { background: var(--surface-secondary); color: var(--text-muted); }
.theme-tone-success { color: var(--success-text) !important; }
.theme-tone-warning { color: var(--warning-text) !important; }
.theme-tone-danger { color: var(--danger-text) !important; }
.theme-tone-muted { color: var(--text-muted) !important; }
.awaiting-dot.theme-tone-success { background: var(--success-text) !important; }
.awaiting-dot.theme-tone-warning { background: var(--warning-text) !important; }
.awaiting-dot.theme-tone-muted { background: var(--text-muted) !important; }
.btn-confirm.is-complete { background: var(--disabled-bg); color: var(--disabled-text); }
.transaction-debug-button { background: var(--warning-bg); color: var(--warning-text); }

.seller-order-runtime-row { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--border-default); cursor: pointer; transition: background-color .2s; }
.seller-order-runtime-row:hover { background: var(--surface-hover); }
.seller-order-runtime-product { display: flex; align-items: center; gap: 12px; }
.seller-order-runtime-image { width: 48px; height: 48px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-primary); object-fit: contain; }
.seller-order-runtime-title { margin: 0; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.seller-order-runtime-meta { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
.seller-order-runtime-summary { text-align: right; }
.seller-order-runtime-price { margin-bottom: 4px; color: var(--text-primary); font-size: 14px; font-weight: 600; }

/* Framework utility adapters require !important because Bootstrap utilities do. */
html[data-theme] .bg-white,
html[data-theme] .bg-light,
html[data-theme] .btn-light { background-color: var(--surface-primary) !important; color: var(--text-primary) !important; }
html[data-theme] .text-dark,
html[data-theme] .text-black,
html[data-theme] .text-body { color: var(--text-primary) !important; }
html[data-theme] .border-light { border-color: var(--border-default) !important; }
html[data-theme] .bg-success-subtle { background-color: var(--success-bg) !important; color: var(--success-text) !important; border-color: var(--success-border) !important; }
html[data-theme] .bg-warning-subtle { background-color: var(--warning-bg) !important; color: var(--warning-text) !important; border-color: var(--warning-border) !important; }
html[data-theme] .bg-danger-subtle { background-color: var(--danger-bg) !important; color: var(--danger-text) !important; border-color: var(--danger-border) !important; }
html[data-theme] .bg-info-subtle { background-color: var(--info-bg) !important; color: var(--info-text) !important; border-color: var(--info-border) !important; }
html[data-theme] .text-success { color: var(--success-text) !important; }
html[data-theme] .text-warning { color: var(--warning-text) !important; }
html[data-theme] .text-danger { color: var(--danger-text) !important; }
html[data-theme] .text-info { color: var(--info-text) !important; }

/* Third-party controls */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.nice-select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-color: var(--input-border);
    background: var(--dropdown-bg);
    color: var(--input-text);
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-results__option,
.nice-select .option,
.dataTables_wrapper { color: var(--text-primary); }
.select2-results__option,
.nice-select .list { background: var(--dropdown-bg); }
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"],
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected { background: var(--surface-hover); color: var(--brand-text); }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-color: var(--border-default); background: var(--surface-primary); color: var(--text-primary) !important; }
.mfp-content,
.mfp-inline-holder .mfp-content { color: var(--text-primary); }
.toast,
.toast-container > div,
.iziToast { border-color: var(--border-default); box-shadow: var(--shadow-elevated); }

/* Shared editor chrome */
.note-editor,
.note-toolbar,
.note-editable,
.nicEdit-panelContain,
.nicEdit-main,
.dss-editor,
.dss-editor-tools,
.dss-editor-body {
    border-color: var(--border-default);
    background: var(--surface-primary);
    color: var(--text-primary);
}
.note-toolbar,
.nicEdit-panelContain,
.dss-editor-tools { background: var(--surface-secondary); }

/* Loading states */
.skeleton,
.skeleton-line,
.skeleton-card,
.marketplace-skeleton,
[class*="skeleton-"] {
    background: linear-gradient(90deg, var(--skeleton-start) 25%, var(--skeleton-mid) 37%, var(--skeleton-start) 63%);
    background-size: 400% 100%;
}

/* Feature token bridges. They contain no palette and allow existing feature
   styles to migrate without page-level dark overrides. */
.dss-page {
    --dss-bg: var(--surface-page);
    --dss-card: var(--surface-primary);
    --dss-line: var(--border-default);
    --dss-muted: var(--text-muted);
    --dss-dark: var(--text-primary);
    --dss-ink: var(--text-primary);
    --dss-mint: var(--brand-soft);
    --dss-green: var(--brand-primary);
    --dss-green-dark: var(--brand-text);
    --dss-shadow: var(--shadow-soft);
}
.dp-page,
.dpc-page,
.dsp-page {
    --dp-bg: var(--surface-page);
    --dp-card: var(--surface-primary);
    --dp-line: var(--border-default);
    --dp-muted: var(--text-muted);
    --dp-dark: var(--text-primary);
    --dp-green: var(--brand-primary);
    --dp-green-dark: var(--brand-text);
}
.wls-page {
    --wls-bg: var(--surface-page);
    --wls-card: var(--surface-primary);
    --wls-border: var(--border-default);
    --wls-text: var(--text-primary);
    --wls-muted: var(--text-muted);
    --wls-green: var(--brand-primary);
}

/* Intentional on-brand contrast is never inferred from surrounding text. */
.btn--base,
.btn-primary,
.btn-success,
.bttn-primary,
.dp-buy,
.dpc-check-payment,
.dss-submit,
.dss-withdraw-button,
.wls-btn--primary,
.ps-btn-primary {
    color: var(--brand-on-primary) !important;
}

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

@media (max-width: 575px) {
    .app-theme-toggle--auth { top: 12px; right: 12px; }
    .app-theme-toggle { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-theme-toggle,
    body { transition: none; }
}