/* =====================================================
   EZELEX MANAGEMENT CENTRE
   PROFESSIONAL RESPONSIVE DESIGN
===================================================== */

* {
  box-sizing: border-box;
}

:root {
  --navy: #14243c;
  --navy-light: #203653;
  --blue: #2860a8;
  --blue-light: #eaf1fb;
  --background: #f3f6fb;
  --white: #ffffff;
  --text: #1b2b42;
  --muted: #718096;
  --border: #e1e7ef;
  --green: #16865c;
  --shadow: 0 8px 28px rgba(22, 43, 70, 0.07);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* =====================================================
   LOGIN SCREEN
===================================================== */

.wrap {
  width: 100%;
  min-height: 100vh;
}

#login {
  max-width: 470px;
  margin: 7vh auto;
  padding: 38px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--shadow);
}

.eyebrow {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

h1 {
  margin: 8px 0;
  font-size: 27px;
  font-weight: 750;
}

h2 {
  font-size: 23px;
  margin: 0;
}

h3 {
  font-size: 16px;
  margin-top: 0;
}

p {
  color: var(--muted);
}

label {
  display: block;
  margin: 17px 0 6px;
  font-weight: 700;
}

input {
  width: 100%;
  padding: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(40, 96, 168, 0.1);
}

button {
  font-family: inherit;
  cursor: pointer;
}

#login button {
  width: 100%;
  padding: 13px;
  margin-top: 15px;
  border: none;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  font-weight: 700;
}

#login button:hover {
  background: #1d4c89;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.secondary {
  background: #e8edf5 !important;
  color: var(--navy) !important;
}

.notice {
  padding: 12px;
  margin: 15px 0;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 8px;
}

.notice.error {
  background: #fff0f0;
  color: #a42626;
}

