:root{
    --primary:#1F2A44;
    --accent:#F36B21;
    --bg:#F5F7FA;
    --border:#E6EAF0;
    --card:#FFFFFF;
    --text:#101828;
    --muted:#667085;
  }

  html, body{
    height:100%;
  }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
  }

  /* =========================
     TOPBAR
  ========================= */
  .topbar{
    height:56px;
    background: var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 16px;
  }
  .topbar-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width: 240px;
  }
  .topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand-badge{
    background: var(--accent);
    color:#fff;
    font-weight:800;
    padding:.2rem .55rem;
    border-radius:.55rem;
    letter-spacing:.5px;
  }
  .brand-title{
    font-weight:700;
    opacity:.95;
  }
  .whoami{
    font-size:.9rem;
    opacity:.85;
    white-space:nowrap;
  }

  /* =========================
     LAYOUT
  ========================= */
  .layout{
    display:flex;
    min-height: calc(100vh - 56px);
  }

  .sidebar{
    width: 280px;
    background:#fff;
    border-right:1px solid var(--border);
    padding: 14px;
  }

  .main{
    flex:1;
    padding: 18px;
  }

  .page-head{
    margin-bottom: 12px;
  }

  /* =========================
     NAV
  ========================= */
  .nav-btn{
    width:100%;
    text-align:left;
    border:1px solid var(--border);
    background:#fff;
    padding:.55rem .7rem;
    border-radius:.75rem;
    transition: .15s ease;
  }
  .nav-btn:hover{
    border-color:#d7dde7;
    background:#fbfcfe;
  }
  .nav-btn.active{
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(243,107,33,.15);
  }

  /* =========================
     CARDS / KPI
  ========================= */
  .card-app{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: 1rem;
  }
  .kpi{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .kpi .num{
    font-size:1.7rem;
    font-weight:800;
    color:var(--primary);
    line-height:1;
  }
  .kpi .tag{
    font-size:.85rem;
    color:var(--muted);
  }

  /* =========================
     BUTTON ACCENT
  ========================= */
  .btn-accent{
    background: var(--accent);
    border-color: var(--accent);
    color:#fff;
  }
  .btn-accent:hover{
    filter: brightness(.97);
    color:#fff;
  }

  /* =========================
     MODAL
  ========================= */
  .modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 16px;
    z-index: 9999;
  }
  .modal-card{
    width: min(720px, 100%);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }

  /* =========================
     RESPONSIVE
  ========================= */
  @media (max-width: 992px){
    .sidebar{ width: 250px; }
  }
  @media (max-width: 768px){
    .layout{ flex-direction: column; }
    .sidebar{
      width: 100%;
      border-right:none;
      border-bottom:1px solid var(--border);
    }
    .main{ padding: 14px; }
    .topbar-left{ min-width: 0; }
    .brand-title{ display:none; } /* มือถือให้เหลือ badge + user */
  }
  .pill{
  display:inline-block;
  padding:.2rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:.78rem;
  background:#fff;
  color:#344054;
}
.pill-open{
  border-color: rgba(243,107,33,.35);
  background: rgba(243,107,33,.08);
  color:#B54708;
}
.pill-done{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.08);
  color:#027A48;
}

  /* =========================
     FOOTER
  ========================= */
  body.with-footer{
    padding-bottom: 52px; /* reserve space for fixed footer */
  }
  .app-footer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    background: rgba(245,247,250,.95);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    padding: 8px 12px;
  }