/* ============================================================ RiskAnalysis - Corporate Theme V2 Client branding ============================================================ */ :root { --primary: #252525; --primary-light: #444444; --accent: #e8333d; --accent-light: #f05a61; --background: #f5f6f8; --surface: #ffffff; --text: #242424; --muted: #6e737b; --border: #e2e5e9; --danger: #c9232d; --corporate-red: #e8333d; --corporate-red-dark: #c9232d; --corporate-red-light: #fff0f1; --corporate-red-hover: #fff6f6; --shadow: 0 8px 28px rgba(20, 25, 35, 0.07); } /* ============================================================ GLOBAL ============================================================ */ html, body { color: var(--text); } body, .app-page { background: #f5f6f8 !important; } a { transition: color .15s ease, background .15s ease, border-color .15s ease; } /* ============================================================ TOPBAR ============================================================ */ .topbar { color: #262626 !important; background: #ffffff !important; border-bottom: 2px solid var(--corporate-red) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, .055) !important; } .topbar-brand { color: #242424 !important; } .topbar-brand strong { color: #242424 !important; } .topbar-brand small { color: #777c84 !important; } .topbar-user { color: #333333 !important; } .topbar-user a { color: #ffffff !important; background: var(--corporate-red) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(232, 51, 61, .18); } .topbar-user a:hover { background: var(--corporate-red-dark) !important; } /* ============================================================ CLIENT LOGO ============================================================ */ .client-logo-shell { display: flex; width: 52px; height: 46px; align-items: center; justify-content: center; flex-shrink: 0; } .client-logo-shell img { display: block; width: 100%; max-width: 52px; max-height: 42px; object-fit: contain; } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { color: #34373c !important; background: #ffffff !important; border-right: 1px solid #e4e6e9 !important; box-shadow: 4px 0 16px rgba(0, 0, 0, .025) !important; } .sidebar nav a, .menu-group-button { color: #44484f !important; background: transparent !important; } .sidebar nav a:hover, .menu-group-button:hover { color: var(--corporate-red-dark) !important; background: var(--corporate-red-hover) !important; } /* top level active menu */ .sidebar nav > a.active, .menu-group-button.active { color: var(--corporate-red-dark) !important; background: var(--corporate-red-light) !important; } /* left indicator */ .sidebar nav > a.active { border-left-color: var(--corporate-red) !important; } /* icons */ .menu-icon { color: var(--corporate-red) !important; } /* submenu */ .sidebar .submenu { border-left-color: #f1c9cc !important; } .sidebar .submenu a { color: #555a61 !important; background: transparent !important; } .sidebar .submenu a:hover { color: var(--corporate-red-dark) !important; background: #fff7f7 !important; } .sidebar .submenu a.active { color: var(--corporate-red-dark) !important; background: #ffecee !important; } .submenu-marker { background: #efb8bc !important; } .submenu a.active .submenu-marker { background: var(--corporate-red) !important; } /* sidebar footer */ .sidebar-footer { color: #70757d !important; border-top-color: #e5e7ea !important; } .sidebar-footer span { color: var(--corporate-red) !important; } /* ============================================================ CONTENT ============================================================ */ .content, .module-content { background: #f5f6f8 !important; } /* ============================================================ HEADINGS ============================================================ */ .eyebrow, .eyebrow.dark, .ui-section-eyebrow, .detail-section-eyebrow, .risk-event-actions-eyebrow { color: var(--corporate-red) !important; } .module-heading h1, .ui-card-title, .ui-section-title, .ui-form-title, .dictionary-selector-heading h2 { color: #242424 !important; } .module-heading p { color: var(--muted) !important; } /* ============================================================ PRIMARY BUTTONS ============================================================ */ .button-primary, .risk-event-actions-panel .button-primary { color: #ffffff !important; background: var(--corporate-red) !important; border-color: var(--corporate-red) !important; box-shadow: 0 5px 14px rgba(232, 51, 61, .18) !important; } .button-primary:hover, .risk-event-actions-panel .button-primary:hover { color: #ffffff !important; background: var(--corporate-red-dark) !important; border-color: var(--corporate-red-dark) !important; transform: translateY(-1px); } /* secondary */ .button-secondary { color: var(--corporate-red-dark) !important; background: #fff1f2 !important; border-color: #f3c5c9 !important; } .button-secondary:hover { color: #ffffff !important; background: var(--corporate-red) !important; border-color: var(--corporate-red) !important; } /* light */ .button-light:hover { color: var(--corporate-red-dark) !important; background: #fff6f6 !important; border-color: #efb9bd !important; } /* ============================================================ CARDS ============================================================ */ .form-card, .details-card, .table-card, .dashboard-card, .stat-card, .filter-card, .list-card, .detail-card, .ui-card, .ui-form-layout, .dictionary-selector-card, .wizard-content-card, .filter-panel { background: #ffffff !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } .table-card-header, .ui-card-header, .ui-form-header { background: #fafafa !important; border-color: #e8e9ec !important; } /* ============================================================ TABLES ============================================================ */ .data-table thead, .data-table thead tr, .data-table thead th { background: #fafafa !important; } .data-table thead th { color: #62666e !important; } .data-table tbody tr:hover { background: #fffafa !important; } /* event number */ .event-number-link { color: var(--corporate-red-dark) !important; font-weight: 700; } .event-number-link:hover { color: var(--corporate-red) !important; } /* ============================================================ FORMS ============================================================ */ input, select, textarea { accent-color: var(--corporate-red) !important; } input:focus, select:focus, textarea:focus { border-color: var(--corporate-red) !important; box-shadow: 0 0 0 3px rgba(232, 51, 61, .10) !important; outline: none !important; } /* ============================================================ NOMENCLATURES / SELECTORS ============================================================ */ .dictionary-selector-option:hover { color: #333333 !important; background: #fff6f6 !important; border-color: #efb9bd !important; } .dictionary-selector-option.is-active { color: #ffffff !important; background: linear-gradient( 135deg, var(--corporate-red), var(--corporate-red-dark) ) !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(232, 51, 61, .18) !important; } .nomenclature-card:hover { border-color: #efb9bd !important; box-shadow: 0 8px 22px rgba(232, 51, 61, .08) !important; } /* ============================================================ SELECTION CARDS ============================================================ */ .selection-card:hover { background: #fffafa !important; border-color: #efb9bd !important; } .selection-card:has(input:checked) { background: #fff4f5 !important; border-color: var(--corporate-red) !important; } /* ============================================================ DASHBOARD ============================================================ */ /* * Dashboard uses some older component rules. * Override them here. */ .welcome-panel { color: #242424 !important; background: linear-gradient( 135deg, #ffffff 0%, #ffffff 70%, #fff5f5 100% ) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } .welcome-panel::before, .welcome-panel::after { border-color: rgba(232, 51, 61, .10) !important; } .welcome-panel h1, .welcome-panel h2 { color: #242424 !important; } .welcome-panel p { color: #6f737b !important; } .welcome-panel .eyebrow { color: var(--corporate-red) !important; } .welcome-panel button, .welcome-panel .button { color: #ffffff !important; background: var(--corporate-red) !important; border-color: var(--corporate-red) !important; box-shadow: 0 6px 16px rgba(232, 51, 61, .20) !important; } /* Dashboard values */ .stat-card strong { color: var(--corporate-red) !important; } .stat-card span { color: #62666e !important; } /* chart bars */ .chart-bar, .bar-fill, .dashboard-chart-bar { background: linear-gradient( 180deg, #f06369, var(--corporate-red) ) !important; } /* general dashboard accent */ .dashboard-card .eyebrow, .dashboard-card h3 + .eyebrow { color: var(--corporate-red) !important; } /* ============================================================ LOGIN PAGE ============================================================ */ /* * We intentionally override the existing * financial-market background. */ .login-page { background: linear-gradient( 135deg, #c8222c 0%, #e8333d 50%, #f2575f 100% ) !important; } /* left visual area */ .login-visual { color: #ffffff !important; background: linear-gradient( 145deg, #bd202a 0%, #e8333d 55%, #ee565e 100% ) !important; } /* * If the current login uses a full-page * background image on an inner container, * suppress it. */ .login-layout, .login-background, .auth-background { background-image: none !important; } /* Login card */ .login-card { padding: 34px !important; background: rgba(255, 255, 255, .98) !important; border: 1px solid rgba(255, 255, 255, .8) !important; border-radius: 16px !important; box-shadow: 0 22px 70px rgba(95, 15, 22, .20) !important; } .login-card h1, .login-card h2 { color: #242424 !important; } .login-description { color: #777c84 !important; } .login-card label { color: #36393e !important; } .login-card input { background: #ffffff !important; } .login-card input:focus { border-color: var(--corporate-red) !important; box-shadow: 0 0 0 4px rgba(232, 51, 61, .10) !important; } .login-card button { color: #ffffff !important; background: var(--corporate-red) !important; box-shadow: 0 7px 18px rgba(232, 51, 61, .20) !important; } .login-card button:hover { background: var(--corporate-red-dark) !important; } /* Existing PA badge -> corporate */ .login-card .brand-mark, .mobile-brand .brand-mark { color: transparent !important; background: #ffffff url('/assets/img/client-logo.svg') center / contain no-repeat !important; box-shadow: none !important; border-radius: 0 !important; } /* ============================================================ STATUS COLORS ============================================================ */ /* * Status colors stay semantic. * Do NOT convert them all to corporate red. */ .status-registered { color: #1769d2 !important; background: #eaf2ff !important; } .status-in_progress { color: #16833b !important; background: #e9f8ed !important; } .status-draft { color: #6a6f77 !important; background: #eef0f2 !important; } .status-closed { color: #555b64 !important; background: #eceef0 !important; } /* ============================================================ SMALL POLISH ============================================================ */ .table-card, .list-card, .detail-card, .filter-card, .form-card, .ui-card { border-radius: 14px !important; } .button { border-radius: 9px !important; } input, select, textarea { border-radius: 9px !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .topbar { border-bottom-width: 2px !important; } .client-logo-shell { width: 42px; } .client-logo-shell img { max-width: 42px; } } /* ============================================================ DASHBOARD FORCE OVERRIDES ============================================================ */ .dashboard-hero, .dashboard-welcome, .dashboard-header, .welcome-panel { color: #242424 !important; background: linear-gradient( 135deg, #ffffff 0%, #ffffff 65%, #fff1f2 100% ) !important; border: 1px solid #e2e5e9 !important; box-shadow: 0 8px 28px rgba(20, 25, 35, .07) !important; } .dashboard-hero h1, .dashboard-hero h2, .dashboard-welcome h1, .dashboard-welcome h2, .dashboard-header h1, .dashboard-header h2, .welcome-panel h1, .welcome-panel h2 { color: #242424 !important; } .dashboard-hero p, .dashboard-welcome p, .dashboard-header p, .welcome-panel p { color: #6e737b !important; } .dashboard-hero .button, .dashboard-welcome .button, .dashboard-header .button { color: #ffffff !important; background: #e8333d !important; border-color: #e8333d !important; } /* ============================================================ CORPORATE POLISH V3 Sidebar + Dashboard ============================================================ */ /* ============================================================ SIDEBAR SIZE ============================================================ */ .sidebar { width: 270px !important; } /* * Всички главни позиции имат еднаква * височина, padding и типография. */ .sidebar nav > a, .menu-group-button { display: flex !important; width: 100% !important; min-height: 66px !important; align-items: center !important; gap: 16px !important; padding: 12px 22px !important; color: #202124 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; border-radius: 10px !important; background: transparent !important; } /* * Иконите по подразбиране са черни. */ .sidebar nav > a .menu-icon, .menu-group-button .menu-icon, .sidebar nav > a > span:first-child { color: #202124 !important; } /* hover */ .sidebar nav > a:hover, .menu-group-button:hover { color: #202124 !important; background: #fff5f5 !important; } /* active top-level */ .sidebar nav > a.active, .menu-group-button.active { color: #d61f2c !important; background: linear-gradient( 90deg, #fff0f1 0%, #fff6f6 100% ) !important; box-shadow: inset 3px 0 0 #e3222e !important; } /* active icon */ .sidebar nav > a.active .menu-icon, .menu-group-button.active .menu-icon, .sidebar nav > a.active > span:first-child { color: #e3222e !important; } /* стрелката вдясно */ .menu-arrow { margin-left: auto !important; color: #252525 !important; font-size: 15px !important; } /* ============================================================ SUBMENU ============================================================ */ .submenu { margin: 2px 0 8px 19px !important; padding-left: 11px !important; border-left: 1px solid #f0c9cc !important; } .sidebar .submenu a { min-height: 42px !important; padding: 9px 14px !important; color: #4a4d52 !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 8px !important; } .sidebar .submenu a:hover { color: #d61f2c !important; background: #fff7f7 !important; } .sidebar .submenu a.active { color: #d61f2c !important; font-weight: 700 !important; background: #ffecee !important; } /* ============================================================ SIDEBAR FOOTER ============================================================ */ .sidebar-footer { padding: 20px 22px !important; color: #5f6368 !important; font-size: 13px !important; } .sidebar-footer span { color: #252525 !important; font-weight: 700 !important; } /* ============================================================ CONTENT OFFSET FOR WIDER SIDEBAR ============================================================ */ .content, .module-content { margin-left: 270px !important; } /* ============================================================ DASHBOARD CREATE BUTTON ============================================================ */ .dashboard-create-button { display: inline-flex !important; min-height: 52px !important; padding: 0 25px !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; background: linear-gradient( 135deg, #ed3540 0%, #d91f2c 100% ) !important; border: 1px solid #d91f2c !important; border-radius: 11px !important; box-shadow: 0 8px 20px rgba(217, 31, 44, .20) !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important; } .dashboard-create-button:hover { color: #ffffff !important; background: linear-gradient( 135deg, #dd2632 0%, #c91d28 100% ) !important; transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(201, 29, 40, .25) !important; } /* ============================================================ DASHBOARD HERO ============================================================ */ .welcome-panel { color: #202124 !important; background: linear-gradient( 120deg, #ffffff 0%, #ffffff 67%, #fff5f5 100% ) !important; border: 1px solid #e3e5e8 !important; border-radius: 16px !important; box-shadow: 0 8px 28px rgba(20, 25, 35, .06) !important; } .welcome-panel h1 { color: #202124 !important; } .welcome-panel p { color: #60656c !important; } .welcome-panel .eyebrow { color: #e3222e !important; } /* * Декоративният кръг остава много лек, * но вече в корпоративното червено. */ .welcome-panel::after { border-color: rgba(227, 34, 46, .12) !important; } /* ============================================================ DASHBOARD KPI CARDS ============================================================ */ .stats-grid .stat-card { min-height: 132px !important; padding: 22px 24px !important; background: #ffffff !important; border: 1px solid #e3e5e8 !important; border-radius: 14px !important; box-shadow: 0 5px 18px rgba(20, 25, 35, .055) !important; } .stat-card span { color: #42464d !important; font-size: 13px !important; font-weight: 700 !important; } .stat-card strong { color: #e3222e !important; font-size: 30px !important; font-weight: 800 !important; } .stat-card small { color: #777c83 !important; } /* ============================================================ DASHBOARD CARDS ============================================================ */ .dashboard-card { background: #ffffff !important; border: 1px solid #e3e5e8 !important; border-radius: 15px !important; box-shadow: 0 6px 22px rgba(20, 25, 35, .055) !important; } .dashboard-card .eyebrow { color: #e3222e !important; } /* ============================================================ CHART ============================================================ */ .chart-bars span { background: linear-gradient( 180deg, #f46a72 0%, #ee3540 45%, #d91f2c 100% ) !important; border-radius: 6px 6px 0 0 !important; box-shadow: 0 3px 8px rgba(217, 31, 44, .10) !important; } /* ============================================================ ACTIVITY ============================================================ */ .activity-icon { color: #d91f2c !important; background: #fff0f1 !important; border-color: #f5c7ca !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1150px) { .sidebar { width: 230px !important; } .content, .module-content { margin-left: 230px !important; } .sidebar nav > a, .menu-group-button { min-height: 58px !important; padding: 10px 16px !important; font-size: 14px !important; } } /* * При mobile оставяме оригиналната * responsive логика на приложението. */ @media (max-width: 900px) { .sidebar { width: auto !important; } .content, .module-content { margin-left: 0 !important; } } /* ============================================================ CORPORATE FINAL POLISH Navigation + dark red corporate accents ============================================================ */ :root { --corp-red: #b5121b; --corp-red-dark: #981018; --corp-red-hover: #a81018; --corp-red-soft: #fff1f2; } /* ============================================================ MAIN SIDEBAR ITEMS ============================================================ */ .sidebar nav > a, .menu-group-button { display: flex !important; width: 100% !important; min-height: 64px !important; align-items: center !important; gap: 16px !important; padding: 12px 20px !important; color: #202124 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; background: transparent !important; border-radius: 10px !important; box-shadow: none !important; } /* Неактивни икони и текст */ .sidebar nav > a:not(.active), .menu-group-button:not(.active) { color: #202124 !important; } .sidebar nav > a:not(.active) *, .menu-group-button:not(.active) * { color: #202124 !important; } /* Hover */ .sidebar nav > a:not(.active):hover, .menu-group-button:not(.active):hover { color: var(--corp-red) !important; background: #fff5f5 !important; } .sidebar nav > a:not(.active):hover *, .menu-group-button:not(.active):hover * { color: var(--corp-red) !important; } /* ============================================================ ACTIVE MAIN MENU ============================================================ */ .sidebar nav > a.active, .menu-group-button.active { color: #ffffff !important; background: linear-gradient( 135deg, var(--corp-red), var(--corp-red-dark) ) !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(181, 18, 27, .18) !important; } .sidebar nav > a.active *, .menu-group-button.active * { color: #ffffff !important; } /* * Премахваме стария inset / червен ляв marker, * защото вече целият active item е червен. */ .sidebar nav > a.active { border-left-color: transparent !important; } /* Arrow */ .menu-arrow { margin-left: auto !important; color: inherit !important; } /* ============================================================ SUBMENU ============================================================ */ .submenu { margin: 3px 0 10px 20px !important; padding-left: 11px !important; border-left: 1px solid #e7bfc2 !important; } .sidebar .submenu a { min-height: 42px !important; padding: 9px 14px !important; color: #36383c !important; font-size: 14px !important; font-weight: 500 !important; background: transparent !important; border-radius: 8px !important; } .sidebar .submenu a * { color: inherit !important; } .sidebar .submenu a:hover { color: var(--corp-red) !important; background: #fff5f5 !important; } .sidebar .submenu a.active { color: var(--corp-red-dark) !important; font-weight: 700 !important; background: #fdebed !important; } .submenu-marker { background: #d9d9d9 !important; } .submenu a.active .submenu-marker { background: var(--corp-red) !important; } /* ============================================================ PRIMARY ACTION BUTTONS ============================================================ */ .button-primary, .dashboard-create-button, .risk-event-actions-panel .button-primary { color: #ffffff !important; background: linear-gradient( 135deg, var(--corp-red), var(--corp-red-dark) ) !important; border-color: var(--corp-red-dark) !important; box-shadow: 0 7px 18px rgba(181, 18, 27, .20) !important; } .button-primary:hover, .dashboard-create-button:hover, .risk-event-actions-panel .button-primary:hover { color: #ffffff !important; background: linear-gradient( 135deg, var(--corp-red-hover), #870d14 ) !important; border-color: #870d14 !important; } /* Logout */ .topbar-user a { color: #ffffff !important; background: var(--corp-red) !important; } .topbar-user a:hover { background: var(--corp-red-dark) !important; } /* ============================================================ DASHBOARD ============================================================ */ .welcome-panel .eyebrow, .dashboard-card .eyebrow, .eyebrow.dark, .ui-section-eyebrow, .detail-section-eyebrow, .risk-event-actions-eyebrow { color: var(--corp-red) !important; } /* KPI numbers */ .stat-card strong { color: var(--corp-red) !important; } /* Chart */ .chart-bars span { background: linear-gradient( 180deg, #ed6670 0%, #d82d38 48%, var(--corp-red) 100% ) !important; } /* ============================================================ GENERAL RED ACCENTS ============================================================ */ .event-number-link { color: var(--corp-red) !important; } .event-number-link:hover { color: var(--corp-red-dark) !important; } /* ============================================================ TOP BAR ============================================================ */ .topbar { border-bottom-color: var(--corp-red) !important; } /* ============================================================ FORMS ============================================================ */ input, select, textarea { accent-color: var(--corp-red) !important; } input:focus, select:focus, textarea:focus { border-color: var(--corp-red) !important; box-shadow: 0 0 0 3px rgba(181, 18, 27, .10) !important; } /* ============================================================ SIDEBAR FOOTER ============================================================ */ .sidebar-footer span { color: #202124 !important; } /* ============================================================ LOGIN ============================================================ */ .login-page, .login-visual { background: linear-gradient( 135deg, #9d1017 0%, #c51a24 48%, #e54049 100% ) !important; } .login-card button { background: linear-gradient( 135deg, var(--corp-red), var(--corp-red-dark) ) !important; } /* ============================================================ SMALL SCREEN ============================================================ */ @media (max-width: 1150px) { .sidebar nav > a, .menu-group-button { min-height: 58px !important; padding: 10px 16px !important; font-size: 14px !important; } } /* ============================================================ SIDEBAR TYPOGRAPHY NORMALIZATION Всички главни менюта са с еднаква типография ============================================================ */ .sidebar nav > a, .sidebar .menu-group-button { font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; } /* Заключваме текста вътре в menu item-а, за да не наследява различни размери от стария CSS */ .sidebar nav > a span:not(.menu-icon):not(.menu-arrow), .sidebar .menu-group-button span:not(.menu-icon):not(.menu-arrow) { font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; } /* Иконите също са еднакви */ .sidebar .menu-icon { width: 18px !important; min-width: 18px !important; height: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; line-height: 1 !important; } /* Стрелката не трябва да влияе на височината */ .sidebar .menu-arrow { font-size: 12px !important; line-height: 1 !important; } /* Подменютата са нарочно една идея по-малки */ .sidebar .submenu a, .sidebar .submenu a span { font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.25 !important; } .sidebar .submenu a.active, .sidebar .submenu a.active span { font-weight: 700 !important; } /* На desktop НЕ намаляваме размера на главното меню */ @media (min-width: 1151px) { .sidebar nav > a, .sidebar .menu-group-button, .sidebar nav > a span:not(.menu-icon):not(.menu-arrow), .sidebar .menu-group-button span:not(.menu-icon):not(.menu-arrow) { font-size: 16px !important; } } /* ============================================================ SIDEBAR MAIN MENU - FINAL FONT SIZE ============================================================ */ @media (min-width: 1151px) { .sidebar nav > a, .sidebar .menu-group-button, .sidebar nav > a span:not(.menu-icon):not(.menu-arrow), .sidebar .menu-group-button span:not(.menu-icon):not(.menu-arrow) { font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; } } /* ============================================================ DASHBOARD CONTENT CENTERING ============================================================ */ .dashboard-home { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; } /* ============================================================ RISK EVENT WIZARD - CORPORATE RED THEME ============================================================ */ .risk-event-wizard .wizard-step-button { color: #2b2b2b !important; background: #ffffff !important; border-color: #e3e5e8 !important; } .risk-event-wizard .wizard-step-button:hover { border-color: #d7aeb2 !important; background: #fff7f7 !important; } .risk-event-wizard .wizard-step-button.is-active { color: #ffffff !important; background: linear-gradient( 135deg, var(--corp-red), var(--corp-red-dark) ) !important; border-color: var(--corp-red-dark) !important; box-shadow: 0 6px 16px rgba(181, 18, 27, .16) !important; } .risk-event-wizard .wizard-step-button.is-active * { color: #ffffff !important; } .risk-event-wizard .wizard-step-number { color: var(--corp-red-dark) !important; background: #fdebed !important; } .risk-event-wizard .wizard-step-button.is-active .wizard-step-number { color: var(--corp-red-dark) !important; background: #ffffff !important; } .risk-event-wizard .wizard-step-button.is-completed .wizard-step-number { color: var(--corp-red-dark) !important; background: #f8dadd !important; } /* Wizard card accents */ .risk-event-wizard .wizard-panel-general .wizard-content-card::before, .risk-event-wizard .wizard-panel-category .wizard-content-card::before, .risk-event-wizard .wizard-panel-classification .wizard-content-card::before { background: linear-gradient( 90deg, var(--corp-red), #e25a63 ) !important; } .risk-event-wizard .wizard-panel-general, .risk-event-wizard .wizard-panel-category, .risk-event-wizard .wizard-panel-classification { background: linear-gradient( 135deg, rgba(181, 18, 27, .028), transparent 42% ) !important; } /* ============================================================ RISK EVENT BACK LINK ============================================================ */ .risk-event-back-link { color: var(--corp-red-dark) !important; } .risk-event-back-link:hover { color: var(--corp-red) !important; } /* ============================================================ RISK EVENT ACTION PANEL - COMPACT CORPORATE VERSION ============================================================ */ .risk-event-actions-panel { position: relative !important; width: 100% !important; max-width: 300px !important; padding: 18px !important; color: #242424 !important; background: linear-gradient( 145deg, #ffffff 0%, #fff8f8 100% ) !important; border: 1px solid #e4d3d5 !important; border-radius: 16px !important; box-shadow: 0 10px 28px rgba(20, 25, 35, .08) !important; } .risk-event-actions-panel::after { right: -60px !important; top: -60px !important; background: rgba(181, 18, 27, .05) !important; } /* Heading */ .risk-event-actions-heading { gap: 10px !important; } .risk-event-actions-icon { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; color: var(--corp-red-dark) !important; background: #fdebed !important; border-radius: 10px !important; font-size: 1rem !important; } .risk-event-actions-eyebrow { color: var(--corp-red) !important; } .risk-event-actions-heading h2 { color: #242424 !important; font-size: 1.05rem !important; } /* Buttons */ .risk-event-actions-buttons { gap: 8px !important; margin-top: 16px !important; } .risk-event-actions-panel .button-light { color: #333333 !important; background: #ffffff !important; border-color: #d8dadd !important; } .risk-event-actions-panel .button-light:hover { color: var(--corp-red-dark) !important; background: #fff4f5 !important; border-color: #e2b6ba !important; } .risk-event-actions-panel .button-primary { color: #ffffff !important; background: linear-gradient( 135deg, var(--corp-red), var(--corp-red-dark) ) !important; border-color: var(--corp-red-dark) !important; } /* Summary */ .risk-event-actions-summary { gap: 8px !important; margin-top: 16px !important; padding-top: 14px !important; border-top: 1px solid #eadbdd !important; } .risk-event-actions-summary > div { grid-template-columns: 92px minmax(0, 1fr) !important; gap: 8px !important; } .risk-event-actions-summary dt { color: #72767d !important; font-size: .74rem !important; } .risk-event-actions-summary dd { color: #242424 !important; font-size: .82rem !important; } /* Status badge stays semantic */ .risk-event-actions-panel .status-badge { background: #ffffff !important; } /* ============================================================ EVENT WORKSPACE TABS ============================================================ */ .risk-event-tab-navigation { border-color: #e2e5e9 !important; background: #fafafa !important; } .risk-event-tab-navigation a, .risk-event-tab-navigation button { color: #4a4d52 !important; } .risk-event-tab-navigation .active, .risk-event-tab-navigation [aria-selected="true"] { color: var(--corp-red-dark) !important; background: #ffffff !important; border-color: #eadbdd !important; } /* ============================================================ DESKTOP ACTION PANEL SIZE ============================================================ */ @media (min-width: 1200px) { .risk-event-actions-panel { max-width: 290px !important; } } /* ========================================================= RISK EVENT WORKSPACE - HORIZONTAL ACTION PANEL ========================================================= */ /* * Heading + work panel are now stacked vertically. * This gives the event title and tabs the full content width. */ .risk-event-workspace-heading { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; align-items: stretch !important; margin-bottom: 20px !important; } /* --------------------------------------------------------- Work panel --------------------------------------------------------- */ .risk-event-actions-panel { width: 100% !important; max-width: none !important; padding: 16px 20px !important; border: 1px solid #ead4d6 !important; border-radius: 16px !important; background: linear-gradient( 135deg, #ffffff 0%, #fffafa 72%, #fff3f4 100% ) !important; color: #1f2328 !important; box-shadow: 0 8px 24px rgba(80, 20, 25, 0.06) !important; } /* Decorative circle */ .risk-event-actions-panel::after { right: -45px !important; top: -70px !important; width: 150px !important; height: 150px !important; background: rgba(177, 18, 27, 0.045) !important; } /* --------------------------------------------------------- Heading --------------------------------------------------------- */ .risk-event-actions-heading { gap: 10px !important; align-items: center !important; } .risk-event-actions-icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; border-radius: 10px !important; background: #fff0f1 !important; color: #b5121b !important; font-size: 1rem !important; } .risk-event-actions-eyebrow { margin-bottom: 1px !important; color: #b5121b !important; font-size: 0.68rem !important; font-weight: 800 !important; } .risk-event-actions-heading h2 { color: #202124 !important; font-size: 1rem !important; } /* --------------------------------------------------------- Buttons - horizontal --------------------------------------------------------- */ .risk-event-actions-buttons { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 14px !important; } .risk-event-actions-buttons > * { width: auto !important; margin: 0 !important; } .risk-event-actions-buttons form { display: inline-flex !important; } .risk-event-actions-panel .action-button-wide { width: auto !important; min-width: 145px !important; min-height: 40px !important; padding: 8px 16px !important; justify-content: center !important; } /* Normal action */ .risk-event-actions-panel .button-light { border: 1px solid #d8dde5 !important; background: #ffffff !important; color: #202124 !important; } .risk-event-actions-panel .button-light:hover { border-color: #b5121b !important; background: #fff5f5 !important; color: #9e1119 !important; } /* Primary / destructive workflow action */ .risk-event-actions-panel .button-primary { border-color: #b5121b !important; background: #b5121b !important; color: #ffffff !important; box-shadow: 0 5px 14px rgba(181, 18, 27, 0.14) !important; } .risk-event-actions-panel .button-primary:hover { border-color: #941018 !important; background: #941018 !important; } /* --------------------------------------------------------- Event summary --------------------------------------------------------- */ .risk-event-actions-summary { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 18px 34px !important; margin: 14px 0 0 !important; padding-top: 12px !important; border-top: 1px solid #eadfe0 !important; } .risk-event-actions-summary > div { display: flex !important; grid-template-columns: none !important; gap: 8px !important; align-items: center !important; } .risk-event-actions-summary dt { color: #6c727f !important; font-size: 0.76rem !important; } .risk-event-actions-summary dd { color: #202124 !important; font-size: 0.82rem !important; } /* Status badge stays readable */ .risk-event-actions-panel .status-badge { background: #eef5ff !important; } /* --------------------------------------------------------- Corporate colors for event workspace --------------------------------------------------------- */ .risk-event-title-row h1 { color: #202124 !important; } .risk-event-heading-main > p { color: #68707d !important; } .risk-event-back-link { color: #a51018 !important; } .risk-event-back-link:hover { color: #7f0c12 !important; } /* --------------------------------------------------------- Tabs --------------------------------------------------------- */ .risk-event-tabs { margin-top: 0 !important; } .risk-event-tab-navigation { background: #fafafa !important; border-color: #e0e3e7 !important; } .risk-event-tab-button { color: #4b4f55 !important; } .risk-event-tab-button:hover { color: #a51018 !important; background: #fff7f7 !important; } .risk-event-tab-button.is-active { color: #a51018 !important; background: #ffffff !important; } .risk-event-tab-button.is-active::after { background: #b5121b !important; } .detail-section-eyebrow { color: #b5121b !important; } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 900px) { .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .risk-event-actions-buttons > *, .risk-event-actions-buttons form, .risk-event-actions-panel .action-button-wide { width: 100% !important; } .risk-event-actions-summary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { .risk-event-actions-buttons, .risk-event-actions-summary { grid-template-columns: 1fr !important; } .risk-event-actions-panel { padding: 14px !important; } } /* ============================================================ RISK EVENT HEADER - COMPACT TWO COLUMN LAYOUT ============================================================ */ @media (min-width: 1100px) { .risk-event-workspace-heading { display: grid !important; grid-template-columns: minmax(0, 1fr) 430px !important; gap: 18px !important; align-items: stretch !important; margin-bottom: 14px !important; } /* ======================================================== LEFT - EVENT SUMMARY ======================================================== */ .risk-event-heading-main { min-width: 0 !important; padding: 22px 26px !important; background: linear-gradient( 135deg, #ffffff 0%, #ffffff 72%, #fff8f8 100% ) !important; border: 1px solid #e2e5e9 !important; border-radius: 16px !important; box-shadow: 0 7px 22px rgba(20, 25, 35, .055) !important; } .risk-event-title-row { margin-top: 9px !important; gap: 12px !important; } .risk-event-title-row h1 { font-size: clamp(1.65rem, 2.4vw, 2.25rem) !important; color: #202124 !important; } .risk-event-heading-main > p { margin-top: 9px !important; } .risk-event-back-link { margin-top: 12px !important; } /* ======================================================== RIGHT - COMPACT WORK PANEL ======================================================== */ .risk-event-actions-panel { width: auto !important; max-width: none !important; padding: 18px !important; border-radius: 16px !important; } /* compact heading */ .risk-event-actions-heading { margin-bottom: 0 !important; } /* -------------------------------------------------------- BUTTONS - two columns -------------------------------------------------------- */ .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 13px !important; } .risk-event-actions-buttons > *, .risk-event-actions-buttons form { display: flex !important; width: 100% !important; margin: 0 !important; } .risk-event-actions-panel .action-button-wide { width: 100% !important; min-width: 0 !important; min-height: 38px !important; padding: 7px 10px !important; font-size: .82rem !important; } /* * При нечетен брой действия последният * може да заеме цялата ширина. */ .risk-event-actions-buttons > *:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } /* -------------------------------------------------------- SUMMARY -------------------------------------------------------- */ .risk-event-actions-summary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 14px !important; margin-top: 13px !important; padding-top: 11px !important; } .risk-event-actions-summary > div { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 6px !important; align-items: center !important; } .risk-event-actions-summary > div:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } .risk-event-actions-summary dt { white-space: nowrap !important; } /* ======================================================== TABS CLOSER TO HEADER ======================================================== */ .risk-event-tabs { margin-top: 0 !important; } } /* ============================================================ MEDIUM SCREENS ============================================================ */ @media (min-width: 800px) and (max-width: 1099px) { .risk-event-workspace-heading { grid-template-columns: 1fr !important; gap: 14px !important; } .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .risk-event-actions-buttons > *, .risk-event-actions-buttons form, .risk-event-actions-panel .action-button-wide { width: 100% !important; } } /* ============================================================ RISK EVENT HEADER - COMPACT FINAL LAYOUT ============================================================ */ @media (min-width: 1100px) { /* * Лявата карта е компактна. * Работният панел получава повече място. */ .risk-event-workspace-heading { display: grid !important; grid-template-columns: minmax(420px, 0.8fr) minmax(620px, 1.2fr) !important; gap: 14px !important; align-items: start !important; margin-bottom: 12px !important; } /* ======================================================== EVENT SUMMARY - MAXIMUM COMPACTION ======================================================== */ .risk-event-heading-main { min-width: 0 !important; padding: 16px 18px !important; border: 1px solid #e2e5e9 !important; border-radius: 14px !important; background: linear-gradient( 135deg, #ffffff 0%, #ffffff 78%, #fff8f8 100% ) !important; box-shadow: 0 5px 16px rgba(20, 25, 35, .045) !important; } .risk-event-heading-main .eyebrow { margin-bottom: 5px !important; font-size: .66rem !important; line-height: 1 !important; } .risk-event-title-row { margin-top: 5px !important; gap: 8px !important; align-items: center !important; } .risk-event-title-row h1 { margin: 0 !important; font-size: clamp(1.35rem, 1.65vw, 1.72rem) !important; line-height: 1.12 !important; color: #202124 !important; } .risk-event-title-row .status-badge { font-size: .7rem !important; padding: 5px 9px !important; } .risk-event-heading-main > p { margin: 7px 0 0 !important; font-size: .82rem !important; line-height: 1.35 !important; color: #69717d !important; } .risk-event-back-link { margin-top: 8px !important; font-size: .8rem !important; } /* ======================================================== WORK PANEL - GIVE IT THE SPACE ======================================================== */ .risk-event-actions-panel { width: 100% !important; max-width: none !important; padding: 14px 16px !important; border-radius: 14px !important; min-height: 0 !important; } .risk-event-actions-heading { gap: 8px !important; } .risk-event-actions-icon { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 9px !important; } .risk-event-actions-eyebrow { font-size: .63rem !important; } .risk-event-actions-heading h2 { font-size: .92rem !important; } /* ======================================================== ACTION BUTTON GRID ======================================================== */ .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; margin-top: 10px !important; } .risk-event-actions-buttons > *, .risk-event-actions-buttons form { width: 100% !important; min-width: 0 !important; margin: 0 !important; } .risk-event-actions-panel .action-button-wide { width: 100% !important; min-width: 0 !important; min-height: 36px !important; padding: 6px 8px !important; font-size: .75rem !important; white-space: normal !important; line-height: 1.15 !important; } /* ======================================================== OWNER CHANGE / NESTED CONTROLS ======================================================== */ .risk-event-actions-panel select, .risk-event-actions-panel input { min-height: 34px !important; padding: 5px 8px !important; font-size: .74rem !important; } .risk-event-actions-panel form button { min-height: 36px !important; } /* * По-сложните форми в панела могат да заемат * цяла линия вместо да се мачкат. */ .risk-event-actions-buttons form:has(select), .risk-event-actions-buttons form:has(input:not([type="hidden"])) { grid-column: 1 / -1 !important; } /* ======================================================== SUMMARY - ONE COMPACT LINE ======================================================== */ .risk-event-actions-summary { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 24px !important; margin-top: 10px !important; padding-top: 9px !important; } .risk-event-actions-summary > div { display: flex !important; gap: 6px !important; align-items: center !important; } .risk-event-actions-summary dt { font-size: .68rem !important; white-space: nowrap !important; } .risk-event-actions-summary dd { font-size: .75rem !important; white-space: nowrap !important; } /* ======================================================== BRING TABS UP ======================================================== */ .risk-event-tabs { margin-top: 0 !important; } .risk-event-tab-navigation { padding-top: 5px !important; } .risk-event-tab-button { min-height: 46px !important; padding: 0 18px !important; font-size: .88rem !important; } } /* ============================================================ VERY LARGE DESKTOP ============================================================ */ @media (min-width: 1450px) { .risk-event-workspace-heading { grid-template-columns: minmax(460px, .75fr) minmax(700px, 1.25fr) !important; } } /* ============================================================ SMALLER DESKTOP ============================================================ */ @media (min-width: 1100px) and (max-width: 1250px) { .risk-event-workspace-heading { grid-template-columns: minmax(380px, .7fr) minmax(540px, 1.3fr) !important; } } /* ============================================================ RISK EVENT ACTION PANEL - RESPONSIVE FINAL LAYOUT ============================================================ */ @media (min-width: 1100px) { /* * Горният layout: * компактна информация за събитието + * по-широк работен панел. */ .risk-event-workspace-heading { grid-template-columns: minmax(390px, 0.72fr) minmax(650px, 1.28fr) !important; gap: 14px !important; align-items: start !important; } /* Панелът никога не се разтяга излишно по височина */ .risk-event-actions-panel { align-self: start !important; height: auto !important; min-height: 0 !important; padding: 13px 15px !important; } /* -------------------------------------------------------- NORMAL ACTION BUTTONS -------------------------------------------------------- */ .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; margin-top: 9px !important; } .risk-event-actions-buttons > *, .risk-event-actions-buttons > form { width: 100% !important; min-width: 0 !important; margin: 0 !important; } .risk-event-actions-panel .action-button-wide { width: 100% !important; min-width: 0 !important; min-height: 34px !important; padding: 6px 9px !important; font-size: .75rem !important; line-height: 1.15 !important; white-space: normal !important; } /* -------------------------------------------------------- OWNER TRANSFER FORM Формата със select винаги получава собствен цял ред. -------------------------------------------------------- */ .risk-event-actions-buttons > form:has(select), .risk-event-actions-buttons > form:has( input:not([type="hidden"]) ) { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(180px, 1fr) auto auto !important; gap: 8px !important; align-items: end !important; padding: 10px !important; border: 1px solid #eadbdd !important; border-radius: 10px !important; background: #fffafa !important; } /* * Ако във form-а има label + select, * label-ът може да стои над select-а, * без да раздува целия панел. */ .risk-event-actions-buttons > form:has(select) label { display: block !important; margin: 0 0 4px !important; color: #646970 !important; font-size: .67rem !important; font-weight: 700 !important; } .risk-event-actions-buttons > form:has(select) select { width: 100% !important; min-width: 0 !important; min-height: 34px !important; padding: 5px 8px !important; font-size: .73rem !important; } .risk-event-actions-buttons > form:has(select) button { width: auto !important; min-width: 86px !important; min-height: 34px !important; padding: 5px 12px !important; white-space: nowrap !important; } /* -------------------------------------------------------- SUMMARY - ЕДИН КОМПАКТЕН РЕД -------------------------------------------------------- */ .risk-event-actions-summary { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px 24px !important; margin-top: 9px !important; padding-top: 8px !important; } .risk-event-actions-summary > div { display: flex !important; gap: 6px !important; align-items: center !important; } .risk-event-actions-summary dt { font-size: .67rem !important; white-space: nowrap !important; } .risk-event-actions-summary dd { font-size: .74rem !important; white-space: nowrap !important; } } /* ============================================================ LARGE DESKTOP ============================================================ */ @media (min-width: 1500px) { /* * На големи монитори бутоните могат да са на 4 колони. * Така панелът става по-нисък. */ .risk-event-actions-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } /* * Формата за owner transfer пак винаги е цял ред. */ .risk-event-actions-buttons > form:has(select), .risk-event-actions-buttons > form:has( input:not([type="hidden"]) ) { grid-column: 1 / -1 !important; } } /* ============================================================ MEDIUM DESKTOP ============================================================ */ @media (min-width: 1100px) and (max-width: 1299px) { .risk-event-workspace-heading { grid-template-columns: minmax(350px, .68fr) minmax(560px, 1.32fr) !important; } .risk-event-actions-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ============================================================ TABLET / NARROW WINDOW ============================================================ */ @media (max-width: 1099px) { .risk-event-workspace-heading { grid-template-columns: 1fr !important; } .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .risk-event-actions-buttons > form:has(select), .risk-event-actions-buttons > form:has( input:not([type="hidden"]) ) { grid-column: 1 / -1 !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 650px) { .risk-event-actions-buttons { grid-template-columns: 1fr !important; } .risk-event-actions-buttons > form:has(select) { display: grid !important; grid-template-columns: 1fr !important; } .risk-event-actions-buttons > form:has(select) button { width: 100% !important; } } /* ============================================================ RISK EVENT ACTION PANEL - RESPONSIVE FINAL LAYOUT ============================================================ */ @media (min-width: 1100px) { /* * Горният layout: * компактна информация за събитието + * по-широк работен панел. */ .risk-event-workspace-heading { grid-template-columns: minmax(390px, 0.72fr) minmax(650px, 1.28fr) !important; gap: 14px !important; align-items: start !important; } /* Панелът никога не се разтяга излишно по височина */ .risk-event-actions-panel { align-self: start !important; height: auto !important; min-height: 0 !important; padding: 13px 15px !important; } /* -------------------------------------------------------- NORMAL ACTION BUTTONS -------------------------------------------------------- */ .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; margin-top: 9px !important; } .risk-event-actions-buttons > *, .risk-event-actions-buttons > form { width: 100% !important; min-width: 0 !important; margin: 0 !important; } .risk-event-actions-panel .action-button-wide { width: 100% !important; min-width: 0 !important; min-height: 34px !important; padding: 6px 9px !important; font-size: .75rem !important; line-height: 1.15 !important; white-space: normal !important; } /* -------------------------------------------------------- OWNER TRANSFER FORM Формата със select винаги получава собствен цял ред. -------------------------------------------------------- */ .risk-event-actions-buttons > form:has(select), .risk-event-actions-buttons > form:has( input:not([type="hidden"]) ) { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(180px, 1fr) auto auto !important; gap: 8px !important; align-items: end !important; padding: 10px !important; border: 1px solid #eadbdd !important; border-radius: 10px !important; background: #fffafa !important; } /* * Ако във form-а има label + select, * label-ът може да стои над select-а, * без да раздува целия панел. */ .risk-event-actions-buttons > form:has(select) label { display: block !important; margin: 0 0 4px !important; color: #646970 !important; font-size: .67rem !important; font-weight: 700 !important; } .risk-event-actions-buttons > form:has(select) select { width: 100% !important; min-width: 0 !important; min-height: 34px !important; padding: 5px 8px !important; font-size: .73rem !important; } .risk-event-actions-buttons > form:has(select) button { width: auto !important; min-width: 86px !important; min-height: 34px !important; padding: 5px 12px !important; white-space: nowrap !important; } /* -------------------------------------------------------- SUMMARY - ЕДИН КОМПАКТЕН РЕД -------------------------------------------------------- */ .risk-event-actions-summary { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px 24px !important; margin-top: 9px !important; padding-top: 8px !important; } .risk-event-actions-summary > div { display: flex !important; gap: 6px !important; align-items: center !important; } .risk-event-actions-summary dt { font-size: .67rem !important; white-space: nowrap !important; } .risk-event-actions-summary dd { font-size: .74rem !important; white-space: nowrap !important; } } /* ============================================================ LARGE DESKTOP ============================================================ */ @media (min-width: 1500px) { /* * На големи монитори бутоните могат да са на 4 колони. * Така панелът става по-нисък. */ .risk-event-actions-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } /* * Формата за owner transfer пак винаги е цял ред. */ .risk-event-actions-buttons > form:has(select), .risk-event-actions-buttons > form:has( input:not([type="hidden"]) ) { grid-column: 1 / -1 !important; } } /* ============================================================ MEDIUM DESKTOP ============================================================ */ @media (min-width: 1100px) and (max-width: 1299px) { .risk-event-workspace-heading { grid-template-columns: minmax(350px, .68fr) minmax(560px, 1.32fr) !important; } .risk-event-actions-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ============================================================ TABLET / NARROW WINDOW ============================================================ */ @media (max-width: 1099px) { .risk-event-workspace-heading { grid-template-columns: 1fr !important; } .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .risk-event-actions-buttons > form:has(select), .risk-event-actions-buttons > form:has( input:not([type="hidden"]) ) { grid-column: 1 / -1 !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 650px) { .risk-event-actions-buttons { grid-template-columns: 1fr !important; } .risk-event-actions-buttons > form:has(select) { display: grid !important; grid-template-columns: 1fr !important; } .risk-event-actions-buttons > form:has(select) button { width: 100% !important; } } /* ============================================================ RISK EVENT ACTION PANEL - UNIFORM BUTTONS ============================================================ */ @media (min-width: 1100px) { .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; align-items: start !important; margin-top: 10px !important; } /* -------------------------------------------------------- ВСИЧКИ ОСНОВНИ БУТОНИ СА ЕДНАКВИ -------------------------------------------------------- */ .risk-event-actions-buttons > a, .risk-event-actions-buttons > button, .risk-event-actions-buttons > form:not(:has(select)) { width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; align-self: start !important; } .risk-event-actions-buttons > form:not(:has(select)) { display: block !important; } .risk-event-actions-buttons > form:not(:has(select)) .action-button-wide, .risk-event-actions-buttons > a.action-button-wide, .risk-event-actions-buttons > button.action-button-wide { width: 100% !important; height: 42px !important; min-height: 42px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: .78rem !important; font-weight: 700 !important; line-height: 1.1 !important; white-space: nowrap !important; } /* -------------------------------------------------------- OWNER TRANSFER FORM - ОТДЕЛЕН РЕД -------------------------------------------------------- */ .risk-event-actions-buttons > form:has(select) { grid-column: 1 / -1 !important; width: 100% !important; height: auto !important; display: grid !important; grid-template-columns: minmax(220px, 1fr) 100px 110px !important; gap: 8px !important; align-items: end !important; padding: 9px 10px !important; background: #fffafa !important; border: 1px solid #eadbdd !important; border-radius: 10px !important; } .risk-event-actions-buttons > form:has(select) select { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; } /* * Отказ / Прехвърли също са еднакви */ .risk-event-actions-buttons > form:has(select) button { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; font-size: .76rem !important; font-weight: 700 !important; } /* Панелът да не разтяга редовете */ .risk-event-actions-panel { height: auto !important; align-self: start !important; } } /* ============================================================ NORMAL DESKTOP ============================================================ */ @media (min-width: 1100px) and (max-width: 1450px) { .risk-event-actions-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ============================================================ NARROW ============================================================ */ @media (max-width: 1099px) { .risk-event-actions-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .risk-event-actions-buttons .action-button-wide { min-height: 42px !important; height: 42px !important; } } /* ============================================================ RISK EVENT ACTION PANEL - UNIFORM BUTTONS ============================================================ */ @media (min-width: 1100px) { .risk-event-actions-buttons { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; align-items: start !important; margin-top: 10px !important; } /* -------------------------------------------------------- ВСИЧКИ ОСНОВНИ БУТОНИ СА ЕДНАКВИ -------------------------------------------------------- */ .risk-event-actions-buttons > a, .risk-event-actions-buttons > button, .risk-event-actions-buttons > form:not(:has(select)) { width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; align-self: start !important; } .risk-event-actions-buttons > form:not(:has(select)) { display: block !important; } .risk-event-actions-buttons > form:not(:has(select)) .action-button-wide, .risk-event-actions-buttons > a.action-button-wide, .risk-event-actions-buttons > button.action-button-wide { width: 100% !important; height: 42px !important; min-height: 42px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: .78rem !important; font-weight: 700 !important; line-height: 1.1 !important; white-space: nowrap !important; } /* -------------------------------------------------------- OWNER TRANSFER FORM - ОТДЕЛЕН РЕД -------------------------------------------------------- */ .risk-event-actions-buttons > form:has(select) { grid-column: 1 / -1 !important; width: 100% !important; height: auto !important; display: grid !important; grid-template-columns: minmax(220px, 1fr) 100px 110px !important; gap: 8px !important; align-items: end !important; padding: 9px 10px !important; background: #fffafa !important; border: 1px solid #eadbdd !important; border-radius: 10px !important; } .risk-event-actions-buttons > form:has(select) select { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; } /* * Отказ / Прехвърли също са еднакви */ .risk-event-actions-buttons > form:has(select) button { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; font-size: .76rem !important; font-weight: 700 !important; } /* Панелът да не разтяга редовете */ .risk-event-actions-panel { height: auto !important; align-self: start !important; } } /* ============================================================ NORMAL DESKTOP ============================================================ */ @media (min-width: 1100px) and (max-width: 1450px) { .risk-event-actions-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ============================================================ NARROW ============================================================ */ @media (max-width: 1099px) { .risk-event-actions-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .risk-event-actions-buttons .action-button-wide { min-height: 42px !important; height: 42px !important; } } /* ========================================================== Topbar brand - larger and more visible ========================================================== */ .topbar { min-height: 76px; } .topbar-brand { gap: 14px; } /* Client / iBank logo */ .topbar-brand .client-logo-shell { width: 52px; height: 52px; flex: 0 0 52px; } .topbar-brand .client-logo-shell img { width: 100%; height: 100%; object-fit: contain; } /* RiskAnalysis title */ .topbar-brand strong { display: block; font-size: 20px; line-height: 1.1; font-weight: 800; color: #171717; } /* Subtitle */ .topbar-brand small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.2; color: #6b7280; } /* Keep the user area vertically centered */ .topbar-user { align-self: center; } @media (max-width: 700px) { .topbar { min-height: 66px; } .topbar-brand .client-logo-shell { width: 44px; height: 44px; flex-basis: 44px; } .topbar-brand strong { font-size: 18px; } .topbar-brand small { font-size: 10px; } } /* Final brand size adjustment */ .topbar { min-height: 82px; } .topbar-brand .client-logo-shell { width: 58px; height: 58px; flex: 0 0 58px; } .topbar-brand strong { font-size: 22px; } .topbar-brand small { margin-top: 4px; font-size: 12px; } /* ============================================================ LOGIN PAGE - FINAL CORPORATE VERSION ============================================================ */ /* * Позволяваме на risk-1/2/3.jpg от login.css * отново да се виждат. */ body:has(.login-page) { background: #f5f5f5 !important; } body:has(.login-page) .login-page { background: transparent !important; } /* ------------------------------------------------------------ BACKGROUND SLIDES ------------------------------------------------------------ */ body:has(.login-page) .background-slider { background: #f4f4f4 !important; } body:has(.login-page) .background-slide { filter: saturate(.72) contrast(.94) brightness(1.07); } /* * Светъл corporate overlay. * Снимките остават видими, но не конкурират login формата. */ body:has(.login-page) .background-overlay { background: linear-gradient( 115deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .52) 42%, rgba(255, 245, 246, .50) 70%, rgba(181, 18, 27, .14) 100% ) !important; } /* ------------------------------------------------------------ LOGIN CARD ------------------------------------------------------------ */ body:has(.login-page) .login-card { width: 100% !important; max-width: 440px !important; padding: 36px 40px 28px !important; border: 1px solid rgba(210, 214, 220, .92) !important; border-radius: 18px !important; background: rgba(255, 255, 255, .96) !important; box-shadow: 0 24px 70px rgba(30, 35, 45, .17), 0 5px 18px rgba(30, 35, 45, .08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* ------------------------------------------------------------ CLIENT LOGO ------------------------------------------------------------ */ body:has(.login-page) .application-logo { display: flex !important; justify-content: center !important; margin-bottom: 17px !important; } body:has(.login-page) .application-logo img { display: block !important; width: 108px !important; height: 68px !important; object-fit: contain !important; } /* * Не позволяваме старото правило за PA badge * да се прилага. */ body:has(.login-page) .application-logo span { display: none !important; } /* ------------------------------------------------------------ TITLE ------------------------------------------------------------ */ body:has(.login-page) .login-header { margin-bottom: 27px !important; } body:has(.login-page) .login-header h1 { color: #242424 !important; font-size: 34px !important; font-weight: 800 !important; letter-spacing: -1.2px !important; } body:has(.login-page) .login-header p { margin-top: 7px !important; color: #707780 !important; font-size: 14px !important; } /* ------------------------------------------------------------ FORM ------------------------------------------------------------ */ body:has(.login-page) .login-form { gap: 18px !important; } body:has(.login-page) .login-form label { color: #33373c !important; font-weight: 700 !important; } body:has(.login-page) .login-form input { height: 50px !important; color: #252525 !important; background: rgba(250, 251, 252, .97) !important; border: 1px solid #d9dde3 !important; border-radius: 9px !important; } body:has(.login-page) .login-form input:focus { background: #ffffff !important; border-color: #b5121b !important; box-shadow: 0 0 0 4px rgba(181, 18, 27, .10) !important; } /* ------------------------------------------------------------ LOGIN BUTTON ------------------------------------------------------------ */ body:has(.login-page) .login-form button { height: 52px !important; color: #ffffff !important; background: linear-gradient( 135deg, #c51621 0%, #a80f18 100% ) !important; border-radius: 9px !important; box-shadow: 0 9px 22px rgba(181, 18, 27, .20) !important; } body:has(.login-page) .login-form button:hover { background: linear-gradient( 135deg, #b5121b 0%, #900c13 100% ) !important; box-shadow: 0 12px 27px rgba(181, 18, 27, .26) !important; } /* ------------------------------------------------------------ FOOTER ------------------------------------------------------------ */ body:has(.login-page) .login-footer { color: #8a9098 !important; } /* ------------------------------------------------------------ LOGIN ERROR ------------------------------------------------------------ */ body:has(.login-page) .login-error { color: #9f1119 !important; border-color: #efc5c8 !important; background: #fff3f4 !important; } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 520px) { body:has(.login-page) .login-card { padding: 28px 22px 24px !important; } body:has(.login-page) .application-logo img { width: 92px !important; height: 58px !important; } body:has(.login-page) .login-header h1 { font-size: 29px !important; } } /* ============================================================ TAKEN MEASURES FORM ============================================================ */ /* * Заглавие и Статус започват от една и съща * вертикална позиция. Helper text под заглавието * вече не измества Status полето надолу. */ .taken-measure-header-grid { align-items: start !important; } .taken-measure-header-grid > .form-field { align-self: start !important; } /* * Input и select са с абсолютно еднаква височина. */ .taken-measure-header-grid input, .taken-measure-header-grid select { height: 52px !important; min-height: 52px !important; } /* ============================================================ RISK EVENT - TAKEN MEASURES TAB ============================================================ */ .taken-measure-empty-text { margin: 0 0 18px; color: #69717d; } .taken-measure-search-form { margin-bottom: 18px; } .taken-measure-results { margin-top: 14px; } .taken-measure-results .button { min-height: 38px; } .taken-measure-attached .detail-grid { margin-top: 4px; } .taken-measure-actions { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5e7eb; } .taken-measure-actions .button { min-width: 160px; } .module-alert-actions { margin-top: 14px; } .module-alert-actions .button { display: inline-flex; align-items: center; } /* RISK EVENT - TAKEN MEASURE DETAILS */ .taken-measure-details { display: flex; flex-direction: column; gap: 8px; } .taken-measure-detail-row { line-height: 1.5; } .taken-measure-detail-row strong { font-weight: 700; margin-right: 6px; color: #1f2937; } .taken-measure-detail-row span { font-weight: 400; color: #111827; } /* Risk event datetime validation */ #discovered-datetime-error { display: none; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border: 1px solid #dc2626; border-radius: 10px; background: #fff1f2; color: #dc2626; font-size: 15px; font-weight: 700; line-height: 1.4; } #discovered-datetime-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #dc2626; color: #ffffff; font-size: 20px; font-weight: 800; line-height: 1; } /* Risk Matrix Designer */ .workspace-tabs { display: flex; gap: 8px; margin: 18px 0 0; padding: 0 4px; border-bottom: 1px solid #dfe3e8; } .workspace-tab { appearance: none; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #4b5563; padding: 12px 18px; font: inherit; font-weight: 700; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .workspace-tab:hover { color: #b5121b; background: #fff5f5; } .workspace-tab.is-active { color: #b5121b; border-bottom-color: #b5121b; } .workspace-panel { display: none; margin-top: 18px; } .workspace-panel.is-active { display: block; } .workspace-panel .form-card { margin-bottom: 18px; } .workspace-panel .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-top: 24px; } .workspace-panel .form-group { display: flex; flex-direction: column; gap: 7px; } .workspace-panel .form-group label { font-weight: 700; color: #20242a; } .workspace-panel .form-group input, .workspace-panel .form-group textarea, .workspace-panel .form-group select { width: 100%; box-sizing: border-box; border: 1px solid #d9dee5; border-radius: 8px; background: #fff; padding: 11px 13px; font: inherit; } .workspace-panel .form-group input:focus, .workspace-panel .form-group textarea:focus, .workspace-panel .form-group select:focus { outline: none; border-color: #b5121b; box-shadow: 0 0 0 3px rgba(181, 18, 27, .08); } .workspace-panel .form-group small { color: #6b7280; font-size: 12px; } .workspace-panel .form-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5e7eb; } @media (max-width: 900px) { .workspace-tabs { overflow-x: auto; } .workspace-tab { white-space: nowrap; } .workspace-panel .form-grid { grid-template-columns: 1fr; } } .risk-level-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 22px; } .risk-level-option { display: flex; align-items: center; gap: 12px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; padding: 14px; cursor: pointer; } .risk-level-option input { width: 18px; height: 18px; flex: 0 0 auto; } .risk-level-color { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); } .risk-level-content { display: flex; flex-direction: column; gap: 3px; } .risk-level-content small { color: #6b7280; } /* Qualitative Risk Matrix */ .risk-matrix-scroll { width: 100%; overflow-x: auto; margin-top: 24px; } .risk-matrix-editor { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 4px; } .risk-matrix-editor th, .risk-matrix-editor td { border-radius: 8px; } .risk-matrix-editor thead th { min-width: 160px; background: #f4f5f7; padding: 14px; text-align: center; vertical-align: middle; } .risk-matrix-editor th small { display: block; margin-top: 5px; color: #6b7280; font-weight: 400; } .risk-matrix-corner { min-width: 190px !important; text-align: left !important; } .risk-matrix-row-header { width: 190px; min-width: 190px; background: #f4f5f7; padding: 14px; text-align: left; } .risk-matrix-cell { min-width: 160px; height: 78px; padding: 10px; background: #f8fafc; border: 1px solid #e1e5ea; text-align: center; transition: background-color .15s ease; } .risk-matrix-level-select { width: 100%; min-width: 130px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 7px; background: rgba(255, 255, 255, .88); padding: 9px 10px; font: inherit; font-weight: 600; } .matrix-version-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 16px; } .matrix-version-actions form { margin: 0; } .default-matrix-badge { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid #b7d8b8; border-radius: 8px; background: #eef8ef; color: #256329; font-weight: 700; } .qualitative-status-card { margin-top: 18px; padding: 20px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fafafa; } .qualitative-status-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .qualitative-status-main form { flex: 0 0 auto; margin: 0; } .qualitative-status-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #777; } .qualitative-status-value { display: block; margin-bottom: 6px; font-size: 18px; } .qualitative-status-main p { margin: 0; color: #666; } .qualitative-assessment-placeholder { margin-top: 20px; padding: 20px; border: 1px dashed #ccc; border-radius: 10px; } .qualitative-assessment-placeholder h3 { margin: 5px 0 8px; } .qualitative-assessment-placeholder p { margin: 0; color: #666; } @media (max-width: 800px) { .qualitative-status-main { align-items: flex-start; flex-direction: column; } } .qualitative-assessment-editor { margin-top: 20px; padding: 24px; border: 1px solid #e0e4e8; border-radius: 10px; background: #fff; } .qualitative-editor-heading { margin-bottom: 22px; } .qualitative-editor-heading h3 { margin: 5px 0 0; } .qualitative-form-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 18px; align-items: end; } .qualitative-risk-result { display: flex; min-height: 42px; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid #d9dee5; border-radius: 7px; background: #f7f8fa; font-weight: 800; text-align: center; } .qualitative-matrix-loading, .qualitative-matrix-error { margin-top: 22px; padding: 14px 16px; border-radius: 8px; } .qualitative-matrix-loading { background: #f5f7fa; } .qualitative-matrix-error { border: 1px solid #efb7b7; background: #fff1f1; color: #a40000; } .qualitative-matrix-container { margin-top: 24px; overflow-x: auto; } .qualitative-matrix-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 4px; } .qualitative-matrix-table th { padding: 10px; font-size: 13px; text-align: center; } .qualitative-matrix-table th:first-child { min-width: 150px; text-align: left; } .qualitative-matrix-cell { min-width: 110px; height: 72px; padding: 8px; border: 3px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 800; text-align: center; vertical-align: middle; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .qualitative-matrix-cell.is-selected { border-color: #111; box-shadow: 0 0 0 2px #fff inset; transform: scale(1.03); } .qualitative-matrix-cell-score { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; } .qualitative-save-area { display: flex; justify-content: flex-end; margin-top: 22px; } @media (max-width: 1050px) { .qualitative-form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } } @media (max-width: 650px) { .qualitative-form-grid { grid-template-columns: 1fr; } } .qualitative-form-grid .form-group { display: flex; flex-direction: column; gap: 7px; } .qualitative-form-grid .form-group label { margin: 0; color: #303846; font-size: 13px; font-weight: 700; } .qualitative-form-grid select.form-control { width: 100%; height: 46px; padding: 0 42px 0 14px; border: 1px solid #d6dbe2; border-radius: 8px; background-color: #fff; color: #202734; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%); background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .qualitative-form-grid select.form-control:hover:not(:disabled) { border-color: #aeb6c2; } .qualitative-form-grid select.form-control:focus { outline: none; border-color: #c8102e; box-shadow: 0 0 0 3px rgba(200, 16, 46, .10); } .qualitative-form-grid select.form-control:disabled { background-color: #f2f4f6; color: #8a929e; cursor: not-allowed; } .qualitative-form-grid select.form-control option { color: #202734; background: #fff; } .qualitative-save-message { display: none; margin-top: 16px; padding: 13px 16px; border: 1px solid #b9d8ef; border-radius: 8px; background: #eef7fd; color: #20577c; font-size: 14px; font-weight: 600; } .qualitative-save-message.is-visible { display: block; } /* Qualitative assessment history */ .qualitative-history { margin-top: 24px; padding-top: 22px; border-top: 1px solid #e5e7eb; } .qualitative-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .qualitative-history-heading h3 { margin: 3px 0 0; } .qualitative-history-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: #f3f4f6; font-size: 13px; font-weight: 700; } .qualitative-history-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 10px; } .qualitative-history-table { width: 100%; border-collapse: collapse; min-width: 850px; } .qualitative-history-table th, .qualitative-history-table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e5e7eb; } .qualitative-history-table th { background: #f8f9fa; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .qualitative-history-table tbody tr:last-child td { border-bottom: 0; } .history-date { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .history-version, .history-score { color: #6b7280; font-size: 12px; } .qualitative-current-badge { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; background: #111827; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .qualitative-risk-badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 6px; border-left: 5px solid var(--risk-color); background: #f8f9fa; font-weight: 700; white-space: nowrap; } @media (max-width: 900px) { .qualitative-history { margin-top: 18px; } } /* Risk event communication */ .communication-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px; background: #f3f4f6; font-size: 13px; font-weight: 700; } .communication-intro { margin: 0 0 20px; color: #6b7280; } .communication-form { margin-bottom: 26px; padding: 18px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; } .communication-textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; } .communication-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; } .communication-counter { color: #6b7280; font-size: 12px; } .communication-readonly-note { margin-bottom: 22px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8f9fa; color: #4b5563; } .communication-list { display: flex; flex-direction: column; gap: 14px; } .communication-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; } .communication-avatar { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #111827; color: #fff; font-size: 13px; font-weight: 700; } .communication-body { min-width: 0; flex: 1; } .communication-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .communication-meta strong { font-size: 14px; } .communication-meta time { flex: 0 0 auto; color: #6b7280; font-size: 12px; } .communication-message { color: #1f2937; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 700px) { .communication-meta { flex-direction: column; gap: 3px; } .communication-form-footer { align-items: flex-end; } } /* ========================================================= Workflow action comment popover ========================================================= */ .workflow-comment-box { position: relative; display: block; width: 100%; margin: 0; overflow: visible; } .workflow-comment-box > summary { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; list-style: none; cursor: pointer; } .workflow-comment-box > summary::-webkit-details-marker { display: none; } /* * Формата е floating panel. * Не участва в layout-а на action bar. */ .workflow-comment-box > .workflow-comment-form { position: absolute !important; display: block !important; top: calc(100% + 14px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 460px !important; min-width: 460px !important; max-width: 80vw !important; height: auto !important; margin: 0 !important; padding: 18px !important; box-sizing: border-box !important; background: #ffffff !important; opacity: 1 !important; border: 1px solid #d5dae2 !important; border-radius: 10px !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08) !important; z-index: 10000 !important; } /* Малката стрелка към action бутона */ .workflow-comment-box > .workflow-comment-form::before { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: #ffffff; border-top: 1px solid #d5dae2; border-left: 1px solid #d5dae2; } /* Label */ .workflow-comment-box > .workflow-comment-form > label { display: block !important; width: 100% !important; margin: 0 0 9px 0 !important; padding: 0 !important; color: #111827 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; } .workflow-comment-optional { color: #6b7280; font-size: 13px; font-weight: 400; } /* Textarea */ .workflow-comment-box > .workflow-comment-form > textarea { display: block !important; position: static !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 115px !important; min-height: 115px !important; box-sizing: border-box !important; margin: 0 0 14px 0 !important; padding: 11px 12px !important; background: #ffffff !important; color: #111827 !important; opacity: 1 !important; border: 1px solid #9ca3af !important; border-radius: 7px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.45 !important; resize: vertical !important; } .workflow-comment-box > .workflow-comment-form > textarea::placeholder { color: #9ca3af !important; opacity: 1 !important; } .workflow-comment-box > .workflow-comment-form > textarea:focus { outline: none !important; border-color: #c8102e !important; box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08) !important; } /* Confirm button */ .workflow-comment-box > .workflow-comment-form > .action-button-wide { display: block !important; position: static !important; float: none !important; width: 56% !important; min-width: 200px !important; margin: 0 0 0 auto !important; } /* * Не позволяваме на непосредствения action container * да изрязва floating panel-а. */ .workflow-comment-box, .workflow-comment-box * { visibility: visible; } /* Mobile */ @media (max-width: 700px) { .workflow-comment-box > .workflow-comment-form { left: auto !important; right: 0 !important; transform: none !important; width: min(420px, 88vw) !important; min-width: 0 !important; } .workflow-comment-box > .workflow-comment-form::before { left: auto; right: 22%; } .workflow-comment-box > .workflow-comment-form > .action-button-wide { width: 100% !important; } } /* ========================================================= Risk event workflow popover stacking ========================================================= */ /* * Целият header трябва да стои над tabs/content, * когато workflow popover е отворен. */ .risk-event-workspace-heading { position: relative !important; z-index: 20 !important; overflow: visible !important; } .risk-event-actions-panel { position: relative !important; z-index: 30 !important; overflow: visible !important; } .risk-event-actions-buttons { position: relative !important; z-index: 31 !important; overflow: visible !important; } .workflow-comment-box { position: relative !important; z-index: 32 !important; overflow: visible !important; } .workflow-comment-box[open] { z-index: 40 !important; } .workflow-comment-box[open] > .workflow-comment-form { z-index: 41 !important; } /* * Tabs/content остават под floating workflow формата. */ .risk-event-tabs { position: relative !important; z-index: 1 !important; } /* ========================================================= Risk events - secondary date filter row ========================================================= */ .filter-grid-secondary { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eceff3; display: grid; grid-template-columns: minmax(180px, 1.25fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(180px, 1.15fr) minmax(170px, 1fr); gap: 12px; align-items: end; } @media (max-width: 1200px) { .filter-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .filter-grid-secondary { grid-template-columns: 1fr; } } /* ========================================================= Risk events - sortable date columns ========================================================= */ .risk-events-table th.sortable-column { white-space: nowrap; } .risk-events-table th.sortable-column > a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; } .risk-events-table th.sortable-column > a:hover { color: #b5121b; } .risk-events-table th.sortable-column > a.is-sorted { color: #a51018; font-weight: 800; } .risk-events-table .sort-indicator { display: inline-flex; align-items: center; justify-content: center; min-width: 12px; font-size: 0.95em; font-weight: 800; line-height: 1; } .risk-events-table .sort-indicator-muted { color: #aab0b8; font-weight: 500; } .risk-events-table th.sortable-column > a:hover .sort-indicator-muted { color: #b5121b; } /* ========================================================= Risk events - responsive table layout ========================================================= */ .table-responsive { width: 100%; overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; } .risk-events-table { width: 100%; min-width: 1500px; table-layout: fixed; } .risk-events-table th, .risk-events-table td { vertical-align: middle; } /* Номер */ .risk-events-table th:nth-child(1), .risk-events-table td:nth-child(1) { width: 115px; white-space: nowrap; } /* Кратко име */ .risk-events-table th:nth-child(2), .risk-events-table td:nth-child(2) { width: 150px; } /* Финансов център */ .risk-events-table th:nth-child(3), .risk-events-table td:nth-child(3) { width: 150px; } /* Категория */ .risk-events-table th:nth-child(4), .risk-events-table td:nth-child(4) { width: 210px; } /* Статус */ .risk-events-table th:nth-child(5), .risk-events-table td:nth-child(5) { width: 155px; } /* Собственик */ .risk-events-table th:nth-child(6), .risk-events-table td:nth-child(6) { width: 165px; } /* Настъпило */ .risk-events-table th:nth-child(7), .risk-events-table td:nth-child(7) { width: 115px; } /* Установено */ .risk-events-table th:nth-child(8), .risk-events-table td:nth-child(8) { width: 115px; } /* Създадено */ .risk-events-table th:nth-child(9), .risk-events-table td:nth-child(9) { width: 115px; } /* Създадено от */ .risk-events-table th:nth-child(10), .risk-events-table td:nth-child(10) { width: 170px; } /* Дългите текстови полета не трябва да избутват колоните */ .risk-events-table .category-cell, .risk-events-table .owner-cell, .risk-events-table .created-by-cell { overflow: hidden; } .risk-events-table .category-text, .risk-events-table .owner-text, .risk-events-table .created-by-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Статусът остава цял */ .risk-events-table td:nth-child(5) { white-space: nowrap; } .risk-events-table td:nth-child(5) .status-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Компактно показване на датите */ .risk-event-date { display: inline-flex; flex-direction: column; line-height: 1.25; white-space: nowrap; } .risk-event-date-day { font-weight: 600; } .risk-event-date-time { margin-top: 2px; color: #737983; font-size: 0.9em; } /* При по-малки екрани оставяме таблицата да скролва, вместо да смачква съдържанието */ @media (max-width: 1550px) { .risk-events-table { min-width: 1500px; } } /* ========================================================= Taken measures - working list ========================================================= */ .taken-measures-filter-grid { display: grid; grid-template-columns: minmax(320px, 2fr) minmax(150px, .6fr) minmax(220px, 1fr); gap: 12px; align-items: end; } .taken-measures-filter-secondary { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eceff3; grid-template-columns: minmax(170px, .8fr) minmax(170px, .8fr) minmax(220px, 1fr) auto; } .taken-measures-table { width: 100%; table-layout: fixed; } .taken-measures-table th:nth-child(1), .taken-measures-table td:nth-child(1) { width: 18%; } .taken-measures-table th:nth-child(2), .taken-measures-table td:nth-child(2) { width: 28%; } .taken-measures-table th:nth-child(3), .taken-measures-table td:nth-child(3) { width: 11%; } .taken-measures-table th:nth-child(4), .taken-measures-table td:nth-child(4) { width: 13%; } .taken-measures-table th:nth-child(5), .taken-measures-table td:nth-child(5) { width: 16%; } .taken-measures-table th:nth-child(6), .taken-measures-table td:nth-child(6) { width: 14%; } .taken-measure-title-cell a { font-weight: 700; } .taken-measure-manifestation { overflow: hidden; } .taken-measure-manifestation > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .taken-measures-table .created-by-cell { overflow: hidden; } .taken-measures-table .created-by-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .taken-measures-table th.sortable-column { white-space: nowrap; } .taken-measures-table th.sortable-column > a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; } .taken-measures-table th.sortable-column > a.is-sorted { color: #a51018; font-weight: 800; } @media (max-width: 1100px) { .taken-measures-filter-grid, .taken-measures-filter-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .taken-measures-table { min-width: 1050px; } } @media (max-width: 700px) { .taken-measures-filter-grid, .taken-measures-filter-secondary { grid-template-columns: 1fr; } } /* ========================================================= Taken measures - read only view ========================================================= */ .taken-measure-heading-actions { display: flex; align-items: center; gap: 10px; } .taken-measure-readonly input[readonly], .taken-measure-readonly textarea[readonly], .taken-measure-readonly select:disabled { background: #fafbfc !important; color: #20242a !important; border-color: #e0e4e8 !important; box-shadow: none !important; cursor: default; opacity: 1 !important; } .taken-measure-readonly textarea[readonly] { resize: none; } .taken-measure-readonly input[readonly]:focus, .taken-measure-readonly textarea[readonly]:focus, .taken-measure-readonly select:disabled:focus { border-color: #e0e4e8 !important; box-shadow: none !important; outline: none !important; } @media (max-width: 700px) { .taken-measure-heading-actions { width: 100%; flex-wrap: wrap; } } /* ========================================================= Taken measure - linked risk events ========================================================= */ .taken-measure-linked-events { margin-top: 18px; margin-bottom: 18px; } .taken-measure-risk-events-table { width: 100%; table-layout: fixed; } .taken-measure-risk-events-table th:nth-child(1), .taken-measure-risk-events-table td:nth-child(1) { width: 120px; } .taken-measure-risk-events-table th:nth-child(2), .taken-measure-risk-events-table td:nth-child(2) { width: 24%; } .taken-measure-risk-events-table th:nth-child(3), .taken-measure-risk-events-table td:nth-child(3) { width: 21%; } .taken-measure-risk-events-table th:nth-child(4), .taken-measure-risk-events-table td:nth-child(4) { width: 17%; } .taken-measure-risk-events-table th:nth-child(5), .taken-measure-risk-events-table td:nth-child(5) { width: 18%; } .taken-measure-risk-events-table th:nth-child(6), .taken-measure-risk-events-table td:nth-child(6) { width: 110px; } .taken-measure-event-title-link { color: #b5121b; font-weight: 700; text-decoration: none; } .taken-measure-event-title-link:hover { text-decoration: underline; } .taken-measure-risk-events-table .owner-cell { overflow: hidden; } .taken-measure-risk-events-table .owner-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1000px) { .taken-measure-risk-events-table { min-width: 1000px; } } /* ========================================================= LDAP HISTORY ========================================================= */ .ldap-history-card { overflow: hidden; } .ldap-history-table-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; } .ldap-history-table { width: 100%; min-width: 1450px; table-layout: auto; } .ldap-history-table th, .ldap-history-table td { padding: 12px 10px; vertical-align: middle; white-space: nowrap; } .ldap-history-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; } .ldap-history-table tbody tr { height: 54px; } .ldap-history-table tbody tr:hover { background: #fafafa; } .ldap-history-id { width: 48px; } .ldap-history-profile { min-width: 130px; } .ldap-history-actor { min-width: 170px; } .ldap-history-date { min-width: 145px; } .ldap-history-count { width: 78px; text-align: center; } .ldap-history-actions { width: 100px; text-align: right; } .ldap-history-actions .button { white-space: nowrap; min-width: 78px; } .ldap-history-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; } .ldap-history-badge-sync { background: #e7f1ff; color: #175cd3; } .ldap-history-badge-preview { background: #eef0f2; color: #344054; } .ldap-history-badge-completed { background: #e8f8ee; color: #067647; } .ldap-history-badge-failed { background: #fee4e2; color: #b42318; } .ldap-history-badge-running { background: #fff4e5; color: #b54708; } .ldap-history-badge-neutral { background: #f2f4f7; color: #475467; } @media (max-width: 1400px) { .ldap-history-table { min-width: 1320px; } .ldap-history-table th, .ldap-history-table td { padding-left: 8px; padding-right: 8px; } }