/* Component styling: modal, overlay, drawer, header/footer basics */
@layer components {
  .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease}
  .modal{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-xl);max-width:90vw;max-height:90vh;overflow:hidden}
  .modal-header,.modal-footer{padding:var(--space-4) var(--space-6);border-color:var(--color-border)}
  .modal-header{border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:stretch}
  .modal-header .modal-title{flex:1;text-align:left}
  .modal-body{padding:var(--space-6)}

  /* Overlay panel */
  .overlay-panel{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-lg);max-width:95vw;max-height:90vh;overflow:hidden;pointer-events:auto;display:flex;flex-direction:column;transition:width .3s ease,height .3s ease,opacity .18s ease,transform .18s ease}
  .overlay-panel.is-max{max-height:95vh;max-width:95vw}
  /* When resize is disabled (maximize), animate only opacity/transform (not width/height) */
  .overlay-panel[data-resize-disabled="true"]{transition:opacity .18s ease, transform .18s ease !important}
  .fx-panel-appear{animation:panelMaxIn .18s ease-out}
  @keyframes panelMaxIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
  @media (prefers-reduced-motion: reduce){
    .overlay-panel,.overlay-panel[data-resize-disabled="true"],.fx-panel-appear,.drawer{transition:none !important;animation:none !important}
  }
  .overlay-panel.pos-center{margin:auto}
  .overlay-panel.pos-tr{position:absolute;top:16px;right:16px}
  .overlay-panel.pos-br{position:absolute;bottom:16px;right:16px}
  .overlay-panel.pos-tl{position:absolute;top:16px;left:16px}
  .overlay-panel.pos-bl{position:absolute;bottom:16px;left:16px}
  .panel-header{padding:var(--space-4);display:flex;justify-content:space-between;align-items:stretch;border-bottom:1px solid var(--color-border)}
  .panel-body{padding:var(--space-4);flex:1;min-height:0;display:flex;flex-direction:column}
  .panel-body > #nxs-panel-slot{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .panel-body.flush{padding:0}
  /* Panel footer baseline + optional sticky behavior */
  .panel-footer{border-top:1px solid var(--color-border);flex-shrink:0}
  .panel-footer-sticky{position:sticky;bottom:0;background:var(--color-bg);z-index:1}

  /* Wizard navigation footer - flex item at bottom, content scrolls above */
  .wizard-nav-footer{flex-shrink:0;z-index:10;background:var(--color-surface);border-top:1px solid var(--color-border);padding:0!important}
  .wizard-nav-footer-inner{padding:var(--space-4);max-width:56rem;margin:0 auto}

  /* Panel header title/controls layout - same as drawer */
  .panel-header .panel-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
  }
  
  /* Title expands to push controls right */
  .panel-header .panel-title{
    flex:1;
    text-align:left;
  }
  
  /* Controls stay right */
  .panel-header .panel-controls{
    flex-shrink:0;
  }

  /* Toasts */
  .toast-wrap{position:fixed;z-index:10000;pointer-events:none}
  .toast-wrap.pos-tr{top:16px;right:16px}
  .toast-wrap.pos-br{bottom:16px;right:16px}
  .toast-wrap.pos-tl{top:16px;left:16px}
  .toast-wrap.pos-bl{bottom:16px;left:16px}
  .toast{pointer-events:auto;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:8px 10px;display:flex;gap:8px;align-items:center}
  .toast-info{border-color:var(--color-info)}
  .toast-success{border-color:var(--color-success)}
  .toast-warning{border-color:var(--color-warning)}
  .toast-danger{border-color:var(--color-danger)}

  /* Popover */
  .popover{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md)}
  .popover .popover-content{padding:var(--space-3)}

  .drawer{position:fixed;top:0;bottom:0;left:0;width:320px;background:var(--color-bg);color:var(--color-text);border-right:1px solid var(--color-border);transform:translateX(-100%);transition:transform .3s ease,width .3s ease,height .3s ease;will-change:transform;z-index:500;display:flex;flex-direction:column}
  .drawer.right{right:0;left:auto;border-right:none;border-left:1px solid var(--color-border);transform:translateX(100%)}
  .drawer.top{top:0;bottom:auto;left:0;right:0;height:320px;width:auto;border-bottom:1px solid var(--color-border);border-right:none;transform:translateY(-100%)}
  .drawer.bottom{bottom:0;top:auto;left:0;right:0;height:320px;width:auto;border-top:1px solid var(--color-border);border-right:none;transform:translateY(100%)}
  .drawer.open{transform:translateX(0)}
  .drawer.top.open,.drawer.bottom.open{transform:translateY(0)}

  /* Drawer Sizing System */
  .drawer.drawer-sm { width: 400px; }
  .drawer.drawer-md { width: 600px; }
  .drawer.drawer-lg { width: 800px; }

  .drawer-header{padding:var(--space-4);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border)}
  .drawer-body{padding:var(--space-4);overflow:auto}
  .drawer-body.flush{padding:0}
  .drawer-body.flush{height:100%}
  .drawer-body.flush #nxs-drawer-slot{height:100%}
  .drawer-body.flush #nxs-menu-widget-slot{height:100%}
  .drawer .menu-widget{height:100%}
  .drawer .menu-widget .menu-list{height:100%;overflow:auto;padding-left:10px;padding-right:10px}

  /* Option drawer specific styling */
  .drawer.bottom{min-height:200px;max-height:60vh}
  .drawer.bottom .drawer-body{max-height:calc(60vh - 64px);overflow-y:auto}
  /* Panel inside drawer: ensure body is scrollable */
  .drawer.bottom .panel-body{overflow-y:auto}
  .drawer.bottom .panel-body > #nxs-panel-slot{overflow:auto}
  /* Drawer fixed footer layout: content fills remaining height without page scroll */
  .drawer-content-column{display:flex;flex-direction:column;height:100%;min-height:0}
  .drawer-footer{border-top:1px solid var(--color-border);padding:var(--space-3);display:flex;justify-content:flex-end;flex-shrink:0}
  /* Make the menu list area flex and scroll internally only */
  #nxs-menu-widget-slot{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden}
  
  /* Fix for new component-based drawer architecture */
  #nxs-drawer-main-container{height:100%;display:flex;flex-direction:column}
  .drawer-main{flex:1;display:flex;flex-direction:column;min-height:0}
  
  /* Menu drawer specific styling */
  #nxs-drawer-main-container:has([id*="menu"]){background:var(--color-brand)}
  .drawer-main:has([id*="menu"]){background:var(--color-brand)}
  
  /* Mobile drawer header styling - match pageHeader */
  .drawer .drawer-header{
    height:48px;
    min-height:48px;
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 var(--space-3);
    width:100%;
    box-sizing:border-box;
  }
  
  /* Flutter-like layout: Title - Spacer - Controls */
  .drawer .drawer-header .drawer-header-row{
    display:flex;
    align-items:center;
    width:100%;
  }
  
  /* Title stays left */
  .drawer .drawer-header .drawer-title{
    flex-shrink:0;
  }
  
  /* Spacer expands to push controls right */
  .drawer .drawer-header .drawer-spacer{
    flex:1;
  }
  
  /* Controls container - never shrinks, stays right */
  .drawer .drawer-header .drawer-controls{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex-shrink:0;
  }
  
  /* Hide default drawer buttons for mobile menu (since it uses controlsAddress) */
  .drawer:has([id*="menu"]) .drawer-header #nxs-drawer-close,
  .drawer:has([id*="menu"]) .drawer-header #nxs-drawer-toggle-slot,
  .drawer:has([id*="menu"]) .drawer-header #nxs-drawer-toggle-type{
    display:none;
  }
  /* Hide header nav buttons container entirely on mobile */
  .bp-mobile #nxs-header-buttons{display:none !important}
  
  /* View option navigation styling */
  .view-option-nav .btn{justify-content:flex-start;text-align:left;min-height:48px}
  .view-option-nav .view-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
  .view-option-nav .view-label{flex:1;padding-left:var(--space-2)}
  
  /* Admin actions section */
  .admin-actions-divider{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}
  .admin-actions-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:var(--space-2)}
  
  /* Responsive view selector hamburger */
  .view-selector-hamburger{position:relative}
  .view-selector-hamburger:hover{background:var(--color-surface-hover)}
  
  /* Animation for option drawer */
  .drawer.bottom.opening{animation:slideUpIn 0.3s ease-out}
  .drawer.bottom.closing{animation:slideDownOut 0.3s ease-in}
  
  @keyframes slideUpIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes slideDownOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
  }

  .site-header{position:sticky;top:0;z-index:300;border-bottom:1px solid var(--color-border);height:var(--header-height);background:var(--color-surface)}
  /* Menu widget layout and expand/collapse behavior */
  .menu-widget{display:block;overflow-x:hidden}
  .menu-widget.vertical .menu-list{list-style:none;margin:0;padding:var(--space-2) 10px;display:flex;flex-direction:column;gap:10px;overflow-x:hidden}
  .menu-item{width:100%;justify-content:flex-start;gap:var(--space-3);padding:5px 10px;align-items:center;height:calc(var(--sidebar-width-compact) - 20px);min-height:calc(var(--sidebar-width-compact) - 20px)}
  .menu-icon{width:2.5rem;display:inline-flex;align-items:center;justify-content:center;padding-left:0}
  /* Sidebar surface stays brand; items are neutral by default */
  .drawer .menu-widget{background:var(--color-brand)}
  .menu-item{background:transparent}
  /* Inactive state: always-dark neutral to match header */
  .menu-item{color:var(--color-inactive-dark)}
  .menu-item .menu-icon .ti{color:var(--color-inactive-dark)}
  .menu-item:hover{background:var(--color-surface-2)}
  .menu-item:hover{color:var(--color-text)}
  .menu-item:hover .menu-icon .ti{color:var(--color-text)}
  .menu-item.active{background:var(--color-surface)}
  .menu-item.active{color:var(--color-text)}
  .menu-item.active .menu-icon .ti{color:var(--color-text)}
  .menu-text{display:inline-block;white-space:nowrap}
  /* When collapsed, hide label and center icon */
  body.menu-visible:not(.menu-expanded) .menu-text{display:none}
  body.menu-visible:not(.menu-expanded) .menu-item{justify-content:flex-start;height:calc(var(--sidebar-width-compact) - 20px);min-height:calc(var(--sidebar-width-compact) - 20px)}
  /* Expanded keeps same tile height; only width changes */

  /* Rental queue progress badge (3-dot indicator) */
  .menu-rental-progress{display:flex;gap:3px;position:absolute;top:6px;right:6px;z-index:1}
  .progress-dot{width:8px;height:8px;border-radius:50%;background:var(--color-muted-subtle);border:1px solid var(--color-border);transition:all 0.2s ease}
  .progress-dot.active{background:var(--color-brand);border-color:var(--color-brand);box-shadow:0 0 4px var(--color-brand-alpha)}
  .progress-dot.count-badge{width:auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--color-brand);border-color:var(--color-brand);font-size:10px;font-weight:700;line-height:14px;text-align:center;color:white;display:flex;align-items:center;justify-content:center}
  /* Subtle pulse animation for active dots */
  @keyframes pulse-subtle{0%,100%{opacity:1}50%{opacity:0.7}}
  .progress-dot.active{animation:pulse-subtle 2s ease-in-out infinite}

  /* Menu item badge (for queue counts, notifications, etc.) */
  .menu-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:700;line-height:18px;text-align:center;color:white;display:inline-flex;align-items:center;justify-content:center}
  .menu-badge.badge-warning{background:var(--color-warning)}
  .menu-badge.badge-danger{background:var(--color-danger)}
  .menu-badge.badge-brand{background:var(--color-brand)}
  /* Hide text badge when menu is collapsed, show icon badge instead */
  body.menu-visible:not(.menu-expanded) .menu-badge{display:none}
  /* Icon badge - shows on the icon when menu collapsed */
  .menu-icon-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--color-warning);color:white;font-size:10px;font-weight:700;line-height:16px;text-align:center;display:none}
  body.menu-visible:not(.menu-expanded) .menu-icon-badge{display:flex;align-items:center;justify-content:center}

  /* Floating Action Button (FAB) - Mobile only */
  .fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--color-brand);color:white;border:none;box-shadow:0 4px 12px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;z-index:1000}
  .fab:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,0.4)}
  .fab:active{transform:scale(0.95)}
  /* FAB badge for progress indicator */
  .fab-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-danger);color:white;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-bg);box-shadow:0 2px 4px rgba(0,0,0,0.2)}

  /* Main content container - this is where we enable scrollable children */
  /* 🚨 CRITICAL: These properties fix iPad Safari/Chrome height collapse issue */
  /* DO NOT REMOVE: display:flex, flex-direction:column, min-height:0 - required for cross-platform */
  .main-content-container{
    flex:1;
    min-height:0;
    display:flex;                    /* 🔥 ESSENTIAL: Without this, containers collapse on iPad */
    flex-direction:column;           /* 🔥 ESSENTIAL: Enables height flow to children */
    overflow:hidden;
    /* ❌ NEVER ADD: height:100% - conflicts with flex sizing */
  }
  /* Ensure mainShell body fills its card container on all engines (iPad Safari fix) */
  /* 🚨 CRITICAL: This was the root cause of content disappearing on iPad */
  /* Previously only had min-height:0 - missing display:flex caused height collapse */
  #nxs-shell-body{
    /* Essential flex properties for proper height flow */
    flex: 1;
    min-height: 0;
    display: flex;                   /* 🔥 ESSENTIAL: Added to fix iPad height collapse */
    flex-direction: column;          /* 🔥 ESSENTIAL: Enables vertical stacking */
    /* ❌ NEVER ADD: height:100%, padding-bottom - causes overflow conflicts */
  }
  /* Keep-alive view wrappers should fill available space without creating page scroll */
  .keepalive-view{height:100%;min-height:0;block-size:100%;overflow:hidden}
  @supports (height:-webkit-fill-available){.keepalive-view{height:-webkit-fill-available}}
  .keepalive-view > .column{height:100%;min-height:0}
  .bp-desktop .main-content-container,.bp-tablet .main-content-container{padding-left:0}
  .bp-mobile .main-content-container{padding:0 10px}
  
  /* Dynamic page wrapper elements need proper flex behavior */
  /* 🚨 CRITICAL: Wrappers created by dynamic.js need flex properties for height flow */
  .main-content-container > div.flex-1{
    display: flex;                   /* 🔥 ESSENTIAL: Makes wrapper a flex container */
    flex-direction: column;          /* 🔥 ESSENTIAL: Enables height flow to mainShell */
    /* These wrappers get .flex-1 and .min-h-0 classes from dynamic.js */
  }
  
  /* Scrollable area utility - for content components to designate scrollable regions */
  /* 🚨 CRITICAL: Changed flex from 1 1 auto to 1 1 0 for iPad compatibility */
  .scrollable-area{
    flex: 1 1 0;                     /* 🔥 ESSENTIAL: Zero basis required for iPad Safari */
    overflow: auto;                  /* 🔥 ESSENTIAL: Enables scrolling */
    min-height: 0;                   /* 🔥 ESSENTIAL: Allows flex shrinking */
    width: 100%;
    max-width: 100%;
    padding-top: 0;                  /* 🔥 ESSENTIAL: Sticky banner must start at top edge */
    padding-right: 8px;
    padding-bottom: var(--content-bottom-gap);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    /* ❌ NEVER CHANGE: flex: 1 1 auto breaks iPad height calculation */
  }
  .no-x-scroll{overflow-x:hidden}
  .no-y-scroll{overflow-y:hidden}
  
  /* Scrollable container - parent that enables scrollable children */
  .scrollable-container{
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  /* Flex utilities for scrollable layouts */
  .flex-shrink-0{flex-shrink: 0;}
  /* .flex-1 removed - redundant with elements.css definition */
  /* Hide static sidebar on mobile; use drawer instead */

  /* Icon sizing helpers (Tabler icons) */
  .icon{display:inline-block;line-height:1}
  .icon-xs{font-size:.875rem}
  .icon-sm{font-size:1rem}
  .icon-md{font-size:1.25rem}
  .icon-lg{font-size:1.5rem}
  .icon-xl{font-size:2rem}
  .icon-card.mr-4{font-size:2rem;padding-right:0.5em}

  /* Circular icon wrapper for profile/avatar displays */
  .icon-circle{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background:var(--color-bg-subtle);border-radius:50%;flex-shrink:0}
  .icon-circle .ti{font-size:1.5rem;color:var(--color-brand)}

  /* Profile selector modal sizing */
  .modal-profile-selector{min-width:500px;max-width:600px}

  /* Header hamburger aligns with compact menu tile */
  .hamburger-btn{width:calc(var(--sidebar-width-compact) - 20px);height:calc(var(--sidebar-width-compact) - 20px);display:inline-flex;align-items:center;justify-content:center;padding:0}

  /* Hide hamburger button in desktop mode */
  body.bp-desktop .hamburger-btn.hide-desktop {
    display: none !important;
  }
}

