/* === v16 Apple-inspired admin (polished + responsive) ===================== */

/* Base variables (Light) */
:root{
  --bg:#f5f5f7;
  --card:#fff;
  --card-alt:#fafafa;

  --text:#1d1d1f;
  --muted:#6e6e73;

  --border:#e5e5ea;
  --border-strong:#d2d2d7;

  --accent:#0071e3;
  --accent-ghost:rgba(0,113,227,.08);

  --danger:#d70015;
  --danger-ghost:rgba(215,0,21,.08);

  --success:#34c759;
  --focus:rgba(0,113,227,.35);

  --shadow:0 8px 30px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);

  /* Hint browsers about intended color schemes */
  color-scheme: light dark;

  /* Typo scale (mobil först) */
  --fs-base: 15px;
  --fs-title: 24px;
  --fs-sub: 14px;

  /* Breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1200px;
}

/* Better box-sizing baseline */
*,*::before,*::after{ box-sizing:border-box }

/* Body / typography */
html,body{
  margin:10px;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Links */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* Images & media scale nicely */
img,svg,video,canvas{ max-width:100%; height:auto }

/* Containers */
.container{
  max-width:1200px;
  margin:36px auto;
  padding:0 16px; /* lite snävare på mobil */
}

/* Sticky nav with safe-area support */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:flex-start;
  gap:8px;
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top, 0)) 12px 12px;
  margin:12px -16px 18px;
  background:rgba(245,245,247,.8);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border);
  overflow:auto hidden;           /* gör naven scrollbar i sidled på små skärmar */
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none }
.nav a{
  padding:8px 12px;
  border-radius:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;             /* håll knappar på en rad */
}
.nav a.active,
.nav a:hover{ background:rgba(0,0,0,.06) }

/* Cards */
.hb-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.cardpad{ padding:16px 18px }
.section{
  background:var(--card-alt);
  border-top:1px solid var(--border);
  padding:14px 18px;
}

/* Headings */
.hb-title{
  font-size:var(--fs-title);
  font-weight:600;
  margin:12px 4px 16px;
}
.hb-subtitle{
  font-size:var(--fs-sub);
  color:var(--muted);
  margin:-8px 4px 14px;
}

/* Toolbar */
.hb-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  margin:10px 0 14px;
}

/* Badges */
.badge{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border-strong);
  color:var(--muted);
  background:transparent;
}
.badge.ok{
  border-color:rgba(52,199,89,.35);
  color:#1f7f46;
  background:rgba(52,199,89,.12);
}
.badge.ex{
  border-color:rgba(215,0,21,.35);
  color:#7f1120;
  background:var(--danger-ghost);
}

/* Buttons */
.hb-btn{
  appearance:none;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:9px 16px;
  font-weight:600;
  background:var(--card);
  color:var(--text);
  transition:box-shadow .15s ease, transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.hb-btn:hover{ box-shadow:0 1px 3px rgba(0,0,0,.06) }
.hb-btn:active{ transform:translateY(1px) }
.hb-btn:disabled,
.hb-btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
}

.hb-btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.hb-btn.ghost{
  background:var(--accent-ghost);
  border-color:transparent;
  color:var(--accent);
}
.hb-btn.danger{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
.hb-btn.danger.ghost{
  background:var(--danger-ghost);
  border-color:transparent;
  color:var(--danger);
}

/* Tables */
.hb-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
/* Scrollbar-container för tabeller (lägg .table-wrap runt tabellen i HTML) */
.table-wrap{ width:100%; overflow:auto; -webkit-overflow-scrolling:touch }
.hb-table thead th{
  background:#f2f2f7;
  color:#3c3c43;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.hb-table tbody td{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  background:#fff;
}

/* Alternativ "stackad" tabell på mobil (lägg .table-stack på tabellen) */
@media (max-width: 600px){
  .hb-table.table-stack thead{ display:none }
  .hb-table.table-stack,
  .hb-table.table-stack tbody,
  .hb-table.table-stack tr,
  .hb-table.table-stack td{ display:block; width:100% }
  .hb-table.table-stack tr{ border-bottom:1px solid var(--border) }
  .hb-table.table-stack td{
    background:var(--card);
    border:none;
    padding:10px 12px;
  }
  .hb-table.table-stack td::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
  }
}

