/* ContSoft Management UI Matches the ContSoft design language (Inter, brand colors, soft cards) */ /* WP-12a: no third-party font request from an admin console. The CSP is `default-src 'none'` with `font-src 'self'`, so a Google Fonts @import would be blocked anyway - and a console that reaches out to a CDN on every load is a tracking surface we do not need. The system stack below is metrically close to Inter and needs no download at all, which also removes the FOUT this file used to have (CLAUDE.md: `font-display: optional`, never `swap`). */ :root { color-scheme: light dark; --brand-red: #e00102; --brand-red-hover: #c40102; --brand-red-light: #fef2f2; --bg-primary: #ffffff; --bg-secondary: #f7f7f7; --bg-tertiary: #f2f2f2; --bg-elevated: #ffffff; --text-primary: #1c1c1c; --text-secondary: #505050; --text-tertiary: #7a7a7a; --border-color: #e5e5e5; --border-hover: #c2c2c2; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --accent-primary: var(--brand-red); --accent-primary-light: var(--brand-red-light); --accent-green: #35c14e; --accent-green-light: #ecfdf5; --accent-blue: #2563eb; --accent-blue-hover: #1d4ed8; --accent-amber: #f59e0b; --accent-amber-light: rgba(245,158,11,0.15); --input-bg: #ffffff; --input-border: #d4d4d4; --input-focus-border: var(--brand-red); --input-focus-ring: rgba(224,1,2,0.12); } @media (prefers-color-scheme: dark) { :root { --bg-primary: #1a1a1a; --bg-secondary: #0f0f0f; --bg-tertiary: #262626; --bg-elevated: #262626; --text-primary: #f5f5f5; --text-secondary: #a3a3a3; --text-tertiary: #737373; --border-color: #363636; --border-hover: #525252; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); --accent-primary-light: rgba(224,1,2,0.15); --accent-green: #4ade80; --accent-green-light: rgba(34,197,94,0.15); --accent-blue: #3b82f6; --accent-blue-hover: #2563eb; --accent-amber-light: rgba(245,158,11,0.18); --input-bg: #262626; --input-border: #404040; --input-focus-ring: rgba(224,1,2,0.2); } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { /* Release the boot gate that every management template opens inline in . This file is the LAST stylesheet each of them links, so the document is revealed only once its real layout has arrived. See CLAUDE.md -> "No load flash". */ visibility: visible; animation: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg-secondary); min-height: 100vh; color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.6; font-weight: 400; letter-spacing: -0.011em; } /* App Frame */ .app-frame { min-height: 100vh; display: flex; flex-direction: column; } .app-surface { flex: 1; background: var(--bg-primary); position: relative; border-bottom: 1px solid var(--border-color); } .app-surface::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-red); } .app-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 22px 26px 26px; } /* Shell Header */ .shell-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--border-color); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 6px var(--accent-primary-light); flex-shrink: 0; } .brand-title strong { font-size: 14px; letter-spacing: -0.01em; color: var(--text-primary); } .brand-title span { font-size: 12px; color: var(--text-tertiary); } .header-actions { display: flex; gap: 8px; align-items: center; } /* Navigation Tabs */ .nav-tabs { overflow: hidden; display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--border-color); padding-bottom: 0; } .nav-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s ease; white-space: nowrap; margin-bottom: -1px; } .nav-tab:hover { color: var(--text-primary); background: none; transform: none; box-shadow: none; } .nav-tab.active { color: var(--brand-red); border-bottom-color: var(--brand-red); } .nav-tab svg { width: 16px; height: 16px; flex-shrink: 0; } /* Page Views */ .view { display: none; } .view.active { display: block; } /* Page Header */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .page-title h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .page-title p { font-size: 13px; color: var(--text-secondary); margin: 2px 0 0 0; } /* KPI Grid */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; } .kpi { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-elevated); box-shadow: var(--shadow-sm); } .kpi .label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .kpi .value { margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Buttons */ .btn { font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: none; background: var(--brand-red); color: white; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--brand-red-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(224,1,2,0.35); } .btn:active { transform: translateY(0); box-shadow: none; } .btn.secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 2px solid var(--border-color); } .btn.secondary:hover { border-color: var(--brand-red); color: var(--brand-red); background: var(--accent-primary-light); box-shadow: none; } .btn.blue { background: var(--accent-blue); } .btn.blue:hover { background: var(--accent-blue-hover); box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.18)); } .btn.green { background: var(--accent-green); } .btn.green:hover { background: #2da343; box-shadow: 0 4px 12px rgba(53,193,78,0.35); } .btn.small { padding: 8px 14px; font-size: 13px; } .btn svg { width: 16px; height: 16px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Panel */ .panel { border: 1px solid var(--border-color); background: var(--bg-elevated); border-radius: 12px; overflow: visible; box-shadow: var(--shadow-sm); margin-bottom: 20px; } .panel-header { padding: 14px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .panel-header h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; } .panel-body { padding: 20px; } /* Table */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); white-space: nowrap; } td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); vertical-align: middle; color: var(--text-primary); } tr:hover td { background: var(--bg-tertiary); } tr:last-child td { border-bottom: none; } /* Pills */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); white-space: nowrap; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); } .pill.green { background: var(--accent-green-light); border-color: rgba(53,193,78,0.35); color: var(--text-primary); } .pill.green .dot { background: var(--accent-green); } .pill.red { background: var(--accent-primary-light); border-color: rgba(224,1,2,0.25); color: var(--text-primary); } .pill.red .dot { background: var(--brand-red); } .pill.amber { background: var(--accent-amber-light); border-color: rgba(245,158,11,0.35); color: var(--text-primary); } .pill.amber .dot { background: var(--accent-amber); } .pill.blue { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.25); color: var(--text-primary); } .pill.blue .dot { background: var(--accent-blue); } .pill.purple { background: rgba(147,51,234,0.08); border-color: rgba(147,51,234,0.25); color: var(--text-primary); } .pill.purple .dot { background: #9333ea; } /* Forms */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .form-grid.cols-1 { grid-template-columns: 1fr; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } input, textarea, select { font-family: inherit; font-size: 14px; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); transition: all 0.15s ease; outline: none; -webkit-appearance: none; appearance: none; } input:hover, select:hover { border-color: var(--border-hover); } input:focus, select:focus { border-color: var(--input-focus-border); box-shadow: 0 0 0 3px var(--input-focus-ring); } input::placeholder { color: var(--text-tertiary); } .form-actions { display: flex; gap: 10px; margin-top: 8px; justify-content: flex-end; } .form-full { grid-column: 1 / -1; } .create-setting-row { padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-tertiary); } .create-switch { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; cursor: pointer; text-transform: none; letter-spacing: 0; } .create-switch input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .create-switch-track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--bg-primary); border: 1px solid var(--border-color); transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .create-switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform 0.16s ease, border-color 0.16s ease; } .create-switch input[type="checkbox"]:checked + .create-switch-track { background: var(--brand-red); border-color: var(--brand-red); box-shadow: 0 0 0 4px var(--accent-primary-light); } .create-switch input[type="checkbox"]:checked + .create-switch-track .create-switch-knob { transform: translateX(22px); border-color: rgba(255,255,255,0.45); } .create-switch input[type="checkbox"]:focus-visible + .create-switch-track { outline: 2px solid var(--brand-red); outline-offset: 3px; } .create-setting-copy { display: flex; flex-direction: column; gap: 4px; } .create-setting-copy strong { color: var(--text-primary); font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; } .create-setting-copy span { color: var(--text-secondary); font-size: 13px; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: 0; } /* Color input */ input[type="color"] { width: 44px; height: 38px; padding: 4px; cursor: pointer; } .color-row { display: flex; gap: 10px; align-items: center; } .color-row input[type="text"] { flex: 1; } /* Alerts */ .alert { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px; margin-bottom: 16px; } .alert.success { background: var(--accent-green-light); border-color: rgba(34,197,94,0.35); } .alert.error { background: var(--accent-primary-light); border-color: rgba(224,1,2,0.35); color: var(--brand-red); } .alert.info { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.25); } /* Tenant Detail */ .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .detail-item .detail-label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .detail-item .detail-value { font-size: 15px; font-weight: 500; color: var(--text-primary); word-break: break-all; } .detail-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color); flex-wrap: wrap; } /* Clickable rows */ tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--accent-primary-light); } /* Log/output */ .log-output { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; color: var(--text-secondary); } /* Backup list */ .backup-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color); gap: 12px; } .backup-item:last-child { border-bottom: none; } .backup-name { font-size: 13px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; word-break: break-all; flex: 1; } .backup-meta { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; } /* Modal overlay */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.active { display: flex; } .modal { background: var(--bg-primary); border-radius: 16px; border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .modal-header h3 { font-size: 18px; font-weight: 700; margin: 0; } .modal-close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 4px; font-size: 20px; line-height: 1; } .modal-close:hover { color: var(--text-primary); transform: none; box-shadow: none; } .modal-body { padding: 24px; } /* Spinner */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Progress steps */ .progress-step { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); } .progress-step:last-child { border-bottom: none; } .progress-step .step-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-spinner { width: 18px; height: 18px; border: 2px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } .progress-step.done { color: var(--text-primary); } .progress-step.done .step-icon { color: #22c55e; font-weight: bold; } .progress-step.error .step-icon { color: #ef4444; font-weight: bold; } .progress-step.error { color: #ef4444; } /* Footer */ .footer { text-align: center; padding: 24px 0 8px; font-size: 12px; color: var(--text-tertiary); } .footer--app { background: var(--bg-primary); border-top: 1px solid var(--border-color); padding: 14px 0 18px; } /* Mono */ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-variant-numeric: tabular-nums; } /* Spacer */ .spacer { height: 16px; } /* Loading */ .loading-text { text-align: center; padding: 40px; color: var(--text-tertiary); font-size: 14px; } /* Empty state */ .empty-state { text-align: center; padding: 40px 24px; color: var(--text-tertiary); } .empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } /* Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .panel { animation: fadeIn 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .panel { animation: none; } } /* Mobile responsive */ @media (hover: none) and (pointer: coarse) { input, textarea, select { font-size: 16px; } } @supports (padding: env(safe-area-inset-bottom)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .footer--app { padding-bottom: calc(18px + env(safe-area-inset-bottom)); } } @media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .form-grid { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .shell-header { flex-direction: column; align-items: flex-start; gap: 10px; } .app-inner { padding: 14px 12px; } .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi { padding: 12px 14px; } .kpi .value { font-size: 18px; } .page-header { flex-direction: column; align-items: flex-start; gap: 10px; } .nav-tab { padding: 8px 12px; font-size: 12px; } .detail-actions { flex-direction: column; } .detail-actions .btn { width: 100%; } .btn { min-height: 44px; } table { min-width: 600px; } } @media (max-width: 374px) { .app-inner { padding: 10px 8px; } .kpi-grid { grid-template-columns: 1fr; } } /* ========================================================================== Tickets (V2-F25 / V2-F26) — the Jegyek tab. Same tokens as the rest of the console. A selected row / sub-tab is marked by a background tint plus its all-round border — never a one-sided rail (CLAUDE.md → "No accent bar"). No blurred brand-tinted shadows anywhere. ========================================================================== */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .nav-badge[hidden] { display: none; } .tk-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tk-subtab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-elevated); color: var(--text-secondary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .tk-subtab:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-tertiary); transform: none; box-shadow: none; } .tk-subtab.active { background: var(--accent-primary-light); border-color: var(--brand-red); color: var(--text-primary); } .tk-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .tk-subtab.active .tk-count { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } .tk-filters { display: grid; grid-template-columns: repeat(3, minmax(160px, 220px)); gap: 12px; margin-bottom: 16px; } .tk-filters .field[hidden] { display: none; } .tk-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; } .tk-list-panel, .tk-detail-panel { margin-bottom: 0; } .tk-list { display: flex; flex-direction: column; gap: 6px; min-height: 240px; max-height: calc(100vh - 340px); overflow-y: auto; padding: 8px; scrollbar-width: thin; } .tk-group { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .tk-row { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-elevated); color: var(--text-primary); font-family: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .tk-row:hover { background: var(--bg-tertiary); border-color: var(--border-hover); transform: none; box-shadow: none; } .tk-row.is-current { background: var(--accent-primary-light); border-color: var(--brand-red); } .tk-row-top { display: flex; gap: 8px; align-items: baseline; } .tk-row-id { flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--text-tertiary); } .tk-row.needs-attention .tk-row-id::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--brand-red); vertical-align: middle; } .tk-row-title { font-size: 14px; font-weight: 600; line-height: 1.35; } .tk-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tk-row-att { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); } .tk-row-att svg, .tk-attachments svg { width: 14px; height: 14px; flex-shrink: 0; } .tk-row-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-tertiary); } .tk-detail-body { padding: 20px; } .tk-detail-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .tk-detail-id { font-size: 12px; color: var(--text-tertiary); } .tk-detail-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; } .tk-detail-pills { display: flex; flex-wrap: wrap; gap: 6px; } .tk-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-tertiary); } .tk-meta .detail-value { font-size: 14px; word-break: break-word; } .tk-meta a { color: var(--accent-blue); text-decoration: none; } .tk-meta a:hover { text-decoration: underline; } .tk-section-title { margin: 18px 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .tk-desc { padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-elevated); font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .tk-attachments { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .tk-attachments li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-elevated); font-size: 13px; color: var(--text-tertiary); } .tk-attachments a { flex: 1; color: var(--accent-blue); font-weight: 600; text-decoration: none; word-break: break-all; } .tk-attachments a:hover { text-decoration: underline; } .tk-att-size { font-size: 12px; white-space: nowrap; } .tk-timeline { display: flex; flex-direction: column; gap: 14px; margin: 0 0 0 6px; padding: 2px 0 2px 18px; list-style: none; border-left: 2px solid var(--border-color); } .tk-event { position: relative; } .tk-event::before { content: ""; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-tertiary); border: 2px solid var(--bg-elevated); } .tk-event--tenant::before { background: var(--brand-red); } .tk-event--dev::before { background: var(--accent-blue); } .tk-event-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; } .tk-actor { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .tk-actor.tenant { color: var(--brand-red); border-color: rgba(224,1,2,0.25); background: var(--accent-primary-light); } .tk-actor.dev { color: var(--accent-blue); border-color: rgba(37,99,235,0.25); background: rgba(37,99,235,0.08); } .tk-stamp { margin-left: auto; font-size: 12px; color: var(--text-tertiary); } .tk-event-who { margin-top: 2px; font-size: 12px; color: var(--text-tertiary); } .tk-event-msg { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-tertiary); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .tk-event-hours { margin-top: 4px; font-size: 13px; font-weight: 600; } .tk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); } .tk-composer { margin-top: 12px; padding: 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-tertiary); } .tk-composer[hidden] { display: none; } .tk-composer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .tk-composer-hint { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); } .tk-composer .field { margin-bottom: 12px; } .tk-composer textarea, .tk-composer input, .tk-composer select { width: 100%; } .tk-composer textarea { resize: vertical; min-height: 96px; } @media (max-width: 900px) { .tk-layout { grid-template-columns: 1fr; } .tk-filters { grid-template-columns: 1fr; } .tk-list { max-height: none; } } /* ============================================================ WP-12a — login, TOTP enrolment, and the "Hozzáférés" view. Moved out of the templates: the console's CSP carries no `unsafe-inline` for scripts, and the only inline