/*
 * Digitera V4.30.6 — UI Harmony & Contrast Guard
 * Loaded LAST after the existing Digitera stylesheets.
 * Goal: keep the existing identity while preventing text/background collisions,
 * excessive competing shapes, and weak contrast on common app surfaces.
 */

:root{
  --ui-bg:#f6f7fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f4f1fc;
  --ui-surface-muted:#f8f9fc;
  --ui-text:#242336;
  --ui-text-2:#444255;
  --ui-muted:#625f72;
  --ui-border:#dedfea;
  --ui-border-strong:#cfd1df;
  --ui-primary:#6041c7;
  --ui-primary-hover:#4f32ae;
  --ui-primary-soft:#eee9ff;
  --ui-primary-soft-2:#f6f3ff;
  --ui-success:#087a5b;
  --ui-success-soft:#e5f7f1;
  --ui-warning:#9a4b00;
  --ui-warning-soft:#fff3e5;
  --ui-danger:#b4233b;
  --ui-danger-solid:#c62845;
  --ui-danger-soft:#fff0f2;
  --ui-info:#1f5fae;
  --ui-info-soft:#eaf3ff;
  --ui-shadow:0 12px 34px rgba(44,36,77,.08);
  --ui-shadow-hover:0 18px 46px rgba(44,36,77,.13);
  --ui-radius:18px;
  --ui-radius-sm:13px;

  /* Re-sync legacy variables so older components inherit the same palette. */
  --bg:var(--ui-bg);
  --surface:var(--ui-surface);
  --surface-2:var(--ui-primary-soft);
  --text:var(--ui-text);
  --muted:var(--ui-muted);
  --primary:var(--ui-primary);
  --primary-dark:var(--ui-primary-hover);
  --primary-soft:var(--ui-primary-soft);
  --success:var(--ui-success);
  --warning:var(--ui-warning);
  --danger:var(--ui-danger);
  --info:var(--ui-info);
  --border:var(--ui-border);
}