.small {
  font-size: 12px;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =====================================================
   MANAGEMENT DASHBOARD
===================================================== */

#dashboard {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

#dashboard[hidden],
#login[hidden],
[hidden] {
  display: none !important;
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {
  width: 265px;
  min-width: 265px;
  background: var(--navy);
  color: white;
  padding: 25px 17px;
  display: flex;
  flex-direction: column;
}

.brand {
  padding: 5px 12px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.brand h2 {
  font-size: 25px;
  letter-spacing: 2px;
  margin: 0;
  color: white;
}

.brand small {
  display: block;
  margin-top: 4px;
  color: #a9bfdc;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
}

.label {
  margin: 24px 10px 9px;
  color: #8fa9c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.sidebar nav {
  flex: 1;
}

.sidebar nav button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 3px 0;
  text-align: left;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #d9e4f2;
  font-size: 12px;
  font-weight: 600;
  transition: 0.2s;
}

.sidebar nav button:hover {
  background: rgba(255,255,255,0.09);
  color: white;
}

.sidebar nav button.active {
  background: #315f9c;
  color: white;
}

.logout {
  width: 100%;
  padding: 12px;
  margin-top: 25px;
  background: #8e3540;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
}

.foot {
  display: block;
  margin-top: 15px;
  color: #8fa9c8;
  font-size: 10px;
  text-align: center;
}

/* =====================================================
   MAIN CONTENT
===================================================== */

.main-content {
  flex: 1;
  min-width: 0;
  padding: 30px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 23px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border);
}

.topbar small {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.topbar h1 {
  font-size: 25px;
  margin: 5px 0;
}

#signedIn {
  margin: 4px 0 0;
  font-size: 11px;
}

.badge {
  display: inline-block;
  padding: 7px 11px;
  background: #eaf1fb;
  color: #285b9d;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* =====================================================
   WELCOME SECTION
===================================================== */

.welcome {
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
  background: linear-gradient(120deg, #183451, #2860a8);
  color: white;
  box-shadow: var(--shadow);
}

.welcome small {
  color: #c7d8ef;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.welcome h2 {
  margin: 10px 0;
  font-size: clamp(23px, 3vw, 32px);
  color: white;
}

.welcome p {
  max-width: 650px;
  color: #e0eaf7;
}

/* =====================================================
   SECTION HEADINGS
===================================================== */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 30px 0 18px;
}

.section-head h2 {
  font-size: 19px;
}

.section-head p {
  font-size: 12px;
  margin: 5px 0 0;
}

/* =====================================================
   FINANCIAL CARDS
===================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.stat-card {
  padding: 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.stat-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.stat-card strong {
  display: block;
  margin: 12px 0;
  color: var(--navy);
  font-size: 27px;
}

.stat-card p {
  margin: 0;
  font-size: 11px;
}

/* =====================================================
   MANAGEMENT DEPARTMENTS
===================================================== */

.department-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.department {
  padding: 22px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: 0.2s;
}

.department:hover {
  transform: translateY(-3px);
  border-color: #a8bfdf;
}

.department span {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.department h3 {
  margin: 15px 0 7px;
  color: var(--navy);
}

.department p {
  margin: 0;
  font-size: 12px;
}

/* =====================================================
   BOTTOM INFORMATION PANELS
===================================================== */

.bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.panel {
  padding: 23px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.panel h3 {
  color: var(--navy);
}

.panel ul {
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}

.panel li {
  margin-bottom: 10px;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.status-row strong {
  color: var(--blue);
  font-size: 9px;
  text-align: right;
}

/* =====================================================
   FOOTER
===================================================== */

footer {
  margin-top: 35px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

@media (max-width: 1100px) {

  .sidebar {
    width: 230px;
    min-width: 230px;
  }

  .main-content {
    padding: 22px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .department-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 700px) {

  #dashboard {
    display: block;
  }

  .sidebar {
    width: 100%;
    min-width: 0;
    padding: 18px;
  }

  .sidebar nav {
    max-height: 420px;
    overflow-y: auto;
  }

  .main-content {
    padding: 17px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .welcome {
    padding: 22px;
  }

  .cards,
  .department-grid,
  .bottom-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

}

@media (max-width: 480px) {

  #login {
    margin: 0;
    padding: 20px;
    border-radius: 0;
    min-height: 100vh;
  }

  .main-content {
    padding: 12px;
  }

  .stat-card,
  .department,
  .panel {
    padding: 17px;
  }

}


/* =====================================================
   MOBILE-FIRST NAVIGATION AND LAYOUT REFINEMENTS
   Existing EZELEX colours and visual identity retained.
===================================================== */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

button, input {
  -webkit-tap-highlight-color: transparent;
}

.sidebar nav button {
  min-height: 42px;
  line-height: 1.35;
}

.sidebar nav .label {
  line-height: 1.4;
}

.main-content {
  max-width: 100%;
}

.dashboard-content {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.topbar {
  position: relative;
}

.mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(22,43,70,.06);
}

.mobile-menu-button span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
}

.sidebar-backdrop {
  display: none;
}

.stat-card,
.department,
.panel {
  min-width: 0;
}

.department {
  display: flex;
  flex-direction: column;
}

.department p {
  line-height: 1.65;
}

.sidebar nav button:focus-visible,
.mobile-menu-button:focus-visible,
.logout:focus-visible {
  outline: 3px solid #8db8f1;
  outline-offset: 2px;
}

@media (min-width: 761px) {
  #dashboard {
    align-items: stretch;
  }

  .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
  }

  .main-content {
    min-height: 100vh;
  }
}

@media (max-width: 760px) {
  #dashboard {
    display: block;
    min-height: 100vh;
  }

  .mobile-menu-button {
    display: inline-flex;
    order: -1;
    align-self: flex-start;
  }

  .topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px 0 17px;
  }

  .topbar > div {
    min-width: 0;
  }

  .topbar > .badge {
    grid-column: 2;
    justify-self: start;
    margin-top: -5px;
  }

  .topbar h1 {
    overflow-wrap: anywhere;
    font-size: clamp(20px, 5vw, 25px);
    line-height: 1.25;
  }

  .topbar #signedIn {
    overflow-wrap: anywhere;
    line-height: 1.5;
  }

  .sidebar {
    position: fixed;
    z-index: 1001;
    inset: 0 auto 0 0;
    width: min(84vw, 320px);
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;
    padding: 18px 15px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 12px 0 35px rgba(9, 22, 40, .22);
    transform: translateX(-105%);
    transition: transform .24s ease;
  }

  #dashboard.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(8, 18, 32, .48);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }

  #dashboard.sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .sidebar .brand {
    padding-bottom: 20px;
  }

  .sidebar nav {
    max-height: none;
    overflow: visible;
  }

  .sidebar nav button {
    padding: 12px;
    min-height: 44px;
    font-size: 13px;
  }

  .sidebar .label {
    margin-top: 20px;
  }

  .main-content {
    width: 100%;
    min-width: 0;
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
  }

  .dashboard-content {
    overflow-wrap: anywhere;
  }

  .welcome {
    padding: 22px 20px;
    margin-bottom: 22px;
  }

  .welcome h2 {
    font-size: clamp(22px, 6vw, 29px);
    line-height: 1.2;
  }

  .section-head {
    margin: 23px 0 14px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .department-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .bottom-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card,
  .department,
  .panel {
    padding: 15px;
  }

  .stat-card strong {
    font-size: clamp(21px, 5vw, 27px);
    overflow-wrap: anywhere;
  }

  .department h3 {
    font-size: 14px;
    line-height: 1.35;
  }
}

