/* ============================================================
   Employees Desk — shared design system
   Used by index.html, pension-calculator.html, interest-calculator.html
   ============================================================ */

   :root{
  --paper:#F5F7FB;
  --panel:#FFFFFF;
  --forest:#0B1F3A;
  --forest-dark:#0B1F3A;
  --forest-tint:#EFF6FF;
  --brass:#D4A72C;
  --ink:#0F172A;
  --muted:#64748B;
  --line:#E2E8F0;
  --blue:#2563EB;
  --blue-hover:#3B82F6;
  --success:#059669;
  --warning:#D97706;
  --danger:#DC2626;
  --stmt-scale:1;
}
[data-theme="dark"]{
  --paper:#0A1020;
  --panel:#111A2B;
  --forest:#162A44;
  --forest-dark:#E8EEF7;
  --forest-tint:#18263A;
  --brass:#E6B84A;
  --ink:#E8EEF7;
  --muted:#9AA9BC;
  --line:#2A3A50;
  --blue:#5B9CFF;
  --blue-hover:#78B0FF;
  --success:#22C58B;
  --warning:#F5B942;
  --danger:#FF6B6B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Calibri','Segoe UI', system-ui, Arial, sans-serif;
  color:var(--ink);
  transition:background .2s, color .2s;
  background:
    radial-gradient(1100px 500px at 50% -160px, color-mix(in srgb, var(--panel) 55%, var(--paper)) 0%, var(--paper) 60%),
    var(--paper);
  min-height:100vh;
  padding-top:64px;
}
a{color:inherit;}
::selection{background:var(--brass); color:#fff;}

/* Visible keyboard focus everywhere — never suppressed */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.type-tabs label:focus-within, .nav-link:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px; border-radius:4px;
}

