*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#f6f7f9;color:#111}
.app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:64px 1fr;height:100vh}
.sidebar{grid-row:1 / span 2;background:#111;color:#fff;padding:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:28px;height:28px;border-radius:6px}
.nav{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.nav button{text-align:left;background:#1b1b1b;color:#fff;border:1px solid #2a2a2a;border-radius:8px;padding:10px 12px;cursor:pointer}
.nav button.active{background:#2c6ef2;border-color:#2c6ef2}
.header{grid-column:2;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;border-bottom:1px solid #e7e9ec}
.title{font-weight:700}
.main{overflow:auto;padding:16px}
.card{background:#fff;border:1px solid #e7e9ec;border-radius:12px;padding:16px;margin-bottom:16px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.col-12{flex:1 1 100%}
.col-6{flex:1 1 calc(50% - 12px);min-width:280px}
.col-3{flex:1 1 calc(25% - 12px);min-width:180px}
label{display:block;font-size:12px;color:#555;margin-bottom:4px}
input,select,textarea{width:100%;padding:10px;border:1px solid #d7dbe0;border-radius:8px;background:#fff}
textarea{min-height:84px}
button.btn{background:#2c6ef2;color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}
button.btn.secondary{background:#f0f3f7;color:#111}
button.btn.ghost{background:#fff;color:#111;border:1px solid #d7dbe0}
button.btn.danger{background:#e11d48}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee;padding:10px;text-align:left}
.tag{background:#eef2ff;color:#1e40af;padding:4px 8px;border-radius:999px;font-size:12px}

/* Existing mobile layout */
@media (max-width:880px){
  .app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  .sidebar{grid-row:auto;grid-column:1;display:flex;align-items:center;gap:12px}
  .nav{flex-direction:row;flex-wrap:wrap}
  .header{grid-column:1}
}

/* Lock overlay (already in your app) */
.lock-overlay{position:fixed;inset:0;background:#0b0b0bcc;display:flex;align-items:center;justify-content:center;z-index:99999}
.lock-card{background:#fff;border:1px solid #e7e9ec;border-radius:12px;padding:24px;min-width:320px;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.lock-error{color:#b91c1c;font-size:12px;height:16px;margin-top:6px}

/* === Drawer add-on for phones (overrides some of the above mobile rules) === */
@media (max-width:880px){
  /* Lock scroll when drawer is open */
  body.drawer-open{overflow:hidden}

  /* Keep main grid single column */
  .app{grid-template-columns:1fr !important;grid-template-rows:auto auto 1fr}

  /* Sidebar becomes an off-canvas drawer from the left */
  .sidebar{
    position:fixed; inset:0 auto 0 0;
    width:min(86vw,340px); max-width:90vw; height:100dvh;
    transform:translateX(-100%); transition:transform .25s ease; z-index:60;
    box-shadow:0 0 0 1px rgba(0,0,0,.06), 8px 0 28px rgba(0,0,0,.18);
    display:block; /* override earlier mobile flex */
    padding:16px;  /* keep your padding */
    background:#111; color:#fff; /* ensure dark panel */
  }
  .drawer-open .sidebar{ transform:translateX(0) }

  /* Backdrop behind drawer */
  .backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    z-index:59; opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .drawer-open .backdrop{ opacity:1; pointer-events:auto }

  /* Mobile hamburger button in header */
  .menu-btn{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid #e5e7eb; background:#fff; color:#111;
    padding:10px 12px; border-radius:12px; cursor:pointer;
  }
  .burger{ width:18px; height:2px; background:#111; position:relative; }
  .burger::before,.burger::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:#111;
  }
  .burger::before{ top:-6px } .burger::after{ top:6px }

  /* Close button inside drawer */
  .sidebar .close{
    display:inline-flex; margin:0 0 12px auto;
    border:1px solid #e5e7eb; background:#fff; color:#111;
    padding:8px 12px; border-radius:10px; cursor:pointer;
  }
}