/* Themed internal scrollbars with smooth animations */
/* Main shell root should fill remaining space across engines */
.main-shell-root{
  height:100%;
  block-size:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}
@supports (height:-moz-available){.main-shell-root{height:-moz-available}}
@supports (height:-webkit-fill-available){.main-shell-root{height:-webkit-fill-available}}
.scrollbar-themed{
  scrollbar-width:thin;
  scrollbar-color:rgba(245,158,11,0.3) transparent;
  transition: scrollbar-color 0.2s ease;
}
.scrollbar-themed::-webkit-scrollbar{width:15px;height:10px;background:transparent;opacity:0;transition:opacity 0.3s ease}
.scrollbar-themed::-webkit-scrollbar-button{width:0;height:0;display:none}
.scrollbar-themed::-webkit-scrollbar-track{background:transparent;border-radius:8px;border-left:5px solid transparent;background-clip:padding-box}
.scrollbar-themed::-webkit-scrollbar-track:hover{background:transparent}
.scrollbar-themed::-webkit-scrollbar-thumb{background-color:rgba(245,158,11,0.3);border-radius:8px;transition:background-color 0.2s ease}
.scrollbar-themed::-webkit-scrollbar-thumb:hover{background-color:var(--color-brand)}
.scrollbar-themed::-webkit-scrollbar-corner{background:transparent}

