/* Lightweight app.css that aggregates existing css files to satisfy templates requesting /css/app.css */
/* Project specific small overrides */

/* ========== Utility: spacing between adjacent buttons ========== */
.btn + .btn,
.btn-group .btn + .btn {
  margin-left: 8px;
}

/* Ensure consistent spacing between adjacent action buttons across the app (cases, calendar, modals) */
.case-actions .btn + .btn,
.appointment-card .btn + .btn,
.apt-kanban-card .btn + .btn,
.card .actions .btn + .btn,
.modal-footer .btn + .btn,
.btn + .btn,
.btn-group .btn + .btn {
  margin-left: 8px;
}

/* Add some vertical spacing for stacked action buttons */
.actions .btn,
.card .actions .btn {
  margin-bottom: 6px;
}

/* Fallback for older pages that used margin-right: keep bottom/right spacing for stacked buttons */
.case-actions .btn,
.appointment-card .btn,
.apt-kanban-card .btn {
  margin-bottom: 6px;
}

/* Specific: ensure button groups don't collapse on small screens */
.btn-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========== Notification panel default styles ========== */
.notification-panel {
  display: none;
}
.notification-panel.open {
  display: block;
}

/* ========== Auth / inscription: rendre le formulaire lisible ========== */
/* Targets common auth pages that use classes like .auth-page, .auth-form, .register-form */
.auth-page .auth-card,
.auth-form,
.register-form,
.signup-card {
  max-width: 560px;
  margin: 28px auto;
  padding: 20px;
  background: var(--color-surface, #ffffff);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.auth-form .form-control,
.register-form .form-control,
.signup-card .form-control {
  width: 100%;
}

.auth-page .page-title,
.register-form .page-title {
  text-align: center;
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

/* Small screens: ensure inputs are full width and buttons stack nicely */
@media (max-width: 576px) {
  .btn-group {
    width: 100%;
  }
  .btn-group .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .btn + .btn { margin-left: 6px; }
  .case-actions .btn + .btn, .appointment-card .btn + .btn { margin-left: 6px; }
}

/* ========== Cases / appointments: card action spacing ========== */
.case-actions .btn,
.appointment-card .btn,
.apt-kanban-card .btn {
  margin-right: 8px;
  margin-bottom: 6px;
}

/* Ensure modal footer buttons have spacing */
.modal-footer .btn + .btn {
  margin-left: 8px;
}

/* Fallback for flex gap (older browsers): ensure children get margin when parent uses .d-flex.gap-2 etc. */
.d-flex.gap-1 > * + *,
.d-flex.gap-2 > * + *,
.d-flex.gap-3 > * + * {
  margin-left: .5rem; /* gap-2 equivalent */
}

/* Ensure buttons inside inline forms get spacing (forms that used inline-block) */
form.d-inline > * + *,
form[style*="display:inline-block"] > * + * {
  margin-left: 6px;
}

/* Strong fallback: ensure adjacent buttons always have spacing */
.btn + .btn { margin-left: 8px !important; }
.btn-group .btn + .btn { margin-left: 8px !important; }

/* Flex gap fallbacks for multiple gap utility values */
.d-flex.gap-1 > * + *,
.d-flex.gap-2 > * + *,
.d-flex.gap-3 > * + *,
.d-flex.gap-4 > * + * {
  margin-left: 8px !important;
}

/* If gap is applied inline as style="gap: ..." provide fallback */
.d-flex[style*="gap"] > * + * { margin-left: 8px !important; }

/* Inline forms fallback */
form.d-inline > * + *,
form[style*="display:inline-block"] > * + * { margin-left: 8px !important; }

/* Register page forced color scheme as a last-resort override */
.register-form-box, .register-form-box h1, .register-form-box .subtitle, .register-form-box .form-floating label, .register-form-box .form-control {
  color: var(--text-primary) !important;
}
.register-sidebar, .register-sidebar .plan-card, .register-sidebar .plan-card li {
  color: #EEF2F7 !important;
}

/* Ensure small screen buttons stack with spacing */
@media (max-width: 576px) {
  .d-flex.gap-2 > * + *, .btn + .btn { margin-left: 6px !important; }
}

/* FullCalendar: ensure toolbar buttons have proper spacing and don't stick together */
.fc .fc-toolbar-chunk {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fc .fc-button {
  margin-bottom: 6px;
}
.fc .fc-toolbar .fc-button + .fc-button {
  margin-left: 8px;
}

/* Ensure card-level buttons also keep spacing when FullCalendar injects its own markup */
.card .btn + .btn,
.fc .fc-button + .fc-button {
  margin-left: 8px !important;
}

/* Client portal: fix visibility when some pages accidentally render light text
   Scoped to the case list items only to avoid interfering with global header colors */
.case-card,
.client-header {
  color: var(--text-primary) !important;
}
.case-card a,
.case-card .stat-value,
.case-card .stat-label,
.case-card .small,
.case-card .text-muted {
  color: var(--text-primary) !important;
}

/* ========== RESPONSIVE: Page Facturation ========== */

/* Statistiques cards responsive */
.stat-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--color-surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--color-border, rgba(228, 225, 217, 0.7));
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.05));
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-icon.blue { background: rgba(30, 58, 95, 0.1); color: #1E3A5F; }
.stat-icon.green { background: rgba(34, 197, 94, 0.1); color: #22C55E; }
.stat-icon.orange { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #0F172A);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748B);
    margin-top: 0.25rem;
}

/* Hero banner responsive */
.hero-banner {
    padding: 2rem !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
}

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 800px;
}

/* Tablets */
@media (max-width: 992px) {
    .stat-card {
        padding: 1.25rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
    }
    
    .hero-banner {
        padding: 1.5rem !important;
    }
    
    .hero-banner h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-banner .d-flex {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .hero-banner .d-flex .d-flex {
        width: 100% !important;
    }
    
    .hero-banner .btn {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Force body responsive */
    body {
        overflow-x: hidden !important;
    }
    
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .hero-banner {
        padding: 1.25rem !important;
    }
    
    .hero-banner h1 {
        font-size: 1.25rem !important;
    }
    
    .hero-banner p {
        font-size: 0.875rem !important;
    }
    
    /* Stat cards - 2 colonnes sur mobile */
    .row.g-3 {
        gap: 0.75rem !important;
    }
    
    .stat-card {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    /* Filtres - stack sur mobile */
    .card-body .row.g-3 .col-12,
    .card-body .row.g-3 .col-md-6,
    .card-body .row.g-3 .col-md-3,
    .card-body .row.g-3 .col-lg-3,
    .card-body .row.g-3 .col-lg-2 {
        width: 100% !important;
        margin-bottom: 0.75rem;
    }
    
    .card-body .row.g-3 .col-lg-2.d-flex {
        margin-top: 0.5rem;
    }
    
    /* Table responsive */
    .table-responsive {
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .table {
        font-size: 0.8125rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.375rem !important;
        white-space: nowrap;
    }
    
    /* Modal responsive */
    .modal-dialog {
        margin: 0.5rem !important;
    }
    
    .modal-body .row .col-md-6,
    .modal-body .row .col-md-4 {
        width: 100% !important;
        margin-bottom: 0.75rem;
    }
}

/* Small mobile */
@media (max-width: 576px) {
    .hero-banner {
        padding: 1rem !important;
    }
    
    .hero-banner h1 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Stat cards - stack complètement */
    .stat-card {
        flex-direction: row;
        padding: 0.875rem;
    }
    
    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    .stat-value {
        font-size: 1.125rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
    
    /* Boutons full width sur très petit écran */
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    .table {
        font-size: 0.75rem;
    }
}