/* =========================================================
   BHOJANBOOK — Restaurant Manager
   Custom classes are all prefixed "bb-" (Bhojanbook)
   ========================================================= */

:root{
  --bb-purple:      #5227c0;
  --bb-purple-dark: #4C1D95;
  --bb-purple-soft: #F3ECFF;
  --bb-blue:        #EC1E79;
  --bb-border:      #EFE4FA;
  --bb-bg:          #F7F5FB;
  --bb-white:       #FFFFFF;
  --bb-text:        #1F1B3A;
  --bb-muted:       #7A7F94;
  --bb-green:       #17A672;
  --bb-green-bg:    #E7F8F1;
  --bb-orange-bg:   #FEF0DF;
  --bb-orange:      #F7941D;
  --bb-blue-bg:     #FDEAF3;
  --bb-radius-xl:   26px;
  --bb-radius-lg:   16px;
  --bb-radius-md:   12px;
  --bb-sidebar-w:   64px;
  --bb-topbar-h:    64px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  height:100%;
}

body{
  font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bb-bg);
  color:var(--bb-text);
  padding:0;
}

/* ---------------------------------------------------------
   THE L-SHAPE SHELL
   bb-shell is the outer rounded frame.
   bb-topbar + bb-sidebar together form the continuous
   "L" shaped panel (top strip + left column), visually
   separated from bb-main by a single hairline border.

   Fixed to exactly 100vh (not min-height) so the shell itself
   never grows taller than the viewport and the page never has
   to scroll as a whole — any page too tall for the screen
   scrolls internally inside .bb-main instead. This is what lets
   full-height screens (like the billing screen) reliably fit
   MacBooks, 13–15" laptops, and desktop monitors alike.
   --------------------------------------------------------- */
.bb-shell{
  display:grid;
  grid-template-columns: var(--bb-sidebar-w) 1fr;
  grid-template-rows: var(--bb-topbar-h) 1fr;
  height:100vh;
  background:var(--bb-white);
  border:none;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
}

/* ---- top bar (spans both columns) ---- */
.bb-topbar{
  grid-column: 1 / 3;
  display:flex;
  align-items:center;
  padding:0 32px;
  gap:24px;
}

.bb-brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.bb-logo-img{
  height:65px;
  width:auto;
  display:block;
}

.bb-heading-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.bb-page-title{
  font-size:21px;
  font-weight:800;
  line-height:1;
}

.bb-gear-btn{
  width:32px;
  height:32px;
  border-radius:10px;
  background:var(--bb-purple-soft);
  color:var(--bb-purple);
  border:1.5px solid var(--bb-purple);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
  transition:background .15s ease, color .15s ease, transform .2s ease;
}

.bb-gear-btn:hover{ background:var(--bb-purple); color:#fff; }
.bb-gear-btn.is-active{ transform:rotate(45deg); }

.bb-topbar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}

.bb-lang{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--bb-muted);
  font-size:14px;
}

.bb-lang i{ font-size:14px; }

.bb-lang select{
  appearance:none;
  -webkit-appearance:none;
  border:1.5px solid var(--bb-border);
  color:var(--bb-text);
  font:inherit;
  font-size:13px;
  font-weight:700;
  padding:6px 28px 6px 10px;
  border-radius:10px;
  cursor:pointer;
  background-color:var(--bb-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237A7F94' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.bb-lang select:focus{
  outline:none;
  border-color:var(--bb-purple);
}

.bb-account{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  flex-shrink:0;
}

.bb-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--bb-blue-bg);
  color:var(--bb-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.bb-account .bb-caret{ color:var(--bb-muted); font-size:12px; }

.bb-account-name{
  font-size:14px;
  font-weight:700;
  color:var(--bb-text);
  white-space:nowrap;
}

.bb-logout-btn{
  width:36px;
  height:36px;
  border:1.5px solid var(--bb-border);
  border-radius:10px;
  background:transparent;
  color:var(--bb-muted);
  cursor:pointer;
  font-size:14px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.bb-logout-btn:hover,
.bb-logout-btn:focus-visible{
  background:var(--bb-purple);
  border-color:var(--bb-purple);
  color:#fff;
}

/* ---- left sidebar (icon rail) ---- */
.bb-sidebar{
  grid-column: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:26px 0;
}

.bb-side-link{
  position:relative;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bb-purple);
  text-decoration:none;
  font-size:19px;
  border-radius:12px;
  transition:background .15s ease;
}

.bb-side-link:hover{ background:var(--bb-purple-soft); }

.bb-side-link.is-active{
  background:var(--bb-purple-soft);
}

.bb-side-link.is-active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:22px;
  border-radius:0 4px 4px 0;
  background:var(--bb-purple);
}

