/* Staff portal shell CSS */
:root{
  --navy:#152948;--navy-dark:#0E1D33;--green:#2E9E44;--green-light:#3FC15A;--green-bg:#E8F7EC;
  --white:#ffffff;--bg:#F5F7FA;--card-bg:#ffffff;--border:#E5E9EF;
  --text-dark:#152948;--text-mid:#4A5568;--text-light:#8A93A6;
  --red:#E24B4A;--amber:#EF9F27;--blue:#378ADD;--purple:#7F77DD;--pink:#E879A0;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text-dark);-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;}
a{text-decoration:none;color:inherit;}

/* ── Sidebar ── */
.sidebar{
  width:240px;
  background:var(--white);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  position:fixed;
  top:0;left:0;
  height:100vh;
  overflow-y:auto;
  z-index:200;
  transition:transform 0.25s cubic-bezier(0.23,1,0.32,1);
}
.sidebar-logo{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.sidebar-logo-mark{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.sidebar-section{font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--text-light);padding:16px 20px 6px;text-transform:uppercase;}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13.5px;font-weight:500;color:var(--text-dark);cursor:pointer;transition:background 0.15s,color 0.15s;}
.sidebar-item i{font-size:17px;color:var(--text-light);flex-shrink:0;}
.sidebar-item:hover{background:var(--bg);color:var(--green);}
.sidebar-item:hover i{color:var(--green);}
.sidebar-item.active{background:var(--green);color:var(--white);font-weight:700;}
.sidebar-item.active i{color:var(--white);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(14,29,51,0.4);z-index:199;}
.sidebar-overlay.show{display:block;}

/* ── Main layout ── */
.main{
  margin-left:240px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── Topbar ── */
.topbar{
  height:64px;
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 20px;
  position:sticky;
  top:0;
  z-index:100;
  gap:0;
}
.menu-btn{display:none;font-size:22px;color:var(--text-dark);cursor:pointer;margin-right:12px;flex-shrink:0;width:36px;height:36px;align-items:center;justify-content:center;}
.topbar-logo-zone{display:flex;align-items:center;gap:10px;padding-right:20px;border-right:1px solid var(--border);flex-shrink:0;}
.topbar-logo-circle{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.topbar-logo-circle img{width:100%;height:100%;object-fit:cover;}
.topbar-logo-text{font-size:13px;font-weight:700;color:var(--text-dark);white-space:nowrap;}
.topbar-page-zone{display:flex;flex-direction:column;justify-content:center;padding:0 20px;border-right:1px solid var(--border);flex-shrink:0;}
.topbar-page-title{font-size:15px;font-weight:700;color:var(--text-dark);}
.topbar-page-sub{font-size:11px;color:var(--text-light);margin-top:1px;}
.topbar-spacer{flex:1;}
.topbar-actions{display:flex;align-items:center;gap:4px;padding-left:16px;border-left:1px solid var(--border);}
.topbar-profile-btn{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border-radius:20px;cursor:pointer;transition:background 0.15s;position:relative;}
.topbar-profile-btn:hover{background:var(--bg);}
.topbar-avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.topbar-profile-name{font-size:13px;font-weight:600;color:var(--text-dark);line-height:1.2;}
.topbar-profile-role{font-size:11px;color:var(--text-light);line-height:1.2;}
.topbar-drop{position:fixed;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);z-index:300;overflow:hidden;display:none;box-shadow:0 8px 32px rgba(0,0,0,0.1);min-width:200px;top:72px;right:20px;}
.topbar-drop.open{display:block;}
.topbar-drop-head{padding:12px 14px;border-bottom:1px solid var(--border);}
.topbar-drop-org{font-size:13px;font-weight:600;color:var(--text-dark);}
.topbar-drop-email{font-size:11px;color:var(--text-light);margin-top:2px;}
.topbar-drop-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--text-dark);cursor:pointer;transition:background 0.1s;white-space:nowrap;}
.topbar-drop-item:hover{background:var(--bg);}
.topbar-drop-item i{font-size:16px;color:var(--text-light);}
.topbar-drop-item.danger{color:var(--red);}
.topbar-drop-item.danger i{color:var(--red);}
.topbar-drop-sep{height:1px;background:var(--border);}

/* ── Content ── */
.content{padding:28px;flex:1;}

/* ── Footer ── */
.app-footer{height:44px;background:var(--white);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;}
.app-footer-left{display:flex;align-items:center;gap:12px;}
.app-footer-copy{font-size:11.5px;color:var(--text-light);}
.app-footer-version{font-size:11px;color:#C0C8D4;}
.app-footer-dot{width:3px;height:3px;border-radius:50%;background:#C0C8D4;}
.app-footer-right{display:flex;align-items:center;gap:12px;}
.app-footer-link{font-size:11.5px;color:var(--text-light);cursor:pointer;}
.app-footer-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--green);}
.app-footer-status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

/* ── Cards ── */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;}
.card-title{font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:16px;}

/* ── Common UI ── */
.btn-primary{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;padding:11px 22px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:700;cursor:pointer;border:none;transition:background 0.15s;}
.btn-primary:hover{background:#268A3B;}
.btn-outline{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--text-dark);padding:10px 20px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);transition:border-color 0.15s;}
.btn-outline:hover{border-color:var(--green);color:var(--green);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dark);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;color:var(--text-dark);background:var(--white);transition:border-color 0.15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-amber{background:#FEF9EC;color:#B7791F;}
.badge-red{background:#FCEBEB;color:var(--red);}
.badge-blue{background:#E6F1FB;color:var(--blue);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-dark);color:#fff;padding:12px 20px;border-radius:var(--radius-md);font-size:13px;font-weight:500;opacity:0;transition:all 0.25s;z-index:999;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.skeleton{background:linear-gradient(90deg,var(--border) 25%,#eef1f5 37%,var(--border) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-lg);}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ── MOBILE ── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .menu-btn{display:flex;}
  .topbar-logo-text{display:none;}
  .topbar-page-sub{display:none;}
  .topbar-profile-name{display:none;}
  .topbar-profile-role{display:none;}
  .topbar-page-zone{border-right:none;}
  .topbar-actions{border-left:none;padding-left:4px;}
  .content{padding:16px;}
  .app-footer-version,.app-footer-dot{display:none;}
}