/* =========================================================
   CTVIS 2026 SOFT GREEN DESIGN SYSTEM
   Inspired by the approved dashboard reference.
   Visual-only overrides; backend behavior is untouched.
========================================================= */

:root{
    --primary-green:#35a85b;
    --primary-green-2:#58bd73;
    --dark-green:#177b3b;
    --deep-green:#116532;
    --light-green:#eaf7ed;
    --soft-green:#f4fbf5;
    --soft-mint:#eef9f1;
    --soft-yellow:#fff7df;
    --yellow:#f5bd32;
    --background:#f7faf8;
    --surface:#ffffff;
    --surface-2:#f7fbf8;
    --text-dark:#16211a;
    --text:#16211a;
    --text-muted:#748078;
    --border:#e3ebe5;
    --shadow:0 12px 34px rgba(36,89,53,.08);
    --shadow-soft:0 7px 20px rgba(36,89,53,.055);
}

/* Global portal canvas */
body.dashboard-body{
    background:
      radial-gradient(circle at 98% 8%, rgba(246,196,75,.11), transparent 18rem),
      radial-gradient(circle at 3% 96%, rgba(73,190,111,.14), transparent 23rem),
      #f8fbf9 !important;
    color:var(--text-dark);
}
.dashboard-main,
.dashboard-content,
.admin-page-content{
    background:transparent !important;
}
.dashboard-content{
    padding:28px 30px 38px !important;
}

