/*
 * SAEUM themes and mobile refinement
 * Loaded last so both themes share one predictable component geometry.
 */

:root {
  --mobile-tabbar-height: 68px;
}

.theme-toggle-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}

.theme-icon {
  grid-area: 1 / 1;
  transition: opacity .18s ease, transform .18s ease;
}

html[data-theme="dark"] .theme-icon-moon,
html[data-theme="light"] .theme-icon-sun {
  opacity: 0;
  transform: scale(.65) rotate(-24deg);
}

html[data-theme="dark"] .theme-icon-sun,
html[data-theme="light"] .theme-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Softer dark theme: charcoal instead of pure black. */

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f6f8fc;
  --text: #dce1e9;
  --muted: #9ca4b2;
  --subtle: #747d8b;
  --line: #39414d;
  --line-strong: #485260;
  --divider: #343b46;
  --canvas: #20242b;
  --surface: #252a32;
  --surface-alt: #2a3039;
  --surface-raised: #303743;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #20242b;
}

html[data-theme="dark"] .app-shell,
html[data-theme="dark"] #appMain {
  background: #20242b;
}

html[data-theme="dark"] .sidebar {
  background: #191d23;
}

html[data-theme="dark"] .topbar {
  border-color: #343b46;
  background: rgba(32, 36, 43, .94);
}

html[data-theme="dark"] .section-nav {
  border-color: #343b46;
  background: rgba(32, 36, 43, .96);
}

html[data-theme="dark"] .dashboard-rail {
  border-color: #343b46;
  background: #1c2026;
}

html[data-theme="dark"] :is(
  .panel,
  .dashboard-performance-panel,
  .dashboard-completion-panel,
  .dashboard-agenda-panel,
  .dashboard-timetable-panel,
  .schedule-calendar-panel,
  .schedule-agenda-panel,
  .schedule-task-collection,
  .timer-hero-card,
  .subject-timers,
  .ai-maker,
  .ai-hero,
  .study-pack-panel,
  .flashcard-library,
  .weekly-planner-panel,
  .pro-panel,
  .more-menu,
  .more-profile-card,
  .more-ai-usage,
  .home-more-summary
) {
  border-color: #39414d;
  background: #252a32;
}

html[data-theme="dark"] :is(
  .task-card,
  .grade-term-card,
  .grade-row,
  .timer-subject-row,
  .rail-profile,
  .rail-upcoming-item,
  .dashboard-completion-row,
  .compact-empty,
  .dashboard-empty,
  .calendar-agenda-item,
  .more-menu button,
  .mobile-period-row,
  .mobile-schedule-week > div > button
) {
  border-color: #3b4350;
  background: #2a3039;
}

html[data-theme="dark"] :is(input, select, textarea, .global-search, .upload-zone) {
  border-color: #414a57;
  color: #f2f5fa;
  background: #292f37;
}

html[data-theme="dark"] :is(dialog, dialog .modal-form, dialog .detail-sheet, .modal-actions) {
  border-color: #414a57;
  background: #252a32;
}

html[data-theme="dark"] .landing-page {
  background:
    radial-gradient(circle at 78% 10%, rgba(39, 137, 255, .17), transparent 30rem),
    #1b1f25;
}

html[data-theme="dark"] .landing-header,
html[data-theme="dark"] .landing-footer {
  border-color: #343b46;
  background: rgba(27, 31, 37, .94);
}

html[data-theme="dark"] .landing-preview-window,
html[data-theme="dark"] .landing-app-preview,
html[data-theme="dark"] .landing-service-panel,
html[data-theme="dark"] .landing-final-cta {
  border-color: #3a424e;
  background: #252a32;
}

/* Light theme */

html[data-theme="light"] {
  color-scheme: light;
  --ink: #182131;
  --text: #2d3748;
  --muted: #697386;
  --subtle: #8a94a5;
  --line: #dce3ec;
  --line-strong: #cbd5e1;
  --divider: #e5eaf1;
  --canvas: #eef2f7;
  --surface: #ffffff;
  --surface-alt: #f7f9fc;
  --surface-raised: #ffffff;
  --shadow-sm: 0 8px 24px rgba(28, 39, 57, .06);
  --shadow-md: 0 18px 44px rgba(28, 39, 57, .10);
  --shadow-lg: 0 28px 70px rgba(28, 39, 57, .13);
}

