/* ========= Core vars ========= */
:root{
  /* Tema */
  --primary-blue:#204E6D;
  --secondary-orange:#FBBC9C;
  --accent-green:#9EBD6E;
  --light-gray:#F7F7F7;
  --dark-gray:#96AAB8;
  --shadow:rgba(32,78,109,0.1);

  /* UI-lab variabler */
  --text:#0f172a;
  --muted:#64748b;
  --bg:#f5f7fb;
  --card:#fff;
  --error:#dc2626;
  --ok:#16a34a;
  --ring: var(--accent-green);
  --radius: 10px;

  /* Global knappfärg */
  --btn:#7DA1C7;

  /* Layout */
  --header-h:60px;
  --sidebar-width:280px;
  --sidebar-handle-offset:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Segoe UI, Tahoma, sans-serif;background:var(--bg);color:var(--text)}

/* ========= Header ========= */
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:var(--primary-blue);color:#fff;display:flex;align-items:center;
  justify-content:space-between;padding:0 1rem;z-index:1001;border-bottom:1px solid rgba(0,0,0,.05)
}
.logo{font-size:2rem;font-weight:700;color:var(--secondary-orange);text-decoration:none}
.header-icon{color:#fff;padding:.5rem;border-radius:50%;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.header-icon:hover{background:rgba(255,255,255,.1);color:#fbbc9c}

/* Hamburger – dold på desktop, visas på mobil */
.mobile-menu-btn{display:none;color:#fff;background:transparent;border:0;padding:.5rem;border-radius:8px}
.mobile-menu-btn:hover{background:rgba(255,255,255,.1)}

/* ========= Sidebar & layout ========= */
.admin-container{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--sidebar-width);
  background:var(--primary-blue);color:#fff;padding:1rem 0;overflow:auto;
  transition:transform .25s ease;will-change:transform;z-index:1001
}
.nav-menu{padding-top:.25rem}
.nav-link{display:flex;gap:.75rem;align-items:center;color:#fff;text-decoration:none;padding:.75rem 1rem;border-left:3px solid transparent}
.nav-link i{width:18px;text-align:center}
.nav-link:hover{background:rgba(255,255,255,.08);color:var(--secondary-orange)}
.nav-link.active{background:rgba(255,255,255,.08);border-left-color:var(--secondary-orange);color:var(--secondary-orange)}

/* Desktop: kollaps – göm sidebar och ge yta till main */
.main-content{flex:1;margin-top:var(--header-h);margin-left:var(--sidebar-width);padding:1rem;transition:margin-left .25s ease}
body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
body.sidebar-collapsed .main-content{margin-left:0}

/* --- Sidebar-handle (halvcirkel, nere vid foten) --- */
/* Halvcirkeln är ALLTID samma form; endast pilen roterar mellan lägen */
.sidebar-toggle{
  position: fixed;
  bottom: calc(34px + 12px);                /* 34px = footerhöjd, 12px luft */
  left: calc(var(--sidebar-width) - 6px);   /* sticker ut 6px över innehållet */
  z-index: 1002;

  width: 36px;
  height: 48px;
  border: 0;

  /* Platt sida åt vänster, rundning åt höger – konstant i båda lägen */
  border-radius: 0 999px 999px 0;

  background: rgba(255,255,255,.90);
  color: #000;                               /* svart pil */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  backdrop-filter: blur(2px);
  transition: left .25s ease, background .2s ease, transform .2s ease, bottom .25s ease;
}
.sidebar-toggle i{
  font-size: 1rem;
  transition: transform .25s ease;
}
.sidebar-toggle:hover{ background: rgba(255,255,255,1) }

/* STÄNGT läge: flytta handtaget till skärmens vänsterkant – formen ändras INTE */
body.sidebar-collapsed .sidebar-toggle{ left: -6px; }
body.sidebar-collapsed .sidebar-toggle i{ transform: rotate(180deg); } /* pil → i stängt läge */

/* ========= Cards, tabeller ========= */
.page-title{font-size:1.4rem}
.card{background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.06);margin:1rem auto;max-width:1100px}
.card-header{padding:1rem 1.25rem;border-bottom:1px solid #eef2f6;display:flex;align-items:center;justify-content:space-between}
.card-body{padding:1.25rem}

/* Tabell */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.table th{background:#f4f6fb;font-weight:600}

/* ========= Knappar – identiska överallt ========= */
button,
input[type="button"],
input[type="submit"],
a.btn,
.btn,
.btn.primary,
.btn.secondary,
.btn.warning,
.btn.danger {
  background: var(--btn);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  padding: 10px 16px;
  min-height: 40px;
  min-width: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px var(--shadow);
  transition: transform .04s ease, filter .15s ease, box-shadow .15s ease;
}

/* Hover/active/focus */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.btn:hover,
.btn:hover { filter: brightness(0.98); }

button:active,
input[type="button"]:active,
input[type="submit"]:active,
a.btn:active,
.btn:active { transform: translateY(1px); }

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
a.btn:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(125,161,199,.28);
}

/* Inaktiverad */
button:disabled,
input[type="submit"]:disabled,
.btn:disabled,
.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Storleksvarianter (frivilliga) */
.btn-sm { padding: 8px 12px; min-height: 34px; min-width: 96px; font-size: 14px; }
.btn-lg { padding: 12px 18px; min-height: 46px; min-width: 140px; font-size: 16px; }

/* Behåll klassnamn – samma stil nu */
.btn.secondary,
.btn.warning,
.btn.danger { background: var(--btn); color: #fff; }

/* Ikonknapp, kvadratisk */
.btn-icon{ padding: 8px; min-width: 40px; min-height: 40px; }

/* Alert */
.alert{padding:10px 12px;border-radius:8px;background:#fff3cd;color:#7a5e00;margin:10px 0;border:1px solid #ffeeba}

/* ========= Footer – alltid hela bredden ========= */
.footer{
  position:fixed;bottom:0;right:0;left:var(--sidebar-width);height:34px;
  background:#f1f5f9;color:#334;padding:6px 12px;font-size:.9rem;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid #e2e8f0;z-index:1000
}
body.sidebar-collapsed .footer{left:0}
@media (max-width:768px){ .footer{left:0} }

/* ========= UI-lab – Formulär ========= */
.wrap{max-width:1000px;margin:40px auto;padding:24px}
h1{font-size:1.8rem;margin-bottom:8px}
p.lead{color:var(--muted);margin:0 0 24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.card h2{font-size:1.2rem;margin:0 0 14px;color:var(--primary-blue)}

.form{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){ .form-row{grid-template-columns:1fr} }

.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-weight:600}
.required .form-label:after{content:" *"; color:var(--error); font-weight:700}

.form-input, .form-select, .form-textarea{
  width:100%; font-size:1rem; padding:12px 12px; border:1.5px solid #e2e8f0; border-radius:8px; background:#fff; color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-textarea{min-height:100px; resize:vertical}

.form-input:focus, .form-select:focus, .form-textarea:focus{
  outline:none; border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(158,189,110,.25);
}

.form-help{font-size:.9rem;color:var(--muted)}
.is-invalid .form-input, .is-invalid .form-select, .is-invalid .form-textarea{border-color:var(--error)}
.is-invalid .form-help{color:var(--error)}
.is-valid   .form-input, .is-valid   .form-select, .is-valid   .form-textarea{border-color:var(--ok)}

.input-icon{ position:relative; display:flex; align-items:center; }
.input-icon i{ position:absolute; left:12px; color:#94a3b8; pointer-events:none; }
.input-icon .form-input{ padding-left:38px }

.check, .radio{display:flex; align-items:center; gap:10px}
.check input[type=checkbox], .radio input[type=radio]{ width:18px; height:18px }

.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.switch input{display:none}
.switch .track{
  width:44px; height:24px; background:#e2e8f0; border-radius:999px; position:relative; transition:background .2s ease
}
.switch .thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2); transition:left .2s ease
}
.switch input:checked + .track{ background:var(--accent-green) }
.switch input:checked + .track .thumb{ left:23px }

.range-wrap{display:flex; align-items:center; gap:12px}
.range-wrap output{min-width:38px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:6px 8px}

/* File */
.file{ display:flex;align-items:center;gap:10px;background:#fff;border:1.5px dashed #cbd5e1;border-radius:8px;padding:12px }

/* ========= Login-layout ========= */
.auth-page{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card{
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  width: 100%;
  max-width: 420px;
  padding: 22px;
}

/* ========= Mobil ========= */
@media (max-width:768px){
  .mobile-menu-btn{display:inline-flex}
  .mobile-menu-btn i{ font-size:1.6rem; } /* större hamburger */

  .sidebar{transform:translateX(-100%);top:var(--header-h);height:calc(100vh - var(--header-h))}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .main-content{margin-left:0}
  .sidebar-toggle{display:none}

  /* overlay för att stänga menyn */
  .overlay{display:none}
  body.sidebar-open .overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000}
}

/* === Global form reset for legacy forms (utan klasser) === */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="number"],
form input[type="search"],
form input[type="date"],
form input[type="time"],
form input[type="color"],
form select,
form textarea {
  display:block;
  width:100%;
  font-size:1rem;
  padding:12px 12px;
  margin-top:6px;
  margin-bottom:14px;
  border:1.5px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}

form textarea { min-height:100px; resize:vertical; }

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="tel"]:focus,
form input[type="number"]:focus,
form input[type="search"]:focus,
form input[type="date"]:focus,
form input[type="time"]:focus,
form input[type="color"]:focus,
form select:focus,
form textarea:focus {
  outline:none;
  border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(158,189,110,.25);
}

/* Etiketter: om du använder riktiga <label> */
form label {
  display:block;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}

/* Checkbox/Radio i gamla formulär – håll dem snyggt med label på sidan */
form input[type="checkbox"],
form input[type="radio"] {
  display:inline-block;
  width:18px; height:18px;
  vertical-align:middle;
  margin-right:8px;
}