/* Lists */
.hb-list{ margin:0; padding-left:18px }

/* Utilities */
.muted{ color:var(--muted) }
.hb-right{ text-align:right }
.spacer{ height:10px }
.stack{ display:grid; gap:12px }

/* Key-value layout */
.kv{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:10px 18px;
  align-items:center;
}
.kv label{
  color:var(--muted);
  font-weight:600;
}

/* ===================== Inputs (light baseline) ===================== */
input[type=text],
input[type=password],
input[type=date],
input[type=email],
input[type=number],
input[type=search],
select,
textarea{
  width:100%;
  max-width:520px;
  background:var(--card);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  color:var(--text);
  outline:none; /* handled by :focus-visible below */
  transition:border .15s, box-shadow .15s, background .15s;
}
input::placeholder,
textarea::placeholder{ color:var(--muted) }

/* Accessible focus styles */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.hb-btn:focus-visible,
a:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--focus);
  outline:none;
  border-radius:12px; /* buttons already pill-shaped */
}

/* Disabled inputs */
input:disabled,
select:disabled,
textarea:disabled{
  opacity:.6;
  cursor:not-allowed;
  background:color-mix(in srgb, var(--card) 90%, #000 10%);
}

/* Textarea resize control */
textarea{ resize:vertical; min-height:96px }

/* Select arrow (native kept; consider custom if needed) */
select{ appearance:auto; background-clip:padding-box }

/* ===================== Dark mode ===================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1c1c1e;
    --card:#1f1f22;
    --card-alt:#1b1b1d;

    --text:#f2f2f7;
    --muted:#9f9fa6;

    --border:#2c2c2e;
    --border-strong:#3a3a3c;

    --accent:#0a84ff;
    --accent-ghost:rgba(10,132,255,.15);

    --focus:rgba(10,132,255,.35);

    --shadow:0 10px 30px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.6);
  }

  .hb-table thead th{ background:#2c2c2e; color:#d1d1d6 }
  .hb-table tbody td{ background:#1f1f22 }
  .nav{ background:rgba(28,28,30,.75) }

  /* Inputs in dark: match cards & tables */
  input[type=text],
  input[type=password],
  input[type=date],
  input[type=email],
  input[type=number],
  input[type=search],
  select,
  textarea{
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border-strong);
  }
  input::placeholder,
  textarea::placeholder{ color:var(--muted) }
}

/* ===================== Motion preferences ===================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===================== Responsive tweaks ===================== */

/* S: upp till 480px */
@media (max-width: 480px){
  html,body{ font-size:14px }                 /* något mindre kroppstext */
  .container{ padding:0 12px; margin:24px auto }
  .hb-title{ font-size:22px }
  .cardpad{ padding:14px 14px }
  .section{ padding:12px 14px }
  .kv{ grid-template-columns:1fr }            /* label över input */
  .kv label{ margin-bottom:4px }
  input,select,textarea{ max-width:100% }     /* fyll hela bredden */
  .hb-toolbar{ justify-content:stretch }
  .hb-btn{ width:100%; max-width:none }       /* knappar radbryts snyggt */
  .nav{ gap:6px; padding:10px 10px; margin:8px -12px 12px }
}

/* M: 481–768px */
@media (min-width: 481px) and (max-width: 768px){
  html,body{ font-size:15px }
  .container{ padding:0 16px }
  .hb-title{ font-size:26px }
  .kv{ grid-template-columns:180px 1fr }      /* lite smalare etikettkolumn */
  input,select,textarea{ max-width:100% }     /* låt inputs växa */
}

/* L: 769–1200px */
@media (min-width: 769px) and (max-width: 1200px){
  html,body{ font-size:16px }
  .container{ padding:0 20px }
  .kv{ grid-template-columns:220px 1fr }
}

/* XL: >1200px (behåll original, men lite mer luft i nav) */
@media (min-width: 1201px){
  .nav{ justify-content:space-evenly; gap:12px; padding:14px 24px }
  .container{ padding:0 24px }
}