/* ============================================================
   VoERP CENTRAL THEME SYSTEM
   Light / Dark / System
   ============================================================ */


/* ============================================================
   LIGHT THEME — DEFAULT
   ============================================================ */

:root,
html[data-theme="light"] {

    color-scheme: light;

    /* Page */
    --bg-primary: #f4f7fb;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #eef3f8;

    /* Surfaces */
    --surface-primary: #ffffff;
    --surface-secondary: #f8fafc;
    --surface-tertiary: #f1f5f9;
    --surface-hover: #f3f7fb;
    --surface-active: #e8f1fb;

    /* Borders */
    --border-primary: #dfe7ef;
    --border-secondary: #cdd8e5;
    --border-strong: #b7c5d4;

    /* Text */
    --text-primary: #182230;
    --text-secondary: #344054;
    --text-muted: #667085;
    --text-disabled: #98a2b3;
    --text-inverse: #ffffff;

    /* Accent */
    --accent-primary: #2374c6;
    --accent-hover: #1d5d9b;
    --accent-active: #174678;
    --accent-soft: #eaf4ff;

    /* Semantic */
    --success: #087443;
    --success-hover: #066137;
    --success-bg: #e7f8ee;

    --warning: #a95a05;
    --warning-hover: #884704;
    --warning-bg: #fff3d8;

    --danger: #b42318;
    --danger-hover: #912018;
    --danger-bg: #feeceb;

    --info: #08758b;
    --info-hover: #065f70;
    --info-bg: #e8f7fa;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #d0dae5;
    --input-hover-border: #aebdce;
    --input-focus: #3187df;
    --input-placeholder: #98a2b3;
    --input-disabled-bg: #f2f4f7;

    /* Tables */
    --table-bg: #ffffff;
    --table-header-bg: #f5f8fb;
    --table-row-hover: #f7faff;
    --table-row-selected: #eaf4ff;
    --table-border: #e1e7ef;

    /* Navigation */
    --sidebar-bg: #102a43;
    --sidebar-surface: #143450;
    --sidebar-hover: #183b56;
    --sidebar-active: #243b53;
    --sidebar-text: #d9e2ec;
    --sidebar-muted: #9fb3c8;
    --sidebar-border: #274866;

    --navbar-bg: #ffffff;
    --navbar-border: #e1e7ef;

    /* Components */
    --card-bg: #ffffff;
    --card-header-bg: #fbfcfe;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --tooltip-bg: #182230;

    /* Shadows */
    --shadow-color: rgba(16, 42, 67, .10);
    --shadow-soft: 0 2px 10px rgba(16, 42, 67, .08);
    --shadow-card: 0 8px 24px rgba(16, 42, 67, .08);

    /* Focus */
    --focus-ring: rgba(49, 135, 223, .20);

    /* Scrollbar */
    --scrollbar-track: #eef3f8;
    --scrollbar-thumb: #bcc9d7;
    --scrollbar-hover: #9eafc1;
}


/* ============================================================
   DARK THEME
   ============================================================ */

