in and add a
data-label="Column name" attribute to each
. Below 700px, the table
loses its tabular layout and each | becomes a small card where every
cell shows its own label, so nothing needs to scroll horizontally.
------------------------------------------------------------------------- */
.table-responsive table {
width: 100%;
border-collapse: collapse;
}
.table-responsive th,
.table-responsive td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.table-responsive th { background: #f8f9fa; font-weight: bold; }
/* Appointment notes are already truncated server-side, but guard against
long unbroken strings (no spaces) overflowing the cell/card on narrow
screens. */
.notes-cell {
max-width: 220px;
overflow-wrap: break-word;
}
/* Employees table (employee_list.html): without this, the Teléfono column
(2nd column - an inline input+button edit form) gets stretched by the
table's own width: 100% and ends up wider than its content, leaving a
visible gap before the Estado column. Shrinking it to its content's
natural width (the classic "width: 1%" table trick) fixes that; only
applied above the stacked-card breakpoint, where column widths stop
mattering anyway. */
@media (min-width: 700px) {
.employee-table td:nth-child(2),
.employee-table th:nth-child(2) {
width: 1%;
white-space: nowrap;
}
/* .cluster normally allows wrapping (mobile-friendly), but that lets
the table's width: 1% column-shrinking above consider the input+
button wrappable and shrink the column down to just the button's
width, pushing the input onto its own row. Force them to stay on
one line only at this breakpoint, where the column-width fix above
is also active - the mobile stacked-card view keeps wrapping. */
.employee-table .phone-edit-form {
flex-wrap: nowrap;
}
}
@media (max-width: 699px) {
.table-responsive thead {
display: none; /* headers are replaced by per-cell data-label text */
}
.table-responsive table,
.table-responsive tbody,
.table-responsive tr,
.table-responsive td {
display: block;
width: 100%;
}
.table-responsive tr {
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: var(--spacing-2);
padding: var(--spacing-1) var(--spacing-2);
background: var(--color-card-bg);
}
.table-responsive td {
border-bottom: none;
padding: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
/* The label is injected via the data-label attribute set in the template */
.table-responsive td[data-label]::before {
content: attr(data-label);
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
color: var(--color-muted);
}
.table-responsive td:empty {
display: none;
}
}
/* -------------------------------------------------------------------------
8. Client search dropdown (used on the appointment form)
------------------------------------------------------------------------- */
.client-search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--color-border);
border-top: none;
max-height: 60vh; /* keeps the list usable on short mobile viewports */
overflow-y: auto;
display: none;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 0 0 6px 6px;
}
.client-search-results.active {
display: block;
}
.client-result {
padding: var(--spacing-2);
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-1);
min-height: var(--touch-target);
}
.client-result:hover,
.client-result:focus-visible {
background: #f8f9fa;
}
.client-result:last-child {
border-bottom: none;
}
.no-results {
padding: var(--spacing-2);
color: var(--color-muted);
text-align: center;
}
#client_search.has-selection {
background-color: #d4edda;
border-color: var(--color-brand);
}
/* -------------------------------------------------------------------------
9. Login page
------------------------------------------------------------------------- */
.login-card {
max-width: 400px;
margin: var(--spacing-3) auto;
}
@media (min-width: 700px) {
.login-card {
margin: 4rem auto;
}
}
/* -------------------------------------------------------------------------
9. Support business switcher
------------------------------------------------------------------------- */
.support-business-search {
position: relative;
margin-bottom: 1.25rem;
}
.support-business-search-icon {
position: absolute;
left: 0.9rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
pointer-events: none;
}
.support-business-search input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem;
}
.support-business-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
min-height: 3rem;
transition: opacity 0.15s ease;
}
.support-business-list.is-loading {
opacity: 0.5;
}
.support-business-row {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-card-bg);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.support-business-row:hover {
box-shadow: var(--shadow-card);
border-color: var(--color-brand);
}
.support-business-avatar {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-brand-light);
color: var(--color-brand-dark);
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.support-business-info {
flex: 1;
min-width: 0;
}
.support-business-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.support-business-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.15rem;
font-size: 0.8rem;
color: var(--color-muted);
}
.support-business-id {
font-family: monospace;
}
.support-business-tier {
padding: 0.05rem 0.5rem;
border-radius: 999px;
background: var(--color-brand-light);
color: var(--color-brand-dark);
font-weight: 600;
text-transform: uppercase;
font-size: 0.7rem;
}
.support-business-action {
flex-shrink: 0;
margin: 0;
}
.support-business-empty {
padding: var(--spacing-3);
text-align: center;
color: var(--color-muted);
}
/* -------------------------------------------------------------------------
9. Weekly appointment calendar (mobile-first: stacked day cards below
700px, 7-column grid at/above it - same breakpoint as .stat-grid)
------------------------------------------------------------------------- */
.week-nav {
justify-content: center;
margin-bottom: var(--spacing-2);
}
.week-range {
text-align: center;
margin-bottom: var(--spacing-2);
}
.week-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-2);
}
@media (min-width: 700px) {
.week-grid {
grid-template-columns: repeat(7, 1fr);
gap: var(--spacing-1);
}
}
.week-day {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--spacing-2);
min-width: 0;
}
.week-day.is-today {
background: var(--color-brand-light);
border-color: var(--color-brand);
}
.week-day-header {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
padding-bottom: var(--spacing-1);
margin-bottom: var(--spacing-1);
border-bottom: 1px solid var(--color-border);
}
.week-day-date-bubble {
display: inline-block;
background: var(--color-brand-light);
color: var(--color-brand-dark);
border-radius: 999px;
padding: 0.1rem 0.6rem;
font-weight: 600;
text-decoration: none;
font-size: 0.8rem;
}
.week-day-date-bubble:hover,
.week-day-date-bubble:focus-visible {
background: var(--color-brand);
color: #fff;
}
.week-day.is-today .week-day-date-bubble {
background: var(--color-brand);
color: #fff;
}
.week-appt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
padding: 0.3rem 0;
font-size: 0.85rem;
}
.week-appt + .week-appt {
border-top: 1px dashed var(--color-border);
}
.week-appt a {
text-decoration: none;
}
.week-appt-time {
font-weight: 600;
white-space: nowrap;
}
.week-appt .status {
padding: 0.1rem 0.45rem;
font-size: 0.7rem;
flex-shrink: 0;
}
.week-day-empty {
color: var(--color-muted);
font-size: 0.85rem;
padding: 0.3rem 0;
}
/* -------------------------------------------------------------------------
10. Row action menu (kebab menu tucking secondary row actions in tables,
e.g. appointment_list.html, behind a single toggle instead of a
growing row of buttons)
------------------------------------------------------------------------- */
.row-actions {
display: flex;
align-items: center;
gap: var(--spacing-1);
flex-wrap: wrap;
}
.row-menu {
position: relative;
display: inline-block;
}
.row-menu__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--touch-target);
min-height: var(--touch-target);
background: var(--color-secondary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 1.25rem;
line-height: 1;
}
.row-menu__toggle:hover,
.row-menu__toggle:focus-visible {
background: var(--color-secondary-dark);
}
.row-menu__panel {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 0.25rem;
min-width: 180px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
padding: var(--spacing-1) 0;
}
.row-menu.is-open .row-menu__panel {
display: block;
}
/* Flipped variant: applied via JS (row-menu.js) when there isn't enough
room below the toggle (e.g. the last row on a mobile screen) so the
panel opens upward instead of off-screen. */
.row-menu__panel--above {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 0.25rem;
}
.row-menu__panel form {
margin: 0;
}
.row-menu__item {
display: flex;
align-items: center;
width: 100%;
min-height: var(--touch-target);
padding: 0.5rem var(--spacing-2);
background: none;
border: none;
color: var(--color-text);
text-decoration: none;
font-size: 0.9rem;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.row-menu__item:hover,
.row-menu__item:focus-visible {
background: #f8f9fa;
}
.row-menu__item--danger {
color: var(--color-danger);
}
/* -------------------------------------------------------------------------
11. Confirmation dialog (replaces native confirm() popups, see
confirm-modal.js)
------------------------------------------------------------------------- */
.confirm-dialog {
width: min(90vw, 380px);
margin: auto; /* keeps