:root {
  --bg: #EDEAE3;
  --surface: #FFFFFF;
  --surface-2: #F7F5F0;
  --ink: #1F1B16;
  --ink-2: #6B6258;
  --ink-3: #A39B8C;
  --border: #DAD3C4;
  --amber: #D98E2B;
  --red: #B23A2E;
  --green: #3C7A5C;
  --blue: #3E6E96;
  --purple: #6B4FA0;
  --ca-sang: #D98E2B;
  --ca-chieu: #3E6E96;
  --ca-toi: #6B4FA0;
  --radius: 10px;
  --shadow: 0 2px 0 rgba(0,0,0,0.03), 0 8px 24px -8px rgba(0,0,0,0.14);
  --font-mono: "Space Mono", monospace;
  --font: "Inter", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;}
.hidden{display:none!important;}
button,input,select,textarea{font-family:var(--font);}
a{text-decoration:none;}

/* ── LOGIN ── */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 50% 30%, #3A2A1E, #2A1810);}
.login-ticket{width:100%;max-width:380px;
  background:#EDEAE3;border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);padding:32px 28px;}
.login-logo{margin-bottom:8px;}
.login-logo img{border-radius:14px;}
.login-ticket h1{font-family:var(--font-mono);font-size:22px;margin-top:4px;margin-bottom:22px;text-align:center;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px;}
.field input{width:100%;padding:10px 12px;border:1px solid #D9CFC0;border-radius:6px;background:#F4EFE6;font-size:14px;color:var(--ink);}
.field input:focus{outline:2px solid var(--amber);outline-offset:1px;}
.login-error{color:var(--red);font-size:13px;min-height:16px;margin-bottom:10px;}
.btn-primary{width:100%;padding:12px;border:none;border-radius:6px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;}
.btn-primary:hover{background:#34291E;}
.btn-primary:disabled{opacity:.6;cursor:wait;}

/* ── SHELL ── */
#app-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh;}
.sidebar{background:#1F1B16;color:#E8E3DA;padding:20px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sidebar-logo{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--amber);padding:0 10px 22px;}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;color:#B5ADA0;font-size:13.5px;margin-bottom:2px;border-left:3px solid transparent;transition:.15s;}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-link.active{background:rgba(217,142,43,.15);color:#fff;border-left-color:var(--amber);}
.sidebar-footer{margin-top:auto;}
.logout-btn{background:none;border:none;color:#7A7068;font-size:13px;cursor:pointer;padding:8px 12px;width:100%;text-align:left;}
.logout-btn:hover{color:#fff;}
.main{display:flex;flex-direction:column;min-width:0;min-height:100vh;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;}
.topbar-left{display:flex;align-items:center;gap:12px;}
.menu-btn{display:none;background:none;border:none;font-size:20px;cursor:pointer;padding:4px;}
#page-title{font-family:var(--font-mono);font-size:17px;}
.btn-export{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px dashed var(--border);border-radius:6px;background:none;font-size:13px;cursor:pointer;color:var(--ink-2);}
.btn-export:hover{border-color:var(--ink);color:var(--ink);}
#page-content{padding:22px 24px 48px;flex:1;}
.fade-in{animation:fi .2s ease;}
@keyframes fi{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ── CARDS / TICKET ── */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
.card-title{font-family:var(--font-mono);font-size:15px;margin-bottom:16px;}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.stat-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;}
.stat-label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;}
.stat-value{display:block;font-family:var(--font-mono);font-size:22px;font-weight:700;}
.stat-warn{color:var(--red);}
.stat-green{color:var(--green);}

/* ── BUTTONS ── */
.btn-secondary{padding:8px 14px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}
.btn-secondary:hover{background:var(--surface-2);}
.btn-secondary:disabled{opacity:.5;cursor:not-allowed;}
.btn-danger{padding:8px 14px;border:1px solid var(--red);border-radius:6px;background:none;color:var(--red);font-size:13px;font-weight:600;cursor:pointer;}
.btn-danger:hover{background:rgba(178,58,46,.08);}
.btn-green{padding:8px 14px;border:none;border-radius:6px;background:var(--green);color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-block{width:100%;justify-content:center;}
.icon-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:3px 6px;border-radius:5px;color:var(--ink-2);}
.icon-btn:hover{background:var(--bg);color:var(--ink);}
.btn-row{display:flex;gap:8px;margin-top:16px;}
.btn-row.end{justify-content:flex-end;}
.btn-row.between{justify-content:space-between;}

/* ── FORM ── */
.form-group{margin-bottom:13px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-group label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);font-size:14px;color:var(--ink);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid var(--amber);outline-offset:1px;}
.form-group textarea{resize:vertical;min-height:60px;}
.form-hint{font-size:12px;color:var(--ink-3);margin-top:4px;}
.radio-group{display:flex;gap:16px;}
.radio-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;}
.radio-label input{width:auto;}
.check-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;margin-bottom:10px;}
.check-label input{width:auto;}

/* ── MODAL ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(31,27,22,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100;}
.modal-box{background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 60px -10px rgba(0,0,0,.3);width:100%;max-width:460px;max-height:90vh;overflow-y:auto;padding:24px;position:relative;animation:mi .18s ease;}
@keyframes mi{from{opacity:0;transform:scale(.97) translateY(6px);}to{opacity:1;transform:none;}}
.modal-title{font-family:var(--font-mono);font-size:16px;margin-bottom:18px;}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink-2);line-height:1;}
.modal-close:hover{color:var(--ink);}

/* ── TOAST ── */
.toast-root{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:200;pointer-events:none;}
.toast{background:var(--ink);color:#fff;padding:10px 18px;border-radius:6px;font-size:13px;opacity:0;transform:translateY(6px);transition:.2s;white-space:nowrap;}
.toast.show{opacity:1;transform:none;}
.toast.error{background:var(--red);}
.toast.success{background:var(--green);}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);padding:10px 12px;border-bottom:1.5px solid var(--ink);}
td{padding:10px 12px;border-bottom:1px dashed var(--border);vertical-align:middle;}
tr:hover td{background:rgba(217,142,43,.04);}
.num{font-family:var(--font-mono);}
.right{text-align:right;}

/* ── BADGE ── */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;border:1.5px solid currentColor;font-family:var(--font-mono);letter-spacing:.04em;}
.badge.draft{color:var(--ink-3);}
.badge.locked{color:var(--amber);}
.badge.paid{color:var(--green);}
.type-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;}
.type-badge.hourly{background:rgba(62,110,150,.12);color:var(--blue);}
.type-badge.fixed{background:rgba(60,122,92,.12);color:var(--green);}

