/* ============================================================ CuraPro Resourcing - Site Overrides Theme: Bootswatch Slate palette on Tabler admin layout Light / dark toggle via data-bs-theme on ============================================================ */ /* ── Buttons — flat, no shadow ───────────────────────────── */ /* Kill box-shadow (Tabler + Bootstrap variables) and text-shadow (Bootswatch Slate) */ :root { --tblr-btn-box-shadow: none; --bs-btn-box-shadow: none; } .btn, .btn:hover, .btn:focus, .btn:active, .btn.active, .btn-check:checked + .btn { box-shadow: none !important; text-shadow: none !important; } /* Bootswatch Slate adds text-shadow to all headings — strip it */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { text-shadow: none !important; } /* ── Base font size ──────────────────────────────────────── */ :root { font-size: 16px; --tblr-body-font-size: 0.9375rem; --tblr-font-size-base: 0.9375rem; } /* Form controls — Tabler hardcodes font-size in rem, override explicitly */ .form-control, .form-select { font-size: 1rem !important; } .form-control-sm, .form-select-sm { font-size: 0.9rem !important; } /* Buttons — Tabler's btn-sm locks font-size to 0.75rem, lift it */ .btn { --tblr-btn-font-size: 0.875rem; } .btn-sm, .btn-group-sm > .btn { --tblr-btn-font-size: 0.875rem !important; font-size: 0.875rem !important; padding: 0.35rem 0.65rem !important; } /* ── Brand colour tokens (both themes) ───────────────────── */ :root { --tblr-primary: #18BC9C; --tblr-primary-rgb: 24, 188, 156; --tblr-secondary: #95a5a6; --tblr-secondary-rgb: 149, 165, 166; --tblr-success: #18bc9c; --tblr-success-rgb: 24, 188, 156; --tblr-info: #3498db; --tblr-info-rgb: 52, 152, 219; --tblr-warning: #f39c12; --tblr-warning-rgb: 243, 156, 18; --tblr-danger: #e74c3c; --tblr-danger-rgb: 231, 76, 60; --tblr-dark: #2c3e50; --tblr-dark-rgb: 44, 62, 80; --bs-primary: #18BC9C; --bs-primary-rgb: 24, 188, 156; } /* ── Light-mode tokens ───────────────────────────────────── */ [data-bs-theme="light"] { --cp-border: #9fb3c8; --cp-label: #2c3e50; --cp-card-head-bg: #eef2f7; --cp-card-head-border: #c5d4e3; } /* ── Dark-mode tokens ────────────────────────────────────── */ [data-bs-theme="dark"] { --cp-border: #4a5568; --cp-label: #cbd5e0; --cp-card-head-bg: #1e2a38; --cp-card-head-border: #2d3e50; } /* ── Sidebar ─────────────────────────────────────────────── */ .navbar-vertical { background-color: #1a252f !important; } .navbar-vertical .nav-link.active, .navbar-vertical .nav-link:hover { color: #18bc9c !important; } .navbar-vertical .navbar-brand { padding: 0; width: 100%; } .navbar-vertical .navbar-brand a { display: block; width: 100%; } /* Sub-menu indentation + collapse arrow rotation */ .navbar-vertical .nav-link .nav-link-arrow { margin-left: auto; transition: transform .2s; width: 1rem; height: 1rem; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2318bc9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .navbar-vertical .nav-link.collapsed .nav-link-arrow { transform: rotate(-90deg); } .navbar-vertical .navbar-nav .navbar-nav .nav-link { padding-left: 2.75rem; font-size: 0.875rem; } /* ── Form controls ───────────────────────────────────────── */ .form-control, .form-select, .form-control-sm, .form-select-sm { border: 1.5px solid var(--cp-border); } [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select, [data-bs-theme="light"] .form-control-sm, [data-bs-theme="light"] .form-select-sm { color: #212529; background-color: #fff; } .form-control:focus, .form-select:focus { border-color: #18bc9c; box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, .2); } [data-bs-theme="light"] .form-control::placeholder { color: #8fa3b1; } .form-label { font-weight: 600; color: var(--cp-label); margin-bottom: 0.3rem; } .form-label.small, label.form-label.small { font-weight: 500; } /* Checkboxes */ .form-check-input { border: 1.5px solid var(--cp-border); } .form-check-input:checked { background-color: #18bc9c; border-color: #18bc9c; } /* ── Cards ───────────────────────────────────────────────── */ .card-header { background-color: var(--cp-card-head-bg); border-bottom: 1.5px solid var(--cp-card-head-border); font-weight: 600; min-height: 4.75rem; } [data-bs-theme="light"] .card { border: 1px solid #c5d4e3; box-shadow: 0 1px 4px rgba(44,62,80,.08); } [data-bs-theme="dark"] .card { border: 1px solid #2d3e50; box-shadow: 0 1px 4px rgba(0,0,0,.3); } /* ── Accordion ───────────────────────────────────────────── */ .accordion-button:not(.collapsed) { background-color: rgba(24, 188, 156, .12); font-weight: 600; border-bottom: 2px solid rgba(24, 188, 156, .3); } [data-bs-theme="light"] .accordion-button:not(.collapsed) { color: #2c3e50; } .accordion-button { font-weight: 500; } [data-bs-theme="light"] .accordion-button { color: #2c3e50; } .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, .2); } [data-bs-theme="light"] .accordion-item { border: 1px solid #c5d4e3; } [data-bs-theme="dark"] .accordion-item { border: 1px solid #2d3e50; } /* ── Tables ──────────────────────────────────────────────── */ .table thead th { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; } [data-bs-theme="light"] .table thead th { background-color: #d8e4f0; color: #1a2e42; border-bottom: 2px solid #9fb3c8; } [data-bs-theme="dark"] .table thead th { background-color: #1e2a38; color: #a0b4c8; border-bottom: 2px solid #2d3e50; } /* Alternating row stripes — light */ [data-bs-theme="light"] .table tbody tr:nth-child(even) { background-color: #f2f6fb; } [data-bs-theme="light"] .table tbody tr:nth-child(odd) { background-color: #ffffff; } [data-bs-theme="light"] .table tbody td { border-bottom: 1px solid #dde6f0; } /* Alternating row stripes — dark */ [data-bs-theme="dark"] .table tbody tr:nth-child(even) { background-color: rgba(255,255,255,.03); } [data-bs-theme="dark"] .table tbody tr:nth-child(odd) { background-color: transparent; } [data-bs-theme="dark"] .table tbody td { border-bottom: 1px solid #2d3e50; } .table-hover tbody tr:hover { background-color: rgba(24, 188, 156, .1) !important; } [data-bs-theme="light"] .card-table tbody tr:nth-child(even) { background-color: #f2f6fb; } /* ── Badges ──────────────────────────────────────────────── */ /* Light mode: tinted pill + saturated dark text */ .badge.bg-success-lt { background-color: rgba(16,185,129,.20); color: #065f46; font-weight: 600; } .badge.bg-warning-lt { background-color: rgba(245,158,11,.20); color: #713f12; font-weight: 600; } .badge.bg-danger-lt { background-color: rgba(239,68,68,.20); color: #7f1d1d; font-weight: 600; } .badge.bg-blue-lt { background-color: rgba(14,116,144,.18); color: #0e7490; font-weight: 600; } .badge.bg-primary-lt { background-color: rgba(16,185,129,.20); color: #065f46; font-weight: 600; } .badge.bg-secondary-lt { background-color: rgba(30,58,92,.14); color: #1e3a5c; font-weight: 600; border: 1px solid rgba(30,58,92,.20); } .badge.bg-red-lt { background-color: rgba(239,68,68,.20); color: #7f1d1d; font-weight: 600; } .badge.bg-green-lt { background-color: rgba(16,185,129,.20); color: #065f46; font-weight: 600; } /* Dark mode: rich solid backgrounds + bright contrasting text. Needs !important to beat Tabler's .bg-xxx-lt utility rules. */ [data-bs-theme="dark"] .badge.bg-success-lt { background-color: #064e3b !important; color: #6ee7b7 !important; } /* emerald */ [data-bs-theme="dark"] .badge.bg-warning-lt { background-color: #78350f !important; color: #fcd34d !important; } /* amber */ [data-bs-theme="dark"] .badge.bg-danger-lt { background-color: #7f1d1d !important; color: #fca5a5 !important; } /* rose */ [data-bs-theme="dark"] .badge.bg-blue-lt { background-color: #0c4a6e !important; color: #7dd3fc !important; } /* sky blue */ [data-bs-theme="dark"] .badge.bg-primary-lt { background-color: #064e3b !important; color: #6ee7b7 !important; } [data-bs-theme="dark"] .badge.bg-secondary-lt { background-color: #0f2a40 !important; color: #7fb3d3 !important; border: 1px solid rgba(127,179,211,.2) !important; } /* deep navy */ [data-bs-theme="dark"] .badge.bg-red-lt { background-color: #7f1d1d !important; color: #fca5a5 !important; } [data-bs-theme="dark"] .badge.bg-green-lt { background-color: #064e3b !important; color: #6ee7b7 !important; } /* ── Table row tints ─────────────────────────────────────── */ /* Referee rows use Bootstrap table-* variant classes */ [data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(16,185,129,.12); --tblr-table-bg: rgba(16,185,129,.12); } [data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(245,158,11,.12); --tblr-table-bg: rgba(245,158,11,.12); } [data-bs-theme="dark"] .table-info { --bs-table-bg: rgba(14,116,144,.14); --tblr-table-bg: rgba(14,116,144,.14); } [data-bs-theme="dark"] .table-danger { --bs-table-bg: rgba(239,68,68,.12); --tblr-table-bg: rgba(239,68,68,.12); } /* Document rows have no class — use :has() to tint based on the badge they contain */ [data-bs-theme="dark"] tr:has(.badge.bg-success-lt) { background-color: rgba(16,185,129,.10) !important; } [data-bs-theme="dark"] tr:has(.badge.bg-warning-lt) { background-color: rgba(245,158,11,.10) !important; } [data-bs-theme="dark"] tr:has(.badge.bg-danger-lt) { background-color: rgba(239,68,68,.10) !important; } [data-bs-theme="dark"] tr:has(.badge.bg-blue-lt) { background-color: rgba(14,116,144,.12) !important; } /* Same treatment in light mode — very light wash */ [data-bs-theme="light"] tr:has(.badge.bg-success-lt) { background-color: rgba(16,185,129,.06) !important; } [data-bs-theme="light"] tr:has(.badge.bg-warning-lt) { background-color: rgba(245,158,11,.06) !important; } [data-bs-theme="light"] tr:has(.badge.bg-danger-lt) { background-color: rgba(239,68,68,.06) !important; } [data-bs-theme="light"] tr:has(.badge.bg-blue-lt) { background-color: rgba(14,116,144,.06) !important; } /* Prominent status badge */ .badge-status { font-size: 0.875rem !important; padding: 0.4em 0.8em !important; } /* Table action button icons */ .card-table .btn .ti { font-size: 1.25rem !important; } /* Table header icons */ .card-table thead th .ti { font-size: 1.2rem !important; vertical-align: middle; } /* ── Page header sub-text ────────────────────────────────── */ .page-pretitle { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 0.75rem; } [data-bs-theme="light"] .page-pretitle { color: #5d7183; } [data-bs-theme="dark"] .page-pretitle { color: #8fa3b8; } /* ── Theme toggle button ─────────────────────────────────── */ #theme-toggle { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; font-size: 1.1rem; transition: background .2s; } #theme-toggle:hover { background: rgba(24,188,156,.15); } [data-bs-theme="light"] #theme-toggle .icon-dark { display: none; } [data-bs-theme="dark"] #theme-toggle .icon-light { display: none; } /* ── Application wizard steps ────────────────────────────── */ .wizard-steps { display: flex; list-style: none; padding: 0; margin-bottom: 2rem; border-bottom: 2px solid #c5d4e3; } .wizard-steps li { flex: 1; text-align: center; padding: 0.75rem 0; font-size: 0.875rem; color: #5d7183; position: relative; } .wizard-steps li.active { color: #18bc9c; font-weight: 700; border-bottom: 3px solid #18bc9c; margin-bottom: -2px; } .wizard-steps li.completed { color: #117a65; font-weight: 600; } /* ── Application edit tabs ───────────────────────────────── */ /* Replace Bootstrap's white-bg + border-trick with a plain underline indicator so the active tab is clear in both light and dark themes. */ #appTabs.nav-tabs { border-bottom: none; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0.35rem; padding-bottom: 0.5rem; } #appTabs .nav-link { background: transparent !important; border: 1px solid var(--tblr-border-color, rgba(98,105,118,.3)) !important; border-radius: 0.375rem !important; color: var(--tblr-secondary) !important; white-space: nowrap; padding: 0.45rem 0.85rem; font-size: 0.875rem; transition: color .15s, border-color .15s, background .15s; } #appTabs .nav-link:hover { color: var(--tblr-primary) !important; border-color: var(--tblr-primary) !important; background: rgba(24,188,156,.07) !important; } #appTabs .nav-link.active { color: var(--tblr-primary) !important; border-color: var(--tblr-primary) !important; background: rgba(24,188,156,.12) !important; font-weight: 600; } /* ── Print ───────────────────────────────────────────────── */ @media print { .navbar-vertical, .navbar-expand-md, .footer, .btn, .card-options { display: none !important; } .page-wrapper { margin: 0 !important; } }