/*
 * style.css — Admax Project Portal (städad)
 * Huvudidé:
 * - EN breddkälla: --content-max styr arbetsytan (titel, subnav, kort).
 * - Admin-container utan sidopadding => barn kan vara width:100% + max-width.
 * - Global border-box så kanter inte skapar pixel-drift.
 */

/* ===== Base tokens (light) ===== */
:root{
  --gap:16px;
  --container-max:1440px;
  --content-max:1440px;

  --ink:#111;
  --muted:#6b7280;
  --bg:#fff;
  --panel:#fff;
  --border:#e6e6e6;

  --primary:#2563eb;
  --primary-ink:#fff;

  --danger:#dc2626;
  --danger-ink:#fff;

  --radius:12px;
  --radius-sm:8px;
  --shadow-1:0 6px 18px rgba(0,0,0,.06);

  --input-height:38px;
  --input-radius:12px;
  --input-pad-y:8px;
  --input-pad-x:12px;
  --input-border:#d6d6d6;
  --input-focus:#0b63a3;

  --link:#0b63a3;
  --table-th:#f9fafb;
  --elev:rgba(0,0,0,.04); /* skugga-ljus */
}

/* ===== Base reset ===== */
*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ===== DARK THEME TOKENS ===== */
:root[data-theme="dark"]{
  --bg:#0b1220;           /* mörk blåsvart (behaglig i längden) */
  --ink:#e5e7eb;          /* ljus text */
  --panel:#111827;        /* panel/kort */
  --border:#334155;       /* mjuk kant */
  --muted:#9ca3af;        /* sekundär text */
  --link:#93c5fd;         /* länkar i mörkt */
  --table-th:#0f172a;     /* tabellhuvud */
  --elev:rgba(0,0,0,.18); /* skugga-mörk */
}

/* =========================================================
   Layout & typografi
   ========================================================= */
.container{
  width:min(var(--container-max), 92vw);
  margin:24px auto;
  padding:calc(var(--gap)*1.5) var(--gap);
}
.page-title{
  margin:0 0 calc(var(--gap)*1.25);
  font-size:1.6rem; font-weight:600; line-height:1.2;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:100; width:100%;
  background:#fff; border-bottom:1px solid var(--border); box-shadow:0 3px 10px rgba(0,0,0,.04);
  padding:12px 24px; display:grid; grid-template-areas:'left center right';
  grid-template-columns:1fr auto 1fr; gap:16px; align-items:center;
}
.topbar__left{ grid-area:left; display:flex; align-items:center; gap:10px; }
.topbar__center{ grid-area:center; justify-self:center; display:flex; align-items:center; justify-content:center; }
.topbar__right{ grid-area:right; justify-self:end; display:flex; align-items:center; gap:10px; }
.topbar__brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:700; }
.brand-text{ font-size:1.05rem; font-weight:700; }

/* Brand logo – konsistent badge-look */
.topbar { --brandHeight: 64px; }
.brand-logo{
  display:inline-block;
  height:calc(var(--brandHeight) - 16px); /* 48px bildhöjd */
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent; /* ljus-läget */
  box-shadow:none;
  vertical-align:middle;
}
@media (max-width:640px){ .brand-logo{ height:calc(52px - 16px); } }

