/* ══════════════════════════════════════════════════════════════════════
   AnalyTekEducatif — Design System v4  (Ayitek Blue Family)
   12 approved colors — strict enforcement
   ══════════════════════════════════════════════════════════════════════ */

/* ── :root — ONLY approved variables ───────────────────────────────── */
:root {
  /* Ayitek Blue shades */
  --ayitek-blue-lightest : #E6F1FB;
  --ayitek-blue-light    : #85B7EB;
  --ayitek-blue          : #1E4A7A;
  --ayitek-blue-mid      : #0D2B50;
  --ayitek-dark          : #0D2540;
  --ayitek-accent        : #2E6FB0;
  --ayitek-orange        : #F5921E;

  /* Neutrals (blue-tinted) */
  --gray-50              : #F0F4F9;
  --gray-200             : #CBD5E1;
  --gray-500             : #6B7FA0;
  --gray-700             : #2C3E58;

  /* Semantic */
  --success              : #1A6B3C;
  --warning              : #B85C00;
  --danger               : #8B1A1A;

  /* Semantic backgrounds (light tints) */
  --success-bg           : #E8F5EE;
  --warning-bg           : #FEF3E2;
  --danger-bg            : #F9EAEA;

  /* Aliases — ALWAYS use these in components */
  --color-page-bg        : var(--gray-50);
  --color-card-bg        : #FFFFFF;
  --color-surface-alt    : var(--ayitek-blue-lightest);
  --color-border         : var(--gray-200);
  --color-text           : var(--gray-700);
  --color-muted          : var(--gray-500);
  --color-primary        : var(--ayitek-blue);
  --color-accent         : var(--ayitek-accent);
  --color-dark-bg        : var(--ayitek-dark);
  --color-cta            : var(--ayitek-orange);

  /* Nav */
  --radius-nav           : 8px;
  --text-nav             : rgba(240, 244, 249, 0.72);
  --text-nav-hover       : #F0F4F9;
  --text-nav-active      : var(--gray-200);
  --accent-dim           : rgba(203, 213, 225, 0.15);
}

/* Dark mode token overrides */
.mud-theme-dark {
  --color-page-bg  : var(--ayitek-dark);
  --color-card-bg  : var(--ayitek-blue-mid);
  --color-text     : var(--gray-50);
  --color-muted    : var(--gray-500);
  --color-border   : rgba(203, 213, 225, 0.15);
  --accent-dim     : rgba(245, 146, 30, 0.12);
}

/* ── STEP 4: overflow-x fix — prevent horizontal scrollbar ─────────── */
html, body {
  overflow-x  : hidden;
  max-width   : 100vw;
  margin      : 0;
  padding     : 0;
  font-family : Arial, sans-serif;
  background  : var(--color-page-bg);
  color       : var(--color-text);
}

/* Flex children must not overflow */
.main-content,
.mud-main-content,
[class*="content-wrapper"],
[class*="page-wrapper"],
[class*="layout-wrapper"] {
  min-width   : 0;
  overflow-x  : hidden;
  max-width   : 100%;
  box-sizing  : border-box;
}

/* Sidebar */
.mud-drawer {
  flex-shrink : 0;
  overflow-x  : hidden;
}