/* ---------------------------------------------------------
   MAIN CONTENT AREA (filled in by index.php)

   As a grid item in the 1fr row, this stretches to exactly
   (100vh - topbar height) — a definite height, not "auto" —
   which is what lets full-height children like
   .bb-billing-screen use height:100% instead of guessing at
   a viewport calc(). Padding uses clamp() so it eases down on
   narrower/shorter laptop screens instead of eating into the
   already-limited content height.
   --------------------------------------------------------- */
.bb-main{
  grid-column: 2;
  background:var(--bb-bg);
  padding:clamp(16px, 2.2vw, 32px);
  overflow-y:auto;
  border-top:1.5px solid var(--bb-purple);
  border-left:1.5px solid var(--bb-purple);
  border-top-left-radius:44px;
}

.bb-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:24px;
}

.bb-page-head h1{ font-size:24px; font-weight:800; }
.bb-page-head p{ color:var(--bb-muted); font-size:14px; margin-top:4px; }

.bb-date-pill{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bb-white);
  border:1px solid var(--bb-border);
  border-radius:12px;
  padding:10px 16px;
  font-size:13.5px;
  font-weight:600;
  color:var(--bb-text);
}

/* stat cards */
.bb-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:24px;
}

.bb-card{
  background:var(--bb-white);
  border:1px solid var(--bb-border);
  border-radius:var(--bb-radius-lg);
  padding:20px;
}

.bb-stat{ display:flex; gap:14px; align-items:flex-start; }

.bb-stat-icon{
  width:46px; height:46px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  flex-shrink:0;
}
.bb-stat-icon.purple{ background:var(--bb-purple-soft); color:var(--bb-purple);}
.bb-stat-icon.green{ background:var(--bb-green-bg); color:var(--bb-green);}
.bb-stat-icon.orange{ background:var(--bb-orange-bg); color:var(--bb-orange);}
.bb-stat-icon.blue{ background:var(--bb-blue-bg); color:var(--bb-blue);}

.bb-stat-label{ font-size:13px; color:var(--bb-muted); }
.bb-stat-value{ font-size:24px; font-weight:800; margin:4px 0 6px; }
.bb-stat-delta{ font-size:12.5px; color:var(--bb-green); font-weight:600; }
.bb-stat-delta span{ color:var(--bb-muted); font-weight:500; }

/* generic panel */
.bb-panel{
  background:var(--bb-white);
  border:1px solid var(--bb-border);
  border-radius:var(--bb-radius-lg);
  padding:22px;
}

.bb-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.bb-panel-head h2{ font-size:16px; font-weight:700; }
.bb-panel-head a{ color:var(--bb-purple); font-size:13px; font-weight:600; text-decoration:none; }

.bb-row-grid{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap:20px;
  margin-bottom:20px;
}

.bb-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--bb-border);
  font-size:13.5px;
}
.bb-list-row:last-child{ border-bottom:none; }

.bb-badge{
  padding:4px 10px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:700;
}
.bb-badge.low{ background:#FDEAEA; color:#DD4B4B; }
.bb-badge.ok{ background:var(--bb-green-bg); color:var(--bb-green); }

@media (max-width: 900px){
  .bb-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .bb-row-grid{ grid-template-columns:1fr; }
}