*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #f5f7fa;
color: #1a1a2e;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
background: #1a1a2e;
color: #fff;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 1rem;
}
.navbar-home {
color: #a5b4fc;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
transition: color 0.15s;
}
.navbar-home:hover { color: #fff; }
.navbar-brand { flex: 1; }
/* ── Landing page ───────────────────────────────────────────────────────── */
.landing-body {
overflow: auto;
}
.landing-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
gap: 2.5rem;
}
.landing-hero { text-align: center; }
.landing-title {
font-size: 2rem;
font-weight: 700;
color: #1a1a2e;
}
.landing-subtitle {
margin-top: 0.5rem;
font-size: 1rem;
color: #555;
}
.landing-cards {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}
.landing-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 14px;
padding: 2rem 2.25rem;
width: 220px;
text-decoration: none;
color: #1a1a2e;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.landing-card:hover {
border-color: #4f46e5;
box-shadow: 0 4px 16px rgba(79,70,229,0.12);
transform: translateY(-2px);
}
.landing-card[draggable="true"] { cursor: grab; }
.landing-card[draggable="true"]:active { cursor: grabbing; }
.landing-card.card-dragging { opacity: 0.35; box-shadow: none !important; transform: none !important; }
.landing-reorder-hint {
text-align: center;
font-size: 0.78rem;
color: #9ca3af;
margin-top: 0.75rem;
}
.landing-reorder-reset { color: #9ca3af; text-decoration: underline; }
.landing-reorder-reset:hover { color: #6b7280; }
.landing-card-primary {
border-color: #4f46e5;
background: #f5f3ff;
}
.landing-card-primary:hover {
box-shadow: 0 4px 20px rgba(79,70,229,0.2);
}
.landing-card-icon {
font-size: 2rem;
line-height: 1;
}
.landing-card-svg-icon {
width: 2rem;
height: 2rem;
display: block;
}
.landing-card-title {
font-size: 1rem;
font-weight: 700;
}
.landing-card-desc {
font-size: 0.82rem;
color: #666;
line-height: 1.45;
}
/* ── Schedules list ─────────────────────────────────────────────────────── */
.schedules-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 680px;
}
.schedule-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.schedule-card-info { display: flex; flex-direction: column; gap: 0.2rem; }
.schedule-card-name { font-weight: 600; font-size: 0.95rem; }
.schedule-card-meta { font-size: 0.8rem; color: #888; }
.schedule-card-actions { display: flex; gap: 0.5rem; }
/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 2rem 0;
}
.empty-state-msg { color: #888; font-size: 0.9rem; }
/* ── Tab bar ────────────────────────────────────────────────────────────── */
.tab-bar {
background: #fff;
border-bottom: 2px solid #e5e7eb;
display: flex;
padding: 0 1.5rem;
}
.tab {
display: inline-block;
padding: 0.65rem 1.1rem;
font-size: 0.9rem;
font-weight: 500;
color: #555;
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: #1a1a2e; }
.tab.active { color: #4f46e5; border-bottom-color: #4f46e5; font-weight: 600; }
/* ── Container ──────────────────────────────────────────────────────────── */
.container {
flex: 1;
min-height: 0; /* allow flex child to shrink below content height */
padding: 1.5rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
padding: 0.65rem 1rem;
border-radius: 6px;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.alert-error { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
/* ── General settings page ──────────────────────────────────────────────── */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; }
.page-header .subtitle { color: #555; margin-top: 0.25rem; font-size: 0.9rem; }
.settings-form {
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
padding: 1.75rem;
max-width: 680px;
}
.form-group {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #f0f0f0;
}
.form-group:last-of-type { border-bottom: none; }
.form-group > label {
display: block;
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 0.35rem;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
select {
padding: 0.45rem 0.7rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.9rem;
background: #fafafa;
transition: border-color 0.15s;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"] { width: 100%; }
input:focus, select:focus {
outline: none;
border-color: #4f46e5;
background: #fff;
}
.checkbox-wrapper { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.checkbox-wrapper input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; }
.checkbox-label { font-weight: 400; font-size: 0.9rem; }
.field-hint { font-size: 0.78rem; color: #888; margin-top: 0.3rem; }
.form-actions { margin-top: 1.5rem; }
/* Settings section groups */
.settings-section-heading {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6366f1;
margin: 0.25rem 0 1rem;
padding-bottom: 0.45rem;
border-bottom: 2px solid #e0e7ff;
}
.settings-section-divider {
margin: 0.5rem 0 1.5rem;
}
/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.5rem 1.1rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
text-decoration: none;
}
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #4338ca; }
.btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.btn-secondary:hover { background: #f9fafb; }
.btn-outline { background: #fff; color: #374151; border-color: #d1d5db; }
.btn-outline:hover { background: #f9fafb; }
.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.toolbar-sep { width: 1px; height: 1.4rem; background: #d1d5db; margin: 0 0.15rem; align-self: center; }
.btn-icon {
background: none;
border: none;
cursor: pointer;
color: #9ca3af;
font-size: 0.75rem;
padding: 0 0.2rem;
line-height: 1;
flex-shrink: 0;
}
.btn-icon:hover { color: #6b7280; }
.btn-icon-danger:hover { color: #dc2626; }
/* ── Schedule toolbar ───────────────────────────────────────────────────── */
.schedule-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.schedule-toolbar h1 { font-size: 1.3rem; font-weight: 700; }
.toolbar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.inline-form { display: inline-flex; align-items: center; gap: 0.4rem; }
.month-select {
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.875rem;
background: #fff;
cursor: pointer;
}
.date-input {
padding: 0.32rem 0.5rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.8rem;
width: 130px;
}
.count-input {
padding: 0.32rem 0.5rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.8rem;
width: 56px;
cursor: help;
}
/* ── Save status ────────────────────────────────────────────────────────── */
.save-status {
font-size: 0.8rem;
height: 1.2rem;
margin-bottom: 0.4rem;
transition: color 0.2s;
}
.save-status.saving { color: #6b7280; }
.save-status.saved { color: #059669; }
.save-status.error { color: #dc2626; }
/* ── Error banner ───────────────────────────────────────────────────────── */
.error-banner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
background: #fff1f1;
border: 1px solid #fca5a5;
border-left: 4px solid #dc2626;
border-radius: 6px;
padding: 0.75rem 1rem;
margin-bottom: 0.75rem;
}
.error-banner[hidden] { display: none; }
.error-banner-body strong { display: block; color: #991b1b; font-size: 0.875rem; margin-bottom: 0.35rem; }
.error-banner-body pre {
font-family: "Consolas", "Menlo", monospace;
font-size: 0.75rem;
color: #7f1d1d;
white-space: pre-wrap;
word-break: break-word;
max-height: 120px;
overflow-y: auto;
margin: 0;
}
.error-banner-close {
background: none;
border: none;
font-size: 1.1rem;
cursor: pointer;
color: #9ca3af;
flex-shrink: 0;
line-height: 1;
padding: 0;
}
.error-banner-close:hover { color: #374151; }
/* ── Schedule grid ──────────────────────────────────────────────────────── */
.grid-wrapper {
flex: 1;
min-height: 0; /* critical: lets the wrapper shrink so scrollbar stays in view */
overflow-x: scroll;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
position: relative;
}
.schedule-table {
border-collapse: separate;
border-spacing: 0;
font-size: 0.64rem;
white-space: nowrap;
min-width: 100%;
}
/*
* Personnel table: uses JS auto-sizing so we switch to table-layout:fixed
* and remove the shared min/max-width constraints from schedule columns.
*/
.auto-size-table {
table-layout: fixed;
min-width: unset;
width: max-content; /* grow to fit columns; wrapper handles scroll */
}
.auto-size-table .col-assignment {
min-width: 0; /* JS will set exact width */
overflow: hidden;
}
.auto-size-table td.data-cell {
min-width: 0;
max-width: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auto-size-table td.active-cell {
min-width: 0; /* JS controls; CSS already has font-size:0 guard */
overflow: hidden;
}
/* Sticky header row */
.sticky-header {
position: sticky;
top: 0;
background: #f9fafb;
z-index: 2;
border-bottom: 2px solid #d1d5db;
}
/* Sticky first column */
.sticky-col {
position: sticky;
left: 0;
background: #f9fafb;
z-index: 1;
}
/* Corner cell: sticky on both axes */
th.sticky-col.sticky-header {
z-index: 3;
}
.schedule-table th,
.schedule-table td {
padding: 0.3rem 0.5rem;
border-right: 1px solid #e5e7eb;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
.schedule-table tr:last-child td { border-bottom: none; }
/* Column header */
.col-date { min-width: 96px; font-weight: 600; }
.col-assignment { min-width: 90px; }
.col-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
}
.col-name {
font-weight: 600;
font-size: 0.6rem;
color: #374151;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
display: inline-block;
}
.delete-col-form { display: inline; }
/* Date / row-number column */
.date-cell,
.row-header-cell {
font-weight: 500;
font-size: 0.624rem;
color: #374151;
background: #f9fafb;
z-index: 1;
min-width: 36px;
text-align: center;
}
.row-header-cell { cursor: context-menu; }
.row-header-cell:hover { background: #f0f0ff; }
/* Editable data cells */
.data-cell {
cursor: text;
min-width: 90px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
color: #111827;
transition: background 0.1s;
}
.data-cell:focus {
outline: 2px solid #4f46e5;
outline-offset: -2px;
background: #eef2ff;
overflow: visible;
z-index: 1;
}
.data-cell:hover:not(:focus) { background: #f5f5ff; }
.empty-msg {
text-align: center;
color: #9ca3af;
padding: 2rem;
font-size: 0.9rem;
}
/* ── ACTIVE toggle cell ─────────────────────────────────────────────────── */
td.active-cell {
text-align: center;
cursor: pointer;
font-size: 0 !important; /* hide raw Y/N text; pseudo-element shows icon */
min-width: 52px;
user-select: none;
position: relative;
transition: filter 0.1s;
}
td.active-cell:hover { filter: brightness(0.92); }
td.active-cell::before {
font-size: 0.85rem;
font-weight: 700;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
td.active-cell[data-active="Y"] { background: #bbf7d0 !important; }
td.active-cell[data-active="Y"]::before { content: "✓"; color: #15803d; }
td.active-cell[data-active="N"] { background: #fecaca !important; }
td.active-cell[data-active="N"]::before { content: "✗"; color: #b91c1c; }
/* Selection overrides the colour-coded background */
td.active-cell.cell-selected { background: #bfdbfe !important; }
/* ── Invalid cell (email / phone / PGY validation) ─────────────────────── */
td.invalid-cell:not(:focus) {
background: #fff1f1 !important;
outline: 2px solid #dc2626 !important;
outline-offset: -2px;
}
/* Subtle tint while actively editing an invalid cell */
td.invalid-cell:focus {
background: #fff5f5 !important;
outline: 2px solid #fca5a5 !important;
}
/* Flash animation when a PGY value is rejected and reverted */
@keyframes pgy-rejected {
0% { background: #fca5a5; }
60% { background: #fee2e2; }
100% { background: transparent; }
}
td.invalid-flash { animation: pgy-rejected 0.6s ease-out; }
/* ── Location toggle cells (Rotations tab) ──────────────────────────────── */
td.location-cell {
text-align: center;
cursor: pointer;
font-size: 0 !important;
user-select: none;
position: relative;
transition: filter 0.1s;
}
td.location-cell:hover { filter: brightness(0.93); }
td.location-cell::before {
font-size: 0.85rem;
font-weight: 700;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
td.location-cell[data-active="Y"] { background: #dbeafe !important; }
td.location-cell[data-active="Y"]::before { content: "✓"; color: #1d4ed8; }
td.location-cell[data-active="N"] { background: #f1f5f9 !important; }
td.location-cell[data-active="N"]::before { content: "✕"; color: #94a3b8; }
td.location-cell.cell-selected { background: #bfdbfe !important; }
/* ── Rotations context menu ─────────────────────────────────────────────── */
.rot-ctx-menu {
position: fixed;
z-index: 200;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 7px;
box-shadow: 0 4px 18px rgba(0,0,0,0.13);
padding: 0.3rem 0;
min-width: 180px;
font-size: 0.83rem;
}
.rot-ctx-menu[hidden] { display: none; }
.rot-ctx-item {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.42rem 1rem;
cursor: pointer;
color: #374151;
user-select: none;
transition: background 0.1s;
}
.rot-ctx-item:hover { background: #f3f4f6; }
.rot-ctx-item .ctx-icon { font-size: 0.9rem; width: 1.1em; text-align: center; }
.rot-ctx-sep { height: 1px; background: #e5e7eb; margin: 0.25rem 0; }
/* Rotation name column (left sticky in Rotations tab) */
td.rot-name-cell {
font-weight: 600;
font-size: 0.68rem;
color: #1e293b;
background: #f9fafb;
padding-left: 0.6rem;
}
/* Rotations column header tooltip indicator */
th.rot-col-header[title] { cursor: help; }
/* Rotations tab — Display Name column */
th.rot-dispname-hdr {
min-width: 9rem;
font-size: 0.68rem;
cursor: help;
white-space: nowrap;
}
td.rot-dispname-cell {
font-size: 0.72rem;
color: #374151;
min-width: 9rem;
max-width: 14rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
}
td.rot-dispname-cell:hover {
background: #f0f9ff;
outline: 1.5px dashed #93c5fd;
outline-offset: -1px;
}
/* ── Sortable column headers ────────────────────────────────────────────── */
th.sortable-header .col-header-inner { cursor: pointer; }
th.sortable-header:hover { background: #ede9fe !important; }
th.col-sorted { background: #ede9fe !important; }
.sort-ind {
font-size: 0.55rem;
vertical-align: middle;
opacity: 0.65;
pointer-events: none;
}
/* ── Header highlights for active cell/selection ────────────────────────── */
th.col-header-active { background: #e0e7ff !important; color: #3730a3; }
td.row-header-active { background: #e0e7ff !important; color: #3730a3; }
/* ── Multi-cell selection ───────────────────────────────────────────────── */
td.cell-selected {
background: #bfdbfe !important;
outline: 2px solid #3b82f6;
outline-offset: -2px;
}
/* ── Fill handle ────────────────────────────────────────────────────────── */
.fill-handle {
position: fixed;
width: 8px;
height: 8px;
background: #4f46e5;
border: 1px solid #fff;
border-radius: 1px;
cursor: crosshair;
z-index: 20;
box-shadow: 0 0 0 1px #4f46e5;
}
.fill-handle[hidden] { display: none; }
.fill-handle.dragging { cursor: crosshair; }
td.fill-preview {
background: #e0e7ff !important;
outline: 2px dashed #4f46e5;
outline-offset: -2px;
}
/* ── Context menu ───────────────────────────────────────────────────────── */
.ctx-menu {
position: fixed;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 7px;
box-shadow: 0 4px 16px rgba(0,0,0,0.13);
z-index: 300;
min-width: 180px;
padding: 0.2rem 0;
user-select: none;
}
.ctx-menu[hidden] { display: none; }
.ctx-label {
font-size: 0.72rem;
color: #6b7280;
padding: 0.35rem 0.75rem 0.3rem;
border-bottom: 1px solid #f0f0f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.ctx-item {
display: block;
width: 100%;
background: none;
border: none;
text-align: left;
padding: 0.45rem 0.75rem;
font-size: 0.85rem;
cursor: pointer;
}
.ctx-danger { color: #dc2626; }
.ctx-danger:hover { background: #fef2f2; }
.ctx-item:disabled { color: #d1d5db; cursor: default; }
/* Highlight headers on right-click hover */
th.col-assignment:hover { background: #f0f0ff; cursor: context-menu; }
td.date-cell:hover { background: #f0f0ff; cursor: context-menu; }
td.row-header-active { background: #e0e7ff !important; color: #3730a3; }
/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal-overlay[hidden] { display: none; }
.modal {
background: #fff;
border-radius: 10px;
padding: 1.75rem;
width: 360px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.modal h2 { font-size: 1.1rem; margin-bottom: 1.1rem; }
.modal .form-group { margin-bottom: 1rem; padding-bottom: 0; border-bottom: none; }
.modal .form-group label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; display: block; }
.modal .form-group input { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
/* ── Column drag-and-drop ───────────────────────────────────────────────── */
th.col-assignment { cursor: grab; }
th.col-assignment.col-dragging { opacity: 0.4; }
th.col-drop-before { box-shadow: inset 3px 0 0 #4f46e5; }
th.col-drop-after { box-shadow: inset -3px 0 0 #4f46e5; }
/* ── Color palette ──────────────────────────────────────────────────────── */
.color-palette {
display: flex;
align-items: center;
gap: 0.2rem;
}
.color-swatch {
width: 18px;
height: 18px;
border-radius: 3px;
border: 1px solid #d1d5db;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: transform 0.1s, box-shadow 0.1s;
}
.color-swatch:hover {
transform: scale(1.25);
box-shadow: 0 0 0 2px #4f46e5;
}
.color-clear {
background: #fff;
font-size: 0.55rem;
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Summary modal ──────────────────────────────────────────────────────── */
.summary-modal {
width: min(720px, 92vw);
max-height: 80vh;
display: flex;
flex-direction: column;
padding: 1.5rem 1.75rem;
}
.summary-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
flex-shrink: 0;
}
.summary-header h2 { font-size: 1.1rem; margin: 0; }
.summary-search {
width: 100%;
padding: 0.4rem 0.65rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.85rem;
margin-bottom: 0.75rem;
flex-shrink: 0;
box-sizing: border-box;
}
.summary-search:focus { outline: none; border-color: #4f46e5; }
.summary-content {
overflow-y: auto;
flex: 1;
min-height: 0;
}
.summary-toggle {
display: flex;
border: 1px solid #d1d5db;
border-radius: 6px;
overflow: hidden;
}
.summary-tog {
padding: 0.3rem 0.75rem;
font-size: 0.8rem;
font-weight: 500;
border: none;
background: #fff;
cursor: pointer;
color: #374151;
}
.summary-tog:not(.summary-tog-active):hover { background: #f9fafb; }
.summary-tog-active { background: #4f46e5; color: #fff; }
.summary-col { margin-bottom: 1.25rem; }
.summary-col-name {
font-weight: 700;
font-size: 0.85rem;
color: #1a1a2e;
padding-bottom: 0.2rem;
margin-bottom: 0.35rem;
border-bottom: 1px solid #e5e7eb;
}
.summary-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.summary-person {
font-weight: 600;
color: #374151;
padding: 0.18rem 1rem 0.18rem 0.25rem;
vertical-align: top;
white-space: nowrap;
width: 28%;
}
.summary-ranges {
color: #555;
padding: 0.18rem 0;
line-height: 1.6;
}
/* ── Attendings tab ──────────────────────────────────────────────────────── */
/* Pin font size for the whole attendings table so cells (which use
font-size:inherit) render identically to contenteditable | cells. */
#attendingsTable td {
font-size: 0.83rem;
font-weight: 400;
color: #111827;
}
/* Column-group divider for the attendings table */
#attendingsTable th.att-col-sep,
#attendingsTable td.att-col-sep {
border-left: 2px solid #d1d5db;
}
td.att-idx-cell {
text-align: center;
font-size: 0.7rem;
color: #9ca3af;
user-select: none;
padding: 0 0.3rem;
}
td.att-num-cell {
text-align: center;
min-width: 0;
}
/* APP name input — fills the cell with no visible border at rest */
td.att-app-cell {
padding: 0;
min-width: 0;
overflow: hidden;
}
.att-app-input {
width: 100%;
height: 100%;
padding: 0.28rem 0.5rem;
border: none;
background: transparent;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
color: inherit;
box-sizing: border-box;
outline: none;
cursor: text;
min-width: 0;
}
.att-app-input:focus {
outline: 2px solid #4f46e5;
outline-offset: -2px;
background: #fafafe;
border-radius: 2px;
position: relative;
z-index: 1;
}
td.att-app-cell:hover:not(:focus-within) { background: #f5f5ff; }
/* APP days — checkbox group cell */
td.att-days-cell {
white-space: nowrap;
vertical-align: middle;
padding: 0.2rem 0.35rem;
min-width: 0;
}
/* Compact checkbox + label pair used in both the main table and APP pool modal */
.day-chk-wrap {
display: inline-flex;
gap: 0.25rem;
align-items: center;
flex-wrap: nowrap;
}
.day-chk-label {
display: inline-flex;
align-items: center;
gap: 0.12rem;
font-size: 0.7rem;
font-weight: 600;
color: #374151;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.day-chk-label input[type="checkbox"] {
width: 11px;
height: 11px;
margin: 0;
cursor: pointer;
accent-color: #4f46e5;
flex-shrink: 0;
}
/* Attendings right-click context menu */
.att-ctx-menu {
position: fixed;
z-index: 200;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 7px;
box-shadow: 0 4px 18px rgba(0,0,0,0.13);
padding: 0.3rem 0;
min-width: 190px;
font-size: 0.83rem;
}
.att-ctx-menu[hidden] { display: none; }
.att-ctx-item {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.42rem 1rem;
cursor: pointer;
color: #374151;
user-select: none;
transition: background 0.1s;
}
.att-ctx-item:hover { background: #f3f4f6; }
.att-ctx-item.danger { color: #dc2626; }
.att-ctx-item.danger:hover { background: #fee2e2; }
.att-ctx-sep { height: 1px; background: #e5e7eb; margin: 0.25rem 0; }
/* ── Rotations – Mappings modal ─────────────────────────────────────────── */
.mappings-modal {
width: min(680px, 94vw);
max-height: 82vh;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.mappings-modal-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem 0.9rem;
border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
}
.mappings-modal-header h2 {
font-size: 1.05rem;
margin: 0;
white-space: nowrap;
}
.mappings-hint {
font-size: 0.78rem;
color: #6b7280;
margin: 0;
line-height: 1.4;
}
.mappings-table-wrap {
overflow-y: auto;
flex: 1;
padding: 0.75rem 1.5rem;
}
.mappings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.83rem;
}
.mappings-table th {
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.3rem 0.5rem 0.55rem;
border-bottom: 1px solid #e5e7eb;
}
.mappings-table td {
padding: 0.28rem 0.4rem;
vertical-align: middle;
border-bottom: 1px solid #f3f4f6;
}
.mappings-table tr:last-child td { border-bottom: none; }
.mapping-room-input {
width: 100%;
padding: 0.3rem 0.5rem;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 0.82rem;
font-family: inherit;
box-sizing: border-box;
background: #fff;
transition: border-color 0.15s;
}
.mapping-room-input:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 2px rgba(79,70,229,0.12);
}
.mapping-loc-select {
width: 100%;
padding: 0.3rem 0.5rem;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 0.82rem;
font-family: inherit;
background: #fff;
cursor: pointer;
box-sizing: border-box;
transition: border-color 0.15s;
}
.mapping-loc-select:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 2px rgba(79,70,229,0.12);
}
.mapping-del-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: #9ca3af;
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background 0.13s, color 0.13s;
}
.mapping-del-btn:hover { background: #fee2e2; color: #dc2626; }
.mappings-modal-footer {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1.5rem;
border-top: 1px solid #e5e7eb;
flex-shrink: 0;
background: #f9fafb;
border-radius: 0 0 10px 10px;
}
.mappings-modal-footer .btn { flex-shrink: 0; }
/* ── APP Pool modal ─────────────────────────────────────────────────────── */
.app-pool-modal { width: min(820px, 96vw); }
.app-pool-table { width: 100%; }
.app-loc-hdr { font-size: 0.7rem; }
.app-loc-cell { padding: 0.25rem 0.5rem; vertical-align: middle; }
.app-loc-checks {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
align-items: center;
}
.app-loc-label {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.76rem;
color: #374151;
cursor: pointer;
white-space: nowrap;
padding: 0.18rem 0.45rem;
border-radius: 5px;
border: 1px solid #e5e7eb;
background: #f9fafb;
transition: background 0.1s, border-color 0.1s;
}
.app-loc-label:has(.app-loc-cb:checked) {
background: #eff6ff;
border-color: #93c5fd;
color: #1e40af;
font-weight: 600;
}
.app-loc-label:hover {
border-color: #6366f1;
background: #f5f3ff;
}
.app-loc-cb {
accent-color: #4f46e5;
width: 13px;
height: 13px;
cursor: pointer;
}
/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
flex-shrink: 0;
background: #1a1a2e;
color: rgba(255, 255, 255, 0.55);
text-align: center;
font-size: 0.72rem;
letter-spacing: 0.04em;
padding: 0.55rem 1rem;
border-top: 1px solid rgba(255,255,255,0.07);
}
/* ── Assignments tab ─────────────────────────────────────────────────────── */
.asgn-layout {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Sidebar */
.asgn-sidebar {
width: 190px;
min-width: 190px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid #e5e7eb;
overflow: hidden;
}
.asgn-sidebar-hdr {
flex-shrink: 0;
padding: 0.45rem 0.75rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
}
.asgn-rot-list {
flex: 1;
overflow-y: auto;
}
.asgn-rot-item {
padding: 0.42rem 0.75rem;
font-size: 0.8rem;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.1s;
}
.asgn-rot-item:hover { background: #f3f4f6; }
.asgn-rot-item.active {
background: #ede9fe;
color: #4f46e5;
font-weight: 600;
border-left: 3px solid #4f46e5;
padding-left: calc(0.75rem - 3px);
}
/* Yellow warning: rotation has no assignments */
.asgn-rot-item.asgn-rot-no-assignments {
background: #fefce8;
border-left: 3px solid #eab308;
padding-left: calc(0.75rem - 3px);
}
.asgn-rot-item.asgn-rot-no-assignments:hover { background: #fef9c3; }
.asgn-rot-item.asgn-rot-no-assignments.active {
background: #fef3c7;
color: #92400e;
border-left-color: #d97706;
}
/* Main content area */
.asgn-main {
flex: 1;
min-width: 0;
overflow-y: auto;
padding: 0 0.75rem 1rem;
}
.asgn-placeholder {
margin-top: 5rem;
text-align: center;
font-size: 0.9rem;
color: #9ca3af;
}
/* Month navigation */
.asgn-month-nav {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0 0.6rem;
position: sticky;
top: 0;
background: #fff;
z-index: 2;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 0.6rem;
}
.asgn-month-label {
margin: 0;
font-size: 1rem;
font-weight: 600;
min-width: 155px;
text-align: center;
}
/* Calendar grid — 6 columns: row-label + 5 day columns */
.asgn-cal-grid {
display: grid;
grid-template-columns: 3rem repeat(5, 1fr);
gap: 0.45rem;
padding-top: 0.5rem;
}
.cal-corner { /* empty top-left cell */ }
.cal-col-hdr {
text-align: center;
font-size: 0.72rem;
font-weight: 700;
color: #6b7280;
padding: 0.3rem 0.25rem;
border-bottom: 2px solid #d1d5db;
letter-spacing: 0.03em;
}
.cal-row-lbl {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 700;
color: #9ca3af;
letter-spacing: 0.03em;
}
/* Day cells */
.cal-cell {
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 0.35rem 0.4rem;
background: #fff;
min-height: 68px;
}
/* Primary / secondary assignment row */
.cal-cell-row {
display: flex;
align-items: center;
gap: 0.2rem;
margin-bottom: 0.2rem;
}
.cal-role-lbl {
font-size: 0.6rem;
color: #9ca3af;
min-width: 1.1rem;
flex-shrink: 0;
text-align: right;
}
/* Attending text input */
.cal-att-inp {
flex: 1;
min-width: 0;
font-size: 0.72rem;
font-family: inherit;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 0.15rem 0.25rem;
background: #fff;
outline: none;
color: #111827;
}
.cal-att-inp:focus {
outline: 2px solid #4f46e5;
outline-offset: -2px;
background: #fafafe;
}
.cal-att-inp::placeholder { color: #d1d5db; }
/* Type select */
.cal-type-sel {
flex-shrink: 0;
width: 56px;
font-size: 0.68rem;
font-family: inherit;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 0.15rem 0.1rem;
background: #fff;
color: #374151;
cursor: pointer;
}
.cal-type-sel[data-type="or"] { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.cal-type-sel[data-type="clinic"] { background: #dcfce7; border-color: #86efac; color: #166534; }
/* Location row in cell */
.cal-loc-row {
margin-top: 0.15rem;
margin-bottom: 0;
padding-top: 0.15rem;
border-top: 1px dashed #f0f1f3;
}
.cal-loc-lbl {
font-size: 0.65rem;
min-width: 1.1rem;
flex-shrink: 0;
text-align: right;
color: #9ca3af;
}
.cal-loc-sel {
flex: 1;
min-width: 0;
font-size: 0.68rem;
font-family: inherit;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 0.12rem 0.2rem;
background: #fafafa;
color: #374151;
outline: none;
cursor: pointer;
}
.cal-loc-sel:focus {
outline: 2px solid #f59e0b;
outline-offset: -2px;
background: #fffbeb;
border-color: #fbbf24;
}
/* When a location is selected (value != empty) */
.cal-loc-sel.has-location {
background: #fef3c7;
border-color: #fcd34d;
color: #92400e;
font-weight: 600;
}
/* Bulk Update modal */
.bulk-modal { max-width: 700px; }
.bulk-table { width: 100%; table-layout: fixed; }
.bulk-table th {
font-size: 0.72rem;
font-weight: 700;
color: #374151;
padding: 0.3rem 0.4rem;
text-align: center;
background: #f9fafb;
border-bottom: 2px solid #e5e7eb;
}
.bulk-role-lbl {
font-size: 0.7rem;
font-weight: 600;
color: #6b7280;
white-space: nowrap;
padding: 0.4rem 0.5rem;
vertical-align: middle;
text-align: right;
}
.bulk-cell {
padding: 0.3rem 0.25rem;
vertical-align: top;
}
.bulk-cell .cal-att-inp { width: 100%; margin-bottom: 0.2rem; }
.bulk-cell .cal-type-sel { width: 100%; }
.bulk-cell .cal-loc-sel { width: 100%; }
/* Notes textarea */
.asgn-notes-wrap {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #e5e7eb;
}
.asgn-notes-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.3rem;
}
.asgn-notes-ta {
width: 100%;
box-sizing: border-box;
font-size: 0.83rem;
font-family: inherit;
color: #111827;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.45rem 0.6rem;
resize: vertical;
line-height: 1.5;
background: #fff;
transition: border-color 0.15s;
}
.asgn-notes-ta:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
/* Sidebar — reporting section */
.asgn-sidebar-hdr-reporting {
margin-top: 0.5rem;
border-top: 2px solid #e5e7eb;
color: #b45309;
}
.asgn-rot-item-inactive { opacity: 0.9; }
.asgn-rot-item-inactive .asgn-rot-item-name {
display: block;
font-size: 0.8rem;
color: #374151;
}
.asgn-rot-unassigned { border-left: 3px solid #f59e0b; }
.asgn-grp-badge {
display: inline-block;
margin-top: 0.15rem;
font-size: 0.62rem;
font-weight: 600;
padding: 0.1rem 0.35rem;
border-radius: 999px;
background: #ede9fe;
color: #4f46e5;
white-space: nowrap;
}
.asgn-grp-badge-empty {
background: #fef3c7;
color: #b45309;
}
.asgn-rot-empty {
padding: 0.5rem 0.75rem;
font-size: 0.78rem;
color: #9ca3af;
}
/* Reporting group panel */
.asgn-report-body {
max-width: 480px;
padding: 0.75rem 0;
}
.asgn-report-title {
font-size: 1rem;
font-weight: 700;
color: #111827;
margin: 0 0 0.25rem;
}
.asgn-report-desc {
font-size: 0.8rem;
color: #6b7280;
margin: 0 0 0.85rem;
}
.asgn-report-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.asgn-report-label {
font-size: 0.8rem;
font-weight: 600;
color: #374151;
white-space: nowrap;
}
.asgn-report-sel {
flex: 1;
font-size: 0.83rem;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.3rem 0.5rem;
background: #fff;
}
.asgn-report-sel:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.asgn-report-warning {
font-size: 0.78rem;
color: #b45309;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 5px;
padding: 0.35rem 0.6rem;
margin: 0;
}
/* Rotations table — Reporting Group column */
.rot-reporting-cell {
padding: 0.2rem 0.4rem;
white-space: nowrap;
}
.rot-rpt-grp-sel {
font-size: 0.78rem;
font-family: inherit;
border: 1px solid #d1d5db;
border-radius: 5px;
padding: 0.18rem 0.35rem;
background: #fff;
color: #111827;
min-width: 130px;
cursor: pointer;
}
.rot-rpt-grp-sel:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 2px rgba(79,70,229,.15);
}
.rot-rpt-dash {
color: #d1d5db;
font-size: 0.85rem;
}
/* Schedule / Assignments — invalid entry flash */
@keyframes invalidFlash {
0% { background: #fee2e2; outline: 2px solid #ef4444; }
70% { background: #fee2e2; outline: 2px solid #ef4444; }
100% { background: inherit; outline: none; }
}
.cell-invalid-flash {
animation: invalidFlash 0.9s ease forwards;
}
/* Rotations table — inline rename input */
.rot-name-edit-inp {
width: 100%;
box-sizing: border-box;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
padding: 0.1rem 0.3rem;
border: 1.5px solid #4f46e5;
border-radius: 3px;
outline: none;
background: #fff;
color: #1a1a2e;
}
/* Rotations table — Delete column */
.rot-del-hdr {
width: 2.2rem;
min-width: 2.2rem;
padding: 0;
}
.rot-del-cell {
padding: 0.1rem 0.25rem;
text-align: center;
vertical-align: middle;
}
.rot-del-btn {
font-size: 0.95rem;
color: #9ca3af;
background: none;
border: none;
border-radius: 4px;
padding: 0.15rem 0.3rem;
cursor: pointer;
transition: color 0.12s, background 0.12s;
line-height: 1;
}
.rot-del-btn:hover {
color: #dc2626;
background: #fee2e2;
}
/* ── QGenda page ─────────────────────────────────────────────────────────── */
.qg-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 860px;
}
.qg-nav {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.qg-nav-btn { min-width: 2.4rem; justify-content: center; }
.qg-today-btn { margin-left: 0.25rem; }
.qg-date-label {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a2e;
min-width: 240px;
text-align: center;
}
.qg-date-input {
margin-left: auto;
width: auto;
font-size: 0.85rem;
}
.qg-sections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 640px) {
.qg-sections { grid-template-columns: 1fr; }
}
.qg-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 1.25rem 1.5rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.qg-card-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
.qg-card-sub {
font-size: 0.78rem;
color: #888;
margin-bottom: 1rem;
}
.qg-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.qg-table th {
text-align: left;
font-weight: 600;
font-size: 0.78rem;
color: #555;
padding: 0 0.5rem 0.5rem;
border-bottom: 2px solid #e5e7eb;
}
.qg-table td {
padding: 0.45rem 0.5rem;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
}
.qg-table tr:last-child td { border-bottom: none; }
.qg-name { font-weight: 600; color: #1a1a2e; }
.qg-postcall-badge {
display: inline-block;
background: #f5f3ff;
border: 2px solid #4f46e5;
color: #3730a3;
font-size: 1.4rem;
font-weight: 700;
padding: 0.6rem 1.25rem;
border-radius: 8px;
margin-top: 0.25rem;
}
.qg-empty {
color: #aaa;
font-size: 0.875rem;
font-style: italic;
}
/* ── QGenda Week View ────────────────────────────────────────────────────── */
.qgw-page {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 1100px;
}
/* Navigation bar */
.qgw-nav {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.qgw-nav-btn { min-width: 2.4rem; justify-content: center; }
.qgw-today-btn { margin-left: 0.15rem; }
.qgw-refresh-btn {
margin-left: 0.25rem;
color: #2563eb;
border-color: #93c5fd;
background: #eff6ff;
transition: background 0.15s, color 0.15s;
}
.qgw-refresh-btn:hover {
background: #dbeafe;
color: #1d4ed8;
border-color: #60a5fa;
text-decoration: none;
}
.qgw-refreshed-badge {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 600;
color: #15803d;
background: #dcfce7;
border: 1px solid #86efac;
border-radius: 4px;
padding: 2px 8px;
margin-left: 0.1rem;
}
.qgw-week-label {
font-size: 1.05rem;
font-weight: 700;
color: #1a1a2e;
min-width: 200px;
text-align: center;
}
.qgw-date-input {
margin-left: auto;
font-size: 0.82rem;
width: auto;
}
/* Scrollable wrapper on narrow screens */
.qgw-table-wrap {
overflow-x: auto;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
border: 1px solid #e5e7eb;
}
/* Main week table */
.qgw-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
background: #fff;
min-width: 640px;
}
/* Column sizing */
.qgw-col-label { width: 180px; min-width: 140px; }
.qgw-col-day { min-width: 90px; }
/* Header row */
.qgw-th-label {
background: #f8f9fb;
border-bottom: 2px solid #d1d5db;
padding: 0.6rem 0.75rem;
}
.qgw-th-day {
background: #f8f9fb;
border-bottom: 2px solid #d1d5db;
border-left: 1px solid #e5e7eb;
padding: 0.45rem 0.5rem;
text-align: center;
white-space: nowrap;
}
.qgw-day-name {
display: block;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
}
.qgw-day-date {
display: block;
font-size: 0.92rem;
font-weight: 700;
color: #1a1a2e;
margin-top: 0.1rem;
}
/* Section header rows */
.qgw-section-header td {
background: #1a1a2e;
color: #e5e7eb;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 0.35rem 0.75rem;
}
.qgw-section-header-postcall td {
background: #3730a3;
color: #ede9fe;
}
.qgw-section-icon { margin-right: 0.35rem; }
/* Spacer between sections */
.qgw-section-spacer td {
height: 0.5rem;
background: #f3f4f6;
border: none;
}
/* Data rows */
.qgw-row td {
border-bottom: 1px solid #f0f1f3;
vertical-align: top;
padding: 0.5rem 0.5rem;
}
.qgw-row:last-child td { border-bottom: none; }
/* Row type backgrounds */
.qgw-row-attending { background: #fffbeb; }
.qgw-row-other { background: #fff; }
.qgw-row-postcall { background: #f5f3ff; }
/* Row hover highlight */
.qgw-row:hover td { filter: brightness(0.97); }
/* Label cells (first column) */
.qgw-td-label {
font-size: 0.8rem;
font-weight: 600;
color: #374151;
border-right: 2px solid #e5e7eb;
white-space: normal;
word-break: break-word;
max-width: 180px;
}
.qgw-td-label-attending { color: #92400e; }
.qgw-td-label-postcall { color: #3730a3; }
/* Day cells */
.qgw-td-cell {
text-align: center;
border-left: 1px solid #f0f1f3;
}
/* Name badges */
.qgw-name {
display: inline-block;
font-weight: 600;
color: #1a1a2e;
font-size: 0.875rem;
line-height: 1.3;
}
.qgw-name + .qgw-name::before {
content: "";
display: block;
}
.qgw-name-attending {
color: #92400e;
}
.qgw-name-postcall {
color: #3730a3;
font-size: 0.95rem;
}
/* Empty dash */
.qgw-dash {
color: #d1d5db;
font-size: 0.85rem;
}
/* Empty state row */
.qgw-empty-row {
text-align: center;
color: #9ca3af;
font-style: italic;
padding: 1.5rem !important;
}
/* Tab accent for QGenda tab */
.tab.tab-qgenda.active {
border-bottom-color: #4f46e5;
color: #4f46e5;
}
/* ── Schedule list: dates line + delete form ────────────────────────────── */
.schedule-card-dates {
font-size: 0.82rem;
color: #374151;
font-weight: 500;
}
.schedule-delete-form {
display: inline;
margin: 0;
padding: 0;
}
/* ── Schedule view page ─────────────────────────────────────────────────── */
.sv-page {
display: flex;
flex-direction: column;
gap: 0;
max-width: 1100px;
width: 100%;
flex: 1;
min-height: 0;
}
/* Header */
.sv-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 0;
}
.sv-header-left { display: flex; flex-direction: column; gap: 0.3rem; }
.sv-back {
font-size: 0.8rem;
color: #6b7280;
text-decoration: none;
}
.sv-back:hover { color: #1a1a2e; text-decoration: underline; }
.sv-title {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.sv-meta-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.82rem;
}
.sv-meta-badge {
display: inline-flex;
align-items: center;
background: #f0f4ff;
border: 1px solid #c7d2fe;
color: #3730a3;
border-radius: 20px;
padding: 0.2rem 0.65rem;
font-weight: 500;
}
.sv-meta-sep { color: #d1d5db; }
.sv-meta-created { color: #9ca3af; }
.sv-header-right {
flex-shrink: 0;
margin-top: 0.25rem;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
/* Inner tab bar */
.sv-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid #e5e7eb;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.sv-tab {
padding: 0.55rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: color 0.12s, border-color 0.12s;
}
.sv-tab:hover { color: #1a1a2e; }
.sv-tab-active {
color: #1a1a2e;
font-weight: 700;
border-bottom-color: #1a1a2e;
}
/* Panel wrapper — this is the scroll region below the tab bar */
.sv-panel {
padding: 0.5rem 0 1.5rem;
flex: 1;
min-height: 0;
overflow-y: auto;
display: block;
}
/* QGenda Freeze nav overrides */
.sv-qgw-nav { margin-bottom: 1rem; }
.sv-nav-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.sv-range-label {
margin-left: auto;
font-size: 0.78rem;
color: #9ca3af;
font-style: italic;
}
/* ── General settings scroll wrapper ───────────────────────────────────── */
.general-scroll-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 0.25rem;
}
/* ── Vacation Requests page ────────────────────────────────────────────── */
.vac-page {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ── Epic Reports (ep-*) ──────────────────────────────────────────────────── */
.ep-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 900px) { .ep-grid { grid-template-columns: 1fr; } }
.ep-upload-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
}
.ep-card-header {
padding: 0.7rem 0.9rem 0.5rem;
border-bottom: 1px solid #f0f1f3;
}
.ep-card-title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #1a1a2e;
}
.ep-card-sub {
font-size: 0.72rem;
color: #9ca3af;
}
/* Drop zone ---------------------------------------------------------------- */
.ep-dropzone {
padding: 0.9rem;
min-height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
transition: background 0.15s;
}
.ep-dropzone-hover, .ep-dropzone:hover {
background: #f5f3ff;
}
.ep-drop-prompt {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
color: #6b7280;
font-size: 0.82rem;
}
.ep-drop-icon { font-size: 1.5rem; opacity: 0.5; }
.ep-drop-hint { font-size: 0.7rem; color: #9ca3af; }
.ep-browse-label {
color: #6366f1;
cursor: pointer;
text-decoration: underline;
font-weight: 600;
}
.ep-file-input { display: none; }
/* File-loaded badge -------------------------------------------------------- */
.ep-file-loaded {
display: flex;
align-items: center;
gap: 0.45rem;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 6px;
padding: 0.35rem 0.6rem;
font-size: 0.82rem;
}
.ep-file-icon { font-size: 1.1rem; }
.ep-file-name { font-weight: 600; color: #166534; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-file-download {
margin-left: 0.25rem;
font-size: 0.72rem !important;
padding: 0.12rem 0.45rem !important;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.ep-file-remove {
background: none;
border: none;
font-size: 1rem;
cursor: pointer;
color: #9ca3af;
flex-shrink: 0;
padding: 0 0.2rem;
line-height: 1;
}
.ep-file-remove:hover { color: #ef4444; }
/* Progress bar ------------------------------------------------------------- */
.ep-progress-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.3rem 0;
}
.ep-progress-bar {
flex: 1;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
}
.ep-progress-fill {
height: 100%;
width: 0%;
background: #6366f1;
border-radius: 3px;
transition: width 0.25s ease;
}
.ep-progress-text {
font-size: 0.72rem;
color: #6b7280;
white-space: nowrap;
}
/* Stats -------------------------------------------------------------------- */
.ep-stats {
padding: 0 0.9rem 0.9rem;
}
.ep-stat-summary {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
padding-top: 0.5rem;
}
.ep-stat-big {
display: flex;
flex-direction: column;
align-items: center;
background: #f8fafc;
border-radius: 8px;
padding: 0.5rem 1rem;
flex: 1 1 100px;
min-width: 90px;
}
.ep-stat-num {
font-size: 1.5rem;
font-weight: 800;
color: #6366f1;
line-height: 1.2;
}
.ep-stat-num-sm { font-size: 0.85rem; font-weight: 600; }
.ep-stat-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9ca3af;
}
.ep-stat-section {
margin-top: 0.6rem;
}
.ep-stat-heading {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6366f1;
margin: 0 0 0.3rem;
}
.ep-stat-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
}
.ep-stat-table th {
text-align: left;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9ca3af;
padding: 0.25rem 0.4rem;
border-bottom: 1px solid #e5e7eb;
}
.ep-stat-table td {
padding: 0.25rem 0.4rem;
border-bottom: 1px solid #f3f4f6;
color: #374151;
}
.ep-stat-table tr:last-child td { border-bottom: none; }
.ep-stat-table .ep-num {
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Report button */
.ep-report-actions {
padding: 0.6rem 0.75rem 0.5rem;
border-top: 1px solid #f3f4f6;
}
/* ── Epic grid report overlay ─────────────────────────────────────────────── */
.ep-report-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
z-index: 3000;
}
.ep-report-modal {
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.22);
width: min(96vw, 1100px);
max-height: 88vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.ep-report-modal-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 0.85rem 1.1rem 0.75rem;
border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
}
.ep-report-modal-title {
margin: 0; font-size: 1rem; font-weight: 700; color: #111827;
}
.ep-report-close {
background: none; border: none; font-size: 1.4rem; line-height: 1;
color: #6b7280; cursor: pointer; padding: 0 0.25rem;
}
.ep-report-close:hover { color: #111827; }
.ep-report-modal-body {
flex: 1; overflow: auto; padding: 0.75rem 0;
}
.ep-report-loading, .ep-report-empty {
padding: 2rem; text-align: center; color: #6b7280; font-size: 0.9rem;
}
/* Grid table */
.ep-rg-wrap {
overflow-x: auto; padding: 0 0.75rem;
}
.ep-rg-table {
border-collapse: collapse;
font-size: 0.8rem;
min-width: 100%;
}
.ep-rg-table thead tr {
background: #f9fafb;
}
.ep-rg-th-name {
text-align: left; padding: 0.45rem 0.6rem;
font-weight: 700; color: #374151;
min-width: 140px; position: sticky; left: 0;
background: #f9fafb; z-index: 1;
border-bottom: 2px solid #e5e7eb;
}
.ep-rg-th-day {
text-align: center; padding: 0.35rem 0.5rem;
font-weight: 600; color: #374151;
min-width: 90px;
border-bottom: 2px solid #e5e7eb;
border-left: 1px solid #e5e7eb;
}
.ep-rg-dow { display: block; font-size: 0.72rem; font-weight: 700; }
.ep-rg-date { display: block; font-size: 0.68rem; color: #6b7280; }
.ep-rg-td-name {
padding: 0.35rem 0.6rem;
font-weight: 600; color: #111827;
border-bottom: 1px solid #f3f4f6;
white-space: nowrap;
position: sticky; left: 0;
background: #fff; z-index: 1;
}
.ep-rg-table tbody tr:hover .ep-rg-td-name { background: #f9fafb; }
.ep-rg-cell {
padding: 0.3rem 0.45rem;
text-align: center; vertical-align: top;
border-bottom: 1px solid #f3f4f6;
border-left: 1px solid #f3f4f6;
}
.ep-rg-cell[data-has-cases="1"] {
cursor: pointer;
}
.ep-rg-cell[data-has-cases="1"]:hover {
background: #eff6ff;
}
.ep-rg-cell-active { background: #dbeafe !important; outline: 2px solid #3b82f6; }
.ep-rg-cell-empty { color: #d1d5db; }
.ep-rg-count {
display: block; font-size: 1rem; font-weight: 700;
color: #111827; line-height: 1.2;
}
.ep-rg-locs {
display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
margin-top: 3px;
}
.ep-rg-loc {
font-size: 0.62rem; color: #6b7280;
background: #f3f4f6; border-radius: 3px;
padding: 1px 4px; white-space: nowrap;
}
/* Drill-down detail panel */
.ep-report-detail {
flex-shrink: 0;
border-top: 2px solid #3b82f6;
background: #f8faff;
max-height: 280px; overflow-y: auto;
display: flex; flex-direction: column;
}
.ep-report-detail-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 0.5rem 0.75rem;
background: #eff6ff; border-bottom: 1px solid #bfdbfe;
position: sticky; top: 0; z-index: 1;
font-size: 0.85rem;
}
.ep-report-detail-close {
background: none; border: none; font-size: 1.1rem; color: #3b82f6;
cursor: pointer; line-height: 1; padding: 0 0.2rem;
}
.ep-report-detail-close:hover { color: #1d4ed8; }
.ep-report-detail-content { padding: 0.5rem 0.75rem; }
.ep-detail-table {
width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.ep-detail-table th {
text-align: left; padding: 0.25rem 0.4rem;
font-weight: 700; color: #374151;
border-bottom: 2px solid #bfdbfe;
}
.ep-detail-table td {
padding: 0.2rem 0.4rem;
border-bottom: 1px solid #e5e7eb;
color: #374151;
}
.ep-detail-table tr:last-child td { border-bottom: none; }
.ep-detail-num { text-align: center; color: #9ca3af; font-weight: 600; }
.ep-detail-procs { color: #374151; max-width: 400px; }
/* Suspected-vacation rows in OR/Clinic report grids */
.ep-rg-suspect td { background: #fff7ed !important; }
.ep-rg-suspect .ep-rg-td-name { color: #92400e; }
.ep-rg-suspect-tag {
display: inline-block;
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
text-transform: uppercase;
background: #fed7aa; color: #9a3412;
border: 1px solid #fb923c; border-radius: 3px;
padding: 1px 5px; margin-left: 6px;
vertical-align: middle;
}
/* ── Main Schedule (ms-*) ─────────────────────────────────────────────────── */
/* Reporting-group cards ---------------------------------------------------- */
.ms-rg-section {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-bottom: 1.1rem;
}
.ms-rg-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0.6rem 0.8rem;
flex: 1 1 180px;
min-width: 150px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ms-rg-header {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #6366f1;
margin-bottom: 0.45rem;
}
.ms-rg-residents {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.ms-rg-chip {
display: inline-flex;
flex-direction: column;
background: #f5f3ff;
border-radius: 6px;
padding: 0.22rem 0.42rem;
line-height: 1.25;
}
.ms-rg-chip-name { font-size: 0.78rem; font-weight: 600; color: #1a1a2e; }
.ms-rg-chip-rot { font-size: 0.65rem; color: #7c3aed; }
.ms-rg-empty { font-size: 0.76rem; color: #9ca3af; font-style: italic; }
/* Day list ----------------------------------------------------------------- */
.ms-days {
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.ms-day {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.45rem 0.75rem;
border-bottom: 1px solid #f0f1f3;
background: #fff;
}
.ms-day:last-child { border-bottom: none; }
.ms-day:hover { background: #f8f9fb; }
.ms-day-weekend { background: #fafafa; }
.ms-day-weekend:hover { background: #f3f4f6; }
.ms-day-nodata .ms-day-hdr { opacity: 0.4; }
.ms-day-nodata .ms-day-body { opacity: 0.3; }
.ms-day-hdr {
min-width: 130px;
flex-shrink: 0;
display: flex;
flex-direction: column;
padding-top: 0.1rem;
}
.ms-day-weekday {
font-size: 0.8rem;
font-weight: 700;
color: #1a1a2e;
line-height: 1.25;
}
.ms-day-date {
font-size: 0.72rem;
color: #6b7280;
line-height: 1.25;
}
.ms-day-body {
display: flex;
flex-wrap: wrap;
gap: 0.28rem;
align-items: center;
}
.ms-chip {
display: inline-flex;
align-items: baseline;
gap: 0.22rem;
background: #f1f5f9;
border-radius: 5px;
padding: 0.18rem 0.38rem;
white-space: nowrap;
}
.ms-chip-rot { font-size: 0.65rem; color: #64748b; }
.ms-chip-name { font-size: 0.75rem; font-weight: 600; color: #1a1a2e; }
.ms-day-dash { font-size: 0.8rem; color: #d1d5db; }
/* ── Generated Schedule (gs-*) ────────────────────────────────────────────── */
.gs-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
gap: 0.75rem;
}
.gs-generated-at { font-size: 0.76rem; color: #9ca3af; }
/* Pre-generation checklist */
.gs-checklist {
max-width: 640px;
margin: 0;
padding: 0.25rem 0;
}
.gs-checklist-title {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 0.25rem;
}
.gs-checklist-sub {
font-size: 0.84rem;
color: #6b7280;
margin-bottom: 1.25rem;
}
.gs-steps { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.gs-step {
display: flex;
gap: 0.75rem;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
padding: 0.75rem 1rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
.gs-step-done {
border-color: #86efac;
background: #f0fdf4;
}
.gs-step-num {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #e5e7eb;
color: #6b7280;
font-weight: 700;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 0.1rem;
}
.gs-step-done .gs-step-num {
background: #22c55e;
color: #fff;
}
.gs-step-body { flex: 1; min-width: 0; }
.gs-step-label { font-size: 0.9rem; font-weight: 600; color: #1a1a2e; margin-bottom: 0.2rem; }
.gs-step-desc { font-size: 0.78rem; color: #6b7280; margin-bottom: 0.45rem; }
.gs-step-status { font-weight: 600; }
.gs-step-status-ok { color: #16a34a; }
.gs-step-status-partial { color: #d97706; }
.gs-step-status-none { color: #9ca3af; }
.gs-step-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.gs-step-confirmed {
background: #d1fae5 !important;
color: #065f46 !important;
border: 1px solid #86efac !important;
}
.gs-step-confirmed:hover {
background: #bbf7d0 !important;
}
.gs-generate-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding-top: 0.5rem;
border-top: 1px solid #e5e7eb;
}
.gs-generate-btn {
font-size: 0.95rem;
padding: 0.6rem 1.5rem;
}
.gs-generate-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.gs-generate-hint {
font-size: 0.78rem;
color: #9ca3af;
font-style: italic;
}
/* Header cards (Non-UPHS, Interns, Research) */
.gs-header-section {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1rem;
}
.gs-hdr-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0.5rem 0.75rem;
flex: 1 1 200px;
min-width: 160px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.gs-hdr-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #6366f1;
margin-bottom: 0.35rem;
}
.gs-hdr-items { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.gs-hdr-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem; }
.gs-hdr-group-label { font-size: 0.72rem; font-weight: 600; color: #6b7280; }
.gs-hdr-chip {
font-size: 0.76rem;
font-weight: 600;
color: #1a1a2e;
background: #f5f3ff;
border-radius: 4px;
padding: 0.1rem 0.35rem;
}
.gs-hdr-chip-sub { font-size: 0.66rem; color: #7c3aed; }
/* Day container */
.gs-day {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 0.75rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
overflow: hidden;
}
.gs-day-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 0.85rem;
background: #f8f9fb;
border-bottom: 1px solid #e5e7eb;
}
.gs-day-title { font-size: 0.9rem; font-weight: 700; color: #1a1a2e; margin: 0; }
.gs-day-body { padding: 0.6rem 0.85rem; }
/* Section (Clinic / OR) */
.gs-section { margin-bottom: 0.65rem; }
.gs-section:last-child { margin-bottom: 0; }
.gs-section-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #4f46e5;
margin-bottom: 0.3rem;
}
.gs-section-temp .gs-section-label { color: #d97706; }
/* Schedule tables */
.gs-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
margin-bottom: 0.35rem;
}
.gs-table th {
background: #f1f5f9;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
padding: 0.3rem 0.5rem;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.gs-table td {
padding: 0.35rem 0.5rem;
border-bottom: 1px solid #f0f1f3;
vertical-align: middle;
color: #374151;
}
.gs-table tbody tr:last-child td { border-bottom: none; }
.gs-table tbody tr:hover td { background: #f8f9fb; }
.gs-table tbody tr:hover { outline: 2px solid #c084fc; outline-offset: -2px; }
.gs-th-notes { width: 120px; }
.gs-td-attending { font-weight: 600; white-space: nowrap; }
.gs-td-time { white-space: nowrap; color: #6b7280; font-size: 0.76rem; }
.gs-td-count { text-align: center; font-weight: 600; }
.gs-td-loc { font-size: 0.76rem; color: #6b7280; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
/* Coverage chips */
.gs-td-coverage { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.gs-cov-chip {
display: inline-block;
font-size: 0.74rem;
font-weight: 600;
padding: 0.12rem 0.35rem;
border-radius: 4px;
white-space: nowrap;
}
.gs-cov-resident { background: #dbeafe; color: #1e40af; }
.gs-cov-app { background: #fef3c7; color: #92400e; }
.gs-no-cov { color: #d1d5db; }
/* Settings → Attendings: linked APP sub-rows */
.att-app-subrow {
background: #fffbf0;
}
.att-app-subrow:hover {
background: #fef9e7;
}
.att-app-bracket-td {
padding: 0 0 0 0 !important;
}
.att-app-bracket-inner {
display: flex;
align-items: center;
padding-left: 2.2rem;
position: relative;
height: 100%;
}
.att-app-bracket-inner::before {
content: '';
position: absolute;
left: 0.8rem;
top: 0;
height: 60%;
width: 0.7rem;
border-left: 2px solid #d1d5db;
border-bottom: 2px solid #d1d5db;
border-bottom-left-radius: 3px;
}
.att-app-sub-label {
font-size: 0.62rem;
font-weight: 700;
color: #92400e;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 3px;
padding: 1px 5px;
text-transform: uppercase;
}
.att-app-name-td {
min-width: 180px;
}
.att-app-sub-input {
width: 100%;
min-width: 160px;
font-size: 0.78rem;
padding: 2px 4px;
border: 1px solid #d1d5db;
border-radius: 3px;
}
.att-app-op-btn {
font-size: 0.72rem;
padding: 2px 6px;
white-space: nowrap;
}
.att-app-days-td .day-chk-wrap {
display: flex;
gap: 0.3rem;
}
.att-app-del-td {
text-align: center;
}
.att-app-add-row td {
padding: 0.2rem 0.5rem 0.3rem 2.5rem;
}
.att-apps-summary-cell {
white-space: nowrap;
}
.att-apps-toggle {
font-size: 0.72rem;
padding: 2px 6px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.att-apps-toggle-active {
background: #fef3c7;
border-color: #f59e0b;
color: #92400e;
}
/* Notes */
.gs-td-notes { max-width: 140px; }
.gs-notes-text { font-size: 0.76rem; color: #6b7280; min-width: 60px; display: inline-block; min-height: 1.2em; }
.gs-notes-text:hover { background: #eff6ff; border-radius: 3px; }
.gs-notes-input {
width: 100%;
border: 1.5px solid #6366f1;
border-radius: 4px;
padding: 0.15rem 0.3rem;
font-size: 0.76rem;
outline: none;
}
/* Pools row */
.gs-pools {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid #f0f1f3;
}
.gs-pool {
flex: 1 1 140px;
min-width: 120px;
background: #f8f9fb;
border-radius: 6px;
padding: 0.35rem 0.55rem;
}
.gs-pool-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.2rem;
}
.gs-pool-trauma .gs-pool-label { color: #dc2626; }
.gs-pool-postcall .gs-pool-label { color: #d97706; }
.gs-pool-available .gs-pool-label { color: #059669; }
.gs-pool-away .gs-pool-label { color: #b91c1c; }
.gs-pool-research .gs-pool-label { color: #7c3aed; }
.gs-pool-chips { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.gs-pool-chip {
font-size: 0.76rem;
font-weight: 600;
color: #1a1a2e;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 0.1rem 0.35rem;
white-space: nowrap;
}
.gs-pool-chip small { font-weight: 400; color: #9ca3af; margin-left: 0.35rem; }
.gs-pool-empty { font-size: 0.76rem; color: #d1d5db; }
/* Type badges (Clinic / OR) */
.gs-type-badge {
display: inline-block;
padding: 0.1rem 0.45rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
}
.gs-type-clinic { background: #dbeafe; color: #1e3a8a; }
.gs-type-or { background: #fce7f3; color: #9d174d; }
/* PGY-6 coverage chip */
.gs-cov-pgy6 { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
/* Drag-and-drop chips */
.gs-cov-chip[draggable],
.gs-pool-chip[draggable] { cursor: grab; user-select: none; }
.gs-cov-chip.gs-cov-dragging,
.gs-pool-chip.gs-cov-dragging { opacity: 0.35; cursor: grabbing; }
.gs-assignment-row.gs-drop-hover > td { background: #eff6ff !important; outline: 2px dashed #93c5fd; outline-offset: -2px; }
.gs-pool-droptarget.gs-pool-drop-hover { outline: 2px dashed #93c5fd; border-radius: 6px; background: #eff6ff; }
.gs-pool-add-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
border: 1px solid currentColor; background: none;
font-size: 0.75rem; line-height: 1; cursor: pointer;
padding: 0; margin-left: 0.35rem; opacity: 0.6;
vertical-align: middle;
}
.gs-pool-add-btn:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.gs-pool-single-hint { font-size: 0.6rem; font-weight: 400; opacity: 0.6; }
/* Postcall error: more than one resident present */
.gs-pool-postcall-error { background: #fef2f2 !important; border-radius: 6px; outline: 2px solid #fca5a5; }
.gs-pool-postcall-error .gs-pool-label { color: #dc2626 !important; }
/* ── No Assigned Coverage chip ─────────────────────────────────────────── */
.gs-cov-no-cov {
background: #fef2f2 !important;
border: 1.5px solid #ef4444 !important;
color: #b91c1c !important;
font-weight: 700;
}
.gs-cov-no-cov:hover { background: #fee2e2 !important; }
/* NAC palette source (drag-stamp above the pool bar — not a droptarget) */
.gs-nac-source {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 0.3rem;
background: #fafafa;
border: 1px dashed #d1d5db;
border-radius: 6px;
padding: 0.35rem 0.55rem;
}
.gs-nac-source-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #b91c1c;
}
.gs-nac-palette-chip {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.45rem;
background: #fef2f2;
border: 1.5px dashed #ef4444;
color: #b91c1c;
border-radius: 5px;
font-size: 0.73rem;
font-weight: 700;
cursor: grab;
user-select: none;
white-space: nowrap;
}
.gs-nac-palette-chip:hover { background: #fee2e2; }
.gs-nac-palette-chip:active { cursor: grabbing; }
/* ── Finalize button ────────────────────────────────────────────────────────── */
.btn-success {
background: #059669;
color: #fff;
border: 1.5px solid #059669;
}
.btn-success:hover { background: #047857; border-color: #047857; }
.gs-finalize-done { background: #34d399 !important; border-color: #34d399 !important; }
.gs-toolbar-actions { display: flex; gap: 0.5rem; align-items: center; }
/* ── Final schedule badge ────────────────────────────────────────────────────── */
.final-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
background: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
border-radius: 4px;
padding: 0.1rem 0.5rem;
letter-spacing: 0.03em;
}
/* Right-click context menu */
.gs-ctx-menu {
position: fixed;
z-index: 9999;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 7px;
box-shadow: 0 4px 20px rgba(0,0,0,0.13);
padding: 0.3rem 0;
min-width: 150px;
display: none;
}
.gs-ctx-item {
display: block;
width: 100%;
padding: 0.5rem 1rem;
background: none;
border: none;
text-align: left;
font-size: 0.82rem;
cursor: pointer;
color: #374151;
white-space: nowrap;
}
.gs-ctx-item:hover { background: #f3f4f6; }
.gs-ctx-insert-above:hover,
.gs-ctx-insert-below:hover { background: #eff6ff !important; color: #1d4ed8; }
.gs-ctx-delete { color: #dc2626; }
.gs-ctx-delete:hover { background: #fee2e2 !important; color: #b91c1c; }
.gs-ctx-highlight:hover { background: #fefce8 !important; color: #854d0e; }
.gs-ctx-silence:hover { background: #f0fdf4 !important; color: #15803d; }
.gs-ctx-divider { height: 1px; background: #e5e7eb; margin: 0.25rem 0; }
/* Undercovered rows (actual coverage < expected num_coverage) */
.gs-row-undercovered { background: #fdba74 !important; }
.gs-row-undercovered:hover { background: #fdba74 !important; outline: 2px solid #c084fc; outline-offset: -2px; }
/* Manually highlighted coverage cell */
.gs-td-highlighted { background: #fef9c3 !important; }
/* Chip reorder drop indicators */
.gs-chip-drop-before { box-shadow: -3px 0 0 #3b82f6 !important; }
.gs-chip-drop-after { box-shadow: 3px 0 0 #3b82f6 !important; }
/* Temp assignment table */
.gs-table-temp td { font-size: 0.78rem; }
/* Modal */
.gs-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.gs-modal {
background: #fff;
border-radius: 12px;
width: 420px;
max-width: 95vw;
box-shadow: 0 8px 30px rgba(0,0,0,0.18);
overflow: hidden;
}
.gs-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.gs-modal-header h3 { font-size: 0.95rem; margin: 0; }
.gs-modal-close {
background: none;
border: none;
font-size: 1.3rem;
cursor: pointer;
color: #9ca3af;
line-height: 1;
}
.gs-modal-close:hover { color: #374151; }
.gs-modal-body { padding: 0.75rem 1rem; }
.gs-modal-field { margin-bottom: 0.6rem; }
.gs-modal-field label { display: block; font-size: 0.72rem; font-weight: 600; color: #6b7280; margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
.gs-modal-field input,
.gs-modal-field select {
width: 100%;
border: 1.5px solid #d1d5db;
border-radius: 6px;
padding: 0.4rem 0.6rem;
font-size: 0.84rem;
outline: none;
transition: border-color 0.15s;
}
.gs-modal-field input:focus,
.gs-modal-field select:focus { border-color: #6366f1; }
.gs-modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.6rem 1rem;
border-top: 1px solid #e5e7eb;
background: #f8f9fb;
}
/* Color swatches in add-to-pool modal */
.atp-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.25rem;
}
.atp-swatch {
width: 26px;
height: 26px;
border-radius: 5px;
border: 2px solid transparent;
cursor: pointer;
transition: border-color 0.12s, transform 0.1s;
padding: 0;
}
.atp-swatch:hover { border-color: #94a3b8; transform: scale(1.1); }
.atp-swatch-active { border-color: #3b82f6 !important; box-shadow: 0 0 0 1px #3b82f6; }
.atp-swatch-none {
background: #f9fafb;
border: 2px dashed #d1d5db;
font-size: 0.6rem;
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
/* Button extras */
.btn-xs {
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
border-radius: 5px;
}
/* ── New-schedule page (ns-*) ──────────────────────────────────────────────── */
.ns-init-tabs {
display: flex;
gap: 0.5rem;
margin-top: 0.35rem;
flex-wrap: wrap;
}
.ns-init-tab {
padding: 0.45rem 1rem;
border-radius: 6px;
border: 2px solid #e5e7eb;
background: #fff;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ns-init-tab:hover { border-color: #6366f1; color: #4338ca; }
.ns-init-tab-active {
border-color: #6366f1;
background: #eef2ff;
color: #4338ca;
}
.ns-select {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
border: 1.5px solid #e5e7eb;
border-radius: 7px;
font-size: 0.9rem;
background: #fff;
color: #1a1a2e;
margin-top: 0.25rem;
}
.ns-select:focus { border-color: #6366f1; outline: none; }
/* Schedule code badge on list cards */
.schedule-card-code {
font-size: 0.7rem;
font-weight: 700;
font-family: monospace;
background: #eef2ff;
color: #4338ca;
border: 1px solid #c7d2fe;
border-radius: 4px;
padding: 0.1rem 0.45rem;
letter-spacing: 0.05em;
margin-left: 0.25rem;
}
/* ── Vacations (vac-*) ─────────────────────────────────────────────────────── */
.vac-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vac-header-actions { display: flex; gap: 0.5rem; align-items: center; padding-top: 0.25rem; flex-shrink: 0; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.vac-setup-alert a { color: #1d4ed8; }
.vac-setup-alert code { background: #dbeafe; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.82rem; }
.vac-table-wrap {
flex: 1;
min-height: 0;
overflow-x: scroll;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.vac-table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
background: #fff;
table-layout: auto;
}
.vac-th {
background: #1a1a2e;
color: #e5e7eb;
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.5rem 0.55rem;
text-align: left;
white-space: normal;
word-break: break-word;
position: sticky;
top: 0;
z-index: 1;
min-width: 48px;
}
.vac-th-calc { background: #312e81; }
.vac-th-approved { white-space: nowrap; }
.vac-calc-badge {
display: inline-block;
background: #4f46e5;
color: #fff;
border-radius: 4px;
font-size: 0.65rem;
padding: 0 0.25rem;
margin-left: 0.25rem;
vertical-align: middle;
}
.vac-td {
padding: 0.38rem 0.55rem;
border-bottom: 1px solid #f0f1f3;
vertical-align: middle;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
/* Wider columns that benefit from more space */
.vac-td[data-col="Name"],
.vac-td[data-col="Notes"] { max-width: 200px; }
/* Narrow fixed columns */
.vac-td[data-col="Absence Type"],
.vac-td[data-col="Rotation"] { max-width: 110px; }
.vac-td[data-col="Away Start Date"],
.vac-td[data-col="Away End Date"] { max-width: 100px; white-space: nowrap; }
.vac-td-approved { text-align: center; width: 54px; min-width: 54px; max-width: 54px; }
.vac-td-calc { max-width: 70px; text-align: center; background: #f5f3ff; color: #6d28d9; font-weight: 600; font-size: 0.9rem; }
.vac-table tbody tr:last-child .vac-td { border-bottom: none; }
.vac-table tbody tr:hover .vac-td { background: #f8f9fb; }
.vac-td-edit { cursor: pointer; }
.vac-td-edit:hover { background: #eff6ff !important; outline: 1px solid #93c5fd; border-radius: 4px; }
.vac-inline-input {
width: 100%;
min-width: 80px;
border: 1.5px solid #6366f1;
border-radius: 4px;
padding: 0.2rem 0.4rem;
font-size: 0.84rem;
background: #fff;
outline: none;
color: #1a1a2e;
}
.approved-toggle {
border: none;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 700;
width: 2.2rem;
height: 2rem;
cursor: pointer;
transition: background 0.12s, color 0.12s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.approved-y { background: #d1fae5; color: #065f46; }
.approved-y:hover { background: #a7f3d0; }
.approved-x { background: #fee2e2; color: #991b1b; }
.approved-x:hover { background: #fecaca; }
.approved-dash { background: #f3f4f6; color: #9ca3af; }
.approved-dash:hover { background: #e5e7eb; }
.vac-row-count { font-size: 0.78rem; color: #9ca3af; text-align: right; margin-top: 0.25rem; }
.vac-toast {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
padding: 0.6rem 1.25rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
z-index: 999;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.vac-toast-ok { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.vac-toast-err { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
/* ── Chip edit modal ──────────────────────────────────────────────── */
.gs-modal-label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: #374151;
}
.gs-modal-input {
display: block;
width: 100%;
margin-top: 0.25rem;
padding: 0.35rem 0.5rem;
font-size: 0.82rem;
border: 1px solid #d1d5db;
border-radius: 4px;
box-sizing: border-box;
}
.gs-modal-input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
select.gs-modal-input {
cursor: pointer;
}
/* ── Schedule Files pane (sf-*) ──────────────────────────────────────────── */
.sf-header {
display: flex; align-items: flex-start; justify-content: space-between;
margin-bottom: 1rem;
}
.sf-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.sf-sub { margin: 0.2rem 0 0; font-size: 0.85rem; color: #6b7280; }
.sf-upload-btn { cursor: pointer; }
.sf-dropzone {
border: 2px dashed #d1d5db; border-radius: 8px;
padding: 1rem 1.5rem; text-align: center;
font-size: 0.85rem; color: #9ca3af;
margin-bottom: 1rem; transition: border-color 0.15s, background 0.15s;
}
.sf-dropzone-hover {
border-color: #3b82f6; background: #eff6ff; color: #3b82f6;
}
.sf-progress-wrap {
display: flex; align-items: center; gap: 0.75rem;
margin-bottom: 0.75rem;
}
.sf-progress-bar {
flex: 1; height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.sf-progress-fill {
height: 100%; background: #3b82f6; border-radius: 99px;
transition: width 0.2s;
}
.sf-progress-text { font-size: 0.8rem; color: #6b7280; white-space: nowrap; }
.sf-table {
width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.sf-th {
text-align: left; padding: 0.45rem 0.6rem;
border-bottom: 2px solid #e5e7eb;
color: #374151; font-weight: 700;
white-space: nowrap;
}
.sf-th-sort { cursor: pointer; user-select: none; }
.sf-th-sort:hover { color: #3b82f6; }
.sf-sort-icon { font-size: 0.7rem; margin-left: 2px; }
.sf-th-actions { text-align: right; }
.sf-row:hover { background: #f9fafb; }
.sf-td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.sf-td-name { font-weight: 500; }
.sf-td-size, .sf-td-date { color: #6b7280; white-space: nowrap; }
.sf-td-actions {
text-align: right; white-space: nowrap;
display: flex; gap: 0.35rem; justify-content: flex-end; align-items: center;
}
.sf-td-sched { white-space: nowrap; }
.sf-sched-badge {
font-size: 0.72rem; font-weight: 600; color: #1d4ed8;
background: #eff6ff; border: 1px solid #bfdbfe;
border-radius: 4px; padding: 1px 6px;
}
.sf-sched-id {
font-size: 0.7rem; color: #9ca3af; margin-left: 4px;
}
.sf-empty {
padding: 2.5rem; text-align: center; color: #9ca3af; font-size: 0.9rem;
}
/* ── Global Files page (gf-*) ────────────────────────────────────────────── */
.gf-dropzone {
border: 2px dashed #d1d5db; border-radius: 8px;
padding: 1rem 1.5rem; text-align: center;
font-size: 0.85rem; color: #9ca3af;
margin-bottom: 1rem; transition: border-color 0.15s, background 0.15s;
}
.gf-section { margin-bottom: 1rem; }
.gf-section-title {
font-size: 1rem; font-weight: 700; color: #111827;
margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem;
}
.gf-section-count {
font-size: 0.75rem; font-weight: 600; color: #6b7280;
background: #f3f4f6; border-radius: 99px; padding: 1px 8px;
}
.gf-kind-badge {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
border-radius: 4px; padding: 2px 6px;
}
.gf-kind-or { background: #dbeafe; color: #1d4ed8; }
.gf-kind-clinic { background: #dcfce7; color: #15803d; }
.gf-kind-general { background: #f3f4f6; color: #374151; }
/* File ID badge */
.gf-file-id {
display: inline-block;
font-family: 'Courier New', monospace;
font-size: 0.62rem;
color: #9ca3af;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 3px;
padding: 0px 4px;
margin-left: 0.35rem;
letter-spacing: 0.04em;
vertical-align: middle;
}
.gf-fname { vertical-align: middle; }
/* Schedule pill (replaces the old sf-sched-badge) */
.gf-sched-pill {
display: inline-flex;
align-items: stretch;
border-radius: 99px;
overflow: hidden;
font-size: 0.7rem;
font-weight: 600;
border: 1px solid #c7d2fe;
white-space: nowrap;
}
.gf-sched-pill-name {
padding: 0.15rem 0.55rem;
background: #eef2ff;
color: #3730a3;
}
.gf-sched-pill-id {
padding: 0.15rem 0.45rem;
background: #6366f1;
color: #fff;
}
.gf-sched-none { color: #d1d5db; font-size: 0.85rem; }
/* Check column */
.gf-th-check { width: 28px; padding: 0 4px !important; }
.gf-td-check { width: 28px; padding: 0 4px !important; text-align: center; }
.gf-check { cursor: pointer; width: 14px; height: 14px; accent-color: #6366f1; }
/* Actions column */
.gf-th-actions { text-align: right !important; }
.gf-td-actions { text-align: right; white-space: nowrap; }
/* Floating compare bar */
.gf-compare-bar {
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
background: #1e3a5f;
color: #fff;
border-radius: 99px;
padding: 0.55rem 1.1rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
z-index: 900;
min-width: 380px;
max-width: 90vw;
}
.gf-compare-info {
font-size: 0.82rem;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── File Diff page (fd-*) ──────────────────────────────────────────────── */
.fd-cards {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1rem 0;
flex-wrap: wrap;
}
.fd-card {
flex: 1 1 260px;
border-radius: 8px;
padding: 0.85rem 1rem;
border: 1.5px solid;
}
.fd-card-a { border-color: #93c5fd; background: #eff6ff; }
.fd-card-b { border-color: #86efac; background: #f0fdf4; }
.fd-card-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.3rem; }
.fd-card-name { font-size: 0.85rem; font-weight: 700; color: #111827; margin-bottom: 0.3rem; word-break: break-all; }
.fd-card-meta { font-size: 0.78rem; color: #374151; margin-bottom: 0.2rem; }
.fd-card-id { font-family: monospace; font-size: 0.68rem; color: #9ca3af; }
.fd-pill { display: inline-block; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 99px; font-size: 0.68rem; font-weight: 600; padding: 1px 8px; margin-right: 0.35rem; }
.fd-vs { font-size: 1.4rem; font-weight: 700; color: #9ca3af; flex: 0 0 auto; }
.fd-summary {
display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem;
}
.fd-badge {
font-size: 0.72rem; font-weight: 700;
border-radius: 5px; padding: 3px 10px; border: 1px solid transparent;
}
.fd-badge-added { background: #dcfce7; color: #15803d; border-color: #86efac; }
.fd-badge-removed { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.fd-badge-changed { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.fd-badge-same { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.fd-badge-total { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
.fd-filter-bar {
display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.fd-filter-label { font-size: 0.78rem; color: #6b7280; font-weight: 600; margin-right: 0.2rem; }
.fd-filter-btn {
padding: 0.2rem 0.65rem; font-size: 0.76rem;
border: 1px solid #d1d5db; border-radius: 99px;
background: #f9fafb; color: #374151; cursor: pointer;
}
.fd-filter-btn:hover { background: #f3f4f6; }
.fd-filter-btn.fd-filter-active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.fd-table-wrap { overflow-x: auto; }
.fd-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.fd-th {
background: #f3f4f6; color: #374151; font-weight: 700;
padding: 0.45rem 0.65rem; border-bottom: 2px solid #e5e7eb;
text-align: left; white-space: nowrap;
}
.fd-th-num { text-align: right; }
.fd-td { padding: 0.35rem 0.65rem; border-bottom: 1px solid #f0f1f3; vertical-align: middle; }
.fd-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.fd-row-added td { background: #f0fdf4; }
.fd-row-removed td { background: #fef2f2; }
.fd-row-changed td { background: #fefce8; }
.fd-row-same td { background: #fff; }
.fd-chg-pos { color: #15803d; font-weight: 700; }
.fd-chg-neg { color: #b91c1c; font-weight: 700; }
.fd-chg-zero { color: #9ca3af; }
.fd-status-pill { font-size: 0.65rem; font-weight: 700; border-radius: 99px; padding: 2px 8px; }
.fd-status-added { background: #dcfce7; color: #15803d; }
.fd-status-removed { background: #fee2e2; color: #b91c1c; }
.fd-status-changed { background: #fef9c3; color: #854d0e; }
.fd-status-same { background: #f3f4f6; color: #6b7280; }
/* New schedule file tabs */
.ns-file-tabs {
display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.ns-file-tab {
padding: 0.3rem 0.75rem; font-size: 0.82rem;
border: 1px solid #d1d5db; border-radius: 6px;
background: #f9fafb; color: #374151; cursor: pointer;
}
.ns-file-tab-active {
background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; font-weight: 600;
}
.ns-file-input { margin-top: 0.35rem; }
/* ── Error pages (403 / 404 / 500) ─────────────────────────────────────── */
.err-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
gap: 0.75rem;
}
.err-code {
font-size: 6rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: #e2e8f0;
text-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.err-icon {
font-size: 3rem;
line-height: 1;
margin-bottom: 0.25rem;
}
.err-title {
font-size: 1.6rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.err-body {
font-size: 0.97rem;
color: #64748b;
line-height: 1.6;
max-width: 420px;
margin: 0;
}
.err-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5rem;
}
.err-btn { margin-top: 0.5rem; }
/* ── Settings: file-picker field ─────────────────────────────────────────── */
.filepicker-row {
display: flex;
gap: 0.5rem;
align-items: center;
}
.filepicker-path-input {
flex: 1;
min-width: 0;
font-family: monospace;
font-size: 0.85rem;
}
.filepicker-status {
display: block;
font-size: 0.78rem;
margin-top: 0.3rem;
min-height: 1.1em;
}
.filepicker-uploading { color: #6b7280; font-style: italic; }
.filepicker-ok { color: #16a34a; font-weight: 600; }
.filepicker-err { color: #dc2626; font-weight: 600; }
/* ── Settings: env-var display field ────────────────────────────────────── */
.envvar-display {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.65rem;
background: var(--bg-secondary, #f9fafb);
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85rem;
}
.envvar-value { flex: 1; }
.envvar-set { color: #15803d; }
.envvar-missing { color: #9ca3af; font-style: italic; }
.envvar-badge {
display: inline-block;
padding: 0.15rem 0.55rem;
border-radius: 99px;
font-size: 0.72rem;
font-weight: 600;
font-family: inherit;
letter-spacing: 0.02em;
}
.envvar-badge-d1 { background: #dbeafe; color: #1d4ed8; }
.envvar-badge-local { background: #f3f4f6; color: #374151; }
/* ── Landing: calendar FAB + panel ──────────────────────────────────────── */
.cal-fab {
position: fixed;
bottom: 1.6rem;
right: 1.6rem;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
border: none;
background: #1e3a5f;
color: #fff;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.28);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
z-index: 900;
}
.cal-fab:hover { background: #274d80; box-shadow: 0 6px 18px rgba(0,0,0,0.32); }
.cal-fab.cal-fab-open { background: #3b6ea8; transform: scale(1.08); }
.cal-panel {
position: fixed;
bottom: 5.5rem;
right: 1.6rem;
width: 300px;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
padding: 0.75rem;
z-index: 901;
animation: cal-pop 0.14s ease;
}
@keyframes cal-pop {
from { opacity: 0; transform: scale(0.94) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Header */
.cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.55rem;
gap: 0.2rem;
}
.cal-title {
flex: 1;
text-align: center;
font-weight: 700;
font-size: 0.95rem;
color: #1e293b;
white-space: nowrap;
}
.cal-nav {
background: none;
border: 1px solid transparent;
border-radius: 6px;
padding: 0.2rem 0.42rem;
font-size: 1.05rem;
color: #4b5563;
cursor: pointer;
line-height: 1;
transition: background 0.1s, border-color 0.1s;
}
.cal-nav:hover { background: #f1f5f9; border-color: #cbd5e1; }
.cal-nav-yr { font-size: 0.88rem; color: #6b7280; }
/* Day-of-week row */
.cal-dow-row {
display: grid;
grid-template-columns: repeat(7, 34px);
justify-content: space-between;
text-align: center;
font-size: 0.7rem;
font-weight: 700;
color: #6b7280;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
/* Date grid */
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 34px);
grid-auto-rows: 34px;
justify-content: space-between;
align-items: center;
row-gap: 2px;
column-gap: 0;
}
/* Date-picker button cells — scoped under .cal-grid so they don't override
the assignment-grid cells that also use .cal-cell */
.cal-grid .cal-cell {
background: none;
border: none;
outline: none;
border-radius: 50%;
width: 34px;
height: 34px;
min-width: 34px;
min-height: 34px;
max-width: 34px;
max-height: 34px;
padding: 0;
margin: 0;
box-sizing: border-box;
overflow: hidden;
font-size: 0.82rem;
color: #1e293b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.1s;
}
.cal-grid .cal-cell:focus { outline: none; }
.cal-grid .cal-cell:hover { background: #e0e7ff; }
.cal-overflow { color: #b0b8c8; }
.cal-overflow:hover { background: #f1f5f9; }
.cal-weekend { color: #6366f1; }
.cal-today {
background: #1e3a5f !important;
color: #fff !important;
font-weight: 700;
}
.cal-selected {
background: #3b82f6 !important;
color: #fff !important;
font-weight: 700;
}
.cal-today.cal-selected { background: #1d4ed8 !important; }
/* Selected date info */
.cal-info {
min-height: 1.7rem;
margin-top: 0.55rem;
text-align: center;
font-size: 0.88rem;
color: #1e293b;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 7px;
padding: 0.35rem 0.5rem;
}
.cal-info:empty { display: none; }
/* Footer */
.cal-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.55rem;
gap: 0.4rem;
}
.cal-today-btn {
font-size: 0.78rem;
padding: 0.28rem 0.75rem;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #1e3a5f;
cursor: pointer;
font-weight: 600;
transition: background 0.1s;
}
.cal-today-btn:hover { background: #e2e8f0; }
.cal-jump {
display: flex;
gap: 0.3rem;
align-items: center;
flex: 1;
justify-content: flex-end;
}
.cal-jump-input {
width: 6.8rem;
font-size: 0.76rem;
padding: 0.25rem 0.4rem;
border: 1px solid #cbd5e1;
border-radius: 5px;
outline: none;
transition: border-color 0.15s;
}
.cal-jump-input:focus { border-color: #3b82f6; }
.cal-jump-input.cal-jump-err { border-color: #ef4444; animation: cal-shake 0.25s; }
@keyframes cal-shake {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.cal-jump-go {
font-size: 0.76rem;
padding: 0.25rem 0.55rem;
background: #1e3a5f;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: background 0.1s;
}
.cal-jump-go:hover { background: #274d80; }
/* ═══════════════════════════════════════════════════════════════════════════
Authentication — login page, navbar user badge, role badges, user mgmt
═══════════════════════════════════════════════════════════════════════════ */
/* ── Navbar user info ─────────────────────────────────────────────────────── */
.navbar-user {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.navbar-username {
font-size: 0.85rem;
color: rgba(255,255,255,0.85);
font-weight: 500;
}
.navbar-logout {
font-size: 0.78rem;
padding: 0.25rem 0.65rem;
background: rgba(255,255,255,0.15);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 5px;
cursor: pointer;
transition: background 0.15s;
}
.navbar-logout:hover { background: rgba(255,255,255,0.25); }
/* ── Role badges (used in navbar + user table) ────────────────────────────── */
.role-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
padding: 0.18rem 0.5rem;
border-radius: 99px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.role-admin { background: #fef3c7; color: #92400e; }
.role-scheduler { background: #dbeafe; color: #1e40af; }
.role-inspector { background: #d1fae5; color: #065f46; }
.role-viewer { background: #f3f4f6; color: #4b5563; }
/* ── Role permissions table ───────────────────────────────────────────────── */
.perm-yes { text-align: center; color: #16a34a; font-size: 1rem; font-weight: 700; }
.perm-no { text-align: center; color: #d1d5db; font-size: 1rem; }
.badge-self {
font-size: 0.7rem;
color: #6b7280;
font-style: italic;
}
/* ── Login page ───────────────────────────────────────────────────────────── */
.auth-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 120px);
padding: 2rem 1rem;
}
.auth-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 2.5rem 2rem;
width: 100%;
max-width: 380px;
box-shadow: 0 4px 24px rgba(0,0,0,0.07);
text-align: center;
}
.auth-logo { font-size: 2.5rem; margin-bottom: 0.5rem; }
.auth-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.2rem; color: #111827; }
.auth-subtitle { font-size: 0.9rem; color: #6b7280; margin: 0 0 1.5rem; }
.auth-field { text-align: left; margin-bottom: 1rem; }
.auth-label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.3rem;
}
.auth-input {
width: 100%;
padding: 0.55rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.95rem;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.auth-remember {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #4b5563;
margin-bottom: 1.25rem;
text-align: left;
}
.auth-submit { width: 100%; padding: 0.65rem; font-size: 0.95rem; }
/* ── User management page ─────────────────────────────────────────────────── */
.users-table { width: 100%; }
.users-table td, .users-table th { vertical-align: middle; text-align: left; }
.users-created { color: #6b7280; font-size: 0.85rem; }
.users-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.users-role-select {
padding: 0.3rem 0.5rem;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 0.8rem;
cursor: pointer;
}
.users-add-form { }
.users-add-row {
display: flex;
gap: 0.75rem;
align-items: flex-end;
flex-wrap: wrap;
}
.users-add-field { display: flex; flex-direction: column; min-width: 140px; }
.users-add-label { font-size: 0.8rem; font-weight: 600; color: #374151; margin-bottom: 0.3rem; }
.users-add-input {
padding: 0.45rem 0.65rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.88rem;
}
.users-add-submit { min-width: auto; }
/* Password show/hide */
.pw-wrap {
position: relative;
display: flex;
align-items: center;
}
.pw-wrap .users-add-input {
flex: 1;
padding-right: 3.2rem;
}
.pw-toggle {
position: absolute;
right: 0.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
padding: 0.2rem 0.3rem;
line-height: 1;
}
.pw-toggle:hover { color: #374151; }
.pw-match-error {
font-size: 0.75rem;
color: #dc2626;
margin-top: 0.25rem;
}
/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-backdrop {
display: none; /* hidden by default — class toggle shows it */
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-backdrop.is-open {
display: flex; /* JS adds this class to reveal the modal */
}
.modal-box {
background: #fff;
border-radius: 10px;
padding: 1.75rem 1.5rem;
width: 100%;
max-width: 420px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.modal-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }
.modal-desc { font-size: 0.9rem; color: #4b5563; margin: 0 0 1rem; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
/* ── Generic page header ──────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.5rem; }
.page-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.4rem; }
.page-desc { font-size: 0.88rem; color: #4b5563; margin: 0; }
/* ── card helpers ─────────────────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem 1.5rem; }
.card-title { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
|