/**
 * core.css — single source of design tokens + shared layout for the whole panel.
 * Every PHP page (header, sidebar, footer, main-content pages) includes this once.
 *
 * COLOR SCHEME (from brand palette):
 *   #1C2024  ink / dark surfaces      (was #000000 — updated per brief)
 *   #DB541F  brand / accent / actions
 *   #8C8C8C  secondary text / icons
 *   #C9C9C9  borders / dividers / subtle fills
 *   #FFFFFF  surfaces / cards
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* ---- brand palette (source of truth) ---- */
  --ink-900:#1C2024;
  --brand:#DB541F;
  --brand-dark:#B8431A;
  --brand-light:#F4A574;
  --gray-600:#8C8C8C;
  --gray-200:#C9C9C9;
  --white:#FFFFFF;

  /* ---- derived surfaces / text (tints of the palette above) ---- */
  --bg:#FAFAF9;
  --surface:var(--white);
  --surface-alt:#F6F5F3;
  --ink-700:#33383B;
  --ink-600:#5A6064;
  --ink-400:var(--gray-600);
  --border:var(--gray-200);
  --border-soft:#EDECE9;

  /* ---- functional (status) colors — outside the core 5, kept minimal ---- */
  --green:#3E8F6D;
  --rust:#C0432B;
  --amber:#D9962F;

  /* ---- elevation (consistent shadow scale, used everywhere) ---- */
  --shadow-xs:0 1px 2px rgba(28,32,36,0.04);
  --shadow-sm:0 6px 16px -8px rgba(28,32,36,0.10);
  --shadow-md:0 18px 36px -18px rgba(28,32,36,0.20);
  --shadow-header:0 1px 0 rgba(28,32,36,0.05), 0 12px 24px -22px rgba(28,32,36,0.18);

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --ff-display:'Space Grotesk', sans-serif;
  --ff-body:'IBM Plex Sans', sans-serif;
  --ff-mono:'IBM Plex Mono', monospace;
  --sidebar-w:264px;
}
[data-theme="dark"]{
  --bg:#15181B;
  --surface:var(--ink-900);
  --surface-alt:#20252A;
  --ink-700:#D9DADA;
  --ink-600:#AFAFAF;
  --ink-400:#7A7F82;
  --border:#2C3135;
  --border-soft:#262B2F;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ background:var(--bg); }
body{
  font-family:var(--ff-body);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
  /* whitish base with a whisper of brand warmth top-left, kept extremely subtle */
  background:
    radial-gradient(1100px 600px at -10% -15%, rgba(219,84,31,0.035), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(140,140,140,0.04), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
[data-theme="dark"] body{
  background:
    radial-gradient(1100px 600px at -10% -15%, rgba(219,84,31,0.06), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
a{ color:inherit; }
button{ font-family:inherit; }
img{ display:block; max-width:100%; }

/* slim, unobtrusive scrollbars for the sidebar + long panels */
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }

/* ============ LOGO SLOT ============
   Replace /assets/img/logo.svg with your own file (same name & path)
   and it updates everywhere: login page + sidebar + topbar. */
.logo-mark{
  width:34px; height:34px; object-fit:contain; border-radius:9px;
}
.logo-mark.lg{ width:44px; height:44px; }

/* ============ LAYOUT SHELL ============ */
.shell{ display:flex; min-height:100vh; }

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border-soft);
  box-shadow:1px 0 0 rgba(28,32,36,0.02);
  padding:20px 14px 16px;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:background .25s ease, border-color .25s ease;
  flex-shrink:0;
}
.side-brand{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px 18px; margin-bottom:10px;
  border-bottom:1px solid var(--border-soft);
}
.side-brand .logo-mark{
  background:linear-gradient(135deg, var(--ink-900), #2b2320);
  padding:5px; box-shadow:var(--shadow-xs);
}
.side-brand .txt{ font-family:var(--ff-display); font-weight:600; font-size:16px; letter-spacing:.01em; }
.side-brand .txt small{ display:block; font-size:9.5px; color:var(--ink-400); font-weight:500; letter-spacing:.08em; margin-top:1px; }

.nav-group{ margin-bottom:3px; }
.nav-head{
  width:100%; display:flex; align-items:center; gap:11px;
  padding:9px 11px; border:0; background:transparent; cursor:pointer;
  border-radius:10px; color:var(--ink-700); font-size:13.6px; font-weight:500;
  position:relative; text-decoration:none;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.nav-head:hover{ background:var(--surface-alt); color:var(--ink-900); }
.nav-head svg.ic{ width:17px; height:17px; flex-shrink:0; color:var(--ink-400); transition:color .16s ease, transform .16s ease; }
.nav-head:hover svg.ic{ color:var(--brand); transform:scale(1.08); }
.nav-head .chev{ margin-left:auto; width:13px; height:13px; transition:transform .25s ease; color:var(--ink-400); }
.nav-group.open .nav-head .chev{ transform:rotate(180deg); }

.nav-group.active-parent > .nav-head{
  background:linear-gradient(90deg, rgba(219,84,31,0.09), rgba(219,84,31,0.02));
  color:var(--ink-900); font-weight:600;
}
.nav-group.active-parent > .nav-head svg.ic{ color:var(--brand); }
.nav-group.active-parent > .nav-head::before{
  content:''; position:absolute; left:-14px; top:6px; bottom:6px; width:3px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--brand), var(--brand-dark));
}

.nav-sub{
  overflow:hidden; max-height:0; transition:max-height .3s cubic-bezier(.4,0,.2,1);
  padding-left:20px; margin-left:19px; position:relative;
}
.nav-sub::before{
  content:''; position:absolute; left:0; top:2px; bottom:10px; width:1px;
  background:var(--border-soft);
}
.nav-group.open .nav-sub{ max-height:320px; }
.nav-sub a{
  display:block; padding:6.5px 9px; font-size:12.8px; color:var(--ink-600); text-decoration:none;
  border-radius:7px; transition:color .15s ease, background .15s ease, transform .15s ease; cursor:pointer;
  position:relative;
}
.nav-sub a:hover{ color:var(--brand); background:var(--surface-alt); transform:translateX(1px); }
.nav-sub a.current{ color:var(--brand); font-weight:600; background:rgba(219,84,31,0.07); }
.nav-sub a.current::before{
  content:''; position:absolute; left:-17px; top:13px; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px rgba(219,84,31,0.15);
}
.nav-subheading{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-400); padding:13px 9px 5px; user-select:none; opacity:.85;
}
.nav-sub li:first-child .nav-subheading{ padding-top:5px; }
.sidebar-divider{ border:0; border-top:1px solid var(--border-soft); margin:13px 6px; }

.side-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); }
.logout-link{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px;
  color:var(--rust); font-size:13.6px; font-weight:500; text-decoration:none;
  transition:background .16s ease, transform .16s ease;
}
.logout-link:hover{ background:rgba(192,67,43,0.08); transform:translateX(1px); }
.logout-link svg{ width:17px; height:17px; }