/* Dark: vit badge så loggan sitter snyggt mot mörk topbar */
:root[data-theme="dark"] .brand-logo{
  background:#fff;
  border-color:#e5e7eb;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .brand-logo:hover{ filter:brightness(1.03); cursor:pointer; }

/* Language pills */
.lang-pill{
  display:inline-block; padding:6px 12px; border:1px solid #ddd; border-radius:999px;
  text-decoration:none; color:var(--ink); margin:0 4px; font-size:14px;
}
.lang-pill.active{ background:#0b63a3; color:#fff; border-color:#0b63a3; }
.lang-pills{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }

/* User menu */
.usermenu{ position:relative; }
.usermenu__btn{
  display:flex; align-items:center; gap:8px; border:1px solid #ddd; background:#fff;
  padding:.35rem .6rem; border-radius:999px; cursor:pointer; appearance:none;
  transition: box-shadow .15s ease, transform .08s ease;
}
.usermenu__btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); }
.usermenu__btn:active{ transform:translateY(1px); }
.usermenu__avatar{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:#0b66a3; color:#fff; font-weight:700; font-size:.9rem;
}
.usermenu__menu{
  position:absolute; right:0; top:38px; min-width:220px; background:#fff;
  border:1px solid #e6e6e6; border-radius:10px; box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:.35rem; display:none; z-index:1000;
}
.usermenu.open .usermenu__menu{ display:block; }
.usermenu__menu a, .usermenu__menu button{
  display:block; width:100%; text-align:left; padding:.45rem .8rem; border-radius:6px; border:0;
  background:transparent; color:#111827; text-decoration:none; font-size:.95rem;
}
.usermenu__menu a:hover, .usermenu__menu button:hover{ background:#f3f4f6; }
.usermenu__logout{ color:#a11; }
.muted{ color:var(--muted); opacity:.85; }

/* ===== Subnav ===== */
.subnav{
  display:flex; gap:var(--gap); align-items:center; flex-wrap:wrap;
  margin:0 0 calc(var(--gap)*1.5); padding-bottom:var(--gap);
  border-bottom:1px solid #e6e6e6;
}

/* ===== Cards ===== */
.cards{ display:grid; grid-template-columns:1fr; gap:16px; margin:18px 0; }
@media (min-width:860px){ .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.card{
  width:100%; background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:16px; margin:0 auto calc(var(--gap)*1.25);
  max-width:var(--content-max);
}
.card--wide{ max-width:var(--container-max); }

.centered-container{ max-width:960px; margin:24px auto 64px; padding:0 24px; text-align:center; }
.subtitle{ color:#5b6570; margin:0 0 24px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px; border-radius:10px; border:1px solid transparent;
  font-weight:600; text-decoration:none; cursor:pointer; user-select:none; color:inherit; background:#fff;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.btn-ghost{ background:transparent; border:1px solid #dcdcdc; color:#111; }
.btn-ghost:hover{ background:#f6f6f6; }
.btn-danger{ background:var(--danger); color:var(--danger-ink); border-color:var(--danger); }
.btn-nav{ height:32px; padding:0 10px; border-radius:8px; font-weight:700; }

/* Legacy button helpers */
a.button,.button{
  display:inline-block; padding:12px 22px; border-radius:12px; border:0; background:#0b63a3;
  color:#fff; text-decoration:none; font-weight:600; box-shadow:0 2px 0 rgba(0,0,0,.12);
}
a.button:hover,.button:hover{ filter:brightness(1.06); }
a.button:active,.button:active{ transform:translateY(1px); }
.button:disabled{ opacity:.6; cursor:not-allowed; }
.button--ghost{ background:#fff; color:#0b63a3; border:1px solid #d9d9d9; box-shadow:none; padding:11px 21px; border-radius:12px; display:inline-block; text-decoration:none; }
.button--ghost:hover{ background:#f5f7fb; }

/* Link-look */
.linklike{ display:inline-block; background:none; border:0; padding:0; margin:0; color:var(--link); cursor:pointer; text-decoration:underline; font:inherit; }

/* Form actions */
.form-actions{ display:flex; gap:10px; margin-top:16px; }
.form-actions.center{ justify-content:center; }
.form-actions.right{ justify-content:flex-end; }

/* ===== Badges & alerts ===== */
.badge{ display:inline-block; padding:.15rem .5rem; border-radius:999px; font-weight:700; font-size:.9rem; line-height:1.2; border:1px solid transparent; white-space:nowrap; }
.badge--overdue{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.badge--today{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.badge--soon{ background:#dcfce7; color:#065f46; border-color:#bbf7d0; }
.badge--muted{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.badge--danger  { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.badge--warning { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.badge--info    { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.badge--purple  { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.badge--success { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }

/* Order/service status badges */
.badge--status-pending { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }

/* Project status badges */
.badge--status-new         { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.badge--status-in_review   { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.badge--status-in_progress { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.badge--status-on_hold     { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.badge--status-done        { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.badge--status-cancelled   { background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; }
/* Ny-indikator för olästa meddelanden */
.badge--new{ background:#ef4444; color:#fff; border-color:#ef4444; font-size:.75rem; padding:.1rem .4rem; }

.alert{ border-left:4px solid #f59e0b; background:#fff7ed; color:#7c2d12; padding:10px 12px; border-radius:10px; margin:10px 0; }

/* ===== Auth (public) ===== */
.auth-form{ max-width:520px; margin:0 auto 8px; padding:24px 20px 12px; background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.07); }
.auth-form .field{ max-width:420px; margin:0 auto 14px; }
.auth-form label{ display:block; font-weight:700; text-align:center; margin:0 0 .35rem; }
.auth-form input,.auth-form select,.auth-form textarea{ width:100%; padding:.8rem .9rem; border:1px solid #cfd6dd; border-radius:12px; font-size:1rem; outline:none; background:#fff; }
.auth-form input:focus,.auth-form select:focus,.auth-form textarea:focus{ border-color:#0b63a3; box-shadow:0 0 0 3px rgba(11,99,163,.15); }

/* ===== Modal ===== */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.modal-overlay.show{ display:flex; }
.modal-card{ width:100%; max-width:640px; border-radius:12px; }
.modal-card--md{ max-width:900px; }
.modal-card--lg{ max-width:min(1200px, 92vw); }
.modal-card--xl{ max-width:min(1400px, 95vw); }
@keyframes modalIn{ from{ transform:translateY(6px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:no-preference){ .modal-overlay.show .modal-card{ animation:modalIn .18s ease-out both; } }

/* ===== Generic forms ===== */
.form{ width:100%; max-width:var(--content-max); margin:0 auto; }
.form__field{ margin-bottom:18px; }
.form__label{ display:block; font-weight:600; margin-bottom:8px; color:rgba(0,0,0,.8); text-align:left; }

/* Two-column helper */
.form .row, .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:820px){ .form .row, .form__row{ grid-template-columns:1fr; } }
.form--singlecol .row{ grid-template-columns:1fr; }

/* Inputs */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="password"], .form input[type="number"], .form input[type="date"], .form input[type="datetime-local"], .form select, .form textarea, .form__input{
  width:100%; min-height:var(--input-height); padding:var(--input-pad-y) var(--input-pad-x);
  border:1px solid var(--input-border); border-radius:var(--input-radius); background:#fff;
}
.form input:focus, .form select:focus, .form textarea:focus, .form__input:focus{
  outline:none; border-color:var(--input-focus);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--input-focus) 15%, transparent);
}
.form__input--narrow{ max-width:10rem; }

/* Legacy form-card */
.form-card{
  width:100%; background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.04); max-width:var(--content-max); margin:0 auto calc(var(--gap)*1.25);
}
.form-grid{ display:grid; grid-template-columns:minmax(160px,220px) 1fr; gap:12px 16px; align-items:center; }
.form-label{ color:#333; font-weight:600; text-align:right; }
@media (max-width:820px){ .form-grid{ grid-template-columns:1fr; } .form-label{ text-align:left; } }
.form-card input[type="text"], .form-card input[type="email"], .form-card input[type="tel"], .form-card input[type="number"], .form-card input[type="password"], .form-card input[type="search"], .form-card select, .form-card textarea{
  appearance:none; -webkit-appearance:none; width:100%; height:var(--input-height);
  font-size:15px; line-height:1.3; padding:var(--input-pad-y) var(--input-pad-x);
  border:1px solid var(--input-border); border-radius:var(--input-radius); background:#fff;
}
.form-card textarea{ min-height:90px; height:auto; resize:vertical; }

/* ===== Tables ===== */
.table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table th{ background:var(--table-th); text-align:left; font-weight:600; color:#374151; user-select:none; }
.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wrap{ overflow-wrap:anywhere; white-space:normal; }

/* ===== Next Action ===== */
.nextcell{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.nextcell .next-main{ flex:1 1 260px; min-width:0; }
.nextcell .next-actions{
  display:flex; gap:6px; flex:0 0 auto; align-self:flex-start; flex-wrap:wrap;
}
.nextcell .next-actions .btn{ white-space:nowrap; }
.nextcell .badge{ display:inline-block; margin:0 0 4px 0; }
.nextcell .next-note{ font-size:.95rem; color:#374151; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:3em; }

.next{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.next__text{ flex:1 1 auto; min-width:0; }
.next__date{ display:inline-block; margin-bottom:6px; }
.next__note{ margin:0; color:#374151; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.next__actions{ flex:0 0 auto; margin-left:8px; }

/* ===== CRM Customers: knapplayout ===== */
.crm-customers .nextcell{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.crm-customers .nextcell .next-main{ flex:1 1 auto; min-width:0; }
.crm-customers .nextcell .next-actions{ flex:0 0 auto; display:flex; gap:6px; }
@media (max-width:980px){
  .crm-customers .nextcell{ flex-direction:column; align-items:flex-start; gap:8px; }
  .crm-customers .nextcell .next-actions{ gap:8px; }
}

/* ===== Footer (public) ===== */
.site-footer{ margin:40px auto 20px; max-width:900px; text-align:center; color:#666; }
.site-footer a{ color:#666; text-decoration:underline; }
.site-footer a:hover{ color:#0b66a3; }

/* ===== Admin scope ===== */
body.admin{ background:#f7f8fb; color:var(--ink); }
/* Container utan sidopadding i admin */
body.admin .container{ width:min(var(--container-max), 92vw); padding-left:0; padding-right:0; }

/* Admin cards */
body.admin .card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:18px; overflow:hidden; }

/* Admin buttons */
body.admin .btn{ border:1px solid var(--border); background:#fff; }
body.admin .btn.primary, .btn.primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
body.admin .btn.danger, .btn.danger{ background:var(--danger); border-color:var(--danger); color:var(--danger-ink); }
body.admin .btn.small{ padding:4px 8px; font-size:.92rem; }
body.admin .btn.btn-sm{ padding:6px 10px; font-size:.92rem; }
body.admin .btn.btn-xs{ padding:4px 8px; font-size:.85rem; }

/* Filters */
body.admin .filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 14px; }

/* Table wrapper */
body.admin .table-card{ width:100%; border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-1); overflow-x:auto; overflow-y:hidden; }
body.admin .table-wrap{ overflow-x:auto; }
body.admin .table, body.admin #projectsTable{ width:100%; border-collapse:collapse; table-layout:fixed; }
body.admin .table th, body.admin .table td, body.admin #projectsTable th, body.admin #projectsTable td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
body.admin .table th, body.admin #projectsTable th{ background:#f9fafb; text-align:left; font-weight:600; color:#374151; user-select:none; }
body.admin .table tr:last-child td, body.admin #projectsTable tr:last-child td{ border-bottom:0; }

/* Utilities */
body.admin .muted{ color:var(--muted); }
body.admin .right{ margin-left:auto; }

/* Ghost/nav look */
body.admin .btn-ghost{ background:#fff; border:1px solid var(--border); color:#0b63a3; }
body.admin .btn-ghost:hover{ background:#f5f7fb; }
.btn-nav{ font-weight:700; font-size:1rem; line-height:1.2; padding:.42rem .7rem; border-radius:999px; }
a.button, a.button--ghost, body.admin a.btn, body.admin a.btn-ghost{ text-decoration:none !important; }

/* ===== Help tip (?) ===== */
.help-tip{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:var(--muted);
  color:#fff; font-size:10px; font-weight:700; cursor:default;
  vertical-align:middle; margin-left:4px; flex-shrink:0;
  position:relative;
}
.help-tip:hover::after{
  content:attr(title);
  position:absolute; left:20px; top:-4px; z-index:100;
  background:#1e293b; color:#f8fafc; font-size:.78rem; font-weight:400;
  padding:6px 10px; border-radius:8px; white-space:nowrap;
  max-width:280px; white-space:normal; line-height:1.4;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  pointer-events:none;
}

/* ===== Breadcrumb ===== */
.breadcrumb{ display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted); margin-bottom:10px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--link); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb__sep{ color:var(--muted); opacity:.5; }
.breadcrumb__current{ color:var(--ink); font-weight:500; }
body.admin .breadcrumb{ max-width:var(--content-max); margin-left:auto; margin-right:auto; margin-bottom:6px; }

/* ===== Admin width harmonization ===== */
body.admin h1.page-title,
body.admin .subnav,
body.admin .card,
body.admin .table-card,
body.admin .form-card{
  width:100%; max-width:var(--content-max); margin-left:auto; margin-right:auto;
}

/* Subnav som “bar” */
body.admin .subnav{
  margin-top:0; margin-bottom:12px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap;
}
body.admin .subnav>*{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Form inuti kort ska få full inre bredd */
body.admin .card .form{ max-width:100%; }

/* Primärknappar – säker textfärg */
body.admin .btn.btn-primary,
body.admin .btn.btn-primary.btn-nav{
  background:var(--primary); border-color:var(--primary); color:var(--primary-ink);
}

/* ===== Responsive ===== */
@media (max-width:640px){ .topbar__brand span{ display:none; } }

/* ===== CRM Customer Show (lokal estetik) ===== */
.crm-customer-show .doc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
@media (max-width:900px){ .crm-customer-show .doc-grid{ grid-template-columns:1fr; } }
.crm-customer-show .doc-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff;
}
.crm-customer-show .doc-icon{ font-size:22px; }
.crm-customer-show .doc-title{ font-weight:600; }
.crm-customer-show .doc-actions{ margin:0; }

.crm-customer-show .timeline{ display:grid; gap:8px; }
.crm-customer-show .tl-row{
  display:grid; grid-template-columns:140px 1fr; gap:10px;
  padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff;
}
.crm-customer-show .tl-when{ color:var(--muted); }
.crm-customer-show .tl-title{ font-weight:600; }

/* Samma nästa-åtgärd-layout som index (två knappar sida vid sida) */
.crm-customer-show .nextcell{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.crm-customer-show .nextcell .next-main{ flex:1 1 auto; min-width:0; }
.crm-customer-show .nextcell .next-actions{ flex:0 0 auto; display:flex; gap:6px; }
@media (max-width:980px){
  .crm-customer-show .nextcell{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* --- Gör företagsnamn tydligare i kundlistor (legacy markering) --- */
.crm-customers-list .company-name,
.crm-customers-list .customer-name,
.table.customers td.name,
.table.customers td.company,
.customers-list .company-name{
  font-weight:700 !important;
}

/* =========================================================
   Company chip (Admin — Kunder) – flyttad hit från vy
   ========================================================= */
.company-chip{
  display:inline-block;
  padding:.20rem .54rem;
  border-radius:999px;
  font-size:.96rem;
  line-height:1.1;
  background:#e0e7ff;
  color:#3730a3;
  font-weight:700;
  border:1px solid #c7d2fe;
  text-decoration:none;
}
.company-chip:hover{ text-decoration:underline; }
:root[data-theme="dark"] .company-chip{
  background:#1f2937;
  color:var(--ink);
  border:1px solid var(--border);
}

/* =========================================================
   DARK THEME – komponentöverlagringar
   ========================================================= */

/* Topbar & pills */
:root[data-theme="dark"] .topbar{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  box-shadow:0 3px 10px var(--elev);
}
:root[data-theme="dark"] .lang-pill{ border-color:var(--border); color:var(--ink); }
:root[data-theme="dark"] .lang-pill.active{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }

/* Usermenu */
:root[data-theme="dark"] .usermenu__btn{ border-color:var(--border); background:var(--panel); color:var(--ink); }
:root[data-theme="dark"] .usermenu__menu{
  background:var(--panel); border-color:var(--border); box-shadow:0 10px 25px var(--elev);
}
:root[data-theme="dark"] .usermenu__menu a,
:root[data-theme="dark"] .usermenu__menu button{ color:var(--ink); }
:root[data-theme="dark"] .usermenu__menu a:hover,
:root[data-theme="dark"] .usermenu__menu button:hover{ background:#0f172a; }

/* Kort/paneler */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .auth-form,
:root[data-theme="dark"] .form-card,
:root[data-theme="dark"] .table-card,
:root[data-theme="dark"] .subnav{
  background:var(--panel); border-color:var(--border); box-shadow:0 10px 24px var(--elev);
}

/* Tabeller */
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] body.admin .table th,
:root[data-theme="dark"] body.admin #projectsTable th{
  background:var(--table-th); color:var(--ink);
}
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] body.admin .table td,
:root[data-theme="dark"] body.admin .table th{
  border-color:var(--border);
}

/* Projektlistor (specifika) */
:root[data-theme="dark"] body.admin .project-card,
:root[data-theme="dark"] body.admin .project-tile,
:root[data-theme="dark"] body.admin .project-box,
:root[data-theme="dark"] body.admin .project-toolbar,
:root[data-theme="dark"] body.admin .project-list,
:root[data-theme="dark"] body.admin .project-sidebar,
:root[data-theme="dark"] body.admin .project-header{
  background:var(--panel) !important; border-color:var(--border) !important; color:var(--ink) !important; box-shadow:0 10px 24px var(--elev);
}
:root[data-theme="dark"] body.admin .project-table,
:root[data-theme="dark"] body.admin table.projects,
:root[data-theme="dark"] body.admin #projectsTable{
  background:var(--panel) !important; color:var(--ink) !important; border-color:var(--border) !important;
}
:root[data-theme="dark"] body.admin .project-table th,
:root[data-theme="dark"] body.admin table.projects th,
:root[data-theme="dark"] body.admin #projectsTable th{
  background:var(--table-th) !important; color:var(--ink) !important; border-color:var(--border) !important;
}

/* Knappar & länkar */
:root[data-theme="dark"] .btn{ background:var(--panel); border-color:var(--border); color:var(--ink); }
:root[data-theme="dark"] .btn-ghost{ background:transparent; border-color:var(--border); color:var(--ink); }
:root[data-theme="dark"] .btn-ghost:hover{ background:#0f172a; }
:root[data-theme="dark"] a{ color:var(--link); }
:root[data-theme="dark"] .linklike{ color:var(--link); }

/* Formelement */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  background:#0f172a; color:var(--ink); border:1px solid var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{ color:var(--muted); }

/* Alerts */
:root[data-theme="dark"] .alert{
  background:#2a1f0e; color:#f3e8d7; border-left-color:#d97706;
}

/* Admin scope bakgrund */
:root[data-theme="dark"] body.admin{ background:#0b1220; color:var(--ink); }
:root[data-theme="dark"] body.admin .btn-ghost{ background:transparent; border-color:var(--border); color:var(--link); }
:root[data-theme="dark"] body.admin .subnav{ background:var(--panel); border-color:var(--border); }

/* ===== Dark: generella textkontraster ===== */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] dt,
:root[data-theme="dark"] dd,
:root[data-theme="dark"] small{ color:var(--ink); }

:root[data-theme="dark"] .subtitle,
:root[data-theme="dark"] .nextcell .next-note,
:root[data-theme="dark"] .next__note,
:root[data-theme="dark"] .next__date{ color:var(--muted) !important; }

:root[data-theme="dark"] .form__label,
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] label{ color:var(--ink) !important; }

:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .text-muted{ color:var(--muted) !important; }

/* Sista-resort för gamla inline-stilar som sätter vitt */
:root[data-theme="dark"] body.admin [style*="background:#fff"],
:root[data-theme="dark"] body.admin [style*="background: #fff"]{
  background:var(--panel) !important; color:var(--ink) !important;
}

/* ==== PATCH efter städning (återställ mörkt läge på tre ställen) ==== */

/* 1) Admin > Kunder: gör headern mörk igen */
:root[data-theme="dark"] .tbl thead th{
  background: var(--table-th) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* 2) CRM > Kunder: företagsnamns-badgen/pillen i första kolumnen */
:root[data-theme="dark"] td a.company-chip,
:root[data-theme="dark"] td .company-chip,
:root[data-theme="dark"] td a.company-name,
:root[data-theme="dark"] td .company-name {
  background: var(--table-th) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px var(--elev);
}

/* 3) Projektlistan: de ljusa raderna (cells bakgrund, kant, text) */
:root[data-theme="dark"] .table thead th{
  background: var(--table-th) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .table tbody td{
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* ============================================================
   Help-tip & help-block (ui_helper.php)
   ============================================================ */

.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  cursor: default;
  position: relative;
  vertical-align: middle;
  margin-left: .25rem;
  flex-shrink: 0;
  outline: none;
  user-select: none;
}

.help-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #f8fafc;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.4;
  padding: .4rem .65rem;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.help-tip[data-tip-pos="right"]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}

.help-tip[data-tip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
}

.help-tip:hover::after,
.help-tip:focus::after {
  opacity: 1;
}

/* help-block (expanderbar förklaring) */
.help-block {
  margin: .5rem 0 0;
  font-size: .82rem;
}

.help-block summary {
  color: #4338ca;
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  user-select: none;
}

.help-block summary::-webkit-details-marker { display: none; }

.help-block summary::before {
  content: '▸';
  font-size: .7rem;
  transition: transform .15s;
}

.help-block[open] summary::before {
  transform: rotate(90deg);
}

.help-block__body {
  margin-top: .5rem;
  padding: .65rem .85rem;
  background: #f8faff;
  border-left: 3px solid #c7d2fe;
  border-radius: 0 6px 6px 0;
  color: #374151;
  line-height: 1.55;
}