/* ============================================
   RESPONSIVE COMPACT UI - 1366x768 OPTIMIZATION
   Makes entire system perfect for standard displays
   ============================================ */

/* ============================================
   GLOBAL COMPACT STYLES
   ============================================ */

:root {
  /* Compact spacing */
  --spacing-xs: 0.2rem;
  --spacing-sm: 0.4rem;
  --spacing-md: 0.6rem;
  --spacing-lg: 0.8rem;
  --spacing-xl: 1rem;
  
  /* Compact font sizes */
  --font-xs: 0.7rem;
  --font-sm: 0.8rem;
  --font-md: 0.9rem;
  --font-lg: 1rem;
  --font-xl: 1.1rem;
}

body {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ============================================
   TYPOGRAPHY - COMPACT
   ============================================ */

h1 { font-size: 1.3rem; margin-bottom: 0.4rem; }
h2 { font-size: 1.1rem; margin-bottom: 0.3rem; }
h3 { font-size: 1rem; margin-bottom: 0.3rem; }
h4 { font-size: 0.95rem; margin-bottom: 0.2rem; }
h5 { font-size: 0.9rem; margin-bottom: 0.2rem; }
h6 { font-size: 0.85rem; margin-bottom: 0.2rem; }

p { margin-bottom: 0.4rem; font-size: 0.9rem; }
small { font-size: 0.75rem; }

/* ============================================
   SIDEBAR - COMPACT
   ============================================ */

/* Width comes from --vi-sidebar-w (defined in theme.css) so the rail
   and the content margin stay locked together. Each breakpoint below
   re-points that ONE value instead of setting a width directly. */
.sidebar {
  width: var(--vi-sidebar-w) !important;
  padding: 0.5rem !important;
}

/* Content sits exactly beside the rail on desktop. Mobile keeps the
   off-canvas behaviour from index.php, where margin-left is 0. */
@media (min-width: 769px) {
  .main-content {
    margin-left: var(--vi-sidebar-w) !important;
  }
}

.sidebar .nav-link {
  padding: 0.4rem 0.6rem !important;
  margin-bottom: 0.2rem !important;
  font-size: 0.85rem !important;
}

.sidebar .user-info {
  margin-bottom: 0.6rem !important;
  padding: 0.4rem !important;
}

.sidebar .user-info .fa-user-circle {
  font-size: 1.5rem !important;
}

.villa-header {
  margin-bottom: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.villa-logo {
  width: 50px !important;
  height: 50px !important;
  margin-bottom: 0.4rem !important;
}

.villa-title {
  font-size: 0.95rem !important;
  margin: 0 !important;
}

.villa-tagline {
  font-size: 0.7rem !important;
  margin-top: 0.2rem !important;
}

/* ============================================
   MAIN CONTENT - COMPACT
   ============================================ */

.main-content {
  padding: 0.8rem !important;
}

.container-fluid {
  padding: 0.6rem !important;
}

/* ============================================
   CARDS - COMPACT
   ============================================ */

.card {
  margin-bottom: 0.6rem !important;
  border-radius: 0.5rem !important;
}

.card-header {
  padding: 0.4rem 0.6rem !important;
  font-size: 0.85rem !important;
}

.card-body {
  padding: 0.6rem !important;
}

.card-title {
  font-size: 0.9rem !important;
  margin-bottom: 0.3rem !important;
}

.card-text {
  font-size: 0.85rem !important;
  margin-bottom: 0.2rem !important;
}

/* ============================================
   BUTTONS - COMPACT
   ============================================ */

.btn {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.8rem !important;
  border-radius: 0.4rem !important;
}

.btn-sm {
  padding: 0.2rem 0.4rem !important;
  font-size: 0.75rem !important;
}

.btn-lg {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.9rem !important;
}

.btn-group {
  gap: 0.2rem !important;
}

/* ============================================
   FORMS - COMPACT
   ============================================ */

.form-label {
  font-size: 0.8rem !important;
  margin-bottom: 0.2rem !important;
  font-weight: 500 !important;
}

.form-control,
.form-select {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.85rem !important;
  border-radius: 0.4rem !important;
}

.form-control-sm,
.form-select-sm {
  padding: 0.2rem 0.4rem !important;
  font-size: 0.8rem !important;
}

.input-group-text {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.8rem !important;
}

/* ============================================
   TABLES - COMPACT
   ============================================ */

.table {
  font-size: 0.8rem !important;
  margin-bottom: 0.4rem !important;
}

.table thead th {
  padding: 0.3rem 0.4rem !important;
  font-size: 0.75rem !important;
}

.table tbody td {
  padding: 0.3rem 0.4rem !important;
  font-size: 0.8rem !important;
}

.table-sm {
  font-size: 0.75rem !important;
}

.table-sm thead th {
  padding: 0.2rem 0.3rem !important;
}

.table-sm tbody td {
  padding: 0.2rem 0.3rem !important;
}

/* ============================================
   BADGES & LABELS - COMPACT
   ============================================ */

.badge {
  padding: 0.2rem 0.4rem !important;
  font-size: 0.7rem !important;
  border-radius: 0.3rem !important;
}

.status-badge {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.75rem !important;
  border-radius: 0.3rem !important;
}

/* ============================================
   ALERTS - COMPACT
   ============================================ */

.alert {
  padding: 0.4rem 0.6rem !important;
  margin-bottom: 0.4rem !important;
  font-size: 0.85rem !important;
  border-radius: 0.4rem !important;
}

/* ============================================
   MODALS - COMPACT
   ============================================ */

.modal-header {
  padding: 0.6rem !important;
}

.modal-body {
  padding: 0.6rem !important;
  font-size: 0.85rem !important;
}

.modal-footer {
  padding: 0.4rem 0.6rem !important;
}

.modal-title {
  font-size: 0.95rem !important;
}

/* ============================================
   PAGINATION - COMPACT
   ============================================ */

.pagination {
  gap: 0.2rem !important;
  margin-bottom: 0.4rem !important;
}

.page-link {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.8rem !important;
  border-radius: 0.3rem !important;
}

/* ============================================
   PROGRESS BARS - COMPACT
   ============================================ */

.progress {
  height: 0.5rem !important;
  margin-bottom: 0.3rem !important;
  border-radius: 0.3rem !important;
}

/* ============================================
   NAVBAR - COMPACT
   ============================================ */

.navbar {
  padding: 0.4rem 0.8rem !important;
}

.navbar-brand {
  font-size: 1rem !important;
}

/* ============================================
   SPACING UTILITIES - COMPACT
   ============================================ */

.m-0 { margin: 0 !important; }
.m-1 { margin: 0.2rem !important; }
.m-2 { margin: 0.4rem !important; }
.m-3 { margin: 0.6rem !important; }
.m-4 { margin: 0.8rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.2rem !important; }
.mt-2 { margin-top: 0.4rem !important; }
.mt-3 { margin-top: 0.6rem !important; }
.mt-4 { margin-top: 0.8rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.2rem !important; }
.mb-2 { margin-bottom: 0.4rem !important; }
.mb-3 { margin-bottom: 0.6rem !important; }
.mb-4 { margin-bottom: 0.8rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.2rem !important; }
.p-2 { padding: 0.4rem !important; }
.p-3 { padding: 0.6rem !important; }
.p-4 { padding: 0.8rem !important; }

.px-1 { padding-left: 0.2rem !important; padding-right: 0.2rem !important; }
.px-2 { padding-left: 0.4rem !important; padding-right: 0.4rem !important; }
.px-3 { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }

.py-1 { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
.py-2 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
.py-3 { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }

/* ============================================
   GRID - COMPACT
   ============================================ */

/* NOTE: do not put `gap` on .row.
   Bootstrap's .row is a flex container that spaces its columns with
   PADDING-based gutters (--bs-gutter-x / the g-* classes), not with
   flex gap. Adding gap here makes columns + gap exceed 100%, so any
   row whose columns sum to a full 12 wraps its last column onto a new
   line. That is what forced layouts like the dashboard to be authored
   as col-lg-7 + col-lg-4 (11 of 12), leaving a permanently empty
   column down the right-hand side. Use the g-* utilities for spacing. */
.row {
  margin-bottom: 0.4rem !important;
}

.col {
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
}

/* ============================================
   ICONS - COMPACT
   ============================================ */

.fa-1x { font-size: 0.9rem !important; }
.fa-2x { font-size: 1.2rem !important; }
.fa-3x { font-size: 1.5rem !important; }

/* ============================================
   STAT CARDS - COMPACT
   ============================================ */

.stat-card {
  padding: 0.6rem !important;
  border-left: 3px solid !important;
  margin-bottom: 0.4rem !important;
}

.stat-value {
  font-size: 1.1rem !important;
  margin: 0.2rem 0 !important;
}

.stat-label {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* ============================================
   DASHBOARD SPECIFIC - COMPACT
   ============================================ */

.calendar-container {
  padding: 0.8rem !important;
  border-radius: 0.5rem !important;
}

.calendar-day {
  min-height: 60px !important;
  padding: 0.3rem !important;
  font-size: 0.75rem !important;
}

.booking-indicator {
  font-size: 0.6rem !important;
  width: 16px !important;
  height: 16px !important;
}

/* ============================================
   FILTER PANEL - COMPACT
   ============================================ */

.filter-panel {
  padding: 0.6rem !important;
  margin-bottom: 0.6rem !important;
}

.filter-panel .form-label {
  font-size: 0.75rem !important;
  margin-bottom: 0.15rem !important;
}

/* ============================================
   REPORT SECTION - COMPACT
   ============================================ */

.report-header {
  padding: 0.4rem 0.6rem !important;
  margin-bottom: 0.4rem !important;
}

.report-header h2 {
  font-size: 1rem !important;
  margin-bottom: 0.2rem !important;
}

.report-header p {
  font-size: 0.75rem !important;
  margin-bottom: 0 !important;
}

/* ============================================
   KPI CARDS - COMPACT
   ============================================ */

.kpi-card {
  padding: 0.5rem !important;
  margin-bottom: 0.3rem !important;
}

.kpi-value {
  font-size: 0.95rem !important;
  font-weight: bold !important;
  margin-bottom: 0.1rem !important;
}

.kpi-label {
  font-size: 0.7rem !important;
  opacity: 0.8 !important;
}

.kpi-trend {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
}

/* ============================================
   RESPONSIVE BREAKPOINTS - 1366x768
   ============================================ */

@media (max-width: 1366px) {
  :root { --vi-sidebar-w: 180px; }

  .main-content {
    padding: 0.6rem !important;
  }
  
  .col-lg-2 { flex: 0 0 16.666667% !important; }
  .col-lg-3 { flex: 0 0 25% !important; }
  .col-lg-4 { flex: 0 0 33.333333% !important; }
  .col-lg-6 { flex: 0 0 50% !important; }
}

@media (max-width: 1024px) {
  :root { --vi-sidebar-w: 160px; }

  h1 { font-size: 1.1rem; }
  h2 { font-size: 1rem; }
  h3 { font-size: 0.95rem; }
  
  .col-md-2 { flex: 0 0 20% !important; }
  .col-md-3 { flex: 0 0 25% !important; }
  .col-md-4 { flex: 0 0 33.333333% !important; }
  .col-md-6 { flex: 0 0 50% !important; }
}

@media (max-width: 768px) {
  /* Below 769px the sidebar is off-canvas (index.php slides it out with
     translateX(-100%) behind a toggle), so it spans the screen when
     shown and the content takes the full width. The old 140px override
     fought that without ever being visible. */
  .sidebar {
    width: 100% !important;
  }

  .main-content {
    padding: 0.4rem !important;
  }
  
  .card-body {
    padding: 0.4rem !important;
  }
  
  .col-sm-6 { flex: 0 0 50% !important; }
  .col-sm-12 { flex: 0 0 100% !important; }
}

/* ============================================
   HIDE UNNECESSARY ELEMENTS ON SMALL SCREENS
   ============================================ */

@media (max-width: 1366px) {
  .hide-on-compact {
    display: none !important;
  }
  
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ============================================
   OPTIMIZE FOR 1366x768
   ============================================ */

@media (min-width: 1366px) and (max-width: 1400px) {
  body {
    font-size: 0.85rem;
  }
  
  :root { --vi-sidebar-w: 190px; }

  .main-content {
    padding: 0.7rem !important;
  }
  
  .card {
    margin-bottom: 0.5rem !important;
  }
  
  /* No `gap` here either -- see the note on .row above. */
  .row {
    margin-bottom: 0.3rem !important;
  }
}

/* ============================================
   FLEX UTILITIES - COMPACT
   ============================================ */

.gap-1 { gap: 0.2rem !important; }
.gap-2 { gap: 0.4rem !important; }
.gap-3 { gap: 0.6rem !important; }

/* ============================================
   SCROLLBAR - COMPACT
   ============================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ============================================
   ANIMATIONS - SMOOTH
   ============================================ */

* {
  transition: all 0.15s ease-in-out !important;
}

/* ============================================
   PRINT STYLES - COMPACT
   ============================================ */

@media print {
  body {
    font-size: 0.8rem;
  }
  
  .sidebar,
  .navbar,
  .btn-group {
    display: none !important;
  }
  
  .main-content {
    padding: 0.4rem !important;
  }
}

/* ============================================
   UTILITY CLASSES - COMPACT
   ============================================ */

.text-xs { font-size: 0.7rem !important; }
.text-sm { font-size: 0.8rem !important; }
.text-md { font-size: 0.9rem !important; }
.text-lg { font-size: 1rem !important; }

.compact { padding: 0.3rem !important; margin: 0.2rem !important; }
.ultra-compact { padding: 0.2rem !important; margin: 0.1rem !important; }

.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }

.tight-spacing { line-height: 1.2 !important; }
.normal-spacing { line-height: 1.4 !important; }
.loose-spacing { line-height: 1.6 !important; }