:root{
  --navy:#16264F;
  --blue:#2C7FCB;
  --red:#C63A2B;
  --ink:#1E2430;
  --muted:#5B6472;
  --border:#E1E1E6;
  --bg:#F6F7F9;
  --surface:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}

/* Shared by the company/candidate portal topbars (few nav links, no
   grouping needed) and the admin sidebar below (many permission-gated
   modules — see .admin-shell / .admin-sidebar). */
.admin-brand{display:flex; align-items:center; gap:10px; font-weight:600; flex-shrink:0;}
.admin-brand img{height:22px; background:#fff; border-radius:5px; padding:3px 6px;}

.admin-topbar{
  background:var(--navy); color:#fff; padding:0 24px; display:flex;
  align-items:center; justify-content:space-between; height:56px; position:relative;
  flex-wrap:wrap;
}
.admin-nav-toggle-input, .admin-nav-toggle-label{display:none;}
.admin-nav-wrap{display:flex; align-items:center; gap:22px;}
.admin-nav{display:flex; gap:22px; flex-wrap:wrap;}
.admin-nav a{color:#C7D2E8; font-size:.88rem; font-weight:500; white-space:nowrap;}
.admin-nav a.active, .admin-nav a:hover{color:#fff;}
.admin-logout{display:flex; align-items:center;}
.admin-logout a.active, .admin-logout a:hover{color:#fff !important;}
.admin-logout button{background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; padding:6px 14px; border-radius:4px; font-size:.82rem; cursor:pointer; white-space:nowrap;}
.admin-logout button:hover{background:rgba(255,255,255,.12);}

@media (max-width:760px){
  .admin-nav-toggle-label{display:block; color:#fff; font-size:1.6rem; cursor:pointer; line-height:1; padding:14px 0;}
  .admin-nav-wrap{
    position:absolute; top:100%; left:0; right:0; z-index:100; background:var(--navy);
    flex-direction:column; align-items:flex-start; gap:16px;
    padding:8px 24px 22px; display:none;
  }
  .admin-nav-toggle-input:checked ~ .admin-nav-wrap{display:flex;}
  .admin-nav{flex-direction:column; gap:14px; width:100%;}
  .admin-logout{width:100%; flex-direction:column; align-items:flex-start; gap:12px;}
  .admin-logout a{margin-right:0 !important;}
  .admin-logout button{width:100%; padding:9px 14px;}
}

/* Admin panel only: left sidebar replacing the topbar above, since the
   module count grows past what a horizontal nav can hold cleanly. */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar-toggle-input{display:none;}

.admin-sidebar{
  width:230px; flex-shrink:0; background:var(--navy); color:#fff;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:100;
}
.admin-sidebar .admin-brand{padding:18px 20px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.1);}
.admin-sidebar .admin-brand img{flex-shrink:0;}

.admin-sidebar-nav{flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto;}
.admin-sidebar-nav a{
  color:#C7D2E8; font-size:.88rem; font-weight:500; padding:9px 12px; border-radius:6px; white-space:nowrap;
}
.admin-sidebar-nav a:hover{background:rgba(255,255,255,.07); color:#fff;}
.admin-sidebar-nav a.active{background:var(--red); color:#fff;}
.admin-sidebar-section{
  color:#7480A0; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:16px 12px 6px;
}
.admin-sidebar-section:first-of-type{padding-top:4px;}

.admin-sidebar-footer{border-top:1px solid rgba(255,255,255,.1); padding:14px 12px; display:flex; flex-direction:column; gap:6px; flex-shrink:0;}
.admin-sidebar-footer a{color:#C7D2E8; font-size:.85rem; padding:8px 12px; border-radius:6px;}
.admin-sidebar-footer a:hover, .admin-sidebar-footer a.active{background:rgba(255,255,255,.07); color:#fff;}
.admin-sidebar-footer button{
  background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; padding:8px 12px; border-radius:6px;
  font-size:.85rem; cursor:pointer; width:100%; text-align:left;
}
.admin-sidebar-footer button:hover{background:rgba(255,255,255,.12);}

.admin-sidebar-backdrop{display:none;}

.admin-main{flex:1; min-width:0;}
.admin-mobile-topbar{display:none;}

.admin-wrap{max-width:1200px; margin:0 auto; padding:32px 24px 60px;}
@media (max-width:600px){
  .admin-wrap{padding:22px 16px 40px;}
}

@media (max-width:900px){
  .admin-sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:4px 0 24px rgba(0,0,0,.25); z-index:110;
  }
  .admin-sidebar-toggle-input:checked ~ .admin-sidebar{transform:translateX(0);}
  .admin-sidebar-toggle-input:checked ~ .admin-sidebar-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:105;
  }
  .admin-mobile-topbar{
    display:flex; align-items:center; gap:14px; background:var(--navy); padding:0 20px; height:56px; flex-shrink:0;
  }
  .admin-mobile-topbar img{height:22px; background:#fff; border-radius:5px; padding:3px 6px;}
  .admin-sidebar-toggle-label{display:block; color:#fff; font-size:1.6rem; cursor:pointer; line-height:1;}
}
.admin-heading{font-size:1.4rem; font-weight:700; margin:0 0 6px;}
.admin-subheading{color:var(--muted); margin:0 0 28px; font-size:.92rem;}

.admin-card{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:22px;}
.admin-toolbar{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; align-items:end;}
.admin-toolbar .admin-field input, .admin-toolbar .admin-field select{width:100%; min-width:0;}
.admin-field{display:flex; flex-direction:column; gap:5px;}
.admin-field label{font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.admin-field input, .admin-field select{
  border:1px solid var(--border); border-radius:5px; padding:8px 10px; font-size:.88rem;
  min-width:170px; font-family:inherit; background:#fff; color:var(--ink);
}
.admin-field input:focus, .admin-field select:focus{outline:2px solid var(--blue); outline-offset:1px;}
@media (max-width:900px){
  .admin-toolbar{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .admin-toolbar{grid-template-columns:1fr;}
}

table.admin-table{width:100%; border-collapse:collapse; font-size:.87rem;}
table.admin-table th{
  text-align:left; padding:10px 12px; border-bottom:2px solid var(--border); color:var(--muted);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
table.admin-table td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
table.admin-table tr:hover td{background:#FAFBFC;}
.admin-empty{padding:40px; text-align:center; color:var(--muted);}

.pill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:600; white-space:nowrap;}
.pill-yes{background:rgba(46,134,72,.12); color:#2E8648;}
.pill-no{background:rgba(230,51,40,.08); color:var(--red);}
.pill-active{background:rgba(46,134,72,.12); color:#2E8648;}
.pill-inactive{background:rgba(91,100,114,.12); color:var(--muted);}
.pill-blue{background:rgba(44,127,203,.12); color:var(--blue);}

.admin-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:5px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer; font-family:inherit;
}
.admin-icon-btn svg{width:15px; height:15px;}
.admin-icon-btn:hover{background:var(--bg); color:var(--ink); text-decoration:none;}
.admin-icon-btn.danger:hover{background:rgba(230,51,40,.08); color:var(--red); border-color:var(--red);}

.admin-btn{
  display:inline-block; background:var(--navy); color:#fff; border:none; padding:9px 16px;
  border-radius:5px; font-size:.85rem; cursor:pointer; font-family:inherit;
}
.admin-btn:hover{background:#0e1b3a; text-decoration:none;}
.admin-btn-outline{background:transparent; color:var(--ink); border:1px solid var(--border);}
.admin-btn-outline:hover{background:var(--bg);}
.admin-btn-small{padding:5px 11px; font-size:.78rem;}
.admin-btn-danger{background:var(--red);}

.admin-pagination{margin-top:18px;}
.admin-pagination-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
}
.admin-pagination-summary{color:var(--muted); font-size:.82rem;}
.admin-pagination-controls{display:flex; align-items:center; gap:12px;}
.admin-pagination-page{color:var(--muted); font-size:.82rem; white-space:nowrap;}
.admin-btn[disabled]{opacity:.45; cursor:not-allowed;}

.admin-form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:16px;}
.admin-form-grid .admin-field > input{width:100%; min-width:0;}
/* A grid item's automatic minimum width otherwise defaults to its
   content's min-content size (e.g. a long unbroken comma-joined selection
   label), which can force this column — and the whole row/page — wider
   than intended even though the trigger button itself has overflow:hidden
   set. min-width:0 here lets that overflow rule actually take effect. */
.admin-form-grid > .admin-field{min-width:0;}
.field-full-width{grid-column:1 / -1;}
.admin-checkbox{display:flex; align-items:center; gap:8px; font-size:.88rem;}

/* Multi-select dropdown (collapsible checklist) — same component as the
   public site's .dropdown-select/.checklist (app.css), reimplemented here
   with the admin panel's own tokens since admin pages don't load app.css. */
.dropdown-select{position:relative; min-width:0;}
.dropdown-select-trigger{
  border:1px solid var(--border); border-radius:5px; padding:8px 10px; font-size:.88rem;
  width:100%; font-family:inherit; background:#fff; color:var(--ink);
  text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dropdown-select-trigger:focus{outline:2px solid var(--blue); outline-offset:1px;}
.dropdown-select-panel{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; background:var(--surface);
  border:1px solid var(--border); border-radius:5px; box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.checklist{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 14px;
  padding:12px; max-height:220px; overflow-y:auto;
}
.dropdown-select-panel .checklist{grid-template-columns:1fr;}
.checklist-item{display:flex; align-items:flex-start; gap:8px; font-size:.85rem; color:var(--ink); cursor:pointer;}
.checklist-item input{width:auto; min-width:20px; flex-shrink:0; margin-top:3px;}
.checklist-item-disabled{opacity:.45; cursor:not-allowed;}
.checklist-item-disabled input{cursor:not-allowed;}
.checklist-item-note{color:var(--muted); font-size:.78rem; margin:0;}

.admin-error{color:var(--red); font-size:.8rem; margin-top:4px;}
.admin-hint{color:var(--muted); font-size:.78rem; margin:4px 0 0;}
.admin-banner{padding:12px 16px; border-radius:6px; font-size:.88rem; margin-bottom:18px;}
.admin-banner-success{background:rgba(46,134,72,.1); border:1px solid #2E8648; color:#2E8648;}
.admin-banner-error{background:rgba(230,51,40,.08); border:1px solid var(--red); color:var(--red);}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy);}
.login-card{background:#fff; border-radius:10px; padding:40px 36px; width:100%; max-width:360px;}
.login-logo{display:flex; justify-content:center; margin-bottom:24px;}
.login-logo img{height:32px;}
.login-card h1{font-size:1.15rem; text-align:center; margin:0 0 24px;}
.login-field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
.login-field label{font-size:.8rem; color:var(--muted);}
.login-field input{border:1px solid var(--border); border-radius:5px; padding:10px 12px; font-size:.92rem;}
.login-submit{width:100%; padding:11px; margin-top:8px;}

.admin-toast{
  position:fixed; top:20px; right:20px; z-index:1000; min-width:260px; max-width:380px;
  padding:14px 18px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.15);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; font-size:.9rem;
}
.admin-toast-success{background:#2E8648; color:#fff;}
.admin-toast-error{background:var(--red); color:#fff;}
.admin-toast-close{background:none; border:none; color:inherit; font-size:1.1rem; line-height:1; cursor:pointer; opacity:.8; padding:0;}
.admin-toast-close:hover{opacity:1;}