/* =====================================================================
   Timeclock Admin Portal – Sleek Minimal Redesign
   Focus: clarity, spacing discipline, accessible contrast.
   (All legacy complexity removed; class hooks preserved.)
===================================================================== */

/* Compact design tokens (scoped) */
:root {
  --adm-gap-1:4px; --adm-gap-2:8px; --adm-gap-3:14px; --adm-gap-4:24px;
  --adm-radius-sm:4px; --adm-radius:8px; --adm-radius-lg:12px;
  --adm-border:1px solid rgba(255,255,255,0.07);
  --adm-border-soft:1px solid rgba(255,255,255,0.04);
  --adm-focus:0 0 0 2px rgba(30,144,255,.55);
  --adm-bg-panel:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.015));
  --adm-bg-panel-alt:rgba(255,255,255,0.03);
  --adm-fs-xs:11.5px; --adm-fs-sm:13px; --adm-fs:14px;
  --adm-muted-heading:#cbd3e6;
}

html { scroll-behavior:smooth; }

/* ---------- Layout Shell ---------- */
.admin-shell { display:flex; gap:40px; align-items:flex-start; }
.admin-shell > .admin-nav + .admin-workspace { max-width:1180px; }
.admin-workspace { flex:1; min-width:0; }

/* ---------- Side Nav ---------- */
.admin-nav { width:200px; flex:0 0 200px; position:sticky; top:14px; background:var(--card); padding:18px 16px; border-radius:var(--adm-radius); border:var(--adm-border-soft); box-shadow:0 4px 22px -6px rgba(0,0,0,0.55); }
.admin-nav-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.admin-nav-list a { --_bg:rgba(255,255,255,0.03); display:block; padding:10px 12px; font-size:13px; font-weight:600; letter-spacing:.3px; text-decoration:none; color:var(--text); background:var(--_bg); border:1px solid rgba(255,255,255,0.05); border-radius:6px; transition:.15s background-color,.15s border-color; }
.admin-nav-list a:hover { background:rgba(255,255,255,0.07); }
.admin-nav-list a:focus-visible { outline:none; box-shadow:var(--adm-focus); }
.admin-nav-list a.active, .admin-nav-list a[aria-current="true"] { background:rgba(30,144,255,0.18); border-color:rgba(30,144,255,0.55); color:#fff; position:relative; }
.admin-nav-list a.active::before, .admin-nav-list a[aria-current="true"]::before { content:""; position:absolute; inset:6px auto 6px -6px; width:3px; background:var(--accent); border-radius:3px; }

/* ---------- Intro / Headings ---------- */
.admin-intro { margin:0 0 var(--adm-gap-4); }
.admin-tagline { margin:6px 0 0; color:var(--muted); font-size:var(--adm-fs); max-width:640px; line-height:1.35; }
.admin-inline-muted { font-weight:500; font-size:var(--adm-fs-sm); color:var(--muted); }

/* ---------- Sections ---------- */
.admin-section { padding:24px 26px 28px; background:var(--adm-bg-panel); border:var(--adm-border); border-radius:var(--adm-radius-lg); box-shadow:0 6px 34px -10px rgba(0,0,0,0.65); margin:0 0 46px; scroll-margin-top:90px; }
.admin-section-header { margin:0 0 var(--adm-gap-3); }
.admin-section-desc { margin:4px 0 0; font-size:var(--adm-fs-sm); color:var(--muted); }

/* ---------- Card Grid ---------- */
.admin-card-grid { display:grid; gap:var(--adm-gap-4); grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.admin-section#employeeManagement .admin-card-grid { grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:900px){ .admin-section#employeeManagement .admin-card-grid { grid-template-columns:1fr; } }

/* ---------- Cards ---------- */
.admin-card { background:var(--adm-bg-panel-alt); border:var(--adm-border-soft); border-radius:var(--adm-radius); padding:18px 18px 20px; display:flex; flex-direction:column; gap:var(--adm-gap-2); transition:.18s background-color,.18s box-shadow; }
.admin-card:hover { background:rgba(255,255,255,0.045); }
.admin-card-title { margin:0 0 8px; font-size:15px; letter-spacing:.4px; font-weight:600; }

/* Add Employee responsive stack */
#addEmployeeCard .admin-flex-row:first-of-type { flex-wrap:wrap; }
#addEmployeeCard .admin-flex-row:first-of-type input { flex:1 1 100%; }
#addEmployeeCard .admin-flex-row:first-of-type input + input { margin-top:var(--adm-gap-2); }
#addEmployeeCard .admin-flex-row:first-of-type input + input + button { margin-top:var(--adm-gap-2); }

/* ---------- Form / Inputs ---------- */
.admin-flex-row { display:flex; gap:var(--adm-gap-2); align-items:center; }
.admin-flex-row.max-720 { max-width:720px; }
.admin-flex-row.max-720-wide { max-width:820px; }
.admin-input, .admin-select { padding:9px 12px; border-radius:6px; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); color:var(--text); font:inherit; font-size:13px; line-height:1.2; }
.admin-input:focus, .admin-select:focus { outline:none; box-shadow:var(--adm-focus); }
.admin-input.flex-1, .admin-select.flex-1 { flex:1; }
.admin-input.pin { width:120px; }
.admin-select { appearance:none; background:#161e2b; }
.admin-select option { background:#161e2b; }
.admin-select.is-placeholder { color:var(--muted); }
.admin-feedback { margin-top:4px; color:var(--muted); font-size:.85rem; min-height:18px; }
.admin-result, .admin-project-breakdown {margin-top:12px;color:var(--muted);overflow: clip;}

/* ---------- Toolbar ---------- */
.admin-toolbar { margin:0 0 var(--adm-gap-3); padding:6px 0 0; }

/* ---------- Tables ---------- */
table {border-collapse:collapse;width:100%;/* display: grid; *//* flex-direction: column; */}
th {text-align:left;font-weight:600;font-size:12.5px;letter-spacing:.4px;padding: 10px 0px;color:var(--muted);}
td {/* padding:4px 0px; */font-size:13px;border-top:1px solid rgba(255,255,255,0.06);padding: 5px 20px;}

tr:has(td > .dow) {
  background:#161b28;
}
/*.tc-table.compact td, .tc-table.compact th { text-align:center; }*/

.tc-table.micro td, .tc-table.micro th { padding:5px 6px; font-size:12px; }

/* Highlight open raw pair */
table.tc-table.micro tr.open-pair td { background:rgba(200,60,60,0.14); }
table.tc-table.micro tr.open-pair td:first-child { border-left:3px solid #d06565; }

/* ---------- Day Punch Chips ---------- */
.day-punches { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:var(--adm-fs-xs); line-height:1.35; padding:4px 4px 2px; }
.day-punches.empty { font-style:italic; opacity:.55; }
.day-punches .punch-seg { background:rgba(255,255,255,0.07); padding:4px 6px; border-radius:4px; white-space:nowrap; letter-spacing:.25px; position:relative; padding-right:34px; transition:background-color .25s ease; }
.day-punches .punch-seg:hover { background:rgba(255,255,255,0.11); }
.day-punches .punch-seg.open { background:#632f2f; color:#ffdede; }
.day-punches .punch-seg.open:hover { background:#7b3b3b; }
/* Hover / focus reveal delete button */
.day-punches .punch-seg .punch-del-btn { position:absolute; top:50%; right:6px; transform:translateY(-50%) translateX(0px) scale(.8); opacity:0; width:22px; height:22px; border:0; border-radius:5px; background:#7a2e2e; color:#fff; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; pointer-events:none; transition:opacity .18s ease, transform .28s cubic-bezier(.4,0,.2,1), background-color .2s; }
.day-punches .punch-seg .punch-del-btn:hover { background:#943d3d; }
.day-punches .punch-seg:hover .punch-del-btn, .day-punches .punch-seg:focus-within .punch-del-btn { opacity:1; transform:translateY(-50%) translateX(0) scale(1); pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .day-punches .punch-seg .punch-del-btn { transition:none; transform:translateY(-50%); } }

/* ---------- Lunch / Add Buttons ---------- */
.lunch-toggle[data-empty="1"] { opacity:.42; cursor:not-allowed; }
.lunch-toggle[data-empty="1"]:hover { filter:none; }
.tc-btn.add-punch { background:#2d4f2d; }
.tc-btn.add-punch:hover { background:#386a38; }

.inline-add-toggle { /* remains visible; click to expand/collapse */
  opacity:1;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  transform: translateY(0);
}

/* ---------- Raw Punches Section ---------- */
.pp-raw-wrap { margin-top:var(--adm-gap-3); }
.pp-raw-heading, .pp-table-host + div h4 { margin:0 0 6px; font-size:13px; font-weight:600; letter-spacing:.45px; color:var(--adm-muted-heading); }

/* ---------- Alignment Utilities ---------- */
.tc-left { text-align:left; }

/* ---------- Totals Summary ---------- */
.pp-summary { margin-bottom:12px; font-size:14px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap; }
.pp-summary strong { color:#fff; }

/* Weekday badge next to date */
.dow {display:inline-block;min-width:40px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.5px;padding:3px 6px;border-radius:4px;background:rgba(255,255,255,0.06);color:var(--muted);margin-right:6px;position:relative;top:-1px;}
.dow:hover { background:rgba(255,255,255,0.10); color:#fff; }

/* ---------- Transitions / Focus ---------- */
.admin-card, .admin-section, .admin-nav { transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.admin-card :is(button,input,select):focus-visible { outline:none; box-shadow:var(--adm-focus); }

/* ---------- Main container override ---------- */
.tc-main { max-width:none; margin:none; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){ .admin-shell > .admin-nav + .admin-workspace { max-width:100%; } }
@media (max-width:1040px){
  .admin-shell { flex-direction:column; gap:var(--adm-gap-3); }
  .admin-nav { width:100%; position:static; display:block; }
  .admin-nav-list { flex-direction:row; flex-wrap:wrap; }
  .admin-nav-list a { flex:1 1 auto; text-align:center; }
  .admin-workspace { margin-top:2px; }
}
@media (max-width:760px){
  .day-punches { flex-direction:column; gap:4px; }
  .tc-table.compact td, .tc-table.compact th { padding:6px 6px; }
  .admin-section { padding:18px 16px 22px; }
  .admin-card-grid { gap:var(--adm-gap-3); }
  .admin-toolbar { padding:0; }
}
@media (max-width:480px){
  .admin-shell { gap:var(--adm-gap-2); }
  .admin-nav-list a { font-size:12px; padding:6px 6px; }
  .admin-section { padding:16px 14px 20px; }
  .admin-flex-row { flex-wrap:wrap; }
  .admin-flex-row > * { flex:1 1 100%; }
  .admin-input.pin { width:100%; }
}

/* Inline Add Punch Expander (12h EST) */
/* Inline add: always visible layout */
.inline-add { position:relative; display:inline-flex; gap:6px; align-items:center; }
.inline-add input.inline-add-time { width:70px; text-align:center; }
.inline-add select.inline-add-ampm { width:60px; }
.inline-add select.inline-add-action { width:68px; }
.inline-add button.inline-add-submit { background:#2d4f2d; }
.inline-add button.inline-add-submit:hover { background:#386a38; }

.tc-table.compact {
  text-align:left;
  /*width: fit-content;*/
}

#ppResult > div:nth-child(2) > table > tbody > tr:has(.dow) > td:nth-child(1){
  width:10vw;
  padding: 0px 20px;
  /* text-align:center; */
}

.filler-div {
  margin: 0px 30vw;
}

/* .inline-add.expanded legacy class retained intentionally (no styles) */

#ppResult > div:nth-child(2) > table > thead > tr > * {
  padding: 0px 20px;
}

.day-hours {
  text-align:left;
  padding: 0px 20px;
}
/* .lunch-toggle margin rule removed (was empty) */
/* Removed animated expand; elements always present */


.inline-add .inline-invalid { animation:inlineAddWarn .4s; }
@keyframes inlineAddWarn { 0%{box-shadow:0 0 0 0 rgba(200,70,70,.9);} 100%{box-shadow:0 0 0 4px rgba(200,70,70,0);} }
@media (prefers-reduced-motion:reduce){ .inline-add-panel { transition:none; } }