@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  margin: 0;
}

/**
 * Brand/accent tokens on both the React root and `.sikshya-admin-theme` so
 * portaled UI (modals/toasts on `document.body`) can use Tailwind `brand-*`
 * and `accent-*` utilities (e.g. Pro upgrade gradient cards).
 */
#sikshya-admin-root,
.sikshya-admin-theme {
  /**
   * Admin "brand" palette — Sikshya logo PRIMARY navy.
   * Used for primary CTAs, links, focus rings, neutral brand surfaces.
   */
  --sikshya-brand-50-rgb: 240 245 251;
  --sikshya-brand-100-rgb: 232 240 250;
  --sikshya-brand-200-rgb: 200 216 238;
  --sikshya-brand-300-rgb: 168 192 226;
  --sikshya-brand-400-rgb: 114 153 203;
  --sikshya-brand-500-rgb: 44 91 168;
  --sikshya-brand-600-rgb: 38 78 141;
  --sikshya-brand-700-rgb: 31 69 133;
  --sikshya-brand-800-rgb: 26 58 110;
  --sikshya-brand-900-rgb: 20 46 87;
  --sikshya-brand-950-rgb: 14 32 62;

  /**
   * Admin "accent" palette — Sikshya logo SECONDARY purple ("LMS" wordmark color).
   * Used for Pro / upgrade surfaces, premium pills, accent badges.
   * Base 600 = #7a2e80 (logo accent).
   */
  --sikshya-accent-50-rgb: 251 245 251;
  --sikshya-accent-100-rgb: 245 232 245;
  --sikshya-accent-200-rgb: 235 213 237;
  --sikshya-accent-300-rgb: 217 190 220;
  --sikshya-accent-400-rgb: 197 163 201;
  --sikshya-accent-500-rgb: 162 110 167;
  --sikshya-accent-600-rgb: 122 46 128;
  --sikshya-accent-700-rgb: 94 34 102;
  --sikshya-accent-800-rgb: 74 26 81;
  --sikshya-accent-900-rgb: 58 20 45;
  --sikshya-accent-950-rgb: 40 15 31;
}

#sikshya-admin-root {
  min-height: calc(100vh - 32px);
}

/**
 * Full-viewport shell: height (not min-height) avoids an extra document strip below
 * short pages; overflow clips so only <main> scrolls inside AppShell.
 */
body.sikshya-react-shell {
  overflow: hidden;
}

body.sikshya-react-shell #sikshya-admin-root {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* WordPress admin bar offset (not used on Sikshya React shell) */
body.admin-bar:not(.sikshya-react-shell) #sikshya-admin-root {
  min-height: calc(100vh - 62px);
}

/**
 * Certificate visual builder: fill WP admin content (no AppShell).
 * Size `#sikshya-admin-root` when the builder is mounted, then absolutely fill it so
 * nested flex/`h-full` chains do not leave a white strip under the workspace.
 */
#sikshya-admin-root:has(.sikshya-cert-builder-viewport) {
  position: relative;
  box-sizing: border-box;
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  min-height: calc(100vh - 32px);
  overflow: hidden;
}

body.admin-bar:not(.sikshya-react-shell) #sikshya-admin-root:has(.sikshya-cert-builder-viewport) {
  height: calc(100vh - 62px);
  max-height: calc(100vh - 62px);
  min-height: calc(100vh - 62px);
}

.sikshya-cert-builder-viewport {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

#sikshya-admin-root:has(.sikshya-cert-builder-viewport) .sikshya-cert-builder-viewport {
  position: absolute;
  inset: 0;
  height: auto;
  max-height: none;
}

/**
 * Single Sikshya admin splash: same markup/classes for PHP pre-React boot and React Suspense.
 * (Avoid a second, different “Loading…” UI when lazy route chunks load.)
 */
@keyframes sikshya-admin-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

.sikshya-admin-boot-spinner {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  border-top-color: #5078b7;
  animation: sikshya-admin-boot-spin 0.75s linear infinite;
}

.dark .sikshya-admin-boot-spinner {
  border-color: #334155;
  border-top-color: #a8c3e3;
}

.sikshya-admin-boot-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  box-sizing: border-box;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.dark .sikshya-admin-boot-loader:not(.sikshya-admin-boot-loader--in-shell) {
  background: #0f172a;
  color: #94a3b8;
}

body.sikshya-react-shell .sikshya-admin-boot-loader:not(.sikshya-admin-boot-loader--in-shell) {
  min-height: 100vh;
}

body:not(.sikshya-react-shell) .sikshya-admin-boot-loader:not(.sikshya-admin-boot-loader--in-shell) {
  min-height: calc(100vh - 32px);
}

body.admin-bar:not(.sikshya-react-shell) .sikshya-admin-boot-loader:not(.sikshya-admin-boot-loader--in-shell) {
  min-height: calc(100vh - 46px);
}

/** Lazy-route Suspense fallback inside AppShell `<main>` — same spinner, no second visual system. */
.sikshya-admin-boot-loader.sikshya-admin-boot-loader--in-shell {
  width: 100%;
  flex: 1 1 auto;
  min-height: min(70vh, 40rem);
  background: transparent;
  color: inherit;
}

/* Settings page: restyle legacy WP markup to match Sikshya admin UI. */
.settings-legacy-html {
  font-size: 14px;
}

.settings-legacy-html .form-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  margin: 0;
}

.settings-legacy-html .form-table th {
  width: 240px;
  padding: 8px 16px 0 0;
  vertical-align: top;
  font-weight: 600;
  color: rgb(15 23 42); /* slate-900 */
}

.settings-legacy-html .form-table td {
  padding: 0;
}

.settings-legacy-html label {
  font-weight: 600;
  color: rgb(30 41 59); /* slate-800 */
}

.settings-legacy-html .description {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: rgb(100 116 139); /* slate-500 */
}

.settings-legacy-html input[type='text'],
.settings-legacy-html input[type='number'],
.settings-legacy-html input[type='email'],
.settings-legacy-html input[type='url'],
.settings-legacy-html input[type='password'],
.settings-legacy-html input[type='date'],
.settings-legacy-html input[type='time'],
.settings-legacy-html input[type='datetime-local'],
.settings-legacy-html select,
.settings-legacy-html textarea {
  width: 100%;
  max-width: 720px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgb(226 232 240); /* slate-200 */
  background: white;
  padding: 10px 14px;
  font-size: 14px;
  color: rgb(15 23 42); /* slate-900 */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.settings-legacy-html textarea {
  min-height: 120px;
  resize: vertical;
}

.settings-legacy-html input[type='checkbox'] {
  height: 16px;
  width: 16px;
  border-radius: 4px;
  border: 1px solid rgb(203 213 225); /* slate-300 */
}

.settings-legacy-html .button,
.settings-legacy-html input[type='submit'],
.settings-legacy-html button[type='submit'] {
  border-radius: 12px;
  border: 1px solid rgb(226 232 240); /* slate-200 */
  background: white;
  padding: 10px 14px;
  font-weight: 600;
  color: rgb(30 41 59); /* slate-800 */
}

.settings-legacy-html .button-primary,
.settings-legacy-html input[type='submit'].button-primary,
.settings-legacy-html button[type='submit'].button-primary {
  border-color: rgb(44 91 168); /* brand-ish */
  background: rgb(44 91 168);
  color: white;
}

/* Brand-tinted checkbox + radio accent (matches logo primary navy). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #2c5ba8;
}