/*
 * Preline UI Theme — Default (Gray/Blue)
 * -----------------------------------------------
 * Semantic CSS custom properties used by Preline
 * UI components. Downloaded from preline.co/docs/themes.html
 * Version: 4.1.2
 * -----------------------------------------------
 */

:root {
  /* ── Background ─────────────────────────────── */
  --background: #ffffff;
  --background-1: oklch(97.8% .003 264.5);
  --background-2: oklch(96.7% .003 264.5);
  --background-plain: #ffffff;

  /* ── Foreground ─────────────────────────────── */
  --foreground: oklch(27.8% .033 256.848);
  --foreground-inverse: #ffffff;

  /* ── Inverse ────────────────────────────────── */
  --inverse: oklch(27.8% .033 256.848);

  /* ── Border / Lines ─────────────────────────── */
  --border: oklch(92.8% .006 264.531);
  --border-line-inverse: oklch(100% 0 0 / .15);
  --border-line-1: oklch(92.8% .006 264.531);
  --border-line-2: oklch(92.8% .006 264.531);
  --border-line-3: oklch(87% .006 264.5);
  --border-line-4: oklch(55.1% .027 264.364);
  --border-line-5: oklch(44.6% .03 256.802);
  --border-line-6: oklch(37.9% .031 255.508);
  --border-line-7: oklch(33.1% .029 256.848);
  --border-line-8: oklch(27.8% .033 256.848);

  /* ── Primary ────────────────────────────────── */
  --primary: oklch(54.6% .245 262.881);
  --primary-line: oklch(54.6% .245 262.881);
  --primary-foreground: #ffffff;
  --primary-hover: oklch(48.8% .243 264.376);
  --primary-focus: oklch(54.6% .245 262.881);
  --primary-active: oklch(48.8% .243 264.376);
  --primary-checked: oklch(54.6% .245 262.881);
  --primary-50: oklch(97% .014 254.604);
  --primary-100: oklch(93.2% .032 255.585);
  --primary-200: oklch(88.2% .059 254.128);
  --primary-300: oklch(80.9% .105 251.813);
  --primary-400: oklch(70.7% .165 254.624);
  --primary-500: oklch(62.3% .209 259.532);
  --primary-600: oklch(54.6% .245 262.881);
  --primary-700: oklch(48.8% .243 264.376);
  --primary-800: oklch(42.4% .199 265.638);
  --primary-900: oklch(37.9% .146 265.755);
  --primary-950: oklch(28.2% .091 267.935);

  /* ── Secondary ──────────────────────────────── */
  --secondary: oklch(96.7% .003 264.5);
  --secondary-line: oklch(92.8% .006 264.531);
  --secondary-foreground: oklch(27.8% .033 256.848);
  --secondary-hover: oklch(92.8% .006 264.531);
  --secondary-focus: oklch(92.8% .006 264.531);

  /* ── Muted ──────────────────────────────────── */
  --muted: oklch(96.7% .003 264.5);
  --muted-foreground-1: oklch(55.1% .027 264.364);
  --muted-foreground-2: oklch(55.1% .027 264.364);

  /* ── Destructive ────────────────────────────── */
  --destructive: oklch(57.7% .245 27.325);
  --destructive-line: oklch(57.7% .245 27.325);
  --destructive-foreground: #ffffff;
  --destructive-hover: oklch(50.5% .213 27.518);
  --destructive-focus: oklch(57.7% .245 27.325);

  /* ── Layer ──────────────────────────────────── */
  --layer: #ffffff;
  --layer-line: oklch(92.8% .006 264.531);
  --layer-foreground: oklch(27.8% .033 256.848);
  --layer-hover: oklch(96.7% .003 264.5);
  --layer-focus: oklch(96.7% .003 264.5);

  /* ── Surface ────────────────────────────────── */
  --surface: oklch(97.8% .003 264.5);
  --surface-line: oklch(92.8% .006 264.531);
  --surface-foreground: oklch(27.8% .033 256.848);

  /* ── Card ───────────────────────────────────── */
  --card: #ffffff;
  --card-line: oklch(92.8% .006 264.531);
  --card-foreground: oklch(27.8% .033 256.848);

  /* ── Overlay ────────────────────────────────── */
  --overlay: oklch(27.8% .033 256.848 / .5);

  /* ── Shadow ─────────────────────────────────── */
  --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}


