:root{--color-primary-dark:#1b4332;--color-primary:#2d6a4f;--color-primary-light:#40916c;--color-primary-subtle:#74c69d;--color-mint-light:#d8f3dc;--color-mint-surface:#effbf2;--color-bg:#f8fafc;--color-surface:#fff;--color-surface-muted:#f1f5f9;--color-surface-hover:#f8fafc;--color-text-primary:#0f172a;--color-text-secondary:#334155;--color-text-muted:#64748b;--color-text-inverted:#fff;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-subtle:#f1f5f9;--status-available-text:#166534;--status-available-bg:#dcfce7;--status-available-border:#86efac;--status-pending-text:#92400e;--status-pending-bg:#fef3c7;--status-pending-border:#fde68a;--status-reserved-text:#991b1b;--status-reserved-bg:#fee2e2;--status-reserved-border:#fca5a5;--status-closed-text:#374151;--status-closed-bg:#f3f4f6;--status-closed-border:#d1d5db;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000a;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.22s cubic-bezier(.4, 0, .2, 1);--container-max-width:1200px;--header-height:72px;--topbar-height:36px}@media (prefers-reduced-motion:reduce){:root{--transition-fast:0s;--transition-normal:0s}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;line-height:1.6}body{min-height:100vh;color:var(--color-text-primary);background-color:var(--color-bg);flex-direction:column;display:flex}.skip-to-content{top:-9999px;left:var(--space-4);background:var(--color-primary-dark);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:9999;font-size:.875rem;font-weight:600;text-decoration:none;position:absolute}.skip-to-content:focus{top:var(--space-4)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}h1,h2,h3,h4,h5,h6{color:var(--color-primary-dark);letter-spacing:-.02em;text-wrap:balance;font-weight:700;line-height:1.25}h1{font-size:clamp(2rem,4vw,2.75rem)}h2{font-size:clamp(1.5rem,3vw,2rem)}h3{font-size:clamp(1.25rem,2vw,1.5rem)}h4{font-size:1.125rem}p{color:var(--color-text-secondary);line-height:1.65}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-dark)}.container{width:100%;max-width:var(--container-max-width);padding-left:var(--space-4);padding-right:var(--space-4);margin-left:auto;margin-right:auto}@media (width>=640px){.container{padding-left:var(--space-6);padding-right:var(--space-6)}}@media (width>=1024px){.container{padding-left:var(--space-8);padding-right:var(--space-8)}}.civic-topbar{background-color:var(--color-primary-dark);color:var(--color-mint-light);border-bottom:1px solid #ffffff1a;padding:.35rem 0;font-size:.8125rem;font-weight:500}.civic-topbar-content{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.civic-topbar-left{align-items:center;gap:var(--space-2);display:flex}.ph-flag-dot{background-color:#f59e0b;border-radius:50%;width:8px;height:8px;display:inline-block;box-shadow:0 0 0 2px #f59e0b4d}.site-header{z-index:100;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm);background-color:#fff;position:sticky;top:0}.navbar-content{height:var(--header-height);justify-content:space-between;align-items:center;display:flex}.brand-logo-link{align-items:center;gap:var(--space-3);color:var(--color-primary-dark);text-decoration:none;display:flex}.brand-icon-badge{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));color:#fff;letter-spacing:-.05em;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.125rem;font-weight:800;display:flex;box-shadow:0 2px 4px #1b433233}.brand-info{flex-direction:column;display:flex}.brand-title{letter-spacing:-.02em;color:var(--color-primary-dark);font-size:1.25rem;font-weight:800;line-height:1.1}.brand-subtitle{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.nav-menu{align-items:center;gap:var(--space-1);list-style:none;display:none}@media (width>=860px){.nav-menu{display:flex}}.nav-link{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:all var(--transition-fast);cursor:pointer;background:0 0;border:none;align-items:center;font-size:.9375rem;font-weight:500;display:inline-flex}.nav-link:hover{color:var(--color-primary);background-color:var(--color-surface-muted)}.nav-link.active{color:var(--color-primary-dark);background-color:var(--color-mint-light);font-weight:600}.nav-actions{align-items:center;gap:var(--space-3);display:none}@media (width>=860px){.nav-actions{display:flex}}.mobile-toggle-btn{border:1px solid var(--color-border);border-radius:var(--radius-md);width:42px;height:42px;color:var(--color-text-primary);cursor:pointer;background-color:#fff;justify-content:center;align-items:center;display:inline-flex}@media (width>=860px){.mobile-toggle-btn{display:none}}.mobile-menu-drawer{gap:var(--space-2);padding:var(--space-4) var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);background-color:#fff;flex-direction:column;display:flex}@media (width>=860px){.mobile-menu-drawer{display:none}}.mobile-nav-link{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-secondary);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;width:100%;font-size:1rem;font-weight:500;display:flex}.mobile-nav-link:hover,.mobile-nav-link.active{background-color:var(--color-mint-light);color:var(--color-primary-dark);font-weight:600}.main-layout-content{padding-bottom:var(--space-16);flex:1}.site-footer{background-color:var(--color-primary-dark);color:#fff;padding-top:var(--space-12);padding-bottom:var(--space-8);border-top:1px solid #ffffff1a;font-size:.9375rem}.footer-grid{gap:var(--space-8);margin-bottom:var(--space-10);grid-template-columns:1fr;display:grid}@media (width>=640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.footer-grid{grid-template-columns:2fr 1fr 1.2fr 1.4fr}}.footer-col h3,.footer-col h4{color:var(--color-mint-light);margin-bottom:var(--space-4);letter-spacing:.02em;font-size:1rem;font-weight:600}.footer-col p{color:#cbd5e1;margin-bottom:var(--space-3);font-size:.875rem;line-height:1.6}.footer-links-list{gap:var(--space-2);flex-direction:column;list-style:none;display:flex}.footer-links-list a,.footer-links-list button{color:#e2e8f0;cursor:pointer;text-align:left;transition:color var(--transition-fast);background:0 0;border:none;padding:0;font-size:.875rem}.footer-links-list a:hover,.footer-links-list button:hover{color:var(--color-mint-light);text-decoration:underline}.footer-bottom{padding-top:var(--space-6);gap:var(--space-3);color:#94a3b8;text-align:center;border-top:1px solid #ffffff1f;flex-direction:column;font-size:.8125rem;display:flex}@media (width>=768px){.footer-bottom{text-align:left;flex-direction:row;justify-content:space-between}}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;padding:.625rem 1.25rem;font-family:inherit;font-size:.9375rem;font-weight:600;line-height:1.4;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #2d6a4f26}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark);color:#fff}.btn-secondary{background-color:var(--color-mint-light);color:var(--color-primary-dark);border-color:#b7e4c7}.btn-secondary:hover:not(:disabled){background-color:#c4ecc9}.btn-outline{color:var(--color-primary-dark);border-color:var(--color-border-strong);background-color:#fff}.btn-outline:hover:not(:disabled){background-color:var(--color-surface-muted);border-color:var(--color-primary)}.btn-ghost{color:var(--color-text-secondary);background-color:#0000}.btn-ghost:hover:not(:disabled){background-color:var(--color-surface-muted);color:var(--color-primary)}.btn-danger{color:#fff;background-color:#dc2626;border-color:#dc2626}.btn-danger:hover:not(:disabled){background-color:#b91c1c;border-color:#b91c1c}.btn-spinner{vertical-align:text-bottom;border:2px solid;border-right-color:#0000;border-radius:50%;width:1em;height:1em;animation:.75s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.btn-spinner{animation-duration:2s}}.btn-sm{border-radius:var(--radius-sm);padding:.375rem .75rem;font-size:.8125rem}.btn-lg{border-radius:var(--radius-lg);padding:.875rem 1.75rem;font-size:1.0625rem}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast);overflow:hidden}.card-hoverable:hover{box-shadow:var(--shadow-md);border-color:#cbd5e1;transform:translateY(-2px)}.card-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border-subtle);background-color:#fff}.card-body{padding:var(--space-6)}.card-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border-subtle);background-color:var(--color-surface-muted)}.badge{vertical-align:middle;border-radius:var(--radius-full);text-transform:capitalize;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.375rem;padding:.25rem .625rem;font-size:.75rem;font-weight:600;line-height:1;display:inline-flex}.badge-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.badge-available,.badge-approved{background-color:var(--status-available-bg);color:var(--status-available-text);border-color:var(--status-available-border)}.badge-available .badge-dot,.badge-approved .badge-dot{background-color:var(--status-available-text)}.badge-pending{background-color:var(--status-pending-bg);color:var(--status-pending-text);border-color:var(--status-pending-border)}.badge-pending .badge-dot{background-color:var(--status-pending-text)}.badge-reserved,.badge-rejected{background-color:var(--status-reserved-bg);color:var(--status-reserved-text);border-color:var(--status-reserved-border)}.badge-reserved .badge-dot,.badge-rejected .badge-dot{background-color:var(--status-reserved-text)}.badge-closed,.badge-cancelled{background-color:var(--status-closed-bg);color:var(--status-closed-text);border-color:var(--status-closed-border)}.badge-closed .badge-dot,.badge-cancelled .badge-dot{background-color:var(--status-closed-text)}.badge-completed{color:#075985;background-color:#e0f2fe;border-color:#7dd3fc}.badge-completed .badge-dot{background-color:#075985}.badge-no_show{color:#9d174d;background-color:#fce7f3;border-color:#f9a8d4}.badge-no_show .badge-dot{background-color:#9d174d}.badge-rescheduled{color:#3730a3;background-color:#e0e7ff;border-color:#a5b4fc}.badge-rescheduled .badge-dot{background-color:#3730a3}.badge-pending_payment{color:#92400e;background-color:#fef3c7;border-color:#fcd34d}.badge-pending_payment .badge-dot{background-color:#92400e}.badge-paid{color:#065f46;background-color:#d1fae5;border-color:#6ee7b7}.badge-paid .badge-dot{background-color:#065f46}.alert{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-surface);font-size:.9375rem;display:flex}.alert-info{color:#166534;background-color:#f0fdf4;border-color:#bbf7d0}.alert-warning{color:#854d0e;background-color:#fffbeb;border-color:#fef08a}.alert-error{color:#991b1b;background-color:#fef2f2;border-color:#fecaca}.alert-success{color:#166534;background-color:#f0fdf4;border-color:#86efac}.form-group{gap:var(--space-1);margin-bottom:var(--space-4);flex-direction:column;display:flex}.form-label{color:var(--color-text-primary);align-items:center;font-size:.875rem;font-weight:600;line-height:1.4;display:inline-flex}.form-label .required{color:#dc2626;margin-left:.25rem;line-height:1}.form-hint{color:var(--color-text-muted);font-size:.8125rem}.form-error{color:#dc2626;font-size:.8125rem;font-weight:500}.input-with-action{align-items:center;display:flex;position:relative}.input-with-action .form-input{padding-right:4.5rem}.input-action-btn{color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;padding:.25rem .5rem;font-size:.75rem;font-weight:600;position:absolute;right:.5rem}.input-action-btn:hover{background-color:var(--color-surface-muted);color:var(--color-primary-dark)}.form-input,.form-select,.form-textarea{width:100%;color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);background-color:#fff;padding:.625rem .875rem;font-family:inherit;font-size:.9375rem}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2d6a4f26}.form-input[aria-invalid=true]{border-color:#dc2626}.form-textarea{resize:vertical;min-height:90px}.form-row{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (width>=640px){.form-row-2{grid-template-columns:repeat(2,1fr)}.form-row-3{grid-template-columns:repeat(3,1fr)}}.realtime-pill{vertical-align:middle;border-radius:var(--radius-full);border:1px solid var(--color-border);transition:all var(--transition-fast);align-items:center;gap:.5rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;line-height:1.4;display:inline-flex}.realtime-pill-dot{border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.realtime-pill-dot.pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite realtime-pulse}.realtime-pill-subscribed{color:#065f46;background-color:#ecfdf5;border-color:#a7f3d0}.realtime-pill-subscribed .realtime-pill-dot{background-color:#10b981}.realtime-pill-connecting{color:#92400e;background-color:#fffbeb;border-color:#fde68a}.realtime-pill-connecting .realtime-pill-dot{background-color:#f59e0b}.realtime-pill-reconnecting{color:#9a3412;background-color:#fff7ed;border-color:#fed7aa}.realtime-pill-reconnecting .realtime-pill-dot{background-color:#ea580c}.realtime-pill-offline,.realtime-pill-idle{color:#475569;background-color:#f1f5f9;border-color:#cbd5e1}.realtime-pill-offline .realtime-pill-dot,.realtime-pill-idle .realtime-pill-dot{background-color:#94a3b8}.realtime-pill-error{color:#991b1b;background-color:#fef2f2;border-color:#fecaca}.realtime-pill-error .realtime-pill-dot{background-color:#ef4444}@keyframes realtime-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion:reduce){.realtime-pill-dot.pulse{animation:none}}table{border-collapse:collapse;text-align:left;width:100%}th{color:var(--color-primary-dark);text-align:left;vertical-align:middle;font-weight:600}td{vertical-align:middle}th.text-right,td.text-right{text-align:right}th.text-center,td.text-center{text-align:center}.table-responsive{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}.official-queue-grid{gap:var(--space-6);grid-template-columns:1fr;align-items:start;display:grid}@media (width>=1024px){.official-queue-grid.has-selection{grid-template-columns:minmax(400px,1.25fr) minmax(360px,1fr)}}.empty-state{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-text-secondary)}.empty-state-icon{margin-bottom:var(--space-3);opacity:.7;font-size:2.25rem}.empty-state-title{color:var(--color-text-primary);margin-bottom:var(--space-2);font-size:1.125rem;font-weight:600}.empty-state-text{max-width:440px;margin:0 auto var(--space-4);font-size:.875rem;line-height:1.5}.loading-state{padding:var(--space-10) var(--space-4);justify-content:center;align-items:center;gap:var(--space-3);color:var(--color-text-secondary);flex-direction:column;display:flex}.loading-spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:2rem;height:2rem;animation:.8s linear infinite spin}@media (prefers-reduced-motion:reduce){.loading-spinner{animation-duration:2s}}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}