/* public/css/app.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:        #f5f3ef;
  --bg2:       #faf9f7;
  --bg3:       #ffffff;
  --bg4:       #f0ede8;
  --bg5:       #e8e4dd;
  --border:    #ddd9d2;
  --border2:   #ccc8c0;
  --border3:   #b8b3aa;
  --ink:       #1a1a2e;
  --ink2:      #4a4a6a;
  --ink3:      #8a8aaa;
  --ink4:      #bab8cc;
  --accent:    #0f1e5c;
  --accent2:   #1a3080;
  --blue:      #1e5fb5; --blue-bg:#e8f0fb;   --blue-bd:#b8cff0;
  --teal:      #0b7a6e; --teal-bg:#e4f4f2;   --teal-bd:#9dd5cf;
  --violet:    #6038a0; --violet-bg:#f0eafb; --violet-bd:#c8aff0;
  --amber:     #b05a00; --amber-bg:#fff3e0;  --amber-bd:#f0c880;
  --red:       #c0001e; --red-bg:#fdeaec;    --red-bd:#f0a0aa;
  --green:     #166534; --green-bg:#dcfce7;  --green-bd:#86efac;
  /* Shift scheduler — high-contrast cell colours */
  --shift-m-bg: #fde68a; --shift-m-c: #78350f;   /* Morning  — rich amber yellow  */
  --shift-no-bg:#fdba74; --shift-no-c:#7c2d12;   /* Noon     — warm orange        */
  --shift-e-bg: #bfdbfe; --shift-e-c: #1e40af;   /* Evening  — saturated sky blue */
  --shift-n-bg: #1e1b4b; --shift-n-c: #c7d2fe;   /* Night    — deep indigo dark   */
  --shift-l-bg: #bbf7d0; --shift-l-c: #14532d;   /* Leave    — fresh emerald      */
  --shift-cpl-bg:#ede9fe;--shift-cpl-c:#5b21b6;  /* CPL      — soft violet        */
  --shift-off-bg:#e2e8f0;--shift-off-c:#475569;  /* Off      — cool slate         */
  --mono: 'JetBrains Mono', monospace;
  --display: 'Inter', sans-serif;
  --body: 'Inter', sans-serif;
  --r: 6px; --r-lg: 10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;}

