/* =====================================================================
   Staff dashboard (prototype). Builds on tokens from styles.css.
   Chart colours: languages use a validated categorical palette
   (blue / orange / aqua); outcomes use status colours with icon + label.
   ===================================================================== */

.dash {
  /* Brand chart palette (validated: all pairs CVD ΔE ≥ 14.7, normal-vision ΔE ≥ 15.7, ≥ 3:1 on white) */
  --s-ar: #3c64a2;      /* series 1 — Arabic (Géant blue) */
  --s-fr: #e2262f;      /* series 2 — French (Sportif red) */
  --s-en: #1f9bd1;      /* series 3 — English (sky blue) */
  /* Outcomes: green is reserved for the flag, so "answered" uses brand blue */
  --st-good: #3c64a2;
  --st-warn: #fab219;
  --st-serious: #e2262f;
  --bar: #3c64a2;
  --grid: #e9edf3;
  background: var(--bg-soft);
}
.small { font-size: 13px; }

.app { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100vh - 40px); }

/* ---------- Sidebar ---------- */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px; background: var(--navy-950); color: rgba(255, 255, 255, .78);
}
.side__brand { display: flex; align-items: center; gap: 12px; padding-inline: 6px; }
.side__mark { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); display: grid; place-items: center; flex: none; }
.side__mark .ic { width: 22px; height: 22px; color: var(--green-400); }
.side__name { display: flex; flex-direction: column; line-height: 1.25; }
.side__name strong { color: #fff; font-size: 15px; }
.side__name small { font-size: 12px; color: #fbbf24; font-weight: 600; }
.side__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .45); margin: 0 6px 8px; }
html[lang="ar"] .side__label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.tenants { display: grid; gap: 6px; }
.tenant {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; width: 100%; text-align: start;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; color: inherit;
  transition: background-color .15s, border-color .15s;
}
.tenant:hover { background: rgba(255, 255, 255, .08); }
.tenant[aria-checked="true"] { background: rgba(255, 255, 255, .12); border-color: rgba(226, 38, 47, .75); box-shadow: inset 0 0 0 1px rgba(226, 38, 47, .35); }
.tenant__logo--lgs { display: grid; place-items: center; border-radius: 10px; background: #fff; color: #3c64a2; font: 900 20px/1 Georgia, "Times New Roman", serif; position: relative; }
.tenant__logo--lgs::after { content: ""; position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e2262f; }
.tenant__logo { width: 34px; height: 34px; flex: none; }
.tenant span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tenant strong { color: #fff; font-size: 14px; }
.tenant small { font-size: 12px; color: rgba(255, 255, 255, .5); }
.side__nav { display: grid; gap: 4px; }
.side__nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: rgba(255, 255, 255, .72); font-weight: 500; font-size: 15px;
  transition: background-color .15s, color .15s;
}
.side__nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side__nav a[aria-current="page"] { background: rgba(52, 211, 153, .14); color: #fff; box-shadow: inset 3px 0 0 var(--green-400); }
html[dir="rtl"] .side__nav a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--green-400); }
.side__nav .ic { width: 20px; height: 20px; }
.count { margin-inline-start: auto; min-width: 24px; padding: 1px 8px; border-radius: 999px; font-size: 12px; text-align: center; background: rgba(255, 255, 255, .1); color: #fff; }
.count--alert { background: var(--st-serious); color: #3b1205; }
.count:empty { display: none; }
.side__foot { margin-block-start: auto; }
.side__sim { padding: 14px; border-radius: 12px; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .25); font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.side__sim .tag { margin-block-end: 8px; }

/* ---------- Main ---------- */
.main { min-width: 0; padding: 26px 30px 48px; display: flex; flex-direction: column; gap: 22px; }
.mainbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mainbar h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.mainbar p { margin-block-start: 4px; }
.mainbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: #047857; }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); animation: livepulse 2s infinite; }
.live.is-flash { background: var(--green-50); border-color: #6ee7b7; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

.view { display: flex; flex-direction: column; gap: 20px; animation: msgin .25s ease-out; }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.kpi__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.kpi__icon .ic { width: 20px; height: 20px; }
.kpi__value { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin-block: 8px 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 13px; color: var(--muted); }
.kpi--blue .kpi__icon { background: #e8f1fd; color: #1c5cab; }
.kpi--green .kpi__icon { background: #e8eef8; color: #2f5390; }
.kpi--amber .kpi__icon { background: #fff4d6; color: #8a5a00; }
.kpi--coral .kpi__icon { background: #fdecec; color: #c41d26; }

/* ---------- Panels ---------- */
.grid { display: grid; gap: 16px; }
.grid--2-1 { grid-template-columns: 1.6fr 1fr; }
.grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.panel--flush { padding: 0; overflow: hidden; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-block-end: 16px; flex-wrap: wrap; }
.panel__head h2 { font-size: 16px; font-weight: 700; }
.panel__link { font-size: 13px; font-weight: 600; color: var(--navy-700); text-decoration: none; }
.panel__link:hover { text-decoration: underline; }

/* Column chart (single series → no legend; title names it) */
.bars { position: relative; height: 240px; display: flex; align-items: stretch; gap: 14px; padding-block-start: 22px; }
.bars__grid { position: absolute; inset: 22px 0 30px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.bars__grid span { border-block-start: 1px solid var(--grid); }
.bars__grid span:last-child { border-block-start: 1px solid #cbd5e1; }
.bar { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; cursor: default; outline: none; }
.bar__plot { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar__fill { width: min(42px, 70%); background: var(--bar); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .5s cubic-bezier(.2, .8, .2, 1), filter .15s; }
.bar__val { position: absolute; font-size: 12.5px; font-weight: 700; color: var(--ink-2); transform: translateY(-4px); font-variant-numeric: tabular-nums; }
.bar__label { height: 22px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bar--today .bar__label { color: var(--ink); font-weight: 700; }
.bar:hover .bar__fill, .bar:focus-visible .bar__fill { filter: brightness(1.12); }
.bar__tip {
  position: absolute; inset-block-end: calc(100% - 8px); z-index: 5; pointer-events: none;
  background: var(--navy-950); color: #fff; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.bar:hover .bar__tip, .bar:focus-visible .bar__tip { opacity: 1; transform: none; }

/* Horizontal bars (outcomes, topics) */
.hbars { display: grid; gap: 14px; }
.hbar { display: grid; gap: 6px; }
.hbar__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.hbar__name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; min-width: 0; }
.hbar__name .ic { width: 18px; height: 18px; }
.hbar__num { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; white-space: nowrap; }
.hbar__num small { color: var(--muted); font-weight: 500; min-width: 3.2em; text-align: end; }
.hbar__track { height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.hbar__fill { height: 100%; border-radius: 4px; background: var(--bar); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.hbar--good .hbar__fill { background: var(--st-good); }
.hbar--good .ic { color: #2f5390; }
.hbar--warn .hbar__fill { background: var(--st-warn); }
.hbar--warn .ic { color: #b77900; }
.hbar--serious .hbar__fill { background: var(--st-serious); }
.hbar--serious .ic { color: #c41d26; }

/* Language composition: 100% stacked bar with 2px surface gaps + legend with values */
.stack { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; margin-block: 4px 18px; }
.stack span { height: 100%; transition: flex-grow .5s; }
.legend { display: grid; gap: 12px; }
.legend__row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.legend__sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend__name { color: var(--ink-2); font-weight: 600; }
.legend__val { margin-inline-start: auto; display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.legend__val small { color: var(--muted); font-weight: 500; min-width: 3.2em; text-align: end; }
.legend__note { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px dashed var(--line); font-size: 12.5px; color: #6d28d9; display: flex; gap: 6px; align-items: center; }

/* Recent escalations */
.esclist { display: grid; gap: 10px; }
.escitem { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: start; background: #fff; width: 100%; transition: border-color .15s, background-color .15s; }
.escitem:hover { border-color: #cbd5e1; background: var(--bg-soft); }
.escitem__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.escitem__ref { font-weight: 700; color: var(--ink); }
.escitem__q { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escitem__time { font-size: 12px; color: var(--muted); }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill .ic { width: 14px; height: 14px; }
.pill--answered { background: #e8eef8; color: #1a3466; }
.pill--fallback { background: #fff4d6; color: #7a4d00; }
.pill--escalated { background: #fdecec; color: #a3161e; }
.pill--open { background: #fdecec; color: #a3161e; }
.pill--resolved { background: #e8eef8; color: #1a3466; }
.langdot { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.langdot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, #94a3b8); }
.mini { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; margin-inline-start: 6px; vertical-align: middle; }
.mini--seed { background: var(--line-2); color: var(--muted); }
.mini--new { background: #fdecec; color: #a3161e; }
.mini--exp { background: #f3e8ff; color: #6d28d9; }

/* ---------- Filters + table ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 14px; padding: 11px 0; background: transparent; color: var(--ink); }
.search:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); }
.filters select { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); min-width: 170px; }

.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: start; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 12px 16px; background: #f8fafc; border-block-end: 1px solid var(--line); white-space: nowrap; }
html[lang="ar"] .table th { text-transform: none; letter-spacing: 0; font-size: 13px; }
.table td { padding: 13px 16px; border-block-end: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr { transition: background-color .12s; }
.table:not(.table--static) tbody tr { cursor: pointer; }
.table:not(.table--static) tbody tr:hover, .table tbody tr:focus-visible { background: #f6f9fc; outline: none; }
.table tbody tr.is-new { animation: rowflash 2.4s ease-out; }
@keyframes rowflash { 0%, 30% { background: #e8eef8; } 100% { background: transparent; } }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
.table .q { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.table .time { color: var(--muted); white-space: nowrap; font-size: 13px; }
.visitor { font-weight: 700; white-space: nowrap; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.kbtopic { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.kbtopic__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--green-50); color: #047857; display: grid; place-items: center; flex: none; }
.kbtopic__icon .ic { width: 17px; height: 17px; }
.langs { display: inline-flex; gap: 4px; }
.langs span { padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: #eef2f7; color: var(--ink-2); }

.notice { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--amber-50); border: 1px solid #fde68a; color: #78350f; font-size: 14px; }
.notice .ic { color: var(--amber-600); }

/* ---------- Escalations board ---------- */
.kanban { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.kanban__col { background: #eef2f7; border-radius: var(--radius); padding: 14px; }
.kanban__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-block-end: 12px; padding-inline: 4px; }
.kanban__title b { margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.sdot { width: 10px; height: 10px; border-radius: 50%; }
.sdot--open { background: var(--st-serious); }
.sdot--done { background: var(--st-good); }
.kanban__list { display: grid; gap: 10px; }
.esccard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; box-shadow: var(--shadow-sm); }
.esccard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.esccard__ref { font-weight: 800; }
.esccard__q { font-size: 15px; color: var(--ink); font-weight: 600; }
.esccard dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.esccard dt { color: var(--muted); }
.esccard dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.esccard__note { font-size: 13.5px; color: var(--ink-2); background: var(--bg-soft); border-radius: 8px; padding: 8px 10px; }
.esccard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.esccard__actions .btn { padding: 6px 12px; font-size: 13px; }

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(7, 21, 40, .38); z-index: 80; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 90;
  width: min(520px, 100vw); background: #fff; display: flex; flex-direction: column;
  box-shadow: -20px 0 50px rgba(7, 21, 40, .2); animation: slidein .28s cubic-bezier(.2, .9, .3, 1);
}
html[dir="rtl"] .drawer { box-shadow: 20px 0 50px rgba(7, 21, 40, .2); animation-name: slidein-rtl; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
@keyframes slidein-rtl { from { transform: translateX(-40px); opacity: 0; } }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 16px; border-block-end: 1px solid var(--line); }
.drawer__head h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iconbtn--dark { color: var(--muted); }
.iconbtn--dark:hover { background: var(--bg-soft); color: var(--ink); }
.drawer__body { flex: 1; overflow-y: auto; padding: 18px 22px 30px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-soft); }
.drawer__esc { background: #fff; border: 1px solid #fed7aa; border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.drawer__esc.is-resolved { border-color: #bbf7d0; }
.transcript { display: flex; flex-direction: column; gap: 10px; }
.transcript .msg { max-width: 92%; }
.transcript .bubble { font-size: 14px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%; z-index: 100;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 12px; background: var(--navy-950); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-lg); animation: msgin .25s ease-out;
}
html[dir="rtl"] .toast { transform: translateX(50%); }
.toast .ic { color: var(--green-400); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; }
  .side__tenant, .side__foot { display: none; }
  .side__nav { grid-auto-flow: column; overflow-x: auto; }
  .side__nav a { padding: 8px 10px; font-size: 14px; }
  .side__nav a[aria-current="page"] { box-shadow: none; }
  .main { padding: 18px 16px 40px; }
  .grid--2-1, .grid--3, .kanban { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .bars { gap: 6px; }
  .bar__label { font-size: 11px; }
}

/* ---------- Brand v2 (Le Géant Sportif): blue + red, green only in the flag ---------- */
.dash.lgs .side { background: var(--lgs-blue-900); }
.dash.lgs .side__nav a[aria-current="page"] { background: rgba(255, 255, 255, .1); box-shadow: inset 4px 0 0 var(--lgs-red); }
html[dir="rtl"] .dash.lgs .side__nav a[aria-current="page"] { box-shadow: inset -4px 0 0 var(--lgs-red); }
.dash.lgs .side__mark .ic { color: #fff; }
.dash.lgs .side__mark { background: var(--lgs-red); border-color: var(--lgs-red); border-radius: 0; border-start-end-radius: 12px; }
.dash.lgs .side__name small { color: #ffb3b6; }
/* "Live" like a sports broadcast: red */
.dash.lgs .live { color: var(--lgs-red-600); }
.dash.lgs .live__dot { background: var(--lgs-red); animation-name: livepulse-red; }
.dash.lgs .live.is-flash { background: #fdecec; border-color: #f5a3a7; }
@keyframes livepulse-red { 0% { box-shadow: 0 0 0 0 rgba(226, 38, 47, .5); } 70% { box-shadow: 0 0 0 8px rgba(226, 38, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 38, 47, 0); } }
.dash.lgs .mainbar h1 { font-family: var(--font); font-weight: 800; font-size: 30px; }
.dash.lgs .kpi__value { font-family: var(--font); font-weight: 800; }
.dash.lgs .kpi { border-radius: 0; border-end-end-radius: 16px; border-block-start: 4px solid var(--lgs-blue); }
.dash.lgs .kpi--coral { border-block-start-color: var(--lgs-red); }
.dash.lgs .panel { border-radius: 0; border-end-end-radius: 18px; }
.dash.lgs .panel__head h2 { font-family: var(--font); font-weight: 700; }
.dash.lgs .bar__fill { border-radius: 3px 3px 0 0; }
.dash.lgs .bar--today .bar__fill { background: var(--lgs-red); }
.dash.lgs .esccard { border-radius: 0; border-end-end-radius: 14px; }
.dash.lgs .count--alert { background: var(--lgs-red); color: #fff; }