/* دليل شات — store pages (/panel/*), one look with the Chatwoot panel (docs/DESIGN-SYSTEM.md, approved 2026-11-08).
   Each block mirrors a Chatwoot 4.19.1 component (named in its comment) and only uses the tokens in cw-tokens.css: no colour values here.
   A page renders three ways: inside دليل شات (body[data-embed="chatwoot"], the usual case), the standalone panel (.shell) and Salla's
   app frame (main.simple). Dark mode follows the Chatwoot window (theme.js puts .dark on <html>); the other two stay light.
   Brand touch kept on purpose: the one sharp «speaking corner» on the primary button. No Beiruti, no dotted headings; the primary button is
   green in today's look and ink only in the calm look (data-daleel-theme="calm", docs/DESIGN-SYSTEM.md §12). */
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');font-weight:100 449;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');font-weight:450 549;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');font-weight:550 649;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');font-weight:650 900;font-display:swap}

/* —— base (Chatwoot _base.scss + typography utilities: body-main 14/21, heading-1 18/24, heading-2 16/24, heading-3 14/21) —— */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:rgb(var(--surface-1));color:rgb(var(--slate-12));font:420 14px/21px var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:rgb(var(--blue-11));text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid rgb(var(--brand));outline-offset:2px}
h1,h2,h3,h4{color:rgb(var(--slate-12));font-weight:500}
h1{font-size:18px;line-height:24px;margin:0 0 8px}
h1 .l{font-weight:inherit;color:inherit}
h2{font-size:16px;line-height:24px;margin:24px 0 12px}
h3{font-size:14px;line-height:21px;margin:0 0 4px}
p{margin:0 0 8px;line-height:1.65;color:rgb(var(--slate-11))}
b,strong{font-weight:500}
ol,ul{margin:0 0 8px;padding-inline-start:20px;line-height:1.65;color:rgb(var(--slate-11))}
li{margin-bottom:4px}
.note{font-size:14px;line-height:21px;color:rgb(var(--slate-11))}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mt-2{margin-top:8px}.mt-3{margin-top:16px}

/* —— Button (components-next/button/Button.vue): solid brand = primary; .ghost = slate; .danger = ruby. md 40px, .sm 32px, 8px radius —— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:40px;padding:0 16px;border:0;border-radius:8px;border-end-start-radius:0;outline:1px solid transparent;outline-offset:-1px;background:rgb(var(--brand));color:rgb(var(--on-brand));font:500 14px/21px var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .1s ease-out,background-color .1s ease-out,transform .1s ease-out}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.sm{height:32px;padding:0 12px;font-weight:400}
.btn.ghost{border-end-start-radius:8px;background:rgb(var(--button-color));color:rgb(var(--slate-12));outline-color:rgba(var(--border-container))}
.btn.ghost:hover{filter:none;background:rgba(var(--alpha-2))}
.dark .btn.ghost:hover{background:rgb(var(--solid-2))}
.btn.danger{border-end-start-radius:8px;background:rgb(var(--ruby-9))}
.btn.danger:hover{filter:none;background:rgb(var(--ruby-10))}
.btn[disabled],.btn.off{opacity:.5;cursor:not-allowed;pointer-events:none}
/* calm («الهوية الهادية», docs/DESIGN-SYSTEM.md §12): the ink primary button. Buttons only — links, focus, checked chips and the spinner keep the green. */
[data-daleel-theme=calm] .btn:not(.ghost):not(.danger){background:rgb(var(--daleel-primary));color:rgb(var(--daleel-on-primary));box-shadow:var(--daleel-primary-shadow)}
[data-daleel-theme=calm] .btn:not(.ghost):not(.danger):hover{filter:none;background:rgb(var(--daleel-primary-hover))}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