/* White sidebar like the approved reference */
.dashboard-sidebar{
    width:286px !important;
    background:#fff !important;
    color:#1b2720 !important;
    border-right:1px solid #e6ece7 !important;
    box-shadow:8px 0 30px rgba(45,79,56,.035) !important;
    transition:width .24s ease,left .24s ease !important;
}
.sidebar-header{
    min-height:96px !important;
    padding:18px 22px !important;
    border-bottom:1px solid #eef2ef !important;
}
.sidebar-brand{gap:12px !important; min-width:0}
.sidebar-brand img{
    width:52px !important;height:52px !important;padding:2px;
    background:#fff !important;
    border:1px solid #e1e9e3;
    box-shadow:0 4px 13px rgba(26,90,45,.08);
}
.sidebar-brand strong{color:#142019 !important;font-size:14px !important;line-height:1.2}
.sidebar-brand span{color:#77837b !important;font-size:9px !important;margin-top:4px}
.sidebar-menu{padding:16px 15px 22px !important}
.sidebar-link{
    min-height:47px !important;
    margin-bottom:5px !important;
    padding:8px 11px !important;
    gap:11px !important;
    color:#48544d !important;
    border-radius:11px !important;
    font-size:12px !important;
    font-weight:600 !important;
}
.sidebar-link:hover{
    color:#187c3d !important;
    background:#f0f9f2 !important;
}
.sidebar-link.active{
    color:#fff !important;
    background:linear-gradient(90deg,#2ca253,#64c47c) !important;
    box-shadow:0 7px 16px rgba(53,168,91,.17) !important;
}
.sidebar-link.active{box-shadow:0 7px 16px rgba(53,168,91,.17) !important}
.sidebar-icon{
    width:31px !important;height:31px !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#68776d !important;
}
.sidebar-link.active .sidebar-icon{color:#fff !important;background:rgba(255,255,255,.13)!important}
.sidebar-link:hover .sidebar-icon{color:#2fa257 !important}
.sidebar-footer{
    padding:14px 15px 19px !important;
    border-top:1px solid #eef2ef !important;
}
.logout-link{color:#5c665f !important}

/* Main/topbar spacing follows sidebar */
.dashboard-main{
    width:calc(100% - 286px) !important;
    margin-left:286px !important;
    transition:width .24s ease,margin-left .24s ease !important;
}
.dashboard-topbar{
    min-height:82px !important;
    padding:12px 28px !important;
    background:rgba(255,255,255,.94) !important;
    border-bottom:1px solid #e8eeea !important;
    box-shadow:0 5px 20px rgba(38,77,50,.025) !important;
    backdrop-filter:blur(14px);
}
.topbar-left{gap:14px !important}
.topbar-left h1{font-size:19px !important;color:#18221c !important;letter-spacing:-.25px}
.topbar-left p{font-size:11px !important;color:#7a857e !important}
.topbar-actions{gap:9px !important}
.status-chip{
    border:1px solid #e5ebe7 !important;
    background:#fff !important;
    color:#48534c !important;
    border-radius:11px !important;
    box-shadow:0 4px 13px rgba(36,76,48,.04);
}
.theme-toggle,.topbar-notification{
    border:1px solid #e3eae5 !important;
    background:#fff !important;
    color:#4a5850 !important;
    box-shadow:0 4px 12px rgba(35,75,47,.04);
}
.topbar-user{padding:5px 8px !important;border-radius:12px}
.user-avatar{border-color:#d9eadf !important;background:#eef8f0 !important;color:#237e43 !important}
.sidebar-toggle{
    display:grid !important;
    place-items:center !important;
    width:42px !important;height:42px !important;
    min-width:42px !important;
    border:1px solid #e2e9e4 !important;
    border-radius:11px !important;
    background:#fff !important;
    color:#425149 !important;
    box-shadow:0 4px 12px rgba(36,75,48,.04);
}
.sidebar-toggle:hover{background:#eff8f1 !important;color:#258c48 !important}

/* Desktop collapsible sidebar */
@media (min-width:901px){
  body.sidebar-collapsed .dashboard-sidebar{width:86px !important}
  body.sidebar-collapsed .dashboard-main{
      width:calc(100% - 86px) !important;
      margin-left:86px !important;
  }
  body.sidebar-collapsed .sidebar-header{
      padding-inline:12px !important;
      justify-content:center !important;
  }
  body.sidebar-collapsed .sidebar-brand div,
  body.sidebar-collapsed .sidebar-link > span:last-child{
      width:0 !important;max-width:0 !important;
      opacity:0 !important;overflow:hidden !important;
      white-space:nowrap !important;pointer-events:none !important;
  }
  body.sidebar-collapsed .sidebar-brand{justify-content:center !important}
  body.sidebar-collapsed .sidebar-brand img{width:47px !important;height:47px !important}
  body.sidebar-collapsed .sidebar-menu,
  body.sidebar-collapsed .sidebar-footer{padding-inline:12px !important}
  body.sidebar-collapsed .sidebar-link{
      justify-content:center !important;
      padding-inline:7px !important;
      gap:0 !important;
  }
  body.sidebar-collapsed .sidebar-icon{width:36px !important;height:36px !important}
}

/* Modern cards/panels throughout the internal system */
.admin-card,.dashboard-panel,.teacher-course-card,.form-card,.table-card,
.announcement-admin-card,.notification-item,.quick-action,.course-item,
.dashboard-chart-card,.calendar-card,.calendar-agenda{
    border:1px solid #e4ebe6 !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:var(--shadow-soft) !important;
}
.admin-card:hover,.dashboard-panel:hover,.teacher-course-card:hover,.quick-action:hover{
    border-color:#d5e7da !important;
}
.page-banner{
    border-radius:20px !important;
    background:linear-gradient(135deg,#eff9f1 0%,#fff 58%,#fff7e0 100%) !important;
    color:#17221b !important;
    border:1px solid #e4ece6 !important;
    box-shadow:var(--shadow-soft) !important;
}
.page-banner h1,.page-banner h2{color:#17221b !important}
.page-banner p{color:#758079 !important}
.panel-label,.eyebrow,.section-eyebrow{color:#2c9851 !important}
.admin-btn,.primary-btn,.system-btn.primary,.public-button-primary{
    background:linear-gradient(135deg,#2ba252,#55bb70) !important;
    color:#fff !important;border-color:transparent !important;
    box-shadow:0 7px 17px rgba(48,161,83,.17) !important;
}
.light-btn,.secondary-btn,.system-btn.secondary{
    border-color:#dce7df !important;background:#fff !important;color:#287f46 !important;
}
input,select,textarea,.system-input,.system-textarea,.gradebook-select{
    border-color:#dfe8e1 !important;
    border-radius:11px !important;
    background:#fff !important;
    color:#1c2821 !important;
}
input:focus,select:focus,textarea:focus,.system-input:focus,.system-textarea:focus{
    border-color:#83c997 !important;
    box-shadow:0 0 0 3px rgba(66,174,98,.11) !important;
}
.admin-table th,.gradebook-table th{
    background:#f4faf5 !important;color:#536158 !important;
    border-color:#e5ece7 !important;
}
.admin-table td,.gradebook-table td{border-color:#e9eeeb !important}
.filter-bar{background:#f8fbf9 !important;border-color:#e5ebe7 !important;border-radius:14px !important}

/* Auth: login/register/OTP/reset pages */
.auth-page{
    background:
      radial-gradient(circle at 8% 90%,rgba(68,183,103,.20),transparent 24rem),
      radial-gradient(circle at 93% 7%,rgba(248,198,72,.14),transparent 20rem),
      #f7faf8 !important;
}
.auth-shell{
    border:1px solid #e1e9e3 !important;
    border-radius:26px !important;
    background:#fff !important;
    box-shadow:0 25px 70px rgba(35,83,49,.12) !important;
    overflow:hidden;
}
.auth-brand-panel{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#eef9f1,#f8fcf9 58%,#fff4d7) !important;
    color:#17231b !important;
}
.auth-brand-panel:before{
    content:"";position:absolute;width:260px;height:260px;border-radius:50%;
    left:-105px;bottom:-115px;background:rgba(68,186,103,.13);
}
.auth-brand-panel:after{
    content:"";position:absolute;width:190px;height:190px;border-radius:50%;
    right:-90px;top:-80px;background:rgba(245,189,50,.11);
}
.auth-brand-link,.auth-brand-copy,.auth-brand-footer{position:relative;z-index:1}
.auth-brand-link span,.auth-brand-copy h1{color:#17231b !important}
.auth-brand-copy p,.auth-brand-footer{color:#657169 !important}
.auth-eyebrow{color:#2b9550 !important;background:#e4f5e9 !important;border-color:#d5ebdc !important}
.auth-form-panel{background:#fff !important}
.auth-form-heading span{color:#2d9852 !important}
.auth-form-heading h2{color:#17231b !important}
.auth-form-heading p,.auth-switch,.auth-back-link{color:#727e76 !important}
.auth-submit{
    border-radius:11px !important;
    background:linear-gradient(135deg,#2ca354,#58bd73) !important;
    box-shadow:0 9px 20px rgba(47,163,83,.18) !important;
}
.auth-forgot-link,.auth-switch a,.auth-back-link:hover{color:#218344 !important}

/* Public secondary pages */
.public-header{
    background:rgba(255,255,255,.96) !important;
    color:#17231b !important;
    border-bottom:1px solid #e5ece7 !important;
    box-shadow:0 5px 18px rgba(38,79,50,.035) !important;
}
.public-header .brand strong,.public-header .links a{color:#253129 !important}
.public-header .brand span{color:#758078 !important}
.public-header .links a.active{color:#219049 !important}
.public-header .links .login{
    color:#fff !important;background:linear-gradient(135deg,#2ca354,#58bd73) !important;
    border-color:transparent !important;border-radius:10px !important;
}
.public-hero,.public-page-hero{
    background:linear-gradient(135deg,#eef9f1,#fff 64%,#fff5dc) !important;
    color:#17231b !important;
}
.public-card,.feature-detail-card,.contact-card,.announcement-card{
    border-color:#e3ebe5 !important;border-radius:18px !important;
    box-shadow:var(--shadow-soft) !important;
}

/* DARK MODE: high contrast and readable */
html[data-theme="dark"]{
    --background:#0e1712;
    --surface:#151f19;
    --surface-2:#19261e;
    --text-dark:#f1f7f3;
    --text:#f1f7f3;
    --text-muted:#a9b8af;
    --border:#304139;
}
html[data-theme="dark"] body.dashboard-body{
    background:
      radial-gradient(circle at 100% 0%,rgba(176,133,35,.08),transparent 20rem),
      radial-gradient(circle at 0% 100%,rgba(47,150,79,.09),transparent 24rem),
      #0d1510 !important;
    color:#eef6f0 !important;
}
html[data-theme="dark"] .dashboard-sidebar{
    background:#111b15 !important;border-color:#2b3931 !important;color:#eaf4ed !important;
}
html[data-theme="dark"] .sidebar-header,
html[data-theme="dark"] .sidebar-footer{border-color:#29372f !important}
html[data-theme="dark"] .sidebar-brand strong{color:#f2f8f4 !important}
html[data-theme="dark"] .sidebar-brand span{color:#9fb0a5 !important}
html[data-theme="dark"] .sidebar-link{color:#b5c3ba !important}
html[data-theme="dark"] .sidebar-link:hover{background:#1a2b20 !important;color:#dff2e4 !important}
html[data-theme="dark"] .sidebar-link.active{
    color:#fff !important;background:linear-gradient(90deg,#237d42,#3ba55d) !important;
}
html[data-theme="dark"] .sidebar-icon{color:#a7b8ad !important}
html[data-theme="dark"] .dashboard-topbar{
    background:rgba(15,24,18,.95) !important;border-color:#29372f !important;
}
html[data-theme="dark"] .topbar-left h1,
html[data-theme="dark"] .topbar-user-info strong{color:#f2f8f4 !important}
html[data-theme="dark"] .topbar-left p,
html[data-theme="dark"] .topbar-user-info span{color:#9faea5 !important}
html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .topbar-notification,
html[data-theme="dark"] .status-chip{
    border-color:#314238 !important;background:#17231b !important;color:#dbe8df !important;
}
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-stat-card,
html[data-theme="dark"] .teacher-course-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .announcement-admin-card,
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .course-item,
html[data-theme="dark"] .dashboard-chart-card,
html[data-theme="dark"] .calendar-card,
html[data-theme="dark"] .calendar-agenda,
html[data-theme="dark"] .page-banner{
    background:#151f19 !important;border-color:#2f4037 !important;color:#eef6f0 !important;
}
html[data-theme="dark"] .page-banner h1,
html[data-theme="dark"] .page-banner h2,
html[data-theme="dark"] .panel-header h2,
html[data-theme="dark"] .chart-card-heading strong,
html[data-theme="dark"] .dashboard-stat-card .stat-card-value,
html[data-theme="dark"] .dashboard-stat-card .stat-card-label,
html[data-theme="dark"] .course-item strong,
html[data-theme="dark"] .quick-action strong,
html[data-theme="dark"] .dashboard-announcement strong{
    color:#f1f7f3 !important;
}
html[data-theme="dark"] .page-banner p,
html[data-theme="dark"] .chart-card-heading span,
html[data-theme="dark"] .dashboard-stat-note,
html[data-theme="dark"] .quick-action small,
html[data-theme="dark"] .dashboard-announcement p,
html[data-theme="dark"] .dashboard-announcement small,
html[data-theme="dark"] .course-item small{
    color:#a9b8af !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .system-input,
html[data-theme="dark"] .system-textarea,
html[data-theme="dark"] .gradebook-select{
    background:#101914 !important;border-color:#34463b !important;color:#eff6f1 !important;
}
html[data-theme="dark"] .admin-table th,
html[data-theme="dark"] .gradebook-table th{
    background:#1a2820 !important;color:#c2d0c7 !important;border-color:#304138 !important;
}
html[data-theme="dark"] .admin-table td,
html[data-theme="dark"] .gradebook-table td{color:#e6efe9 !important;border-color:#293831 !important}
html[data-theme="dark"] .filter-bar{background:#121d17 !important;border-color:#304138 !important}
html[data-theme="dark"] a.panel-link{color:#7ed897 !important}
html[data-theme="dark"] .calendar-day{background:#1a2820 !important;color:#e5efe8 !important;border-color:#2f4037 !important}
html[data-theme="dark"] .calendar-day.outside{color:#728278 !important}
html[data-theme="dark"] .calendar-weekdays{color:#9faea5 !important}
html[data-theme="dark"] .calendar-event{background:#1a2820 !important;border-color:#2e4036 !important}
html[data-theme="dark"] .calendar-event strong{color:#edf6f0 !important}
html[data-theme="dark"] .calendar-event small{color:#9fafA5 !important}
html[data-theme="dark"] .chart-legend span{color:#dbe8df !important}
html[data-theme="dark"] .donut-center strong{color:#f1f7f3 !important}
html[data-theme="dark"] .donut-center span{color:#9faea5 !important}

/* responsive */
@media(max-width:900px){
    .dashboard-sidebar{width:286px !important}
    .dashboard-main{width:100% !important;margin-left:0 !important}
    .dashboard-content{padding:20px 16px 30px !important}
}


/* Dashboard reference details */
.dashboard-stat-card{
    position:relative !important;
    min-height:148px !important;
    padding:18px !important;
    border:1px solid #e4ebe6 !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:0 9px 24px rgba(41,85,54,.065) !important;
    overflow:hidden !important;
}
.dashboard-stat-card::after{display:none !important}
.stat-card-top{
    position:relative !important;
    display:flex !important;align-items:center !important;gap:11px !important;
}
.stat-card-label{font-size:12px !important;color:#6e7a72 !important;font-weight:650 !important}
.stat-card-value{
    display:block !important;
    margin:11px 0 0 65px !important;
    font-size:31px !important;
    line-height:1 !important;
    color:#142019 !important;
    letter-spacing:-.8px;
}
.stat-trend-badge{
    position:absolute;right:0;top:0;
    min-width:48px;height:25px;padding:0 8px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid #cfe9d5;border-radius:9px;
    background:#f0faF2;color:#218d47;
    font-size:10px;font-weight:800;
}
.stat-card-footer{
    position:absolute;left:83px;right:16px;bottom:15px;
    display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.stat-view-link{font-size:10px;font-weight:800;color:#238c48}
.stat-sparkline{width:108px;height:34px;overflow:visible}
.sparkline-guide{fill:none;stroke:#eaf0ec;stroke-width:5;stroke-linecap:round}
.sparkline-line{fill:none;stroke:#43b760;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.dashboard-stat-card:nth-child(2) .sparkline-line{stroke:#f0a31d}
.dashboard-stat-card:nth-child(3) .sparkline-line{stroke:#55b75a}
.dashboard-stat-card:nth-child(4) .sparkline-line{stroke:#f39b27}
.dashboard-stat-card:nth-child(2) .stat-trend-badge,
.dashboard-stat-card:nth-child(4) .stat-trend-badge{
    border-color:#f4dfb5;background:#fff8e9;color:#d98b17;
}

/* Fix engagement donut/legend overlap */
.engagement-layout{
    min-height:245px;
    display:grid;
    grid-template-columns:minmax(155px,1fr) minmax(120px,.8fr);
    align-items:center;
    gap:16px;
}
.engagement-layout .donut-chart-shell{
    width:100%;
    min-width:0;
    height:220px !important;
    position:relative;
}
.engagement-layout .donut-chart-shell canvas{
    width:100% !important;
    height:220px !important;
}
.engagement-layout .donut-center{
    position:absolute !important;
    inset:50% auto auto 50% !important;
    transform:translate(-50%,-50%) !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    pointer-events:none;
    text-align:center;
}
.engagement-layout .donut-center strong{font-size:27px !important;line-height:1 !important;color:#17221b}
.engagement-layout .donut-center span{margin-top:5px;font-size:10px !important;color:#7a857e}
.engagement-legend{
    display:grid !important;
    gap:13px !important;
    align-content:center;
    min-width:0;
}
.engagement-legend span{
    width:100%;
    display:grid !important;
    grid-template-columns:10px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    color:#536058;
    font-size:10px !important;
    white-space:nowrap;
}
.engagement-legend span i{
    width:8px !important;height:8px !important;border-radius:50% !important;
}
.engagement-legend span strong{
    color:#17221b !important;font-size:11px !important;text-align:right;
}

/* Calendar: visibly synced current date */
.calendar-title-wrap{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.calendar-today-chip{
    min-width:116px;
    display:grid;
    grid-template-columns:44px 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    overflow:hidden;
    border:1px solid #dce9df;
    border-radius:13px;
    background:#f3faf4;
}
.calendar-today-chip > span{
    grid-row:1/3;
    align-self:stretch;
    display:grid;place-items:center;
    background:#dff3e4;
    color:#248a47;
    font-size:10px;font-weight:900;
}
.calendar-today-chip > strong{
    padding:6px 9px 0;
    color:#17221b;font-size:18px;line-height:1;
}
.calendar-today-chip > small{
    padding:1px 9px 6px;
    color:#7a857e;font-size:8px;font-weight:700;
}
.calendar-controls{
    display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap;
}
#calendarMonthLabel{
    min-width:120px;text-align:center;color:#253129;font-size:12px;
}

/* Teacher dashboard light theme must override older inline dark-ish rules */
html:not([data-theme="dark"]) .welcome-content h2{color:#17221b !important}
html:not([data-theme="dark"]) .welcome-content p{color:#77827b !important}
html:not([data-theme="dark"]) .dashboard-chart-card,
html:not([data-theme="dark"]) .dashboard-panel{background:#fff !important}

/* Dark dashboard-specific contrast */
html[data-theme="dark"] .dashboard-stat-card{
    background:#151f19 !important;border-color:#304138 !important;
}
html[data-theme="dark"] .stat-card-value,
html[data-theme="dark"] .stat-card-label,
html[data-theme="dark"] .engagement-legend span strong,
html[data-theme="dark"] .engagement-layout .donut-center strong,
html[data-theme="dark"] #calendarMonthLabel,
html[data-theme="dark"] .calendar-today-chip > strong{
    color:#eff6f1 !important;
}
html[data-theme="dark"] .stat-card-label,
html[data-theme="dark"] .engagement-layout .donut-center span{color:#a7b6ac !important}
html[data-theme="dark"] .stat-trend-badge{
    background:#183021 !important;border-color:#315d3f !important;color:#87d99d !important;
}
html[data-theme="dark"] .calendar-today-chip{
    background:#17251d !important;border-color:#304238 !important;
}
html[data-theme="dark"] .calendar-today-chip > span{
    background:#1f3a29 !important;color:#82d399 !important;
}
html[data-theme="dark"] .calendar-today-chip > small{color:#a7b5ac !important}
html[data-theme="dark"] .sparkline-guide{stroke:#26382e}

/* Dashboard responsive */
@media(max-width:1100px){
  .engagement-layout{grid-template-columns:1fr 160px}
}
@media(max-width:700px){
  .engagement-layout{grid-template-columns:1fr}
  .engagement-layout .donut-chart-shell{height:205px !important}
  .engagement-layout .donut-chart-shell canvas{height:205px !important}
  .engagement-legend{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .calendar-title-wrap{align-items:flex-start}
}


/* =========================================================
   STRICT REFERENCE MATCH — AUG 2026
   Decorative pastel corners, light loader, compact week
   calendar, and perfectly circular engagement donut.
========================================================= */

/* Keep content above the decorative background */
body.dashboard-body{
    position:relative;
    overflow-x:hidden;
    background:#fbfcfb !important;
}
.dashboard-layout{
    position:relative;
    z-index:1;
    background:transparent !important;
}

/* Layered organic background accents like the approved reference */
body.dashboard-body::before{
    content:"";
    position:fixed;
    left:-105px;
    bottom:-120px;
    width:410px;
    height:360px;
    z-index:0;
    pointer-events:none;
    opacity:.95;
    background:
      radial-gradient(ellipse at 30% 25%, rgba(204,239,210,.98) 0 27%, transparent 28%),
      radial-gradient(ellipse at 55% 48%, rgba(167,224,181,.88) 0 34%, transparent 35%),
      radial-gradient(ellipse at 25% 76%, rgba(126,208,150,.72) 0 38%, transparent 39%),
      radial-gradient(ellipse at 80% 85%, rgba(255,229,160,.58) 0 25%, transparent 26%);
    filter:saturate(.95);
}
body.dashboard-body::after{
    content:"";
    position:fixed;
    right:-115px;
    bottom:-110px;
    width:430px;
    height:330px;
    z-index:0;
    pointer-events:none;
    opacity:.88;
    background:
      radial-gradient(ellipse at 75% 35%, rgba(224,246,227,.95) 0 30%, transparent 31%),
      radial-gradient(ellipse at 42% 72%, rgba(184,231,193,.78) 0 36%, transparent 37%),
      radial-gradient(ellipse at 88% 82%, rgba(248,218,142,.46) 0 26%, transparent 27%);
}

/* Small dotted accent near the upper-right of the working area */
.dashboard-main::after{
    content:"";
    position:fixed;
    right:22px;
    top:96px;
    width:86px;
    height:72px;
    z-index:0;
    pointer-events:none;
    opacity:.28;
    background-image:radial-gradient(#f2b643 1.5px, transparent 1.5px);
    background-size:12px 12px;
}
.dashboard-topbar,
.dashboard-content{
    position:relative;
    z-index:2;
}

/* Loader now belongs to the same soft white/green/yellow design language */
.ctvis-page-loader{
    background:
      radial-gradient(circle at 8% 92%, rgba(126,208,150,.24), transparent 25rem),
      radial-gradient(circle at 94% 7%, rgba(248,205,92,.20), transparent 22rem),
      linear-gradient(135deg,#f8fcf9 0%,#ffffff 57%,#fff9e8 100%) !important;
}
.ctvis-loader-card{
    border:1px solid #e1ebe4 !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.92) !important;
    color:#17231b !important;
    box-shadow:0 24px 65px rgba(46,88,57,.12) !important;
    backdrop-filter:blur(14px);
}
.ctvis-loader-logo{
    border:4px solid #bfe3c8 !important;
    box-shadow:0 0 0 8px rgba(71,177,101,.08) !important;
}
.ctvis-loader-card strong{color:#17231b !important}
.ctvis-loader-card > span{color:#718078 !important}
.ctvis-loader-dots i{background:#4cb66b !important}
.ctvis-loader-dots i:nth-child(2){background:#f1bd42 !important}
.ctvis-loader-dots i:nth-child(3){background:#84ca98 !important}

/* Calendar: exactly one week visible */
.dashboard-calendar-section{
    position:relative;
    z-index:2;
}
.calendar-layout{
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr) !important;
}
.calendar-card{
    overflow:hidden;
}
.calendar-days{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    grid-template-rows:1fr !important;
    gap:7px !important;
}
.calendar-day{
    min-height:72px !important;
    padding:10px 9px !important;
    border:1px solid #edf1ee !important;
    border-radius:13px !important;
    background:#f8fbf9 !important;
}
.calendar-day.today{
    background:#edf9f0 !important;
    border-color:#75c88d !important;
    box-shadow:inset 0 0 0 1px #75c88d !important;
}
.calendar-day .calendar-day-name{
    display:block;
    margin-bottom:5px;
    color:#87938b;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}
.calendar-day .calendar-day-number{
    display:block;
    color:#17231b;
    font-size:19px;
    font-weight:800;
    line-height:1;
}
.calendar-day.outside{opacity:1 !important}
.calendar-controls strong{
    min-width:160px !important;
}

/* The engagement chart must remain a true circle regardless of card width */
.dashboard-chart-card.engagement-card{
    display:flex;
    flex-direction:column;
}
.dashboard-chart-card.engagement-card .donut-chart-shell,
.donut-chart-shell{
    width:220px !important;
    height:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    aspect-ratio:1 / 1 !important;
    margin:8px auto 12px !important;
    flex:0 0 220px !important;
}
.dashboard-chart-card.engagement-card .donut-chart-shell canvas,
.donut-chart-shell canvas{
    width:220px !important;
    height:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    aspect-ratio:1 / 1 !important;
    display:block !important;
}
#submissionStatusChart{
    width:220px !important;
    height:220px !important;
}
#submissionLegend{
    width:100%;
    margin-top:8px;
    justify-content:center !important;
    gap:8px 18px !important;
}

/* Dark mode keeps the same composition, only with readable dark surfaces */
html[data-theme="dark"] body.dashboard-body::before,
html[data-theme="dark"] body.dashboard-body::after{
    opacity:.16;
}
html[data-theme="dark"] .ctvis-page-loader{
    background:
      radial-gradient(circle at 8% 92%, rgba(66,167,94,.12), transparent 25rem),
      radial-gradient(circle at 94% 7%, rgba(220,170,55,.10), transparent 22rem),
      #0d1510 !important;
}
html[data-theme="dark"] .ctvis-loader-card{
    background:#151f19 !important;
    border-color:#304139 !important;
    color:#eef6f0 !important;
}
html[data-theme="dark"] .ctvis-loader-card strong{color:#f2f8f4 !important}
html[data-theme="dark"] .ctvis-loader-card > span{color:#a9b8af !important}
html[data-theme="dark"] .calendar-day{
    background:#19261e !important;
    border-color:#304139 !important;
}
html[data-theme="dark"] .calendar-day.today{
    background:#203529 !important;
    border-color:#5bab74 !important;
}
html[data-theme="dark"] .calendar-day .calendar-day-name{color:#9bad9f !important}
html[data-theme="dark"] .calendar-day .calendar-day-number{color:#f0f6f2 !important}

@media(max-width:900px){
    body.dashboard-body::before{width:300px;height:270px;left:-125px;bottom:-100px}
    body.dashboard-body::after{width:300px;height:250px;right:-130px;bottom:-90px}
    .dashboard-main::after{display:none}
}
@media(max-width:700px){
    .calendar-day{min-height:58px !important;padding:7px 5px !important}
    .calendar-day .calendar-day-name{font-size:7px}
    .calendar-day .calendar-day-number{font-size:15px}
    .dashboard-chart-card.engagement-card .donut-chart-shell,
    .donut-chart-shell,
    .dashboard-chart-card.engagement-card .donut-chart-shell canvas,
    .donut-chart-shell canvas,
    #submissionStatusChart{
        width:190px !important;
        height:190px !important;
        min-width:190px !important;
        max-width:190px !important;
        flex-basis:190px !important;
    }
}


/* =========================================================
   REFERENCE LAYERING FIX — pastel artwork must extend onto sidebar
========================================================= */
.dashboard-sidebar{
    position:fixed !important;
    isolation:isolate;
    overflow:hidden !important;
}
.dashboard-sidebar > *{
    position:relative;
    z-index:2;
}
/* Do not duplicate the left blob behind the sidebar; the sidebar owns it now. */
body.dashboard-body::before{
    left:205px !important;
    bottom:-145px !important;
    width:330px !important;
    height:270px !important;
    opacity:.52 !important;
}

/* Right decorative artwork remains visible over the page background. */
body.dashboard-body::after{
    z-index:1 !important;
}
.dashboard-content,
.dashboard-topbar{
    z-index:3 !important;
}

/* Reinforce a true circular engagement chart at layout and canvas levels. */
.engagement-card .donut-chart-shell{
    width:220px !important;
    height:220px !important;
    aspect-ratio:1 / 1 !important;
    flex:0 0 auto !important;
    align-self:center !important;
}
.engagement-card .donut-chart-shell canvas,
#submissionStatusChart{
    width:220px !important;
    height:220px !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
}

html[data-theme="dark"] @media(max-width:900px){
    body.dashboard-body::before{display:none !important}
}


/* =========================================================
   SINGLE CONTINUOUS BACKGROUND FIX
   One pastel artwork behind dashboard + transparent sidebar.
========================================================= */

body.dashboard-body{
    position:relative;
    background:#fbfcfb !important;
    overflow-x:hidden;
}

/* One continuous decorative artwork only */
body.dashboard-body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 3% 93%, rgba(187,232,196,.92) 0 10%, transparent 10.5%),
      radial-gradient(ellipse at 10% 100%, rgba(134,210,154,.72) 0 13%, transparent 13.5%),
      radial-gradient(ellipse at 20% 102%, rgba(255,226,150,.55) 0 10%, transparent 10.5%),
      radial-gradient(ellipse at 92% 101%, rgba(197,235,204,.76) 0 12%, transparent 12.5%),
      radial-gradient(ellipse at 101% 90%, rgba(229,244,231,.95) 0 14%, transparent 14.5%),
      radial-gradient(ellipse at 99% 102%, rgba(248,219,143,.40) 0 9%, transparent 9.5%),
      linear-gradient(180deg,#ffffff 0%,#fbfcfb 72%,#f7fbf8 100%);
}

/* No second decorative layer */
body.dashboard-body::after{
    content:none !important;
}

/* Main application surfaces remain above the single artwork */
.dashboard-layout,
.dashboard-main,
.dashboard-content,
.dashboard-topbar{
    position:relative;
    z-index:1;
    background:transparent !important;
}

/* Sidebar must reveal the same single background behind it */
.dashboard-sidebar,
.sidebar{
    background:rgba(255,255,255,.70) !important;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    position:relative;
    z-index:2;
}

/* Explicitly prevent any sidebar-owned decorative artwork */
.dashboard-sidebar::before,
.dashboard-sidebar::after,
.sidebar::before,
.sidebar::after{
    content:none !important;
    display:none !important;
}

/* Keep navigation readable over the transparent sidebar */
.dashboard-sidebar .nav-item,
.dashboard-sidebar .sidebar-link,
.sidebar .nav-item,
.sidebar .sidebar-link{
    position:relative;
    z-index:2;
}

/* Reference-like lower sidebar: more transparent so the artwork shows through */
.dashboard-sidebar{
    box-shadow:1px 0 0 rgba(25,50,32,.07) !important;
}

/* Dark mode: keep a single background concept, no duplicated shapes */
html[data-theme="dark"] body.dashboard-body::before{
    background:
      radial-gradient(ellipse at 3% 93%, rgba(75,154,95,.17) 0 10%, transparent 10.5%),
      radial-gradient(ellipse at 10% 100%, rgba(66,136,83,.13) 0 13%, transparent 13.5%),
      radial-gradient(ellipse at 20% 102%, rgba(210,169,65,.10) 0 10%, transparent 10.5%),
      radial-gradient(ellipse at 92% 101%, rgba(73,143,88,.12) 0 12%, transparent 12.5%),
      #0d1510;
}
html[data-theme="dark"] .dashboard-sidebar,
html[data-theme="dark"] .sidebar{
    background:rgba(18,27,21,.78) !important;
    border-color:#2d3a31 !important;
}

@media(max-width:900px){
    .dashboard-sidebar,
    .sidebar{
        background:rgba(255,255,255,.90) !important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }
    html[data-theme="dark"] .dashboard-sidebar,
    html[data-theme="dark"] .sidebar{
        background:rgba(18,27,21,.94) !important;
    }
}

/* DEFENSE UI AUDIT — COMMON ROLE PAGES */
body.dashboard-body{font-family:Inter,sans-serif}body.dashboard-body .page-title,body.dashboard-body .section-title,body.dashboard-body h1,body.dashboard-body h2,body.dashboard-body h3{letter-spacing:-.02em}body.dashboard-body .btn-primary,body.dashboard-body .primary-button,body.dashboard-body button[type="submit"]{border-radius:12px}html[data-theme="dark"] body.dashboard-body{color:#edf5ef!important}html[data-theme="dark"] body.dashboard-body .text-muted,html[data-theme="dark"] body.dashboard-body .muted,html[data-theme="dark"] body.dashboard-body small,html[data-theme="dark"] body.dashboard-body .help-text,html[data-theme="dark"] body.dashboard-body .form-text{color:#a8b7ad!important}html[data-theme="dark"] body.dashboard-body td,html[data-theme="dark"] body.dashboard-body th,html[data-theme="dark"] body.dashboard-body label{color:#dce8df!important}html[data-theme="dark"] body.dashboard-body .modal-content,html[data-theme="dark"] body.dashboard-body .dropdown-menu,html[data-theme="dark"] body.dashboard-body .notification-dropdown{background:#17231c!important;color:#edf5ef!important;border-color:#314239!important}

/* 2026-09-28 full-width workspace refinement */
.dashboard-content.admin-page-content{max-width:none!important;width:100%!important;margin:0!important;box-sizing:border-box!important;}
@media(min-width:901px){.dashboard-content.admin-page-content{padding-left:24px!important;padding-right:24px!important;}}


/* 2026-09-28 full working-area layout: remove dashboard dead space */
.dashboard-main { max-width:none !important; }
.dashboard-content,
.dashboard-content.admin-page-content {
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}
@media (min-width:901px){
    .dashboard-content,
    .dashboard-content.admin-page-content { padding-left:24px !important; padding-right:24px !important; }
}