/* ==========================================================================
   HOTEL WOOD STONE — LAYOUT SYSTEM
   Phase 9A.5 | Responsive Framework
   Structural primitives — grid, page layout, spacing, touch targets.
   All sizing uses --hws-* tokens from main.css.
   ==========================================================================

   TABLE OF CONTENTS
   ─────────────────
   01. PAGE SHELL       — app wrapper, sidebar offset, main column
   02. RESPONSIVE GRID  — auto-fit grids, fixed-column grids, KPI rows
   03. FLEX UTILITIES   — row/col/wrap helpers, alignment, gap
   04. SPACING          — section, page-header, divider, gap scale
   05. TOUCH TARGETS    — 44px / 48px minimum tap area enforcement
   06. VISIBILITY       — show/hide at breakpoints
   ========================================================================== */


/* ============================================================
   01. PAGE SHELL
   ============================================================ */

/**
 * .app-layout
 * Root wrapper for every authenticated page.
 * Contains sidebar (#sidebarMount) + .main-column.
 */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--hws-black);
}

/**
 * .main-column
 * The right-hand scrollable area beside the sidebar.
 */
.main-column {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--duration-slow) var(--ease-out-soft);
}

/* When sidebar is collapsed */
body.sidebar-collapsed .main-column {
  margin-left: var(--sidebar-collapsed);
}

/**
 * .page-header-bar
 * Top of main-column — space reserved for the fixed app-header.
 */
.page-header-bar {
  height: var(--header-height);
  flex-shrink: 0;
}

/**
 * .page-content
 * Padded content area below the fixed header.
 * All page bodies live here.
 */
.page-content {
  flex: 1;
  padding: var(--space-6);
  min-width: 0;
  /* Prevent content from bleeding under sidebar on small screens */
  overflow-x: hidden;
}

/**
 * .page-header
 * Title + subtitle + action row at the top of a page.
 */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.page-header-text {
  flex: 1;
  min-width: 0;
}

.page-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--hws-ivory);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.page-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--hws-stone);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/**
 * .content-section
 * Vertical rhythm section inside a page.
 */
.content-section {
  margin-bottom: var(--space-8);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--hws-ivory);
  letter-spacing: 0.01em;
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--hws-stone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}


/* ============================================================
   02. RESPONSIVE GRID
   ============================================================ */

/**
 * Base grid container.
 * Set columns via modifier class or inline --cols CSS var.
 */
.grid {
  display: grid;
  gap: var(--space-5);
}

/* ---- Fixed column grids ---- */

.grid-1 { grid-template-columns: 1fr; }

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

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

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

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

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

/* ---- Auto-fit grids (fluid) ---- */

