/* Shared authenticated-page theme, layered after page CSS. */
:root {
  --background: var(--ia-bg);
  --foreground: var(--ia-text);
  --card: var(--ia-surface);
  --card-foreground: var(--ia-text);
  --primary: var(--ia-text);
  --primary-foreground: var(--ia-cream);
  --secondary: var(--ia-sand-50);
  --secondary-foreground: var(--ia-text);
  --muted: var(--ia-sand-50);
  --muted-foreground: var(--ia-text-muted);
  --accent: var(--ia-action);
  --accent-foreground: #fff;
  --border: var(--ia-border);
  --destructive: var(--ia-danger);
  --destructive-foreground: #fff;
}

body {
  background: var(--ia-bg) !important;
  color: var(--ia-text);
}

.main-content-wrapper,
.hw-page,
.ws-page {
  background: var(--ia-bg) !important;
  color: var(--ia-text);
}

.gradient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(1200px 500px at 10% -5%, #fde7cc 0%, transparent 60%),
              radial-gradient(900px 500px at 110% 110%, #d9efe9 0%, transparent 60%),
              var(--ia-bg) !important;
}

.doodle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.main-content-wrapper {
  position: relative;
}

.animated-gradient-bg,
.gradient-overlay-1,
.gradient-overlay-2,
.decorative-shape {
  display: none !important;
}

.main-content-wrapper > .fixed.inset-0 img {
  opacity: 0.06;
}

.main-content-wrapper > .fixed.inset-0 .absolute {
  background: linear-gradient(180deg, rgba(255, 243, 217, 0.88), rgba(255, 248, 236, 0.96)) !important;
}

.sidebar-container aside {
  background: var(--ia-sand-50) !important;
  border-right: 2px solid var(--ia-ink) !important;
  box-shadow: 4px 0 0 var(--ia-ink) !important;
}

.sidebar-container img {
  filter: drop-shadow(1px 1px 0 rgba(42, 30, 16, 0.18));
}

.sidebar-container p {
  color: var(--ia-sand-500) !important;
}

.sidebar-container button {
  border: 2px solid transparent;
  border-radius: 8px !important;
  color: var(--ia-sand-700) !important;
}

.sidebar-container button:hover {
  background: var(--ia-cherry-50) !important;
  color: var(--ia-ink) !important;
}

.sidebar-container .bg-purple-50,
.sidebar-container .bg-orange-50,
.sidebar-container .bg-pink-50,
.sidebar-container .bg-yellow-50,
.sidebar-container .bg-teal-50,
.sidebar-container .bg-blue-50,
.sidebar-container .bg-indigo-50,
.sidebar-container .bg-emerald-50,
.sidebar-container .bg-violet-50 {
  background: var(--ia-sand-100) !important;
  border-color: var(--ia-ink) !important;
  box-shadow: 2px 2px 0 var(--ia-ink);
  color: var(--ia-ink) !important;
}

.sidebar-container .text-blue-500,
.sidebar-container .text-purple-500,
.sidebar-container .text-orange-500,
.sidebar-container .text-pink-500,
.sidebar-container .text-yellow-500,
.sidebar-container .text-teal-500,
.sidebar-container .text-indigo-500,
.sidebar-container .text-emerald-500,
.sidebar-container .text-violet-500 {
  color: var(--ia-cherry) !important;
}

.sidebar-container .text-green-500 {
  color: var(--ia-teal) !important;
}

.sidebar-container .text-red-600,
.sidebar-container .text-red-800 {
  color: var(--ia-danger) !important;
}

.sidebar-container .border-gray-200,
.sidebar-container .border-r {
  border-color: var(--ia-sand-200) !important;
}

.sidebar-container .bg-blue-50:not(button) {
  background: var(--ia-paper) !important;
  border: 2px solid var(--ia-sand-200);
  border-radius: 8px !important;
}

.text-primary,
.text-gray-900,
.text-gray-800,
.text-foreground {
  color: var(--ia-text) !important;
}

.text-muted-foreground,
.text-gray-500,
.text-gray-600,
.text-gray-700 {
  color: var(--ia-text-muted) !important;
}

.text-accent,
.text-orange-400,
.text-orange-500,
.text-pink-400,
.text-pink-500,
.text-purple-500,
.text-indigo-500 {
  color: var(--ia-action) !important;
}

.text-red-500,
.text-red-600,
.text-destructive {
  color: var(--ia-danger) !important;
}

.bg-background,
.bg-gray-50,
.bg-slate-50,
.bg-orange-50 {
  background: var(--ia-bg) !important;
}

.bg-card,
.bg-white,
.card,
.hw-card,
.ws-card,
.book-card,
.result-card,
.question-card,
.session-card,
.worksheet-preview,
.generation-card,
.glass-effect {
  background: var(--ia-paper) !important;
  color: var(--ia-text);
  border-color: var(--ia-border) !important;
}

.border-border,
.border-gray-200,
.border-gray-300,
.border-slate-200,
.border {
  border-color: var(--ia-border) !important;
}

.shadow-xl,
.shadow-2xl,
.shadow-sm,
.image-card,
.book-card,
.result-card {
  box-shadow: 6px 6px 0 rgba(42, 30, 16, 0.92) !important;
}

.rounded-3xl,
.rounded-2xl,
.rounded-xl {
  border-radius: 8px !important;
}

.btn-primary,
.generate-btn,
.btn-generate,
.action-btn-primary,
button.bg-accent,
.bg-accent {
  background: var(--ia-action) !important;
  color: #fff !important;
  border: 2px solid var(--ia-ink) !important;
  box-shadow: 3px 3px 0 var(--ia-ink) !important;
}

.btn-primary:hover,
.generate-btn:hover,
.btn-generate:hover,
.action-btn-primary:hover,
button.bg-accent:hover {
  background: var(--ia-action-hover) !important;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-download,
.action-btn,
.stepper-btn,
.tab-pill,
.template-option,
.audio-file-label {
  background: var(--ia-sand-50) !important;
  color: var(--ia-text) !important;
  border-color: var(--ia-border) !important;
}

.btn-secondary:hover,
.btn-download:hover,
.action-btn:hover,
.stepper-btn:hover,
.tab-pill.inactive:hover,
.audio-file-label:hover {
  background: var(--ia-cherry-50) !important;
  border-color: var(--ia-action) !important;
}

.btn-danger,
.delete-thumb {
  color: var(--ia-danger) !important;
  border-color: var(--ia-danger) !important;
}

.btn-danger:hover,
.delete-thumb {
  background: var(--ia-danger) !important;
  color: #fff !important;
}

input,
textarea,
select,
.input-field,
.form-input,
.hw-input,
.ws-input,
.form-textarea {
  background: var(--ia-paper) !important;
  color: var(--ia-text) !important;
  border-color: var(--ia-border) !important;
}

input:focus,
textarea:focus,
select:focus,
.input-field:focus,
.form-input:focus,
.hw-input:focus,
.ws-input:focus,
.form-textarea:focus {
  border-color: var(--ia-action) !important;
  box-shadow: 0 0 0 4px rgba(231, 111, 81, 0.16) !important;
  outline: none !important;
}

::placeholder {
  color: var(--ia-sand-500) !important;
}

.upload-area,
.drop-zone {
  background: var(--ia-sand-50) !important;
  border-color: var(--ia-sand-300) !important;
}

.upload-area:hover,
.upload-area.drag-over,
.drop-zone:hover,
.drop-zone.dragover {
  background: var(--ia-cherry-50) !important;
  border-color: var(--ia-action) !important;
}

.page-title,
.hw-page-title,
.ws-page-title {
  color: var(--ia-text) !important;
}

.page-subtitle,
.hw-page-desc,
.ws-page-desc,
.hw-card-subtitle,
.results-subtitle {
  color: var(--ia-text-muted) !important;
}

.page-title-accent,
.tab-pill.active,
.template-option.active,
.page-thumb.active,
.choice-card.selected {
  color: var(--ia-action) !important;
  border-color: var(--ia-action) !important;
}

.template-option.active,
.page-thumb.active,
.choice-card.selected {
  background: var(--ia-cherry-50) !important;
}

.choice-icon,
.toggle-track.on,
.toggle-switch input:checked + .toggle-slider {
  background: var(--ia-action) !important;
}

.share-row,
.option-btn.correct,
.option-btn.revealed {
  background: rgba(42, 157, 143, 0.12) !important;
  border-color: rgba(42, 157, 143, 0.35) !important;
  color: var(--ia-teal) !important;
}

.embed-row {
  background: var(--ia-sand-50) !important;
  border-color: var(--ia-border) !important;
}

.embed-row-header,
.embed-hint,
.share-copy-btn,
.embed-copy-btn {
  color: var(--ia-bluebell) !important;
}

.embed-code-box {
  background: var(--ia-ink) !important;
}

.embed-code-box code {
  color: var(--ia-butter) !important;
}

.loading {
  background: rgba(255, 243, 217, 0.84) !important;
}

.loading-content {
  background: var(--ia-paper) !important;
  border: 2px solid var(--ia-ink) !important;
  box-shadow: 6px 6px 0 var(--ia-ink) !important;
}

.loading-spinner::before,
.loading-spinner::after {
  border-top-color: var(--ia-action) !important;
  border-right-color: var(--ia-amber) !important;
}

::-webkit-scrollbar-track {
  background: var(--ia-sand-50);
}

::-webkit-scrollbar-thumb {
  background: var(--ia-action);
}

/* ── Sidebar drawer transition (all pages) ── */
.sidebar-container {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Mobile header: hidden on desktop ── */
.mobile-header {
  display: none;
}

/* ── Drawer overlay ── */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 30, 16, 0.45);
  z-index: 1001;
}
.drawer-overlay.visible {
  display: block;
}
body.drawer-is-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ── Mobile breakpoint: unified drawer behaviour for all pages ── */
@media (max-width: 768px) {
  .sidebar-container {
    width: 280px !important;
    transform: translateX(-100%) !important;
    z-index: 1002 !important;
    box-shadow: none !important;
  }
  .sidebar-container.drawer-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(42, 30, 16, 0.18) !important;
  }
  .main-content-wrapper,
  .hw-page,
  .ws-page {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 58px !important;
  }
  .mobile-header {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: #fff8ec;
    border-bottom: 2px solid #ecd9b0;
    z-index: 999;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-family: 'Poppins', sans-serif;
  }
  .mobile-header-hamburger {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid #2a1e10;
    box-shadow: 2px 2px 0 #2a1e10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .mobile-header-credits {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px 7px 9px;
    border-radius: 100px;
    background: #fff8e6;
    border: 2px solid #2a1e10;
    box-shadow: 2px 2px 0 #2a1e10;
    font-size: 13px;
    font-weight: 800;
    color: #2a1e10;
    cursor: pointer;
  }
}