/* ══════════════════════════════════════════════════
   WATAREKA FINANCE SUITE  —  Main Stylesheet
   Variable-first: every colour is a CSS var.
   Dark = deep navy. Light = clean white with ink text.
══════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}

/* ══════════════════════════════════════════════════
   DARK THEME  (default)
══════════════════════════════════════════════════ */
:root, html[data-theme="dark"] {
  /* Surfaces */
  --bg:            #060D18;
  --bg2:           #0D1B2A;
  --bg3:           #0A1929;
  --bg4:           #081422;
  /* Borders */
  --border:        #1E3A5F;
  --border2:       #1E3A5F55;
  /* Text — bright and readable on dark */
  --text:          #FFFFFF;   /* primary   — pure white        */
  --text2:         #E2E8F0;   /* secondary — bright slate      */
  --text3:         #94A3B8;   /* muted     — clear             */
  --text4:         #5A7090;   /* very muted                    */
  /* Inputs */
  --input-bg:      #081220;
  --input-focus:   #0C1E30;
  /* Sidebar */
  --sidebar-bg1:   #0A1929;
  --sidebar-bg2:   #050D18;
  --sidebar-bdr:   #1E3A5F44;
  --sidebar-text:  #64748B;
  --sidebar-hover: #0D1B2A;
  /* Semantic */
  --teal:          #00D4B4;
  --teal-dim:      #00876E;
  --red:           #FF6B6B;
  --red-dim:       #C0392B;
  --yellow:        #FFD700;
  --yellow-dim:    #A07800;
  --indigo:        #5B6AE8;
  --indigo-dim:    #3B4FC8;
  /* Form label */
  --label-color:   #5A7090;
  /* Table */
  --th-bg:         #0A1929;
  --th-text:       #5A7090;
  --td-text:       #E2E8F0;
  --td-border:     #1E3A5F18;
  --tr-hover:      #0D1B2A88;
  /* Misc */
  --tag-bg:        #1E3A5F44;
  --tag-text:      #64748B;
  --card-bg:       #0D1B2A;
  --stat-bg:       #0A1929;
  --entry-bg:      #060F1E;
  --entry-border:  #1E3A5F22;
  --run-sum-bg:    #060F1E;
}

/* ══════════════════════════════════════════════════
   LIGHT THEME  — high contrast, no ash text
══════════════════════════════════════════════════ */
html[data-theme="light"] {
  /* Surfaces — clean whites and light greys */
  --bg:            #F0F4F8;
  --bg2:           #FFFFFF;
  --bg3:           #E4ECF4;
  --bg4:           #F8FAFC;
  /* Borders */
  --border:        #B0C4D8;
  --border2:       #B0C4D866;
  /* Text — real ink on white, no ash grey */
  --text:          #0A1628;   /* primary   — deep navy ink     */
  --text2:         #1E3A58;   /* secondary — strong navy       */
  --text3:         #2E5070;   /* muted     — still legible     */
  --text4:         #4A6C90;   /* very muted — readable blue    */
  /* Inputs */
  --input-bg:      #FFFFFF;
  --input-focus:   #EEF6FF;
  /* Sidebar — stays dark for contrast */
  --sidebar-bg1:   #1A2B44;
  --sidebar-bg2:   #111E30;
  --sidebar-bdr:   #2A406077;
  --sidebar-text:  #8AAAC8;
  --sidebar-hover: #FFFFFF14;
  /* Semantic — deeper for light bg */
  --teal:          #00876E;
  --teal-dim:      #005E4E;
  --red:           #C0392B;
  --red-dim:       #962D22;
  --yellow:        #966000;
  --yellow-dim:    #7A4E00;
  --indigo:        #3B4FC8;
  --indigo-dim:    #2A3AA0;
  /* Form label */
  --label-color:   #1E3A58;
  /* Table */
  --th-bg:         #D8E6F0;
  --th-text:       #0A1628;
  --td-text:       #0A1628;
  --td-border:     #B0C4D833;
  --tr-hover:      #EBF3FB;
  /* Misc */
  --tag-bg:        #D0E4F4;
  --tag-text:      #1E3A58;
  --card-bg:       #FFFFFF;
  --stat-bg:       #EBF3FB;
  --entry-bg:      #F8FAFC;
  --entry-border:  #B0C4D855;
  --run-sum-bg:    #EBF3FB;
}