/* —— CardLayout: solid-2 surface, container outline, 12px radius, 20×24 padding —— */
.card{margin:0 0 16px;padding:20px 24px;border-radius:12px;background:rgb(var(--solid-2));outline:1px solid rgba(var(--border-container));outline-offset:-1px;box-shadow:var(--daleel-card-shadow)}
.card>:first-child{margin-top:0}.card>:last-child{margin-bottom:0}
.card h3{margin:0 0 4px}
/* a status card reads like Chatwoot's Banner: -3 fill, -4 edge, -11 text (slate · teal ok · amber warn · ruby bad) */
.card.state{background:rgb(var(--slate-3));outline-color:rgb(var(--slate-4));color:rgb(var(--slate-11))}
.card.state.ok{background:rgb(var(--teal-3));outline-color:rgb(var(--teal-4));color:rgb(var(--teal-11))}
.card.state.warn{background:rgb(var(--amber-3));outline-color:rgb(var(--amber-4));color:rgb(var(--amber-11))}
.card.state.bad{background:rgb(var(--ruby-3));outline-color:rgb(var(--ruby-4));color:rgb(var(--ruby-11))}
.card.state h3,.card.state p,.card.state .note,.card.state li{color:inherit}
/* key–value lines inside a card (BaseTable rhythm) */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgb(var(--border-weak))}
.row:last-child{border-bottom:0;padding-bottom:0}
.row>span:first-child{color:rgb(var(--slate-11))}

/* —— Label (components-next/label/Label.vue, compact): 24px, 6px radius, 12/16 text — status colours from the fixed dictionary —— */
.pill,.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 6px;border-radius:6px;outline:1px solid rgba(var(--label-border));outline-offset:-1px;background:rgb(var(--label-background));color:rgb(var(--slate-12));font:440 12px/16px var(--font);white-space:nowrap;vertical-align:middle}
.pill.ok{background:rgb(var(--teal-2));outline-color:rgb(var(--teal-4));color:rgb(var(--teal-11))}
.pill.warn{background:rgb(var(--amber-2));outline-color:rgb(var(--amber-4));color:rgb(var(--amber-11))}
.pill.bad{background:rgb(var(--ruby-2));outline-color:rgb(var(--ruby-4));color:rgb(var(--ruby-11))}
.pill.info{background:rgb(var(--iris-2));outline-color:rgb(var(--iris-4));color:rgb(var(--iris-11))}
.badge{background:rgb(var(--blue-2));outline-color:rgb(var(--blue-4));color:rgb(var(--blue-11))}

/* —— notices, Banner (components-next/banner/Banner.vue): 12px radius, 1px edge, -3 fill / -4 edge / -11 text —— */
.err,.banner,.dry{margin:0 0 16px;padding:8px 12px;border:1px solid;border-radius:12px;font-size:14px;line-height:21px}
.err{background:rgb(var(--ruby-3));border-color:rgb(var(--ruby-4));color:rgb(var(--ruby-11))}
.banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:rgb(var(--amber-3));border-color:rgb(var(--amber-4));color:rgb(var(--amber-11))}
.dry{background:rgb(var(--slate-3));border-style:dashed;border-color:rgb(var(--slate-6));color:rgb(var(--slate-11))}
.err .btn,.banner .btn{margin-inline-start:8px}
.testbar{position:sticky;top:0;z-index:9;padding:8px 16px;border-bottom:1px solid rgb(var(--amber-4));background:rgb(var(--amber-3));color:rgb(var(--amber-11));text-align:center;font-size:14px}
/* empty state (the empty box on Chatwoot's campaign analytics page) */
.empty{margin:0 0 16px;padding:48px 24px;border:1px solid rgb(var(--border-weak));border-radius:12px;background:rgb(var(--solid-2));text-align:center;color:rgb(var(--slate-11));font-size:14px;box-shadow:var(--daleel-card-shadow)}
.empty p{max-width:448px;margin:0 auto}
.empty .btn{margin-top:16px}

/* —— BaseTable (components-next/table): no frame, weak dividers, header heading-3 slate-12, cells body-main slate-11 —— */
table{width:100%;margin:0 0 16px;border-collapse:collapse;border-spacing:0;font-size:14px;line-height:21px}
th,td{text-align:start;vertical-align:middle;border-top:1px solid rgb(var(--border-weak))}
th{padding:16px 0;padding-inline-end:16px;color:rgb(var(--slate-12));font-weight:500}
td{padding:12px 0;padding-inline-end:16px;color:rgb(var(--slate-11))}
td b,td strong{color:rgb(var(--slate-12))}
td[colspan]{padding:80px 16px;text-align:center;font-size:16px;color:rgb(var(--slate-11))}
tr.blocked td{opacity:.6}

