/* ═══════════════════════════════════════════════════════════════
   Orizon Theme — Ayitek Corp Design Tokens
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette principale */
  --orz-primary:       #F97316;
  --orz-navy:          #1E2D4E;
  --orz-secondary:     #3B82F6;
  --orz-bg:            #EFF6FF;
  --orz-surface:       #FFFFFF;
  --orz-neutral:       #F8F9FA;
  --orz-text-primary:  #1E2D4E;
  --orz-text-secondary:#64748B;
  --orz-on-dark:       #FFFFFF;

  /* Couleurs sémantiques */
  --orz-success:       #22C55E;
  --orz-warning:       #F97316;
  --orz-error:         #EF4444;
  --orz-info:          #3B82F6;
  --orz-neutral-badge: #94A3B8;

  /* Typography */
  --orz-font: 'Inter', sans-serif;

  /* Spacing */
  --orz-radius: 12px;
  --orz-radius-sm: 8px;
  --orz-shadow: 0 1px 3px rgba(30,45,78,.10), 0 1px 2px rgba(30,45,78,.06);
  --orz-shadow-md: 0 4px 6px rgba(30,45,78,.07), 0 2px 4px rgba(30,45,78,.06);
}

/* ── Global ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: var(--orz-font);
  background: var(--orz-bg);
  color: var(--orz-text-primary);
  margin: 0;
}

/* ── KPI Card ───────────────────────────────────────────────── */
.orz-kpi-card {
  background: var(--orz-surface);
  border-radius: var(--orz-radius);
  border-left: 4px solid var(--orz-primary);
  box-shadow: var(--orz-shadow);
  padding: 20px 24px;
  transition: box-shadow .2s;
}
.orz-kpi-card:hover { box-shadow: var(--orz-shadow-md); }

.orz-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--orz-navy);
  line-height: 1.2;
}

.orz-kpi-label {
  font-size: 13px;
  color: var(--orz-text-secondary);
  margin-top: 4px;
}

.orz-kpi-icon {
  color: var(--orz-primary);
  font-size: 32px;
}

