/* ============================================================================
   KLOUDCAMPUS — CHAIRMAN CONSOLE
   ----------------------------------------------------------------------------
   DESIGN ONLY. Extends assets/campus.css + assets/pages.css and restyles the
   shell to the approved Chairman reference: light sidebar, pastel KPI cards,
   tinted module mini-stats, quote chip in the welcome band. Everything else
   (radii, shadow, hover grammar, chart style) stays on the base tokens.
   ========================================================================== */

:root{
  --navy-side:#16265c;   /* kept for the avatar and other navy accents */
}

/* ===================== SIDEBAR — light ===================================
   A near-white rail on a faint blue wash, one shade off the page so the
   boundary reads without a hard line. Same active treatment as the base
   system: the blue gradient pill. */
.sidebar{
  background:linear-gradient(180deg,#fbfcfe 0%,#f6f9fe 100%);
  border-right:1px solid #e6ecf7;
}
.brand{border-bottom:1px solid #e9eef8;}
.brand-icon{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;}
.brand-title{color:var(--text);font-size:15px;}
.brand-sub{color:var(--text-soft);}

.nav-item{color:#4b5266;}
.nav-item i{color:#8891a5;}
.nav-item:hover{background:#eaf1ff;border-color:#dbe6fb;color:var(--text);}
.nav-item:hover i{color:var(--blue-dark);}
.nav-item.active{
  background:linear-gradient(135deg,#3b82f6,#2f6fed);
  color:#fff;box-shadow:0 4px 10px rgba(59,130,246,.35);
}
.nav-item.active i{color:#fff;}
.sidebar-footer{border-top:1px solid #e9eef8;color:var(--text-faint);}
.sidebar-footer b{color:#8b93a6;}
.nav::-webkit-scrollbar{width:8px;}
.nav::-webkit-scrollbar-thumb{background:#dde4f2;border-radius:8px;}
.nav::-webkit-scrollbar-track{background:transparent;}

/* ===================== TOPBAR extras ===================== */
.profile .avatar{background:var(--navy-side);color:#fff;}
.profile-role{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===================== WELCOME BAND ======================================
   One layout, one photograph, a different wash per role. Everything that
   changes is a token on .welcome[data-role], so a new role is three values
   rather than a second band. */
.welcome{
  /* Chairman is the default: the system's own blue. */
  --band:238,244,255;      /* the wash, as r,g,b so the overlay can fade it  */
  --band-deep:226,236,255; /* the saturated end, behind the text            */
  --band-ink:#152c5b;      /* the heading                                   */
  --band-accent:#2f6fed;   /* the rule under the eyebrow                    */

  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:156px;display:flex;align-items:center;
  padding:26px 34px;
  background:linear-gradient(112deg,rgb(var(--band-deep)) 0%,rgb(var(--band)) 46%,#fdfeff 100%);
  box-shadow:var(--shadow);
}
.welcome[data-role="principal"]{
  --band:228,246,241; --band-deep:210,240,232; --band-ink:#0f5244; --band-accent:#10a37f;
}
.welcome[data-role="dean"]{
  --band:240,234,254; --band-deep:230,220,252; --band-ink:#3a1d78; --band-accent:#7c4dea;
}
.welcome[data-role="hod"]{
  --band:255,238,226; --band-deep:253,227,209; --band-ink:#7a3410; --band-accent:#e2681f;
}
.welcome[data-role="admin"]{
  --band:226,240,247; --band-deep:208,231,243; --band-ink:#0b4358; --band-accent:#0d7ea8;
}

.welcome-photo{position:absolute;inset:0;}
.welcome-photo img{
  position:absolute;right:-4%;top:0;bottom:0;width:46%;height:100%;
  object-fit:cover;object-position:right 68%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
}
/* The wash carries over the photograph so the picture dissolves into the
   band's own colour instead of sitting on it as a rectangle. */
.welcome-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--band-deep),.98) 0%,rgba(var(--band),.86) 38%,rgba(var(--band),.42) 62%,rgba(var(--band),.12) 82%,transparent 100%);
}
.welcome-body{position:relative;z-index:2;max-width:60%;}
.welcome-eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--band-accent);margin-bottom:8px;
  padding-bottom:6px;border-bottom:2px solid var(--band-accent);
}
.welcome-body h1{font-size:28px;font-weight:800;color:var(--band-ink);letter-spacing:-.5px;line-height:1.15;}
.welcome-body p{font-size:13px;font-weight:500;color:#4a5570;margin-top:6px;max-width:56ch;}

/* ===================== KPI CARDS — pastel, per the reference ============== */
.stat-card{
  display:flex;flex-direction:column;gap:0;
  padding:15px 16px 13px;border:1px solid transparent;
}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.stat-card .stat-num{font-size:22px;}
.stat-card .stat-label{margin-top:2px;}
.stat-card .stat-icon{width:38px;height:38px;border-radius:10px;font-size:15px;}
.stat-card .stat-delta{margin-top:8px;}
/* pastel card washes; the icon square keeps the saturated tone */
.stat-card.w-blue{background:#e9f1ff;}   .stat-card.w-blue .stat-icon{background:#3b82f6;color:#fff;}
.stat-card.w-green{background:#e4f8ec;}  .stat-card.w-green .stat-icon{background:#22c55e;color:#fff;}
.stat-card.w-purple{background:#f0eafe;} .stat-card.w-purple .stat-icon{background:#8b5cf6;color:#fff;}
.stat-card.w-pink{background:#fde9f2;}   .stat-card.w-pink .stat-icon{background:#ec4899;color:#fff;}
.stat-card.w-yellow{background:#fdf5dc;} .stat-card.w-yellow .stat-icon{background:#eab308;color:#fff;}
.stat-card.w-orange{background:#fdeee1;} .stat-card.w-orange .stat-icon{background:#f97316;color:#fff;}
.stat-card.w-teal{background:#e0f7f2;}   .stat-card.w-teal .stat-icon{background:#14b8a6;color:#fff;}
.stat-card.w-navy{background:#e8ecfb;}   .stat-card.w-navy .stat-icon{background:#1e3a8a;color:#fff;}
.stat-card.w-red{background:#fdeaea;}    .stat-card.w-red .stat-icon{background:#ef4444;color:#fff;}
.stat-card:hover{border-color:rgba(30,58,138,.14);}

/* tint the base palette misses */
.indigo{background:#e3e5fd;color:#6366f1;}

/* chart value badge, e.g. the "₹12.8 Cr" tag on the last bar */
.chart-badge{
  position:absolute;top:6px;right:8px;z-index:2;
  font-size:11px;font-weight:800;color:#fff;
  background:var(--blue-dark);border-radius:7px;padding:4px 8px;
  box-shadow:0 3px 8px rgba(37,99,235,.3);
}
.chart-badge.green{background:#16a34a;box-shadow:0 3px 8px rgba(22,163,74,.3);}

/* ===================== INSIGHTS / UPDATES / ACTIONS ===================== */
.insight-list{display:flex;flex-direction:column;gap:13px;}
.insight-list li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:#3d4658;font-weight:500;}
.insight-ic{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:10px;
  background:#e3f9ec;color:#16a34a;
}
.insight-ic.down{background:#fdeceb;color:#d93a2f;}

.action-list{display:flex;flex-direction:column;gap:8px;}
.action-row{
  display:flex;align-items:center;gap:11px;
  background:#fbfcfe;border:1px solid #eef0f6;border-radius:11px;
  padding:11px 12px;font-size:12.5px;font-weight:600;color:var(--text);
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.action-row:hover{background:#f4f8ff;border-color:#d9e6fb;box-shadow:var(--shadow);}
.action-row .a-ic{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.action-row span{flex:1;}
.action-row .fa-chevron-right{font-size:11px;color:var(--text-faint);}

/* ===================== MODULE OVERVIEW CARDS ===================== */
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.module-card{
  background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:18px 20px 20px;border:1px solid transparent;min-width:0;
  transition:box-shadow var(--ease),border-color var(--ease);
}
.module-card:hover{box-shadow:var(--shadow-hover);border-color:#e9eef9;}
.module-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;}
.module-head-l{display:flex;align-items:center;gap:10px;min-width:0;}
.module-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.module-head h3{font-size:14px;font-weight:700;color:var(--text);}
.module-head .sub{font-size:11px;color:var(--text-faint);font-weight:500;margin-top:1px;}

/* tinted mini stats, coloured reading on a pastel chip */
.module-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px;}
.module-stats.cols-3{grid-template-columns:repeat(3,1fr);}
.module-stat{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  border-radius:10px;padding:9px 10px;
}
.module-stat b{font-size:15px;font-weight:800;}
.module-stat span{font-size:10px;color:#6b7280;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.module-stat.t-blue{background:#e9f1ff;}   .module-stat.t-blue b{color:#1d4ed8;}
.module-stat.t-green{background:#e4f8ec;}  .module-stat.t-green b{color:#15803d;}
.module-stat.t-purple{background:#f0eafe;} .module-stat.t-purple b{color:#6d28d9;}
.module-stat.t-pink{background:#fde9f2;}   .module-stat.t-pink b{color:#be185d;}
.module-stat.t-orange{background:#fdeee1;} .module-stat.t-orange b{color:#c2410c;}
.module-stat.t-yellow{background:#fdf5dc;} .module-stat.t-yellow b{color:#a16207;}
.module-stat.t-red{background:#fdeaea;}    .module-stat.t-red b{color:#b91c1c;}
.module-stat.t-teal{background:#e0f7f2;}   .module-stat.t-teal b{color:#0f766e;}

.module-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* A canvas never shrinks a grid track on its own: without a min-width the
   chart bleeds across its sibling column. */
.module-split>div{min-width:0;overflow:hidden;}
.module-chart canvas{max-width:100%;}
table.kx.module-table{min-width:0;}
.module-split .part-label{font-size:11px;font-weight:700;color:var(--text-soft);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;}
.module-chart{height:118px;position:relative;}

.recruiter-chips{display:flex;flex-wrap:wrap;gap:7px;}
.recruiter-chip{font-size:11px;font-weight:700;color:var(--text-soft);background:#fbfcfe;border:1px solid #eef0f6;border-radius:8px;padding:6px 10px;}
.module-table td,.module-table th{padding:7px 8px;}
.module-table{font-size:11.5px;}

/* ===================== BOTTOM LINK GRID ===================== */
.link-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.link-card{
  display:flex;align-items:center;gap:12px;min-width:0;
  background:var(--card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow);
  padding:14px 16px;border:1px solid transparent;
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
}
.link-card:hover{box-shadow:var(--shadow-hover);border-color:#e3eafb;transform:translateY(-1px);}
.link-card .l-ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.link-card .l-body{flex:1;min-width:0;}
.link-card .l-body b{display:block;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.link-card .l-body span{font-size:10.5px;color:var(--text-faint);font-weight:500;display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.link-card .fa-chevron-right{font-size:11px;color:var(--text-faint);flex:0 0 auto;}

/* ===================== ROLE SWITCH (prototype only) ======================= */
.role-switch{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1px solid #dbe4f7;border-radius:30px;
  box-shadow:0 6px 22px rgba(30,41,80,.16);padding:6px 8px 6px 14px;
}
.role-switch-label{font-size:10.5px;font-weight:700;color:var(--text-faint);letter-spacing:.4px;text-transform:uppercase;margin-right:2px;}
.role-switch button{
  font-size:11.5px;font-weight:700;color:var(--text-soft);
  border-radius:20px;padding:6px 12px;
  transition:background var(--ease),color var(--ease);
}
.role-switch button:hover{background:var(--tint);color:var(--text);}
.role-switch button.on{background:var(--blue-dark);color:#fff;}
@media (max-width:640px){
  .role-switch{left:12px;right:12px;bottom:12px;justify-content:center;padding:6px;}
  .role-switch-label{display:none;}
}

/* ===================== HIGHLIGHT STRIP + QUOTE CARD ======================= */
.highlight-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;}
.highlight-strip li{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.highlight-strip .h-ic{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.highlight-strip li span:last-child{font-size:11px;font-weight:600;color:var(--text);line-height:1.35;}

.quote-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:120px;display:flex;align-items:center;box-shadow:var(--shadow);
  background:linear-gradient(115deg,#eef4ff 0%,#f4f8ff 60%,#fbfdff 100%);
}
.quote-card-photo{position:absolute;inset:0;opacity:.9;}
.quote-card-photo img{
  position:absolute;right:-10%;top:0;bottom:0;width:60%;height:100%;
  object-fit:cover;object-position:right 68%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);
}
.quote-card-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,244,255,.97) 0%,rgba(238,244,255,.8) 46%,rgba(238,244,255,.2) 74%,transparent 100%);}
.quote-card blockquote{position:relative;z-index:2;margin:0;padding:18px 22px;max-width:78%;}
.quote-card blockquote p{font-family:'Poppins',sans-serif;font-style:italic;font-weight:500;font-size:15px;line-height:1.4;color:#173a8f;}
.quote-card blockquote footer{margin-top:6px;font-size:11.5px;font-style:italic;color:#173a8f;}

/* ===================== ACCESS MATRIX =====================================
   Read / Write / None as a readable cell rather than a tick, so the grid can
   be scanned down a column without a legend. */
.acc{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;border-radius:6px;padding:3px 8px;white-space:nowrap;
}
.acc i{font-size:9px;}
.acc-write{background:#e3f9ec;color:#16803c;}
.acc-read{background:#e6f0ff;color:#1d4ed8;}
.acc-none{background:#f1f3f9;color:#9aa1b1;}

/* ===================== APPROVALS ===================== */
.approval-list{display:flex;flex-direction:column;gap:10px;}
.approval-row{
  display:flex;align-items:center;gap:12px;
  background:#fbfcfe;border:1px solid #eef0f6;border-radius:12px;padding:12px 14px;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.approval-row:hover{background:#f6f9ff;border-color:#dbe6fb;box-shadow:var(--shadow);}
.approval-body{flex:1;min-width:0;}
.approval-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
.approval-top b{font-size:12.5px;font-weight:700;color:var(--text);}
.approval-meta{font-size:11px;color:var(--text-faint);font-weight:500;}
.approval-actions{display:flex;gap:8px;flex:0 0 auto;}
.approval-actions .btn{padding:7px 12px;}

/* ===================== NOTICES BOARD ===================== */
.board-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.board-tab{
  font-size:13px;font-weight:700;color:var(--text-soft);
  padding:10px 4px;margin-right:20px;border-bottom:2px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.board-tab:hover{color:var(--text);}
.board-tab.on{color:var(--blue-dark);border-bottom-color:var(--blue-dark);}

.notice-list{display:flex;flex-direction:column;gap:10px;}
.notice-card{
  display:flex;gap:12px;align-items:flex-start;
  background:#fbfcfe;border:1px solid #eef0f6;border-radius:12px;
  padding:13px 14px;transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.notice-card:hover{background:#f6f9ff;border-color:#dbe6fb;box-shadow:var(--shadow);}
.notice-card .n-ic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.notice-card .n-body{flex:1;min-width:0;}
.notice-card .n-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
.notice-card .n-top b{font-size:13px;font-weight:700;color:var(--text);}
.notice-card .n-top i.fa-thumbtack{color:var(--blue-dark);font-size:10.5px;}
.notice-card p{font-size:12px;color:var(--text-soft);line-height:1.5;margin-bottom:7px;}
.notice-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text-faint);font-weight:500;}
.notice-meta span{display:inline-flex;align-items:center;gap:5px;}
.notice-meta i{font-size:10px;}

.board-empty{display:none;}
.board-empty.show{display:flex;}

/* ===================== INNER PAGES ===================== */
/* A directory table carries more columns than a panel-width table, so it gets
   the larger share of the row and never wraps a name or a batch onto a second
   line — the row height stays uniform and the eye can scan down a column. */
.grid-directory{display:grid;grid-template-columns:2.4fr 1fr;gap:16px;}
table.kx.nowrap th,table.kx.nowrap td{white-space:nowrap;}
/* A row action hugs its own label. The base 40px is narrower than "View →",
   which wrapped the link onto a second line and doubled every row's height. */
table.kx td.row-act{width:1%;white-space:nowrap;}
@media (max-width:1400px){ .grid-directory{grid-template-columns:1fr;} }

.progress-cell{display:flex;align-items:center;gap:8px;min-width:120px;}
.progress-cell .usage-bar{height:7px;}
.progress-cell span{font-size:11px;font-weight:700;color:var(--text);}

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

.switch-list{display:flex;flex-direction:column;}
.switch-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border);}
.switch-row:last-child{border-bottom:none;}
.switch-row .s-body{flex:1;}
.switch-row .s-body b{display:block;font-size:12.5px;font-weight:700;color:var(--text);}
.switch-row .s-body span{font-size:11px;color:var(--text-faint);}
.switch{width:36px;height:20px;border-radius:20px;background:#dfe4f0;position:relative;flex:0 0 auto;transition:background var(--ease);cursor:pointer;}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(30,41,80,.25);transition:left var(--ease);}
.switch.on{background:var(--blue-dark);}
.switch.on::after{left:18px;}

.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;}
.field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-faint);margin-bottom:5px;}
.field .static{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#f6f7fb;border:1px solid #eceef6;border-radius:9px;
  padding:9px 12px;font-size:12.5px;font-weight:600;color:var(--text);
}
.field .static i{font-size:10px;color:var(--text-faint);}

.compose textarea,.compose input[type=text]{
  width:100%;background:#f6f7fb;border:1px solid #e9ecf5;border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:var(--text);outline:none;resize:vertical;
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
}
.compose textarea:focus,.compose input[type=text]:focus{background:#fff;border-color:#c7d9fb;box-shadow:0 0 0 3px rgba(59,130,246,.10);}
.compose .row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.compose .row>*{flex:1;min-width:160px;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1400px){
  .module-grid{grid-template-columns:repeat(2,1fr);}
  .link-grid,.report-grid{grid-template-columns:repeat(3,1fr);}
  .welcome-body{max-width:66%;}
}
@media (max-width:900px){
  .welcome{flex-direction:column;align-items:flex-start;min-height:0;padding:22px 20px;}
  .welcome-body{max-width:100%;}
  .welcome-photo{display:none;}
  .module-grid{grid-template-columns:1fr;}
  .module-stats,.module-stats.cols-3{grid-template-columns:repeat(2,1fr);}
  .module-split{grid-template-columns:1fr;}
  .link-grid,.report-grid{grid-template-columns:repeat(2,1fr);}
  .field-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .link-grid,.report-grid{grid-template-columns:1fr;}
}