/* =========================
   Theme & Reset-ish
========================= */
:root{
  --bg: #f3f6f9;
  --card: #ffffff;
  --muted: #7b8794;
  --border: #e3e8ee;
  --accent-700:#0f6fad;
  --accent-600:#117bbf;
  --accent-500:#1da1e4;
  --accent-100:#cfeefe;
  --btn:#e6f3ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:#111827;
}

/* =========================
   Topbar
========================= */
.topbar{
  display:flex; align-items:center; gap:24px;
  padding:10px 16px; background:#0c6aa8; color:#fff;
}
.brand{display:flex;align-items:center}
.brand-logo{ max-height:50px; width:auto; display:block }

.main-nav{ display:flex; gap:24px; flex:1 }

/* Quick Create menu */
.qc-wrap{ position:relative; }
.qc-panel{
  position:absolute;
  top:100%;            /* below the + button */
  right:0;
  min-width: 220px;
  padding:8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(16,24,40,.16);
  display:none;
  z-index: 2000;
}
.qc-panel.show{ display:block; }

.qc-panel a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:8px;
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
}
.qc-panel a:hover{ background:#f3f6f9; }
.qc-panel a i{ width:18px; text-align:center; }


/* Underline-style active state */
.main-nav a{
  color:#d8efff; text-decoration:none; font-weight:600;
  padding:14px 8px; border-radius:0; position:relative;
  display:flex; align-items:center; height:100%;
}
.main-nav a:hover{color:#fff}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:0; background:transparent; border-radius:2px 2px 0 0;
  transition:height .18s ease, background-color .18s ease;
}
.main-nav a.active{ color:#fff }
.main-nav a.active::after{
  content:""; position:absolute; bottom:-10px; left:0; width:100%;
  height:6px; background:#d8efff; border-radius:2px 2px 0 0;
}

.actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  font-size:16px; line-height:1; border:none; background:transparent;
  color:#e6f3ff; cursor:pointer; padding:8px 10px; border-radius:6px;
}
.icon-btn:hover{ background:#0a5f98 }
.icon-btn i{ font-size:16px }
.avatar{ width:36px; height:36px; border-radius:999px; background:#8cc9ef }

/* User avatar + menu (topbar, matches qc-panel style) */
.user-wrap { position:relative; }

.avatar-btn{
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; border:none; cursor:pointer;
  background:#8cc9ef; color:#0c5e97; font-weight:800; font-size:13px;
}
.avatar-btn:hover{ filter:brightness(.95) }
.avatar-btn:focus-visible{ outline:2px solid var(--accent-500); outline-offset:2px }

.user-panel{ min-width: 280px; padding:8px }
.user-card{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-bottom:1px solid var(--border); margin-bottom:6px;
}
.user-badge{
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; font-weight:900;
  background:#eef6ff; color:#1b86cc;
}
.user-about{ line-height:1.2 }
.user-name{ font-weight:800 }
.user-meta{ font-size:12px; color:#6b7280 }
.user-panel .linklike{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px; border:none; background:transparent; cursor:pointer;
  border-radius:8px; font-weight:600; color:#0f172a;
}
.user-panel .linklike:hover{ background:#f3f6f9 }
.user-panel [role="menuitem"] i{ width:18px; text-align:center; }

/* Ensure user card text is always visible */
.user-panel .user-card {
  background:#fff;   /* keep white panel background */
  color:#0f172a;     /* force dark text */
}

.user-panel .user-name {
  color:#0f172a;     /* override any white link styles */
  font-weight:800;
}

.user-panel .user-meta {
  color:#6b7280;
}

/* Sign Out styling (red) */
.user-panel #signOutBtn {
  color: #dc2626; /* red text */
  font-weight: 700;
}
.user-panel #signOutBtn i {
  color: #dc2626; /* red icon */
}
.user-panel #signOutBtn:hover {
  background: #dc2626; /* red background */
  color: #fff;         /* white text */
}
.user-panel #signOutBtn:hover i {
  color: #fff;         /* white icon */
}


/* =========================
   Layout & Cards
========================= */
.content{ padding:24px 28px 56px }  /* page gutters */

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.span-2{ grid-column:span 2 }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
  overflow:hidden;
}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border);
}
.card-header h2{ font-size:18px; margin:0; font-weight:700 }
.pad{ padding:20px }