html[data-theme="light"],
html[data-theme="light"] body {
  color: var(--text);
  background: #eef2f7;
}

html[data-theme="light"] .app-shell,
html[data-theme="light"] #appMain {
  color-scheme: light;
  color: var(--text);
  background: #eef2f7;
}

html[data-theme="light"] .sidebar {
  border-color: #e1e7ef;
  background: #ffffff;
}

html[data-theme="light"] .brand:hover {
  background: #f1f5fa;
}

html[data-theme="light"] .brand strong,
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .link-button,
html[data-theme="light"] .rail-section-head button {
  color: #1678ed;
}

html[data-theme="light"] .brand small,
html[data-theme="light"] .sidebar-section-label,
html[data-theme="light"] .nav-item,
html[data-theme="light"] .sidebar-utility small {
  color: #748095;
}

html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active {
  background: #edf5ff;
}

html[data-theme="light"] .topbar,
html[data-theme="light"] .section-nav {
  border-color: #dfe5ed;
  background: rgba(248, 250, 253, .94);
}

html[data-theme="light"] .page-heading h1,
html[data-theme="light"] .sidebar-utility strong,
html[data-theme="light"] .rail-profile strong {
  color: #1c2534;
}

html[data-theme="light"] .dashboard-rail {
  border-color: #dfe5ed;
  background: #f8fafc;
}

html[data-theme="light"] :is(
  .panel,
  .dashboard-performance-panel,
  .dashboard-completion-panel,
  .dashboard-agenda-panel,
  .dashboard-timetable-panel,
  .schedule-calendar-panel,
  .schedule-agenda-panel,
  .schedule-task-collection,
  .timer-hero-card,
  .subject-timers,
  .ai-maker,
  .ai-hero,
  .study-pack-panel,
  .flashcard-library,
  .weekly-planner-panel,
  .pro-panel,
  .more-menu,
  .more-profile-card,
  .more-ai-usage,
  .home-more-summary
) {
  border-color: #dce3ec;
  color: var(--text);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] :is(
  .task-card,
  .grade-term-card,
  .grade-row,
  .timer-subject-row,
  .rail-profile,
  .rail-upcoming-item,
  .dashboard-completion-row,
  .compact-empty,
  .dashboard-empty,
  .calendar-agenda-item,
  .more-menu button,
  .mobile-period-row,
  .mobile-schedule-week > div > button
) {
  border-color: #dce3ec;
  color: var(--text);
  background: #f8fafc;
}

html[data-theme="light"] :is(
  .panel h2,
  .panel h3,
  .panel strong,
  .view-intro h2,
  .rail-section-head h2,
  .rail-upcoming-copy strong,
  .dashboard-completion-row strong,
  .task-card h3,
  .grade-row strong,
  .timer-subject-row strong,
  .calendar-agenda-item strong,
  .more-menu strong,
  .mobile-period-copy strong,
  .mobile-today-head strong,
  .mobile-schedule-head strong
) {
  color: #1b2433;
}

html[data-theme="light"] :is(
  .panel p,
  .panel small,
  .rail-profile small,
  .rail-upcoming-copy small,
  .task-card small,
  .grade-row small,
  .timer-subject-row small,
  .more-menu small,
  .mobile-period-copy small
) {
  color: #6f7a8c;
}

html[data-theme="light"] :is(input, select, textarea, .global-search, .upload-zone) {
  border-color: #d7e0ea;
  color: #1f2937;
  background: #f8fafc;
}

html[data-theme="light"] .global-search input,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #8993a4;
}

html[data-theme="light"] :is(.soft-button, .icon-button, .account-button, .theme-toggle-button) {
  border-color: #d8e0ea;
  color: #364152;
  background: #ffffff;
}

html[data-theme="light"] :is(.soft-button, .icon-button, .account-button, .theme-toggle-button):hover {
  border-color: #b9c9dd;
  background: #f2f6fb;
}

html[data-theme="light"] .content-tabs,
html[data-theme="light"] .filter-tabs {
  border-color: #dce3ec;
  background: #e9eef5;
}

html[data-theme="light"] .content-tabs button,
html[data-theme="light"] .filter-tabs button {
  color: #667286;
}

html[data-theme="light"] .content-tabs button.active,
html[data-theme="light"] .filter-tabs button.active {
  color: #172033;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(28, 39, 57, .08);
}

