/* ============================================================ Ducktape OS theme — Score Record Light/dark via . Poppins, teal primary #3ABBDA, magenta accent #93278F, flat surfaces (no shadows), radii 8/6/3. ============================================================ */ :root, [data-bs-theme="light"] { --dt-primary: #3ABBDA; --dt-primary-hover: #2EA8C4; --dt-primary-text: #ffffff; --dt-magenta: #93278F; --dt-green: #7AC943; --dt-red: #FF1D25; --dt-yellow: #FFCD3C; --dt-grey: #858384; --dt-bg: #FFFFFF; --dt-text: #171717; --dt-text-2: #404040; --dt-border: #E8E8E8; --dt-card: #FAFAFA; --dt-card-border: #F0F0F0; --dt-sidebar: #F5F5F5; --dt-popover: #F0F0F0; --dt-secondary-btn: #E5E5E5; --dt-muted: #E0E0E0; --dt-accent-surface: #E6F5F7; --dt-input-border: #BFBFBF; --dt-hover-overlay: rgba(0,0,0,.03); --dt-active-overlay: rgba(0,0,0,.08); --bs-primary: #3ABBDA; --bs-primary-rgb: 58,187,218; --bs-body-bg: #FFFFFF; --bs-body-color: #171717; --bs-border-color: #E8E8E8; --bs-border-radius: 6px; --bs-border-radius-lg: 8px; --bs-border-radius-sm: 3px; --bs-danger: #FF1D25; --bs-danger-rgb: 255,29,37; --bs-success: #7AC943; --bs-success-rgb: 122,201,67; --bs-warning: #FFCD3C; --bs-warning-rgb: 255,205,60; --bs-info: #3ABBDA; --bs-info-rgb: 58,187,218; } [data-bs-theme="dark"] { --dt-primary: #50C9E3; --dt-primary-hover: #3ABBDA; --dt-primary-text: #171717; --dt-magenta: #93278F; --dt-green: #7AC943; --dt-red: #FF1D25; --dt-yellow: #FFCD3C; --dt-grey: #858384; --dt-bg: #3F3D40; --dt-text: #F2F2F2; --dt-text-2: #B3B3B3; --dt-border: #4B494C; --dt-card: #383638; --dt-card-border: #464447; --dt-sidebar: #333133; --dt-popover: #464447; --dt-secondary-btn: #4B494C; --dt-muted: #4F4D50; --dt-accent-surface: #3A4D50; --dt-input-border: #565355; --dt-hover-overlay: rgba(255,255,255,.04); --dt-active-overlay: rgba(255,255,255,.09); --bs-primary: #50C9E3; --bs-primary-rgb: 80,201,227; --bs-body-bg: #3F3D40; --bs-body-color: #F2F2F2; --bs-border-color: #4B494C; } /* ---------- Base ---------- */ html, body { font-family: 'Poppins', system-ui, -apple-system, sans-serif; } body { background: var(--dt-bg) !important; color: var(--dt-text); } h1,h2,h3,h4,h5,h6 { color: var(--dt-text); } .text-secondary, .text-muted { color: var(--dt-text-2) !important; } a { color: var(--dt-primary); } * { box-shadow: none !important; } /* ---------- App shell ---------- */ .sr-app { background: var(--dt-bg) !important; } .sr-topbar { background: var(--dt-sidebar) !important; border-bottom: 1px solid var(--dt-border); } .sr-burger { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; border-radius: 8px !important; } .sr-drawer { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; } .sr-drawer .offcanvas-header { border-bottom: 1px solid var(--dt-border) !important; } .sr-drawer .nav-link { color: var(--dt-text-2) !important; border-radius: 6px !important; } .sr-drawer .nav-link i { color: var(--dt-grey) !important; } .sr-drawer .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; } .sr-drawer .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .sr-drawer .nav-link.active i { color: var(--dt-primary) !important; } .sr-drawer-user .u-name { color: var(--dt-text) !important; } .sr-drawer-user .u-mail { color: var(--dt-text-2) !important; } .sr-avatar { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } /* ---------- Cards & tables ---------- */ .card, .table-card { background: var(--dt-card) !important; border: 1px solid var(--dt-card-border) !important; border-radius: 8px !important; color: var(--dt-text); } .card .card-body { color: var(--dt-text); } .table { --bs-table-bg: transparent; --bs-table-color: var(--dt-text); --bs-table-border-color: var(--dt-border); } .table-light, .table thead.table-light th { background: var(--dt-popover) !important; color: var(--dt-text) !important; } .modal-content { background: var(--dt-popover) !important; color: var(--dt-text) !important; border-radius: 8px !important; border: 1px solid var(--dt-border) !important; } .modal-content.text-dark { color: var(--dt-text) !important; } .modal-content .text-dark { color: var(--dt-text) !important; } .dropdown-menu { background: var(--dt-popover) !important; border: 1px solid var(--dt-border) !important; border-radius: 6px !important; } .dropdown-item { color: var(--dt-text) !important; } .dropdown-item:hover { background: var(--dt-hover-overlay) !important; } hr { border-color: var(--dt-border); opacity: 1; } /* ---------- Buttons ---------- */ .btn { border-radius: 6px !important; font-weight: 500; } .btn-primary, .btn-info { background: var(--dt-primary) !important; border-color: var(--dt-primary-hover) !important; color: var(--dt-primary-text) !important; } .btn-primary:hover, .btn-info:hover { background: var(--dt-primary-hover) !important; } .btn-secondary, .btn-light { background: var(--dt-secondary-btn) !important; border-color: var(--dt-input-border) !important; color: var(--dt-text) !important; } .btn-outline-primary, .btn-outline-info { color: var(--dt-primary) !important; border-color: var(--dt-primary) !important; background: transparent !important; } .btn-outline-primary:hover, .btn-outline-info:hover { background: var(--dt-accent-surface) !important; } .btn-outline-secondary { color: var(--dt-text) !important; border-color: var(--dt-input-border) !important; background: transparent !important; } .btn-outline-secondary:hover { background: var(--dt-hover-overlay) !important; } .btn-danger, .btn-outline-danger:hover { background: var(--dt-red) !important; border-color: #d81920 !important; color: #fff !important; } .btn-outline-danger { color: var(--dt-red) !important; border-color: var(--dt-red) !important; background: transparent !important; } .btn-success { background: var(--dt-green) !important; border-color: #69b338 !important; color: #fff !important; } .btn-warning, .btn-outline-warning { background: var(--dt-magenta) !important; border-color: #7d1f7a !important; color: #fff !important; } .btn-outline-warning { background: transparent !important; color: var(--dt-magenta) !important; border-color: var(--dt-magenta) !important; } .btn:active { background-image: linear-gradient(var(--dt-active-overlay), var(--dt-active-overlay)) !important; } /* ---------- Forms ---------- */ .form-control, .form-select { background: var(--dt-bg) !important; color: var(--dt-text) !important; border: 1px solid var(--dt-input-border) !important; border-radius: 6px !important; } .form-control:focus, .form-select:focus { border-color: var(--dt-primary) !important; outline: 2px solid var(--dt-accent-surface); } .form-control::placeholder { color: var(--dt-grey); } .form-label, .form-check-label { color: var(--dt-text); } .input-group-text { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; border-color: var(--dt-input-border) !important; } /* ---------- Badges / pills ---------- */ .badge { border-radius: 3px !important; font-weight: 500; } .badge.text-bg-light { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; border-color: var(--dt-border) !important; } .badge.text-bg-dark { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; } .badge.text-bg-warning { background: var(--dt-magenta) !important; color: #fff !important; } .badge.text-bg-info, .badge.text-bg-primary { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; } .badge.text-bg-success { background: var(--dt-green) !important; color: #fff !important; } .badge.text-bg-danger { background: var(--dt-red) !important; color: #fff !important; } .alert { border-radius: 8px !important; } .alert-info { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; border-color: var(--dt-primary) !important; } .alert-warning { background: color-mix(in srgb, var(--dt-magenta) 12%, var(--dt-bg)) !important; color: var(--dt-text) !important; border-color: var(--dt-magenta) !important; } /* ---------- Runner console (mobile brand card) ---------- */ .runner-step-card { background: var(--dt-card) !important; border: 1px solid var(--dt-card-border) !important; color: var(--dt-text) !important; border-radius: 8px !important; } .runner-step-card .r-title, .runner-step-card h5, .runner-step-card .fw-bold { color: var(--dt-text) !important; } .runner-step-card .text-white-50, .runner-step-card .opacity-75 { color: var(--dt-text-2) !important; } .r-btn { border-radius: 6px !important; } .m-tabbar { background: var(--dt-sidebar) !important; border-top: 1px solid var(--dt-border) !important; } .m-tabbtn { color: var(--dt-grey) !important; } .m-tabbtn.active { color: var(--dt-primary) !important; } /* ---------- Type pills on card grids (keep semantic, retint brand ones) ---------- */ .tp-purple { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .tp-pink { background: color-mix(in srgb, var(--dt-magenta) 15%, var(--dt-bg)) !important; color: var(--dt-magenta) !important; } /* ---------- Team/Zone dashboards: green bars -> primary blue ---------- */ .dash-wrap { background: var(--dt-bg) !important; color: var(--dt-text) !important; } .dash-wrap .bar { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; } .dash-wrap .rrow, .dash-wrap .trow { border-color: var(--dt-border) !important; } .dash-wrap .rrow .nm, .dash-wrap .rrow .vl, .dash-wrap .gp .nm, .dash-wrap .gp .vl, .dash-wrap .trow .nm, .dash-wrap .trow .vv, .dash-wrap .tname, .dash-wrap .scoreitem .nm, .dash-wrap .scoreitem .vl, .dash-wrap .dash-head .round { color: var(--dt-text) !important; } .dash-wrap .gp.danger .vl, .dash-wrap .dash-head .timer { color: var(--dt-red) !important; } /* ---------- Misc ---------- */ .offcanvas { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; } .list-group-item { background: var(--dt-card) !important; color: var(--dt-text) !important; border-color: var(--dt-card-border) !important; } .nav-tabs .nav-link.active { background: var(--dt-card) !important; color: var(--dt-primary) !important; border-color: var(--dt-border) !important; } .text-primary { color: var(--dt-primary) !important; } .bg-primary { background: var(--dt-primary) !important; } /* Theme toggle button */ .dt-theme-toggle { border: 1px solid var(--dt-input-border); background: var(--dt-secondary-btn); color: var(--dt-text); border-radius: 6px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; } .dt-theme-toggle:hover { background-image: linear-gradient(var(--dt-hover-overlay), var(--dt-hover-overlay)); } /* ---------- SuperAdmin sidebar ---------- */ .sidebar { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; border-right: 1px solid var(--dt-border); } .sidebar-brand { border-bottom: 1px solid var(--dt-border) !important; } .sidebar .nav-link { color: var(--dt-text-2) !important; border-radius: 6px !important; } .sidebar .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; } .sidebar .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .sidebar .text-white, .sidebar .small.fw-semibold { color: var(--dt-text) !important; } .sidebar .logout-link { color: var(--dt-text-2) !important; } .user-avatar { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .sidebar-brand .brand-role { color: var(--dt-primary) !important; } /* Theme-aware logos */ .dt-logo-dark { display: none; } [data-bs-theme="dark"] .dt-logo-light { display: none; } [data-bs-theme="dark"] .dt-logo-dark { display: inline; }