html{background:var(--ui-bg);color-scheme:light}
body{
  color:var(--ui-text);
  background:
    radial-gradient(circle at 4% 0%,rgba(96,65,199,.055),transparent 28rem),
    radial-gradient(circle at 96% 12%,rgba(79,109,214,.045),transparent 26rem),
    var(--ui-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
main{color:var(--ui-text)}

/* -------------------------------------------------------------
   TYPOGRAPHY — never allow normal text to become too pale
   ------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{color:var(--ui-text)}
p,li,dd,dt,td{color:inherit}
.lead,.muted,.help,.meta,.form-note,.edu-form-note,
.teacher-page-title small,.student-app-brand small,
.student-desktop-footer,.footer,.footer p,.footer-bottom,
small:not(.badge):not(.eyebrow){color:var(--ui-muted)}

/* Links remain legible on light surfaces. Dark/colored components with their
   own more-specific rules keep their intended light text. */
a{color:var(--ui-primary)}
a:hover{color:var(--ui-primary-hover)}

::selection{background:var(--ui-primary);color:#fff}

/* -------------------------------------------------------------
   GLOBAL CHROME
   ------------------------------------------------------------- */
.topbar,
.teacher-app-topbar,
.student-app-topbar{
  background:rgba(255,255,255,.96);
  border-color:rgba(96,65,199,.12);
  box-shadow:0 7px 24px rgba(44,36,77,.065);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.nav > a:not(.btn){color:#514f61}
.nav > a:not(.btn):hover,
.nav > a:not(.btn).active{
  color:var(--ui-primary);
  background:var(--ui-primary-soft);
}
.nav-user{
  color:#5c5969;
  background:#f8f7fb;
  border-color:var(--ui-border);
}

/* Teacher sidebar keeps its dark identity, but text is deliberately stronger. */
body.role-teacher{
  --teacher-sidebar-bg:#131827;
  --teacher-sidebar-bg-2:#0f1422;
  --teacher-sidebar-text:#e6eaf1;
}
.teacher-sidebar{
  color:#e6eaf1;
  background:
    radial-gradient(circle at 14% 0%,rgba(112,71,235,.20),transparent 245px),
    linear-gradient(180deg,#151a2b 0%,#101522 100%);
  border-right-color:rgba(255,255,255,.08);
  box-shadow:15px 0 42px rgba(20,24,39,.10);
}
.teacher-sidebar-brand-copy strong{color:#fff}
.teacher-sidebar-brand-copy small{color:#b7c0ce}
.teacher-side-link,
.teacher-side-group,
.teacher-side-submenu a{color:#e3e8f0!important}
.teacher-side-link:hover,
.teacher-side-group:hover,
.teacher-side-submenu a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.085)!important;
}
.teacher-side-link.active,
.teacher-side-group.active,
.teacher-side-submenu a.active{
  color:#fff!important;
  background:linear-gradient(135deg,#6846d6,#5c3ac2)!important;
  box-shadow:0 9px 22px rgba(77,48,174,.28);
}
.teacher-sidebar-user{border-top-color:rgba(255,255,255,.09)}
.teacher-sidebar-user-copy strong{color:#fff}
.teacher-sidebar-user-copy small{color:#b7c0ce}

.teacher-page-title strong{color:#242b38}
.teacher-page-title small{color:#6f7785}
.teacher-sidebar-toggle,
.teacher-topbar-portal,
.teacher-topbar-profile{
  color:#4c5260!important;
  background:#fff;
  border-color:var(--ui-border);
}
.teacher-sidebar-toggle:hover,
.teacher-topbar-portal:hover,
.teacher-topbar-profile:hover{
  color:var(--ui-primary)!important;
  background:var(--ui-primary-soft-2);
  border-color:#d8cff5;
}

.role-teacher .teacher-app-shell,
.role-teacher .teacher-app-main,
body.role-student,
.role-student .student-app-main{background-color:var(--ui-bg)}

/* Student navigation */
.student-app-brand,
.student-app-brand:hover{color:var(--ui-text)}
.student-app-brand small{color:#696676}
.student-desktop-nav a{color:#555261}
.student-desktop-nav a:hover,
.student-desktop-nav a.active{
  color:var(--ui-primary);
  background:var(--ui-primary-soft);
}
.student-top-code{
  color:var(--ui-text);
  background:#faf9ff;
  border-color:#ded8f3;
}
.student-top-code small{color:#716d7d}
.student-top-code strong{color:#5638b8}
.student-top-exit{
  color:#5b5867;
  background:#fff;
  border-color:var(--ui-border);
}
.student-top-exit:hover{color:var(--ui-primary);background:var(--ui-primary-soft-2)}

@media(max-width:850px){
  .student-bottom-nav{
    border-color:#ded8ef;
    background:rgba(255,255,255,.985);
    box-shadow:0 16px 42px rgba(42,35,70,.17);
  }
  .student-bottom-nav a,
  .student-bottom-nav button{color:#686574}
  .student-bottom-nav a:hover,
  .student-bottom-nav button:hover{
    color:var(--ui-primary);
    background:var(--ui-primary-soft-2);
  }
  .student-bottom-nav a.active,
  .student-bottom-nav button.active{
    color:var(--ui-primary);
    background:var(--ui-primary-soft);
  }
}

/* -------------------------------------------------------------
   CARDS / SHAPES — quieter surfaces, clearer separation
   ------------------------------------------------------------- */
.card,
.feature-card,
.resource-card,
.document-row,
.portal-preview,
.quiz-card,
.question-card,
.stat,
.auth-card,
.table-wrap,
.empty{
  border-color:var(--ui-border);
  box-shadow:var(--ui-shadow);
}
.card,
.feature-card,
.resource-card,
.document-row,
.portal-preview,
.quiz-card,
.question-card,
.stat,
.auth-card,
.table-wrap,
.empty{
  color:var(--ui-text);
}

/* Do not flatten special colored cards. Only regular cards receive a clean surface. */
.card:not(.hero-card):not(.quick-card):not(.result-hero):not([class*="subscription-"]):not([class*="live-"]):not([class*="game-"]):not([class*="banner-"]),
.feature-card,
.stat:not([class*="colored"]),
.auth-card,
.table-wrap,
.empty{
  background-color:rgba(255,255,255,.985);
}

.feature-card::after{opacity:.48}
.quick-card::after{opacity:.68}
.card:hover,
.feature-card:hover,
.stat-link:hover{
  border-color:#d4ccef;
  box-shadow:var(--ui-shadow-hover);
}

.section-muted{
  background:rgba(255,255,255,.74);
  border-block:1px solid rgba(222,223,234,.68);
}

.eyebrow{
  color:#4f32ae;
  background:#eee9ff;
  border-color:#dcd2fb;
  box-shadow:none;
}
.eyebrow.light{color:#fff;background:rgba(20,16,37,.28);border-color:rgba(255,255,255,.30)}

/* Decorative shapes should never compete with text. */
.feature-card::after,
.quick-card::after,
[class*="decor"]:not(img),
[class*="shape"]:not(input):not(select):not(textarea){pointer-events:none}

/* -------------------------------------------------------------
   BUTTONS — every button owns BOTH its foreground and background
   ------------------------------------------------------------- */
.btn{
  border-radius:13px;
  font-weight:800;
  box-shadow:none;
}
.btn-primary{
  color:#fff!important;
  background:linear-gradient(135deg,#6846d6,#6041c7)!important;
  border-color:#6041c7!important;
  box-shadow:0 8px 18px rgba(96,65,199,.19);
}
.btn-primary:hover{
  color:#fff!important;
  background:linear-gradient(135deg,#5b38c2,#4f32ae)!important;
  border-color:#4f32ae!important;
}
.btn-secondary,
.btn-ghost{
  color:#3f3d4d!important;
  background:#fff!important;
  border-color:#d8d9e5!important;
}
.btn-secondary:hover,
.btn-ghost:hover{
  color:#4f32ae!important;
  background:#f6f3ff!important;
  border-color:#cdc3ee!important;
}
.btn-success{
  color:#fff!important;
  background:#087a5b!important;
  border-color:#087a5b!important;
}
.btn-success:hover{color:#fff!important;background:#06694e!important;border-color:#06694e!important}
.btn-danger{
  color:#fff!important;
  background:#c62845!important;
  border-color:#c62845!important;
}
.btn-danger:hover{color:#fff!important;background:#ab203a!important;border-color:#ab203a!important}
.btn-light{color:#4b4760!important;background:#fff!important;border-color:#e1deeb!important}
.btn-outline-light{color:#fff!important;background:rgba(20,16,37,.20)!important;border-color:rgba(255,255,255,.58)!important}

button:disabled,.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.62;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
}

/* -------------------------------------------------------------
   FORMS — readable in normal, disabled, focus, and placeholder state
   ------------------------------------------------------------- */
input,textarea,select{
  color:#2d2c3b;
  background:#fff;
  border-color:#cfd1df;
  box-shadow:inset 0 1px 0 rgba(18,18,28,.015);
}
input::placeholder,textarea::placeholder{color:#777586;opacity:1}
input:hover,textarea:hover,select:hover{border-color:#bfc1d2}
input:focus,textarea:focus,select:focus{
  color:#242336;
  background:#fff;
  border-color:#7459ce;
  box-shadow:0 0 0 3px rgba(96,65,199,.13);
}
input:disabled,textarea:disabled,select:disabled{
  color:#5d5a69!important;
  background:#ececf3!important;
  border-color:#d5d6e0!important;
  opacity:1!important;
}
label,.form-group label{color:#353342}

input[type="checkbox"],input[type="radio"]{accent-color:var(--ui-primary)}

/* Strong keyboard focus across the app. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(96,65,199,.28);
  outline-offset:2px;
}

/* -------------------------------------------------------------
   TABLES / DATA
   ------------------------------------------------------------- */
.table-wrap{background:#fff}
table{color:var(--ui-text)}
th{
  color:#4d4a5b;
  background:#f3f3f8;
  border-bottom-color:#d8dae5;
}
td{border-bottom-color:#e3e4eb}
tbody tr:hover td{background:#faf9ff}
td small,th small{color:#666373}
.code-box{
  color:#fff;
  background:#4f32ae;
  border:1px solid #4f32ae;
}
.code-pill{
  color:#4d32a3;
  background:#eee9ff;
  border-color:#d9cff9;
}
.empty{color:var(--ui-muted);border-color:#cfd1df}

/* -------------------------------------------------------------
   BADGES / STATUS / ALERTS
   ------------------------------------------------------------- */
.badge{font-weight:850;border:1px solid transparent}
.badge-draft{color:#4d4a58;background:#efeff4;border-color:#dedfe7}
.badge-published,.badge-success{
  color:#087a5b!important;
  background:#e5f7f1!important;
  border-color:#bee7da!important;
}
.badge-closed,.badge-danger{
  color:#b4233b!important;
  background:#fff0f2!important;
  border-color:#f5c8d0!important;
}
.badge-info{
  color:#1f5fae!important;
  background:#eaf3ff!important;
  border-color:#c9ddf7!important;
}
.badge-warning{
  color:#9a4b00!important;
  background:#fff3e5!important;
  border-color:#f2d5ae!important;
}

.flash{
  border-width:1px;
  box-shadow:none;
}
.flash-success{color:#087a5b;background:#e5f7f1;border-color:#bee7da}
.flash-warning{color:#8b4500;background:#fff3e5;border-color:#f2d5ae}
.flash-danger{color:#a71f35;background:#fff0f2;border-color:#f5c8d0}
.flash-info{color:#1f5fae;background:#eaf3ff;border-color:#c9ddf7}

/* Red notification badges had white/red contrast below WCAG AA in older CSS. */
.menu-notification-badge,
.app-notification-badge,
.student-sheet-notification-icon>b,
.student-home-menu-badge,
.student-footer-notification-badge,
.live-chat-badge,
.meeting-control-badge{
  color:#fff!important;
  background:#c62845!important;
}

/* -------------------------------------------------------------
   KNOWN LOW-CONTRAST LEGACY PAIRS
   Detected from style.css + digitera-purple.css and corrected here.
   ------------------------------------------------------------- */
.meeting-lobby-auto>span,
.state-approved>span{
  color:#fff!important;
  background:#087a5b!important;
}
.attendance-status-option.present input:checked+span{
  color:#fff!important;
  background:#087a5b!important;
}
.attendance-status-option.sick input:checked+span{
  color:#fff!important;
  background:#9a4b00!important;
}
.meeting-start-button{
  color:#fff!important;
  background:#1f5fae!important;
}
.meeting-end-button{
  color:#fff!important;
  background:#c62845!important;
}
.live-screen-live-pill{
  color:#fff!important;
  background:#c62845!important;
}

.teacher-app-footer{color:#625f72!important;background:#fff!important}
.nav-user{color:#5f5b69!important;background:#f8f7fb!important}
.push-permission-dismiss{color:#5e5a68!important;background:#f3f2f7!important}
.floating-notification-close{color:#5f5b69!important;background:#f1f0f5!important}
.student-desktop-nav-icon{color:#5d596a!important;background:#f2eff9!important}
.student-quiz-search-field{color:#595665!important;background:#fff!important}
.student-quiz-meta span{color:#5f5b69!important;background:#f1edfb!important}
.pricing-live-status,.home-price-discount.normal span{color:#5f5b69!important;background:#f1f1f5!important}

.student-home-menu-item:nth-child(4n + 2) .student-home-menu-icon{
  color:#1f5fae!important;background:#eaf3ff!important
}
.student-home-menu-item:nth-child(4n + 3) .student-home-menu-icon{
  color:#087a5b!important;background:#e5f7f1!important
}
.student-home-menu-item:nth-child(4n + 4) .student-home-menu-icon{
  color:#9a4b00!important;background:#fff3e5!important
}
.student-home-menu-logout .student-home-menu-icon{
  color:#b4233b!important;background:#fff0f2!important
}

.role-teacher.page-dashboard .dashboard-stats .stat:nth-child(4n + 2) .stat-icon,
.dashboard-subscription-banner.subscribed .dashboard-subscription-icon,
.subscription-current-card.subscribed .subscription-current-icon,
.payment-review-icon.success{
  color:#087a5b!important;
  background:#e5f7f1!important;
}
.role-teacher.page-dashboard .dashboard-stats .stat:nth-child(4n + 3) .stat-icon,
.dashboard-subscription-banner.expired .dashboard-subscription-icon,
.subscription-current-card.expired .subscription-current-icon{
  color:#9a4b00!important;
  background:#fff3e5!important;
}
.role-teacher.page-dashboard .dashboard-stats .stat:nth-child(4n) .stat-icon,
.payment-title-icon,
.payment-proof-placeholder::before,
.market-current-file>b,
.payment-transfer-pill,
.blog-document-import-choice.primary>span,
.blog-document-import-icon{
  color:#1f5fae!important;
  background:#eaf3ff!important;
}
.subscription-current-icon,
.interactive-authoring-note>span{
  color:#4f32ae!important;
  background:#eee9ff!important;
}

.live-answer-wait .live-answer-result{
  color:#087a5b!important;
  background:#e5f7f1!important;
}
.meeting-status-pill.ended{
  color:#55515f!important;
  background:#ededf2!important;
}

.blogger-mode-button.active,
.blogger-import-side-button{
  color:#914500!important;
  background:#fff1df!important;
  border-color:#efd0a8!important;
}
.blogger-editor-notice,.blogger-statusbar{
  color:#5f5b69!important;
  background:#fff!important;
}
.word-image-mini-toolbar button:hover{
  color:#914500!important;
  background:#fff1df!important;
}
.word-ruler-corner{color:#5e5b68!important;background:#ececf1!important}

/* -------------------------------------------------------------
   HOME / AUTH — cleaner composition without changing content
   ------------------------------------------------------------- */
.hero:not(.student-hero){
  background:
    radial-gradient(circle at 82% 12%,rgba(96,65,199,.12),transparent 32%),
    radial-gradient(circle at 8% 76%,rgba(64,132,214,.08),transparent 30%),
    linear-gradient(180deg,#faf9ff 0%,#f6f7fb 100%);
}
.hero:not(.student-hero) .lead{color:#5d5a69}
.hero-trust{color:#514e5d}

.auth-shell{background:transparent}
.auth-card{
  border-color:#dcdde8;
  box-shadow:0 22px 58px rgba(42,35,70,.11);
}
.auth-card h1,.auth-card h2,.auth-card h3{color:var(--ui-text)}
.auth-card .muted{color:var(--ui-muted)}

/* Footer */
.footer{
  color:#5f5c6b;
  background:#fff;
  border-top-color:#dedfea;
}
.footer a{color:#5b5868}
.footer a:hover{color:var(--ui-primary)}
.footer strong{color:#2e2c3b}

/* -------------------------------------------------------------
   MODALS / MENUS / DROPDOWNS — ensure the panel and text belong together
   ------------------------------------------------------------- */
[role="dialog"]:not([class*="game"]):not([class*="live"]),
.modal-content,.dialog-content,.dropdown-menu,.popover,.bottom-sheet,
.student-more-sheet{
  color:var(--ui-text);
  border-color:var(--ui-border);
}
.dropdown-menu,.popover,.bottom-sheet,.student-more-sheet{
  background:#fff;
  box-shadow:0 18px 48px rgba(35,30,55,.16);
}
.dropdown-menu a,.popover a{color:#454250}
.dropdown-menu a:hover,.popover a:hover{color:var(--ui-primary);background:var(--ui-primary-soft-2)}

/* -------------------------------------------------------------
   MEDIA / IMAGES
   ------------------------------------------------------------- */
img{max-width:100%}
.card img,.feature-card img,.resource-card img{color:transparent}

/* Student banner is intentionally dark-over-image: strengthen overlay on bright photos. */
.student-banner-slide::after{
  background:linear-gradient(90deg,rgba(10,14,28,.78) 0%,rgba(10,14,28,.45) 48%,rgba(10,14,28,.08) 80%)!important;
}
.student-banner-content,.student-banner-content h1,.student-banner-content h2,.student-banner-content h3{
  color:#fff!important;
}
.student-banner-content p{color:rgba(255,255,255,.94)!important}
.student-banner-slide.no-content::after{background:linear-gradient(90deg,rgba(10,14,28,.10),rgba(10,14,28,0))!important}

/* -------------------------------------------------------------
   RESPONSIVE POLISH
   ------------------------------------------------------------- */
@media(max-width:850px){
  .card,.feature-card,.auth-card{border-radius:16px}
  .page-head,.section-head{gap:14px}
  .teacher-app-main>.container,
  .role-student .container{width:min(100% - 22px,1280px)}
}

@media(max-width:620px){
  body{background:var(--ui-bg)}
  .btn{min-height:42px;border-radius:12px}
  input,textarea,select{font-size:16px}
  .card,.feature-card,.auth-card{box-shadow:0 9px 26px rgba(44,36,77,.075)}
  .table-wrap{border-radius:13px}
}

/* Reduced motion keeps polish without visual noise. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}