/* * TimeReserve — admin theme (Aurora light + Midnight dark). * * Layered on top of Bootstrap 5.3 (loaded first). Light is the default; * dark mode is toggled by setting data-bs-theme="dark" on (Bootstrap's * native mechanism), which the topbar switch persists in localStorage. * * All custom surfaces read from the --tr-* design tokens defined per theme, so * one token block drives the whole panel in both modes. */ /* =================== Design tokens =================== */ :root, [data-bs-theme="light"] { --tr-canvas:#f6f7f9; --tr-surface:#ffffff; --tr-surface-2:#f1f2f6; --tr-sidebar:#ffffff; --tr-sidebar-ink:#475569; --tr-sidebar-ink-strong:#0f172a; --tr-border:#e9ebf0; --tr-border-strong:#dfe2e8; --tr-ink:#0f172a; --tr-muted:#64748b; --tr-faint:#94a3b8; --tr-brand:#2563eb; --tr-brand-strong:#1d4ed8; --tr-brand-ink:#2563eb; --tr-brand-soft:#eef2ff; --tr-ok:#16a34a; --tr-ok-soft:#ecfdf5; --tr-off-soft:#f1f5f9; --tr-grad:linear-gradient(135deg,#3b82f6,#2563eb); --tr-grad-logo:linear-gradient(135deg,#3b82f6,#2563eb); --tr-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --tr-shadow-pri:0 6px 16px rgba(37,99,235,.30); --tr-radius:16px; } [data-bs-theme="dark"] { --tr-canvas:#0b1020; --tr-surface:#141b2e; --tr-surface-2:#0e1424; --tr-sidebar:#0e1424; --tr-sidebar-ink:#aab4c5; --tr-sidebar-ink-strong:#ffffff; --tr-border:rgba(148,163,184,.14); --tr-border-strong:rgba(148,163,184,.22); --tr-ink:#e8edf6; --tr-muted:#94a3b8; --tr-faint:#64748b; --tr-brand:#6366f1; --tr-brand-strong:#4f46e5; --tr-brand-ink:#a5b4fc; --tr-brand-soft:rgba(99,102,241,.16); --tr-ok:#34d399; --tr-ok-soft:rgba(52,211,153,.14); --tr-off-soft:rgba(148,163,184,.12); --tr-grad:linear-gradient(135deg,#6366f1,#4f46e5); --tr-grad-logo:linear-gradient(135deg,#6366f1,#22d3ee); --tr-shadow:0 1px 2px rgba(0,0,0,.35); --tr-shadow-pri:0 6px 18px rgba(99,102,241,.45); --tr-radius:16px; } /* Blend Bootstrap's own components with the active theme. */ body { background: var(--tr-canvas); color: var(--tr-ink); font-size: 14px; -webkit-font-smoothing: antialiased; } .card { --bs-card-bg: var(--tr-surface); --bs-card-border-color: var(--tr-border); --bs-card-border-radius: var(--tr-radius); --bs-card-cap-bg: transparent; box-shadow: var(--tr-shadow); } .table { --bs-table-bg: transparent; --bs-border-color: var(--tr-border); } .form-control, .form-select { --bs-border-color: var(--tr-border-strong); } .dropdown-menu { --bs-dropdown-bg: var(--tr-surface); --bs-dropdown-border-color: var(--tr-border); } /* =================== Buttons =================== */ .btn-primary { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-focus-shadow-rgb: 37,99,235; background: var(--tr-grad); border: none; box-shadow: var(--tr-shadow-pri); } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { filter: brightness(1.05); } .btn-outline-secondary { --bs-btn-color: var(--tr-muted); --bs-btn-border-color: var(--tr-border-strong); --bs-btn-hover-bg: var(--tr-surface-2); --bs-btn-hover-color: var(--tr-ink); --bs-btn-hover-border-color: var(--tr-border-strong); --bs-btn-active-bg: var(--tr-surface-2); --bs-btn-active-color: var(--tr-ink); } .btn { --bs-btn-border-radius: 11px; font-weight: 600; } .btn-sm { --bs-btn-border-radius: 9px; } /* =================== App shell =================== */ .tr-shell { min-height: 100vh; } .tr-main { min-width: 0; } /* ---- Top navigation bar (horizontal ≥ lg, collapses to a panel < lg) ---- */ .tr-topnav { background: color-mix(in srgb, var(--tr-canvas) 72%, transparent); border-bottom: 1px solid var(--tr-border); position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(8px); padding: 0; } .tr-topnav-inner { width: 100%; padding: 10px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } @media (max-width: 575.98px) { .tr-topnav-inner { padding-left: 16px; padding-right: 16px; } } @media (min-width: 992px) { .tr-topnav-inner { flex-wrap: nowrap; } } /* Brand */ .tr-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; } .tr-logo { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; background: var(--tr-grad-logo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; box-shadow: var(--tr-shadow-pri); } .tr-brand-name { font-size: 16px; font-weight: 700; color: var(--tr-ink); letter-spacing: -.3px; } .tr-logo-img { height: 34px; max-width: 120px; object-fit: contain; flex: 0 0 auto; } /* ── Appearance page ───────────────────────────────────────────────────────── */ .tr-appearance-preview { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--tr-surface-2); border: 1px solid var(--tr-border); } .tr-appearance-soft { font-weight: 600; font-size: 13px; } /* Nav links */ .tr-nav { --bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 0; gap: 2px; align-items: center; } .tr-nav .nav-link { display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 11px; color: var(--tr-sidebar-ink); font-weight: 600; font-size: 14px; } .tr-nav .nav-link i { font-size: 16px; } .tr-nav .nav-link:hover { background: var(--tr-surface-2); color: var(--tr-ink); } .tr-nav .nav-link.active { background: var(--tr-brand-soft); color: var(--tr-brand-ink); } .tr-nav .nav-link.dropdown-toggle::after { margin-left: 1px; } /* Right cluster: theme toggle + user menu (always visible) */ .tr-topnav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; } .tr-iconbtn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--tr-border-strong); background: var(--tr-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--tr-muted); cursor: pointer; font-size: 17px; } .tr-iconbtn:hover { color: var(--tr-ink); } .tr-toggler:focus { box-shadow: none; } /* User menu trigger */ .tr-userbtn { display: inline-flex; align-items: center; gap: 9px; max-width: 220px; background: var(--tr-surface); border: 1px solid var(--tr-border-strong); border-radius: 11px; padding: 4px 11px 4px 5px; color: var(--tr-ink); cursor: pointer; } .tr-userbtn:hover { background: var(--tr-surface-2); } .tr-userbtn-name { font-size: 13px; font-weight: 600; } .tr-userbtn-caret { font-size: 11px; color: var(--tr-faint); } .tr-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--tr-brand-soft); color: var(--tr-brand-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; } .tr-user-head { padding: 8px 16px 4px; min-width: 200px; } /* Dropdown menus (Management + user) */ .tr-dropdown { --bs-dropdown-min-width: 13rem; --bs-dropdown-bg: var(--tr-surface); border: 1px solid var(--tr-border); border-radius: 14px; box-shadow: var(--tr-shadow); padding: 6px; margin-top: 8px; } .tr-dropdown .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 9px; padding: 8px 11px; font-size: 13.5px; font-weight: 500; color: var(--tr-sidebar-ink); } .tr-dropdown .dropdown-item i { width: 18px; text-align: center; font-size: 15px; } .tr-dropdown .dropdown-item:hover { background: var(--tr-surface-2); color: var(--tr-ink); } .tr-dropdown .dropdown-item.active { background: var(--tr-brand-soft); color: var(--tr-brand-ink); } .tr-dropdown .dropdown-item.disabled { color: var(--tr-faint); opacity: .85; } .tr-dropdown form .dropdown-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .tr-dropdown .dropdown-divider { border-top-color: var(--tr-border); } .soon { margin-left: auto; font-size: 9.5px; background: var(--tr-surface-2); color: var(--tr-faint); border-radius: 999px; padding: 1px 8px; font-weight: 700; } /* Responsive: < lg the nav collapses into a stacked panel below the bar */ @media (max-width: 991.98px) { .tr-topnav-actions { order: 0; } .tr-topnav-collapse { order: 5; flex-basis: 100%; } .tr-topnav-collapse .tr-nav { flex-direction: column; align-items: stretch; width: 100%; padding-top: 8px; gap: 2px; } .tr-topnav-collapse .tr-nav .nav-link { padding: 10px 12px; } /* Management dropdown renders inline inside the panel */ .tr-topnav-collapse .tr-dropdown { border: 0; box-shadow: none; background: transparent; padding: 2px 0 4px 26px; margin: 0; } } @media (min-width: 992px) { .tr-topnav-collapse { order: 1; flex-basis: auto; } .tr-topnav-actions { order: 2; } .tr-toggler { display: none; } } /* ---- Management section: contextual sidebar (only on Management pages) ---- */ .tr-main--withnav { display: flex; flex-direction: column; } .tr-main--withnav .tr-content { flex: 1 1 auto; min-width: 0; } .tr-subnav { padding: 16px 16px 8px; } .tr-subnav-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tr-faint); font-weight: 700; padding: 4px 10px 8px; } .tr-subnav-nav { display: flex; flex-direction: column; gap: 2px; } .tr-subnav-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px; color: var(--tr-sidebar-ink); font-weight: 500; font-size: 13.5px; text-decoration: none; } .tr-subnav-link i { width: 18px; text-align: center; font-size: 16px; } .tr-subnav-link:hover { background: var(--tr-surface-2); color: var(--tr-ink); } .tr-subnav-link.active { background: var(--tr-brand-soft); color: var(--tr-brand-ink); } .tr-subnav-link.disabled { color: var(--tr-faint); opacity: .8; pointer-events: none; } .tr-subnav-sep { border: 0; border-top: 1px solid var(--tr-border-strong); margin: 10px 8px; opacity: 0.85; } @media (min-width: 992px) { .tr-main--withnav { flex-direction: row; align-items: flex-start; } .tr-subnav { flex: 0 0 234px; width: 234px; border-right: 1px solid var(--tr-border); position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 20px 14px; } } @media (max-width: 991.98px) { .tr-subnav { border-bottom: 1px solid var(--tr-border); } .tr-subnav-title { display: none; } .tr-subnav-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 4px; } .tr-subnav-link { white-space: nowrap; } .tr-subnav-link .soon { display: none; } .tr-subnav-sep { display: none; } } /* ---- Content ---- */ .tr-content { padding: 24px 28px; width: 100%; } .tr-content-narrow { max-width: 1100px; margin-left: auto; margin-right: auto; } /* ---- Segmented control ---- */ .tr-seg { display: inline-flex; background: var(--tr-surface); border: 1px solid var(--tr-border); border-radius: 11px; padding: 3px; box-shadow: var(--tr-shadow); } .tr-seg button { border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--tr-muted); padding: 6px 14px; border-radius: 8px; cursor: pointer; } .tr-seg button.active { background: var(--tr-grad); color: #fff; } /* =================== Stat cards =================== */ .tr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1100px) { .tr-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tr-stats { grid-template-columns: 1fr; } } .tr-stat { background: var(--tr-surface); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); box-shadow: var(--tr-shadow); padding: 18px; } .tr-stat-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .tr-stat-n { font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; margin-top: 14px; } .tr-stat-l { font-size: 13px; color: var(--tr-muted); margin-top: 1px; } /* Soft icon tints (work in both themes via color-mix). */ .tint-blue { background: color-mix(in srgb, #2563eb 14%, transparent); color: #2563eb; } .tint-green { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; } .tint-amber { background: color-mix(in srgb, #d97706 16%, transparent); color: #d97706; } .tint-violet { background: color-mix(in srgb, #7c3aed 16%, transparent); color: #7c3aed; } [data-bs-theme="dark"] .tint-blue { color: #93c5fd; } [data-bs-theme="dark"] .tint-green { color: #6ee7b7; } [data-bs-theme="dark"] .tint-amber { color: #fcd34d; } [data-bs-theme="dark"] .tint-violet { color: #c4b5fd; } /* =================== Panels (chart / feed / table) =================== */ .tr-panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--tr-border); } .tr-panel-head h2, .tr-panel-head h3 { font-size: 15px; font-weight: 700; margin: 0; } .tr-panel-head .lnk { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tr-brand-ink); text-decoration: none; } .tr-panel-head .lnk:hover { text-decoration: underline; } /* CSS bar chart */ .tr-bars { display: flex; align-items: stretch; gap: 12px; height: 174px; padding: 18px; } .tr-bar { flex: 1; display: flex; flex-direction: column; align-items: center; } .tr-bar .val { font-size: 11px; font-weight: 700; color: var(--tr-muted); height: 14px; margin-bottom: 6px; } .tr-bar .track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .tr-bar .bar { width: 100%; max-width: 38px; min-height: 4px; border-radius: 8px 8px 4px 4px; background: var(--tr-grad); opacity: .85; } .tr-bar.is-today .bar { opacity: 1; box-shadow: var(--tr-shadow-pri); } .tr-bar .cap { font-size: 11px; color: var(--tr-faint); margin-top: 8px; } /* Upcoming feed */ .tr-feed { padding: 8px; } .tr-ev { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; } .tr-ev:hover { background: var(--tr-surface-2); } .tr-ev-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; } .tr-ev .t { font-size: 13.5px; font-weight: 600; } .tr-ev .s { font-size: 12px; color: var(--tr-muted); } .tr-ev .when { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tr-muted); white-space: nowrap; } .tr-empty-sm { padding: 28px 18px; text-align: center; color: var(--tr-muted); font-size: 13.5px; } /* =================== Tables =================== */ .tr-table { width: 100%; } .tr-table thead th { background: transparent; color: var(--tr-faint); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; border-bottom: 1px solid var(--tr-border); padding: 11px 16px; } .tr-table td { vertical-align: middle; border-bottom: 1px solid var(--tr-border); padding: 12px 16px; } .tr-table tbody tr:last-child td { border-bottom: none; } .tr-res { display: flex; align-items: center; gap: 11px; } .tr-swatch { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; } .tr-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; display: inline-block; } /* ── Delete-confirm modal ──────────────────────────────────────────────────── */ .tr-modal-content { border-radius: 16px; border: 1px solid var(--tr-border); background: var(--tr-surface); } .tr-modal-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--bs-danger-bg-subtle, #fee2e2); display: flex; align-items: center; justify-content: center; margin: 12px auto 4px; font-size: 22px; color: var(--bs-danger, #dc3545); } .tr-pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .tr-pill-on { background: var(--tr-ok-soft); color: var(--tr-ok); } .tr-pill-off { background: var(--tr-off-soft); color: var(--tr-faint); } .tr-pill-brand { background: var(--tr-brand-soft); color: var(--tr-brand-ink); } .tr-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--tr-surface-2); color: var(--tr-muted); } .tr-chip.is-off { opacity: .55; } /* =================== Empty state / pager / forms =================== */ .tr-empty { text-align: center; padding: 52px 20px; color: var(--tr-muted); } .tr-empty .big { font-size: 42px; margin-bottom: 8px; color: var(--tr-faint); } .tr-pager .pagination { --bs-pagination-border-radius: 9px; margin: 0; } .form-text { color: var(--tr-muted); } .form-control-color { width: 56px; height: 38px; padding: 4px; } /* flatpickr — match the brand accent + dark theme surfaces */ .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--tr-brand); border-color: var(--tr-brand); } .flatpickr-day.today { border-color: var(--tr-brand); } [data-bs-theme="dark"] .flatpickr-calendar { background: var(--tr-surface); color: var(--tr-ink); box-shadow: var(--tr-shadow); } [data-bs-theme="dark"] .flatpickr-months, [data-bs-theme="dark"] .flatpickr-weekday { color: var(--tr-muted); } [data-bs-theme="dark"] .flatpickr-day { color: var(--tr-ink); } [data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--tr-faint); } /* =================== Auth (login / register / magic-link) =================== */ .tr-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; background: radial-gradient(1100px 480px at 50% -12%, color-mix(in srgb, var(--tr-brand) 12%, transparent), transparent 60%), var(--tr-canvas); } .tr-auth-toggle { position: absolute; top: 18px; right: 18px; } .tr-auth-wrap { width: 100%; max-width: 408px; } .tr-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; text-align: center; } .tr-auth-brand .tr-logo { width: 50px; height: 50px; border-radius: 15px; font-size: 24px; } .tr-auth-brand b { font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--tr-ink); } .tr-auth-card .input-group-text { background: var(--tr-surface-2); border-color: var(--tr-border-strong); color: var(--tr-muted); } .tr-auth-card a { color: var(--tr-brand-ink); font-weight: 600; }