's default block and the
whole row collapsed into a vertical stack the moment a search matched
it again. Living in a stylesheet rule instead means that fallback is
flex, not block, regardless of how many times a filter clears the
inline override. */
.hist-row { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 12px; padding: 13px 20px; border-bottom: 1px solid #F3F4F6; }
.hist-row-featured { background: #FAFAF8; }
.hist-row-info { flex: 1 1 170px; min-width: 170px; }
.hist-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
/* Real-time "no results" row a live text search inserts into a .tbl table
(see main.js's _syncSearchEmptyState()) — .table-empty already gives it
the exact same look every other "nothing here" message uses; this just
also stops it from picking up .tbl tbody tr:hover's cream highlight,
since unlike a real data row it isn't clickable and shouldn't read as
interactive. */
.tbl tbody tr.tbl-search-empty:hover td { background: transparent; }
/* ════════════════════════════════════════════════════════════════
BADGES
════════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: 9999px;
font-family: 'Poppins', sans-serif;
font-size: 0.72rem;
font-weight: 500;
white-space: nowrap;
}
/* Pending → orange */
.badge-pending { background: #FFF3E0; color: #E8891C; }
/* Approved → green */
.badge-approved { background: #E8F5E9; color: #2E7D32; }
/* Cancelled / Inactive → red */
.badge-cancelled { background: #FFEBEE; color: #C62828; }
.badge-inactive { background: #FFEBEE; color: #C62828; }
/* Disapproved → dark muted red */
.badge-disapproved { background: #fef2f2; color: #991b1b; }
/* Completed → gray */
.badge-completed { background: #F5F5F5; color: #616161; }
.badge-no-show { background: #EDE9FE; color: #6D28D9; }
/* Active → blue */
.badge-active { background: #E3F2FD; color: #1565C0; }
/* Role badges */
.badge-admin { background: #EDE9FE; color: #5B21B6; }
.badge-staff { background: #DBEAFE; color: #1D4ED8; }
.badge-doctor { background: #E8F5E9; color: #2E7D32; }
.badge-patient { background: #FFF0DC; color: #92400E; }
/* ════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════ */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 20px;
background: var(--clr-primary);
color: white;
border: none;
border-radius: 8px;
font-family: 'Poppins', sans-serif;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
white-space: nowrap;
}
.btn-primary:hover:not(:disabled) { opacity: 0.9; }
.btn-primary:active:not(:disabled) { transform: scale(0.98); }
.btn-primary:focus-visible { outline: 2px solid #E8760A; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 20px;
background: white;
color: #374151;
border: 1px solid #E5E7EB;
border-radius: 8px;
font-family: 'Poppins', sans-serif;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.btn-secondary:hover { background: #F9FAFB; border-color: #D1D5DB; }
.btn-secondary:focus-visible { outline: 2px solid #E5E7EB; outline-offset: 2px; }
.btn-danger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: var(--clr-danger);
color: #fff;
border: none;
border-radius: 7px;
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.18s ease, opacity 0.15s ease;
}
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.btn-danger:active:not(:disabled) { background: #991B1B; }
.btn-danger:focus-visible { outline: 2px solid #DC2626; outline-offset: 2px; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
/* .btn-danger/.btn-success/.btn-warning/.btn-disapprove/.btn-ghost are all
deliberately sized as the smaller "compact toolbar" class for pairings
like "Clear Filters" + "Clear All Logs". Inside a modal footer they're
instead paired with .btn-primary/.btn-secondary, a size class up —
match that pairing everywhere it happens.
This used to be a couple of adjacent-sibling selectors (e.g.
`.btn-secondary + .btn-danger`), which only matched when that exact
button happened to sit immediately next to .btn-secondary in the
markup — a modal footer with more than two buttons (e.g. Close,
Approve, Cancel, Disapprove) put .btn-danger right after .btn-success
instead, so the size-match silently never applied and buttons in the
same footer ended up visibly two different sizes. An ancestor selector
on .modal-footer itself matches regardless of order/adjacency. */
.modal-footer .btn-danger,
.modal-footer .btn-success,
.modal-footer .btn-warning,
.modal-footer .btn-disapprove,
.modal-footer .btn-ghost {
padding: 9px 20px; font-size: 0.85rem; border-radius: 8px;
}
.btn-success {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: #E8F5E9;
color: #2E7D32;
border: none;
border-radius: 7px;
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.btn-success:hover { background: #C8E6C9; }
.btn-success:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-warning {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: #FFF3E0;
color: #E8891C;
border: none;
border-radius: 7px;
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.btn-warning:hover { background: #FFE0B2; }
.btn-disapprove {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
border-radius: 7px;
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.btn-disapprove:hover { background: #fee2e2; border-color: #fca5a5; }
.btn-disapprove:disabled { opacity: 0.6; cursor: not-allowed; }
/* Live password policy checklist */
.pw-checklist { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px; }
.pw-check-item { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: #9CA3AF; transition: color 0.15s ease; }
.pw-check-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.pw-check-item.met { color: #059669; }
.pw-check-item.unmet { color: #DC2626; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: transparent;
color: #6B7280;
border: 1px solid #E5E7EB;
border-radius: 7px;
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
white-space: nowrap;
}
.btn-ghost:hover { background: #F3F4F6; color: #374151; border-color: #D1D5DB; }
.btn-ghost:active { transform: scale(0.97); }
.btn-ghost:focus-visible { outline: 2px solid #E5E7EB; outline-offset: 2px; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon {
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #E5E7EB;
border-radius: 7px;
color: #6B7280;
cursor: pointer;
background: white;
transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn-icon:hover { background: #F3F4F6; color: #374151; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.btn-icon:active { transform: scale(0.92); }
.btn-icon:focus-visible { outline: 2px solid #E5E7EB; outline-offset: 2px; }
/* ════════════════════════════════════════════════════════════════
FORMS
════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 0; }
.form-label {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.req { color: #E8760A; }
.form-input {
width: 100%;
padding: 11px 14px;
border: 1.5px solid #E5E7EB;
border-radius: 8px;
font-family: 'Poppins', sans-serif;
font-size: 0.875rem;
color: #111827;
background: #FAFAFA;
outline: none;
transition: border 0.15s, box-shadow 0.15s;
}
.form-input:focus {
border-color: #E8760A;
box-shadow: 0 0 0 3px rgba(232,118,10,.12);
background: white;
}
.form-input::placeholder { color: #C4C9D4; }
/* Same red-outline treatment as .reg-input.error / .lf-input.error (login,
registration, forgot-password) — applied to every dashboard admin/staff
modal field (Add/Edit Patient, Add/Edit User, etc.) so a required-field
or invalid-value error reads the same way everywhere in the app, not
just a toast with no visual pointer to which field caused it. Covers
the custom select and DOB-picker's visible trigger box for free too —
both already carry the plain .form-input class alongside their own
(.cust-select-trigger / .dob-picker-trigger), so marking that trigger
element .error hits this same rule. markFieldError()/clearFormErrors()
(main.js) toggle this. */
.form-input.error,
.form-textarea.error {
border-color: #DC2626;
box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
/* Standard native behaviour: pointer only over the calendar icon itself
(the browser's own click target for opening the picker); the rest of
the field keeps the normal text cursor so typing a date manually still
feels like editing text, not clicking a button. */
input[type="date"].form-input { cursor: text; }
input[type="date"].form-input::-webkit-calendar-picker-indicator { cursor: pointer; }
/* Same dark-mode fix already applied to .reg-input (registration page) —
these are the DOB/date fields used in the admin/staff modals (Add
Patient, Edit Patient, New User, Block Date, etc). Without forcing light
rendering, Chrome on Android (very commonly set to system dark mode) and
Safari draw the native mm/dd/yyyy text almost invisibly on the field's
light background, which reads as "the date picker is broken" even though
a value is actually there. */
input[type="date"].form-input {
color-scheme: light;
}
input[type="date"].form-input::-webkit-datetime-edit,
input[type="date"].form-input::-webkit-datetime-edit-fields-wrapper,
input[type="date"].form-input::-webkit-datetime-edit-text,
input[type="date"].form-input::-webkit-datetime-edit-month-field,
input[type="date"].form-input::-webkit-datetime-edit-day-field,
input[type="date"].form-input::-webkit-datetime-edit-year-field {
color: #111827;
-webkit-text-fill-color: #111827;
}
/* Mobile Safari (and some Android WebViews) auto-zoom the whole viewport
when a focused input's font-size is under 16px. .form-input is 14px and
.reg-input drops to ~13px on mobile (see the 768px breakpoint above) —
for a date field sitting inside a modal, that zoom makes the whole
dialog visibly jump/shift on tap, which looks like the picker glitching.
Scoped to type=date only so no other field's sizing changes. */
@media (max-width: 768px) {
input[type="date"].reg-input,
input[type="date"].form-input {
font-size: 16px;
}
}
/* ── Custom DOB date picker ────────────────────────────────────────
Every date-of-birth field (registration + Add/Edit Patient + New User)
uses this instead of native
— native rendering
(icon, internal text colour, fallback UI on unsupported browsers) is too
inconsistent across Android OEM/WebView versions and iOS Safari, even
with the fixes above. This renders identically everywhere since nothing
is left to the OS; a same-id hidden
still holds the plain
"YYYY-MM-DD" value so existing code reading `.value` is unaffected. */
.dob-picker { position: relative; }
/* Trigger is a
now, not a