/* Flay Core Platform — Web Design System Foundation (CORE-WEB-PRODUCT-001B1)
   Plain CSS, no build step. Tokens -> semantic layer -> components.
   Source of design decisions: docs/ux/CORE-UX-FOUNDATION-001-DESIGN-SYSTEM.md */

:root{
  --p-navy-950:#07111f; --p-navy-900:#0b192a; --p-navy-800:#0f2138; --p-navy-700:#16324f; --p-navy-600:#1d3a57; --p-navy-500:#31506d;
  --p-slate-100:#f4f7fa; --p-slate-300:#c7d4e0; --p-slate-500:#a9bed2; --p-white:#ffffff;
  --p-teal-400:#5eead4; --p-teal-700:#06201d;
  --p-blue-500:#3b82f6; --p-blue-600:#2563eb;
  --p-green-500:#22c55e; --p-green-700:#14532d;
  --p-amber-500:#f59e0b; --p-amber-700:#7c4a03;
  --p-red-400:#fca5a5; --p-red-500:#ef4444; --p-red-700:#7f1d1d;
  --p-gray-400:#9ca3af;
  --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;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:20px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-sans-ar: "Segoe UI", Tahoma, "Noto Sans Arabic", var(--font-sans);
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.9375rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem;
  --focus-ring: 0 0 0 3px rgba(94,234,212,.45);
}

:root{
  --bg-canvas: var(--p-navy-950);
  --bg-surface: var(--p-navy-900);
  --bg-surface-raised: var(--p-navy-800);
  --border-default: var(--p-navy-600);
  --border-subtle: var(--p-navy-700);
  --text-primary: var(--p-white);
  --text-secondary: var(--p-slate-500);
  --text-muted: var(--p-gray-400);
  --accent-primary: var(--p-teal-400);
  --accent-primary-ink: var(--p-teal-700);
  --accent-info: var(--p-blue-500);
  --accent-success: var(--p-green-500);
  --accent-warning: var(--p-amber-500);
  --accent-danger: var(--p-red-500);
}
:root[data-theme="light"]{
  --bg-canvas: var(--p-slate-100);
  --bg-surface: var(--p-white);
  --bg-surface-raised: #eef2f6;
  --border-default: #d7e0e9;
  --border-subtle: #e6ebf1;
  --text-primary: #0b192a;
  --text-secondary: #4b5f73;
  --text-muted: #7c8ea0;
  --accent-primary-ink: #06201d;
}

*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{color-scheme:dark light}
:root[data-theme="light"] html{color-scheme:light}
body{margin:0;font-family:var(--font-sans);background:var(--bg-canvas);color:var(--text-primary);font-size:var(--fs-md);line-height:1.5}
[lang="ar"] body{font-family:var(--font-sans-ar)}
html[dir="rtl"] body{direction:rtl}
a{color:var(--accent-primary)}
h1,h2,h3{line-height:1.25;margin:0 0 var(--space-2)}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
p{margin:0 0 var(--space-3)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Shell */
.shell{min-height:100vh;display:flex;flex-direction:column}
.shell-topbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);background:var(--bg-surface);border-bottom:1px solid var(--border-default);position:sticky;top:0;z-index:20}
.shell-brand{font-weight:800;letter-spacing:.02em;color:var(--text-primary);text-decoration:none;white-space:nowrap}
.shell-org-crumb{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:var(--fs-sm);min-width:0}
.shell-org-sep{color:var(--text-muted)}
.shell-org-name{color:var(--text-primary);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-topbar-spacer{flex:1}
.nav-toggle-btn{display:none;flex-direction:column;gap:4px;padding:8px;border-radius:var(--radius-md);cursor:pointer}
.nav-toggle-btn span{display:block;width:18px;height:2px;background:var(--text-primary)}
.nav-toggle-btn:hover{background:var(--bg-surface-raised)}
.sidebar-toggle-input{position:absolute}
.sidebar-scrim{display:none}

/* Account menu */
.account-menu{position:relative}
.account-menu-trigger{list-style:none;display:flex;align-items:center;gap:var(--space-1);cursor:pointer;padding:4px;border-radius:999px}
.account-menu-trigger::-webkit-details-marker{display:none}
.account-menu-trigger:hover{background:var(--bg-surface-raised)}
.account-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent-primary);color:var(--accent-primary-ink);font-weight:800;font-size:var(--fs-sm)}
.account-menu-badge{position:absolute;inset-inline-end:0;inset-block-start:0;min-width:8px;height:8px;padding:0;border-radius:50%}
.account-menu-panel{position:absolute;inset-inline-end:0;top:calc(100% + var(--space-2));background:var(--bg-surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);min-width:200px;padding:var(--space-2);display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:30}
.account-menu-panel a,.account-menu-signout{display:block;width:100%;text-align:start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-primary);text-decoration:none;font-size:var(--fs-sm);background:transparent;border:none;font-family:inherit;cursor:pointer}
.account-menu-panel a[aria-current="page"],.account-menu-panel a:hover,.account-menu-signout:hover{background:var(--bg-surface)}
.account-menu-divider{height:1px;background:var(--border-subtle);margin:var(--space-2) 0}
.account-menu-signout{color:var(--accent-danger)}
.account-menu[open] .account-menu-trigger{background:var(--bg-surface-raised)}