/* Scrollbar fade-in on content scroll or hover */
.scrollable-area:hover::-webkit-scrollbar,
.scrollable-area.scrolling::-webkit-scrollbar,
.scrollbar-themed:hover::-webkit-scrollbar{opacity:1}

/* Breadcrumb utility styles */
.breadcrumb{display:flex;align-items:center;gap:6px}
.breadcrumb .crumb{cursor:pointer}
.breadcrumb .crumb[aria-current="page"],.breadcrumb .current{color:var(--color-text-muted);cursor:default}

/* Desktop-only icon scaling (~30% smaller) */
.bp-desktop .icon-xl{font-size:1.4rem}
.bp-desktop .menu-icon{width:1.75rem;padding-left:10px}
.bp-desktop .hamburger-btn{width:calc(var(--sidebar-width-compact) - 20px);height:calc(var(--sidebar-width-compact) - 20px)}

/* Page layout components */
.loading-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-surface) 100%);position:relative;overflow:hidden;box-shadow:inset 0 0 200px rgba(0,0,0,0.4)}
.splash-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-surface) 100%);position:relative;overflow:hidden;box-shadow:inset 0 0 200px rgba(0,0,0,0.4)}


/* Hidden login hotspot button in top-left corner */
.hidden-login-hotspot{position:fixed;top:0;left:0;width:80px;height:80px;background:transparent;border:none;cursor:pointer;z-index:100;opacity:0;transition:opacity 0.2s ease}
.hidden-login-hotspot:hover{opacity:0.1;background:var(--color-brand)}