html[data-theme="light"] .dashboard-focus-chart::before,
html[data-theme="light"] .dashboard-chart-day::before {
  border-color: #e2e8f0;
}

html[data-theme="light"] .dashboard-progress-ring {
  background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), #e8edf4 0);
}

html[data-theme="light"] .rail-calendar-day {
  color: #657084;
}

html[data-theme="light"] .rail-calendar-day:hover {
  color: #172033;
  background: #e9eef5;
}

html[data-theme="light"] :is(dialog, dialog .modal-form, dialog .detail-sheet, .modal-actions) {
  border-color: #dce3ec;
  color: var(--text);
  background: #ffffff;
}

html[data-theme="light"] :is(.toast, .toast[popover], .xp-reward-toast, .network-banner, .app-update-banner) {
  border-color: #d7e0ea;
  color: #263143;
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .landing-page {
  color: #243044;
  background:
    radial-gradient(circle at 78% 10%, rgba(39, 137, 255, .12), transparent 30rem),
    #f5f7fb;
}

html[data-theme="light"] .landing-header,
html[data-theme="light"] .landing-footer {
  border-color: #dce3ec;
  background: rgba(255, 255, 255, .92);
}

html[data-theme="light"] .landing-brand strong,
html[data-theme="light"] .landing-hero h1,
html[data-theme="light"] .landing-section-head h2,
html[data-theme="light"] .landing-service-panel h3,
html[data-theme="light"] .landing-final-cta h2 {
  color: #172033;
}

html[data-theme="light"] .landing-lead,
html[data-theme="light"] .landing-note,
html[data-theme="light"] .landing-section-head > span,
html[data-theme="light"] .landing-service-panel li {
  color: #697386;
}

html[data-theme="light"] :is(
  .landing-preview-window,
  .landing-app-preview,
  .landing-service-panel,
  .landing-final-cta,
  .landing-preview-columns > section
) {
  border-color: #dce3ec;
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .landing-preview-rail,
html[data-theme="light"] .landing-preview-main,
html[data-theme="light"] .landing-preview-main > header {
  border-color: #dce3ec;
  background: #f7f9fc;
}

/* Mobile is composed independently instead of shrinking the desktop canvas. */

@media (max-width: 767px) {
  :root {
    --topbar-height: 60px;
    --mobile-tabbar-height: 68px;
  }

  body.entry-app {
    font-size: 13px;
  }

  .app-shell,
  #appMain {
    min-width: 0;
  }

  .topbar {
    height: 60px;
    min-height: 60px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .menu-button,
  .global-search {
    display: none;
  }

  .mobile-home-button {
    grid-column: 1;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 13px;
  }

  .page-heading {
    position: static;
    grid-column: 2;
    min-width: 0;
    display: block;
    text-align: center;
    pointer-events: none;
  }

  .page-heading h1 {
    font-size: 17px;
    line-height: 22px;
  }

  .top-actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 4px;
  }

  .top-actions :is(.save-state, .notification-button, .settings-button, #quickAddBtn) {
    display: none;
  }

  .topbar .theme-toggle-button,
  .topbar .account-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
  }

  .topbar .theme-toggle-button .ui-icon {
    width: 20px;
    height: 20px;
  }

  .topbar .account-button {
    padding: 0;
  }

  .section-nav {
    top: 60px;
    height: 44px;
    min-height: 44px;
    padding: 5px 12px;
    gap: 6px;
  }

  .section-nav button {
    height: 34px;
    min-height: 34px;
    padding-inline: 16px;
    border-radius: 12px;
    font-size: 13px;
  }

  .view,
  .section-nav:not([hidden]) ~ .view {
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .view-intro,
  .ai-hero {
    min-height: 44px;
    margin: 0 0 10px;
  }

  .view-intro h2,
  .ai-hero h2 {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -.04em;
  }

  .toolbar-actions {
    gap: 8px;
  }

  .toolbar-actions > button {
    min-height: 44px;
    height: 44px;
    padding-inline: 14px;
    border-radius: 14px;
    font-size: 13px;
  }

  #tasksView {
    display: block;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  #tasksView .view-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #tasksView .view-intro .toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tasksView :is(#ocrBtn, #addTaskBtn) {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    justify-content: center;
  }

  .mobile-schedule-overview {
    margin: 0;
    padding: 12px;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
  }

  .mobile-schedule-head {
    min-height: 42px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .mobile-schedule-head .icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 13px;
  }

  .mobile-schedule-head small {
    font-size: 10px;
  }

  .mobile-schedule-head strong {
    font-size: 14px;
  }

  .mobile-schedule-week {
    gap: 4px;
  }

  .mobile-schedule-week > div > button {
    min-height: 56px;
    padding: 5px 1px;
    gap: 1px;
    border-radius: 13px;
  }

  .mobile-schedule-week > div > button small {
    font-size: 9px;
  }

  .mobile-schedule-week > div > button strong {
    font-size: 14px;
  }

  .mobile-date-kinds {
    min-height: 8px;
    gap: 1px;
  }

  .mobile-date-kinds .event-kind {
    width: 5px;
    min-width: 5px;
    height: 5px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    border-radius: 50%;
    font-size: 0;
  }

  .mobile-today-head {
    min-height: 42px;
    margin-top: 2px;
  }

  .mobile-today-head small {
    font-size: 10px;
  }

  .mobile-today-head strong {
    font-size: 16px;
  }

  #mobileTodayAddBtn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
  }

  .mobile-today-agenda {
    min-height: 94px;
    border-top: 1px solid var(--line);
  }

  .mobile-today-agenda .empty-state,
  .mobile-today-agenda .calendar-agenda-empty,
  .mobile-today-agenda .compact-empty {
    min-height: 94px;
    padding: 16px 10px;
  }

  .mobile-schedule-overview > .schedule-kind-legend {
    margin: 2px 0 0;
    gap: 6px 10px;
    font-size: 10px;
  }

  .schedule-kind-legend .event-kind {
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 10px;
  }

  .mobile-schedule-actions {
    gap: 8px;
  }

  .mobile-schedule-actions button {
    min-height: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 12px;
  }

  .schedule-task-collection {
    margin-top: 10px;
    border-radius: 20px;
  }

  .schedule-task-collection > summary {
    min-height: 58px;
    padding: 10px 14px;
  }

  .schedule-task-tools {
    padding: 10px;
  }

  .schedule-task-list {
    padding: 0 10px 10px;
  }

  .task-empty,
  .schedule-task-list .empty-state {
    min-height: 112px;
  }

  .content-tabs {
    min-height: 42px;
    padding: 3px;
    gap: 3px;
    border-radius: 14px;
  }

  .content-tabs button {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 12px;
  }

  .panel,
  .grade-summary-panel,
  .study-pack-panel,
  .flashcard-library,
  .weekly-planner-panel,
  .pro-panel {
    padding: 13px;
    border-radius: 20px;
  }

  .app-fab {
    display: none !important;
  }

  .sidebar {
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    min-height: 68px;
    padding: 4px 8px max(4px, env(safe-area-inset-bottom, 0px));
  }

  #mainNav {
    height: 60px;
  }

  #mainNav .nav-item {
    height: 58px;
    min-height: 58px;
    padding: 4px 2px 3px;
    gap: 1px;
    border-radius: 14px;
    font-size: 10px;
  }

  #mainNav .nav-item .ui-icon {
    width: 23px;
    height: 23px;
  }

  dialog {
    border-radius: 24px 24px 0 0;
  }

  .modal-form {
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .modal-actions {
    margin: 16px -14px -16px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  html[data-theme="dark"] .sidebar {
    border-color: #3a424e;
    background: rgba(25, 29, 35, .96);
  }

  html[data-theme="dark"] :is(.topbar, .section-nav) {
    background: rgba(32, 36, 43, .97);
  }

  html[data-theme="light"] .sidebar {
    border-color: #dce3ec;
    background: rgba(255, 255, 255, .96);
  }

  html[data-theme="light"] :is(.topbar, .section-nav) {
    background: rgba(248, 250, 253, .97);
  }

  html[data-theme="light"] .mobile-schedule-overview {
    border-color: #dce3ec;
    background: #ffffff;
  }

  html[data-theme="light"] .mobile-schedule-week > div > button.selected {
    border-color: var(--brand);
    color: #fff;
    background: var(--brand);
  }

  html[data-theme="light"] #mainNav .nav-item.active {
    color: var(--brand);
    background: #edf5ff;
  }
}

