/* =============================================================
   app-delar.css — designspråkets delar: kort, listrader, delmoment,
   märken, Eisenhower-markören, formulärfält, flikar.

   Samma fil-par som förlagan (forlaga.css + forlaga-delar.css); app.css
   bär tokens och språkets egna element, den här filen bär delarna som
   sidorna sätter ihop sina vyer av. Här finns hela kontraktet — det
   gamla namnlagret (app-alias.css) är borta sedan övergången stängdes.

   Länkas av layout.html — ingen sida behöver länka den själv.

   Mobile first: varje @media är min-width. Ingen max-width någonstans.
   ============================================================= */

/* --- Kort: skugga, radie, ingen ram ---------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: var(--gap); }
.card-body { padding: 4px var(--pad) var(--pad); }
/* En rail som sitter överst i ett kort tar kortets egen innerkant. */
.card > .rail { padding: 14px var(--pad) 0; margin-bottom: 0; }
.card > .rail .rail-line { margin-top: 8px; }

/* Grupp inuti ett kort: eyebrow som rubrik, 1 px linje mellan grupperna. */
.group > .eyebrow { padding: 14px var(--pad) 10px; }
.group + .group, .card > .group + .group { border-top: 1px solid var(--line); }
.card > .trows:last-child, .card > .group:last-child .trows { padding-bottom: 10px; }
summary.eyebrow { cursor: pointer; list-style: none; min-height: var(--tap); }
summary.eyebrow::-webkit-details-marker { display: none; }
.eyebrow--toggle::after { content: "▾"; font-size: 9px; }
details[open] > .eyebrow--toggle::after { content: "▴"; }

/* --- Listrad --------------------------------------------------- */
/* Rader, inte staplade ramkort: 1 px linje mellan syskon, inget annat.
   Åtgärderna är syskon till länken, aldrig barn — en tumme som landar
   på ✓ kan då inte råka öppna uppgiften. */
.trows { padding: 0 var(--pad); }
.trow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2px 10px;
  border-top: 1px solid var(--line);
}
.trows > .trow:first-child { border-top: 0; }
/* Numrerad variant: mono-tal i egen kolumn, kort blått streck ovanför. */
.trow--num { grid-template-columns: 34px 1fr auto; }
.trow--num .idx { position: relative; padding: 16px 0 0; }
.trow--num .idx::before { content: ""; position: absolute; top: 9px; left: 0; width: 18px; height: 2px; background: var(--blue); }
.trow-link { display: block; min-width: 0; padding: 12px 0; }
.trow-top { display: flex; align-items: baseline; gap: 2px 10px; flex-wrap: wrap; }
/* Titeln håller minst 55 % av raden: annars pressas den till en spalt av
   enstaka ord för att lämna plats åt datumet, som hellre får wrappa. */
.trow-title { flex: 1 1 auto; min-width: 55%; font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.trow.is-done .trow-title { color: var(--gray-3); text-decoration: line-through; }
.trow-due {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--gray-3);
  white-space: nowrap;
}
/* Förfallet markeras på ett enda ställe: datumet i rött mono. Ingen kant
   i marginalen, ingen toning — en markering per rad är hela regeln. */
