/* ============================================ DecisionTrack - Decision Management System Clean, Professional UI ============================================ */ /* ============================================ 132 Decision — Theme System Three themes: dark (default), ember, slate Switch by setting data-theme on ============================================ */ /* ── DARK (default) ── */ :root, [data-theme="dark"] { --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', 'Fira Code', monospace; --font-display: 'Fraunces', serif; --color-bg: #0d1520; --color-bg-elevated: #111827; --color-bg-card: #1e293b; --color-border: rgba(255,255,255,0.07); --color-border-light: rgba(255,255,255,0.12); --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-faint: #475569; --color-primary: #3b82f6; --color-primary-hover: #60a5fa; --color-primary-faint: rgba(59,130,246,0.15); --color-success: #10b981; --color-success-faint: rgba(16,185,129,0.15); --color-warning: #f59e0b; --color-warning-faint: rgba(245,158,11,0.15); --color-danger: #ef4444; --color-danger-faint: rgba(239,68,68,0.15); --color-info: #3b82f6; --color-info-faint: rgba(59,130,246,0.15); --logo-accent: #60a5fa; --logo-bg-mid: #1e293b; --logo-bg-inner: #0d1520; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --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); --transition: 150ms ease; } /* ── EMBER (warm mid-tone) ── */ [data-theme="ember"] { --color-bg: #1a1610; --color-bg-elevated: #211d14; --color-bg-card: #2a2419; --color-border: rgba(255,220,160,0.08); --color-border-light: rgba(255,220,160,0.14); --color-text: #f5ead8; --color-text-muted: #a8956e; --color-text-faint: #6b5a3e; --color-primary: #e8852a; --color-primary-hover: #f0a050; --color-primary-faint: rgba(232,133,42,0.15); --color-success: #6dbf7a; --color-success-faint: rgba(109,191,122,0.15); --color-warning: #f0a050; --color-warning-faint: rgba(240,160,80,0.15); --color-danger: #d95f4b; --color-danger-faint: rgba(217,95,75,0.15); --color-info: #e8852a; --color-info-faint: rgba(232,133,42,0.12); --logo-accent: #f0a050; --logo-bg-mid: #2a2419; --logo-bg-inner: #1a1610; --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 8px 24px rgba(0,0,0,0.55); } /* ── SLATE (warm light) ── */ [data-theme="slate"] { --color-bg: #f4f1ec; --color-bg-elevated: #eae6e0; --color-bg-card: #ffffff; --color-border: rgba(0,0,0,0.09); --color-border-light: rgba(0,0,0,0.14); --color-text: #1a2332; --color-text-muted: #4a5568; --color-text-faint: #8a9bb0; --color-primary: #1d4ed8; --color-primary-hover: #2d5fd8; --color-primary-faint: rgba(29,78,216,0.1); --color-success: #0d7a4e; --color-success-faint: rgba(13,122,78,0.12); --color-warning: #c47c0a; --color-warning-faint: rgba(196,124,10,0.12); --color-danger: #c0392b; --color-danger-faint: rgba(192,57,43,0.1); --color-info: #1d4ed8; --color-info-faint: rgba(29,78,216,0.1); --logo-accent: #1d4ed8; --logo-bg-mid: #e8e4dc; --logo-bg-inner: #f4f1ec; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.14); } /* Reset & Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; transition: background 200ms ease, color 200ms ease; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-primary-hover); } /* ============================================ Navigation ============================================ */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 64px; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } .nav-brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 1.125rem; color: var(--color-text); } .nav-icon { width: 28px; height: 28px; color: var(--color-primary); } .nav-links { display: flex; gap: 0.5rem; } .nav-links a { padding: 0.5rem 1rem; border-radius: var(--radius-md); color: var(--color-text-muted); font-weight: 500; font-size: 0.875rem; transition: all var(--transition); } .nav-links a:hover { color: var(--color-text); background: var(--color-border); } .nav-links a.active { color: var(--color-primary); background: var(--color-primary-faint); } .nav-user { display: flex; flex-direction: column; align-items: flex-end; } .user-name { font-weight: 600; font-size: 0.875rem; } .user-role { font-size: 0.75rem; color: var(--color-text-muted); } /* ============================================ Layout ============================================ */ .container { max-width: 1400px; margin: 0 auto; padding: 2rem; } .page-header { margin-bottom: 2rem; } .page-header h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; } .subtitle { color: var(--color-text-muted); font-size: 0.95rem; } .back-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 1rem; } .back-link:hover { color: var(--color-primary); } /* ============================================ Stats Grid ============================================ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; } .stat-value { font-size: 2.5rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; } .stat-label { font-size: 0.875rem; color: var(--color-text-muted); } .stat-pending .stat-value { color: var(--color-warning); } .stat-approved .stat-value { color: var(--color-success); } .stat-rejected .stat-value { color: var(--color-danger); } /* ============================================ Sections & Cards ============================================ */ .section { margin-bottom: 2rem; } .section-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; } .pulse-dot { width: 10px; height: 10px; background: var(--color-warning); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; } .card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .card-description { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 1.5rem; } /* ============================================ Decision Cards & List ============================================ */ .decision-list { display: flex; flex-direction: column; gap: 1rem; } .decision-card { display: block; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; transition: all var(--transition); border-left: 3px solid transparent; } .decision-card:hover { border-color: var(--color-border-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .decision-card.priority-urgent { border-left-color: var(--color-danger); } .decision-card.priority-high { border-left-color: var(--color-warning); } .decision-card.priority-normal { border-left-color: var(--color-info); } .decision-card.priority-low { border-left-color: var(--color-text-muted); } .decision-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .decision-number { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); background: var(--color-border); padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); } .decision-type { font-size: 0.75rem; color: var(--color-text-muted); } .decision-title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; } .decision-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 1rem; } .decision-progress { display: flex; align-items: flex-start; gap: 0.5rem; } .progress-step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 60px; } .step-indicator { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; background: var(--color-border); color: var(--color-text-muted); } .status-completed .step-indicator { background: var(--color-success); color: white; } .status-pending .step-indicator { background: var(--color-warning); color: white; animation: pulse 2s infinite; } .status-rejected .step-indicator { background: var(--color-danger); color: white; } .step-name { font-size: 0.7rem; color: var(--color-text-muted); } /* ============================================ Decision Table ============================================ */ .decision-table-wrapper { overflow-x: auto; } .decision-table { width: 100%; border-collapse: collapse; } .decision-table th, .decision-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); } .decision-table th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-bg-elevated); } .decision-table tbody tr { cursor: pointer; transition: background var(--transition); } .decision-table tbody tr:hover { background: var(--color-bg-elevated); } .mono { font-family: var(--font-mono); font-size: 0.85rem; } /* ============================================ Badges ============================================ */ .status-badge, .priority-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } .status-draft { background: var(--color-border); color: var(--color-text-muted); } .status-submitted { background: var(--color-info-faint); color: var(--color-info); } .status-in_review { background: var(--color-primary-faint); color: var(--color-primary); } .status-pending_approval { background: var(--color-warning-faint); color: var(--color-warning); } .status-approved { background: var(--color-success-faint); color: var(--color-success); } .status-rejected { background: var(--color-danger-faint); color: var(--color-danger); } .status-deferred { background: var(--color-primary-faint); color: var(--color-primary); } .status-withdrawn { background: var(--color-border); color: var(--color-text-muted); } .priority-low { background: var(--color-border); color: var(--color-text-muted); } .priority-normal { background: var(--color-info-faint); color: var(--color-info); } .priority-high { background: var(--color-warning-faint); color: var(--color-warning); } .priority-urgent { background: var(--color-danger-faint); color: var(--color-danger); } /* ============================================ Forms ============================================ */ .decision-form { max-width: 800px; } .form-section { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; } .form-section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--color-text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem 1rem; font-size: 0.95rem; font-family: var(--font-sans); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-faint); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-text-faint); } .form-hint { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.375rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-actions { display: flex; gap: 1rem; justify-content: flex-end; padding-top: 1rem; } /* ============================================ Buttons ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; font-family: var(--font-sans); border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { background: var(--color-border); color: var(--color-text); } .btn-secondary:hover { background: var(--color-border-light); } .btn-success { background: var(--color-success); color: white; } .btn-success:hover { background: #0ea472; } .btn-danger { background: var(--color-danger); color: white; } .btn-danger:hover { background: #dc3636; } /* ============================================ Chain Preview ============================================ */ .chain-preview { padding: 1rem; background: var(--color-bg); border-radius: var(--radius-md); margin-bottom: 1rem; } .chain-preview .hint { color: var(--color-text-muted); font-size: 0.875rem; } .chain-visual { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; } .chain-step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 80px; } .chain-node { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; background: var(--color-border); color: var(--color-text); } .chain-initiator .chain-node { background: var(--color-primary); color: white; } .chain-reviewer .chain-node { background: var(--color-info-faint); border: 2px solid var(--color-info); color: var(--color-info); } .chain-approver .chain-node { background: var(--color-success-faint); border: 2px solid var(--color-success); color: var(--color-success); } .chain-label { font-size: 0.7rem; color: var(--color-text-muted); text-align: center; max-width: 80px; } .chain-role { font-size: 0.65rem; text-transform: uppercase; font-weight: 600; color: var(--color-text-faint); } .chain-arrow { color: var(--color-text-muted); font-size: 1.25rem; padding-top: 0.75rem; } .authority-info { font-size: 0.875rem; color: var(--color-text-muted); } .authority-info strong { color: var(--color-text); } /* ============================================ Decision Detail Page ============================================ */ .decision-header-main { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .decision-number-large { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text-muted); background: var(--color-border); padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); } .decision-meta-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.5rem; } .decision-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; } @media (max-width: 1024px) { .decision-layout { grid-template-columns: 1fr; } } .decision-main { min-width: 0; } .decision-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .description-text { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; } .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .info-item { display: flex; flex-direction: column; gap: 0.25rem; } .info-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .info-value { font-weight: 500; } /* ============================================ Approval Timeline ============================================ */ .approval-timeline { position: relative; padding-left: 2rem; } .approval-timeline::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--color-border); } .timeline-item { position: relative; padding-bottom: 1.5rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-marker { position: absolute; left: -2rem; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg-card); border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; } .timeline-marker svg { width: 14px; height: 14px; } .timeline-completed .timeline-marker { background: var(--color-success); border-color: var(--color-success); color: white; } .timeline-pending .timeline-marker { background: var(--color-warning); border-color: var(--color-warning); } .timeline-rejected .timeline-marker { background: var(--color-danger); border-color: var(--color-danger); color: white; } .pending-dot { width: 8px; height: 8px; background: white; border-radius: 50%; animation: pulse 2s infinite; } .waiting-dot { width: 8px; height: 8px; background: var(--color-text-muted); border-radius: 50%; } .timeline-content { padding-left: 0.5rem; } .timeline-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.125rem; } .timeline-role { font-size: 0.65rem; text-transform: uppercase; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); background: var(--color-border); color: var(--color-text-muted); } .timeline-role.reviewer { background: var(--color-info-faint); color: var(--color-info); } .timeline-role.approver { background: var(--color-success-faint); color: var(--color-success); } .timeline-subtitle { font-size: 0.8rem; color: var(--color-text-muted); } .timeline-time { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 0.25rem; } .timeline-comment { margin-top: 0.5rem; padding: 0.75rem 1rem; background: var(--color-bg); border-radius: var(--radius-md); font-size: 0.875rem; color: var(--color-text); display: flex; gap: 0.5rem; } .timeline-comment svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-text-muted); } .timeline-action { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.25rem; } .timeline-pending-label, .timeline-waiting-label { font-size: 0.8rem; font-weight: 500; margin-top: 0.5rem; } .timeline-pending-label { color: var(--color-warning); } .timeline-waiting-label { color: var(--color-text-faint); } /* ============================================ Action Card ============================================ */ .action-card { border: 2px solid var(--color-warning); background: linear-gradient(to bottom, var(--color-warning-faint), var(--color-bg-card)); } .action-card h2 { color: var(--color-warning); } .action-hint { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 1rem; } .action-buttons { display: flex; flex-direction: column; gap: 0.75rem; } .action-buttons .btn { width: 100%; justify-content: center; } /* ============================================ Info List (Sidebar) ============================================ */ .info-list { display: flex; flex-direction: column; gap: 0.75rem; } .info-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; } .info-row .info-label { color: var(--color-text-muted); font-size: 0.875rem; text-transform: none; letter-spacing: normal; } /* ============================================ Comments ============================================ */ .comments-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .comment { padding: 1rem; background: var(--color-bg); border-radius: var(--radius-md); } .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .comment-time { font-size: 0.75rem; color: var(--color-text-faint); } .comment-text { font-size: 0.875rem; color: var(--color-text); } .no-comments { color: var(--color-text-muted); font-size: 0.875rem; padding: 1rem; text-align: center; background: var(--color-bg); border-radius: var(--radius-md); margin-bottom: 1rem; } .comment-form { padding-top: 1rem; border-top: 1px solid var(--color-border); } /* ============================================ Audit Trail ============================================ */ .audit-list { display: flex; flex-direction: column; gap: 0.75rem; } .audit-item { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.8rem; } .audit-time { color: var(--color-text-faint); font-family: var(--font-mono); font-size: 0.7rem; } .audit-action { color: var(--color-text-muted); } /* ============================================ Fields List ============================================ */ .fields-list { display: flex; flex-direction: column; gap: 1rem; } .field-item { display: flex; flex-direction: column; gap: 0.25rem; } .field-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .field-value { font-size: 0.9rem; color: var(--color-text); } /* ============================================ Admin Panel ============================================ */ .admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; } .tab-btn { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; font-family: var(--font-sans); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition); } .tab-btn:hover { background: var(--color-bg-elevated); color: var(--color-text); } .tab-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: white; } .tab-content { display: none; } .tab-content.active { display: block; } .config-section { margin-bottom: 2rem; } .config-section h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-text-muted); } .config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .config-item { display: flex; flex-direction: column; gap: 0.25rem; } .config-label { font-size: 0.75rem; color: var(--color-text-muted); } .config-value { font-weight: 500; } .config-value.enabled { color: var(--color-success); } .config-value.disabled { color: var(--color-text-muted); } .priority-grid, .status-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; } .priority-item { display: flex; align-items: center; gap: 0.75rem; } .sla-info { font-size: 0.8rem; color: var(--color-text-muted); } .config-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .config-actions .hint { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } code { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-bg); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); } /* Admin Table */ .table-wrapper { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .admin-table th, .admin-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border); } .admin-table th { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-bg); } .small-text { font-size: 0.75rem; color: var(--color-text-muted); } .authority-badge { display: inline-block; padding: 0.125rem 0.5rem; font-size: 0.7rem; font-weight: 600; background: var(--color-primary-faint); color: var(--color-primary); border-radius: var(--radius-sm); } .permissions { display: flex; flex-wrap: wrap; gap: 0.25rem; } .perm-badge { font-size: 0.65rem; padding: 0.125rem 0.375rem; background: var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-sm); } .status-indicator { font-size: 0.75rem; font-weight: 500; } .status-indicator.active { color: var(--color-success); } .status-indicator.inactive { color: var(--color-text-muted); } /* Decision Types Grid */ .types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .type-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; } .type-card h3 { font-size: 1rem; margin-bottom: 0.5rem; } .type-description { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } .type-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .type-steps { font-size: 0.75rem; padding: 0.125rem 0.5rem; background: var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); } .assessment-badge { font-size: 0.65rem; padding: 0.125rem 0.5rem; background: var(--color-info-faint); color: var(--color-info); border-radius: var(--radius-sm); text-transform: uppercase; } .type-fields { font-size: 0.8rem; color: var(--color-text-muted); } .type-fields strong { color: var(--color-text); } .field-tag { display: inline-block; font-size: 0.7rem; padding: 0.125rem 0.375rem; background: var(--color-border); border-radius: var(--radius-sm); margin: 0.125rem; } /* Authority Grid */ .authority-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .authority-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; text-align: center; } .authority-level { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.25rem; } .authority-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .authority-limit { font-size: 0.9rem; color: var(--color-primary); margin-bottom: 0.5rem; } .authority-limit .unlimited { color: var(--color-success); } .authority-count { font-size: 0.8rem; color: var(--color-text-muted); } /* Org Chart */ .org-chart { overflow-x: auto; padding: 1rem; } .org-tree { display: flex; flex-direction: column; align-items: center; } .org-node { display: flex; flex-direction: column; align-items: center; } .org-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; text-align: center; min-width: 140px; } .org-name { font-weight: 600; font-size: 0.85rem; } .org-title { font-size: 0.7rem; color: var(--color-text-muted); } .org-authority { font-size: 0.65rem; color: var(--color-primary); margin-top: 0.25rem; } .org-level { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--color-border); } /* ============================================ Empty States ============================================ */ .empty-state { text-align: center; padding: 3rem; background: var(--color-bg-card); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); } .empty-state svg { width: 64px; height: 64px; color: var(--color-text-muted); margin-bottom: 1rem; } .empty-state p { color: var(--color-text-muted); margin-bottom: 1rem; } /* Error Page */ .error-page { text-align: center; padding: 4rem 2rem; } .error-page svg { width: 80px; height: 80px; color: var(--color-warning); margin-bottom: 1.5rem; } .error-page h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .error-page p { color: var(--color-text-muted); margin-bottom: 1.5rem; } /* ============================================ Footer ============================================ */ .footer { text-align: center; padding: 2rem; color: var(--color-text-faint); font-size: 0.8rem; border-top: 1px solid var(--color-border); margin-top: 2rem; } /* ============================================ Responsive ============================================ */ @media (max-width: 768px) { .navbar { padding: 0 1rem; } .container { padding: 1rem; } .form-row { grid-template-columns: 1fr; } .info-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } } /* ============================================ Auth Pages (Login, Signup, etc.) ============================================ */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: 2rem; } .auth-container { width: 100%; max-width: 420px; } .auth-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2.5rem; box-shadow: var(--shadow-lg); } .auth-logo { text-align: center; margin-bottom: 2rem; } .auth-logo h1 { font-size: 1.75rem; font-weight: 700; color: var(--color-primary); margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .auth-logo svg { width: 32px; height: 32px; } .auth-content h2 { text-align: center; font-size: 1.25rem; font-weight: 600; color: var(--color-text); margin-bottom: 1.5rem; } .auth-form { display: flex; flex-direction: column; gap: 1.25rem; } .auth-form .form-group { margin-bottom: 0; } .auth-form .form-group label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .label-link { font-size: 0.8rem; font-weight: 400; color: var(--color-primary); } .label-link:hover { color: var(--color-primary-hover); } .auth-form input { width: 100%; padding: 0.75rem 1rem; font-size: 0.95rem; font-family: var(--font-sans); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition); } .auth-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-faint); } .auth-form input::placeholder { color: var(--color-text-faint); } .auth-footer { text-align: center; margin-top: 2rem; color: var(--color-text-muted); font-size: 0.8rem; } .auth-alt { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.875rem; } .auth-alt a { color: var(--color-primary); font-weight: 500; } /* Button block style */ .btn-block { width: 100%; } /* Larger button for auth */ .auth-form .btn { padding: 0.875rem 1.25rem; font-size: 0.95rem; } /* ============================================ Flash Messages ============================================ */ .flash { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.25rem; font-size: 0.875rem; border: 1px solid; } .flash-content { display: flex; align-items: flex-start; gap: 0.75rem; } .flash-icon { width: 20px; height: 20px; flex-shrink: 0; } .flash-message { flex: 1; line-height: 1.4; } .flash-close { background: none; border: none; padding: 0; cursor: pointer; opacity: 0.6; color: inherit; transition: opacity var(--transition); } .flash-close:hover { opacity: 1; } .flash-close svg { width: 16px; height: 16px; } .flash-success { background: var(--color-success-faint); color: var(--color-success); border-color: var(--color-success); } .flash-error { background: var(--color-danger-faint); color: var(--color-danger); border-color: var(--color-danger); } .flash-warning { background: var(--color-warning-faint); color: var(--color-warning); border-color: var(--color-warning); } .flash-info { background: var(--color-info-faint); color: var(--color-info); border-color: var(--color-info); } /* ============================================ Onboarding & Signup Steps ============================================ */ .onboarding-steps { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .onboarding-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 80px; } .step-number { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; background: var(--color-border); color: var(--color-text-muted); } .onboarding-step.completed .step-number { background: var(--color-success); color: white; } .onboarding-step.active .step-number { background: var(--color-primary); color: white; } .step-label { font-size: 0.7rem; color: var(--color-text-muted); text-align: center; } .onboarding-step.active .step-label { color: var(--color-text); } .step-connector { width: 40px; height: 2px; background: var(--color-border); margin-top: 15px; } .step-connector.completed { background: var(--color-success); } /* ============================================ Tier Selection (Signup) ============================================ */ .tier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .tier-card { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; cursor: pointer; transition: all var(--transition); text-align: center; } .tier-card:hover { border-color: var(--color-border-light); } .tier-card.selected { border-color: var(--color-primary); background: var(--color-primary-faint); } .tier-name { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } .tier-price { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.25rem; } .tier-price span { font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); } .tier-users { font-size: 0.875rem; color: var(--color-text-muted); } /* ============================================ Billing & Payment ============================================ */ .billing-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; } .billing-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .current-plan { display: flex; align-items: center; gap: 0.75rem; } .plan-badge { padding: 0.25rem 0.75rem; background: var(--color-primary-faint); color: var(--color-primary); border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; } .billing-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .billing-item { display: flex; flex-direction: column; gap: 0.25rem; } .billing-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .billing-value { font-weight: 500; } /* ============================================ Welcome / Dashboard Placeholder ============================================ */ .welcome-message { text-align: center; padding: 3rem 1rem; } .welcome-message h2 { font-size: 1.5rem; margin-bottom: 0.5rem; } .welcome-message p { color: var(--color-text-muted); margin-bottom: 1.5rem; } /* ============================================ Dashboard ============================================ */ .dashboard { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 3rem; } /* Stats bar */ .dash-stats { display: flex; align-items: center; gap: 0; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; margin-bottom: 0.5rem; } .dash-stat { flex: 1; padding: 1rem 1.25rem; border-right: 1px solid var(--color-border); text-align: center; } .dash-stat:last-of-type { border-right: none; } .dash-stat__num { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--color-text); font-family: var(--font-display, 'DM Sans', sans-serif); } .dash-stat__label { font-size: 0.68rem; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.2rem; font-family: var(--font-mono, 'DM Mono', monospace); } .dash-stat__action { padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: center; } /* Section */ .dash-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .dash-section__title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; } .dash-section__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dash-section__count { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 99px; background: rgba(99,102,241,0.12); color: var(--color-primary); font-family: var(--font-mono, monospace); } .dash-section__link { font-size: 0.78rem; color: var(--color-primary); text-decoration: none; opacity: 0.75; transition: opacity 150ms; } .dash-section__link:hover { opacity: 1; } /* Empty state */ .dash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.25rem 1rem; background: var(--color-bg-elevated); border: 1px dashed var(--color-border); border-radius: 10px; gap: 0.5rem; } .dash-empty p { font-size: 0.82rem; color: var(--color-text-muted); text-align: center; } /* Decision list */ .decision-list { display: flex; flex-direction: column; gap: 0.5rem; } /* ============================================ Decision Card ============================================ */ .decision-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; transition: border-color 150ms, box-shadow 150ms; } .decision-card:hover { border-color: rgba(99,102,241,0.3); box-shadow: 0 0 0 1px rgba(99,102,241,0.08); } .decision-card--compact { padding: 0.7rem 1rem; gap: 0.35rem; } .decision-card--action { border-left: 3px solid var(--color-warning); } .decision-card__role-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono, monospace); padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .role-approver { background: rgba(245,158,11,0.12); color: var(--color-warning); border: 1px solid rgba(245,158,11,0.25); } .role-reviewer { background: rgba(99,102,241,0.1); color: var(--color-primary); border: 1px solid rgba(99,102,241,0.2); } .decision-card__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .decision-card__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .decision-card__number { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--color-text-faint); letter-spacing: 0.06em; } .decision-card__type { font-size: 0.7rem; color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-border); padding: 1px 7px; border-radius: 4px; } .decision-card__title { font-size: 0.9rem; font-weight: 600; color: var(--color-text); text-decoration: none; line-height: 1.35; transition: color 150ms; } .decision-card__title:hover { color: var(--color-primary); } .decision-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.1rem; } .decision-card__info { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .decision-card__cost { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); font-family: var(--font-mono, monospace); } .decision-card__by, .decision-card__date { font-size: 0.72rem; color: var(--color-text-faint); } /* ============================================ Badges ============================================ */ .badge { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-family: var(--font-mono, monospace); } .badge-draft { background: rgba(148,163,184,0.1); color: var(--color-text-faint); border: 1px solid var(--color-border); } .badge-info { background: rgba(6,182,212,0.1); color: #06b6d4; border: 1px solid rgba(6,182,212,0.2); } .badge-review { background: rgba(139,92,246,0.1); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); } .badge-pending { background: rgba(245,158,11,0.1); color: var(--color-warning); border: 1px solid rgba(245,158,11,0.2); } .badge-approved { background: rgba(16,185,129,0.1); color: var(--color-success); border: 1px solid rgba(16,185,129,0.2); } .badge-rejected { background: rgba(239,68,68,0.1); color: var(--color-danger); border: 1px solid rgba(239,68,68,0.2); } .badge-deferred { background: rgba(245,158,11,0.06); color: var(--color-warning); border: 1px solid rgba(245,158,11,0.15); } /* Priority badge */ .priority-badge { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-family: var(--font-mono, monospace); color: var(--p-color, #6b7280); background: color-mix(in srgb, var(--p-color, #6b7280) 12%, transparent); border: 1px solid color-mix(in srgb, var(--p-color, #6b7280) 25%, transparent); } /* ============================================ User Avatar ============================================ */ .user-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: white; flex-shrink: 0; letter-spacing: 0.02em; } .user-avatar--nav { width: 28px; height: 28px; font-size: 10px; } /* ============================================ Navbar updates ============================================ */ .nav-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .nav-brand__text { display: flex; flex-direction: column; line-height: 1; } .nav-brand__num { font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 500; color: #60a5fa; letter-spacing: 0.08em; } .nav-brand__name { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; } .nav-user-avatar { flex-shrink: 0; } .nav-links a { display: flex; align-items: center; gap: 0.35rem; } /* ============================================ Theme Switcher ============================================ */ .theme-switcher { display: flex; align-items: center; gap: 4px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 3px; } .theme-btn { width: 26px; height: 26px; border-radius: 5px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; transition: background 150ms, transform 100ms; position: relative; flex-shrink: 0; } .theme-btn:hover { background: var(--color-border-light); } .theme-btn.active { background: var(--color-primary-faint); box-shadow: 0 0 0 1px var(--color-primary); } .theme-btn svg { display: block; } /* Swatch dots */ .theme-swatch { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); } .swatch-dark { background: #0d1520; border-color: #3b82f6; } .swatch-ember { background: #1a1610; border-color: #e8852a; } .swatch-slate { background: #f4f1ec; border-color: #1d4ed8; } /* Slate theme — inputs and cards need explicit bg */ [data-theme="slate"] .form-input, [data-theme="slate"] .form-select, [data-theme="slate"] textarea.form-input { background: #ffffff; color: var(--color-text); border-color: rgba(0,0,0,0.14); } [data-theme="slate"] .card { background: #ffffff; } [data-theme="slate"] .navbar { background: var(--color-bg-elevated); border-bottom-color: var(--color-border); } [data-theme="slate"] .admin-sidebar { background: var(--color-bg-elevated); } [data-theme="slate"] .badge-review { background: rgba(109,40,217,0.08); color: #6d28d9; border-color: rgba(109,40,217,0.2); } /* Ember theme adjustments */ [data-theme="ember"] .badge-review { background: rgba(232,133,42,0.1); color: #f0a050; border-color: rgba(232,133,42,0.22); } /* Logo SVG theme-aware */ .logo-mark-mid { fill: var(--logo-bg-mid); opacity: 0.4; } .logo-mark-inner { fill: var(--logo-bg-inner); opacity: 0.6; } .logo-mark-check { stroke: var(--logo-accent); } .logo-mark-outer { fill: var(--color-primary); opacity: 0.9; } /* ============================================ Decision Form ============================================ */ .form-section__title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); font-family: var(--font-mono, monospace); font-weight: 500; margin-bottom: 1rem; } .decision-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; } .type-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.85rem 1rem; cursor: pointer; transition: border-color 150ms, background 150ms; display: block; } .type-card input[type="radio"] { display: none; } .type-card:hover { border-color: var(--color-primary); background: var(--color-primary-faint); } .type-card--selected { border-color: var(--color-primary); background: var(--color-primary-faint); box-shadow: 0 0 0 1px var(--color-primary); } .type-card__body strong { font-size: 0.85rem; display: block; margin-bottom: 0.2rem; } .type-card__body p { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; line-height: 1.4; } .required { color: var(--color-danger); } /* ============================================ Decision Show ============================================ */ .section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); font-family: var(--font-mono, monospace); font-weight: 500; } .detail-list { display: flex; flex-direction: column; gap: 0; margin-top: 0.6rem; } .detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.8rem; } .detail-row:last-child { border-bottom: none; } .detail-row dt { color: var(--color-text-muted); flex-shrink: 0; } .detail-row dd { text-align: right; font-weight: 500; } /* Approval chain steps */ .chain-step { display: flex; gap: 0.65rem; align-items: flex-start; } .chain-step__icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .chain-step--waiting .chain-step__icon { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-faint); } .chain-step--pending .chain-step__icon { background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3); color: var(--color-warning); } .chain-step--completed .chain-step__icon { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: var(--color-success); } .chain-step--rejected .chain-step__icon { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: var(--color-danger); } .chain-step--skipped .chain-step__icon { background: var(--color-bg); border: 1px dashed var(--color-border); color: var(--color-text-faint); } .chain-step__body { flex: 1; min-width: 0; } .chain-step__name { font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; } .chain-step__role { font-size: 0.63rem; font-family: var(--font-mono); padding: 1px 5px; border-radius: 3px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-faint); } .chain-step__title { font-size: 0.73rem; color: var(--color-text-faint); margin-top: 1px; } .chain-step__comment { font-size: 0.75rem; color: var(--color-text-muted); font-style: italic; margin-top: 0.2rem; } .chain-step__date { font-size: 0.68rem; color: var(--color-text-faint); margin-top: 0.15rem; font-family: var(--font-mono); } /* ============================================ Test Data Badge ============================================ */ .badge-test { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-size: 0.6rem; font-family: var(--font-mono, monospace); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a855f7; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); vertical-align: middle; flex-shrink: 0; } /* ============================================ Decision Brief Form ============================================ */ .decision-brief-form { display: flex; flex-direction: column; gap: 1rem; } .brief-section {} .brief-section__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--color-border); } .brief-section__num { font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 700; color: var(--color-primary); background: var(--color-primary-faint); border: 1px solid rgba(59,130,246,0.2); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; margin-top: 2px; letter-spacing: 0.05em; } .brief-section__head h3 { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.15rem; } .brief-section__head p { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; } .brief-section__body { padding: 1.25rem; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0; } .input-prefix { position: relative; display: flex; align-items: center; } .input-prefix span { position: absolute; left: 0.75rem; color: var(--color-text-faint); font-size: 0.85rem; pointer-events: none; } .input-prefix input { padding-left: 1.75rem; } .req { color: var(--color-danger); margin-left: 1px; } /* Risk score */ .risk-score-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; padding: 0.35rem 0.75rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; font-family: var(--font-mono, monospace); } /* Chain preview */ .chain-preview-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); font-family: var(--font-mono, monospace); margin-bottom: 0.5rem; } .chain-preview-steps { display: flex; flex-direction: column; gap: 0.35rem; } .chain-preview-empty { font-size: 0.8rem; color: var(--color-text-faint); font-style: italic; padding: 0.5rem 0; } .chain-preview-step { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.82rem; } .chain-preview-step__num { font-family: var(--font-mono, monospace); font-size: 0.65rem; color: var(--color-text-faint); min-width: 20px; } .chain-preview-step__role { font-size: 0.63rem; font-family: var(--font-mono, monospace); padding: 1px 5px; border-radius: 3px; } .chain-preview-step__role--approver { background: rgba(245,158,11,0.1); color: var(--color-warning); border: 1px solid rgba(245,158,11,0.2); } .chain-preview-step__role--reviewer { background: rgba(99,102,241,0.08); color: var(--color-primary); border: 1px solid rgba(99,102,241,0.15); } .chain-preview-step__name { font-weight: 600; } .chain-preview-step__title { font-size: 0.72rem; color: var(--color-text-faint); } .chain-preview-step__level { margin-left: auto; font-size: 0.65rem; font-family: var(--font-mono, monospace); color: var(--color-text-faint); } /* Actions bar */ .brief-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding: 0.25rem 0 1rem; } @media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════ DECISION MEMO — Complete redesign ════════════════════════════════════════════════════════ */ /* ── Page layout helpers ──────────────────────────────── */ .page-header { padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 2rem; } .page-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .page-title { font-size: 1.75rem; font-weight: 700; margin: 0.25rem 0 0.25rem; } .page-subtitle { color: var(--color-text-muted); margin: 0.25rem 0 0; font-size: 0.925rem; } .back-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text-muted); font-size: 0.875rem; text-decoration: none; margin-bottom: 0.75rem; } .back-link:hover { color: var(--color-text); } /* ── Memo form container ──────────────────────────────── */ .memo-container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; } /* ── Section structure ────────────────────────────────── */ .memo-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 1.25rem; overflow: hidden; } .memo-section-label { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .memo-section-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: white; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; } .memo-section-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } /* ── Field primitives ─────────────────────────────────── */ .field-group { display: flex; flex-direction: column; gap: 0.4rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .field-group--half {} .field-label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .field-label.required::after { content: ' *'; color: var(--color-error); } .field-hint { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } .field-input { width: 100%; padding: 0.6rem 0.875rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text); font-size: 0.9rem; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s; } .field-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-muted); } .field-select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.6rem center; background-repeat: no-repeat; background-size: 1.25em; padding-right: 2.5rem; } .field-textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text); font-size: 0.9rem; font-family: inherit; line-height: 1.6; resize: vertical; min-height: 160px; box-sizing: border-box; transition: border-color 0.15s; } .field-textarea--large { min-height: 320px; font-size: 0.925rem; } .field-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-muted); } .field-counter { font-size: 0.75rem; color: var(--color-text-muted); text-align: right; } .input-prefix-wrap { position: relative; } .input-prefix { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-weight: 500; pointer-events: none; } .field-input--prefixed { padding-left: 1.75rem; } /* ── Decision type cards ──────────────────────────────── */ .type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } .type-card { display: block; cursor: pointer; border: 2px solid var(--color-border); border-radius: 8px; padding: 1rem; transition: all 0.15s; } .type-card input { display: none; } .type-card:hover { border-color: var(--color-primary); background: var(--color-surface-alt); } .type-card.selected { border-color: var(--color-primary); background: var(--color-primary-muted); } .type-card-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; } .type-card-desc { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.4; } .type-badge { display: inline-block; margin-top: 0.5rem; font-size: 0.7rem; background: var(--color-warning-bg, #fef3c7); color: var(--color-warning, #92400e); padding: 0.15rem 0.5rem; border-radius: 20px; font-weight: 500; } /* ── Timing cards ─────────────────────────────────────── */ .timing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.75rem; } .timing-card { display: block; cursor: pointer; border: 2px solid var(--color-border); border-radius: 8px; padding: 1rem; transition: all 0.15s; } .timing-card input { display: none; } .timing-card:hover { border-color: var(--color-primary); } .timing-card.selected { border-width: 2px; } .timing-card-label { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.3rem; } .timing-card-desc { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.4; } .timing-card--act_now.selected { border-color: #ef4444; background: #fef2f2; } .timing-card--act_now .timing-card-label { color: #ef4444; } .timing-card--act_soon.selected { border-color: #f97316; background: #fff7ed; } .timing-card--act_soon .timing-card-label { color: #f97316; } .timing-card--wait_assess.selected { border-color: #3b82f6; background: #eff6ff; } .timing-card--wait_assess .timing-card-label { color: #3b82f6; } .timing-card--staged.selected { border-color: #8b5cf6; background: #f5f3ff; } .timing-card--staged .timing-card-label { color: #8b5cf6; } /* ── Risk matrix ──────────────────────────────────────── */ .risk-matrix-wrap { display: flex; gap: 0.5rem; align-items: flex-start; overflow-x: auto; } .risk-matrix-labels-y { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding-top: 0; } .risk-axis-title { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.25rem 0; } .risk-axis-title--x { writing-mode: horizontal-tb; transform: none; text-align: center; margin-top: 0.25rem; } .risk-label-y { font-size: 0.7rem; color: var(--color-text-muted); height: 44px; display: flex; align-items: center; padding-right: 0.5rem; white-space: nowrap; } .risk-matrix-grid { display: grid; grid-template-columns: repeat(5, 44px); grid-template-rows: repeat(5, 44px); gap: 3px; } .risk-cell { width: 44px; height: 44px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; font-size: 0.8rem; transition: all 0.1s; opacity: 0.85; } .risk-cell:hover { opacity: 1; transform: scale(1.1); z-index: 1; position: relative; } .risk-cell--selected { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 3px var(--color-primary); z-index: 2; position: relative; } .risk-cell--low { background: #bbf7d0; color: #14532d; } .risk-cell--medium { background: #fef08a; color: #713f12; } .risk-cell--high { background: #fed7aa; color: #7c2d12; } .risk-cell--critical { background: #fecaca; color: #7f1d1d; } .risk-matrix-labels-x { display: grid; grid-template-columns: repeat(5, 44px); gap: 3px; margin-top: 0.35rem; } .risk-label-x { font-size: 0.65rem; color: var(--color-text-muted); text-align: center; } .risk-result { display: none; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.75rem 1rem; } .risk-result.visible { display: block; } .risk-result-score { font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem; } .risk-band-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; } .risk-band--low { background: #dcfce7; color: #14532d; } .risk-band--medium { background: #fef9c3; color: #713f12; } .risk-band--high { background: #ffedd5; color: #7c2d12; } .risk-band--critical { background: #fee2e2; color: #7f1d1d; } /* ── Upload zone ──────────────────────────────────────── */ .upload-zone { border: 2px dashed var(--color-border); border-radius: 8px; padding: 2.5rem 1.5rem; text-align: center; transition: all 0.15s; cursor: pointer; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--color-primary); background: var(--color-primary-muted); } .upload-zone-inner svg { color: var(--color-text-muted); margin-bottom: 0.75rem; } .upload-zone-text { font-size: 0.9rem; color: var(--color-text); } .upload-browse { color: var(--color-primary); cursor: pointer; text-decoration: underline; } .upload-zone-hint { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.35rem; } .upload-input { display: none; } .upload-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; } .upload-file { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--color-surface-alt); border-radius: 6px; font-size: 0.85rem; } .upload-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-file-size { color: var(--color-text-muted); font-size: 0.78rem; } .upload-file-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0 0.25rem; font-size: 0.9rem; } .upload-file-remove:hover { color: var(--color-error); } .existing-attachments { margin-top: 1rem; } .existing-attachments-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .existing-attachment { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); } .attachment-size { color: var(--color-text-muted); font-size: 0.78rem; margin-left: auto; } /* ── Routing cards ────────────────────────────────────── */ .routing-options { display: flex; flex-direction: column; gap: 0.75rem; } .routing-card { display: flex; align-items: flex-start; gap: 1rem; cursor: pointer; border: 2px solid var(--color-border); border-radius: 8px; padding: 1rem 1.25rem; transition: all 0.15s; } .routing-card input { display: none; } .routing-card:hover { border-color: var(--color-primary); } .routing-card.selected { border-color: var(--color-primary); background: var(--color-primary-muted); } .routing-card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; } .routing-card-desc { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5; } /* ── Chain preview ────────────────────────────────────── */ .chain-preview { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; margin-top: 1rem; } .chain-preview-hint, .chain-preview-loading, .chain-preview-error { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; padding: 0.5rem; } .chain-preview-error { color: var(--color-error); } .chain-preview-header { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; } .chain-required-level { font-weight: 500; color: var(--color-primary); text-transform: none; letter-spacing: 0; } .chain-steps { display: flex; flex-direction: column; gap: 0.5rem; } .chain-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 6px; background: var(--color-bg); border: 1px solid var(--color-border); } .chain-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; background: var(--color-surface-alt); color: var(--color-text-muted); } .chain-step-info { flex: 1; } .chain-step-name { font-weight: 600; font-size: 0.875rem; } .chain-step-meta { font-size: 0.78rem; color: var(--color-text-muted); } .chain-step-badge { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 20px; } .chain-step-badge--approver { background: #dcfce7; color: #14532d; } .chain-step-badge--reviewer { background: #ede9fe; color: #4c1d95; } .chain-step--approver .chain-step-num { background: #dcfce7; color: #14532d; } .chain-step--reviewer .chain-step-num { background: #ede9fe; color: #4c1d95; } .custom-fields-divider { height: 1px; background: var(--color-border); margin: 0.5rem 0; } /* ── Form actions bar ─────────────────────────────────── */ .memo-actions { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; border-top: 1px solid var(--color-border); margin-top: 0.5rem; } .memo-actions-right { display: flex; gap: 0.75rem; } .hidden { display: none !important; } /* ════════════════════════════════════════════════════════ DECISION SHOW — Memo document view ════════════════════════════════════════════════════════ */ .memo-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); gap: 1rem; flex-wrap: wrap; } .memo-header-left { display: flex; align-items: center; gap: 1rem; } .memo-number-wrap { display: flex; align-items: center; gap: 0.5rem; } .memo-number { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 1rem; color: var(--color-text-muted); } .memo-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .memo-view-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; padding: 1.5rem; max-width: 1100px; margin: 0 auto; align-items: start; } @media (max-width: 820px) { .memo-view-layout { grid-template-columns: 1fr; } .memo-sidebar { order: -1; } } /* ── Memo document ─────────────────────────────────────── */ .memo-doc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; } .memo-doc-header { padding: 2rem; border-bottom: 1px solid var(--color-border); } .memo-doc-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .memo-doc-title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.75rem; } .memo-doc-byline { font-size: 0.85rem; color: var(--color-text-muted); } .memo-deadline { color: var(--color-error); font-weight: 600; } .memo-doc-section { padding: 1.75rem 2rem; border-bottom: 1px solid var(--color-border); } .memo-doc-section:last-child { border-bottom: none; } .memo-doc-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin: 0 0 1rem; } .memo-doc-body { font-size: 0.95rem; line-height: 1.75; color: var(--color-text); white-space: pre-wrap; word-break: break-word; } .memo-doc-subsection { margin-top: 1.25rem; } .memo-doc-subsection-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.5rem; } .memo-doc-empty { color: var(--color-text-muted); font-style: italic; font-size: 0.875rem; } /* ── Risk summary in show view ────────────────────────── */ .risk-summary-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1rem; } .risk-summary-item {} .risk-summary-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin-bottom: 0.25rem; } .risk-summary-val { font-size: 0.9rem; font-weight: 500; } .routing-override-note { display: flex; align-items: flex-start; gap: 0.5rem; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1rem; color: #78350f; } /* ── Attachments in show ──────────────────────────────── */ .attachment-list { display: flex; flex-direction: column; gap: 0.5rem; } .attachment-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.875rem; border: 1px solid var(--color-border); border-radius: 6px; text-decoration: none; color: var(--color-text); font-size: 0.875rem; transition: background 0.1s; } .attachment-item:hover { background: var(--color-surface-alt); } .attachment-name { flex: 1; } .attachment-meta { color: var(--color-text-muted); font-size: 0.78rem; } /* ── Sidebar ──────────────────────────────────────────── */ .memo-sidebar { display: flex; flex-direction: column; gap: 1rem; } .sidebar-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.25rem; } .sidebar-card-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 1rem; } .sidebar-empty { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; } /* ── Approval chain in sidebar ────────────────────────── */ .approval-chain { display: flex; flex-direction: column; gap: 0; } .chain-step-view { display: flex; gap: 0.75rem; padding: 0.6rem 0; position: relative; } .chain-step-view:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 32px; bottom: -2px; width: 2px; background: var(--color-border); } .chain-step-indicator { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; border: 2px solid var(--color-border); background: var(--color-surface); } .chain-step-view--completed .chain-step-indicator { background: #dcfce7; border-color: #16a34a; color: #16a34a; } .chain-step-view--pending .chain-step-indicator { background: var(--color-primary-muted); border-color: var(--color-primary); } .chain-step-view--rejected .chain-step-indicator { background: #fee2e2; border-color: #dc2626; color: #dc2626; } .chain-step-dot { width: 8px; height: 8px; border-radius: 50%; } .chain-step-dot--pending { background: var(--color-primary); } .chain-step-dot--waiting { background: var(--color-border); } .chain-step-detail { flex: 1; } .chain-step-person { font-weight: 600; font-size: 0.875rem; } .chain-step-role { font-size: 0.75rem; color: var(--color-text-muted); } .chain-step-comment { font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; margin-top: 0.25rem; border-left: 2px solid var(--color-border); padding-left: 0.5rem; } .chain-step-acted { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.2rem; } /* ── Fact list ────────────────────────────────────────── */ .fact-list { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.75rem; font-size: 0.85rem; margin: 0; } .fact-list dt { color: var(--color-text-muted); white-space: nowrap; } .fact-list dd { margin: 0; font-weight: 500; word-break: break-word; } /* ── Timing badges ────────────────────────────────────── */ .timing-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; } .timing-badge--act_now { background: #fee2e2; color: #991b1b; } .timing-badge--act_soon { background: #ffedd5; color: #9a3412; } .timing-badge--wait_assess { background: #dbeafe; color: #1e40af; } .timing-badge--staged { background: #ede9fe; color: #5b21b6; } .memo-timing { font-size: 0.8rem; font-weight: 600; } .memo-cost { font-weight: 700; font-size: 0.9rem; color: var(--color-text); } /* ── Comments ─────────────────────────────────────────── */ .comment-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .comment { display: flex; gap: 0.75rem; } .comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .comment-body { flex: 1; } .comment-header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .comment-date { font-size: 0.78rem; color: var(--color-text-muted); } .comment-text { font-size: 0.875rem; line-height: 1.6; } .comment-form { margin-top: 1rem; } .comment-form-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; } /* ── Action modal ─────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); } .modal-header h3 { margin: 0; font-size: 1.1rem; } .modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1.1rem; } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); } /* ── Danger / success / warning btn variants ──────────── */ .btn-success { background: #16a34a; color: white; border: 1px solid #16a34a; } .btn-success:hover { background: #15803d; } .btn-danger { background: #dc2626; color: white; border: 1px solid #dc2626; } .btn-danger:hover { background: #b91c1c; } .btn-warning { background: #d97706; color: white; border: 1px solid #d97706; } .btn-warning:hover { background: #b45309; } .btn-sm { padding: 0.4rem 0.875rem; font-size: 0.825rem; } /* ── CSS-only card selection (no JS required) ─────────────────────── */ /* Type cards */ .type-card:has(input[type="radio"]:checked) { border-color: var(--color-primary) !important; background: var(--color-primary-muted) !important; } /* Timing cards */ .timing-card:has(input[type="radio"]:checked) { border-width: 2px; border-style: solid; } .timing-card--act_now:has(input:checked) { border-color: #ef4444 !important; background: #fef2f2 !important; } .timing-card--act_soon:has(input:checked) { border-color: #f97316 !important; background: #fff7ed !important; } .timing-card--wait_assess:has(input:checked){ border-color: #3b82f6 !important; background: #eff6ff !important; } .timing-card--staged:has(input:checked) { border-color: #8b5cf6 !important; background: #f5f3ff !important; } /* Routing cards */ .routing-card:has(input[type="radio"]:checked) { border-color: var(--color-primary) !important; background: var(--color-primary-muted) !important; } /* ── Native file input styled ─────────────────────────────────────── */ .upload-zone-wrap { position: relative; border: 2px dashed var(--color-border); border-radius: 8px; padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .upload-zone-wrap:hover { border-color: var(--color-primary); background: var(--color-primary-muted); } .upload-zone-wrap svg { color: var(--color-text-muted); margin-bottom: 0.5rem; } .upload-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }