:root{
  --coffee:#6f4e37; --coffee-dark:#5a3f2c; --coffee-light:#8a6a52;
  --bg:#f6f5f3; --panel:#ffffff; --ink:#26211d; --muted:#8a827a;
  --line:#e7e3de; --ok:#2e7d52; --ok-bg:#e6f4ec; --err:#b3261e; --err-bg:#fbe9e7;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--coffee)}
.muted{color:var(--muted)}
code{background:#f0ede9;padding:2px 6px;border-radius:6px;font-size:.85em}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:250px;background:#2b2320;color:#e9e2da;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{font-weight:800;letter-spacing:1px;font-size:20px;color:#fff}
.brand-mark.lg{font-size:34px}
.brand-sub{display:block;font-size:12px;color:#b7aca1;margin-top:2px}
.nav{padding:10px 0}
.nav-header{padding:14px 18px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9a8d80}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;color:#ddd3c9;text-decoration:none;cursor:pointer;font-size:13.5px}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:var(--coffee);color:#fff}
.nav-parent{color:#cdbfb2;font-weight:600}
.nav-children{display:flex;flex-direction:column}
.nav-child{padding:7px 18px 7px 40px;color:#c3b8ac;text-decoration:none;font-size:13px}
.nav-child:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-child.active{color:#fff;border-left:3px solid var(--coffee);background:rgba(255,255,255,.04)}
.soon{margin-left:auto;font-size:10px;background:#4a3f38;color:#c9bdb0;padding:1px 6px;border-radius:20px}
.ico{width:8px;height:8px;border-radius:2px;background:#8a6a52;display:inline-block;flex-shrink:0}

/* The sidebar carries the whole legacy menu (~60 rows for an admin), so every sub-menu is a native
   <details> disclosure (see views/layout.ejs): the server renders only the group of the current
   screen open, the layout script remembers what the user opened, and the filter box narrows the
   menu down to the matching items. */
.nav-tools{padding:10px 14px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-filter{width:100%;box-sizing:border-box;background:#3a322c;border:1px solid rgba(255,255,255,.14);border-radius:6px;color:#e9e2da;font:inherit;font-size:12.5px;padding:6px 9px}
.nav-filter::placeholder{color:#9a8d80}
.nav-filter:focus{outline:none;border-color:var(--coffee)}
.nav-tools button{display:block;background:none;border:0;padding:7px 0 0;color:#9a8d80;font:inherit;font-size:11.5px;cursor:pointer}
.nav-tools button:hover{color:#fff;text-decoration:underline}
.nav-group{display:block}
.nav-group>summary{list-style:none;padding:8px 18px}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after{content:'\25BE';margin-left:auto;font-size:10px;color:#9a8d80}
.nav-group:not([open])>summary::after{content:'\25B8'}
.nav-group.active-group>summary{color:#fff}
.nav-empty{padding:10px 18px;font-size:12.5px;color:#9a8d80}
.nav-hidden{display:none}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.menu-toggle{display:none;background:none;border:none;font-size:20px;cursor:pointer}
.spacer{flex:1}
.user{display:flex;align-items:center;gap:12px}
.user-name{font-weight:600}
.user-roles{font-size:12px;color:var(--muted);background:#f0ede9;padding:2px 8px;border-radius:20px}
/* The content column uses the whole window. It used to stop at 1400px, which left a wide empty strip
   on the right of every screen while the wide lists were clipped at their card's edge (the owner's
   screenshot of "List of Employees", 2026-09-16 — see §20). */
.content{padding:24px;width:100%}

/* Bits */
.page-head{margin-bottom:18px}
.page-head h1{margin:.2em 0;font-size:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
/* no-pad cards hold the data tables. overflow-x (not hidden): the legacy lists carry up to 14
   columns and are wider than the window at 100% zoom, so the card scrolls sideways rather than
   cropping the right-hand columns (the Actions / Remove buttons used to disappear).
   Inside the card the cells themselves may fold a long token (an e-mail address, a name without a
   space) and the card tightens its side padding a little, so a normal list *fits* the card instead of
   pushing its last columns out of sight behind the card's scroll bar — which sits under the last row
   of a 20-row page and was easy to miss (§20). `min-width` is the floor below which the card scrolls
   sideways instead of squeezing the text into unreadable columns (mobile / a narrow window). */
.card.no-pad{padding:0;overflow-x:auto}
.card.no-pad .table{min-width:1020px}
.card.no-pad .table th,.card.no-pad .table td{padding-left:10px;padding-right:10px;overflow-wrap:break-word;overflow-wrap:anywhere}
.card h2{margin:.1em 0 .6em;font-size:16px}
.stat{text-align:center}
.stat-num{font-size:28px;font-weight:800;color:var(--coffee)}
.stat-label{font-size:12px;color:var(--muted);margin-top:2px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#faf9f7}
.table tbody tr:hover{background:#faf8f6}
.empty{text-align:center;color:var(--muted);padding:30px}
.tag{font-size:11px;padding:2px 9px;border-radius:20px;background:#eee;color:#666}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.link{color:var(--coffee);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}
/* Inline write actions: the row buttons of the original screens are rendered as forms so the
   Remove / Reset / Activate / Capture actions really post, but they keep the link look. */
form.inline-action{display:inline}
form.inline-action button.link{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;cursor:pointer}
tr.row-select{cursor:pointer}
tr.row-select.selected,tr.row-select:hover{background:#f6f2ea}
.neg{color:var(--err)}
.chk-inline{font-size:13px;color:var(--muted);align-self:center}
.tabs{display:flex;gap:6px;margin:16px 0 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{padding:9px 16px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;background:#faf9f7;cursor:pointer;font-size:13.5px}
.tab.active{background:#fff;font-weight:600;color:var(--coffee)}
.tab-pane{display:none;padding:18px 0}
.tab-pane.active{display:block}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:6px 16px 14px;margin:0 0 16px}
legend{font-weight:700;color:var(--coffee);padding:0 6px;font-size:14px}
.content-title{font-size:15px;font-weight:600;margin:14px 0 8px}

.info-table{width:100%;border-collapse:collapse}
.info-table th,.info-table td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:13.5px}
.info-table th{background:#faf9f7;color:var(--muted);font-weight:600;width:16%;white-space:nowrap}
.section-head{font-size:16px;margin:22px 0 10px}
.nowrap{white-space:nowrap}
/* Row-action cells (the last column of every list): the original prints several links / small
   forms side by side (Register for Training · Update · Remove, Reset · Activate, Time-In ·
   Time-Out · Transfer). Letting them wrap onto a second line keeps the whole cell inside the card
   instead of widening the table — with a gap so two actions sharing a line stay apart. */
.table th.actions,.table td.actions{white-space:normal}
.table td.actions a,.table td.actions form.inline-action,.table td.actions .inline-action{margin-right:14px}
.table td.actions a:last-child,.table td.actions form.inline-action:last-child{margin-right:0}
.form-table{width:100%;border-collapse:collapse}
.form-table th,.form-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:13.5px}
.form-table th{background:#faf9f7;color:var(--muted);font-weight:600;width:220px;white-space:nowrap}
.form-table input[type=text],.form-table select{max-width:420px}
.form-table input.wide{max-width:560px}
.form-table select.cc{width:auto;max-width:110px;margin-right:8px}
.form-table textarea{width:100%;max-width:560px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
.edit-form{padding:0;overflow:hidden}
.chk{display:block;margin:3px 0;font-weight:500;color:var(--ink)}
.chk input{margin-right:7px}
select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
.form-actions{padding:16px;display:flex;gap:10px;border-top:1px solid var(--line);background:#faf9f7}
.fields{display:grid;grid-template-columns:130px 1fr;gap:6px 14px;margin:0}
.fields dt{color:var(--muted)}
.fields dd{margin:0;font-weight:500}

/* Forms */
.toolbar{display:flex;gap:8px;margin-bottom:14px}
.search{flex:1;max-width:380px}
input[type=text],input[type=password]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
input:focus{outline:none;border-color:var(--coffee);box-shadow:0 0 0 3px rgba(111,78,55,.12)}
.btn{display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;background:#eee;color:#333}
.btn-primary{background:var(--coffee);color:#fff}
.btn-primary:hover{background:var(--coffee-dark)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:#f0ede9}
.btn-block{width:100%}
.btn-sm{padding:5px 10px;font-size:12.5px}
.pager{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:16px}

/* Flash */
.flash{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:13.5px}
.flash-error{background:var(--err-bg);color:var(--err)}
.flash-ok{background:var(--ok-bg);color:var(--ok)}

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#3a2c22,#6f4e37)}
.login-card{background:#fff;padding:36px 32px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:360px}
.login-brand{text-align:center;margin-bottom:22px}
.login-brand .brand-mark{color:var(--coffee)}
.login-brand .brand-sub{color:var(--muted)}
.login-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
.login-form input{margin-top:4px}
.login-form .btn{margin-top:6px}
.login-foot{text-align:center;font-size:12px;color:var(--muted);margin-top:16px;margin-bottom:0}

/* Responsive */
@media(max-width:820px){
  .sidebar{position:fixed;left:-260px;transition:left .2s;z-index:20}
  .sidebar.open{left:0}
  .menu-toggle{display:block}
  .grid-2{grid-template-columns:1fr}
}

/* Report hub cards, calendar grid and misc bits added with the remaining modules. */

/* Added with the remaining modules: report hub cards + the course calendar grid. */
.link-card{display:block;text-decoration:none;color:inherit;padding:14px 16px}
.link-card:hover{border-color:#b9c6bb}
.link-card-title{font-weight:600;margin-bottom:4px}
.calendar th{width:14.2%}
.calendar td{vertical-align:top;height:96px}
.cal-day{font-weight:600;color:#4b5b4e;margin-bottom:4px}
.cal-ev{font-size:12px;line-height:1.35;margin-bottom:3px}

/* Employee CSV upload screens (Upload Employee / Daily Update / Resign Update). */
.csv-cols{margin:0;padding-left:20px;font-size:13px;color:#4b5b4e;columns:3;column-gap:24px}
.csv-cols li{margin-bottom:2px;break-inside:avoid}
@media(max-width:820px){.csv-cols{columns:1}}
/* The template download that sits under the layout list (Upload Employee / Daily Update / Resign Update). */
.csv-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}

/* Report output (the printed JasperReports layout reproduced on screen). */
.report-paper{overflow-x:auto}
.report-title{text-align:center;font-weight:700;letter-spacing:.5px;font-size:16px;margin-bottom:14px}
.report-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 24px;font-size:13px;margin-bottom:12px}
.report-param .report-lbl{display:inline-block;min-width:120px;color:#4b5b4e;font-weight:600}
.report-dept{font-weight:600}
.report-table-wrap{overflow-x:auto}
.report-table{font-size:12px;min-width:640px}
.report-table th{border:1px solid #d9d2c7;background:#f6f2ec;text-align:center;vertical-align:middle;white-space:nowrap}
.report-table td{border:1px solid #e6e0d6;white-space:nowrap;padding:4px 6px}
.report-legend{margin-top:14px;font-size:12px;color:#4b5b4e}
.report-legend-head{font-weight:600;margin-bottom:4px}
.report-legend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media print{
  .sidebar,.topbar,.toolbar,.page-head,.flash{display:none}
  .report-paper{border:0;box-shadow:none}
}

/* Signature capture (the canvas pad of signature/SignaturePad.jsp and the screens that use it). */
.signature-block{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.signature-preview{min-width:150px}
.signature-preview img{border:1px solid #d9d2c7;background:#fff}
.signature-pad{width:240px;height:120px;border:1px solid #bdb4a6;background:#fff}
.signature-pad canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.signature-actions{margin-top:6px;font-size:13px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.signature-actions label{display:inline-flex;gap:6px;align-items:center}
.signature-status{font-size:12px;color:#4b5b4e}
.signature-status.ok{color:#1b5e20}
.signature-status.err{color:#b3261e}