/* ============================================
   Site.css — Global theme system (light / dark)
   ============================================ */

/* ---------- Light theme (default) ---------- */
:root {
    --bg-body: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f5f6f8;
    --bg-surface-alt: #f8f9fb;
    --bg-header: #ffffff;
    --bg-header-hover: #f0f2f5;
    --bg-input: #ffffff;
    --bg-input-focus: #ffffff;
    --bg-table-header: #f1f3f7;
    --border-subtle: #d1d5db;
    --border-medium: #9ca3af;
    --border-strong: #6b7280;
    --text-primary: #1a1a2e;
    --text-secondary: #334155;
    --text-muted: #4b5563;
    --text-dim: #64748b;
    --text-on-header: #1a1a2e;
    --text-on-header-hover: #2563eb;
    --accent-green: #16a34a;
    --accent-green-dim: #dcfce7;
    --accent-green-text: #15803d;
    --accent-blue: #2563eb;
    --accent-blue-dim: #dbeafe;
    --accent-red: #dc2626;
    --accent-red-dim: #fee2e2;
    --accent-orange: #ea580c;
    --accent-purple: #9333ea;
    --green-p1: #15803d;
    --red-p2: #b91c1c;
    --green-light: #22c55e;
    --red-light: #ef4444;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ---------- Dark theme ---------- */
body.dark-theme {
    --bg-body: #0f1117;
    --bg-surface: #1a1d27;
    --bg-surface-hover: #242837;
    --bg-surface-alt: #161923;
    --bg-header: #0d0f14;
    --bg-header-hover: #1a1d27;
    --bg-input: #242837;
    --bg-input-focus: #2a2e3d;
    --bg-table-header: #161923;
    --border-subtle: #2a2e3d;
    --border-medium: #363b4e;
    --border-strong: #4a5068;
    --text-primary: #e8eaf0;
    --text-secondary: #b0b8c8;
    --text-muted: #7d8597;
    --text-dim: #555d72;
    --text-on-header: #9ba1b5;
    --text-on-header-hover: #e8eaf0;
    --accent-green: #22c55e;
    --accent-green-dim: #166534;
    --accent-green-text: #4ade80;
    --accent-blue: #3b82f6;
    --accent-blue-dim: #1e3a5f;
    --accent-red: #ef4444;
    --accent-red-dim: #7f1d1d;
    --accent-orange: #f59e0b;
    --accent-purple: #a855f7;
    --green-p1: #4ade80;
    --red-p2: #f87171;
    --green-light: #4ade80;
    --red-light: #f87171;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* ---------- Base ---------- */
body {
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: .85em;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    transition: background 0.2s, color 0.2s;
}

/* ---------- Master page header ---------- */
header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-medium);
    padding: 0;
    margin-bottom: 12px;
}

header .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 42px;
}

header .float-left,
header .float-right {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

header .float-left {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-on-header);
    letter-spacing: 0.5px;
}

header ul#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

header ul#menu li {
    display: inline-flex;
}

header ul#menu a,
header ul#menu span {
    display: inline-block;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-on-header);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

header ul#menu a:hover {
    background: var(--bg-header-hover);
    color: var(--text-on-header-hover);
}

/* Active nav item (set via code-behind Font.Bold) */
header ul#menu a[style*="font-weight:bold"],
header ul#menu a[style*="font-size:18"] {
    background: var(--accent-blue-dim);
    color: var(--accent-blue);
    font-size: 12px !important;
    font-weight: 700 !important;
}
body.dark-theme header ul#menu a[style*="font-weight:bold"],
body.dark-theme header ul#menu a[style*="font-size:18"] {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

header section#login {
    display: none;
}

header nav {
    display: flex;
    align-items: center;
}

/* ---------- Content area ---------- */
.content-wrapper.main-content,
section.content-wrapper.main-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 8px;
}

#body {
    min-height: calc(100vh - 100px);
}