/* ---------- MAIN / TOPBAR ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:66px; display:flex; align-items:center; justify-content:space-between;
  padding:0 30px; border-bottom:1px solid var(--border-soft);
  background:rgba(255,255,255,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-header);
  position:sticky; top:0; z-index:10;
  transition:background .25s ease, border-color .25s ease;
}
[data-theme="dark"] .topbar{ background:rgba(28,32,36,0.82); }
.topbar .brand-lockup{ display:flex; align-items:center; gap:10px; }
.topbar .brand-lockup .name{ font-family:var(--ff-display); font-weight:600; font-size:15px; display:none; }
.society-chip{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-600);
  background:var(--surface-alt); padding:7px 14px 7px 8px; border-radius:20px; border:1px solid var(--border-soft);
}
.society-chip svg{
  width:22px; height:22px; padding:4px; border-radius:50%; flex-shrink:0;
  background:rgba(219,84,31,0.10); color:var(--brand);
}
.society-chip b{ color:var(--ink-900); font-weight:600; }
.top-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink-600); position:relative;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.icon-btn:hover{ background:var(--surface-alt); color:var(--brand); transform:translateY(-1px); }
.icon-btn svg{ width:19px; height:19px; }
.badge-dot{
  position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--rust);
  box-shadow:0 0 0 2px var(--surface);
}
.user-chip{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:24px; cursor:pointer; transition:background .16s ease; margin-left:2px; }
.user-chip:hover{ background:var(--surface-alt); }
.user-chip .avatar{
  width:31px; height:31px; border-radius:50%; background:linear-gradient(135deg,var(--ink-900),var(--brand));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:600; font-family:var(--ff-display);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border-soft);
}
.user-chip span{ font-size:13.5px; font-weight:600; }

/* ---------- CONTENT / PAGE TRANSITIONS ---------- */
#main-content{ padding:30px 32px; flex:1; }
#main-content.loading{ opacity:0.4; pointer-events:none; transition:opacity .15s ease; }
.page-fade{ animation:pageIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

.page-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.page-head h1{ font-family:var(--ff-display); font-size:22px; font-weight:600; letter-spacing:-0.01em; }
.page-head .sub{ font-size:13px; color:var(--ink-400); margin-top:3px; }

/* ---------- KPI CARDS ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:20px; }
.kpi-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  padding:20px 22px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(10px);
  animation:cardIn .5s cubic-bezier(.2,.8,.2,1) forwards;
  transition:box-shadow .22s ease, transform .22s ease, background .25s ease, border-color .25s ease;
}
.kpi-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2.5px;
  background:linear-gradient(90deg, var(--brand), var(--brand-light), transparent);
  opacity:0; transition:opacity .22s ease;
}
.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.kpi-card:hover::before{ opacity:1; }
.kpi-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background-image:radial-gradient(circle, var(--bg) 1.6px, transparent 1.6px);
  background-size:10px 3px; background-position:0 0;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }
.kpi-top{ margin-bottom:14px; }
.kpi-title{ font-size:13.5px; font-weight:600; color:var(--ink-700); }
.kpi-title .period{ font-weight:400; color:var(--ink-400); font-size:12px; margin-left:4px; }
.kpi-body{ display:flex; align-items:center; gap:14px; }
.kpi-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-icon svg{ width:22px; height:22px; }
.kpi-icon.brand{ background:rgba(219,84,31,0.10); color:var(--brand); }
.kpi-icon.green{ background:rgba(62,143,109,0.12); color:var(--green); }
.kpi-icon.gray{ background:rgba(140,140,140,0.14); color:var(--gray-600); }
.kpi-value{ font-family:var(--ff-mono); font-size:25px; font-weight:500; letter-spacing:-0.01em; }
.kpi-delta{ font-size:12.5px; margin-top:2px; }
.kpi-delta.up{ color:var(--green); }
.kpi-delta.down{ color:var(--rust); }

/* ---------- GRID / PANELS ---------- */
.grid{ display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start; }
.panel{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  padding:22px 24px; margin-bottom:18px;
  opacity:0; transform:translateY(10px);
  animation:cardIn .5s cubic-bezier(.2,.8,.2,1) forwards;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.panel-head h3{ font-family:var(--ff-display); font-size:15.5px; font-weight:600; letter-spacing:-0.005em; }
.panel-head .period{ font-size:12px; color:var(--ink-400); }

/* bar chart */
.bars{ display:flex; align-items:flex-end; gap:12px; height:140px; }
.bar{
  flex:1; background:linear-gradient(180deg, var(--brand), var(--brand-dark));
  border-radius:7px 7px 3px 3px; height:0%;
  transition:height 1s cubic-bezier(.2,.8,.2,1), opacity .2s ease; position:relative;
  opacity:0.92;
}
.bar:hover{ opacity:1; }
.bar span{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:6px;
  font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-600); white-space:nowrap;
}
.bar-labels{ display:flex; gap:12px; margin-top:8px; }
.bar-labels span{ flex:1; text-align:center; font-size:11px; color:var(--ink-400); }

/* table */
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-400); font-weight:700; padding:0 12px 11px; border-bottom:1px solid var(--border-soft);
}
.table td{ padding:12px; border-bottom:1px solid var(--border-soft); color:var(--ink-700); }
.table tr:last-child td{ border-bottom:0; }
.table tbody tr{ transition:background .15s ease; }
.table tbody tr:hover{ background:var(--surface-alt); }
.table tbody tr:hover td:first-child{ border-radius:8px 0 0 8px; }
.table tbody tr:hover td:last-child{ border-radius:0 8px 8px 0; }
.pill{ display:inline-block; padding:3.5px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.01em; }
.pill.paid{ background:rgba(62,143,109,0.12); color:var(--green); }
.pill.due{ background:rgba(217,150,47,0.16); color:var(--amber); }
.pill.overdue{ background:rgba(192,67,43,0.12); color:var(--rust); }