/* Tables */
.mud-table-container {
  overflow-x  : auto;
  max-width   : 100%;
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: rgba(46, 111, 176, 0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ayitek-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR — bg: #0D2540 (Navy Dark)
   ══════════════════════════════════════════════════════════════════════ */

.sidebar-header {
  padding    : 16px 16px 8px !important;
  min-height : unset !important;
}

.sidebar-divider {
  border-color: rgba(240, 244, 249, 0.08) !important;
}

.mud-nav-link {
  color         : var(--text-nav) !important;
  font-family   : Arial, sans-serif;
  font-size     : 0.875rem;
  font-weight   : 400;
  border-radius : var(--radius-nav) !important;
  margin        : 1px 10px !important;
  padding       : 8px 12px !important;
  transition    : background 0.15s ease, color 0.15s ease;
  border-left   : none !important;
  position      : relative;
}

.mud-nav-link .mud-icon-root {
  color      : rgba(240, 244, 249, 0.45) !important;
  font-size  : 1.2rem !important;
  transition : color 0.15s ease;
}

.mud-nav-link:hover {
  background : rgba(240, 244, 249, 0.08) !important;
  color      : var(--text-nav-hover) !important;
}

.mud-nav-link:hover .mud-icon-root {
  color : rgba(240, 244, 249, 0.75) !important;
}

.mud-nav-link.active,
.mud-nav-link[class*=" active"] {
  background  : rgba(240, 244, 249, 0.12) !important;
  color       : var(--text-nav-active) !important;
  font-weight : 500;
}

.mud-nav-link.active .mud-icon-root,
.mud-nav-link[class*=" active"] .mud-icon-root {
  color : var(--text-nav-active) !important;
}

.mud-nav-link.active::before {
  content       : '';
  position      : absolute;
  left          : 0;
  top           : 20%;
  height        : 60%;
  width         : 3px;
  background    : var(--gray-200);
  border-radius : 0 3px 3px 0;
}

.mud-nav-group .mud-nav-group-toggle,
.mud-drawer .mud-nav-group-toggle {
  color             : var(--text-nav) !important;
  background-color  : transparent !important;
  font-family       : Arial, sans-serif;
  font-size         : 0.875rem;
  border-radius     : var(--radius-nav) !important;
  margin            : 1px 10px !important;
  padding           : 9px 12px !important;
  transition        : background 0.15s, color 0.15s;
  position          : relative;
}

.mud-nav-group .mud-nav-group-toggle:hover,
.mud-drawer .mud-nav-group-toggle:hover {
  background-color : rgba(240, 244, 249, 0.08) !important;
  color            : var(--text-nav-hover) !important;
}

.mud-nav-group .mud-nav-group-toggle .mud-icon-root,
.mud-drawer .mud-nav-group-toggle .mud-icon-root {
  color : rgba(240, 244, 249, 0.45) !important;
}

.mud-drawer .mud-nav-group.mud-nav-group-expanded .mud-nav-group-toggle,
.mud-drawer .mud-nav-group .mud-nav-group-toggle.active,
.mud-drawer .mud-nav-group .mud-nav-group-toggle[aria-expanded="true"] {
  background-color : rgba(240, 244, 249, 0.12) !important;
  color            : var(--text-nav-active) !important;
  font-weight      : 500;
}

.mud-drawer .mud-nav-group.mud-nav-group-expanded .mud-nav-group-toggle .mud-icon-root,
.mud-drawer .mud-nav-group .mud-nav-group-toggle.active .mud-icon-root,
.mud-drawer .mud-nav-group .mud-nav-group-toggle[aria-expanded="true"] .mud-icon-root {
  color : var(--text-nav-active) !important;
}

.mud-nav-group .mud-nav-link {
  margin-left  : 14px !important;
  margin-right : 10px !important;
  font-size    : 0.84rem;
  max-width    : calc(100% - 24px);
  overflow     : hidden;
}

.nav-admin { color : rgba(245, 146, 30, 0.90) !important; }
.nav-admin .mud-icon-root { color : rgba(245, 146, 30, 0.70) !important; }
.nav-admin:hover { background : rgba(245, 146, 30, 0.10) !important; color : var(--ayitek-orange) !important; }
.nav-admin:hover .mud-icon-root { color : var(--ayitek-orange) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   CARDS & SURFACES
   ══════════════════════════════════════════════════════════════════════ */

.mud-card,
.mud-paper {
  transition : transform 0.15s ease, box-shadow 0.18s ease;
}

.mud-card:hover {
  transform  : translateY(-1px);
  box-shadow : 0 4px 16px rgba(30, 74, 122, 0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLES  (header #1E4A7A / text #F0F4F9, hover #E6F1FB)
   ══════════════════════════════════════════════════════════════════════ */

.mud-table-head .mud-table-cell {
  background-color : var(--ayitek-blue) !important;
  color            : var(--gray-50) !important;
  font-family      : Arial, sans-serif;
  font-weight      : 700;
  font-size        : 0.78rem;
  letter-spacing   : 0.04em;
  text-transform   : uppercase;
  border-bottom    : 2px solid var(--ayitek-accent) !important;
}

.mud-table-row:hover td {
  background : var(--ayitek-blue-lightest) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

.mud-button-filled-primary   { color : var(--gray-50) !important; }
.mud-button-filled-secondary { color : var(--gray-50) !important; }

.mud-button-outlined-primary {
  border-color : var(--ayitek-blue) !important;
  color        : var(--ayitek-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   INPUTS & FORMS
   ══════════════════════════════════════════════════════════════════════ */

.mud-input-outlined .mud-input-root {
  background-color : var(--color-card-bg);
}

.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color : var(--ayitek-accent) !important;
  box-shadow   : 0 0 0 3px rgba(46, 111, 176, 0.15);
}

.mud-input-label-outlined.mud-focused {
  color : var(--ayitek-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGE / STATUS TAGS
   ══════════════════════════════════════════════════════════════════════ */

.tag-success, .tag-avec-photo {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--success-bg);
  color            : var(--success);
  border           : 1px solid var(--success);
  font-family      : Arial, sans-serif;
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-warning {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--warning-bg);
  color            : var(--warning);
  border           : 1px solid var(--warning);
  font-family      : Arial, sans-serif;
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-danger, .tag-sans-photo {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--danger-bg);
  color            : var(--danger);
  border           : 1px solid var(--danger);
  font-family      : Arial, sans-serif;
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-info {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--ayitek-blue-lightest);
  color            : var(--ayitek-blue);
  border           : 1px solid var(--ayitek-accent);
  font-family      : Arial, sans-serif;
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-neutral {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--gray-50);
  color            : var(--gray-500);
  border           : 1px solid var(--gray-200);
  font-family      : Arial, sans-serif;
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════ */

.mud-theme-dark body,
body.mud-theme-dark {
  background-color : var(--ayitek-dark);
}

/* Cards / dialogs / menus */
.mud-theme-dark .mud-popover-paper,
.mud-theme-dark .mud-dialog .mud-dialog-content,
.mud-theme-dark .mud-menu-list {
  background-color : var(--ayitek-blue-mid) !important;
}

/* Table headers in dark */
.mud-theme-dark .mud-table-head .mud-table-cell {
  background-color : var(--ayitek-dark) !important;
  color            : var(--gray-50) !important;
  border-bottom    : 2px solid rgba(46, 111, 176, 0.5) !important;
}

/* Table hover in dark */
.mud-theme-dark .mud-table-row:hover td {
  background : rgba(46, 111, 176, 0.15) !important;
}

/* Inputs in dark */
.mud-theme-dark .mud-input-outlined .mud-input-root,
.mud-theme-dark .mud-input-outlined {
  background-color : var(--ayitek-blue-mid) !important;
  border-radius    : 4px;
}

.mud-theme-dark .mud-input-root,
.mud-theme-dark .mud-input-base-input {
  color            : var(--gray-50) !important;
  background-color : transparent !important;
}

.mud-theme-dark .mud-input-base-input::placeholder {
  color : var(--gray-500) !important;
}

.mud-theme-dark .mud-input-outlined .mud-input-outlined-border {
  border-color : var(--ayitek-accent) !important;
}

.mud-theme-dark .mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color : var(--ayitek-orange) !important;
  box-shadow   : 0 0 0 3px rgba(46, 111, 176, 0.20);
}

.mud-theme-dark .mud-input-label-outlined {
  color : var(--gray-50) !important;
}

.mud-theme-dark .mud-input-label-outlined.mud-focused {
  color : var(--ayitek-orange) !important;
}

.mud-theme-dark .mud-select-input .mud-input-root,
.mud-theme-dark .mud-autocomplete .mud-input-root {
  background-color : var(--ayitek-blue-mid) !important;
}

/* Buttons in dark */
.mud-theme-dark .mud-button-outlined-primary {
  border-color : var(--ayitek-accent) !important;
  color        : var(--ayitek-accent) !important;
}

.mud-theme-dark .mud-button-outlined-secondary {
  border-color : var(--ayitek-orange) !important;
  color        : var(--ayitek-orange) !important;
}

/* MudAlert */
.mud-theme-dark .mud-alert-message { color : inherit !important; }

/* Scrollbar in dark */
.mud-theme-dark ::-webkit-scrollbar-thumb { background : rgba(46, 111, 176, 0.4); }

/* ═══════════════════════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ══════════════════════════════════════════════════════════════════════ */

#blazor-error-ui {
  background : var(--danger-bg);
  color      : var(--danger);
  bottom     : 0;
  box-shadow : 0 -2px 8px rgba(44, 62, 88, 0.15);
  display    : none;
  left       : 0;
  padding    : 0.6rem 1.25rem 0.7rem;
  position   : fixed;
  width      : 100%;
  z-index    : 1000;
  font-size  : 0.85rem;
}

#blazor-error-ui a {
  color           : var(--danger);
  font-weight     : 600;
  text-decoration : underline;
}