/* ══════════════════════════════════════════════════
   HIGH CONTRAST MODE  (accessibility)
══════════════════════════════════════════════════ */
html[data-color-mode="high-contrast"] {
  --border:        #FFFFFF99;
  --border2:       #FFFFFF77;
  --text3:         #C8D8E8;
  --text4:         #A0B8CC;
  --th-text:       #FFFFFF;
  --td-border:     #FFFFFF33;
  --teal:          #00FFD4;
  --yellow:        #FFE033;
  --label-color:   #C8D8E8;
  --tag-bg:        #FFFFFF22;
  --tag-text:      #E2EAF4;
}
html[data-color-mode="high-contrast"][data-theme="light"] {
  --bg:            #FFFFFF;
  --bg2:           #F0F4F8;
  --bg3:           #DDE8F4;
  --bg4:           #F8FAFC;
  --border:        #00000099;
  --border2:       #00000066;
  --text:          #000000;
  --text2:         #0A1628;
  --text3:         #1E3A58;
  --text4:         #2E5070;
  --th-bg:         #C0D8F0;
  --th-text:       #000000;
  --td-text:       #000000;
  --td-border:     #00000033;
  --label-color:   #0A1628;
  --teal:          #005E4A;
  --red:           #A02020;
  --yellow:        #7A5000;
  --tag-bg:        #B0C8E0;
  --tag-text:      #0A1628;
  --card-bg:       #FFFFFF;
}

/* ══════════════════════════════════════════════════
   TABLE ALIGNMENT  — all cells left-aligned globally
══════════════════════════════════════════════════ */
.data-table th { text-align: left !important; }
.data-table td { text-align: left !important; }

/* Apply theme to html + body */
html {
  background: var(--bg);
  font-size: var(--ui-scale, 14px);  /* changing this scales ALL rem values */
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════ */
.sidebar {
  width: 228px; flex-shrink: 0; height: 100vh; overflow: visible;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sidebar-bg1) 0%, var(--sidebar-bg2) 100%);
  border-right: 1px solid var(--sidebar-bdr);
}
.sidebar-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid #1E3A5F33;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.sidebar-brand { color: #E2EAF4; font-size: 1.071rem; font-weight: 700; }
.sidebar-nav   { flex: 1; padding: 10px; overflow-y: auto; overflow-x: hidden; }

.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.nav-btn   { overflow: hidden; }