/* ---------- DevExpress grids — boost contrast ---------- */
.dxgvDataRow_Office2010Silver td,
.dxgvFocusedRow_Office2010Silver td,
.dxgvEditingErrorRow_Office2010Silver td {
    color: #111111 !important;
}
.dxgvDataRow_Office2010Silver td a,
.dxgvFocusedRow_Office2010Silver td a,
.dxgvEditingErrorRow_Office2010Silver td a {
    color: #111111 !important;
    text-decoration: none;
}
.dxgvDataRow_Office2010Silver td a:hover,
.dxgvFocusedRow_Office2010Silver td a:hover {
    text-decoration: underline;
}
.dxgvHeader_Office2010Silver,
.dxgvHeader_Office2010Silver td {
    background: var(--bg-table-header) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 9px !important;
    text-transform: uppercase;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 4px !important;
    border: none !important;
    border-bottom: 2px solid var(--border-medium) !important;
}
.dxgvHeader_Office2010Silver {
    background: var(--bg-table-header) !important;
    background-image: none !important;
}
/* Remove DevExpress header gradient/image backgrounds */
.dxgvHeader_Office2010Silver td,
.dxgvHeader_Office2010Silver th {
    background-image: none !important;
}
/* Command column (edit/delete) — keep narrow */
.dxgvCommandColumn_Office2010Silver {
    width: 35px !important;
    max-width: 50px !important;
}
/* Filter row & grid chrome — light theme */
.dxgvFilterRow_Office2010Silver td {
    background: #f8f9fb !important;
    border-color: var(--border-subtle) !important;
}
.dxgvFilterRow_Office2010Silver td input {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 3px !important;
    padding: 2px 4px !important;
}
.dxgvTable_Office2010Silver {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.dxgvDataRow_Office2010Silver td,
.dxgvFocusedRow_Office2010Silver td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 5px 6px !important;
}
.dxgvDataRow_Office2010Silver:hover td {
    background: var(--bg-surface-hover) !important;
}
.dxgvPagerBottomPanel_Office2010Silver {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-subtle) !important;
}

body.dark-theme .dxgvDataRow_Office2010Silver td,
body.dark-theme .dxgvFocusedRow_Office2010Silver td {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
body.dark-theme .dxgvDataRow_Office2010Silver td a,
body.dark-theme .dxgvFocusedRow_Office2010Silver td a {
    color: var(--text-primary) !important;
}
body.dark-theme .dxgvHeader_Office2010Silver,
body.dark-theme .dxgvHeader_Office2010Silver td {
    background: var(--bg-table-header) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}
body.dark-theme .dxgvTable_Office2010Silver {
    background: var(--bg-surface) !important;
}
body.dark-theme .dxgvControl_Office2010Silver {
    background: var(--bg-body) !important;
}
body.dark-theme .dxgvFilterRow_Office2010Silver td {
    background: var(--bg-surface-alt) !important;
}
body.dark-theme .dxgvPagerBottomPanel_Office2010Silver {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
}

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid var(--border-subtle);
    padding: 8px 0;
    margin-top: 20px;
}

footer .content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
}

footer p {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37,99,235,0.4);
    transition: all 0.2s;
}

.theme-toggle:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 24px rgba(37,99,235,0.5);
}

body.dark-theme .theme-toggle {
    background: #f59e0b;
    box-shadow: 0 4px 16px rgba(245,158,11,0.4);
}

body.dark-theme .theme-toggle:hover {
    box-shadow: 0 6px 24px rgba(245,158,11,0.5);
}

/* Sun/moon icon swap */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
body.dark-theme .theme-toggle .icon-sun { display: inline; }
body.dark-theme .theme-toggle .icon-moon { display: none; }

/* ---------- Utility: clear-fix ---------- */
.clear-fix::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------- Scrollbar (dark theme) ---------- */
body.dark-theme ::-webkit-scrollbar { width: 8px; height: 8px; }
body.dark-theme ::-webkit-scrollbar-track { background: var(--bg-body); }
body.dark-theme ::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px; }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
