/* Couleurs d'action et d'état communes aux modules. */
:root{
  --action-primary:#1b5fa8;
  --action-secondary:#eaf1f8;
  --status-good:#126239;
  --status-warn:#865010;
  --status-bad:#a32731;
  --status-good-bg:#e2f5e9;
  --status-warn-bg:#fff2da;
  --status-bad-bg:#fdeaea;
}
.dark-mode{
  --action-primary:#326eae;
  --action-secondary:#24384e;
  --status-good:#b4f4ce;
  --status-warn:#ffe5a8;
  --status-bad:#ffc3c3;
  --status-good-bg:#183f31;
  --status-warn-bg:#4a3720;
  --status-bad-bg:#502729;
}
@media screen{
  .btn.primary,#recordForm .dialog-actions .btn.primary,
  #recordForm .record-head-actions .btn.primary{
    background:var(--action-primary);border-color:var(--action-primary);
    color:#fff;text-shadow:none;
  }
  .btn.secondary,.dark-mode .btn.secondary{
    background:var(--action-secondary);border-color:var(--line);
    color:var(--ink);text-shadow:none;
  }
  #serverLogout{background:var(--navy);border-color:var(--navy);color:#fff}

  /* Les compteurs conservent leur couleur distincte ; le rouge signale un danger réel. */
  .global-dashboard-cards [data-metric-tone].danger-card{
    --metric-bg:#a32731;--metric-ink:#fff;
    --metric-dark-bg:#a32731;--metric-dark-ink:#fff;
  }
  .badge.green,.aw-state.online{background:var(--status-good-bg);color:var(--status-good)}
  .badge.amber{background:var(--status-warn-bg);color:var(--status-warn)}
  .badge.red{background:var(--status-bad-bg);color:var(--status-bad)}

  /* Quatre niveaux de titre constants dans les pages, panneaux et fiches. */
  .topbar .page-heading h1{font-size:24px;font-weight:650;line-height:1.25;letter-spacing:-.025em}
  #content .hero h2,#content>h2,#recordDialog .dialog-head h2,#detailDialog .dialog-head h2{
    font-size:20px;font-weight:650;line-height:1.3;letter-spacing:-.015em;
  }
  #content .panel-head h3,#content .aw-card h3,#content .settings-section h3{
    font-size:16px;font-weight:650;line-height:1.35;
  }
  #content h4,#recordDialog h4,#detailDialog h4{font-size:14px;font-weight:600;line-height:1.4}

  .topbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
  .topbar .page-heading{flex:1 1 240px;min-width:0}
  .topbar .top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;
    flex:0 1 auto;min-width:0;max-width:100%;margin-left:auto}
  .topbar .sync-group{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}
  .topbar .sync-group>span:first-child{flex:none;color:var(--muted)}
  .topbar .sync-group #serverSync{
    display:inline-flex!important;align-items:center;gap:6px;min-height:24px;
    max-width:100%;padding:3px 9px;border:1px solid var(--line);border-radius:999px;
    background:var(--pale);color:var(--muted);font-size:11px;font-weight:650;
    white-space:normal;overflow-wrap:anywhere;
  }
  .topbar .sync-group #serverSync::before{
    content:'';display:inline-block;flex:none;width:7px;height:7px;margin:0;
    border-radius:50%;background:currentColor;
  }
  .topbar .sync-group #serverSync[data-sync-state="success"]{
    background:var(--status-good-bg);border-color:var(--status-good-bg);color:var(--status-good);
  }
  .topbar .sync-group #serverSync[data-sync-state="progress"],
  .topbar .sync-group #serverSync[data-sync-state="warning"]{
    background:var(--status-warn-bg);border-color:var(--status-warn-bg);color:var(--status-warn);
  }
  .topbar .sync-group #serverSync[data-sync-state="error"]{
    background:var(--status-bad-bg);border-color:var(--status-bad-bg);color:var(--status-bad);
  }
  .topbar .top-actions .global-search{min-width:0}
  .topbar .top-actions .global-search:focus-within{
    outline:2px solid var(--action-primary);outline-offset:2px;
  }
  .topbar .top-actions :is(button,input):focus-visible{
    outline:2px solid var(--action-primary);outline-offset:2px;
  }
}
@media screen and (max-width:760px){
  .topbar .page-heading{flex-basis:100%;width:100%}
  .topbar .page-heading h1{font-size:22px}
  .topbar .top-actions{width:100%;flex:1 1 100%;justify-content:flex-start;margin-left:0}
  .topbar .top-actions .global-search{order:-2;flex:1 1 100%;max-width:100%}
  .topbar .top-actions .global-clock{order:-1}
  .topbar .top-actions > :is(#densityBtn,#themeBtn,#appHelpButton,#aboutButton,#serverLogout){flex:0 0 auto}
}