/* ============================================================
   TaskFlow — app-only additions on top of the mockup stylesheet
   ============================================================ */

/* flash / alert banners */
.alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.alert.success { background: var(--st-completed-bg); color: var(--st-completed); border-color: #bbf7d0; }
.alert.error   { background: var(--st-overdue-bg);  color: var(--st-overdue);  border-color: #fecaca; }
.alert.info    { background: var(--st-progress-bg); color: var(--st-progress); border-color: #bfdbfe; }

/* inline form error under inputs / login */
.field-error { color: var(--st-overdue); font-size: 16px; margin-top: 6px; }

/* empty-state row inside tables/cards */
.empty-row { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 16px; }

/* make whole stat/quick links keyboard friendly */
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- pagination ---- */
.pager { display: flex; gap: 6px; justify-content: flex-end; align-items: center; padding: 14px 20px; flex-wrap: wrap; border-top: 1px solid var(--border); }
.pg { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
      color: var(--text-soft); background: var(--surface); cursor: pointer; }
.pg:hover { background: var(--bg); }
.pg.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pg.disabled { opacity: .45; pointer-events: none; }

/* serial number on employee task cards */
.task-sn { color: var(--muted); font-weight: 700; min-width: 22px; text-align: right; padding-top: 1px; }

/* ---- department checkbox group (add/edit manager) ---- */
.dept-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 4px 0; }
.dept-check { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; }
.dept-check input { width: 16px; height: 16px; cursor: pointer; }

/* ---- task detail modal: details (left) + comments (right) ---- */
.modal.taskmodal { max-width: 900px; }
.task-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.task-right { display: flex; flex-direction: column; border-left: 1px solid var(--border); padding-left: 24px; min-width: 0; }
.task-thread { flex: 1; overflow-y: auto; max-height: 360px; padding-right: 6px; margin-bottom: 12px; }
.task-thread .comment:first-child { padding-top: 0; }
.comment-box { display: flex; gap: 10px; align-items: flex-start; }
.comment-box textarea.input { min-height: 44px; resize: vertical; }
@media (max-width: 760px) {
  .task-split { grid-template-columns: 1fr; gap: 18px; }
  .task-right { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
}

/* ============================================================
   HERTES BRAND THEME — overrides the mockup's indigo palette.
   Colors sampled from the Hertes logo (hertes.co.in): natural
   greens. Loaded after style.css, so these declarations win.
   ============================================================ */
:root {
  --brand:     #4a7a23;   /* Hertes leaf green */
  --brand-600: #3a6019;   /* darker hover */
  --brand-50:  #eef4e3;   /* light tint (focus rings) */
}

/* forest-green sidebar — lighter, fresher green (was near-black) */
.sidebar { background: #3d7a33; }
.nav a            { color: #eaf3e1; }
.nav .group-label { color: #c4dab4; }
.nav a:hover      { background: rgba(255,255,255,.12); }
.nav a.active     { background: #2c5a24; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.side-user        { border-top-color: rgba(255,255,255,.15); }
.side-user .meta span { color: rgba(255,255,255,.78); }
.brand            { border-bottom-color: rgba(255,255,255,.15); }
.btn.primary      { box-shadow: 0 4px 12px rgba(74,122,35,.30); }
.progress > i     { background: linear-gradient(90deg, var(--brand), #84bf3e); }

/* ---- typography: one consistent font + larger, readable sizes ---- */
/* buttons & form controls don't inherit font-family by default — this fixes the "two fonts" look */
body, button, input, select, textarea, .btn {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
/* All sizes are EVEN and never below 16px (16/18/20/24/32). */
body { font-size: 16px; }
.topbar h1 { font-size: 24px; }
.topbar h1 small { font-size: 16px; }
.nav a { font-size: 16px; }
.nav .group-label { font-size: 16px; }
.card-head h3 { font-size: 18px; }
thead th { font-size: 16px; }
tbody td { font-size: 16px; }
.cell-main { font-size: 16px; }
.cell-sub { font-size: 16px; }
.badge { font-size: 16px; }
/* Fix: the "In Progress" badge uses class .progress, which clashed with the
   progress-bar rule (.progress { height:8px; overflow:hidden }) and clipped the text. */
.badge.progress { height: auto; overflow: visible; }
.prio { font-size: 16px; }
.btn { font-size: 16px; }
.btn.sm { font-size: 16px; }
label.lbl { font-size: 16px; }
.input, .select, textarea.input { font-size: 16px; }
.stat .label { font-size: 16px; }
.stat .value { font-size: 32px; }
.kv { font-size: 16px; }
.kv span, .kv b { font-size: 16px; }
.task-title { font-size: 18px; }
.task-desc { font-size: 16px; }
.task-meta { font-size: 16px; }
.side-user .meta b { font-size: 16px; }
.side-user .meta span { font-size: 16px; }
.comment .body .who { font-size: 16px; }
.comment .body .when { font-size: 16px; }
.comment .body .text { font-size: 16px; }
.modal-head h3 { font-size: 20px; }
.role-banner { font-size: 16px; }
.hint { font-size: 16px; }
.alert { font-size: 16px; }
.empty-row { font-size: 16px; }
.field-error { font-size: 16px; }

/* sidebar brand → Hertes logo on a white chip */
.brand { flex-direction: column; align-items: stretch; gap: 10px; }
.brand .logo-chip {
  background: #fff; border-radius: 12px; padding: 9px 12px;
  display: flex; align-items: center; justify-content: center;
}
.brand .logo-chip img { height: 34px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.brand .workspace {
  font-size: 16px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.78); font-weight: 700; padding-left: 2px;
}

/* keep the name from pushing the logout button off-screen */
.side-user .meta { flex: 1; min-width: 0; }
/* clearly visible logout button on the green sidebar */
.side-user .logout {
  margin-left: auto; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px;
}
.side-user .logout:hover { background: rgba(255,255,255,.28); color: #fff; }