/* ===========================================================
   IXM MANAGER — design tokens
   A production tracker, styled like a video edit suite:
   dark timeline-rail navigation, timecode-style numerals,
   one signal-red accent borrowed from a REC indicator.
   =========================================================== */
:root{
  --ink:        #14151A;
  --ink-soft:   #1D1F27;
  --rail-line:  #2B2E3A;
  --paper:      #F6F4EF;
  --paper-card: #FFFFFF;
  --line:       #E4E1D8;
  --text:       #1B1C20;
  --text-dim:   #6B6D78;
  --accent:     #FF4433;
  --accent-dim: #FFE4E0;
  --green:      #1F9D55;
  --green-bg:   #E1F5E9;
  --amber:      #B9791C;
  --amber-bg:   #FBEDD3;
  --red:        #C43D30;
  --red-bg:     #FBE2DE;
  --blue:       #2A5FB0;
  --blue-bg:    #E2ECFB;
  --gray:       #6B6D78;
  --gray-bg:    #E9E8E3;
  --radius:     10px;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a{color: var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-family: var(--font-display); margin: 0 0 4px 0; letter-spacing: -0.01em;}
button, input, select, textarea{font-family: inherit; font-size: 14px;}
::selection{ background: var(--accent-dim); }

/* ---------- App shell ---------- */
.app{ display:flex; min-height:100vh; }

.rail{
  width: 220px;
  flex-shrink: 0;
  background: var(--ink);
  color: #C9CAD6;
  display:flex;
  flex-direction: column;
  position: sticky;
  top:0;
  height: 100vh;
}
.rail-brand{
  display:flex; align-items:center; gap:10px;
  padding: 22px 20px 18px 20px;
  border-bottom: 1px solid var(--rail-line);
}
.rec-dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,68,51,0.18);
  flex-shrink:0;
}
.rail-brand-text{ font-family: var(--font-display); font-weight:700; font-size:16px; color:#fff; line-height:1.1;}
.rail-brand-sub{ font-family: var(--font-mono); font-size:10px; color:#8B8DA0; letter-spacing:.08em; }

.rail-nav{ padding: 14px 10px; display:flex; flex-direction:column; gap:2px; flex:1; }
.rail-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: 8px;
  color:#C9CAD6; font-size: 13.5px; font-weight:500;
  border-left: 2px solid transparent;
}
.rail-link:hover{ background: var(--ink-soft); text-decoration:none; color:#fff; }
.rail-link.active{ background: var(--ink-soft); color:#fff; border-left-color: var(--accent); }
.rail-ic{ width:16px; text-align:center; opacity:.85; font-family: var(--font-mono); }

.rail-foot{ padding: 14px 18px 18px; border-top:1px solid var(--rail-line); font-size:12px; color:#8B8DA0; }
.rail-foot b{ color:#DEDFE8; display:block; font-size:13px; margin-bottom:2px;}
.rail-foot a{ color:#8B8DA0; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px; background: var(--paper-card);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 5;
}
.topbar h1{ font-size: 19px; }
.topbar .eyebrow{ font-family: var(--font-mono); font-size:11px; color: var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.content{ padding: 22px 28px 60px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding: 9px 16px; border-radius: 8px; border:1px solid var(--line);
  background: var(--paper-card); color: var(--text); cursor:pointer;
  font-weight:600; font-size:13.5px;
}
.btn:hover{ border-color:#c9c6ba; text-decoration:none; }
.btn-primary{ background: var(--ink); color:#fff; border-color:var(--ink); }
.btn-primary:hover{ background:#26272f; }
.btn-accent{ background: var(--accent); color:#fff; border-color: var(--accent); }
.btn-accent:hover{ background:#e83b2c; }
.btn-danger{ color: var(--red); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-sm{ padding:5px 10px; font-size:12.5px; border-radius:6px; }
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- Cards / filter bar ---------- */
.card{ background: var(--paper-card); border:1px solid var(--line); border-radius: var(--radius); }
.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  padding: 14px 16px; margin-bottom: 16px;
}
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); font-weight:600; }
.field select, .field input{
  padding: 8px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; min-width:150px;
}
.field input[type="search"]{min-width:200px;}

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border-radius: var(--radius); border:1px solid var(--line); background:var(--paper-card); }
table.sheet{ width:100%; border-collapse:collapse; min-width: 1180px; }
table.sheet thead th{
  background: var(--ink); color:#fff; text-align:left;
  padding: 10px 12px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  white-space:nowrap; position:sticky; top:0;
}
table.sheet tbody td{ padding: 9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.sheet tbody tr:hover{ background: #FBFAF6; }
table.sheet tbody tr:last-child td{border-bottom:none;}

.tc{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-dim); }
.chip{
  display:inline-block; padding: 3px 9px; border-radius:20px; font-size:12px; font-weight:600;
  white-space:nowrap;
}
.pill{ display:inline-block; padding:4px 10px; border-radius:6px; font-size:12px; font-weight:700; letter-spacing:.02em; }
.pill-green{ background:var(--green-bg); color:var(--green); }
.pill-amber{ background:var(--amber-bg); color:var(--amber); }
.pill-red{ background:var(--red-bg); color:var(--red); }
.pill-gray{ background:var(--gray-bg); color:var(--gray); }
.pill-blue{ background:var(--blue-bg); color:var(--blue); }

select.status-select{
  border:none; border-radius:6px; padding:5px 8px; font-weight:700; font-size:12px; cursor:pointer;
  appearance:none; -webkit-appearance:none; background-position: right 6px center; background-repeat:no-repeat;
  padding-right:22px;
}
.link-cell a{ font-weight:600; }
.link-cell .none{ color:#B8B5AA; font-style:italic; font-weight:400; }

.row-actions{ display:flex; gap:6px; }
.icon-btn{ border:none; background:transparent; cursor:pointer; padding:4px 6px; border-radius:5px; color:var(--text-dim); }
.icon-btn:hover{ background: var(--gray-bg); color:var(--text); }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--text-dim); }
.empty-state h3{ color: var(--text); }

/* ---------- Modal ---------- */
.overlay{ position:fixed; inset:0; background:rgba(20,21,26,0.55); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.overlay.open{ display:flex; }
.modal{ background:#fff; border-radius:14px; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-body{ padding:20px 22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.modal-body .full{ grid-column: 1 / -1; }
.modal-foot{ padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.form-group{ display:flex; flex-direction:column; gap:5px; }
.form-group label{ font-size:12px; font-weight:600; color:var(--text-dim); }
.form-group input, .form-group select, .form-group textarea{
  padding:9px 10px; border:1px solid var(--line); border-radius:7px; width:100%; background:#fff;
}
.form-group textarea{ resize:vertical; min-height:60px; }

/* ---------- Auth ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--ink); }
.auth-card{ background:#fff; width:100%; max-width:380px; border-radius:14px; padding:34px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.auth-card h2{ font-size:20px; margin-bottom:4px; }
.auth-card p.sub{ color:var(--text-dim); margin:0 0 22px; font-size:13px; }
.auth-card .form-group{ margin-bottom:14px; }
.auth-error{ background:var(--red-bg); color:var(--red); padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.auth-hint{ margin-top:16px; font-size:12px; color:var(--text-dim); background:var(--paper); padding:10px 12px; border-radius:8px; }

/* ---------- Stats ---------- */
.stat-row{ display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.stat{ flex:1; min-width:130px; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.stat .num{ font-family:var(--font-mono); font-size:24px; font-weight:700; }
.stat .lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); font-weight:600; margin-top:2px; }

/* ---------- Attendance grid ---------- */
.att-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); background:#fff; }
table.att{ border-collapse:collapse; min-width:100%; }
table.att th, table.att td{ border:1px solid var(--line); text-align:center; padding:0; }
table.att th{ background:var(--ink); color:#fff; font-size:11px; padding:8px 4px; font-weight:600; }
table.att td.emp-name{ text-align:left; padding:8px 12px; font-weight:600; white-space:nowrap; background:#FBFAF6; position:sticky; left:0; }
table.att th.emp-col{ position:sticky; left:0; z-index:2; }
.att-cell{ width:34px; height:34px; }
.att-btn{
  width:100%; height:100%; border:none; background:transparent; cursor:pointer;
  font-family:var(--font-mono); font-weight:700; font-size:11.5px; color:#B8B5AA;
}
.att-btn.P{ background: var(--green-bg); color:var(--green); }
.att-btn.A{ background: var(--red-bg); color:var(--red); }
.att-btn.H{ background: var(--amber-bg); color:var(--amber); }
.att-btn.L{ background: var(--blue-bg); color:var(--blue); }
.att-btn.WO{ background: var(--gray-bg); color:var(--gray); }
.legend{ display:flex; gap:14px; margin: 12px 2px; flex-wrap:wrap; font-size:12.5px; color:var(--text-dim); }
.legend span b{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle; }

.badge-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; background:var(--rail-line); color:#fff; border-radius:10px; font-size:11px; margin-left:auto; }

.flash{ padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:13.5px; font-weight:500; }
.flash-ok{ background:var(--green-bg); color:var(--green); }
.flash-err{ background:var(--red-bg); color:var(--red); }

.helper{ color:var(--text-dim); font-size:12.5px; }
.print-only{ display:none; }

@media print{
  .rail, .topbar, .filters, .no-print{ display:none !important; }
  .content{ padding:0; }
  body{ background:#fff; }
  .print-only{ display:block; }
}

/* ---------- Mobile top bar (hidden on desktop) ---------- */
.mobile-topbar{
  display:none;
  align-items:center; gap:12px;
  padding: 12px 16px;
  background: var(--ink);
  color:#fff;
  position: sticky; top:0; z-index: 40;
}
.hamburger{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--rail-line);
  background: var(--ink-soft); color:#fff; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mobile-topbar .mt-brand{ font-family: var(--font-display); font-weight:700; font-size:15px; }
.rail-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:39; }
.rail-backdrop.open{ display:block; }

@media (max-width: 900px){
  .mobile-topbar{ display:flex; }
  .app{ flex-direction:column; }
  .rail{
    position: fixed; top:0; left:0; bottom:0; z-index:41;
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: 250px; height:100vh;
  }
  .rail.open{ transform: translateX(0); box-shadow: 10px 0 40px rgba(0,0,0,.4); }
  .topbar{ padding: 14px 16px; flex-wrap:wrap; gap:10px; }
  .topbar h1{ font-size:17px; }
  .content{ padding: 16px; }
  .stat-row{ gap:10px; }
  .stat{ min-width: 45%; padding:12px; }
  .stat .num{ font-size:20px; }
  .filters{ padding:12px; }
  .field select, .field input{ min-width: 130px; }
  table.sheet{ min-width: 900px; }
  .modal{ max-width: 100%; margin: 0 auto; border-radius: 14px 14px 0 0; }
  .overlay{ align-items:flex-end; padding:0; }
  .modal-body{ grid-template-columns: 1fr; }
  .rail-nav{ padding-top: 8px; }
}

@media (max-width: 480px){
  .topbar h1{ font-size:16px; }
  .stat{ min-width: 100%; }
  .btn{ padding:8px 12px; font-size:13px; }
}