/* Loading/Splash specific containers */
.loading-container{text-align:center;max-width:480px;width:100%;padding:2rem;position:relative;z-index:1}
.splash-container{text-align:center;position:relative;z-index:1}
.splash-logo{margin-bottom:2rem}
/* Fixed centered hero logo container used by splash/loading - lifted 50px higher */
.hero-fixed-center{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;transform:translateY(-50px)}
/* Unified stage area for widgets below hero */
.hero-stage{position:relative;z-index:20;max-width:540px;width:100%;margin-left:auto;margin-right:auto;padding:0 24px 120px 24px;display:flex;flex-direction:column;align-items:center;margin-top:max(300px, calc(var(--hero-logo-height, 80px) + 140px));min-height:400px}
/* Mode-specific offsets so all widgets share the same visual space - loading adjusted for -50px logo offset */
.hero-stage.login{margin-top:max(380px, calc(var(--hero-logo-height, 80px) + 170px))}
.hero-stage.loading{margin-top:max(330px, calc(var(--hero-logo-height, 80px) + 170px))}
/* Back-compat alias */
.below-hero{margin-top:max(220px, calc(var(--hero-logo-height, 80px) + 60px))}
.splash-login{margin-bottom:0;max-width:400px;width:100%;display:flex;justify-content:center;min-height:280px}
.splash-register{margin-bottom:0;max-width:400px;width:100%;display:flex;justify-content:center;min-height:280px}
.splash-spinner{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;transition:opacity 0.3s ease}
.spinner-ring{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-brand);border-radius:50%;transition:all 0.3s ease;animation:spinnerRotate 1.2s linear infinite,spinnerPulse 2s ease-in-out infinite}
.spinner-ring.success{border-color:var(--color-success);border-top-color:var(--color-success);animation:none;position:relative}

@keyframes spinnerRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes spinnerPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(0.95)}}
.splash-status{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);color:var(--color-text-muted);font-size:0.95rem;font-weight:500;opacity:0.8;text-shadow:0 0 20px rgba(245,158,11,0.3);transition:opacity 0.3s ease,text-shadow 0.3s ease;white-space:nowrap}

/* Background patterns */
.loading-page::before,.splash-page::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23f59e0b" fill-opacity="0.03"><circle cx="30" cy="30" r="1"/></g></g></svg>');pointer-events:none;z-index:1}

/* Animated gradient glow effect for depth - bottom placement with fade-in */
.loading-page::after,.splash-page::after{content:'';position:absolute;bottom:-40%;left:10%;width:80%;height:100%;background:radial-gradient(ellipse,rgba(245,158,11,0.2) 0%,rgba(245,158,11,0.1) 30%,transparent 70%);pointer-events:none;animation:glowFadeIn 1.5s ease-out forwards,floatGlow 20s ease-in-out 1.5s infinite;z-index:0;opacity:0}

@keyframes glowFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes floatGlow{0%,100%{transform:translateX(0) scale(1);opacity:1}50%{transform:translateX(80px) scale(1.1);opacity:0.6}}

/* Progress components */
.loading-progress{width:100%;margin-top:80px}
.splash-container .splash-spinner{display:none}
.splash-container.loading .splash-login{display:none !important}
.splash-container.loading .splash-spinner{display:flex !important;justify-content:center;margin-top:16px}
.progress-bar-container{position:relative;width:100%;height:8px;background-color:var(--color-border);border-radius:4px;overflow:hidden;margin-bottom:1rem}
.progress-bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--color-brand),var(--color-brand-dark));background-size:200% 100%;border-radius:4px;width:0%;transition:width 0.3s ease}
.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.75rem;font-weight:600;color:var(--color-text-muted);pointer-events:none}

/* Developer hot corner removed */

