/* =====================================================================
   ichamps — Design System (Notion-like)
   Single source of truth for colours, spacing, typography and components.
   Loaded last in base.html so it refines Tailwind/Bootstrap defaults.
   Use the .n-* component classes; pages opt into .n-page for auto-refinement.
   ===================================================================== */

:root {
  /* ---- Colour ---- */
  --n-text:          #37352f;   /* warm near-black (Notion) */
  --n-text-muted:    #787774;
  --n-text-light:    #9b9a97;
  --n-bg:            #ffffff;
  --n-bg-subtle:     #f7f7f5;
  --n-bg-hover:      #efefee;
  --n-bg-active:     #e9e9e7;
  --n-border:        #ececea;   /* faint — layering is mostly via bg contrast */
  --n-border-strong: #e0e0dd;
  --n-accent:        #2563eb;
  --n-accent-hover:  #1d4ed8;
  --n-accent-soft:   #eaf1fe;
  --n-danger:        #dc2626;
  --n-danger-hover:  #b91c1c;
  --n-success:       #16a34a;
  --n-warning:       #b45309;

  /* ---- Radius (FotMob-like: soft, generous) ---- */
  --n-radius-sm: 7px;
  --n-radius:    10px;
  --n-radius-lg: 14px;
  --n-radius-xl: 20px;

  /* ---- Spacing scale (4px base) ---- */
  --n-1: 4px;  --n-2: 8px;  --n-3: 12px; --n-4: 16px;
  --n-5: 20px; --n-6: 24px; --n-8: 32px; --n-10: 40px;

  /* ---- Typography ---- */
  --n-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --n-fs-xs: .75rem;  --n-fs-sm: .825rem; --n-fs-md: .9rem;
  --n-fs-lg: 1.05rem; --n-fs-xl: 1.25rem; --n-fs-2xl: 1.6rem;

  /* ---- Elevation ---- */
  --n-shadow:    0 1px 2px rgba(15,15,15,.04), 0 2px 8px rgba(15,15,15,.04);
  --n-shadow-lg: 0 8px 30px rgba(15,15,15,.10);
  --n-ring:      0 0 0 3px rgba(37,99,235,.14);

  --n-transition: .12s ease;
}

