/* components.css — Bauhaus component overrides for SheetGarde v3.0 */
/* Load order: Bootstrap CDN → tokens.css → components.css → app.css  */
/* All values reference --bauhaus-* tokens from tokens.css             */

/* ================================================================
   1. BUTTONS
   Source: CONTEXT.md D-01 through D-04 / UI-SPEC.md Buttons
   ================================================================ */

.btn {
  font-family: var(--bauhaus-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-md);
  border-radius: 0;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* No box-shadow on buttons — set via CSS var for Bootstrap internals */
.btn {
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
}

.btn-primary {
  background-color: var(--bauhaus-vermillon);
  border-color: var(--bauhaus-vermillon);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--bauhaus-vermillon-dark);
  border-color: var(--bauhaus-vermillon-dark);
  color: #ffffff;
}

.btn-primary:active,
.btn-primary:active:focus {
  background-color: var(--bauhaus-vermillon-dark);
  border-color: var(--bauhaus-vermillon-dark);
  color: #ffffff;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--bauhaus-near-black);
  color: var(--bauhaus-noir);
}

.btn-secondary:hover {
  background-color: var(--bauhaus-off-white);
  border-color: var(--bauhaus-near-black);
  color: var(--bauhaus-noir);
}

.btn-outline-secondary {
  background-color: transparent;
  border: 1px solid var(--bauhaus-near-black);
  color: var(--bauhaus-noir);
}

.btn-outline-secondary:hover {
  background-color: var(--bauhaus-off-white);
  border-color: var(--bauhaus-near-black);
  color: var(--bauhaus-noir);
}

.btn-danger {
  background-color: transparent;
  border: 1px solid var(--bauhaus-vermillon-dark);
  color: var(--bauhaus-vermillon-dark);
}

.btn-danger:hover {
  background-color: var(--bauhaus-off-white);
  border-color: var(--bauhaus-vermillon-dark);
  color: var(--bauhaus-vermillon-dark);
}

.btn-outline-danger {
  background-color: transparent;
  border: 1px solid var(--bauhaus-vermillon-dark);
  color: var(--bauhaus-vermillon-dark);
}

.btn-outline-danger:hover {
  background-color: var(--bauhaus-off-white);
  border-color: var(--bauhaus-vermillon-dark);
  color: var(--bauhaus-vermillon-dark);
}

/* ================================================================
   2. BADGES
   Source: CONTEXT.md D-05, D-06 / UI-SPEC.md Badges
   ================================================================ */

.badge {
  font-family: var(--bauhaus-font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0;
  padding: 3px 6px;
}

.badge.bg-primary {
  background-color: var(--bauhaus-vermillon) !important;
  color: #ffffff;
}

.badge.bg-dark {
  background-color: var(--bauhaus-near-black) !important;
  color: #ffffff;
}

.badge.bg-success {
  background-color: var(--bs-success) !important;
  color: #ffffff;
}

.badge.bg-secondary {
  background-color: var(--bauhaus-mid-grey) !important;
  color: #ffffff;
}

/* ================================================================
   3. FORMS
   Source: CONTEXT.md D-07, D-08, D-09 / UI-SPEC.md Form Inputs
   ================================================================ */

.form-control,
.form-select {
  border: 1px solid var(--bauhaus-light-grey);
  border-radius: 0;
  background-color: var(--bauhaus-blanc);
  font-family: var(--bauhaus-font-body);
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
  transition: border-color 0.15s ease;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bauhaus-vermillon);
  box-shadow: none !important;
  outline: none;
  background-color: var(--bauhaus-blanc);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--bauhaus-vermillon-dark);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--bauhaus-off-white);
  border-color: var(--bauhaus-light-grey);
}

.form-label {
  font-family: var(--bauhaus-font-body);
  font-weight: 400;
  font-size: 0.875rem;
}

/* ================================================================
   4. CONTENT AREA LAYOUT
   Source: CONTEXT.md D-10, LAY-01 / UI-SPEC.md Spacing Scale
   Override Bootstrap p-4 (24px) with Bauhaus breathing room (32px)
   ================================================================ */

main.p-4 {
  padding: var(--space-xl) !important;
}

/* ================================================================
   5. PAGE TITLE PATTERN
   Source: CONTEXT.md D-11 / UI-SPEC.md Page Title Pattern
   Applied in Phases 30-31 to individual pages
   ================================================================ */

.page-title {
  font-family: var(--bauhaus-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--bauhaus-light-grey);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  color: var(--bauhaus-noir);
}

/* ================================================================
   6. FOCUS RING NEUTRALIZATION
   Source: UI-SPEC.md Bootstrap focus override
   Bootstrap uses !important on its focus shadow — override requires same
   ================================================================ */

.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible,
.nav-link:focus,
.nav-link:focus-visible {
  box-shadow: none !important;
  outline: none;
}

/* Vermillon focus border for buttons (D-04) */
.btn:focus,
.btn:focus-visible {
  border: 2px solid var(--bauhaus-vermillon) !important;
}

/* ================================================================
   7. TABLES
   Source: CONTEXT.md D-20, DS-10 / UI-SPEC.md Tables
   Global override — not just .table-gardes th
   ================================================================ */