/* Cards: min 280px, grow to fill */
.grid-auto-card {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* KPI tiles: min 200px, max 4 per row */
.grid-auto-kpi {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Compact tiles: min 160px */
.grid-auto-compact {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* ---- KPI row — always 4-wide until narrow ---- */
.grid-kpi {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(4, 1fr);
}

/* ---- Two-panel (sidebar-style content split) ---- */
.grid-sidebar-content {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 280px 1fr;
  align-items: start;
}

.grid-sidebar-content--right {
  grid-template-columns: 1fr 280px;
}

/* ---- Gap scale overrides ---- */
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ---- Span helpers ---- */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-full    { grid-column: 1 / -1; }

.row-span-2 { grid-row: span 2; }

/* ---- Grid alignment ---- */
.grid-stretch { align-items: stretch; }
.grid-start   { align-items: start; }
.grid-center  { align-items: center; }


/* ============================================================
   03. FLEX UTILITIES
   ============================================================ */

.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { display: flex; flex-wrap: wrap; }
.inline-flex  { display: inline-flex; }

/* Alignment */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }

/* Flex grow / shrink */
.flex-1      { flex: 1; min-width: 0; }
.flex-none   { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1   { flex-grow: 1; }

/* Wrap */
.flex-nowrap { flex-wrap: nowrap; }

/* Common patterns */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Stack — flex column with gap */
.stack-2  { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3  { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4  { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-5  { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-6  { display: flex; flex-direction: column; gap: var(--space-6); }

/* Row — flex row with gap */
.row-2 { display: flex; align-items: center; gap: var(--space-2); }
.row-3 { display: flex; align-items: center; gap: var(--space-3); }
.row-4 { display: flex; align-items: center; gap: var(--space-4); }
.row-5 { display: flex; align-items: center; gap: var(--space-5); }


/* ============================================================
   04. SPACING
   ============================================================ */

/* Section vertical spacing */
.mb-section { margin-bottom: var(--space-8); }
.mb-card    { margin-bottom: var(--space-5); }
.mt-section { margin-top: var(--space-8); }

/* Padding variants for .page-content */
.page-content--compact { padding: var(--space-4); }
.page-content--wide    { padding: var(--space-8); }

/* Horizontal rule styled for luxury dark theme */
.hws-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

.hws-divider--gold {
  border-top-color: var(--hws-gold-border);
}

/* Max-width containers */
.container-sm   { max-width: 640px;  margin-left: auto; margin-right: auto; }
.container-md   { max-width: 960px;  margin-left: auto; margin-right: auto; }
.container-lg   { max-width: 1200px; margin-left: auto; margin-right: auto; }
.container-full { max-width: 100%; }


/* ============================================================
   05. TOUCH TARGETS
   ============================================================ */

/**
 * WCAG 2.5.5 / Apple HIG / Material Design all recommend
 * minimum 44–48px tap targets for touch interfaces.
 *
 * .touch-target   — 44px minimum (standard)
 * .touch-target-lg — 48px minimum (frontdesk tablets)
 *
 * Applied automatically via responsive.css on touch viewports.
 */

.touch-target {
  min-height: 44px;
  min-width: 44px;
}

.touch-target-lg {
  min-height: 48px;
  min-width: 48px;
}

/**
 * .btn--touch — button variant with guaranteed 48px height
 * Used for frontdesk quick-action buttons.
 */
.btn--touch {
  min-height: 48px;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  font-size: var(--text-base);
}

/**
 * .btn--touch-xl — large CTA for mobile / one-handed operation
 * Used for primary actions: Check-in, Check-out, Confirm.
 */
.btn--touch-xl {
  min-height: 56px;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
  letter-spacing: 0.04em;
}

/**
 * Quick-action row — prominent action buttons for frontdesk.
 * Stacks full-width on mobile, row on tablet+.
 */
.quick-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.quick-actions .btn {
  flex: 1;
  min-width: 140px;
  min-height: 48px;
  justify-content: center;
  font-size: var(--text-sm);
}

/* ---- Form touch overrides ---- */
.form-input--touch,
.form-select--touch {
  min-height: 48px;
  font-size: 16px; /* prevents iOS zoom */
  padding: var(--space-3) var(--space-4);
}


/* ============================================================
   06. VISIBILITY UTILITIES
   ============================================================ */

/* Visible only at/above breakpoint */
.show-md  { display: none; }
.show-lg  { display: none; }
.show-xl  { display: none; }

/* Hidden at/above breakpoint */
.hide-sm  { display: initial; }
.hide-md  { display: initial; }
.hide-xl  { display: initial; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ============================================================
   RESPONSIVE GRID BREAKDOWNS
   (mirror in responsive.css for all other component overrides)
   ============================================================ */

/* ≤1199px: sidebar collapses — grid stays mostly the same */
@media (max-width: 1199px) {
  .main-column {
    margin-left: var(--sidebar-collapsed);
  }

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

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

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

  .grid-sidebar-content,
  .grid-sidebar-content--right {
    grid-template-columns: 240px 1fr;
  }

  .show-xl { display: none !important; }
  .hide-xl { display: none !important; }
}

/* ≤991px: sidebar is drawer — main-column goes full width */
@media (max-width: 991px) {
  .main-column {
    margin-left: 0;
  }

  .page-content {
    padding: var(--space-5);
  }

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

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

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

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

  .grid-sidebar-content,
  .grid-sidebar-content--right {
    grid-template-columns: 1fr;
  }

  .col-span-2,
  .col-span-3,
  .col-span-4 {
    grid-column: span 1;
  }

  .show-md  { display: initial; }
  .hide-md  { display: none !important; }
}

/* ≤767px: single-column mobile */
@media (max-width: 767px) {
  .page-content {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + 64px); /* above bottom nav */
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-kpi {
    grid-template-columns: 1fr;
  }

  .grid-auto-card,
  .grid-auto-kpi {
    grid-template-columns: 1fr;
  }

  .grid-kpi {
    gap: var(--space-3);
  }

  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-full {
    grid-column: span 1;
  }

  .page-title {
    font-size: var(--text-xl);
  }

  .page-header {
    margin-bottom: var(--space-5);
  }

  .page-header-actions {
    width: 100%;
  }

  .page-header-actions .btn {
    flex: 1;
  }

  .show-md  { display: initial !important; }
  .show-lg  { display: none !important; }
  .hide-sm  { display: none !important; }
}

/* ≤480px: compact phone */
@media (max-width: 480px) {
  .page-content {
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + 64px);
  }

  .grid {
    gap: var(--space-3);
  }

  .page-title {
    font-size: var(--text-lg);
  }
}