*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f4f6f8;color:#1f2937}.layout{display:flex;min-height:100vh}.sidebar{width:240px;background:#111827;color:#fff;padding:22px 14px;position:fixed;inset:0 auto 0 0}.brand{font-size:20px;font-weight:800;padding:0 10px 25px}.brand span{font-weight:400;color:#9ca3af}.userbox{background:#1f2937;border-radius:10px;padding:12px;margin-bottom:16px}.userbox small{display:block;color:#9ca3af;margin-top:4px;text-transform:capitalize}.sidebar nav a{display:block;color:#d1d5db;text-decoration:none;padding:11px 12px;border-radius:8px;margin:3px 0}.sidebar nav a:hover{background:#374151;color:#fff}.main{margin-left:240px;width:calc(100% - 240px);padding:20px}.topbar{background:#fff;border-radius:10px;padding:15px 18px;display:flex;justify-content:space-between;margin-bottom:18px;box-shadow:0 1px 3px #00000010}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 1px 3px #00000012}.stat{font-size:25px;font-weight:800;margin-top:8px}.muted{color:#6b7280;font-size:13px}.toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap}.btn{display:inline-block;border:0;background:#2563eb;color:#fff;padding:9px 13px;border-radius:7px;text-decoration:none;cursor:pointer}.btn.gray{background:#6b7280}.btn.green{background:#16a34a}.btn.red{background:#dc2626}.btn.small{padding:6px 9px;font-size:12px}.tablewrap{background:#fff;border-radius:10px;overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px 12px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:14px}.table th{background:#f9fafb}.form{background:#fff;padding:18px;border-radius:10px}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:7px}.field.full{grid-column:1/-1}.actions{margin-top:15px;display:flex;gap:8px}.alert{padding:11px 14px;border-radius:8px;background:#dbeafe;margin-bottom:14px}.alert.success{background:#dcfce7}.alert.error{background:#fee2e2}.badge{display:inline-block;padding:4px 8px;border-radius:20px;font-size:12px;background:#e5e7eb}.badge.ok{background:#dcfce7;color:#166534}.badge.bad{background:#fee2e2;color:#991b1b}.scanbox{max-width:650px;margin:auto}.scan-result{text-align:center;padding:20px;background:#fff;border-radius:10px;margin-top:15px;min-height:110px}.video{width:100%;border-radius:10px;background:#111}.footer{text-align:center;color:#9ca3af;padding:15px;margin-left:240px}@media(max-width:850px){.sidebar{position:static;width:100%;height:auto}.layout{display:block}.main{margin-left:0;width:100%}.footer{margin-left:0}.grid{grid-template-columns:repeat(2,1fr)}.formgrid{grid-template-columns:1fr}}@media(max-width:500px){.grid{grid-template-columns:1fr}.main{padding:10px}}

/* Sidebar responsive / collapse */
.sidebar-toggle{
  position:fixed;
  top:14px;
  left:252px;
  z-index:1001;
  border:0;
  background:#111827;
  color:#fff;
  width:42px;
  height:42px;
  border-radius:9px;
  cursor:pointer;
  font-size:20px;
  box-shadow:0 2px 8px #0002;
}
.sidebar-overlay{display:none}

body.sidebar-collapsed .sidebar{
  width:72px;
}
body.sidebar-collapsed .sidebar .brand{
  font-size:0;
  text-align:center;
  padding-left:0;
  padding-right:0;
}
body.sidebar-collapsed .sidebar .brand:before{
  content:'G';
  font-size:20px;
}
body.sidebar-collapsed .sidebar .userbox{
  text-align:center;
  padding:10px 4px;
}
body.sidebar-collapsed .sidebar .userbox small{
  display:none;
}
body.sidebar-collapsed .sidebar nav a{
  font-size:0;
  text-align:center;
  padding-left:4px;
  padding-right:4px;
}
body.sidebar-collapsed .sidebar nav a:before{
  content:'•';
  font-size:20px;
}
body.sidebar-collapsed .main{
  margin-left:72px;
  width:calc(100% - 72px);
}
body.sidebar-collapsed .footer{
  margin-left:72px;
}
body.sidebar-collapsed .sidebar-toggle{
  left:84px;
}

@media(max-width:850px){
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:240px;
    height:100vh;
    transform:translateX(-100%);
    transition:transform .2s ease;
    z-index:1000;
    overflow-y:auto;
  }
  body.sidebar-open .sidebar{
    transform:translateX(0);
  }
  body.sidebar-open .sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:#0008;
    z-index:999;
  }
  .sidebar-toggle,
  body.sidebar-collapsed .sidebar-toggle{
    left:12px;
    top:12px;
  }
  body.sidebar-collapsed .sidebar{
    width:240px;
  }
  body.sidebar-collapsed .sidebar .brand{
    font-size:20px;
    text-align:left;
    padding-left:10px;
    padding-right:10px;
  }
  body.sidebar-collapsed .sidebar .brand:before{
    content:none;
  }
  body.sidebar-collapsed .sidebar .userbox{
    text-align:left;
    padding:12px;
  }
  body.sidebar-collapsed .sidebar .userbox small{
    display:block;
  }
  body.sidebar-collapsed .sidebar nav a{
    font-size:inherit;
    text-align:left;
    padding-left:12px;
    padding-right:12px;
  }
  body.sidebar-collapsed .sidebar nav a:before{
    content:none;
  }
  .main{
    margin-left:0;
    width:100%;
    padding:68px 10px 20px;
  }
  .footer{
    margin-left:0;
  }
  .topbar{
    padding-left:55px;
  }
}

.brand small{display:block;font-size:9px;font-weight:500;letter-spacing:1.5px;color:#9ca3af;margin-top:4px}
body.sidebar-collapsed .sidebar .brand small{display:none}

/* Final sidebar behavior: desktop fixed/open, mobile drawer only */
.sidebar-toggle{display:none}
.sidebar-overlay{display:none}
.sidebar{transform:none!important}
.main{margin-left:240px!important;width:calc(100% - 240px)!important}
.footer{margin-left:240px!important}

@media(max-width:850px){
  .sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:240px!important;
    height:100vh!important;
    transform:translateX(-100%)!important;
    transition:transform .2s ease!important;
    z-index:1000!important;
  }
  body.sidebar-open .sidebar{transform:translateX(0)!important}
  body.sidebar-open .sidebar-overlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    background:#0008!important;
    z-index:999!important;
  }
  .sidebar-toggle{
    display:block!important;
    position:fixed!important;
    left:12px!important;
    top:12px!important;
    z-index:1001!important;
    border:0!important;
    background:#111827!important;
    color:#fff!important;
    width:42px!important;
    height:42px!important;
    border-radius:9px!important;
    cursor:pointer!important;
    font-size:20px!important;
  }
  .main{margin-left:0!important;width:100%!important;padding:68px 10px 20px!important}
  .footer{margin-left:0!important}
  .topbar{padding-left:55px!important}
}