/* —— Input / Select / TextArea (field-base, Chatwoot _base.scss): 40px, 8px radius, black-alpha-2 fill, weak outline → slate-6 hover → brand focus —— */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea{display:block;width:100%;height:40px;margin:0;padding:8px 12px;border:0;border-radius:8px;outline:1px solid rgb(var(--border-weak));outline-offset:-1px;background-color:rgba(var(--black-alpha-2));color:rgb(var(--slate-12));font:420 14px/21px var(--font);transition:outline-color .25s ease-in-out}
input::placeholder,textarea::placeholder{color:rgb(var(--slate-10))}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{outline-color:rgb(var(--slate-6))}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:1px solid rgb(var(--brand))}
input[disabled],select[disabled],textarea[disabled]{opacity:.5;cursor:not-allowed}
textarea{height:auto;min-height:96px;resize:vertical}
select{appearance:none;padding-inline-end:32px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");background-repeat:no-repeat;background-size:9px 6px;background-position:left 12px center}
select option{background:rgb(var(--solid-2));color:rgb(var(--slate-12))}
input[type=checkbox],input[type=radio]{width:16px;height:16px;margin:0;accent-color:rgb(var(--brand))}
label{display:block;color:rgb(var(--slate-12));font-size:14px;line-height:21px;font-weight:500}
form.stack{display:grid;gap:16px}
form.stack label{display:grid;gap:4px}
form.stack label:has(input[type="checkbox"]),form.stack label:has(input[type="radio"]){grid-template-columns:auto 1fr;align-items:start;column-gap:8px;font-weight:420}
form.stack label:has(input[type="checkbox"]) input{margin-top:3px}
form.daleel-form>.btn,form.daleel-form fieldset.fields>.btn,form.card.stack>.btn{justify-self:start;width:auto}
form.daleel-form fieldset.fields{display:grid;gap:16px;margin:0;padding:20px 24px;border:0;border-radius:12px;background:rgb(var(--solid-2));outline:1px solid rgba(var(--border-container));outline-offset:-1px}
form.daleel-form legend{float:inline-start;width:100%;margin:0;padding:0;color:rgb(var(--slate-12));font:500 14px/21px var(--font)}
/* choice chips (form radios) and filter picks: Label, regular size (32px, 8px radius); the selected one is the blue (brand) label */
.chips{display:flex;flex-wrap:wrap;gap:8px}
form.stack .chips label{position:relative;display:inline-flex;width:auto;gap:0}
.chips input{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chips span,.picks a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;outline:1px solid rgba(var(--label-border));outline-offset:-1px;background:rgb(var(--label-background));color:rgb(var(--slate-12));font:420 14px/21px var(--font);text-decoration:none;cursor:pointer}
.chips input:checked+span,.picks a[aria-current=true]{background:rgb(var(--blue-2));outline-color:rgb(var(--blue-4));color:rgb(var(--blue-11))}
.chips input:focus-visible+span{outline:2px solid rgb(var(--brand));outline-offset:2px}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.picks a:hover{background:rgba(var(--alpha-2));text-decoration:none}
.picks a[aria-current=true]:hover{background:rgb(var(--blue-3))}

/* —— store home: page header (BaseSettingsHeader), metric tiles (CampaignMetricCard), grouped sync tiles —— */
.daleel-home{display:flex;flex-direction:column}
.page-head{margin:0 0 16px}
.page-head h1{display:flex;align-items:center;gap:8px;min-height:32px;margin:0 0 8px}
.page-head .lede{max-width:768px;margin:0;font-size:14px;line-height:21px;color:rgb(var(--slate-11))}
.overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 24px}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:20px;border-radius:12px;background:rgb(var(--solid-2));outline:1px solid rgba(var(--border-container));outline-offset:-1px;color:inherit;text-decoration:none}
a.stat:hover{background:rgb(var(--slate-2));text-decoration:none}
.stat-k{font-size:14px;line-height:21px;font-weight:500;color:rgb(var(--slate-11))}
.stat-n{font-size:30px;line-height:36px;font-weight:600;font-variant-numeric:tabular-nums;color:rgb(var(--slate-12))}
.stat-v{font-size:16px;line-height:24px;font-weight:500;color:rgb(var(--slate-12));overflow-wrap:anywhere}
.card .overview{margin-bottom:16px}
.card .stat{background:rgb(var(--solid-1))}
.section{margin:8px 0 0}
.section h2{margin:16px 0 12px}
.sync-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sync{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:76px;padding:16px;border-radius:12px;background:rgb(var(--solid-2));outline:1px solid rgba(var(--border-container));outline-offset:-1px;color:inherit;text-decoration:none}
a.sync:hover{background:rgb(var(--slate-2));text-decoration:none}
.sync-k{font-size:14px;line-height:21px;font-weight:500;color:rgb(var(--slate-12))}
.sync b{font-size:24px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums;color:rgb(var(--slate-12))}
.sync .note{font-size:12px;line-height:16px;color:rgb(var(--slate-11))}