/* =====================  Base  ===================== */
body {
  font-family: var(--n-font);
  color: var(--n-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { color: #1f1f1d; letter-spacing: -.012em; font-weight: 600; }
h1 { font-size: var(--n-fs-2xl); }
h2 { font-size: var(--n-fs-xl); }
h3 { font-size: var(--n-fs-lg); }

a { color: var(--n-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--n-border); opacity: 1; }
::selection { background: rgba(37,99,235,.16); }

:focus-visible { outline: none; box-shadow: var(--n-ring); border-radius: var(--n-radius-sm); }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: #dcdcd9; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #c4c4c1; background-clip: padding-box; }

/* =====================  Buttons  =====================
   Base = secondary/outline. Modifiers: -primary -ghost -subtle -danger,
   sizes -sm -lg, -icon (square), -block. Also normalises Bootstrap .btn. */
.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--n-2);
  padding: .5rem .85rem; font-family: var(--n-font); font-size: var(--n-fs-sm); font-weight: 500;
  line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none;
  border: 1px solid var(--n-border); border-radius: var(--n-radius);
  background: #fff; color: var(--n-text);
  transition: background var(--n-transition), border-color var(--n-transition), box-shadow var(--n-transition), color var(--n-transition);
}
.n-btn:hover { background: var(--n-bg-hover); color: var(--n-text); text-decoration: none; }
.n-btn:active { background: var(--n-bg-active); }
.n-btn:disabled, .n-btn.is-disabled { opacity: .5; pointer-events: none; }
.n-btn:focus-visible { box-shadow: var(--n-ring); }

/* Primary action = dark near-black (matches the app's slate-800 CTAs + Notion).
   Blue (--n-accent) stays the accent for links/focus/selected states. */
.n-btn-primary { background: #2b2a28; border-color: #2b2a28; color: #fff; }
.n-btn-primary:hover { background: #1f1f1d; border-color: #1f1f1d; color: #fff; }
.n-btn-ghost { border-color: transparent; background: transparent; }
.n-btn-ghost:hover { background: var(--n-bg-hover); }
.n-btn-subtle { border-color: transparent; background: var(--n-bg-subtle); }
.n-btn-subtle:hover { background: var(--n-bg-hover); }
.n-btn-danger { background: var(--n-danger); border-color: var(--n-danger); color: #fff; }
.n-btn-danger:hover { background: var(--n-danger-hover); border-color: var(--n-danger-hover); color: #fff; }

.n-btn-sm { padding: .3rem .6rem; font-size: var(--n-fs-xs); gap: var(--n-1); }
.n-btn-lg { padding: .65rem 1.1rem; font-size: var(--n-fs-md); }
.n-btn-icon { padding: .45rem; width: 2.1rem; height: 2.1rem; }
.n-btn-icon.n-btn-sm { width: 1.75rem; height: 1.75rem; padding: .3rem; }
.n-btn-block { display: flex; width: 100%; }

/* Bootstrap buttons share the same rhythm */
.btn { border-radius: var(--n-radius); font-weight: 500; }
.btn-primary { background: #2b2a28; border-color: #2b2a28; }
.btn-primary:hover, .btn-primary:focus { background: #1f1f1d; border-color: #1f1f1d; }

/* =====================  Forms  ===================== */
.form-control, .form-select, .n-input {
  border-radius: var(--n-radius);
  border: 1px solid var(--n-border);
  color: var(--n-text);
  background: #fff;
}
.n-input { width: 100%; padding: .5rem .7rem; font-size: var(--n-fs-md); }
.form-control:focus, .form-select:focus, .n-input:focus {
  outline: none; border-color: #a9c2f5; box-shadow: var(--n-ring);
}
.form-control::placeholder, .n-input::placeholder { color: var(--n-text-light); }
.n-label { display: block; font-size: var(--n-fs-xs); font-weight: 500; color: var(--n-text-muted); letter-spacing: .01em; margin-bottom: var(--n-1); }
.n-field { margin-bottom: var(--n-4); }
.form-check-input:checked { background-color: var(--n-accent); border-color: var(--n-accent); }
.form-check-input:focus { border-color: #a9c2f5; box-shadow: var(--n-ring); }

/* =====================  Cards & surfaces  ===================== */
.n-card { background: var(--n-bg); border: 1px solid var(--n-border); border-radius: var(--n-radius-lg); }
.n-card-pad { padding: var(--n-5) var(--n-6); }
.n-card-hover { transition: box-shadow var(--n-transition), border-color var(--n-transition); }
.n-card-hover:hover { box-shadow: var(--n-shadow); border-color: var(--n-border-strong); }
.n-card-header { padding: var(--n-4) var(--n-5); border-bottom: 1px solid var(--n-border); display: flex; align-items: center; justify-content: space-between; gap: var(--n-3); }
.n-card-title { font-size: var(--n-fs-lg); font-weight: 600; color: #1f1f1d; }

/* =====================  Badges / chips  ===================== */
.n-chip {
  display: inline-flex; align-items: center; gap: var(--n-1);
  padding: 2px 9px; font-size: var(--n-fs-xs); font-weight: 500; line-height: 1.5;
  border-radius: 999px; border: 1px solid var(--n-border);
  background: var(--n-bg-subtle); color: var(--n-text-muted);
}
.n-badge { display: inline-flex; align-items: center; gap: var(--n-1); padding: 2px 8px; font-size: var(--n-fs-xs); font-weight: 500; border-radius: 6px; border: 1px solid transparent; }
.n-badge-blue   { background: var(--n-accent-soft); color: #1d4ed8; border-color: #d4e2fc; }
.n-badge-green  { background: #e7f6ee; color: #15803d; border-color: #bbe7cc; }
.n-badge-amber  { background: #fef6e7; color: #b45309; border-color: #f5e3bf; }
.n-badge-red    { background: #fdeaea; color: #b91c1c; border-color: #f3c9c9; }
.n-badge-gray   { background: var(--n-bg-subtle); color: var(--n-text-muted); border-color: var(--n-border); }

/* =====================  Tabs  ===================== */
.n-tabs { display: flex; flex-wrap: wrap; gap: var(--n-2); }
.n-tab {
  display: inline-flex; align-items: center; gap: var(--n-2);
  padding: .45rem .8rem; font-size: var(--n-fs-sm); font-weight: 500;
  border-radius: var(--n-radius); border: 1px solid var(--n-border);
  color: var(--n-text-muted); background: #fff; cursor: pointer; transition: background var(--n-transition);
}
.n-tab:hover { background: var(--n-bg-hover); text-decoration: none; color: var(--n-text); }
.n-tab.is-active { background: #2b2a28; border-color: #2b2a28; color: #fff; }

/* =====================  Tables  ===================== */
.n-table { width: 100%; border-collapse: collapse; }
.n-table th, .n-table td { border-bottom: 1px solid var(--n-border); padding: var(--n-2) var(--n-3); text-align: left; }
.n-table th { color: var(--n-text-muted); font-weight: 500; font-size: var(--n-fs-xs); text-transform: none; }
.n-table tbody tr:hover { background: var(--n-bg-subtle); }

/* =====================  Notes / alerts  ===================== */
.n-note { padding: var(--n-3) var(--n-4); border-radius: var(--n-radius); font-size: var(--n-fs-sm); border: 1px solid var(--n-border); background: var(--n-bg-subtle); color: var(--n-text); }
.n-note-info    { background: var(--n-accent-soft); border-color: #d4e2fc; color: #1d4ed8; }
.n-note-warn    { background: #fef6e7; border-color: #f5e3bf; color: #92400e; }
.n-note-success { background: #e7f6ee; border-color: #bbe7cc; color: #15803d; }
.n-note-danger  { background: #fdeaea; border-color: #f3c9c9; color: #b91c1c; }

/* =====================  Modal  ===================== */
.n-modal-overlay { position: fixed; inset: 0; z-index: 1080; display: none; align-items: flex-start; justify-content: center; padding: var(--n-6); overflow: auto; background: rgba(15,15,15,.45); }
.n-modal-overlay.is-open { display: flex; }
.n-modal { width: 100%; max-width: 960px; background: #fff; color: var(--n-text); border-radius: var(--n-radius-xl); box-shadow: var(--n-shadow-lg); padding: var(--n-6); }
.n-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--n-3); margin-bottom: var(--n-4); }

/* =====================  Layout helpers  ===================== */
.n-divider { border: 0; border-top: 1px solid var(--n-border); margin: var(--n-4) 0; }
.n-muted { color: var(--n-text-muted); }
.n-stack > * + * { margin-top: var(--n-3); }
.n-stack-lg > * + * { margin-top: var(--n-5); }
.n-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n-2); }

/* =====================================================================
   .n-page — opt-in treatment: add to a page root to Notion-ify common
   Tailwind utilities without editing every element.
   ===================================================================== */
.n-page .rounded-2xl { border-radius: var(--n-radius-xl) !important; }
.n-page .rounded-xl  { border-radius: var(--n-radius-lg) !important; }
.n-page .rounded-lg  { border-radius: var(--n-radius) !important; }
.n-page .border-2 { border-width: 1px !important; }
.n-page .border-slate-200, .n-page .border-slate-100, .n-page .border-gray-200, .n-page .border-gray-100 { border-color: var(--n-border) !important; }
.n-page .bg-slate-50, .n-page .bg-gray-50 { background: var(--n-bg-subtle) !important; }
.n-page .text-slate-500, .n-page .text-slate-600, .n-page .text-gray-500, .n-page .text-gray-600 { color: var(--n-text-muted) !important; }
.n-page .shadow, .n-page .shadow-sm, .n-page .shadow-md { box-shadow: var(--n-shadow) !important; }
.n-page [class*="border-primary"] { border-color: var(--n-accent) !important; }
.n-page input[type=text], .n-page input[type=number], .n-page input[type=date], .n-page input[type=time],
.n-page input[type=search], .n-page input[type=email], .n-page input[type=password], .n-page textarea, .n-page select {
  border-color: var(--n-border) !important; border-radius: var(--n-radius) !important; color: var(--n-text);
}
.n-page input:focus, .n-page textarea:focus, .n-page select:focus {
  border-color: #a9c2f5 !important; box-shadow: var(--n-ring) !important; outline: none;
}
.n-page .btn, .n-page button.rounded-lg, .n-page a.rounded-lg { border-radius: var(--n-radius) !important; }

/* =====================  Flatpickr (date/time) — themed  ===================== */
.flatpickr-calendar { border: 1px solid var(--n-border); border-radius: var(--n-radius-lg); box-shadow: var(--n-shadow-lg); background: var(--n-bg); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-weekday { color: var(--n-text-muted); }
.flatpickr-day { color: var(--n-text); border-radius: var(--n-radius-sm); }
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--n-bg-hover); border-color: transparent; }
.flatpickr-day.today { border-color: var(--n-border-strong); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--n-text-light); }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm, .flatpickr-current-month input.cur-year, .numInputWrapper span { color: var(--n-text); }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: var(--n-bg-hover); }
.flatpickr-monthDropdown-months { background: var(--n-bg); color: var(--n-text); }
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, [data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--n-text-muted); }
[data-theme="dark"] .numInputWrapper span.arrowUp::after { border-bottom-color: var(--n-text-muted); }
[data-theme="dark"] .numInputWrapper span.arrowDown::after { border-top-color: var(--n-text-muted); }

/* Select chevron readable in dark */
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239a9a98' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* =====================================================================
   Dark theme — token overrides + a Tailwind utility shim.
   Activated by [data-theme="dark"] on <html> (set early in <head>).
   ===================================================================== */
:root[data-theme="dark"] {
  --n-text:          #ededec;
  --n-text-muted:    #9a9a98;
  --n-text-light:    #6c6c6a;
  --n-bg:            #1b1b1d;   /* card/surface — sits above the page bg */
  --n-bg-subtle:     #232326;
  --n-bg-hover:      #2a2a2d;
  --n-bg-active:     #323236;
  --n-border:        #2a2a2d;   /* barely-there; layering is via bg */
  --n-border-strong: #3a3a3e;
  --n-accent:        #5b8def;
  --n-accent-hover:  #7aa4f5;
  --n-accent-soft:   #1d2b44;
  --n-shadow:        0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --n-shadow-lg:     0 12px 40px rgba(0,0,0,.6);
  --n-ring:          0 0 0 3px rgba(91,141,239,.30);
}
[data-theme="dark"] body { background-color: #0f0f10; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f1f1ef; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #3a3a38; }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #4a4a47; }

/* Components in dark */
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .n-input { background: #262626; color: var(--n-text); }
[data-theme="dark"] .n-btn { background: #2a2a2a; }
[data-theme="dark"] .n-btn-ghost, [data-theme="dark"] .n-btn-subtle { background: transparent; }
[data-theme="dark"] .n-btn-subtle { background: #262626; }
/* Inverted primary in dark = light surface on dark bg */
[data-theme="dark"] .n-btn-primary, [data-theme="dark"] .btn-primary { background: #e6e6e3; border-color: #e6e6e3; color: #191919; }
[data-theme="dark"] .n-btn-primary:hover, [data-theme="dark"] .btn-primary:hover { background: #fff; border-color: #fff; color: #191919; }
[data-theme="dark"] .n-tab { background: #232323; }
[data-theme="dark"] .n-tab.is-active { background: #e6e6e3; border-color: #e6e6e3; color: #191919; }

/* Tailwind utility shim (covers the most common classes used in templates) */
[data-theme="dark"] .bg-white { background-color: #1b1b1d !important; }
[data-theme="dark"] .bg-white\/95 { background-color: rgba(27,27,29,.95) !important; }
[data-theme="dark"] .bg-appbg { background-color: #0f0f10 !important; }
[data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-gray-50 { background-color: #232326 !important; }
[data-theme="dark"] .bg-slate-100, [data-theme="dark"] .bg-gray-100 { background-color: #2a2a2d !important; }
[data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800 { color: #ededec !important; }
[data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400 { color: #9a9a98 !important; }
[data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border { border-color: #2a2a2d !important; }
[data-theme="dark"] .divide-slate-200 > * , [data-theme="dark"] .divide-gray-200 > * { border-color: #2a2a2d !important; }

/* Logo swaps with theme (white wordmark on dark) */
.app-logo-dark { display: none; }
[data-theme="dark"] .app-logo-light { display: none; }
[data-theme="dark"] .app-logo-dark { display: inline-block; }

/* Theme toggle button */
.n-theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--n-radius); border:1px solid var(--n-border); background:var(--n-bg); color:var(--n-text-muted); cursor:pointer; transition:background var(--n-transition),color var(--n-transition); }
.n-theme-toggle:hover { background:var(--n-bg-hover); color:var(--n-text); }
.n-theme-toggle .fa-sun { display:none; }
[data-theme="dark"] .n-theme-toggle .fa-moon { display:none; }
[data-theme="dark"] .n-theme-toggle .fa-sun { display:inline; }