.table th {
  background-color: var(--bauhaus-near-black);
  color: #ffffff;
  font-family: var(--bauhaus-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-sm) var(--space-md);
}

.table td {
  font-family: var(--bauhaus-font-body);
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--bauhaus-light-grey);
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bauhaus-off-white);
}

.month-separator td {
  border-top: 2px solid var(--bauhaus-noir);
  pointer-events: none;
  cursor: default;
}

/* ================================================================
   8. MODALS
   Source: CONTEXT.md D-15, D-16, DS-07 / UI-SPEC.md Modals
   ================================================================ */

.modal-content {
  border: 1px solid var(--bauhaus-noir);
  border-radius: 0;
  box-shadow: none;
  --bs-modal-box-shadow: none;
}

.modal-header {
  background-color: var(--bauhaus-blanc);
  border-bottom: 1px solid var(--bauhaus-light-grey);
  padding: var(--space-md) var(--space-lg);
}

.modal-title {
  font-family: var(--bauhaus-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bauhaus-noir);
  /* NO text-transform — sentence case per D-15 */
}

.modal-body {
  background-color: var(--bauhaus-blanc);
  padding: var(--space-lg);
}

.modal-footer {
  background-color: var(--bauhaus-blanc);
  border-top: 1px solid var(--bauhaus-light-grey);
  padding: var(--space-md) var(--space-lg);
}

/* ================================================================
   9. TOASTS AND ALERTS
   Source: CONTEXT.md D-17, D-18, DS-08 / UI-SPEC.md Toasts and Alerts
   app.js showToast() uses bg-success/bg-danger/bg-warning directly on .toast
   — override via !important since app.js is not modified in v3.0
   ================================================================ */

.toast {
  background-color: var(--bauhaus-blanc) !important;
  color: var(--bauhaus-noir) !important;
  border: 1px solid var(--bauhaus-light-grey) !important;
  border-left-width: 3px !important;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--bauhaus-font-body);
  font-size: 0.875rem;
}

/* Toast type variants — app.js injects these classes */
.toast.bg-success {
  background-color: var(--bauhaus-blanc) !important;
  border-left-color: var(--bauhaus-near-black) !important;
  color: var(--bauhaus-noir) !important;
}

.toast.bg-danger {
  background-color: var(--bauhaus-blanc) !important;
  border-left-color: var(--bauhaus-vermillon) !important;
  color: var(--bauhaus-noir) !important;
}

.toast.bg-warning {
  background-color: var(--bauhaus-blanc) !important;
  border-left-color: var(--bs-warning) !important;
  color: var(--bauhaus-noir) !important;
}

/* Close button fix: btn-close-white adds white filter — remove since bg is now white */
.toast .btn-close-white {
  filter: none;
}

/* Flash alerts (.alert) — same pattern as toasts */
.alert {
  background-color: var(--bauhaus-blanc);
  border: 1px solid var(--bauhaus-light-grey);
  border-left-width: 3px;
  border-radius: 0;
  box-shadow: none;
  color: var(--bauhaus-noir);
}

.alert-success {
  border-left-color: var(--bauhaus-near-black);
}

.alert-danger {
  border-left-color: var(--bauhaus-vermillon);
}

.alert-warning {
  border-left-color: var(--bs-warning);
}

.alert-info {
  border-left-color: var(--bs-info);
}

/* ================================================================
   10. TABS / NAV-TABS
   Source: CONTEXT.md D-19, DS-09 / UI-SPEC.md Tabs
   ================================================================ */

.nav-tabs {
  border-bottom: 1px solid var(--bauhaus-light-grey);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--bauhaus-mid-grey);
  font-family: var(--bauhaus-font-display);
  font-weight: 500;
  background-color: transparent;
  padding: var(--space-sm) var(--space-md);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
  background-color: var(--bauhaus-off-white);
  color: var(--bauhaus-noir);
  border-bottom-color: transparent;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--bauhaus-noir);
  border: none;
  border-bottom: 2px solid var(--bauhaus-vermillon);
}

/* ================================================================
   11. SIDEBAR
   Source: CONTEXT.md D-12, D-13, LAY-02, LAY-03 / UI-SPEC.md Sidebar
   Replaces bg-dark text-white removed from base.html
   ================================================================ */

.sidebar {
  background-color: var(--bauhaus-blanc);
  border-right: 1px solid var(--bauhaus-light-grey);
  color: var(--bauhaus-noir);
}

/* Default nav-link color — replaces text-white removed from base.html */
.sidebar .nav-link {
  color: var(--bauhaus-noir);
}

/* Hover — replaces rgba(255,255,255,0.1) in app.css (invisible on white bg) */
.sidebar .nav-link:hover:not(.pe-none) {
  background-color: var(--bauhaus-off-white);
  color: var(--bauhaus-noir);
}

.sidebar .nav-link.active {
  border-left: 2px solid var(--bauhaus-vermillon);
  background-color: transparent;
  color: var(--bauhaus-noir);
}

