/* =============================================================================
 *  shared/pp-ui.css — Preferred Plumbing Toolkit · Shared UI Foundation
 *  -----------------------------------------------------------------------------
 *  Single source of truth for design tokens, typography, buttons, form fields,
 *  and the modal primitive. Every page should import this BEFORE its own
 *  page-specific styles.
 *
 *  Naming convention:
 *    --pp-*         design tokens (colors, spacing, type, motion)
 *    .pp-btn        primitive components (button, input, etc.)
 *    .pp-modal      modal/dialog primitives
 *
 *  Legacy aliases (--navy, --green, --tx, etc.) are preserved so existing
 *  pages continue to render correctly. New code should prefer --pp-* tokens.
 *
 *  v1.13.1 — first cut. Expand as patterns stabilize.
 * =============================================================================
 */

:root {
  /* ─── BRAND COLORS ────────────────────────────────────────────────────── */
  --pp-navy:       #253747;
  --pp-navy-dp:    #1A2733;
  --pp-navy-dk:    #1F2E3D;
  --pp-navy-md:    #2C4254;
  --pp-navy-lt:    #344C61;

  --pp-green:      #31B44B;
  --pp-green-dk:   #228B33;
  --pp-green-lt:   #4DC862;
  --pp-green-soft: rgba(49,180,75,0.10);
  --pp-green-glow: rgba(49,180,75,0.35);

  /* ─── TEXT ─── */
  --pp-tx:     #F4F7FA;
  --pp-tx-2:   #A9B4C2;
  --pp-tx-3:   #6B7689;
  --pp-tx-inv: #1A2733;

  /* ─── SURFACES / BORDERS / FILLS ─── */
  --pp-brd:    rgba(255,255,255,0.06);
  --pp-brd-2:  rgba(255,255,255,0.10);
  --pp-brd-hi: rgba(255,255,255,0.16);
  --pp-fill:    rgba(255,255,255,0.03);
  --pp-fill-hi: rgba(255,255,255,0.06);

  /* ─── ACCENTS / STATES ─── */
  --pp-red:    #FF4D4F;
  --pp-red-bg: rgba(255,77,79,0.10);
  --pp-amb:    #F5A524;
  --pp-amb-bg: rgba(245,165,36,0.10);
  --pp-blue:   #3B82F6;
  --pp-blue-bg: rgba(59,130,246,0.12);

  /* ─── SHADOWS ─── */
  --pp-sh-xs: 0 1px 2px rgba(0,0,0,0.4);
  --pp-sh:    0 2px 8px rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.2);
  --pp-sh-md: 0 4px 16px rgba(0,0,0,0.35), 0 20px 48px rgba(0,0,0,0.25);
  --pp-sh-lg: 0 8px 24px rgba(0,0,0,0.45), 0 32px 80px rgba(0,0,0,0.35);

  /* ─── RADIUS ─── */
  --pp-r-sm:   8px;
  --pp-r:     12px;
  --pp-r-lg:  16px;
  --pp-r-xl:  24px;
  --pp-r-full: 999px;

  /* ─── MOTION ─── */
  --pp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pp-t:    180ms;
  --pp-t-fast: 100ms;
  --pp-t-slow: 320ms;

  /* ─── TYPOGRAPHY ─── */
  --pp-font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pp-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── SPACING SCALE ─── */
  --pp-sp-1: 4px;
  --pp-sp-2: 8px;
  --pp-sp-3: 12px;
  --pp-sp-4: 16px;
  --pp-sp-5: 20px;
  --pp-sp-6: 24px;
  --pp-sp-8: 32px;
  --pp-sp-10: 40px;
  --pp-sp-12: 48px;

  /* ─── LEGACY ALIASES — keep existing pages rendering ─── */
  --navy:       var(--pp-navy);
  --navy-dp:    var(--pp-navy-dp);
  --navy-dk:    var(--pp-navy-dk);
  --navy-md:    var(--pp-navy-md);
  --navy-lt:    var(--pp-navy-lt);
  --green:      var(--pp-green);
  --green-dk:   var(--pp-green-dk);
  --green-lt:   var(--pp-green-lt);
  --green-soft: var(--pp-green-soft);
  --green-glow: var(--pp-green-glow);
  --tx:         var(--pp-tx);
  --tx2:        var(--pp-tx-2);
  --tx3:        var(--pp-tx-3);
  --tx-inv:     var(--pp-tx-inv);
  --brd:        var(--pp-brd);
  --brd-2:      var(--pp-brd-2);
  --brd-hi:     var(--pp-brd-hi);
  --fill:       var(--pp-fill);
  --fill-hi:    var(--pp-fill-hi);
  --red:        var(--pp-red);
  --red-bg:     var(--pp-red-bg);
  --amb:        var(--pp-amb);
  --amb-bg:     var(--pp-amb-bg);
  --blue:       var(--pp-blue);
  --blue-bg:    var(--pp-blue-bg);
  --sh-xs:      var(--pp-sh-xs);
  --sh:         var(--pp-sh);
  --sh-md:      var(--pp-sh-md);
  --r-sm:       var(--pp-r-sm);
  --r:          var(--pp-r);
  --r-lg:       var(--pp-r-lg);
  --r-full:     var(--pp-r-full);
  --ease:       var(--pp-ease);
  --t:          var(--pp-t);
  --font:       var(--pp-font);
  --font-sans:  var(--pp-font);
  --font-mono:  var(--pp-mono);
  --mono:       var(--pp-mono);
}

