/* ================================================================ Mina ärenden — css-designprinciper.md scope ================================================================ Skuggar shared/css/variables.css inom body[data-tool="mina-arenden"]. Samma palett, hero-monster och kn appkomponenter som de andra service-sidorna (samtal/intervju/feedback/upptack). Spec: projects/prototyp/docs/css-designprinciper.md Princip: specen styr, sidan foljer. Innehall: - Lager 1: variabel-skuggning - Lager 2: element-defaults (a) - Lager 3: rubriker + Body 1 - HERO: .service-hero (samma som de andra service-sidorna) - KNAPPAR: btn-primary / btn-secondary - SIDOSPECIFIKT: arenden-empty, guide-cards, arende-card/-status/-detail, error-banner, cancel-notice ================================================================ */ /* ---------------------------------------------------------------- LAGER 1 — Variabel-skuggning ---------------------------------------------------------------- */ body[data-tool="mina-arenden"] { --color-primary: #00A09B; --color-primary-rgb: 0, 160, 155; --color-primary-hover: #008C87; --color-secondary-teal: #00A09B; --color-text-primary: #262626; --color-text-heading: #262626; --color-text-secondary: #959E9F; --color-text-muted: #959E9F; --font-weight-bold: 800; } /* ---------------------------------------------------- LAGER 2 — Element-defaults ---------------------------------------------------------------- */ body[data-tool="mina-arenden"] a:not([class]) { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400; color: #00A09B; } @media (max-width: 600px) { body[data-tool="mina-arenden"] a:not([class]) { font-size: 12px; } } /* ================================================================ HERO — Full-width teal section Speglar exakt monstret fran service-gm3.css (samtal/intervju/feedback) ================================================================ */ body[data-tool="mina-arenden"] .service-hero { background: #00A09B; padding: var(--space-6) var(--space-4) calc(var(--space-6) + var(--space-1)); width: 100%; } body[data-tool="mina-arenden"] .service-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; } body[data-tool="mina-arenden"] .service-hero-title { font-family: 'Rubik', sans-serif; font-size: 52px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #FFFFFF; margin: 0 0 var(--space-2); } body[data-tool="mina-arenden"] .service-hero-tagline { font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.57; color: rgba(255, 255, 255, 0.82); max-width: 620px; margin: 0 auto; } body[data-tool="mina-arenden"] .service-hero-tagline a { color: #FFFFFF; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } body[data-tool="mina-arenden"] .service-hero-tagline a:hover { text-decoration-thickness: 2px; } @media (max-width: 600px) { body[data-tool="mina-arenden"] .service-hero { padding: var(--space-5) var(--space-3); } body[data-tool="mina-arenden"] .service-hero-title { font-size: 30px; } body[data-tool="mina-arenden"] .service-hero-tagline { font-size: 15px; } } /* ================================================================ ARENDEN-CONTAINER — width-fix + top-padding Bugg: ar display:flex column. Flex-items utan explicit width krymper till content-storlek i stallet for att stretchas till max-width. Pa empty-state med kort loading-text blev containern bara ~389px (24+text+24). Fix: width: 100% sa containern stretchas till body-bredd, capad av max-width 760. ================================================================ */ body[data-tool="mina-arenden"] .arenden-container { width: 100%; padding-top: var(--space-5); } @media (max-width: 600px) { body[data-tool="mina-arenden"] .arenden-container { padding-top: var(--space-4); } } /* ================================================================ KNAPPAR — GM3-defaults ================================================================ */ body[data-tool="mina-arenden"] .btn-primary { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; background: #00A09B; color: #FFFFFF; border: none; border-radius: 32px; padding: 10px 22px; } body[data-tool="mina-arenden"] .btn-primary:hover { background: #008C87; } body[data-tool="mina-arenden"] .btn-secondary { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; background: #FFFFFF; color: #00A09B; border: 1px solid #00A09B; border-radius: 32px; padding: 10px 22px; } body[data-tool="mina-arenden"] .btn-secondary:hover { background: rgba(0, 160, 155, 0.06); } @media (max-width: 600px) { body[data-tool="mina-arenden"] .btn-primary, body[data-tool="mina-arenden"] .btn-secondary { font-size: 12px; } } /* ================================================================ EMPTY-STATE ================================================================ */ body[data-tool="mina-arenden"] .arenden-empty { text-align: center; padding: var(--space-6) 0 var(--space-4); } body[data-tool="mina-arenden"] .arenden-empty-title { font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: #262626; } body[data-tool="mina-arenden"] .arenden-empty-text { font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.57; color: #959E9F; max-width: 420px; margin: 0 auto; } @media (max-width: 600px) { body[data-tool="mina-arenden"] .arenden-empty-title { font-size: 20px; } body[data-tool="mina-arenden"] .arenden-empty-text { font-size: 15px; } } /* ================================================================ GUIDE-CARDS (empty state — direct user to other services) ================================================================ */ body[data-tool="mina-arenden"] .arenden-guide-card { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; padding: var(--space-4) var(--space-5); transition: border-color 0.15s, box-shadow 0.15s; } body[data-tool="mina-arenden"] .arenden-guide-card:hover { border-color: #00A09B; box-shadow: 0 2px 12px rgba(0, 160, 155, 0.1); } body[data-tool="mina-arenden"] .arenden-guide-card-title { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 500; color: #262626; line-height: 1.3; margin-bottom: 4px; } body[data-tool="mina-arenden"] .arenden-guide-card-desc { font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 400; color: #959E9F; line-height: 1.57; } @media (max-width: 600px) { body[data-tool="mina-arenden"] .arenden-guide-card-title { font-size: 14px; } body[data-tool="mina-arenden"] .arenden-guide-card-desc { font-size: 15px; } } /* ================================================================ SECTION-RUBRIKER (Aktuella / Avslutade / Pa borjad beställning) ---------------------------------------------------------------- Vanliga

per css-designprinciper.md. Shared tool-chrome.css satter h2 till Lora 1.3rem/700 — har overrider vi tillbaka till GM3 H2-spec. (Spec: projects/prototyp/docs/css-designprinciper.md → Title (H2)) ================================================================ / body[data-tool="mina-arenden"] h2 { font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: #262626; margin: 0 0 var(--space-4) 0; } @media (max-width: 600px) { body[data-tool="mina-arenden"] h2 { font-size: 20px; } } / ================================================================ ARENDE-CARD — Listobjekt Tar bort tillstandskodning via border-color, behaller funktionell border 1px subtil + bg vit. ================================================================ / body[data-tool="mina-arenden"] .arende-card, body[data-tool="mina-arenden"] .arende-card-wrap { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; / Ta bort browserns default focus-ring + tap-highlight som annars blinkar till som mörk ram när muspekaren lämnar kortet. / outline: none; -webkit-tap-highlight-color: transparent; } body[data-tool="mina-arenden"] .arende-card:focus, body[data-tool="mina-arenden"] .arende-card:focus-visible, body[data-tool="mina-arenden"] .arende-card-wrap:focus, body[data-tool="mina-arenden"] .arende-card-wrap:focus-visible { outline: none; } / När kortet ligger inuti en wrap har wrap:en huvudramen. Det inre kortet ska inte ha någon egen border, box-shadow eller transition — annars får vi en "flash" av mörk ram när inre :hover deaktiveras och border-color-transition kör tillbaka till GM3-defaultfärgen. Utan denna override vinner GM3-selektorn (0,2,1) över `.arende-card-wrap .arende-card` (0,2,0) i mina-arenden.css. / body[data-tool="mina-arenden"] .arende-card-wrap .arende-card, body[data-tool="mina-arenden"] .arende-card-wrap .arende-card:hover, body[data-tool="mina-arenden"] .arende-card-wrap .arende-card.arende-clickable:hover { border: none; box-shadow: none; transition: none; } body[data-tool="mina-arenden"] .arende-card-wrap:hover { border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } body[data-tool="mina-arenden"] .arende-card-wrap.is-expanded { border-color: #00A09B; box-shadow: 0 2px 12px rgba(0, 160, 155, 0.10); } / Pagar/non-clickable: dim opacity / body[data-tool="mina-arenden"] .arende-card.arende-pending { opacity: 0.6; } / ================================================================ ARENDE-STATUS — Pill i upper-right corner av kortet ---------------------------------------------------------------- Tidigare: vertikal kolumn till vanster i kortet med emoji-icon ovan en 12px label. Emojin (gult 🟡, blatt 📅, ratt ✅ m.fl.) bryter mot GM3 "en farpalett — inga varma toner" och kringgick labelfargen visuellt. Nu: enkel pill-span i .arende-body-header bredvid titeln, tilstandskodad via mjuk bg-tint + GM3-statusfarg pa texten. Mappar mot syntes-card-header-monstret (titel vanster, badge hoger). STRUKTUR: .arende-card .arende-body .arende-body-header (flex space-between) .arende-type (vanster) .arende-status (pill, hoger) .arende-subject .arende-date ... .arende-arrow ================================================================ / body[data-tool="mina-arenden"] .arende-body-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 4px; } / Status marker — vertikal färgad stapel + versaltext (inte pill). Spec: arende-pillar-update.md (2026-07-20). Överrider base CSS .arende-status (var vertikal 64px-kolumn). / body[data-tool="mina-arenden"] .arende-status { display: inline-flex; align-items: center; gap: 8px; min-width: 175px; flex-shrink: 0; white-space: nowrap; font-family: 'Rubik', sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; color: #2B3434; } / Vertikal färgad stapel som pseudo-element. Default grå — overrideras per variant. / body[data-tool="mina-arenden"] .arende-status::before { content: ''; display: block; width: 2px; height: 13px; border-radius: 1px; flex-shrink: 0; background-color: #959E9F; } / Status marker-färger — GoMonday-varumärkespalett. Fem semantiska nivåer mappar mot fas i shared/order-phase.js CATALOG: --action gul = kräver åtgärd (payment_not_completed, reschedule_required) --bokat teal = inplanerat (awaiting_delivery) --pagar cyan = aktivt pågår (locked_for_delivery) --klar grön = genomförd (delivered) --ej-genomfort grå = utebliven (delivery_failed) Varianterna sätter enbart stapelfärgen via ::before. / body[data-tool="mina-arenden"] .arende-status--action::before { background-color: #e0dd00; } body[data-tool="mina-arenden"] .arende-status--bokat::before { background-color: #00a09b; } body[data-tool="mina-arenden"] .arende-status--pagar::before { background-color: #19c2c6; } body[data-tool="mina-arenden"] .arende-status--klar::before, body[data-tool="mina-arenden"] .arende-status--genomfort::before { background-color: #20c997; } body[data-tool="mina-arenden"] .arende-status--ej-genomfort::before { background-color: #959E9F; } / Mobil: markören sitter tight mot texten (ingen alignment-buffer). / @media (max-width: 600px) { body[data-tool="mina-arenden"] .arende-status { min-width: 0; } } / Status-icon (legacy emoji) renderas inte langre av JS. Defensiv regel om gammal markup nansin lever kvar nagonstans. / body[data-tool="mina-arenden"] .arende-status-icon { display: none; } / ================================================================ SCORE-BADGE (poangsiffra pa feedback-arenden) Mappar mot GM3 .gm3-badge med positive-tint ================================================================ / body[data-tool="mina-arenden"] .arende-score { font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 500; background: rgba(32, 201, 151, 0.10); border: none; color: #1AA978; padding: 2px 10px; border-radius: 32px; } / ================================================================ ARENDE-CARD-BODY — Typografi ================================================================ / body[data-tool="mina-arenden"] .arende-type { font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 500; color: #262626; line-height: 1.4; } body[data-tool="mina-arenden"] .arende-subject { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400; color: #262626; line-height: 1.57; } body[data-tool="mina-arenden"] .arende-date { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400; color: #959E9F; } body[data-tool="mina-arenden"] .arende-expert { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400; color: #959E9F; } body[data-tool="mina-arenden"] .arende-order-id { font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 400; color: #959E9F; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } @media (max-width: 600px) { body[data-tool="mina-arenden"] .arende-type { font-size: 15px; } body[data-tool="mina-arenden"] .arende-subject, body[data-tool="mina-arenden"] .arende-date, body[data-tool="mina-arenden"] .arende-expert { font-size: 14px; } } / ================================================================ ARROW — Borttagen (2026-07-18) ---------------------------------------------------------------- Chevron-pilen i hogerkant tas inte langre fram av JS (buildCardWrap renderar ingen .arende-arrow). Hela kortet ar redan klickbart (button + aria-expanded) sa pilen var en duplicat visuell signal. Status-pillen i upper-right corner ar nu enda visuella affordance pa raden. Defensiv display:none ifall cachad markup finns kvar nansin. ================================================================ / body[data-tool="mina-arenden"] .arende-arrow { display: none; } / ================================================================ ARENDE-DETAIL — Expanderat innehall Tar bort border-top, anvander soft-teal bg-tint i stallet for separator-streck (GM3-princip) ================================================================ / body[data-tool="mina-arenden"] .arende-detail { border-top: none; background: rgba(0, 160, 155, 0.04); font-family: 'Rubik', sans-serif; font-size: 14px; color: #262626; line-height: 1.57; } body[data-tool="mina-arenden"] .arende-detail-loading { font-family: 'Rubik', sans-serif; font-style: italic; color: #959E9F; } body[data-tool="mina-arenden"] .arende-detail-error { font-family: 'Rubik', sans-serif; color: #EF4444; } / Detail-section-title — GM3 label / body[data-tool="mina-arenden"] .arende-detail-section-title { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; color: #959E9F; text-transform: uppercase; letter-spacing: 0.04em; } body[data-tool="mina-arenden"] .arende-detail-row { font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.57; } body[data-tool="mina-arenden"] .arende-detail-row-label { color: #959E9F; } body[data-tool="mina-arenden"] .arende-detail-row-value { color: #262626; } / Q&A-kort i detail — vit yta over soft-teal-bg, ingen border / body[data-tool="mina-arenden"] .arende-detail-qa { background: #FFFFFF; border: none; border-radius: 7.5px; padding: var(--space-3) var(--space-4); } body[data-tool="mina-arenden"] .arende-detail-qa-q { font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 500; color: #262626; line-height: 1.4; margin-bottom: 4px; } body[data-tool="mina-arenden"] .arende-detail-qa-a { font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 400; color: #262626; line-height: 1.57; } @media (max-width: 600px) { body[data-tool="mina-arenden"] .arende-detail-qa-q, body[data-tool="mina-arenden"] .arende-detail-qa-a { font-size: 15px; } } body[data-tool="mina-arenden"] .arende-detail-status-note { font-family: 'Rubik', sans-serif; font-style: italic; color: #959E9F; } / Actions (Andra tid / Avboka / Visa rapport) — ingen border-top / body[data-tool="mina-arenden"] .arende-detail-actions { border-top: none; margin-top: var(--space-3); padding-top: 0; gap: var(--space-2); } body[data-tool="mina-arenden"] .arende-action { padding: 8px 16px; font-size: 14px; } @media (max-width: 600px) { body[data-tool="mina-arenden"] .arende-action { font-size: 12px; } } / ================================================================ CANCEL-NOTICE / REPORT-CTA ================================================================ / body[data-tool="mina-arenden"] .arende-cancel-notice { background: rgba(0, 160, 155, 0.06); border: none; border-radius: 7.5px; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400; color: #262626; } body[data-tool="mina-arenden"] .arende-cancel-notice a { color: #00A09B; font-weight: 500; text-decoration: underline; } body[data-tool="mina-arenden"] .arende-action--report { text-decoration: none; } / ================================================================ ERROR-BANNER — soft-red utan border (GM3-monster) ================================================================ / body[data-tool="mina-arenden"] .arenden-error { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400; color: #EF4444; background: rgba(239, 68, 68, 0.06); border: none; border-radius: 7.5px; } / ================================================================ DINA SVAR — visa + redigera (spec: order-flow-ux-polish.md Del A2) ================================================================ / / Header: "Dina svar" + "Redigera"-länk till höger. / body[data-tool="mina-arenden"] .arende-detail-qa-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-2); } body[data-tool="mina-arenden"] .arende-detail-qa-header .arende-detail-section-title { margin: 0; } body[data-tool="mina-arenden"] .arende-detail-qa-edit-link { background: transparent; border: none; padding: 0; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; color: #00A09B; cursor: pointer; } body[data-tool="mina-arenden"] .arende-detail-qa-edit-link:hover { text-decoration: underline; } / Tomt-svar-state — muted italic. / body[data-tool="mina-arenden"] .arende-detail-qa-a--empty { font-style: italic; color: #959E9F; } / Redigeringsläge: textareas + Spara/Avbryt. / body[data-tool="mina-arenden"] .arende-detail-qa-edit { display: flex; flex-direction: column; gap: var(--space-3); } body[data-tool="mina-arenden"] .arende-detail-qa-edit-row { display: flex; flex-direction: column; gap: 4px; } body[data-tool="mina-arenden"] .arende-detail-qa-edit-label { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; color: #262626; line-height: 1.4; } body[data-tool="mina-arenden"] .arende-detail-qa-edit-textarea { font-family: 'Rubik', sans-serif; font-size: 15px; line-height: 1.5; color: #262626; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 7.5px; padding: 10px 12px; resize: vertical; min-height: 70px; width: 100%; box-sizing: border-box; } body[data-tool="mina-arenden"] .arende-detail-qa-edit-textarea:focus { outline: none; border-color: #00A09B; box-shadow: 0 0 0 2px rgba(0, 160, 155, 0.15); } body[data-tool="mina-arenden"] .arende-detail-qa-edit-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); } body[data-tool="mina-arenden"] .arende-detail-qa-cancel-link { background: transparent; border: none; padding: 8px 4px; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; color: #959E9F; cursor: pointer; } body[data-tool="mina-arenden"] .arende-detail-qa-cancel-link:hover { text-decoration: underline; } body[data-tool="mina-arenden"] .arende-detail-qa-edit-error { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: rgba(239, 68, 68, 0.06); border-radius: 7.5px; color: #EF4444; font-size: 14px; } / "Visa äldre ärenden"-knapp under avslutade */ body[data-tool="mina-arenden"] .arenden-show-older { display: block; width: 100%; margin-top: var(--space-3); padding: 12px; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; color: #959E9F; background: transparent; border: 1px dashed rgba(149, 158, 159, 0.3); border-radius: var(--radius-card); cursor: pointer; transition: color 0.15s, border-color 0.15s; } body[data-tool="mina-arenden"] .arenden-show-older:hover { color: #00A09B; border-color: rgba(0, 160, 155, 0.3); }