/* ========================================= NOC Board – Kiosk v2 (SaaS + Broadview) ========================================= */ /* Temavariabler för kiosk (dark mode, SaaS + Broadview) */ :root { --kiosk-bg: #020617; /* djup mörk bakgrund */ --kiosk-bg-alt: #0f172a; /* mörk blå-grå */ --kiosk-card-bg: #0b1220; /* kortbakgrund */ --kiosk-card-bg-alt: #020617; /* subtil kontrast */ --kiosk-border-soft: rgba(148, 163, 184, 0.15); --kiosk-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.75); --kiosk-text-main: #e5e7eb; --kiosk-text-muted: #9ca3af; --kiosk-accent: #3b82f6; /* Broadview-blå inspirerad */ --kiosk-accent-soft: rgba(59, 130, 246, 0.14); --kiosk-ok: #22c55e; --kiosk-ok-bg: rgba(34, 197, 94, 0.12); --kiosk-planned: #3b82f6; --kiosk-planned-bg: rgba(59, 130, 246, 0.14); --kiosk-warning: #f59e0b; --kiosk-warning-bg: rgba(245, 158, 11, 0.16); --kiosk-critical: #ef4444; --kiosk-critical-bg: rgba(239, 68, 68, 0.18); } /* Aktivera kiosktema genom att lägga class="noc-kiosk" på eller wrappern */ .noc-kiosk { min-height: 100vh; margin: 0; padding: 0; background: radial-gradient(circle at top, rgba(59, 130, 246, 0.16), transparent 55%), radial-gradient(circle at bottom, rgba(37, 99, 235, 0.10), transparent 55%), var(--kiosk-bg); color: var(--kiosk-text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; /* kiosk = ingen scroll om vi kan undvika det */ } /* Dölj topbar i kioskläge */ .noc-kiosk .topbar { display: none; } /* Fullskärmscontainer för NOC */ .noc-kiosk .noc-container { max-width: 1920px; margin: 0 auto; padding: 24px 32px 32px; box-sizing: border-box; } /* Huvudheader – NOC rubrik + tid/uppdatering */ .noc-kiosk .noc-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .noc-kiosk .noc-header-title { font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; color: #e5e7eb; } .noc-kiosk .noc-header-sub { font-size: 13px; color: var(--kiosk-text-muted); } /* Subtil separator under header */ .noc-kiosk .noc-header-line { height: 1px; margin: 4px 0 20px; background: linear-gradient( 90deg, rgba(148, 163, 184, 0.0), rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.0) ); } /* Grid-layout för kundkort */ .noc-kiosk .noc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; } /* Kundkort – mjuka, SaaS-iga */ .noc-kiosk .noc-card { position: relative; background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), var(--kiosk-card-bg)); border-radius: 18px; border: 1px solid var(--kiosk-border-soft); box-shadow: var(--kiosk-shadow-soft); padding: 16px 16px 14px; box-sizing: border-box; overflow: hidden; transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out; } .noc-kiosk .noc-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(148, 163, 184, 0.14), transparent 40% ); opacity: 0.14; pointer-events: none; } .noc-kiosk .noc-card:hover { transform: translateY(-1px); box-shadow: 0 22px 55px rgba(15, 23, 42, 0.95); border-color: rgba(148, 163, 184, 0.35); } /* Critical-kort – subtil glow */ .noc-kiosk .noc-card.critical { border-color: rgba(239, 68, 68, 0.55); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45), 0 24px 60px rgba(127, 29, 29, 0.7); } .noc-kiosk .noc-card.critical::after { content: ""; position: absolute; inset: -20px; background: radial-gradient(circle at top, rgba(239, 68, 68, 0.25), transparent 70%); opacity: 0.35; pointer-events: none; } /* Kundnamn + statusrad */ .noc-kiosk .noc-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .noc-kiosk .noc-card-title { font-size: 15px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; color: #f9fafb; } .noc-kiosk .noc-card-meta { font-size: 12px; color: var(--kiosk-text-muted); } /* Status badges – SaaS-style pills */ .noc-kiosk .status-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .noc-kiosk .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; border: 1px solid transparent; } /* OK */ .noc-kiosk .status-pill.ok { background: var(--kiosk-ok-bg); color: var(--kiosk-ok); border-color: rgba(34, 197, 94, 0.3); } /* Planned */ .noc-kiosk .status-pill.planned { background: var(--kiosk-planned-bg); color: var(--kiosk-planned); border-color: rgba(59, 130, 246, 0.35); } /* Warning */ .noc-kiosk .status-pill.warning { background: var(--kiosk-warning-bg); color: var(--kiosk-warning); border-color: rgba(245, 158, 11, 0.4); } /* Critical */ .noc-kiosk .status-pill.critical { background: var(--kiosk-critical-bg); color: var(--kiosk-critical); border-color: rgba(239, 68, 68, 0.55); } /* Liten “count” i pillen, t.ex. CRITICAL · 2 */ .noc-kiosk .status-pill-count { opacity: 0.85; } /* Task-lista i kortet */ .noc-kiosk .noc-task-list { list-style: none; margin: 0; padding: 6px 0 0; } .noc-kiosk .noc-task-item { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 4px 0; color: var(--kiosk-text-main); } .noc-kiosk .noc-task-title { padding-right: 10px; } .noc-kiosk .noc-task-meta { font-size: 11px; color: var(--kiosk-text-muted); white-space: nowrap; } /* Svag divider mellan taskar */ .noc-kiosk .noc-task-item + .noc-task-item { border-top: 1px solid rgba(148, 163, 184, 0.16); } /* Global text-toning i kiosk */ .noc-kiosk .muted { color: var(--kiosk-text-muted); } /* Länkar – diskreta i kiosk */ .noc-kiosk a { color: var(--kiosk-accent-soft); text-decoration: none; } .noc-kiosk a:hover { color: var(--kiosk-accent); } /* Kioskvänliga typsnittsstorlekar – ingen pyttetext */ .noc-kiosk, .noc-kiosk .noc-container { font-size: 14px; } /* Valfritt: kritiskt “larmläge” för hela vyn (lägg .noc-has-critical på body/wrapper) */ .noc-kiosk.noc-has-critical { background: radial-gradient(circle at top, rgba(239, 68, 68, 0.18), transparent 55%), radial-gradient(circle at bottom, rgba(15, 23, 42, 0.9), transparent 55%), var(--kiosk-bg); } /* ----------------------------- Badge-override endast i kiosk (så Broadview Work kan fortsätta använda sina ljusa badges) ----------------------------- */ .noc-kiosk .badge { background: rgba(15, 23, 42, 0.75); color: var(--kiosk-text-main); border-radius: 999px; padding: 4px 10px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } /* Om du vill återanvända befintliga status-klasser: */ .noc-kiosk .badge.planned { background: var(--kiosk-planned-bg); color: var(--kiosk-planned); } .noc-kiosk .badge.in_progress { background: var(--kiosk-warning-bg); color: var(--kiosk-warning); } .noc-kiosk .badge.done { background: var(--kiosk-ok-bg); color: var(--kiosk-ok); } .noc-kiosk .badge.failed, .noc-kiosk .badge.overdue { background: var(--kiosk-critical-bg); color: var(--kiosk-critical); } .noc-kiosk.v2 .noc-card { border-radius: 22px; box-shadow: 0 16px 40px rgba(0,0,0,0.45); } /* === NOC Kiosk v2 ============================================ */ body.kiosk-mode--v2 header, body.kiosk-mode--v2 .topbar, body.kiosk-mode--v2 .main-header, body.kiosk-mode--v2 .nav-main, body.kiosk-mode--v2 .sidebar, body.kiosk-mode--v2 .app-header { display: none !important; } body.kiosk-mode--v2 { margin: 0; background: #111318; color: #f7f7f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Root */ body.kiosk-mode--v2 .kiosk-root { position: fixed; inset: 0; padding: 16px 24px 24px 24px; background: radial-gradient(circle at top left, #20242f 0, #111318 55%, #07080b 100%); box-sizing: border-box; overflow: auto; } /* Header */ body.kiosk-mode--v2 .kiosk-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; } body.kiosk-mode--v2 .kiosk-title { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fdfdfd; } body.kiosk-mode--v2 .kiosk-subtitle { font-size: 0.9rem; color: #a8b0c2; margin-top: 4px; } /* Pills */ body.kiosk-mode--v2 .kiosk-pills { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; } body.kiosk-mode--v2 .pill { padding: 4px 10px; border-radius: 999px; border: 1px solid #383f56; background: rgba(8, 11, 18, 0.7); color: #c9d0e3; display: inline-flex; align-items: center; gap: 6px; } body.kiosk-mode--v2 .pill-failed { border-color: #e74c3c; background: rgba(231, 76, 60, 0.12); color: #f2b2aa; } body.kiosk-mode--v2 .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #4cd137; } body.kiosk-mode--v2 .pill-dot-failed { background: #e74c3c; } /* Grid + cards */ body.kiosk-mode--v2 .kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: stretch; } body.kiosk-mode--v2 .kiosk-card { border-radius: 20px; padding: 14px 16px; background: linear-gradient(145deg, rgba(23, 28, 40, 0.97), rgba(9, 11, 18, 0.98)); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; min-height: 150px; border: 1px solid rgba(255, 255, 255, 0.04); } body.kiosk-mode--v2 .kiosk-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } body.kiosk-mode--v2 .kiosk-customer-name { font-size: 1.1rem; font-weight: 600; color: #f8f9fb; } body.kiosk-mode--v2 .kiosk-customer-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9ba4c0; } /* Task rows */ /* Task-container per kund: nu horisontella kort som kan radbrytas */ body.kiosk-mode--v2 .kiosk-card-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Varje task blir ett eget kort */ body.kiosk-mode--v2 .task-row { /* som ovan + lite “bouncy” känsla */ transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out; border: 1px solid rgba(255, 255, 255, 0.06); } body.kiosk-mode--v2 .task-icon { font-size: 1.6rem; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(0,0,0,0.45)); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.85); margin-right: 4px; } body.kiosk-mode--v2 .task-when { font-size: 0.78rem; color: #9ea6c0; white-space: nowrap; } body.kiosk-mode--v2 .task-main { min-width: 0; } body.kiosk-mode--v2 .task-title { font-size: 0.9rem; font-weight: 500; color: #f4f5f7; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } body.kiosk-mode--v2 .task-meta { font-size: 0.75rem; color: #a4adc3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Status + prio chips */ body.kiosk-mode--v2 .status-chip { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid rgba(255, 255, 255, 0.12); color: #e5e7ed; background: rgba(19, 23, 34, 0.9); } body.kiosk-mode--v2 .status-planned { border-color: #f1c40f; background: rgba(241, 196, 15, 0.08); color: #f7dc6f; } body.kiosk-mode--v2 .status-in-progress { border-color: #2ecc71; background: rgba(46, 204, 113, 0.09); color: #a9dfbf; } body.kiosk-mode--v2 .status-failed { border-color: #e74c3c; background: rgba(231, 76, 60, 0.12); color: #f5b7b1; } body.kiosk-mode--v2 .status-done { border-color: #3498db; background: rgba(52, 152, 219, 0.12); color: #aed6f1; } body.kiosk-mode--v2 .prio-chip { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.12); color: #cfd4e4; background: rgba(12, 16, 26, 0.9); margin-left: 4px; } body.kiosk-mode--v2 .prio-high { border-color: #e74c3c; background: rgba(231, 76, 60, 0.2); color: #f5b7b1; } body.kiosk-mode--v2 .prio-low { border-color: #7f8c8d; background: rgba(127, 140, 141, 0.2); color: #d5dbdb; } /* Empty state */ body.kiosk-mode--v2 .kiosk-empty { margin-top: 40px; text-align: center; color: #8d96ac; font-size: 1rem; } /* === NOC Kiosk v2 ============================================ */ body.kiosk-mode--v2 .topbar { display: none !important; } body.kiosk-mode--v2 { margin: 0; background: #111318; color: #f7f7f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.kiosk-mode--v2 .kiosk-root { position: fixed; inset: 0; padding: 16px 24px 24px 24px; background: radial-gradient(circle at top left, #20242f 0, #111318 55%, #07080b 100%); box-sizing: border-box; overflow: auto; } /* ...resten av kiosk-CSS:en (kiosk-header, kiosk-grid, kiosk-card, etc.)... */ /* Göm ”vanliga” topbars/navs i layouten i kioskläge */ body.kiosk-mode--v2 header, body.kiosk-mode--v2 .topbar, body.kiosk-mode--v2 .main-header, body.kiosk-mode--v2 .nav-main, body.kiosk-mode--v2 .sidebar, body.kiosk-mode--v2 .app-header { display: none !important; } body.kiosk-mode--v2 { margin: 0; background: #111318; color: #f7f7f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.kiosk-mode--v2 .kiosk-root { position: fixed; inset: 0; padding: 16px 24px 24px 24px; background: radial-gradient(circle at top left, #20242f 0, #111318 55%, #07080b 100%); box-sizing: border-box; overflow: auto; } body.kiosk-mode--v2 .kiosk-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; } body.kiosk-mode--v2 .kiosk-title { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fdfdfd; } body.kiosk-mode--v2 .kiosk-subtitle { font-size: 0.9rem; color: #a8b0c2; margin-top: 4px; } body.kiosk-mode--v2 .kiosk-pills { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; } body.kiosk-mode--v2 .pill { padding: 4px 10px; border-radius: 999px; border: 1px solid #383f56; background: rgba(8, 11, 18, 0.7); color: #c9d0e3; display: inline-flex; align-items: center; gap: 6px; } body.kiosk-mode--v2 .pill-failed { border-color: #e74c3c; background: rgba(231, 76, 60, 0.12); color: #f2b2aa; } body.kiosk-mode--v2 .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #4cd137; } body.kiosk-mode--v2 .pill-dot-failed { background: #e74c3c; } body.kiosk-mode--v2 .kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: stretch; } body.kiosk-mode--v2 .kiosk-card { border-radius: 16px; padding: 12px 14px; background: linear-gradient(145deg, rgba(23, 28, 40, 0.95), rgba(9, 11, 18, 0.94)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 35px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; min-height: 150px; } body.kiosk-mode--v2 .kiosk-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } body.kiosk-mode--v2 .kiosk-customer-name { font-size: 1.1rem; font-weight: 600; color: #f8f9fb; } body.kiosk-mode--v2 .kiosk-customer-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9ba4c0; } body.kiosk-mode--v2 .kiosk-card-body { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } body.kiosk-mode--v2 .task-row:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.12); } body.kiosk-mode--v2 .task-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; } body.kiosk-mode--v2 .task-when { font-size: 0.78rem; color: #9ea6c0; white-space: nowrap; } body.kiosk-mode--v2 .task-main { min-width: 0; } body.kiosk-mode--v2 .task-title { font-size: 0.9rem; font-weight: 500; color: #f4f5f7; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } body.kiosk-mode--v2 .task-meta { font-size: 0.75rem; color: #a4adc3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } body.kiosk-mode--v2 .status-chip { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid rgba(255, 255, 255, 0.12); color: #e5e7ed; background: rgba(19, 23, 34, 0.9); } body.kiosk-mode--v2 .status-planned { border-color: #f1c40f; background: rgba(241, 196, 15, 0.08); color: #f7dc6f; } body.kiosk-mode--v2 .status-in-progress { border-color: #2ecc71; background: rgba(46, 204, 113, 0.09); color: #a9dfbf; } body.kiosk-mode--v2 .status-failed { border-color: #e74c3c; background: rgba(231, 76, 60, 0.12); color: #f5b7b1; } body.kiosk-mode--v2 .status-done { border-color: #3498db; background: rgba(52, 152, 219, 0.12); color: #aed6f1; } body.kiosk-mode--v2 .prio-chip { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.12); color: #cfd4e4; background: rgba(12, 16, 26, 0.9); margin-left: 4px; } body.kiosk-mode--v2 .prio-high { border-color: #e74c3c; background: rgba(231, 76, 60, 0.2); color: #f5b7b1; } body.kiosk-mode--v2 .prio-low { border-color: #7f8c8d; background: rgba(127, 140, 141, 0.2); color: #d5dbdb; } body.kiosk-mode--v2 .kiosk-empty { margin-top: 40px; text-align: center; color: #8d96ac; font-size: 1rem; } /* === NOC Kiosk v2 ============================================ */ /* Göm topbar & krom i kioskläge */ body.kiosk-mode--v2 header, body.kiosk-mode--v2 .topbar, body.kiosk-mode--v2 .main-header, body.kiosk-mode--v2 .nav-main, body.kiosk-mode--v2 .sidebar, body.kiosk-mode--v2 .app-header { display: none !important; } /* Grund för kroppen i kioskläge */ body.kiosk-mode--v2 { margin: 0; background: #111318; color: #f7f7f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Root tar hela ytan */ body.kiosk-mode--v2 .kiosk-root { position: fixed; inset: 0; padding: 16px 24px 24px 24px; background: radial-gradient(circle at top left, #20242f 0, #111318 55%, #07080b 100%); box-sizing: border-box; overflow: auto; } /* Header */ body.kiosk-mode--v2 .kiosk-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; } body.kiosk-mode--v2 .kiosk-title { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fdfdfd; } body.kiosk-mode--v2 .kiosk-subtitle { font-size: 0.9rem; color: #a8b0c2; margin-top: 4px; } /* Pills */ body.kiosk-mode--v2 .kiosk-pills { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; } body.kiosk-mode--v2 .pill { padding: 4px 10px; border-radius: 999px; border: 1px solid #383f56; background: rgba(8, 11, 18, 0.7); color: #c9d0e3; display: inline-flex; align-items: center; gap: 6px; } body.kiosk-mode--v2 .pill-failed { border-color: #e74c3c; background: rgba(231, 76, 60, 0.12); color: #f2b2aa; } body.kiosk-mode--v2 .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #4cd137; } body.kiosk-mode--v2 .pill-dot-failed { background: #e74c3c; } /* Grid + cards */ body.kiosk-mode--v2 .kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: stretch; } body.kiosk-mode--v2 .kiosk-card { border-radius: 16px; padding: 12px 14px; background: linear-gradient(145deg, rgba(23, 28, 40, 0.95), rgba(9, 11, 18, 0.94)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 35px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; min-height: 150px; } body.kiosk-mode--v2 .kiosk-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } body.kiosk-mode--v2 .kiosk-customer-name { font-size: 1.1rem; font-weight: 600; color: #f8f9fb; } body.kiosk-mode--v2 .kiosk-customer-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9ba4c0; } /* Task rows */ body.kiosk-mode--v2 .kiosk-card-body { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } body.kiosk-mode--v2 .task-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 10px; background: rgba(4, 6, 12, 0.65); } body.kiosk-mode--v2 .task-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; } body.kiosk-mode--v2 .task-when { font-size: 0.78rem; color: #9ea6c0; white-space: nowrap; } body.kiosk-mode--v2 .task-main { min-width: 0; } body.kiosk-mode--v2 .task-title { font-size: 0.9rem; font-weight: 500; color: #f4f5f7; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } body.kiosk-mode--v2 .task-meta { font-size: 0.75rem; color: #a4adc3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Status + prio chips */ body.kiosk-mode--v2 .status-chip { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid rgba(255, 255, 255, 0.12); color: #e5e7ed; background: rgba(19, 23, 34, 0.9); } body.kiosk-mode--v2 .status-planned { border-color: #f1c40f; background: rgba(241, 196, 15, 0.08); color: #f7dc6f; } body.kiosk-mode--v2 .status-in-progress { border-color: #2ecc71; background: rgba(46, 204, 113, 0.09); color: #a9dfbf; } body.kiosk-mode--v2 .status-failed { border-color: #e74c3c; background: rgba(231, 76, 60, 0.12); color: #f5b7b1; } body.kiosk-mode--v2 .status-done { border-color: #3498db; background: rgba(52, 152, 219, 0.12); color: #aed6f1; } body.kiosk-mode--v2 .prio-chip { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.12); color: #cfd4e4; background: rgba(12, 16, 26, 0.9); margin-left: 4px; } body.kiosk-mode--v2 .prio-high { border-color: #e74c3c; background: rgba(231, 76, 60, 0.2); color: #f5b7b1; } body.kiosk-mode--v2 .prio-low { border-color: #7f8c8d; background: rgba(127, 140, 141, 0.2); color: #d5dbdb; } /* Empty state */ body.kiosk-mode--v2 .kiosk-empty { margin-top: 40px; text-align: center; color: #8d96ac; font-size: 1rem; } /* Liten container för status + prio så det blir snyggt i kortet */ body.kiosk-mode--v2 .task-row .task-status-wrapper { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } body.kiosk-mode--v2 .task-meta .task-recurring { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: #cfd4e4; }