:root {
  --blue-900:#073763;
  --blue-800:#00559b;
  --blue-700:#0879bd;
  --blue-600:#0a86c9;
  --blue-100:#eaf5fc;
  --bg:#f3f7fb;
  --panel:#ffffff;
  --ink:#0e2340;
  --muted:#6c8099;
  --line:#dce7f1;
  --shadow:0 18px 50px rgba(15,48,78,.09);
  --green:#12a364;
  --green-bg:#e7f8ef;
  --amber:#b76b00;
  --amber-bg:#fff2d7;
  --red:#d64242;
  --red-bg:#ffe6e6;
  --violet:#6c4ab6;
  --violet-bg:#eee8fb;
  --radius:20px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.hidden{display:none!important}
.app-root{min-height:100vh}
.login-page{
  min-height:100vh;display:grid;place-items:center;padding:36px;
  background:
    radial-gradient(circle at 15% 15%,rgba(10,134,201,.18),transparent 28%),
    radial-gradient(circle at 90% 90%,rgba(0,85,155,.13),transparent 34%),
    #f5f9fc;
}
.login-shell{
  width:min(100%,980px);min-height:620px;display:grid;grid-template-columns:1fr 1.05fr;
  overflow:hidden;border:1px solid #d3e2ee;border-radius:28px;background:white;box-shadow:0 28px 80px rgba(17,54,87,.14)
}
.login-brand{
  position:relative;overflow:hidden;padding:70px 56px;display:flex;flex-direction:column;justify-content:center;
  color:#fff;background:linear-gradient(145deg,#094d7c,#0879bd 70%,#1099d4)
}
.login-brand:after{
  content:"";position:absolute;width:450px;height:450px;border:1px solid rgba(255,255,255,.12);
  border-radius:50%;right:-250px;bottom:-190px;box-shadow:0 0 0 80px rgba(255,255,255,.035),0 0 0 150px rgba(255,255,255,.025)
}
.brand-mark{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);font-size:28px;font-weight:800}
.login-brand .eyebrow{margin:36px 0 10px;font-size:12px;letter-spacing:.16em;font-weight:800;color:#c6e9fb}
.login-brand h1{margin:0;font-size:48px;line-height:1.03;max-width:360px}
.login-brand>p:last-of-type{font-size:15px;line-height:1.8;max-width:360px;color:#d9f0fb}
.flow-mini{display:flex;align-items:center;gap:12px;margin-top:48px;font-size:11px;font-weight:700;color:#e6f6fd}
.flow-mini span.line{height:1px;width:34px;background:rgba(255,255,255,.35)}
.flow-mini i{display:inline-block;width:8px;height:8px;border:2px solid #fff;border-radius:50%;margin-right:6px}
.login-form{padding:70px 64px;display:flex;flex-direction:column;justify-content:center}
.page-eyebrow{margin:0 0 12px;color:var(--blue-700);font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.login-form h2{margin:0 0 12px;font-size:35px;line-height:1.12}
.subcopy{margin:0 0 28px;color:var(--muted);line-height:1.7;font-size:14px}
.field label{display:block;margin:0 0 8px;font-size:12px;font-weight:700}
.input-shell{display:flex;border:1px solid #ceddea;border-radius:14px;overflow:hidden;background:white;transition:.2s}
.input-shell:focus-within{border-color:#4aa8da;box-shadow:0 0 0 3px rgba(10,134,201,.1)}
.input-shell span{width:54px;display:grid;place-items:center;color:#0073b8;font-weight:800;border-right:1px solid #e2ebf2}
.input-shell input{width:100%;padding:16px;border:0;outline:0;color:var(--ink)}
.primary-btn,.secondary-btn,.danger-btn,.success-btn{
  border-radius:12px;min-height:44px;padding:0 18px;border:1px solid transparent;font-weight:750;transition:.18s
}
.primary-btn{color:white;background:linear-gradient(135deg,var(--blue-800),var(--blue-700));box-shadow:0 12px 26px rgba(0,85,155,.18)}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.secondary-btn{background:white;border-color:#cbdbe7;color:var(--blue-800)}
.secondary-btn:hover{background:#f4f9fc}
.danger-btn{background:#fff;border-color:#f0b8b8;color:#c62f2f}
.success-btn{background:#fff;border-color:#a5dfbf;color:#098147}
.login-btn{width:100%;margin-top:18px}
.demo-note{margin-top:22px;padding:14px 16px;border:1px solid #dbe8f1;border-radius:14px;background:#f8fbfd;color:#627891;font-size:11px;line-height:1.6}
.demo-note strong{color:#0069a9;margin-right:8px}
.demo-users{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.demo-chip{border:1px solid #d8e5ef;background:white;border-radius:999px;padding:8px 11px;font-size:10px;color:#476079}
.demo-chip:hover{background:#edf7fd;color:#005b9b}
.error-box,.success-box,.info-box{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:12px}
.error-box{background:var(--red-bg);color:#a92828;border:1px solid #f4c8c8}
.success-box{background:var(--green-bg);color:#087746;border:1px solid #bde8d0}
.info-box{background:#edf6fc;color:#315c7d;border:1px solid #d2e8f5}

.shell{min-height:100vh}
.topbar{
  height:92px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  color:#fff;background:linear-gradient(135deg,#075a93,#0b83c5)
}
.brand{display:flex;align-items:center;gap:15px}.brand .brand-mark{width:50px;height:50px;font-size:22px;border-radius:15px}
.brand-text p{margin:0 0 3px;color:#cceafa;font-size:11px;letter-spacing:.1em;font-weight:800;text-transform:uppercase}
.brand-text h1{margin:0;font-size:22px}
.top-actions{display:flex;align-items:center;gap:10px}
.switch-btn{height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:rgba(255,255,255,.1);color:white;font-size:11px;font-weight:700}
.user-summary{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0066a7;font-weight:800}
.user-meta strong{display:block;font-size:12px}.user-meta span{font-size:10px;color:#d6effb}

.layout{display:flex;min-height:calc(100vh - 92px)}
.sidebar{width:250px;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;transition:.22s;overflow:hidden}
.sidebar.collapsed{width:80px}
.side-head{height:78px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #e7eef4}
.menu-btn{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;border:1px solid #d4e3ed;background:#f7fbfd;color:#006dae;font-size:22px}
.side-title{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#61758d;white-space:nowrap}
.nav{padding:20px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.nav-btn{height:52px;display:flex;align-items:center;gap:12px;border:0;border-radius:13px;background:transparent;color:#425871;font-weight:700;text-align:left;padding:0 14px;white-space:nowrap}
.nav-btn:hover{background:#f0f8fd;color:#0068a9}
.nav-btn.active{background:linear-gradient(135deg,#eaf5fb,#f5fafd);color:#005b9a;box-shadow:inset 3px 0 #0785c9}
.nav-icon{width:24px;text-align:center;font-size:18px}
.sidebar.collapsed .side-title,.sidebar.collapsed .nav-label,.sidebar.collapsed .role-card{display:none}
.sidebar.collapsed .nav-btn{justify-content:center;padding:0}
.role-card{margin:0 14px 18px;padding:16px;border-radius:14px;background:linear-gradient(135deg,#edf7fd,#e5f2fa)}
.role-card strong{display:block;color:#0062a0;font-size:12px;margin-bottom:4px}.role-card span{font-size:10px;color:#70859b}

.main{flex:1;min-width:0;background:
  radial-gradient(circle at top right,rgba(0,113,188,.05),transparent 30%),var(--bg)}
.page-wrap{padding:34px;max-width:1500px;margin:0 auto}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.page-header h2{margin:4px 0 8px;font-size:clamp(27px,3vw,38px);line-height:1.05}
.page-header p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:700px}
.card{background:white;border:1px solid #dbe6ef;border-radius:var(--radius);box-shadow:var(--shadow)}
.section-card{padding:26px;margin-bottom:20px}
.section-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #e5edf3;margin-bottom:20px}
.step-num{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#eaf5fc;color:#006bae;font-weight:800;font-size:12px}
.section-head h3{margin:0 0 4px;font-size:18px}.section-head p{margin:0;color:var(--muted);font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-field label{display:block;margin-bottom:7px;font-size:11px;font-weight:750;color:#243a55}
.form-field input,.form-field select,.form-field textarea{
  width:100%;border:1px solid #d1e0eb;border-radius:12px;background:#fff;color:var(--ink);padding:13px 14px;outline:0
}
.form-field textarea{min-height:110px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:#4da8d8;box-shadow:0 0 0 3px rgba(7,132,200,.08)}
.full{grid-column:1/-1}
.employee-found{position:relative;padding:22px;border-radius:16px;border:1px solid #bfe4cf;background:linear-gradient(135deg,#f0fbf5,#fbfffd);display:grid;grid-template-columns:auto 1fr;gap:16px}
.employee-badge{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:#0575b7;color:white;font-weight:800}
.employee-found h4{margin:4px 0 4px}.employee-found .found{font-size:11px;color:#07804c;font-weight:800;letter-spacing:.07em}
.employee-meta{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:15px;border-top:1px solid #d8eee1;padding-top:14px;color:#5c7087;font-size:11px}
.employee-meta strong{display:block;color:#223751;margin-top:5px;font-size:12px}
.verified{position:absolute;top:18px;right:18px;padding:8px 11px;border-radius:999px;background:#dff5e9;color:#07804c;font-weight:800;font-size:10px}
.action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.stat{padding:20px;border:1px solid #dce7f0;border-radius:17px;background:rgba(255,255,255,.88);box-shadow:0 10px 30px rgba(25,62,96,.06)}
.stat span{display:block;color:#74879d;font-size:10px;font-weight:750;margin-bottom:8px}.stat strong{font-size:27px}
.toolbar{padding:18px;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:12px;border-bottom:1px solid #e5edf3}
.searchbox{display:flex;align-items:center;gap:9px;border:1px solid #d3e0e9;border-radius:12px;padding:0 13px;background:white}
.searchbox input{height:44px;border:0;outline:0;width:100%}
.toolbar select{height:44px;border:1px solid #d3e0e9;border-radius:12px;padding:0 12px;background:white}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:980px}
th{padding:14px 16px;text-align:left;background:#f3f7fa;color:#62758b;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
td{padding:16px;border-top:1px solid #e8eef3;font-size:12px;color:#334a63}
tbody tr:hover{background:#fbfdff}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}
.badge.low,.badge.resolved{background:var(--green-bg);color:#087849}
.badge.medium,.badge.pending{background:var(--amber-bg);color:#a66200}
.badge.high,.badge.rejected{background:var(--red-bg);color:#bf3535}
.badge.progress{background:#e5f0ff;color:#255ea8}.badge.open{background:#edf1f5;color:#637488}.badge.approved{background:#e8f6ef;color:#087849}
.icon-action{width:36px;height:36px;border-radius:10px;border:1px solid #cfe0eb;background:#fff;color:#006eb0;margin-right:6px}
.icon-action:hover{background:#edf7fd}
.table-foot{display:flex;justify-content:space-between;align-items:center;padding:16px;color:#6e8298;font-size:10px}

.details-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.back-btn{border:0;background:transparent;color:#006aa9;font-weight:700;font-size:11px;padding:0 0 10px}
.request-id{font-size:11px;color:#6f8298}.title-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.title-line h2{margin:0;font-size:29px}
.workflow{position:relative;padding:24px 24px 20px;overflow:hidden}
.workflow-line{position:absolute;left:9%;right:9%;top:57px;height:3px;background:#e2eaf0;border-radius:3px}
.workflow-fill{height:100%;background:linear-gradient(90deg,#0eb06e,#0a83c6);border-radius:3px;transition:width .5s ease}
.steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.workflow-step{text-align:center}
.step-circle{width:46px;height:46px;margin:0 auto 9px;border:2px solid #cfdce6;border-radius:50%;display:grid;place-items:center;background:white;color:#7890a5;font-weight:800;transition:.3s}
.workflow-step.done .step-circle{border-color:#12a364;background:#e8f8f0;color:#078049}
.workflow-step.current .step-circle{border-color:#0a83c6;color:#0870aa;box-shadow:0 0 0 7px rgba(10,131,198,.09);animation:pulse 1.8s infinite}
.workflow-step.rejected .step-circle{border-color:#e45d5d;background:#fff0f0;color:#c73737}
.workflow-step strong{display:block;font-size:11px}.workflow-step span{font-size:9px;color:#7b8da0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(10,131,198,.07)}50%{box-shadow:0 0 0 11px rgba(10,131,198,.02)}}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.info-item{padding:17px;border-right:1px solid #e6edf2;border-bottom:1px solid #e6edf2}.info-item:nth-child(3n){border-right:0}
.info-item span{display:block;font-size:9px;color:#778a9e;margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}.info-item strong{font-size:12px}
.detail-grid{display:grid;grid-template-columns:1.45fr .8fr;gap:20px}
.panel{padding:22px}
.panel h3{margin:0 0 5px;font-size:17px}.panel>p{margin:0 0 18px;color:#788b9f;font-size:11px}
.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.decision-card{padding:15px;border:1px solid #d6e3ec;border-radius:13px;background:white;text-align:left}
.decision-card.active.approve{border-color:#56c68c;background:#effbf5}.decision-card.active.reject{border-color:#ee8585;background:#fff3f3}
.timeline{position:relative;padding-left:22px}.timeline:before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:#e0e9ef}
.timeline-item{position:relative;padding:0 0 18px 14px}.timeline-item:before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:#0a83c6;border:3px solid #e9f5fb}
.timeline-item strong{font-size:11px}.timeline-item p{margin:4px 0 0;color:#71859a;font-size:10px;line-height:1.5}
.alert-reason{margin-top:14px;padding:14px;border-radius:12px;background:#fff1f1;color:#a93333;font-size:11px;border:1px solid #f2c8c8}

.employee-layout{display:grid;grid-template-columns:1fr;gap:18px}
.employee-form{padding:22px}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;padding:16px;border-bottom:1px solid #e5edf3}
.filters input,.filters select{height:42px;border:1px solid #d3e0e9;border-radius:11px;padding:0 12px;background:white}
.status-dot{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:750}.status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#10a561}.status-dot.inactive:before{background:#b0bcc7}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,29,45,.45);display:grid;place-items:center;padding:20px;z-index:50}
.modal{width:min(100%,480px);background:white;border-radius:19px;padding:25px;box-shadow:0 25px 80px rgba(0,0,0,.2)}
.modal h3{margin:0 0 8px}.modal p{color:#6f8195;font-size:12px;line-height:1.6}
.toast{position:fixed;right:24px;bottom:24px;z-index:70;padding:14px 18px;border-radius:13px;background:#0c2d45;color:white;box-shadow:0 16px 50px rgba(0,0,0,.22);font-size:12px;animation:toastIn .25s ease}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.footer-note{padding:18px 0 0;text-align:center;color:#8a9aad;font-size:10px}

@media(max-width:1000px){
  .sidebar{width:80px}.side-title,.nav-label,.role-card{display:none}.nav-btn{justify-content:center;padding:0}
  .page-wrap{padding:24px}.detail-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .login-page{padding:15px}.login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-form{padding:40px 25px}
  .topbar{height:auto;min-height:78px;padding:14px}.user-meta{display:none}.switch-btn{padding:0 10px}
  .layout{display:block}.sidebar{position:fixed;left:0;top:78px;bottom:0;z-index:40;transform:translateX(-100%);width:260px;box-shadow:15px 0 40px rgba(0,0,0,.15)}
  .sidebar.mobile-open{transform:none}.sidebar.collapsed{width:260px}.sidebar.collapsed .side-title,.sidebar.collapsed .nav-label,.sidebar.collapsed .role-card{display:block}.sidebar.collapsed .nav-btn{justify-content:flex-start;padding:0 14px}
  .page-wrap{padding:18px 14px}.page-header{flex-direction:column}.page-header .primary-btn{width:100%}
  .form-grid,.form-grid.three,.info-grid,.employee-meta{grid-template-columns:1fr}.info-item{border-right:0}.toolbar,.filters{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}.workflow-line{display:none}.workflow-step{padding:10px;border:1px solid #e2eaf0;border-radius:13px}
}