/* =============================================================================
 *  PRIMITIVES — inputs, modals, etc. used across the toolkit
 *  -----------------------------------------------------------------------------
 *  .pp-btn + variants live in shared/styles.css (the canonical button system,
 *  pre-dates this file). DO NOT redefine .pp-btn rules here; they would just
 *  override based on CSS load order. The --pp-* tokens above are designed to
 *  feed both this file and styles.css through the legacy aliases below.
 * ============================================================================= */

/* Form fields ----------------------------------------------------------------
 * Generic input/textarea/select styles. Use .pp-input on the element. */
.pp-input,
.pp-textarea,
.pp-select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--pp-font);
  font-size: 13px;
  color: var(--pp-tx);
  background: var(--pp-fill);
  border: 1px solid var(--pp-brd-2);
  border-radius: var(--pp-r-sm);
  outline: none;
  transition: border-color var(--pp-t) var(--pp-ease),
              background var(--pp-t) var(--pp-ease),
              box-shadow var(--pp-t) var(--pp-ease);
}
.pp-input:hover,
.pp-textarea:hover,
.pp-select:hover {
  border-color: var(--pp-brd-hi);
}
.pp-input:focus,
.pp-textarea:focus,
.pp-select:focus {
  border-color: var(--pp-green);
  background: var(--pp-navy-dp);
  box-shadow: 0 0 0 3px var(--pp-green-glow);
}
.pp-input::placeholder,
.pp-textarea::placeholder {
  color: var(--pp-tx-3);
}
.pp-textarea {
  resize: vertical;
  min-height: 72px;
}

/* Field label + helper text ----------------------------------------------- */
.pp-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-tx-2);
  margin-bottom: var(--pp-sp-2);
}
.pp-help {
  font-size: 11px;
  color: var(--pp-tx-3);
  margin-top: var(--pp-sp-1);
}
.pp-help--error { color: var(--pp-red); }

/* Field grouping ----------------------------------------------------------- */
.pp-field { margin-bottom: var(--pp-sp-5); }
.pp-field:last-child { margin-bottom: 0; }

/* =============================================================================
 *  MODAL — backdrop + dialog container
 *  Open: add .is-open class on .pp-modal element.
 *  Use shared/pp-ui.js openModal()/closeModal() helpers.
 * ============================================================================= */

.pp-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 16, 24, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pp-t) var(--pp-ease);
  font-family: var(--pp-font);
}
.pp-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pp-modal__dialog {
  position: relative;
  background: var(--pp-navy-dk);
  border: 1px solid var(--pp-brd-2);
  border-radius: var(--pp-r-lg);
  box-shadow: var(--pp-sh-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--pp-t) var(--pp-ease);
}
.pp-modal.is-open .pp-modal__dialog {
  transform: translateY(0) scale(1);
}
.pp-modal__dialog--wide { max-width: 720px; }
.pp-modal__dialog--narrow { max-width: 400px; }

.pp-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp-sp-4);
  padding: var(--pp-sp-6) var(--pp-sp-6) var(--pp-sp-3);
  border-bottom: 1px solid var(--pp-brd);
}
.pp-modal__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pp-tx);
  margin: 0;
}
.pp-modal__subtitle {
  font-size: 12px;
  color: var(--pp-tx-3);
  margin-top: var(--pp-sp-1);
}
.pp-modal__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pp-r-sm);
  color: var(--pp-tx-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all var(--pp-t) var(--pp-ease);
}
.pp-modal__close:hover {
  background: var(--pp-fill);
  border-color: var(--pp-brd-2);
  color: var(--pp-tx);
}

.pp-modal__body {
  padding: var(--pp-sp-6);
  overflow-y: auto;
  flex: 1 1 auto;
}
.pp-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--pp-sp-3);
  padding: var(--pp-sp-4) var(--pp-sp-6) var(--pp-sp-6);
  border-top: 1px solid var(--pp-brd);
}

/* Body scroll lock when a modal is open */
body.pp-modal-open {
  overflow: hidden;
}

/* v1.15.26: mobile (<= 720px) — modal becomes near-fullscreen and stack
 * footer buttons full-width so the Create button is easy to tap. */
@media (max-width: 720px) {
  .pp-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .pp-modal__dialog {
    max-width: none !important;
    /* v1.17.26: dvh tracks the VISIBLE viewport, so when the iOS keyboard
       opens the dialog shrinks and the footer (Create) stays reachable
       above the keyboard instead of buried under it. vh line kept as the
       fallback for older browsers. */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: 100vh;
    height: 100dvh;
    border-radius: 0 !important;
    border: none !important;
    width: 100%;
  }
  /* v1.17.26: 16px inputs inside modals — anything smaller makes iOS
     Safari auto-zoom the page on focus, which is the single biggest
     "not mobile friendly" feel in the New Project popup. */
  .pp-modal .pp-input,
  .pp-modal .pp-textarea,
  .pp-modal .pp-select {
    font-size: 16px;
  }
  .pp-modal__header {
    padding: 16px 16px 10px;
  }
  .pp-modal__body {
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .pp-modal__footer {
    /* v1.17.26: keep the buttons clear of the iPhone home indicator */
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    flex-direction: column-reverse;
    gap: 10px;
  }
  .pp-modal__footer > .pp-btn,
  .pp-modal__footer > button {
    width: 100%;
    justify-content: center;
  }
  .pp-modal__title {
    font-size: 17px;
  }
}

/* =============================================================================
 *  HIDDEN SCROLLBARS for chrome-y modals
 * ============================================================================= */
.pp-modal__body::-webkit-scrollbar { width: 8px; height: 8px; }
.pp-modal__body::-webkit-scrollbar-track { background: transparent; }
.pp-modal__body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: var(--pp-r-full);
}
.pp-modal__body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.16);
}