@media (max-width: 420px) {
  .main-content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .cards,
  .department-grid {
    grid-template-columns: 1fr;
  }

  .welcome {
    padding: 19px 17px;
  }

  .section-head h2 {
    font-size: 18px;
  }

  .badge {
    white-space: normal;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .sidebar,
  .sidebar-backdrop {
    transition: none !important;
  }
}

/* =====================================================
   EZELEX SIGNATURE REDESIGN — LOGIN + MANAGEMENT UI
===================================================== */
:root{--ink:#101d35;--navy:#101d35;--navy-light:#1d3558;--blue:#3979e6;--blue-light:#eaf1ff;--gold:#e7b866;--mint:#58d6bb;--background:#f4f7fc;--shadow:0 18px 55px rgba(18,39,72,.09)}
body{background:radial-gradient(circle at 90% 0%,#e7efff 0,transparent 30%),#f4f7fc;color:#17243a}
/* Login: split-screen premium visual, same IDs and auth controls */
#login.login-card{display:grid;grid-template-columns:minmax(260px,.92fr) minmax(320px,1.08fr);gap:0;width:min(1000px,calc(100% - 40px));max-width:1000px;min-height:620px;margin:5vh auto;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:28px;background:#fff;box-shadow:0 30px 90px rgba(14,31,58,.18)}
.login-art{position:relative;display:flex;align-items:flex-end;min-height:620px;padding:48px 38px;overflow:hidden;color:#fff;background:linear-gradient(145deg,#0c1930 0%,#142f55 52%,#2866b7 100%)}
.login-art:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 35%,rgba(83,151,255,.24)),radial-gradient(circle at 25% 20%,rgba(86,205,213,.22),transparent 35%)}
.login-art:after{content:"";position:absolute;width:440px;height:440px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-220px;top:-150px;box-shadow:0 0 0 35px rgba(255,255,255,.025),0 0 0 75px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.02)}
.login-art-copy{position:relative;z-index:2;max-width:320px}.login-art-copy span{display:block;margin-bottom:22px;color:#9ec6ff;font-size:10px;font-weight:800;letter-spacing:2.8px}.login-art-copy strong{display:block;font-size:clamp(36px,4vw,52px);line-height:1.08;letter-spacing:-2px}.login-art-copy small{display:block;margin-top:24px;color:#b9cce8;font-size:9px;font-weight:800;letter-spacing:2px}.login-art-mark{position:absolute;right:35px;top:30px;color:rgba(255,255,255,.09);font-size:230px;line-height:1;font-weight:900;letter-spacing:-20px}.login-orbit{position:absolute;border:1px solid rgba(113,201,255,.32);border-radius:50%;transform:rotate(-28deg)}.orbit-one{width:360px;height:140px;right:-85px;top:125px}.orbit-two{width:440px;height:180px;right:-130px;top:105px;border-color:rgba(231,184,102,.35)}
.login-form-area{padding:54px 48px;align-self:center}.login-form-area h1{margin:12px 0;font-size:34px;letter-spacing:-1.2px;color:#14243c}.login-form-area #intro{margin-bottom:30px;font-size:13px}.login-form-area .eyebrow{color:#3979e6;letter-spacing:2px}.login-form-area label{margin:19px 0 7px;color:#253955;font-size:12px}.login-form-area input{min-height:49px;padding:14px 15px;border:1px solid #dbe3ef;border-radius:11px;background:#f9fbfe}.login-form-area input:focus{border-color:#3979e6;box-shadow:0 0 0 4px rgba(57,121,230,.12)}.login-form-area #login button{min-height:49px;margin-top:18px;border-radius:11px;background:linear-gradient(105deg,#2865c4,#4b8cf1);box-shadow:0 9px 22px rgba(45,107,204,.22)}.login-form-area #login button:hover{filter:brightness(1.06)}.login-form-area .secondary{background:#edf2fa!important}.login-form-area .small{margin-top:22px;color:#7c8ba0}.login-form-area .notice{border-radius:11px}.login-form-area #otpPanel,.login-form-area #recovery{padding-top:10px}.login-form-area #otp{font-size:24px;letter-spacing:9px;text-align:center;font-weight:800}
/* Navigation: seven expandable divisions */
.sidebar{background:linear-gradient(180deg,#101e36 0%,#172d4c 62%,#10223d 100%);box-shadow:12px 0 35px rgba(14,30,54,.08);padding:26px 16px}.brand{padding:8px 12px 25px}.brand h2{font-size:26px;letter-spacing:3px}.brand small{letter-spacing:2.4px}.sidebar nav{padding-top:8px}.sidebar nav>.label{display:none}.nav-accordion{margin:8px 0;border:1px solid rgba(255,255,255,.075);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.025)}.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 13px;border:0;background:transparent;color:#dce8f8;text-align:left;font-size:11px;font-weight:800;letter-spacing:.7px}.nav-group-toggle:hover,.nav-accordion.is-open .nav-group-toggle{background:rgba(74,133,219,.17);color:#fff}.nav-chevron{font-size:17px;color:#8eb8f4;transition:transform .2s}.nav-accordion.is-open .nav-chevron{transform:rotate(180deg)}.nav-subitems{display:none;padding:3px 8px 9px}.nav-accordion.is-open .nav-subitems{display:block}.nav-subitems button{padding:10px 11px!important;margin:2px 0!important;border-radius:8px!important;color:#c4d2e5!important;font-size:11px!important}.nav-subitems button:hover,.nav-subitems button.active{background:linear-gradient(100deg,#3479df,#4c91f4)!important;color:#fff!important}.sidebar nav>button[data-title="Management overview"]{margin:7px 0 14px;padding:13px;border-radius:10px;background:rgba(69,132,220,.18);color:#fff;font-weight:800}.logout{border:1px solid rgba(255,255,255,.12);background:rgba(207,70,83,.18);color:#ffdce0}.foot{padding-bottom:5px}
/* Overview hero */
.welcome{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;min-height:260px;padding:40px 44px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:linear-gradient(112deg,#10213d 0%,#1c477e 56%,#347de0 100%);box-shadow:0 22px 50px rgba(31,79,142,.2)}.welcome-copy{position:relative;z-index:2;max-width:620px}.welcome h2{font-size:clamp(30px,3.3vw,44px);line-height:1.12;letter-spacing:-1.5px}.welcome p{max-width:560px;font-size:14px;line-height:1.8;color:#e0ebfa}.welcome-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.welcome-chips span{padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:30px;background:rgba(255,255,255,.08);color:#dbeaff;font-size:8px;font-weight:800;letter-spacing:1px}.welcome-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(1px)}.glow-a{width:360px;height:360px;right:5%;top:-210px;background:rgba(95,170,255,.2)}.glow-b{width:240px;height:240px;right:18%;bottom:-190px;background:rgba(75,222,201,.13)}.welcome-visual{position:relative;flex:0 0 220px;width:220px;height:190px;margin-left:25px}.visual-ring{position:absolute;inset:12px 25px;border:1px solid rgba(255,255,255,.35);border-radius:50%;transform:rotate(32deg)}.ring-b{inset:0 45px;transform:rotate(-35deg);border-color:rgba(117,224,222,.65)}.visual-core{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:84px;height:84px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.55);border-radius:25px;background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.06));box-shadow:0 15px 40px rgba(0,0,0,.16);color:#fff;font-size:42px;font-weight:900}.visual-line{position:absolute;width:8px;height:8px;border-radius:50%;background:#75e0d5;box-shadow:0 0 0 7px rgba(117,224,213,.12)}.line-a{top:30px;right:40px}.line-b{bottom:28px;left:28px;background:#f0c77f}
.section-head h2{font-size:21px;letter-spacing:-.5px}.section-head{margin:34px 0 19px}.overview-cards{gap:17px}.stat-card{position:relative;overflow:hidden;padding:23px;border:1px solid #e5ebf4;border-radius:17px;box-shadow:0 9px 28px rgba(23,47,80,.055);transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(23,47,80,.1)}.stat-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#3979e6,#66c9d3)}.stat-card:nth-child(2):before{background:linear-gradient(90deg,#16a67a,#6bd6ad)}.stat-card:nth-child(3):before{background:linear-gradient(90deg,#e2a94f,#f2d18b)}.stat-card:nth-child(4):before{background:linear-gradient(90deg,#8568d8,#c09df4)}.stat-card strong{font-size:32px;letter-spacing:-1px}.department{border-radius:17px;box-shadow:0 9px 28px rgba(23,47,80,.055)}.department span{border-radius:8px;background:#eaf1ff;color:#3979e6}.department:nth-child(2) span{background:#e5f8f1;color:#16865c}.department:nth-child(3) span{background:#fff4df;color:#a56b12}.department:nth-child(4) span{background:#f1ebff;color:#7956c7}.department:nth-child(5) span{background:#e4f7f8;color:#17818a}.department:nth-child(6) span{background:#ffebef;color:#bb5369}.department:nth-child(7) span{background:#e9efff;color:#526bc1}.panel{border-radius:17px;box-shadow:0 9px 28px rgba(23,47,80,.045)}
@media(max-width:900px){#login.login-card{width:min(760px,calc(100% - 28px));grid-template-columns:.8fr 1.2fr}.login-art{padding:30px 25px}.login-form-area{padding:40px 30px}.welcome-visual{flex-basis:150px;transform:scale(.8);margin-right:-20px}}
@media(max-width:760px){#login.login-card{display:block;width:100%;min-height:100vh;margin:0;border:0;border-radius:0}.login-art{min-height:235px;padding:32px 26px}.login-art-copy strong{font-size:34px}.login-art-mark{font-size:150px;right:25px;top:5px}.login-form-area{padding:32px 25px 45px}.login-form-area h1{font-size:29px}.sidebar{padding:18px 14px}.nav-accordion{margin:7px 0}.welcome{min-height:230px;padding:28px 25px}.welcome-visual{position:absolute;right:-50px;bottom:-65px;opacity:.35;transform:scale(.8)}.welcome-copy{max-width:100%}.overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{padding:17px}.stat-card strong{font-size:25px}.department-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.overview-cards,.department-grid,.bottom-grid{grid-template-columns:1fr}.welcome h2{font-size:29px}.welcome{padding:25px 21px}.topbar{grid-template-columns:42px minmax(0,1fr)}}


/* FINAL REFINEMENT: retain the familiar EZELEX administrator login */
#login.login-card{display:block;width:min(490px,calc(100% - 32px));max-width:490px;min-height:0;margin:7vh auto;padding:0;border:1px solid #e1e7ef;border-radius:18px;background:#fff;box-shadow:0 18px 55px rgba(18,39,72,.10);overflow:visible}
.login-form-area{padding:34px 36px}
.login-form-area .eyebrow{color:#14243c;font-size:10px;letter-spacing:1.8px}
.login-form-area h1{margin:8px 0 2px;font-size:28px;letter-spacing:-.6px;color:#14243c}
.login-form-area #intro{margin:0 0 18px;font-size:13px;color:#718096}
.login-form-area label{margin:14px 0 6px;font-size:12px}
.login-form-area input{min-height:46px;padding:12px 14px;border-radius:9px;background:#fff;font-size:14px}
.login-form-area #login button{min-height:46px;margin-top:16px;border-radius:9px;background:#2860a8;box-shadow:none}
.login-form-area .small{margin:14px 0 0;text-align:center}
.login-form-area #otpPanel{padding-top:0}
.login-form-area #otpPanel h3{margin:8px 0 10px;font-size:17px}
.login-form-area .notice{margin:12px 0;padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.4}
.login-form-area .otp-expiry{margin:7px 0 10px;font-size:12px}
.login-form-area #otp{min-height:48px;font-size:22px;letter-spacing:8px;text-align:center;font-weight:750}
.login-form-area #otpPanel button{min-height:43px;margin-top:10px;padding:11px 12px;border-radius:9px;box-shadow:none}
.login-form-area #otpPanel .secondary{background:#edf2fa!important;color:#203653!important}
.login-form-area #recovery{padding-top:4px}
.menu-label{display:block!important;margin:12px 10px 10px!important;color:#91a9c8!important;font-size:10px!important;font-weight:800;letter-spacing:2px}
#managementNav{padding-top:0!important}
#managementNav .overview-link{width:100%;text-align:left;margin:0 0 10px;padding:12px 13px;border:0;border-radius:10px;background:rgba(69,132,220,.18);color:#fff;font-size:13px;font-weight:750}
.nav-accordion{margin:7px 0;border:1px solid rgba(255,255,255,.09);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.035)}
.nav-group-toggle{min-height:48px;font-size:10px;letter-spacing:.65px}
.nav-subitems{padding:4px 8px 8px}
.nav-subitems button{display:block;width:100%;text-align:left}
@media(max-width:760px){#login.login-card{display:block;width:calc(100% - 30px);min-height:0;margin:24px auto;border:1px solid #e1e7ef;border-radius:16px}.login-form-area{padding:25px 22px 24px}.login-form-area h1{font-size:25px}.login-form-area #intro{margin-bottom:12px}.login-form-area label{margin-top:12px}.login-form-area #otpPanel{padding-top:0}.login-form-area #otpPanel h3{margin-top:4px}.login-form-area .small{margin-top:12px}.menu-label{margin-top:12px!important}}
@media(max-height:700px) and (max-width:760px){#login.login-card{margin:10px auto}.login-form-area{padding-top:18px;padding-bottom:18px}.login-form-area h1{font-size:23px}.login-form-area label{margin-top:9px}.login-form-area #otpPanel button{margin-top:7px}}