.trow-due.is-overdue { color: var(--danger); font-weight: 500; }
.trow-why { display: block; margin-top: 3px; font-size: var(--t-sm); color: var(--gray-3); }
.trow-why b { color: var(--ink-2); font-weight: 600; }
.trow-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.trow-actions { display: flex; align-items: center; gap: 2px; padding-top: 9px; }
.trow:hover { background: #fbfcfe; }

/* Dämpade radåtgärder som tonar upp — bara där det finns en pekare.
   På touch står de kvar, diskreta men alltid synliga. */
@media (hover: hover) {
  .trow-actions { opacity: .45; transition: opacity .15s; }
  .trow:hover .trow-actions, .trow-actions:focus-within { opacity: 1; }
}

/* --- Delmoment: inbyggd <details>, ingen JS -------------------- */
.subs { grid-column: 1 / -1; }
.subs > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-3);
  cursor: pointer;
}
.subs > summary::-webkit-details-marker { display: none; }
.subs > summary::after { content: "▾"; font-size: 9px; }
.subs[open] > summary::after { content: "▴"; }
.sub-list { padding: 2px 0 6px; }
.sub {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 2px 0;
  font-size: var(--t-md);
}
.sub input { width: 16px; height: 16px; accent-color: var(--blue); flex: 0 0 auto; }
.sub.is-done span { color: var(--gray-3); text-decoration: line-through; }
.sub-actions { margin-left: auto; display: flex; gap: 0; color: var(--gray-3); }
.sub-actions .icon-btn { width: 28px; height: 28px; }
.sub-actions .icon-btn svg { width: 14px; height: 14px; }
.sub-add { display: flex; gap: 8px; padding: 4px 0 10px; }
.sub-add .input { min-height: 36px; font-size: var(--t-md); }
@media (min-width: 1024px) {
  /* En checklista som är 1 200 px bred är svårläst — knapparna hamnar en
     halv skärm från texten de hör till. */
  .sub, .sub-add, .sub-list { max-width: 620px; }
}

/* --- Chips, prickar och små märken ----------------------------- */
/* Webbplatsens chip: mono, versalt, blått på 8 % blått. Enda bubblan kvar. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue-soft);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-dark);
  white-space: nowrap;
  cursor: pointer;
}
.chip .n { color: var(--blue); opacity: .75; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-1); flex: 0 0 auto; }
.dot--ok { background: var(--ok); }
.dot--danger { background: var(--danger); }
.dot--warn { background: var(--warn); }
.dot--info { background: var(--blue); }
.dot--live { background: var(--danger); box-shadow: 0 0 0 0 rgba(215, 11, 91, .5); animation: dot-pulse 2s infinite; }
@keyframes dot-pulse {
  70% { box-shadow: 0 0 0 6px rgba(215, 11, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(215, 11, 91, 0); }
}
@media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } }

/* Liten ikon i en mono-tagg (bolag, kontakt). Ersätter emoji: ett typsnitt
   som saknas ritar en tom ruta, och den är värre än ingen ikon alls. */
.tico { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; color: var(--gray-3); }

/* Ursprungsmarkör för tasks som synkats från HubSpot (tagg
   "hubspot:<id>"): HubSpots egen kugge, inte ett textchip. Ikonen känns
   igen snabbare än ordet och tar en bråkdel av bredden på en redan tät
   rad. Måtten och färgen kommer från den godkända mockupen: 16x17 px i
   HubSpot-orange, geometrin ritad i konstverkets eget koordinatsystem
   (se hubspotIcon, internal/web/eisenhower.go). Orange, inte en token:
   märket säger "den här kommer från HubSpot" och ska bära HubSpots färg,
   inte vår. Pinnat av TestLayoutCSS_HubspotIcon. */
.hsico {
  width: 16px; height: 17px; flex: none;
  display: inline-block; vertical-align: middle;
  color: #ff7a59;
}
.hsico .bar  { stroke: currentColor; fill: none; stroke-linecap: round; }
.hsico .knob { fill: currentColor; }
.hsico .ring { stroke: currentColor; fill: none; }

/* Eisenhower-markören: en 2x2-miniatyr av matrisen där uppgiftens ruta
   lyser och de tre andra ligger kvar som svaga plattor. Placering enligt
   den kanoniska matrisen — viktigt uppåt, bråttom åt vänster — så ikonen
   matchar bilden läsaren redan har i huvudet.

   Geometrin är den godkända mockupens och pinnas av
   TestLayoutCSS_EisenhowerIcon: 10 px rutor, 2 px mellanrum, 2 px radie,
   släckta rutor grå på .28 och den tända fylld med en 1.5 px inre ring.
   --c gör storleken justerbar där en mindre ikon passar bättre
   (teckenförklaringen kör 9 px). Bara färgerna är nya: förlagans palett
   (röd / blå / sand / grå) i stället för den gamla.

   Markup:en kommer från eisenhowerIcon (internal/web/eisenhower.go);
   stilen ligger i det delade lagret eftersom board, översikt och
   detaljpanel renderar exakt samma komponent. */
