/* ==========================================================================
   HOTEL WOOD STONE — RESPONSIVE FRAMEWORK
   Phase 9A.5 | Complete Breakpoint System
   Desktop-first. Luxury preserved at every viewport.
   ==========================================================================

   BREAKPOINT MAP
   ──────────────
   xl      ≥ 1440px   Wide desktop / large monitors
   lg      1200–1439px  Standard desktop
   md      992–1199px   Narrow desktop / collapsed sidebar
   sm      768–991px    Tablet (portrait + landscape)
   fd      768–1024px   Frontdesk tablet (touch-optimised overlay)
   xs      480–767px    Mobile landscape / large phone
   xxs     ≤ 479px      Small phone

   LAYER ORDER
   ───────────
   Styles cascade from wide → narrow.
   Each block only overrides what changes at that width.
   Touch utilities are applied at sm and below.

   TABLE OF CONTENTS
   ─────────────────
   01. XL  ≥1440px       — expanded layout
   02. MD  ≤1199px       — sidebar collapses to icons
   03. SM  ≤991px        — sidebar becomes drawer
   04. FD  768–1024px    — frontdesk tablet touch layer
   05. XS  ≤767px        — mobile single column
   06. XXS ≤479px        — compact small phone
   07. LANDSCAPE ≤767px  — rotated phone adjustments
   08. ACCESSIBILITY     — reduced-motion, high-contrast
   09. PRINT             — A4 print styles
   ========================================================================== */


/* ============================================================
   01. XL ≥ 1440px — Wide desktop
   ============================================================ */
