/* Dark cPanel-like UI (custom) */
:root{
  --bg0:#070b14;--bg1:#0b1220;--panel:rgba(18,27,52,.62);--stroke:rgba(255,255,255,.08);--stroke2:rgba(255,255,255,.12);
  --txt:#eaf1ff;--muted:#9fb0c8;--brand:#5ce1ff;--ok:#9bffb0;--warn:#ffd36a;--bad:#ff6b6b;--shadow:0 18px 45px rgba(0,0,0,.45);
  --r16:16px;--r20:20px
}
*{box-sizing:border-box}html,body{height:100%}
body{
  margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;color:var(--txt);
  background:
    radial-gradient(1200px 620px at 18% 10%, rgba(92,225,255,.16), transparent 62%),
    radial-gradient(980px 560px at 88% 12%, rgba(155,255,176,.14), transparent 60%),
    radial-gradient(900px 520px at 56% 82%, rgba(255,211,106,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
a{color:var(--brand);text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:22px}
.shell{border:1px solid var(--stroke);background:rgba(255,255,255,.02);border-radius:var(--r20);overflow:hidden;box-shadow:var(--shadow)}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(180deg, rgba(18,27,52,.72), rgba(10,16,32,.62));border-bottom:1px solid var(--stroke)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.logo{width:148px;height:40px;border-radius:12px;background:url(../assets/logo.png) center/contain no-repeat;border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.badge{font-size:12px;color:var(--muted);border:1px solid var(--stroke2);padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.15)}
.actions{display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--stroke);background:rgba(0,0,0,.20);padding:10px 12px;border-radius:999px;min-width:320px}
.search input{width:100%;border:0;outline:0;background:transparent;color:var(--txt)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--stroke2);background:rgba(92,225,255,.12);color:var(--txt);cursor:pointer;font-weight:750}
.btn:hover{filter:brightness(1.06)}.btn.ghost{background:rgba(255,255,255,.04)}.btn.bad{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.24)}
.layout{display:grid;grid-template-columns:270px 1fr;min-height:calc(100vh - 44px)}
.sidebar{padding:14px;background:linear-gradient(180deg, rgba(10,16,32,.62), rgba(10,16,32,.40));border-left:1px solid var(--stroke)}
.nav-group{margin-top:10px}.nav-title{font-size:12px;color:var(--muted);padding:8px 10px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:14px;color:var(--txt)}
.nav a:hover{background:rgba(255,255,255,.05)}
.nav a.active{background:rgba(92,225,255,.12);border:1px solid rgba(92,225,255,.22)}
.dot{width:10px;height:10px;border-radius:4px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.dot.blue{background:rgba(92,225,255,.55);border-color:rgba(92,225,255,.25)}
.dot.green{background:rgba(155,255,176,.55);border-color:rgba(155,255,176,.25)}
.dot.yellow{background:rgba(255,211,106,.55);border-color:rgba(255,211,106,.25)}
.dot.red{background:rgba(255,107,107,.55);border-color:rgba(255,107,107,.25)}
.content{padding:18px;background:rgba(255,255,255,.02)}
.card{border:1px solid var(--stroke);background:var(--panel);border-radius:var(--r20);padding:16px}
.h1{font-size:20px;font-weight:900;margin:0 0 8px}
.small{color:var(--muted);font-size:13px;line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.tile{border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(18,27,52,.68), rgba(10,16,32,.42));border-radius:18px;padding:14px;transition:transform .12s ease, filter .12s ease}
.tile:hover{transform:translateY(-2px);filter:brightness(1.04)}
.tile .t{font-weight:900}.tile .d{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.6}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input,select,textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid var(--stroke2);background:rgba(0,0,0,.20);color:var(--txt);outline:none}
textarea{min-height:110px;resize:vertical}
.alert{border:1px solid var(--stroke2);background:rgba(255,255,255,.04);padding:12px 14px;border-radius:16px;margin:10px 0}
.alert.ok{border-color:rgba(155,255,176,.22);background:rgba(155,255,176,.08)}
.alert.bad{border-color:rgba(255,107,107,.26);background:rgba(255,107,107,.08)}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--stroke);text-align:left;vertical-align:top}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke2);color:var(--muted);font-size:12px}
pre{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.22);padding:12px;border-radius:16px;border:1px solid var(--stroke);margin:10px 0}
@media(max-width:1040px){.layout{grid-template-columns:1fr}.sidebar{border-left:0;border-top:1px solid var(--stroke)}.search{min-width:200px}.grid{grid-template-columns:1fr}}

/* Mobile Offcanvas Sidebar */
.iconbtn{
  display:none;
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  cursor:pointer;
  font-size:18px;
}
.nav-overlay{
  display:none;
}
@media(max-width:1040px){
  .iconbtn{display:inline-flex;align-items:center;justify-content:center}
  .layout{grid-template-columns:1fr; position:relative}
  .sidebar{
    position:fixed;
    top:22px;
    left:22px;
    right:auto;
    width:min(86vw, 360px);
    height: calc(100vh - 44px);
    z-index: 50;
    transform: translateX(-110%);
    transition: transform .18s ease;
    border-radius: var(--r20);
    box-shadow: var(--shadow);
  }
  .shell.nav-open .sidebar{ transform: translateX(0); }
  .nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:49;
    display:none;
  }
  .shell.nav-open .nav-overlay{display:block;}
  .content{padding:14px}
  .search{display:none}
}
/* Minor tweaks */
.table th,.table td{ text-align:left; }

/* v6 unified background */
body, .container, .layout, .shell {
  background: linear-gradient(180deg, #0b1020 0%, #0b1020 100%);
}
.card, .sidebar, .topbar {
  background: #0f172a;
}

/* v6 mobile tables */
@media(max-width:768px){
  .table{display:block;overflow-x:auto;white-space:nowrap}
  .table th,.table td{padding:10px}
  .btn{width:100%}
  .row{flex-direction:column}
}

/* v7.2 Email table mobile optimization (card table) */
.table-wrap{width:100%;overflow:auto;border-radius:16px;border:1px solid var(--stroke);background:rgba(0,0,0,.12)}
.table-wrap .table{margin:0;border-collapse:collapse;min-width:620px}
@media(max-width:768px){
  /* Turn tables into cards */
  .table-wrap{overflow:visible;border:0;background:transparent}
  .table-wrap .table{min-width:0;width:100%;display:block}
  .table-wrap .table thead{display:none}
  .table-wrap .table tbody{display:block}
  .table-wrap .table tr{
    display:block;
    margin:0 0 12px 0;
    border:1px solid var(--stroke);
    border-radius:18px;
    background:var(--panel);
    overflow:hidden;
  }
  .table-wrap .table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid var(--stroke);
    white-space:normal;
  }
  .table-wrap .table td:last-child{border-bottom:0}
  .table-wrap .table td::before{
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding-right:12px;
  }
  .table-wrap .table td.actions{
    flex-direction:column;
    align-items:stretch;
  }
  .table-wrap .table td.actions::before{content:"Actions"}
  .table-wrap .table td.actions .btn,
  .table-wrap .table td.actions a.btn{
    width:100%;
  }
}