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

html,
body {
  margin: 0;
}

#sikshya-admin-root {
  min-height: calc(100vh - 32px);
  /**
   * Default admin “brand” palette (matches the historical Sikshya blue ramp).
   * White label can override these at runtime via inline styles (see `adminBrandTokens.ts`).
   */
  --sikshya-brand-50-rgb: 239 246 255;
  --sikshya-brand-100-rgb: 219 234 254;
  --sikshya-brand-200-rgb: 191 219 254;
  --sikshya-brand-300-rgb: 147 197 253;
  --sikshya-brand-400-rgb: 96 165 250;
  --sikshya-brand-500-rgb: 59 130 246;
  --sikshya-brand-600-rgb: 37 99 235;
  --sikshya-brand-700-rgb: 29 78 216;
  --sikshya-brand-800-rgb: 30 64 175;
  --sikshya-brand-900-rgb: 30 58 138;
  --sikshya-brand-950-rgb: 23 37 84;
}

/**
 * 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: #3b82f6;
  animation: sikshya-admin-boot-spin 0.75s linear infinite;
}

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

.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(37 99 235); /* brand-ish */
  background: rgb(37 99 235);
  color: white;
}