/* —— catalogue pages: search (BaseSettingsHeader search, 32px), picks, row actions, people, images, paging —— */
.catalog-search{display:flex;gap:8px;align-items:center;margin:0 0 16px}
.catalog-search input[type=search]{flex:1 1 auto;min-width:0;height:32px;padding-top:0;padding-bottom:0}
.catalog-search .btn{height:32px}
form.row-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
form.row-act:last-child{margin-bottom:0}
form.row-act select,form.row-act input{width:auto;height:32px;padding-top:0;padding-bottom:0}
form.row-act input{width:4.5rem}
form.row-act .btn{height:32px;padding:0 12px}
.catalog-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.who{display:flex;align-items:center;gap:12px}
.who-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-t b{color:rgb(var(--slate-12))}
.who-t .note{display:block;font-size:12px;line-height:16px}
.thumb{width:40px;height:40px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:rgb(var(--slate-3))}
span.thumb{display:inline-block}
.product-images{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.product-images .thumb{width:72px;height:72px}
.swatch{display:inline-block;width:1em;height:1em;margin-inline-end:4px;border:1px solid rgb(var(--border-strong));border-radius:4px;vertical-align:middle}
.qrbox{display:flex;align-items:center;justify-content:center;min-height:272px;min-width:272px;width:fit-content;margin:12px auto;padding:8px;border-radius:12px;background:rgb(var(--qr-surface));outline:1px solid rgba(var(--border-container));outline-offset:-1px}
.qrbox img{image-rendering:pixelated}
/* the box is white in light AND dark (a code must scan), so its words are dark in both: without this the «نجهّز الرمز…» line took the
   dark-mode text colour of the card around it and could not be read */
.qrbox,.card.state .qrbox .note{color:rgb(var(--qr-ink))}

/* —— standalone panel (≥901px): sidebar on the RIGHT for Arabic RTL (owner, 6 Nov), styled like Chatwoot's sidebar; content fills the rest —— */
.shell{display:flex;flex-direction:row;align-items:stretch;min-height:100vh;width:100%;max-width:none;margin:0}
.sidebar{flex:0 0 260px;width:260px;background:rgb(var(--background-color));border-inline-end:1px solid rgb(var(--border-weak));align-self:stretch}
.sidebar-inner{position:sticky;top:0;max-height:100vh;overflow:auto;padding:16px 12px;display:flex;flex-direction:column;gap:16px;min-height:100vh}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand img,.topbar img{height:32px;display:block}
.sidebar .brand{flex-direction:column;align-items:flex-start;gap:12px;padding:0 4px 12px;border-bottom:1px solid rgb(var(--border-weak))}
.sidebar .brand img{height:32px;max-width:100%}
.sidebar .backbar{margin:0}
.sidebar .backbar .back{width:100%}
.sidebar .sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgb(var(--border-weak))}
.sidebar .sidebar-foot .foot{margin:0;padding:0;border:0}
.content{flex:1 1 auto;min-width:0;width:auto;max-width:none;padding:16px 24px 32px}
.backbar{margin:0 0 12px}.backbar .back{gap:6px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgb(var(--border-weak))}
.foot{margin-top:32px;padding-top:16px;border-top:1px solid rgb(var(--border-weak));font-size:12px;line-height:16px;color:rgb(var(--slate-10))}

