/* ───────────────────────────────────────────────────────────────────────────
   FANLINE — shared design system for the multi-tenant call-center platform.
   Teal (matches the hotela-dialer brand). Every mockup links this file so the
   pages are consistent by construction. Tokens = CSS :root vars (handoff standard).
   White-label note: --fl-accent + --fl-logo are the per-tenant skin points;
   everything else is platform chrome.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* brand teal */
  --fl-teal-900:#0b3d3a; --fl-teal-800:#0c5750; --fl-teal-700:#0f766e;
  --fl-teal-600:#0d9488; --fl-teal-500:#14b8a6; --fl-teal-100:#ccfbf1; --fl-teal-50:#f0fdfa;
  --fl-accent:var(--fl-teal-600);          /* per-tenant override */
  /* neutrals */
  --fl-ink:#0f172a; --fl-ink-2:#334155; --fl-ink-3:#64748b; --fl-ink-4:#94a3b8;
  --fl-line:#e2e8f0; --fl-line-2:#eef2f6; --fl-bg:#f6f8f9; --fl-surface:#ffffff; --fl-hover:#f1f5f9;
  /* status */
  --fl-green:#16a34a; --fl-amber:#d97706; --fl-red:#dc2626; --fl-blue:#2563eb; --fl-violet:#7c3aed;
  /* type */
  --fl-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --fl-mono:"SF Mono",ui-monospace,Menlo,monospace;
  /* shape */
  --fl-r:10px; --fl-r-sm:7px; --fl-r-lg:14px;
  --fl-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --fl-shadow-lg:0 10px 30px rgba(15,23,42,.12);
  --fl-sidebar-w:236px; --fl-topbar-h:56px;
}
*{box-sizing:border-box;} html,body{margin:0;height:100%;}
body{font-family:var(--fl-font);color:var(--fl-ink);background:var(--fl-bg);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;}
a{color:var(--fl-accent);text-decoration:none;} h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;}

/* ── App shell: topbar + sidebar + main ── */
.fl-app{display:grid;grid-template-columns:var(--fl-sidebar-w) 1fr;grid-template-rows:var(--fl-topbar-h) 1fr;grid-template-areas:"brand top" "side main";height:100vh;}
.fl-topbar{grid-area:top;background:var(--fl-surface);border-bottom:1px solid var(--fl-line);display:flex;align-items:center;gap:14px;padding:0 18px;}
.fl-brand{grid-area:brand;background:var(--fl-teal-700);color:#fff;display:flex;align-items:center;gap:9px;padding:0 16px;font-weight:750;letter-spacing:.02em;}
.fl-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--fl-teal-500);box-shadow:0 0 0 3px rgba(20,184,166,.3);}
.fl-brand small{display:block;font-size:9px;font-weight:600;letter-spacing:.14em;opacity:.75;text-transform:uppercase;margin-top:1px;}
.fl-side{grid-area:side;background:var(--fl-surface);border-right:1px solid var(--fl-line);overflow-y:auto;padding:10px 8px;}
.fl-main{grid-area:main;overflow-y:auto;padding:22px 26px 60px;}

/* sidebar nav */
.fl-nav-sec{font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--fl-ink-4);padding:14px 12px 5px;}
.fl-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--fl-r-sm);color:var(--fl-ink-2);font-weight:550;font-size:13.5px;margin:1px 0;}
.fl-nav a:hover{background:var(--fl-hover);}
.fl-nav a.on{background:var(--fl-teal-50);color:var(--fl-teal-800);font-weight:650;box-shadow:inset 2px 0 0 var(--fl-accent);}
.fl-nav a .ico{width:18px;text-align:center;opacity:.85;}
.fl-nav a .n{margin-left:auto;font-size:11px;color:var(--fl-ink-4);font-variant-numeric:tabular-nums;}

/* topbar bits */
.fl-tenant{display:flex;align-items:center;gap:8px;font-weight:650;}
.fl-tenant .chip{background:var(--fl-teal-50);color:var(--fl-teal-800);border:1px solid var(--fl-teal-100);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:650;}
.fl-search{flex:0 1 360px;display:flex;align-items:center;gap:8px;background:var(--fl-bg);border:1px solid var(--fl-line);border-radius:9px;padding:7px 11px;color:var(--fl-ink-3);}
.fl-search input{border:0;background:0;outline:0;font:inherit;flex:1;color:var(--fl-ink);}
.fl-top-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.fl-avatar{width:30px;height:30px;border-radius:50%;background:var(--fl-teal-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}

/* page header */
.fl-page-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;}
.fl-page-head h1{font-size:22px;}
.fl-page-head .sub{color:var(--fl-ink-3);font-size:13px;}
.fl-page-head .spacer{flex:1;}
.fl-breadcrumb{font-size:12px;color:var(--fl-ink-4);margin-bottom:6px;}
.fl-breadcrumb a{color:var(--fl-ink-3);}

/* buttons */
.fl-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--fl-line);background:var(--fl-surface);color:var(--fl-ink);border-radius:9px;padding:8px 14px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;}
.fl-btn:hover{background:var(--fl-hover);}
.fl-btn.primary{background:var(--fl-teal-700);border-color:var(--fl-teal-700);color:#fff;}
.fl-btn.primary:hover{background:var(--fl-teal-800);}
.fl-btn.ghost{border-color:transparent;background:transparent;color:var(--fl-ink-2);}
.fl-btn.sm{padding:5px 10px;font-size:12px;}
.fl-btn.danger{color:var(--fl-red);border-color:#f3c9c9;}

/* cards / panels */
.fl-card{background:var(--fl-surface);border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);box-shadow:var(--fl-shadow);}
.fl-card-pad{padding:18px;}
.fl-card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--fl-line-2);font-weight:650;}
.fl-grid{display:grid;gap:16px;}