/* ═══════════════════════════════════════════════
 * PRELINE UI — CSS UTILITY BRIDGE
 * ───────────────────────────────────────────────
 * Maps CSS custom property tokens to Tailwind-
 * compatible utility classes using pure CSS.
 *
 * WHY: Preline UI normally uses Tailwind v4's
 * @theme inline {} to generate bg-primary,
 * text-foreground etc. Since we load Preline
 * without a Tailwind v4 build step, we recreate
 * these mappings manually.
 *
 * ARCHITECTURE:
 * - Values reference CSS variables — NOT hardcoded
 * - Changing :root tokens updates ALL utilities
 * - Scoped under #drs-lock-screen to prevent
 *   conflicts with WordPress theme / React app
 * - Organized by Preline's token categories
 *
 * MAINTAINABILITY:
 * To add a new Preline component class, add its
 * mapping here following the same pattern:
 *   .class { property: var(--token); }
 * ═══════════════════════════════════════════════ */

/* ── Scope: all utilities apply only inside lock screen ── */

/* ── Lock screen positioning ────────────────────
 * Must use !important because WP themes can
 * override position:fixed via transforms or
 * explicit inset values on parent elements.
 * ────────────────────────────────────────────── */
#drs-lock-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  /* Override WP block theme .is-layout-constrained */
  margin: 0 !important;
  /* Override WP auto-centering margins */
  z-index: 99999 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--background-2, #f3f4f6);

  /* Typography defaults — matches Preline UI's sans-serif config */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── COLOR UTILITIES ─────────────────────────────── */

/* Background — card, layer, primary */
#drs-lock-screen .bg-card {
  background-color: var(--card);
}

#drs-lock-screen .bg-layer {
  background-color: var(--layer);
}

#drs-lock-screen .bg-primary {
  background-color: var(--primary);
}

/* Text — foreground, muted, primary, destructive */
#drs-lock-screen .text-foreground {
  color: var(--foreground);
}

#drs-lock-screen .text-primary-foreground {
  color: var(--primary-foreground);
}

#drs-lock-screen .text-muted-foreground-1 {
  color: var(--muted-foreground-1);
}

#drs-lock-screen .text-muted-foreground-2 {
  color: var(--muted-foreground-2);
}

#drs-lock-screen .text-red-600 {
  color: #dc2626;
}

/* Border — card, layer, primary */
#drs-lock-screen .border-card-line {
  border-color: var(--card-line);
}

#drs-lock-screen .border-layer-line {
  border-color: var(--layer-line);
}

#drs-lock-screen .border-primary-line {
  border-color: var(--primary-line);
}

/* Shadow — Preline's 2xs elevation */
#drs-lock-screen .shadow-2xs {
  box-shadow: var(--shadow-2xs);
}


/* ── INTERACTIVE STATE UTILITIES ─────────────────── */

/* Hover */
#drs-lock-screen .hover\:bg-primary-hover:hover {
  background-color: var(--primary-hover);
}

/* Focus */
#drs-lock-screen .focus\:border-primary-focus:focus {
  border-color: var(--primary-focus);
}

#drs-lock-screen .focus\:ring-primary-focus:focus {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-focus) 25%, transparent);
}

#drs-lock-screen .focus\:bg-primary-focus:focus {
  background-color: var(--primary-focus);
}

#drs-lock-screen .focus\:outline-hidden:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Disabled */
#drs-lock-screen .disabled\:opacity-50:disabled {
  opacity: 0.5;
}

#drs-lock-screen .disabled\:pointer-events-none:disabled {
  pointer-events: none;
}


/* ── LAYOUT UTILITIES ────────────────────────────── */

#drs-lock-screen .w-full {
  width: 100%;
}

#drs-lock-screen .block {
  display: block;
}

#drs-lock-screen .hidden {
  display: none;
}