/* =========================
   Buttons
========================= */
.btn{
  border-radius:8px; padding:10px 14px; font-weight:700;
  border:1px solid var(--accent-600); background:var(--btn);
  color:var(--accent-700); cursor:pointer;
}
.btn.primary{ background:#1fa1e6; color:#fff; border-color:#1b97da }
.btn.outline{ background:#fff; color:#1b86cc; border-color:#b9e1ff }
.btn:hover{ filter:brightness(.98) }
.btn.outline:hover{ background:#f6fbff }

/* Focus rings (accessibility) */
.main-nav a:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.action-btn:focus-visible,
.input-wrap input[type="search"]:focus-visible{
  outline:2px solid var(--accent-500);
  outline-offset:2px;
  border-color:var(--accent-500);
}

/* =========================
   Chart (dashboard)
========================= */
.chart-wrap{ padding:8px 16px 12px }
#balanceChart{ width:100%; height:160px; background:#e7f4ff; border-radius:8px }
.chart-xlabels{
  display:flex; justify-content:space-between;
  padding:8px 4px 2px; color:#6b7280; font-size:12px;
}

/* =========================
   Generic Table (legacy)
========================= */
.table{ padding:6px 12px 14px }
.table .row{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; padding:10px 6px; border-bottom:1px dashed var(--border) }
.table .row.head{ font-weight:600; color:#6b7280; border-bottom:1px solid var(--border) }
.like-skeleton .bar{ height:12px; background:#e9eef5; border-radius:8px; margin:6px 0 }
.like-skeleton .bar.short{ width:140px }
.like-skeleton .bar.tiny{ width:80px }

/* =========================
   Footer
========================= */
.site-footer{
  background:var(--bg); color:#bec9d3; font-size:14px;
  border-top:1px solid var(--border); padding:20px 0;
}
.footer-top{
  max-width:1200px; margin:0 auto; padding:0 20px 10px;
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
}
.footer-logo{ max-height:32px; width:auto; display:block; opacity:.95 }
.footer-links{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap }
.footer-links a{ color:#bec9d3; text-decoration:none; font-weight:500 }
.footer-links span{ color:#bec9d3 }
.footer-links a:hover{ text-decoration:underline }
.footer-social{ display:flex; gap:16px; justify-content:flex-end }
.footer-social a{ color:#bec9d3; font-size:16px; text-decoration:none }
.footer-social a:hover{ opacity:.8 }
.footer-middle{ max-width:1200px; margin:0 auto; padding:8px 20px; font-size:13px }
.footer-bottom{
  max-width:1200px; margin:0 auto; padding:8px 20px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; font-size:12px;
}
.footer-bottom a{ color:#bec9d3; text-decoration:underline }
.footer-bottom .powered{ margin-left:auto }
.footer-bottom strong{ color:#bec9d3 }

@media (max-width:800px){
  .footer-top{ grid-template-columns:1fr; text-align:center }
  .footer-social{ justify-content:center }
  .footer-bottom{ flex-direction:column; text-align:center; gap:6px }
}

/* =========================
   Toasts
========================= */
.toast-container{
  position:fixed; top:16px; right:16px;
  display:flex; flex-direction:column; gap:12px; z-index:9999;
}
.toast{
  min-width:300px; max-width:420px; border-radius:10px;
  padding:14px 44px 14px 14px; color:#fff;
  box-shadow:0 10px 24px rgba(16,24,40,.18);
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.18);
  font:600 15px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.toast .title{ font-weight:800; margin-right:6px }
.toast .msg{ font-weight:500 }
.toast a{ color:#fff; text-decoration:underline }
.toast .icon{ margin-right:10px; font-size:18px; line-height:1 }
.toast .close{
  position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:6px;
  display:grid; place-items:center; color:#fff; opacity:.9; cursor:pointer; border:none; background:transparent;
}
.toast .close:hover{ background:rgba(0,0,0,.12) }
.toast .progress{ position:absolute; left:0; bottom:0; height:6px; width:100%; background:rgba(0,0,0,.15) }
.toast .progress > i{ display:block; height:100%; width:100%; transform-origin:left center; animation:toast-progress linear forwards }
.toast.success{ background:#16a34a }
.toast.info{ background:#2563eb }
.toast.warning{ background:#f59e0b }
.toast.danger{ background:#dc2626 }
.toast.success .progress > i,
.toast.info .progress > i,
.toast.warning .progress > i,
.toast.danger .progress > i{ background:rgba(255,255,255,.65) }

@keyframes toast-in{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }
@keyframes toast-out{ to{opacity:0; transform:translateY(-8px)} }
@keyframes toast-progress{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* =========================
   Staff Page
========================= */
/* Two-column layout with inner padding (gutters) */
.grid-staff{
  display:grid;
  grid-template-columns: 3fr 1.2fr;
  align-items:start;
  padding:8px 8px 0;
  gap:22px;
}

/* Staff table columns */
.staff-table .row{
  display:grid;
  grid-template-columns: 52px 1fr 1fr 1fr 1fr 160px;
  align-items:center;
}
.staff-table .row.head{ font-weight:700 }
.staff-table .col-ck{ display:flex; justify-content:center }
.staff-table .col-actions{ text-align:right }

.action-btn{
  width:28px; height:28px; display:inline-grid; place-items:center;
  border:1px solid var(--border); border-radius:6px; background:#fff;
  margin-left:6px; cursor:pointer;
}
.action-btn:hover{ background:#f6f9fc }
.action-btn.is-disabled, [disabled]{ opacity:.4; pointer-events:none; cursor:not-allowed }

/* Search */
.input-wrap input[type="search"]{
  width:260px; padding:8px 10px; border:1px solid var(--border);
  border-radius:8px; background:#fff; outline:none;
}

/* Stats card */
.stats-card .kpis{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:10px;
}
.kpi{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px; text-align:center }
.kpi-label{ font-size:12px; color:#6b7280 }
.kpi-value{ font-size:22px; font-weight:800 }
.stats-subtitle{ font-size:14px; margin:16px 0 8px }
.dept-bars{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.dept-bars li{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center }
.dept-bars .bar{ grid-column:1 / span 2; height:8px; background:#e8f3ff; border-radius:6px; overflow:hidden }
.dept-bars .bar i{ display:block; height:100%; background:var(--accent-500); width:0%; transition:width .25s ease }
.dept-bars .meta{ font-size:12px; color:#6b7280 }
.role-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px }
.role-list li{ display:flex; justify-content:space-between }
.role-list .count{ color:#6b7280 }

/* Modal (view employee) */
.modal{ position:fixed; inset:0; display:none; z-index:10000 }
.modal[aria-hidden="false"]{ display:block }
.modal__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.35) }
.modal__dialog{
  position:relative; margin:6vh auto 0; max-width:560px; background:#fff;
  border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 48px rgba(16,24,40,.18);
}
.modal__header,.modal__footer{ padding:14px 16px; border-bottom:1px solid var(--border) }
.modal__footer{ border-top:1px solid var(--border); border-bottom:none; display:flex; gap:10px; justify-content:flex-end }
.modal__body{ padding:16px }
.modal__close{ position:absolute; right:10px; top:10px; border:none; background:transparent; font-size:22px; cursor:pointer }
.modal dl{ display:grid; grid-template-columns:140px 1fr; gap:8px 12px; margin:0 }
.modal dt{ color:#6b7280 }
.modal dd{ margin:0 }

/* Staff table columns NOW include Employee # (7 cols total) */
.staff-table .row{
  display:grid;
  grid-template-columns: 52px 120px 1fr 1fr 1fr 1fr 160px; /* ck | Emp# | First | Last | Role | Dept | Actions */
  align-items:center;
}

/* Header sort buttons */
.col-sort{ display:flex; align-items:center; }
.th-sort{
  appearance:none; border:none; background:transparent; padding:0;
  font:inherit; font-weight:700; color:#374151; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.th-sort:focus-visible{
  outline:2px solid var(--accent-500);
  outline-offset:2px; border-radius:4px;
}
.th-sort .fa-sort-up, .th-sort .fa-sort-down{ color:#0c6aa8; }


/* =========================
   Responsive
========================= */
@media (max-width:1100px){
  .content{ padding:18px 16px 44px }
  .grid-staff{ grid-template-columns:1fr; padding:0; gap:16px }
  .input-wrap input[type="search"]{ width:100% }
}
@media (max-width:1000px){
  .grid{ grid-template-columns:1fr }
  .span-2{ grid-column:span 1 }
  .main-nav{ display:none }
}
@media (max-width:600px){
  .toast-container{ left:12px; right:12px }
  .toast{ min-width:auto; width:100% }
}

/* Reduced motion preference */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}