:root { --ink:#102033; --muted:#718096; --line:#e7edf2; --paper:#f7fafb; --white:#fff; --teal:#087f74; --teal-dark:#05665e; --mint:#dff4ef; --amber:#f7c948; --red:#c24145; --shadow:0 18px 45px rgba(16,32,51,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:252px; background:#102033; color:#dae6e9; padding:26px 18px; display:flex; flex-direction:column; flex-shrink:0; }
.brand { display:flex; gap:11px; align-items:center; margin:0 12px 55px; color:#fff; font-family:Manrope,sans-serif; font-size:21px; letter-spacing:-.6px; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#102033; background:#87e2d1; border-radius:11px; font-weight:800; }
.nav-label { font-size:11px; color:#6f8897; letter-spacing:1.2px; text-transform:uppercase; margin:0 14px 12px; }
.nav { display:grid; gap:6px; }
.nav button { background:transparent; color:#aebfc5; text-align:left; padding:12px 14px; border-radius:9px; display:flex; gap:12px; align-items:center; font-weight:600; }
.nav button:hover,.nav button.active { background:#1d3a4a; color:#fff; }
.nav-icon { width:18px; text-align:center; opacity:.86; }
.side-footer { margin-top:auto; border-top:1px solid #29404c; padding:18px 12px 0; color:#8fa5ad; font-size:13px; }
.user-mini { display:flex; gap:10px; align-items:center; margin-bottom:14px; color:#fff; font-weight:600; }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#e1f3ef; color:var(--teal); font-weight:700; }
.main { flex:1; min-width:0; }
.topbar { height:76px; border-bottom:1px solid var(--line); background:var(--white); display:flex; justify-content:space-between; align-items:center; padding:0 42px; }
.page-title { font-family:Manrope,sans-serif; font-size:22px; letter-spacing:-.6px; }
.top-actions { display:flex; gap:18px; align-items:center; color:var(--muted); }
.role-pill { font-size:12px; color:var(--teal); background:var(--mint); padding:7px 11px; border-radius:20px; font-weight:700; }
.content { max-width:1220px; padding:38px 42px 70px; margin:auto; }
.eyebrow { color:var(--teal); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; font-size:11px; margin-bottom:9px; }
h1,h2,h3,p { margin-top:0; } h1 { font:800 31px Manrope,sans-serif; letter-spacing:-1.2px; margin-bottom:8px; } h2 { font:800 20px Manrope,sans-serif; letter-spacing:-.5px; } h3 { font-size:15px; }
.subtle { color:var(--muted); font-size:14px; }
.hero-row { display:flex; justify-content:space-between; align-items:end; margin-bottom:30px; gap:20px; }
.btn { border-radius:8px; padding:11px 17px; font-weight:700; transition:.2s; }
.btn-primary { background:var(--teal); color:#fff; box-shadow:0 5px 12px rgba(8,127,116,.16); } .btn-primary:hover { background:var(--teal-dark); transform:translateY(-1px); }
.btn-ghost { background:#eef5f5; color:var(--teal); } .btn-danger { background:#fff0f0; color:var(--red); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:26px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:19px; box-shadow:0 4px 12px rgba(16,32,51,.02); }
.stat-top { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; } .stat-number { font:800 27px Manrope,sans-serif; margin-top:14px; } .stat-trend { font-size:12px; color:var(--teal); margin-top:8px; }
.grid-2 { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; } .card { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 12px rgba(16,32,51,.025); overflow:hidden; } .card-pad { padding:22px; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; } .card-header h2 { margin-bottom:0; }
.status-card { border-left:4px solid var(--teal); padding:23px; } .status-label { font-size:13px; color:var(--muted); } .status-value { font:800 27px Manrope,sans-serif; margin:10px 0 5px; } .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--teal); margin-right:7px; } .status-dot.off { background:#b8c3c8; }
.clock { font:800 45px Manrope,sans-serif; letter-spacing:-2px; margin:23px 0 4px; } .clock-note { color:var(--muted); font-size:13px; }
.action-row { display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th { text-align:left; color:#85939c; font-size:11px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; padding:13px 22px; background:#fbfcfc; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } td { padding:16px 22px; font-size:13px; border-bottom:1px solid var(--line); } tr:last-child td { border-bottom:0; }
.person { display:flex; align-items:center; gap:10px; font-weight:700; } .person .avatar { width:30px; height:30px; font-size:11px; }
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:16px; padding:5px 9px; font-size:11px; font-weight:700; } .badge.green { color:var(--teal); background:var(--mint); } .badge.gray { color:#697b84; background:#edf1f2; } .badge.amber { color:#8c6500; background:#fff4ce; }
.filters { display:flex; gap:10px; flex-wrap:wrap; padding:0 22px 18px; } input,select,textarea { border:1px solid #dce5e8; border-radius:7px; background:#fff; color:var(--ink); padding:10px 12px; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,127,116,.1); }
.empty { text-align:center; color:var(--muted); padding:38px 20px; font-size:14px; }
.modal-bg { position:fixed; inset:0; display:grid; place-items:center; background:rgba(16,32,51,.44); z-index:10; padding:20px; } .modal { background:#fff; width:min(480px,100%); border-radius:14px; box-shadow:var(--shadow); padding:27px; } .modal h2 { margin-bottom:7px; } .modal label { display:block; font-size:12px; font-weight:700; margin:18px 0 7px; } .modal textarea { width:100%; min-height:112px; resize:vertical; } .modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.note-cell { max-width:320px; min-width:220px; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; color:var(--muted); }
td[style*="min-width:220px"] { max-width:320px; max-height:6.5em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; white-space:normal !important; }
td[style*="min-width:220px"] { cursor:pointer; }
td[style*="min-width:220px"].expanded { max-height:none; display:table-cell; -webkit-line-clamp:unset; line-clamp:unset; }
td[style*="min-width:220px"]::after { content:'Click to expand'; display:block; margin-top:5px; font-size:10px; color:var(--teal); opacity:.8; }
td[style*="min-width:220px"].expanded::after { content:'Click to collapse'; }
.person { cursor:pointer; }
.employee-details-modal { width:min(720px,100%); max-height:90vh; overflow:auto; }
.employee-profile-hero { align-items:flex-start; }
.back-link { border:0; background:transparent; color:var(--teal); cursor:pointer; font-weight:700; padding:0; margin-bottom:18px; }
.profile-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.profile-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:17px; box-shadow:var(--shadow); }
.profile-card span { display:block; color:var(--muted); font-size:12px; margin-bottom:7px; }
.detail-note { max-width:360px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); }
.details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0 24px; }
.details-grid div { background:var(--soft); border-radius:10px; padding:12px; }
.details-grid span, .detail-record span { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
.details-record { border-top:1px solid var(--line); padding:13px 0; }
.detail-record p { margin:8px 0 0; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:800px) { .profile-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .details-grid,.profile-summary { grid-template-columns:1fr; } }
.toast { position:fixed; right:26px; bottom:26px; background:#102033; color:#fff; border-radius:8px; padding:13px 17px; font-size:13px; box-shadow:var(--shadow); transform:translateY(15px); opacity:0; pointer-events:none; transition:.25s; z-index:20; } .toast.show { transform:none; opacity:1; }
.login { min-height:100vh; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 10% 20%,#dff4ef,transparent 34%),#f7fafb; } .login-card { width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:16px; padding:35px; box-shadow:var(--shadow); } .login-card .brand { color:var(--ink); margin:0 0 35px; } .login-card label { display:block; margin:16px 0 7px; font-size:12px; font-weight:700; } .login-card input,.login-card select { width:100%; } .login-card .btn { width:100%; margin-top:25px; } .demo-hint { background:#f2f7f7; border-radius:8px; padding:12px; font-size:12px; line-height:1.5; color:var(--muted); margin-top:18px; }
@media (max-width:900px) { .sidebar { width:74px; padding:22px 10px; } .brand { margin:0 auto 50px; } .brand-text,.nav-label,.nav button span:not(.nav-icon),.side-footer .user-name,.side-footer p { display:none; } .nav button { justify-content:center; padding:13px; } .side-footer { padding:18px 0 0; } .user-mini { justify-content:center; } .topbar { padding:0 25px; } .content { padding:30px 25px; } .grid-2 { grid-template-columns:1fr; } }
@media (max-width:620px) { .topbar { height:68px; padding:0 17px; } .top-actions .role-pill { display:none; } .content { padding:25px 17px 45px; } .hero-row { align-items:start; flex-direction:column; } h1 { font-size:26px; } .stats { grid-template-columns:repeat(2,1fr); gap:10px; } .stat { padding:15px; } .stat-number { font-size:23px; } .card-header { padding:17px; } th,td { padding-left:17px; padding-right:17px; } .filters { padding:0 17px 15px; } .filters input,.filters select { flex:1; min-width:130px; } .clock { font-size:39px; } }