/* Global overlap and clipping guards */
html,body{max-width:100%;overflow-x:clip}
.app-shell,.main,.page,.page>*,.panel,.data-list,.table-surface,.calendar-grid{min-width:0}
.page-title>*,.dashboard-welcome>*,.panel-head>*,.topbar>*,.data-card>*,.event-item>*,.stock-head>*,.quote-row>*{min-width:0}
img,svg,canvas,video{max-width:100%}
button{max-width:100%}
button span,.nav-item span,.quick-action span{min-width:0}
.topbar h1,.topbar p,.page-title h2,.page-title p,.panel h3,.data-card h3,.data-card p{overflow-wrap:anywhere}

/* Keep layered UI above content without accidental stacking conflicts */
.topbar{position:relative;z-index:20}
.sidebar{z-index:1300}
.mobile-sidebar-backdrop{z-index:1250}
.notification-center{z-index:1600}
.modal,.auth-modal{z-index:1800}
.command-palette{z-index:2000}
.toast-stack,.toast{z-index:2200}

/* Dialogs must remain reachable on short screens and with mobile keyboard */
.modal,.auth-modal{overflow-y:auto;overscroll-behavior:contain}
.modal-card,.auth-modal .auth-card{max-height:calc(100dvh - 32px);overscroll-behavior:contain}
.auth-modal{align-items:start;padding-block:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-bottom))}
.auth-modal .auth-card{margin-block:auto}
.modal-head{position:relative;z-index:2}
.modal-close,.auth-close{flex:0 0 auto}

/* Flexible headers and controls */
.page-title,.dashboard-welcome,.panel-head,.calendar-controls,.inventory-actions,.toolbar{flex-wrap:wrap}
.page-title>div:first-child,.dashboard-welcome>div:first-child{flex:1 1 320px}
.topbar>div:first-of-type{min-width:0;flex:1 1 auto}
.top-actions{flex:0 0 auto}
.calendar-controls{max-width:100%}
.calendar-controls strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Grid children should shrink instead of covering neighbours */
.stats-grid>*,.dashboard-grid>*,.lower-grid>*,.calc-layout>*,.field-grid>*,.inventory-grid>*,.inventory-summary>*,.reservation-columns>*,.feature-grid>*,.workflow-grid>*{min-width:0}
.quote-item-row input,.field-grid input,.field-grid select,.field-grid textarea{min-width:0}

/* Menus and floating panels stay inside the viewport */
.notification-center,.command-panel{max-width:calc(100vw - 24px)}
.notification-center{overscroll-behavior:contain}
.sidebar{overscroll-behavior:contain}
.sidebar nav{min-height:0}

/* Prevent decorative layers from covering interactive content */
.hero-card>*,.landing-hero>*,.visual-window>*,.empty-state>*{position:relative;z-index:1}
.hero-card::after,.visual-glow,.empty-state::before{pointer-events:none}

@media(max-width:700px){
  .main{width:100%;max-width:100%;overflow-x:clip}
  .topbar{gap:8px}
  .topbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-actions{gap:5px}
  .page-title{align-items:flex-start}
  .page-title>button,.page-title>.calendar-controls{width:100%}
  .page-title>button{justify-content:center}
  .calendar-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px}
  .calendar-controls button{min-width:0;padding-inline:10px}
  .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quick-action{min-width:0}
  .sidebar{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .sidebar nav{flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain}
  .theme-switcher.sidebar-theme-switcher{flex:0 0 auto;margin-top:8px!important}
  .sidebar-account-host{flex:0 0 auto;margin-top:8px!important}
  .modal,.auth-modal{place-items:start center;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .modal-card,.auth-modal .auth-card{width:100%;max-height:calc(100dvh - 20px);margin:auto}
  .auth-modal .auth-card{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .auth-form .primary{position:sticky;bottom:0;z-index:2}
  .quote-row,.event-row,.data-card{min-width:0}
  .notification-center{left:10px;right:10px;width:auto;max-width:none}
}

@media(max-height:620px){
  .auth-modal,.modal{align-items:start}
  .auth-modal .auth-card,.modal-card{margin-block:0;max-height:calc(100dvh - 20px)}
}

/* Remove mobile tap highlight without harming keyboard focus */
html,
body,
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent !important;
}

button,
a,
input,
select,
textarea,
[role="button"],
.nav-item,
.quick-action,
.theme-switcher button,
.trial-badge,
.account-trigger,
.sidebar-logout {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none;
}

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #6d5dfc) 70%, transparent);
  outline-offset: 2px;
}