/* MineMapper Pro — Enterprise Theme (Dark, Sidebar) */
:root{
  --bg:#0a0f15; --panel:#0e131a; --panel-2:#0b1016;
  --text:#e7eef6; --muted:#93a4b7; --edge:#1d2632;
  --primary:#3b82f6; --primary-600:#2563eb; --primary-700:#1d4ed8;
  --accent:#22c55e; --danger:#ef4444; --warn:#f59e0b;
  --radius-lg:16px; --radius-md:12px; --radius-sm:10px;
  --shadow:0 8px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; background:linear-gradient(180deg,var(--bg),#0c1218 70%); color:var(--text);
     font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
a{color:var(--text); text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:8px}

/* Layout: Sidebar + Header */
.app{display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh}
.sidebar{
  position:sticky; top:0; align-self:start; height:100vh; overflow:auto;
  background:linear-gradient(180deg,#0b1118,#0a0f15);
  border-right:1px solid var(--edge); padding:18px 14px;
}
.brand{font-weight:800; font-size:18px; letter-spacing:.4px; margin-bottom:16px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.navlist{display:flex; flex-direction:column; gap:8px}
.navlist a{
  padding:10px 12px; border-radius:12px; border:1px solid var(--edge);
  background:#0c1219; transition:background .15s,border .15s,transform .05s;
}
.navlist a:hover{background:#0f1620; border-color:#2b3644}
.navlist .section{margin-top:10px; color:var(--muted); font-size:12px; padding:6px 2px}
.sidebar .user{margin-top:auto; color:var(--muted); font-size:12px}
.content{
  padding:24px 20px;
  height:100vh;           /* fill viewport height */
  overflow:auto;          /* scroll within main pane */
}
.container{
  max-width:none;         /* remove 1280px cap */
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
}


/* Cards, tables, forms */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--edge);
      border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow)}
.h1{font-size:24px; margin:0 0 8px; font-weight:800}
.h2{font-size:18px; margin:0 0 8px; font-weight:700}
.muted{color:var(--muted)} hr.sep{border:0; border-top:1px solid var(--edge); margin:18px 0}
.grid{display:grid; gap:14px} .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 1100px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

label{display:block; font-size:12px; color:var(--muted); margin:6px 0 6px}
input, select, textarea{
  width:100%; background:#0c1219; color:var(--text); border:1px solid var(--edge);
  padding:12px 12px; border-radius:var(--radius-sm); transition:border .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus{border-color:#2f3a49; box-shadow:0 0 0 3px rgba(59,130,246,.15); background:#0e1621}
button, .btn{appearance:none; background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:white; border:1px solid #1e40af; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
  transition:transform .05s, box-shadow .15s, background .15s; box-shadow:0 6px 20px rgba(37,99,235,.25); display:inline-block}
.btn:hover{background:linear-gradient(180deg,var(--primary-600),var(--primary-700))} .btn.ghost{background:transparent; border-color:var(--edge); box-shadow:none}
.btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626); border-color:#b91c1c; box-shadow:0 6px 20px rgba(239,68,68,.25)}

.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px}
.table th{text-align:left; font-weight:600; color:#cbd5e1; background:#0f1620; border-bottom:1px solid var(--edge); padding:12px}
.table td{border-bottom:1px solid var(--edge); padding:12px} .table tr:hover td{background:#0c1219}

.badge{border:1px solid var(--edge); padding:4px 10px; border-radius:999px; font-size:12px; color:#cbd5e1; background:#0f1620}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#0e1621; border:1px solid var(--edge); font-size:12px; color:#cbd5e1}
.icon-dot{display:inline-block; width:14px; height:14px; border-radius:999px; vertical-align:middle; margin-right:6px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.5)}

#map{width:100%; height:560px; border-radius:16px; border:1px solid var(--edge)}
.cover-img{max-width:300px; max-height:300px; object-fit:cover; border-radius:12px; border:1px solid var(--edge); box-shadow:var(--shadow)}
.toast{position:fixed; right:16px; bottom:16px; background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--edge); padding:12px 14px; border-radius:14px; box-shadow:var(--shadow); color:var(--text)}
.row{display:flex; gap:10px; align-items:center} .mt-10{margin-top:10px} .mt-16{margin-top:16px}