/* ==========================================================================
   Classic Theme – Basstilmall för hela sajten
   Fokus: konsekvent design, tillgänglighet, säkerhet (inga externa resurser)
   ========================================================================== */

/* ------------------------------
   Design Tokens (variabler)
   ------------------------------ */
:root{
  /* Färger */
  --color-bg: #f6f7fb;
  --color-surface: #ffffff;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-primary: #2563eb;
  --color-primary-strong: #1e40af;
  --color-accent: #14b8a6;
  --color-danger: #e11d48;
  --color-ok: #10b981;
  --color-warn: #f59e0b;

  /* Typografi */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Skuggor & radier */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.12);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius: var(--radius-md);

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Layoutegenskaper */
  --maxw: 1100px;
  --card-pad: var(--space-5);

  /* Fokus */
  --focus-ring: 3px solid rgba(37,99,235,.35); /* färgmatchar primary */
}

/* ------------------------------
   Bas / Reset
   ------------------------------ */
*{ box-sizing: border-box; }
*::before,*::after{ box-sizing: inherit; }

html, body { height: 100%; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas, audio { display: block; max-width: 100%; }

h1,h2,h3,h4,h5,h6{ margin: .4em 0 .3em; line-height: 1.25; }
h1{ font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem); }
h2{ font-size: clamp(1.2rem, 1rem + 1.0vw, 1.6rem); }
p{ margin: .3em 0 .9em; }

a{ color: var(--color-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Tillgänglig fokusindikator */
:focus-visible{
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Reducera animationer för användare som önskar det */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------
   Layout
   ------------------------------ */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.section-header{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .5rem;
}
.section-header .title{ font-weight: 800; }
.section-header .subtitle{ color: var(--color-muted); }

/* Grid utilities */
.grid{ display: grid; gap: var(--space-4); }
.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .two, .three{ grid-template-columns: 1fr; } }

/* Flex utilities */
.row{ display:flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.center{ justify-content: center; }

/* Helpers */
.hidden{ display: none !important; }
.sr-only{ position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ------------------------------
   Kort, paneler & badges
   ------------------------------ */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--card-pad);
}

.pill{
  display:inline-flex; align-items:center; gap:.5ch;
  padding:.2rem .6rem; border-radius:999px; font-size:.82rem;
  border:1px solid var(--color-border); background: transparent; color: var(--color-text);
}
.pill.ok{ border-color: transparent; background: rgba(16,185,129,.12); color: var(--color-ok); }
.pill.warn{ border-color: transparent; background: rgba(245,158,11,.14); color: var(--color-warn); }
.pill.bad{ border-color: transparent; background: rgba(225,29,72,.12); color: var(--color-danger); }

/* Dashboard-kort */
.cards{
  display:grid; gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1200px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .cards{ grid-template-columns: 1fr; } }

.app{
  border:1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow-md);
  display:flex; flex-direction:column; gap:.6rem; min-height: 120px;
}
.app .app-title{ font-weight: 700; font-size: 1.05rem; }
.meta{ color: var(--color-muted); font-size: .92rem; }

/* ------------------------------
   Flash-meddelanden (session feedback)
   ------------------------------ */
.flash{
  display:flex; gap:.75rem; align-items:flex-start;
  border-radius: 12px; padding: .75rem .9rem;
  border:1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.flash.ok{ border-color: rgba(16,185,129,.35); }
.flash.err{ border-color: rgba(225,29,72,.35); }
.flash .title{ font-weight: 600; }
.flash .msg{ color: var(--color-muted); }

/* ------------------------------
   Knappar & länkliknande knappar
   ------------------------------ */
.btn{
  appearance:none; border:1px solid var(--color-border);
  background: var(--color-primary); color: #fff;
  padding: .6rem .95rem;
  border-radius: 10px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .6ch;
}
.btn:hover{ filter: brightness(0.98); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{ background: transparent; color: var(--color-text); }
.btn.danger{ background: var(--color-danger); border-color: transparent; }
.btn.ghost{ background: transparent; border-color: transparent; color: var(--color-primary); }
.btn:focus-visible{ outline: var(--focus-ring); outline-offset: 2px; }

/* ------------------------------
   Formulär
   ------------------------------ */
label{ font-weight: 600; display:block; margin-bottom: .35rem; }
input, select, textarea{
  width:100%; padding: .6rem .7rem;
  border:1px solid var(--color-border);
  border-radius: 10px; background: transparent; color: var(--color-text);
}
input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--color-muted) 70%, transparent); }
textarea{ min-height: 110px; resize: vertical; }