/* ── Status Badges ──────────────────────────────────────────── */
.orz-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.orz-badge-libre,
.orz-badge-propre,
.orz-badge-checkin      { background: #DCFCE7; color: #166534; }
.orz-badge-occupee,
.orz-badge-sale,
.orz-badge-horssservice,
.orz-badge-annulee      { background: #FEE2E2; color: #991B1B; }
.orz-badge-attente,
.orz-badge-encours,
.orz-badge-confirmee    { background: #DBEAFE; color: #1E40AF; }
.orz-badge-checkout,
.orz-badge-terminee,
.orz-badge-payee        { background: #F3F4F6; color: #374151; }
.orz-badge-urgente      { background: #FEF9C3; color: #713F12; }
.orz-badge-maintenance  { background: #F1F5F9; color: #475569; }

/* ── Badges mode hybride (Day Use) ──────────────────────────── */
.orz-badge-dayuse          { background: #FFF7ED; color: #C2410C; }
.orz-badge-nuitee          { background: #DBEAFE; color: #1E40AF; }
.orz-badge-checkout-urgent { background: #FEF2F2; color: #991B1B; }
.orz-badge-creneau-libre   { background: #F0FDF4; color: #166534; }

/* ── Timeline hybride 24h (OrizonTimeline) ──────────────────── */
.orz-timeline               { overflow-x: auto; }
.orz-timeline-grille        { display: grid; min-width: 900px; }
.orz-timeline-entete        { font-size: 10px; color: var(--orz-text-secondary);
                              text-align: left; padding: 2px 0; border-left: 1px solid #E2E8F0; }
.orz-timeline-chambre       { font-size: 12px; font-weight: 600; color: var(--orz-navy);
                              padding: 4px 8px 4px 0; white-space: nowrap; }
.orz-timeline-piste         { position: relative; height: 30px;
                              border-bottom: 1px solid #F1F5F9; }
.orz-timeline-cellule       { position: absolute; top: 2px; bottom: 2px;
                              border-left: 1px solid #F1F5F9; cursor: pointer; }
.orz-timeline-cellule:hover { background: #F0FDF4; }
.orz-timeline-bloc          { position: absolute; top: 3px; bottom: 3px; z-index: 2;
                              border-radius: 4px; color: #FFFFFF; font-size: 10px;
                              font-weight: 600; padding: 2px 6px; overflow: hidden;
                              white-space: nowrap; text-overflow: ellipsis; cursor: default; }
.orz-timeline-bloc-nuitee   { background: #1E2D4E; }
.orz-timeline-bloc-dayuse   { background: #F97316; }
.orz-timeline-bloc-menage   { background: #94A3B8;
                              background-image: repeating-linear-gradient(45deg,
                                  rgba(255,255,255,.25) 0 4px, transparent 4px 8px); }

/* ── Grille de créneaux Day Use (OrizonCreneaux) ────────────── */
.orz-creneau-btn            { border: 1px solid #E2E8F0; border-radius: 8px;
                              padding: 6px 12px; font-size: 12px; font-weight: 600;
                              color: var(--orz-navy); background: #FFFFFF; cursor: pointer; }
.orz-creneau-btn:hover      { border-color: var(--orz-primary); }
.orz-creneau-btn.selectionne{ border: 2px solid var(--orz-primary);
                              background: #FFF7ED; color: #C2410C; }

/* ── Chamber Cards ──────────────────────────────────────────── */
.orz-room-card {
  background: var(--orz-surface);
  border-radius: var(--orz-radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: var(--orz-shadow);
  border-top: 3px solid transparent;
  transition: all .2s;
}
.orz-room-card:hover { box-shadow: var(--orz-shadow-md); transform: translateY(-1px); }
.orz-room-libre      { border-top-color: var(--orz-success); }
.orz-room-occupee    { border-top-color: var(--orz-error); }
.orz-room-horssservice { border-top-color: var(--orz-neutral-badge); }

/* ── Table Cards (Restaurant) ───────────────────────────────── */
.orz-table-card {
  background: var(--orz-surface);
  border-radius: var(--orz-radius-sm);
  padding: 14px;
  cursor: pointer;
  box-shadow: var(--orz-shadow);
  border: 2px solid transparent;
  transition: all .15s;
}
.orz-table-card.selected   { border-color: var(--orz-primary); }
.orz-table-libre           { background: #F0FDF4; }
.orz-table-occupee         { background: #FFF1F2; }
.orz-table-reservee        { background: #EFF6FF; }

/* ── Ticket (Restaurant) ────────────────────────────────────── */
.orz-ticket {
  background: var(--orz-navy);
  color: var(--orz-on-dark);
  border-radius: var(--orz-radius);
  padding: 20px;
  height: 100%;
}
.orz-ticket-total {
  font-size: 22px;
  font-weight: 700;
  color: var(--orz-primary);
}

/* ── Section Card ───────────────────────────────────────────── */
.orz-section {
  background: var(--orz-surface);
  border-radius: var(--orz-radius);
  padding: 20px 24px;
  box-shadow: var(--orz-shadow);
}

/* ── Table Header ───────────────────────────────────────────── */
.mud-table-head .mud-table-cell {
  background: var(--orz-navy) !important;
  color: var(--orz-on-dark) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ── Sidebar NavItem Active ─────────────────────────────────── */
.orz-nav-active {
  background: rgba(249,115,22,.18) !important;
  border-radius: var(--orz-radius-sm);
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .mud-drawer, .mud-appbar, .orz-no-print { display: none !important; }
  .mud-main-content { margin: 0 !important; padding: 0 !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .orz-kpi-value { font-size: 22px; }
}

/* ════════════════════════════════════════════════════
   ORIZON — Fix lisibilité inputs (cause racine)
   .mud-input définit color sur le conteneur,
   tous les inputs enfants héritent cette valeur.
   On force Navy sur .mud-input → tout se propage.
   ════════════════════════════════════════════════════ */

.mud-input {
  color: rgba(30, 45, 78, 1) !important;
}

/* Placeholder — plus clair pour le distinguer du texte saisi */
.mud-input input::placeholder,
.mud-input textarea::placeholder {
  color: rgba(148, 163, 184, 1) !important;
  opacity: 1 !important;
}

/* Fond blanc sur les inputs dans les drawers et dialogs Navy.
   DOM réel MudBlazor 6.11 : .mud-input-slot EST l'<input> lui-même,
   et la valeur d'un MudSelect est un <div display:inline> — il faut
   donc blanchir LA BOÎTE (.mud-input) et pas seulement le slot. */
.mud-drawer .mud-input.mud-input-outlined,
.mud-dialog-content .mud-input.mud-input-outlined {
  background-color: #FFFFFF !important;
  border-radius: 6px;
}
.mud-drawer .mud-input-outlined .mud-input-slot,
.mud-dialog-content .mud-input-outlined .mud-input-slot {
  background-color: #FFFFFF !important;
  border-radius: 6px !important;
}

/* Focus — bordure et label Orange Ayitek */
.mud-input-outlined.mud-focused .mud-notched-outline {
  border-color: #F97316 !important;
}
.mud-focused .mud-input-label {
  color: #F97316 !important;
}

/* ── Tiroirs de formulaire à FOND BLANC (décision QA finale) ──
   La classe orz-drawer-form est posée sur les 4 tiroirs de saisie
   (Réservations, Stocks, Caisse ×2). La sidebar reste Navy. */
.orz-drawer-form,
.orz-drawer-form.mud-drawer {
  background: #FFFFFF !important;
  color: #1E2D4E;
}

/* Labels : gris lisible au repos, Navy quand réduits sur le bord,
   orange au focus — cohérent sur fond blanc. */
.mud-drawer .mud-input-label {
  color: #64748B !important;
}
.orz-drawer-form .mud-input-label.mud-shrink {
  color: #1E2D4E !important;
}
.mud-drawer .mud-focused .mud-input-label {
  color: #F97316 !important;
}

/* Curseur Orange pour le confort visuel */
.mud-input input,
.mud-input textarea {
  caret-color: #F97316 !important;
}

/* Sur fond blanc, les sous-titres inline Navy et les boutons
   outlined par défaut sont naturellement lisibles — aucune
   surcharge de typographie n'est nécessaire dans orz-drawer-form.
   (Le bandeau de titre Navy conserve son texte blanc inline.) */