@media (max-width: 374px) {
  .topbar {
    padding-inline: 9px;
    gap: 5px;
  }

  .topbar .theme-toggle-button,
  .topbar .account-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .view,
  .section-nav:not([hidden]) ~ .view {
    padding-inline: 9px;
  }

  .mobile-schedule-overview {
    padding: 10px 8px;
  }

  .mobile-schedule-week {
    gap: 2px;
  }
}

/* Theme authority layer: override older view-specific colors without changing layout. */

html[data-theme="dark"] body.entry-app :is(
  .panel,
  .dashboard-agenda-panel,
  .dashboard-timetable-panel,
  .schedule-task-collection,
  .mobile-timetable,
  .timer-hero-card,
  .subject-timers,
  .ai-maker,
  .study-pack-panel,
  .flashcard-library,
  .weekly-planner-panel,
  .pro-panel,
  .more-menu,
  .grade-summary-panel,
  .grade-whatif-panel
) {
  border-color: #39414d !important;
  background: #252a32 !important;
}

html[data-theme="dark"] body.entry-app :is(
  .task-card,
  .timer-subject-row,
  .grade-term-card,
  .grade-row,
  .record-primary-grid > button,
  .mobile-timetable-days button,
  .mobile-period-row,
  .empty,
  .records-empty-state,
  .ai-output-summary,
  .ai-create-actions,
  .more-menu button,
  .task-complete-button
) {
  border-color: #3b4350 !important;
  background: #2a3039 !important;
}