@media (min-width: 1440px) {

  /* Wider sidebar */
  :root {
    --sidebar-width: 264px;
  }

  .main-column {
    margin-left: 264px;
  }

  /* Expanded page padding */
  .page-content {
    padding: var(--space-8);
  }

  /* 4-column KPI row stays as-is — add 5th on very wide */
  .grid-kpi {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Auto-card grid: slightly wider min */
  .grid-auto-card {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* Slightly larger page title */
  .page-title {
    font-size: var(--text-3xl);
  }

  /* Header search wider */
  .header-center {
    max-width: 560px;
  }

  /* Profile info always visible at xl */
  .header-profile-info {
    display: block;
  }

}


/* ============================================================
   02. MD ≤ 1199px — Narrow desktop / collapsed sidebar
   ============================================================ */
@media (max-width: 1199px) {

  /* ---- Sidebar collapses to icon strip ---- */
  .sidebar {
    width: var(--sidebar-collapsed);
  }

  .sidebar .sidebar-brand-text,
  .sidebar .nav-text,
  .sidebar .nav-badge,
  .sidebar .nav-label,
  .sidebar .sidebar-user-info {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .sidebar .nav-item {
    padding: 10px;
    margin: 1px var(--space-2);
    justify-content: center;
    border-left-color: transparent;
  }

  .sidebar .nav-item.active {
    border-left-color: transparent;
    background: rgba(211, 161, 115, 0.10);
  }

  .sidebar .nav-icon {
    margin: 0;
  }

  .sidebar .sidebar-footer {
    padding: var(--space-4) var(--space-3);
  }

  .sidebar .sidebar-user {
    justify-content: center;
    padding: var(--space-2);
  }

  .sidebar .sidebar-toggle-btn svg {
    transform: rotate(180deg);
  }

  /* ---- Expand back if manually toggled open ---- */
  .sidebar.force-expanded {
    width: var(--sidebar-width);
  }

  .sidebar.force-expanded .sidebar-brand-text,
  .sidebar.force-expanded .nav-text,
  .sidebar.force-expanded .nav-badge,
  .sidebar.force-expanded .nav-label,
  .sidebar.force-expanded .sidebar-user-info {
    opacity: 1;
    width: auto;
    pointer-events: auto;
  }

  /* ---- Main column offset ---- */
  .main-column {
    margin-left: var(--sidebar-collapsed);
  }

  /* ---- Header shifts ---- */
  .app-header {
    left: var(--sidebar-collapsed);
  }

  /* ---- Grid adjustments ---- */
  .grid-4     { grid-template-columns: repeat(2, 1fr); }
  .grid-5,
  .grid-6     { grid-template-columns: repeat(3, 1fr); }

  /* KPI row — 4 on ≥1200, 2×2 grid below */
  .grid-kpi   { grid-template-columns: repeat(2, 1fr); }

  /* Sidebar-content panel narrows inner panel */
  .grid-sidebar-content          { grid-template-columns: 220px 1fr; }
  .grid-sidebar-content--right   { grid-template-columns: 1fr 220px; }

  /* ---- Visibility ---- */
  .hide-md    { display: none !important; }

}


/* ============================================================
   03. SM ≤ 991px — Tablet / sidebar drawer
   ============================================================ */
@media (max-width: 991px) {

  /* ---- Sidebar becomes off-canvas drawer ---- */
  .sidebar {
    position: fixed;
    width: var(--sidebar-width) !important;  /* override collapsed width */
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out-soft),
                box-shadow var(--duration-slow) ease;
    box-shadow: none;
    z-index: var(--z-sidebar);
  }

  /* All text/labels visible in drawer */
  .sidebar .sidebar-brand-text,
  .sidebar .nav-text,
  .sidebar .nav-badge,
  .sidebar .nav-label,
  .sidebar .sidebar-user-info {
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .sidebar .nav-item {
    padding: 10px var(--space-5) !important;
    margin: 1px var(--space-2) !important;
    justify-content: flex-start !important;
    border-left-color: transparent;
  }

  .sidebar .nav-item.active {
    border-left-color: var(--hws-gold) !important;
    background: none !important;
  }

  .sidebar .nav-item.active::before {
    background: linear-gradient(90deg, rgba(211,161,115,0.13) 0%, transparent 100%) !important;
  }

  .sidebar .sidebar-toggle-btn {
    display: none;
  }

  /* Open state */
  .sidebar.drawer-open {
    transform: translateX(0);
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.70);
  }

  /* Backdrop overlay */
  .sidebar-overlay {
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slow) ease;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- Header goes edge-to-edge ---- */
  .app-header {
    left: 0 !important;
    padding: 0 var(--space-4);
  }

  /* Main column: no sidebar offset */
  .main-column {
    margin-left: 0 !important;
  }

  /* Hamburger visible */
  .header-hamburger {
    display: flex;
  }

  /* ---- Grid adjustments ---- */
  .grid-3     { grid-template-columns: repeat(2, 1fr); }
  .grid-5,
  .grid-6     { grid-template-columns: repeat(2, 1fr); }
  .grid-kpi   { grid-template-columns: repeat(2, 1fr); }

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

  /* Collapse span helpers to single col */
  .col-span-2,
  .col-span-3,
  .col-span-4 {
    grid-column: span 1;
  }

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

  /* ---- Modal size override — wider on tablet ---- */
  .modal {
    max-width: calc(100vw - 48px);
  }

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

}


/* ============================================================
   04. FD  768–1024px — Frontdesk tablet (touch-first)
   Touch targets, large buttons, streamlined navigation.
   Frontdesk staff check guests in/out standing at reception.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ---- Touch targets — everything tappable is ≥48px ---- */
  .btn {
    min-height: 48px;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    font-size: var(--text-base);
  }

  .btn-sm {
    min-height: 40px;
    font-size: var(--text-sm);
  }

  .btn-xs {
    min-height: 36px;
  }

  /* Quick-action buttons become large full-width tiles */
  .quick-actions .btn {
    min-height: 56px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
  }

  /* ---- Form inputs: large and legible ---- */
  .form-input,
  .form-select,
  .form-textarea {
    min-height: 48px;
    font-size: 16px; /* prevent iOS zoom */
    padding: var(--space-3) var(--space-4);
  }

  /* Table select / search */
  .table-search-input,
  .header-search-input {
    min-height: 44px;
    font-size: 16px;
  }

  /* ---- Nav items in sidebar drawer: taller rows ---- */
  .sidebar .nav-item {
    padding: 13px var(--space-5) !important;
  }

  /* ---- Header icons: larger tap area ---- */
  .header-icon-btn {
    width: 44px;
    height: 44px;
  }

  .header-hamburger {
    width: 44px;
    height: 44px;
  }

  /* ---- Table action buttons: larger ---- */
  .table-action-btn {
    width: 36px;
    height: 36px;
  }

  /* ---- Modal: centre on tablet, not bottom-sheet ---- */
  .modal-overlay {
    align-items: center;
    padding: var(--space-6);
  }

  .modal {
    border-radius: var(--radius-xl);
    max-height: 85vh;
  }

  /* ---- KPI cards: slightly taller for readability ---- */
  .kpi-card {
    padding: var(--space-6);
  }

  .kpi-value {
    font-size: 2rem;
  }

  /* ---- Pagination: larger page buttons ---- */
  .page-btn {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  /* ---- Dropdown items: taller ---- */
  .dropdown-item {
    padding: 14px var(--space-4);
    font-size: var(--text-base);
  }

}


/* ============================================================
   05. XS ≤ 767px — Mobile / single column
   ============================================================ */
@media (max-width: 767px) {

  /* ---- Full-column grid everywhere ---- */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-kpi,
  .grid-auto-card,
  .grid-auto-kpi,
  .grid-auto-compact {
    grid-template-columns: 1fr;
  }

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

  /* ---- Page content — leave space for bottom nav ---- */
  .page-content {
    padding: var(--space-4);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- Page header stacks vertically ---- */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

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

  .page-header-actions .btn {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }

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

  /* ---- Section header stacks ---- */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-actions {
    width: 100%;
  }

  .section-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* ---- Quick actions go full-width ---- */
  .quick-actions {
    flex-direction: column;
  }

  .quick-actions .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  /* ---- Cards ---- */
  .card-header {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .card-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .kpi-card {
    padding: var(--space-4);
  }

  .kpi-value {
    font-size: var(--text-2xl);
  }

  /* ---- Buttons: full-width primary actions on mobile ---- */
  .btn--mobile-full {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }

  /* Touch-friendly all buttons */
  .btn {
    min-height: 44px;
    font-size: var(--text-sm);
  }

  /* ---- Tables: scroll wrapper on mobile ---- */
  .data-table-wrapper {
    border-radius: var(--radius-md);
  }

  /* Card-view table: transform rows to stacked cards */
  .data-table--card-mobile {
    display: block;
  }

  .data-table--card-mobile thead {
    display: none; /* hide column headers */
  }

  .data-table--card-mobile tbody,
  .data-table--card-mobile tr {
    display: block;
  }

  .data-table--card-mobile tr {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    position: relative;
    box-shadow: none;
  }

  .data-table--card-mobile tr:hover {
    background: var(--surface-1);
    border-color: var(--border-medium);
  }

  .data-table--card-mobile td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border: none;
    font-size: var(--text-sm);
    white-space: normal;
    min-height: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .data-table--card-mobile td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* data-label attribute provides the field name on mobile */
  .data-table--card-mobile td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--hws-stone);
    flex-shrink: 0;
    margin-right: var(--space-3);
    padding-top: 2px;
    min-width: 90px;
  }

  /* Actions cell on card view */
  .data-table--card-mobile .table-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .data-table--card-mobile .table-action-btn {
    width: 36px;
    height: 36px;
  }

  /* ---- Table toolbar: stacks ---- */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .table-toolbar-left,
  .table-toolbar-right {
    width: 100%;
  }

  .table-search {
    width: 100%;
  }

  .table-toolbar-right {
    justify-content: flex-end;
  }

  /* ---- Table pagination: compact ---- */
  .table-pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .table-pagination-controls {
    width: 100%;
    justify-content: center;
  }

  /* ---- Modals: bottom-sheet on mobile ---- */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .modal::before {
    left: 35%;
    right: 35%;
  }

  /* Drag handle on bottom-sheet modals */
  .modal::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(211, 161, 115, 0.25);
    pointer-events: none;
  }

  .modal-overlay.open .modal {
    transform: translateY(0);
  }

  .modal--sm {
    max-width: 100%;
  }

  .modal-header {
    padding: var(--space-6) var(--space-5) var(--space-4);
    padding-top: var(--space-7); /* account for drag handle */
  }

  .modal-body {
    padding: var(--space-4) var(--space-5);
  }

  .modal-footer {
    padding: var(--space-4) var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .modal-footer .btn {
    flex: 1;
    min-height: 48px;
    justify-content: center;
  }

  /* ---- Confirm modal: centred on mobile too ---- */
  .modal--confirm .modal-body {
    padding: var(--space-6) var(--space-5) var(--space-4);
  }

  /* ---- Alerts ---- */
  .alert {
    font-size: var(--text-sm);
  }

  /* ---- Toast: full width on mobile ---- */
  .toast-stack {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(72px + env(safe-area-inset-bottom, 4px));
  }

  .toast {
    min-width: unset;
    width: 100%;
  }

  /* ---- Header: compact ---- */
  .header-center {
    display: none; /* search hidden on mobile — full search page instead */
  }

  .header-right {
    gap: var(--space-1);
  }

  /* ---- Profile dropdown: anchors to right edge ---- */
  .profile-dropdown {
    right: 0;
    left: auto;
    width: 220px;
  }

  /* ---- Sidebar overlay stays visible ---- */
  .sidebar-overlay {
    display: block;
  }

  /* ---- Forms in modals: full width, touch-sized ---- */
  .modal form .form-input,
  .modal form .form-select,
  .modal form .form-textarea {
    font-size: 16px; /* prevent iOS zoom */
    min-height: 48px;
  }

  /* ---- Visibility ---- */
  .show-md    { display: initial !important; }
  .hide-sm    { display: none !important; }

  /* ============================================================
     MOBILE BOTTOM NAVIGATION BAR
     Persistent tab bar at bottom for primary navigation.
     Only shown on mobile (≤767px).
     Items match the most-used sidebar sections for each role.
     ============================================================ */

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10, 2, 2, 0.96);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
    z-index: calc(var(--z-header) + 1);
    align-items: stretch;
  }

  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: var(--space-2) var(--space-1) 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--hws-stone);
    border: none;
    background: transparent;
    position: relative;
    transition: color var(--duration-fast) ease;
    min-height: 60px;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-item:active {
    background: rgba(211, 161, 115, 0.06);
  }

  .mobile-nav-item.active {
    color: var(--hws-gold);
  }

  .mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--hws-gold);
    border-radius: 0 0 2px 2px;
  }

  .mobile-nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .mobile-nav-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
  }

  .mobile-nav-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
  }

  /* Badge on bottom nav icon */
  .mobile-nav-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--hws-burgundy);
    border: 1.5px solid var(--hws-black);
    color: var(--hws-ivory);
    font-size: 9px;
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
  }

  /* "More" button opens sidebar drawer */
  .mobile-nav-item--more {
    color: var(--hws-stone);
  }

}