.nav-btn {
  width: 100%; height: 40px; padding: 0 12px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--sidebar-text); font-size: 0.929rem; text-align: left;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 3px; transition: all .15s;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.nav-btn:hover  { color: #C8DCF0; background: var(--sidebar-hover); }
.nav-btn.active { color: #00D4B4; background: #00D4B418; border-color: #00D4B455; }
.nav-btn.accent { color: #7BAEF8; }
.nav-btn.accent:hover { color: #A5C8FF; background: #FFFFFF18; }
.nav-icon  { font-size: 1rem; width: 16px; text-align: center; flex-shrink: 0; }
.nav-divider { height: 1px; background: #1E3A5F33; margin: 8px 4px; }
.nav-section-label {
  padding: 8px 12px 4px;
  color: #4A6080; font-size: 0.714rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.sidebar-user {
  padding: 12px; border-top: 1px solid #1E3A5F33;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #00D4B4, #5B6AE8);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.714rem; font-weight: 700; color: #fff;
}
.user-name { color: #D0E2F4; font-size: 0.857rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: #6A90B4; font-size: 0.714rem; }
.user-info { min-width: 0; }
.logout-btn { margin-left: auto; color: #6A90B4; font-size: 1.071rem; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; transition: color .2s; }
.logout-btn:hover { color: #FF8080; }

/* ══════════════════════════════════════════════════
   MAIN AREA
══════════════════════════════════════════════════ */
.app         { display: flex; height: 100vh; overflow: hidden; position: relative; }
.modal-open .app  { overflow: visible; }
.modal-open .main { overflow: visible; }
.modal-open       { overflow: hidden; }  /* prevent body scroll instead */
.main        { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg); }
.main-header { padding: 18px 28px 0; flex-shrink: 0; background: var(--bg); }
.main-body   { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 28px 28px; min-height: 0; }
.page-title  { font-size: 1.5rem; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--text); }
.page-sub    { color: var(--text3); font-size: 0.857rem; margin-top: 3px; }

/* ── Loader ── */
.tab-loader { display: none; margin-bottom: 8px; }
.tab-loader.htmx-request { display: block; }
.loader-bar { height: 2px; background: linear-gradient(90deg, #00D4B4, #5B6AE8); border-radius: 2px; animation: loadBar 1s ease infinite; }
@keyframes loadBar { 0%{width:0} 50%{width:70%} 100%{width:100%} }
.loading-placeholder { color: var(--text3); padding: 40px; text-align: center; }

/* htmx */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }

/* ══════════════════════════════════════════════════
   FORM CONTROLS
══════════════════════════════════════════════════ */
.fc {
  display: block; width: 100%; height: 42px;
  padding: 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-size: 0.929rem;
  outline: none; transition: border-color .15s, background .15s;
  appearance: none; -webkit-appearance: none;
}
.fc:focus   { border-color: var(--teal); background: var(--input-focus); }
.fc[readonly]{ background: var(--bg3); color: var(--text3); cursor: default; }
select.fc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 36px; cursor: pointer;
}

/* Field label */
.fl { display: block; color: var(--label-color); font-size: 0.786rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px; }
.ff { display: flex; flex-direction: column; }

/* Form grid */
.form-grid      { display: grid; gap: 16px; align-items: end; }
.form-grid.g2   { grid-template-columns: repeat(2,1fr); }
.form-grid.g3   { grid-template-columns: repeat(3,1fr); }
.form-grid.g4   { grid-template-columns: repeat(4,1fr); }

/* ══════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 20px; border-radius: 8px; font-size: 0.929rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; border: none; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 0.857rem; }
.btn.xs { height: 30px; padding: 0 10px; font-size: 0.857rem; border-radius: 7px; }
.btn.ghost   { background: var(--bg2); border: 1px solid var(--border); color: var(--text2); }
.btn.ghost:hover { border-color: var(--teal); color: var(--text); }
.btn.primary { background: linear-gradient(135deg, #00C4A7, #4F5FD8); color: #fff; border: none; }
.btn.primary:hover { opacity: .9; }
.btn.danger  { background: #FF6B6B0D; border: 1px solid #FF6B6B44; color: var(--red); }
.btn.danger:hover { background: #FF6B6B1A; }
.link-btn    { color: var(--indigo); font-size: 0.857rem; padding: 4px 10px; border: 1px solid var(--border2); border-radius: 6px; display: inline-block; transition: all .15s; }
.link-btn:hover { background: var(--bg3); border-color: var(--indigo); }

/* ══════════════════════════════════════════════════
   KPI GRID
══════════════════════════════════════════════════ */
.kpi-grid         { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }
.kpi-grid.cols-3  { grid-template-columns: repeat(3,1fr); }
.kpi-grid.cols-2  { grid-template-columns: repeat(2,1fr); }
.kpi-card         { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; position: relative; overflow: hidden; }
.kpi-glow         { position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; }
.kpi-body         { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.kpi-label        { color: var(--text3); font-size: 1rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }
.kpi-value        { color: var(--text); font-size: 1.286rem; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.kpi-sub          { color: var(--text3); font-size: 0.786rem; margin-top: 3px; }
.kpi-icon         { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.286rem; flex-shrink: 0; }

/* ══════════════════════════════════════════════════
   CHARTS
══════════════════════════════════════════════════ */
.charts-row        { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; min-width: 0; }
.charts-row.equal  { grid-template-columns: 1fr 1fr; min-width: 0; }
.chart-card        { background: var(--card-bg); border: 1px solid var(--border2); border-radius: 12px; padding: 20px 24px; min-width: 0; display: flex; flex-direction: column; }
.chart-card.full   { margin-bottom: 16px; }
.chart-header      { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.chart-title       { color: var(--text); font-size: 1rem; font-weight: 700; }
.chart-type-btns   { display: flex; gap: 4px; }
.chart-type-btn    { height: 28px; padding: 0 10px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text3); font-size: 0.786rem; cursor: pointer; transition: all .15s; }
.chart-type-btn:hover  { color: var(--text2); border-color: var(--border); }
.chart-type-btn.active { color: var(--teal); border-color: var(--teal); background: var(--bg3); }
.chart-wrap        { position: relative; height: 200px; flex-shrink: 0; }
.chart-wrap.sm     { position: relative; height: 145px; flex-shrink: 0; }
.chart-wrap.lg     { position: relative; height: 260px; flex-shrink: 0; }
.chart-wrap canvas { position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; }

/* ── Legend ── */
.legend     { margin-top: 12px; }
.legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-name{ color: var(--text2); font-size: 0.786rem; flex: 1; }
.legend-val { font-size: 0.786rem; font-family: 'IBM Plex Mono', monospace; color: var(--text); }

/* ── Progress bars ── */
.prog-row   { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prog-label { color: var(--text2); font-size: 0.857rem; width: 60px; flex-shrink: 0; }
.prog-bg    { flex: 1; height: 6px; background: var(--border); border-radius: 4px; }
.prog-fill  { height: 6px; border-radius: 4px; transition: width .6s ease; }
.prog-val   { font-size: 0.786rem; width: 32px; text-align: right; flex-shrink: 0; color: var(--text2); }

/* ══════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════ */
.tbl-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-card    { background: var(--card-bg); border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.data-table  { width: 100%; border-collapse: collapse; }
.data-table th { color: var(--th-text); font-size: 0.786rem; font-weight: 700; letter-spacing: .5px; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--border); text-transform: uppercase; white-space: nowrap; background: var(--th-bg); }
.data-table td { color: var(--td-text); font-size: 0.929rem; padding: 10px 12px; border-bottom: 1px solid var(--td-border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--tr-hover); }
.mini-table  { width: 100%; border-collapse: collapse; }
.mini-table th { color: var(--th-text); font-size: 0.786rem; font-weight: 700; letter-spacing: .5px; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); text-transform: uppercase; background: var(--th-bg); }
.mini-table td { color: var(--td-text); font-size: 0.857rem; padding: 9px 10px; border-bottom: 1px solid var(--td-border); }
.mini-table tr:last-child td { border-bottom: none; }
.empty-row   { text-align: center; padding: 28px!important; color: var(--text3); font-size: 0.857rem; }
.tbl-pager   { display:flex; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--border); background:var(--card-bg); }
.pager-info  { flex:1; text-align:center; color:var(--text2); font-size:0.786rem; }
.th-sort-arrow { margin-left:4px; font-size:0.643rem; color:var(--text3); pointer-events:none; }
.th-sort-arrow.active { color:var(--accent,#00D4B4); }

/* ══════════════════════════════════════════════════
   TAGS / BADGES / UTILITY
══════════════════════════════════════════════════ */
.tag    { background: var(--tag-bg); border-radius: 4px; padding: 2px 8px; color: var(--tag-text); font-size: 0.786rem; font-weight: 500; }
.badge  { border-radius: 5px; padding: 3px 9px; font-size: 0.786rem; font-weight: 600; white-space: nowrap; }
.badge.green  { background: #00D4B422; color: #00A880; }
.badge.yellow { background: #FFD70022; color: #A07800; }
.badge.red    { background: #FF6B6B22; color: #D04040; }
.badge.indigo { background: #5B6AE822; color: #4A5CD8; }
.badge.gray   { background: #94A3B822; color: #607080; }
.badge.purple { background: #A855F722; color: #8040D0; }
.badge.blue   { background: #5B6AE822; color: #4A5CD8; }

html[data-theme="light"] .badge.green  { background: #D1FAF0; color: #005E4A; }
html[data-theme="light"] .badge.yellow { background: #FFF3CC; color: #7A5000; }
html[data-theme="light"] .badge.red    { background: #FFE8E8; color: #A02020; }
html[data-theme="light"] .badge.indigo { background: #E0E4FF; color: #2A3AAA; }
html[data-theme="light"] .badge.gray   { background: #E4ECF4; color: #3A5070; }
html[data-theme="light"] .badge.purple { background: #F0E8FF; color: #6020B0; }

.alert          { border-radius: 8px; padding: 12px 16px; font-size: 0.929rem; margin-bottom: 14px; }
.alert.danger   { background: #FF6B6B0D; border: 1px solid #FF6B6B44; color: var(--red); }
.alert.success  { background: #00D4B40D; border: 1px solid #00D4B444; color: var(--teal); }
html[data-theme="light"] .alert.danger  { background: #FFF0F0; border-color: #F0A0A0; color: #A02020; }
html[data-theme="light"] .alert.success { background: #F0FDF8; border-color: #80D4B8; color: #005E4A; }

.mono   { font-family: 'IBM Plex Mono', monospace; }
.muted  { color: var(--text3); }
.teal   { color: var(--teal); }
.red    { color: var(--red); }
.yellow { color: var(--yellow); }
.purple { color: var(--indigo); }

/* Sub-route tag */
.sub-route-tag { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--indigo); font-size: 0.714rem; }

/* ══════════════════════════════════════════════════
   FILTER STRIP
══════════════════════════════════════════════════ */
.tab-filters { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.filter-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════ */
.login-bg {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: auto;
  background: var(--bg);
  background-image: radial-gradient(ellipse at 30% 40%, #0B2545 0%, transparent 55%),
                    radial-gradient(ellipse at 75% 70%, #08192E 0%, transparent 50%);
}
html[data-theme="light"] .login-bg {
  background: #EDF2F8;
  background-image: radial-gradient(ellipse at 30% 40%, #D8E8F8 0%, transparent 55%),
                    radial-gradient(ellipse at 75% 70%, #DDE8F4 0%, transparent 50%);
}
.login-card {
  width: 420px; border-radius: 16px; padding: 48px 44px;
  background: #0A1929; border: 1px solid #1E3A5F55;
  box-shadow: 0 24px 80px #00000088;
}
html[data-theme="light"] .login-card {
  background: #FFFFFF; border-color: var(--border);
  box-shadow: 0 8px 32px rgba(30,58,95,0.14);
}
.login-logo  { text-align: center; margin-bottom: 36px; }
.logo-icon   { width: 52px; height: 52px; margin: 0 auto 14px; background: linear-gradient(135deg, #00D4B4, #5B6AE8); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.857rem; font-weight: 800; color: #fff; }
.logo-icon.sm{ width: 34px; height: 34px; font-size: 1.143rem; border-radius: 9px; flex-shrink: 0; margin: 0; }
.logo-text   { color: #E2E8F0; font-size: 1.429rem; font-weight: 700; font-family: 'Playfair Display', serif; }
html[data-theme="light"] .logo-text { color: var(--text); }
.logo-sub    { color: #334155; font-size: 0.714rem; letter-spacing: 2px; margin-top: 4px; }
html[data-theme="light"] .logo-sub { color: var(--text3); }
.login-title { text-align: center; font-size: 1.571rem; font-weight: 700; margin-bottom: 6px; color: #E2E8F0; }
html[data-theme="light"] .login-title { color: var(--text); }
.login-sub   { text-align: center; color: #5A7090; font-size: 0.929rem; margin-bottom: 28px; }
html[data-theme="light"] .login-sub { color: var(--text3); }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; color: #5A7090; font-size: 0.786rem; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 7px; font-weight: 700; }
html[data-theme="light"] .login-field label { color: var(--text2); }
.login-field input { width: 100%; height: 46px; padding: 0 16px; background: #0A1929; border: 1px solid #1E3A5F; border-radius: 8px; color: #E2E8F0; font-size: 1rem; outline: none; transition: all .2s; }
html[data-theme="light"] .login-field input { background: var(--input-bg); border-color: var(--border); color: var(--text); }
.login-field input:focus { background: #0F2236; border-color: #00D4B466; }
html[data-theme="light"] .login-field input:focus { background: var(--input-focus); border-color: var(--teal); }
.pass-wrap   { position: relative; }
.pass-wrap input { padding-right: 44px; }
.toggle-pass { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #5A7090; font-size: 1.071rem; cursor: pointer; }
html[data-theme="light"] .toggle-pass { color: var(--text3); }
.btn-login   { width: 100%; height: 48px; margin-top: 12px; background: linear-gradient(135deg, #00C4A7 0%, #4F5FD8 100%); border: none; border-radius: 8px; color: #fff; font-size: 1.071rem; font-weight: 700; cursor: pointer; transition: opacity .2s; }
.btn-login:hover { opacity: .9; }
.login-footer{ color: #334155; font-size: 0.857rem; text-align: center; margin-top: 24px; }
html[data-theme="light"] .login-footer { color: var(--text3); }
.error-box   { background: #FF6B6B0D; border: 1px solid #FF6B6B44; border-radius: 8px; padding: 10px 14px; color: #D04040; font-size: 0.929rem; text-align: center; margin-bottom: 14px; }
html[data-theme="light"] .error-box { background: #FFF0F0; border-color: #F0A0A0; color: #A02020; }

/* ══════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.modal-overlay.hidden { display: none; }
.modal-box     { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px; width: 100%; max-width: 480px; box-shadow: 0 24px 80px rgba(0,0,0,.5); position: relative; z-index: 100000; }
.modal-title   { font-size: 1.143rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.modal-sub     { font-size: 0.857rem; color: var(--text3); margin-bottom: 22px; }
.modal-close   { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 1.143rem; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.modal-close:hover { background: var(--bg3); color: var(--text); }

/* ══════════════════════════════════════════════════
   GROUP VIEW
══════════════════════════════════════════════════ */
.group-banner { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; display: flex; gap: 16px; align-items: center; }
.group-icon   { font-size: 2.286rem; }
.group-banner h2 { color: var(--yellow); font-size: 1.286rem; font-weight: 700; margin-bottom: 4px; }
.group-banner p  { color: var(--text3); font-size: 0.857rem; }
.company-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.company-card  { background: var(--card-bg); border: 1px solid; border-radius: 12px; padding: 24px; }
.company-header{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.company-header h3 { font-size: 1.071rem; font-weight: 700; margin-bottom: 4px; }
.company-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-box      { background: var(--stat-bg); border-radius: 8px; padding: 10px 12px; }
.stat-label    { color: var(--text3); font-size: 0.714rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.stat-val      { font-size: 1rem; font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: var(--text); }
.stat-val.lg   { font-size: 1.286rem; }

/* ══════════════════════════════════════════════════
   TEAM CARDS
══════════════════════════════════════════════════ */
.sp-grid   { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 20px; }
.sp-card   { background: var(--card-bg); border: 1px solid var(--border2); border-radius: 12px; padding: 20px 24px; }
.sp-header { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.sp-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #00D4B4, #5B6AE8); display: flex; align-items: center; justify-content: center; font-size: 1.429rem; font-weight: 700; color: #fff; }
.sp-header h3 { font-size: 1.143rem; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.sp-route     { color: var(--indigo); font-size: 0.857rem; }
.sp-stats     { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }

/* ══════════════════════════════════════════════════
   CONFIG PAGE
══════════════════════════════════════════════════ */
.cfg-header      { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cfg-header-icon { font-size: 2rem; flex-shrink: 0; }
.cfg-breadcrumb  { display: none; }
.add-card        { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.add-card-title  { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.add-card-title h3 { color: var(--text); font-size: 1.071rem; font-weight: 700; }
.add-card-title .icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; background: #00D4B411; flex-shrink: 0; }
.act-col         { width: 160px; }
.row-actions     { display: flex; gap: 6px; align-items: center; }
.edit-row td     { padding: 0!important; }
.edit-form-row   { display: flex; gap: 14px; align-items: flex-end; padding: 16px 20px; background: var(--bg3); flex-wrap: wrap; }
.edit-actions    { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.form-section-title { font-size: 0.786rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border2); }

/* ══════════════════════════════════════════════════
   SALES ENTRY FORM
══════════════════════════════════════════════════ */
.run-summary   { display: flex; gap: 16px; padding: 12px 18px; background: var(--run-sum-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.run-sum-item  { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.run-sum-label { color: var(--text3); font-size: 0.643rem; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; }
.run-sum-val   { color: var(--text); font-size: 0.929rem; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.entry-tbl     { width: 100%; border-collapse: collapse; min-width: 900px; }
.entry-tbl th  { color: var(--th-text); font-size: 0.714rem; font-weight: 700; letter-spacing: .5px; padding: 9px 6px; text-align: left; border-bottom: 2px solid var(--border); text-transform: uppercase; white-space: nowrap; background: var(--entry-bg); }
.entry-tbl td  { padding: 3px 4px; border-bottom: 1px solid var(--entry-border); vertical-align: middle; }
.entry-tbl tfoot td { padding: 9px 6px; border-top: 2px solid var(--border); background: var(--entry-bg); font-size: 0.857rem; font-weight: 700; color: var(--text2); }

/* Entry-table inputs */
.ei {
  width: 100%; height: 36px; padding: 0 8px;
  background: var(--entry-bg); border: 1px solid var(--entry-border);
  border-radius: 6px; color: var(--text); font-size: 0.929rem; font-weight: 600;
  outline: none; transition: border-color .15s;
  appearance: none; -webkit-appearance: none;
}
.ei:focus   { border-color: var(--teal); }
.ei.num     { font-family: 'IBM Plex Mono', monospace; text-align: right; }
.ei.ro      { background: var(--bg3); color: var(--teal); cursor: default; }
select.ei   {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
  padding-right: 22px; cursor: pointer;
}
.del-row-btn { width: 28px; height: 28px; background: #FF6B6B11; border: 1px solid #FF6B6B33; color: var(--red); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 0.929rem; cursor: pointer; flex-shrink: 0; }
.del-row-btn:hover { background: #FF6B6B22; }

/* ══════════════════════════════════════════════════
   SALES TABS
══════════════════════════════════════════════════ */
.view-tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.view-tab  { height: 34px; padding: 0 14px; background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--text2); font-size: 0.857rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.view-tab:hover { color: var(--text); border-color: var(--teal); }
.view-tab.active { color: var(--teal); border-color: var(--teal); background: var(--bg3); }

/* ══════════════════════════════════════════════════
   INFO CARDS (dealer / agent view)
══════════════════════════════════════════════════ */
.info-card         { background: var(--card-bg); border: 1px solid var(--border2); border-radius: 12px; padding: 20px 22px; margin-bottom: 14px; }
.info-grid         { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.info-item label   { display: block; color: var(--text3); font-size: 0.714rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 4px; }
.info-item p       { color: var(--text); font-size: 0.929rem; }

/* ══════════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════════ */
.theme-toggle { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid #2A406066; color: #8AAAC8; font-size: 1.143rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.theme-toggle:hover { background: #FFFFFF18; color: #D0E4F4; }

/* ══════════════════════════════════════════════════
   MOBILE NAV
══════════════════════════════════════════════════ */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: #0A1929; border-top: 1px solid #1E3A5F44; padding: 6px 4px 10px; gap: 2px; }
.mob-btn    { flex: 1; min-width: 50px; padding: 5px 4px; background: transparent; border: none; color: #5A7090; font-size: 0.714rem; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; border-radius: 8px; white-space: nowrap; text-decoration: none; }
.mob-btn.active { color: #00D4B4; background: #00D4B411; }
.mob-icon   { font-size: 1.214rem; line-height: 1; }

/* ══════════════════════════════════════════════════
   SETTLE-ROW (salary settlement)
══════════════════════════════════════════════════ */
.settle-row { cursor: pointer; }
.settle-row:hover td { background: var(--tr-hover) !important; }

/* ══════════════════════════════════════════════════
   TOPBAR (sales detail)
══════════════════════════════════════════════════ */
.topbar       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.topbar-right { display: flex; gap: 10px; align-items: center; }
.status-badge { border-radius: 6px; padding: 4px 12px; font-size: 0.857rem; font-weight: 700; }
.status-badge.green  { background: #00D4B422; color: var(--teal); }
.status-badge.yellow { background: #FFD70022; color: var(--yellow); }

/* Form card (sales detail) */
.form-card { background: var(--card-bg); border: 1px solid var(--border2); border-radius: 12px; padding: 20px 24px; }
.crud-table-card { background: var(--card-bg); border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.table-wrap { overflow-x: auto; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media(max-width:768px){
  body { overflow: auto; height: auto; }
  .login-card { width: 100%; max-width: 100%; border-radius: 0; padding: 36px 20px; min-height: 100vh; border: none; display: flex; flex-direction: column; justify-content: center; }
  .sidebar  { display: none; }
  .mobile-nav { display: flex; }
  .app      { height: auto; overflow: visible; }
  .main     { overflow: visible; height: auto; }
  .main-body{ overflow: visible; padding: 12px 16px 90px; }
  .main-header { padding: 16px 16px 0; }
  .page-title  { font-size: 1.357rem; }
  .kpi-grid    { grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 14px; }
  .kpi-grid.cols-3 { grid-template-columns: repeat(2,1fr); }
  .kpi-value   { font-size: 1.286rem; }
  .kpi-icon    { display: none; }
  .charts-row, .charts-row.equal { grid-template-columns: 1fr; gap: 12px; }
  .chart-wrap  { height: 180px; }
  .chart-wrap.sm { height: 155px; }
  .sp-grid     { grid-template-columns: 1fr; }
  .sp-stats    { grid-template-columns: repeat(2,1fr); }
  .company-grid{ grid-template-columns: 1fr; }
  .company-stats{ grid-template-columns: repeat(2,1fr); }
  .form-grid.g4,.form-grid.g3 { grid-template-columns: 1fr 1fr; }
  .cfg-breadcrumb { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cfg-breadcrumb::-webkit-scrollbar { display: none; }
  .crumb      { white-space: nowrap; padding: 9px 14px; color: var(--text2); font-size: 0.929rem; border-bottom: 2px solid transparent; text-decoration: none; }
  .crumb.active{ color: var(--teal); border-bottom-color: var(--teal); }
  .cfg-header .btn { display: none; }
  .edit-form-row { flex-direction: column; gap: 10px; }
  .edit-form-row .ff { width: 100%; }
  .edit-actions { flex-direction: row; width: 100%; }
  .edit-actions .btn { flex: 1; }
  .row-actions { gap: 4px; }
  .act-col     { width: 120px; }
  .data-table td, .data-table th { font-size: 0.857rem; padding: 8px 10px; }
  .run-summary { gap: 10px; }
  .info-grid   { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:520px){
  .form-grid.g4,.form-grid.g3,.form-grid.g2 { grid-template-columns: 1fr; }
  .kpi-grid    { grid-template-columns: 1fr 1fr; }
  .main-body   { padding: 10px 12px 90px; }
}

/* ── Flatpickr theme — dark & light ─────────────────────────────────────── */
.flatpickr-calendar {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
  font-family: 'Inter', sans-serif !important;
}
.flatpickr-months { border-bottom: 1px solid var(--border2); padding: 4px 0; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper span { color: var(--text) !important; }
.flatpickr-current-month .numInputWrapper input { color: var(--text) !important; }
.flatpickr-weekdays, .flatpickr-weekday { color: var(--text3) !important; background: transparent !important; font-size: 0.786rem; font-weight: 700; }
.flatpickr-day { color: var(--text2) !important; border-radius: 6px !important; }
.flatpickr-day:hover { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--teal) !important; border-color: var(--teal) !important; color: #fff !important;
}
.flatpickr-day.today { border-color: var(--teal) !important; color: var(--teal) !important; font-weight: 700; }
.flatpickr-day.today.selected { color: #fff !important; }
.flatpickr-day.flatpickr-disabled { color: var(--text3) !important; opacity: .4; }
.flatpickr-prev-month, .flatpickr-next-month { color: var(--text2) !important; fill: var(--text2) !important; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--teal) !important; fill: var(--teal) !important; }
.numInputWrapper:hover { background: var(--bg3) !important; }
.flatpickr-monthDropdown-months { background: var(--bg2) !important; }
/* Flatpickr alt-input — match the sibling hidden input exactly */
.flatpickr-input.flatpickr-alt-input {
  cursor: pointer !important;
  /* Copy dimensions from the hidden original input */
  width: inherit !important;
  height: inherit !important;
  padding: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .15s !important;
}
.flatpickr-input.flatpickr-alt-input:focus {
  border-color: var(--teal) !important;
  background: var(--input-focus) !important;
}
/* Hide the hidden YYYY-MM-DD input flatpickr creates */
.flatpickr-input:not(.flatpickr-alt-input) { display: none !important; }

/* ── Remove number input spinners everywhere ─────────────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }