/* =========================================================
   Haulix tema katmani — mevcut panelin ustune bindirilen gorunum.
   Yalnizca html[data-ui="haulix"] oldugunda uygulanir.
   Isaretleme, davranis ve modallar degismez; yalnizca renk, bicim, yerlesim.
   ========================================================= */

/* ---------- Degiskenler: koyu (varsayilan) ---------- */
html[data-ui="haulix"] {
    --hx-accent: #eef5a3;
    --hx-accent-2: #e3ef86;
    --hx-ink: #151515;
    --hx-chip: #2a2a2a;
    --hx-chip-2: #333333;
    --hx-nav: #2a2a2a;
    --hx-row: #262626;
    --hx-row-hover: #2c2c2c;
    --hx-seg: #1f1f1f;
    --hx-seg-on: #2e2e2e;
    --hx-card-a: #212121;
    --hx-card-b: #1d1d1d;
    --hx-pop: #2a2a2a;
    --hx-green: #8ee67f;
    --hx-green-bg: rgba(110, 200, 110, 0.16);
    --hx-amber: #f3b443;
    --hx-amber-bg: rgba(243, 180, 67, 0.14);
    --hx-red: #f2625e;
    --hx-red-bg: rgba(242, 98, 94, 0.15);
    --hx-blue: #59c7f5;
    --hx-blue-bg: rgba(89, 199, 245, 0.15);
    --hx-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.04);

    --bg: #131313;
    --card: #232323;
    --border: rgba(255, 255, 255, 0.06);
    --border2: rgba(255, 255, 255, 0.1);
    --text: #f3f3f3;
    --text2: #cfcfcf;
    --text3: #8b8b8b;
    --text4: #6f6f6f;
    --text5: #8b8b8b;
    --hover: rgba(255, 255, 255, 0.03);
    --hover2: rgba(255, 255, 255, 0.055);
    --hover3: rgba(255, 255, 255, 0.09);
    --input-bg: #2a2a2a;
    --textbox-bg: #2a2a2a;
    --textbox-text: #f3f3f3;
    --textbox-placeholder: #7c7c7c;
    --sidebar-bg: #1d1d1d;
    --modal-overlay: rgba(0, 0, 0, 0.66);
    --modal-header-bg: #262626;
    --modal-footer-bg: #202020;
    --shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    --sidebar-width: 232px;
    --purple: #eef5a3;
    --purple-hover: #e3ef86;
    --surface: #2e2e2e;
    color-scheme: dark;
}

/* ---------- Degiskenler: acik ---------- */
html[data-ui="haulix"][data-theme="light"] {
    --hx-accent: #e1ef72;
    --hx-accent-2: #d6e85a;
    --hx-ink: #151515;
    --hx-chip: #ffffff;
    --hx-chip-2: #f1f2ee;
    --hx-nav: #f1f2ee;
    --hx-row: #f5f6f2;
    --hx-row-hover: #eff0ec;
    --hx-seg: #e4e6e0;
    --hx-seg-on: #ffffff;
    --hx-card-a: #ffffff;
    --hx-card-b: #ffffff;
    --hx-pop: #ffffff;
    --hx-green: #3aa94a;
    --hx-green-bg: rgba(58, 169, 74, 0.13);
    --hx-amber: #c38608;
    --hx-amber-bg: rgba(229, 160, 20, 0.15);
    --hx-red: #e0443e;
    --hx-red-bg: rgba(224, 68, 62, 0.12);
    --hx-blue: #1a93c9;
    --hx-blue-bg: rgba(26, 147, 201, 0.12);
    --hx-ring: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.05);

    --bg: #eef0eb;
    --card: #ffffff;
    --border: rgba(0, 0, 0, 0.07);
    --border2: rgba(0, 0, 0, 0.1);
    --text: #151515;
    --text2: #3a3a3a;
    --text3: #73756f;
    --text4: #a3a59f;
    --text5: #73756f;
    --hover: rgba(0, 0, 0, 0.02);
    --hover2: rgba(0, 0, 0, 0.045);
    --hover3: rgba(0, 0, 0, 0.07);
    --input-bg: #f3f4f0;
    --textbox-bg: #f3f4f0;
    --textbox-text: #151515;
    --textbox-placeholder: #9a9c95;
    --sidebar-bg: #ffffff;
    --modal-overlay: rgba(20, 22, 18, 0.4);
    --modal-header-bg: #f3f4f0;
    --modal-footer-bg: #f7f8f5;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    --purple: #8da019;
    --purple-hover: #738312;
    --surface: #ffffff;
    color-scheme: light;
}