/* material-flow list */
.flow-list{ position:relative; padding-left:22px; }
.flow-list::before{
  content:''; position:absolute; left:5px; top:4px; bottom:4px; width:1px;
  background:repeating-linear-gradient(180deg, var(--border-soft) 0 6px, transparent 6px 12px);
}
.flow-item{ position:relative; padding-bottom:20px; }
.flow-item:last-child{ padding-bottom:0; }
.flow-item::before{ content:''; position:absolute; left:-22px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--ink-400); box-shadow:0 0 0 3px var(--surface); }
.flow-item.now::before{ background:var(--brand); box-shadow:0 0 0 5px rgba(219,84,31,0.16); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 5px rgba(219,84,31,0.16);} 50%{ box-shadow:0 0 0 9px rgba(219,84,31,0.05);} }
.flow-time{ font-family:var(--ff-mono); font-size:11px; color:var(--ink-400); }
.flow-text{ font-size:13.3px; color:var(--ink-700); margin-top:1px; }
.flow-text b{ color:var(--ink-900); }

.empty-state{ text-align:center; padding:26px 10px; color:var(--ink-400); font-size:13px; }

/* buttons (shared) */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:0; border-radius:var(--radius-sm);
  padding:10px 17px; font-weight:600; font-size:13.5px; cursor:pointer;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn-brand{ background:var(--brand); color:#fff; box-shadow:0 8px 20px -8px rgba(219,84,31,0.55); text-decoration:none;}
.btn-brand:hover{ background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(219,84,31,0.6); text-decoration:none;}
.btn-ghost{ background:var(--surface-alt); color:var(--ink-700); border:1px solid var(--border-soft); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }

/* footer */
.app-footer{
  padding:16px 30px; border-top:1px solid var(--border-soft); background:rgba(255,255,255,0.7); backdrop-filter:blur(8px);
  font-size:12px; color:var(--ink-400); display:flex; justify-content:space-between; align-items:center;
}
[data-theme="dark"] .app-footer{ background:rgba(28,32,36,0.7); }
.app-footer b{ color:var(--ink-600); }

/* ---------- FORM FIELDS (shared — used by any panel form: employee form,
   future create/edit forms, etc. Login page keeps its own copy inline
   since it renders standalone before core.css context, but the two should
   stay visually identical.) ---------- */
.field{ margin-bottom:18px; position:relative; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-700); margin-bottom:6px; }
.field label .req{ color:var(--rust); }
.input-shell{
  display:flex; align-items:stretch; border:1.5px solid var(--border-soft); border-radius:var(--radius-sm);
  background:var(--surface-alt); overflow:hidden; position:relative;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-shell:focus-within{ border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(219,84,31,0.10); }
.input-shell.ok{ border-color:var(--green); }
.input-shell.bad{ border-color:var(--rust); animation:shellShake .32s ease; }
@keyframes shellShake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.icon-slot{
  width:44px; display:flex; align-items:center; justify-content:center; color:var(--ink-400);
  border-right:1px solid var(--border-soft); background:var(--surface-alt); flex-shrink:0;
}
.input-shell:focus-within .icon-slot{ color:var(--brand); }
.icon-slot svg{ width:18px; height:18px; }
.input-shell input,
.input-shell select,
.input-shell textarea{
  border:0; outline:0; background:transparent; flex:1; min-width:0;
  padding:11px 13px; font-family:var(--ff-body); font-size:13.8px; color:var(--ink-900);
}
.input-shell select{
  padding-right:34px; appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8C8C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px;
}
.input-shell textarea{ resize:vertical; }
.icon-btn-inline{ width:44px; border:0; background:transparent; cursor:pointer; color:var(--ink-400); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-btn-inline:hover{ color:var(--brand); }
.icon-btn-inline svg{ width:18px; height:18px; transition:transform .25s ease; }
.field-note{ font-size:11.5px; color:var(--rust); margin-top:6px; }

@media (max-width:1080px){
  .grid{ grid-template-columns:1fr; }
  .kpi-row{ grid-template-columns:1fr; }
}


input, select, textarea {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #db541f;
    width: 100%;
    margin-bottom: 8px;
    margin-top: 4px;
}