/* =====================================================================
   CORE: page layout — inbox chhara baki shob page (Settings, Auto-Reply,
   Training, Flows, Orders). templates/base.html er .pg-bar ar body.page.
   Rong gulo token (var(--...)) theke ashe, tai light / dark / ISP dark
   nije nije mile jay — page CSS e alada kore rong likhte hoy na.

   Page e use korar moto class:
     .pg-main     — majhkhaner content (max 1080px)
     .pg-card     — sada/dark card (border + radius)
     .pg-btn      — top bar er button (.icon = shudhu icon)
   ===================================================================== */
body.page{min-height:100vh;padding-left:60px;background:var(--bg);color:var(--ink)}

/* ---- top bar (inbox er appbar er moto) ---- */
.pg-bar{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;
  background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh-sm)}
.pg-title{display:flex;align-items:center;gap:11px;min-width:0}
.pg-title h1{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--tint);color:var(--blue-600)}
.pg-ic svg{width:18px;height:18px}
.pg-sp{flex:1}
.pg-actions{display:flex;align-items:center;gap:8px}
.pg-actions select{height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);
  padding:0 10px;font:inherit;font-size:13px;max-width:220px}
.pg-btn{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border:none;border-radius:10px;cursor:pointer;
  background:var(--tint);color:var(--muted);font:inherit;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.pg-btn:hover{background:var(--blue-50);color:var(--ink)}
.pg-btn.icon{width:36px;padding:0;justify-content:center}
.pg-btn svg{flex:0 0 auto}

/* ---- content ---- */
.pg-main{max-width:1080px;margin:0 auto;padding:22px}
.pg-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm)}

/* ---- dark ---- */
body.dark .pg-bar{background:#111b21;box-shadow:none}
body.dark .pg-ic{background:#202c33;color:#00a884}
body.dark .pg-btn{background:#202c33;color:#d1d7db}
body.dark .pg-btn:hover{background:#2a3942;color:#e9edef}

/* ---- ISP dark (WhatsApp) ---- */
body.biz-isp.dark .pg-bar{background:var(--wa-bg);border-color:var(--line)}
body.biz-isp.dark .pg-ic{background:var(--wa-hover);color:var(--wa-green)}
body.biz-isp.dark .pg-btn{background:transparent;color:var(--wa-sub)}
body.biz-isp.dark .pg-btn:hover{background:rgba(255,255,255,.08);color:#fafafa}
body.biz-isp.dark .pg-card{background:var(--wa-bg);border-color:var(--line);box-shadow:none}
body.biz-isp.dark .pg-actions select{background:var(--wa-field);border-color:transparent;color:var(--ink)}

@media (max-width:680px){
  body.page{padding-left:52px}
  .pg-bar{padding:0 12px}
  .pg-btn span{display:none}
  .pg-main{padding:14px}
}