/* CIBOORA Phase 1 — Premium Operations UI v1 (2026-10-27)
   Scoped to the authenticated operational application. No business logic. */
.app-body{
  --navy:#17253b;--navy2:#243a50;--ink:#17253b;--muted:#718196;
  --bg:#f5f8fa;--line:#e3e9ef;--blue:#078b76;--success:#078b76;
  --shadow:0 12px 36px rgba(23,37,59,.055);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:14px;line-height:1.5;letter-spacing:-.009em;
}
.app-body button,.app-body input,.app-body select,.app-body textarea{
  font-family:inherit;letter-spacing:inherit;
}
.app-body :is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid #e9ae48;outline-offset:2px;
}
.app-body :is(button,input,select,textarea){min-height:42px;}
.app-body .btn{min-height:44px;border-radius:12px;padding:10px 16px;font-size:.86rem;
  font-weight:750;transition:background .15s,border-color .15s,box-shadow .15s;}
.app-body .btn.primary{background:#088c75;box-shadow:none;color:#fff;}
.app-body .btn.primary:hover{background:#047460;box-shadow:0 7px 18px rgba(0,136,109,.14);}
.app-body .btn.ghost{border-color:#dce5eb;color:#263b50;background:#fff;}
.app-body .btn.ghost:hover{border-color:#8ebdb2;background:#effaf5;}
.app-body .app-shell{grid-template-columns:240px minmax(0,1fr);background:#f5f8fa;min-height:100dvh;}
.app-body .app-sidebar{
  background:#13263a;color:#dce7ed;padding:20px 12px 18px;border-right:1px solid #234055;
  box-shadow:4px 0 25px rgba(20,40,55,.04);
}
.app-body .app-sidebar .app-logo{width:min(188px,100%);margin:0 9px 21px;}
.app-body .app-user{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);
  border-radius:13px;padding:12px 13px;margin:0 0 16px;}
.app-body .app-user strong{font-size:.89rem;font-weight:800;line-height:1.3;}
.app-body .app-user span{font-size:.75rem;color:#aec1cf;}
.app-body .app-nav{gap:4px;}
.app-body .app-nav button{
  width:100%;min-height:43px;background:transparent;border:1px solid transparent;
  border-radius:11px;font-size:.82rem;color:#d3dfe8;font-weight:650;
  padding:11px 12px;text-align:left;line-height:1.32;
}
.app-body .app-nav button:hover{background:#213b4e;border-color:#36586a;color:#fff;}
.app-body .app-nav button.active{
  background:#e8f6f2;border-color:#a8d9cd;color:#086e60;
  box-shadow:inset 3px 0 0 #0d937a;
}
.app-body .app-main{min-width:0;}
.app-body .app-top{
  min-height:72px;padding:12px clamp(17px,2.4vw,34px);background:rgba(255,255,255,.96);
  border-bottom:1px solid #e4eaf0;backdrop-filter:blur(20px);
}
.app-body .outlet-select{gap:12px;}
.app-body .outlet-select label{font-size:.71rem;color:#718196;letter-spacing:.035em;font-weight:700;}
.app-body .outlet-select select{background:#f7fafc;border-color:#e1e8ef;min-width:210px;
  padding:9px 35px 9px 12px;font-weight:750;font-size:.88rem;color:#183048;}
.app-body .app-top .toolbar{gap:8px;align-items:center;}
.app-body #dbStatus{border-radius:100px;padding:8px 12px;font-size:.71rem;}
.app-body .app-content{width:100%;max-width:1600px;margin:0 auto;
  padding:clamp(16px,2.6vw,32px);padding-bottom:80px;}
.app-body .app-header{margin-bottom:20px;gap:14px;}
.app-body .app-header h1{font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.18;
  letter-spacing:-.035em;font-weight:820;color:#172b3f;}
.app-body .app-header p{font-size:.84rem;line-height:1.55;max-width:780px;margin-top:6px;}
.app-body .panel,.app-body .metric,.app-body .panel-card,.app-body .menu-card{
  border-radius:16px;border-color:#e3eaf0;background:#fff;box-shadow:0 7px 22px rgba(19,38,58,.033);
}
.app-body .panel{padding:clamp(14px,1.65vw,23px);}
.app-body .panel h2{font-size:1.08rem;letter-spacing:-.025em;line-height:1.25;color:#19334b;}
.app-body .metric{padding:17px 19px;border-left:3px solid #13957e;}
.app-body .metric span{font-size:.76rem;letter-spacing:.01em;color:#708296;}
.app-body .metric b{font-size:clamp(1.34rem,2vw,1.8rem);font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;color:#173248;}
.app-body .metric-grid{gap:12px;margin-bottom:16px;}
.app-body .app-grid{gap:14px;}
.app-body .panel :is(input,select,textarea),
.app-body .quick-form :is(input,select,textarea){
  border-color:#d7e2ea;background:#fff;border-radius:10px;padding:10px 12px;font-size:.88rem;}
.app-body label{font-size:.8rem;font-weight:720;color:#455d71;}
.app-body .badge{border-radius:99px;font-size:.72rem;font-weight:750;padding:6px 10px;}
.app-body .badge.success{background:#e8f7f1;color:#08795e;}
.app-body .badge.warning{background:#fff5e5;color:#a16c15;}
.app-body .data-table th{
  background:#f6f9fc;text-transform:none;letter-spacing:.01em;font-size:.74rem;
  font-weight:800;color:#637990;padding:12px 13px;border-bottom:1px solid #e4ebf1;}
.app-body .data-table td{padding:12px 13px;line-height:1.45;color:#263d51;}
.app-body .data-table tr:hover td{background:#fbfdfd;}
.app-body .menu-cards{gap:9px;}
.app-body .menu-card{transition:transform .14s,border-color .14s,box-shadow .14s;
  border:1px solid #e0e9ef;padding:14px;}
.app-body .menu-card:hover{transform:translateY(-2px);border-color:#0c927a;
  box-shadow:0 8px 18px rgba(7,139,118,.1);}
.app-body .menu-card strong{color:#193247;font-weight:800;}
.app-body .pos-layout{grid-template-columns:minmax(0,1.4fr) minmax(290px,.8fr);gap:15px;}
.app-body .pos-layout .cart{top:88px;border:1px solid #b9dfd2;
  box-shadow:0 14px 32px rgba(24,61,53,.06);}
.app-body .cart-row{grid-template-columns:minmax(0,1fr) 54px 77px 34px;gap:6px;}
.app-body .cart-summary .total{font-size:1.35rem;color:#0a775f;}
.app-body .kot{border:1px solid #e1e8ee;border-top:4px solid #e5a449;
  border-radius:15px;box-shadow:0 8px 18px rgba(19,38,58,.04);}
.app-body .kot.ready{border-top-color:#0b9174;}
.app-body .kot h3{font-size:1rem;color:#192f46;}
.app-body .kot .actions button{min-height:44px;}
.app-body .phase5-waiter-shell,.app-body .phase6-manager-shell,
.app-body .phase7-finance-shell,.app-body .phase8-shell{max-width:1520px;}
.app-body .phase5-waiter-shell button,.app-body .phase6-manager-shell button{
  min-height:44px;}
.app-body .phase7-finance-metric,.app-body .phase8-stat{
  box-shadow:0 7px 18px rgba(19,38,58,.025);border-color:#e1ebf0;}
.app-body .login-page{background:radial-gradient(circle at 15% 18%,#deefe9 0,transparent 34%),
  radial-gradient(circle at 85% 86%,#e0eaf5 0,transparent 39%),#f4f8fb;
  padding:clamp(16px,3vw,38px);min-height:100dvh;}
.app-body .login-card{border:1px solid #e0e9ef;box-shadow:0 25px 80px rgba(17,43,62,.09);
  border-radius:22px;width:min(455px,100%);}
.app-body .login-card h1{font-size:1.65rem;letter-spacing:-.04em;}
.app-body .login-card img{max-width:210px;}
/* Role-sensitive quick navigation is populated from existing authorized sidebar modules. */
.app-body .premium-mobile-dock{display:none;}
.app-body .premium-scrim{display:none;}
.app-body .premium-mobile-dock button:focus-visible,
.app-body .app-nav button:focus-visible{outline:3px solid #f7b84a;outline-offset:1px;}
@media (max-width:1100px){
  .app-body .app-shell{grid-template-columns:213px minmax(0,1fr);}
  .app-body .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app-body .menu-cards,.app-body .kitchen-board{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  .app-body .app-shell{grid-template-columns:minmax(0,1fr);}
  .app-body .app-sidebar{position:fixed;z-index:111;top:0;bottom:0;
    left:0;width:min(290px,85vw);height:100dvh;overflow-y:auto;
    transform:translateX(-105%);transition:transform .2s ease;}
  .app-body .app-sidebar.open{left:0;transform:translateX(0);}
  .app-body .premium-scrim{position:fixed;inset:0;background:rgba(11,29,43,.52);
    z-index:109;}
  .app-body .premium-scrim.open{display:block;}
  .app-body .app-top{top:0;min-height:60px;padding:9px 12px;}
  .app-body .outlet-select select{min-width:0;width:clamp(135px,36vw,245px);max-width:245px;}
  .app-body .app-top .toolbar{gap:5px;}
  .app-body .app-top #installBtn{display:none!important;}
  .app-body .app-top #logoutBtn{display:none;}
  .app-body .app-top #syncNowBtn{padding:8px 9px;min-height:38px;}
  .app-body #dbStatus{padding:6px 8px;font-size:.66rem;}
  .app-body .app-content{padding:16px 12px calc(106px + env(safe-area-inset-bottom,0px));}
  .app-body .pos-layout,.app-body .app-grid,.app-body .app-grid.three,
  .app-body .kitchen-board{grid-template-columns:minmax(0,1fr);}
  .app-body .pos-layout .cart{position:relative;top:auto;}
  .app-body .app-header{gap:8px;flex-wrap:wrap;}
  .app-body .app-header h1{font-size:1.5rem;}
  .app-body .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .app-body .metric{padding:13px;}
  .app-body .metric b{font-size:1.35rem;}
  .app-body .data-table{min-width:580px;}
  .app-body .premium-mobile-dock{
    position:fixed;bottom:0;left:0;right:0;z-index:82;display:flex;align-items:stretch;
    gap:5px;min-height:62px;padding:6px 7px calc(6px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #e0e9ee;background:rgba(255,255,255,.97);
    box-shadow:0 -5px 26px rgba(20,42,58,.065);backdrop-filter:blur(16px);
  }
  .app-body .premium-mobile-dock button{flex:1 1 0;min-width:0;min-height:53px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
    border:0;border-radius:12px;background:transparent;color:#718399;
    font-size:.66rem;font-weight:770;cursor:pointer;padding:4px 3px;line-height:1.2;}
  .app-body .premium-mobile-dock button .premium-dock-icon{font-size:1.25rem;line-height:1;}
  .app-body .premium-mobile-dock button.active{background:#e7f7f1;color:#067a62;}
  .app-body .app-sidebar .app-nav button{min-height:44px;}
  .app-body .mobile-app-menu{display:inline-flex!important;}
}
@media (max-width:480px){
  .app-body .app-top{gap:8px;}
  .app-body .outlet-select{flex:1;min-width:0;gap:6px;}
  .app-body .outlet-select label{min-width:0;}
  .app-body .outlet-select select{max-width:44vw;width:100%;font-size:.77rem;}
  .app-body .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app-body .metric span{font-size:.71rem;}
  .app-body .panel{padding:12px;}
  .app-body .quick-form{grid-template-columns:1fr;}
  .app-body .quick-form .full{grid-column:auto;}
  .app-body .menu-cards{grid-template-columns:1fr;}
  .app-body .login-card{padding:22px 18px;}
}
@media (prefers-reduced-motion:reduce){
  .app-body :is(*, *::before, *::after){animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* Real-device QA correction: outlet labels must never collapse on 390px phones. */
@media (max-width:520px){
  .app-body .app-top{display:grid;grid-template-columns:minmax(0,1fr);
    gap:7px;min-height:0;padding:9px 12px;}
  .app-body .outlet-select{display:flex;width:100%;min-width:0;gap:9px;}
  .app-body .outlet-select label{flex:1;display:flex;flex-direction:row;
    min-width:0;align-items:center;gap:10px;}
  .app-body .outlet-select select{flex:1;width:100%;max-width:none;
    min-width:0;min-height:42px;font-size:.82rem;}
  .app-body .app-top .toolbar{width:100%;justify-content:space-between;}
  .app-body .app-top #syncNowBtn{margin-left:auto;}
}