/* Kaif Dashboard v8.2 — compatibility, typography, and management UI */
@font-face{
  font-family:"Kaif Cairo";
  src:url("/fonts/kaif-cairo-arabic.woff2") format("woff2");
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+202A-202E,U+2066-2069;
}
@font-face{
  font-family:"Kaif Cairo";
  src:url("/fonts/kaif-cairo-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
  unicode-range:U+0000-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF;
}

:root{
  --kaif-font-arabic:"Kaif Cairo","Segoe UI",Tahoma,Arial,sans-serif;
  --kaif-font-ui:var(--kaif-font-arabic);
  --kaif-font-numbers:"Kaif Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}

html,body,button,input,select,textarea,
.kaif-chart-tooltip{
  font-family:var(--kaif-font-arabic)!important;
}

/* Immediate loading and fatal-error states. */
#kaif-boot-loader{
  position:fixed;inset:0;z-index:100000;display:grid;place-items:center;
  background:radial-gradient(circle at 18% 18%,#fff0e5,transparent 38%),#fbf7f3;
  color:#7a3107;transition:opacity .22s ease,visibility .22s ease;
}
#kaif-boot-loader[hidden]{display:none}
.kaif-loader-card{display:grid;place-items:center;gap:13px;padding:28px;text-align:center}
.kaif-loader-mark{width:44px;height:44px;border:4px solid #f1d7c4;border-top-color:#cb6015;animation:kaif-spin .75s linear infinite}
.kaif-loader-card strong{font-size:14px}.kaif-loader-card span{color:#806f65;font-size:10px}
@keyframes kaif-spin{to{transform:rotate(1turn)}}

.kaif-global-error{
  position:fixed;inset:auto 18px 18px;z-index:100001;max-width:620px;margin:auto;
  border:1px solid #e6b7a7;background:#fff4ef;color:#7d2e18;padding:12px 14px;
  box-shadow:0 14px 38px #6c2b161f;font-size:11px;line-height:1.8;
}
.kaif-global-error button{float:left;border:0;background:transparent;color:inherit;font-weight:900;padding:2px 6px}

/* v8.2 management panels injected without replacing the designed dashboard. */
.kaif-compat-stack{display:grid;gap:16px;grid-column:1/-1;width:100%}
.settings-grid.kaif-settings-upgraded>.settings-panel:first-child{display:none}
.kaif-compat-panel{min-width:0;border:1px solid var(--border,var(--line,#e5ddd7));border-radius:14px!important;background:var(--card,var(--paper,#fff));color:var(--foreground,var(--ink,#241914));padding:20px;box-shadow:0 1px 2px #0000000a}
.kaif-compat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}
.kaif-compat-head h2{font-size:16px;font-weight:800;margin:3px 0 0}
.kaif-compat-head p{margin:0;color:var(--muted-foreground,var(--muted,#75685f));font-size:12px;line-height:1.7}
.kaif-compat-head-actions{display:flex;flex-wrap:wrap;gap:7px}
.kaif-compat-grid{display:grid;grid-template-columns:repeat(4,minmax(145px,1fr));gap:10px;align-items:end}
.kaif-compat-grid label{display:flex;flex-direction:column;gap:5px;min-width:0}
.kaif-compat-grid label>span{color:var(--muted-foreground,var(--muted,#75685f));font-size:12px;font-weight:700}
.kaif-compat-grid input,.kaif-compat-grid select{
  width:100%;height:40px;border:1px solid var(--border,var(--line,#e5ddd7));border-radius:9px;background:var(--background,var(--paper,#fff));color:var(--foreground,var(--ink,#241914));padding:0 11px;font-size:13px;
}
.kaif-compat-button{
  min-height:40px;border:1px solid var(--border,var(--line,#e5ddd7));border-radius:9px;background:var(--background,var(--paper,#fff));color:var(--foreground,var(--ink,#241914));padding:8px 13px;font-size:13px;font-weight:800;
}
.kaif-compat-button:hover,.kaif-compat-button:focus-visible{border-color:#cb6015;color:#9a430c;background:#fff7f0}
.kaif-compat-button.primary{border-color:#cb6015;background:#cb6015;color:#fff}
.kaif-compat-button.danger{border-color:#e5b9b9;color:#a43d3d;background:#fff7f7}
.kaif-compat-button:disabled{cursor:not-allowed;opacity:.55}
.kaif-compat-status{min-height:21px;margin:10px 0 0;color:var(--muted-foreground,var(--muted,#75685f));font-size:12px;line-height:1.8}
.kaif-compat-status.success{color:#287259}.kaif-compat-status.error{color:#a43d3d}
.kaif-compat-table-wrap{overflow:auto;border:1px solid var(--line);margin-top:14px}
.kaif-compat-table{min-width:720px}.kaif-compat-table td:first-child{display:table-cell}
.kaif-compat-table td:last-child{white-space:normal}
.kaif-compat-actions{display:flex;flex-wrap:wrap;gap:6px}
.kaif-compat-empty{padding:24px;text-align:center;color:var(--muted-foreground,var(--muted,#75685f));font-size:12px}
.kaif-compat-badge{display:inline-flex;align-items:center;padding:4px 7px;background:#fff2e7;color:#8e430f;font-size:8px}
.kaif-compat-badge.ok{background:#e9f6f0;color:#287259}
.kaif-compat-separator{height:1px;background:var(--line);margin:15px 0}

.kaif-toast-region{position:fixed;inset:18px 50% auto auto;z-index:100002;transform:translateX(50%);display:grid;gap:8px;width:min(430px,calc(100% - 28px));pointer-events:none}
.kaif-toast{border:1px solid #ecd3c0;background:#fffaf6;color:#5e3522;padding:11px 13px;box-shadow:0 14px 38px #6c2b161f;font-size:10px;line-height:1.7;animation:kaif-toast-in .2s ease both}
.kaif-toast.error{border-color:#e4b4b4;background:#fff4f4;color:#8e3434}
.kaif-toast.success{border-color:#b9dccd;background:#f1faf6;color:#27654f}
@keyframes kaif-toast-in{from{opacity:0;transform:translateY(-8px)}}

/* A practical dark theme for the preference restored from the complete build. */
html.kaif-dark{color-scheme:dark;--ink:#f5e9df;--muted:#c5aea0;--line:#52392e;--paper:#2a1c16;--canvas:#17100d;--plum-light:#4b2717;--shadow:0 14px 42px #0006}
html.kaif-dark,html.kaif-dark body,html.kaif-dark .workspace{background:var(--canvas);color:var(--ink)}
html.kaif-dark .sidebar,html.kaif-dark .topbar,html.kaif-dark .panel,html.kaif-dark .metric-card,
html.kaif-dark .viz-card,html.kaif-dark .login-card,html.kaif-dark .filters label,html.kaif-dark .filters button,
html.kaif-dark .user-card,html.kaif-dark .row-actions button,html.kaif-dark .danger-button,
html.kaif-dark .settings-panel input,html.kaif-dark .advanced-filters input,html.kaif-dark .advanced-filters select,
html.kaif-dark .member-form input,html.kaif-dark .member-form select,html.kaif-dark .import-options input,
html.kaif-dark .kaif-compat-button{background:var(--paper);color:var(--ink);border-color:var(--line)}
html.kaif-dark .topbar{background:#211610ee}
html.kaif-dark .search,html.kaif-dark th,html.kaif-dark .preview-counts>div,
html.kaif-dark .goal-values div{background:#211611;color:var(--muted);border-color:var(--line)}
html.kaif-dark input,html.kaif-dark select{background:#211611!important;color:var(--ink)!important;border-color:var(--line)!important}
html.kaif-dark .login-screen{background:radial-gradient(circle at 15% 15%,#4a2718,transparent 35%),#17100d}
html.kaif-dark .demo-banner,html.kaif-dark .data-note,html.kaif-dark .import-message{background:#382717;color:#e5bd91;border-color:#60442d}
html.kaif-dark td{color:#e9dbd2;border-color:var(--line)}
html.kaif-dark .kaif-compat-button.primary{background:#cb6015;color:#fff;border-color:#cb6015}

@media (max-width:1050px){.kaif-compat-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media (max-width:620px){
  .kaif-compat-grid{grid-template-columns:1fr}.kaif-compat-head{flex-direction:column}.kaif-compat-head-actions{width:100%}
  .kaif-compat-button,.kaif-compat-grid input,.kaif-compat-grid select{min-height:44px}.kaif-compat-head-actions .kaif-compat-button{flex:1}.kaif-global-error{inset:auto 10px 10px}
}

@media (prefers-reduced-motion:reduce){
  #kaif-boot-loader,.kaif-loader-mark,.kaif-toast{animation:none!important;transition:none!important}
}