* { margin: 0; padding: 0; box-sizing: border-box; } /* DARK-tema — default. Variabler bytas av [data-theme="light"] vid theme-toggle. */ :root, [data-theme="dark"] { --bg: #060e1f; --surface: #0d1b35; --surface2: #112040; --border: #1e3054; --text: #e8f0fe; --muted: #6b8cba; /* Afflink brand palette (project_afflink_brand_colors.md) */ --primary: #2059A8; /* Afflink brand primary */ --primary-2: #1a4a8e; /* hover/active primary */ --accent: #57C2ED; /* Afflink accent */ --accent2: #2059A8; /* backward compat — use --primary */ --green: #10b981; --yellow: #f59e0b; --red: #dc2626; --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.18); --sidebar-w: 240px; } /* LIGHT-tema — aktiveras via data-theme="light" på . Afflink-färger (--primary/--accent) behålls. Bakgrund + text inverteras. Skiftet sker direkt utan reload (CSS-variabler bara). */ [data-theme="light"] { /* Något varmare/dämpat ljust tema — Mille tyckte ren-vit var "för ljust" */ --bg: #e8eef5; /* dämpad blågrå bakgrund (var #f5f7fb) */ --surface: #f4f7fb; /* dämpad off-white kort (var #ffffff) */ --surface2: #dee5ef; /* sub-bakgrund (var #f1f5f9) */ --border: #cbd5e1; /* tydligare borders (var #e2e8f0) */ --text: #0f172a; --muted: #475569; /* lite mörkare så texten kontrasterar bättre */ --primary: #2059A8; --primary-2: #1a4a8e; --accent: #1e7fb8; --accent2: #2059A8; --green: #059669; --yellow: #b45309; --red: #b91c1c; --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06); } /* Smooth theme-skifte — färger på element transitionas mjukt */ body, .sidebar, .sidebar-link, .notif-section, .group-card, .placeholder-card, .notif-row, .notif-tab, .notif-stat, input, select, textarea, button { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; font-size: 15px; line-height: 1.7; } /* ── SIDEBAR ── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; overflow-y: auto; } .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-top .sidebar-brand { border-bottom: none; padding: 0; flex: 1; min-width: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } /* ── Notifikations-bell i sidomenyn ─────────────────────────── */ .notif-wrap-sidebar { position: relative; flex-shrink: 0; } .notif-bell { background: var(--surface); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .notif-bell:hover { background: var(--surface2); border-color: var(--accent); color: var(--accent); } .notif-bell:active { transform: scale(0.95); } .notif-badge { position: absolute; top: -4px; right: -4px; /* Default: Afflink-accent (blå). Röd reserveras för critical-larm. */ background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; border-radius: 10px; padding: 3px 5px; min-width: 16px; text-align: center; display: none; box-shadow: 0 0 0 2px var(--bg); } /* Visa röd badge bara när minst 1 olästa har severity=error/critical. JS sätter data-has-critical='1' när det är fallet. */ .notif-badge[data-has-critical="1"] { background: #e25555; } /* position: fixed sa dropdown poppar ut UTANFOR sidebar (som har overflow-y:auto och annars klipper). Vanster-koordinaten = sidebar-w + 8px (luft mellan sidomeny och dropdown). Top under bell-ikonens position. */ .notif-dropdown { display: none; position: fixed; /* JS-beräknad top + left från knappens getBoundingClientRect() — sätts i base.html JS. Fallback-värden om JS inte hunnit (~14px = sidebar-top padding-top, så dropdown och bell-ikon hamnar på samma rad). */ top: 14px; left: calc(var(--sidebar-w) + 8px); width: 380px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); z-index: 9999; } .notif-dropdown-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .notif-dropdown-header strong { font-size: 14px; } .notif-dropdown-header a { font-size: 11.5px; color: var(--accent); text-decoration: none; font-weight: 500; } .notif-dropdown-header a:hover { text-decoration: underline; } .notif-list { padding: 0; } .notif-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; } .notif-dropdown-footer { padding: 10px 16px; border-top: 1px solid var(--border); text-align: center; } .notif-dropdown-footer button { background: none; border: none; color: var(--muted); font-size: 11.5px; cursor: pointer; text-decoration: underline; transition: color 0.15s; } .notif-dropdown-footer button:hover { color: var(--accent); } /* Smal vy: dropdown begränsas så den inte rinner ut */ @media (max-width: 480px) { .notif-dropdown { width: calc(100vw - 32px); left: -8px; } } /* ── THEME TOGGLE — sidebar-footer-rad + mobile-header-knapp ─────────── */ .theme-toggle-row { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; /* Säkerställ samma padding/höjd som sidebar-link i alla teman */ padding: 8px 12px; border-radius: 8px; color: var(--muted); display: flex; align-items: center; gap: 10px; } .theme-toggle-row:hover { color: var(--text); background: var(--surface2); } .theme-toggle-row .theme-icon-sun, .theme-toggle-row .theme-icon-moon { flex-shrink: 0; opacity: 0.85; } .theme-toggle-row:hover svg { opacity: 1; } /* I LIGHT-mode: gör knappen mer synlig (Mille rapporterade vit-på-vit-bug) */ [data-theme="light"] .theme-toggle-row { color: var(--text); background: var(--surface2); border: 1px solid var(--border); } [data-theme="light"] .theme-toggle-row svg { opacity: 1; } [data-theme="light"] .theme-toggle-row:hover { background: var(--surface); border-color: var(--accent); } /* DARK-tema visar solen + label "Ljust läge". LIGHT visar månen + label "Mörkt läge". Logik: knappen visar VAD DU FÅR om du klickar. */ [data-theme="dark"] .theme-toggle-row .theme-icon-moon { display: none; } [data-theme="light"] .theme-toggle-row .theme-icon-sun { display: none; } [data-theme="dark"] .theme-label-light { display: none; } [data-theme="light"] .theme-label-dark { display: none; } /* Logo-switch: mörk logga default, ljus logga i ljust läge. Reglerna är placerade efter .sidebar-logo-full (som sätter display:block) så att specificiteten räcker för att dölja rätt logga. */ .afflink-logo-for-dark, .afflink-logo-for-light { display: none !important; } [data-theme="dark"] .afflink-logo-for-dark, :root:not([data-theme="light"]) .afflink-logo-for-dark { display: block !important; } [data-theme="light"] .afflink-logo-for-light { display: block !important; } /* Mobile-header-versionen (i hörnet, kompakt ikon) */ .theme-toggle { background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; transition: color 0.15s, background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--surface2); color: var(--text); border-color: var(--border); } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } [data-theme="light"] .theme-toggle .theme-icon-sun { display: none; } .theme-toggle-mobile { margin-left: auto; width: 44px; height: 44px; } /* ── MOBIL-OPTIMERING för nya komponenter (group-cards, sub-flikar, ...) */ @media (max-width: 720px) { /* Group-cards (grupp-översikt) → 1 kolumn på mobil */ .group-cards { grid-template-columns: 1fr !important; gap: 12px; } .group-card { padding: 16px 18px; } .group-card-kpis { grid-template-columns: repeat(3, 1fr); gap: 6px; } .group-card-kpi { padding: 6px 8px; } .group-card-kpi-value { font-size: 16px; } /* Sub-flik-rad scrollar horisontellt på mobil (för bred för 4-7 flikar) */ .notif-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .notif-tabs::-webkit-scrollbar { display: none; } .notif-tab { white-space: nowrap; padding: 10px 12px; font-size: 13px; flex-shrink: 0; } /* KPI-stats-grid (notiser/outreach) → 2×2 på mobil */ .notif-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .notif-stat { padding: 10px 12px; } .notif-stat-value { font-size: 18px; } /* Placeholder-card */ .placeholder-card { padding: 18px 18px; max-width: 100%; } .placeholder-card h2 { font-size: 15px; } /* Alert-history-tabell — stack vertikalt på mobil */ .alert-history-table { font-size: 12px; } .alert-history-table th { display: none; } /* dölj headers, kortform per rad */ .alert-history-table td { padding: 6px 10px; display: block; border-bottom: none; } .alert-history-table td:first-child { padding-top: 12px; } .alert-history-table tr { display: block; background: var(--surface2); border-radius: 6px; padding: 4px 0; margin-bottom: 8px; } .alert-history-table tr:last-child td { border-bottom: none; } /* Notif-dropdown täcker hela vyn på mobil från höger sida */ .notif-dropdown { position: fixed; top: 56px; /* under mobile-header */ left: 12px; right: 12px; width: auto; max-height: calc(100vh - 70px); } /* Theme-toggle i sidebar göms på mobil — använd den i mobile-header istället */ .sidebar #themeToggle { display: none; } /* Knappar göms men INTE wrappern — dropdownarna måste förbli tillgängliga för JS */ .sidebar-top #statusBtn, .sidebar-top #notifBtn { display: none; } } /* Sidebar-grupprubriker: kompakt på mobil — hela raden = 44px tap-target */ @media (max-width: 720px) { .sidebar.open .sidebar-link { min-height: 44px; } .sidebar.open .sidebar-group-header { min-height: 44px; justify-content: flex-start; padding-top: 0; padding-bottom: 0; } .sidebar.open .sidebar-group-label { flex: 0 0 auto; white-space: nowrap; } .sidebar.open .sidebar-group-toggle { padding: 0 4px; flex-shrink: 0; } } /* ── LIGHT-TEMA-justeringar för element med inline-färger som inte använder vars */ [data-theme="light"] body { background: var(--bg); } [data-theme="light"] .notif-dropdown { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); } [data-theme="light"] .sidebar { box-shadow: 1px 0 0 var(--border); } [data-theme="light"] .group-card:hover { box-shadow: 0 6px 16px rgba(32, 89, 168, 0.10); } /* Action-badges (notiser-historik) — säkerställ kontrast i light */ [data-theme="light"] .action-badge.delivered { background: #fef3c7; color: #92400e; } [data-theme="light"] .action-badge.batched { background: #e0e7ff; color: #3730a3; } [data-theme="light"] .action-badge.fixed { background: #d1fae5; color: #065f46; } [data-theme="light"] .action-badge.skipped { background: #f1f5f9; color: #64748b; } /* ── Status-dot pa status-knappen (pulsar nar nagot kor) ─── */ .status-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--bg), 0 0 8px #22c55e; display: none; animation: status-pulse 2s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } /* Status-rad inne i dropdown */ .status-row { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .status-row:last-child { border-bottom: none; } .status-row-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; } .status-row-meta { font-size: 11.5px; color: var(--muted); } .status-row-eta { font-size: 11px; color: var(--accent); font-weight: 500; } /* ── Pop-up toasts (visas 5s + progressbar) ─────────────────── */ .notif-toast-container { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 10000; max-width: 380px; pointer-events: none; } @media (max-width: 720px) { .notif-toast-container { top: auto; bottom: 20px; right: 12px; left: 12px; max-width: none; } } .notif-toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid #57C2ED; border-radius: 10px; padding: 14px 16px 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); animation: notif-slide-in 0.35s ease-out; cursor: pointer; pointer-events: auto; overflow: hidden; position: relative; } .notif-toast.success { border-left-color: #22c55e; } .notif-toast.warning { border-left-color: #f59e0b; } .notif-toast.error { border-left-color: #e25555; } .notif-toast.info { border-left-color: #57C2ED; } .notif-toast.fading { animation: notif-slide-out 0.4s ease-in forwards; } @keyframes notif-slide-in { from { transform: translateX(420px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes notif-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(420px); opacity: 0; } } .notif-toast-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; } .notif-toast-title { font-size: 13.5px; font-weight: 600; color: var(--text); flex: 1; line-height: 1.35; } .notif-toast-close { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; margin: -2px -4px 0 0; flex-shrink: 0; } .notif-toast-close:hover { color: var(--text); } .notif-toast-body { font-size: 12.5px; color: var(--muted); line-height: 1.45; } /* Progressbar — fyll går från 100% till 0% under 5 sekunder */ .notif-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: #57C2ED; width: 100%; transform-origin: left center; animation: notif-progress 5s linear forwards; } .notif-toast.success .notif-toast-progress { background: #22c55e; } .notif-toast.warning .notif-toast-progress { background: #f59e0b; } .notif-toast.error .notif-toast-progress { background: #e25555; } @keyframes notif-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .sidebar-logo { height: 28px; width: 28px; border-radius: 6px; object-fit: cover; } .sidebar-logo-full { max-width: 100%; width: auto; height: 44px; object-fit: contain; display: block; } .sidebar-nav { flex: 1; padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; } .sidebar-group { margin-top: 8px; } .sidebar-group-header { display: flex; align-items: center; gap: 4px; padding: 6px 6px 4px 12px; } .sidebar-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); opacity: 0.7; text-decoration: none; flex: 1; padding: 2px 0; border-radius: 4px; transition: color 0.12s, opacity 0.12s; cursor: pointer; } a.sidebar-group-label:hover { color: var(--text); opacity: 1; } a.sidebar-group-label.active { color: var(--accent); opacity: 1; } .sidebar-group.active-group .sidebar-group-label { opacity: 1; } .sidebar-group-toggle { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.12s, transform 0.18s; } .sidebar-group-toggle:hover { opacity: 1; background: var(--surface2); } .sidebar-group-toggle .chevron { transition: transform 0.18s; transform: rotate(-90deg); } .sidebar-group.open .sidebar-group-toggle .chevron { transform: rotate(0deg); } .sidebar-group-links { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.22s ease, opacity 0.18s ease; } .sidebar-group.open .sidebar-group-links { max-height: 1000px; opacity: 1; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.15s; } .sidebar-link:hover { color: var(--text); background: var(--surface2); } .sidebar-link.active { color: var(--accent); background: rgba(77,166,255,0.1); } .sidebar-link.logout { color: var(--red); } .sidebar-link.logout:hover { background: rgba(248,113,113,0.1); } .sidebar-link svg { flex-shrink: 0; opacity: 0.7; } .sidebar-link.active svg { opacity: 1; } /* Drag-and-drop sidomeny */ .sidebar-group-header { cursor: grab; } .sidebar-group-header:active { cursor: grabbing; } .sidebar-link { cursor: grab; } .sidebar-link:active { cursor: grabbing; } .sidebar-drag-ghost { opacity: 0.4; background: rgba(87,194,237,0.15) !important; border: 2px dashed #57C2ED !important; border-radius: 6px; } .sidebar-drag-chosen { opacity: 0.85; } .sidebar-drag-active { opacity: 0.6; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; } /* ── SUB-NAV ── */ .sub-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #333); margin-bottom: 20px; } .sub-nav-link { padding: 8px 16px; text-decoration: none; color: var(--muted, #888); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .sub-nav-link:hover { color: var(--fg, #fff); } .sub-nav-link.active { color: var(--accent, #57C2ED); border-bottom-color: var(--accent, #57C2ED); font-weight: 600; } /* ── MAIN ── */ main { margin-left: var(--sidebar-w); padding: 32px 40px; } /* ── GLOBAL SEARCH ── */ .global-search-wrap { margin-bottom: 24px; } .global-search { position: relative; max-width: 500px; } .global-search .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .global-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 10px 14px 10px 40px; border-radius: 10px; font-size: 14px; outline: none; transition: border-color 0.15s; } .global-search input:focus { border-color: var(--accent); } .global-search input::placeholder { color: var(--muted); opacity: 0.6; } .search-results { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; max-height: 400px; overflow-y: auto; z-index: 200; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .search-group-label { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); opacity: 0.7; border-top: 1px solid var(--border); } .search-group-label:first-child { border-top: none; } .search-result-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; text-decoration: none; color: var(--text); font-size: 13px; transition: background 0.1s; } .search-result-item:hover { background: var(--surface2); } .search-result-title { font-weight: 500; } .search-result-sub { color: var(--muted); font-size: 12px; margin-left: 12px; white-space: nowrap; } .search-empty { padding: 16px 14px; color: var(--muted); font-size: 13px; text-align: center; } /* ── TABS ── */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .tab { padding: 10px 20px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 500; transition: all 0.15s; background: none; border-top: none; border-left: none; border-right: none; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── PAGE HEADER ── */ .page-header { margin-bottom: 28px; } .page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); } .page-header .subtitle { color: var(--muted); font-size: 14px; margin-top: 2px; } .page-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; } /* ── SECTION TITLE ── */ .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 28px 0 12px; } /* ── STAT CARDS ── */ .stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; flex: 1; min-width: 150px; } .stat-card .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .stat-card .value { font-size: 28px; font-weight: 700; margin-top: 4px; } /* ── GRID ── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } /* ── CARD ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 16px; } .card h2 { font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; } /* ── STATUS DOTS ── */ .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); } .dot.yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); } .dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent2); color: white; text-decoration: none; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: opacity 0.15s; } .btn:hover { opacity: 0.85; } .btn-sm { padding: 6px 12px; font-size: 12px; background: rgba(77,166,255,0.15); color: var(--accent); border: 1px solid rgba(77,166,255,0.25); } .btn-sm:hover { background: rgba(77,166,255,0.25); opacity: 1; } /* Semantiska knapp-varianter (primär/sekundär/farlig/varning/framgång) */ .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface2); opacity: 1; } .btn-danger { background: var(--red); color: #fff; border: none; } .btn-danger:hover { background: #b91c1c; opacity: 1; } .btn-warning { background: rgba(245,158,11,0.15); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); } .btn-warning:hover { background: rgba(245,158,11,0.25); opacity: 1; } .btn-success { background: var(--green); color: #fff; border: none; } .btn-success:hover { background: #059669; opacity: 1; } .btn-muted { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); } .btn-muted:hover { background: var(--bg); color: var(--text); opacity: 1; } .btn-link { background: transparent; color: var(--accent); border: 1px solid rgba(87,194,237,0.3); } .btn-link:hover { background: rgba(87,194,237,0.1); opacity: 1; } /* ── TABLE ── */ table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 10px 14px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left; } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(255,255,255,0.02); } th.right, td.right { text-align: right; } .table-wrap { overflow-x: auto; } .table-card { padding: 0; overflow: hidden; } /* ── SORTABLE TABLES (gemensam standard, Mille:s krav 2026-04-28) ── Pil ↑/↓ syns BARA på sorterad kolumn (i accent-blå). Inaktiva headers visar subtilt streck ↕ vid hover så man förstår att de är sorteringsbara. Konsekvent över ALLA sortable-tabeller i appen. */ table.sortable th { cursor: pointer; user-select: none; position: relative; } table.sortable th:hover { color: var(--accent); } table.sortable th .sort-arrow { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--muted); opacity: 0; transition: opacity 0.12s, color 0.12s; width: 8px; } /* Hover-hint på ej aktiva headers */ table.sortable th:hover .sort-arrow:empty::before { content: "\2195"; /* ↕ */ opacity: 0.5; } /* Aktiv sorterad kolumn — accent-blå pil, alltid synlig */ table.sortable th.sort-asc .sort-arrow, table.sortable th.sort-desc .sort-arrow { color: var(--accent); opacity: 1; } table.sortable th.sort-asc, table.sortable th.sort-desc { color: var(--accent); } /* ── FILTER INPUT ── */ .filter-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: 13px; width: 260px; outline: none; } .filter-input:focus { border-color: var(--accent); } /* ── FILTER SELECT ── */ .filter-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: 13px; outline: none; cursor: pointer; appearance: auto; } .filter-select:focus { border-color: var(--accent); } /* ── FORM-INPUT / FORM-SELECT / FORM-TEXTAREA ── */ .form-input, .form-select, .form-textarea { background: var(--surface); border: 1px solid var(--border); padding: 10px 14px; border-radius: 8px; color: var(--text); font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(87, 194, 237, 0.15); } .form-textarea { min-height: 90px; resize: vertical; line-height: 1.5; } .form-input::placeholder, .form-textarea::placeholder { color: var(--muted); opacity: 0.7; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .form-group > label { font-size: 13px; font-weight: 500; color: var(--text); } .form-group > label .required { color: var(--red); margin-left: 2px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .form-helptext { font-size: 12px; color: var(--muted); margin-top: 4px; } .form-radio-group { display: flex; gap: 16px; align-items: center; padding: 4px 0; } .form-radio-group label { display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: 14px; } /* ── SLIDER ── */ .slider-wrapper { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; } .slider-wrapper .slider-header { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; } .slider-wrapper .slider-value { font-weight: 600; color: var(--accent); font-size: 15px; min-width: 40px; text-align: right; } input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--surface2); border-radius: 3px; border: 1px solid var(--border); outline: none; cursor: pointer; } input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: pointer; transition: transform 0.15s; } input[type="range"].slider::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type="range"].slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: pointer; } /* ── MODAL OVERLAY / MODAL CARD ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 28px; position: relative; } .modal-card .modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: var(--muted); font-size: 22px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .modal-card .modal-close:hover { background: var(--surface2); color: var(--text); } .modal-card h2 { margin: 0 0 20px 0; font-size: 20px; } .modal-card .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } /* ── BADGE ── */ .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .badge-green { background: rgba(52,211,153,0.12); color: var(--green); } .badge-yellow { background: rgba(251,191,36,0.12); color: var(--yellow); } .badge-red { background: rgba(248,113,113,0.12); color: var(--red); } .badge-blue { background: rgba(77,166,255,0.12); color: var(--accent); } .badge-muted { background: rgba(107,140,186,0.12); color: var(--muted); } .badge-success { background: rgba(52,211,153,0.12); color: var(--green); } .badge-warning { background: rgba(251,191,36,0.12); color: var(--yellow); } .badge-danger { background: rgba(248,113,113,0.12); color: var(--red); } .badge-reminded { background: rgba(234,148,40,0.18); color: #ea9428; border: 1px solid rgba(234,148,40,0.3); } code { font-family: 'Courier New', monospace; background: rgba(77,166,255,0.1); color: var(--accent); padding: 2px 7px; border-radius: 4px; font-size: 12px; } .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; } .checkbox-label input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; } /* ── PAGINATION ── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; padding: 16px 0; } .pagination-info { font-size: 13px; color: var(--muted); } /* ── MARKDOWN BODY ── */ .markdown-body { color: var(--text); line-height: 1.8; } .markdown-body h1 { font-size: 24px; font-weight: 700; margin: 24px 0 10px; letter-spacing: -0.3px; } .markdown-body h2 { font-size: 18px; font-weight: 600; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .markdown-body h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; color: var(--accent); } .markdown-body p { margin-bottom: 12px; font-size: 14px; } .markdown-body ul, .markdown-body ol { padding-left: 24px; margin-bottom: 12px; } .markdown-body li { margin-bottom: 4px; font-size: 14px; } .markdown-body strong { color: var(--text); font-weight: 600; } .markdown-body em { color: var(--muted); } .markdown-body blockquote { border-left: 3px solid var(--accent2); padding-left: 16px; color: var(--muted); margin: 14px 0; } .markdown-body table { margin: 14px 0; } .markdown-body code { font-size: 12px; } .markdown-body pre { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin: 14px 0; overflow-x: auto; } .markdown-body pre code { background: none; padding: 0; color: var(--text); } .markdown-body a { color: var(--accent); text-decoration: none; } .markdown-body a:hover { text-decoration: underline; } .markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; } /* ── COLLAPSIBLE ── */ .log-details { margin-bottom: 8px; } .log-summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; font-size: 14px; } .log-summary::-webkit-details-marker { display: none; } .log-summary::before { content: '▶'; font-size: 10px; color: var(--muted); transition: transform 0.15s; flex-shrink: 0; } details[open] .log-summary::before { transform: rotate(90deg); } /* ── MISC ── */ .muted { color: var(--muted); } .small { font-size: 13px; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; } /* ── LOGIN (standalone) ── */ body.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(ellipse at center, #0d1b35 0%, #060e1f 70%); } .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 48px 40px; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .login-logo { width: 160px; margin-bottom: 8px; border-radius: 8px; } .login-sub { color: var(--muted); margin-bottom: 28px; font-size: 14px; } .login-box form { display: flex; flex-direction: column; gap: 12px; } .login-box input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 13px 18px; border-radius: 10px; font-size: 15px; outline: none; transition: border-color 0.15s; } .login-box input:focus { border-color: var(--accent2); } .login-box button { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: white; border: none; padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .login-box button:hover { opacity: 0.9; } .error { color: var(--red); font-size: 13px; } /* ── MOBILE HEADER + OVERLAY ── */ .mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 90; align-items: center; padding: 0 14px; gap: 12px; } .mobile-icon-btn { background: none; border: none; color: var(--text); cursor: pointer; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; position: relative; flex-shrink: 0; } .mobile-icon-btn:hover, .mobile-icon-btn:focus { background: var(--surface2); outline: none; } .hamburger { background: none; border: none; color: var(--text); cursor: pointer; padding: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .hamburger:hover, .hamburger:focus { background: var(--surface2); outline: none; } .mobile-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 15px; } .mobile-brand img { height: 26px; width: 26px; border-radius: 6px; object-fit: cover; } .mobile-brand .mobile-logo-full { height: 28px; width: auto; object-fit: contain; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 95; opacity: 0; transition: opacity 0.2s; } .sidebar-overlay.visible { display: block; opacity: 1; } body.no-scroll { overflow: hidden; } /* Safe-area (iPhone X+ notch + home indicator) */ @supports (padding: env(safe-area-inset-top)) { .mobile-header { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); } } /* ── RESPONSIVE — TABLET (≤1100px) ── */ @media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } main { padding: 28px 28px; } } /* ── RESPONSIVE — NARROW TABLET (≤900px) ── */ @media (max-width: 900px) { :root { --sidebar-w: 60px; } .sidebar-brand span, .sidebar-label, .sidebar-link span, .sidebar-footer span { display: none; } .sidebar-link { justify-content: center; padding: 10px; } .sidebar-brand { justify-content: center; padding: 16px 8px; } main { padding: 24px 24px; } .global-search { max-width: 100%; } .filter-input { width: 100%; max-width: 100%; } } /* ── RESPONSIVE — MOBILE (≤720px): slide-in sidebar + card view ── */ @media (max-width: 720px) { :root { --sidebar-w: 260px; } .mobile-header { display: flex; } .sidebar { width: 260px; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.4); padding-top: 0; } .sidebar.open { transform: translateX(0); } .sidebar-brand { justify-content: flex-start; padding: 20px 20px 16px; } .sidebar-brand span, .sidebar-label, .sidebar-link span, .sidebar-footer span { display: inline; } .sidebar-link { justify-content: flex-start; padding: 8px 12px; } main { margin-left: 0; margin-top: calc(56px + env(safe-area-inset-top, 0px)); padding: 18px 14px max(18px, env(safe-area-inset-bottom, 0px)); } .global-search-wrap { margin-bottom: 18px; } .page-header { margin-bottom: 20px; } .page-header h1 { font-size: 22px; line-height: 1.25; } .page-header .subtitle { font-size: 13px; } .page-header-row { flex-direction: column; gap: 14px; align-items: stretch; margin-bottom: 20px; } .section-title { margin: 20px 0 10px; } /* Stat cards: 2×2 grid on mobile (tighter than full stack) */ .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { min-width: 0; padding: 14px 14px; border-radius: 10px; } .stat-card .label { font-size: 10px; } .stat-card .value { font-size: 22px; margin-top: 2px; } /* grid-2 / grid-3 already stacked at ≤1100px — reinforce with tighter gap */ .grid-2, .grid-3 { gap: 14px; } .card { padding: 16px; border-radius: 10px; margin-bottom: 14px; } .card h2 { font-size: 13px; margin-bottom: 12px; } /* Filters: stack and full-width */ .filter-input, .filter-select { width: 100%; } /* Tabs scrollable horizontally */ .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .tab { white-space: nowrap; padding: 10px 14px; flex-shrink: 0; } /* ── MOBILE TABLE CARD VIEW ── */ /* Every table with .mobile-cards (auto-added by JS) becomes a stack of cards */ .table-wrap { overflow: visible; } .table-card { background: transparent; border: none; padding: 0; overflow: visible; } table.mobile-cards, table.mobile-cards thead, table.mobile-cards tbody, table.mobile-cards tr, table.mobile-cards td { display: block; width: 100%; } table.mobile-cards thead { position: absolute; left: -9999px; top: -9999px; } table.mobile-cards tbody { display: flex; flex-direction: column; gap: 10px; } table.mobile-cards tr { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } table.mobile-cards tr:hover td { background: transparent; } table.mobile-cards td { border-bottom: 1px dashed rgba(107,140,186,0.15); padding: 8px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; font-size: 13px; text-align: right; white-space: normal; } table.mobile-cards td:last-child { border-bottom: none; padding-bottom: 0; } table.mobile-cards td:first-child { padding-top: 0; } table.mobile-cards td::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); flex-shrink: 0; text-align: left; min-width: 80px; max-width: 45%; padding-top: 2px; } /* First cell (usually primary identifier) — emphasize */ table.mobile-cards td:first-child { font-weight: 600; font-size: 14px; } table.mobile-cards td:first-child::before { font-size: 10px; opacity: 0.7; } /* Cells with no data-label: hide the pseudo-element */ table.mobile-cards td:not([data-label])::before, table.mobile-cards td[data-label=""]::before { content: none; } /* Right-aligned cells already align right — no change needed */ table.mobile-cards th.right, table.mobile-cards td.right { text-align: right; } /* Form inputs: prevent iOS zoom by using ≥16px */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], select, textarea, .filter-input, .filter-select, .global-search input { font-size: 16px; } .btn { padding: 10px 16px; font-size: 14px; } .btn-sm { padding: 8px 12px; font-size: 13px; } /* Pagination compact */ .pagination { flex-wrap: wrap; gap: 10px; } /* Markdown body scales down */ .markdown-body h1 { font-size: 20px; } .markdown-body h2 { font-size: 16px; } .markdown-body h3 { font-size: 14px; } .markdown-body p, .markdown-body li { font-size: 14px; } /* Truncate disabled on mobile — let content wrap */ .truncate { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; } } /* ── RESPONSIVE — SMALL PHONE (≤420px) ── */ @media (max-width: 420px) { main { padding: 14px 12px; } .page-header h1 { font-size: 20px; } .card { padding: 14px; border-radius: 10px; } /* On very small screens, stat-cards stack 1-wide for readability */ .stat-row { grid-template-columns: 1fr; } .stat-card { padding: 14px 16px; } .stat-card .value { font-size: 24px; } .login-box { padding: 32px 22px; border-radius: 16px; } table.mobile-cards td::before { min-width: 70px; } table.mobile-cards td { font-size: 12.5px; gap: 10px; } } /* ══════════════════════════════════════════════════════════════ SUMMARY-BLOCK — grupperar relaterade värden i EN ruta (undviker 12 isolerade kort) ══════════════════════════════════════════════════════════════ */ .summary-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 8px; } @media (max-width: 900px) { .summary-grid-2 { grid-template-columns: 1fr; } } .summary-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; } .summary-block:hover { border-color: var(--border); } .summary-block-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .summary-rows { display: flex; flex-direction: column; gap: 8px; } .summary-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; } .summary-label { color: var(--muted); } .summary-value { color: var(--text); font-weight: 600; text-align: right; } .summary-value.accent { color: var(--accent); } /* ══════════════════════════════════════════════════════════════ GLOBAL — section-heading + sub-heading (används överallt) ══════════════════════════════════════════════════════════════ */ .badge-purple { background: rgba(147, 51, 234, 0.15); color: #a78bfa; } /* ══════════════════════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════════════════════ */ .pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 24px 0 8px; flex-wrap: wrap; } .pag-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-decoration: none; transition: background 0.1s, border-color 0.1s; } .pag-link:hover:not(.active):not(.muted) { background: var(--bg); border-color: var(--accent); } .pag-link.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .pag-link.muted { border: none; background: transparent; color: var(--muted); cursor: default; } /* ══════════════════════════════════════════════════════════════ COST-BREAKDOWN (dropdown för detaljerade kostnader) ══════════════════════════════════════════════════════════════ */ .cost-breakdown { margin: 8px 0 24px; } .cost-breakdown > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); user-select: none; } .cost-breakdown > summary:hover { color: var(--text); border-color: var(--accent); } .cost-breakdown > summary::-webkit-details-marker { display: none; } .cost-breakdown > summary::before { content: "▸"; font-size: 10px; transition: transform 0.15s; } .cost-breakdown[open] > summary::before { transform: rotate(90deg); } /* ══════════════════════════════════════════════════════════════ VARIANT-FLIKAR (viewer) — Afflink-stylade ══════════════════════════════════════════════════════════════ */ .variant-tabs { display: flex; gap: 4px; margin: 16px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .variant-tab { padding: 10px 18px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .variant-tab:hover { color: var(--text); } .variant-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; } .variant-count { opacity: 0.7; font-weight: 500; margin-left: 2px; } /* Subtabs (Stable/Test/Alla) — mindre än typ-flikar, fristående rad */ .variant-subtabs { display: flex; gap: 4px; align-items: center; margin: 10px 0 16px; padding: 6px 2px; } .variant-subtabs-label { color: var(--muted); font-size: 12px; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .variant-subtab { padding: 6px 14px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 500; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); transition: all 0.15s; } .variant-subtab:hover { color: var(--text); border-color: var(--muted); } .variant-subtab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; } .variant-subtab.active.stable { background: var(--green); border-color: var(--green); } .variant-subtab.active.test { background: var(--yellow); border-color: var(--yellow); color: #1a1a1a; } /* ══════════════════════════════════════════════════════════════ COST-STRIP — återanvändbar på flikar med API-kostnader ══════════════════════════════════════════════════════════════ */ .cost-strip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 14px 18px; margin-bottom: 8px; } .cost-strip-item { display: flex; flex-direction: column; gap: 2px; padding-right: 16px; border-right: 1px solid var(--border); } .cost-strip-item:last-of-type { border-right: none; } .cost-strip-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; } .cost-strip-value { font-size: 17px; font-weight: 700; color: var(--text); } .cost-strip-note { margin-left: auto; font-size: 12px; color: var(--muted); font-style: italic; } /* ══════════════════════════════════════════════════════════════ BILDER — lista, playground, kort ══════════════════════════════════════════════════════════════ */ .playground { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 8px; } .playground textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: inherit; font-size: 14px; resize: vertical; min-height: 80px; } .playground textarea:focus { outline: none; border-color: var(--accent); } .playground-controls { display: flex; gap: 14px; align-items: end; margin-top: 12px; flex-wrap: wrap; } .playground-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .playground-controls select, .playground-controls input[type="number"] { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13px; } .btn-primary { background: var(--primary); color: #fff; border: none; padding: 9px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s; } .btn-primary:hover { background: var(--primary-2); } .btn-primary:disabled { opacity: 0.5; cursor: wait; } .playground-status { margin-top: 12px; font-size: 13px; color: var(--muted); } .playground-results { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .pg-result { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .pg-result img { width: 100%; height: auto; display: block; } .pg-result-meta { padding: 10px 12px; font-size: 12px; color: var(--muted); } .pg-cost { color: var(--text); font-weight: 500; margin-bottom: 4px; } .pg-prompt-text { font-size: 11.5px; color: var(--muted); padding: 6px 0; white-space: pre-wrap; } .pg-errors { margin-top: 10px; padding: 10px 14px; background: rgba(220, 38, 38, 0.1); border: 1px solid var(--red); border-radius: 6px; font-size: 12.5px; color: var(--red); grid-column: 1 / -1; } .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 6px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } .bilder-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .bilder-search, .bilder-controls select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; } .bilder-search { flex: 1; min-width: 220px; } .bilder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .bild-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s, transform 0.1s; } .bild-card:hover { border-color: var(--accent); } .bild-thumb-link { display: block; aspect-ratio: 16/9; background: var(--bg); overflow: hidden; } .bild-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .bild-meta { padding: 12px 14px; font-size: 12.5px; } .bild-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .bild-generator { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; font-weight: 700; } .bild-ts { color: var(--muted); font-size: 11.5px; } .bild-keyword { color: var(--text); font-weight: 500; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bild-filename { color: var(--muted); font-size: 11.5px; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; } .bild-details { border-top: 1px solid var(--border); padding-top: 8px; } .bild-details summary { cursor: pointer; color: var(--accent); font-size: 12px; user-select: none; list-style: none; } .bild-details summary::-webkit-details-marker { display: none; } .bild-details summary::before { content: "▸ "; transition: transform 0.15s; display: inline-block; } .bild-details[open] summary::before { transform: rotate(90deg); } .bild-detail-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 11.5px; } .bild-detail-grid > div { display: flex; gap: 8px; } .bild-detail-grid .lbl { color: var(--muted); min-width: 52px; font-weight: 500; } .bild-detail-grid .val { color: var(--text); word-break: break-word; } .bild-detail-grid .val a { color: var(--accent); } .empty-state { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 15px; background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; } /* ══════════════════════════════════════════════════════════════ ÖVERSIKT (/ = dashboard) — sektioner och kort ══════════════════════════════════════════════════════════════ */ .section-heading { margin: 40px 0 16px; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .section-heading::before { content: ""; display: inline-block; width: 4px; height: 22px; background: var(--accent); border-radius: 2px; } .section-heading .section-sub { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: auto; text-transform: none; letter-spacing: 0; } /* ── BEHÖVER DIN UPPMÄRKSAMHET ── */ .attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 8px; } .attention-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 16px 20px; text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; display: block; } .attention-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(32, 89, 168, 0.15); } .attention-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .attention-count { font-size: 30px; font-weight: 700; color: var(--text); margin: 6px 0 4px; line-height: 1; } .attention-cta { font-size: 13px; color: var(--accent); font-weight: 500; } .attention-empty { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 10px; padding: 16px 22px; margin: 16px 0 4px; font-size: 14px; color: var(--text); } .attention-empty .check-icon { color: var(--green); font-weight: 700; margin-right: 6px; } /* ── KPI GRID 3 (Försäljning, Kostnader) ── */ .kpi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .kpi-grid-3 { grid-template-columns: 1fr; } } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .kpi-card:hover { border-color: var(--primary); } .kpi-period { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; } .kpi-main { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; } .kpi-number { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; } .kpi-unit { font-size: 13px; color: var(--muted); } .kpi-big { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1.1; } .kpi-split { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; display: flex; flex-direction: column; gap: 4px; } .split-row { display: flex; justify-content: space-between; align-items: center; } .split-row.total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13.5px; } .split-label { color: var(--muted); } .split-value { font-weight: 600; color: var(--text); } .split-value.accent { color: var(--accent); font-weight: 700; } /* Automation card (samma som KPI men med egen accent) */ .automation-card .kpi-number { color: var(--accent); } .automation-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .automation-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; } .automation-mini.alert { border-color: var(--red); } .mini-label { color: var(--muted); } .mini-value { font-weight: 700; color: var(--text); font-size: 15px; } .mini-value.accent { color: var(--accent); } .mini-value.red { color: var(--red); } /* Cost card */ .cost-card .kpi-big { color: var(--text); } .cost-details { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; } .cost-details summary { cursor: pointer; color: var(--accent); user-select: none; list-style: none; font-size: 12px; font-weight: 500; } .cost-details summary::-webkit-details-marker { display: none; } .cost-details summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; } .cost-details[open] summary::before { transform: rotate(90deg); } .cost-breakdown { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .cost-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; } .cost-api { color: var(--muted); text-transform: capitalize; } .cost-api-value { color: var(--text); font-weight: 500; } .cost-empty { color: var(--muted); font-size: 12.5px; font-style: italic; padding-top: 4px; } /* ── AKTIVITETSFEED ── */ .activity-feed { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .activity-item { display: flex; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--border); align-items: center; } .activity-item:first-child { border-top: none; } .activity-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; color: var(--accent); } .activity-body { flex: 1; min-width: 0; } .activity-who { font-size: 13.5px; color: var(--text); font-weight: 500; } .activity-what { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .activity-when { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; } .activity-dismiss { background: transparent; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: all 0.15s; flex-shrink: 0; line-height: 1; } .activity-dismiss:hover { color: var(--red); background: rgba(220, 38, 38, 0.1); } .activity-empty { color: var(--muted); font-size: 13px; font-style: italic; padding: 14px 2px; } /* Stale-badge removed — synk fungerar nu via untrackning + healer-check */