/* stat pills */
.fl-stats{display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;}
.fl-stat b{font-size:20px;font-weight:750;font-variant-numeric:tabular-nums;}
.fl-stat span{color:var(--fl-ink-3);font-size:12px;margin-left:5px;}
.fl-stat.good b{color:var(--fl-green);} .fl-stat.warn b{color:var(--fl-amber);} .fl-stat.bad b{color:var(--fl-red);}

/* tables */
.fl-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.fl-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fl-ink-4);padding:10px 14px;border-bottom:1px solid var(--fl-line);white-space:nowrap;}
.fl-table td{padding:12px 14px;border-bottom:1px solid var(--fl-line-2);vertical-align:middle;}
.fl-table tr:hover td{background:var(--fl-teal-50);}
.fl-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.fl-table .name{font-weight:650;color:var(--fl-ink);}

/* chips / badges / pills */
.fl-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--fl-line);background:var(--fl-surface);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;color:var(--fl-ink-2);cursor:pointer;white-space:nowrap;}
.fl-chip.on{background:var(--fl-teal-700);border-color:var(--fl-teal-700);color:#fff;}
.fl-chip .n{font-size:11px;opacity:.7;}
.fl-pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;letter-spacing:.02em;}
.fl-pill.green{background:#dcfce7;color:#15803d;} .fl-pill.amber{background:#fef3c7;color:#b45309;}
.fl-pill.red{background:#fee2e2;color:#b91c1c;} .fl-pill.blue{background:#dbeafe;color:#1d4ed8;}
.fl-pill.gray{background:#f1f5f9;color:#475569;} .fl-pill.teal{background:var(--fl-teal-100);color:var(--fl-teal-800);}
.fl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;}
.fl-dot.live{background:var(--fl-green);box-shadow:0 0 0 3px #dcfce7;}

/* faceted filter sidebar (lists/dialer style) */
.fl-facets{width:208px;flex:0 0 208px;}
.fl-facet{margin-bottom:18px;}
.fl-facet-h{display:flex;align-items:center;gap:8px;background:var(--fl-teal-700);color:#fff;border-radius:var(--fl-r-sm);padding:6px 11px;font-size:12px;font-weight:700;}
.fl-facet-h .n{margin-left:auto;background:rgba(255,255,255,.2);border-radius:6px;padding:0 7px;font-size:11px;}
.fl-facet label{display:flex;align-items:center;gap:8px;padding:5px 11px;font-size:13px;color:var(--fl-ink-2);cursor:pointer;}
.fl-facet label .c{margin-left:auto;font-size:11px;color:var(--fl-ink-4);}

/* forms */
.fl-field{margin-bottom:14px;} .fl-field label{display:block;font-size:12px;font-weight:650;color:var(--fl-ink-2);margin-bottom:5px;}
.fl-input,.fl-select{width:100%;border:1px solid var(--fl-line);border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px;background:var(--fl-surface);color:var(--fl-ink);}
.fl-input:focus,.fl-select:focus{outline:0;border-color:var(--fl-accent);box-shadow:0 0 0 3px rgba(13,148,136,.12);}
.fl-help{font-size:11.5px;color:var(--fl-ink-3);margin-top:4px;}

/* tabs */
.fl-tabs{display:flex;gap:2px;border-bottom:1px solid var(--fl-line);margin-bottom:16px;}
.fl-tabs a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--fl-ink-3);border-bottom:2px solid transparent;}
.fl-tabs a.on{color:var(--fl-teal-800);border-bottom-color:var(--fl-accent);}

/* wizard steps */
.fl-steps{display:flex;gap:8px;align-items:center;margin-bottom:20px;}
.fl-steps .s{display:flex;align-items:center;gap:8px;color:var(--fl-ink-4);font-weight:650;font-size:13px;}
.fl-steps .s .num{width:24px;height:24px;border-radius:50%;border:2px solid var(--fl-line);display:flex;align-items:center;justify-content:center;font-size:12px;}
.fl-steps .s.on{color:var(--fl-teal-800);} .fl-steps .s.on .num{border-color:var(--fl-accent);background:var(--fl-accent);color:#fff;}
.fl-steps .s.done .num{border-color:var(--fl-green);background:var(--fl-green);color:#fff;}
.fl-steps .bar{flex:1;height:2px;background:var(--fl-line);}

/* modal */
.fl-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.4);display:flex;align-items:center;justify-content:center;z-index:50;}
.fl-modal{background:var(--fl-surface);border-radius:var(--fl-r-lg);box-shadow:var(--fl-shadow-lg);width:min(560px,92vw);max-height:88vh;overflow:auto;}

/* utility */
.fl-muted{color:var(--fl-ink-3);} .fl-right{margin-left:auto;} .fl-row{display:flex;align-items:center;gap:10px;}
.fl-logo-sq{width:26px;height:26px;border-radius:7px;background:var(--fl-teal-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.fl-mock-note{position:fixed;bottom:0;left:0;right:0;background:#0f172a;color:#cbd5e1;font-size:11px;padding:5px 14px;text-align:center;letter-spacing:.02em;z-index:99;}
.fl-mock-note b{color:#5eead4;}