/* ---------- Govde ---------- */
html[data-ui="haulix"] body {
    background: var(--bg);
    background-image: radial-gradient(1200px 600px at 70% -10%, #1d1d1d 0%, rgba(19, 19, 19, 0) 60%);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
    font-size: 14px;
}
html[data-ui="haulix"][data-theme="light"] body {
    background-image: radial-gradient(1200px 600px at 70% -10%, #f8f9f6 0%, rgba(238, 240, 235, 0) 60%);
}
html[data-ui="haulix"] ::-webkit-scrollbar-thumb { background: #2f2f2f; border-radius: 8px; }
html[data-ui="haulix"][data-theme="light"] ::-webkit-scrollbar-thumb { background: #cfd1cb; }

/* ---------- Kenar cubugu (yuzen) ---------- */
html[data-ui="haulix"] .sidebar {
    border: 0;
    background: linear-gradient(180deg, #1f1f1f 0%, #1b1b1b 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
html[data-ui="haulix"][data-theme="light"] .sidebar {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

@media (min-width: 992px) {
    html[data-ui="haulix"] .sidebar {
        top: 18px;
        left: 18px;
        height: calc(100vh - 36px);
        min-height: 0;
        width: var(--sidebar-width);
        border-radius: 34px;
        padding: 22px 12px 16px;
    }
    html[data-ui="haulix"] .main {
        margin-left: calc(var(--sidebar-width) + 46px);
        padding: 18px 28px 24px 0;
    }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar {
        width: 68px;
        padding: 22px 0 16px;
        align-items: center;
    }
    html[data-ui="haulix"] body.sidebar-collapsed .main { margin-left: 114px; }
}

html[data-ui="haulix"] .sidebar-brand { margin-bottom: 18px; padding: 0 9px; gap: 12px; }
html[data-ui="haulix"] .sidebar-brand .brand-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--hx-accent); color: var(--hx-ink); font-size: 15px;
}
html[data-ui="haulix"] .sidebar-brand .brand-text { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
html[data-ui="haulix"] body.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }

html[data-ui="haulix"] .sidebar-section-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--text4);
    padding: 0 14px; margin: 16px 0 8px;
}

html[data-ui="haulix"] .sidebar-nav {
    gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 6px;
}
html[data-ui="haulix"] .sidebar-nav::-webkit-scrollbar { display: none; }

html[data-ui="haulix"] .sidebar-nav .nav-link {
    height: 44px; padding: 0 14px 0 4px; gap: 6px; border-radius: 22px;
    background: transparent; color: var(--text2); font-size: 14px; font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
html[data-ui="haulix"] .sidebar-nav .nav-link > i:first-child {
    width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0;
    border-radius: 50%; background: var(--hx-nav); font-size: 15px; opacity: 1; transition: background 0.2s;
}
html[data-ui="haulix"] .sidebar-nav .nav-link:hover { background: var(--hover2); color: var(--text); }
html[data-ui="haulix"] .sidebar-nav .nav-link.active,
html[data-ui="haulix"] .sidebar-nav .nav-sub.active {
    background: #ffffff; color: #151515; font-weight: 500;
}
html[data-ui="haulix"] .sidebar-nav .nav-link.active > i:first-child { background: rgba(0, 0, 0, 0.07); }
html[data-ui="haulix"][data-theme="light"] .sidebar-nav .nav-link.active,
html[data-ui="haulix"][data-theme="light"] .sidebar-nav .nav-sub.active { background: #151515; color: #ffffff; }
html[data-ui="haulix"][data-theme="light"] .sidebar-nav .nav-link.active > i:first-child { background: rgba(255, 255, 255, 0.14); }

html[data-ui="haulix"] .nav-caret { width: auto !important; height: auto !important; background: none !important; color: var(--text3); font-size: 12px; margin-right: 4px; }
html[data-ui="haulix"] .sidebar-nav .nav-link.active .nav-caret { color: inherit; }
html[data-ui="haulix"] .nav-dropdown-menu { padding: 6px 0 2px 26px; gap: 6px; }
html[data-ui="haulix"] .nav-sub { height: 38px; padding: 0 12px 0 4px; font-size: 13px; padding-left: 4px; }
html[data-ui="haulix"] .sidebar-nav .nav-sub > i:first-child { width: 28px; height: 28px; font-size: 13px; }

html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav { align-items: center; padding: 0; }
html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-link {
    width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0;
    border-radius: 50%; background: var(--hx-nav);
}
html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-link > i:first-child { background: transparent; width: auto; height: auto; }
html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-link:hover { background: var(--hx-chip-2); }
html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-link.active { background: #ffffff; color: #151515; }
html[data-ui="haulix"][data-theme="light"] body.sidebar-collapsed .sidebar-nav .nav-link.active { background: #151515; color: #ffffff; }
html[data-ui="haulix"] body.sidebar-collapsed .nav-caret { display: none; }
html[data-ui="haulix"] body.sidebar-collapsed .nav-dropdown-menu { padding: 8px 0 0; align-items: center; }
html[data-ui="haulix"] body.sidebar-collapsed .nav-sub { width: 38px; height: 38px; padding: 0; }

html[data-ui="haulix"] .nav-flyout-title { display: none; }
@media (min-width: 992px) {
    html[data-ui="haulix"] body.sidebar-collapsed .nav-section.has-active > .nav-dropdown-toggle,
    html[data-ui="haulix"] body.sidebar-collapsed .nav-section.flyout-open > .nav-dropdown-toggle { background: var(--hx-chip-2); color: var(--text); }
    html[data-ui="haulix"] body.sidebar-collapsed .nav-section.has-active > .nav-dropdown-toggle { background: #ffffff; color: #151515; }
    html[data-ui="haulix"][data-theme="light"] body.sidebar-collapsed .nav-section.has-active > .nav-dropdown-toggle { background: #151515; color: #ffffff; }

    html[data-ui="haulix"] body.sidebar-collapsed .nav-section .nav-dropdown-menu,
    html[data-ui="haulix"] body.sidebar-collapsed .nav-section.open .nav-dropdown-menu { display: none; }
    html[data-ui="haulix"] body.sidebar-collapsed .nav-section.flyout-open .nav-dropdown-menu {
        display: flex; position: fixed; z-index: 1040;
        min-width: 210px; max-height: calc(100vh - 24px); overflow-y: auto;
        padding: 10px; gap: 4px; align-items: stretch;
        background: var(--card); border-radius: 22px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), var(--hx-ring);
        animation: hxFlyoutIn 0.14s ease-out;
    }
    html[data-ui="haulix"][data-theme="light"] body.sidebar-collapsed .nav-section.flyout-open .nav-dropdown-menu {
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12), var(--hx-ring);
    }
    html[data-ui="haulix"] body.sidebar-collapsed .nav-flyout-title {
        display: block; padding: 4px 10px 8px; font-size: 11px; font-weight: 500;
        letter-spacing: 0.14em; text-transform: uppercase; color: var(--text4);
    }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-sub {
        width: 100%; height: 38px; padding: 0 14px 0 4px; gap: 6px;
        justify-content: flex-start; border-radius: 19px; background: transparent;
    }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-sub > i:first-child {
        width: 28px; height: 28px; background: var(--hx-nav);
    }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-sub:hover { background: var(--hover2); }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-sub.active { background: #ffffff; color: #151515; }
    html[data-ui="haulix"][data-theme="light"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-sub.active { background: #151515; color: #ffffff; }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-sub.active > i:first-child { background: rgba(0, 0, 0, 0.07); }
    html[data-ui="haulix"][data-theme="light"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-sub.active > i:first-child { background: rgba(255, 255, 255, 0.14); }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-nav .nav-dropdown-menu .nav-text { display: inline; }
}
@keyframes hxFlyoutIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

html[data-ui="haulix"] .sidebar-footer { border-top: 1px solid var(--border); padding-top: 14px; }
html[data-ui="haulix"] .btn-logout {
    height: 42px; border: 0; border-radius: 21px; background: var(--hx-chip); color: var(--text2); font-weight: 500;
}
html[data-ui="haulix"] .btn-logout:hover { background: var(--hx-red-bg); color: var(--hx-red); border: 0; }
html[data-ui="haulix"] body.sidebar-collapsed .sidebar-footer { width: 100%; display: flex; justify-content: center; border-top: 0; }
html[data-ui="haulix"] body.sidebar-collapsed .sidebar-footer form { display: flex; }
html[data-ui="haulix"] body.sidebar-collapsed .btn-logout { width: 44px; height: 44px; padding: 0; border-radius: 50%; }

html[data-ui="haulix"] .sidebar-collapse-btn {
    top: 26px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: var(--hx-chip); color: var(--text2); box-shadow: none;
}
html[data-ui="haulix"] .sidebar-collapse-btn:hover { background: var(--hx-chip-2); color: var(--text); }
@media (min-width: 992px) {
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-collapse-btn {
        top: 22px; left: 16px; right: auto; width: 36px; height: 36px;
        background: var(--hx-chip-2); color: var(--text); box-shadow: none;
        opacity: 0; transition: opacity 0.18s ease, background 0.2s;
    }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-collapse-btn:hover,
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-collapse-btn:focus-visible { opacity: 1; }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-brand .brand-icon { transition: opacity 0.18s ease; }
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-collapse-btn:hover ~ .sidebar-brand .brand-icon,
    html[data-ui="haulix"] body.sidebar-collapsed .sidebar-collapse-btn:focus-visible ~ .sidebar-brand .brand-icon { opacity: 0; }
}

/* ---------- Ust cubuk ---------- */
html[data-ui="haulix"] .topbar {
    background: var(--bg); border-bottom: 0; padding: 4px 0 10px; margin-bottom: 0;
}
html[data-ui="haulix"] .topbar-search-input,
html[data-ui="haulix"] input.topbar-search-input {
    height: 38px; width: 560px; max-width: 100%; padding: 0 38px 0 40px; border: 0; border-radius: 19px;
    background-color: var(--hx-chip) !important; color: var(--text) !important; font-size: 13px;
    box-shadow: var(--hx-ring);
}
html[data-ui="haulix"] .topbar-search-input::placeholder { color: var(--text3); }
html[data-ui="haulix"] .topbar-search-input:focus {
    outline: 2px solid color-mix(in srgb, var(--hx-accent) 45%, transparent); outline-offset: 0;
}
html[data-ui="haulix"] .topbar-search-icon { left: 15px; color: var(--text3); }
html[data-ui="haulix"] .topbar-search-results {
    border: 0; border-radius: 22px; background: var(--hx-pop);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), var(--hx-ring);
}
html[data-ui="haulix"] .gs-group { background: transparent; }
html[data-ui="haulix"] .gs-item { border-top-color: var(--border); }
html[data-ui="haulix"] .gs-item:hover { background: var(--hover2); color: var(--text); }
html[data-ui="haulix"] .gs-icon { border-radius: 50%; background: var(--hx-nav); color: var(--text2); }

html[data-ui="haulix"] .theme-toggle {
    width: 74px; height: 38px; padding: 4px; border: 0; border-radius: 19px;
    background: var(--hx-chip); box-shadow: var(--hx-ring);
}
html[data-ui="haulix"] .theme-toggle-knob {
    width: 33px; height: 30px; border-radius: 15px; background: #3a3a3a; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
html[data-ui="haulix"] .theme-toggle-knob svg { color: var(--hx-accent); width: 15px; height: 15px; }
html[data-ui="haulix"][data-theme="dark"] .theme-toggle-knob { transform: translateX(33px); }
html[data-ui="haulix"][data-theme="light"] .theme-toggle-knob { background: #151515; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }

html[data-ui="haulix"] .header-avatar { width: 40px; height: 40px; border-radius: 50%; box-shadow: var(--hx-ring); }
html[data-ui="haulix"] .dropdown-menu {
    border: 0; border-radius: 22px; padding: 8px; min-width: 230px; background: var(--hx-pop);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), var(--hx-ring);
}
html[data-ui="haulix"][data-theme="light"] .dropdown-menu,
html[data-ui="haulix"][data-theme="light"] .topbar-search-results { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12), var(--hx-ring); }
html[data-ui="haulix"] .dropdown-item { border-radius: 14px; }
html[data-ui="haulix"] .dropdown-item.text-danger { color: var(--hx-red); }
html[data-ui="haulix"] .dropdown-item.text-danger:hover { background: var(--hx-red-bg); }

/* ---------- Sayfa basligi ---------- */
html[data-ui="haulix"] .page-header { margin: 22px 0 24px; align-items: flex-end; }
html[data-ui="haulix"] .page-title { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
html[data-ui="haulix"] .page-subtitle { font-size: 14px; margin-top: 8px; color: var(--text3); }

/* ---------- Kartlar ---------- */
html[data-ui="haulix"] .card,
html[data-ui="haulix"] .table-card,
html[data-ui="haulix"] .role-card {
    background: linear-gradient(180deg, var(--hx-card-a) 0%, var(--hx-card-b) 100%);
    border-radius: 28px; box-shadow: var(--shadow);
}
html[data-ui="haulix"] .table-card { padding: 22px; }
html[data-ui="haulix"] .card-header { padding: 18px 22px; border-bottom-color: var(--border); }
html[data-ui="haulix"] .card-body { padding: 22px; }
html[data-ui="haulix"] .stat-card { background: linear-gradient(180deg, var(--hx-card-a) 0%, var(--hx-card-b) 100%); border-radius: 24px; box-shadow: var(--shadow); }
html[data-ui="haulix"] .stat-card-icon { border-radius: 50%; }
html[data-ui="haulix"] .stat-card-icon.blue,
html[data-ui="haulix"] .stat-card-icon.purple { background: color-mix(in srgb, var(--hx-accent) 16%, transparent); color: var(--hx-accent); }
html[data-ui="haulix"][data-theme="light"] .stat-card-icon.blue,
html[data-ui="haulix"][data-theme="light"] .stat-card-icon.purple { color: #738312; }
html[data-ui="haulix"] .stat-card-icon.green { background: var(--hx-green-bg); color: var(--hx-green); }
html[data-ui="haulix"] .stat-card-icon.orange { background: var(--hx-amber-bg); color: var(--hx-amber); }
html[data-ui="haulix"] .stat-card-icon.pink { background: var(--hx-red-bg); color: var(--hx-red); }
html[data-ui="haulix"] .stat-card-value { font-weight: 500; }
html[data-ui="haulix"] .plugin-card:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), var(--hx-ring); }
html[data-ui="haulix"] .detail-block,
html[data-ui="haulix"] .capability-grid { border: 0; border-radius: 18px; background: var(--hx-row); }
html[data-ui="haulix"] .table-title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
html[data-ui="haulix"] code { background: var(--hx-chip-2); border-radius: 6px; }
html[data-ui="haulix"][data-theme="light"] code { background: #e9ebe5; }

/* ---------- Tablolar (satir kartlari) ---------- */
html[data-ui="haulix"] .data-table,
html[data-ui="haulix"] .table { border-collapse: separate; border-spacing: 0 8px; }
html[data-ui="haulix"] .data-table th,
html[data-ui="haulix"] .table th {
    padding: 0 16px 2px; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--text3); border-bottom: 0;
}
html[data-ui="haulix"] .data-table td,
html[data-ui="haulix"] .table td { padding: 13px 16px; background: var(--hx-row); border-bottom: 0; }
html[data-ui="haulix"] .data-table td:first-child,
html[data-ui="haulix"] .table td:first-child { border-radius: 16px 0 0 16px; }
html[data-ui="haulix"] .data-table td:last-child,
html[data-ui="haulix"] .table td:last-child { border-radius: 0 16px 16px 0; }
html[data-ui="haulix"] .data-table tbody tr:hover td,
html[data-ui="haulix"] .table tbody tr:hover td,
html[data-ui="haulix"] .table-hover tbody tr:hover td { background: var(--hx-row-hover); }
html[data-ui="haulix"] .table-user img { border-radius: 50%; }
html[data-ui="haulix"] .table-footer { border-top: 0; padding-top: 10px; }
html[data-ui="haulix"] .list-group-item { border-bottom-color: var(--border); }

/* ---------- Rozetler ---------- */
html[data-ui="haulix"] .badge,
html[data-ui="haulix"] .status-badge,
html[data-ui="haulix"] .role-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
html[data-ui="haulix"] .badge-soft-primary,
html[data-ui="haulix"] .role-badge.admin { background: color-mix(in srgb, var(--hx-accent) 16%, transparent); color: var(--hx-accent); font-weight: 500; }
html[data-ui="haulix"][data-theme="light"] .badge-soft-primary,
html[data-ui="haulix"][data-theme="light"] .role-badge.admin { background: #eef3c8; color: #56620e; }
html[data-ui="haulix"] .badge-soft-success,
html[data-ui="haulix"] .status-badge.active,
html[data-ui="haulix"] .status-badge.approved { background: var(--hx-green-bg); color: var(--hx-green); font-weight: 500; }
html[data-ui="haulix"] .badge-soft-warning,
html[data-ui="haulix"] .status-badge.inactive,
html[data-ui="haulix"] .status-badge.pending { background: var(--hx-amber-bg); color: var(--hx-amber); font-weight: 500; }
html[data-ui="haulix"] .badge-soft-danger,
html[data-ui="haulix"] .status-badge.declined,
html[data-ui="haulix"] .status-badge.suspended { background: var(--hx-red-bg); color: var(--hx-red); font-weight: 500; }
html[data-ui="haulix"] .badge-soft-info,
html[data-ui="haulix"] .role-badge.editor { background: var(--hx-blue-bg); color: var(--hx-blue); font-weight: 500; }
html[data-ui="haulix"] .badge-soft-secondary,
html[data-ui="haulix"] .role-badge.viewer { background: var(--hx-chip-2); color: var(--text2); font-weight: 500; }
html[data-ui="haulix"][data-theme="light"] .badge-soft-secondary,
html[data-ui="haulix"][data-theme="light"] .role-badge.viewer { background: #eceeea; color: #6a6a6a; }

/* ---------- Sayfalama ---------- */
html[data-ui="haulix"] .page-btn {
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--hx-chip); color: var(--text2); box-shadow: var(--hx-ring);
}
html[data-ui="haulix"] .page-btn:hover { background: var(--hx-chip-2); color: var(--text); }
html[data-ui="haulix"] .page-btn.active { background: var(--hx-accent); color: var(--hx-ink); box-shadow: none; }
html[data-ui="haulix"] .page-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ---------- Butonlar ---------- */
html[data-ui="haulix"] .btn {
    height: 40px; padding: 0 18px; border-radius: 20px; font-size: 13.5px; font-weight: 500; gap: 8px;
    transition: background 0.2s, transform 0.15s, color 0.2s;
}
html[data-ui="haulix"] .btn:active { transform: scale(0.97); }
html[data-ui="haulix"] .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
html[data-ui="haulix"] .btn-lg { height: 46px; padding: 0 24px; font-size: 15px; }
html[data-ui="haulix"] .btn-primary { background: var(--hx-accent); color: var(--hx-ink); }
html[data-ui="haulix"] .btn-primary:hover { background: var(--hx-accent-2); opacity: 1; }
html[data-ui="haulix"] .btn-secondary,
html[data-ui="haulix"] .btn-light { background: var(--hx-chip); border: 0; color: var(--text); box-shadow: var(--hx-ring); }
html[data-ui="haulix"] .btn-secondary:hover,
html[data-ui="haulix"] .btn-light:hover { background: var(--hx-chip-2); color: var(--text); }
html[data-ui="haulix"] .btn-danger { background: var(--hx-red-bg); color: var(--hx-red); }
html[data-ui="haulix"] .btn-danger:hover { background: color-mix(in srgb, var(--hx-red) 26%, transparent); }
html[data-ui="haulix"] .btn-success { background: var(--hx-green-bg); color: var(--hx-green); }
html[data-ui="haulix"] .btn-success:hover { background: color-mix(in srgb, var(--hx-green) 26%, transparent); }
html[data-ui="haulix"] .btn-outline-primary { border: 1px solid color-mix(in srgb, var(--hx-accent) 55%, transparent); color: var(--hx-accent); }
html[data-ui="haulix"][data-theme="light"] .btn-outline-primary { color: #56620e; border-color: #b5c832; }
html[data-ui="haulix"] .btn-outline-primary:hover { background: color-mix(in srgb, var(--hx-accent) 14%, transparent); }
html[data-ui="haulix"] .btn-outline-secondary { border: 1px solid var(--border2); color: var(--text2); }
html[data-ui="haulix"] .btn-outline-secondary:hover { background: var(--hover2); color: var(--text); }
html[data-ui="haulix"] .btn-outline-danger { border: 1px solid color-mix(in srgb, var(--hx-red) 40%, transparent); color: var(--hx-red); }
html[data-ui="haulix"] .btn-outline-danger:hover { background: var(--hx-red-bg); }
html[data-ui="haulix"] .btn-close { border-radius: 50%; background: var(--hx-chip); color: var(--text2); }
html[data-ui="haulix"] .btn-close:hover { background: var(--hx-chip-2); color: var(--text); }

/* ---------- Formlar ---------- */
html[data-ui="haulix"] .form-group label,
html[data-ui="haulix"] .form-label { font-weight: 500; color: var(--text2); }
html[data-ui="haulix"] .form-control,
html[data-ui="haulix"] .form-input,
html[data-ui="haulix"] .form-select,
html[data-ui="haulix"] input.form-control,
html[data-ui="haulix"] textarea.form-control,
html[data-ui="haulix"] input.form-input,
html[data-ui="haulix"] textarea.form-input {
    border: 1px solid transparent; border-radius: 14px; padding: 11px 16px;
    background-color: var(--textbox-bg) !important; color: var(--textbox-text) !important;
}
html[data-ui="haulix"][data-theme="light"] .form-control,
html[data-ui="haulix"][data-theme="light"] input.form-control,
html[data-ui="haulix"][data-theme="light"] textarea.form-control,
html[data-ui="haulix"][data-theme="light"] .form-select { border-color: rgba(0, 0, 0, 0.06); }
html[data-ui="haulix"] .form-control:focus,
html[data-ui="haulix"] .form-input:focus,
html[data-ui="haulix"] .form-select:focus {
    border-color: color-mix(in srgb, var(--hx-accent) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-accent) 18%, transparent);
}
html[data-ui="haulix"] input.form-control:-webkit-autofill,
html[data-ui="haulix"] input.form-input:-webkit-autofill {
    -webkit-text-fill-color: var(--textbox-text);
    box-shadow: 0 0 0 1000px var(--textbox-bg) inset;
}
html[data-ui="haulix"] .form-control.is-invalid,
html[data-ui="haulix"] .form-input.error { border-color: var(--hx-red); }
html[data-ui="haulix"] .invalid-feedback { color: var(--hx-red); }
html[data-ui="haulix"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-ui="haulix"] .form-select option { background: var(--hx-pop); color: var(--text); }
html[data-ui="haulix"] .form-check-input { border-radius: 7px; border-color: var(--border2); background: var(--hx-chip); }
html[data-ui="haulix"] .form-check-input:checked { background: var(--hx-accent); border-color: var(--hx-accent); }
html[data-ui="haulix"] .form-check-input:checked::after { border-color: var(--hx-ink); }
html[data-ui="haulix"] .input-group .form-control:first-child { border-radius: 14px 0 0 14px; }
html[data-ui="haulix"] .input-group .form-control:last-child { border-radius: 0 14px 14px 0; }
html[data-ui="haulix"] .input-group-text { background: var(--hx-chip-2); border-color: transparent; }
html[data-ui="haulix"] .input-group-text:first-child { border-radius: 14px 0 0 14px; }
html[data-ui="haulix"] .input-group-text:last-child { border-radius: 0 14px 14px 0; }
html[data-ui="haulix"] .input-group > .btn:last-child { border-radius: 0 20px 20px 0; }

/* ---------- Sekmeler ---------- */
html[data-ui="haulix"] .filter-tabs,
html[data-ui="haulix"] .nav-pills,
html[data-ui="haulix"] .log-type-tabs {
    padding: 5px; gap: 2px; border: 0; border-radius: 24px; background: var(--hx-seg);
}
html[data-ui="haulix"] .filter-tab,
html[data-ui="haulix"] .nav-pills .nav-link,
html[data-ui="haulix"] .log-type-tab {
    height: 34px; min-height: 0; padding: 0 16px; border-radius: 17px; font-size: 13.5px; font-weight: 500;
    color: var(--text2); display: inline-flex; align-items: center; gap: 8px;
}
html[data-ui="haulix"] .filter-tab:hover:not(.active),
html[data-ui="haulix"] .nav-pills .nav-link:hover:not(.active),
html[data-ui="haulix"] .log-type-tab:hover { color: var(--text); background: transparent; }
html[data-ui="haulix"] .filter-tab.active,
html[data-ui="haulix"] .nav-pills .nav-link.active,
html[data-ui="haulix"] .log-type-tab.active { background: var(--hx-seg-on); color: var(--text); box-shadow: none; }
html[data-ui="haulix"][data-theme="light"] .filter-tab.active,
html[data-ui="haulix"][data-theme="light"] .nav-pills .nav-link.active,
html[data-ui="haulix"][data-theme="light"] .log-type-tab.active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
html[data-ui="haulix"] .log-type-count { background: var(--hx-chip-2); color: var(--text3); }
html[data-ui="haulix"] .log-type-tab.active .log-type-count { background: #ffffff; color: #111111; }
html[data-ui="haulix"][data-theme="light"] .log-type-tab.active .log-type-count { background: #151515; color: #ffffff; }
html[data-ui="haulix"] .log-type-tab:focus-visible { outline-color: var(--hx-accent); }

/* ---------- Modallar (islev ve konumlama aynen korunur) ---------- */
html[data-ui="haulix"] .modal-content {
    border: 0; border-radius: 28px; background: var(--card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), var(--hx-ring);
}
html[data-ui="haulix"][data-theme="light"] .modal-content { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16), var(--hx-ring); }
html[data-ui="haulix"] .modal-header { padding: 20px 26px; border-radius: 28px 28px 0 0; border-bottom: 1px solid var(--border); }
html[data-ui="haulix"] .modal-header h2,
html[data-ui="haulix"] .modal-title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
html[data-ui="haulix"] .modal-header-icon { border-radius: 50%; background: var(--hx-accent); color: var(--hx-ink); }
html[data-ui="haulix"] .modal-body { padding: 24px 26px; }
html[data-ui="haulix"] .modal-footer { padding: 16px 26px; border-radius: 0 0 28px 28px; border-top: 1px solid var(--border); }
html[data-ui="haulix"] .app-notice-icon-success { color: var(--hx-green); }
html[data-ui="haulix"] .app-notice-icon-warning { color: var(--hx-amber); }
html[data-ui="haulix"] .app-notice-icon-danger { color: var(--hx-red); }
@media (max-width: 576px) {
    html[data-ui="haulix"] .modal-content,
    html[data-ui="haulix"] .modal-content.modal-sm,
    html[data-ui="haulix"] .modal-content.modal-lg,
    html[data-ui="haulix"] .modal-content.modal-xl { border-radius: 28px 28px 0 0; }
    html[data-ui="haulix"] .modal-header { border-radius: 28px 28px 0 0; }
    html[data-ui="haulix"] .modal-footer { border-radius: 0; }
}

/* ---------- Bildirimler ---------- */
html[data-ui="haulix"] .alert { border-radius: 18px; padding: 14px 18px; font-weight: 500; }
html[data-ui="haulix"] .alert-success { background: var(--hx-green-bg); color: var(--hx-green); }
html[data-ui="haulix"] .alert-danger { background: var(--hx-red-bg); color: var(--hx-red); }
html[data-ui="haulix"] .toast { border-radius: 18px; font-weight: 500; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4); }
html[data-ui="haulix"] .toast.success { background: #2c3b2a; color: #8ee67f; }
html[data-ui="haulix"] .toast.error { background: #3b2523; color: #f2625e; }
html[data-ui="haulix"] .toast.info { background: var(--hx-chip); color: var(--text); }
html[data-ui="haulix"][data-theme="light"] .toast.success { background: #dcf0d8; color: #2c7a38; }
html[data-ui="haulix"][data-theme="light"] .toast.error { background: #f9dcda; color: #b3332e; }
html[data-ui="haulix"] .spinner,
html[data-ui="haulix"] .spinner-border { border-top-color: var(--hx-accent); }
html[data-ui="haulix"] tr.row-highlight td { animation-name: hxRowHighlight; }
@keyframes hxRowHighlight {
    0% { background: color-mix(in srgb, var(--hx-accent) 22%, transparent); }
    100% { background: var(--hx-row); }
}

/* ---------- Avatar / simgeler ---------- */
html[data-ui="haulix"] .avatar { background: #3a3c28; color: var(--hx-accent); font-weight: 500; }
html[data-ui="haulix"][data-theme="light"] .avatar { background: #e8efc0; color: #56620e; }
html[data-ui="haulix"] .text-violet { color: var(--hx-accent); }
html[data-ui="haulix"] .bg-violet { background-color: var(--hx-accent); }
html[data-ui="haulix"] .text-success { color: var(--hx-green) !important; }
html[data-ui="haulix"] .text-danger { color: var(--hx-red) !important; }

/* ---------- Giris sayfasi ---------- */
html[data-ui="haulix"] .auth-page { background: var(--bg); }
html[data-ui="haulix"] .auth-visual {
    background: radial-gradient(900px 500px at 70% 0%, #262626 0%, rgba(19, 19, 19, 0) 70%), #181818;
}
html[data-ui="haulix"][data-theme="light"] .auth-visual { background: radial-gradient(900px 500px at 70% 0%, #ffffff 0%, rgba(238, 240, 235, 0) 70%), #e6e8e2; }
html[data-ui="haulix"] .auth-visual::before { background: color-mix(in srgb, var(--hx-accent) 10%, transparent); }
html[data-ui="haulix"] .auth-visual::after { background: color-mix(in srgb, var(--hx-accent) 6%, transparent); }
html[data-ui="haulix"] .auth-visual-icon { border-radius: 50%; background: var(--hx-accent); color: var(--hx-ink); border: 0; backdrop-filter: none; }
html[data-ui="haulix"] .auth-visual h2 { color: var(--text); font-weight: 500; }
html[data-ui="haulix"] .auth-visual p { color: var(--text3); }
html[data-ui="haulix"] .auth-form-panel { background: var(--hx-card-b); }
html[data-ui="haulix"] .auth-logo-icon { border-radius: 50%; background: var(--hx-accent); color: var(--hx-ink); }
html[data-ui="haulix"] .auth-title { font-weight: 500; letter-spacing: -0.02em; }
html[data-ui="haulix"] .auth-form .form-control {
    height: 48px; border-radius: 24px; border: 1px solid transparent;
    background-color: var(--textbox-bg) !important; color: var(--textbox-text) !important;
}
html[data-ui="haulix"] .auth-form .form-control { padding: 0 16px 0 46px; }
html[data-ui="haulix"] .auth-form .form-control:focus { border-color: color-mix(in srgb, var(--hx-accent) 70%, transparent); }
html[data-ui="haulix"] .auth-submit {
    height: 48px; padding: 0 24px; border-radius: 24px; background: var(--hx-accent); color: var(--hx-ink); font-weight: 500;
}
html[data-ui="haulix"] .auth-submit:hover { background: var(--hx-accent-2); opacity: 1; }
html[data-ui="haulix"] .auth-subtitle a { color: var(--hx-accent); }
html[data-ui="haulix"] .error-code { background: linear-gradient(135deg, var(--hx-accent), var(--hx-red)); -webkit-background-clip: text; background-clip: text; }
html[data-ui="haulix"] .error-btn { background: var(--hx-accent); color: var(--hx-ink); border-radius: 24px; }

/* ---------- Mobil: mevcut menu davranisi korunur ---------- */
@media (max-width: 991.98px) {
    html[data-ui="haulix"] .sidebar { border-radius: 0 28px 28px 0; }
    html[data-ui="haulix"] .main { padding: 14px 16px 24px; }
    html[data-ui="haulix"] .page-title { font-size: 26px; }
    html[data-ui="haulix"] .topbar-search-input,
    html[data-ui="haulix"] input.topbar-search-input { width: 300px; }
}

/* ---------- Eksik 12'li izgara sutunlari ---------- */
html[data-ui="haulix"] .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
html[data-ui="haulix"] .col-lg-8 { flex: 0 0 66.667%; max-width: 66.667%; }
@media (max-width: 991.98px) {
    html[data-ui="haulix"] .col-lg-4,
    html[data-ui="haulix"] .col-lg-5,
    html[data-ui="haulix"] .col-lg-6,
    html[data-ui="haulix"] .col-lg-7,
    html[data-ui="haulix"] .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- Liste isaretleri ---------- */
html[data-ui="haulix"] .nav,
html[data-ui="haulix"] .nav-item,
html[data-ui="haulix"] .nav-pills,
html[data-ui="haulix"] .nav-pills > li { list-style: none; }
html[data-ui="haulix"] .nav-pills > li { display: flex; }

/* ---------- Sayfa gecisi (yenilemesiz gezinme) ---------- */
html[data-ui="haulix"] .main { position: relative; }
html[data-ui="haulix"] .main.is-loading .content {
    opacity: 0.22; filter: blur(1.5px); pointer-events: none; transition: opacity 0.2s, filter 0.2s;
}
html[data-ui="haulix"] .page-loader {
    position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none;
}
html[data-ui="haulix"] .page-loader .box {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 28px;
    border-radius: 22px; background: var(--hx-pop); color: var(--text3); font-size: 13px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), var(--hx-ring); animation: hxLoaderIn 0.2s ease;
}
html[data-ui="haulix"][data-theme="light"] .page-loader .box { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1), var(--hx-ring); }
html[data-ui="haulix"] .page-loader .spinner { width: 34px; height: 34px; margin: 0; border-width: 3px; }
@keyframes hxLoaderIn { from { opacity: 0; } to { opacity: 1; } }
html[data-ui="haulix"] .content.spa-enter { animation: hxPageIn 0.2s ease-out both; }
@keyframes hxPageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    html[data-ui="haulix"] .content.spa-enter { animation: none; }
}


/* ---------- Modal yerlesimi: sabit baslik/alt, kayan icerik ---------- */
html[data-ui="haulix"] .modal-overlay { padding: 24px; }
html[data-ui="haulix"] .modal-content {
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    overflow: hidden;
}
html[data-ui="haulix"] .modal-content.modal-lg { width: 900px; }
html[data-ui="haulix"] .modal-content.modal-xl { width: 1280px; }
html[data-ui="haulix"] .modal-header,
html[data-ui="haulix"] .modal-footer { flex: 0 0 auto; }
html[data-ui="haulix"] .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html[data-ui="haulix"] .modal-header {
    background: var(--hx-accent); color: var(--hx-ink);
    border-bottom: 0; cursor: move;
}
html[data-ui="haulix"] .modal-header .modal-title,
html[data-ui="haulix"] .modal-header h2 { color: var(--hx-ink); }
html[data-ui="haulix"] .modal-header .modal-subtitle { color: rgba(21, 21, 21, 0.62); }
html[data-ui="haulix"] .modal-header .modal-header-icon { background: var(--hx-ink); color: var(--hx-accent); }
html[data-ui="haulix"] .modal-header .btn-close,
html[data-ui="haulix"][data-theme="light"] .modal-header .btn-close { background: var(--hx-ink); color: var(--hx-accent); opacity: 1; }
html[data-ui="haulix"] .modal-header .btn-close:hover,
html[data-ui="haulix"][data-theme="light"] .modal-header .btn-close:hover { background: #ffffff; color: var(--hx-ink); box-shadow: inset 0 0 0 1px var(--hx-ink); }
html[data-ui="haulix"] .modal-header .btn-close i { color: inherit; }
html[data-ui="haulix"] .form-section-title {
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text3); margin: 4px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
@media (max-width: 576px) {
    html[data-ui="haulix"] .modal-overlay { padding: 0; }
    html[data-ui="haulix"] .modal-content,
    html[data-ui="haulix"] .modal-content.modal-sm,
    html[data-ui="haulix"] .modal-content.modal-lg,
    html[data-ui="haulix"] .modal-content.modal-xl { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
    html[data-ui="haulix"] .modal-header { cursor: default; }
}