/* Sidebar body layout */
.shell-body{flex:1;display:flex;align-items:stretch}
.shell-sidebar{width:230px;flex:0 0 230px;background:var(--bg-surface);border-inline-end:1px solid var(--border-default);padding:var(--space-4) var(--space-3);overflow-y:auto}
.nav-group{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--space-5)}
.nav-group-title{margin:0 0 var(--space-1);padding:0 var(--space-3);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700}
.shell-sidebar a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:var(--fs-sm)}
.shell-sidebar a[aria-current="page"]{background:var(--accent-primary);color:var(--accent-primary-ink);font-weight:700}
.shell-sidebar a:hover:not([aria-current="page"]){background:var(--bg-surface-raised);color:var(--text-primary)}
.shell-main{flex:1;min-width:0;padding:var(--space-6);width:100%}
.shell-footer{padding:var(--space-4) var(--space-5);color:var(--text-muted);font-size:var(--fs-xs);text-align:center}

@media (max-width:1023px){
  .nav-toggle-btn{display:flex}
  .shell-sidebar{position:fixed;inset-block:0;inset-inline-start:0;z-index:40;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 0 100vmax rgba(0,0,0,0)}
  html[dir="rtl"] .shell-sidebar{transform:translateX(100%);inset-inline-start:auto;inset-inline-end:0}
  .sidebar-toggle-input:checked ~ .shell-body .shell-sidebar{transform:translateX(0)}
  .sidebar-toggle-input:checked ~ .shell-body .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(3,8,16,.55);z-index:35}
}
@media (max-width:640px){.shell-main{padding:var(--space-4)}.shell-topbar{flex-wrap:wrap}}

/* Platform admin mode (CORE-PLATFORM-ADMIN-001): visually distinct so it can never be
   mistaken for a single organization's own admin screens. */
.platform-topbar{border-bottom-color:var(--accent-danger)}
.platform-mode-badge{background:var(--accent-danger);color:#fff;font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px;white-space:nowrap}

/* Cards */
.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-5)}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.card-header h2,.card-header h3{margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:10px 16px;border-radius:var(--radius-md);border:1px solid transparent;font-weight:700;font-size:var(--fs-sm);cursor:pointer;font-family:inherit;line-height:1}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent-primary);color:var(--accent-primary-ink)}
.btn-secondary{background:transparent;border-color:var(--border-default);color:var(--text-primary)}
.btn-danger{background:var(--accent-danger);color:#fff}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-sm{padding:6px 10px;font-size:var(--fs-xs)}
.btn[data-loading="true"]{position:relative;color:transparent!important}
.btn[data-loading="true"]::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:fc-spin .6s linear infinite;color:var(--text-primary)}
@keyframes fc-spin{to{transform:rotate(360deg)}}

/* Forms */
.field{display:block;margin-bottom:var(--space-4)}
.field label{display:block;margin-bottom:var(--space-1);color:var(--text-secondary);font-size:var(--fs-sm)}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-canvas);color:var(--text-primary);font-size:var(--fs-md);font-family:inherit}
.field input[aria-invalid="true"]{border-color:var(--accent-danger)}
.field-error{color:var(--p-red-400);font-size:var(--fs-xs);margin-top:var(--space-1)}
.field-hint{color:var(--text-muted);font-size:var(--fs-xs);margin-top:var(--space-1)}
.form-row{display:flex;gap:var(--space-4);flex-wrap:wrap}
.form-row .field{flex:1;min-width:200px}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--border-default);border-radius:var(--radius-lg)}
table.data-table{width:100%;border-collapse:collapse;min-width:560px}
.data-table th,.data-table td{padding:var(--space-3) var(--space-4);text-align:start;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-sm)}
.data-table th{color:var(--text-secondary);font-weight:600;background:var(--bg-surface-raised)}
.data-table th[aria-sort]{cursor:pointer;user-select:none}
.data-table tbody tr:hover{background:var(--bg-surface-raised)}
.data-table td.actions{text-align:end;white-space:nowrap}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;border:1px solid transparent}
.badge-neutral{background:var(--bg-surface-raised);color:var(--text-secondary);border-color:var(--border-default)}
.badge-success{background:rgba(34,197,94,.15);color:var(--accent-success)}
.badge-info{background:rgba(59,130,246,.15);color:var(--accent-info)}
.badge-warning{background:rgba(245,158,11,.15);color:var(--accent-warning)}
.badge-danger{background:rgba(239,68,68,.15);color:var(--accent-danger)}

