:root { --primary: #2563eb; --primary-dark: #1d4ed8; --danger: #dc2626; --success: #16a34a; --border: #e2e8f0; --text: #1e293b; --text-muted: #64748b; --bg: #f8fafc; --surface: #ffffff; --surface-hover: #f8fafc; --on-primary: #fff; --badge-default-bg: #e0e7ff; --badge-default-text: #3730a3; --badge-role-admin-bg: #fee2e2; --badge-role-admin-text: #991b1b; --badge-role-manager-bg: #dbeafe; --badge-role-manager-text: #1e40af; --badge-role-viewer-bg: #f1f5f9; --badge-role-viewer-text: #475569; --badge-status-active-bg: #dcfce7; --badge-status-active-text: #166534; --badge-status-inactive-bg: #f1f5f9; --badge-status-inactive-text: #475569; --badge-status-deactivated-bg: #fee2e2; --badge-status-deactivated-text: #991b1b; --badge-status-tbd-bg: #fef9c3; --badge-status-tbd-text: #854d0e; --alert-success-bg: #dcfce7; --alert-success-text: #166534; --alert-error-bg: #fee2e2; --alert-error-text: #991b1b; } /* Dark mode -- toggled by adding data-theme="dark" to (see assets/js/app.js). Only the color tokens change; layout rules below all reference the variables above so nothing else needs to be duplicated. */ [data-theme="dark"] { --primary: #3b82f6; --primary-dark: #60a5fa; --danger: #f87171; --success: #4ade80; --border: #334155; --text: #e2e8f0; --text-muted: #94a3b8; --bg: #0f172a; --surface: #1e293b; --surface-hover: #273449; --on-primary: #1e293b; --badge-default-bg: #312e81; --badge-default-text: #c7d2fe; --badge-role-admin-bg: #7f1d1d; --badge-role-admin-text: #fecaca; --badge-role-manager-bg: #1e3a8a; --badge-role-manager-text: #bfdbfe; --badge-role-viewer-bg: #334155; --badge-role-viewer-text: #cbd5e1; --badge-status-active-bg: #14532d; --badge-status-active-text: #bbf7d0; --badge-status-inactive-bg: #334155; --badge-status-inactive-text: #cbd5e1; --badge-status-deactivated-bg: #7f1d1d; --badge-status-deactivated-text: #fecaca; --badge-status-tbd-bg: #713f12; --badge-status-tbd-text: #fde68a; --alert-success-bg: #14532d; --alert-success-text: #bbf7d0; --alert-error-bg: #7f1d1d; --alert-error-text: #fecaca; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .app-header { background: var(--surface); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem; padding: 0.75rem 1.5rem; } /* white-space:nowrap on the brand/links/buttons below keeps each label on a single line -- when the header is too narrow for everything (more nav items, or longer French labels), whole blocks (brand / nav / user area) wrap onto their own row via .app-header's flex-wrap instead of individual words breaking mid-label. */ .app-header .brand { font-weight: 700; font-size: 1.15rem; color: var(--text); white-space: nowrap; } .app-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; } .app-nav a { color: var(--text-muted); font-weight: 500; white-space: nowrap; } .app-nav a.active { color: var(--primary); } .app-user { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.75rem; font-size: 0.9rem; color: var(--text-muted); } .app-user > span, .app-user > form { white-space: nowrap; } .app-main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; } .guest-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1d4ed8, #2563eb); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem; } .login-card { width: 100%; max-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } .login-card h1 { margin-top: 0; font-size: 1.3rem; } label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--text); } input[type=text], input[type=email], input[type=password], input[type=search], select, textarea { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; margin-bottom: 0.9rem; background: var(--surface); color: var(--text); } textarea { min-height: 80px; resize: vertical; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } } .btn { display: inline-block; padding: 0.55rem 1rem; border-radius: 6px; border: 1px solid transparent; background: var(--primary); color: var(--on-primary); cursor: pointer; font-size: 0.9rem; font-weight: 600; } .btn:hover { background: var(--primary-dark); text-decoration: none; } .btn.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn.btn-secondary:hover { background: var(--surface-hover); } .btn.btn-danger { background: var(--danger); } .btn.btn-danger:hover { filter: brightness(0.9); } .btn.btn-block { width: 100%; } .btn.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; } table { width: 100%; border-collapse: collapse; background: var(--surface); } th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; } th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } th a { color: inherit; } tr:hover td { background: var(--surface-hover); } /* Fixed column widths (set via on the entity list tables) so every column -- including Status/Actions at the far right -- always fits within the page width instead of silently overflowing off-screen depending on how long the row content happens to be. */ .list-table { table-layout: fixed; } .list-table th, .list-table td { overflow-wrap: break-word; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; justify-content: space-between; } .filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } /* Scoped to DIRECT children only -- otherwise this min-width leaks into the checkboxes/date inputs nested inside the advanced-search panel below. */ .filters > input, .filters > select { margin-bottom: 0; width: auto; min-width: 150px; } /* Advanced search -- a native
panel so expand/collapse needs no JS. flex-basis:100% makes it drop to its own row under the simple search bar. */ .advanced-search { flex-basis: 100%; } .advanced-search > summary { cursor: pointer; font-weight: 600; color: var(--primary); padding: 0.4rem 0; list-style: none; } .advanced-search > summary::-webkit-details-marker { display: none; } .advanced-search > summary::before { content: "\25B8 "; } .advanced-search[open] > summary::before { content: "\25BE "; } .advanced-search-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-top: 0.4rem; } .advanced-search-grid .field { display: flex; flex-direction: column; } .advanced-search-grid label { margin-bottom: 0.3rem; } .advanced-search-grid select[multiple] { min-height: 130px; margin-bottom: 0; width: 100%; } .checkbox-list { display: flex; flex-direction: column; gap: 0.35rem; } .checkbox-list label { font-weight: 400; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0; } .checkbox-list input[type=checkbox] { width: auto; min-width: 0; margin: 0; } .date-range { display: flex; align-items: center; gap: 0.5rem; } .date-range input { margin-bottom: 0; width: auto; min-width: 0; } /* Row-selection + "export selected" toolbar on the entity list pages. */ .selection-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .row-checkbox, .select-all-checkbox { width: auto; min-width: 0; margin: 0; } .badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; background: var(--badge-default-bg); color: var(--badge-default-text); } .badge.role-admin { background: var(--badge-role-admin-bg); color: var(--badge-role-admin-text); } .badge.role-manager { background: var(--badge-role-manager-bg); color: var(--badge-role-manager-text); } .badge.role-viewer { background: var(--badge-role-viewer-bg); color: var(--badge-role-viewer-text); } .badge.status-active { background: var(--badge-status-active-bg); color: var(--badge-status-active-text); } .badge.status-inactive { background: var(--badge-status-inactive-bg); color: var(--badge-status-inactive-text); } .badge.status-deactivated { background: var(--badge-status-deactivated-bg); color: var(--badge-status-deactivated-text); } .badge.status-tbd { background: var(--badge-status-tbd-bg); color: var(--badge-status-tbd-text); } .btn.btn-secondary.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .theme-toggle { display: inline-flex; align-items: center; gap: 0.35rem; } /* EN/FR language toggle -- sits next to the dark/light mode toggle in the header, styled the same way as the "active tab" buttons on the Lookups page (.btn-secondary.active) so the current language is visually obvious. */ .lang-toggle { display: inline-flex; gap: 0.25rem; } .guest-lang-toggle { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; } .guest-content { width: 100%; max-width: 380px; } .alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; } .alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); } .alert-error { background: var(--alert-error-bg); color: var(--alert-error-text); } .error-text { color: var(--danger); font-size: 0.8rem; margin-top: -0.6rem; margin-bottom: 0.6rem; display: block; } .pagination { display: flex; gap: 0.4rem; margin-top: 1rem; align-items: center; } .pagination a, .pagination span { padding: 0.35rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; background: var(--surface); color: var(--text); } .pagination .current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.3rem; } .stat-card .value { font-size: 1.8rem; font-weight: 700; } .stat-card .label { color: var(--text-muted); font-size: 0.85rem; } .text-muted { color: var(--text-muted); } .mt-1 { margin-top: 1rem; } .actions-cell { white-space: nowrap; } .actions-cell form { display: inline; } /* Inline editing on the Particuliers/Compagnies/Organismes list pages -- see public/assets/js/app.js and the *Controller::inlineUpdate() endpoints. Rows look like a normal read-only table until the "inline-row-toggle" button in the Actions column is clicked, which adds "inline-active" to the -- that class is what actually reveals a row's pencils/dropdowns below. This keeps the list clean by default and puts editing one deliberate click away, per row, instead of exposing every field's editor for every row all the time. */ .inline-row-toggle { flex: none; } .inline-row-toggle.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .inline-unit { display: inline-flex; align-items: center; gap: 0.2rem; max-width: 100%; vertical-align: middle; } .inline-unit + .inline-unit { margin-left: 0.5rem; } .inline-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* City/Phone tend to be short values in narrow columns where the ellipsis above kicks in more eagerly than it needs to -- let these two wrap onto a second line instead of cutting the text off, so the value is always fully visible without having to widen the column at everything else's expense. */ .inline-unit[data-field="city"] .inline-display, .inline-unit[data-field="phone"] .inline-display { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; } .inline-edit-btn { border: none; background: none; cursor: pointer; padding: 0 0.15rem; font-size: 0.85rem; line-height: 1; color: var(--text-muted); display: none; flex: none; } /* Hidden (not just invisible) by default -- an opacity:0 button still reserves its layout space, which was quietly stealing width from the value next to it in already-tight fixed-width columns like City/Phone. */ tr.inline-active .inline-edit-btn { display: inline-block; } .inline-edit-btn:hover { color: var(--text); } input.inline-input { width: auto; min-width: 70px; max-width: 100%; padding: 0.2rem 0.35rem; margin-bottom: 0; border: 1px solid var(--primary); border-radius: 4px; font-size: 0.85rem; } /* Lookup-backed columns (region/group/activity type/status): a plain read-only label/badge by default, swapped for the real