.field{ display:grid; gap: .4rem; }
.fields{ display:grid; gap: var(--space-4); }
.fields.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px){ .fields.two{ grid-template-columns: 1fr; } }

/* Hjälptext under fält */
.help{ color: var(--color-muted); font-size: .9rem; }

/* ------------------------------
   Listor & Item-rader (To-Do, Adminlistor)
   ------------------------------ */
.list{ display:grid; gap: .6rem; }
.item{
  display:flex; align-items:center; justify-content: space-between;
  border:1px dashed var(--color-border); border-radius: 10px;
  padding: .55rem .7rem; background: transparent;
}
.item .label{ display:flex; gap:.6rem; align-items:center; }
.item .tag{
  font-size:.78rem; padding:.15rem .5rem; border-radius: 999px;
  border:1px solid var(--color-border); color: var(--color-muted);
}
.kbd{ font-family: var(--font-mono); background: #eef2ff; border:1px solid var(--color-border); padding: .1rem .35rem; border-radius: 6px; }

/* ------------------------------
   Tabeller (Servicehistorik, Admin)
   ------------------------------ */
table{
  width:100%; border-collapse: collapse;
  border:1px solid var(--color-border);
  border-radius: 12px; overflow: hidden; background: var(--color-surface);
}
th, td{ padding: .6rem .7rem; border-bottom: 1px solid var(--color-border); text-align: left; }
th{ background: rgba(0,0,0,.04); font-weight: 700; }
tr:last-child td{ border-bottom: none; }

/* ------------------------------
   Små komponenter (kalender-preview)
   ------------------------------ */
.calendar-preview{ display:grid; grid-template-columns: 1fr; gap: .6rem; }
.calendar-row{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--color-border); border-radius: 10px; padding: .5rem .7rem;
}
.dot{ width:.7rem; height:.7rem; border-radius:50%; }
.dot.me{ background: var(--color-primary); }
.dot.family{ background: var(--color-accent); }
.score{ font-weight: 700; }

/* ------------------------------
   Header / Nav (om/ när du lägger till)
   ------------------------------ */
.header{
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.header-inner{
  max-width: var(--maxw); margin: 0 auto; padding: .8rem var(--space-4);
  display:flex; align-items:center; justify-content:space-between; gap: 1rem;
}
.nav{ display:flex; gap: .75rem; flex-wrap: wrap; }
.nav a{
  display:inline-flex; align-items:center; gap:.5ch;
  padding:.45rem .7rem; border-radius: 8px; text-decoration: none; color: var(--color-text);
}
.nav a:hover{ background: rgba(0,0,0,.04); }
.nav .active{ background: rgba(37,99,235,.12); color: var(--color-primary); }

/* ------------------------------
   Footer (valfritt)
   ------------------------------ */
.footer{
  margin-top: var(--space-8);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-4);
}

/* ------------------------------
   Responsiva småjusteringar
   ------------------------------ */
@media (max-width: 720px){
  .wrap{ padding: var(--space-6) var(--space-4); }
  .app{ min-height: auto; }
}

/* ------------------------------
   Utskriftsstil (minimal & ren)
   ------------------------------ */
@media print{
  body{ background: #fff; color: #000; }
  .header, .footer, .nav, .flash{ display: none !important; }
  .card, .app{ box-shadow: none; border: 1px solid #000; }
  a{ color: #000; text-decoration: underline; }
}


/* ======= Login Page (index.php) ======= */
body.login-page{
  /* Professionell bakgrund: gradient */
  background: linear-gradient(135deg, var(--color-bg) 0%, #dbeafe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  text-align: center;
}

.login-card{
  width: 100%;
  max-width: 400px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.login-card h1{
  margin-bottom: var(--space-5);
  font-weight: 700;
}

.login-card .fields{ text-align: left; }

.login-card .btn{
  width: 100%;
  justify-content: center;
  margin-top: var(--space-5);
}

/* Header actions: slot för sid-specifika knappar (t.ex. To-do-menyn) */
.header-inner { gap: 1rem; } /* finns redan, men lämna kvar för tydlighet */
.header-left strong { font-weight: 800; font-size: 1.05rem; }

.header-actions{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Neutralisera .btn i headerns actions-slot – ej globalt */
.header-actions .btn,
.header-actions .btn-menu{
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-border);
  filter: none;
}
.header-actions .btn:hover,
.header-actions .btn-menu:hover{
  background: rgba(0,0,0,.05);
}

/* Om du vill att menyknappen ska se "pillig" ut även med .btn */
.header-actions .btn.pill{
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-border);
}