/* Alerts / toasts */
.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;margin-bottom:var(--space-4);font-size:var(--fs-sm)}
.alert-info{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.4);color:var(--text-primary)}
.alert-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4)}
.alert-warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4)}
.alert-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4)}
#toast-region{position:fixed;inset-block-start:var(--space-4);inset-inline-end:var(--space-4);z-index:1000;display:flex;flex-direction:column;gap:var(--space-2);max-width:360px}
.toast{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-surface-raised);border:1px solid var(--border-default);box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:var(--fs-sm)}
.toast-success{border-color:var(--accent-success)} .toast-danger{border-color:var(--accent-danger)} .toast-warning{border-color:var(--accent-warning)}

/* Dialogs */
dialog.fc-dialog{border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:0;background:var(--bg-surface);color:var(--text-primary);max-width:520px;width:calc(100% - 48px)}
dialog.fc-dialog::backdrop{background:rgba(3,8,16,.6)}
.fc-dialog-body{padding:var(--space-6)}
.fc-dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5)}
.fc-dialog-danger-confirm{background:var(--bg-canvas);border:1px dashed var(--accent-danger);border-radius:var(--radius-md);padding:var(--space-3);margin:var(--space-4) 0}
.one-time-secret{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--fs-sm);background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-3);word-break:break-all;user-select:all}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-4);font-size:var(--fs-sm);color:var(--text-secondary)}
.pagination .pages{display:flex;gap:var(--space-1)}
.pagination button{background:transparent;border:1px solid var(--border-default);color:var(--text-primary);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;font-family:inherit}
.pagination button[aria-current="page"]{background:var(--accent-primary);color:var(--accent-primary-ink);border-color:transparent}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

/* States */
.state-row{padding:var(--space-8);text-align:center;color:var(--text-secondary)}
.state-row.is-error{color:var(--p-red-400)}
.skeleton{display:inline-block;height:14px;border-radius:4px;background:linear-gradient(90deg,var(--bg-surface-raised) 25%,var(--border-subtle) 37%,var(--bg-surface-raised) 63%);background-size:400% 100%;animation:fc-shimmer 1.4s ease infinite}
@keyframes fc-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.offline-banner{background:var(--accent-warning);color:#3a2a02;text-align:center;padding:var(--space-2);font-size:var(--fs-sm);font-weight:700}

/* Toolbar / filters */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)}
.toolbar .grow{flex:1;min-width:180px}

/* Utility */
.muted{color:var(--text-secondary)}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.cluster{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

/* FLAY-CORE-PLATFORM-FULL-AUDIT-001 item 3: small stat grid used by the Queues & Dead Letter
   and Monitoring & Alerts screens to show at-a-glance counts. */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)}
.summary-stat{background:var(--bg-surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-3)}
.summary-stat .summary-value{font-size:1.5rem;font-weight:700;display:block}
.summary-stat .summary-label{color:var(--text-secondary);font-size:.85rem}
.summary-stat.summary-warn{border-color:var(--accent-danger)}

/* FLAY-CORE-PLATFORM-FULL-AUDIT-001 item 3: Assets screen — one job can report several
   output_asset_refs, so each row's reference list renders as its own compact stack. */
.asset-ref-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono,monospace);font-size:.85rem;word-break:break-all}

/* FLAY-CORE-PLATFORM-FULL-AUDIT-001 item 3: Monitoring & Alerts screen — one row per
   deterministic threshold alert (nodes offline/degraded, dead-letter jobs, degraded workers). */
.alert-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}
.alert-item-danger{border-color:var(--accent-danger)}
.alert-item-warning{border-color:var(--accent-warning,var(--accent-danger))}

/* Auth pages (login) keep bespoke centered layout, restyled with tokens */
.auth-page{font-family:var(--font-sans);background:var(--bg-canvas);color:var(--text-primary);display:grid;place-items:center;min-height:100vh;margin:0}
.auth-card{width:min(380px,calc(100% - 48px));padding:var(--space-8);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl)}
.auth-card .field-hint{margin-top:var(--space-5)}