#drs-lock-screen .grid {
  display: grid;
}

#drs-lock-screen .flex {
  display: flex;
}

#drs-lock-screen .inline-flex {
  display: inline-flex;
}

#drs-lock-screen .relative {
  position: relative;
}

#drs-lock-screen .absolute {
  position: absolute;
}

#drs-lock-screen .items-center {
  align-items: center;
}

#drs-lock-screen .justify-center {
  justify-content: center;
}

#drs-lock-screen .text-center {
  text-align: center;
}

#drs-lock-screen .inset-y-0 {
  top: 0;
  bottom: 0;
}

#drs-lock-screen .end-0 {
  inset-inline-end: 0;
}

#drs-lock-screen .z-20 {
  z-index: 20;
}

#drs-lock-screen .cursor-pointer {
  cursor: pointer;
}

#drs-lock-screen .shrink-0 {
  flex-shrink: 0;
}

/* Border */
#drs-lock-screen .border {
  border-width: 1px;
  border-style: solid;
}

/* Rounded */
#drs-lock-screen .rounded-xl {
  border-radius: 0.75rem;
}

#drs-lock-screen .rounded-lg {
  border-radius: 0.5rem;
}

#drs-lock-screen .rounded-e-md {
  border-start-end-radius: 0.375rem;
  border-end-end-radius: 0.375rem;
}

/* Spacing — padding */
#drs-lock-screen .p-4 {
  padding: 1rem;
}

#drs-lock-screen .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

#drs-lock-screen .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

#drs-lock-screen .py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#drs-lock-screen .py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Spacing — margin */
#drs-lock-screen .mt-2 {
  margin-top: 0.5rem;
}

#drs-lock-screen .mt-5 {
  margin-top: 1.25rem;
}

#drs-lock-screen .mb-2 {
  margin-bottom: 0.5rem;
}

/* Gap */
#drs-lock-screen .gap-y-4 {
  row-gap: 1rem;
}

#drs-lock-screen .gap-x-2 {
  column-gap: 0.5rem;
}

/* Typography — size */
#drs-lock-screen .text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

#drs-lock-screen .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#drs-lock-screen .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Typography — weight */
#drs-lock-screen .font-bold {
  font-weight: 700;
}

#drs-lock-screen .font-medium {
  font-weight: 500;
}

/* SVG size — Preline's size-4 utility */
#drs-lock-screen .size-4 {
  width: 1rem;
  height: 1rem;
}

/* Placeholder */
#drs-lock-screen .placeholder\:text-muted-foreground-1::placeholder {
  color: var(--muted-foreground-1);
}


/* ── RESPONSIVE — sm:* (≥640px) ──────────────────── */
@media (min-width: 640px) {
  #drs-lock-screen .sm\:p-7 {
    padding: 1.75rem;
  }

  #drs-lock-screen .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  #drs-lock-screen .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}


/* ── LOCK SCREEN CARD ELEVATION ──────────────────────
 * Override shadow-2xs with a premium multi-layer
 * shadow for proper card elevation. The token
 * --shadow-2xs only defines a minimal shadow.
 * This adds a subtle layered shadow for depth.
 * ──────────────────────────────────────────────── */
#drs-lock-screen .shadow-2xs {
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.05),
    0 4px 16px -2px rgba(0, 0, 0, 0.08),
    0 12px 40px -4px rgba(0, 0, 0, 0.06);
}

/* ── PASSWORD INPUT CONTRAST ─────────────────────────
 * The Preline token --layer-line resolves to a very
 * light color, making the input nearly invisible on
 * the white card background. Override with a visible
 * border color and subtle background tint.
 * ──────────────────────────────────────────────── */
#drs-lock-screen input[type="password"],
#drs-lock-screen input[type="text"] {
  border: 1px solid #cbd5e1;       /* slate-300 — visible on white */
  background-color: #f8fafc;        /* slate-50 — subtle tint */
}

#drs-lock-screen input[type="password"]:focus,
#drs-lock-screen input[type="text"]:focus {
  border-color: var(--primary-focus);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-focus) 25%, transparent);
}