/* View caching system */
.nxs-view-cache {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cached-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.cached-view[style*="display: none"] {
  pointer-events: none;
}

.cached-view[style*="display: block"] {
  pointer-events: auto;
  z-index: 1;
}

/* Equipment teaser specific styling */
.equipment-teaser .teaser-image {
  max-width: 100px;
  max-height: 80px;
  object-fit: contain;
}

/* 🚨 CRITICAL: DEBUG BORDERS - Visual-only, no functional layout rules allowed here! */
/* 🔥 ESSENTIAL: These borders are for debugging layout issues across platforms */
/* ⚠️  WARNING: Debug borders must NEVER contain functional CSS properties */
/* ⚠️  FUNCTIONAL RULES BELONG IN BASE CSS, NOT DEBUG CSS */
/* Debug borders (toggle by adding body.debug-borders) - Russian doll nesting with 7px separation */
body.debug-borders .page-container{outline:2px solid #ef4444 !important}
body.debug-borders #nxs-page-header{outline:2px solid #f59e0b !important}
body.debug-borders #nxs-page-content{outline:2px solid #10b981 !important}
body.debug-borders #nxs-page-nav{outline:2px dashed #ec4899 !important}

/* Layer 1: Main content container (BLUE) - outermost content layer */
body.debug-borders .main-content-container{
  outline:2px solid #3b82f6 !important; 
  padding:7px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  contain:layout style !important;
}

/* Layer 2: Main shell root - first nested layer */
body.debug-borders .main-shell-root{
  outline:2px solid #8b5cf6 !important;
  margin:7px !important;
  padding:7px !important;
  box-sizing:border-box !important;
  width:calc(100% - 14px) !important;
  height:calc(100% - 14px) !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

/* Layer 3: Card containers */
body.debug-borders .card.flex-1{
  outline:2px dashed #14b8a6 !important;
  margin:7px !important;
  padding:7px !important;
  box-sizing:border-box !important;
  flex:1 1 0 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* Layer 4: Shell body / scrollable container (PURPLE/CYAN) */
body.debug-borders #nxs-shell-body,
body.debug-borders .scrollable-container{
  outline:2px dashed #22d3ee !important;
  margin:7px !important;
  padding:7px !important;
  box-sizing:border-box !important;
  flex:1 1 0 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* Layer 5: Scrollable area (YELLOW) - innermost scrolling layer */
body.debug-borders .scrollable-area{
  outline:2px dashed #eab308 !important;
  margin:7px !important;
  padding:7px !important;
  box-sizing:border-box !important;
  flex:1 1 0 !important;
  min-height:0 !important;
  overflow:auto !important;
}

/* Layer 6: Keep-alive views */
body.debug-borders .keepalive-view{
  outline:2px dashed #14b8a6 !important;
  margin:7px !important;
  padding:7px !important;
  box-sizing:border-box !important;
  max-width:100% !important;
  max-height:100% !important;
  flex-shrink:1 !important;
}

/* Layer 7: Card body (deepest) */
body.debug-borders .card.flex-1 .card-body{
  outline:2px solid #9a3412 !important;
  margin:7px !important;
  padding:7px !important;
  box-sizing:border-box !important;
  max-width:100% !important;
  max-height:100% !important;
  flex-shrink:1 !important;
}

/* Panel Sizing System */
/* Allows panels to naturally expand to show content properly */
/* IsMax behavior toggles between original size and panel-max */

.panel-min {
  width: auto;
  height: auto;
  min-width: 300px;
  min-height: 200px;
  max-width: 95vw;
  max-height: 90vh;
}

.panel-sm {
  width: 500px;
  height: auto;
  min-height: 300px;
  max-width: 95vw;
  max-height: 90vh;
}

.panel-md {
  width: 750px;
  height: auto;
  min-height: 400px;
  max-width: 95vw;
  max-height: 90vh;
}

.panel-lg {
  width: 960px;
  height: auto;
  min-height: 500px;
  max-width: 95vw;
  max-height: 90vh;
}

.panel-xl {
  width: 1200px;
  height: auto;
  min-height: 600px;
  max-width: 95vw;
  max-height: 90vh;
}

.panel-max {
  width: calc(95vw);
  height: calc(90vh);
  /* Use pixel equivalents for smooth transitions */
  min-width: 1400px;
  min-height: 800px;
}

/* Panel drawer expansion - fills available drawer space */
.panel-drawer-expanded {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* Panel size utilities for dynamic sizing */
.panel-auto-width {
  width: auto !important;
  max-width: 95vw;
}

.panel-auto-height {
  height: auto !important;
  max-height: 90vh;
}

/* Toolbar components */
.utils-toolbar {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.toolbar-container {
  width: 100%;
}

.toolbar-left, .toolbar-center, .toolbar-right {
  display: flex;
  align-items: center;
  /* Allow sections to wrap when needed, but don't force growth */
  flex: 0 1 auto;
  min-width: 0;
}

/* Responsive wrapping behavior */
.toolbar-container.flex-wrap {
  row-gap: var(--space-2);
}

.toolbar-left.flex-wrap,
.toolbar-right.flex-wrap {
  row-gap: var(--space-2);
}

/* Ensure toolbar action labels stay visible on all breakpoints */
.utils-toolbar .action-label {
  display: inline;
}

/* Period-based visual theming for rental cards */
.card[data-period="draft"] {
  border-left: 4px solid var(--color-period-draft);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.05) 0%, transparent 100%);
}

.card[data-period="current"] {
  border-left: 4px solid var(--color-period-current);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
}

.card[data-period="upcoming"] {
  border-left: 4px solid var(--color-period-upcoming);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
}

.card[data-period="past"] {
  border-left: 4px solid var(--color-period-past);
  background: linear-gradient(90deg, rgba(159, 180, 191, 0.1) 0%, transparent 100%);
}

/* Type-based visual theming for profile cards */
.card[data-type="client"] {
  border-left: 4px solid var(--color-type-client);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
}

.card[data-type="employee"] {
  border-left: 4px solid var(--color-type-employee);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
}

.card[data-type="supplier"] {
  border-left: 4px solid var(--color-type-supplier);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.05) 0%, transparent 100%);
}

/* Status-based visual theming for payment cards */
.card[data-status="pending"] {
  border-left: 4px solid var(--color-status-pending);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.05) 0%, transparent 100%);
}

.card[data-status="completed"] {
  border-left: 4px solid var(--color-status-completed);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
}

.card[data-status="failed"] {
  border-left: 4px solid var(--color-status-failed);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}

.card[data-status="refunded"] {
  border-left: 4px solid var(--color-status-refunded);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
}

/* Invoice status variants */
.card[data-status="issued"] {
  border-left: 4px solid var(--color-info);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
}

.card[data-status="paid"] {
  border-left: 4px solid var(--color-success);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
}

.card[data-status="partial"] {
  border-left: 4px solid var(--color-brand);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
}

.card[data-status="overdue"] {
  border-left: 4px solid var(--color-danger);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}

/* Asset status variants */
.card[data-status="available"] {
  border-left: 4px solid var(--color-status-available);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
}

.card[data-status="rented"] {
  border-left: 4px solid var(--color-status-rented);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
}

.card[data-status="maintenance"] {
  border-left: 4px solid var(--color-status-maintenance);
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.05) 0%, transparent 100%);
}

.card[data-status="repair"] {
  border-left: 4px solid var(--color-status-repair);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}

.card[data-status="retired"] {
  border-left: 4px solid var(--color-status-retired);
  background: linear-gradient(90deg, rgba(159, 180, 191, 0.05) 0%, transparent 100%);
}

/* Column layout for toolbar (used in drawers) */
.utils-toolbar.toolbar-column {
  border: none;
  background: transparent;
  padding: 0;
}

.utils-toolbar.toolbar-column .btn {
  width: 100%;
  justify-content: flex-start;
}

.utils-toolbar.toolbar-column .toolbar-section {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.utils-toolbar.toolbar-column .toolbar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.toolbar-search-wrapper, .toolbar-sort-wrapper {
  display: flex;
  align-items: center;
}

.toolbar-search-icon {
  color: var(--color-text-muted);
  margin-left: 4px;
}

.toolbar-search-input {
  min-width: 200px;
  max-width: 400px;
}

.toolbar-sort-select {
  min-width: 160px;
  max-width: 240px;
}

.toolbar-search-clear {
  padding: 2px 6px;
  margin-right: 4px;
}

/* Schedule Calendar View */
.schedule-view-wrapper {
  --schedule-border: var(--color-border-subtle);
  --schedule-header-bg: var(--color-bg);
  --schedule-asset-bg: var(--color-bg-subtle);
  --schedule-row-height: 80px;
  --schedule-block-width: 48px;
  --schedule-block-height: 48px;
}

.schedule-header-container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.schedule-calendar-header-wrapper::-webkit-scrollbar {
  display: none;
}

.schedule-asset-column::-webkit-scrollbar {
  display: none;
}

/* Today column highlighting */
.schedule-header-cell.today {
  border-left: 3px solid var(--color-brand);
  border-right: 3px solid var(--color-brand);
  position: relative;
}

.schedule-day-container.today {
  border-left: 3px solid var(--color-brand);
  border-right: 3px solid var(--color-brand);
}

.schedule-header-cell.today .date-label {
  background: var(--color-brand-subtle);
}

/* Date column hover highlighting */
.schedule-header-cell .date-label {
  transition: background 0.2s;
}

.schedule-header-cell .date-label.hover {
  background: var(--color-brand-subtle);
}

.schedule-day-container.hover {
  background: var(--color-brand-subtle);
  transition: background 0.2s;
}

/* Schedule grid layout */
.schedule-asset-row {
  height: var(--schedule-row-height);
  cursor: pointer;
  padding: 2px;
  transition: background 0.2s;
}

.schedule-calendar-row {
  height: var(--schedule-row-height);
  display: flex;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background 0.2s;
}

.schedule-day-container {
  width: calc(var(--schedule-block-width) * 3);
  height: var(--schedule-row-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--color-border);
}

.schedule-time-block-wrapper {
  width: var(--schedule-block-width);
  height: var(--schedule-block-height);
  flex-shrink: 0;
  padding: 2px;
}

.schedule-time-block-wrapper:not(:last-child) {
  border-right: 1px solid var(--color-border-subtle);
}

.schedule-time-block {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ffffff;
}

.schedule-time-block[data-status="available"] {
  cursor: pointer;
}

.schedule-time-block[data-status="available"]:hover {
  opacity: 0.9;
}

/* Asset row hover highlighting */
.schedule-asset-row.hover {
  background: var(--color-brand-subtle);
}

.schedule-calendar-row.hover {
  background: var(--color-brand-subtle);
}

.schedule-calendar-grid {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.schedule-calendar-grid::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.schedule-calendar-grid::-webkit-scrollbar-track {
  background: transparent;
}

.schedule-calendar-grid::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.schedule-calendar-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}

.schedule-header-cell {
  user-select: none;
}

.schedule-asset-row .card {
  transition: box-shadow 0.2s, transform 0.2s;
}

.schedule-asset-row:hover .card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.day-card-block {
  min-height: 16px;
}

.day-card-block:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}


