/* ============================================================
   Barbería Sistema — Responsive (Mobile-First)
   ============================================================ */

@import url('variables.css');

/* ----------------------------------------------------------
   BASE (mobile — default styles, < 768px)
   ---------------------------------------------------------- */

/* Single-column layout */
.layout-dashboard .main-content {
  margin-left: 0;
}

/* Sidebar hidden by default on mobile */
.sidebar {
  transform: translateX(-100%);
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar-overlay.is-visible {
  display: block;
}

/* Hamburger visible on mobile */
.hamburger {
  display: flex;
}

/* Navbar hide text on very small screens */
.navbar-brand-text {
  display: none;
}

/* Stats grid: 1 col on mobile */
.stats-grid {
  grid-template-columns: 1fr;
}

/* Form row: single column */
.form-row {
  grid-template-columns: 1fr;
}

/* Filter panel full width */
.filter-row {
  flex-direction: column;
}

.filter-group {
  width: 100%;
  min-width: unset;
}

/* Booking form: full width */
.booking-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Hero section adjustments */
.hero-section {
  padding: var(--space-12) 0;
}

/* Slot picker: fewer columns on mobile */
.slot-picker {
  grid-template-columns: repeat(3, 1fr);
}

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

/* Bar chart smaller on mobile */
.bar-chart {
  height: 120px;
  overflow-x: hidden;
}

/* Charts never overflow their container */
.chart-container {
  overflow: hidden;
  min-width: 0;
}

/* Heatmap scrollable on mobile */
.heatmap-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Admin dashboard two-panel rows stack on mobile */
.admin-row-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.admin-row-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Modals full screen on mobile */
.modal {
  max-width: 100%;
  margin: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
}

.modal-overlay {
  align-items: flex-end;
}

/* Toast full width on mobile */
.toast-container {
  left: var(--space-4);
  right: var(--space-4);
  max-width: unset;
  width: auto;
}

/* Dashboard heading */
.section-heading {
  flex-direction: column;
  align-items: flex-start;
}

/* Appointment list */
.appointment-card {
  flex-wrap: wrap;
}

/* Stepper labels hidden on mobile */
.stepper-label {
  display: none;
}

/* Navbar: compact */
.navbar {
  padding: 0 var(--space-4);
}

/* Table actions: wrap */
.table-actions {
  flex-wrap: wrap;
}

/* Content padding reduce on mobile */
.content-wrapper {
  padding: var(--space-4);
}

/* ----------------------------------------------------------
   SM — Small tablets (>= 576px)
   ---------------------------------------------------------- */
@media (min-width: 576px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .slot-picker {
    grid-template-columns: repeat(4, 1fr);
  }

  .stepper-label {
    display: block;
  }

  .navbar-brand-text {
    display: block;
  }
}

/* ----------------------------------------------------------
   MD — Tablets (>= 768px)
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  /* 2-column grid layouts */
  .form-row-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .filter-group {
    width: auto;
    min-width: 160px;
  }

  /* Booking: two column hero layout */
  .booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  /* Modal normal sizing */
  .modal {
    max-width: 560px;
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    border-radius: var(--radius-xl);
    max-height: 90vh;
  }

  .modal-overlay {
    align-items: center;
  }

  /* Toast normal */
  .toast-container {
    left: auto;
    width: auto;
    max-width: 380px;
  }

  .slot-picker {
    grid-template-columns: repeat(5, 1fr);
  }

  .section-heading {
    flex-direction: row;
    align-items: center;
  }

  .content-wrapper {
    padding: var(--space-6);
  }

  /* Barber cards grid */
  .barbers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  /* Admin 2-col row at md */
  .admin-row-2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------
   LG — Desktop (>= 1024px)
   ---------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Sidebar visible by default */
  .sidebar {
    transform: translateX(0);
  }

  .layout-dashboard .main-content {
    margin-left: var(--sidebar-width);
  }

  .hamburger {
    display: none;
  }

  .sidebar-overlay {
    display: none !important;
  }

  /* 3-4 column grids */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .form-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-row-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Booking hero: larger layout */
  .booking-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
  }

  /* Hero full padding */
  .hero-section {
    padding: var(--space-24) 0;
  }

  .slot-picker {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Barber cards 3 cols */
  .barbers-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Bar chart larger */
  .bar-chart {
    height: 160px;
  }

  /* Admin dashboard multi-col rows at desktop */
  .admin-row-3col {
    grid-template-columns: 2fr 1fr;
  }

  /* Sidebar + content layout */
  .layout-dashboard.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-w);
  }

  .layout-dashboard.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-w);
  }

  .layout-dashboard.sidebar-collapsed .sidebar-brand-text,
  .layout-dashboard.sidebar-collapsed .sidebar-section-label,
  .layout-dashboard.sidebar-collapsed .sidebar-link span:not(.sidebar-icon),
  .layout-dashboard.sidebar-collapsed .sidebar-badge,
  .layout-dashboard.sidebar-collapsed .sidebar-user-info {
    display: none;
  }

  .layout-dashboard.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: var(--space-3);
  }

  .layout-dashboard.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: var(--space-4);
  }

  /* Wider table actions */
  .table-actions {
    flex-wrap: nowrap;
  }
}

/* ----------------------------------------------------------
   XL — Large desktops (>= 1280px)
   ---------------------------------------------------------- */
@media (min-width: 1280px) {
  .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .container {
    padding-inline: var(--space-8);
  }

  .content-wrapper {
    padding: var(--space-8);
  }

  /* Services grid */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------
   Print styles
   ---------------------------------------------------------- */
@media print {
  .sidebar,
  .navbar,
  .hamburger,
  .btn,
  .filter-panel,
  .toast-container,
  .modal-overlay {
    display: none !important;
  }

  .layout-dashboard .main-content {
    margin-left: 0 !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  thead th, tbody td {
    border: 1px solid #ccc;
    padding: 6pt 8pt;
  }

  .badge {
    border: 1px solid currentColor;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  .page-break {
    page-break-before: always;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  tr {
    page-break-inside: avoid;
  }
}