/* ProvideLabour v2 — Production Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --primary:#0FBF7E; --primary-dark:#0A9463; --primary-light:#E6FAF3;
  --text-dark:#0F172A; --text-gray:#64748B; --bg-light:#F8FAFC;
  --border:#E2E8F0; --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 8px 32px rgba(0,0,0,.10); --shadow-green:0 6px 20px rgba(15,191,126,.30);
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;color:var(--text-dark);-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans',sans-serif}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}

/* NAV */
.sticky-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}

/* Menu trigger button (hamburger). Loaded from the shared stylesheet
   (rather than from js/menu.js's injected <style>) so the button has
   correct dimensions on FIRST PAINT, before any module JavaScript runs.
   Otherwise the page renders the button at default browser size for one
   frame, then snaps smaller once menu.js loads — visibly shifting the
   logo + brand text next to it. Drawer-specific styles still live in
   js/menu.js where they belong. */
.pl-menu-trigger{background:transparent;border:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#64748B;cursor:pointer;transition:background 150ms;padding:0}
.pl-menu-trigger:hover{background:#F1F5F9}
.pl-menu-trigger i{font-size:1.125rem}

/* BUTTONS */
.btn-primary{background:var(--primary);color:#fff;border-radius:10px;padding:11px 22px;font-weight:700;font-size:.875rem;font-family:'Plus Jakarta Sans',sans-serif;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;text-decoration:none;line-height:1}
.btn-primary:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-green)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);border-radius:10px;padding:9px 20px;font-weight:700;font-size:.875rem;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;text-decoration:none;line-height:1}
.btn-outline:hover:not(:disabled){background:var(--primary-light);transform:translateY(-1px)}
.btn-outline:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text-gray);border-radius:8px;padding:7px 13px;font-weight:500;font-size:.875rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s;text-decoration:none;border:none}
.btn-ghost:hover{background:var(--bg-light);color:var(--text-dark)}
.btn-danger{background:#EF4444;color:#fff;border-radius:10px;padding:9px 18px;font-weight:700;font-size:.875rem;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s;text-decoration:none}
.btn-danger:hover:not(:disabled){background:#DC2626}
.btn-sm{padding:6px 13px!important;font-size:.76rem!important}

/* FORMS */
.form-label{display:block;font-size:.8rem;font-weight:700;color:var(--text-dark);margin-bottom:5px;font-family:'Plus Jakarta Sans',sans-serif}
.form-input{width:100%;padding:11px 15px;border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;color:var(--text-dark);background:#fff;transition:border .2s,box-shadow .2s;outline:none;font-family:'DM Sans',sans-serif}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,191,126,.14)}
.form-input::placeholder{color:#94A3B8}
textarea.form-input{resize:vertical;min-height:80px}
.form-select{width:100%;padding:11px 38px 11px 15px;border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;color:var(--text-dark);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;outline:none;font-family:'DM Sans',sans-serif;transition:border .2s,box-shadow .2s}
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,191,126,.14)}

/* ALERTS */
.alert-error{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;padding:11px 15px;border-radius:10px;font-size:.85rem;display:flex;align-items:center;gap:8px}
.alert-success{background:#F0FDF4;color:#14532D;border:1px solid #BBF7D0;padding:11px 15px;border-radius:10px;font-size:.85rem;display:flex;align-items:center;gap:8px}
.alert-info{background:#EFF6FF;color:#1E40AF;border:1px solid #BFDBFE;padding:11px 15px;border-radius:10px;font-size:.85rem;display:flex;align-items:center;gap:8px}

/* TOGGLE */
.toggle{position:relative;display:inline-block;width:52px;height:28px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#CBD5E1;border-radius:28px;transition:background .3s}
.toggle-slider::before{content:'';position:absolute;height:22px;width:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.toggle input:checked+.toggle-slider{background:var(--primary)}
.toggle input:checked+.toggle-slider::before{transform:translateX(24px)}
.toggle input:disabled+.toggle-slider{opacity:.5;cursor:not-allowed}

/* STATUS BADGES */
.status-pending{background:#FEF9C3;color:#92400E;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-pending_payment{background:#FEF3C7;color:#B45309;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-payment_completed{background:#DBEAFE;color:#1D4ED8;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-assigned{background:#DCFCE7;color:#14532D;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-scheduled{background:#EDE9FE;color:#5B21B6;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-upcoming{background:#E0E7FF;color:#3730A3;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-worker_on_the_way{background:#DBEAFE;color:#1E40AF;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-accepted{background:#DCFCE7;color:#14532D;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-worker_rejected{background:#FEE2E2;color:#991B1B;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-in_progress{background:#DBEAFE;color:#1E40AF;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-awaiting_confirmation{background:#FEF3C7;color:#B45309;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-completed{background:#EDE9FE;color:#5B21B6;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-cancelled{background:#FEE2E2;color:#991B1B;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-disputed{background:#FEF3C7;color:#D97706;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}
.status-expired{background:#F1F5F9;color:#64748B;padding:3px 11px;border-radius:20px;font-size:.7rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;display:inline-block}

/* BADGES */
.badge-available{background:#DCFCE7;color:#15803D;font-size:.67rem;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.04em;font-family:'Plus Jakarta Sans',sans-serif}
.badge-available::before{content:'';width:6px;height:6px;background:#16A34A;border-radius:50%;animation:pulse-dot 1.5s infinite}
.badge-skill{background:var(--primary-light);color:var(--primary-dark);font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:20px;display:inline-block;font-family:'Plus Jakarta Sans',sans-serif}
.badge-kyc-done{background:#DCFCE7;color:#14532D;font-size:.67rem;font-weight:700;padding:3px 9px;border-radius:20px;font-family:'Plus Jakarta Sans',sans-serif}
.badge-kyc-pending{background:#FEF3C7;color:#92400E;font-size:.67rem;font-weight:700;padding:3px 9px;border-radius:20px;font-family:'Plus Jakarta Sans',sans-serif}
.badge-kyc-submitted{background:#DBEAFE;color:#1D4ED8;font-size:.67rem;font-weight:700;padding:3px 9px;border-radius:20px;font-family:'Plus Jakarta Sans',sans-serif}
.badge-kyc-rejected{background:#FEE2E2;color:#991B1B;font-size:.67rem;font-weight:700;padding:3px 9px;border-radius:20px;font-family:'Plus Jakarta Sans',sans-serif}

/* TAGS / FILTER PILLS */
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--bg-light);border:1.5px solid var(--border);color:var(--text-gray);padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Plus Jakarta Sans',sans-serif}
.tag:hover,.tag.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}

/* CARDS */
.worker-card{background:#fff;border-radius:16px;border:1px solid var(--border);overflow:hidden;transition:all .3s;box-shadow:var(--shadow-sm)}
.worker-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:rgba(15,191,126,.25)}
.stat-card{background:#fff;border-radius:12px;padding:18px 20px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.modal-overlay{align-items:center;padding:20px}}
.modal-content{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:520px;padding:26px 22px;max-height:92vh;overflow-y:auto;animation:slide-up .28s ease}
@media(min-width:640px){.modal-content{border-radius:20px}}

/* UPLOAD */
.upload-box{border:2px dashed var(--border);border-radius:14px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg-light)}
.upload-box:hover{border-color:var(--primary);background:var(--primary-light)}
.upload-preview{width:100%;max-height:160px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.progress-bar-wrap{height:6px;background:#E2E8F0;border-radius:6px;overflow:hidden;margin-top:6px}
.progress-bar-fill{height:100%;background:var(--primary);border-radius:6px;transition:width .3s}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:#94A3B8;font-size:.63rem;font-weight:600;cursor:pointer;transition:color .2s;padding:4px 14px;border-radius:8px;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.02em}
.bottom-nav-item i{font-size:1.1rem}
.bottom-nav-item.active,.bottom-nav-item:hover{color:var(--primary)}

/* SIDEBAR */
.sidebar{width:240px;background:#fff;border-right:1px solid var(--border);height:100vh;position:fixed;top:0;left:0;overflow-y:auto;z-index:40;flex-shrink:0}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 15px;color:var(--text-gray);font-weight:600;font-size:.85rem;border-radius:8px;margin:2px 8px;transition:all .15s;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;width:calc(100% - 16px)}
.sidebar-item:hover,.sidebar-item.active{background:var(--primary-light);color:var(--primary-dark)}
.sidebar-item i{width:18px;text-align:center}

/* ADMIN TABLE */
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{background:var(--bg-light);padding:10px 15px;text-align:left;font-size:.69rem;font-weight:700;color:var(--text-gray);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}
.admin-table td{padding:12px 15px;border-bottom:1px solid var(--border);font-size:.85rem;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover td{background:var(--bg-light)}

/* HERO */
.hero-section{background:linear-gradient(145deg,#0B1622 0%,#0F2118 60%,#0B1E12 100%);position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;top:-20%;right:-8%;width:520px;height:520px;background:radial-gradient(circle,rgba(15,191,126,.18) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.gradient-text{background:linear-gradient(135deg,#0FBF7E 0%,#5EEAD4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* LOADING */
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;display:inline-block}
.spinner-green{border-color:rgba(15,191,126,.2);border-top-color:var(--primary)}
.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:skeleton-shimmer 1.4s ease infinite;border-radius:6px;display:block}

/* MISC */
.divider{height:1px;background:var(--border);margin:16px 0}
.rating-stars{display:inline-flex;gap:2px}
.rating-stars i{font-size:.76rem;color:#F59E0B}
.price-tag{font-size:1.1rem;font-weight:800;color:var(--primary-dark);font-family:'Plus Jakarta Sans',sans-serif}
.footer{background:#0A0F1A;color:#94A3B8}
.footer-link{color:#64748B;font-size:.82rem;display:block;margin-bottom:8px;transition:color .2s;text-decoration:none}
.footer-link:hover{color:var(--primary)}

/* CHAT */
.chat-bubble-me{background:var(--primary);color:#fff;border-radius:18px 18px 4px 18px;padding:10px 14px;max-width:80%;font-size:.875rem;align-self:flex-end;word-break:break-word}
.chat-bubble-other{background:#F1F5F9;color:var(--text-dark);border-radius:18px 18px 18px 4px;padding:10px 14px;max-width:80%;font-size:.875rem;align-self:flex-start;word-break:break-word}

/* CALL OVERLAY */
.call-overlay{position:fixed;inset:0;background:rgba(11,22,34,.96);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.call-btn{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .2s}
.call-btn-accept{background:#10B981}
.call-btn-accept:hover{background:#059669}
.call-btn-end{background:#EF4444}
.call-btn-end:hover{background:#DC2626}

/* WALLET WARNING */
.wallet-warning{background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;padding:12px 16px;border-radius:10px;font-size:.875rem;display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600}
.wallet-danger{background:#FEE2E2!important;border-color:#FECACA!important;color:#991B1B!important}

/* KYC STEPS */
.kyc-step{border:1.5px solid var(--border);border-radius:14px;padding:18px;transition:all .2s;background:#fff}
.kyc-step.done{border-color:#16A34A;background:#F0FDF4}
.kyc-step.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,191,126,.14)}

/* URGENCY STRIP */
.urgency-strip{background:linear-gradient(90deg,#DC2626,#B91C1C);color:#fff;padding:8px 20px;text-align:center;font-size:.8rem;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif}

/* TIMER */
.timer-digit{background:rgba(255,255,255,.12);border-radius:10px;padding:9px 15px;font-size:1.8rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;min-width:56px;text-align:center;line-height:1;border:1px solid rgba(255,255,255,.1)}

/* ANIMATIONS */
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
@keyframes slide-up{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes skeleton-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.animate-fade-in{animation:fade-in .45s ease both}

/* ─── Responsive layer ──────────────────────────────────────────────────
   Mobile-first refinements for ≤640px. Targets the structural issues
   identified in the launch-goal audit: <44px touch targets, dense forms,
   nav crowding, and big-table overflow on the admin page. Deliberately
   small in scope — page-level layout shifts use Tailwind's md: / lg:
   classes inline; this stylesheet only addresses cross-cutting concerns
   that would otherwise need editing dozens of places.

   Three breakpoints in this app (matching LAUNCH_GOAL.md):
     ≤640px  phone     — single-column, ≥44px tap targets, hide chrome
     641–1023px tablet — Tailwind md: kicks in (it's 768px there)
     ≥1024px desktop  — Tailwind lg: kicks in (1024px)
*/

/* ── Touch-target floor: ≥44px on every interactive control on phones ── */
@media (max-width:640px){
  .btn-primary, .btn-outline, .btn-danger{
    /* padding here brings the total height to ≥44px without changing the
       desktop look. The width is still content-based unless w-full is set. */
    padding:13px 20px;
    font-size:.9375rem;     /* slightly larger so it's actually tappable */
    min-height:44px;
  }
  .btn-ghost{ min-height:44px; padding:10px 14px; }
  .btn-sm{ min-height:36px!important; padding:8px 14px!important; }

  /* Form inputs already use 16px font (browsers won't zoom-on-focus
     anything ≥16px on iOS) — bump padding to clear 44px height too. */
  .form-input{ padding:13px 14px; font-size:1rem; min-height:48px; }

  /* The hamburger button shipped earlier — same target floor. */
  .pl-menu-trigger{ width:44px; height:44px; }

  /* Sticky nav: a touch shorter on phones so it doesn't eat 20% of the
     viewport, but the inner button still has its 44px height. */
  .sticky-nav .max-w-6xl,
  .sticky-nav .max-w-5xl{ padding-left:12px; padding-right:12px; }
}

/* ── Phone-only: hide things that are noise without enough space ─── */
@media (max-width:640px){
  /* Tag-pill rows used as filters (admin, dashboard) wrap; let them. */
  .tag{ font-size:.75rem; padding:5px 11px; }
  /* Modal: it was already fullscreen-on-mobile via the existing rule; cap
     its content height so very long modals (commission history) scroll
     inside the modal instead of the page. */
  .modal-content{ max-height:90vh; overflow-y:auto; }
}

/* ── Big-table tablet fallback (admin.html) ─────────────────────────
   The admin page has 4 wide tables. Two of them (Workers, Bookings)
   already have hidden-md:block + mobile-card alternatives shipped with
   earlier edits. The other two (Payments, Commission Lock System) still
   render as wide tables that horizontally scroll on phones. Give those a
   gentle font-size reduction so the overflow-x-auto wrapper at least
   shows more columns at a glance, and on tablets where they fit, they
   don't look cramped. */
.admin-table{ font-size:.825rem; }
@media (min-width:1024px){
  .admin-table{ font-size:.875rem; }
}

/* ── No accidental horizontal scroll on phones ─────────────────────
   Catches any rogue overflowing element across all 12 pages. Better
   than diagnosing every one — this clips at the body level. Any
   genuinely-needs-to-scroll content (maps, tables) wraps itself in
   overflow-x-auto, which still works inside an overflow-x-clipped body. */
@media (max-width:640px){
  body{ overflow-x:clip; }
}

/* ── Respect reduced motion ────────────────────────────────────────
   Required by LAUNCH_GOAL.md. Transitions remain for purposeful state
   changes (status badge color shift, modal open) but decorative ones
   (slide-up keyframes, fade-in card entrance) get suppressed. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ── Alpine x-cloak ───────────────────────────────────────────────
   Alpine does NOT ship this rule itself — without it, `x-cloak` does
   nothing. It hides an element via plain CSS the instant the browser
   parses the attribute (before any JS has run), and Alpine strips the
   attribute the moment it finishes initializing that element. This is
   what prevents a flash of content that should start hidden (modals,
   dropdowns, incoming-call banners, the offline badge) appearing
   visible for a beat before Alpine's reactivity takes over — which
   matters most on exactly the slower/lower-end devices and networks
   this app targets, where that gap is longest.
   Centralized here (rather than a per-page <style> block) since every
   page already links this stylesheet — one rule, not fifteen copies. */
[x-cloak]{ display:none!important; }

/* ── Toast notifications (js/toast.js) ─────────────────────────────
   Fixed bottom-center on phones (thumb-reachable, doesn't cover nav),
   bottom-right on wider screens (out of the way of primary content).
   Host div is created by toast.js itself — no markup needed per page. */
.toast-container{
  position:fixed; z-index:80; left:0; right:0; bottom:0;
  display:flex; flex-direction:column-reverse; align-items:center; gap:8px;
  padding:12px; pointer-events:none;
}
@media (min-width:768px){
  .toast-container{ left:auto; right:0; align-items:flex-end; padding:20px; }
}
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  max-width:420px; width:calc(100vw - 24px);
  padding:12px 14px; border-radius:12px;
  font-size:.85rem; font-weight:600; color:#fff;
  box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(12px) scale(.98);
  transition:opacity .2s ease, transform .2s ease;
}
@media (min-width:768px){ .toast{ width:auto; min-width:280px; } }
.toast-in{ opacity:1; transform:translateY(0) scale(1); }
.toast-out{ opacity:0; transform:translateY(8px) scale(.98); }
.toast-success{ background:#0F9463; }
.toast-error{ background:#DC2626; }
.toast-info{ background:#1D4ED8; }
.toast-warning{ background:#B45309; }
.toast-msg{ flex:1; min-width:0; line-height:1.35; }
.toast-retry{
  flex-shrink:0; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
  color:#fff; font-size:.78rem; font-weight:700; padding:5px 11px; border-radius:8px;
  cursor:pointer; transition:background .15s;
}
.toast-retry:hover{ background:rgba(255,255,255,.3); }
.toast-close{
  flex-shrink:0; background:none; border:none; color:rgba(255,255,255,.85);
  font-size:1.1rem; line-height:1; cursor:pointer; padding:2px 4px;
}
.toast-close:hover{ color:#fff; }
@media (max-width:640px){
  .toast-retry, .toast-close{ min-height:32px; } /* generous tap target within the compact toast */
}

/* ── Skeleton list rows (shared shape for worker/notification lists) ─
   `.skeleton` itself already existed (shimmer block); these are just
   pre-composed row layouts so new pages don't hand-roll the flex markup. */
.skeleton-row{ display:flex; gap:12px; align-items:center; padding:14px 0; }
.skeleton-row + .skeleton-row{ border-top:1px solid var(--border); }
.skeleton-avatar{ width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.skeleton-lines{ flex:1; min-width:0; }
.skeleton-lines .skeleton{ height:.7rem; margin-bottom:6px; }
.skeleton-lines .skeleton:last-child{ margin-bottom:0; width:60%; }

/* ── Service Pricing System — "Starts from" pricing + Sample Rates sheet ──
   Worker cards no longer show a hardcoded hourly price; they show a
   category-based starting price (derived live from service_pricing) and
   a "View Sample Rates →" link that opens the bottom sheet below. */
.starts-from-btn{ background:none; border:0; padding:0; cursor:pointer; text-align:right; line-height:1.15; }
.starts-from-label{ font-size:.68rem; font-weight:600; color:#94a3b8; letter-spacing:.01em; }
/* PRICE UNIT SUPPORT — the "/sq ft" that follows a "Starts from ₹4" figure.
   Deliberately lighter/smaller than .price-tag so the number stays dominant;
   renders as an empty span (zero width) for flat-priced services. */
.price-unit{ font-size:.72rem; font-weight:700; color:#64748b; letter-spacing:.01em; }
.view-rates-link{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:.75rem; font-weight:700; color:var(--primary);
  font-family:'Plus Jakarta Sans',sans-serif;
  display:inline-flex; align-items:center; gap:4px;
}
.view-rates-link:hover{ color:var(--primary-dark); text-decoration:underline; }

/* Bottom sheet (mobile-first; centers as a modal card on ≥640px) */
.rates-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.65); backdrop-filter:blur(4px);
  z-index:110; display:flex; align-items:flex-end; justify-content:center;
}
.rates-sheet{
  background:#fff; width:100%; max-width:560px;
  border-radius:22px 22px 0 0; padding:10px 0 0;
  max-height:88vh; display:flex; flex-direction:column;
  animation:slide-up .28s ease;
}
@media(min-width:640px){
  .rates-overlay{ align-items:center; padding:20px; }
  .rates-sheet{ border-radius:22px; max-height:82vh; }
}
.rates-handle{ width:42px; height:4px; border-radius:99px; background:#e2e8f0; margin:2px auto 10px; flex-shrink:0; }
.rates-body{ overflow-y:auto; padding:0 20px 8px; flex:1; min-height:120px; }
.rates-cat{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.95rem;
  color:#0f172a; margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.rate-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; }
.rate-name{ font-size:.875rem; color:#334155; min-width:0; }
.rate-price{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.85rem;
  color:var(--primary-dark); white-space:nowrap; flex-shrink:0;
}
.rate-price.rate-inspect{ color:#94a3b8; font-weight:600; font-size:.78rem; font-style:italic; }
.rates-footer{
  flex-shrink:0; margin:6px 16px 16px; padding:12px 14px;
  background:#f8fafc; border:1px solid var(--border); border-radius:14px;
  font-size:.75rem; line-height:1.5; color:#64748b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROLE PANEL — registration role header
   Used by register/customer.html and register/worker.html.

   WHY PLAIN CSS AND NOT TAILWIND UTILITIES:
   tailwind.config.js `content` scans './*.html' and './js/**' only — the
   register/ subdirectory is NOT scanned. A utility written in register/*.html
   therefore only renders if some root-level file happens to use the same class
   (this is why the old banner needed an inline font-weight: 'font-700' was
   never emitted). Everything below is authored here so it is guaranteed to
   ship regardless of what the Tailwind build finds.

   STAYS INSIDE THE EXISTING DESIGN SYSTEM:
   every colour is var(--primary) / --primary-dark / --primary-light /
   --text-dark / --text-gray / --border, the seal reuses --shadow-green, and
   the switch pill borrows .btn-outline's hover (primary-light fill + 1px lift).
   The old banner read as a notice because a flat tint + heavy coloured border
   is exactly .alert-success's language, and an alert sits directly beneath it.
   This keeps the light green register but separates itself by STRUCTURE —
   seal, label/value pair, divider, action — rather than by colour.

   The switch NAVIGATES to the other registration page (it does not preserve
   typed input), so it is deliberately styled as a secondary action rather than
   a segmented toggle, which would imply state that is not kept.
   ═══════════════════════════════════════════════════════════════════════════ */

.role-panel{
  position:relative; isolation:isolate; overflow:hidden;
  margin-bottom:24px; padding:18px 18px 14px;
  border-radius:18px;
  border:1px solid rgba(15,191,126,.20);
  background:linear-gradient(145deg,#EDFBF5 0%,#F9FEFC 58%,#FFFFFF 100%);
  box-shadow:0 6px 18px -10px rgba(15,191,126,.40), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Worksite tape texture — green hairlines at 5.5%, reads as material, not stripes. */
.role-panel::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(15,191,126,.055) 0 1px,transparent 1px 9px);
}

.role-identity{ position:relative; z-index:1; display:flex; align-items:center; gap:13px; }

/* Signature element: the issued-credential seal. Green fill + white glyph is
   the same pairing as .btn-primary, so it reads as native to the brand. */
.role-seal{
  position:relative; flex-shrink:0;
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(145deg,#34E3A6 0%,var(--primary) 52%,var(--primary-dark) 100%);
  color:#fff; font-size:1.05rem;
  box-shadow:var(--shadow-green), inset 0 1px 0 rgba(255,255,255,.4);
}
.role-seal::after{
  content:''; position:absolute; inset:-4px; border-radius:18px;
  border:1px solid rgba(15,191,126,.22);
}

.role-meta{ min-width:0; }
.role-eyebrow{
  display:block; margin-bottom:5px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.63rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-gray); line-height:1;
}
.role-name{
  display:block; margin-bottom:3px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.18rem;
  letter-spacing:-.015em; color:var(--text-dark); line-height:1.1;
}
.role-desc{ display:block; font-size:.75rem; color:var(--text-gray); line-height:1.35; }

.role-switch-row{
  position:relative; z-index:1;
  margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(15,191,126,.16);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.role-switch-hint{ font-size:.72rem; color:var(--text-gray); line-height:1.3; }
.role-switch-btn{
  flex-shrink:0; white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:99px;
  background:#fff;
  border:1.5px solid var(--border);
  color:var(--text-gray);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.72rem;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.role-switch-btn i{ font-size:.65rem; transition:transform .2s; }
.role-switch-btn:hover{
  background:var(--primary-light); border-color:var(--primary);
  color:var(--primary-dark); transform:translateY(-1px);
}
.role-switch-btn:hover i{ transform:translateX(2px); }
.role-switch-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* Narrow phones: stack the switch row so the pill never truncates. */
@media (max-width:380px){
  .role-panel{ padding:16px 15px 13px; }
  .role-name{ font-size:1.06rem; }
  .role-switch-row{ flex-direction:column; align-items:stretch; gap:9px; }
  .role-switch-btn{ justify-content:center; }
}