/* BM Ops Admin – Shopify-szerű (Polaris inspired) */
:root{
  --bg:#f6f6f7;
  --surface:#ffffff;
  --surface2:#fbfbfb;
  --border:#e1e3e5;
  --text:#202223;
  --muted:#6d7175;
  --primary:#008060;
  --primary-hover:#006e52;
  --danger:#d82c0d;
  --danger-hover:#b4260b;
  --focus:#2c6ecb;
  --shadow: 0 1px 0 rgba(0,0,0,.05);
  --r:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

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

h1,h2{margin:0 0 10px}
h1{font-size:18px}
h2{font-size:16px}

/* --- Shell / Sidebar --- */
.bm-shell{
  display:flex;
  min-height:100vh;
  background:var(--bg);
}

.bm-sidebar{
  width:260px;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:14px 12px;
  position:sticky;
  top:0;
  height:100vh;
}

.bm-sidebar__top{
  padding:10px 10px 14px;
  border-bottom:1px solid var(--border);
  margin-bottom:10px;
}

.bm-brand{
  font-weight:700;
  color:var(--text);
  font-size:14px;
}
.bm-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  word-break:break-word;
}

.bm-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 6px;
}

.bm-nav__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 10px;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  font-size: var(--p-font-size-325);
        letter-spacing: var(--p-font-letter-spacing-normal);
        line-height: var(--p-font-line-height-500);
  border:1px solid transparent;
}
.bm-nav__item:hover{
  background:#f1f2f3;
  border-color:var(--border);

}
.bm-nav__item.is-active{
  background:#d0d0d0;
    font-weight: 600;
}

.bm-sidebar__bottom{
  margin-top:auto;
  padding:12px 10px 10px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.bm-user{color:var(--muted);font-size:12px}
.bm-logout{
  color:var(--danger);
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  padding:6px 8px;
  border-radius:8px;
}
.bm-logout:hover{background:rgba(216,44,13,.08)}

/* --- Main content --- */
.bm-main{
  flex:1;
  padding:22px;
}

.bm-container{
  max-width:95vw;
  margin:0 auto;
}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:16px;
}
.card + .card{margin-top:14px}

/* Page header row */
.pagehead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.pagehead .meta{margin-top:2px}

/* Buttons */
.btn, .btn2, .btnDanger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  font-size:13px;
  line-height:1;
}
.btn{background:var(--primary);color:#fff}
.btn:hover{background:var(--primary-hover)}
.btn2{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn2:hover{background:var(--surface2)}
.btnDanger{background:var(--danger);color:#fff}
.btnDanger:hover{background:var(--danger-hover)}
button.btn,button.btn2,button.btnDanger{appearance:none}

/* Forms */
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:10px 0 6px;
}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(44,110,203,.15);
}
textarea{resize:vertical}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 780px){ .grid{grid-template-columns:1fr} }

/* Messages */
.msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface2);
}
.msg.ok{border-color:rgba(0,128,96,.25); background:rgba(0,128,96,.07)}
.msg.err{border-color:rgba(216,44,13,.25); background:rgba(216,44,13,.07)}

/* Tables */
.tablewrap{overflow:auto}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  min-width:900px; /* Shopify érzés: szélesebb táblák */
}
thead th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  background:var(--surface2);
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfb}

/* Fix: ne tudjon óriási lenni a kép */
.thumb{
  width:var(--s-thumbnail-size-25111, var(--p-height-1000-25111, 2.5rem)) !important;
  height:var(--s-thumbnail-size-25111, var(--p-height-1000-25111, 2.5rem)) !important;
  max-width:40px !important;
  max-height:40px !important;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  background:#fff;
  display:block;
}

/* Tabs (Összes/Aktív/Vázlat/Archivált) */
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.tabs a{
  text-decoration:none;
  padding:6px 10px;
  border-radius:20px;
  border:1px solid transparent;
  font-weight:400;
  color:var(--text);
}
.tabs a:hover{background:var(--surface2);border-color:var(--border)}
.tabs a.active{
  background:#e1e1e1;
  font-weight:700;
  border-radius: 20px;
}

/* Utility */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.searchbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
}
.searchbar .grow{flex:1;min-width:260px}

/* Responsive */
@media (max-width: 980px){
  .bm-sidebar{ width:220px; }
  .bm-main{ padding:16px; }
}
@media (max-width: 760px){
  .bm-shell{ flex-direction:column; }
  .bm-sidebar{
    width:100%;
    height:auto;
    position:relative;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
}