/*
  NDIG Design System — reusable tokens + components extracted from public/styles.css
  Usage: copy this file into the new project and swap the logo/brand assets.
  Fonts: 'Museo Sans'/'Museo Slab' are referenced but NOT loaded as web fonts here —
  the original project falls back to Arial Nova/Arial (serif for headings), so no
  proprietary font files are required to keep the same look.
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --brand-primary:#D2B97D;      /* warm sand/gold menu background */
  --brand-secondary:#9A7440;
  --brand-accent:#E6D9B8;
  --brand-highlight:#6B7A45;
  --brand-highlight-light:#DCE2B9;
  --surface-bg:#F6F1E7;
  --surface-bg-alt:#E9DFC8;
  --surface-white:#ffffff;
  --text:#302A22;
  --text-muted:#6D655A;
  --border:#D8CCB7;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 12px 28px rgba(72,55,32,0.16);
}

html,body{height:100%;font-family:'Museo Sans','Arial Nova',Arial,sans-serif;background:var(--surface-bg);color:var(--text)}
h1,h2,h3,.heading-serif{font-family:'Museo Slab','Times New Roman',serif}

/* CARD — base surface used by login/form/kb/stat cards */
.card{background:var(--surface-white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2rem;position:relative;overflow:hidden}
.card--accent-top::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--brand-secondary),var(--brand-highlight))}

/* BUTTONS */
.btn-primary{background:linear-gradient(135deg,var(--brand-secondary),#0d8ea2);color:#fff;border:none;border-radius:var(--radius);padding:14px 36px;font-family:'Museo Sans','Arial Nova',Arial,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:0 8px 18px rgba(0,171,189,0.3)}
.btn-primary:hover{background:linear-gradient(135deg,#0d8ea2,var(--brand-primary));transform:translateY(-2px)}
.btn-primary:disabled{opacity:0.55;cursor:not-allowed;transform:none;pointer-events:none}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.5);border-radius:var(--radius);padding:13px 28px;font-family:'Museo Sans','Arial Nova',Arial,sans-serif;font-size:15px;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.1)}
.btn-danger-outline{background:rgba(127,29,29,0.24);color:#fff;border:1.5px solid rgba(248,113,113,0.7);border-radius:var(--radius);padding:13px 24px;font-family:'Museo Sans','Arial Nova',Arial,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-danger-outline:hover{background:rgba(127,29,29,0.4);border-color:#fecaca}
.btn-sm{background:var(--brand-secondary);color:#fff;border:none;border-radius:7px;padding:7px 16px;font-family:'Museo Sans','Arial Nova',Arial,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-sm:hover{background:var(--brand-primary)}
.btn-sm-outline{background:#fff;color:var(--text);border:1px solid var(--border);border-radius:7px;padding:7px 16px;font-family:'Museo Sans','Arial Nova',Arial,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-sm-outline:hover{border-color:var(--brand-secondary);color:var(--brand-secondary)}
.btn-danger-link{background:#fff;color:#9f1239;border:1px solid #fda4af;border-radius:10px;padding:9px 12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-danger-link:hover{background:#fff1f2;border-color:#fb7185}

/* SPINNER */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite;margin-right:8px;vertical-align:middle}
.spinner.spinner-dark{border-color:rgba(44,83,121,0.18);border-top-color:var(--brand-secondary)}
.spinner.spinner-sm{width:13px;height:13px;border-width:2px}
.spinner.spinner-lg{width:24px;height:24px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* LOADING STATES */
.loading-state{display:flex;align-items:center;justify-content:center;gap:12px;padding:26px 18px;border:1px dashed rgba(44,83,121,0.16);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(248,252,253,0.96));color:var(--brand-primary);font-size:14px;font-weight:600;text-align:center;min-height:88px}
.loading-state.compact{min-height:0;padding:12px 14px;font-size:13px;justify-content:flex-start}
.loading-state-subtle{border:none;background:transparent;color:var(--text-muted);padding:18px 0;min-height:0}
.app-loader{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(244,248,251,0.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1200}
.app-loader.visible{display:flex}
.app-loader-card{display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:16px;background:rgba(255,255,255,0.96);border:1px solid rgba(44,83,121,0.12);box-shadow:0 18px 40px rgba(44,83,121,0.16);color:var(--brand-primary);font-size:15px;font-weight:700}

/* FORM FIELDS */
.form-group,.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:1.2rem}
.form-group label,.form-field label{font-size:13px;font-weight:500}
.form-group input,.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-family:'Museo Sans','Arial Nova',Arial,sans-serif;font-size:14px;color:var(--text);background:#fff;outline:none;transition:border-color 0.2s,box-shadow 0.2s}
.form-group input:focus,.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--brand-accent)}
.form-field-note{margin-top:2px;font-size:12px;line-height:1.45;color:var(--text-muted)}

/* BANNERS */
.banner-error{background:#fff3f2;border:1px solid #f3c7c2;border-left:4px solid #dc2626;border-radius:10px;padding:0.95rem 1rem;margin-bottom:1rem;color:#8f1d1d}
.banner-success{background:#f0fdf4;border:1px solid #bbf7d0;border-left:4px solid #16a34a;border-radius:10px;padding:0.95rem 1rem;margin-bottom:1rem;color:#166534}

/* STATUS BADGE */
.status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}