/* ========================================================================== Custodia design system Applied on top of Bootstrap 5's defaults to match the "Custodia Legal Registry" mockup canvas: dark sidebar shell, teal accent, light content area, pill badges, monospace IDs/timestamps. ========================================================================== */ :root { --cus-ink: #0f172a; --cus-ink-soft: #334155; --cus-muted: #64748b; --cus-border: #e2e8f0; --cus-bg: #f8fafc; --cus-card: #ffffff; --cus-accent: #0d9488; --cus-accent-dark: #0f766e; --cus-accent-light: #14b8a6; --cus-sidebar-bg: #0b1220; --cus-sidebar-active: #1b2740; --cus-sidebar-text: #94a3b8; --cus-sidebar-text-active: #ffffff; --cus-danger: #dc2626; --cus-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } /* ---------------------------------------------------------------------- */ /* Dark theme — toggled via data-bs-theme="dark" on (assets/js/app.js sets it from localStorage before paints, and on the sidebar toggle click). Redefines the same --cus-* tokens everything above already reads, so cards/tables/buttons/the m365 dashboard/chatbot adapt for free; only the handful of spots below that hardcode a light-only color (badges, pills, the diff view, etc.) need an explicit override. The dark sidebar itself is untouched — it's already dark in the light theme, by design. */ /* ---------------------------------------------------------------------- */ [data-bs-theme="dark"] { --cus-ink: #e2e8f0; --cus-ink-soft: #cbd5e1; --cus-muted: #94a3b8; --cus-border: #2a3548; --cus-bg: #0b1220; --cus-card: #131c2e; --cus-accent: #2dd4bf; --cus-accent-dark: #14b8a6; --cus-accent-light: #5eead4; --cus-danger: #f87171; } [data-bs-theme="dark"] .stat-tile.stat-tile-alert { border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); } [data-bs-theme="dark"] .badge.text-bg-success { background-color: rgba(34, 197, 94, 0.16) !important; color: #4ade80 !important; } [data-bs-theme="dark"] .badge.text-bg-warning { background-color: rgba(245, 158, 11, 0.16) !important; color: #fbbf24 !important; } [data-bs-theme="dark"] .badge.text-bg-info { background-color: rgba(59, 130, 246, 0.16) !important; color: #60a5fa !important; } [data-bs-theme="dark"] .badge.text-bg-danger { background-color: rgba(239, 68, 68, 0.16) !important; color: #f87171 !important; } [data-bs-theme="dark"] .badge.text-bg-secondary { background-color: rgba(148, 163, 184, 0.16) !important; color: #cbd5e1 !important; } [data-bs-theme="dark"] .badge.text-bg-dark { background-color: rgba(148, 163, 184, 0.16) !important; color: #cbd5e1 !important; } [data-bs-theme="dark"] .badge.text-bg-primary { background-color: rgba(45, 212, 191, 0.16) !important; color: #5eead4 !important; } [data-bs-theme="dark"] .badge.text-bg-purple { background-color: rgba(168, 85, 247, 0.16) !important; color: #c084fc !important; } [data-bs-theme="dark"] .badge.text-bg-teal { background-color: rgba(45, 212, 191, 0.16) !important; color: #5eead4 !important; } [data-bs-theme="dark"] .badge.text-bg-light.border { background-color: rgba(148, 163, 184, 0.12) !important; color: #cbd5e1 !important; border-color: var(--cus-border) !important; } [data-bs-theme="dark"] .action-badge-green { background: rgba(34, 197, 94, 0.16); color: #4ade80; } [data-bs-theme="dark"] .action-badge-blue { background: rgba(59, 130, 246, 0.16); color: #60a5fa; } [data-bs-theme="dark"] .action-badge-teal { background: rgba(45, 212, 191, 0.16); color: #5eead4; } [data-bs-theme="dark"] .action-badge-amber { background: rgba(245, 158, 11, 0.16); color: #fbbf24; } [data-bs-theme="dark"] .action-badge-purple { background: rgba(168, 85, 247, 0.16); color: #c084fc; } [data-bs-theme="dark"] .action-badge-red { background: rgba(239, 68, 68, 0.16); color: #f87171; } [data-bs-theme="dark"] .action-badge-gray { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; } [data-bs-theme="dark"] .btn-group-sm > .btn-outline-danger:hover { background-color: rgba(239, 68, 68, 0.16); color: #f87171; } [data-bs-theme="dark"] .btn-group-sm > .btn-outline-success:hover { background-color: rgba(34, 197, 94, 0.16); color: #4ade80; } [data-bs-theme="dark"] .btn-icon-circle.btn-approve { background: rgba(34, 197, 94, 0.16); color: #4ade80; } [data-bs-theme="dark"] .btn-icon-circle.btn-approve:hover { background: rgba(34, 197, 94, 0.28); } [data-bs-theme="dark"] .btn-icon-circle.btn-reject { background: rgba(239, 68, 68, 0.16); color: #f87171; } [data-bs-theme="dark"] .btn-icon-circle.btn-reject:hover { background: rgba(239, 68, 68, 0.28); } [data-bs-theme="dark"] .pill-tabs .pill-tab { background: rgba(148, 163, 184, 0.12); } [data-bs-theme="dark"] .pill-tabs .pill-tab.active { background: var(--cus-accent-dark); color: #041d1a; } [data-bs-theme="dark"] .progress { background-color: var(--cus-border); } [data-bs-theme="dark"] .toggle-btn-group .toggle-btn { background: var(--cus-card); } [data-bs-theme="dark"] .toggle-btn-group input:checked + .toggle-btn { background: rgba(45, 212, 191, 0.14); color: var(--cus-accent-light); } [data-bs-theme="dark"] .diff-view .diff-equal { color: var(--cus-ink-soft); } [data-bs-theme="dark"] .diff-view .diff-del { background-color: rgba(239, 68, 68, 0.16); color: #fca5a5; } [data-bs-theme="dark"] .diff-view .diff-ins { background-color: rgba(34, 197, 94, 0.16); color: #86efac; } [data-bs-theme="dark"] .diff-del-swatch { background-color: rgba(239, 68, 68, 0.16); } [data-bs-theme="dark"] .diff-ins-swatch { background-color: rgba(34, 197, 94, 0.16); } [data-bs-theme="dark"] .m365-badge-critical { background: var(--cus-danger); color: #1a0505; } [data-bs-theme="dark"] .m365-badge-needs-action { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.35); color: #fbbf24; } [data-bs-theme="dark"] .m365-badge-recommended { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.35); color: #60a5fa; } [data-bs-theme="dark"] .m365-badge-healthy { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); color: #4ade80; } /* Unread-notification highlight — used by both the sidebar bell dropdown (.bg-light-unread, on a .dropdown-item) and the full notifications.php inbox (.notification-row.unread, a plain row there instead). A custom class instead of Bootstrap's .bg-light utility, which stays a fixed light gray under data-bs-theme="dark" (it isn't one of the theme-aware "subtle" utilities), so it would leave a jarring light patch in dark mode. */ .dropdown-item.bg-light-unread, .notification-row.unread { background-color: #f8fafc; } [data-bs-theme="dark"] .dropdown-item.bg-light-unread, [data-bs-theme="dark"] .notification-row.unread { background-color: rgba(45, 212, 191, 0.08) !important; } * { box-sizing: border-box; } body { background-color: var(--cus-bg); color: var(--cus-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { color: var(--cus-ink); font-weight: 700; } a { color: var(--cus-accent-dark); } a:hover { color: var(--cus-accent); } /* Bootstrap's .text-muted utility reads --bs-secondary-color, a translucent tint of the body color rather than this app's own --cus-muted — same gap as .card/.table/.form-control/.accordion above, just for a utility class instead of a component. Used everywhere: table cells, card subtitles, the notification dropdown's timestamps. */ .text-muted { color: var(--cus-muted) !important; } /* ---------------------------------------------------------------------- */ /* App shell: fixed dark sidebar + light content column */ /* ---------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { width: 260px; flex: 0 0 260px; background: var(--cus-sidebar-bg); color: var(--cus-sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 2; /* keeps the sidebar (and its notification dropdown) above .app-content's tables/cards — see the dropdown-menu z-index below */ } /* The notification bell dropdown lives inside .app-sidebar, which is both position: sticky and overflow-y: auto — a classic setup for a nested dropdown to render clipped or stacked under later page content. The toggle's data-bs-strategy="fixed" (includes/layout_header.php) makes Popper position the menu with `position: fixed`, escaping the sidebar's overflow/stacking context entirely; this z-index is belt-and-suspenders so it always paints above tables/cards even if that ever changes. */ .app-sidebar .dropdown-menu { z-index: 1045; /* Bootstrap's own dark-mode dropdown styling is a generic gray (--bs-dropdown-bg etc.), which doesn't match this app's navy --cus-card dark palette used everywhere else (cards, modals, the m365 dashboard) — so it needs the same --cus-* tokens explicitly, in both themes. */ background-color: var(--cus-card); color: var(--cus-ink); border: 1px solid var(--cus-border); border-radius: 10px; } .app-sidebar .dropdown-menu .dropdown-item { color: var(--cus-ink-soft); } .app-sidebar .dropdown-menu .dropdown-item:hover, .app-sidebar .dropdown-menu .dropdown-item:focus { background-color: var(--cus-bg); color: var(--cus-ink); } .app-sidebar .dropdown-menu .dropdown-divider { border-top-color: var(--cus-border); } .app-sidebar .dropdown-menu .btn-link { color: var(--cus-accent-dark); } .app-sidebar .dropdown-menu .btn-link:hover { color: var(--cus-accent); } .app-sidebar .sidebar-brand { display: flex; align-items: center; gap: 0.65rem; padding: 1.5rem 1.25rem 1.25rem; } .app-sidebar .sidebar-brand-icon { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--cus-accent-light), var(--cus-accent-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-sidebar .sidebar-brand-icon svg { width: 18px; height: 18px; } .app-sidebar .sidebar-brand-text { line-height: 1.15; } .app-sidebar .sidebar-brand-title { font-weight: 800; font-size: 1.05rem; color: #ffffff; letter-spacing: 0.01em; } .app-sidebar .sidebar-brand-subtitle { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; } .app-sidebar .sidebar-nav { flex: 1; padding: 0.5rem 0.75rem; list-style: none; margin: 0; } .app-sidebar .sidebar-nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 8px; color: var(--cus-sidebar-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.15rem; transition: background-color 0.12s ease, color 0.12s ease; } .app-sidebar .sidebar-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; } .app-sidebar .sidebar-nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; } .app-sidebar .sidebar-nav-link.active { background: var(--cus-sidebar-active); color: var(--cus-sidebar-text-active); font-weight: 700; } .app-sidebar .sidebar-nav-badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 0.08rem 0.45rem; line-height: 1.4; } .app-sidebar .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 0.65rem; } .avatar-circle { width: 34px; height: 34px; border-radius: 999px; background: var(--cus-accent-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .app-sidebar .sidebar-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--cus-accent-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .app-sidebar .sidebar-user-name { color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1.2; } .app-sidebar .sidebar-user-role { color: #64748b; font-size: 0.72rem; } .app-sidebar .sidebar-user-link { margin-left: auto; color: #64748b; font-size: 0.72rem; } .theme-toggle-btn { background: none; border: none; padding: 0; display: inline-flex; cursor: pointer; } .theme-toggle-btn:hover { color: #e2e8f0; } .theme-icon-sun { display: none; } [data-bs-theme="dark"] .theme-icon-sun { display: block; } [data-bs-theme="dark"] .theme-icon-moon { display: none; } /* Sidebar bell dropdown's mute toggle — same show/hide-by-attribute pattern as the theme icons above. */ .sound-icon-off { display: none; } [data-notif-sound="muted"] .sound-icon-on { display: none; } [data-notif-sound="muted"] .sound-icon-off { display: block; } .app-content { flex: 1; min-width: 0; padding: 2rem 2.25rem 3rem; } /* Mobile: collapse sidebar to a top bar */ @media (max-width: 900px) { .app-shell { flex-direction: column; } .app-sidebar { width: 100%; flex: 0 0 auto; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; } .app-sidebar .sidebar-nav { display: flex; flex-wrap: wrap; padding: 0.5rem; } .app-sidebar .sidebar-nav-link { padding: 0.4rem 0.6rem; } .app-sidebar .sidebar-footer { margin-left: auto; border-top: none; } .app-content { padding: 1.25rem 1.25rem 2.5rem; } } /* ---------------------------------------------------------------------- */ /* Page header pattern */ /* ---------------------------------------------------------------------- */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .page-title { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.2rem; } .page-subtitle { color: var(--cus-muted); font-size: 0.9rem; max-width: 46rem; } .page-breadcrumb { font-size: 0.8rem; color: var(--cus-muted); margin-bottom: 0.25rem; } .page-breadcrumb a { color: var(--cus-muted); text-decoration: none; } .page-breadcrumb a:hover { color: var(--cus-accent-dark); } /* ---------------------------------------------------------------------- */ /* Cards, tables, stat tiles */ /* ---------------------------------------------------------------------- */ .card { /* Bootstrap's own --bs-card-bg is a generic gray in dark mode, not this app's navy --cus-card — every card (and every table wrapped in one) needs the explicit override, same reasoning as the .table block below. */ background-color: var(--cus-card); color: var(--cus-ink); border: 1px solid var(--cus-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; /* clips a directly-nested 's square corners to match the card's rounded ones */ } .card-header { border-bottom: 1px solid var(--cus-border); font-weight: 700; border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; } /* .card-header.bg-white (used throughout for a "flat" header matching the card body) is Bootstrap's plain white utility — a fixed color, not theme- aware — so it stays a bright white bar on a dark card unless overridden. */ .card-header.bg-white { background-color: var(--cus-card) !important; } .stat-tile { border-radius: 12px; padding: 1.1rem 1.35rem; background: var(--cus-card); border: 1px solid var(--cus-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .stat-tile.stat-tile-alert { border-color: #fecaca; background: #fff7f7; } .stat-tile .stat-value { font-size: 1.85rem; font-weight: 800; color: var(--cus-ink); } .stat-tile.stat-tile-alert .stat-value { color: var(--cus-danger); } .stat-tile .stat-label { color: var(--cus-muted); font-size: 0.82rem; margin-bottom: 0.35rem; } .table { /* Bootstrap's table cells read --bs-table-bg/--bs-table-color directly (with inheritance-beating specificity — a plain `.table { color: ... }` rule loses to it), and those default to Bootstrap's own generic gray/ white in dark mode rather than this app's --cus-card/--cus-ink-soft. Redefining the variables Bootstrap's own cell rules already consume is the idiomatic fix — same pattern as --bs-table-hover-bg below. */ --bs-table-bg: var(--cus-card); --bs-table-color: var(--cus-ink-soft); color: var(--cus-ink-soft); margin-bottom: 0; --bs-table-hover-bg: rgba(13, 148, 136, 0.06); /* every .table-hover row gets the same teal tint, not just clickable ones */ } .table thead th { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.07em; color: var(--cus-muted); font-weight: 700; padding-top: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--cus-border); background: var(--cus-bg) !important; } .table > :not(caption) > * > * { border-bottom-color: var(--cus-border); padding-top: 0.85rem; padding-bottom: 0.85rem; } /* Rows fade/slide in on load — a tasteful once-per-page-load flourish, not a repeating animation, so it never distracts on a table the user is reading. */ .table > tbody > tr { transition: background-color 0.15s ease; animation: cus-row-in 0.35s ease both; } .table > tbody > tr:nth-child(1) { animation-delay: 0.00s; } .table > tbody > tr:nth-child(2) { animation-delay: 0.02s; } .table > tbody > tr:nth-child(3) { animation-delay: 0.04s; } .table > tbody > tr:nth-child(4) { animation-delay: 0.06s; } .table > tbody > tr:nth-child(5) { animation-delay: 0.08s; } .table > tbody > tr:nth-child(6) { animation-delay: 0.10s; } .table > tbody > tr:nth-child(7) { animation-delay: 0.12s; } .table > tbody > tr:nth-child(8) { animation-delay: 0.14s; } .table > tbody > tr:nth-child(n+9) { animation-delay: 0.16s; } @keyframes cus-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .table > tbody > tr { animation: none; } } .table-clickable-row { cursor: pointer; } .table-clickable-row:hover { background-color: rgba(13, 148, 136, 0.08); } .table-responsive { scrollbar-width: thin; scrollbar-color: var(--cus-border) transparent; } .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background: transparent; } .table-responsive::-webkit-scrollbar-thumb { background-color: var(--cus-border); border-radius: 999px; } .barcode-display, .mono { font-family: var(--cus-mono); letter-spacing: 0.02em; } /* ---------------------------------------------------------------------- */ /* Badges / pills */ /* ---------------------------------------------------------------------- */ .badge { border-radius: 999px; font-weight: 700; padding: 0.32em 0.7em; letter-spacing: 0.01em; } .badge.text-bg-success { background-color: #dcfce7 !important; color: #166534 !important; } .badge.text-bg-warning { background-color: #fef3c7 !important; color: #92400e !important; } .badge.text-bg-info { background-color: #dbeafe !important; color: #1e40af !important; } .badge.text-bg-danger { background-color: #fee2e2 !important; color: #991b1b !important; } .badge.text-bg-secondary{ background-color: #f1f5f9 !important; color: #475569 !important; } .badge.text-bg-dark { background-color: #e2e8f0 !important; color: #334155 !important; } .badge.text-bg-primary { background-color: #ccfbf1 !important; color: #0f766e !important; } .badge.text-bg-purple { background-color: #f3e8ff !important; color: #6b21a8 !important; } .badge.text-bg-teal { background-color: #ccfbf1 !important; color: #0f766e !important; } .badge.text-bg-light.border { background-color: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important; font-family: var(--cus-mono); font-size: 0.68rem; text-transform: uppercase; } /* Uppercase, mono action-type badges for the audit log */ .action-badge { display: inline-block; border-radius: 999px; font-family: var(--cus-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.3em 0.65em; } .action-badge-green { background: #dcfce7; color: #166534; } .action-badge-blue { background: #dbeafe; color: #1e40af; } .action-badge-teal { background: #ccfbf1; color: #0f766e; } .action-badge-amber { background: #fef3c7; color: #92400e; } .action-badge-purple { background: #f3e8ff; color: #6b21a8; } .action-badge-red { background: #fee2e2; color: #991b1b; } .action-badge-gray { background: #f1f5f9; color: #475569; } /* Matter-number "chip" — folder icon + the number itself in one small pill, color-coded by confidentiality tier (STANDARD/RESTRICTED/PRIVILEGED) — see includes/helpers.php's custodia_matter_number_chip(). Three distinct colors, unlike custodia_confidentiality_badge()'s two-way text-badge split, since a compact chip reads fine with more granularity at a glance. */ .matter-number-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; border: 1px solid transparent; font-family: var(--cus-mono); font-weight: 700; font-size: 0.84em; letter-spacing: 0.01em; line-height: 1.5; white-space: nowrap; transition: transform 0.12s ease, box-shadow 0.12s ease; } .matter-number-chip:hover { transform: translateY(-1px); } .matter-folder-icon { flex-shrink: 0; } .matter-tier-standard { color: var(--cus-ink-soft); background: rgba(100, 116, 139, 0.10); border-color: rgba(100, 116, 139, 0.22); } .matter-tier-standard:hover { box-shadow: 0 3px 10px rgba(100, 116, 139, 0.18); } .matter-tier-restricted { color: #b45309; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15); } .matter-tier-restricted:hover { box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25); } .matter-tier-privileged { color: var(--cus-danger); background: rgba(220, 38, 38, 0.10); border-color: rgba(220, 38, 38, 0.32); box-shadow: 0 1px 3px rgba(220, 38, 38, 0.18); } .matter-tier-privileged:hover { box-shadow: 0 3px 10px rgba(220, 38, 38, 0.28); } [data-bs-theme="dark"] .matter-tier-standard { color: #cbd5e1; background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.28); } [data-bs-theme="dark"] .matter-tier-restricted { color: #fbbf24; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.38); } [data-bs-theme="dark"] .matter-tier-privileged { color: #f87171; background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.38); } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ .btn { border-radius: 8px; font-weight: 600; } .btn-primary { background-color: var(--cus-accent-dark); border-color: var(--cus-accent-dark); } .btn-primary:hover, .btn-primary:focus { background-color: #0e6b64; border-color: #0e6b64; } /* --cus-accent-dark is brighter in dark mode (#14b8a6 vs #0f766e), so the light theme's fixed hover-darken shade above would look muddy/mismatched against it — darken relative to dark mode's own base color instead. */ [data-bs-theme="dark"] .btn-primary:hover, [data-bs-theme="dark"] .btn-primary:focus { background-color: var(--cus-accent); border-color: var(--cus-accent); } /* Bootstrap's .btn-outline-secondary (bell toggle, most "Edit"/"Rename" buttons app-wide) hover-fills to a fixed gray (--bs-btn-hover-bg: #6c757d) with no theme awareness at all — same gap as everything else above, just for this specific outline variant. */ .btn-outline-secondary { color: var(--cus-muted); border-color: var(--cus-border); } .btn-outline-secondary:hover { background-color: var(--cus-muted); border-color: var(--cus-muted); color: var(--cus-card); } .btn-outline-primary { color: var(--cus-accent-dark); border-color: var(--cus-accent-dark); } .btn-outline-primary:hover { background-color: var(--cus-accent-dark); border-color: var(--cus-accent-dark); } /* Row-action toolbars (Preview/Download/Lock/Compare/… on documents.php, matter.php, admin.php's user table) — a "ghost toolbar" instead of Bootstrap's default merged, bordered .btn-group pill: no border until hover, a tinted color per semantic variant, even spacing regardless of label length. One rule set, so every one of these across the app looks identical rather than each page having its own subtly different take. */ /* :not(.btn-primary) — a solid .btn-primary ("+ New Client"/"+ New User"/etc.) sometimes sits in a .btn-group-sm wrapper purely for spacing next to a sibling button, not as a row-action toolbar item. Without this exclusion, this rule's 2-class specificity beats .btn-primary's 1-class rule below, flattening it to ghost-text instead of its intended solid teal button — at rest and on hover, in both themes. */ .btn-group-sm > .btn:not(.btn-primary) { border-radius: 6px !important; margin-left: 3px !important; border-color: transparent; background-color: transparent; color: var(--cus-ink-soft); font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.6rem; transition: background-color 0.15s ease, color 0.15s ease; } .btn-group-sm > .btn-primary { margin-left: 3px !important; } .btn-group-sm > .btn:first-child { margin-left: 0 !important; } .btn-group-sm > .btn:not(.btn-primary):hover { background-color: var(--cus-bg); border-color: transparent; color: var(--cus-ink); } .btn-group-sm > .btn-outline-primary { background-color: rgba(13, 148, 136, 0.08); color: var(--cus-accent-dark); } .btn-group-sm > .btn-outline-primary:hover { background-color: rgba(13, 148, 136, 0.18); color: var(--cus-accent-dark); } .btn-group-sm > .btn-outline-danger { color: var(--cus-danger); } .btn-group-sm > .btn-outline-danger:hover { background-color: #fee2e2; color: #991b1b; } .btn-group-sm > .btn-outline-success { color: #166534; } .btn-group-sm > .btn-outline-success:hover { background-color: #dcfce7; color: #166534; } .btn-group-sm > .btn:disabled { opacity: 0.4; background-color: transparent; } .btn-icon-circle { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: none; padding: 0; } .btn-icon-circle.btn-approve { background: #dcfce7; color: #15803d; } .btn-icon-circle.btn-approve:hover { background: #bbf7d0; } .btn-icon-circle.btn-reject { background: #fee2e2; color: #b91c1c; } .btn-icon-circle.btn-reject:hover { background: #fecaca; } /* ---------------------------------------------------------------------- */ /* Filter bar (Audit Log, etc.) */ /* ---------------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.1rem; } .filter-bar .form-select, .filter-bar .form-control { border-radius: 10px; border-color: var(--cus-border); font-size: 0.85rem; } .filter-bar .filter-col { min-width: 170px; flex: 1 1 170px; } .filter-bar .filter-col-search { flex: 1.4 1 220px; } /* ---------------------------------------------------------------------- */ /* Tabs (Matter Workspace) */ /* ---------------------------------------------------------------------- */ .nav-tabs { border-bottom: 1px solid var(--cus-border); } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--cus-muted); font-weight: 600; padding: 0.6rem 0.9rem; border-radius: 0; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--cus-ink); background: transparent; border-color: transparent transparent var(--cus-accent-dark); } /* Filter/segment pill group (Approvals page) */ .pill-tabs { display: inline-flex; gap: 0.4rem; } .pill-tabs .pill-tab { border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 700; background: #f1f5f9; color: var(--cus-ink-soft); border: none; text-decoration: none; } .pill-tabs .pill-tab.active { background: var(--cus-sidebar-bg); color: #fff; } /* ---------------------------------------------------------------------- */ /* Approval row cards */ /* ---------------------------------------------------------------------- */ .approval-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--cus-border); } .approval-row:last-child { border-bottom: none; } .approval-row .approval-title { font-weight: 700; font-size: 0.92rem; } .approval-row .approval-meta { font-size: 0.8rem; color: var(--cus-muted); margin-top: 0.1rem; } .approval-row .approval-quote { font-size: 0.82rem; color: var(--cus-ink-soft); font-style: italic; margin-top: 0.35rem; } .approval-row .approval-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } /* ---------------------------------------------------------------------- */ /* Registry Scan Station CTA card */ /* ---------------------------------------------------------------------- */ .scan-cta-card { display: block; background: var(--cus-sidebar-bg); color: #fff; border-radius: 12px; border: none; } .scan-cta-card .card-body { padding: 1.35rem; } /* ---------------------------------------------------------------------- */ /* Progress bars (Active Matters by Practice Area) */ /* ---------------------------------------------------------------------- */ .progress { background-color: #e2e8f0; border-radius: 999px; } .progress-bar { background-color: var(--cus-accent-dark); border-radius: 999px; } /* ---------------------------------------------------------------------- */ /* Modals */ /* ---------------------------------------------------------------------- */ .modal-content { /* Same gap as .card/.table — Bootstrap's own --bs-modal-bg is a generic dark gray in dark mode, not this app's navy --cus-card. */ background-color: var(--cus-card); color: var(--cus-ink); border-radius: 14px; border: none; } .modal-header { border-bottom: 1px solid var(--cus-border); } .modal-footer { border-top: none; padding-top: 0; } /* ---------------------------------------------------------------------- */ /* Accordion (User Manual) */ /* ---------------------------------------------------------------------- */ /* Same gap as .card/.table/.modal-content/.form-control — Bootstrap's own accordion colors (a generic gray body, a dark-blue expanded-header tint, Bootstrap-blue button text) don't match this app's navy/teal palette. */ .accordion-item { background-color: var(--cus-card); color: var(--cus-ink); border-color: var(--cus-border); } .accordion-button { background-color: var(--cus-card); color: var(--cus-ink); } .accordion-button:not(.collapsed) { background-color: var(--cus-card); color: var(--cus-accent-dark); box-shadow: inset 0 -1px 0 var(--cus-border); } .accordion-button:focus { border-color: var(--cus-accent); box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15); } .accordion-body { color: var(--cus-ink-soft); } .form-control, .form-select { /* Same gap again — Bootstrap's own dark-mode form colors are a generic gray, not this app's navy --cus-card, so every input/select/textarea across every modal and filter bar needs the explicit override. */ background-color: var(--cus-card); color: var(--cus-ink); border-radius: 8px; border-color: var(--cus-border); } .form-control:focus, .form-select:focus { background-color: var(--cus-card); color: var(--cus-ink); border-color: var(--cus-accent); box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15); } .form-control::placeholder { color: var(--cus-muted); opacity: 1; } .form-control:disabled, .form-select:disabled { background-color: var(--cus-bg); color: var(--cus-muted); } /* Toggle-button style radio group (Share modal "View Only" / "View & Download") */ .toggle-btn-group { display: flex; gap: 0.6rem; } .toggle-btn-group .toggle-btn { flex: 1; text-align: center; border: 1px solid var(--cus-border); border-radius: 8px; padding: 0.55rem; font-weight: 600; font-size: 0.88rem; color: var(--cus-ink-soft); cursor: pointer; background: #fff; } .toggle-btn-group input { display: none; } .toggle-btn-group input:checked + .toggle-btn { border-color: var(--cus-accent); background: #f0fdfa; color: var(--cus-accent-dark); } /* ---------------------------------------------------------------------- */ /* Version comparison ("redline") view — unchanged from before */ /* ---------------------------------------------------------------------- */ .diff-view { font-size: 0.925rem; line-height: 1.6; } .diff-view p { margin-bottom: 0.75rem; } .diff-view .diff-equal { color: #212529; } .diff-view .diff-del { background-color: #fbe4e4; color: #7a1f1f; text-decoration: line-through; padding: 0 2px; border-radius: 2px; } .diff-view p.diff-del { display: block; padding: 0.25rem 0.5rem; } .diff-view .diff-ins { background-color: #e1f7e6; color: #1f6b30; padding: 0 2px; border-radius: 2px; } .diff-view p.diff-ins { display: block; padding: 0.25rem 0.5rem; } .diff-del-swatch, .diff-ins-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 2px; vertical-align: middle; margin-right: 2px; } .diff-del-swatch { background-color: #fbe4e4; } .diff-ins-swatch { background-color: #e1f7e6; } /* ── Dashboard analytics ─────────────────────────────────────────── */ .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cus-accent-light); box-shadow: 0 0 0 rgba(20, 184, 166, 0.6); animation: cus-live-pulse 2s infinite; } @keyframes cus-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); } } .live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--cus-accent-dark); text-transform: uppercase; } .chart-card-body { position: relative; padding: 1rem 1.25rem; } .chart-card-body canvas { max-height: 260px; } .chart-card-body-tall canvas { max-height: 560px; } .chart-empty-state { height: 220px; display: flex; align-items: center; justify-content: center; color: var(--cus-muted); font-size: 0.875rem; } /* ========================================================================== Dashboard "at a glance" layout, modeled on the Microsoft 365 admin center dashboard's card structure (compact stat cards with inline sparklines/ bars, and a filterable "Top actions" card grid with status pills) but kept in this app's existing light theme — reuses the --cus-* tokens defined at the top of this file rather than a separate dark palette. ========================================================================== */ .m365-dash { --m365-bg: var(--cus-bg); --m365-card: var(--cus-card); --m365-border: var(--cus-border); --m365-text: var(--cus-ink); --m365-muted: var(--cus-muted); --m365-accent: var(--cus-accent); color: var(--m365-text); } .m365-dash .live-badge { color: var(--cus-accent-dark); } .m365-analytics-toggle { background: none; border: none; padding: 0; display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--m365-text); } .m365-analytics-toggle:hover { color: var(--cus-accent-dark); } .m365-analytics-toggle .m365-chevron { transition: transform 0.2s ease; flex-shrink: 0; } .m365-analytics-toggle.collapsed .m365-chevron { transform: rotate(-90deg); } .m365-section-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.9rem; display: flex; align-items: center; justify-content: space-between; } .m365-glance-row { display: grid; /* auto-fit (not a fixed repeat(4,...)) so a role with fewer visible glance cards reflows cleanly instead of leaving empty grid cells — see dashboard.php's $showUsersWidget/$showGroupsWidgets gating. */ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .m365-card { background: var(--m365-card); border: 1px solid var(--m365-border); border-radius: 12px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; } .m365-card-label { font-weight: 700; font-size: 0.9rem; } .m365-card-sub { color: var(--m365-muted); font-size: 0.78rem; margin-bottom: 0.6rem; } .m365-card-value { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.75rem; } .m365-card-section-title { color: var(--m365-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 0.5rem; } .m365-kpi-row { display: flex; gap: 1.5rem; margin-bottom: 0.9rem; } .m365-kpi-row .m365-kpi-value { font-size: 1.3rem; font-weight: 800; } .m365-kpi-row .m365-kpi-label { color: var(--m365-muted); font-size: 0.72rem; } .m365-bar-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.5rem; } .m365-bar-row { font-size: 0.78rem; } .m365-bar-row .m365-bar-row-top { display: flex; justify-content: space-between; margin-bottom: 3px; color: var(--m365-muted); } .m365-bar-track { height: 6px; border-radius: 3px; background: var(--m365-border); overflow: hidden; } .m365-bar-fill { height: 100%; border-radius: 3px; background: var(--m365-accent); } .m365-trend-list { display: flex; flex-direction: column; gap: 0.5rem; } .m365-trend-list .m365-trend-name { font-size: 0.82rem; color: var(--m365-text); } .m365-trend-list .m365-trend-meta { font-size: 0.72rem; color: var(--m365-muted); } .m365-card-actions { margin-top: auto; padding-top: 0.9rem; display: flex; gap: 0.5rem; } .m365-btn-outline { background: transparent; border: 1px solid var(--m365-border); color: var(--m365-text); font-size: 0.78rem; padding: 0.35rem 0.75rem; } .m365-btn-outline:hover { background: rgba(15, 23, 42, 0.04); color: var(--m365-text); border-color: var(--m365-muted); } .m365-sparkline-wrap { height: 70px; margin-bottom: 0.75rem; } .m365-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .m365-pill { background: transparent; border: 1px solid var(--m365-border); color: var(--m365-muted); border-radius: 999px; font-size: 0.78rem; padding: 0.3rem 0.85rem; } .m365-pill:hover { border-color: var(--m365-accent); color: var(--m365-text); } .m365-pill.active { background: var(--m365-accent); border-color: var(--m365-accent); color: #052e2b; font-weight: 700; } .m365-actions-grid { display: grid; /* auto-fit for the same reason as .m365-glance-row above — the Practice Groups/Access Requests action cards are also role-gated. */ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .m365-action-card { background: var(--m365-card); border: 1px solid var(--m365-border); border-radius: 12px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; } .m365-action-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; } .m365-action-category { color: var(--m365-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .m365-action-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; line-height: 1.3; } .m365-action-body { flex: 1; font-size: 0.78rem; color: var(--m365-muted); margin-bottom: 0.75rem; } .m365-action-body-row { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--m365-border); } .m365-action-body-row:last-child { border-bottom: none; } .m365-badge { font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .m365-badge-critical { background: var(--cus-danger); color: #ffffff; } .m365-badge-needs-action { background: #fffbeb; border-color: #fde68a; color: #b45309; } .m365-badge-recommended { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } .m365-badge-healthy { background: #ecfdf5; border-color: #bbf7d0; color: #15803d; } .m365-dash .text-muted { color: var(--m365-muted) !important; } .m365-dash .chart-empty-state { color: var(--m365-muted); } /* ========================================================================== Guide chatbot — a floating widget present on every authenticated page (added once in includes/layout_footer.php). The app's first fixed- position element, so it deliberately sits at Bootstrap's own "fixed/ sticky" z-index tier (1030) rather than inventing a new one — a later- opened Bootstrap modal (1050) still layers correctly above it. ========================================================================== */ .chatbot-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1030; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--cus-accent); color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25); } .chatbot-fab:hover { background: var(--cus-accent-dark); } .chatbot-panel { position: fixed; right: 1.5rem; bottom: 5.5rem; z-index: 1030; width: 340px; max-width: calc(100vw - 2rem); max-height: 480px; background: var(--cus-card); border: 1px solid var(--cus-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); display: flex; flex-direction: column; overflow: hidden; } .chatbot-panel-header { background: var(--cus-sidebar-bg); color: #ffffff; padding: 0.7rem 1rem; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.9rem; } .chatbot-close { background: none; border: none; color: #ffffff; font-size: 1.2rem; line-height: 1; opacity: 0.8; } .chatbot-close:hover { opacity: 1; } .chatbot-messages { flex: 1; overflow-y: auto; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 180px; } .chatbot-bubble { max-width: 85%; padding: 0.5rem 0.7rem; border-radius: 10px; font-size: 0.82rem; line-height: 1.4; } .chatbot-bubble-bot { align-self: flex-start; background: var(--cus-bg); border: 1px solid var(--cus-border); color: var(--cus-ink); } .chatbot-bubble-user { align-self: flex-end; background: var(--cus-accent); color: #ffffff; } .chatbot-bubble-error { border-color: #fecaca; background: #fff7f7; color: var(--cus-danger); } .chatbot-bubble-link { display: inline-block; margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600; } .chatbot-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.85rem 0.6rem; } .chatbot-chip { background: var(--cus-bg); border: 1px solid var(--cus-border); color: var(--cus-ink-soft); border-radius: 999px; font-size: 0.74rem; padding: 0.3rem 0.7rem; text-align: left; } .chatbot-chip:hover { border-color: var(--cus-accent); color: var(--cus-accent-dark); } .chatbot-input-row { display: flex; gap: 0.5rem; padding: 0.65rem 0.85rem; border-top: 1px solid var(--cus-border); } .chatbot-input-row input { flex: 1; border: 1px solid var(--cus-border); border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.82rem; min-width: 0; } .chatbot-input-row input:focus { outline: none; border-color: var(--cus-accent); } .chatbot-send { background: var(--cus-accent); color: #ffffff; border: none; border-radius: 8px; width: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .chatbot-send:hover { background: var(--cus-accent-dark); } @media (max-width: 900px) { .chatbot-fab { right: 1rem; bottom: 1rem; } .chatbot-panel { right: 1rem; left: 1rem; width: auto; bottom: 4.75rem; } }