/* Calendar Select Component */
.calendar-select {
  width: 100%;
}

.calendar-select-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-select-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--radius-md);
  font-size: 12px;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-height: 35px;
  max-height: 35px;
  max-width: 35px;
}

.calendar-select-day span {
  line-height: 1;
}

.calendar-select-day:hover:not([data-selectable="false"]) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calendar-select-day:active:not([data-selectable="false"]) {
  transform: scale(0.98);
}

.calendar-select-legend {
  background: var(--color-bg-subtle);
}

/* Calendar multi-status indicator system */
.calendar-status-indicators {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  gap: var(--calendar-dot-gap);
  z-index: 10;
}

.calendar-status-dot {
  width: var(--calendar-dot-size);
  height: var(--calendar-dot-size);
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.calendar-status-dot[data-status="draft"] {
  background: var(--color-status-draft);
}

.calendar-status-dot[data-status="confirmed"],
.calendar-status-dot[data-status="rented"] {
  background: var(--color-status-confirmed);
}

.calendar-status-dot[data-status="maintenance"] {
  background: var(--color-status-maintenance);
}

.calendar-status-overflow {
  width: var(--calendar-dot-size);
  height: var(--calendar-dot-size);
  border-radius: 50%;
  background: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  color: var(--color-bg);
  line-height: 1;
}

/* Calendar availability status classes */
.calendar-select-day.available {
  background: var(--color-success);
  color: #ffffff;
}

.calendar-select-day.draft {
  background: var(--color-status-draft);
  color: #111111;
}

.calendar-select-day.confirmed,
.calendar-select-day.rented {
  background: var(--color-status-confirmed);
  color: #ffffff;
}

.calendar-select-day.maintenance {
  background: var(--color-status-maintenance);
  color: #ffffff;
}

.calendar-select-day.unavailable,
.calendar-select-day.past {
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.6;
  position: relative;
}

/* Add visual X strikethrough for unavailable/past dates */
.calendar-select-day.unavailable::after,
.calendar-select-day.past::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 70%;
  height: 2px;
  background: var(--color-border);
  pointer-events: none;
}

.calendar-select-day.unavailable::before,
.calendar-select-day.past::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 70%;
  height: 2px;
  background: var(--color-border);
  pointer-events: none;
}

.calendar-select-day.selected {
  background: var(--color-success);
  color: #ffffff;
  border: 3px solid var(--color-success);
}

.calendar-select-day.in-range {
  background: var(--color-success-subtle);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.calendar-select-day.today {
  border: 2px solid var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand-subtle);
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .calendar-select-day {
    font-size: 14px;
    min-height: 44px;
    padding: 6px;
  }

  .calendar-select-day:active:not([data-selectable="false"]) {
    transform: scale(0.95);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .calendar-select-day {
    transition: none;
  }

  .calendar-select-day:hover:not([data-selectable="false"]),
  .calendar-select-day:active:not([data-selectable="false"]) {
    transform: none;
  }
}

/* Rates Grid - Horizontal scrollable rate cards */
.rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  width: 100%;
}

.rate-card {
  min-width: 110px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.3s, background-color 0.3s;
  position: relative;
}

.rate-card:hover {
  transform: translateY(-2px);
}

/* Active rate (unlocked based on selected duration) */
.rate-card-active {
  border: 2px solid var(--color-success);
  background: var(--color-success-subtle);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.rate-card-active:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2), 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Active badge indicator */
.rate-active-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Locked rate (dates not selected yet) */
.rate-card-locked {
  opacity: 0.5;
  filter: grayscale(0.3);
}

/* Responsive: single column on very small screens */
@media (max-width: 400px) {
  .rates-grid {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .rate-card,
  .rate-active-badge {
    transition: none;
    animation: none;
  }

  .rate-card:hover,
  .rate-card-active:hover {
    transform: none;
  }
}

/* Rates Accordion */
.rates-accordion-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.rates-accordion-body[style*="display: none"] {
  opacity: 0;
}

.rates-accordion-body[style*="display: block"] {
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rates-accordion-body {
    transition: none;
  }
}

/* Rates horizontal scroll - panel mode only */
.rates-grid-horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.rates-grid-horizontal-scroll::-webkit-scrollbar {
  height: 6px;
}

.rates-grid-horizontal-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.rates-grid-horizontal-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.rates-grid-horizontal-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}

/* In drawer mode, allow vertical wrapping instead of horizontal scroll */
.drawer .rates-grid-horizontal-scroll {
  overflow-x: visible;
  overflow-y: visible;
}

.drawer .rates-grid-horizontal-scroll #rates-grid {
  flex-wrap: wrap;
}

/* Mini Calendar Teaser */
.mini-calendar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mini-calendar-day {
  flex-grow: 1;
  min-width: 32px;
  height: 24px; /* Set a fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px; /* Slightly smaller radius */
  color: var(--color-white);
  transition: all 0.2s ease;
}

.mini-calendar-day.available {
  background: var(--color-success);
}

.mini-calendar-day.partial {
  background: var(--color-warning);
}

.mini-calendar-day.booked {
  background: var(--color-danger);
}

.mini-calendar-day.maintenance {
  background: var(--color-info);
}

.mini-calendar-day.today {
  border: 2px solid var(--color-brand);
  padding: 1px;
}

