/* ========================================================================== OT_App visual theme (2026-08-24) -- TailAdmin-style reskin. Restyles the existing Bootstrap 4 / SB Admin 2 components in place; no page markup was changed to make this work. Dark mode is handled by css/dark-mode.css (activated via ) which loads after this file and wins on specificity for anything it overrides. ========================================================================== */ :root { --primary: #3C50E0; --primary-dark: #2938B5; --secondary: #80CAEE; --stroke: #E2E8F0; --whiten: #F1F5F9; --whiter: #F5F7FD; --body: #64748B; --black: #1C2434; --bodydark2: #8A99AF; --gray2: #EFF4FB; --meta1: #DC3545; --meta2: #EFF2F7; --meta3: #10B981; --meta4: #313D4A; --meta5: #259AE6; --meta6: #FFBA00; --meta7: #FF6766; --success: #219653; --danger: #D34053; --warning: #FFA70B; --card: #FFFFFF; --page: #F1F5F9; --graydark: #333A48; } /* ---------- Base ---------- */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--page); color: var(--black); } #wrapper #content-wrapper { background-color: var(--page); } a { color: var(--primary); } a:hover { color: var(--primary-dark); } h1, h2, h3, h4, h5, h6 { color: var(--black); font-weight: 700; } .text-gray-800, .text-dark { color: var(--black) !important; } .text-gray-600, .text-gray-400, .text-muted { color: var(--body) !important; } hr, .sidebar-divider { border-color: var(--stroke); } /* ---------- Sidebar ---------- Sidebar color is a user preference (Dark navy, default, or the original Blue gradient), independent of light/dark page theme -- toggled via .sidebar-blue on , persisted in localStorage separately from ot_app_theme. See the inline script in header.php. Restyled 2026-08-30 away from the old SB Admin 2 look (edge-to-edge nav rows, a separate solid-color card for every open submenu, repeated "Category:" sub-headers, no indication of which page you're on) to a flatter, current admin-dashboard style: rounded inset "pill" items with margin instead of full-width rows, submenus that stay on the sidebar's own background (just indented under a thin guideline) instead of a visually separate block, a rotating chevron per expandable item, and server-computed active-state so the current page's section is already open and highlighted on load instead of every section starting collapsed with no indication of where you are. */ :root { --sidebar-bg: #1C2434; --sidebar-text: #AEB7C4; --sidebar-text-hover: #fff; --sidebar-hover-bg: rgba(255, 255, 255, .07); --sidebar-active-bg: rgba(60, 80, 224, .35); --sidebar-guide: rgba(255, 255, 255, .09); } html.sidebar-blue { --sidebar-bg: linear-gradient(180deg, #4e73df 10%, #224abe 100%); --sidebar-text: rgba(255, 255, 255, .8); --sidebar-hover-bg: rgba(255, 255, 255, .12); --sidebar-active-bg: rgba(255, 255, 255, .24); --sidebar-guide: rgba(255, 255, 255, .22); } .sidebar.bg-gradient-primary { background: var(--sidebar-bg) !important; } .sidebar-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .sidebar-swatch-dark { background: #1C2434; } .sidebar-swatch-blue { background: linear-gradient(180deg, #4e73df 10%, #224abe 100%); } .sidebar-swatch.active { border-color: var(--primary); } .sidebar .nav-item { padding: 0 .8rem; } .sidebar .nav-item .nav-link { display: flex; align-items: center; width: auto; /* css/admin-layout.css hardcodes width:14rem, sized for the original edge-to-edge rows -- with .nav-item's new side padding above, that fixed width overflows past the sidebar's own right edge into the page body. */ color: var(--sidebar-text); font-weight: 500; font-size: .855rem; border-radius: 8px; margin: .1rem 0; padding: .58rem .7rem; transition: background-color .15s ease, color .15s ease; } .sidebar .nav-item .nav-link:hover { background-color: var(--sidebar-hover-bg); color: var(--sidebar-text-hover); } .sidebar .nav-item .nav-link.active, .sidebar .nav-item .nav-link[data-toggle="collapse"]:not(.collapsed) { background-color: var(--sidebar-active-bg); color: var(--sidebar-text-hover); } .sidebar .nav-item .nav-link i { color: inherit; } .sidebar .nav-item .nav-link svg { width: 17px; height: 17px; margin-right: .65rem; flex-shrink: 0; stroke: currentColor; opacity: .8; } .sidebar .nav-item .nav-link.active svg, .sidebar .nav-item .nav-link[data-toggle="collapse"]:not(.collapsed) svg { opacity: 1; } /* The expand/collapse indicator itself is css/admin-layout.css's built-in `::after` chevron (a Font Awesome glyph that swaps between a right-arrow and a down-arrow via the .collapsed class) -- restyled here to match the new palette instead of its default flat gray. A previous version of this redesign also rendered a second, custom SVG chevron in the markup without realizing that one already existed, producing two visible arrows per row. */ .sidebar .nav-item .nav-link[data-toggle="collapse"]::after { color: var(--sidebar-text); opacity: .7; font-size: .75rem; } .sidebar .nav-item .nav-link.active[data-toggle="collapse"]::after, .sidebar .nav-item .nav-link[data-toggle="collapse"]:not(.collapsed)::after { color: var(--sidebar-text-hover); opacity: .9; } .sidebar-brand-text { color: #fff; font-weight: 700; } /* Submenus blend into the sidebar's own background instead of sitting in a separately-colored card -- just indented under a thin left guideline. css/admin-layout.css defines its own rules for all of these chained through 4-5 classes (.sidebar .nav-item .collapse(ing) .collapse-inner [.collapse-item[:hover|.active]]) -- a shorter selector loses on specificity regardless of load order, so every override below matches that same chain length (same fix already applied once in dark-mode.css, just missed here when this section was first written). */ .sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner, .sidebar .nav-item .collapse .bg-white, .sidebar .nav-item .collapsing .bg-white { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; min-width: 0 !important; margin: 0 0 0 1.05rem !important; padding: .2rem 0 .3rem .65rem !important; border-left: 1px solid var(--sidebar-guide); } .sidebar .nav-item .collapse .collapse-inner .collapse-header, .sidebar .nav-item .collapsing .collapse-inner .collapse-header { display: none; } .sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item { display: block; color: var(--sidebar-text); font-size: .8rem; font-weight: 500; padding: .42rem .65rem; margin: .05rem .5rem .05rem 0; border-radius: 6px; transition: background-color .15s ease, color .15s ease; } .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapse .collapse-inner .collapse-item:active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:active { background-color: var(--sidebar-hover-bg); color: var(--sidebar-text-hover); } .sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active { background-color: var(--sidebar-active-bg); color: var(--sidebar-text-hover); font-weight: 600; } .sidebar .nav-item .sidebar-item-divider { height: 1px; background: var(--sidebar-guide); margin: .35rem .5rem .35rem 0; } /* ---------- Topbar ---------- */ .topbar.navbar-light { background-color: var(--card) !important; box-shadow: 0px 1px 3px rgba(0, 0, 0, .08) !important; border-bottom: none; } .topbar-divider { border-left: 1px solid var(--stroke) !important; } .topbar .navbar-search .form-control { border-radius: 6px; } /* ---------- Theme toggle (pill switch) ---------- */ .dm-switch { position: relative; width: 46px; height: 24px; border-radius: 20px; background: var(--stroke); border: none; padding: 0; cursor: pointer; flex-shrink: 0; transition: background .15s; } .dm-switch.on { background: var(--primary); } .dm-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; transition: transform .15s; font-size: 10px; color: var(--primary); } .dm-switch.on .dm-knob { transform: translateX(22px); color: var(--warning); } /* ---------- Cards ---------- */ .card { background-color: var(--card); border: 1px solid var(--stroke); border-radius: 10px; box-shadow: 0px 8px 13px -3px rgba(0, 0, 0, .06); } .card-header, .card-footer { background-color: var(--gray2); border-color: var(--stroke); } .shadow, .shadow-sm { box-shadow: 0px 8px 13px -3px rgba(0, 0, 0, .06) !important; } /* ---------- Buttons ---------- */ .btn { border-radius: 6px; font-weight: 600; } .btn-primary { background-color: var(--primary); border-color: var(--primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); } .btn-outline-secondary { color: var(--body); border-color: var(--stroke); } .btn-outline-secondary:hover { background-color: var(--body); border-color: var(--body); } .btn-danger { background-color: var(--danger); border-color: var(--danger); } .btn-outline-danger { color: var(--danger); border-color: var(--danger); } .btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); } .btn-success { background-color: var(--success); border-color: var(--success); } /* ---------- Tables ---------- */ .table thead th { background-color: var(--gray2); color: var(--body); text-transform: uppercase; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; border-color: var(--stroke); } .table th, .table td { border-color: var(--stroke); } .table-hover tbody tr:hover { background-color: var(--whiter); } /* ---------- Forms ---------- */ .form-control, select.form-control, textarea { border: 1px solid var(--stroke); border-radius: 6px; color: var(--black); } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(60, 80, 224, .12); } /* ---------- Alerts (soft tints) ---------- */ .alert { border-radius: 6px; border: 1px solid transparent; } .alert-success { background-color: rgba(33, 150, 83, .08); color: var(--success); border-color: rgba(33, 150, 83, .18); } .alert-danger { background-color: rgba(211, 64, 83, .08); color: var(--danger); border-color: rgba(211, 64, 83, .18); } .alert-warning { background-color: rgba(255, 167, 11, .1); color: #9a6b00; border-color: rgba(255, 167, 11, .22); } .alert-info { background-color: rgba(37, 154, 230, .08); color: var(--meta5); border-color: rgba(37, 154, 230, .18); } /* ---------- Badges ---------- */ .badge { border-radius: 20px; font-weight: 600; padding: .35em .75em; } .badge-primary { background-color: var(--primary); } .badge-success { background-color: var(--success); } .badge-danger { background-color: var(--danger); } .badge-warning { background-color: var(--warning); color: #4a3200; } .badge-secondary { background-color: var(--gray2); color: var(--body); } /* ---------- Dropdowns / pagination / tabs ---------- */ .dropdown-menu { border-color: var(--stroke); border-radius: 8px; box-shadow: 0px 8px 13px -3px rgba(0, 0, 0, .1); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--whiter); } .page-link { color: var(--body); border-color: var(--stroke); } .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); } .nav-tabs { border-color: var(--stroke); } .nav-tabs .nav-link { color: var(--body); } .nav-tabs .nav-link.active { color: var(--black); border-color: var(--stroke) var(--stroke) var(--card); } /* ---------- Stat cards (icon-badge style, matching the reference dashboard) ---------- */ /* Existing markup is SB-Admin-2's ".card.border-left-X > .card-body.text-center > h6 + h2" pattern (dashboard.php, clients.php, profile.php, user-profile.php). Kept that structure -- just recolor the accent border to the new palette and add an icon-circle badge (new markup, one ...) dropped in per-card since each one needs a different, label-appropriate icon. */ .card.border-left-primary { border-left: .25rem solid var(--primary) !important; } .card.border-left-success { border-left: .25rem solid var(--success) !important; } .card.border-left-warning { border-left: .25rem solid var(--warning) !important; } .card.border-left-info { border-left: .25rem solid var(--meta5) !important; } .card.border-left-danger { border-left: .25rem solid var(--danger) !important; } .stat-icon { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto .75rem; } .stat-icon svg { width: 22px; height: 22px; } .stat-icon-primary { background: rgba(60, 80, 224, .12); color: var(--primary); } .stat-icon-success { background: rgba(33, 150, 83, .12); color: var(--success); } .stat-icon-warning { background: rgba(255, 167, 11, .14); color: #9a6b00; } .stat-icon-info { background: rgba(37, 154, 230, .12); color: var(--meta5); } .stat-icon-danger { background: rgba(211, 64, 83, .12); color: var(--danger); } /* ---------- Trend badges (dashboard KPI cards) ---------- */ .trend { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .trend.up { color: var(--success); } .trend.down { color: var(--danger); } .trend.flat { color: var(--body); } .trend svg { width: 10px; height: 11px; } /* ---------- List-group (Action Queue) ---------- */ .list-group-item { border-radius: 6px !important; margin-bottom: 6px; border-width: 1px !important; font-weight: 500; } .list-group-item:last-child { margin-bottom: 0; } .list-group-item-warning { background-color: rgba(255, 167, 11, .12); color: #7a5400; border-color: rgba(255, 167, 11, .3); } .list-group-item-danger { background-color: rgba(211, 64, 83, .12); color: var(--danger); border-color: rgba(211, 64, 83, .3); } .list-group-item-secondary { background-color: var(--gray2); color: var(--body); border-color: var(--stroke); } .list-group-item-dark { background-color: rgba(51, 58, 72, .1); color: var(--graydark); border-color: rgba(51, 58, 72, .25); } .list-group-item-primary { background-color: rgba(60, 80, 224, .1); color: var(--primary); border-color: rgba(60, 80, 224, .25); } /* ---------- Live "on shift now" pulse dot (dashboard rota widgets) ---------- Same animation as pages/rota.php's own .rota-now::before, given a standalone class here since the dashboard badges need the dot alongside other text rather than as a pseudo-element prefix. */ .rota-now-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 4px; animation: dash-rota-pulse 1.4s ease-in-out infinite; } @keyframes dash-rota-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* ---------- Team Today dashboard widget ---------- */ .team-today-panels { gap: 1rem 0; } .team-today-panel { background: var(--gray2); border: 1px solid var(--stroke); border-radius: 8px; padding: .85rem 1rem; } /* Bootstrap 4's .no-gutters > [class*="col-"] (2 classes' worth of specificity) zeroes left/right padding on this same element, beating the rule above for just the horizontal sides -- content was touching the card's edges left/right even though top/bottom padding looked fine. This selector outranks it (3 classes) without needing !important. */ .team-today-panels .col-md-6.team-today-panel { padding-left: 1rem; padding-right: 1rem; } .team-today-panel-header { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--body); margin-bottom: .65rem; } .team-today-panel-header svg { width: 14px; height: 14px; flex-shrink: 0; } .team-today-list { display: flex; flex-direction: column; gap: .5rem; } .team-today-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .team-today-name { display: flex; align-items: center; } .team-today-time { font-weight: 600; } .team-today-tag { width: 46px; display: inline-block; text-align: center; margin-right: .5rem; flex-shrink: 0; } .team-today-empty { color: var(--body); font-size: .9rem; padding: .15rem 0; } /* ---------- Footer ---------- */ .sticky-footer.bg-white { background-color: var(--card) !important; border-top: 1px solid var(--stroke); color: var(--body); } .scroll-to-top { background-color: var(--primary); } .scroll-to-top:hover { background-color: var(--primary-dark); } /* ---------- Login / auth page ---------- */ body.bg-gradient-primary { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .auth-wrap { width: 100%; max-width: 420px; } .auth-wrap .auth-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; } .auth-wrap .auth-brand img { height: 38px; width: 38px; border-radius: 8px; background: #fff; padding: 5px; object-fit: contain; } .auth-wrap .auth-brand span { font-weight: 700; font-size: 1.15rem; color: #fff; } .auth-wrap h1 { color: #fff !important; font-weight: 600; } .auth-wrap .card { padding: 2rem !important; border: none; box-shadow: 0px 20px 40px -10px rgba(0, 0, 0, .35); } .auth-wrap .btn-primary { width: 100%; padding: .65rem 1rem; } .auth-wrap .btn-link { color: rgba(255, 255, 255, .85); }