/* ============================================================
   06. XXS ≤ 479px — Small phone
   ============================================================ */
@media (max-width: 479px) {

  /* Tighter page padding */
  .page-content {
    padding: var(--space-3);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Smaller gap on grids */
  .grid { gap: var(--space-3); }

  /* Page title compact */
  .page-title {
    font-size: var(--text-lg);
  }

  .page-subtitle {
    font-size: var(--text-xs);
  }

  /* KPI card compact */
  .kpi-card {
    padding: var(--space-3) var(--space-4);
  }

  .kpi-value {
    font-size: var(--text-xl);
  }

  .kpi-label {
    font-size: 10px;
  }

  /* Card padding */
  .card-header {
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  .card-body {
    padding: var(--space-4);
  }

  .card-footer {
    padding: var(--space-3) var(--space-4);
  }

  .card-title {
    font-size: var(--text-sm);
  }

  /* Login card: bottom-sheet on small phone */
  .login-main {
    justify-content: flex-end;
  }

  .login-card {
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }

  /* Modal header smaller text */
  .modal-title {
    font-size: var(--text-base);
  }

  /* Table toolbar: tighter */
  .table-per-page {
    display: none; /* hide per-page selector on xxs */
  }

  /* Header hamburger and icons: generous tap area */
  .header-hamburger,
  .header-icon-btn {
    width: 40px;
    height: 40px;
  }

  /* Profile avatar only (no name) */
  .header-profile-info {
    display: none;
  }

  .header-profile-chevron {
    display: none;
  }

  /* Toast: tighter */
  .toast {
    padding: var(--space-3);
  }

  /* Sidebar overlay: full screen */
  .sidebar.drawer-open {
    width: 100% !important;
    max-width: 320px;
  }

  /* Bottom nav icons slightly smaller */
  .mobile-nav-icon svg {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-label {
    font-size: 9px;
  }

}


/* ============================================================
   07. LANDSCAPE PHONE ≤ 767px × ≤ 450px tall
   When phone is rotated, vertical space is critical.
   ============================================================ */
@media (max-width: 767px) and (max-height: 450px) and (orientation: landscape) {

  /* Bottom nav hidden — not enough height, sidebar used instead */
  .mobile-bottom-nav {
    display: none;
  }

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

  /* Modal stays centred, not bottom-sheet */
  .modal-overlay {
    align-items: center;
    padding: var(--space-4);
  }

  .modal {
    border-radius: var(--radius-xl);
    max-height: 90vh;
    transform: translateY(20px) scale(0.97);
  }

  .modal-overlay.open .modal {
    transform: translateY(0) scale(1);
  }

  .modal::after {
    display: none; /* no drag handle in landscape */
  }

  /* Header: smaller */
  :root {
    --header-height: 52px;
  }

  /* KPI cards: 2 columns in landscape */
  .grid-kpi {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

}


/* ============================================================
   08. ACCESSIBILITY
   ============================================================ */

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {

  /* Kill all transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Exception: opacity-only fades are safe */
  .modal-overlay,
  .profile-dropdown,
  .page-loader {
    transition: opacity 0.15s ease !important;
  }

  /* Skeleton: static bg */
  .skeleton {
    animation: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* Spinner: static ring */
  .spinner,
  .page-loader-spinner {
    animation: none !important;
    border-top-color: var(--hws-gold);
  }

}

/* ---- High contrast ---- */
@media (prefers-contrast: high) {

  :root {
    --border-subtle:  rgba(211, 161, 115, 0.30);
    --border-soft:    rgba(211, 161, 115, 0.45);
    --border-medium:  rgba(211, 161, 115, 0.65);
    --border-strong:  rgba(211, 161, 115, 0.85);
  }

  .card,
  .kpi-card,
  .data-table-wrapper {
    border-width: 1.5px;
  }

  .nav-item:hover,
  .nav-item.active {
    border-left-width: 3px;
  }

  .btn-primary {
    outline: 2px solid var(--hws-gold);
    outline-offset: 2px;
  }

  .form-input:focus,
  .form-select:focus {
    outline: 2px solid var(--hws-gold);
    outline-offset: 0;
    box-shadow: none;
  }

}

/* ---- Focus-visible (keyboard navigation) ---- */
:focus-visible {
  outline: 2px solid rgba(211, 161, 115, 0.70);
  outline-offset: 3px;
  border-radius: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================================
   09. PRINT
   A4 landscape. Light theme. Hide all chrome.
   ============================================================ */
@media print {

  /* Force light theme for print */
  :root {
    --hws-black:   #FFFFFF;
    --hws-espresso: #F8F4F1;
    --hws-ivory:   #1A0D0A;
    --hws-beige:   #2A1A16;
    --hws-stone:   #5A4A46;
  }

  /* Hide navigation chrome */
  .sidebar,
  .sidebar-overlay,
  .app-header,
  .mobile-bottom-nav,
  .toast-stack,
  .modal-overlay,
  .page-header-actions,
  .table-toolbar-right,
  .table-pagination,
  .table-actions,
  .btn,
  .header-hamburger,
  .header-right {
    display: none !important;
  }

  /* Full width content */
  .app-layout {
    display: block;
  }

  .main-column {
    margin-left: 0 !important;
  }

  .page-content {
    padding: 0 !important;
  }

  /* Page breaks */
  .card,
  .data-table-wrapper {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .content-section {
    page-break-before: auto;
  }

  /* Typography */
  .page-title {
    font-size: 18pt;
    color: #1A0D0A;
  }

  .card-title,
  .section-title {
    font-size: 13pt;
    color: #1A0D0A;
  }

  /* Tables: readable on print */
  .data-table,
  .data-table thead th,
  .data-table tbody td {
    color: #1A0D0A;
    border-color: #D0C0B8;
    font-size: 9pt;
  }

  .data-table thead {
    background: #F0E8E4 !important;
  }

  .data-table thead th {
    color: #5A4A46;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* KPI values */
  .kpi-value {
    color: #1A0D0A;
    font-size: 20pt;
  }

  .kpi-label {
    color: #5A4A46;
  }

  /* Remove shadows and blurs */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Print page setup */
  @page {
    size: A4 landscape;
    margin: 16mm 20mm;
  }

}