/* LAYOUT */
.app{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:228px;min-width:228px;background:var(--accent);display:flex;flex-direction:column;overflow:hidden;}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{height:54px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:12px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.content{flex:1;overflow-y:auto;padding:22px;background:var(--bg);}

/* SIDEBAR */
.logo{padding:18px 18px 15px;border-bottom:1px solid rgba(255,255,255,.1);}
.logo-mark{font-family:var(--display);font-size:19px;font-weight:700;color:#fff;letter-spacing:-0.3px;}
.logo-sub{font-family:var(--body);font-size:10px;color:rgba(255,255,255,.4);margin-top:3px;font-weight:400;}
.nav{flex:1;padding:8px 0;overflow-y:auto;}
.nav-lbl{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:0.4px;color:rgba(255,255,255,.32);padding:10px 18px 4px;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 18px;cursor:pointer;border-left:2px solid transparent;font-size:12.5px;font-weight:400;color:rgba(255,255,255,.58);transition:all .13s;text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);}
.nav-item.active{background:rgba(255,255,255,.15);color:#fff;border-left-color:#7fa8f8;font-weight:500;}
.nav-icon{font-family:var(--mono);font-size:11px;width:14px;text-align:center;opacity:.65;flex-shrink:0;}
.nav-badge{margin-left:auto;font-family:var(--body);font-size:10px;font-weight:600;background:rgba(255,255,255,.14);color:rgba(255,255,255,.75);padding:1px 7px;border-radius:10px;}
.nav-badge.red{background:rgba(192,0,30,.4);color:#ff9999;}
.nav-badge.green{background:rgba(11,122,110,.35);color:#7aeaaa;}
.nav-badge.amber{background:rgba(176,90,0,.35);color:#ffcc77;}
.sidebar-foot{padding:12px 18px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--body);font-size:10px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:6px;}
.live-dot{width:6px;height:6px;border-radius:50%;background:#7aeaaa;animation:blink 2s infinite;flex-shrink:0;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* TOPBAR */
.crumb{font-family:var(--body);font-size:11px;font-weight:500;color:var(--ink4);letter-spacing:0.2px;text-transform:uppercase;}
.ptitle{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.2px;}
.tright{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:var(--r);font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .12s;font-family:var(--body);white-space:nowrap;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent2);}
.btn-ghost{background:transparent;color:var(--ink2);border-color:var(--border2);}
.btn-ghost:hover{background:var(--bg4);color:var(--ink);border-color:var(--border3);}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-bd);}
.btn-danger:hover{border-color:var(--red);}
.btn-success{background:var(--green-bg);color:var(--green);border-color:var(--green-bd);}
.btn-success:hover{border-color:var(--green);}
.btn-sm{padding:4px 10px;font-size:11.5px;}
.btn-xs{padding:2px 8px;font-size:11px;font-family:var(--body);}

/* FORM */
.fi,.fs,.fta{background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:7px 10px;color:var(--ink);font-family:var(--body);font-size:13px;outline:none;width:100%;transition:border .12s;}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,58,95,.08);}
.fta{font-size:13px;resize:vertical;min-height:60px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fl{font-family:var(--body);font-size:11px;font-weight:500;color:var(--ink3);}
.fr{display:grid;gap:12px;margin-bottom:12px;}
.fr-1{grid-template-columns:1fr;} .fr-2{grid-template-columns:1fr 1fr;} .fr-3{grid-template-columns:1fr 1fr 1fr;}
.sep{font-family:var(--body);font-size:11px;font-weight:600;color:var(--ink4);padding:5px 0;margin:8px 0 12px;border-bottom:1px solid var(--border);}

/* PANEL */
.panel{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg);}
.panel-head{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:var(--r-lg) var(--r-lg) 0 0;flex-wrap:wrap;}
.panel-title{font-family:var(--display);font-size:12px;font-weight:600;color:var(--ink2);}

/* STATS */
.stats-row{display:grid;gap:10px;margin-bottom:18px;}
.stat{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 16px;position:relative;overflow:hidden;}
.stat::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;}
.stat.s-blue::after{background:var(--blue);} .stat.s-teal::after{background:var(--teal);}
.stat.s-amber::after{background:var(--amber);} .stat.s-red::after{background:var(--red);}
.stat.s-violet::after{background:var(--violet);} .stat.s-green::after{background:var(--green);}
.stat.s-gray::after{background:var(--border3);}
.stat-lbl{font-family:var(--body);font-size:11px;font-weight:500;color:var(--ink3);margin-bottom:6px;}
.stat-num{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-1px;}
.stat-sub{font-family:var(--body);font-size:11px;color:var(--ink4);margin-top:4px;}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.tbl th{padding:8px 13px;text-align:left;font-family:var(--body);font-size:11px;font-weight:600;color:var(--ink3);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.3px;background:var(--bg2);}
.tbl td{padding:9px 13px;border-bottom:1px solid var(--border);color:var(--ink2);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--bg);}
.tbl td.bold{color:var(--ink);font-weight:500;}
.tbl td.mono{font-family:var(--mono);font-size:11px;}
.tbl td.ip{font-family:var(--mono);font-size:11px;color:var(--blue);}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:11px;font-family:var(--body);font-weight:500;border:1px solid transparent;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.b-green{background:var(--green-bg);color:var(--green);border-color:var(--green-bd);}
.b-teal{background:var(--teal-bg);color:var(--teal);border-color:var(--teal-bd);}
.b-amber{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bd);}
.b-blue{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd);}
.b-violet{background:var(--violet-bg);color:var(--violet);border-color:var(--violet-bd);}
.b-red{background:var(--red-bg);color:var(--red);border-color:var(--red-bd);}
.b-gray{background:var(--bg4);color:var(--ink3);border-color:var(--border2);}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(20,20,40,.45);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.overlay.open{display:flex;}
.modal{background:var(--bg3);border:1px solid var(--border2);border-radius:12px;width:620px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.18);}
.modal.wide{width:760px;}
.mhead{padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border-radius:12px 12px 0 0;}
.mtitle{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.2px;}
.mx{background:none;border:none;color:var(--ink3);font-size:18px;cursor:pointer;padding:2px 7px;border-radius:4px;}
.mx:hover{background:var(--bg4);}
.mbody{padding:20px;}
.mfoot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--bg2);border-radius:0 0 12px 12px;}

