/* ============================================================
   Lubbock Event Rentals — LER Hub
   Combined design tokens (ported from the design handoff) + app base.
   Single stylesheet so the PWA caches one file for offline use.
   ============================================================ */

/* ---- Fonts (Google substitutes — swap for real brand fonts if licensed) ---- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Pinyon+Script&display=swap');

:root {
  /* ---- Brand red (primary) ---- */
  --red-900: #4A0000; --red-800: #6B0000; --red-700: #990000; --red-600: #B11212;
  --red-500: #C8312E; --red-400: #DB5B57; --red-300: #E98F8C; --red-200: #F3C2C0;
  --red-100: #FAE3E2; --red-50: #FCF2F1;

  /* ---- Ink / warm neutrals ---- */
  --ink-900: #161210; --ink-800: #2A2421; --ink-700: #433B36; --ink-600: #5E544E;
  --ink-500: #837871; --ink-400: #A89E97; --ink-300: #CCC3BC; --ink-200: #E4DCD4;
  --ink-100: #F0E9E2; --ink-50: #F8F3ED; --black: #0D0B0A; --white: #FFFFFF;

  /* ---- Warm surfaces ---- */
  --ivory: #FBF8F3; --cream: #F4EDE3; --champagne: #E8DAC4; --linen: #EDE4D7;

  /* ---- Champagne gold (secondary accent) ---- */
  --gold-600: #9A7B3F; --gold-500: #B8945A; --gold-400: #CDB07E; --gold-300: #E0C99E;

  /* ---- Semantic ---- */
  --success: #3F7A4E; --warning: #B8801F; --danger: #B11212; --info: #3E6B8C;
  --success-bg: #EAF2EB; --warning-bg: #F8F0DC; --danger-bg: #FAE3E2; --info-bg: #E8F0F5;

  /* ---- Aliases ---- */
  --brand: var(--red-700); --brand-strong: var(--red-800);
  --bg-page: var(--ivory); --surface-card: var(--white);
  --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-600);
  --border-subtle: var(--ink-200); --border-default: var(--ink-300); --border-strong: var(--ink-400);
  --focus-ring: var(--red-500);

  /* ---- Type families ---- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;
  --font-script: 'Pinyon Script', 'Snell Roundhand', cursive;

  /* ---- Radii ---- */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
  --radius-xl: 16px; --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(43,22,16,0.06);
  --shadow-sm: 0 1px 3px rgba(43,22,16,0.08), 0 1px 2px rgba(43,22,16,0.05);
  --shadow-md: 0 4px 12px rgba(43,22,16,0.08), 0 2px 4px rgba(43,22,16,0.05);
  --shadow-lg: 0 12px 28px rgba(43,22,16,0.10), 0 4px 10px rgba(43,22,16,0.06);
  --shadow-brand: 0 8px 20px rgba(153,0,0,0.22);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--font-body);
  background: var(--ink-900);
  color: var(--ink-900);
  overscroll-behavior-y: none;
}

/* App fills the viewport like a native app. On wide screens we frame it
   to a phone-width column centered on a warm backdrop (for desktop testing). */
#root {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg-page);
}

@media (min-width: 520px) {
  body { background: radial-gradient(120% 90% at 50% 0%, #F4EDE3 0%, #EDE4D7 55%, #E4D8C6 100%); }
  /* Employee-facing app: phone-first, centered readable card (phones + tablets). */
  #root {
    position: relative;
    width: 430px; max-width: 100%;
    height: min(920px, 100vh);
    margin: max(0px, calc((100vh - 920px) / 2)) auto;
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 70px rgba(43,22,16,0.30), 0 8px 24px rgba(43,22,16,0.18);
  }
  /* Admin console: fill the screen (tablets landscape + desktop) for wide tables + editing. */
  #root.wide {
    width: min(1280px, 100%);
    height: 100vh;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Desktop-console helpers (only take effect inside #root.wide) */
.wide-only { display: none; }
#root.wide .wide-only { display: revert; }
#root.wide .narrow-only { display: none; }
.admin-wrap { width: 100%; max-width: 1180px; margin: 0 auto; }

/* The single app surface that screens render into */
.app-surface {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-page);
  overflow: hidden;
}

/* Respect iOS safe areas when installed.
   Use a transparent top border (not padding) so the inset can't be overridden
   by the inline `padding` shorthands the red headers set. Background shows
   through the border (border-box clip), so the red band still bleeds to the
   very top while the header content sits below the status bar. */
.safe-top { border-top: env(safe-area-inset-top, 0px) solid transparent; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

input, textarea, button { font-family: inherit; }
button { -webkit-appearance: none; appearance: none; }
::placeholder { color: var(--ink-400); }

/* Hide number spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bottom-sheet motion */
@keyframes ler-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ler-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* App boot splash (shown until React mounts) */
#boot {
  position: fixed; inset: 0; z-index: 100;
  background: var(--red-700);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s ease-out;
}
#boot.hide { opacity: 0; pointer-events: none; }
#boot img { height: 120px; opacity: 0.95; }