/* Practice Portal — dark theme & animated cards */

.practice-layout { background: #0f172a; min-height: 100vh; }
.practice-layout .sidebar { background: #1e293b; border-color: #334155; }
.practice-layout .sidebar-brand-text { color: #fff; }
.practice-layout .sidebar-brand-sub { color: #94a3b8; }
.practice-layout .sidebar-link { color: #94a3b8; }
.practice-layout .sidebar-link:hover { background: #334155; color: #f1f5f9; }
.practice-layout .sidebar-link.active {
    background: rgba(13, 148, 136, 0.18); color: #2dd4bf;
    box-shadow: inset 3px 0 0 #14b8a6;
}
.practice-layout .sidebar-section-label {
    color: #64748b;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
.practice-layout .sidebar-footer {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
    padding: 0.75rem; border-top: 1px solid #334155;
}
.practice-layout .sidebar-footer .sidebar-logout-btn { width: auto; flex: 0 0 auto; align-self: flex-start; }
.practice-layout .sidebar-user-name { color: #f1f5f9; }
.practice-layout .sidebar-user-role { color: #94a3b8; }
.practice-layout .sidebar-user-practice-type { color: #2dd4bf; }

/* Doctor specialty workspace */
.doctor-workspace-grid {
    display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 1rem; align-items: start;
}
.doctor-quick-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin: 0 0 1rem;
}
.doctor-spec-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doctor-spec-chip {
    padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569;
    background: #334155; color: #e2e8f0; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.doctor-spec-chip:hover { border-color: #2dd4bf; color: #2dd4bf; }
.doctor-specialty-shell {
    display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; min-height: 28rem;
}
.doctor-specialty-nav {
    display: flex; flex-direction: column; gap: 0.375rem;
}
.doctor-specialty-nav-btn {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.625rem 0.75rem; border-radius: 0.5rem; border: 1px solid #334155;
    background: #1e293b; color: #94a3b8; font-size: 0.8125rem; font-weight: 600;
    cursor: pointer; text-align: left;
}
.doctor-specialty-nav-btn:hover { border-color: #475569; color: #e2e8f0; }
.doctor-specialty-nav-btn.active {
    background: rgba(13, 148, 136, 0.15); border-color: #14b8a6; color: #2dd4bf;
}
.doctor-specialty-nav-icon { font-size: 1rem; }
.doctor-specialty-main {
    background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; padding: 1rem 1.125rem;
}
.doctor-specialty-header {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #334155;
}
.doctor-specialty-header h3 { margin: 0 0 0.25rem; color: #f1f5f9; font-size: 1.05rem; }
.doctor-specialty-header p { margin: 0; color: #94a3b8; font-size: 0.8125rem; }
.doctor-specialty-patient-pick { position: relative; min-width: 16rem; flex: 1; max-width: 22rem; }
.doctor-feature-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; margin-bottom: 1rem;
}
.doctor-feature-card {
    display: block; width: 100%; text-align: left; font-family: inherit;
    padding: 0.75rem; background: #0f172a; border: 1px solid #334155; border-radius: 0.5rem;
    color: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.doctor-feature-card:hover {
    border-color: #14b8a6; transform: translateY(-1px);
}
.doctor-feature-title { font-size: 0.8125rem; font-weight: 700; color: #e2e8f0; margin-bottom: 0.25rem; }
.doctor-feature-desc { font-size: 0.75rem; color: #94a3b8; line-height: 1.35; }
.doctor-specialty-panel { margin-bottom: 1rem; }
.doctor-history-list { margin: 0; padding-left: 1.1rem; color: #e2e8f0; font-size: 0.875rem; }
.doctor-history-list li { margin-bottom: 0.5rem; }

.soap-consult-view { color: #e2e8f0; }
.soap-meta-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem; margin-bottom: 1rem;
}
.soap-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;
}
.soap-block {
    border-radius: 0.75rem; padding: 0.85rem 1rem;
    border: 1px solid #334155; background: #0f172a;
}
.soap-block h4 {
    margin: 0 0 0.65rem; font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.soap-s { border-color: rgba(56, 189, 248, 0.35); }
.soap-s h4 { color: #7dd3fc; }
.soap-o { border-color: rgba(52, 211, 153, 0.35); }
.soap-o h4 { color: #6ee7b7; }
.soap-a { border-color: rgba(251, 191, 36, 0.35); }
.soap-a h4 { color: #fcd34d; }
.soap-p { border-color: rgba(167, 139, 250, 0.35); }
.soap-p h4 { color: #c4b5fd; }
.soap-follow-actions {
    margin: 0.5rem 0 1rem; padding: 0.85rem 1rem;
    border-radius: 0.75rem; border: 1px solid rgba(45, 212, 191, 0.3);
    background: rgba(13, 148, 136, 0.08);
}
.soap-follow-actions h4 {
    margin: 0 0 0.55rem; font-size: 0.875rem; color: #5eead4;
}
@media (max-width: 900px) {
    .soap-grid { grid-template-columns: 1fr; }
}
.dental-chart-grid {
    display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 0.25rem;
}
.dental-tooth {
    padding: 0.35rem 0; font-size: 0.6875rem; font-weight: 700; border-radius: 0.375rem;
    border: 1px solid #475569; background: #334155; color: #e2e8f0; cursor: pointer;
}
.dental-tooth:hover { border-color: #2dd4bf; }
.dental-tooth.selected { background: rgba(13, 148, 136, 0.25); border-color: #14b8a6; color: #2dd4bf; }
.dental-history-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.dental-history-chip {
    font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px;
    background: rgba(96, 165, 250, 0.12); color: #93c5fd; border: 1px solid rgba(96, 165, 250, 0.25);
}
@media (max-width: 960px) {
    .doctor-workspace-grid, .doctor-specialty-shell { grid-template-columns: 1fr; }
    .dental-chart-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.practice-layout .main-content { background: #0f172a; }
.practice-layout .topbar { background: #1e293b; border-color: #334155; }
.practice-layout .topbar-title { color: #f8fafc; }
.practice-layout .topbar-subtitle { color: #94a3b8; }
.practice-layout .page-content { color: #e2e8f0; }

.practice-layout .card {
    background: #1e293b; border: 1px solid #334155;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: practiceCardIn 0.45s ease backwards;
}
.practice-layout .card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.practice-layout .card-header { border-color: #334155; }
.practice-layout .card-header h3 { color: #f8fafc; }

.practice-layout .stat-card {
    position: relative; overflow: hidden;
    background: #1e293b; border: 1px solid #334155;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: practiceCardIn 0.5s ease backwards;
}
.practice-layout .stat-card:nth-child(1) { animation-delay: 0.04s; }
.practice-layout .stat-card:nth-child(2) { animation-delay: 0.08s; }
.practice-layout .stat-card:nth-child(3) { animation-delay: 0.12s; }
.practice-layout .stat-card:nth-child(4) { animation-delay: 0.16s; }
.practice-layout .stat-card:nth-child(5) { animation-delay: 0.2s; }
.practice-layout .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}
.practice-layout .stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 0.75rem 0.75rem 0 0;
}
.practice-layout .stat-card-teal::before { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.practice-layout .stat-card-blue::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.practice-layout .stat-card-green::before { background: linear-gradient(90deg, #16a34a, #4ade80); }
.practice-layout .stat-card-orange::before { background: linear-gradient(90deg, #ea580c, #fb923c); }
.practice-layout .stat-card-red::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.practice-layout .stat-card-purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.practice-layout .stat-label { color: #94a3b8; }
.practice-layout .stat-value { color: #f8fafc; }
.practice-layout .stat-icon-teal { background: rgba(13, 148, 136, 0.2); color: #2dd4bf; }
.practice-layout .stat-icon-blue { background: rgba(37, 99, 235, 0.2); color: #60a5fa; }
.practice-layout .stat-icon-green { background: rgba(22, 163, 74, 0.2); color: #4ade80; }
.practice-layout .stat-icon-orange { background: rgba(234, 88, 12, 0.2); color: #fb923c; }
.practice-layout .stat-icon-red { background: rgba(220, 38, 38, 0.2); color: #f87171; }
.practice-layout .stat-icon-purple { background: rgba(124, 58, 237, 0.2); color: #a78bfa; }

.practice-layout .data-table thead { background: #334155; }
.practice-layout .data-table th { color: #94a3b8; border-color: #475569; }
.practice-layout .data-table td { color: #e2e8f0; border-color: #334155; }
.practice-layout .data-table tbody tr:hover { background: rgba(51, 65, 85, 0.6); }

.practice-layout .input, .practice-layout .select {
    background: #334155; border-color: #475569; color: #f8fafc;
}
.practice-layout .input:focus, .practice-layout .select:focus {
    border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}
.practice-layout textarea.input { min-height: 4rem; resize: vertical; font-family: inherit; }
.practice-layout .label { color: #cbd5e1; }
.practice-layout .btn-ghost { color: #94a3b8; }
.practice-layout .btn-ghost:hover { background: #334155; color: #f1f5f9; }
.practice-layout .btn-secondary { background: #334155; border-color: #475569; color: #e2e8f0; }

.practice-layout .empty-state { color: #94a3b8; }
.practice-layout .empty-state-title { color: #e2e8f0; }
.practice-layout .login-error {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(248, 113, 113, 0.25);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

/* Status badges — dark theme */
.practice-layout .badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    white-space: nowrap;
}
.practice-layout .badge-booked { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.practice-layout .badge-confirmed { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
.practice-layout .badge-arrived { background: rgba(234, 179, 8, 0.15); color: #fde047; }
.practice-layout .badge-waiting { background: rgba(249, 115, 22, 0.15); color: #fdba74; }
.practice-layout .badge-in_consultation { background: rgba(13, 148, 136, 0.15); color: #5eead4; }
.practice-layout .badge-completed { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.practice-layout .badge-cancelled { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.practice-layout .badge-no_show { background: rgba(100, 116, 139, 0.2); color: #cbd5e1; }
.practice-layout .badge-paid { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.practice-layout .badge-partial { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
.practice-layout .badge-sent { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.practice-layout .badge-draft { background: rgba(100, 116, 139, 0.2); color: #cbd5e1; }
.practice-layout .badge-overdue { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.practice-layout .badge-not_submitted { background: rgba(100, 116, 139, 0.2); color: #cbd5e1; }
.practice-layout .badge-submitted { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.practice-layout .badge-approved { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.practice-layout .badge-rejected { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.practice-layout .badge-active { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.practice-layout .badge-suspended { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.practice-layout .badge-pending { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.practice-layout .badge-reminded { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }

.practice-layout .search-box input { background: #334155; border-color: #475569; color: #f8fafc; }
.practice-layout .search-dropdown {
    background: #1e293b; border-color: #334155;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.practice-layout .search-result:hover { background: #334155; }
.practice-layout .search-result-name { color: #f1f5f9; }
.practice-layout .search-result-meta { color: #94a3b8; }

.practice-layout .appt-item {
    background: #334155; border: 1px solid #475569;
    transition: background 0.15s, transform 0.15s;
}
.practice-layout .appt-item:hover { background: #3f4f63; transform: translateX(2px); }
.practice-layout .appt-patient { color: #f1f5f9; }
.practice-layout .appt-meta { color: #94a3b8; }

.practice-layout .queue-item {
    background: #1e293b; border-color: #334155;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: practiceCardIn 0.4s ease backwards;
}
.practice-layout .queue-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.practice-layout .queue-item.waiting { border-left-color: #fb923c; }

.practice-layout .quick-action {
    background: #334155; border: 2px dashed #475569; color: #e2e8f0;
    transition: all 0.2s ease;
}
.practice-layout .quick-action:hover {
    border-color: #2dd4bf; background: rgba(13, 148, 136, 0.12);
    transform: translateY(-3px); box-shadow: 0 8px 20px rgba(13, 148, 136, 0.15);
}

/* Override grid for rich cards in practice layout */
.practice-layout .quick-actions {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.85rem;
}

/* Rich coloured + animated quick-action cards */
@keyframes qaFadeUp {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.practice-layout .quick-action-rich {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 0.55rem; padding: 1.1rem 0.75rem 0.9rem;
    border-radius: 0.85rem; cursor: pointer; overflow: hidden;
    border-style: solid !important; border-width: 1.5px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    animation: qaFadeUp 0.45s ease both;
}
.practice-layout .quick-action-rich::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.practice-layout .quick-action-rich:hover {
    transform: translateY(-4px) scale(1.04);
    filter: brightness(1.12);
}
.practice-layout .quick-action-rich:active {
    transform: translateY(-1px) scale(1.01);
}
.practice-layout .quick-action-icon-wrap {
    font-size: 1.55rem; width: 2.6rem; height: 2.6rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.6rem;
    transition: transform 0.2s ease;
}
.practice-layout .quick-action-rich:hover .quick-action-icon-wrap {
    transform: scale(1.15) rotate(-4deg);
}
.practice-layout .quick-action-rich .quick-action-label {
    font-size: 0.78rem; font-weight: 600; color: #f1f5f9;
    text-align: center; letter-spacing: 0.01em;
}
.practice-layout .quick-action-arrow {
    font-size: 0.95rem; opacity: 0; transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    position: absolute; bottom: 0.45rem; right: 0.6rem;
}
.practice-layout .quick-action-rich:hover .quick-action-arrow {
    opacity: 1; transform: translateX(0);
}

.practice-layout .sidebar-logout-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    width: auto; min-width: 0; max-width: 100%; align-self: flex-start;
    margin-top: 0; padding: 0.375rem 0.75rem;
    background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 0.5rem; color: #fca5a5; font-size: 0.75rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; white-space: nowrap; flex: 0 0 auto;
    box-sizing: border-box; font-family: inherit; line-height: 1.25;
}
.practice-layout .sidebar-logout-btn svg {
    width: 0.875rem; height: 0.875rem; min-width: 0.875rem; min-height: 0.875rem;
    max-width: 0.875rem; max-height: 0.875rem;
    flex-shrink: 0; display: block;
}
.practice-layout .sidebar-logout-btn span { flex: 0 0 auto; line-height: 1.25; }
.practice-layout .sidebar-logout-btn:hover {
    background: rgba(220, 38, 38, 0.2); color: #fecaca;
}
.practice-layout .topbar-logout-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    width: auto; min-width: 0; max-width: 100%;
    padding: 0.375rem 0.75rem; background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.25); border-radius: 0.5rem;
    color: #fca5a5; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
    white-space: nowrap; flex: 0 0 auto; box-sizing: border-box;
    font-family: inherit; line-height: 1.25;
}
.practice-layout .topbar-logout-btn svg {
    width: 0.875rem; height: 0.875rem; min-width: 0.875rem; min-height: 0.875rem;
    max-width: 0.875rem; max-height: 0.875rem; flex-shrink: 0; display: block;
}
.practice-layout .topbar-logout-btn span { flex: 0 0 auto; line-height: 1.25; }
.practice-layout .topbar-logout-btn:hover { background: rgba(220, 38, 38, 0.2); color: #fecaca; }

/* Module tiles */
.practice-module-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.practice-module-card {
    padding: 1.25rem; background: #334155; border: 1px solid #475569;
    border-radius: 0.75rem; cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
    animation: practiceCardIn 0.45s ease backwards;
    position: relative; overflow: hidden;
}
.practice-module-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.practice-module-card:nth-child(1) { animation-delay: 0.05s; }
.practice-module-card:nth-child(2) { animation-delay: 0.1s; }
.practice-module-card:nth-child(3) { animation-delay: 0.15s; }
.practice-module-card:nth-child(4) { animation-delay: 0.2s; }
.practice-module-card:nth-child(5) { animation-delay: 0.25s; }
.practice-module-card:nth-child(6) { animation-delay: 0.3s; }
.practice-module-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    border-color: #64748b;
}
.practice-module-card-teal::before { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.practice-module-card-blue::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.practice-module-card-purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.practice-module-card-orange::before { background: linear-gradient(90deg, #ea580c, #fb923c); }
.practice-module-card-pink::before { background: linear-gradient(90deg, #db2777, #f472b6); }
.practice-module-card-green::before { background: linear-gradient(90deg, #16a34a, #4ade80); }
.practice-module-icon { font-size: 1.75rem; margin-bottom: 0.625rem; }
.practice-module-title { font-weight: 600; color: #f8fafc; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.practice-module-desc { font-size: 0.8125rem; color: #94a3b8; line-height: 1.4; }

.practice-tabs {
    display: flex; gap: 0.25rem; margin-bottom: 1.25rem; flex-wrap: wrap;
    border-bottom: 1px solid #334155; padding-bottom: 0.5rem;
}
.practice-tab {
    padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500;
    color: #94a3b8; background: transparent; border: none; cursor: pointer;
    transition: all 0.15s;
}
.practice-tab:hover { color: #e2e8f0; background: #334155; }
.practice-tab.active { color: #2dd4bf; background: rgba(13, 148, 136, 0.15); }

.practice-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.practice-dashboard-grid-single { grid-template-columns: 1fr; }
.practice-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.practice-layout ::-webkit-scrollbar-thumb { background: #475569; }

@keyframes practiceCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .practice-dashboard-grid, .practice-admin-grid { grid-template-columns: 1fr; }
}

/* Dark modals (shared with admin) */
.modal-dark .modal { background: #1e293b; border: 1px solid #334155; color: #f1f5f9; }
.modal-dark .modal-header { border-color: #334155; }
.modal-dark .modal-header h3 { color: #fff; }
.modal-dark .modal-body { color: #e2e8f0; max-height: calc(100vh - 8rem); overflow-y: auto; }
.modal-dark .label { color: #cbd5e1; }
.modal-dark .input, .modal-dark .select { background: #334155; border-color: #475569; color: #fff; }
.modal-dark .input:focus, .modal-dark .select:focus { border-color: #2dd4bf; }
.modal-dark .input-invalid { border-color: #f87171 !important; }
.modal-dark p { color: #cbd5e1; }
.modal-dark .btn-secondary { background: #334155; border-color: #475569; color: #e2e8f0; }
.modal-dark .data-table thead { background: #334155; }
.modal-dark .data-table th { color: #94a3b8; border-color: #475569; }
.modal-dark .data-table td { color: #e2e8f0; border-color: #334155; }
.modal-dark .data-table tbody tr:hover { background: rgba(51, 65, 85, 0.5); }

/* Patient registration panels */
.form-panel {
    background: #334155; border: 1px solid #475569; border-radius: 0.75rem;
    padding: 1rem 1.125rem; margin-bottom: 1rem;
}
.form-panel-title {
    font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #2dd4bf; margin: 0 0 0.875rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid #475569;
}
.form-panel .form-group:last-child { margin-bottom: 0; }
.form-field-readonly {
    background: #1e293b !important; color: #94a3b8 !important; cursor: not-allowed;
}
.form-hint { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; line-height: 1.4; }
.form-hint-error { color: #fca5a5 !important; }
.form-hint-success { color: #4ade80 !important; }
.modal-dark .form-hint { color: #94a3b8; }
.modal-dark .form-hint-error { color: #fca5a5; }
.modal-dark .form-hint-success { color: #4ade80; }

.input-group { position: relative; }
.input-group-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: #64748b; pointer-events: none; font-size: 0.875rem;
}
.input-group .input { padding-left: 2.25rem; }
.input-invalid { border-color: #f87171 !important; box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15) !important; }

.multi-select { position: relative; }
.multi-select-dropdown { position: relative; }
.multi-select-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.75rem; background: #334155; border: 1px solid #475569;
    border-radius: 0.5rem; color: #e2e8f0; font-size: 0.875rem; cursor: pointer;
}
.multi-select-toggle:hover { border-color: #64748b; }
.multi-select-chevron { color: #94a3b8; font-size: 0.75rem; }
.multi-select-menu {
    position: absolute; z-index: 60; left: 0; right: 0; margin-top: 0.25rem;
    max-height: 12rem; overflow-y: auto; background: #1e293b; border: 1px solid #475569;
    border-radius: 0.5rem; box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 0.375rem;
}
.multi-select-option {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.375rem 0.5rem;
    border-radius: 0.375rem; font-size: 0.8125rem; color: #e2e8f0; cursor: pointer;
}
.multi-select-option:hover { background: #334155; }
.multi-select-option input { margin-top: 0.15rem; accent-color: #14b8a6; }
.multi-select-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.multi-select-tag {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.75rem; padding: 0.2rem 0.35rem 0.2rem 0.5rem; background: rgba(13,148,136,0.15);
    color: #2dd4bf; border-radius: 9999px; border: 1px solid rgba(45,212,191,0.25);
}
.multi-select-tag-label { line-height: 1.3; }
.multi-select-tag-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.125rem; height: 1.125rem; padding: 0; border: none; border-radius: 9999px;
    background: transparent; color: #2dd4bf; font-size: 0.9375rem; line-height: 1;
    cursor: pointer; opacity: 0.75; flex-shrink: 0;
}
.multi-select-tag-remove:hover { opacity: 1; background: rgba(45,212,191,0.25); color: #fff; }
.multi-select-other { margin-top: 0.5rem; font-size: 0.875rem; }

.payment-type-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.5rem; margin-bottom: 0.75rem;
}
.payment-type-chip { cursor: pointer; margin: 0; }
.payment-type-chip input { position: absolute; opacity: 0; pointer-events: none; }
.payment-type-chip-body {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.25rem; padding: 0.625rem 0.5rem; min-height: 4.25rem;
    background: #1e293b; border: 2px solid #475569; border-radius: 0.625rem;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.payment-type-chip:hover .payment-type-chip-body { border-color: #64748b; }
.payment-type-chip.is-selected .payment-type-chip-body {
    border-color: #14b8a6; background: rgba(13, 148, 136, 0.12);
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.25);
}
.payment-type-icon { font-size: 1.25rem; line-height: 1; }
.payment-type-label { font-size: 0.75rem; font-weight: 600; color: #e2e8f0; text-align: center; line-height: 1.2; }
.payment-type-panels { margin-top: 0.25rem; }
.payment-type-panel { animation: paymentPanelIn 0.2s ease; }
.payment-type-info {
    padding: 0.875rem 1rem; background: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(45, 212, 191, 0.2); border-radius: 0.5rem;
    font-size: 0.8125rem; color: #94a3b8; line-height: 1.5;
}
@keyframes paymentPanelIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reception queue */
.reception-module { min-height: 20rem; }
.reception-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.reception-stats { flex: 1; min-width: 16rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.reception-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.reception-panel { margin-top: 0.5rem; }
.reception-frontdesk-hero {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem; padding: 1rem 1.15rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.16), rgba(13, 148, 136, 0.12));
    border: 1px solid rgba(251, 146, 60, 0.3);
}
.reception-frontdesk-hero h3 { margin: 0 0 0.35rem; color: #f8fafc; font-size: 1.1rem; }
.reception-frontdesk-hero p { margin: 0; color: #cbd5e1; font-size: 0.875rem; max-width: 36rem; }
.reception-frontdesk-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: flex-start; }
.reception-chip {
    display: inline-flex; align-items: center;
    padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    background: rgba(15, 23, 42, 0.55); border: 1px solid #475569; color: #e2e8f0;
}
.reception-chip-warn {
    border-color: rgba(251, 146, 60, 0.45); color: #fdba74;
}
.reception-reg-search { position: relative; max-width: 28rem; }
.stat-card-pink { border-color: rgba(244, 114, 182, 0.35); }
.stat-icon-pink { background: rgba(244, 114, 182, 0.15); color: #f9a8d4; }
.reception-kanban {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.reception-column {
    background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem;
    min-height: 18rem; display: flex; flex-direction: column;
}
.reception-column-head {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
    border-bottom: 1px solid #334155; font-weight: 600; color: #f1f5f9;
}
.reception-column-icon { font-size: 1rem; }
.reception-column-title { flex: 1; font-size: 0.875rem; }
.reception-column-count {
    font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px;
    background: #334155; color: #94a3b8;
}
.reception-column-arrived .reception-column-head { border-top: 3px solid #60a5fa; border-radius: 0.75rem 0.75rem 0 0; }
.reception-column-waiting .reception-column-head { border-top: 3px solid #fb923c; border-radius: 0.75rem 0.75rem 0 0; }
.reception-column-in_consultation .reception-column-head { border-top: 3px solid #2dd4bf; border-radius: 0.75rem 0.75rem 0 0; }
.reception-column-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }
.reception-column-empty {
    color: #64748b; font-size: 0.8125rem; text-align: center; padding: 2rem 0.5rem;
}
.reception-card {
    background: #334155; border: 1px solid #475569; border-radius: 0.625rem;
    padding: 0.75rem; animation: practiceCardIn 0.35s ease backwards;
}
.reception-card-waiting { border-left: 3px solid #fb923c; }
.reception-card-top { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; flex-wrap: wrap; }
.reception-card-time { font-family: monospace; font-size: 0.8125rem; color: #94a3b8; }
.reception-wait-badge {
    font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 9999px;
    background: rgba(249, 115, 22, 0.15); color: #fdba74; animation: pulse 2s infinite;
}
.reception-source-badge {
    font-size: 0.6875rem; padding: 0.125rem 0.375rem; border-radius: 9999px;
    background: rgba(96, 165, 250, 0.12); color: #93c5fd;
}
.reception-card-name { font-weight: 600; color: #f1f5f9; font-size: 0.9375rem; line-height: 1.3; }
.reception-card-number { font-weight: 400; color: #64748b; font-size: 0.8125rem; }
.reception-card-meta { font-size: 0.8125rem; color: #94a3b8; margin-top: 0.2rem; line-height: 1.35; }
.reception-card-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
.reception-arrivals-list { display: flex; flex-direction: column; gap: 0.5rem; }
.reception-arrival-row {
    display: flex; align-items: center; gap: 1rem; padding: 0.75rem;
    background: #334155; border: 1px solid #475569; border-radius: 0.625rem;
}
.reception-arrival-time { font-family: monospace; color: #94a3b8; width: 4.5rem; flex-shrink: 0; }
.reception-arrival-info { flex: 1; min-width: 0; }
.reception-arrival-name { font-weight: 600; color: #f1f5f9; }
.reception-arrival-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; flex-shrink: 0; }
.reception-kiosk {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1rem; align-items: start;
}
.reception-kiosk-screen {
    background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; padding: 1.5rem;
}
.reception-kiosk-header { text-align: center; margin-bottom: 1.25rem; }
.reception-kiosk-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.reception-kiosk-header h3 { margin: 0 0 0.375rem; color: #f1f5f9; }
.reception-kiosk-header p { margin: 0; color: #94a3b8; font-size: 0.875rem; }
.reception-kiosk-form { max-width: 22rem; margin: 0 auto; }
.reception-kiosk-or { text-align: center; color: #64748b; font-size: 0.8125rem; margin: 0.5rem 0; }
.input-lg { padding: 0.75rem 1rem; font-size: 1rem; }
.btn-lg { padding: 0.75rem 1.25rem; font-size: 1rem; width: 100%; }
.reception-kiosk-submit { margin-top: 0.5rem; }
.reception-kiosk-result {
    margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; text-align: center;
}
.reception-kiosk-success { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.25); }
.reception-kiosk-error { background: rgba(220, 38, 38, 0.12); color: #fca5a5; border: 1px solid rgba(220, 38, 38, 0.25); }
.reception-kiosk-tips { margin: 0; padding-left: 1.125rem; color: #94a3b8; font-size: 0.8125rem; line-height: 1.6; }
.reception-kiosk-tips li { margin-bottom: 0.375rem; }
.reception-kiosk-screen.reception-kiosk-fullscreen {
    position: fixed; inset: 0; z-index: 80;
    display: flex; flex-direction: column; justify-content: center;
    border-radius: 0; border: none;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #134e4a 100%);
    padding: 2rem;
}
.reception-kiosk-exit {
    position: absolute; top: 1rem; right: 1rem;
}
@media (max-width: 960px) {
    .reception-kanban { grid-template-columns: 1fr; }
    .reception-kiosk { grid-template-columns: 1fr; }
    .reception-arrival-row { flex-direction: column; align-items: flex-start; }
    .reception-arrival-actions { width: 100%; }
}

/* Modern date picker */
.date-picker { position: relative; }
.date-picker-trigger {
    display: flex; align-items: center; gap: 0.625rem; width: 100%;
    padding: 0.625rem 0.875rem; background: #0f172a; border: 1px solid #475569;
    border-radius: 0.5rem; color: #f1f5f9; font-size: 0.875rem; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.date-picker-trigger:hover { border-color: #64748b; }
.date-picker-icon { font-size: 1rem; opacity: 0.85; }
.date-picker-label { flex: 1; text-align: left; }
.date-picker-chevron { color: #64748b; font-size: 0.75rem; }
.date-picker-popup {
    position: absolute; z-index: 70; left: 0; right: 0; margin-top: 0.375rem;
    background: #1e293b; border: 1px solid #475569; border-radius: 0.625rem;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5); padding: 0.75rem;
}
.date-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.625rem; color: #f1f5f9; font-weight: 600; font-size: 0.875rem;
}
.date-picker-nav {
    width: 2rem; height: 2rem; border: none; border-radius: 0.375rem;
    background: #334155; color: #e2e8f0; cursor: pointer; font-size: 1.125rem;
}
.date-picker-nav:hover { background: #475569; }
.date-picker-days {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem;
}
.date-picker-dow {
    font-size: 0.6875rem; color: #64748b; text-align: center; padding: 0.25rem 0;
    font-weight: 600; text-transform: uppercase;
}
.date-picker-day {
    aspect-ratio: 1; border: none; border-radius: 0.375rem; background: transparent;
    color: #e2e8f0; font-size: 0.8125rem; cursor: pointer;
}
.date-picker-day:hover:not(.disabled):not(.empty) { background: #334155; }
.date-picker-day.today { box-shadow: inset 0 0 0 1px #14b8a6; }
.date-picker-day.selected { background: #0d9488; color: #fff; font-weight: 600; }
.date-picker-day.disabled { color: #475569; cursor: not-allowed; }
.date-picker-day.empty { pointer-events: none; }

/* Time slot picker */
/* Modern time picker */
.time-picker { margin-top: 0.25rem; }
.time-picker-display {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.75rem 0.875rem; margin-bottom: 0.75rem;
    background: #0f172a; border: 1px solid #475569; border-radius: 0.625rem;
    min-height: 3rem;
}
.time-picker-display.has-value { border-color: #14b8a6; background: rgba(13, 148, 136, 0.08); }
.time-picker-display-icon { font-size: 1.125rem; opacity: 0.85; }
.time-picker-display-placeholder { color: #64748b; font-size: 0.875rem; }
.time-picker-display-value { font-size: 1.0625rem; font-weight: 600; color: #f8fafc; }
.time-picker-display-meta {
    margin-left: auto; font-family: monospace; font-size: 0.75rem; color: #64748b;
}
.time-picker-period { margin-bottom: 0.75rem; }
.time-picker-period:last-child { margin-bottom: 0; }
.time-picker-period-label {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #64748b; margin-bottom: 0.375rem;
}
.time-picker-period-slots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 0.375rem;
}
.time-slot-grid {
    max-height: 11rem; overflow-y: auto; padding: 0.125rem;
    border: 1px solid #334155; border-radius: 0.625rem; background: rgba(15, 23, 42, 0.5);
    padding: 0.625rem;
}
.time-slot-btn {
    padding: 0.5rem 0.5rem; border: 1px solid #475569; border-radius: 0.5rem;
    background: #1e293b; color: #e2e8f0; font-size: 0.8125rem; font-family: monospace;
    cursor: pointer; transition: all 0.15s;
}
.time-slot-btn:hover { border-color: #14b8a6; background: rgba(13,148,136,0.12); color: #5eead4; }
.time-slot-btn.selected {
    background: #0d9488; border-color: #2dd4bf; color: #fff; font-weight: 600;
    box-shadow: 0 0 0 2px rgba(45,212,191,0.25);
}
.time-slot-loading, .time-slot-empty {
    color: #64748b; font-size: 0.8125rem; display: block; padding: 0.5rem; text-align: center;
}
.time-slot-hint { margin-top: 0.5rem; }

.patient-lookup-name {
    margin-top: 0.5rem; padding: 0.625rem 0.875rem; background: rgba(13,148,136,0.1);
    border: 1px solid rgba(45,212,191,0.2); border-radius: 0.5rem; color: #e2e8f0; font-size: 0.9375rem;
}
.patient-lookup-meta { color: #64748b; font-size: 0.8125rem; }

.appt-filter-bar {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem;
}
.practice-type-banner {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.875rem 1rem; margin-bottom: 1rem;
    background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 0.625rem; font-size: 0.8125rem; color: #cbd5e1; line-height: 1.45;
}
.practice-type-banner-icon { font-size: 1.25rem; flex-shrink: 0; }
.practice-type-banner strong { color: #e2e8f0; }
.practice-type-banner-note { color: #64748b; font-size: 0.75rem; }

.appt-filter-bar .date-picker { min-width: 14rem; flex: 1; max-width: 20rem; }

/* Appointment calendar */
.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.625rem;
}
.cal-toolbar-left,
.cal-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cal-toolbar-center { flex: 1; text-align: center; min-width: 10rem; }
.cal-range-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #e2e8f0;
}
.cal-view-tabs {
    display: inline-flex;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.125rem;
    margin-right: 0.25rem;
}
.cal-view-tab {
    padding: 0.375rem 0.875rem;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cal-view-tab:hover { color: #e2e8f0; }
.cal-view-tab.active {
    background: #0d9488;
    color: #fff;
}
.cal-toolbar .date-picker { min-width: 12rem; }
.cal-count-badge {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
}

/* Day view */
.cal-day-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.cal-day-body { padding: 0 !important; }
.cal-day-row {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0;
    border-bottom: 1px solid #334155;
    min-height: 3.25rem;
}
.cal-day-row:last-child { border-bottom: none; }
.cal-day-hour {
    padding: 0.75rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    border-right: 1px solid #334155;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: flex-start;
}
.cal-day-slots {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    align-content: flex-start;
}
.cal-day-empty {
    color: #475569;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
}

/* Appointment pills — color set inline per patient */
.cal-pill {
    display: block;
    width: 100%;
    max-width: 18rem;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    font-family: inherit;
}
.cal-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.cal-pill-time {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 0.125rem;
}
.cal-pill-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}
.cal-pill-meta {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 0.125rem;
}
.cal-pill-status { margin-top: 0.375rem; }
.cal-pill-status .badge { font-size: 0.6875rem; }

.cal-pill-compact {
    width: 100%;
    max-width: none;
    padding: 0.4375rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}
.cal-pill-compact .cal-pill-time { margin-bottom: 0; font-size: 0.6875rem; }
.cal-pill-compact .cal-pill-name {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Week view */
.cal-week-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    padding: 0 !important;
    min-height: 20rem;
}
.cal-week-col {
    border-right: 1px solid #334155;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cal-week-col:last-child { border-right: none; }
.cal-week-col-today .cal-week-col-head {
    background: rgba(13, 148, 136, 0.15);
    border-bottom-color: rgba(45, 212, 191, 0.3);
}
.cal-week-col-today .cal-week-date {
    background: #0d9488;
    color: #fff;
}
.cal-week-col-head {
    padding: 0.625rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid #334155;
    background: rgba(15, 23, 42, 0.5);
}
.cal-week-dow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.cal-week-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}
.cal-week-col-body {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    overflow-y: auto;
    max-height: 28rem;
}
.cal-week-empty {
    font-size: 0.6875rem;
    color: #475569;
    text-align: center;
    padding: 0.75rem 0.25rem;
    line-height: 1.4;
}

.cal-detail-pill {
    padding: 0.875rem 1rem;
    border: 1px solid;
    border-radius: 0.625rem;
}

@media (max-width: 900px) {
    .cal-week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cal-week-col:nth-child(2n) { border-right: none; }
    .cal-toolbar-center { order: 3; width: 100%; text-align: left; }
}
@media (max-width: 520px) {
    .cal-week-grid { grid-template-columns: 1fr; }
    .cal-week-col { border-right: none; border-bottom: 1px solid #334155; }
    .cal-day-row { grid-template-columns: 3.5rem 1fr; }
}

/* Staff credentials card */
.credentials-card {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    overflow: hidden;
}
.credentials-card-user {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: rgba(13, 148, 136, 0.08);
    border-bottom: 1px solid #334155;
}
.credentials-card-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(13, 148, 136, 0.2);
    color: #2dd4bf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.credentials-card-name { font-size: 1rem; font-weight: 600; color: #f8fafc; }
.credentials-card-meta { font-size: 0.8125rem; color: #94a3b8; margin-top: 0.125rem; }
.credentials-card-body { padding: 1rem 1.125rem 1.125rem; }
.credentials-card-section { margin-bottom: 1rem; }
.credentials-card-section:last-child { margin-bottom: 0; }
.temp-password-box,
.credentials-url-box {
    margin-top: 0.375rem;
    padding: 0.875rem 1rem;
    background: #334155;
    border: 1px solid #475569;
    border-radius: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    color: #2dd4bf;
    text-align: center;
    user-select: all;
    word-break: break-all;
}
.credentials-url-box {
    font-size: 0.8125rem;
    color: #93c5fd;
    text-align: left;
}
.credentials-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
}
.credentials-card-actions .btn { justify-content: center; width: 100%; }
.credentials-card-actions .btn-primary { grid-column: 1 / -1; }
.credentials-card-note {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid #334155;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.45;
}
.credentials-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    margin-top: 0.75rem;
}
.credentials-status-success { background: rgba(34, 197, 94, 0.1); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }
.credentials-status-warning { background: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
.credentials-status-info { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.2); }
.modal-dark .temp-password-box,
.modal-dark .credentials-url-box {
    background: #334155;
    border-color: #475569;
}

.module-access-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;
}
.module-access-chip { position: relative; cursor: pointer; }
.module-access-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.module-access-chip-inner {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.85rem 0.9rem; border: 2px solid #475569; border-radius: 0.75rem;
    background: #334155; min-height: 4.5rem; transition: all 0.2s ease;
}
.module-access-chip-label {
    font-size: 0.8125rem; font-weight: 700; color: #e2e8f0;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.module-access-chip-desc { font-size: 0.75rem; color: #94a3b8; line-height: 1.35; }
.module-access-rec {
    font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: #2dd4bf; background: rgba(45, 212, 191, 0.12);
    padding: 0.1rem 0.4rem; border-radius: 9999px; white-space: nowrap;
}
.module-access-chip input:checked + .module-access-chip-inner {
    border-color: #2dd4bf; background: rgba(13, 148, 136, 0.15);
}
.module-access-chip input:disabled + .module-access-chip-inner { opacity: 0.85; cursor: default; }
.module-access-chip:hover .module-access-chip-inner { border-color: #64748b; transform: translateY(-1px); }
.module-mini-list { display: flex; flex-wrap: wrap; gap: 0.25rem; max-width: 16rem; }
.module-mini-chip {
    display: inline-block; font-size: 0.6875rem; font-weight: 600;
    color: #99f6e4; background: rgba(13, 148, 136, 0.16);
    border: 1px solid rgba(45, 212, 191, 0.25); border-radius: 9999px;
    padding: 0.1rem 0.45rem; white-space: nowrap;
}

.role-home-banner {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.25rem; padding: 1rem 1.15rem;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.18), rgba(15, 23, 42, 0.4));
    border: 1px solid rgba(45, 212, 191, 0.25); border-radius: 0.9rem;
}
.role-home-banner-icon { font-size: 1.75rem; }
.role-home-banner-title { font-weight: 700; color: #f8fafc; font-size: 1.05rem; }
.role-home-banner-work { color: #99f6e4; font-size: 0.875rem; margin-top: 0.2rem; }
.role-typical-work {
    margin: 0 0 0.85rem; font-size: 0.8125rem; color: #cbd5e1;
    background: rgba(15, 23, 42, 0.45); border: 1px solid #475569;
    border-radius: 0.5rem; padding: 0.65rem 0.75rem;
}
.role-typical-work strong { color: #2dd4bf; }

/* Consulting patient banner */
.consult-patient-banner {
    display: flex; align-items: center; gap: 0.85rem;
    margin-bottom: 1rem; padding: 0.9rem 1rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(13,148,136,0.22), rgba(30,58,138,0.18));
    border: 1px solid rgba(45,212,191,0.35);
}
.consult-patient-banner-empty {
    background: rgba(51,65,85,0.5); border-color: #475569;
}
.consult-patient-banner-icon { font-size: 1.5rem; }
.consult-patient-banner-name { font-weight: 700; color: #f8fafc; font-size: 1.05rem; letter-spacing: -0.02em; }
.consult-patient-banner-meta { color: #99f6e4; font-size: 0.8125rem; margin-top: 0.15rem; }
.consult-allergy { color: #fca5a5; }

.nurse-handover-banner {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fde68a;
    font-size: 0.8125rem;
}
.nurse-handover-banner.hidden { display: none; }
.nurse-handover-banner-inner { display: flex; flex-direction: column; gap: 0.2rem; }
.nurse-handover-hint { color: #fcd34d; font-size: 0.75rem; }

.vitals-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.vital-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.55rem; border-radius: 0.5rem; font-size: 0.75rem;
    background: rgba(13, 148, 136, 0.15); border: 1px solid rgba(45, 212, 191, 0.3); color: #e2e8f0;
}
.vital-chip strong { color: #5eead4; font-weight: 600; }

/* ICD-10 diagnosis picker */
.icd10-results {
    max-height: 220px; overflow-y: auto; margin-top: 0.4rem;
    border: 1px solid #475569; border-radius: 0.65rem; background: #0f172a;
}
.icd10-result {
    display: flex; gap: 0.75rem; align-items: flex-start; width: 100%;
    text-align: left; padding: 0.55rem 0.75rem; border: none; border-bottom: 1px solid #1e293b;
    background: transparent; color: #e2e8f0; cursor: pointer; font-family: inherit;
}
.icd10-result:hover { background: rgba(13,148,136,0.12); }
.icd10-result.is-selected { opacity: 0.45; }
.icd10-code {
    flex: 0 0 4.5rem; font-family: var(--font-mono, monospace);
    font-size: 0.75rem; font-weight: 600; color: #2dd4bf;
}
.icd10-label { font-size: 0.8125rem; color: #cbd5e1; line-height: 1.35; }
.icd10-selected { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.icd10-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.55rem; border-radius: 999px; font-size: 0.75rem;
    background: rgba(13,148,136,0.18); border: 1px solid rgba(45,212,191,0.35); color: #e2e8f0;
}
.icd10-chip strong { color: #5eead4; font-family: var(--font-mono, monospace); font-weight: 600; }
.icd10-chip-remove {
    border: none; background: transparent; color: #94a3b8; cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0 0.1rem;
}
.icd10-chip-remove:hover { color: #fca5a5; }

.days-off-auto {
    border-color: #14b8a6 !important;
    background: rgba(13,148,136,0.12) !important;
}

/* Patient search dropdown (modals) */
.patient-search-wrap { position: relative; }
.modal-dark .search-results,
.practice-layout .search-results,
.search-results {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 80;
    margin-top: 0.35rem;
    max-height: 14rem;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid #475569;
    border-radius: 0.65rem;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.modal-dark .search-result,
.practice-layout button.search-result,
.modal-dark button.search-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    border: none;
    border-bottom: 1px solid #1e293b;
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
    font-family: inherit;
}
.modal-dark button.search-result:last-child,
.practice-layout button.search-result:last-child {
    border-bottom: none;
}
.modal-dark button.search-result:hover,
.modal-dark button.search-result:focus,
.practice-layout button.search-result:hover,
.practice-layout button.search-result:focus {
    background: rgba(13, 148, 136, 0.2) !important;
    color: #f8fafc;
    outline: none;
}
.modal-dark .search-result-name,
.practice-layout .search-result-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f8fafc;
}
.modal-dark .search-result-meta,
.practice-layout .search-result-meta {
    font-size: 0.75rem;
    color: #94a3b8;
}
.modal-dark .search-result-empty,
.practice-layout .search-result-empty {
    padding: 0.75rem 0.9rem;
    color: #94a3b8;
    font-size: 0.8125rem;
}

/* Diagnostic request catalogs */
.diag-catalog {
    display: flex; flex-direction: column; gap: 0.75rem;
    max-height: 280px; overflow-y: auto;
    padding: 0.35rem 0.15rem 0.35rem 0;
}
.diag-category {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid #334155;
    border-radius: 0.7rem;
    padding: 0.65rem 0.75rem;
}
.diag-category-title {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #2dd4bf; margin-bottom: 0.5rem;
}
.diag-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.35rem 0.65rem;
}
.diag-test-option {
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; color: #cbd5e1; cursor: pointer;
    padding: 0.25rem 0.3rem; border-radius: 0.35rem;
}
.diag-test-option:hover { background: rgba(13,148,136,0.12); color: #f1f5f9; }
.diag-test-option input { margin-top: 0.15rem; accent-color: #14b8a6; }

.modal-xl { width: min(920px, 96vw); max-width: 96vw; }

/* Clickable patient name in tables */
.patient-name-link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: #5eead4;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.patient-name-link:hover,
.patient-name-link:focus {
    color: #99f6e4;
    border-bottom-color: rgba(94, 234, 212, 0.55);
    outline: none;
}

/* Modern patient info card (modal) */
.patient-info-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.pic-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.9rem;
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.28) 0%, rgba(15, 23, 42, 0.65) 55%),
        #0f172a;
    border: 1px solid rgba(45, 212, 191, 0.22);
}
.pic-avatar {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #042f2e;
    background: linear-gradient(145deg, #5eead4, #14b8a6);
}
.pic-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.25;
}
.pic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.pic-chip {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #99f6e4;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(45, 212, 191, 0.25);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}
.pic-section {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 0.75rem 0.9rem;
}
.pic-section-request {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(14, 165, 233, 0.08);
}
.pic-section-title {
    margin: 0 0 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2dd4bf;
}
.pic-section-request .pic-section-title { color: #7dd3fc; }
.pic-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
}
.pic-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.pic-field-block { grid-column: 1 / -1; }
.pic-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}
.pic-value {
    font-size: 0.875rem;
    color: #e2e8f0;
    word-break: break-word;
}
.pic-pre { white-space: pre-line; }
.pic-alert {
    grid-column: 1 / -1;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecaca;
    border-radius: 0.55rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.8125rem;
}
.pic-alert p, .pic-note p {
    margin: 0.25rem 0 0;
    color: inherit;
    white-space: pre-wrap;
}
.pic-note {
    grid-column: 1 / -1;
    background: rgba(51, 65, 85, 0.45);
    border: 1px solid #475569;
    border-radius: 0.55rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.8125rem;
    color: #cbd5e1;
}
.pic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
}
.pic-tag {
    font-size: 0.72rem;
    color: #e0f2fe;
    background: rgba(14, 165, 233, 0.18);
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: 0.4rem;
    padding: 0.2rem 0.5rem;
}
@media (max-width: 560px) {
    .pic-fields { grid-template-columns: 1fr; }
    .pic-hero { align-items: flex-start; }
}

/* Modern PDF download action */
.btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(45, 212, 191, 0.35);
    background: linear-gradient(145deg, rgba(13, 148, 136, 0.28), rgba(15, 23, 42, 0.65));
    color: #5eead4;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-pdf-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}
.btn-pdf:hover,
.btn-pdf:focus {
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.45), rgba(15, 23, 42, 0.8));
    border-color: rgba(94, 234, 212, 0.65);
    color: #ccfbf1;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
    outline: none;
    transform: translateY(-1px);
}
.btn-pdf:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Editable referral letter editor */
.ref-letter-panel {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid #334155;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem 1rem;
    margin: 0.25rem 0 1rem;
}
.ref-letter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ref-letter-editor {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    min-height: 16rem;
    white-space: pre-wrap;
    resize: vertical;
}
.modal-dark .ref-letter-editor {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}

/* Prescription builder */
.rx-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.rx-add-row .select,
.rx-add-row .input { flex: 1; min-width: 0; }
.rx-add-row .btn { flex-shrink: 0; white-space: nowrap; }
.inv-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}
.inv-add-row .select,
.inv-add-row .input { flex: 1; min-width: 6rem; }
.inv-add-row .btn { flex-shrink: 0; }
.rx-med-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.25rem 0 0.85rem;
}
.rx-med-item {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid #334155;
    border-radius: 0.7rem;
    padding: 0.65rem 0.75rem;
}
.rx-med-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.rx-med-item-head strong {
    color: #f1f5f9;
    font-size: 0.875rem;
}
.rx-med-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}
@media (max-width: 560px) {
    .rx-add-row { flex-direction: column; }
    .rx-med-fields { grid-template-columns: 1fr; }
}

/* Flatpickr calendar polish */
.flatpickr-calendar {
    font-family: var(--font-sans, inherit) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35) !important;
    border: 1px solid #334155 !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
}
.flatpickr-day:hover { background: rgba(13,148,136,0.2) !important; border-color: transparent !important; }
.flatpickr-months .flatpickr-month { fill: #e2e8f0; color: #e2e8f0; }
input.date-input, .flatpickr-input { cursor: pointer; }
.modal-dark .flatpickr-input.form-control.input,
.practice-layout .flatpickr-input.form-control.input {
    background: #334155; border: 1px solid #475569; color: #f1f5f9;
    border-radius: 0.5rem; padding: 0.5rem 0.75rem; width: 100%;
}

/* ── Billing / Finance module ── */
.billing-module { margin-top: 0.25rem; }
.billing-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(22,163,74,0.14), rgba(13,148,136,0.1));
    border: 1px solid rgba(34,197,94,0.28);
}
.billing-hero h3 {
    margin: 0 0 0.35rem;
    color: #f1f5f9;
    font-size: 1.1rem;
}
.billing-hero p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.875rem;
    max-width: 36rem;
}
.billing-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.billing-aging-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.85rem;
}
.billing-aging-card {
    background: rgba(30,41,59,0.85);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
}
.billing-aging-card-warn {
    border-color: rgba(239,68,68,0.45);
    background: rgba(127,29,29,0.22);
}
.billing-aging-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}
.billing-aging-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
}
.billing-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.25rem 0 0.85rem;
}
.billing-filter-chip {
    border: 1px solid #475569;
    background: rgba(51,65,85,0.55);
    color: #cbd5e1;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.billing-filter-chip:hover { border-color: #22c55e; color: #86efac; }
.billing-filter-chip.active {
    background: rgba(34,197,94,0.18);
    border-color: #22c55e;
    color: #86efac;
    font-weight: 600;
}
.billing-statement-card {
    border: 1px solid #334155;
    border-radius: 0.85rem;
    padding: 1rem;
    background: rgba(15,23,42,0.45);
}
.billing-statement-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.billing-statement-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
}
.billing-statement-totals {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.billing-statement-totals .label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
}
.billing-statement-totals strong {
    color: #e2e8f0;
    font-size: 1rem;
}
@media (max-width: 900px) {
    .billing-aging-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .billing-aging-grid { grid-template-columns: 1fr; }
}