/* assets/css/app.css */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line2:#d1d5db;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --ok:#16a34a;
  --warn:#f59e0b;
  --danger:#dc2626;
  --shadow: 0 10px 20px rgba(17,24,39,.08);
  --radius: 14px;
  --radius2: 10px;
  --gap: 14px;
  --sidebar: 280px;
  --topbar: 74px;
  font-synthesis-weight:none;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
}

a{color:inherit}
.muted{color:var(--muted)}
.small{font-size:12px}

.app-shell{min-height:100%; display:flex; flex-direction:column}
.topbar{
  height:var(--topbar);
  display:grid;
  grid-template-columns: 220px 1fr 280px;
  align-items:stretch;
  border-bottom:1px solid var(--line);
  background:#fff;
}

.brand{display:flex; align-items:center; border-right:1px solid var(--line)}
.logo-box{padding:12px}
.logo-placeholder{
  width:160px; height:48px;
  border:1px solid var(--line2);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  background:#fff;
}
.logo-placeholder.big{width:72px;height:72px;border-radius:16px}

.topnav{display:flex; gap:0; align-items:stretch; overflow:auto}
.topnav__item{
  display:flex; align-items:center; padding:0 18px;
  border-right:1px solid var(--line);
  text-decoration:none;
  white-space:nowrap;
}
.topnav__item.is-active{
  background:linear-gradient(#fff, #fff) padding-box,
             linear-gradient(90deg, var(--primary), var(--primary2)) border-box;
  border-bottom:3px solid transparent;
  font-weight:600;
}

.userbox{
  display:flex; align-items:center; justify-content:flex-end;
  padding:10px 12px;
  border-left:1px solid var(--line);
  position:relative;
}
.userbox__btn{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--line2);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.userbox__avatar{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg)}
.userbox__name{font-weight:600}
.userbox__meta{font-size:12px;color:var(--muted)}
.userbox__chev{color:var(--muted)}
.userbox__menu{
  position:absolute; right:12px; top:62px;
  background:#fff;
  border:1px solid var(--line2);
  border-radius:12px;
  box-shadow:var(--shadow);
  min-width:220px;
  padding:6px;
  display:none;
}
.userbox__menu a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
}
.userbox__menu a:hover{background:var(--bg)}

.main{
  display:grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap:var(--gap);
  padding:var(--gap);
  align-items:start;
}

.sidebar{
  position:sticky;
  top:calc(var(--topbar) + var(--gap));
  align-self:start;
}
.sidebar__title{font-weight:700;margin:6px 0 10px 2px;color:var(--muted)}
.sidebar__content{display:flex;flex-direction:column;gap:var(--gap)}

.content{min-width:0}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  min-height: calc(100vh - var(--topbar) - 3*var(--gap));
}
.page-header{margin-bottom:var(--gap)}
.machine-banner{
  display:inline-flex;
  padding:14px 16px;
  border:1px solid var(--line2);
  border-radius:12px;
  background:#fff;
  font-size:22px;
  font-weight:700;
  letter-spacing:.2px;
}

.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:14px;
}
.panel__h{font-weight:700;margin-bottom:10px}
.kv{display:grid;grid-template-columns: 1fr auto; gap:8px 12px; font-size:14px}
.signal{font-size:20px; letter-spacing:2px; margin:4px 0 8px}

.section{margin-bottom:18px}
.section__title{font-weight:700;margin-bottom:10px}

.filters{display:grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr; gap:12px}
.field{display:flex;flex-direction:column;gap:6px; font-size:13px}
.field input,.field select{
  height:38px;
  border:1px solid var(--line2);
  border-radius:10px;
  padding:0 12px;
  outline:none;
}
.field input:focus,.field select:focus{border-color:var(--primary)}
.input-icon{position:relative}
.input-icon input{padding-right:40px; width:100%}
.input-icon .icon{position:absolute; right:10px; top:9px; color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:6px; padding:6px 0}
.checkline{display:flex;align-items:center;gap:10px}

.btn{
  height:38px;
  border:1px solid var(--line2);
  border-radius:10px;
  background:#fff;
  padding:0 12px;
  cursor:pointer;
}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn--primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn--primary:hover{background:var(--primary2)}
.w100{width:100%}
.row{display:flex;gap:10px;align-items:end}
.grow{flex:1}

.tabs, .subtabs{
  display:flex; gap:10px;
  margin:10px 0 12px;
}
.tabs__btn, .subtabs__btn{
  height:38px;
  border:1px solid var(--line2);
  border-radius:12px;
  padding:0 14px;
  background:#fff;
  cursor:pointer;
}
.tabs__btn.is-active, .subtabs__btn.is-active{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
  font-weight:700;
}

.tabpanel,.subpanel{display:none}
.tabpanel.is-active,.subpanel.is-active{display:block}

.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:14px;
  white-space:nowrap;
}
.table th{background:#fafafa; position:sticky; top:0; z-index:1}
.table tr:last-child td{border-bottom:none}

.pill{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--line2);
  background:#fff;
}
.pill--ok{border-color:rgba(22,163,74,.35); color:var(--ok)}
.pill--warn{border-color:rgba(245,158,11,.5); color:var(--warn)}
.pill--danger{border-color:rgba(220,38,38,.45); color:var(--danger)}

.grid2{display:grid;grid-template-columns: 1fr 1fr; gap:12px}
.grid4{display:grid;grid-template-columns: repeat(4, 1fr); gap:12px}
.mt{margin-top:12px}

.upload{display:flex; gap:12px; align-items:center}
.upload__thumb{
  width:88px;height:88px;border-radius:16px;
  border:1px dashed var(--line2);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  font-size:28px;
}
.upload__meta{display:flex;flex-direction:column;gap:8px}

.mapbox{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.mapbox__inner{
  height:520px;
  background:linear-gradient(180deg, #ffffff, #f3f4f6);
  display:flex; align-items:center; justify-content:center;
}

.perm-list{margin:0; padding-left:18px; display:grid; gap:6px}
.alert{padding:10px 12px;border-radius:12px;border:1px solid var(--line2);margin:12px 0}
.alert--danger{border-color:rgba(220,38,38,.35); color:var(--danger); background:rgba(220,38,38,.05)}
.alert--err{border-color:rgba(220,38,38,.35); color:var(--danger); background:rgba(220,38,38,.05)}
.alert--ok{border-color:rgba(16,185,129,.35); color:rgba(16,185,129,1); background:rgba(16,185,129,.05)}

.btn--sm{padding:6px 10px; font-size:12px; border-radius:10px}

.code{background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:12px; padding:10px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; line-height:1.4}

.plain{display:flex; align-items:center; justify-content:center; padding:30px}
.plain-card{
  width:min(560px, 92vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
}
.brand-row{display:flex; gap:14px; align-items:center}
.form{margin-top:12px; display:grid; gap:12px}
.help{margin-top:10px; font-size:13px; color:var(--muted); line-height:1.4}

@media (max-width: 1100px){
  .filters{grid-template-columns:1fr 1fr}
  .topbar{grid-template-columns: 180px 1fr 240px}
  :root{--sidebar: 260px}
}
@media (max-width: 860px){
  .main{grid-template-columns:1fr}
  .sidebar{position:static}
  .topbar{grid-template-columns: 160px 1fr 220px}
}