/* SEARCH */
.search-wrap{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:5px 10px;}
.search-wrap input{background:none;border:none;color:var(--ink);font-size:13px;outline:none;font-family:var(--body);width:200px;}
.search-wrap input::placeholder{color:var(--ink4);}

/* TOAST */
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:6px;}
.toast{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:10px 14px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:8px;animation:toastIn .2s ease;min-width:220px;font-family:var(--body);box-shadow:0 4px 16px rgba(0,0,0,.12);}
.toast.ok{border-left:3px solid var(--teal);}
.toast.err{border-left:3px solid var(--red);}
.toast.info{border-left:3px solid var(--blue);}
@keyframes toastIn{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}

/* NAV GROUP (expandable credentials section) */
.nav-group{margin:0;}
.nav-grp-hd{display:flex;align-items:center;gap:9px;padding:7px 18px;cursor:pointer;border-left:2px solid transparent;font-size:12.5px;font-weight:400;color:rgba(255,255,255,.58);transition:all .13s;user-select:none;}
.nav-grp-hd:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);}
.nav-grp-arr{margin-left:auto;font-size:9px;transition:transform .2s;font-family:var(--mono);color:rgba(255,255,255,.3);flex-shrink:0;}
.nav-grp-bd{display:none;padding:0 0 2px 0;}
.nav-group.open .nav-grp-bd{display:block;}
.nav-group.open .nav-grp-arr{transform:rotate(180deg);}
.nav-group.open .nav-grp-hd{color:rgba(255,255,255,.85);}
.nav-sub{padding-left:26px !important;padding-right:14px !important;font-size:11.5px !important;color:rgba(255,255,255,.45) !important;border-left:none !important;padding-top:5px !important;padding-bottom:5px !important;}
.nav-sub:hover{color:rgba(255,255,255,.85) !important;background:rgba(255,255,255,.05) !important;}
.nav-sub.active{color:#fff !important;background:rgba(255,255,255,.1) !important;font-weight:500 !important;}
.nav-sub .nav-icon{opacity:.55;font-size:10px !important;}

/* CREDENTIAL DEVICE ROWS */
.cred-device-row{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden;transition:box-shadow .15s,border-color .15s;}
.cred-device-row:hover{box-shadow:0 3px 12px rgba(0,0,0,.07);border-color:var(--border2);}
.cdr-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .12s;user-select:none;}
.cdr-head:hover{background:var(--bg2);}
.cdr-body{border-top:1px solid var(--border);}

.fade{animation:fadeUp .2s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.empty-state{text-align:center;padding:40px;color:var(--ink4);font-family:var(--body);font-size:12.5px;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg4);}
::-webkit-scrollbar-thumb{background:var(--border3);border-radius:3px;}
.loading{text-align:center;padding:40px;color:var(--ink4);font-family:var(--body);font-size:12.5px;}

/* PIN KEYPAD */
.pin-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--border2);background:transparent;transition:background .15s,border-color .15s;}
.pin-dot.filled{background:var(--blue);border-color:var(--blue);}
.pin-key{padding:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .1s,transform .08s;}
.pin-key:hover{background:var(--bg4);}
.pin-key:active{transform:scale(.93);}
.pin-key-alt{font-size:12px;font-weight:500;color:var(--ink3);}