html[data-theme="dark"] {

    color-scheme: dark;

    /* Page */
    --bg-primary: #11151b;
    --bg-secondary: #151a21;
    --bg-tertiary: #1a2029;

    /* Surfaces */
    --surface-primary: #1a2028;
    --surface-secondary: #202731;
    --surface-tertiary: #262e39;
    --surface-hover: #29323e;
    --surface-active: #2d3e50;

    /* Borders */
    --border-primary: #303946;
    --border-secondary: #394553;
    --border-strong: #465466;

    /* Text */
    --text-primary: #edf1f6;
    --text-secondary: #cbd3dc;
    --text-muted: #98a6b6;
    --text-disabled: #677483;
    --text-inverse: #11151b;

    /* Accent */
    --accent-primary: #5d9dde;
    --accent-hover: #75afe8;
    --accent-active: #87b9ea;
    --accent-soft: #20364d;

    /* Semantic */
    --success: #55b88a;
    --success-hover: #6cc79c;
    --success-bg: #17382b;

    --warning: #d7a452;
    --warning-hover: #e1b66d;
    --warning-bg: #3a2d18;

    --danger: #dc776e;
    --danger-hover: #e58d85;
    --danger-bg: #3d2222;

    --info: #6bb4c3;
    --info-hover: #82c3cf;
    --info-bg: #19343a;

    /* Inputs */
    --input-bg: #181e26;
    --input-border: #374250;
    --input-hover-border: #4a596a;
    --input-focus: #5d9dde;
    --input-placeholder: #748293;
    --input-disabled-bg: #20262e;

    /* Tables */
    --table-bg: #1a2028;
    --table-header-bg: #222a34;
    --table-row-hover: #242d38;
    --table-row-selected: #263b50;
    --table-border: #303946;

    /* Navigation */
    --sidebar-bg: #0d1823;
    --sidebar-surface: #132333;
    --sidebar-hover: #192d40;
    --sidebar-active: #21405a;
    --sidebar-text: #d8e2ec;
    --sidebar-muted: #8da2b5;
    --sidebar-border: #253b50;

    --navbar-bg: #171d24;
    --navbar-border: #303946;

    /* Components */
    --card-bg: #1a2028;
    --card-header-bg: #202731;
    --modal-bg: #1a2028;
    --dropdown-bg: #202731;
    --tooltip-bg: #eef2f6;

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, .34);
    --shadow-soft: 0 3px 12px rgba(0, 0, 0, .24);
    --shadow-card: 0 10px 28px rgba(0, 0, 0, .24);

    /* Focus */
    --focus-ring: rgba(93, 157, 222, .24);

    /* Scrollbar */
    --scrollbar-track: #14191f;
    --scrollbar-thumb: #394552;
    --scrollbar-hover: #4b5a69;
}


/* ============================================================
   LEGACY VOERP VARIABLE BRIDGE

   Eski 8.000 satırlık CSS'in büyük bölümünü yeni semantik
   token sistemiyle otomatik bağlar.
   ============================================================ */

:root,
html[data-theme] {

    --voerp-bg: var(--bg-primary);
    --voerp-bg-soft: var(--bg-secondary);

    --voerp-surface: var(--surface-primary);
    --voerp-surface-soft: var(--surface-secondary);

    --voerp-text: var(--text-primary);
    --voerp-text-secondary: var(--text-secondary);

    --voerp-muted: var(--text-muted);
    --voerp-subtle: var(--text-disabled);

    --voerp-border: var(--border-primary);
    --voerp-border-strong: var(--border-secondary);

    --voerp-shadow-xs: var(--shadow-soft);
    --voerp-shadow-sm: var(--shadow-soft);
    --voerp-shadow: var(--shadow-card);
    --voerp-shadow-lg: var(--shadow-card);
}


/* ============================================================
   BOOTSTRAP VARIABLE BRIDGE
   ============================================================ */

html[data-theme="light"],
html[data-theme="dark"] {

    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);

    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-secondary);
    --bs-tertiary-bg: var(--surface-tertiary);

    --bs-emphasis-color: var(--text-primary);

    --bs-border-color: var(--border-primary);

    --bs-link-color: var(--accent-primary);
    --bs-link-hover-color: var(--accent-hover);

    --bs-primary: var(--accent-primary);
}


/* ============================================================
   ROOT / PAGE
   ============================================================ */

html {
    background: var(--bg-primary);
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

main {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
legend {
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}


/* ============================================================
   NAVBAR / TOPBAR
   ============================================================ */

main > .d-flex.justify-content-between.mb-4 {
    background: var(--navbar-bg);
    border: 1px solid var(--navbar-border);
    border-radius: 10px;
    padding: .65rem .8rem;
    color: var(--text-primary);
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.sidebar .brand {
    color: var(--text-inverse);
}

html[data-theme="dark"] .sidebar .brand {
    color: var(--sidebar-text);
}

.sidebar a {
    color: var(--sidebar-text);
}

.sidebar a:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
}

.sidebar a.active,
.sidebar .sidebar-subitem.active {
    background: var(--sidebar-active);
    color: #ffffff;
}

.sidebar-section-toggle {
    color: var(--sidebar-muted);
}

.sidebar-section-toggle:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
}


/* ============================================================
   CARDS / PANELS
   ============================================================ */

.card,
.voerp-dashboard-panel,
.voerp-kpi-card,
.voerp-mini-stat {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.card-header,
.card-footer {
    background: var(--card-header-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}


/* Bootstrap bg-white legacy compatibility */

.bg-white {
    background-color: var(--surface-primary) !important;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-control,
.form-select,
.form-check-input,
textarea,
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="search"] {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--input-hover-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-focus);
    box-shadow: 0 0 0 .2rem var(--focus-ring);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--input-disabled-bg);
    color: var(--text-disabled);
}

.form-label {
    color: var(--text-secondary);
}


/* Chrome/Safari autofill */

html[data-theme="dark"]
input:-webkit-autofill,
html[data-theme="dark"]
input:-webkit-autofill:hover,
html[data-theme="dark"]
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow:
        0 0 0 1000px var(--input-bg) inset;
    caret-color: var(--text-primary);
}