/* section nav (SidebarGroupLeaf): 32px rows, slate-11; open item bg-n-alpha-2 + slate-12 — still class=tabs for tests */
nav.tabs{display:flex;flex-direction:column;gap:2px;margin:0}
nav.tabs a{display:flex;align-items:center;min-height:32px;padding:4px 8px;border-radius:8px;color:rgb(var(--slate-11));font-size:14px;line-height:21px;text-decoration:none}
nav.tabs a:hover{background:rgba(var(--alpha-2));text-decoration:none}
nav.tabs a[aria-current=page]{background:rgba(var(--alpha-2));color:rgb(var(--slate-12));font-weight:500}
nav.tabs .nav-group{display:flex;flex-direction:column;gap:2px;margin:0}
nav.tabs p.nav-group{margin:12px 0 4px;padding:0 8px;font-size:12px;line-height:16px;font-weight:500;color:rgb(var(--slate-10))}
nav.tabs > a:first-child + .nav-group p.nav-group,
nav.tabs .nav-group:first-child p.nav-group{margin-top:4px}
@media (max-width:900px){
  nav.tabs .nav-group{display:contents}
  nav.tabs p.nav-group{display:none}
}

/* Salla's app frame (embedded home, errors): full width of the frame, not a phone card */
main.simple{width:100%;max-width:none;margin:0;padding:32px 24px}
main.simple .topbar img{height:32px;max-width:60%}
.dash{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.dash-main>.card:first-child{margin-top:0}
.dash-side{padding:20px 24px;border-radius:12px;background:rgb(var(--solid-2));outline:1px solid rgba(var(--border-container));outline-offset:-1px}
.dash-side>h2:first-child{margin-top:0}
.dash-side .card{background:rgb(var(--solid-1))}
.dash-side .btn{display:flex;width:100%;margin-top:12px}

/* —— phone (≤900px): separate top chrome, not a squeezed desktop —— */
@media (max-width:900px){
  .shell{flex-direction:column;min-height:auto}
  .sidebar{flex:none;width:100%;border-inline-end:0;border-bottom:1px solid rgb(var(--border-weak))}
  .sidebar-inner{position:static;min-height:0;max-height:none;padding:12px 16px;gap:12px}
  .sidebar .brand{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding:0;border-bottom:0}
  .sidebar .brand img{height:28px}
  .sidebar .backbar .back{width:auto}
  .sidebar .sidebar-foot{display:none}
  nav.tabs{flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0 -16px;padding-inline:16px;scrollbar-width:thin}
  nav.tabs a{flex:0 0 auto;white-space:nowrap;outline:1px solid rgba(var(--border-container));outline-offset:-1px;background:rgb(var(--button-color))}
  nav.tabs a[aria-current=page]{background:rgb(var(--blue-2));outline-color:rgb(var(--blue-4));color:rgb(var(--blue-11))}
  .content{padding:16px 16px 32px}
  main.simple{padding:24px 16px}
  .dash{grid-template-columns:1fr;gap:16px}
  body:not([data-embed]) .overview{grid-template-columns:1fr 1fr}
  body:not([data-embed]) .row{flex-direction:column;gap:0}body:not([data-embed]) .row .pill{align-self:flex-start}
  body:not([data-embed]) table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body:not([data-embed]) .catalog-search{flex-direction:column;align-items:stretch}
  body:not([data-embed]) .catalog-search .btn{width:100%}
}

/* —— inside دليل شات (embed=1): the page is the content column of a Chatwoot settings page — same surface, a 1024px column, 24px sides.
   The back button and the path sit above the frame (DaleelPanelPage), so the column starts at the top. —— */
body[data-embed="chatwoot"]{background:rgb(var(--surface-1))}
main.content.embed{width:100%;max-width:1024px;min-height:100%;margin:0 auto;padding:0 24px 32px}
/* t962: inside دليل شات the frame is only the content column; rows and tables stay desktop until the frame itself is phone-narrow */
@media (max-width:560px){
  main.content.embed{padding:0 16px 24px}
  body[data-embed] .row{flex-direction:column;gap:0}body[data-embed] .row .pill{align-self:flex-start}
  body[data-embed] table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body[data-embed] .overview{grid-template-columns:1fr}
  body[data-embed] .catalog-search{flex-direction:column;align-items:stretch}
  body[data-embed] .catalog-search .btn{width:100%}
  body[data-embed] .who{align-items:flex-start}
}

/* —— t961 auto-open loader (embedded home, /sso/resume): spinner while Salla hands the frame to دليل شات; manual links only on the error path —— */
.opening{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:44vh;gap:12px}
.opening h1{margin:0}
.opening .note{margin:0}
.spinner{width:40px;height:40px;border-radius:50%;border:3px solid rgb(var(--blue-3));border-top-color:rgb(var(--brand));animation:daleel-spin .8s linear infinite}
.opening[data-stalled] .spinner{display:none}
@keyframes daleel-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
.fallback{max-width:560px;margin:0 auto 32px;text-align:center;visibility:hidden;animation:daleel-reveal 0s linear 9s forwards}
.fallback[data-shown]{visibility:visible;animation:none}
@keyframes daleel-reveal{to{visibility:visible}}
.fallback .actions{justify-content:center}
.banner-support{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:8px 16px;background:rgb(var(--amber-3));border-bottom:2px solid rgb(var(--amber-9));color:rgb(var(--amber-12));font-size:14px}

/* —— kit (docs/DESIGN-SYSTEM.md §12, redesign plan §5): the server twin of the Chatwoot app's kit. src/ui/chart-svg.js writes the HTML.
   Works on /admin too: no script, no inline style — every size is an SVG attribute and every colour a token below.
   Chart colours are --daleel-chart-* (the same in today's look and the calm look); a state is never shown by colour alone. —— */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.chart{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0 0 16px}
.chart-scroll{overflow-x:auto;scrollbar-width:thin}
.chart-svg{display:block}
.chart-svg text{font:400 11px/1 var(--font);font-variant-numeric:tabular-nums;fill:rgb(var(--slate-10))}
.chart-grid line{stroke:rgb(var(--border-weak));stroke-width:1}
.chart-hit{fill:transparent}
.chart-col:hover .chart-hit{fill:rgba(var(--alpha-2))}
.chart-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-bar.s1,.chart-dot.s1,.chart-legend i.s1{fill:rgb(var(--daleel-chart-1));background:rgb(var(--daleel-chart-1))}
.chart-bar.s2,.chart-dot.s2,.chart-legend i.s2{fill:rgb(var(--daleel-chart-2));background:rgb(var(--daleel-chart-2))}
.chart-bar.s3,.chart-dot.s3,.chart-legend i.s3{fill:rgb(var(--daleel-chart-3));background:rgb(var(--daleel-chart-3))}
.chart-bar.s-neutral,.chart-dot.s-neutral,.chart-legend i.s-neutral{fill:rgb(var(--daleel-chart-neutral));background:rgb(var(--daleel-chart-neutral))}
.chart-bar.s-good,.chart-dot.s-good,.chart-legend i.s-good{fill:rgb(var(--daleel-chart-good));background:rgb(var(--daleel-chart-good))}
.chart-bar.s-warning,.chart-dot.s-warning,.chart-legend i.s-warning{fill:rgb(var(--daleel-chart-warning));background:rgb(var(--daleel-chart-warning))}
.chart-bar.s-serious,.chart-dot.s-serious,.chart-legend i.s-serious{fill:rgb(var(--daleel-chart-serious));background:rgb(var(--daleel-chart-serious))}
.chart-bar.s-critical,.chart-dot.s-critical,.chart-legend i.s-critical{fill:rgb(var(--daleel-chart-critical));background:rgb(var(--daleel-chart-critical))}
.chart-line.s1{stroke:rgb(var(--daleel-chart-1))}.chart-line.s2{stroke:rgb(var(--daleel-chart-2))}.chart-line.s3{stroke:rgb(var(--daleel-chart-3))}
.chart-line.s-neutral{stroke:rgb(var(--daleel-chart-neutral))}.chart-line.s-good{stroke:rgb(var(--daleel-chart-good))}.chart-line.s-warning{stroke:rgb(var(--daleel-chart-warning))}
.chart-line.s-serious{stroke:rgb(var(--daleel-chart-serious))}.chart-line.s-critical{stroke:rgb(var(--daleel-chart-critical))}
.chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;font-size:14px;line-height:21px;color:rgb(var(--slate-11))}
.chart-legend li{display:flex;align-items:center;gap:6px}
.chart-legend i{display:block;width:12px;height:12px;border-radius:2px}
.chart-table summary{display:inline-block;cursor:pointer;font-size:14px;line-height:21px;color:rgb(var(--blue-11))}
.chart-table summary:hover{text-decoration:underline}
.chart-table .tablewrap{overflow-x:auto;margin-top:8px}
.chart-table table{margin:0}
.chart-table th,.chart-table td{padding:8px 0;padding-inline-end:16px;font-variant-numeric:tabular-nums}
.bar-svg{display:block;width:100%;border-radius:999px;overflow:hidden}
.bar-track{fill:rgba(var(--alpha-2))}
.bar-fill{fill:rgb(var(--brand))}
.bar-fill.o1{fill:rgb(var(--daleel-chart-ordinal-1))}.bar-fill.o2{fill:rgb(var(--daleel-chart-ordinal-2))}.bar-fill.o3{fill:rgb(var(--daleel-chart-ordinal-3))}.bar-fill.o4{fill:rgb(var(--daleel-chart-ordinal-4))}
.meter{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0 0 16px}
.meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;line-height:21px}
.meter-k{color:rgb(var(--slate-11))}
.meter-n{font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--slate-12))}
.meter .note{margin:0}
.meter.warn .bar-fill{fill:rgb(var(--amber-9))}
.meter.bad .bar-fill{fill:rgb(var(--ruby-9))}
.meter.good .bar-fill{fill:rgb(var(--teal-9))}
.meter.neutral .bar-fill{fill:rgb(var(--daleel-chart-neutral))}
.split{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0 0 16px}
.split-key{gap:8px 24px}
.split-k{color:rgb(var(--slate-11))}
.split-n{font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--slate-12))}
.split-s{font-variant-numeric:tabular-nums;color:rgb(var(--slate-11))}
.funnel{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;padding:0;list-style:none}
.funnel li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;font-size:14px;line-height:21px}
.funnel-k{color:rgb(var(--slate-12))}
.funnel-n{font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--slate-12))}
.funnel-n .note{font-weight:400}
.funnel .bar-svg{grid-column:1 / -1}
.stat{box-shadow:var(--daleel-card-shadow)}
.stat-d{font-size:12px;line-height:16px;font-weight:500;color:rgb(var(--slate-11))}
.stat-d.good{color:rgb(var(--teal-11))}
.stat-d.bad{color:rgb(var(--ruby-11))}
.spark{display:block;max-width:100%}
.spark polyline{fill:none;stroke:rgb(var(--daleel-chart-1));stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tabbar{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid rgb(var(--border-weak));overflow-x:auto;scrollbar-width:thin}
.tabbar a{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;color:rgb(var(--slate-11));font-size:14px;line-height:21px;white-space:nowrap;text-decoration:none}
.tabbar a:hover{color:rgb(var(--slate-12));text-decoration:none}
.tabbar a[aria-current=page]{border-bottom-color:rgb(var(--brand));color:rgb(var(--slate-12));font-weight:500}
.tabbar-n{font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;color:rgb(var(--slate-10))}