/* Minimal blue theme */
:root{
  --bg1:#c6d9ee;
  --bg2:#dcf0f9;
  --card:#f6fbff;
  --card2:#eef6ff;
  --text:#0b1b2a;
  --muted:#55708a;
  --line:rgba(15,40,70,.15);
  --accent:#1f6fb2;
  --accent2:#0d4f86;
  --danger:#b21f2f;
  --shadow: 0 12px 40px rgba(0,0,0,.12);
  --radius:18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
}
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:260px;
  padding:18px 14px;
  background:rgba(255,255,255,.18);
  border-right:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.brand{padding:8px 10px 12px}
.brand__title{font-size:20px;font-weight:800}
.brand__subtitle{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:6px;padding:6px}
.nav__link{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  border:1px solid transparent;
}
.nav__link:hover{background:rgba(255,255,255,.35); border-color:var(--line)}
.nav__link.is-active{background:rgba(255,255,255,.55); border-color:rgba(31,111,178,.25)}
.nav__link--muted{color:var(--muted)}
.nav__sep{height:10px}
.sidebar__footer{padding:10px;display:flex;flex-direction:column;gap:10px}
.kv{display:flex;justify-content:space-between;gap:10px; font-size:12px;color:var(--muted)}
.kv__v{font-family:var(--mono); color:var(--text)}
.main{flex:1;display:flex;flex-direction:column}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.crumbs{color:var(--muted); font-size:13px}
.badge{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}
.content{padding:18px}
.card{
  background:rgba(255,255,255,.65);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:16px;
}
.footer{
  padding:12px 18px;
  color:var(--muted);
  font-size:12px;
}
.btn{
  appearance:none;
  border:1px solid rgba(31,111,178,.35);
  background:rgba(31,111,178,.92);
  color:white;
  border-radius:12px;
  padding:9px 12px;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{background:rgba(31,111,178,1)}
.btn--ghost{
  background:rgba(255,255,255,.55);
  color:var(--accent2);
  border-color:rgba(15,40,70,.20);
}
.btn--ghost:hover{background:rgba(255,255,255,.8)}
.h1{font-size:34px;margin:0 0 6px;font-weight:900}
.h2{font-size:18px;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width: 980px){ .sidebar{width:220px} .grid{grid-template-columns:1fr}}
.kpi{
  background:rgba(255,255,255,.65);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
}
.kpi__k{color:var(--muted);font-size:12px}
.kpi__v{font-size:26px;font-weight:900;margin-top:4px}
.hr{height:1px;background:var(--line);margin:14px 0}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px}
.table th{color:var(--muted);text-align:left;font-weight:800}
.table tr:hover td{background:rgba(255,255,255,.25)}
.input, .select{
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  min-width:220px;
}
.textarea{
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  width:100%;
  min-height:90px;
  resize:vertical;
}
.small{font-size:12px;color:var(--muted)}
.toastWrap{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{
  max-width:340px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-left:5px solid var(--accent);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: var(--shadow);
}
.toast__t{font-weight:900}
.toast__m{color:var(--muted);font-size:12px;margin-top:2px}
.toast--bad{border-left-color:var(--danger)}

/* ================================
   Discrete login mode (no sidebar)
   ================================ */
body.is-locked .sidebar,
body.is-locked .topbar,
body.is-locked .footer {
  display:none !important;
}

body.is-locked .shell {
  display:block;
}

body.is-locked .main {
  width:100%;
}

body.is-locked .content {
  padding: 36px 18px;
  max-width: 820px;
  margin: 0 auto;
}

body.is-locked .card {
  box-shadow: var(--shadow);
}

/* ================================
   Superadmin settings layout
   ================================ */
.settingsGrid{display:grid;grid-template-columns: 420px 1fr;gap:14px}
@media (max-width: 980px){.settingsGrid{grid-template-columns:1fr}}
.settingsCol{min-width:0}
.cardInner{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius: var(--radius);padding:10px;box-shadow: var(--shadow)}
.btn--sm{padding:6px 10px;border-radius:10px;font-size:12px}
.is-selected td{background:rgba(255,255,255,.35)}
.chkGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width: 980px){.chkGrid{grid-template-columns:1fr}}
.chk{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.55)}
.chkInline{display:flex;gap:8px;align-items:center}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:12px;color:var(--muted);font-weight:800}
.code{white-space:pre-wrap;background:rgba(0,0,0,.05);border:1px solid var(--line);border-radius:14px;padding:10px;}


.nav__header{margin:14px 10px 6px;font-size:12px;opacity:.7;letter-spacing:.06em;text-transform:uppercase}

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.row-actions {
  align-items: center;
}

.row-actions .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 6px 10px;
}
.pill.ok {
  background: #22c55e;   /* grön */
  color: white;
  font-weight: 700;
}

.pill.bad {
  background: #ef4444;   /* röd */
  color: white;
  font-weight: 700;
}
.phone-wrap {
  position: relative;
  display: inline-block;
}

.phone-wrap input {
  padding-right: 28px; /* plats för X */
}

.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 12px;
  color: #888;
  user-select: none;
}

.clear-btn:hover {
  color: #e74c3c;
}