/* ============================================
   INFO_8 - Stylesheet Principal
   Police: Outfit + Noto Sans Arabic
   Thème: Bleu universitaire sobre
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

   :root {
     --primary: #1a56db;
     --primary-dark: #1240a4;
     --primary-light: #e8f0fe;
     --secondary: #0e9f6e;
     --accent: #ff8800;
     --danger: #e02424;
     --warning: #f59e0b;
     --info: #0284c7;
   
     --bg: #f4f6fb;
     --bg-white: #ffffff;
     --bg-sidebar: #1e2d5a;
     --bg-sidebar-hover: #2a3f7a;
     --bg-sidebar-active: #1a56db;
   
     --text: #1a202c;
     --text-muted: #6b7280;
     --text-light: #9ca3af;
     --text-white: #ffffff;
   
     --border: #e2e8f0;
     --border-focus: #1a56db;
   
     --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
     --shadow: 0 4px 16px rgba(0,0,0,.10);
     --shadow-lg: 0 10px 40px rgba(0,0,0,.15);
   
     --radius: 10px;
     --radius-sm: 6px;
     --radius-lg: 16px;
   
     --sidebar-w: 260px;
     --header-h: 64px;
   
     --font: 'Outfit', system-ui, sans-serif;
   }
   
   * { margin: 0; padding: 0; box-sizing: border-box; }

   html {
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
     overflow-x: hidden;
     max-width: 100%;
   }
   
   body {
     font-family: var(--font);
     background: var(--bg);
     color: var(--text);
     font-size: 15px;
     line-height: 1.6;
     max-width: 100%;
     overflow-x: hidden;
   }

   img, svg, video, canvas {
     max-width: 100%;
     height: auto;
   }
   
   a { color: var(--primary); text-decoration: none; }
   a:hover { text-decoration: underline; }
   
   /* ============================================
      LOGIN PAGE
      ============================================ */
   .login-page {
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
   
   .login-left {
     background: linear-gradient(145deg, #1e2d5a 0%, #1a56db 100%);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 60px;
     color: white;
     text-align: center;
   }
   
   .login-left .brand-icon {
     width: 80px;
     height: 80px;
     background: rgba(255,255,255,0.15);
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 36px;
     margin: 0 auto 24px;
   }
   
   .login-left h1 {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 12px;
   }
   
   .login-left p {
     font-size: 16px;
     opacity: 0.8;
     max-width: 340px;
     line-height: 1.7;
   }
   
   .login-features {
     margin-top: 48px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     text-align: left;
     width: 100%;
     max-width: 340px;
   }
   
   .login-feature {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 14px 18px;
     background: rgba(255,255,255,0.1);
     border-radius: var(--radius);
     font-size: 14px;
   }
   
   .login-feature .icon {
     font-size: 22px;
     flex-shrink: 0;
   }
   
   .login-right {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 60px;
     background: var(--bg-white);
   }
   
   .login-box {
     width: 100%;
     max-width: 420px;
   }
   
   .login-box h2 {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 8px;
     color: var(--text);
   }
   
   .login-box .subtitle {
     color: var(--text-muted);
     margin-bottom: 36px;
     font-size: 15px;
   }
   
   /* ============================================
      FORMS
      ============================================ */
   .form-group {
     margin-bottom: 20px;
   }
   
   .form-group label {
     display: block;
     font-weight: 500;
     margin-bottom: 8px;
     color: var(--text);
     font-size: 14px;
   }
   
   .form-control {
     width: 100%;
     padding: 11px 16px;
     border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
     font-family: var(--font);
     font-size: 15px;
     color: var(--text);
     background: var(--bg-white);
     transition: border-color .2s, box-shadow .2s;
     outline: none;
   }
   
   .form-control:focus {
     border-color: var(--border-focus);
     box-shadow: 0 0 0 3px rgba(26,86,219,.12);
   }
   
   select.form-control { cursor: pointer; }
   
   textarea.form-control { resize: vertical; min-height: 100px; }
   
   .form-control.is-invalid { border-color: var(--danger); }
   .invalid-feedback { color: var(--danger); font-size: 13px; margin-top: 5px; }
   
   /* ============================================
      BUTTONS
      ============================================ */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 22px;
     border: none;
     border-radius: var(--radius-sm);
     font-family: var(--font);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all .2s;
     text-decoration: none !important;
   }
   
   .btn-primary   { background: var(--primary); color: white; }
   .btn-primary:hover { background: var(--primary-dark); }
   .btn-success   { background: var(--secondary); color: white; }
   .btn-success:hover { background: #087f5b; }
   .btn-danger    { background: var(--danger); color: white; }
   .btn-danger:hover { background: #b91c1c; }
   .btn-warning   { background: var(--warning); color: white; }
   .btn-outline   { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
   .btn-outline:hover { background: var(--bg); }
   .btn-sm        { padding: 6px 14px; font-size: 13px; }
   .btn-lg        { padding: 13px 28px; font-size: 16px; }
   .btn-block     { width: 100%; justify-content: center; }
   .btn:disabled  { opacity: .6; cursor: not-allowed; }
   
   /* ============================================
      LAYOUT - SIDEBAR + MAIN
      ============================================ */
   .app-layout {
     display: flex;
     min-height: 100vh;
     min-width: 0;
   }
   
   /* SIDEBAR */
   .sidebar {
     width: var(--sidebar-w);
     background: var(--bg-sidebar);
     color: white;
     display: flex;
     flex-direction: column;
     position: fixed;
     top: 0; left: 0; bottom: 0;
     z-index: 100;
     overflow-y: auto;
     transition: transform .3s;
   }
   
   .sidebar-brand {
     padding: 22px 24px;
     display: flex;
     align-items: center;
     gap: 12px;
     border-bottom: 1px solid rgba(255,255,255,.1);
   }
   
   .sidebar-brand .brand-icon {
     width: 40px;
     height: 40px;
     background: var(--primary);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     flex-shrink: 0;
   }
   
   .sidebar-brand .brand-text {
     font-size: 17px;
     font-weight: 700;
   }
   
   .sidebar-brand .brand-sub {
     font-size: 11px;
     opacity: .6;
     display: block;
   }
   
   .sidebar-section {
     padding: 20px 16px 8px;
   }
   
   .sidebar-section-title {
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     opacity: .45;
     padding: 0 8px;
     margin-bottom: 4px;
   }
   
   .nav-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
     border-radius: var(--radius-sm);
     color: rgba(255,255,255,.75);
     font-size: 14px;
     font-weight: 400;
     transition: all .2s;
     margin-bottom: 2px;
     cursor: pointer;
     text-decoration: none !important;
   }
   
   .nav-item:hover {
     background: var(--bg-sidebar-hover);
     color: white;
   }
   
   .nav-item.active {
     background: var(--bg-sidebar-active);
     color: white;
     font-weight: 500;
   }
   
   .nav-item .nav-icon { font-size: 18px; flex-shrink: 0; }
   .nav-item .badge { margin-left: auto; background: rgba(255,255,255,.2); padding: 1px 8px; border-radius: 20px; font-size: 11px; }
   
   .sidebar-footer {
     margin-top: auto;
     padding: 16px;
     border-top: 1px solid rgba(255,255,255,.1);
   }
   
   .user-card {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px;
     border-radius: var(--radius-sm);
     background: rgba(255,255,255,.08);
   }
   
   .user-card .avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 14px;
     flex-shrink: 0;
   }
   
   .user-card .user-info .name { font-size: 13px; font-weight: 500; }
   .user-card .user-info .role { font-size: 11px; opacity: .6; }
   
   /* MAIN CONTENT */
   .main-content {
     margin-left: var(--sidebar-w);
     flex: 1;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     min-width: 0;
     width: 100%;
   }
   
   /* TOPBAR */
   .topbar {
     height: var(--header-h);
     background: var(--bg-white);
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 28px;
     position: sticky;
     top: 0;
     z-index: 50;
   }
   
   .topbar-title h1 { font-size: 20px; font-weight: 600; }
   .topbar-title p  { font-size: 13px; color: var(--text-muted); }
   
   .topbar-actions { display: flex; align-items: center; gap: 12px; }
   
   .topbar-btn {
     width: 38px;
     height: 38px;
     border-radius: var(--radius-sm);
     border: 1.5px solid var(--border);
     background: transparent;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     transition: all .2s;
     position: relative;
   }
   
   .topbar-btn:hover { background: var(--bg); }
   
   .badge-dot {
     position: absolute;
     top: 5px; right: 5px;
     width: 8px; height: 8px;
     background: var(--danger);
     border-radius: 50%;
     border: 2px solid white;
   }
   
   /* PAGE CONTENT */
   .page-content {
     padding: 28px;
     flex: 1;
   }
   
   /* ============================================
      CARDS
      ============================================ */
   .card {
     background: var(--bg-white);
     border-radius: var(--radius);
     border: 1px solid var(--border);
     box-shadow: var(--shadow-sm);
   }
   
   .card-header {
     padding: 18px 22px;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
   }
   
   .card-header h3 { font-size: 16px; font-weight: 600; }
   .card-body      { padding: 22px; }
   .card-footer    { padding: 14px 22px; border-top: 1px solid var(--border); background: var(--bg); border-radius: 0 0 var(--radius) var(--radius); }
   
   /* STAT CARDS */
   .stat-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 18px;
     margin-bottom: 28px;
   }
   
   .stat-card {
     background: var(--bg-white);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 22px;
     display: flex;
     align-items: center;
     gap: 16px;
     box-shadow: var(--shadow-sm);
   }
   
   .stat-icon {
     width: 52px;
     height: 52px;
     border-radius: var(--radius);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     flex-shrink: 0;
   }
   
   .stat-icon.blue   { background: var(--primary-light); }
   .stat-icon.green  { background: #d1fae5; }
   .stat-icon.orange { background: #fef3c7; }
   .stat-icon.red    { background: #fee2e2; }
   
   .stat-info .value { font-size: 26px; font-weight: 700; line-height: 1; }
   .stat-info .label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
   
   /* ============================================
      TABLES
      ============================================ */
   .table-wrapper {
     overflow-x: auto;
     border-radius: var(--radius);
     max-width: 100%;
     min-width: 0;
     -webkit-overflow-scrolling: touch;
   }
   
   table { width: 100%; border-collapse: collapse; min-width: 0; table-layout: auto; }
   thead th {
     background: var(--bg);
     padding: 12px 16px;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .6px;
     color: var(--text-muted);
     border-bottom: 1px solid var(--border);
     white-space: nowrap;
     text-align: left;
   }
   tbody td {
     padding: 13px 16px;
     border-bottom: 1px solid var(--border);
     font-size: 14px;
     vertical-align: middle;
   }
   tbody tr:last-child td { border-bottom: none; }
   tbody tr:hover { background: #f8faff; }
   
   /* ============================================
      BADGES
      ============================================ */
   .badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 10px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
   }
   .badge-primary { background: var(--primary-light); color: var(--primary-dark); }
   .badge-success { background: #d1fae5; color: #065f46; }
   .badge-danger  { background: #fee2e2; color: #991b1b; }
   .badge-warning { background: #fef3c7; color: #92400e; }
   .badge-info    { background: #e0f2fe; color: #0c4a6e; }
   .badge-gray    { background: #f1f5f9; color: #475569; }
   
   /* ============================================
      ALERT MESSAGES
      ============================================ */
   .alert {
     padding: 13px 18px;
     border-radius: var(--radius-sm);
     margin-bottom: 18px;
     font-size: 14px;
     display: flex;
     align-items: flex-start;
     gap: 10px;
   }
   .alert-success { background: #d1fae5; color: #065f46; border-left: 4px solid #059669; }
   .alert-danger  { background: #fee2e2; color: #991b1b; border-left: 4px solid #dc2626; }
   .alert-info    { background: #e0f2fe; color: #0c4a6e; border-left: 4px solid #0284c7; }
   .alert-warning { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b; }
   
   /* ============================================
      NOTES TABLE (special)
      ============================================ */
   .notes-table input[type="number"] {
     width: 70px;
     padding: 5px 8px;
     border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
     font-family: var(--font);
     font-size: 14px;
     text-align: center;
     transition: border-color .2s;
   }
   
   .notes-table input[type="number"]:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(26,86,219,.1);
   }
   
   .note-finale {
     font-weight: 700;
     font-size: 15px;
     padding: 3px 8px;
     border-radius: var(--radius-sm);
   }
   
   .note-finale.pass { background: #d1fae5; color: #065f46; }
   .note-finale.fail { background: #fee2e2; color: #991b1b; }
   
   /* ============================================
      APPEL (attendance)
      ============================================ */
   .appel-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: 2px solid var(--border);
     cursor: pointer;
     font-size: 16px;
     transition: all .2s;
     background: transparent;
   }
   
   .appel-btn:hover { transform: scale(1.1); }
   .appel-btn.present { background: #d1fae5; border-color: #059669; color: #065f46; }
   .appel-btn.absent  { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
   .appel-btn.retard  { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
   
   /* ============================================
      TIMETABLE
      ============================================ */
   .timetable {
     width: 100%;
     border-collapse: collapse;
   }
   .timetable th {
     background: var(--primary);
     color: white;
     padding: 12px;
     font-size: 13px;
     font-weight: 500;
     text-align: center;
   }
   .timetable td {
     border: 1px solid var(--border);
     padding: 8px;
     vertical-align: top;
     min-width: 120px;
     min-height: 60px;
     font-size: 12px;
   }
   .timetable .time-col {
     font-size: 12px;
     color: var(--text-muted);
     font-weight: 500;
     background: var(--bg);
     text-align: center;
     width: 80px;
   }
   .slot-card {
     background: var(--primary-light);
     border-left: 3px solid var(--primary);
     border-radius: 4px;
     padding: 6px 8px;
   }
   .slot-card.tp-slot { background: #d1fae5; border-color: var(--secondary); }
   .slot-card .module { font-weight: 600; font-size: 12px; }
   .slot-card .groupe { font-size: 11px; color: var(--text-muted); }
   
   /* ============================================
      MODALS
      ============================================ */
   .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.5);
     z-index: 1000;
     display: none;
     align-items: center;
     justify-content: center;
   }
   .modal-overlay.open { display: flex; }
   
   .modal {
     background: white;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
     width: 90%;
     max-width: 560px;
     max-height: 90vh;
     overflow-y: auto;
   }
   .modal-header {
     padding: 20px 24px;
     border-bottom: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .modal-header h3 { font-size: 17px; font-weight: 600; }
   .modal-body   { padding: 24px; }
   .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
   .modal-close  { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); line-height: 1; }
   
   /* ============================================
      RESPONSIVE
      ============================================ */
   @media (max-width: 900px) {
     html, body {
       overflow-x: hidden;
       width: 100%;
       max-width: 100%;
     }

     /* Login: stack panels (app-like), keep left visible */
     .login-page {
       grid-template-columns: 1fr;
       overflow-x: hidden;
       max-width: 100%;
     }
     .login-left, .login-right { padding: 28px; }
     .login-left { min-height: 38vh; }

     /* Layout: hide desktop sidebar on phones */
     .sidebar { transform: translateX(-110%); }
     .sidebar.open { transform: translateX(0); }
     .main-content {
       margin-left: 0;
       padding-bottom: 90px;
       max-width: 100%;
       overflow-x: hidden;
     }

     .page-content {
       padding: 16px 14px;
       max-width: 100%;
       min-width: 0;
     }

     .topbar {
       padding: 10px 14px;
       min-height: auto;
       height: auto;
       flex-wrap: wrap;
       gap: 8px;
     }

     .topbar-title {
       min-width: 0;
       flex: 1 1 auto;
     }

     .topbar-title h1 {
       font-size: clamp(1rem, 4.2vw, 1.25rem);
       word-break: break-word;
     }

     .topbar-actions {
       min-width: 0;
       flex-wrap: wrap;
     }

     /* Toutes les pages : cartes ne forcent pas la largeur du viewport */
     .card {
       max-width: 100%;
       min-width: 0;
     }

     /* Flex inline (formulaires, barres d’outils) : retour à la ligne partout */
     .page-content [style*="display:flex"],
     .modal-body [style*="display:flex"],
     .modal-header[style*="display:flex"] {
       flex-wrap: wrap !important;
     }

     /* Modales : grilles sur une colonne */
     .modal-body [style*="display:grid"] {
       grid-template-columns: 1fr !important;
     }

     /* Annule min-width inline sur les blocs (souvent 120px–260px) — cause principale du débordement */
     .page-content div[style*="min-width"],
     .page-content form[style*="min-width"],
     .modal-body div[style*="min-width"],
     .modal-body form[style*="min-width"] {
       min-width: 0 !important;
       max-width: 100% !important;
     }

     .card-header {
       flex-wrap: wrap;
       padding: 14px 16px;
       align-items: flex-start;
     }

     .card-header h3 {
       font-size: 0.95rem;
       line-height: 1.35;
     }

     .card-body { padding: 16px; }

     /* iOS : évite le zoom automatique au focus (champs < 16px) */
     input.form-control,
     select.form-control,
     textarea.form-control {
       font-size: 16px;
     }

     /* Grilles inline (dashboard, modales) : une colonne sur téléphone */
     .page-content [style*="display:grid"] {
       grid-template-columns: 1fr !important;
     }

     /* Ligne de stats feuille d’appel : retour à la ligne */
     .appel-stats-row {
       flex-wrap: wrap !important;
       margin-bottom: 16px !important;
     }

     .appel-stats-row .stat-card {
       flex: 1 1 calc(50% - 8px) !important;
       min-width: 0 !important;
     }

     /* Cards / stats */
     .stat-grid { grid-template-columns: 1fr 1fr; }

     /* Tables: tighter + allow horizontal scroll */
     .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
     table th, table td { padding: 10px 10px; }
     table thead th {
       white-space: normal;
       hyphens: auto;
     }

     .modal-header {
       flex-wrap: wrap;
       align-items: flex-start;
       gap: 10px;
     }

     .modal-footer {
       flex-wrap: wrap;
       gap: 10px;
     }

     /* Buttons / inputs: more touch-friendly */
     .btn { padding: 12px 18px; }
     .btn-sm { padding: 8px 12px; }
     .form-control { padding: 12px 14px; }
   }

   @media (max-width: 480px) {
     .stat-grid { grid-template-columns: 1fr; }
   }

   @media (max-width: 380px) {
     .appel-stats-row .stat-card {
       flex: 1 1 100% !important;
     }
   }

   /* ============================================
      MOBILE TABS (app-like bottom navigation)
      ============================================ */
   .mobile-tabs-spacer { display: none; height: 92px; }

   .mobile-tabs {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1200;
     display: none;
     background: rgba(255,255,255,0.92);
     backdrop-filter: blur(10px);
     border-top: 1px solid var(--border);
     padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
   }

   .mobile-tabs .tabs {
     max-width: 860px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 8px;
   }

   .mobile-tab {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     padding: 10px 8px;
     border-radius: 14px;
     color: var(--text-muted);
     text-decoration: none !important;
     font-size: 12px;
     font-weight: 500;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
   }
   .mobile-tab .icon { font-size: 18px; line-height: 1; }
   .mobile-tab.active {
     color: var(--primary);
     background: var(--primary-light);
   }

   /* Bottom sheet (More) */
   .bottom-sheet {
     position: fixed;
     inset: 0;
     display: none;
     align-items: flex-end;
     justify-content: center;
     background: rgba(0,0,0,0.45);
     z-index: 1400;
     padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
   }
   .bottom-sheet.open { display: flex; }
   .bottom-sheet .sheet {
     width: 100%;
     max-width: 560px;
     background: white;
     border-radius: 18px;
     box-shadow: var(--shadow-lg);
     overflow: hidden;
   }
   .bottom-sheet .sheet-header {
     padding: 14px 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--border);
   }
   .bottom-sheet .sheet-header .title { font-weight: 700; }
   .bottom-sheet .sheet-body { padding: 10px; }
   .bottom-sheet .sheet-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 12px 12px;
     border-radius: 12px;
     color: var(--text);
     text-decoration: none !important;
   }
   .bottom-sheet .sheet-item:hover { background: var(--bg); }

   @media (max-width: 900px) {
     .mobile-tabs { display: block; }
     .mobile-tabs-spacer { display: block; }
   }
   
   /* ============================================
      UTILITIES
      ============================================ */
   .text-center { text-align: center; }
   .text-right  { text-align: right; }
   .text-muted  { color: var(--text-muted); }
   .text-primary { color: var(--primary); }
   .text-success { color: var(--secondary); }
   .text-danger  { color: var(--danger); }
   .fw-600 { font-weight: 600; }
   .fw-700 { font-weight: 700; }
   .mb-0 { margin-bottom: 0; }
   .mb-1 { margin-bottom: 8px; }
   .mb-2 { margin-bottom: 16px; }
   .mb-3 { margin-bottom: 24px; }
   .mt-3 { margin-top: 24px; }
   .d-flex { display: flex; }
   .align-center { align-items: center; }
   .justify-between { justify-content: space-between; }
   .gap-2 { gap: 12px; }
   .gap-3 { gap: 18px; }
   .w-100 { width: 100%; }
   .section-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; }