@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#F2F1EE;
  --surface:#FFFFFF;
  --sidebar:#111111;
  --sidebar-hover:#1E1E1E;
  --sidebar-border:#2A2A2A;
  --accent:#E8A020;
  --accent-h:#D4911C;
  --text:#1A1A1A;
  --text2:#4A4A4A;
  --muted:#8A8A8A;
  --border:#E4E2DE;
  --ok:#0D8A5E;
  --ok-bg:#D1F5E9;
  --err:#D63E3E;
  --err-bg:#FDE8E8;
  --warn:#C67A00;
  --warn-bg:#FEF3D0;
  --info:#2060C8;
  --info-bg:#DDEAFF;
  --r:8px;
  --r-lg:14px;
  --sh:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);
  --tr:140ms ease;
}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.6;
  color:var(--text);background:var(--bg);
  margin:0;padding:0;
  -webkit-font-smoothing:antialiased;
}

/* ── AUTH PAGES ── */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:400px 1fr}
.auth-panel{
  background:var(--sidebar);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:2.5rem 2rem;position:sticky;top:0;min-height:100vh
}
.auth-logo{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.5px}
.auth-logo span{color:var(--accent)}
.auth-tagline{font-size:.9375rem;color:#666;line-height:1.6;margin-top:auto;padding-top:2rem}
.auth-foot{font-size:.75rem;color:#3A3A3A;padding-top:2rem}
.auth-form-wrap{
  display:flex;align-items:center;justify-content:center;
  padding:3rem 2rem;background:var(--surface)
}
.auth-form-inner{width:100%;max-width:380px}
.auth-title{font-size:1.4rem;font-weight:700;margin-bottom:.25rem;letter-spacing:-.3px}
.auth-sub{color:var(--muted);margin-bottom:1.75rem;font-size:.875rem}

/* ── FORM ── */
.f-field{margin-bottom:.875rem}
.f-label{display:block;font-weight:600;font-size:.8125rem;color:var(--text2);margin-bottom:.3125rem}
.f-input,.f-select{
  width:100%;padding:.5625rem .875rem;
  border:1px solid var(--border);border-radius:var(--r);
  font-family:inherit;font-size:.875rem;color:var(--text);
  background:#FAFAF9;transition:border-color var(--tr),box-shadow var(--tr);outline:none
}
.f-input:focus,.f-select:focus{
  border-color:#AAAAAA;box-shadow:0 0 0 3px rgba(0,0,0,.06);background:#fff
}
.f-input::placeholder{color:#BBBBBB}
.f-hint{font-size:.75rem;color:var(--muted);margin-top:.25rem}
.f-select-sm{
  padding:.25rem .5rem;font-size:.75rem;font-family:inherit;
  border:1px solid var(--border);border-radius:var(--r);
  background:#FAFAF9;color:var(--text);cursor:pointer
}

/* ── BUTTONS ── */
.v-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  padding:.5625rem 1rem;border-radius:var(--r);
  font-family:inherit;font-size:.875rem;font-weight:600;
  cursor:pointer;border:none;text-decoration:none;
  transition:background var(--tr),opacity var(--tr);white-space:nowrap;line-height:1
}
.v-btn-primary{background:var(--text);color:#fff}
.v-btn-primary:hover{background:#2A2A2A;color:#fff}
.v-btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.v-btn-ghost:hover{background:var(--bg);color:var(--text)}
.v-btn-danger{background:var(--err-bg);color:var(--err)}
.v-btn-danger:hover{background:#FBDBDB}
.v-btn-ok{background:var(--ok-bg);color:var(--ok)}
.v-btn-ok:hover{background:#BCF0DF}
.v-btn-sm{padding:.3125rem .625rem;font-size:.75rem}
.v-btn-lg{padding:.75rem 1.25rem;font-size:.9375rem}
.v-btn-full{width:100%}
.mt-half{margin-top:.5rem}

/* ── ALERTS ── */
.v-alert{
  padding:.6875rem .9375rem;border-radius:var(--r);font-size:.875rem;
  display:flex;align-items:flex-start;gap:.5rem;margin-bottom:1rem;
  border:1px solid transparent
}
.v-alert-err{background:var(--err-bg);color:var(--err);border-color:#F5C6C6}
.v-alert-ok{background:var(--ok-bg);color:var(--ok);border-color:#AADDCC}
.v-alert-info{background:var(--info-bg);color:var(--info);border-color:#BBD0EE}

/* ── BADGES ── */
.v-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.1875rem .625rem;border-radius:100px;
  font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase
}
.v-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block}
.badge-pending{background:var(--warn-bg);color:var(--warn)}
.badge-active{background:var(--info-bg);color:var(--info)}
.badge-approved{background:var(--ok-bg);color:var(--ok)}
.badge-denied{background:var(--err-bg);color:var(--err)}

/* ── DIVIDER ── */
.v-divider{position:relative;text-align:center;margin:1.25rem 0}
.v-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.v-divider span{position:relative;background:var(--surface);padding:0 .75rem;font-size:.8125rem;color:var(--muted)}

/* ── APP LAYOUT (admin) ── */
.app-wrap{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.sidebar{
  background:var(--sidebar);position:sticky;top:0;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;padding:1.5rem 0
}
.sidebar-logo{font-size:1.05rem;font-weight:800;color:#fff;padding:0 1.25rem 1.5rem;letter-spacing:-.3px}
.sidebar-logo span{color:var(--accent)}
.sidebar-section{
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#444;padding:.75rem 1.25rem .375rem
}
.sidebar-item{
  display:flex;align-items:center;gap:.625rem;
  padding:.5rem 1.25rem;color:#888;text-decoration:none;
  font-size:.875rem;font-weight:500;position:relative;
  transition:color var(--tr),background var(--tr)
}
.sidebar-item:hover{color:#DDD;background:var(--sidebar-hover)}
.sidebar-item.active{color:#fff;background:var(--sidebar-hover)}
.sidebar-item.active::before{
  content:'';position:absolute;left:0;top:5px;bottom:5px;
  width:3px;background:var(--accent);border-radius:0 2px 2px 0
}
.sidebar-item i{font-size:1rem;opacity:.8;flex-shrink:0}
.sidebar-badge{
  margin-left:auto;background:var(--accent);color:#111;
  font-size:.625rem;font-weight:800;padding:.1rem .4rem;border-radius:100px
}
.sidebar-sep{border:none;border-top:1px solid var(--sidebar-border);margin:.75rem 1.25rem}
.sidebar-foot{
  margin-top:auto;padding:.875rem 1.25rem 0;
  border-top:1px solid var(--sidebar-border)
}
.sidebar-uname{font-size:.8125rem;font-weight:600;color:#CCC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-urole{font-size:.6875rem;color:#555;text-transform:capitalize}

/* ── MAIN CONTENT ── */
.app-main{padding:2rem;min-height:100vh}
.page-header{margin-bottom:1.5rem}
.page-title{font-size:1.1875rem;font-weight:700;letter-spacing:-.3px;margin:0 0 .2rem}
.page-sub{color:var(--muted);font-size:.875rem}

/* ── CARDS ── */
.v-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.v-card-header{
  padding:.875rem 1.25rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  font-weight:600;font-size:.875rem;color:var(--text2)
}
.v-card-body{padding:1.25rem}
.v-card-title{font-size:.875rem;font-weight:700;color:var(--text2);margin-bottom:1rem}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.875rem;margin-bottom:1.5rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.125rem 1.25rem}
.stat-val{font-size:1.75rem;font-weight:800;letter-spacing:-.5px;line-height:1;margin-bottom:.2rem}
.stat-lbl{font-size:.75rem;color:var(--muted);font-weight:500}
.stat-warn .stat-val{color:var(--warn)}
.stat-info .stat-val{color:var(--info)}
.stat-err .stat-val{color:var(--err)}
.stat-ok .stat-val{color:var(--ok)}

/* ── TABLE ── */
.v-table-wrap{overflow-x:auto}
.v-table{width:100%;border-collapse:collapse}
.v-table th{
  text-align:left;font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:.625rem 1rem;border-bottom:1px solid var(--border);
  background:#FAFAF8;white-space:nowrap
}
.v-table td{
  padding:.6875rem 1rem;border-bottom:1px solid var(--border);
  font-size:.875rem;vertical-align:middle
}
.v-table tbody tr:last-child td{border-bottom:none}
.v-table tbody tr:hover td{background:#FAFAF8}
.td-name{font-weight:600;color:var(--text)}
.td-email{font-size:.75rem;color:var(--muted)}
.td-login{font-size:.6875rem;color:#AAA;font-family:'SF Mono','Fira Code',monospace}

/* ── TOPBAR (cabinet) ── */
.topbar{
  background:var(--sidebar);padding:.875rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100
}
.topbar-logo{font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-.3px}
.topbar-logo span{color:var(--accent)}

/* ── CABINET ── */
.cab-main{max-width:660px;margin:0 auto;padding:2rem 1.5rem}
.status-block{
  padding:1.5rem;border-radius:var(--r-lg);border:1px solid;
  margin-bottom:1.25rem;display:flex;gap:1.125rem;align-items:flex-start
}
.status-block-pending{background:var(--warn-bg);border-color:#EDCA7A}
.status-block-approved{background:var(--ok-bg);border-color:#8DD5BB}
.status-block-denied{background:var(--err-bg);border-color:#F0B0B0}
.status-block-active{background:var(--info-bg);border-color:#9DBDE8}
.status-ico{font-size:1.75rem;line-height:1;flex-shrink:0;margin-top:.1rem}
.status-title{font-size:.9375rem;font-weight:700;margin-bottom:.3rem}
.status-text{font-size:.875rem;opacity:.85;line-height:1.55;margin:0}
.info-row{display:flex;align-items:center;padding:.5625rem 0;border-bottom:1px solid var(--border)}
.info-row:last-child{border-bottom:none}
.info-lbl{font-size:.8125rem;color:var(--muted);font-weight:500;width:130px;flex-shrink:0}
.info-val{font-size:.875rem;font-weight:500;color:var(--text)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:3.5rem 1rem;color:var(--muted)}
.empty-state i{font-size:2rem;display:block;margin-bottom:.625rem;opacity:.35}
.empty-state p{margin:0;font-size:.875rem}

/* ── STEP HEADER (register) ── */
.step-hdr{
  display:flex;align-items:center;gap:.625rem;font-weight:600;
  font-size:.875rem;color:var(--text2);padding:.875rem 0;
  border-bottom:1px solid var(--border);margin-bottom:1.125rem
}
.step-num{
  width:22px;height:22px;border-radius:50%;background:var(--text);color:#fff;
  font-size:.6875rem;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0
}

/* ── SUCCESS BLOCK (register) ── */
.success-block{text-align:center;padding:2rem 0}
.success-ico{font-size:3rem;display:block;margin-bottom:1rem}

/* ── UTILS ── */
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.875rem}
.mb-4{margin-bottom:1.25rem}
.gap-2{gap:.5rem}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-panel{display:none}
  .auth-form-wrap{padding:2rem 1.25rem}
  .app-wrap{display:block}
  .sidebar{height:auto;position:sticky;top:0;z-index:200;flex-direction:row;align-items:center;padding:.75rem 1.25rem;gap:.75rem;overflow-x:auto;overflow-y:visible}
  .sidebar-logo{padding:0;font-size:.9rem;flex-shrink:0}
  .sidebar nav{display:flex;flex-direction:row;gap:.25rem;overflow-x:auto;flex:1}
  .sidebar-item{padding:.375rem .625rem;font-size:.75rem;white-space:nowrap;border-radius:6px}
  .sidebar-item.active::before{display:none}
  .sidebar-section,.sidebar-sep{display:none}
  .sidebar-foot{margin-top:0 !important;padding:0 !important;border-top:none;margin-left:auto;flex-shrink:0}
  .sidebar-uname,.sidebar-urole{display:none}
  .main-content,.app-main{padding:1.25rem}
  .page-title{font-size:1rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:.625rem;margin-bottom:1.25rem}
  .stat-card{padding:.875rem 1rem}
  .stat-val{font-size:1.375rem}
  .v-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .v-table th,.v-table td{padding:.5rem .625rem;font-size:.8rem}
  .td-actions form{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}
  .cab-main{padding:1rem}
  .status-block{flex-direction:column;gap:.625rem;padding:1rem}
  .info-lbl{width:90px;font-size:.75rem}
  .info-val{font-size:.8125rem}
  .v-card-body{padding:1rem}
  .topbar{padding:.625rem 1rem}
}
@media(max-width:480px){
  .auth-form-wrap{padding:1.5rem 1rem}
  .auth-title{font-size:1.1875rem}
  .f-input,.f-select{font-size:16px}
  .info-row{flex-direction:column;align-items:flex-start;gap:.1rem;padding:.5rem 0}
  .info-lbl{width:auto}
  .v-btn-sm{padding:.3125rem .5rem}
}