/* MyVimo — habillage commun des portails pro (laboratoire, clinique/cabinet, pharmacie, admin, chauffeur).
 * Repris de la maquette du portail laboratoire : menu latéral sombre avec icônes, barre du haut,
 * bandeau de bienvenue, cartes de chiffres en couleur, cartes blanches. Menu ☰ sur téléphone.
 * Chaque portail peut changer les couleurs via les variables --shell-* (ex. l'admin en violet).
 */
:root {
  --shell-sidebar: linear-gradient(180deg, #0d1b3e 0%, #142559 100%);
  --shell-accent: #2563eb;
  --shell-accent-glow: rgba(37,99,235,0.6);
  --shell-welcome: linear-gradient(120deg, #1d4ed8 0%, #2563eb 55%, #4f46e5 100%);
}

/* -- base de la barre du haut (déjà présente dans clinique/labo/pharmacie) -- */
.topbar { display: flex; align-items: center; }
.topbar .tb-right { margin-left: auto; display: flex; align-items: center; }

/* -- base du tableau de bord (déjà présente dans clinique/labo, utile aux portails plus simples) -- */
#view-dashboard { --r: 16px; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-head h2 { margin: 0; font-size: 22px; }
.dash-date { color: #475569; font-size: 14px; font-weight: 600; text-transform: capitalize; }
.dash-kpis { display: grid; gap: 16px; margin-bottom: 20px; }
.dash-kpi { border-radius: var(--r, 16px); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.dash-kpi-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.dash-kpi-ic svg { width: 22px; height: 22px; }
.dash-kpi-val { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.dash-kpi-lbl { font-size: 13px; font-weight: 700; }

body { background: #eef1f6; }
#app { display: flex; min-height: 100vh; }
.layout { display: flex; flex: 1; min-height: 100vh; }
.content-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.sidebar {
  width: 250px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--shell-sidebar);
  border-right: none; padding: 0; color: #cbd5e1; height: 100vh; position: sticky; top: 0; overflow-y: auto;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; }
.sb-brand img { height: 30px; display: block; }
.sb-tagline { font-size: 11px; color: #93a4c9; font-weight: 600; letter-spacing: .3px; }
.sb-nav { flex: 1; padding: 6px 12px; }
.sidebar .nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 2px;
  border-left: none; border-radius: 10px; color: #b7c2de; font-weight: 600; font-size: 13.5px;
}
.sidebar .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .9; }
.sidebar .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar .nav-item.active { background: var(--shell-accent); color: #fff; border-left-color: transparent; box-shadow: 0 6px 16px -4px var(--shell-accent-glow); }
.sidebar .nav-badge { margin-left: auto; }
.sb-foot { padding: 14px 20px 18px; font-size: 11px; color: #7c8ab8; border-top: 1px solid rgba(255,255,255,0.08); }

.topbar {
  position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: none;
  border-bottom: 1px solid var(--border); padding: 14px 28px; gap: 18px;
}
.topbar .tb-headline { display: flex; flex-direction: column; }
.topbar .tb-title { color: #0f172a; font-size: 17px; font-weight: 800; opacity: 1; }
.topbar .tb-subtitle { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.tb-search { flex: 1; max-width: 420px; position: relative; }
.tb-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #94a3b8; }
.tb-search input { padding: 9px 12px 9px 36px; border-radius: 999px; background: #f4f6f8; border: 1px solid var(--border); font-size: 13px; }
.topbar .tb-right { color: inherit; gap: 14px; }
.tb-icon-btn { position: relative; width: 38px; height: 38px; border-radius: 999px; background: #f4f6f8; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: #475569; cursor: pointer; }
.tb-icon-btn:hover { background: var(--primary-light); color: var(--primary-dark); }
.tb-icon-btn svg { width: 17px; height: 17px; }
.tb-badge { position: absolute; top: -3px; right: -3px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.tb-user { display: flex; align-items: center; gap: 9px; }
.tb-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.tb-user-txt { line-height: 1.25; }
.tb-user-name { font-size: 13px; font-weight: 800; color: #0f172a; }
.tb-user-role { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.topbar .tb-logout { color: #94a3b8 !important; display: flex; }
.topbar .tb-logout:hover { color: var(--danger) !important; }
.topbar .tb-logout svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .tb-search, .tb-user-txt { display: none; } }

.main { max-width: none; background: transparent; padding: 26px 32px 60px; }

/* -- bandeau de bienvenue -- */
.dash-welcome {
  background: var(--shell-welcome);
  border-radius: 18px; padding: 26px 30px; color: #fff; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; margin-bottom: 22px; overflow: hidden; position: relative;
}
.dash-welcome h3 { margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.dash-welcome p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.88); max-width: 480px; }
.dash-welcome .dw-ic { width: 76px; height: 76px; border-radius: 20px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-welcome .dw-ic svg { width: 40px; height: 40px; color: #fff; }

/* -- KPI pleines couleurs -- */
.dash-kpis { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
.dash-kpi {
  border: none; border-left: none; color: #fff; background: linear-gradient(135deg, var(--k1), var(--k2));
  box-shadow: 0 10px 24px -10px var(--k2);
}
.dash-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -8px var(--k2); background: linear-gradient(135deg, var(--k1), var(--k2)); border-color: transparent; }
.dash-kpi .dash-kpi-ic { background: rgba(255,255,255,0.22); color: #fff; border-color: transparent; }
.dash-kpi .dash-kpi-val { color: #fff; }
.dash-kpi .dash-kpi-lbl { color: rgba(255,255,255,0.9); }
.dash-kpi.k-blue   { --k1: #3b82f6; --k2: #1d4ed8; }
.dash-kpi.k-green  { --k1: #34d399; --k2: #059669; }
.dash-kpi.k-indigo { --k1: #a78bfa; --k2: #7c3aed; }
.dash-kpi.k-teal   { --k1: #38bdf8; --k2: #0284c7; }

/* -- cartes generiques (remplacent dash-panel pour la nouvelle maquette) -- */
.dash-row-2 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
@media (max-width: 1150px) { .dash-row-2 { grid-template-columns: 1fr; } }
.dash-row-main { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .dash-row-main { grid-template-columns: 1fr; } }
.dash-col-left, .dash-col-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.panel-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.panel-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-card-head h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: #0f172a; }
.panel-card-sub { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.panel-card-link { font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; }
.panel-card-link:hover { color: var(--primary-dark); }

/* -- graphe en ligne (SVG) -- */
.linechart-wrap svg { width: 100%; height: auto; display: block; }
.linechart-lbls { display: flex; margin-top: 6px; }
.linechart-lbls span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: capitalize; }

/* -- donut (SVG) -- */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-wrap svg { flex-shrink: 0; }
.donut-center-val { font-size: 20px; font-weight: 800; fill: #0f172a; }
.donut-center-lbl { font-size: 9px; fill: var(--text-muted); font-weight: 700; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 700; color: #334155; min-width: 0; }
.donut-legend .dl-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.donut-legend .dl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .dl-pct { margin-left: auto; color: var(--text-muted); font-weight: 700; }

/* -- derniers resultats / activite -- */
.result-row, .activity-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eef1f5; }
.result-row:last-child, .activity-row:last-child { border-bottom: none; }
.result-ic, .activity-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.result-ic svg, .activity-ic svg { width: 16px; height: 16px; }
.result-main, .activity-main { flex: 1; min-width: 0; }
.result-main .n, .activity-main .n { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-main .d, .activity-main .d { font-size: 11.5px; color: var(--text-muted); }
.result-status { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; flex-shrink: 0; }

/* -- rendez-vous du jour : table -- */
table.labo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.labo-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); font-weight: 800; padding: 0 10px 10px; border-bottom: 2px solid #f1f3f6; }
table.labo-table td { padding: 10px; border-bottom: 1px solid #f1f3f6; vertical-align: middle; }
table.labo-table tr:last-child td { border-bottom: none; }
.labo-status { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; display: inline-block; }
.labo-status.ok { background: #dcfce7; color: #15803d; }
.labo-status.wait { background: #fef3c7; color: #92400e; }

/* -- actions rapides -- */
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-btn {
  display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: 12px;
  background: #f8f9fb; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: #334155; text-align: left;
}
.qa-btn:hover { background: var(--primary-light); border-color: var(--primary-border); color: var(--primary-dark); }
.qa-btn svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }

/* -- mini calendrier -- */
.mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12.5px; font-weight: 800; color: #0f172a; text-transform: capitalize; }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.mini-cal-grid .mc-wd { font-size: 10px; font-weight: 800; color: var(--text-muted); padding-bottom: 4px; }
.mini-cal-grid .mc-day { font-size: 12px; font-weight: 600; color: #334155; padding: 6px 0; border-radius: 8px; position: relative; }
.mini-cal-grid .mc-day.today { background: var(--primary); color: #fff; font-weight: 800; }
.mini-cal-grid .mc-day.has-appt::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.mini-cal-grid .mc-day.today.has-appt::after { background: #fff; }

/* -- vue placeholder (Facturation / Rapports) -- */
.labo-soon { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.labo-soon svg { width: 46px; height: 46px; color: var(--primary-border); margin-bottom: 14px; }
.labo-soon h3 { color: #0f172a; margin: 0 0 6px; }

/* -- sous-onglets (vue "Laboratoire" = Services + Postes de prelevement) -- */
.subtabs { display: flex; gap: 8px; margin-bottom: 18px; }
.subtabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 700; color: #475569; }
.subtabs button.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* -- couleurs de cartes supplémentaires (clinique : annulations, médecins…) -- */
.dash-kpi.k-amber  { --k1: #fbbf24; --k2: #d97706; }
.dash-kpi.k-rose   { --k1: #fb7185; --k2: #e11d48; }
.dash-kpi.k-violet { --k1: #c4b5fd; --k2: #7c3aed; }

/* -- menu ☰ sur téléphone / tablette -- */
.tb-menu-btn { display: none; }
.sb-overlay { display: none; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.sb-open .sidebar { transform: none; }
  body.sb-open .sb-overlay { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 99; }
  .tb-menu-btn { display: flex; }
  .topbar { padding: 12px 14px; gap: 10px; }
  .topbar .tb-subtitle { display: none; }
  .main { padding: 18px 14px 50px; }
  .dash-welcome { padding: 20px; }
  .dash-welcome .dw-ic { display: none; }
  .panel-card, .dash-panel .pbody { overflow-x: auto; }
  /* les cartes rétrécissent avec l'écran (sinon la page déborde) */
  .dash-row-2 > *, .dash-row-main > *, .dash-grid > *, .dash-col > *, .panel-card { min-width: 0; }
}
@media (max-width: 520px) {
  .dash-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topbar .tb-title { font-size: 15px; }
}

/* -- arabe (droite à gauche) : portail chauffeur, trilingue -- */
[dir="rtl"] .tb-search svg { left: auto; right: 13px; }
[dir="rtl"] .tb-search input { padding: 9px 36px 9px 12px; }
[dir="rtl"] .sidebar .nav-badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tb-badge { right: auto; left: -3px; }
@media (max-width: 900px) {
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
}