/* ====== Shokall UI — v1 ======
   A small, scalable CSS system for 30+ pages.
   - Design tokens
   - Fluid type & spacing
   - Layout, nav, cards
   - Forms, tables, buttons
   - Utilities, alerts, toolbar, pagination
   - Print & small dark-mode toggle
================================= */

/* 1) TOKENS */
:root{
  /* brand & neutrals */
  --brand:        #0ea5e9;   /* sky-500 */
  --brand-600:    #0284c7;
  --ink:          #0f172a;   /* slate-900 */
  --ink-600:      #334155;
  --muted:        #64748b;   /* slate-500 */
  --line:         #e5e7eb;   /* gray-200 */
  --bg:           #ffffff;
  --bg-soft:      #f8fafc;   /* slate-50 */

  /* state */
  --ok:           #16a34a;   /* green-600 */
  --ok-100:       #dcfce7;
  --warn:         #d97706;   /* amber-600 */
  --warn-100:     #fef3c7;
  --err:          #b91c1c;   /* red-700  */
  --err-100:      #fee2e2;
  --info:         #2563eb;   /* blue-600 */
  --info-100:     #dbeafe;

  /* radius, shadow, rhythm */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
  --sh: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;

  /* container */
  --wrap: 1100px;

  /* table row height */
  --trh: 44px;
}

/* 2) BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font: 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--space-4)}
h1,h2,h3{line-height:1.25; margin:1.25em 0 .5em}
h1{font-size:clamp(1.5rem, 2vw + 1rem, 2rem)}
h2{font-size:clamp(1.25rem,1.2vw + 1rem,1.5rem)}
p{margin:.75rem 0 1rem}
small,.muted{color:var(--muted)}
a{color:var(--brand-600); text-decoration:none}
a:hover{text-decoration:underline}

/* 3) HEADER / NAV */
header.bar{
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px);
}
header.bar .inner{
  display:flex; align-items:center; justify-content:space-between;
  height:56px;
}
.brand{font-weight:700; letter-spacing:.3px}
nav a{margin-left:var(--space-4); color:var(--ink)}
nav a.active{color:var(--brand-600); font-weight:600;}

/* 4) GRID LAYOUTS */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4)}
@media (max-width:900px){ .grid2,.grid3{grid-template-columns:1fr} }

/* 5) CARDS & SECTIONS */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:var(--space-5); margin:var(--space-5) 0;
  box-shadow:var(--sh);
}
.section{margin:var(--space-8) 0}

/* 6) FORMS */
label{display:block; font-weight:600; margin:.25rem 0 .35rem}
input,select,textarea{
  width:100%; font:inherit; color:var(--ink);
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:.6rem .8rem; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.help{color:var(--muted); font-size:.9rem; margin-top:.25rem}
.form-row{display:flex; gap:var(--space-4); align-items:flex-end}
.form-row > *{flex:1}

/* Inputs w/ addons */
.input-group{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.input-group > span{
  padding:.6rem .8rem; background:var(--bg-soft); border-right:1px solid var(--line); color:var(--muted)
}
.input-group > input{border:0}

/* 7) BUTTONS */
.btn,button{
  display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
  padding:.6rem .9rem; border-radius:var(--r);
  border:1px solid var(--line); background:#111827; color:#fff;
  cursor:pointer; text-decoration:none; user-select:none;
}
.btn:hover,button:hover{opacity:.95}
.btn.secondary{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.brand{background:var(--brand); border-color:var(--brand)}
.btn.ghost{background:transparent; color:var(--ink); border-color:transparent}
.btn.danger{background:#dc2626; border-color:#dc2626}
.btn.icon{padding:.45rem .6rem}

/* Button groups / toolbars */
.toolbar{display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center}

/* 8) TABLES */
.table-scroll{overflow:auto}
table.grid{width:100%; border-collapse:separate; border-spacing:0}
table.grid th, table.grid td{
  padding:.55rem .7rem; border-top:1px solid var(--line); vertical-align:middle
}
table.grid thead th{
  position:sticky; top:56px; z-index:10;
  background:linear-gradient(#fff,#fff); /* sticky header */
  font-weight:700; text-align:left; border-top:0;
}
table.grid tbody tr:hover{background:var(--bg-soft)}
.num{text-align:right}
.nowrap{white-space:nowrap}

/* Row states */
tr.ok td{background:var(--ok-100)}
tr.warn td{background:var(--warn-100)}
tr.err td{background:var(--err-100)}

/* 9) ALERTS & BADGES */
.alert{border:1px solid var(--line); border-left:4px solid var(--brand); padding:var(--space-4); border-radius:var(--r); background:#fff}
.alert.ok{border-left-color:var(--ok); background:var(--ok-100)}
.alert.warn{border-left-color:var(--warn); background:var(--warn-100)}
.alert.err{border-left-color:var(--err); background:var(--err-100)}
.badge{
  display:inline-block; padding:.2rem .5rem; border-radius:999px;
  background:var(--bg-soft); color:var(--ink-600); font-size:.78rem; border:1px solid var(--line)
}
.badge.brand{background:rgba(14,165,233,.1); color:var(--brand-600); border-color:rgba(14,165,233,.25)}
.badge.ok{background:rgba(22,163,74,.1); color:var(--ok); border-color:rgba(22,163,74,.25)}
.badge.err{background:rgba(185,28,28,.08); color:var(--err); border-color:rgba(185,28,28,.2)}

/* 10) TABS */
.tabs{display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:var(--space-4)}
.tabs a{
  padding:.55rem .9rem; border:1px solid transparent; border-bottom:2px solid transparent; color:var(--ink);
  text-decoration:none; border-radius:var(--r) var(--r) 0 0;
}
.tabs a.active{border-color:var(--line); border-bottom-color:var(--brand); color:var(--brand-600); background:#fff}

/* 11) PAGINATION */
.pager{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}
.pager a,.pager span{
  padding:.45rem .7rem; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; color:var(--ink); text-decoration:none;
}
.pager .current{background:var(--brand); color:#fff; border-color:var(--brand)}

/* 12) UTILITIES */
.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.wrap{max-width:var(--wrap)}
.hide{display:none !important}
.right{text-align:right}
.w-100{width:100%}

/* 13) PRINT (invoices, statements) */
@media print{
  header.bar, .toolbar, .btn, nav{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; border-color:#bbb}
  table.grid th{position:static}
}

/* 14) OPTIONAL DARK MODE (pref only) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --bg-soft:#0e152b; --ink:#e5e7eb; --ink-600:#cbd5e1; --line:#1f2937;
  }
  header.bar{background:rgba(11,16,32,.9); border-color:#1f2937}
  .card{background:#0e152b; border-color:#1f2937}
  input,select,textarea{background:#0b1020; border-color:#1f2937; color:#e5e7eb}
  table.grid thead th{background:#0e152b}
  .btn.secondary{background:#0b1020; color:#e5e7eb; border-color:#1f2937}
}