/* Reference design adapted to the CRM's existing components and responsive layout. */
:root{color-scheme:dark;--bg:#03060b;--bg-2:#050a12;--surface:#080f19;--surface-2:#0b1522;--surface-3:#0d1a2b;--border:rgba(76,160,255,.22);--border-strong:rgba(59,166,255,.42);--text:#f4f8ff;--text-2:#c6d6eb;--muted:#8ea6c2;--faint:#6f86a2;--blue:#168bff;--cyan:#00d4ff;--purple:#a34dff;--green:#00dfa2;--orange:#ff9f24;--radius:15px;--sidebar-w:250px;--font:'DM Sans','Segoe UI',sans-serif;--shadow:0 12px 32px rgba(0,0,0,.25)}
body{font-size:13px}
body::before{background:radial-gradient(ellipse at 70% 4%,rgba(0,91,255,.08),transparent 38%)}
.sidebar{background:var(--bg-2);border-radius:0 18px 18px 0;border-right-color:var(--border)}
.sidebar-head{padding:20px 16px}
.brand-mark{border-radius:50%;width:46px;height:46px;flex-basis:46px}
.brand-text b{font-family:Manrope,var(--font);font-size:14px}
.brand-text span{color:var(--cyan);font-weight:700}
.nav-item{font-size:12.5px;font-weight:700;border-radius:9px;min-height:39px;padding:9px 11px;margin-bottom:5px;color:var(--muted)}
.nav-item svg{color:var(--cyan)}
.nav-item.active{color:white;background:linear-gradient(105deg,#0878ff,#064bde);border-color:transparent;box-shadow:0 0 18px rgba(0,103,255,.3),inset 0 1px rgba(255,255,255,.25)}
.nav-item.active svg{color:white}.nav-item.active::before{display:none}
.nav-item:hover{background:var(--surface-3);color:var(--text)}
.nav-item.active:hover{background:#086be8;color:white}
.topbar{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);border-bottom-color:var(--border)}
.topbar .search-box{max-width:650px}.topbar .search-box input{border-radius:999px;border-color:var(--border-strong);background:var(--surface)}
.search-box input:focus{background:var(--surface-2)}
.icon-btn{color:var(--cyan);background:var(--surface);border:1px solid var(--border);border-radius:12px}
.content{max-width:1800px;padding:24px 28px}
h1,h2,h3,.stat-value{font-family:Manrope,var(--font)}
.card,.stat-card{background:linear-gradient(145deg,var(--surface-2),var(--surface));border-color:var(--border);box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.025)}
.card-head{padding:15px 16px}.card-head h3{font-size:15px}.card-body{padding:16px}
.hero{background:transparent;border:0;box-shadow:none;padding:4px 0 20px}
.hero h2{font-size:clamp(23px,2vw,30px);letter-spacing:-.8px}.hero p{color:var(--muted)}
.stat-card{padding:16px 16px 16px 82px;min-height:112px;border-color:var(--border-strong)}
.stat-top{margin-bottom:7px}.stat-label{font-size:11px}.stat-value{font-size:clamp(20px,1.7vw,27px)}
.stat-icon{position:absolute;left:15px;top:25px;width:53px;height:53px;border-radius:13px;color:white!important;border:0!important}
.stat-card.cyan .stat-icon,.stat-card.blue .stat-icon{background:linear-gradient(145deg,#168bff,#075bd5);box-shadow:0 0 20px #168bff55}
.stat-card.purple .stat-icon{background:linear-gradient(145deg,#a34dff,#6f24d0);box-shadow:0 0 20px #a34dff55}
.stat-card.green .stat-icon{background:linear-gradient(145deg,#00dfa2,#00926d);box-shadow:0 0 20px #00dfa255}
.stat-card.orange .stat-icon{background:linear-gradient(145deg,#ff9f24,#cc6600);box-shadow:0 0 20px #ff9f2455}
.stat-foot{flex-wrap:wrap;font-size:10px}.stat-icon svg{width:24px;height:24px}
.btn.primary{background:linear-gradient(105deg,#0878ff,#064bde);border-color:#168bff;color:white;box-shadow:0 4px 16px #0878ff26}
.btn:not(.primary):not(.danger),.input,select.input,textarea.input{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.qa{background:var(--surface);border-color:var(--border)}.qa .qa-icon{color:var(--cyan);background:var(--surface-3)}
.data th{background:var(--surface-3);color:var(--muted)}.data td{border-color:var(--border)}
.modal,.notif-panel,.search-results,.assistant-panel,.dropdown-menu{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
html[data-theme=light]{color-scheme:light;--bg:#f1f6fd;--bg-2:#f9fbff;--surface:#fff;--surface-2:#f8fbff;--surface-3:#edf5ff;--border:rgba(40,120,240,.16);--border-strong:rgba(40,120,240,.32);--text:#102b57;--text-2:#26456d;--muted:#526b8d;--faint:#657b99;--cyan:#0078bd;--green:#008764;--purple:#7933ce;--orange:#ae5a00;--shadow:0 10px 28px rgba(30,90,160,.08)}
html[data-theme=light] .page-title h1,html[data-theme=light] .hero h2{color:var(--text)}
html[data-theme=light] .nav-item:hover{color:var(--text)}
html[data-theme=light] .nav-item.active:hover{color:white}
html[data-theme=light] .modal-head,html[data-theme=light] .modal-foot,html[data-theme=light] .assistant-head,html[data-theme=light] .assistant-foot{background:var(--surface-2)}
html[data-theme=light] .login-left,html[data-theme=light] .login-right{background:var(--surface)}
html[data-theme=light] .badge{color:var(--text-2)}
html[data-theme=light] .btn.ghost:hover{color:var(--blue)}
@media(max-width:1100px){.stat-card{padding-left:65px}.stat-icon{left:12px;width:42px;height:42px}.stat-value{font-size:21px}}
@media(max-width:600px){.content{padding:16px 12px}.stat-card{padding:14px;min-height:120px}.stat-icon{position:static;width:30px;height:30px}.stat-icon svg{width:17px;height:17px}.stat-value{font-size:23px}.topbar{gap:8px}.topbar-actions{gap:6px}.brand-mark{width:40px;height:40px;flex-basis:40px}}


/* Faculty earnings */
.earnings-overview {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.earnings-overview > div {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface, #101a29);
}
.earnings-overview .earnings-total {
  border-color: #347f94;
  background: linear-gradient(115deg, #102b38, #121c30);
  color: #e6faff;
}
.earnings-overview strong {
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.earnings-overview small { opacity: .8; }
.earnings-list { display: grid; gap: 12px; }
.earnings-faculty-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr) auto;
  align-items: center;
  gap: 12px 22px;
  padding: 16px 18px;
}
.earnings-faculty-head h3 { margin: 0 0 4px; }
.earnings-faculty-amount { display: grid; gap: 4px; }
.earnings-faculty-amount strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.earnings-access { display: inline-flex; align-items: center; gap: 8px; }
.earnings-access input { width: 16px; height: 16px; accent-color: #29a7c4; }
.earnings-classes { border-top: 1px solid var(--border); }
.earnings-classes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.earnings-classes summary::-webkit-details-marker { display: none; }
.earnings-classes summary span {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.earnings-classes[open] summary span { transform: rotate(225deg); }
.earnings-empty { padding: 6px 18px 16px; }
.earnings-notice { margin-bottom: 16px; }
@media (max-width: 640px) {
  .earnings-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earnings-overview .earnings-total { grid-column: 1 / -1; }
  .earnings-faculty-head { grid-template-columns: minmax(0, 1fr) auto; }
  .earnings-access { grid-column: 1 / -1; }
}