/* Bangkok Crown Estates v1 — CRM shell (index.html): MUI Drawer + AppBar on desktop,
   native-app layout (app bar, bottom navigation with a raised Home button) on phones. */
@media screen{
/* ---------- Drawer (sidebar) ---------- */
html[data-theme] .sidebar{background:var(--ui-paper);color:var(--ui-text);border-right:1px solid var(--ui-divider);box-shadow:none;width:248px}
html[data-theme] .brand{color:var(--ui-text);padding:20px 18px 14px}
html[data-theme] .brand>.icon{background:var(--ui-appbar);color:#fff;border-radius:12px;width:40px;height:40px;padding:8px;box-shadow:0 4px 12px rgba(25,118,210,.35)}
html[data-theme] .brand b.company-wordmark{color:var(--ui-text);font-weight:600}
html[data-theme] .brand small.company-submark{color:var(--ui-primary);opacity:1;font-weight:500}
html[data-theme] .nav-label,html[data-theme] .bce-readable-workspace .nav-label{color:var(--ui-text-3);font-weight:600;letter-spacing:.08em;margin:6px 24px 8px}
html[data-theme] .sidebar nav{padding:0 12px}
html[data-theme] .sidebar nav a,html[data-theme] .bce-readable-workspace .sidebar nav a{color:var(--ui-text-2);border-radius:10px;padding:10px 14px;margin-bottom:2px;font-weight:500;transition:background .15s,color .15s}
html[data-theme] .sidebar nav a .icon{color:var(--ui-text-3);transition:color .15s}
html[data-theme] .sidebar nav a:hover{background:var(--ui-hover);color:var(--ui-text);text-decoration:none}
html[data-theme] .sidebar nav a.active,html[data-theme] .bce-readable-workspace .sidebar nav a.active{background:var(--ui-primary-soft);color:var(--ui-primary);font-weight:600}
html[data-theme] .sidebar nav a.active .icon{color:var(--ui-primary)}
html[data-theme] .sidebar nav .nav-group{margin:14px 14px 6px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ui-text-3)}
html[data-theme] .sidebar .account{border-top:1px solid var(--ui-divider);color:var(--ui-text);padding:16px}
html[data-theme] .account small,html[data-theme] .bce-readable-workspace .account small{color:var(--ui-text-3)}
html[data-theme] .avatar{background:var(--ui-appbar);color:#fff}
html[data-theme] .account .role-chip{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:10px;background:var(--ui-primary-soft);color:var(--ui-primary);font-size:10.5px;font-weight:600}
html[data-theme] .account button{border:0!important;background:transparent;color:var(--ui-text-2);border-radius:50%!important;width:36px;height:36px;padding:0}
html[data-theme] .account button:hover{background:var(--ui-error-soft);color:var(--ui-error)}

/* ---------- App bar (topbar) ---------- */
html[data-theme] .topbar{margin-left:248px;background:var(--ui-appbar);color:var(--ui-on-appbar);border:0;box-shadow:0 2px 10px rgba(21,101,192,.25);height:64px;backdrop-filter:none}
html[data-theme="dark"] .topbar{box-shadow:0 1px 0 var(--ui-divider)}
html[data-theme] .topbar>button,html[data-theme] .topbar>a,html[data-theme] .topbar .topbar-actions>*{color:var(--ui-on-appbar)!important;background:transparent!important;border:0!important;border-radius:50%!important;width:40px;height:40px;min-height:0;padding:0;display:inline-grid;place-items:center}
html[data-theme] .topbar>button:hover,html[data-theme] .topbar>a:hover,html[data-theme] .topbar .topbar-actions>*:hover{background:rgba(255,255,255,.16)!important}
html[data-theme] .crumb,html[data-theme] .bce-readable-workspace .crumb{color:rgba(255,255,255,.75)}
html[data-theme] .crumb strong{color:#fff;font-weight:600}
html[data-theme] .top-search{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:12px;color:#fff}
html[data-theme] .top-search:focus-within{background:var(--ui-paper);color:var(--ui-text);border-color:transparent;box-shadow:var(--ui-shadow-2)}
html[data-theme] .top-search input{color:inherit}
html[data-theme] .top-search input::placeholder{color:currentColor;opacity:.75}
html[data-theme] .topbar .online{color:#fff;opacity:.9}
html[data-theme] .online i{background:#69f0ae;box-shadow:0 0 0 3px rgba(105,240,174,.25)}
html[data-theme] .topbar .topbar-actions{display:flex;align-items:center;gap:4px}
html[data-theme] .topbar .app-title{display:none}
html[data-theme] #crm-main{margin-left:248px}
html[data-theme] .sidebar-hidden .sidebar{display:none!important}
html[data-theme] .sidebar-hidden :is(.topbar,#crm-main){margin-left:0!important}
html[data-theme] .page-head h1{font-size:26px}

/* ---------- Bottom navigation (phones only) ---------- */
.bottom-nav{display:none}
.drawer-scrim{display:none}

@media (max-width:1100px){
 html[data-theme] .sidebar{width:220px}
 html[data-theme] :is(.topbar,#crm-main){margin-left:220px}
}

@media (max-width:760px){
 html[data-theme] body{padding-bottom:calc(var(--ui-nav-h) + var(--ui-safe-b) + 8px)}
 /* App bar */
 html[data-theme] .topbar{margin-left:0!important;height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 6px 0;gap:2px;border-radius:0 0 18px 18px}
 html[data-theme] .topbar .crumb,html[data-theme] .topbar .online,html[data-theme] .topbar .top-search,html[data-theme] .topbar>#mobile-menu{display:none!important}
 html[data-theme] .topbar .app-title{display:block;flex:1;min-width:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
 html[data-theme] .topbar .app-title small{display:block;font-size:11px;font-weight:400;opacity:.8;line-height:1.2}
 html[data-theme] .topbar #go-back.at-home{visibility:hidden;width:8px}
 html[data-theme] #crm-main{margin-left:0!important;padding:16px 12px 20px}
 html[data-theme] .page-head{background:transparent;margin-bottom:16px}
 html[data-theme] .page-head h1{font-size:22px}
 html[data-theme] .page-head .actions{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
 html[data-theme] .page-head .actions>*{flex:none}
 html[data-theme] :is(.card,.metric){border-radius:18px}
 html[data-theme] .cards{gap:10px}
 html[data-theme] .metric{min-height:108px;padding:14px}

 /* Drawer becomes a temporary drawer above the bottom nav */
 html[data-theme] .sidebar{width:min(300px,84vw);z-index:60;transform:translateX(-105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:var(--ui-shadow-24);border-radius:0 20px 20px 0;display:flex!important}
 html[data-theme] .sidebar.open{transform:none}
 html[data-theme] .sidebar nav a{padding:12px 14px;font-size:15px}
 .drawer-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(9,16,30,.45);opacity:0;pointer-events:none;transition:opacity .2s}
 .sidebar.open~.drawer-scrim{opacity:1;pointer-events:auto}

 /* Bottom navigation */
 .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;z-index:50;left:0;right:0;bottom:0;height:calc(var(--ui-nav-h) + var(--ui-safe-b));padding:0 6px var(--ui-safe-b);
  background:var(--ui-paper);border-top:1px solid var(--ui-divider);box-shadow:0 -6px 24px rgba(16,24,40,.08);border-radius:20px 20px 0 0;font-family:var(--ui-font)}
 .bnav-item{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--ui-nav-h);color:var(--ui-text-3);font-size:11px;font-weight:500;cursor:pointer;text-decoration:none!important;-webkit-tap-highlight-color:transparent;position:relative;border-radius:14px;overflow:hidden}
 html[data-theme] .bottom-nav .bnav-item{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:14px!important;padding:0!important;min-height:0!important;color:var(--ui-text-3)!important;transform:none!important}
 html[data-theme] .bottom-nav .bnav-item.active{color:var(--ui-primary)!important}
 .bnav-item .icon{width:23px;height:23px;transition:transform .2s}
 .bnav-item span{line-height:1.2;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .bnav-item.active{color:var(--ui-primary)}
 .bnav-item.active .icon{transform:translateY(-1px)}
 .bnav-item.active::before{content:'';position:absolute;top:8px;width:52px;height:30px;border-radius:15px;background:var(--ui-primary-soft);z-index:-1}
 .bnav-item:not(.bnav-home).active .icon{margin-top:2px}
 .bnav-home{overflow:visible;justify-content:flex-end;padding-bottom:9px}
 .bnav-home::before{display:none}
 .bnav-home .bnav-fab{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--ui-appbar);color:#fff;box-shadow:0 8px 20px rgba(21,101,192,.45),0 0 0 6px var(--ui-bg);transition:transform .2s,box-shadow .2s}
 html[data-theme="dark"] .bnav-home .bnav-fab{background:linear-gradient(135deg,#1e88e5,#1565c0)}
 .bnav-home .bnav-fab .icon{width:28px;height:28px}
 .bnav-home:active .bnav-fab{transform:translateX(-50%) scale(.94)}
 .bnav-home.active{color:var(--ui-primary);font-weight:600}
 .bnav-home.active .bnav-fab{box-shadow:0 10px 24px rgba(21,101,192,.55),0 0 0 6px var(--ui-bg),0 0 0 8px var(--ui-primary-soft-2)}
 .bnav-badge{position:absolute;top:8px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:8px;background:var(--ui-error);color:#fff;font-size:10px;display:grid;place-items:center;padding:0 4px}

 /* Full-screen dialogs like a native sheet */
 html[data-theme] #crm-dialog{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:22px 22px 0 0;animation:ui-sheet .26s cubic-bezier(.2,.8,.2,1)}
 html[data-theme] #crm-dialog form{max-height:94dvh}
 html[data-theme] #crm-dialog .dialog-foot{padding-bottom:calc(14px + var(--ui-safe-b))}

 /* Toasts sit above the bottom nav on phones */
 .ui-toasts{top:auto;bottom:calc(var(--ui-nav-h) + var(--ui-safe-b) + 14px);left:12px;right:12px;width:auto}
 .ui-theme-fab{display:none}
}
}
@media print{.bottom-nav,.drawer-scrim{display:none!important}}