/* ============================================================================ MATTEL THEME - Comprehensive White Label Color Overrides ============================================================================ This theme completely replaces the GuardTrax blue (#3b82b6) color palette with the Mattel blue (#036da7) palette across all components and states. Primary: #036da7 (Mattel Blue) - Headers, navbar, links, borders Buttons: #526464 (Mattel Grey) - Primary action buttons Accents: Mattel brand colors for various UI elements ============================================================================ */ /* Apply Mattel color palette when .mattel-theme class is present on */ html.mattel-theme, .mattel-theme { /* === PRIMARY COLORS === */ --primary: #036da7; --primary-hover: #025a8a; --primary-light: #2085bf; --primary-alpha-10: rgba(3, 109, 167, 0.1); --primary-alpha-20: rgba(3, 109, 167, 0.2); --primary-alpha-30: rgba(3, 109, 167, 0.3); --primary-alpha-40: rgba(3, 109, 167, 0.4); /* === BORDERS & DIVIDERS (Mattel blue tint) === */ --border: rgba(3, 109, 167, 0.25); --border-strong: rgba(3, 109, 167, 0.4); --border-hover: rgba(3, 109, 167, 0.6); --divider: rgba(3, 109, 167, 0.2); /* === SEMANTIC COLORS (Mattel accents) === */ --success: #c0d34e; /* Lime green */ --success-light: #e8f0c0; --warning: #fad170; /* Yellow */ --warning-light: #fef3d8; --error: #dd3f3f; /* Red */ --error-light: #fde8e8; --info: #35a4b4; /* Teal */ --info-light: #d4f1f5; /* === STATUS COLORS (Reports) === */ --complete: #c0d34e; /* Lime - matches success */ --partial: #fad170; /* Yellow - matches warning */ --incomplete: #dd3f3f; /* Red - matches error */ /* === LEGACY COMPATIBILITY === */ --link: #036da7; /* Mattel blue for links */ --link-hover: #025a8a; /* Darker Mattel blue on hover */ --warn-submit: rgba(3, 109, 167, 0.2); --focus-ring-color: #036da7; /* === SHADOWS (Mattel blue tint) === */ --shadow-color: rgba(3, 109, 167, 0.18); --shadow-color-strong: rgba(3, 109, 167, 0.3); --shadow: rgba(3, 109, 167, 0.18); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px var(--shadow-color); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px var(--shadow-color); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px var(--shadow-color); --shadow-glow: 0 0 20px rgba(3, 109, 167, 0.4); --shadow-glow-strong: 0 0 30px rgba(3, 109, 167, 0.6); --focus-ring: 0 0 0 3px var(--primary-alpha-30); /* === BUTTON COLORS (Mattel grey for primary actions) === */ --color-change-bg: #526464; --color-change-fg: #ffffff; --color-change-hover: #3f4e4e; --color-popup-border: rgba(3, 109, 167, 0.3); --color-action-hover: #036da7; /* === MATTEL ACCENT COLORS (for reference in custom components) === */ --accent-teal: #35a4b4; --accent-orange: #df7544; --accent-red: #dd3f3f; --accent-purple: #60457c; --accent-pink: #cf6489; --accent-yellow: #fad170; --accent-lime: #c0d34e; --accent-cyan: #009aa8; } /* ============================================================================ SPECIFIC COMPONENT OVERRIDES These target hardcoded colors in Site.css and component stylesheets ============================================================================ */ /* === NAVBAR === */ html.mattel-theme .navbar-container, .mattel-theme .navbar-container { background: linear-gradient(135deg, #036da7 0%, #025a8a 100%) !important; } /* === PRIMARY BUTTONS === */ html.mattel-theme .btn-primary, html.mattel-theme .primary-button, html.mattel-theme button.primary, html.mattel-theme .btn-submit, html.mattel-theme .btn-action, html.mattel-theme .btn, html.mattel-theme button:not(.btn-secondary):not(.help-icon-button):not(.dropdown-button):not(.completion-filter-badge):not(.activity-filter-badge):not(.user-dropdown__toggle):not(.mb):not(.custom-dropdown__trigger), .mattel-theme .btn-primary, .mattel-theme .primary-button, .mattel-theme button.primary, .mattel-theme .btn-submit, .mattel-theme .btn-action, .mattel-theme .btn, .mattel-theme button:not(.btn-secondary):not(.help-icon-button):not(.dropdown-button):not(.completion-filter-badge):not(.activity-filter-badge):not(.user-dropdown__toggle):not(.mb):not(.custom-dropdown__trigger) { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } html.mattel-theme .btn-primary:hover, html.mattel-theme .primary-button:hover, html.mattel-theme button.primary:hover, html.mattel-theme .btn-submit:hover, html.mattel-theme .btn-action:hover, html.mattel-theme .btn:hover, html.mattel-theme button:not(.btn-secondary):not(.help-icon-button):not(.dropdown-button):not(.completion-filter-badge):not(.activity-filter-badge):hover, .mattel-theme .btn-primary:hover, .mattel-theme .primary-button:hover, .mattel-theme button.primary:hover, .mattel-theme .btn-submit:hover, .mattel-theme .btn-action:hover, .mattel-theme .btn:hover, .mattel-theme button:not(.btn-secondary):not(.help-icon-button):not(.dropdown-button):not(.completion-filter-badge):not(.activity-filter-badge):hover { background: linear-gradient(135deg, #3f4e4e 0%, #2d3939 100%) !important; border-color: #3f4e4e !important; } /* === FILTER BADGE BUTTONS (enhance with transitions and selected state) === */ html.mattel-theme .completion-filter-badge, html.mattel-theme .activity-filter-badge, .mattel-theme .completion-filter-badge, .mattel-theme .activity-filter-badge { transition: all 0.2s ease !important; border: 2px solid transparent !important; } /* Selected state for filter badges - add a subtle border and scale effect */ html.mattel-theme .completion-filter-badge.selected, html.mattel-theme .activity-filter-badge.selected, .mattel-theme .completion-filter-badge.selected, .mattel-theme .activity-filter-badge.selected { border-color: rgba(255, 255, 255, 0.3) !important; opacity: 1 !important; transform: scale(1.05) !important; } /* === SECONDARY/OUTLINE BUTTONS (use Mattel blue) === */ html.mattel-theme .btn-secondary, html.mattel-theme .btn-outline, .mattel-theme .btn-secondary, .mattel-theme .btn-outline { border-color: #036da7 !important; color: #036da7 !important; } html.mattel-theme .btn-secondary:hover, html.mattel-theme .btn-outline:hover, .mattel-theme .btn-secondary:hover, .mattel-theme .btn-outline:hover { background-color: rgba(3, 109, 167, 0.1) !important; border-color: #025a8a !important; color: #025a8a !important; } /* === LINKS === */ html.mattel-theme a, .mattel-theme a { color: #036da7; } html.mattel-theme a:hover, .mattel-theme a:hover { color: #025a8a; } /* === SECTION HEADERS === */ html.mattel-theme .section-header, html.mattel-theme h1, html.mattel-theme h2, .mattel-theme .section-header, .mattel-theme h1, .mattel-theme h2 { color: #036da7; } /* === TABS === */ html.mattel-theme .active-tab, html.mattel-theme .selected-tab, html.mattel-theme .tab.active, .mattel-theme .active-tab, .mattel-theme .selected-tab, .mattel-theme .tab.active { border-bottom-color: #036da7 !important; color: #036da7 !important; } html.mattel-theme .tab:hover, .mattel-theme .tab:hover { background-color: rgba(3, 109, 167, 0.1); color: #036da7; } /* === PROGRESS BARS === */ html.mattel-theme .progress-bar, html.mattel-theme .progress-fill, .mattel-theme .progress-bar, .mattel-theme .progress-fill { background-color: #036da7 !important; } /* === STATUS BADGES === */ html.mattel-theme .status-active, html.mattel-theme .badge-success, .mattel-theme .status-active, .mattel-theme .badge-success { background-color: #c0d34e !important; color: #4a5324 !important; } html.mattel-theme .status-warning, html.mattel-theme .badge-warning, .mattel-theme .status-warning, .mattel-theme .badge-warning { background-color: #fad170 !important; color: #7a6224 !important; } html.mattel-theme .status-error, html.mattel-theme .badge-danger, .mattel-theme .status-error, .mattel-theme .badge-danger { background-color: #dd3f3f !important; color: #ffffff !important; } html.mattel-theme .status-info, html.mattel-theme .badge-info, .mattel-theme .status-info, .mattel-theme .badge-info { background-color: #35a4b4 !important; color: #ffffff !important; } /* === FORM ELEMENTS === */ html.mattel-theme input:focus, html.mattel-theme select:focus, html.mattel-theme textarea:focus, .mattel-theme input:focus, .mattel-theme select:focus, .mattel-theme textarea:focus { border-color: #036da7 !important; box-shadow: 0 0 0 3px rgba(3, 109, 167, 0.1) !important; } html.mattel-theme input[type="checkbox"]:checked, html.mattel-theme input[type="radio"]:checked, .mattel-theme input[type="checkbox"]:checked, .mattel-theme input[type="radio"]:checked { background-color: #036da7 !important; border-color: #036da7 !important; } /* === CARDS & PANELS === */ html.mattel-theme .card-header, html.mattel-theme .panel-header, .mattel-theme .card-header, .mattel-theme .panel-header { background: linear-gradient(135deg, rgba(3, 109, 167, 0.1) 0%, rgba(3, 109, 167, 0.05) 100%); border-bottom: 1px solid rgba(3, 109, 167, 0.2); } html.mattel-theme .card:hover, .mattel-theme .card:hover { border-color: rgba(3, 109, 167, 0.3); box-shadow: 0 4px 12px rgba(3, 109, 167, 0.15); } /* === OFFICER CARDS === */ html.mattel-theme .officer-card, html.mattel-theme .user-card, .mattel-theme .officer-card, .mattel-theme .user-card { border-color: rgba(3, 109, 167, 0.2); } html.mattel-theme .officer-card:hover, html.mattel-theme .user-card:hover, .mattel-theme .officer-card:hover, .mattel-theme .user-card:hover { border-color: #036da7; box-shadow: 0 4px 12px rgba(3, 109, 167, 0.2); } html.mattel-theme .officer-card .badge, html.mattel-theme .user-card .badge, .mattel-theme .officer-card .badge, .mattel-theme .user-card .badge { background-color: rgba(3, 109, 167, 0.1); color: #036da7; } /* === SCROLLBAR === */ html.mattel-theme ::-webkit-scrollbar-thumb, .mattel-theme ::-webkit-scrollbar-thumb { background-color: rgba(3, 109, 167, 0.3); } html.mattel-theme ::-webkit-scrollbar-thumb:hover, .mattel-theme ::-webkit-scrollbar-thumb:hover { background-color: rgba(3, 109, 167, 0.4); } /* === SELECTION HIGHLIGHTING === */ html.mattel-theme ::selection, .mattel-theme ::selection { background-color: rgba(3, 109, 167, 0.2); color: var(--text-primary); } /* === TOOLTIPS === */ html.mattel-theme .tooltip, .mattel-theme .tooltip { background-color: #036da7 !important; } /* === MODALS === */ html.mattel-theme .modal-header, .mattel-theme .modal-header { border-bottom-color: rgba(3, 109, 167, 0.2); } html.mattel-theme .modal-header h2, html.mattel-theme .modal-header h3, .mattel-theme .modal-header h2, .mattel-theme .modal-header h3 { color: #036da7; } /* === TABLES === */ html.mattel-theme .table thead, html.mattel-theme table thead, .mattel-theme .table thead, .mattel-theme table thead { background: rgba(3, 109, 167, 0.1); } html.mattel-theme .table tbody tr:hover, html.mattel-theme table tbody tr:hover, .mattel-theme .table tbody tr:hover, .mattel-theme table tbody tr:hover { background: rgba(3, 109, 167, 0.05); } html.mattel-theme .table th, html.mattel-theme table th, .mattel-theme .table th, .mattel-theme table th { color: #036da7; } /* === PAGINATION === */ html.mattel-theme .pagination .active, .mattel-theme .pagination .active { background-color: #036da7 !important; border-color: #036da7 !important; } html.mattel-theme .pagination button:hover, .mattel-theme .pagination button:hover { background-color: rgba(3, 109, 167, 0.1); color: #036da7; } /* === DROPDOWN MENUS === */ html.mattel-theme .dropdown-item:hover, html.mattel-theme .dropdown-item:focus, .mattel-theme .dropdown-item:hover, .mattel-theme .dropdown-item:focus { background-color: rgba(3, 109, 167, 0.1); color: #036da7; } /* === LOADING SPINNERS === */ html.mattel-theme .spinner, html.mattel-theme .loading-spinner, .mattel-theme .spinner, .mattel-theme .loading-spinner { border-color: rgba(3, 109, 167, 0.2); border-top-color: #036da7; } /* === TAGS & CHIPS === */ html.mattel-theme .tag, html.mattel-theme .chip, .mattel-theme .tag, .mattel-theme .chip { background-color: rgba(3, 109, 167, 0.1); color: #036da7; border-color: rgba(3, 109, 167, 0.2); } /* === ALERTS === */ html.mattel-theme .alert-success, .mattel-theme .alert-success { background-color: rgba(192, 211, 78, 0.1); border-color: #c0d34e; color: #4a5324; } html.mattel-theme .alert-warning, .mattel-theme .alert-warning { background-color: rgba(250, 209, 112, 0.1); border-color: #fad170; color: #7a6224; } html.mattel-theme .alert-danger, html.mattel-theme .alert-error, .mattel-theme .alert-danger, .mattel-theme .alert-error { background-color: rgba(221, 63, 63, 0.1); border-color: #dd3f3f; color: #7a2424; } html.mattel-theme .alert-info, .mattel-theme .alert-info { background-color: rgba(53, 164, 180, 0.1); border-color: #35a4b4; color: #1a4a52; } /* === FILTER BUTTONS === */ html.mattel-theme .filter-button, html.mattel-theme .filter-btn, .mattel-theme .filter-button, .mattel-theme .filter-btn { border-color: #036da7; color: #036da7; } html.mattel-theme .filter-button:hover, html.mattel-theme .filter-btn:hover, .mattel-theme .filter-button:hover, .mattel-theme .filter-btn:hover { background-color: rgba(3, 109, 167, 0.1); border-color: #025a8a; } html.mattel-theme .filter-button.active, html.mattel-theme .filter-btn.active, .mattel-theme .filter-button.active, .mattel-theme .filter-btn.active { background-color: #036da7 !important; border-color: #036da7 !important; color: #ffffff !important; } /* === ICON BUTTONS === */ html.mattel-theme .icon-button, html.mattel-theme .icon-btn, .mattel-theme .icon-button, .mattel-theme .icon-btn { color: #036da7; } html.mattel-theme .icon-button:hover, html.mattel-theme .icon-btn:hover, .mattel-theme .icon-button:hover, .mattel-theme .icon-btn:hover { background-color: rgba(3, 109, 167, 0.1); color: #025a8a; } /* === TOGGLE SWITCHES === */ html.mattel-theme .toggle-switch input:checked + .toggle-slider, .mattel-theme .toggle-switch input:checked + .toggle-slider { background-color: #036da7 !important; } /* === ACTIVE/SELECTED STATES === */ html.mattel-theme .active, html.mattel-theme .selected, html.mattel-theme [aria-selected="true"], .mattel-theme .active, .mattel-theme .selected, .mattel-theme [aria-selected="true"] { color: #036da7; } /* === BORDERS ON INTERACTIVE ELEMENTS === */ html.mattel-theme .bordered:hover, .mattel-theme .bordered:hover { border-color: #036da7; } /* ============================================================================ ADDITIONAL COMPONENT OVERRIDES Targeting specific elements that weren't covered above ============================================================================ */ /* === TABLE HEADER TEXT (fix visibility issue) === */ html.mattel-theme table thead th, html.mattel-theme .table thead th, html.mattel-theme table.tag-list thead th, html.mattel-theme .tag-list thead th, .mattel-theme table thead th, .mattel-theme .table thead th, .mattel-theme table.tag-list thead th, .mattel-theme .tag-list thead th { color: #ffffff !important; /* White text for table headers */ font-weight: 600; } /* === TOGGLE SWITCHES === */ html.mattel-theme .toggle-switch input:checked ~ .slider, html.mattel-theme .toggle-switch.two input:checked ~ .slider, html.mattel-theme .toggle-switch.three input:checked ~ .slider, .mattel-theme .toggle-switch input:checked ~ .slider, .mattel-theme .toggle-switch.two input:checked ~ .slider, .mattel-theme .toggle-switch.three input:checked ~ .slider { background-color: #036da7 !important; } /* Default dark text for non-toggled labels */ html.mattel-theme .toggle-switch label, .mattel-theme .toggle-switch label { color: #2d2d2d !important; } /* White text for the active/toggled label */ html.mattel-theme .toggle-switch.two input:nth-of-type(1):checked ~ label:nth-of-type(1), html.mattel-theme .toggle-switch.two input:nth-of-type(2):checked ~ label:nth-of-type(2), html.mattel-theme .toggle-switch.three input:nth-of-type(1):checked ~ label:nth-of-type(1), html.mattel-theme .toggle-switch.three input:nth-of-type(2):checked ~ label:nth-of-type(2), html.mattel-theme .toggle-switch.three input:nth-of-type(3):checked ~ label:nth-of-type(3), .mattel-theme .toggle-switch.two input:nth-of-type(1):checked ~ label:nth-of-type(1), .mattel-theme .toggle-switch.two input:nth-of-type(2):checked ~ label:nth-of-type(2), .mattel-theme .toggle-switch.three input:nth-of-type(1):checked ~ label:nth-of-type(1), .mattel-theme .toggle-switch.three input:nth-of-type(2):checked ~ label:nth-of-type(2), .mattel-theme .toggle-switch.three input:nth-of-type(3):checked ~ label:nth-of-type(3) { color: #ffffff !important; } /* === TOOLBAR BUTTONS (SchedulingTab, etc.) === */ html.mattel-theme .toolbar button, html.mattel-theme .tour-bar .tour-item, html.mattel-theme .btn-add-shift, .mattel-theme .toolbar button, .mattel-theme .tour-bar .tour-item, .mattel-theme .btn-add-shift { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } html.mattel-theme .toolbar button:hover, html.mattel-theme .tour-bar .tour-item:hover, html.mattel-theme .btn-add-shift:hover, .mattel-theme .toolbar button:hover, .mattel-theme .tour-bar .tour-item:hover, .mattel-theme .btn-add-shift:hover { background: linear-gradient(135deg, #3f4e4e 0%, #2d3939 100%) !important; border-color: #3f4e4e !important; } /* === SELECTED TOUR ITEM === */ html.mattel-theme .tour-bar .tour-item.selected, .mattel-theme .tour-bar .tour-item.selected { background: linear-gradient(135deg, #036da7 0%, #025a8a 100%) !important; border-color: #036da7 !important; color: #ffffff !important; } /* === SIDEBAR SECTION HEADERS === */ html.mattel-theme .sidebar-section h3, html.mattel-theme .sidebar-section h4, html.mattel-theme .sidebar-section h5, .mattel-theme .sidebar-section h3, .mattel-theme .sidebar-section h4, .mattel-theme .sidebar-section h5 { color: #5f4684; /* Mattel purple for sidebar headers */ } /* === MODAL BUTTONS === */ html.mattel-theme .modal-content button, html.mattel-theme .shift-schedule-modal button, .mattel-theme .modal-content button, .mattel-theme .shift-schedule-modal button { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } html.mattel-theme .modal-content button:hover, html.mattel-theme .shift-schedule-modal button:hover, .mattel-theme .modal-content button:hover, .mattel-theme .shift-schedule-modal button:hover { background: linear-gradient(135deg, #3f4e4e 0%, #2d3939 100%) !important; } /* === EDIT/DELETE BUTTONS === */ html.mattel-theme .edit-buttons button, html.mattel-theme .edit-tag-btn, html.mattel-theme .delete-row-btn, .mattel-theme .edit-buttons button, .mattel-theme .edit-tag-btn, .mattel-theme .delete-row-btn { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } /* === ARROW BUTTONS (pagination) === */ html.mattel-theme .pagination-controls button, html.mattel-theme button.arrow, .mattel-theme .pagination-controls button, .mattel-theme button.arrow { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } /* === NEW TOUR BUTTON === */ html.mattel-theme .tour-item.new-tour, .mattel-theme .tour-item.new-tour { background: linear-gradient(135deg, #036da7 0%, #025a8a 100%) !important; color: #ffffff !important; } /* === MODE TOGGLE BUTTONS === */ html.mattel-theme .mode-toggle button, html.mattel-theme .tag-options button, .mattel-theme .mode-toggle button, .mattel-theme .tag-options button { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } /* === CSV EXPORT LINKS === */ html.mattel-theme .btn-action, html.mattel-theme a.btn-action, .mattel-theme .btn-action, .mattel-theme a.btn-action { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; text-decoration: none; } html.mattel-theme .btn-action:hover, html.mattel-theme a.btn-action:hover, .mattel-theme .btn-action:hover, .mattel-theme a.btn-action:hover { background: linear-gradient(135deg, #3f4e4e 0%, #2d3939 100%) !important; } /* === TOGGLE NUMBER BUTTONS (report type toggles with Mattel accent colors) === */ /* Tour Reports - Teal */ html.mattel-theme .toggle-number:nth-child(1) button, .mattel-theme .toggle-number:nth-child(1) button { background: linear-gradient(135deg, #35a4b4 0%, #2a8392 100%) !important; border-color: #35a4b4 !important; color: #ffffff !important; } /* Activity Reports - Lime Green */ html.mattel-theme .toggle-number:nth-child(2) button, .mattel-theme .toggle-number:nth-child(2) button { background: linear-gradient(135deg, #c0d34e 0%, #9aa93e 100%) !important; border-color: #c0d34e !important; color: #ffffff !important; } /* Photo Reports - Pink */ html.mattel-theme .toggle-number:nth-child(3) button, .mattel-theme .toggle-number:nth-child(3) button { background: linear-gradient(135deg, #cf6489 0%, #a5506e 100%) !important; border-color: #cf6489 !important; color: #ffffff !important; } /* Incident Reports - Red */ html.mattel-theme .toggle-number:nth-child(4) button, .mattel-theme .toggle-number:nth-child(4) button { background: linear-gradient(135deg, #dd3f3f 0%, #b13232 100%) !important; border-color: #dd3f3f !important; color: #ffffff !important; } /* Shift Reports - Yellow */ html.mattel-theme .toggle-number:nth-child(5) button, .mattel-theme .toggle-number:nth-child(5) button { background: linear-gradient(135deg, #fad170 0%, #c8a759 100%) !important; border-color: #fad170 !important; color: #2d2d2d !important; /* Dark text for yellow background */ } /* Hover states for all report type buttons */ html.mattel-theme .toggle-number button:hover, .mattel-theme .toggle-number button:hover { filter: brightness(0.9); transform: translateY(-1px); } /* === SIDEBAR BUTTONS (mb class for margin-bottom) === */ html.mattel-theme .btn-action.mb, .mattel-theme .btn-action.mb { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } /* === HELP ICON BUTTON - Keep small and subtle === */ html.mattel-theme .help-icon-button, .mattel-theme .help-icon-button { background: rgba(3, 109, 167, 0.1) !important; color: #036da7 !important; border: 1px solid #036da7 !important; } html.mattel-theme .help-icon-button:hover, .mattel-theme .help-icon-button:hover { background: rgba(3, 109, 167, 0.2) !important; } /* === SELECTED TABLE ROW === */ html.mattel-theme .selected-row, .mattel-theme .selected-row { background-color: rgba(3, 109, 167, 0.1) !important; } /* === ACTIVE BUTTONS === */ html.mattel-theme .btn-action.active, html.mattel-theme button.active, .mattel-theme .btn-action.active, .mattel-theme button.active { background: linear-gradient(135deg, #036da7 0%, #025a8a 100%) !important; border-color: #036da7 !important; color: #ffffff !important; } /* === DROPDOWN BUTTON === */ html.mattel-theme .dropdown-button, .mattel-theme .dropdown-button { background: transparent !important; color: #036da7 !important; border: none !important; } html.mattel-theme .dropdown-button:hover, .mattel-theme .dropdown-button:hover { background: rgba(3, 109, 167, 0.1) !important; } /* === OTHER TOOLS BUTTONS (mapping sidebar) === */ /* Override btn-secondary to have Mattel grey with white text in mapping context */ html.mattel-theme .btn-secondary, .mattel-theme .btn-secondary { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } html.mattel-theme .btn-secondary:hover, .mattel-theme .btn-secondary:hover { background: linear-gradient(135deg, #3f4e4e 0%, #2d3939 100%) !important; border-color: #3f4e4e !important; color: #ffffff !important; } /* === DATE RANGE POPUP (reset to default site colors, not Mattel grey) === */ /* Override to prevent grey backgrounds in date picker */ html.mattel-theme .date-range-popup, .mattel-theme .date-range-popup { /* Let default colors through, don't apply Mattel grey */ } html.mattel-theme .date-range-popup select, .mattel-theme .date-range-popup select { background: var(--surface) !important; color: var(--text-primary) !important; } html.mattel-theme .date-range-popup .rdrDateRangePickerWrapper, html.mattel-theme .date-range-popup .rdrDefinedRangesWrapper, html.mattel-theme .date-range-popup .rdrStaticRange, html.mattel-theme .date-range-popup .rdrCalendarWrapper, html.mattel-theme .date-range-popup .rdrDateDisplayWrapper, .mattel-theme .date-range-popup .rdrDateRangePickerWrapper, .mattel-theme .date-range-popup .rdrDefinedRangesWrapper, .mattel-theme .date-range-popup .rdrStaticRange, .mattel-theme .date-range-popup .rdrCalendarWrapper, .mattel-theme .date-range-popup .rdrDateDisplayWrapper { background-color: var(--surface-elevated) !important; } html.mattel-theme .date-range-popup .rdrDateDisplayItem, .mattel-theme .date-range-popup .rdrDateDisplayItem { background: var(--surface) !important; border: 1px solid var(--border) !important; } html.mattel-theme .date-range-popup .rdrMonthsHorizontal > div, .mattel-theme .date-range-popup .rdrMonthsHorizontal > div { background-color: var(--surface-elevated) !important; } /* === USER PROFILE ICON (navbar dropdown toggle) === */ /* Red border around the button, not the avatar circle itself */ html.mattel-theme .user-dropdown__toggle, .mattel-theme .user-dropdown__toggle { border: 2px solid #dc4a40 !important; background-color: transparent !important; border: 2px solid #dc4a40 !important; background: #dc4a40 !important; } html.mattel-theme .user-dropdown__toggle:hover, .mattel-theme .user-dropdown__toggle:hover { background-color: rgba(220, 74, 64, 0.1) !important; } /* Keep avatar circle with its original styling */ html.mattel-theme .user-dropdown__toggle .avatar-circle, .mattel-theme .user-dropdown__toggle .avatar-circle { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; color: #ffffff !important; } /* === TOUR TAG VISUALIZER TOUR COLORS === */ /* Active tours (not suspended, not selected) - Mattel green */ html.mattel-theme .tour-bar .tour-item:not(.suspended):not(.selected), .mattel-theme .tour-bar .tour-item:not(.suspended):not(.selected) { background: linear-gradient(135deg, #bfd144 0%, #a0b539 100%) !important; border-color: #bfd144 !important; color: #2d2d2d !important; /* Dark text for better contrast on light green */ } /* Selected tour - Mattel pink */ html.mattel-theme .tour-bar .tour-item.selected, .mattel-theme .tour-bar .tour-item.selected { background: linear-gradient(135deg, #e1578b 0%, #c9476f 100%) !important; border-color: #e1578b !important; color: #ffffff !important; } /* Suspended/inactive tours remain greyed out (default styling maintained) */ /* === OFFICER BADGES === */ /* Officer Badge - Light blue */ html.mattel-theme .officer-badge, .mattel-theme .officer-badge { background: linear-gradient(135deg, rgba(137, 217, 247, 0.9) 0%, rgba(110, 195, 230, 0.85) 100%) !important; border-color: rgba(137, 217, 247, 0.5) !important; } html.mattel-theme .officer-badge:hover, .mattel-theme .officer-badge:hover { box-shadow: var(--shadow-md), 0 0 20px rgba(137, 217, 247, 0.4) !important; border-color: rgba(137, 217, 247, 0.7) !important; } /* ShiftLeader Badge - Mattel green */ html.mattel-theme .shiftleader-badge, .mattel-theme .shiftleader-badge { background: linear-gradient(135deg, rgba(191, 209, 68, 0.9) 0%, rgba(160, 181, 57, 0.85) 100%) !important; border-color: rgba(191, 209, 68, 0.5) !important; } html.mattel-theme .shiftleader-badge:hover, .mattel-theme .shiftleader-badge:hover { box-shadow: var(--shadow-md), 0 0 20px rgba(191, 209, 68, 0.4) !important; border-color: rgba(191, 209, 68, 0.7) !important; } /* SiteLeader Badge - Mattel orange */ html.mattel-theme .siteleader-badge, .mattel-theme .siteleader-badge { background: linear-gradient(135deg, rgba(235, 141, 75, 0.9) 0%, rgba(210, 120, 60, 0.85) 100%) !important; border-color: rgba(235, 141, 75, 0.5) !important; } html.mattel-theme .siteleader-badge:hover, .mattel-theme .siteleader-badge:hover { box-shadow: var(--shadow-md), 0 0 20px rgba(235, 141, 75, 0.4) !important; border-color: rgba(235, 141, 75, 0.7) !important; } /* === ACTIVITY REPORT CREATOR DROPDOWNS === */ /* Officer Dropdown - Light blue to match officer badge */ html.mattel-theme .officer-dropdown-group .custom-dropdown__trigger, .mattel-theme .officer-dropdown-group .custom-dropdown__trigger { background: linear-gradient(135deg, rgba(137, 217, 247, 0.3) 0%, rgba(110, 195, 230, 0.25) 100%) !important; border-color: rgba(137, 217, 247, 0.5) !important; color: #2d2d2d !important; } html.mattel-theme .officer-dropdown-group .custom-dropdown__trigger:hover, .mattel-theme .officer-dropdown-group .custom-dropdown__trigger:hover { background: linear-gradient(135deg, rgba(137, 217, 247, 0.4) 0%, rgba(110, 195, 230, 0.35) 100%) !important; border-color: rgba(137, 217, 247, 0.7) !important; } /* Supervisor Dropdown - Mattel green to match shiftleader badge */ html.mattel-theme .supervisor-dropdown-group .custom-dropdown__trigger, .mattel-theme .supervisor-dropdown-group .custom-dropdown__trigger { background: linear-gradient(135deg, rgba(191, 209, 68, 0.3) 0%, rgba(160, 181, 57, 0.25) 100%) !important; border-color: rgba(191, 209, 68, 0.5) !important; color: #2d2d2d !important; } html.mattel-theme .supervisor-dropdown-group .custom-dropdown__trigger:hover, .mattel-theme .supervisor-dropdown-group .custom-dropdown__trigger:hover { background: linear-gradient(135deg, rgba(191, 209, 68, 0.4) 0%, rgba(160, 181, 57, 0.35) 100%) !important; border-color: rgba(191, 209, 68, 0.7) !important; } /* Entry Type Dropdown - Fix text color to be visible against grey background */ html.mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger, .mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger { color: #ffffff !important; } html.mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger .placeholder, .mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger .placeholder { color: rgba(255, 255, 255, 0.7) !important; }