/* Sidebar group separator (D-13) */
.sidebar-separator {
  border: none;
  border-top: 1px solid var(--bauhaus-light-grey);
  margin: var(--space-sm) 0;
  opacity: 1;
}

/* ================================================================
   12. CARDS
   Source: UI-SPEC.md — generic Bootstrap card override
   ================================================================ */

.card {
  border: 1px solid var(--bauhaus-light-grey);
  border-radius: 0;
  box-shadow: none;
}

.card-header {
  background-color: var(--bauhaus-blanc);
  border-bottom: 1px solid var(--bauhaus-light-grey);
}

/* ================================================================
   13. PHASE 31 UTILITIES
   Source: 31-CONTEXT.md D-04 / 31-UI-SPEC.md Component Inventory
   ================================================================ */

.img-thumbnail-config {
  border: 1px solid var(--bauhaus-light-grey);
  border-radius: 0;
  object-fit: contain;
}

.email-body-preview {
  white-space: pre-wrap;
  height: 300px;
  overflow-y: auto;
  font-family: var(--bauhaus-font-body);
  font-size: 0.875rem;
}

.template-body {
  height: 300px !important;
  resize: vertical;
}

.month-separator-historique {
  background-color: var(--bauhaus-off-white);
  border-top: 2px solid var(--bauhaus-near-black);
}

.config-section-title {
  font-family: var(--bauhaus-font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bauhaus-noir);
  margin-bottom: var(--space-md);
}

/* ================================================================
   14. STATS UTILITY CLASSES (AUD-02 — Phase 32 audit)
   Source: extracted from _stats_content.html inline styles
   ================================================================ */

.stat-value {
  font-family: var(--bauhaus-font-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

.stat-value-sm {
  font-family: var(--bauhaus-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.stat-value-detail {
  font-family: var(--bauhaus-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--bauhaus-mid-grey);
  margin-top: var(--space-xs);
}

.stat-card-body {
  padding: var(--space-lg);
}

.podium-rank {
  font-family: var(--bauhaus-font-display);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  min-width: 2rem;
  color: var(--bauhaus-near-black);
}

.podium-name {
  font-size: 0.875rem;
  flex-grow: 1;
}

.podium-count {
  font-size: 0.75rem;
  color: var(--bauhaus-mid-grey);
}

.empty-state-title {
  font-family: var(--bauhaus-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--bauhaus-mid-grey);
}

.empty-state-subtitle {
  font-size: 0.875rem;
  color: var(--bauhaus-mid-grey);
}

.garde-empty-message {
  font-family: var(--bauhaus-font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--bauhaus-mid-grey);
}

.month-header-th {
  font-family: var(--bauhaus-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-md);
  background: var(--bauhaus-blanc);
  color: var(--bauhaus-near-black);
}

.badge-remplacant {
  font-size: 0.65rem;
}

.mail-body-preview {
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
}

/* ================================================================
   15. PRINT CSS (AUD-04 — Phase 32 audit)
   Scope: CPAM pages only (printed from browser Ctrl+P)
   Server-generated PDFs are NOT affected by these rules.
   Source: 32-CONTEXT.md D-05, D-06
   ================================================================ */

@media print {
  /* 1. Hide app chrome — sidebar, flash alerts, action buttons, modals, toasts */
  .sidebar,
  #flash-container,
  .btn,
  .modal,
  .toast-container { display: none !important; }

  /* 2. Fix flex body layout for print flow */
  body {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    font-size: 10pt;
    color: #000;                /* Hex brut delibere — impression force noir/blanc, les tokens --bauhaus-* sont pour l'ecran */
    background: #fff;
  }

  #main-content {
    overflow: visible !important;
    width: 100% !important;
  }

  main.p-4 {
    padding: 0 !important;
  }

  /* 3. Tables — readable columns and borders */
  .table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
  }

  .table th,
  .table td {
    border: 1px solid #555;    /* Hex brut delibere — bordures impression, pas de token */
    font-size: 9pt;
    padding: 4px 6px;
    background: #fff !important;
    color: #000 !important;
  }

  /* 4. Disable sticky thead (from _cpam_regulateurs.html) */
  .sticky-top { position: static !important; }

  /* 5. Page setup */
  @page {
    margin: 1.5cm;
  }
}

/* ================================================================
   16. PHASE 33 UTILITIES
   Source: 33-UI-SPEC.md — generation preview table
   ================================================================ */

/* Ferie row highlight in generation preview table */
.row-ferie td {
  background-color: rgba(196, 138, 0, 0.12); /* amber tint, 12% — derived from --bs-warning */
}

/* Generation preview table source column */
.generation-source-badge {
  font-family: var(--bauhaus-font-display);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bauhaus-mid-grey);
}

/* ================================================================
   PHASE 40 — Surveillance tables highlight cells
   ================================================================ */

.cell-plancher {
  background-color: rgba(196, 138, 0, 0.12) !important; /* same as .row-ferie td */
}

.cell-double {
  background-color: rgba(217, 56, 30, 0.08) !important; /* vermillon pale */
}

.cell-zero-ferie {
  background-color: rgba(26, 92, 143, 0.10) !important; /* info blue pale */
}

/* End of components.css — Bauhaus component overrides */