html[data-theme="dark"] body.entry-app :is(input, select, textarea) {
  border-color: #414a57 !important;
  color: #f2f5fa !important;
  background: #292f37 !important;
}

html[data-theme="dark"] body.entry-app :is(.content-tabs, .filter-tabs) {
  border-color: #3b4350 !important;
  background: #2a3039 !important;
}

html[data-theme="dark"] .dashboard-focus-chart {
  border-color: #46505e;
  background:
    linear-gradient(#343b46 1px, transparent 1px) 0 25% / 100% 25%,
    linear-gradient(#343b46 1px, transparent 1px) 0 50% / 100% 25%,
    linear-gradient(#343b46 1px, transparent 1px) 0 75% / 100% 25%;
}

html[data-theme="light"] body.entry-app :is(
  .panel,
  .dashboard-agenda-panel,
  .dashboard-timetable-panel,
  .schedule-task-collection,
  .mobile-timetable,
  .timer-hero-card,
  .subject-timers,
  .ai-maker,
  .study-pack-panel,
  .flashcard-library,
  .weekly-planner-panel,
  .pro-panel,
  .more-menu,
  .grade-summary-panel,
  .grade-whatif-panel
) {
  border-color: #dce3ec !important;
  color: #2d3748 !important;
  background: #ffffff !important;
}

html[data-theme="light"] body.entry-app :is(
  .task-card,
  .timer-subject-row,
  .grade-term-card,
  .grade-row,
  .record-primary-grid > button,
  .mobile-timetable-days button,
  .mobile-period-row,
  .empty,
  .records-empty-state,
  .ai-output-summary,
  .ai-create-actions,
  .more-menu button,
  .task-complete-button
) {
  border-color: #dce3ec !important;
  color: #2d3748 !important;
  background: #f8fafc !important;
}

html[data-theme="light"] body.entry-app :is(input, select, textarea) {
  border-color: #d7e0ea !important;
  color: #1f2937 !important;
  background: #f8fafc !important;
}

html[data-theme="light"] .dashboard-focus-chart {
  border-color: #dce3ec;
  background:
    linear-gradient(#e7ecf2 1px, transparent 1px) 0 25% / 100% 25%,
    linear-gradient(#e7ecf2 1px, transparent 1px) 0 50% / 100% 25%,
    linear-gradient(#e7ecf2 1px, transparent 1px) 0 75% / 100% 25%;
}

html[data-theme="light"] .dashboard-progress-ring::before {
  background: #ffffff;
}

html[data-theme="light"] .dashboard-progress-ring span {
  color: #273244;
}

html[data-theme="light"] :is(.task-row, .schedule-row):hover {
  background: #f3f6fa;
}

html[data-theme="light"] body.entry-app :is(
  .task-card,
  .timer-subject-row,
  .grade-term-card,
  .grade-row,
  .record-primary-grid > button,
  .empty,
  .records-empty-state,
  .more-menu button
) :is(strong, h3) {
  color: #1b2433 !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-icon {
    transition: none;
  }
}