/* ── NAV PHỤ ── */
.subbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.nav-ctrl{display:flex;align-items:center;gap:8px;}
.nav-ctrl button{width:30px;height:30px;border:1px solid var(--border);border-radius:6px;background:var(--surface);cursor:pointer;font-size:14px;}
.nav-ctrl button:hover{background:var(--surface-2);}
.nav-label{font-family:var(--font-mono);font-size:13px;min-width:140px;text-align:center;}
.filter-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(217,142,43,.12);color:var(--amber);padding:4px 10px;border-radius:5px;font-size:12px;font-weight:600;}
.filter-pill button{background:none;border:none;cursor:pointer;color:inherit;font-size:13px;}

/* ── NHÂN VIÊN ── */
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.staff-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;cursor:pointer;transition:.12s;}
.staff-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px -8px rgba(0,0,0,.18);}
.card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;font-family:var(--font-mono);flex-shrink:0;}
.card-name{font-weight:600;font-size:14px;}
.card-role{font-size:12px;color:var(--ink-2);}
.card-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--border);padding-top:10px;margin-top:6px;font-size:12px;color:var(--ink-2);}
.back-btn{background:none;border:none;cursor:pointer;color:var(--ink-2);font-size:13px;padding:0;margin-bottom:14px;}
.back-btn:hover{color:var(--ink);}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border);font-size:13.5px;}
.info-row .k{color:var(--ink-2);}
.info-row .v{font-weight:600;text-align:right;}

/* ── LỊCH ── */
.schedule-wrap{overflow-x:auto;}
.schedule-grid{display:grid;grid-template-columns:88px repeat(7,minmax(108px,1fr));gap:5px;min-width:860px;}
.sg-head{font-family:var(--font-mono);font-size:11px;text-align:center;color:var(--ink-2);padding:8px 4px;}
.sg-shift{display:flex;flex-direction:column;justify-content:center;padding:8px 6px;border-radius:6px;color:#fff;font-size:12px;font-weight:600;gap:2px;}
.sg-shift span{font-weight:400;opacity:.85;font-size:11px;}
.sg-cell{background:var(--surface);border-radius:6px;padding:5px;min-height:60px;display:flex;flex-direction:column;gap:4px;border:1.5px solid transparent;}
.sg-cell.warn{border-color:var(--red);background:rgba(178,58,46,.04);}
.sg-cell.highlight{box-shadow:0 0 0 2.5px var(--amber);}
.chip{display:flex;align-items:center;justify-content:space-between;gap:3px;font-size:11px;padding:3px 7px;border-radius:4px;color:#fff;cursor:pointer;border:1.5px solid transparent;}
.chip.sang{background:var(--ca-sang);}
.chip.chieu{background:var(--ca-chieu);}
.chip.toi{background:var(--ca-toi);}
.chip.broken{border-style:dashed;border-color:rgba(255,255,255,.8);}
.chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.add-btn{border:1.5px dashed var(--border);background:none;border-radius:4px;color:var(--ink-3);cursor:pointer;padding:2px;font-size:16px;line-height:1;}
.add-btn:hover{color:var(--ink);border-color:var(--ink-2);}
.warn-box{background:rgba(178,58,46,.07);border:1px solid var(--red);color:var(--red);border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px;}
.warn-box ul{margin:6px 0 0;padding-left:16px;}
.warn-box li{cursor:pointer;text-decoration:underline;margin-bottom:3px;}

/* ── LƯƠNG ── */
.salary-wrap{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0;}
.salary-item .k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);display:block;margin-bottom:4px;}
.salary-item .v{font-family:var(--font-mono);font-size:15px;font-weight:700;}
.adj-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border);}
.adj-row .reason{font-size:12px;color:var(--ink-2);}
.adj-amt.bonus{color:var(--green);}
.adj-amt.penalty{color:var(--red);}
.qr-wrap{text-align:center;padding:12px 0;}
.qr-wrap img{width:196px;height:196px;border-radius:8px;border:1px solid var(--border);}
.qr-info{font-size:13px;margin:8px 0 4px;}
.qr-amount{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--green);}
.copy-row{display:flex;gap:8px;justify-content:center;margin-top:10px;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  #app-shell{grid-template-columns:1fr;}
  .sidebar{position:fixed;inset:0 auto 0 0;width:220px;transform:translateX(-100%);transition:.2s;z-index:50;}
  .sidebar.open{transform:none;}
  .menu-btn{display:block;}
  .topbar{padding:12px 16px;}
  #page-content{padding:14px 14px 40px;}
  .info-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}
}