/* Native controls */

html[data-theme="dark"]
input[type="date"],
html[data-theme="dark"]
input[type="time"],
html[data-theme="dark"]
input[type="datetime-local"] {
    color-scheme: dark;
}


/* ============================================================
   TABLES
   ============================================================ */

.table {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--table-border);

    --bs-table-hover-bg: var(--table-row-hover);
    --bs-table-hover-color: var(--text-primary);

    color: var(--text-primary);
}

.table-light {
    --bs-table-bg: var(--table-header-bg);
    --bs-table-color: var(--text-secondary);
    --bs-table-border-color: var(--table-border);
}

.table > thead {
    background: var(--table-header-bg);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--table-border);
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu {
    background: var(--dropdown-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-card);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.dropdown-divider {
    border-color: var(--border-primary);
}


/* ============================================================
   MODAL
   ============================================================ */

.modal-content {
    background: var(--modal-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--border-primary);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

.btn-success {
    background: var(--success);
    border-color: var(--success);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

.btn-outline-secondary:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--input-focus);
    outline-offset: 2px;
}


/* ============================================================
   ALERTS / SEMANTIC STATES
   ============================================================ */

.alert-success {
    color: var(--success);
    background: var(--success-bg);
    border-color: color-mix(
        in srgb,
        var(--success) 25%,
        transparent
    );
}

.alert-warning {
    color: var(--warning);
    background: var(--warning-bg);
}

.alert-danger {
    color: var(--danger);
    background: var(--danger-bg);
}

.alert-info {
    color: var(--info);
    background: var(--info-bg);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.page-link {
    background: var(--surface-primary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.page-link:hover {
    background: var(--surface-hover);
    color: var(--accent-primary);
}

.active > .page-link,
.page-link.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}


/* ============================================================
   TRADE UX / CONSIGNMENT / READINESS
   ============================================================ */

.trade-line-row,
.return-line-row,
.voerp-readiness-panel,
.voerp-consignment-preview,
.voerp-live-summary {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.voerp-readiness-header,
.voerp-consignment-header {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

.voerp-readiness-item,
.voerp-consignment-row,
.voerp-operation-summary-card,
.voerp-operation-summary-heading,
.voerp-stock-availability-values > div,
.voerp-live-summary-grid > div {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.voerp-readiness-item strong,
.voerp-consignment-row strong,
.voerp-operation-summary-card strong,
.voerp-stock-availability strong,
.voerp-live-summary strong {
    color: var(--text-primary);
}


/* ============================================================
   BADGES
   ============================================================ */

html[data-theme="dark"] .text-bg-secondary {
    background: var(--surface-tertiary) !important;
    color: var(--text-secondary) !important;
}


/* ============================================================
   TOOLTIP
   ============================================================ */

.tooltip {
    --bs-tooltip-bg: var(--tooltip-bg);
    --bs-tooltip-color: var(--text-inverse);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--scrollbar-thumb)
        var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}


/* ============================================================
   THEME CONTROL
   ============================================================ */

.voerp-theme-control {
    display: inline-flex;
    align-items: center;
    gap: .25rem;

    padding: .2rem;

    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}

.voerp-theme-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .3rem;

    min-height: 30px;

    padding: .25rem .5rem;

    color: var(--text-muted);
    background: transparent;

    border: 0;
    border-radius: 7px;

    font-size: .68rem;
    font-weight: 650;
}

.voerp-theme-option:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.voerp-theme-option.active {
    color: var(--accent-primary);
    background: var(--accent-soft);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767.98px) {

    .voerp-theme-option span {
        display: none;
    }

    .voerp-theme-option {
        width: 32px;
        padding: .25rem;
    }
}


/* ============================================================
   COMPANY DROPDOWN PORTAL
   Görsel tasarımı değiştirmez; yalnız stacking context'ten çıkarır.
   ============================================================ */

.voerp-company-dropdown-portal {
    z-index: 20000 !important;

    min-width: 220px;

    max-width:
        calc(100vw - 24px);
}