/* ---------- Site header / nav (fixed to top) ---------- */
.site-header{
  background:#DCEEFF;
  box-shadow:0 2px 14px -4px rgba(11,31,58,.18);
  border-bottom:2px solid #A8D4FF;
  position:fixed; top:0; left:0; right:0; width:100%; z-index:100;
}
.site-header-inner{
  max-width:1200px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  font-family:Cambria,Georgia,'Times New Roman',serif; font-weight:700; font-size:16px; letter-spacing:.01em;
}
.brand .seal-mini{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(from 210deg, var(--brass), #fff, var(--brass));
  display:flex;align-items:center;justify-content:center;color:var(--forest-dark);
  font-family:Cambria,Georgia,serif;font-weight:800;font-size:9px;
}
.site-nav{display:flex; gap:2px; flex-wrap:wrap; align-items:center;}
.nav-link{
  text-decoration:none; color:#0B1F3A; font-weight:600; font-size:13.5px;
  padding:8px 14px; border-radius:7px; transition:.15s;
}
.nav-link:hover{background:rgba(11,31,58,.08); color:#0B1F3A;}
.nav-link.active{background:#0B1F3A; color:#fff;}

/* Dropdown menus (Federal Employees / Punjab Employees) */
.nav-dropdown{position:relative;}
.nav-dropdown > summary{
  display:flex; align-items:center; gap:5px; cursor:pointer; list-style:none;
  text-decoration:none; color:#0B1F3A; font-weight:600; font-size:13.5px;
  padding:8px 14px; border-radius:7px; transition:.15s;
}
.nav-dropdown > summary::-webkit-details-marker{display:none;}
.nav-dropdown > summary::after{content:'▾'; font-size:9px; opacity:.85; transition:transform .15s;}
.nav-dropdown[open] > summary::after{transform:rotate(180deg);}
.nav-dropdown > summary:hover{background:rgba(11,31,58,.08); color:#0B1F3A;}
.nav-dropdown > summary.active{background:#0B1F3A; color:#fff;}
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:200px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.4); padding:6px; z-index:60;
  display:flex; flex-direction:column; gap:2px;
}
.dropdown-menu a, .dropdown-menu .dropdown-soon{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:7px; font-size:13px; font-weight:600; text-decoration:none; color:var(--ink);
}
.dropdown-menu a:hover{background:#EFF6FF; color:var(--forest-dark);}
.dropdown-menu a.active{background:#EFF6FF; color:var(--forest-dark);}
.dropdown-menu .dropdown-soon{color:var(--muted); font-style:italic; cursor:default;}

.dropdown-group{display:flex;flex-direction:column;gap:2px;padding-bottom:3px;margin-bottom:3px;border-bottom:1px solid #E2E8F0}.dropdown-group-title{padding:8px 12px 5px;color:#0B1F3A;font-size:12px;font-weight:800}.dropdown-group>a,.dropdown-group>.dropdown-soon{padding-left:24px!important}.dropdown-group>.dropdown-soon{font-style:italic}..site-controls{display:flex; align-items:center; gap:10px; margin-left:auto;}
.pref-group{
  display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:8px; padding:3px;
}
.pref-btn{
  border:none; background:transparent; color:#fff; font-weight:700; font-size:13px;
  padding:5px 9px; border-radius:6px; cursor:pointer; line-height:1; transition:.12s;
}
.pref-btn:hover{background:rgba(255,255,255,.18);}
.pref-btn.active{background:#fff; color:var(--forest-dark);}
.pref-val{font-size:11.5px; font-weight:700; color:rgba(255,255,255,.85); min-width:34px; text-align:center;}

@media (max-width:720px){
  body{padding-top:112px;}
  .site-header-inner{gap:10px;}
  .site-nav{order:3; width:100%; justify-content:flex-start;}
  .dropdown-group{display:flex;flex-direction:column;gap:2px;padding-bottom:3px;margin-bottom:3px;border-bottom:1px solid #E2E8F0}.dropdown-group-title{padding:8px 12px 5px;color:#0B1F3A;font-size:12px;font-weight:800}.dropdown-group>a,.dropdown-group>.dropdown-soon{padding-left:24px!important}.dropdown-group>.dropdown-soon{font-style:italic}..site-controls{margin-left:0;}
}

/* ---------- Shared page shell ---------- */
.page{max-width:1200px; margin:0 auto; padding:28px 16px 60px;}
.page-head{margin-bottom:22px;}
.page-head h1{
  font-family:Cambria,Georgia,'Iowan Old Style','Times New Roman',serif;
  font-size:26px; margin:0 0 4px; color:var(--forest-dark); font-weight:700;
}
.page-head p{font-size:13.5px; color:var(--muted); margin:0; font-style:italic;}

.card{
  background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--forest); border-radius:10px;
  box-shadow:0 1px 2px rgba(20,30,20,.05), 0 16px 32px -22px rgba(20,30,20,.4);
  overflow:hidden;
}
.card .card-head{
  background:var(--forest);
  color:#fff; padding:14px 20px;
  font-family:Cambria,Georgia,'Times New Roman',serif; font-size:15.5px; letter-spacing:.02em; font-weight:700;
  display:flex; align-items:center; justify-content:space-between;
}
.card .card-head small{font-family:'Calibri',sans-serif; font-weight:400; font-size:11px; opacity:.85;}
.card-body{padding:18px 20px 20px;}

footer.site-footer{
  max-width:1200px;margin:22px auto 0; font-size:11.5px; color:var(--muted); line-height:1.6;
  padding:14px 18px; border-top:1px solid var(--line); text-align:center;
}
footer.site-footer a{color:var(--forest-dark); font-weight:600;}

/* ---------- Service cards (home page) ---------- */
.service-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px;}
.service-card{
  background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:12px; padding:22px 22px 24px;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:10px;
  box-shadow:0 1px 2px rgba(20,30,20,.05), 0 16px 32px -22px rgba(20,30,20,.4);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.service-card:hover, .service-card:focus-visible{
  transform:translateY(-3px); border-top-color:var(--blue);
  box-shadow:0 20px 38px -20px rgba(20,30,20,.55);
}
.service-card .icon{
  width:46px;height:46px;border-radius:10px; background:#EFF6FF; color:var(--forest-dark);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;
  font-family:Cambria,Georgia,serif; border:1px solid var(--line);
}
.service-card h3{
  margin:0; font-family:Cambria,Georgia,'Times New Roman',serif; font-size:17px; color:var(--forest-dark);
}
.service-card p{margin:0; font-size:13px; color:var(--muted); line-height:1.5; flex:1;}
.service-card .cta{font-size:12.5px; font-weight:700; color:var(--blue); letter-spacing:.02em;}
.service-card.disabled{opacity:.6; cursor:default; pointer-events:none;}
.badge{
  display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 8px; border-radius:10px; background:#EFF6FF; color:var(--forest-dark); align-self:flex-start;
}
.badge.soon{background:#f4e6c9; color:#8a6a1e;}
[data-theme="dark"] .badge.soon{background:#4a3c1a; color:#e6c877;}

/* Expandable service card (e.g. Pension Calculator -> Federal / Punjab) */
.service-dropdown{cursor:auto;}
.service-dropdown > summary{
  list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:10px;
}
.service-dropdown > summary::-webkit-details-marker{display:none;}
.service-options{
  margin-top:2px; padding-top:12px; border-top:1px dashed var(--line);
  display:flex; flex-direction:column; gap:7px;
}
.service-option{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 13px; border-radius:8px; background:#EFF6FF; color:var(--forest-dark);
  font-weight:700; font-size:13px; text-decoration:none; transition:.15s;
}
.service-option:hover, .service-option:focus-visible{background:var(--forest); color:#fff;}
.service-option.soon{background:transparent; color:var(--muted); font-weight:600; cursor:default; border:1px dashed var(--line);}

.section-label{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--brass);
  margin:0 0 10px;
}

@media print{ .site-header, footer.site-footer{display:none !important;} }

/* Employees Desk brand mark */
.brand .brand-logo{
  width:252px;
  height:40px;
  flex:0 0 252px;
  display:block;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:700px){
  .brand .brand-logo{width:220px;height:35px;flex-basis:220px}
}
@media(max-width:520px){
  .brand .brand-logo{width:190px;height:31px;flex-basis:190px}
}


/* ---------- Dark-mode polish ---------- */
[data-theme="dark"] .site-header{
  background:#DCEEFF;
  border-bottom-color:#A8D4FF;
  box-shadow:0 2px 14px -4px rgba(11,31,58,.18);
}
[data-theme="dark"] .site-header .nav-link.active,
[data-theme="dark"] .site-header .nav-dropdown > summary.active{
  background:#0B1F3A;
  color:#fff;
}
[data-theme="dark"] .dropdown-menu{
  background:#111A2B;
  border-color:#2A3A50;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.72);
}
[data-theme="dark"] .dropdown-menu a:hover,
[data-theme="dark"] .dropdown-menu a.active{
  background:#1B3553;
  color:#F3F7FD;
}
[data-theme="dark"] .pref-group{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
}
[data-theme="dark"] .pref-btn.active{
  background:#E8EEF7;
  color:#10213A;
}
[data-theme="dark"] .card,
[data-theme="dark"] .service-card{
  background:#111A2B;
  border-color:#2A3A50;
  box-shadow:0 14px 34px -24px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.025);
}
[data-theme="dark"] .card .card-head{
  background:linear-gradient(135deg,#132A46,#10213A);
}
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .service-card:focus-visible{
  border-top-color:#5B9CFF;
  box-shadow:0 22px 42px -24px rgba(0,0,0,.78), 0 0 0 1px rgba(91,156,255,.08);
}
[data-theme="dark"] .service-card .icon,
[data-theme="dark"] .badge,
[data-theme="dark"] .service-option{
  background:#182A43;
  color:#E8EEF7;
  border-color:#2A3A50;
}
[data-theme="dark"] .service-option:hover,
[data-theme="dark"] .service-option:focus-visible{
  background:#24528A;
  color:#fff;
}
[data-theme="dark"] .service-option.soon{
  background:transparent;
  color:var(--muted);
}
[data-theme="dark"] footer.site-footer{
  border-top-color:#26364B;
}
/* Home page: exactly 3 service cards per row on desktop. */
.home-wrap .dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.home-wrap .tool-card{grid-column:auto;}
@media(max-width:850px){.home-wrap .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.home-wrap .tool-card{grid-column:auto;}}
@media(max-width:520px){.home-wrap .dashboard-grid{grid-template-columns:1fr;}}

/* ============================================================
   Global responsive navigation — same menu on every page
   ============================================================ */
.mobile-menu-toggle{display:none;background:transparent;border:0;color:#fff;width:44px;height:44px;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:8px;}
.mobile-menu-toggle span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:.2s ease;}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav-panel{display:none}
@media(max-width:767px){
  body{padding-top:62px;overflow-x:hidden}
  .site-header-inner{padding:8px 12px;gap:8px;flex-wrap:nowrap}
  .brand{min-width:0;flex:1;font-size:15px}
  .brand-logo{width:30px;height:30px;flex:0 0 auto}
  .site-nav{display:none!important}
  .mobile-menu-toggle{display:flex;flex:0 0 auto}
  .dropdown-group{display:flex;flex-direction:column;gap:2px;padding-bottom:3px;margin-bottom:3px;border-bottom:1px solid #E2E8F0}.dropdown-group-title{padding:8px 12px 5px;color:#0B1F3A;font-size:12px;font-weight:800}.dropdown-group>a,.dropdown-group>.dropdown-soon{padding-left:24px!important}.dropdown-group>.dropdown-soon{font-style:italic}..site-controls{display:none!important}
  .mobile-nav-panel{display:none;position:absolute;top:100%;left:0;right:0;background:var(--forest);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 10px 25px rgba(0,0,0,.22);padding:8px 12px 14px;max-height:calc(100vh - 62px);overflow:auto}
  .mobile-nav-panel.open{display:block}
  .mobile-nav-panel a,.mobile-nav-panel summary{display:flex;align-items:center;min-height:46px;padding:10px 13px;border-radius:9px;color:#0B1F3A;text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;list-style:none}
  .mobile-nav-panel a:hover,.mobile-nav-panel summary:hover{background:rgba(255,255,255,.08)}
  .mobile-nav-panel details{border:0;margin:1px 0}
  .mobile-nav-panel details[open] summary{background:rgba(255,255,255,.06)}
  .mobile-nav-panel details>div{padding-left:12px}.mobile-nav-panel details details>div{padding-left:12px}
  .mobile-nav-panel .dropdown-soon{display:block;color:#64748B;padding:9px 13px;font-size:13px}
}
@media(min-width:768px){.mobile-nav-panel,.mobile-menu-toggle{display:none!important}}

/* ============================================================
   Employees Desk menu — approved deep navy + hover flyout
   Only navigation presentation is changed here.
   ============================================================ */
.site-header{background:#0B2F6B!important;border-bottom:2px solid #174A96!important;box-shadow:0 2px 14px -4px rgba(7,31,73,.32)!important;}
.site-header-inner{max-width:1240px;}
.brand .brand-logo{width:220px;height:35px;flex-basis:220px;}
.site-nav{align-items:center;}
.nav-link{color:#fff!important;}
.nav-link:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;}
.nav-link.active{background:#fff!important;color:#0B2F6B!important;}
.nav-dropdown>summary{color:#fff!important;}
.nav-dropdown>summary:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;}
.nav-dropdown>summary.active{background:#fff!important;color:#0B2F6B!important;}
.dropdown-menu{background:#fff!important;border-color:#D9E3F2!important;box-shadow:0 18px 38px -14px rgba(7,31,73,.45)!important;}
.dropdown-menu a,.dropdown-menu .dropdown-soon{color:#0F172A!important;}
.dropdown-menu a:hover,.dropdown-menu a.active{background:#EFF6FF!important;color:#0B2F6B!important;}
.dropdown-group{position:relative;display:block!important;padding:0!important;margin:0 0 2px!important;border:0!important;}
.dropdown-group-title{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px!important;border-radius:7px;color:#0B2F6B!important;font-size:13px!important;font-weight:700!important;cursor:default;white-space:nowrap;}
.dropdown-chevron{font-size:17px;line-height:1;color:#6B84A8;}
.dropdown-group:hover>.dropdown-group-title{background:#EFF6FF;color:#0B2F6B!important;}
.dropdown-submenu{position:absolute;left:calc(100% + 7px);top:-1px;min-width:175px;background:#fff;border:1px solid #D9E3F2;border-radius:10px;box-shadow:0 18px 38px -14px rgba(7,31,73,.42);padding:6px;display:none;z-index:70;}
.dropdown-group:hover>.dropdown-submenu,.dropdown-group:focus-within>.dropdown-submenu{display:flex;flex-direction:column;gap:2px;}
.dropdown-submenu a,.dropdown-submenu .dropdown-soon{display:flex!important;position:static!important;padding:9px 12px!important;white-space:nowrap;}
.site-controls{margin-left:auto;}
.pref-group{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:20px!important;padding:3px!important;}
.pref-btn{color:#fff!important;border-radius:16px!important;padding:7px 10px!important;}
.pref-btn:hover{background:rgba(255,255,255,.16)!important;}
.pref-btn.active{background:#fff!important;color:#0B2F6B!important;}
/* Open Calculators on mouse hover; click still works for keyboard/touch. */
.nav-dropdown:hover>.dropdown-menu,.nav-dropdown:focus-within>.dropdown-menu{display:flex!important;}
[data-theme="dark"] .site-header{background:#0B2F6B!important;border-bottom-color:#174A96!important;}
[data-theme="dark"] .nav-link.active,[data-theme="dark"] .site-header .nav-dropdown>summary.active{background:#fff!important;color:#0B2F6B!important;}
@media(max-width:767px){
  .site-header{background:#0B2F6B!important;}
  .brand .brand-logo{width:220px;height:35px;flex-basis:220px;}
  .mobile-nav-panel{background:#0B2F6B!important;border-top-color:rgba(255,255,255,.18)!important;}
  .mobile-nav-panel a,.mobile-nav-panel summary{color:#fff!important;}
  .mobile-nav-panel a:hover,.mobile-nav-panel summary:hover{background:rgba(255,255,255,.10)!important;}
  .dropdown-submenu{position:static;box-shadow:none;border:0;background:transparent;padding:0 0 0 12px;display:none;}
  .mobile-nav-panel details details[open]>.dropdown-submenu{display:flex;}
}


/* Menu item icons: requested menu-only change */
.dropdown-menu a .menu-item-icon,.dropdown-menu .menu-item-content .menu-item-icon{width:18px;min-width:18px;margin-right:8px;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:#1474e5}.dropdown-menu a,.dropdown-menu .dropdown-soon{justify-content:flex-start!important}.dropdown-menu a>span:last-child{flex:1}.dropdown-group-title .menu-item-content{display:flex;align-items:center;gap:8px}.dropdown-group-title .menu-item-icon{color:#1474e5}.dropdown-submenu a .menu-item-icon{color:#1474e5}.dropdown-submenu .dropdown-soon{display:flex!important;align-items:center;gap:8px}.mobile-nav-panel .menu-item-icon{width:18px;min-width:18px;margin-right:9px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}.mobile-nav-panel details summary .menu-item-icon{margin-right:9px}.mobile-nav-panel .dropdown-soon .menu-item-icon{margin-right:9px}

/* User-provided tool artwork: card icons only */
.static-icon.image-icon {
  width: 78px;
  height: 78px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  flex: 0 0 78px;
}
.static-icon.image-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ---------- Home footer visitor statistics ---------- */
footer.site-footer .site-footer-main{display:block;}
footer.site-footer .visitor-stats{display:flex;align-items:center;justify-content:center;gap:9px;margin:7px auto 0;color:#667085;white-space:nowrap;}
footer.site-footer .visitor-stat{display:inline-flex;align-items:center;gap:4px;}
footer.site-footer .visitor-stat i{font-size:14px;vertical-align:-2px;}
footer.site-footer .visitor-stat strong{color:#173f2a;font-variant-numeric:tabular-nums;}
footer.site-footer .visitor-divider{opacity:.45;}
footer.site-footer .visitor-status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.13);display:inline-block;}
@media(max-width:700px){footer.site-footer .visitor-stats{flex-wrap:wrap;white-space:normal;}}

/* Visitor footer: two centered lines on every page. */
footer.site-footer .site-footer-main{display:block!important;white-space:normal;}
footer.site-footer .visitor-stats{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:4px auto 0!important;color:var(--muted)!important;white-space:nowrap!important;}
footer.site-footer .visitor-leading-divider{display:inline!important;opacity:.45;}
footer.site-footer .visitor-stat{display:inline-flex!important;align-items:center!important;gap:4px!important;}
footer.site-footer .visitor-divider{display:inline!important;opacity:.45;}
footer.site-footer .visitor-status-dot{width:7px!important;height:7px!important;border-radius:50%!important;background:#22c55e!important;box-shadow:0 0 0 3px rgba(34,197,94,.13)!important;display:inline-block!important;}
@media(max-width:700px){footer.site-footer .visitor-stats{flex-wrap:wrap!important;white-space:normal!important;}}