.eis {
  display: inline-grid;
  grid-template-columns: repeat(2, var(--c, 10px));
  grid-auto-rows: var(--c, 10px);
  gap: 2px;
  vertical-align: middle;
  flex: none;
}
.eis i {
  display: block;
  border-radius: 2px;
  background: var(--gray-1);
  opacity: .28;
}
.eis i.on { opacity: 1; box-shadow: 0 0 0 1.5px currentColor inset; }
.eis--do   { color: var(--danger); }
.eis--plan { color: var(--blue); }
.eis--urg  { color: var(--sand); }
.eis--none { color: var(--gray-1); }
.eis--do i.on   { background: var(--danger); }
.eis--plan i.on { background: var(--blue); }
.eis--urg i.on  { background: var(--sand); }
.eis--none i.on { background: var(--gray-1); }

/* --- Formulärfält ---------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field-hint { font-size: var(--t-xs); color: var(--gray-3); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 16px; /* iOS zoomar inte vid fokus */
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.textarea { resize: vertical; min-height: 76px; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7986' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input:hover, .select:hover, .textarea:hover { border-color: #cbd5e1; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(32, 121, 181, .14);
}
.check { display: flex; align-items: center; gap: 9px; min-height: var(--tap); font-size: var(--t-md); }
.check input { width: 17px; height: 17px; accent-color: var(--blue); }

.search { position: relative; flex: 1 1 200px; min-width: 0; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--gray-3); }
.search .input { padding-left: 36px; font-size: var(--t-md); }
@media (min-width: 1024px) {
  .input, .select, .textarea { font-size: var(--t-md); min-height: 36px; padding: 7px 11px; }
  .textarea { min-height: 72px; }
}

/* --- Flikar, segment, tvålägesväxlare -------------------------- */
/* .meeting-tabs/.tab-btn är mötessidans namn på exakt de här flikarna:
   server_test.go pinnar strängen `class="tab-btn active"` och
   meeting-detail.js slår upp `.tab-btn[data-tab=…]`, så namnen kan inte
   bli de delade. Reglerna delas i stället för att dubbleras — förut stod
   samma tio rader en gång till i moten-aktivt.css. */
.tabs, .meeting-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar, .meeting-tabs::-webkit-scrollbar { display: none; }
.tab, .tab-btn {
  position: relative;
  padding: 10px 2px;
  margin-right: 18px;
  min-height: var(--tap);
  border: 0;
  background: none;
  color: var(--gray-3);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
}
.tab:hover, .tab-btn:hover { color: var(--ink); }
.tab.is-active, .tab.active, .tab-btn.active { color: var(--ink); }
.tab.is-active::after, .tab.active::after, .tab-btn.active::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--blue);
}

.seg {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.seg::-webkit-scrollbar { display: none; }
.seg-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.seg-item .n { color: var(--gray-3); }
.seg-item.is-active { background: var(--navy); box-shadow: none; color: #fff; }
.seg-item.is-active .n { color: rgba(255, 255, 255, .6); }

/* Två lägen (SV/EN): samma komponent, hopsatt. */
.toggle2 { display: inline-flex; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); padding: 2px; }
.toggle2 button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(var(--radius) - 3px);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--gray-3);
  cursor: pointer;
}
.toggle2 button.is-active { background: var(--navy); color: #fff; }

/* --- Tomt läge -------------------------------------------------- */
.empty { text-align: center; padding: 48px 24px; color: var(--gray-3); }
.empty h3 { color: var(--ink); font-size: var(--t-lg); margin-bottom: 6px; font-weight: 700; }
.empty p { font-size: var(--t-md); }