/* =========================================================
   All-sites UI mode selector
   mobile / desktop is selected per browser session
   ========================================================= */

.ui-mode-choice-box{
  margin:16px 0;
  padding:14px;
  border:1px solid #e4e4e7;
  border-radius:12px;
  background:#fafafa;
}
.ui-mode-choice-title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:#27272a;
}
.ui-mode-choice-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.ui-mode-choice-option{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d4d4d8;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  box-sizing:border-box;
}
.ui-mode-choice-option:has(input:checked){
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.08);
}
.ui-mode-choice-option input{
  width:auto!important;
  min-height:auto!important;
  margin:0!important;
}
.ui-mode-required-error{
  display:none;
  margin-top:8px;
  font-size:12px;
  color:#dc2626;
}
.ui-mode-choice-box.has-error .ui-mode-required-error{
  display:block;
}

/* Blocking selector for public pages that do not have a login form */
.ui-mode-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(24,24,27,.36);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.ui-mode-dialog{
  width:min(100%,420px);
  padding:20px;
  border:1px solid #e4e4e7;
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.ui-mode-dialog h2{
  margin:0 0 6px;
  font-size:20px;
  color:#18181b;
}
.ui-mode-dialog p{
  margin:0 0 16px;
  color:#71717a;
  font-size:13px;
  line-height:1.6;
}
.ui-mode-dialog-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.ui-mode-dialog-button{
  min-height:52px;
  border:1px solid #d4d4d8;
  border-radius:11px;
  background:#fff;
  color:#27272a;
  font-weight:700;
  cursor:pointer;
}
.ui-mode-dialog-button:hover{
  background:#f4f4f5;
}
.ui-mode-dialog-button.primary{
  border-color:#2563eb;
  background:#2563eb;
  color:#fff;
}

/* Explicit desktop selection wins even on a smartphone */
html.ui-mode-desktop,
html.ui-mode-desktop body{
  min-width:1024px!important;
}
html.ui-mode-desktop body{
  overflow-x:auto!important;
}
html.ui-mode-desktop .responsive-mobile-header,
html.ui-mode-desktop .responsive-sidebar-backdrop{
  display:none!important;
}
html.ui-mode-desktop .sidebar,
html.ui-mode-desktop .manager-sidebar,
html.ui-mode-desktop .staff-sidebar,
html.ui-mode-desktop aside.sidebar,
html.ui-mode-desktop nav.sidebar{
  transform:none!important;
}

/* Explicit mobile selection */
html.ui-mode-mobile{
  width:100%!important;
}
html.ui-mode-mobile body{
  width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}

/* Force existing responsive rules to behave as mobile even on wide screens.
   This block mirrors the common mobile shell used in the project. */
html.ui-mode-mobile .responsive-mobile-header{
  display:flex!important;
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:10000!important;
  height:52px!important;
  align-items:center!important;
  padding:0 10px!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid #e7e7ea!important;
}
html.ui-mode-mobile .responsive-mobile-menu-button{
  display:inline-flex!important;
  width:36px!important;
  height:36px!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  font-size:21px!important;
}
html.ui-mode-mobile .responsive-mobile-title{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
  font-weight:700!important;
}
html.ui-mode-mobile .sidebar,
html.ui-mode-mobile .manager-sidebar,
html.ui-mode-mobile .staff-sidebar,
html.ui-mode-mobile aside.sidebar,
html.ui-mode-mobile nav.sidebar{
  position:fixed!important;
  top:0!important;
  left:0!important;
  bottom:0!important;
  z-index:10020!important;
  width:min(84vw,300px)!important;
  height:100dvh!important;
  overflow-y:auto!important;
  transform:translateX(-104%)!important;
  transition:transform .2s ease!important;
  background:#fff!important;
}
html.ui-mode-mobile body.responsive-menu-open .sidebar,
html.ui-mode-mobile body.responsive-menu-open .manager-sidebar,
html.ui-mode-mobile body.responsive-menu-open .staff-sidebar,
html.ui-mode-mobile body.responsive-menu-open aside.sidebar,
html.ui-mode-mobile body.responsive-menu-open nav.sidebar{
  transform:translateX(0)!important;
}
html.ui-mode-mobile .main,
html.ui-mode-mobile .main-content,
html.ui-mode-mobile .content,
html.ui-mode-mobile .page-content,
html.ui-mode-mobile .manager-main,
html.ui-mode-mobile .manager-content,
html.ui-mode-mobile .staff-main,
html.ui-mode-mobile .staff-content,
html.ui-mode-mobile main{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  box-sizing:border-box!important;
}
html.ui-mode-mobile .grid,
html.ui-mode-mobile .card-grid,
html.ui-mode-mobile .dashboard-grid,
html.ui-mode-mobile .settings-grid,
html.ui-mode-mobile .form-grid,
html.ui-mode-mobile .two-column,
html.ui-mode-mobile .columns,
html.ui-mode-mobile .cards{
  grid-template-columns:1fr!important;
}
html.ui-mode-mobile input:not([type=checkbox]):not([type=radio]),
html.ui-mode-mobile select,
html.ui-mode-mobile textarea{
  width:100%!important;
  max-width:100%!important;
  font-size:16px!important;
  box-sizing:border-box!important;
}
html.ui-mode-mobile table{
  white-space:nowrap!important;
}
html.ui-mode-mobile .responsive-table-wrap,
html.ui-mode-mobile .table-wrap,
html.ui-mode-mobile .table-responsive{
  width:100%!important;
  overflow-x:auto!important;
}

/* Small screens */
@media(max-width:560px){
  .ui-mode-choice-options,
  .ui-mode-dialog-buttons{
    grid-template-columns:1fr;
  }
}