/* css/zpay-canonical.css
 *
 * Canonical class library — status badges + drawer/panel + balance
 * cards + skeleton rows. Locked by PR #108 (leave.html Option 4
 * redesign). Reused by the ESS portal pages (my-payslips, my-leave,
 * my-profile).
 *
 * leave.html still inlines the same class definitions (intentionally
 * untouched to avoid risking a freshly-merged feature). A future
 * sweep can replace those inlines with a <link> to this file; until
 * then both copies stay in sync via the class-name contract.
 *
 * If you change a class definition here, also update leave.html.
 * See memory zampay-leave-canonical-ui for the full convention.
 */

/* ── Status badges ───────────────────────────────────────────── */
.lv-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: capitalize;
}
.lv-badge--pending    { background: #FEF9EC; border: 1px solid #C9A84C; color: #7A5C1E; }
.lv-badge--approved   { background: #1B4332; border: none; color: #FFFFFF; }
.lv-badge--rejected   { background: #FEF2F2; border: 1px solid #EF4444; color: #991B1B; }
.lv-badge--cancelled  { background: #F3F4F6; border: 1px solid #9CA3AF; color: #4B5563; }
.lv-badge--expired    { background: #F9FAFB; border: 1px solid #D1D5DB; color: #6B7280; }
.lv-badge--terminated { background: #FEF2F2; border: 1px solid #EF4444; color: #991B1B; }
.lv-badge--resigned   { background: #F5F3FF; border: 1px solid #8B5CF6; color: #5B21B6; }
.lv-badge--retired    { background: #EFF6FF; border: 1px solid #3B82F6; color: #1E40AF; }
.lv-badge--paused     { background: #FFFBEB; border: 1px solid #F59E0B; color: #92400E; }

/* ── Side panel / bottom drawer ─────────────────────────────── */
.panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 998;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease-out;
}
.panel-overlay.open { opacity: 1; pointer-events: auto; }

.lv-panel {
  position: fixed; top: 0; right: 0;
  width: 420px; max-width: 100vw; height: 100vh;
  background: #fff; z-index: 999;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 32px rgba(0, 0, 0, .12);
  transform: translateX(100%);
  transition: transform .2s ease-out;
}
.lv-panel.open { transform: translateX(0); }
.lv-panel-handle { display: none; }

.lv-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0; gap: 12px;
}
.lv-panel-name { font-size: 18px; font-weight: 700; color: #0D2B1F; margin: 0; line-height: 1.3; }
.lv-panel-job  { font-size: 14px; color: #6B7280; margin-top: 2px; }
.lv-panel-close {
  background: transparent; border: none; font-size: 22px; color: #6B7280;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  min-width: 32px; min-height: 32px; line-height: 1; flex-shrink: 0;
}
.lv-panel-close:hover { background: #F3F4F6; color: #111827; }
.lv-panel-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.lv-panel-h {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #6B7280;
  margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #E5E7EB;
}
.lv-panel-h:first-child { margin-top: 0; }

/* Mobile drawer: bottom-anchored 85vh sheet with grab handle. */
@media (max-width: 768px) {
  .lv-panel {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; height: 85vh; max-height: 85vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .18);
  }
  .lv-panel.open { transform: translateY(0); }
  .lv-panel-handle {
    display: block;
    width: 40px; height: 4px;
    background: #D1D5DB; border-radius: 2px;
    margin: 8px auto 0;
  }
}

/* ── Balance cards (mobile + reusable) ──────────────────────── */
.lv-bal-card {
  background: #fff;
  border: 1px solid #E5E7EB; border-radius: 8px;
  padding: 12px; margin-bottom: 8px;
}
.lv-bal-card-label { font-size: 14px; font-weight: 700; color: #0D2B1F; }
.lv-bal-card-avail { font-size: 28px; font-weight: 700; margin-top: 4px; }
.lv-bal-card-meta  { font-size: 12px; color: #6B7280; margin-top: 4px; }
.lv-bal-card-carry { font-size: 11px; color: var(--zds-gray-400); margin-top: 2px; } /* Bundle H — neutral token */
.avail-green { color: #1B4332; }
.avail-gold  { color: #8B6914; } /* Bundle H — WCAG AA fix (Bundle G missed the unscoped rule; .lv-bal-card-avail.avail-gold on leave.html + my-leave.html mobile cards) */
.avail-red   { color: #DC2626; }

/* ── Gender notice ──────────────────────────────────────────── */
.lv-gender-notice {
  background: #FEF9EC;
  border-left: 4px solid #C9A84C;
  color: #7A5C1E;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.lv-gender-notice a { color: #7A5C1E; font-weight: 600; text-decoration: underline; }

/* ── Skeleton rows (matches Brief #1 v2 — no shimmer) ───────── */
.skel-bar {
  height: 14px;
  background: #F3F4F6;
  border-radius: 4px;
}
.skel-bar.sm { height: 10px; width: 60%; margin-top: 6px; }

/* ── Form input — canonical class (Bundle D v4) ──────────────
   font-size:16px is REQUIRED — anything smaller triggers iOS
   Safari viewport zoom on focus. --gray-* / --space-* tokens
   deliberately not used here pending the styles.css design
   system audit (Phase 2.5) — colours inlined as hex literals
   from the audited token spec. */
.zpay-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #D4D0C8;
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  background: #FFFFFF;
  color: #27251F;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
}
.zpay-input:focus {
  outline: none;
  border-color: #1B4332;
  box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.12);
}
.zpay-input.error {
  border-color: #DC2626;
  background: #FEF2F2;
}
.zpay-input:disabled {
  background: #F4F3F0;
  color: #A8A299;
  cursor: not-allowed;
}

/* ── Document category badges (Bundle D v4) ──────────────────
   11 categories from zampay_documents (the schema-PRE-VERIFIED
   superset, not just the 6 template categories). All share the
   canonical .lv-badge anatomy above — these classes only set
   palette. Add new categories here when the schema grows. */
.lv-badge--doc-employment-contract  { background: #EFF6FF; border: 1px solid #3B82F6; color: #1E40AF; }
.lv-badge--doc-appointment-letter   { background: #F0FDF4; border: 1px solid #22C55E; color: #15803D; }
.lv-badge--doc-warning-letter       { background: #FFFBEB; border: 1px solid #F59E0B; color: #92400E; }
.lv-badge--doc-disciplinary-record  { background: #FEF2F2; border: 1px solid #EF4444; color: #991B1B; }
.lv-badge--doc-termination-letter   { background: #FDF2F8; border: 1px solid #EC4899; color: #9D174D; }
.lv-badge--doc-nrc-copy             { background: #F5F3FF; border: 1px solid #8B5CF6; color: #5B21B6; }
.lv-badge--doc-academic-certificate { background: #ECFDF5; border: 1px solid #10B981; color: #065F46; }
.lv-badge--doc-medical-certificate  { background: #ECFEFF; border: 1px solid #06B6D4; color: #0E7490; }
.lv-badge--doc-company-registration { background: #FFF7ED; border: 1px solid #F97316; color: #9A3412; }
.lv-badge--doc-tax-clearance        { background: #FEFCE8; border: 1px solid #EAB308; color: #713F12; }
.lv-badge--doc-other                { background: #F4F3F0; border: 1px solid #D4D0C8; color: #5C5854; }

/* === SUBSCRIPTION STATUS BADGES (Bundle F v2) ────────────
   7-status palette mirrors zampay_subscriptions.status enum
   (active, trial, pending, pending_bank_transfer, suspended,
   cancelled, failed). Share canonical .lv-badge anatomy. */
.lv-badge--sub-active        { background: #1B4332; border: none; color: #FFFFFF; }
.lv-badge--sub-trial         { background: #C9A84C; border: none; color: #1B4332; }
.lv-badge--sub-pending       { background: #FEF9EC; border: 1px solid #C9A84C; color: #7A5C1E; }
.lv-badge--sub-pending-bank  { background: #FEF9EC; border: 1px solid #C9A84C; color: #7A5C1E; }
.lv-badge--sub-suspended     { background: #FEF2F2; border: 1px solid #EF4444; color: #991B1B; }
.lv-badge--sub-cancelled     { background: #E8E6E1; border: 1px solid #D4D0C8; color: #5C5854; }
.lv-badge--sub-failed        { background: #FEF2F2; border: 1px solid #EF4444; color: #991B1B; }
/* Phase 5 Build 3 — L2: paused subscription status. Amber treatment
   matching .lv-badge--sub-pending palette so the cluster reads as
   "needs admin attention" rather than active or terminated. */
.lv-badge--sub-paused        { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }

/* === PLAN TIER BADGES (Phase 5 Build 3) ====================
   Distinct palette per plan_tier on zampay_companies. Used in
   the admin hub + customers table + dashboard plan indicator.
   Per M4 — do NOT reuse .lv-badge--doc-* for plan tiers; the
   doc palette signals document categories, not commercial tiers.
   Share canonical .lv-badge anatomy above. */
.lv-badge--plan-free    { background: var(--zds-gray-100); border: 1px solid var(--zds-gray-300); color: var(--zds-gray-600); }
.lv-badge--plan-lite    { background: #EFF6FF;            border: 1px solid #BFDBFE;            color: #1D4ED8; }
.lv-badge--plan-growth  { background: #F0FDF4;            border: 1px solid #BBF7D0;            color: #1B4332; }
.lv-badge--plan-business{ background: #FEF9EC;            border: 1px solid #FDE68A;            color: #92400E; }
.lv-badge--plan-bespoke { background: #1B4332;            border: 1px solid #C9A84C;            color: #C9A84C; }
.lv-badge--plan-partner { background: #F5F3FF;            border: 1px solid #DDD6FE;            color: #6D28D9; }

/* === ZPAY DESIGN SYSTEM — SPACING SCALE (Phase 2.5) ===
   New unprefixed tokens because styles.css has no
   --space-* properties — zero collision risk.
   Convention: prefer these over magic-number padding
   / margin / gap in all new Phase 2+ components. */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* === ZPAY DESIGN SYSTEM — BUTTON VARIANTS (Phase 2.5) ===
   canonical.css loads AFTER styles.css on pages that
   import it, so these rules override styles.css's
   button definitions for those pages. Buttons on pages
   that don't import canonical.css continue to use the
   styles.css definitions unchanged.
   `.btn-secondary` shift (gray-subdued → green-outlined)
   is intentional design-language change across 59
   existing usages — confirmed by Andrew.
   `.nav-footer .btn-ghost` scoped override below
   preserves Sign Out (white on dark green) — nav-footer
   class confirmed in VERIFY FIRST. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: opacity 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  background: #1B4332;
  color: white;
  border-color: #1B4332;
}
.btn-secondary {
  background: white;
  color: #1B4332;
  border-color: #1B4332;
}
.btn-ghost {
  background: transparent;
  color: #1B4332;
  border-color: transparent;
}
.btn-danger {
  background: #DC2626;
  color: white;
  border-color: #DC2626;
}
.btn-full { width: 100%; }

/* === BUTTON SIZE VARIANT — SMALL (Bundle I) ===
   Canonical small button. Overrides the .btn base's
   min-height: 44px from Phase 2.5 so .btn-sm renders
   compact (32px) where the design calls for it
   (nav-footer Switch company, table row actions, etc.). */
.btn-sm {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 13px;
}

/* Sign Out lives in the nav sidebar footer (.nav-footer)
   over a dark-green background — keep its white text +
   faint border so it stays legible. Selector confirmed
   in VERIFY FIRST against app.js:274 + styles.css:107. */
.nav-footer .btn-ghost {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

/* === ZPAY DESIGN SYSTEM — ZDS GRAY SCALE (Phase 2.5) ===
   Warm cream-tinted neutral scale for Phase 2+ work.
   Separate namespace from styles.css --gray-* (which is
   the green-tinted brand scale used by 387 existing
   refs — untouched). CONVENTION: all new components
   reference --zds-gray-* for neutral grays. Never use
   raw hex in new briefs; --gray-* is reserved for
   existing green-tinted components only. */
:root {
  --zds-gray-50:  #FAFAF9;
  --zds-gray-100: #F4F3F0;
  --zds-gray-200: #E8E6E1;
  --zds-gray-300: #D4D0C8;
  --zds-gray-400: #A8A299;
  --zds-gray-500: #7A7470;
  --zds-gray-600: #5C5854;
  --zds-gray-700: #3D3A37;
  --zds-gray-800: #27251F;
}

/* === PHASE 5 — UPGRADE MODAL ===========================================
   Surface for the feature-gate path (zpayShowUpgradeModal in app.js).
   z-index: 10100 — sits ABOVE the existing top-of-stack at 10000
   (the company picker overlay) and 9999 (zpayModal, import modal,
   toast). Calculated from the repo-wide z-index audit; the next
   addition should bump this if a higher overlay appears. */
.zpay-upgrade-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.zpay-upgrade-modal {
  background: #fff;
  border-radius: 10px;
  padding: 28px 28px 24px;
  max-width: 420px; width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.zpay-upgrade-modal__icon { font-size: 28px; margin-bottom: 8px; }
.zpay-upgrade-modal__title {
  font-size: 17px; font-weight: 700;
  color: #1B4332; margin-bottom: 6px;
}
.zpay-upgrade-modal__body {
  font-size: 14px; color: #374151;
  line-height: 1.55; margin-bottom: 16px;
}
.zpay-upgrade-modal__plans {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #6B7280;
  margin-bottom: 20px; flex-wrap: wrap;
}
.zpay-upgrade-modal__plans strong { color: #1B4332; }
.zpay-upgrade-modal__plans .arrow { color: #C9A84C; font-weight: 700; }
.zpay-upgrade-modal__actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.zpay-upgrade-modal__actions .btn-primary {
  flex: 1; min-width: 140px;
  text-decoration: none;
}
.zpay-upgrade-modal__dismiss {
  font-size: 13px; color: #9CA3AF;
  background: none; border: none;
  cursor: pointer; padding: 6px 8px;
  white-space: nowrap;
  font-family: inherit;
}
.zpay-upgrade-modal__dismiss:hover { color: #6B7280; }

/* ── Loan type & status badges (Phase 6) ─────────────────────────────
   M3: dedicated loan classes, NOT a reuse of .lv-badge--plan-*. The
   plan tier classes carry their own semantics in the customers admin
   panel; conflating them with loan types here would couple the two
   surfaces. */
.lv-badge--loan-advance   { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.lv-badge--loan-formal    { background: #F0FDF4; color: #1B4332; border: 1px solid #BBF7D0; }
.lv-badge--loan-recovered { background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; }
.lv-badge--loan-paused    { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.lv-badge--loan-exit      { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }

/* ── Termination status badges (Phase 8) ────────────────────────────
   L2: purpose-built class for the 'paid' terminations badge. The
   loan-recovered grey is too muted for a positive end-state, and
   .lv-badge--approved is already used for active loans + leave
   approvals — overloading it on a payment outcome confuses the
   semantic. New class, fresh mint palette. */
.lv-badge--termination-paid { background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7; }

/* ── Danger-outline button (Chrome sweep, 26 May 2026) ──────────────
   Used on destructive-but-not-immediate buttons (Initiate termination,
   future "Delete company", etc.). Outline rather than solid so it
   doesn't compete with primary CTAs; red border + red text signals
   the destructive nature on hover/scan. Pairs with the existing
   .btn / .btn-sm sizing rules in styles.css. */
.btn-danger-outline {
  background: transparent;
  color: #DC2626;
  border: 1px solid #DC2626;
}
.btn-danger-outline:hover {
  background: #FEF2F2;
}

/* ── Feature-page screenshot placeholders (26 May 2026) ──────────────
   Used on the 10 /features/{slug}/ detail pages while Esther's
   screenshots land. Two variants — dark (for use on the deep-green
   hero) and light (for the white "How it works" rows). Replace each
   .screenshot-placeholder div with an <img class="feature-screenshot">
   when the real screenshot is uploaded; aspect-ratio + radius stay
   identical so the layout doesn't shift. */
.screenshot-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screenshot-placeholder--light {
  background: #F3F4F6;
  border: 1px dashed #D1D5DB;
}
.screenshot-placeholder .placeholder-inner {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
.screenshot-placeholder--light .placeholder-inner {
  color: #9CA3AF;
}
.screenshot-placeholder .placeholder-inner .placeholder-icon {
  font-size: 28px;
  display: block;
}
.screenshot-placeholder .placeholder-inner .placeholder-text {
  display: block;
  font-size: 13px;
  margin-top: 8px;
  font-style: italic;
}
.feature-screenshot {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}