[data-teaser="availability"]:hover .mini-calendar-day {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Realtime Connection Indicator */
.realtime-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Indicator sizes */
.realtime-indicator-sm {
  font-size: 0.75rem;
}

.realtime-indicator-md {
  font-size: 0.875rem;
}

.realtime-indicator-lg {
  font-size: 1rem;
}

/* Connection status dot */
.realtime-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Size variants for dot */
.realtime-indicator-sm .realtime-dot {
  width: 6px;
  height: 6px;
}

.realtime-indicator-lg .realtime-dot {
  width: 10px;
  height: 10px;
}

/* Disconnected state - grey */
.realtime-dot-disconnected {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
}

/* Connected state - green with pulse animation */
.realtime-dot-connected {
  background: var(--color-success);
  border: 1px solid var(--color-success);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: realtime-pulse 2s infinite;
}

/* Pending state - yellow/amber (connected but not subscribed) */
.realtime-dot-pending {
  background: var(--color-warning);
  border: 1px solid var(--color-warning);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  animation: realtime-pulse-pending 1.5s infinite;
}

/* Pulse animation for pending state */
@keyframes realtime-pulse-pending {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* Pulse animation for connected state */
@keyframes realtime-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Label styling */
.realtime-label {
  font-size: inherit;
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.3s ease;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .realtime-dot-connected {
    animation: none;
  }
}

/* ===== PROFESSIONAL DATA TABLES ===== */
/* Added 2025-11-01 for client pages CSS refactor */

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table thead {
  background: var(--color-surface-2);
}

.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

.table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.table tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--color-surface-2);
  transition: background 0.15s ease;
}

.table-compact td,
.table-compact th {
  padding: var(--space-2) var(--space-3);
}

/* ===== STICKY BANNER PATTERN ===== */
/* Generic reusable sticky banner with scroll collapse behavior */
/* Added 2025-11-02 - standardized pattern for all sticky banners */

.sticky-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  max-width: 100%;
  color: white;
  /* Only transition padding and box-shadow, NOT height */
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Prevent scroll position adjustment during padding changes */
  contain: layout;
  /* position: relative needed for decorative overlay, but sticky takes precedence */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Variant: Brand gradient (default) */
.sticky-banner-brand {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
}

/* Variant: Neutral */
.sticky-banner-neutral {
  background: linear-gradient(135deg, var(--color-neutral) 0%, var(--color-neutral-dark) 100%);
}

