/* ========================================================================== CLEARANCE DESIGN SYSTEM — Theme Override Loaded LAST in every page's to override template defaults. ========================================================================== */ /* -------------------------------------------------------------------------- 1. SF Pro Display — @font-face -------------------------------------------------------------------------- */ @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Ultralight.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Thin.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Pro Display'; src: url('../fonts/sf-pro-display/SF-Pro-Display-Heavy.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. CSS Custom Properties — Clearance Brand Tokens -------------------------------------------------------------------------- */ :root { /* Primary (Purple) */ --cl-purple-1: #7d30e0; --cl-purple-2: #3e1f65; --cl-purple-3: #e3e1fe; --cl-purple-4: #a899fd; /* Neutral */ --cl-neutral-1: #2a2530; --cl-neutral-2: #625a6b; --cl-neutral-3: #b6b1bd; --cl-neutral-4: #e3e0e8; --cl-neutral-5: #f4f3f6; /* Complementary */ --cl-pink-main: #ff62d7; --cl-pink-light: #ffd4f4; --cl-blue-main: #2495ff; --cl-blue-light: #c5e3ff; --cl-orange-main: #ff5c3e; --cl-orange-light: #ffc2b7; /* Semaphore */ --cl-green-main: #8ee83f; --cl-green-light: #e5f6d6; --cl-yellow-main: #fff743; --cl-yellow-light: #fdfbda; --cl-red-main: #ff515f; --cl-red-light: #ffd6da; /* Control Element Colors */ --cl-hito-main: #EF4A8C; /* Warm Rose */ --cl-hito-dark: #B8305F; --cl-hito-light: #FDE0ED; --cl-inc-main: #73D1CB; /* Teal */ --cl-inc-dark: #4A9E98; --cl-inc-light: #D9F2F0; --cl-rsk-main: #C938DB; /* Violet */ --cl-rsk-dark: #8A1B9E; --cl-rsk-light: #F2D6F6; --cl-acr-main: #ff62d7; /* Pink — Agreements (unchanged) */ --cl-acr-dark: #cc20a8; --cl-acr-light: #ffd4f4; --cl-ev-main: #2495ff; /* Blue — Evidence (unchanged) */ --cl-ev-dark: #1565c0; --cl-ev-light: #c5e3ff; /* Bootstrap + Template Override */ --bs-primary: #7d30e0; --bs-primary-rgb: 125, 48, 224; --primary-color: #7d30e0; --primary-rgb: 125, 48, 224; --primary01: rgba(125, 48, 224, 0.1); --primary02: rgba(125, 48, 224, 0.2); --primary03: rgba(125, 48, 224, 0.3); --primary05: rgba(125, 48, 224, 0.5); --primary-tint1-color: #8f42ee; --primary-tint2-color: #a155f6; --primary-tint3-color: #c5e3ff; /* Font */ --bs-body-font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --default-font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Radius */ --cl-radius-card: 24px; --cl-radius-inner: 16px; --cl-radius-button: 8px; --cl-radius-pill: 50px; } /* -------------------------------------------------------------------------- 3. Global Font Override -------------------------------------------------------------------------- */ * { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; background-color: var(--cl-neutral-5); color: var(--cl-neutral-1); } /* -------------------------------------------------------------------------- 4. Typography Scale -------------------------------------------------------------------------- */ .cl-title-1 { font-size: 56px; font-weight: 800; letter-spacing: 0; line-height: 1.1; } .cl-title-2 { font-size: 48px; font-weight: 700; letter-spacing: 0; line-height: 1.15; } .cl-title-3 { font-size: 40px; font-weight: 700; letter-spacing: 0; line-height: 1.2; } .cl-title-4 { font-size: 32px; font-weight: 600; letter-spacing: 0; line-height: 1.25; } .cl-title-5 { font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.3; } .cl-title-6 { font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.4; } .cl-subtitle-1 { font-size: 18px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .cl-subtitle-2 { font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .cl-body-1 { font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1.6; } .cl-body-2 { font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.6; } .cl-overline { font-size: 12px; font-weight: 300; letter-spacing: 2.5px; line-height: 1.4; text-transform: uppercase; } /* -------------------------------------------------------------------------- 5. Page Background -------------------------------------------------------------------------- */ .app-content { background-color: var(--cl-neutral-5) !important; } /* -------------------------------------------------------------------------- 6. Sidebar — Clearance Brand -------------------------------------------------------------------------- */ .app-sidebar, .app-sidebar.sticky { background-color: var(--cl-purple-2) !important; border-right: none !important; position: fixed !important; inset-block-start: 0 !important; inset-inline-start: 0 !important; height: 100% !important; z-index: 103 !important; } /* Sidebar header / logo area */ .main-sidebar-header { background-color: var(--cl-purple-2) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Clearance logo text (used when no image logo available) */ .cl-logo-wordmark { color: #ffffff; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; } .cl-logo-symbol { width: 36px; height: 36px; background: linear-gradient(135deg, var(--cl-purple-1), var(--cl-purple-4)); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; } /* Section headers (overline) */ .app-sidebar .slide__category .category-name { color: rgba(255, 255, 255, 0.5) !important; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; } /* Menu items */ .app-sidebar .side-menu__item { color: rgba(255, 255, 255, 0.7) !important; border-radius: var(--cl-radius-button) !important; transition: all 0.2s ease !important; } .app-sidebar .side-menu__item:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } .app-sidebar .side-menu__item.active, .app-sidebar .side-menu__item[aria-expanded="true"] { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } /* Icons in sidebar */ .app-sidebar .side-menu__icon { color: rgba(255, 255, 255, 0.6) !important; } .app-sidebar .side-menu__item:hover .side-menu__icon, .app-sidebar .side-menu__item.active .side-menu__icon { color: #ffffff !important; } /* Chevron angle icons */ .app-sidebar .side-menu__angle { color: rgba(255, 255, 255, 0.4) !important; } /* Submenu (icon-hover popup needs solid bg — use background shorthand to override template) */ .app-sidebar .slide-menu, .app-sidebar .slide.has-sub .slide-menu, [data-nav-style="icon-hover"] .app-sidebar .slide.has-sub .slide-menu { background: #331a54 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; border-radius: 0 8px 8px 0 !important; } .app-sidebar .slide-menu .side-menu__item { color: rgba(255, 255, 255, 0.6) !important; font-size: 13.5px !important; } .app-sidebar .slide-menu .side-menu__item:hover { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.08) !important; } .app-sidebar .slide-menu .side-menu__item.active { color: #ffffff !important; background-color: rgba(125, 48, 224, 0.4) !important; } /* User section at bottom of sidebar */ .app-sidebar .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; background-color: rgba(0, 0, 0, 0.1) !important; } /* -------------------------------------------------------------------------- 7. Topbar — Clearance Brand -------------------------------------------------------------------------- */ .app-header { background-color: #ffffff !important; border-bottom: 1px solid var(--cl-neutral-4) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; height: 64px !important; position: fixed !important; inset-block-start: 0 !important; inset-inline: 0 !important; z-index: 100 !important; } .app-header .header-link-icon { color: var(--cl-neutral-2) !important; transition: color 0.2s ease !important; } .app-header .header-link:hover .header-link-icon { color: var(--cl-purple-1) !important; } /* -------------------------------------------------------------------------- 8. Bootstrap Primary Color Override -------------------------------------------------------------------------- */ .btn-primary { background-color: var(--cl-purple-1) !important; border-color: var(--cl-purple-1) !important; border-radius: var(--cl-radius-button) !important; font-weight: 500 !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--cl-purple-2) !important; border-color: var(--cl-purple-2) !important; } .btn-outline-primary { color: var(--cl-purple-1) !important; border-color: var(--cl-purple-1) !important; border-radius: var(--cl-radius-button) !important; } .btn-outline-primary:hover { background-color: var(--cl-purple-1) !important; color: #ffffff !important; } /* All buttons get 8px radius */ .btn { border-radius: var(--cl-radius-button) !important; } /* -------------------------------------------------------------------------- 9. Card Overrides -------------------------------------------------------------------------- */ .card, .custom-card { border-radius: var(--cl-radius-card) !important; border-color: var(--cl-neutral-4) !important; box-shadow: 0 2px 12px rgba(42, 37, 48, 0.06) !important; } .card .card-header { border-radius: var(--cl-radius-card) var(--cl-radius-card) 0 0 !important; border-bottom-color: var(--cl-neutral-4) !important; } /* Inner card elements */ .card .card-body .card, .card-body .badge, .card-body .avatar, .card-body .btn { border-radius: var(--cl-radius-inner) !important; } /* -------------------------------------------------------------------------- 10. Form Inputs -------------------------------------------------------------------------- */ .form-control, .form-select, .input-group > .form-control, .input-group > .form-select { border-radius: var(--cl-radius-button) !important; border-color: var(--cl-neutral-4) !important; } .form-control:focus, .form-select:focus { border-color: var(--cl-purple-1) !important; box-shadow: 0 0 0 3px rgba(125, 48, 224, 0.15) !important; } /* -------------------------------------------------------------------------- 11. Badges & Pills -------------------------------------------------------------------------- */ .badge { border-radius: var(--cl-radius-pill) !important; font-weight: 500 !important; } /* Clearance semaphore badges */ .badge-cl-green { background-color: var(--cl-green-light) !important; color: #3a7a00 !important; } .badge-cl-yellow { background-color: var(--cl-yellow-light) !important; color: #7a6800 !important; } .badge-cl-red { background-color: var(--cl-red-light) !important; color: #c0001a !important; } /* -------------------------------------------------------------------------- 12. Primary-transparent Utility (template pattern) -------------------------------------------------------------------------- */ .bg-primary-transparent { background-color: var(--cl-purple-3) !important; color: var(--cl-purple-1) !important; } .text-primary { color: var(--cl-purple-1) !important; } .bg-primary { background-color: var(--cl-purple-1) !important; } a { color: var(--cl-purple-1); } a:hover { color: var(--cl-purple-2); } /* -------------------------------------------------------------------------- 13. Progress Bars -------------------------------------------------------------------------- */ .progress-bar { background-color: var(--cl-purple-1) !important; } .progress { border-radius: var(--cl-radius-pill) !important; background-color: var(--cl-purple-3) !important; } /* -------------------------------------------------------------------------- 14. Page Header Breadcrumb -------------------------------------------------------------------------- */ .page-header-breadcrumb { padding: 1.5rem 0 1rem 0; } .page-header-breadcrumb .cl-overline { color: var(--cl-neutral-3); margin-bottom: 4px; } .page-header-breadcrumb h1, .page-header-breadcrumb .cl-title-4 { color: var(--cl-neutral-1); } /* -------------------------------------------------------------------------- 15. Table Overrides -------------------------------------------------------------------------- */ .table { --bs-table-border-color: var(--cl-neutral-4); } .table thead th { color: var(--cl-neutral-2); font-weight: 600; font-size: 13px; letter-spacing: 0.3px; text-transform: uppercase; border-bottom-color: var(--cl-neutral-4) !important; } .table tbody tr:hover { background-color: var(--cl-purple-3) !important; } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .footer { background-color: #ffffff !important; border-top: 1px solid var(--cl-neutral-4) !important; color: var(--cl-neutral-2) !important; font-size: 13px; } /* -------------------------------------------------------------------------- 17. DARK MODE Overrides -------------------------------------------------------------------------- */ /* — Remap tokens so all inline var(--cl-*) styles auto-adapt — */ [data-theme-mode="dark"] { --cl-neutral-1: #f0edf4; --cl-neutral-2: #a9a3b2; --cl-neutral-3: #6b6478; --cl-neutral-4: #332a42; --cl-neutral-5: #221d2e; --cl-purple-2: #c4b5fd; --cl-purple-3: rgba(125, 48, 224, 0.18); /* Semaphore light → semi-transparent so icons/pills are readable on dark surfaces */ --cl-green-light: rgba(142, 232, 63, 0.18); --cl-yellow-light: rgba(255, 247, 67, 0.15); --cl-red-light: rgba(255, 81, 95, 0.18); /* Complementary light → same treatment */ --cl-blue-light: rgba(36, 149, 255, 0.18); --cl-pink-light: rgba(255, 98, 215, 0.18); --cl-orange-light: rgba(255, 92, 62, 0.18); /* Control Element light → dark mode */ --cl-hito-light: rgba(239, 74, 140, 0.18); --cl-inc-light: rgba(115, 209, 203, 0.18); --cl-rsk-light: rgba(201, 56, 219, 0.18); --cl-acr-light: rgba(255, 98, 215, 0.18); --cl-ev-light: rgba(36, 149, 255, 0.18); } [data-theme-mode="dark"] body { background-color: #1a1528 !important; color: #f0edf4 !important; } [data-theme-mode="dark"] .app-content { background-color: #1a1528 !important; } /* — Global text elements — */ [data-theme-mode="dark"] h1, [data-theme-mode="dark"] h2, [data-theme-mode="dark"] h3, [data-theme-mode="dark"] h4, [data-theme-mode="dark"] h5, [data-theme-mode="dark"] h6, [data-theme-mode="dark"] p, [data-theme-mode="dark"] span, [data-theme-mode="dark"] small, [data-theme-mode="dark"] label, [data-theme-mode="dark"] li, [data-theme-mode="dark"] td, [data-theme-mode="dark"] th { color: #f0edf4; } /* — Cards — */ [data-theme-mode="dark"] .card, [data-theme-mode="dark"] .custom-card { background-color: #221d2e !important; border-color: #332a42 !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important; } [data-theme-mode="dark"] .card-header { background-color: #221d2e !important; border-bottom-color: #332a42 !important; } [data-theme-mode="dark"] .card-title, [data-theme-mode="dark"] .card-text { color: #f0edf4 !important; } /* — Topbar — */ [data-theme-mode="dark"] .app-header { background-color: #1e1830 !important; border-bottom-color: #332a42 !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important; } [data-theme-mode="dark"] .app-header .header-link-icon { color: #a9a3b2 !important; } [data-theme-mode="dark"] .app-header .header-link:hover .header-link-icon { color: var(--cl-purple-4) !important; } /* — Sidebar — */ [data-theme-mode="dark"] .app-sidebar, [data-theme-mode="dark"] .app-sidebar.sticky { background-color: #130e1e !important; } [data-theme-mode="dark"] .main-sidebar-header { background-color: #130e1e !important; } [data-theme-mode="dark"] .app-sidebar .slide-menu, [data-theme-mode="dark"] .app-sidebar .slide.has-sub .slide-menu, [data-theme-mode="dark"][data-nav-style="icon-hover"] .app-sidebar .slide.has-sub .slide-menu { background: #1a1230 !important; } /* — Footer — */ [data-theme-mode="dark"] .footer { background-color: #1e1830 !important; border-top-color: #332a42 !important; color: #a9a3b2 !important; } /* — Forms — */ [data-theme-mode="dark"] .form-control, [data-theme-mode="dark"] .form-select { background-color: #1a1528 !important; border-color: #332a42 !important; color: #f0edf4 !important; } [data-theme-mode="dark"] .form-control::placeholder { color: #6b6478 !important; } /* — Dropdowns / modals — */ [data-theme-mode="dark"] .dropdown-menu { background-color: #221d2e !important; border-color: #332a42 !important; } [data-theme-mode="dark"] .dropdown-item { color: #f0edf4 !important; } [data-theme-mode="dark"] .dropdown-item:hover, [data-theme-mode="dark"] .dropdown-item:focus { background-color: rgba(125, 48, 224, 0.15) !important; color: #f0edf4 !important; } [data-theme-mode="dark"] .modal-content { background-color: #221d2e !important; border-color: #332a42 !important; } [data-theme-mode="dark"] .modal-header, [data-theme-mode="dark"] .modal-footer { border-color: #332a42 !important; } /* — Borders & dividers — */ [data-theme-mode="dark"] hr, [data-theme-mode="dark"] .dropdown-divider, [data-theme-mode="dark"] .border-bottom, [data-theme-mode="dark"] .border-top { border-color: #332a42 !important; } /* — Tables — */ [data-theme-mode="dark"] .table { --bs-table-bg: #221d2e; --bs-table-border-color: #332a42; color: #f0edf4; } [data-theme-mode="dark"] .table thead th { color: #a9a3b2 !important; border-bottom-color: #332a42 !important; } [data-theme-mode="dark"] .table tbody tr:hover { background-color: rgba(125, 48, 224, 0.08) !important; } /* — FullCalendar — */ [data-theme-mode="dark"] .fc .fc-toolbar-title { color: #f4f3f6 !important; } [data-theme-mode="dark"] .fc .fc-col-header-cell-cushion, [data-theme-mode="dark"] .fc .fc-daygrid-day-number { color: #b6b1bd !important; } [data-theme-mode="dark"] .fc .fc-daygrid-day { background-color: #221d2e !important; } [data-theme-mode="dark"] .fc .fc-day-today { background-color: rgba(125, 48, 224, 0.12) !important; } [data-theme-mode="dark"] .fc-theme-standard td, [data-theme-mode="dark"] .fc-theme-standard th, [data-theme-mode="dark"] .fc-theme-standard .fc-scrollgrid { border-color: #332a42 !important; } /* Calendar column headers & scrollgrid background — prevent white flash */ [data-theme-mode="dark"] .fc .fc-col-header, [data-theme-mode="dark"] .fc .fc-col-header-cell, [data-theme-mode="dark"] .fc .fc-scrollgrid-section, [data-theme-mode="dark"] .fc .fc-scrollgrid-section > *, [data-theme-mode="dark"] .fc .fc-scrollgrid-section table, [data-theme-mode="dark"] .fc .fc-scrollgrid, [data-theme-mode="dark"] .fc .fc-daygrid-body, [data-theme-mode="dark"] .fc .fc-timegrid-body, [data-theme-mode="dark"] .fc .fc-view-harness, [data-theme-mode="dark"] .fc .fc-view, [data-theme-mode="dark"] .fc table { background-color: #221d2e !important; } /* Calendar button text on dark */ [data-theme-mode="dark"] .fc .fc-button { color: #fff !important; } /* List view */ [data-theme-mode="dark"] .fc .fc-list-empty { background-color: #221d2e !important; color: #a9a3b2 !important; } [data-theme-mode="dark"] .fc .fc-list-event:hover td { background-color: rgba(125, 48, 224, 0.1) !important; } [data-theme-mode="dark"] .fc .fc-list-day-cushion { background-color: #1a1528 !important; } [data-theme-mode="dark"] .fc .fc-list-event td { background-color: #221d2e !important; } /* Week/time view */ [data-theme-mode="dark"] .fc .fc-timegrid-slot, [data-theme-mode="dark"] .fc .fc-timegrid-axis { background-color: #221d2e !important; } [data-theme-mode="dark"] .fc .fc-timegrid-slot-label-cushion, [data-theme-mode="dark"] .fc .fc-timegrid-axis-cushion { color: #a9a3b2 !important; } /* More events link */ [data-theme-mode="dark"] .fc .fc-daygrid-more-link { color: var(--cl-purple-4) !important; } /* — Notifications — */ [data-theme-mode="dark"] .cl-notif-unread { background-color: rgba(125, 48, 224, 0.08) !important; } [data-theme-mode="dark"] .cl-notif-item:hover { background-color: rgba(255, 255, 255, 0.04) !important; } /* — Page breadcrumb — */ [data-theme-mode="dark"] .page-header-breadcrumb .cl-title-4, [data-theme-mode="dark"] .page-header-breadcrumb h1 { color: #f4f3f6 !important; } /* — Progress bar track — */ [data-theme-mode="dark"] .progress { background-color: rgba(125, 48, 224, 0.2) !important; } /* — Buttons (dark mode) — */ [data-theme-mode="dark"] .btn-light { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #f4f3f6 !important; } [data-theme-mode="dark"] .btn-light:hover, [data-theme-mode="dark"] .btn-light:focus { background-color: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; } [data-theme-mode="dark"] .btn-outline-secondary { border-color: rgba(255, 255, 255, 0.25) !important; color: #f4f3f6 !important; } [data-theme-mode="dark"] .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } [data-theme-mode="dark"] .btn-secondary { background-color: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #f4f3f6 !important; } [data-theme-mode="dark"] .btn-outline-light { border-color: rgba(255, 255, 255, 0.3) !important; color: #f4f3f6 !important; } [data-theme-mode="dark"] .btn-outline-light:hover { background-color: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } [data-theme-mode="dark"] .btn-white { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #f4f3f6 !important; } /* — Status pills (dark mode) — */ [data-theme-mode="dark"] .pill-en-tiempo { color: #a5e86a !important; } [data-theme-mode="dark"] .pill-atrasado { color: #e6d640 !important; } [data-theme-mode="dark"] .pill-con-impacto { color: #ff8a94 !important; } /* — Priority badges (dark mode) — */ [data-theme-mode="dark"] .priority-alta { background-color: rgba(255, 81, 95, 0.2) !important; color: #ff8a94 !important; } [data-theme-mode="dark"] .priority-media { background-color: rgba(36, 149, 255, 0.2) !important; color: #70bcff !important; } [data-theme-mode="dark"] .priority-baja { background-color: rgba(142, 232, 63, 0.15) !important; color: #a5e86a !important; } /* -------------------------------------------------------------------------- 18. Gradient Utilities -------------------------------------------------------------------------- */ .bg-gradient-takeoff { background: linear-gradient(135deg, #7d30e0, #2495ff) !important; } .bg-gradient-altitude { background: linear-gradient(135deg, #7d30e0, #ff62d7) !important; } .bg-gradient-skyline { background: linear-gradient(135deg, #a899fd, #7d30e0) !important; } .bg-gradient-trajectory { background: linear-gradient(135deg, #7d30e0, #a899fd, #e3e1fe) !important; } .bg-gradient-atmosphere { background: linear-gradient(135deg, #2495ff, #a899fd, #ff62d7) !important; } /* -------------------------------------------------------------------------- 19. Misc Utilities -------------------------------------------------------------------------- */ .cl-divider { border-top: 1px solid var(--cl-neutral-4); margin: 1.5rem 0; } /* Scrollbar customization */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--cl-neutral-4); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--cl-neutral-3); } /* ── Notification unread highlight ── */ .cl-notif-unread { background-color: rgba(125,48,224,0.04); } .cl-notif-item:hover { background-color: var(--cl-neutral-5); } /* ── FullCalendar overrides ── */ .fc .fc-toolbar-title { font-family: 'SF Pro Display', sans-serif; font-weight: 600; font-size: 18px; color: var(--cl-neutral-1); } .fc .fc-button-primary { background-color: var(--cl-purple-1) !important; border-color: var(--cl-purple-1) !important; font-family: 'SF Pro Display', sans-serif; border-radius: 8px !important; } .fc .fc-button-primary:not(.fc-button-active):hover { background-color: var(--cl-purple-2) !important; border-color: var(--cl-purple-2) !important; } .fc .fc-button-active { background-color: var(--cl-purple-2) !important; border-color: var(--cl-purple-2) !important; } .fc .fc-day-today { background-color: rgba(125,48,224,0.06) !important; } .fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--cl-neutral-2); font-family: 'SF Pro Display', sans-serif; text-decoration: none; } .fc .fc-event { font-family: 'SF Pro Display', sans-serif; font-size: 12px; font-weight: 500; padding: 2px 6px; } /* -------------------------------------------------------------------------- 20. Skeleton Loading -------------------------------------------------------------------------- */ /* Shimmer animation — moves the highlight across the element */ @keyframes cl-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Class-based skeleton — add "cl-skeleton" to any element. Uses a ::after pseudo-element overlay so it works on any component regardless of its own background styles. clearance-app.js removes the class on DOMContentLoaded. */ .cl-skeleton { position: relative !important; overflow: hidden !important; color: transparent !important; pointer-events: none; user-select: none; transition: opacity 0.3s ease; } .cl-skeleton * { visibility: hidden !important; } .cl-skeleton::after { content: ''; position: absolute; inset: 0; z-index: 10; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%); animation: cl-shimmer 1.5s ease-in-out infinite; } .cl-skeleton-out { opacity: 0; } /* Dark mode — brighter shimmer highlight for visibility */ [data-theme-mode="dark"] .cl-skeleton::after { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); } .bg-delayed { background-color: rgb(230, 199, 2); color: black; } .bg-ontime { color: #fff; background-color: #28a745; } .bg-impact { color: #fff; background-color: #f80000; } .bg-cancel { color: #ffffff; background-color: #737373; } .txt-delayed { color: rgb(230, 199, 2); } .txt-ontime { color: #28a745; } .txt-impact { color: #f80000; } .txt-cancel { color: #737373; }