/* ============================================================================ 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:not(.btn-success):not(.btn-danger), html.mattel-theme .btn:not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn), html.mattel-theme button:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-outline):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):not(.status-btn):not(.color-swatch):not(.view-switcher-btn):not(.add-officer-btn):not(.officer-popover-close):not(.request-item__btn):not(.shift-request-popup__tab):not(.shift-request-popup__close):not(.pending-requests-btn):not(.drawer-close-btn):not(.cell-detail-status-btn):not(.report-type-btn):not(.toast-dismiss), .mattel-theme .btn-primary, .mattel-theme .primary-button, .mattel-theme button.primary, .mattel-theme .btn-submit, .mattel-theme .btn-action:not(.btn-success):not(.btn-danger), .mattel-theme .btn:not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn), .mattel-theme button:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-outline):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):not(.status-btn):not(.color-swatch):not(.view-switcher-btn):not(.add-officer-btn):not(.officer-popover-close):not(.request-item__btn):not(.shift-request-popup__tab):not(.shift-request-popup__close):not(.pending-requests-btn):not(.drawer-close-btn):not(.cell-detail-status-btn):not(.report-type-btn):not(.toast-dismiss) { 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:not(.btn-success):not(.btn-danger):hover, html.mattel-theme .btn:not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):hover, html.mattel-theme button:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.help-icon-button):not(.dropdown-button):not(.completion-filter-badge):not(.activity-filter-badge):not(.status-btn):not(.color-swatch):not(.view-switcher-btn):not(.add-officer-btn):not(.officer-popover-close):not(.request-item__btn):not(.shift-request-popup__tab):not(.shift-request-popup__close):not(.pending-requests-btn):not(.drawer-close-btn):not(.cell-detail-status-btn):not(.report-type-btn):not(.toast-dismiss):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:not(.btn-success):not(.btn-danger):hover, .mattel-theme .btn:not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):hover, .mattel-theme button:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.help-icon-button):not(.dropdown-button):not(.completion-filter-badge):not(.activity-filter-badge):not(.status-btn):not(.color-swatch):not(.view-switcher-btn):not(.add-officer-btn):not(.officer-popover-close):not(.request-item__btn):not(.shift-request-popup__tab):not(.shift-request-popup__close):not(.pending-requests-btn):not(.drawer-close-btn):not(.cell-detail-status-btn):not(.report-type-btn):not(.toast-dismiss):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 === */ /* Exclude .glassmorphic schedule cards — their colors are status-driven via inline styles */ html.mattel-theme .officer-card:not(.glassmorphic), html.mattel-theme .user-card, .mattel-theme .officer-card:not(.glassmorphic), .mattel-theme .user-card { border-color: rgba(3, 109, 167, 0.2); } html.mattel-theme .officer-card:not(.glassmorphic):hover, html.mattel-theme .user-card:hover, .mattel-theme .officer-card:not(.glassmorphic):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 === */ /* Exclude scheduling-specific active states that carry functional/semantic colors */ html.mattel-theme .active:not(.status-btn):not(.color-swatch):not(.view-switcher-btn), html.mattel-theme .selected:not(.status-btn):not(.color-swatch):not(.view-switcher-btn), html.mattel-theme [aria-selected="true"], .mattel-theme .active:not(.status-btn):not(.color-swatch):not(.view-switcher-btn), .mattel-theme .selected:not(.status-btn):not(.color-swatch):not(.view-switcher-btn), .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:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn), html.mattel-theme .shift-schedule-modal button:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn), .mattel-theme .modal-content button:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn), .mattel-theme .shift-schedule-modal button:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn) { background: linear-gradient(135deg, #526464 0%, #3f4e4e 100%) !important; border-color: #526464 !important; color: #ffffff !important; } html.mattel-theme .modal-content button:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn):hover, html.mattel-theme .shift-schedule-modal button:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn):hover, .mattel-theme .modal-content button:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn):hover, .mattel-theme .shift-schedule-modal button:not(.status-btn):not(.color-swatch):not(.request-item__btn):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.drawer-close-btn):not(.cell-detail-status-btn):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:not(.status-btn):not(.color-swatch):not(.view-switcher-btn), .mattel-theme .btn-action.active, .mattel-theme button.active:not(.status-btn):not(.color-swatch):not(.view-switcher-btn) { 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 - Mattel teal tint to match other DAR dropdowns */ html.mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger, .mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger { background: linear-gradient(135deg, rgba(53, 164, 180, 0.3) 0%, rgba(42, 131, 146, 0.25) 100%) !important; border-color: rgba(53, 164, 180, 0.5) !important; color: #2d2d2d !important; } html.mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger:hover, .mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger:hover { background: linear-gradient(135deg, rgba(53, 164, 180, 0.4) 0%, rgba(42, 131, 146, 0.35) 100%) !important; border-color: rgba(53, 164, 180, 0.7) !important; } html.mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger .placeholder, .mattel-theme .entry-type-dropdown-group .custom-dropdown__trigger .placeholder { color: rgba(45, 45, 45, 0.6) !important; } /* ============================================================================ SCHEDULING SYSTEM - COLOR PROTECTION ============================================================================ The scheduling system uses semantic/functional colors that must NOT be overridden by the Mattel theme. Status colors (Shift=blue, OT=red, PTO=blue, Sick=amber, etc.), color palette swatches, coverage indicators, and view-switcher active states all carry meaning. These rules use high specificity + !important to restore correct colors after the broad Mattel button/active overrides above. ============================================================================ */ /* --- STATUS BUTTONS in OfficerCardPopover --- These are the Shift/OT/PTO/Vacation/Sick/Training/Off toggles. They use inline --btn-color for each status and must keep their individual status colors, not become Mattel grey. */ html.mattel-theme .officer-popover .status-btn, .mattel-theme .officer-popover .status-btn { background: transparent !important; border-color: var(--btn-color, #1976d2) !important; color: var(--btn-color, #1976d2) !important; } html.mattel-theme .officer-popover .status-btn:hover, .mattel-theme .officer-popover .status-btn:hover { background: color-mix(in srgb, var(--btn-color, #1976d2) 10%, transparent) !important; border-color: var(--btn-color, #1976d2) !important; color: var(--btn-color, #1976d2) !important; } html.mattel-theme .officer-popover .status-btn.active, .mattel-theme .officer-popover .status-btn.active { background: var(--btn-color, #1976d2) !important; border-color: var(--btn-color, #1976d2) !important; color: white !important; } /* --- COLOR PALETTE SWATCHES --- The color picker swatches use inline backgroundColor; Mattel's broad button override blankets them all grey. Reset to let inline styles win. */ html.mattel-theme .officer-popover .color-swatch, .mattel-theme .officer-popover .color-swatch { border-color: transparent !important; /* background-color set via inline style — broad button :not(.color-swatch) keeps it safe */ } html.mattel-theme .officer-popover .color-swatch:hover, .mattel-theme .officer-popover .color-swatch:hover { border-color: transparent !important; } html.mattel-theme .officer-popover .color-swatch.active, .mattel-theme .officer-popover .color-swatch.active { border-color: #374151 !important; color: inherit !important; } html.mattel-theme .officer-popover .color-swatch.clear-swatch, .mattel-theme .officer-popover .color-swatch.clear-swatch { background: linear-gradient(135deg, #f3f4f6 45%, #e5e7eb 45%, #e5e7eb 55%, #f3f4f6 55%) !important; border-color: #d1d5db !important; } html.mattel-theme .officer-popover .color-swatch.clear-swatch.active, .mattel-theme .officer-popover .color-swatch.clear-swatch.active { border-color: #374151 !important; } /* --- POPOVER CLOSE BUTTON --- */ html.mattel-theme .officer-popover .officer-popover-close, .mattel-theme .officer-popover .officer-popover-close { background: transparent !important; border: none !important; color: var(--text-secondary, #666) !important; } html.mattel-theme .officer-popover .officer-popover-close:hover, .mattel-theme .officer-popover .officer-popover-close:hover { background: var(--surface-hover, #f5f5f5) !important; color: var(--text-primary, #333) !important; } /* --- REMOVE FROM SCHEDULE BUTTON --- Keep danger-red styling for destructive action. */ html.mattel-theme .officer-popover .remove-btn, .mattel-theme .officer-popover .remove-btn { background: #ef4444 !important; border-color: #ef4444 !important; color: white !important; } html.mattel-theme .officer-popover .remove-btn:hover, .mattel-theme .officer-popover .remove-btn:hover { background: #dc2626 !important; border-color: #dc2626 !important; } /* --- VIEW SWITCHER TABS --- Active tab must remain primary-colored with white text. */ html.mattel-theme .view-switcher .view-switcher-btn, .mattel-theme .view-switcher .view-switcher-btn { background: transparent !important; border: none !important; color: var(--text-secondary, #666) !important; } html.mattel-theme .view-switcher .view-switcher-btn:hover, .mattel-theme .view-switcher .view-switcher-btn:hover { background: rgba(3, 109, 167, 0.1) !important; color: #036da7 !important; } html.mattel-theme .view-switcher .view-switcher-btn.active, .mattel-theme .view-switcher .view-switcher-btn.active { background: #036da7 !important; color: white !important; box-shadow: 0 2px 8px rgba(3, 109, 167, 0.3) !important; } /* --- OFFICER CARDS (glassmorphic) --- Background + border come from inline style via --card-accent-rgb. Mattel's .officer-card override must not fight the inline status colors. */ html.mattel-theme .officer-card.glassmorphic, .mattel-theme .officer-card.glassmorphic { border-color: inherit !important; } html.mattel-theme .officer-card.glassmorphic:hover, .mattel-theme .officer-card.glassmorphic:hover { border-color: inherit !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; } /* --- ADD OFFICER "+" BUTTON --- Keep dashed-circle style, not Mattel solid grey. */ html.mattel-theme .add-officer-btn, .mattel-theme .add-officer-btn { background: transparent !important; border: 2px dashed #036da7 !important; color: #036da7 !important; } html.mattel-theme .add-officer-btn:hover, .mattel-theme .add-officer-btn:hover { background: rgba(3, 109, 167, 0.1) !important; border-color: #036da7 !important; color: #036da7 !important; } /* --- EMPTY CELL HINT --- The "+ Add" text inside empty cells should not be styled as a button. */ html.mattel-theme .empty-cell-hint, .mattel-theme .empty-cell-hint { background: transparent !important; border: none !important; color: var(--text-secondary, #999) !important; } /* --- COVERAGE INDICATOR BADGES --- These use semantic colors (green/yellow/red) for staffing levels. */ html.mattel-theme .coverage-indicator, .mattel-theme .coverage-indicator { color: white !important; /* background set via inline style — do not override */ } /* --- PENDING / SWAP BADGES in view switcher --- Red and amber badges must keep their alert colors. */ html.mattel-theme .view-switcher .pending-badge, .mattel-theme .view-switcher .pending-badge { background: #f44336 !important; color: white !important; border: none !important; } html.mattel-theme .view-switcher .swap-badge, .mattel-theme .view-switcher .swap-badge { background: #f59e0b !important; color: white !important; border: none !important; } /* --- STATUS CHIP in popover context --- The "On Shift" / "Off Shift" chip uses inline bg color. */ html.mattel-theme .officer-popover .status-chip, .mattel-theme .officer-popover .status-chip { border: none !important; /* background + color set inline */ } /* --- SCHEDULE CELL BUTTONS --- Date navigator arrows, publish/unpublish buttons in the scheduling header should still use Mattel theme. Only protect specific functional elements listed above. */ /* --- SHIFT REQUEST POPUP --- Approve (green) and Deny (red) buttons must keep semantic colors. */ html.mattel-theme .request-item__btn--approve, .mattel-theme .request-item__btn--approve { background: rgba(34, 197, 94, 0.1) !important; color: #22c55e !important; border: none !important; } html.mattel-theme .request-item__btn--approve:hover, .mattel-theme .request-item__btn--approve:hover { background: #22c55e !important; color: white !important; } html.mattel-theme .request-item__btn--deny, .mattel-theme .request-item__btn--deny { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; border: none !important; } html.mattel-theme .request-item__btn--deny:hover, .mattel-theme .request-item__btn--deny:hover { background: #ef4444 !important; color: white !important; } /* --- PENDING REQUESTS BADGE --- The pulse-badge should remain red. */ html.mattel-theme .pending-requests-badge, .mattel-theme .pending-requests-badge { background: #ef4444 !important; color: white !important; border: none !important; } /* --- PENDING REQUESTS BUTTON --- Keep purple gradient for the floating requests button. */ html.mattel-theme .pending-requests-btn, .mattel-theme .pending-requests-btn { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; border: none !important; color: white !important; } html.mattel-theme .pending-requests-btn:hover, .mattel-theme .pending-requests-btn:hover { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important; } /* --- SHIFT REQUEST POPUP TABS --- Active tab needs its purple accent. */ html.mattel-theme .shift-request-popup__tab, .mattel-theme .shift-request-popup__tab { background: transparent !important; border: none !important; color: var(--text-secondary, #666) !important; } html.mattel-theme .shift-request-popup__tab:hover, .mattel-theme .shift-request-popup__tab:hover { background: var(--surface-hover, #f5f5f5) !important; color: var(--text-primary, #333) !important; } html.mattel-theme .shift-request-popup__tab--active, .mattel-theme .shift-request-popup__tab--active { color: #8b5cf6 !important; border-bottom: 2px solid #8b5cf6 !important; } /* --- SHIFT REQUEST POPUP CLOSE --- */ html.mattel-theme .shift-request-popup__close, .mattel-theme .shift-request-popup__close { background: transparent !important; border: none !important; color: var(--text-secondary, #666) !important; } html.mattel-theme .shift-request-popup__close:hover, .mattel-theme .shift-request-popup__close:hover { background: var(--surface-hover, #f5f5f5) !important; color: var(--text-primary, #333) !important; } /* --- SEMANTIC ACTION BUTTONS (success/danger/outline) --- .btn-success (approve/confirm) and .btn-danger (reject/delete) carry semantic meaning. They must keep green and red respectively, not Mattel grey. .btn-outline keeps its transparent/border-only style. */ html.mattel-theme .btn-success, .mattel-theme .btn-success { background: linear-gradient(135deg, #4caf50, #388e3c) !important; border-color: #4caf50 !important; color: white !important; } html.mattel-theme .btn-success:hover:not(:disabled), .mattel-theme .btn-success:hover:not(:disabled) { background: linear-gradient(135deg, #388e3c, #2e7d32) !important; border-color: #388e3c !important; } html.mattel-theme .btn-danger, .mattel-theme .btn-danger { background: linear-gradient(135deg, #f44336, #d32f2f) !important; border-color: #f44336 !important; color: white !important; } html.mattel-theme .btn-danger:hover:not(:disabled), .mattel-theme .btn-danger:hover:not(:disabled) { background: linear-gradient(135deg, #d32f2f, #b71c1c) !important; border-color: #d32f2f !important; } html.mattel-theme .btn-outline, .mattel-theme .btn-outline { background: transparent !important; border-color: #036da7 !important; color: #036da7 !important; } html.mattel-theme .btn-outline:hover:not(:disabled), .mattel-theme .btn-outline:hover:not(:disabled) { background: rgba(3, 109, 167, 0.1) !important; border-color: #025a8a !important; color: #025a8a !important; } /* --- DRAWER CLOSE BUTTON --- All scheduling drawers use this. Must stay transparent/subtle. */ html.mattel-theme .drawer-close-btn, .mattel-theme .drawer-close-btn { background: transparent !important; border: none !important; color: var(--text-secondary, #666) !important; } html.mattel-theme .drawer-close-btn:hover, .mattel-theme .drawer-close-btn:hover { background: #f5f5f5 !important; color: var(--text-primary, #333) !important; } /* --- CELL DETAIL STATUS BUTTONS --- These status selection buttons in CellDetailDrawer use inline styles for status-specific colors. They are excluded from the broad button selector via :not(.cell-detail-status-btn), so inline styles take effect. */