/* Variant: Success */
.sticky-banner-success {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

/* Variant: Warning */
.sticky-banner-warning {
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
}

/* Variant: Danger */
.sticky-banner-danger {
  background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
}

/* Utility: Remove padding-top from main page content when using sticky banner */
.has-sticky-banner main.page-content {
  padding-top: 0 !important;
}

/* Default expanded state */
.sticky-banner:not(.collapsed) {
  padding: var(--space-8) var(--space-6);
}

/* Collapsed state - minimal on scroll */
.sticky-banner.collapsed {
  padding: var(--space-3) var(--space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Banner title */
.sticky-banner-title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0 0 var(--space-2) 0;
}

/* Banner subtitle - default visible state */
.sticky-banner-subtitle {
  font-size: 0.875rem;
  opacity: 0.9;
  max-width: 600px;
  line-height: 1.5;
  margin: 0;
  max-height: 100px;
  overflow: hidden;
  transition: opacity 0.25s ease-out, max-height 0.25s ease-out, margin 0.25s ease-out;
}

/* Collapsed state - hide subtitle */
.sticky-banner.collapsed .sticky-banner-subtitle {
  opacity: 0;
  max-height: 0;
  margin: 0 !important;
}

/* Collapsed state - smaller title */
.sticky-banner.collapsed .sticky-banner-title {
  font-size: 1.25rem;
  margin: 0;
}

/* Banner content container */
.sticky-banner-content {
  max-width: 80rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Decorative gradient overlay */
.sticky-banner-decorative {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

/* Collapsed state - hide decorative */
.sticky-banner.collapsed .sticky-banner-decorative {
  opacity: 0;
}

/* Mobile responsiveness */
@media (max-width: 767px) {
  .sticky-banner:not(.collapsed) {
    padding: var(--space-6) var(--space-4);
  }

  .sticky-banner.collapsed {
    padding: var(--space-2) var(--space-4);
  }

  .sticky-banner-title {
    font-size: 1.75rem;
  }

  .sticky-banner.collapsed .sticky-banner-title {
    font-size: 1rem;
  }
}

/* ===== CLIENT PAGE HEADER PATTERN (LEGACY - extends sticky-banner) ===== */
/* Added 2025-11-01 for client pages CSS refactor */
/* NOTE: New pages should use .sticky-banner instead */

.client-page-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  color: white;
  /* Only transition padding and box-shadow, NOT height */
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Prevent scroll position adjustment during padding changes */
  contain: layout;
}

/* Default expanded state */
.client-page-header:not(.collapsed) {
  padding: var(--space-8) var(--space-6);
}

/* Collapsed state - minimal on scroll */
.client-page-header.collapsed {
  padding: var(--space-3) var(--space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Subtitle default state - visible with transitions */
.client-page-header-subtitle {
  opacity: 1;
  max-height: 100px;
  overflow: hidden;
  transition: opacity 0.25s ease-out, max-height 0.25s ease-out, margin 0.25s ease-out;
}

/* Collapsed state - hide decorative elements */
.client-page-header.collapsed .client-page-header-decorative {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.client-page-header.collapsed .client-page-header-subtitle {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Header content container */
.client-page-header-content {
  max-width: 80rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Decorative gradient overlay */
.client-page-header-decorative {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

/* Content wrapper - no padding needed with sticky positioning */
.client-page-content-wrapper {
  /* Sticky positioning handles header overlap naturally */
}

/* Mobile responsiveness - adjust padding */
@media (max-width: 767px) {
  .client-page-header:not(.collapsed) {
    padding: var(--space-6) var(--space-4);
  }

  .client-page-header.collapsed {
    padding: var(--space-2) var(--space-4);
  }
}

/* ===== BRAND-THEMED SECTION HEADERS ===== */
/* Section headers with brand accent - subtle left border like info-card-brand */

.section-header-brand {
  background: var(--color-surface-2);
  border-left: 4px solid var(--color-brand);
  padding: var(--space-6);
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--color-text);
  overflow: hidden;
}

/* ===== BRAND-THEMED STAT CARDS ===== */
/* Stats with brand color accents - theme-aware backgrounds */

.stat-card-brand {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}

.stat-card-brand::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
}

.stat-card-brand .stat-icon {
  width: 40px;
  height: 40px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  font-size: 20px;
  margin-bottom: var(--space-2);
}

.stat-card-brand .stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.stat-card-brand .stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.05em;
}

/* Semantic stat card variants using design system colors only */
.stat-card-success {
  border-color: var(--color-success);
}

.stat-card-success::before {
  background: var(--color-success);
}

.stat-card-success .stat-icon {
  color: var(--color-success);
}

.stat-card-warning {
  border-color: var(--color-warning);
}

.stat-card-warning::before {
  background: var(--color-warning);
}

.stat-card-warning .stat-icon {
  color: var(--color-warning);
}

.stat-card-danger {
  border-color: var(--color-danger);
}

.stat-card-danger::before {
  background: var(--color-danger);
}

.stat-card-danger .stat-icon {
  color: var(--color-danger);
}

.stat-card-info {
  border-color: var(--color-info);
}

.stat-card-info::before {
  background: var(--color-info);
}

.stat-card-info .stat-icon {
  color: var(--color-info);
}

/* ===== BRAND-THEMED INFO CARDS ===== */
/* Info cards with subtle brand accent - theme-aware */

.info-card-brand {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.info-card-brand .info-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.info-card-brand .info-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

/* ===== BRAND-THEMED GLASSMORPHIC CARDS ===== */
/* For use on gradient backgrounds - brand color overlay */

.glass-card-brand {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  transition: all 0.2s ease;
}

.glass-card-brand:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* ===== HOVER & INTERACTION UTILITIES ===== */
/* Reusable hover effects - no inline styles needed */

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-lift-sm {
  transition: transform 0.2s ease;
}

.hover-lift-sm:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-brightness {
  transition: filter 0.2s ease;
}

.hover-brightness:hover {
  filter: brightness(1.1);
}

.hover-opacity {
  transition: opacity 0.2s ease;
}

.hover-opacity:hover {
  opacity: 0.9;
}

/* Transition utilities */
.transition-all {
  transition: all 0.2s ease;
}

.transition-transform {
  transition: transform 0.2s ease;
}

.transition-colors {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Cursor utilities */
.cursor-pointer {
  cursor: pointer;
}

/* Z-index utilities */
.z-1 {
  position: relative;
  z-index: 1;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

/* ===== ERROR STATE CARDS ===== */
/* Error/alert cards for authentication, data loading failures */

.error-card {
  padding: var(--space-12);
  text-align: center;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-radius: var(--radius-xl);
  border: 2px solid #fca5a5;
}

.error-card .error-icon {
  font-size: 48px;
  color: #dc2626;
  margin-bottom: var(--space-4);
}

.error-card .error-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.error-card .error-message {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ===== EMPTY STATE CARDS ===== */
/* Empty state for lists with no items */

.empty-card {
  padding: var(--space-12);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-border);
}

/* Draft/pending container - same border style as empty card */
.draft-container {
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-border);
}

/* Scrollable agreement preview box */
.agreement-preview {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
}

.empty-card .empty-icon {
  font-size: 48px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-card .empty-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.empty-card .empty-message {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
}

/* ===== CARD IMAGES ===== */
/* Contained images for card headers */

.card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface-2);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ===== CONTRACT VIEWER ===== */
.contract-viewer {
  background: var(--color-bg);
}

.contract-content {
  max-height: 100%;
}

.contract-document {
  max-width: 800px;
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: 1.6;
}

.contract-header h2 {
  font-size: var(--text-2xl);
}

.contract-clause {
  padding-bottom: var(--space-4);
}

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

.clause-content {
  color: var(--color-text-muted);
}

/* ===== SIGNATURE CANVAS ===== */
.signature-box {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}

.signature-canvas {
  display: block;
  width: 100%;
  height: 150px;
  cursor: crosshair;
  touch-action: none;
}

.signature-box .btn-clear-signature {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.signature-box .btn-clear-signature:hover {
  color: var(--color-danger);
}

/* ===== RENTAL TEASER STATES ===== */

/* Queued rental - highlighted with brand border */
.rental-queued .card,
.rental-queued.card,
[data-queued="true"] .card,
[data-queued="true"].card {
  border-color: var(--color-brand);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.15);
}

.rental-queued .card::before,
[data-queued="true"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-brand);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Editable rental indicator */
.rental-editable .card,
[data-editable="true"] .card {
  position: relative;
}

/* Draft/Pending badge enhancement for editable rentals */
.rental-editable .badge[class*="status-draft"],
.rental-editable .badge[class*="status-pending"],
[data-editable="true"] .badge[class*="status-draft"],
[data-editable="true"] .badge[class*="status-pending"] {
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ==========================================================================
   RESPONSIVE MODAL FORM SYSTEM
   - Content-driven sizing (grows to fit, with max constraints)
   - Desktop/Tablet: centered modal
   - Mobile: bottom drawer (Flutter-style)
   - Max 75% height to always show backdrop
   - Clean, minimal borders (Claude-inspired)
   ========================================================================== */

/* Backdrop for modal-form */
.modal-form-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9000;  /* Above sidebar (500), FAB (1000), below toast (10000) */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal-form-backdrop.visible {
  opacity: 1;
}

/* Modal Form Container - Content-driven sizing */
.modal-form {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);

  /* Content-driven width */
  width: fit-content;
  min-width: 320px;
  max-width: min(90vw, 560px);

  /* Max 75% height - always show backdrop */
  max-height: 75vh;

  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* Smooth appearance */
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-form-backdrop.visible .modal-form {
  opacity: 1;
  transform: scale(1);
}

/* Size variants for when you need wider modals */
.modal-form.modal-form-md {
  max-width: min(90vw, 680px);
}
.modal-form.modal-form-lg {
  max-width: min(90vw, 800px);
}

/* Header - Clean, no border (Claude-style) */
.modal-form-header {
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-form-header h2,
.modal-form-header h3,
.modal-form-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.modal-form-close {
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-form-close:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Body - Scrollable content area */
.modal-form-body {
  padding: var(--space-4) var(--space-6);
  flex: 1 1 auto;
  min-height: 100px;
  overflow-y: auto;
}
.modal-form-body.flush {
  padding: 0;
}

/* Override scrollable-container inside modal to allow content-driven height */
.modal-form-body .scrollable-container {
  flex: 0 1 auto;
  min-height: auto;
  overflow: visible;
}
.modal-form-body .scrollable-area {
  overflow: visible;
}

/* Footer - Clean, no border (Claude-style) */
.modal-form-footer {
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Override panelFooter border when inside modal-form */
.modal-form-footer .panel-footer {
  border-top: none;
  padding: 0;
}

/* ==========================================================================
   MOBILE: Bottom Drawer Transform
   Uses bp-mobile class from responsive module
   ========================================================================== */
body.bp-mobile .modal-form-backdrop {
  align-items: flex-end;
}

body.bp-mobile .modal-form {
  /* Full width at bottom */
  width: 100%;
  min-width: 100%;
  max-width: 100%;

  /* Rounded top corners only */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;

  /* Still respect 75% max height */
  max-height: 75vh;

  /* Slide up animation */
  transform: translateY(100%);
}
body.bp-mobile .modal-form-backdrop.visible .modal-form {
  transform: translateY(0);
}

/* Drag handle indicator for mobile drawer */
body.bp-mobile .modal-form::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin: var(--space-2) auto var(--space-1);
}

/* ==========================================================================
   OPTION SHEET - Clean action list for mobile
   Like iOS action sheet / Claude options
   ========================================================================== */
.option-sheet {
  background: var(--color-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-2) 0;
  width: 100%;
}

.option-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
  font-size: 1rem;
  transition: background 0.15s ease;
}
.option-sheet-item:hover {
  background: var(--color-surface);
}
.option-sheet-item.destructive {
  color: var(--color-danger);
}

.option-sheet-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

.option-sheet-cancel {
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-weight: 500;
}