/* ============================================================ *
 *  M Gopal & Co. — CA ERP design system
 *  Professional + colourful. Four brand colours:
 *  indigo (primary), teal, amber, rose — on a clean light base.
 * ============================================================ */
:root{
  --bg:#F4F6FB;              /* soft cool page background        */
  --surface:#FFFFFF;
  --border:#E6E8F0;
  --text:#1B1E2E;            /* deep slate                       */
  --muted:#6C7287;           /* cool gray                        */

  --indigo:#3D4EAC;          /* primary brand                    */
  --indigo-d:#2E3C8C;
  --indigo-soft:#ECEEFB;
  --teal:#0CA678;
  --teal-soft:#E3F7F0;
  --amber:#E8920C;
  --amber-soft:#FCF1DD;
  --rose:#E64980;
  --rose-soft:#FCE7F0;

  --success:#2F9E44;  --success-soft:#E7F6EA;
  --warning:#E8920C;  --warning-soft:#FCF1DD;
  --danger:#E03131;   --danger-soft:#FCEAEA;
  --info:#1971C2;     --info-soft:#E5F0FB;

  --sidebar:#2A2F55;         /* deep indigo sidebar              */
  --sidebar-2:#343A66;
  --r:11px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--indigo);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Layout shell ---------- */
.shell{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:222px;flex:0 0 222px;background:var(--sidebar);
  padding:20px 14px;color:#C9CCE6;height:100vh;overflow-y:auto;overflow-x:hidden;}
.brand{font-weight:600;font-size:16.5px;color:#fff;letter-spacing:-.01em;margin:0 8px 2px;line-height:1.25;}
.brand small{display:block;font-weight:400;font-size:11px;color:#9AA0CC;letter-spacing:.06em;text-transform:uppercase;margin-top:3px;}
.nav-group{margin-top:18px;}
.nav-group .label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#7E84B5;margin:0 8px 6px;}
.nav a{display:flex;align-items:center;gap:9px;padding:7px 11px;margin:1px 0;border-radius:8px;
  color:#C9CCE6;font-size:13.5px;line-height:1.4;}
.nav a:hover{background:var(--sidebar-2);color:#fff;text-decoration:none;}
.nav a.active{background:var(--indigo);color:#fff;font-weight:500;}
.nav a .ic{width:7px;height:7px;border-radius:2px;flex:0 0 7px;}

.main{flex:1;min-width:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:13px 32px;background:var(--surface);border-bottom:1px solid var(--border);}
.topbar .who{font-size:13px;color:var(--muted);}
.topbar .who b{color:var(--text);font-weight:500;}
.content{flex:1 1 auto;overflow-y:auto;padding:14px 26px 40px;max-width:1240px;}

/* ---------- Typography ---------- */
h1{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 1px;}
.page-sub{color:var(--muted);font-size:12.5px;margin:0 0 12px;}
h2{font-size:15px;font-weight:600;margin:16px 0 8px;}
h3{font-size:13.5px;font-weight:600;margin:0 0 10px;}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:13px 15px;margin-bottom:12px;box-shadow:0 1px 2px rgba(27,30,46,.04);}
.cards{display:grid;gap:14px;}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c4{grid-template-columns:repeat(4,1fr);}

/* metric cards — coloured top accent */
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:11px 14px;box-shadow:0 1px 2px rgba(27,30,46,.04);border-top:3px solid var(--indigo);}
.metric .v{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1;}
.metric .k{font-size:12px;color:var(--muted);margin-top:3px;}
.metric.teal{border-top-color:var(--teal);} .metric.teal .v{color:var(--teal);}
.metric.amber{border-top-color:var(--amber);} .metric.amber .v{color:var(--amber);}
.metric.rose{border-top-color:var(--rose);} .metric.rose .v{color:var(--rose);}
.metric.indigo .v{color:var(--indigo);}

/* ---------- Master hub cards ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.hub a{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:18px;box-shadow:0 1px 2px rgba(27,30,46,.04);transition:transform .08s,box-shadow .08s;}
.hub a:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 18px rgba(27,30,46,.10);}
.hub .chip{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:600;color:#fff;margin-bottom:12px;}
.hub h3{font-size:15px;margin:0 0 3px;color:var(--text);}
.hub p{font-size:12.5px;color:var(--muted);margin:0;}
.hub .count{font-size:12px;color:var(--muted);margin-top:10px;font-weight:500;}
.bg-indigo{background:var(--indigo);} .bg-teal{background:var(--teal);}
.bg-amber{background:var(--amber);} .bg-rose{background:var(--rose);}
.bg-blue{background:var(--info);} .bg-green{background:var(--success);}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{text-align:left;font-weight:600;color:var(--muted);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.04em;padding:7px 12px;background:#FAFBFE;
  border-bottom:1px solid var(--border);}
thead th:first-child{border-top-left-radius:9px;} thead th:last-child{border-top-right-radius:9px;}
tbody td{padding:6px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:hover{background:#FAFBFE;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
.t-name{font-weight:500;}
.t-sub{color:var(--muted);font-size:12px;}
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;box-shadow:0 1px 2px rgba(27,30,46,.04);}

/* ---------- Badges / status ---------- */
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;line-height:1.5;}
.b-pending{color:var(--muted);background:#EEF0F6;}
.b-assigned,.b-inprogress,.b-underreview,.b-progress{color:var(--info);background:var(--info-soft);}
.b-filed,.b-completed,.b-closed,.b-active{color:var(--success);background:var(--success-soft);}
.b-overdue,.b-critical{color:var(--danger);background:var(--danger-soft);}
.b-inactive{color:var(--muted);background:#EEF0F6;}
.b-amber{color:var(--amber);background:var(--amber-soft);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;padding:8px 15px;
  border-radius:9px;border:1px solid var(--indigo);background:var(--indigo);color:#fff;cursor:pointer;line-height:1.4;}
.btn:hover{background:var(--indigo-d);border-color:var(--indigo-d);text-decoration:none;}
.btn.ghost{background:var(--surface);color:var(--indigo);}
.btn.ghost:hover{background:var(--indigo-soft);}
.btn.sub{background:var(--surface);color:var(--text);border-color:var(--border);}
.btn.sub:hover{background:#F1F3F9;}
.btn.teal{background:var(--teal);border-color:var(--teal);} .btn.teal:hover{filter:brightness(.94);}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:7px;}
.btn.danger{border-color:var(--danger);background:var(--surface);color:var(--danger);}
.btn.danger:hover{background:var(--danger-soft);}
.row-actions{display:flex;gap:7px;align-items:center;}

/* ---------- Forms ---------- */
.form{max-width:560px;} .form.wide{max-width:780px;}
.field{margin-bottom:11px;}
.field label{display:block;font-size:12px;color:var(--text);margin-bottom:3px;font-weight:500;}
.field input,.field select,.field textarea{width:100%;padding:7px 10px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface);font-size:13.5px;color:var(--text);font-family:inherit;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px var(--indigo-soft);}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:4px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.form-actions{margin-top:20px;display:flex;gap:10px;align-items:center;}

/* ---------- Flash ---------- */
.flash{padding:11px 15px;border-radius:9px;font-size:13.5px;margin-bottom:14px;border:1px solid transparent;font-weight:500;}
.flash.success{background:var(--success-soft);border-color:#C3E6CB;color:#1E7A2E;}
.flash.error{background:var(--danger-soft);border-color:#F1C6C6;color:#B02525;}

/* ---------- Misc ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.search{display:flex;gap:8px;}
.search input{padding:9px 12px;border:1px solid var(--border);border-radius:9px;min-width:260px;background:var(--surface);font-family:inherit;}
.filters{display:flex;gap:8px;align-items:center;}
.filters select{padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:13px;}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:6px 0 22px;flex-wrap:wrap;}
.tabs a{padding:9px 15px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;}
.tabs a.active{color:var(--indigo);border-bottom:2px solid var(--indigo);font-weight:600;}
.tabs a:hover{text-decoration:none;color:var(--text);}
.empty{color:var(--muted);font-size:13.5px;padding:28px 4px;text-align:center;}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 16px;font-size:13.5px;}
.kv dt{color:var(--muted);} .kv dd{margin:0;}
.muted{color:var(--muted);}
.right{margin-left:auto;}
.inline-form{display:inline;}
hr.soft{border:none;border-top:1px solid var(--border);margin:18px 0;}
.pill-link{font-weight:600;color:var(--indigo);cursor:pointer;}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-top:18px;box-shadow:0 1px 2px rgba(27,30,46,.04);}
.panel.accent-teal{border-top:3px solid var(--teal);}
.panel.accent-amber{border-top:3px solid var(--amber);}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.crumb a{color:var(--muted);} .crumb a:hover{color:var(--indigo);}
details.tool>summary{cursor:pointer;font-size:13px;color:var(--indigo);font-weight:500;list-style:none;padding:4px 0;}
details.tool>summary::-webkit-details-marker{display:none;}
details.tool[open]>summary{margin-bottom:10px;}

/* ---------- Login ---------- */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#2A2F55,#3D4EAC);}
.login-card{background:var(--surface);border-radius:16px;padding:34px 32px;width:350px;box-shadow:0 20px 50px rgba(0,0,0,.25);}
.login-card .brand{color:var(--text);}
.login-card .brand small{color:var(--muted);}

/* ---------- Collapsible sidebar ---------- */
.navtoggle{background:transparent;border:1px solid var(--border);color:var(--text);
  width:36px;height:31px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;}
.navtoggle:hover{background:#F1F3F9;}
.sidebar{transition:width .18s ease,padding .18s ease;overflow-x:hidden;}
body.nav-collapsed .sidebar{width:0;flex-basis:0;padding-left:0;padding-right:0;}
.b-allocated{color:var(--info);background:var(--info-soft);}

/* ---------- Denser forms (better space use) ---------- */
.form.wide{max-width:1000px;}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:0 20px;}
.formgrid .field{margin-bottom:13px;}
.formgrid .span2{grid-column:span 2;}
.colmenu{position:relative;}
.colmenu .menu{position:absolute;right:0;top:34px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(27,30,46,.12);padding:10px 14px;z-index:5;min-width:170px;}
.colmenu .menu label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;font-weight:400;cursor:pointer;}
.colmenu .menu input{width:auto;}
.hidden{display:none !important;}

/* ---------- Filter bar that fills the width ---------- */
.filtergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px 12px;align-items:end;}
.filtergrid .field{margin:0;}
.filtergrid .actions{display:flex;gap:8px;align-items:end;}
/* keep task columns on one line so the wrapper scrolls instead of clipping Status */
#tasktbl th, #tasktbl td{white-space:nowrap;}

/* ---------- Compliance tracker grid ---------- */
.trk{border-collapse:separate;border-spacing:4px;}
.trk thead th{background:transparent;border:none;padding:4px 6px;font-size:10.5px;}
.trk tbody td{border:none;padding:2px;}
.trk .rowlabel{text-align:left;font-weight:500;white-space:nowrap;}
.cell{display:block;border-radius:6px;padding:5px 6px;font-size:11px;font-weight:500;text-align:center;min-width:50px;}
.cell.none{background:#EEF0F6;color:#9499AD;}
.cell.allocated{background:var(--amber-soft);color:#8a5a00;}
.cell.overdue{background:var(--danger-soft);color:#B02525;}
.cell.completed{background:var(--success-soft);color:#1E7A2E;}
.cell.na{color:#D4D7E0;background:transparent;}
a.cell:hover{filter:brightness(.96);text-decoration:none;}

/* ---------- Keyboard accessibility ---------- */
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:4px;}
.nav a:focus-visible{outline-offset:-2px;}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--indigo);color:#fff;
  padding:8px 14px;border-radius:8px;z-index:50;}
.skip-link:focus{left:8px;}

/* ---------- Redesigned bulk action bar ---------- */
.bulkbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(27,30,46,.04);}
.bulkbar .count{font-weight:600;font-size:13px;color:var(--indigo);min-width:78px;}
.bulkbar .sep{width:1px;align-self:stretch;background:var(--border);}
.bulkbar .grp{display:flex;gap:7px;align-items:center;}
.bulkbar .grp label{font-size:11px;color:var(--muted);}
.bulkbar.disabled{opacity:.55;}
.assignwrap{position:relative;}
.assignpop{position:absolute;left:0;top:38px;z-index:20;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 28px rgba(27,30,46,.16);
  padding:12px 14px;min-width:230px;}
.assignpop h4{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.emplist{max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.emplist label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 6px;border-radius:6px;cursor:pointer;}
.emplist label:hover{background:var(--bg);}
.emplist input{width:auto;}
.b-unalloc{color:var(--warning);background:var(--warning-soft);}

/* ---------- Collapsible filters + density ---------- */
.btn.active-pill{background:var(--indigo-soft);color:var(--indigo);border-color:var(--indigo-soft);}
.crumb{margin-bottom:6px;}

/* ---------- Back link + top breadcrumb ---------- */
.backlink{font-size:12.5px;color:var(--indigo);font-weight:500;padding:4px 8px;border:1px solid var(--border);border-radius:7px;}
.backlink:hover{background:var(--indigo-soft);text-decoration:none;}
.topcrumb{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.topcrumb a{color:var(--muted);} .topcrumb a:hover{color:var(--indigo);}
.topcrumb a:last-child{color:var(--text);font-weight:500;}

/* ---------- Cancelled status + table totals ---------- */
.b-cancelled{color:var(--muted);background:#E9E5E0;text-decoration:none;}
tfoot td{padding:8px 12px;border-top:2px solid var(--border);font-weight:600;background:#FAFBFE;}
tfoot td.lbl{color:var(--muted);font-weight:500;}

/* ---------- Attendance cells ---------- */
.att{display:inline-block;width:22px;text-align:center;border-radius:5px;font-size:11px;font-weight:600;padding:2px 0;}
.att-P{background:var(--success-soft);color:#1E7A2E;}
.att-A{background:var(--danger-soft);color:#B02525;}
.att-L{background:var(--amber-soft);color:#8a5a00;}
.att-H{background:#E7EEF6;color:#3C5A8A;}
.att-O{background:#EEF0F6;color:#9499AD;}
.trk td .att{min-width:22px;}

/* ---------- Multi-select filter widget ---------- */
.msel{position:relative;}
.mselbtn{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  font-size:13.5px;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:6px;}
.mselbtn:hover{border-color:var(--indigo);}
.msel-menu{display:none;position:absolute;top:38px;left:0;z-index:30;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(27,30,46,.16);
  padding:6px;min-width:100%;max-height:260px;overflow:auto;}
.msel.open .msel-menu{display:block;}
.msel-menu label{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 7px;border-radius:6px;cursor:pointer;white-space:nowrap;}
.msel-menu label:hover{background:var(--bg);}
.msel-menu input{width:auto;}

/* ---------- Mobile / responsive ---------- */
.navscrim{display:none;}
@media (max-width:860px){
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:232px;z-index:70;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.25);}
  body.nav-open .sidebar{transform:none;}
  body.nav-collapsed .sidebar{width:232px;}      /* desktop-collapse ignored on mobile */
  .navscrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:65;}
  body.nav-open .navscrim{display:block;}
  .main{width:100%;}
  .content{padding:12px 14px 44px;max-width:100%;}
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px;}
  .topcrumb{display:none;}
  .toolbar{gap:8px;}
  .filtergrid{grid-template-columns:1fr 1fr;}
  .formgrid,.form,.form.wide{grid-template-columns:1fr;max-width:100%;}
  .grid2{grid-template-columns:1fr;}
  .hub{grid-template-columns:1fr 1fr;}
  h1{font-size:18px;}
  table{font-size:12.5px;}
}
@media (max-width:540px){
  .filtergrid{grid-template-columns:1fr;}
  .hub{grid-template-columns:1fr;}
  .cards.c4,.cards.c3,.cards.c2{grid-template-columns:1fr 1fr;}
  .row-actions{flex-wrap:wrap;}
}

/* ---------- Global top search ---------- */
.topsearch{flex:1 1 auto;max-width:560px;margin:0 14px;}
.topsearch input{width:100%;padding:9px 14px;border:1px solid var(--border);border-radius:22px;
  background:var(--bg);font-size:13.5px;font-family:inherit;color:var(--text);}
.topsearch input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft);background:var(--surface);}
@media (max-width:860px){.topsearch{order:3;flex-basis:100%;max-width:100%;margin:6px 0 0;}}

/* ---------- Branded login ---------- */
.loginpage{display:flex;min-height:100vh;}
.loginbrand{flex:1.1;background:linear-gradient(150deg,#2A2F55 0%,#3D4EAC 60%,#5a3aa6 100%);
  color:#fff;padding:54px 56px;display:flex;flex-direction:column;justify-content:space-between;}
.lb-firm{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.05;}
.lb-sub{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#C9CCE6;margin-top:8px;}
.lb-tag{margin-top:26px;font-size:20px;font-weight:500;color:#EDEEFA;}
.lb-line{margin-top:14px;max-width:440px;font-size:15px;line-height:1.7;color:#C9CCE6;}
.lb-contact{font-size:13.5px;color:#C9CCE6;line-height:1.9;border-top:1px solid rgba(255,255,255,.18);padding-top:18px;}
.lb-contact>div{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9AA0CC;margin-bottom:6px;}
.lb-contact a{color:#fff;font-weight:600;}
.lb-contact span{color:#9AA0CC;}
.loginform{flex:.9;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:30px;}
.lf-card{width:100%;max-width:380px;}
.lf-mark{width:52px;height:52px;border-radius:14px;background:var(--indigo);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:600;font-size:18px;margin-bottom:20px;}
.lf-h{font-size:22px;font-weight:600;margin:0 0 4px;}
.lf-p{color:var(--muted);font-size:13.5px;margin:0 0 22px;}
.lf-foot{margin-top:22px;font-size:11.5px;color:var(--muted);text-align:center;}
@media (max-width:820px){
  .loginpage{flex-direction:column;}
  .loginbrand{padding:34px 28px;gap:22px;}
  .lb-firm{font-size:30px;} .lb-line{font-size:14px;}
  .loginform{padding:28px 22px 44px;}
}