:root {
    --primary-color: #0d6efd;
    --sidebar-color: #1e293b;
    --button-color: #0d6efd;
}

body { background: #f1f5f9; }

.admin-wrapper { min-height: 100vh; }

.sidebar {
    width: 260px;
    background: var(--sidebar-color);
    color: #cbd5e1;
    min-height: 100vh;
    transition: width 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

html.sidebar-collapsed-init .sidebar,
.admin-wrapper.sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
}

.sidebar-brand {
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-brand-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}

.sidebar-brand-link:hover {
    color: inherit;
    opacity: 0.92;
}

.sidebar-logo-wrap {
    flex-shrink: 0;
}

.sidebar-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.35rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: block;
}

.sidebar-logo-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    color: rgba(255, 255, 255, 0.8);
}

.sidebar-logo-placeholder i {
    font-size: 1.35rem;
}

.sidebar-logo-placeholder span {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.sidebar-clinic-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-clinic-tagline {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #94a3b8;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
}

.sidebar .nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .nav-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.sidebar .nav-link:hover .nav-icon { transform: scale(1.05); }

.sidebar-nav-divider {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.7rem 0.35rem 0.45rem;
    padding: 0;
}

.sidebar-nav-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav-divider-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-nav-divider-cat-scheduling .sidebar-nav-divider-label { color: rgba(52, 211, 153, 0.65); }
.sidebar-nav-divider-cat-clinical .sidebar-nav-divider-label { color: rgba(167, 139, 250, 0.65); }
.sidebar-nav-divider-cat-catalog .sidebar-nav-divider-label { color: rgba(244, 114, 182, 0.65); }
.sidebar-nav-divider-cat-finance .sidebar-nav-divider-label { color: rgba(251, 191, 36, 0.65); }
.sidebar-nav-divider-cat-communication .sidebar-nav-divider-label { color: rgba(34, 211, 238, 0.65); }
.sidebar-nav-divider-cat-admin .sidebar-nav-divider-label { color: rgba(129, 140, 248, 0.65); }
.sidebar-nav-divider-cat-system .sidebar-nav-divider-label { color: rgba(203, 213, 225, 0.55); }

.nav-icon-cat-overview { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.nav-icon-cat-scheduling { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.nav-icon-cat-clinical { background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
.nav-icon-cat-catalog { background: rgba(236, 72, 153, 0.18); color: #f472b6; }
.nav-icon-cat-finance { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.nav-icon-cat-communication { background: rgba(6, 182, 212, 0.18); color: #22d3ee; }
.nav-icon-cat-admin { background: rgba(99, 102, 241, 0.18); color: #818cf8; }
.nav-icon-cat-system { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }

.sidebar .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--primary-color, #0d6efd);
}

.sidebar .nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.sidebar-toggle-btn {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.sidebar-toggle-btn:hover {
    background: #f8fafc;
    color: var(--primary-color, #0d6efd);
    border-color: #cbd5e1;
}

.sidebar-toggle-btn i {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.admin-wrapper.sidebar-collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
        height: 100vh;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    html.sidebar-collapsed-init .sidebar,
    .admin-wrapper.sidebar-collapsed .sidebar {
        width: 260px;
        transform: translateX(-100%);
        opacity: 1;
        pointer-events: none;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1035;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .sidebar-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

.main-content { background: #f8fafc; min-width: 0; }

.content-area { min-width: 0; }

/* Appointments β€” list fills main area with internal scroll */
body.admin-module-appointments {
    overflow: hidden;
}

body.admin-module-appointments .admin-wrapper {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

body.admin-module-appointments .main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

body.admin-module-appointments .content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.appointments-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0.75rem;
}

.appointments-filters-card {
    margin-bottom: 0;
}

.appointments-table-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    border-color: #e2e8f0;
}

.appointments-table-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.appointments-table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.appointments-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

.appointments-data-table thead th.sortable:hover {
    background: #e9ecef;
}

.stat-card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e293b, #334155);
}

.login-card { max-width: 400px; margin: auto; border: none; border-radius: 1rem; }
.login-card .hcaptcha-wrap { display: flex; justify-content: center; }

.login-page .btn-primary {
    background-color: var(--button-color, #0d6efd);
    border-color: var(--button-color, #0d6efd);
    color: #fff;
}

.login-page .btn-primary:hover,
.login-page .btn-primary:focus {
    background-color: color-mix(in srgb, var(--button-color, #0d6efd) 85%, #000);
    border-color: color-mix(in srgb, var(--button-color, #0d6efd) 85%, #000);
    color: #fff;
}

.branding-block-logo {
    max-height: 72px;
    max-width: 200px;
    object-fit: contain;
}

.branding-block--lg .branding-block-logo {
    max-height: 88px;
}

.settings-page-card > .card-body {
    padding: 1.25rem 1.35rem 1.5rem;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.settings-section {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.settings-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 1rem 1.15rem;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.settings-section-head:hover {
    filter: brightness(0.985);
}

.settings-section-head:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
    z-index: 1;
}

.settings-section-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.settings-section-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 0.95rem;
}

.settings-section-title {
    display: block;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.settings-section-sub {
    display: block;
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.35;
}

.settings-section-chevron {
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    margin-top: 0.2rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.7);
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-section-chevron i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.settings-section.is-collapsed .settings-section-head {
    border-bottom-color: transparent;
}

.settings-section.is-collapsed .settings-section-chevron i {
    transform: rotate(180deg);
}

.settings-section-body {
    padding: 1.15rem;
}

.settings-section--business {
    border-color: #cfe0f5;
}
.settings-section--business .settings-section-head {
    background: linear-gradient(180deg, #f5f9ff 0%, #ebf2fb 100%);
}
.settings-section--business .settings-section-icon {
    background: linear-gradient(145deg, #1d4ed8, #3b82f6);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.22);
}

.settings-section--sms {
    border-color: #bfe8df;
}
.settings-section--sms .settings-section-head {
    background: linear-gradient(180deg, #f3fbf9 0%, #e7f7f2 100%);
}
.settings-section--sms .settings-section-icon {
    background: linear-gradient(145deg, #0f766e, #14b8a6);
    box-shadow: 0 8px 16px rgba(15, 118, 110, 0.22);
}

.settings-section--theme {
    border-color: #f5d0b8;
}
.settings-section--theme .settings-section-head {
    background: linear-gradient(180deg, #fffaf6 0%, #fff3ea 100%);
}
.settings-section--theme .settings-section-icon {
    background: linear-gradient(145deg, #c2410c, #ea580c);
    box-shadow: 0 8px 16px rgba(194, 65, 12, 0.2);
}

.settings-logo-preview {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.settings-logo-preview-img {
    max-height: 72px;
    max-width: 180px;
    object-fit: contain;
}

.settings-logo-preview-empty {
    text-align: center;
}

.theme-preview {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0;
    min-height: 118px;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
    background: #f8fafc;
}

.theme-preview-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.55rem;
    background: var(--preview-color, #1e293b);
}

.theme-preview-brand {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--preview-color, #93c5fd);
    opacity: 0.95;
}

.theme-preview-nav {
    display: block;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.theme-preview-nav.is-active {
    background: var(--preview-color, #20c997);
}

.theme-preview-main {
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.theme-preview-bar {
    display: flex;
    gap: 0.4rem;
}

.theme-preview-chip {
    width: 2.4rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--preview-color, #94a3b8);
    opacity: 0.55;
}

.theme-preview-card {
    flex: 1;
    border-radius: 0.65rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.theme-preview-line {
    display: block;
    height: 0.38rem;
    width: 72%;
    border-radius: 999px;
    background: #e2e8f0;
}

.theme-preview-line.short {
    width: 44%;
}

.theme-preview-btn {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.28rem 0.7rem;
    border-radius: 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    background: var(--preview-color, #0d6efd);
}

.theme-swatches {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.theme-swatch:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.theme-swatch:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.theme-swatch-chip {
    position: relative;
    width: 100%;
    aspect-ratio: 1.35 / 1;
    border-radius: 0.7rem;
    background: var(--swatch, #cbd5e1);
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 55%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 8px 16px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.theme-swatch-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.theme-swatch-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.theme-swatch-meta strong {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.theme-swatch-hint {
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.3;
}

.theme-swatch-hex {
    margin-top: 0.2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.settings-actions .btn-lg {
    padding: 0.7rem 1.25rem;
    border-radius: 0.7rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .theme-swatches {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .theme-swatches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-actions {
        justify-content: stretch;
    }

    .settings-actions .btn {
        width: 100%;
    }
}

.subscription-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.7rem 0.95rem;
    border-radius: 0.75rem;
    border: 1px solid #dbe4f0;
    background: linear-gradient(120deg, #f8fafc 0%, #eef4fb 100%);
}

.subscription-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.subscription-banner-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, #1d4ed8, #3b82f6);
    color: #fff;
    font-size: 0.85rem;
}

.subscription-banner-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    min-width: 0;
}

.subscription-banner-label {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 100%;
}

.subscription-banner-days {
    color: #0f172a;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.subscription-banner-meta {
    color: #64748b;
    font-size: 0.8rem;
}

.subscription-banner-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.subscription-banner--warn {
    border-color: #f6d9a8;
    background: linear-gradient(120deg, #fffdf8 0%, #fff7ea 100%);
}
.subscription-banner--warn .subscription-banner-icon {
    background: linear-gradient(145deg, #d97706, #f59e0b);
}
.subscription-banner--warn .subscription-banner-pill {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.subscription-banner--critical,
.subscription-banner--expired {
    border-color: #f5c2c2;
    background: linear-gradient(120deg, #fffafa 0%, #fff1f1 100%);
}
.subscription-banner--critical .subscription-banner-icon,
.subscription-banner--expired .subscription-banner-icon {
    background: linear-gradient(145deg, #b91c1c, #ef4444);
}
.subscription-banner--critical .subscription-banner-pill,
.subscription-banner--expired .subscription-banner-pill {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.subscription-banner--ok .subscription-banner-pill {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.subscription-banner--ok .subscription-banner-icon {
    background: linear-gradient(145deg, #0f766e, #14b8a6);
}

@media (max-width: 575.98px) {
    .subscription-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.sms-quota-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.15rem 1.25rem 1.2rem;
    border: 1px solid #dbe4f0;
    background:
        linear-gradient(145deg, #ffffff 0%, #f5f8fc 55%, #eef4fb 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.sms-quota-card-glow {
    position: absolute;
    inset: auto -20% -60% auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32, 201, 151, 0.18), transparent 68%);
    pointer-events: none;
}

.sms-quota-card--warn {
    border-color: #f6d9a8;
    background: linear-gradient(145deg, #fffdf8 0%, #fff7ea 100%);
}
.sms-quota-card--warn .sms-quota-card-glow {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 68%);
}
.sms-quota-card--critical,
.sms-quota-card--exhausted {
    border-color: #f5c2c2;
    background: linear-gradient(145deg, #fffafa 0%, #fff1f1 100%);
}
.sms-quota-card--critical .sms-quota-card-glow,
.sms-quota-card--exhausted .sms-quota-card-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.18), transparent 68%);
}
.sms-quota-card--unlimited {
    border-color: #cfe0f5;
}

.sms-quota-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.sms-quota-card-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.sms-quota-card-title strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.sms-quota-card-sub {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.8rem;
}

.sms-quota-card-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0f766e, #14b8a6);
    color: #fff;
    box-shadow: 0 8px 16px rgba(15, 118, 110, 0.25);
    flex-shrink: 0;
}

.sms-quota-card--warn .sms-quota-card-icon {
    background: linear-gradient(145deg, #d97706, #f59e0b);
    box-shadow: 0 8px 16px rgba(217, 119, 6, 0.22);
}
.sms-quota-card--critical .sms-quota-card-icon,
.sms-quota-card--exhausted .sms-quota-card-icon {
    background: linear-gradient(145deg, #b91c1c, #ef4444);
    box-shadow: 0 8px 16px rgba(185, 28, 28, 0.22);
}

.sms-quota-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    white-space: nowrap;
}

.sms-quota-card--warn .sms-quota-pill {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.sms-quota-card--critical .sms-quota-pill,
.sms-quota-card--exhausted .sms-quota-pill {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.sms-quota-card--unlimited .sms-quota-pill {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.sms-quota-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.sms-quota-stat {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.85rem;
    padding: 0.85rem 0.9rem;
}

.sms-quota-stat--accent {
    border-color: rgba(20, 184, 166, 0.35);
    background: rgba(240, 253, 250, 0.9);
}

.sms-quota-stat-label {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.sms-quota-stat-value {
    display: block;
    color: #0f172a;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.sms-quota-stat--accent .sms-quota-stat-value {
    color: #0f766e;
}

.sms-quota-card--exhausted .sms-quota-stat--accent .sms-quota-stat-value,
.sms-quota-card--critical .sms-quota-stat--accent .sms-quota-stat-value {
    color: #b91c1c;
}

.sms-quota-meter {
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.sms-quota-meter-track {
    height: 0.55rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.sms-quota-meter-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #0d9488);
    transition: width 0.35s ease;
}

.sms-quota-card--warn .sms-quota-meter-fill {
    background: linear-gradient(90deg, #fbbf24, #d97706);
}
.sms-quota-card--critical .sms-quota-meter-fill,
.sms-quota-card--exhausted .sms-quota-meter-fill {
    background: linear-gradient(90deg, #f87171, #dc2626);
}

.sms-quota-meter-caption {
    display: flex;
    justify-content: space-between;
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
}

.sms-quota-unlimited-note {
    margin-top: 0.85rem;
    color: #64748b;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}

.sms-quota-unlimited-note code {
    font-size: 0.78rem;
    color: #334155;
    background: #e2e8f0;
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
}

@media (max-width: 767.98px) {
    .sms-quota-stats {
        grid-template-columns: 1fr;
    }

    .sms-quota-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sms-quota-pill {
        align-self: flex-start;
    }
}

.sms-enable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    background: #f8fafc;
}

.sms-enable-copy {
    min-width: 0;
    flex: 1;
}

.sms-enable-label {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.sms-enable-control {
    flex-shrink: 0;
    margin: 0;
    padding-left: 2.75em;
    min-height: 1.5rem;
}

.sms-enable-control .form-check-input {
    width: 2.5em;
    height: 1.35em;
    cursor: pointer;
    margin-top: 0;
}

@media (max-width: 575.98px) {
    .sms-enable-row {
        align-items: flex-start;
    }
}

.btn-primary { background-color: var(--button-color); border-color: var(--button-color); }

/* Calendar */
.cal-toolbar .form-select,
.cal-toolbar .form-control { min-width: 140px; }

.cal-loading {
    text-align: center;
    padding: 3rem;
    color: #94a3b8;
    font-size: 1.5rem;
}

.cal-grid {
    display: grid;
    gap: 1px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.cal-grid-month,
.cal-grid-week {
    grid-template-columns: repeat(7, 1fr);
}

.cal-grid-day {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.cal-day-toolbar {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.cal-day-toolbar .cal-day-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cal-day-timeline {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    grid-auto-rows: var(--cal-slot-height, 60px);
    gap: 0;
    background: #e2e8f0;
    --cal-slot-height: 60px;
    --cal-hours: 14;
}

.cal-day-hour-label {
    grid-column: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 0.5rem;
    margin-top: -0.45em;
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    user-select: none;
}

.cal-day-hour-label:first-of-type {
    border-top-color: #e2e8f0;
}

.cal-day-hour-slot {
    grid-column: 2;
    background: #fff;
    border-top: 1px solid #f1f5f9;
}

.cal-day-hour-slot.cal-day-sat {
    background: #eff6ff;
}

.cal-day-hour-slot.cal-day-sun {
    background: #fdf4ff;
}

.cal-day-events-layer {
    grid-column: 2;
    position: relative;
    margin-top: 0;
    pointer-events: none;
    z-index: 1;
    min-height: calc(var(--cal-hours) * var(--cal-slot-height));
    --cal-event-inset: 4px;
    --cal-event-gap: 4px;
}

.cal-day-events-layer.cal-day-sat {
    background: transparent;
}

.cal-day-events-layer.cal-day-sun {
    background: transparent;
}

.cal-event.cal-event-day {
    --cal-col: 0;
    --cal-cols: 1;
    position: absolute;
    left: calc(
        var(--cal-event-inset) + var(--cal-col) * (
            (100% - 2 * var(--cal-event-inset) - (var(--cal-cols) - 1) * var(--cal-event-gap)) / var(--cal-cols) +
            var(--cal-event-gap)
        )
    );
    width: calc(
        (100% - 2 * var(--cal-event-inset) - (var(--cal-cols) - 1) * var(--cal-event-gap)) / var(--cal-cols)
    );
    right: auto;
    z-index: 2;
    box-sizing: border-box;
    padding: 0.35rem 0.4rem;
    overflow: hidden;
    font-size: 0.75rem;
    cursor: grab;
    pointer-events: auto;
    margin: 0;
    transform: none;
    min-width: 0;
}

.cal-event.cal-event-day:hover {
    transform: translateY(-1px);
}

.cal-event-day .cal-event-time {
    font-size: 0.72rem;
}

.cal-event-day .cal-event-client {
    white-space: normal;
    font-weight: 600;
}

.cal-event-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    opacity: 0.9;
    line-height: 1.25;
}

#calendarGrid.cal-grid-host-day {
    overflow: auto;
    max-height: calc(100vh - 220px);
}

.cal-dow-label {
    background: #f8fafc;
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cal-day {
    background: #fff;
    min-height: 110px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.15s;
}

.cal-day-compact {
    min-height: 90px;
    min-width: 72px;
    padding: 0.25rem;
}

.cal-day-sat {
    background: #eff6ff;
}

.cal-day-sun {
    background: #fdf4ff;
}

.cal-day-sat.cal-day-outside {
    background: #f0f9ff;
}

.cal-day-sun.cal-day-outside {
    background: #faf5ff;
}

.cal-day-outside {
    background: #f8fafc;
    opacity: 0.65;
}

.cal-day-today .cal-day-num {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}

.cal-day-header {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
    line-height: 1.2;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.1rem;
}

.cal-day-month {
    font-size: 0.62rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-day-dow {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
}

.cal-day-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    min-width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cal-day-header:not(.cal-day-header-year) .cal-day-num {
    margin-left: auto;
}

.cal-day-add {
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    margin-left: 0.2rem;
    padding: 0;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    color: #94a3b8;
    font-size: 0.62rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.cal-day:hover .cal-day-add,
.cal-day-add:hover,
.cal-day-add:focus {
    opacity: 1;
}

.cal-day-add:hover,
.cal-day-add:focus {
    background: var(--primary-color, #0d6efd);
    color: #fff;
    outline: none;
}

.cal-day-events {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cal-event {
    position: relative;
    padding: 3px 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 0.68rem;
    line-height: 1.3;
    cursor: grab;
    transition: transform 0.1s, box-shadow 0.1s;
    border-left: 3px solid rgba(0,0,0,0.15);
}

.cal-event-emergency {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 0.14) 5px,
        rgba(255, 255, 255, 0.14) 10px
    ) !important;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.55);
}

.cal-event-emergency-flag {
    position: absolute;
    top: 2px;
    right: 3px;
    z-index: 1;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fbbf24;
    color: #78350f;
    font-size: 0.52rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.cal-notif-emergency {
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 600;
}

.cal-notif-emergency small {
    font-weight: 400;
    color: #a16207;
}

.cal-event:active {
    cursor: grabbing;
}

.cal-event-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.cal-day-drop-target {
    outline: 2px dashed var(--primary-color, #0d6efd);
    outline-offset: -2px;
    background: #eff6ff !important;
}

.cal-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    filter: brightness(1.05);
}

.cal-event-time {
    display: block;
    font-weight: 700;
    font-size: 0.65rem;
    opacity: 0.95;
    white-space: nowrap;
}

.cal-event-client {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-notif-line {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    line-height: 1.35;
}

.cal-notif-line:first-of-type {
    margin-top: 0.25rem;
    padding-top: 0;
    border-top: none;
}

.cal-year-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

#calendarGrid.cal-grid-host-year {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.cal-card-year .card-body {
    overflow: hidden;
    min-width: 0;
}

.cal-year-scroll::-webkit-scrollbar {
    height: 10px;
}

.cal-year-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.cal-year-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.cal-year-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.cal-grid-year {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 1px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    width: max-content;
}

.cal-grid-year .cal-day {
    flex: 0 0 80px;
}

.cal-grid-year .cal-day-sat {
    background: #dbeafe;
}

.cal-grid-year .cal-day-sun {
    background: #fce7f3;
}

.cal-grid-year .cal-day-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding-bottom: 0.25rem;
}

.cal-day-header-year .cal-day-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.cal-day-month-year {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    background: #f1f5f9;
    border-radius: 0.3rem;
    padding: 0.2rem 0;
    line-height: 1.2;
}

.cal-day-month-year-start {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}

.cal-day-month-start {
    border-left: 2px solid var(--primary-color, #0d6efd);
}

.cal-grid-year .cal-day-dow {
    font-size: 0.65rem;
}

.cal-grid-year .cal-day-num {
    margin-left: 0;
    font-size: 0.8rem;
    min-width: 1.25rem;
    height: 1.25rem;
}

.admin-data-table th.sortable,
#appointmentsTable th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-data-table th.sortable::after,
#appointmentsTable th.sortable::after {
    content: '\f0dc';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 0.35rem;
    opacity: 0.25;
    font-size: 0.75rem;
}

.admin-data-table th.sortable.sort-asc::after,
#appointmentsTable th.sortable.sort-asc::after {
    content: '\f0de';
    opacity: 0.7;
}

.admin-data-table th.sortable.sort-desc::after,
#appointmentsTable th.sortable.sort-desc::after {
    content: '\f0dd';
    opacity: 0.7;
}

.admin-data-table th.sortable:hover,
#appointmentsTable th.sortable:hover {
    background: #e9ecef;
}

.admin-data-table td {
    vertical-align: middle;
}

.cell-pastel {
    border-radius: 0.4rem;
}

.entity-status-active { background: #ecfdf5; color: #047857; }
.entity-status-inactive { background: #f1f5f9; color: #64748b; }
.entity-status-maintenance { background: #fff7ed; color: #c2410c; }
.entity-status-locked { background: #fef2f2; color: #b91c1c; }

.pay-status-initiated { background: #f8fafc; color: #475569; }
.pay-status-pending { background: #fff7ed; color: #c2410c; }
.pay-status-completed { background: #ecfdf5; color: #047857; }
.pay-status-failed { background: #fef2f2; color: #b91c1c; }
.pay-status-refunded { background: #eff6ff; color: #1d4ed8; }
.pay-status-expired { background: #f1f5f9; color: #64748b; }

.log-action-save { background: #eff6ff; color: #1d4ed8; }
.log-action-delete { background: #fef2f2; color: #b91c1c; }
.log-action-login { background: #ecfdf5; color: #047857; }
.log-action-logout { background: #f1f5f9; color: #64748b; }
.log-action-create { background: #ecfdf5; color: #047857; }
.log-action-update { background: #eff6ff; color: #1d4ed8; }
.log-action-approve { background: #ecfdf5; color: #047857; }
.log-action-payment_completed { background: #ecfdf5; color: #047857; }
.log-action-payment { background: #fff7ed; color: #c2410c; }
.log-action-backup { background: #f5f3ff; color: #6d28d9; }
.log-action-settings { background: #f8fafc; color: #334155; }
.log-action-permissions { background: #fdf4ff; color: #7e22ce; }
.log-action-warning { background: #fffbeb; color: #b45309; }
.log-action-info { background: #ecfeff; color: #0e7490; }
.log-action-system { background: #f1f5f9; color: #475569; }
.log-action-default { background: #f8fafc; color: #475569; }

.logs-panel .card-header {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.logs-table .log-row td {
    vertical-align: top;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.log-cell-date {
    white-space: nowrap;
    min-width: 7.5rem;
}

.log-date-main {
    font-weight: 600;
    font-size: 0.82rem;
    color: #334155;
}

.log-ip {
    font-size: 0.75rem;
    color: #64748b;
    background: #f8fafc;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

.log-cell-details {
    min-width: 16rem;
    max-width: 28rem;
}

.log-summary-text {
    font-size: 0.84rem;
    color: #334155;
}

.log-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.log-detail-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
    color: #475569;
}

.log-detail-label {
    font-weight: 600;
    color: #64748b;
}

.log-detail-label::after {
    content: ':';
}

.log-raw-details {
    margin-top: 0.35rem;
}

.log-raw-details summary {
    font-size: 0.72rem;
    color: #94a3b8;
    cursor: pointer;
    user-select: none;
}

.log-raw-pre {
    margin: 0.35rem 0 0;
    padding: 0.45rem 0.55rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    color: #64748b;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 8rem;
    overflow: auto;
}

.module-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
}

.data-icon-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.data-icon-cell i {
    width: 1rem;
    text-align: center;
    opacity: 0.65;
}

.notif-channel-badge,
.notif-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.notif-channel-badge {
    border: 1px solid transparent;
}

.notif-email-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.55rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 500;
    max-width: 220px;
    word-break: break-all;
}

.notif-email-from {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.notif-email-from i { color: #3b82f6; }

.notif-email-to {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.notif-email-to i { color: #10b981; }

.notif-email-internal {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.notif-email-internal i { color: #7c3aed; }

.notif-email-other {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.notif-apt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.22rem 0.55rem;
    border-radius: 0.45rem;
    background: #fdf4ff;
    color: #86198f;
    border: 1px solid #f5d0fe;
    font-size: 0.8rem;
    font-weight: 600;
}

.notif-apt-badge i { color: #c026d3; }

.notif-apt-id {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
}

.notif-apt-ref {
    font-size: 0.72rem;
    font-weight: 500;
    color: #a21caf;
    opacity: 0.9;
}

.notif-subject-cell {
    max-width: 240px;
}

.notif-meta-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #94a3b8;
    font-size: 0.82rem;
}

.notif-col-toggle {
    width: 2.25rem;
    padding-left: 0.65rem !important;
    padding-right: 0.35rem !important;
}

#queueTable {
    table-layout: fixed;
}

#queueTable .notif-col-header {
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

#queueTable .notif-group-columns-header td {
    vertical-align: middle;
}

#queueTable colgroup .notif-col-subject { width: 18%; }
#queueTable colgroup .notif-col-sender { width: 14%; }
#queueTable colgroup .notif-col-recipient { width: 14%; }
#queueTable colgroup .notif-col-channel { width: 9%; }
#queueTable colgroup .notif-col-status { width: 12%; }
#queueTable colgroup .notif-col-scheduled { width: 12%; }
#queueTable colgroup .notif-col-sent { width: 12%; }
#queueTable colgroup .notif-col-actions { width: 5%; }

.notif-group-header {
    background: #f8fafc;
    cursor: pointer;
}

.notif-group-header:hover {
    background: #f1f5f9;
}

.notif-group-header.is-expanded {
    background: #eff6ff;
    border-bottom-color: #dbeafe;
}

.notif-group-header.is-expanded + .notif-group-columns-header td {
    border-top: none;
}

.notif-group-toggle {
    color: #64748b;
    text-decoration: none;
}

.notif-group-toggle i {
    transition: transform 0.15s ease;
}

.notif-group-header.is-expanded .notif-group-toggle i {
    transform: rotate(90deg);
}

.notif-group-cell {
    vertical-align: middle;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

.notif-group-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.notif-group-field-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    line-height: 1.2;
}

.notif-group-header.is-expanded .notif-group-field-label {
    display: none;
}

.notif-group-header.is-expanded .notif-group-cell-empty {
    display: none;
}

.notif-group-apt {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-weight: 600;
    color: #334155;
}

.notif-group-apt .notif-apt-id {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem;
    color: #86198f;
}

.notif-group-client {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #475569;
    font-weight: 500;
    font-size: 0.85rem;
}

.notif-group-client i {
    color: #94a3b8;
    font-size: 0.75rem;
}

.notif-group-when {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.25;
}

.notif-group-date {
    font-weight: 600;
    color: #334155;
    font-size: 0.84rem;
}

.notif-group-time {
    color: #64748b;
    font-size: 0.8rem;
}

.notif-group-count {
    display: inline-flex;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.notif-group-summary-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.notif-group-summary-badges .notif-status-badge {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
}

.notif-group-cell-empty {
    background: #f8fafc;
}

.notif-group-detail td {
    background: #fff;
}

.notif-group-detail td.notif-col-toggle {
    border-left: 3px solid #dbeafe;
}

.notif-group-header + .notif-group-columns-header + .notif-group-detail td.notif-col-toggle,
.notif-group-detail + .notif-group-detail td.notif-col-toggle {
    border-left: 3px solid #dbeafe;
}

.notif-trigger-label {
    font-size: 0.85rem;
    color: #475569;
}

/* Notification rule creation wizard */
.notif-rule-wizard .notif-wizard-body {
    padding-top: 1.25rem;
    padding-bottom: 1.35rem;
}

.notif-wizard-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}

.notif-wizard-progress-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #cbd5e1;
    transition: width 0.25s ease, background 0.25s ease;
}

.notif-wizard-progress-dot.is-active {
    width: 1.35rem;
    background: var(--primary-color, #0d6efd);
}

.notif-wizard-progress-dot.is-done {
    background: color-mix(in srgb, var(--primary-color, #0d6efd) 55%, #94a3b8);
}

.notif-wizard-step-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.notif-wizard-step-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(145deg, #0e7490 0%, #0891b2 100%);
    box-shadow: 0 10px 22px rgba(8, 145, 178, 0.25);
    animation: notifWizardIn 0.4s ease;
}

.notif-wizard-step-icon.is-trigger {
    background: linear-gradient(145deg, #b45309 0%, #d97706 100%);
    box-shadow: 0 10px 22px rgba(217, 119, 6, 0.25);
}

.notif-wizard-step-icon.is-channel {
    background: linear-gradient(145deg, #1d4ed8 0%, #3b82f6 100%);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.25);
}

.notif-wizard-step-icon.is-timing {
    background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
    box-shadow: 0 10px 22px rgba(20, 184, 166, 0.25);
}

.notif-wizard-step-icon.is-template {
    background: linear-gradient(145deg, #0369a1 0%, #0ea5e9 100%);
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.25);
}

.notif-wizard-step-icon.is-review {
    background: linear-gradient(145deg, #15803d 0%, #22c55e 100%);
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.25);
}

.notif-wizard-step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.35rem;
    line-height: 1.3;
    animation: notifWizardIn 0.4s ease;
}

.notif-wizard-step-text {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
    animation: notifWizardIn 0.45s ease;
}

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

.notif-wizard-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.notif-wizard-option-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notif-wizard-option-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .notif-wizard-option-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.notif-wizard-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    text-align: left;
    padding: 0.95rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.85rem;
    background: #fff;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.notif-wizard-option:hover {
    border-color: color-mix(in srgb, var(--primary-color, #0d6efd) 40%, #e2e8f0);
    background: #f8fafc;
    transform: translateY(-1px);
}

.notif-wizard-option.is-selected {
    border-color: var(--primary-color, #0d6efd);
    background: color-mix(in srgb, var(--primary-color, #0d6efd) 7%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #0d6efd) 18%, transparent);
}

.notif-wizard-option.is-disabled,
.notif-wizard-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: none;
}

.notif-wizard-option.is-disabled:hover,
.notif-wizard-option:disabled:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
    transform: none;
}

.notif-wizard-option-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fff7ed;
    color: #c2410c;
    line-height: 1.3;
}

.notif-wizard-option-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #475569;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.notif-wizard-option-icon.is-email {
    background: #eff6ff;
    color: #1d4ed8;
}

.notif-wizard-option-icon.is-sms {
    background: #ecfdf5;
    color: #047857;
}

.notif-wizard-option-icon.is-internal {
    background: #f1f5f9;
    color: #334155;
}

.notif-wizard-option-icon.is-whatsapp {
    background: #f0fdf4;
    color: #15803d;
}

.notif-wizard-option-label {
    font-weight: 600;
    font-size: 0.92rem;
    color: #0f172a;
    line-height: 1.3;
}

.notif-wizard-option-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
}

.notif-wizard-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.notif-wizard-preset {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.notif-wizard-preset:hover {
    border-color: color-mix(in srgb, var(--primary-color, #0d6efd) 35%, #e2e8f0);
    background: #f8fafc;
}

.notif-wizard-preset.is-selected {
    border-color: var(--primary-color, #0d6efd);
    background: color-mix(in srgb, var(--primary-color, #0d6efd) 10%, #fff);
    color: var(--primary-color, #0d6efd);
}

.notif-wizard-instant {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid #99f6e4;
    color: #0f766e;
    font-size: 0.95rem;
    line-height: 1.5;
}

.notif-wizard-instant-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #14b8a6;
    color: #fff;
    font-size: 1.05rem;
}

.notif-rules-preset-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e3a5f;
    font-size: 0.9rem;
    line-height: 1.45;
}

.notif-rules-preset-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.notif-rules-preset-head i {
    color: #2563eb;
}

.notif-rules-preset-list {
    padding-left: 1.15rem;
    margin-bottom: 0;
}

.notif-rules-preset-list li + li {
    margin-top: 0.35rem;
}

.notif-operational-name {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

#operationalTable td {
    vertical-align: top;
}

#operationalTable colgroup .notif-op-col-toggle { width: 2.5rem; }
#operationalTable colgroup .notif-op-col-name { width: 42%; }
#operationalTable colgroup .notif-op-col-channel { width: 12%; }
#operationalTable colgroup .notif-op-col-active { width: 12%; }
#operationalTable colgroup .notif-op-col-status { width: 16%; }
#operationalTable colgroup .notif-op-col-actions { width: 8%; }

.notif-op-group-header {
    cursor: pointer;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.notif-op-group-header:hover {
    background: #f1f5f9;
}

.notif-op-group-header.is-expanded {
    background: #eef2ff;
    border-bottom-color: transparent;
}

.notif-op-group-header.is-expanded .notif-group-toggle i {
    transform: rotate(90deg);
}

.notif-op-group-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.15rem;
    min-height: 2.4rem;
}

.notif-op-group-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.notif-op-group-title {
    font-weight: 700;
    color: #0f172a;
}

.notif-op-group-count {
    font-size: 0.8rem;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.notif-op-columns-header td {
    background: #f8fafc;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.notif-op-detail td.notif-op-col-toggle {
    border-right: 2px solid #c7d2fe;
}

.notif-wizard-vars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.notif-wizard-vars-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-right: 0.15rem;
}

.notif-wizard-var {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    border-radius: 0.4rem;
    padding: 0.2rem 0.45rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.notif-wizard-var:hover {
    border-color: #94a3b8;
    background: #fff;
}

.notif-wizard-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.notif-wizard-review-item,
.notif-wizard-review-body {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.notif-wizard-review-body {
    margin-top: 0.75rem;
}

.notif-wizard-review-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.notif-wizard-review-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}

.notif-wizard-review-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #334155;
}

.notif-wizard-footer {
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.notif-wizard-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .notif-wizard-option-grid {
        grid-template-columns: 1fr;
    }

    .notif-wizard-review-grid {
        grid-template-columns: 1fr;
    }

    .notif-wizard-step-head {
        flex-direction: column;
        gap: 0.75rem;
    }

    .notif-wizard-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .notif-wizard-footer-actions {
        margin-left: 0;
        width: 100%;
    }

    .notif-wizard-footer-actions .btn {
        width: 100%;
    }
}

.amount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}

.amount-badge-completed { background: #ecfdf5; color: #047857; }
.amount-badge-pending { background: #fff7ed; color: #c2410c; }
.amount-badge-zero { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.amount-badge-failed { background: #fef2f2; color: #b91c1c; }
.amount-badge-default { background: #f1f5f9; color: #475569; }

.capacity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #eff6ff;
    color: #1d4ed8;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    background: #f5f3ff;
    color: #6d28d9;
}

.gateway-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
}

.specialty-tag {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    margin: 0.1rem 0.15rem 0.1rem 0;
    border-radius: 999px;
    font-size: 0.75rem;
    background: #fdf4ff;
    color: #7e22ce;
}

.apt-row td {
    vertical-align: middle;
}

.apt-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}

.apt-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.apt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.apt-status-draft { background: #f1f5f9; color: #64748b; }
.apt-status-pending { background: #fff7ed; color: #c2410c; }
.apt-status-confirmed { background: #ecfdf5; color: #047857; }
.apt-status-completed { background: #eff6ff; color: #1d4ed8; }
.apt-status-cancelled { background: #fef2f2; color: #b91c1c; }
.apt-status-expired { background: #f8fafc; color: #475569; }
.apt-status-noshow { background: #fdf4ff; color: #7e22ce; }
.apt-status-reschedule { background: #fff1f2; color: #be123c; }

/* Emergency rescheduling */
.resched-emergency-card .card-header {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-bottom: 1px solid #fde68a;
}

.emergency-declare-dialog {
    max-width: 480px;
}

.emergency-declare-header {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.emergency-declare-body {
    padding: 1.25rem 1.5rem 1rem;
}

.emergency-declare-icon-wrap {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffbeb;
    border: 2px solid #fde68a;
    color: #d97706;
    font-size: 1.25rem;
}

.emergency-declare-lead {
    text-align: center;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
}

.emergency-declare-summary {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
}

.emergency-declare-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
}

.emergency-declare-row--highlight {
    padding-top: 0.55rem;
    margin-top: 0.15rem;
    border-top: 1px dashed #e2e8f0;
}

.emergency-declare-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.emergency-declare-label i {
    width: 1rem;
    text-align: center;
    color: #94a3b8;
}

.emergency-declare-value {
    text-align: right;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
}

.emergency-declare-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid #fde68a;
}

.emergency-declare-notice {
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.emergency-declare-notice--warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.emergency-declare-notice--muted {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.emergency-declare-notice--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.emergency-declare-footer {
    justify-content: center;
    gap: 0.5rem;
}

.emergency-declare-footer .btn {
    min-width: 8rem;
    font-weight: 600;
}

.emergency-declare-footer .btn-warning {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.reschedule-pending-list {
    display: flex;
    flex-direction: column;
}

.reschedule-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

.reschedule-pending-item:hover {
    background: #f8fafc;
}

.reschedule-pending-item:last-child {
    border-bottom: none;
}

.reschedule-pending-ref {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.reschedule-pending-client {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.reschedule-pending-original,
.reschedule-pending-reason {
    font-size: 0.875rem;
}

.reschedule-pending-reason {
    margin-top: 0.35rem;
    color: #92400e;
}

.reschedule-pending-actions {
    flex-shrink: 0;
}

.reschedule-info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

@media (max-width: 768px) {
    .reschedule-pending-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .reschedule-pending-actions {
        width: 100%;
    }
    .reschedule-pending-actions .btn {
        width: 100%;
    }
}

/* Appointment edit modal */
.apt-modal {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

.apt-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--sidebar-color, #1e293b) 0%, #334155 100%);
    border: none;
    color: #fff;
}

.apt-modal-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.apt-modal-logo-wrap {
    flex-shrink: 0;
}

.apt-modal-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.35rem;
}

.apt-modal-logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.12);
    border: 2px dashed rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    color: rgba(255, 255, 255, 0.85);
}

.apt-modal-logo-placeholder i {
    font-size: 1.25rem;
}

.apt-modal-logo-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

.apt-modal-headings {
    min-width: 0;
}

.apt-modal-clinic {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.15rem;
}

.apt-modal-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.apt-modal-meta {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.apt-modal-ref {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
}

.apt-modal-client {
    font-weight: 500;
}

.apt-modal-client-card-btn {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    line-height: 1.35;
    vertical-align: middle;
}

.apt-modal-client-card-btn:hover,
.apt-modal-client-card-btn:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.65);
}

.apt-modal-phone {
    font-weight: 500;
    white-space: nowrap;
}

.apt-modal-phone i {
    opacity: 0.85;
}

.apt-modal-type {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
}

.apt-modal-meta-sep {
    opacity: 0.5;
}

.apt-modal-body {
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
}

.apt-modal-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 0.85rem;
    line-height: 1.45;
}

.apt-modal-notice i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.apt-client-summary {
    margin-bottom: 1rem;
}

.apt-client-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.apt-client-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    min-height: 4.25rem;
}

.apt-client-stat-therapies {
    grid-column: 1 / -1;
    align-items: flex-start;
}

.apt-client-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.apt-client-stat-visits .apt-client-stat-icon {
    background: #eff6ff;
    color: #2563eb;
}

.apt-client-stat-paid .apt-client-stat-icon {
    background: #ecfdf5;
    color: #059669;
}

.apt-client-stat-therapies .apt-client-stat-icon {
    background: #f5f3ff;
    color: #7c3aed;
    margin-top: 0.1rem;
}

.apt-client-stat-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.apt-client-stat-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
}

.apt-client-stat-label-top {
    margin-top: 0;
    margin-bottom: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}

.apt-client-stat-body-wide {
    min-width: 0;
    flex: 1;
}

.apt-client-therapy-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.apt-client-therapy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: #f8fafc;
}

.apt-client-therapy-chip-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.apt-client-therapy-chip-count {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.75;
}

.apt-pending-payments {
    margin-top: 0.65rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.apt-pending-payments-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #b45309;
    margin-bottom: 0.5rem;
}

.apt-pending-payments-head i {
    font-size: 0.95rem;
}

.apt-pending-payments-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.apt-pending-payments-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    font-size: 0.82rem;
    color: #78350f;
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.65);
}

.apt-pending-payments-list li.apt-pending-current {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    font-weight: 600;
}

.apt-pending-payments-list code {
    font-size: 0.75rem;
    color: #92400e;
    background: rgba(251, 191, 36, 0.2);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

.apt-pending-payment-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid #f59e0b;
    border-radius: 0.4rem;
    background: #fff;
    color: #b45309;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.apt-pending-payment-link:hover,
.apt-pending-payment-link:focus {
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

.apt-payment-section-highlight {
    animation: apt-payment-pulse 2.2s ease-out;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45);
}

@keyframes apt-payment-pulse {
    0%, 15% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.55);
        border-color: #f59e0b;
    }
    100% {
        box-shadow: none;
        border-color: #e2e8f0;
    }
}

@media (max-width: 575.98px) {
    .apt-pending-payment-link {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .apt-client-summary-grid {
        grid-template-columns: 1fr;
    }

    .apt-client-stat-therapies {
        grid-column: auto;
    }
}

.apt-form-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.apt-form-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.85rem;
}

.apt-form-section-title i {
    color: var(--primary-color, #0d6efd);
    font-size: 0.85rem;
}

.apt-form-section .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.3rem;
}

.apt-form-section .form-control,
.apt-form-section .form-select {
    border-color: #e2e8f0;
    font-size: 0.9rem;
}

.apt-form-section .form-control:focus,
.apt-form-section .form-select:focus {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12);
}

.apt-lookup-group .apt-lookup-btn,
.apt-phone-lookup-group .apt-phone-lookup-btn {
    border-color: #e2e8f0;
    color: #64748b;
    background: #f8fafc;
    min-width: 2.65rem;
}

.apt-lookup-group .apt-lookup-btn:hover:not(:disabled),
.apt-lookup-group .apt-lookup-btn:focus:not(:disabled),
.apt-phone-lookup-group .apt-phone-lookup-btn:hover:not(:disabled),
.apt-phone-lookup-group .apt-phone-lookup-btn:focus:not(:disabled) {
    color: var(--primary-color, #0d6efd);
    background: #fff;
    border-color: var(--primary-color, #0d6efd);
}

.apt-lookup-group .apt-lookup-btn:disabled,
.apt-phone-lookup-group .apt-phone-lookup-btn:disabled {
    opacity: 0.38;
    color: #94a3b8;
    pointer-events: none;
}

.apt-form-section .form-control.is-autocompleted {
    background: #f0f7ff;
}

.apt-name-lookup-modal {
    border: none;
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}

.apt-name-lookup-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: min(60vh, 28rem);
    overflow: auto;
}

.apt-name-lookup-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    background: #f8fafc;
}

.apt-name-lookup-info {
    min-width: 0;
    flex: 1;
}

.apt-name-lookup-name {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.apt-name-lookup-meta {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #64748b;
}

.apt-name-lookup-accept {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #15803d;
}

.apt-name-lookup-accept:hover,
.apt-name-lookup-accept:focus {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.apt-name-lookup-empty {
    text-align: center;
    color: #64748b;
    padding: 1.5rem 0.75rem;
}

.apt-sms-switch-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 2.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    background: #f8fafc;
}

.apt-sms-switch-wrap.is-unavailable {
    background: #fff7ed;
    border-color: #fed7aa;
}

.apt-sms-switch {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    min-height: 1.5rem;
    padding-left: 2.6em;
}

.apt-sms-switch .form-check-input {
    width: 2.35em;
    height: 1.25em;
    margin-top: 0;
    cursor: pointer;
}

.apt-sms-switch .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.apt-sms-switch .form-check-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

.apt-sms-switch-wrap.is-unavailable .form-check-label {
    color: #9a3412;
    cursor: not-allowed;
}

.apt-sms-switch-hint {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #c2410c;
}

.apt-modal-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

.apt-modal-footer-actions {
    display: flex;
    gap: 0.5rem;
}

.apt-modal-delete {
    font-weight: 600;
}

.apt-delete-modal {
    border: none;
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}

.apt-delete-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.apt-modal-save {
    min-width: 8rem;
    font-weight: 600;
}

/* Confirm / delete modal */
.confirm-modal-dialog {
    max-width: 420px;
}

.confirm-modal-header--danger {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
}

.confirm-modal-header--warning {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.confirm-modal-body {
    text-align: center;
    padding: 1.5rem 1.75rem 1.25rem;
}

.confirm-modal-icon-wrap {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2;
    border: 2px solid #fecaca;
    color: #dc2626;
    font-size: 1.35rem;
}

.confirm-modal-header--danger + .confirm-modal-body .confirm-modal-icon-wrap {
    background: #fff1f2;
    border-color: #fda4af;
    color: #e11d48;
}

.confirm-modal-header--warning + .confirm-modal-body .confirm-modal-icon-wrap {
    background: #fffbeb;
    border-color: #fde68a;
    color: #d97706;
}

.confirm-modal-message {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.55;
}

.confirm-modal-footer {
    justify-content: center;
    gap: 0.5rem;
}

.confirm-modal-footer .btn {
    min-width: 7.5rem;
    font-weight: 600;
}

.confirm-modal-ok {
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

.confirm-modal-ok.btn-warning {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

/* Client card create modal */
.client-card-create-dialog {
    max-width: 32rem;
}

.client-card-create-header {
    background: linear-gradient(135deg, #0d9488 0%, #0d6efd 100%);
}

.client-card-create-body {
    padding-top: 1.25rem;
}

.client-card-create-subtitle {
    font-size: 0.8rem;
    opacity: 0.9;
}

.client-card-create-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f0fdfa 0%, #eff6ff 100%);
    border: 1px solid #ccfbf1;
    margin-bottom: 1rem;
}

.client-card-create-avatar {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6, #0d6efd);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.client-card-create-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.client-card-create-contact {
    font-size: 0.85rem;
    color: #475569;
    margin-top: 0.2rem;
}

.client-card-create-contact i {
    width: 1rem;
    text-align: center;
    margin-right: 0.15rem;
    color: #64748b;
}

.client-card-create-sep {
    margin: 0 0.35rem;
    color: #cbd5e1;
}

.client-card-create-apt-pill {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.client-card-create-apt-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0d6efd;
    border: 1px solid #dbeafe;
    flex-shrink: 0;
}

.client-card-create-apt-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.client-card-create-apt-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.client-card-create-apt-value code {
    font-size: 0.82rem;
    color: #475569;
    background: transparent;
}

.client-card-create-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.client-card-create-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: #334155;
    padding: 0.35rem 0;
}

.client-card-create-features li i {
    color: #0d9488;
    margin-top: 0.15rem;
    width: 1rem;
    text-align: center;
}

.client-card-create-note {
    font-size: 0.8rem;
    color: #64748b;
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.client-card-create-note i {
    color: #d97706;
    margin-right: 0.35rem;
}

.client-card-create-footer .client-card-create-submit {
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(25, 135, 84, 0.3);
}

.client-card-create-submit:disabled {
    opacity: 0.7;
}

/* Clients section */
.clients-page {
    --clients-accent: #0d9488;
    --clients-accent-2: #0d6efd;
}

.clientele-page {
    --clients-accent: #7c3aed;
    --clients-accent-2: #2563eb;
}

.clients-hero {
    background: linear-gradient(135deg, #f0fdfa 0%, #eff6ff 55%, #f8fafc 100%);
    border: 1px solid #ccfbf1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.clients-hero-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
}

.clients-hero-text {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 16rem;
}

.clients-hero-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--clients-accent), var(--clients-accent-2));
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.28);
}

.clients-hero-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.clients-hero-subtitle {
    font-size: 0.88rem;
    color: #64748b;
    max-width: 36rem;
    line-height: 1.45;
}

.clients-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.clients-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5.5rem;
    padding: 0.55rem 1rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.clients-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.clients-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 0.1rem;
}

.clients-filter-card {
    border-color: #e2e8f0;
}

.clients-search-group .input-group-text {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.clients-table-card {
    border-color: #e2e8f0;
    overflow: hidden;
}

.clients-table-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.85rem 1.15rem;
}

.clients-data-table thead {
    background: #f8fafc;
}

.clients-data-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.7rem 1rem;
}

.clients-data-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom-color: #f1f5f9;
}

.clients-data-table tbody tr:hover {
    background: #f8fafc;
}

.clients-table-row {
    cursor: pointer;
}

.clients-table-row:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.clients-row-client {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.clients-row-avatar {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6, #3b82f6);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.clients-row-name {
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
}

.clients-row-meta {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 0.1rem;
}

.clients-row-contact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}

.clients-row-contact span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #475569;
}

.clients-row-contact i {
    width: 0.9rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.78rem;
}

.clients-visit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
}

.clients-visit-badge--zero {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #e2e8f0;
    font-weight: 600;
}

.clients-paid-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}

.clients-paid-badge--paid {
    color: #15803d;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.clients-paid-badge--pending {
    color: #b45309;
    background: #ffedd5;
    border-color: #fed7aa;
}

.clients-paid-badge--zero {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #e2e8f0;
    font-weight: 600;
}

.clients-open-btn {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    border-radius: 0.45rem;
}

.clients-empty {
    text-align: center;
    padding: 3rem 1.5rem 3.5rem;
}

.clients-empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #94a3b8;
    background: #f1f5f9;
}

.clients-empty h6 {
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.5rem;
}

.clients-empty p {
    font-size: 0.88rem;
    max-width: 28rem;
    margin: 0 auto;
    line-height: 1.5;
}

/* Client card view modal */
.client-card-view-header {
    background: linear-gradient(135deg, #0d9488 0%, #0d6efd 100%);
}

.client-card-view-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

@media (max-width: 575.98px) {
    .clients-hero-body {
        padding: 1rem;
    }

    .clients-hero-stats {
        width: 100%;
    }

    .clients-stat-pill {
        flex: 1;
        min-width: 0;
    }

    .client-card-profile-stats {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .client-card-profile-stat {
        flex: 1;
    }
}

.client-card-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.client-card-profile-avatar {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6, #0d6efd);
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.22);
}

.client-card-profile-main {
    flex: 1;
    min-width: 10rem;
}

.client-card-profile-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}

.client-card-profile-contact {
    font-size: 0.85rem;
    color: #64748b;
}

.client-card-profile-phone i,
.client-card-profile-email i {
    margin-right: 0.25rem;
    opacity: 0.75;
}

.client-card-profile-sep {
    margin: 0 0.35rem;
    color: #cbd5e1;
}

.client-card-profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
    justify-content: flex-end;
}

.client-card-profile-stat {
    text-align: center;
    padding: 0.45rem 0.7rem;
    border-radius: 0.55rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    min-width: 4.25rem;
}

.client-card-profile-stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.client-card-profile-stat-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 0.1rem;
}

.client-card-view-subtitle {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Ξ§ΞµΞΉΟΞΏΞΊΞ―Ξ½Ξ·Ο„ΞµΟ‚ Ο€Ξ»Ξ·ΟΟ‰ΞΌΞ­Ο‚ */
.payments-stat-card {
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

.payments-stat-card-muted {
    background: #f8fafc;
}

.payments-stat-card-pending {
    border-color: #fcd34d !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
}

.payments-stat-card-pending .payments-stat-value {
    color: #b45309;
}

.payments-stat-card-month {
    border-color: #93c5fd !important;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.payments-stat-card-month .payments-stat-value {
    color: #1d4ed8;
}

.payments-stat-card-cash {
    border-color: #6ee7b7 !important;
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
}

.payments-stat-card-cash .payments-stat-value {
    color: #047857;
}

.payments-stat-card-pos {
    border-color: #93c5fd !important;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.payments-stat-card-pos .payments-stat-value {
    color: #1d4ed8;
}

.payments-stats-row > [class*="col-"] {
    min-width: 11rem;
}

@media (min-width: 1200px) {
    .payments-stats-row {
        display: flex;
        flex-wrap: nowrap;
    }

    .payments-stats-row > [class*="col-"] {
        flex: 1 1 0;
        max-width: none;
    }
}

.payments-month-picker {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.payments-month-picker .form-select {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e3a8a;
    border-radius: 0.55rem;
    border-color: #bfdbfe;
    background-color: #fff;
    box-shadow: none;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.payments-month-picker .form-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.18);
}

.payments-tabs .nav-link {
    font-weight: 600;
    color: #64748b;
}

.payments-tabs .nav-link.active {
    color: #0f172a;
}

.payments-record-btn {
    font-weight: 600;
    white-space: nowrap;
}

.payments-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.payments-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.payments-stat-hint {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
}

/* Fast Payments */
.fast-payments-intro h1 {
    font-weight: 700;
    color: #0f172a;
}

.fast-payment-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: none;
    height: 100%;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.fast-payment-card:hover,
.fast-payment-card:focus-visible {
    border-color: var(--fp-color, #0d6efd);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    outline: none;
}

.fast-payment-card-accent {
    height: 4px;
    background: var(--fp-color, #0d6efd);
}

.fast-payment-card .card-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

.fast-payment-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.fast-payment-card-meta {
    font-size: 0.85rem;
    color: #64748b;
}

.fast-payment-card-action {
    margin-top: 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fp-color, #0d6efd);
}

.fast-payment-type-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.fast-payment-type-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0d6efd;
    flex-shrink: 0;
}

.fast-payment-method-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.fast-payment-method-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    font-weight: 600;
}

#fastPaymentMethodCash:checked + .fast-payment-method-btn {
    background-color: #10b981;
    border-color: #10b981;
    color: #fff;
}

#fastPaymentMethodPos:checked + .fast-payment-method-btn {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.client-visit-payment .amount-badge {
    font-size: 0.78rem;
}

.client-card-visits-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.15rem 1.15rem;
}

.client-card-visits-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #f1f5f9;
}

.client-card-visits-heading i {
    color: var(--clients-accent);
}

.client-card-visits-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    background: #ccfbf1 !important;
    color: #0f766e !important;
}

.client-card-visits-timeline {
    position: relative;
}

.client-card-visits-timeline:empty::before,
.client-card-visits-empty {
    display: block;
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

.client-visit-card {
    position: relative;
    margin-bottom: 0;
    padding: 0 0 1.25rem 1.75rem;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.client-visit-card::before {
    content: '';
    position: absolute;
    left: 0.42rem;
    top: 0.55rem;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.client-visit-card:last-child {
    padding-bottom: 0;
}

.client-visit-card:last-child::before {
    display: none;
}

.client-visit-card-inner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.client-visit-card:hover .client-visit-card-inner {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.client-visit-card-dot {
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px currentColor;
    z-index: 1;
}

.client-visit-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.client-visit-card-date {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.client-visit-card-time {
    font-weight: 500;
    color: #64748b;
    font-size: 0.85rem;
    margin-left: 0.35rem;
}

.client-visit-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
    color: #64748b;
    margin-bottom: 0.85rem;
}

.client-visit-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.client-visit-card-ref code {
    font-size: 0.78rem;
    color: #64748b;
    background: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    border: 1px solid #e2e8f0;
}

.client-visit-comment-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.client-visit-comment-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.45rem;
}

.client-visit-comment-label i {
    color: var(--clients-accent);
}

.client-visit-comment {
    border-color: #e2e8f0;
    font-size: 0.88rem;
    resize: vertical;
    min-height: 4rem;
}

.client-visit-comment:focus {
    border-color: #5eead4;
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15);
}

.client-visit-comment-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}

.client-visit-save-btn {
    font-weight: 600;
    font-size: 0.8rem;
}

.client-visit-card--has-comment .client-visit-card-inner {
    border-left: 3px solid var(--visit-accent, #0d9488);
}

/* Availability section */
.avail-schedule-table .avail-schedule-row td {
    vertical-align: middle;
}

.avail-row-sat {
    background: rgba(239, 246, 255, 0.65);
}

.avail-row-sun {
    background: rgba(253, 244, 255, 0.65);
}

.avail-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.avail-row-sat .avail-day-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.avail-row-sun .avail-day-badge {
    background: #f3e8ff;
    color: #7e22ce;
}

.avail-slots-cell {
    min-width: 14rem;
}

.avail-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.avail-slot + .avail-slot {
    border-top: 1px dashed #e2e8f0;
    margin-top: 0.2rem;
    padding-top: 0.35rem;
}

.avail-slot-label {
    flex: 0 0 4.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.avail-slot-times {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
}

.avail-slot-sep {
    color: #94a3b8;
    font-weight: 600;
}

.avail-schedule-table .form-control-sm {
    max-width: 7.25rem;
    min-width: 5.5rem;
}

/* Dashboard */
.dash-topbar { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }

.dashboard { max-width: 1400px; }

/* Widget toggle headers */
.dash-widget-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem 0.75rem !important;
}

.dash-widget-header-text {
    flex: 1;
    min-width: 0;
}

.dash-widget-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.dash-period-select {
    min-width: 6.75rem;
    max-width: 7.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 1.65rem 0.25rem 0.55rem;
    border-color: #e2e8f0;
    color: #475569;
    cursor: pointer;
    border-radius: 0.45rem;
    background-color: #f8fafc;
}

.dash-period-select:hover,
.dash-period-select:focus {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.1);
}

.dash-chart-card.dash-chart-loading {
    opacity: 0.6;
    pointer-events: none;
}

.dash-chart-period-hint {
    font-size: 0.78rem;
    margin-bottom: 0.65rem !important;
}

.dash-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 180px;
    color: #94a3b8;
    font-size: 0.88rem;
    text-align: center;
    padding: 1rem;
}

.dash-chart-empty i {
    font-size: 1.75rem;
    opacity: 0.45;
}

.dash-toggle-btn {
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.15s;
    flex-shrink: 0;
}

.dash-toggle-btn:hover {
    background: #f8fafc;
    color: var(--primary-color, #0d6efd);
    border-color: #cbd5e1;
}

.dash-toggle-btn i {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.dash-widget.is-collapsed .dash-toggle-btn i {
    transform: rotate(180deg);
}

.dash-widget.is-collapsed .dash-widget-header {
    border-bottom: none;
}

.dash-header .dash-widget-header {
    background: linear-gradient(135deg, var(--sidebar-color, #1e293b) 0%, #334155 100%);
    border-radius: 1rem 1rem 0 0;
    padding: 0.9rem 1.25rem !important;
}

.dash-header .dash-widget-header .dash-card-title,
.dash-header .dash-widget-header .dash-card-title i {
    color: #fff;
}

.dash-header .dash-widget-header .dash-card-subtitle {
    color: rgba(255, 255, 255, 0.6) !important;
}

.dash-header .dash-toggle-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
}

.dash-header .dash-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.dash-header-toolbar-title {
    font-size: 1rem;
    margin-bottom: 0;
}

.dash-header-toolbar-sub {
    font-size: 0.72rem;
    margin-top: 0.1rem;
}

.dash-header .dash-header-body {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dash-kpi-header {
    padding: 0.65rem 0.75rem !important;
}

.dash-kpi-header-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.25;
}

.dash-kpi-icon-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.dash-kpi-header-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    display: none;
}

.dash-kpi.is-collapsed .dash-kpi-header-value {
    display: inline-block;
}

.dash-kpi.is-collapsed .dash-kpi-header {
    padding-bottom: 0.65rem !important;
}

#dashboardKpis > .col {
    display: flex;
}

#dashboardKpis .dash-kpi {
    flex: 1;
    width: 100%;
}

#dashboardKpis .dash-kpi-header-label span:last-child {
    min-width: 0;
    line-height: 1.2;
}

.dash-header {
    background: linear-gradient(135deg, var(--sidebar-color, #1e293b) 0%, #334155 55%, #475569 100%);
    border-radius: 1rem !important;
    overflow: hidden;
}

.dash-header-brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.dash-logo-wrap { flex-shrink: 0; }

.dash-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 0.85rem;
    background: #fff;
    padding: 0.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dash-logo-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    color: rgba(255, 255, 255, 0.85);
}

.dash-logo-placeholder i { font-size: 1.5rem; }
.dash-logo-placeholder span {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.dash-header-info { min-width: 0; }

.dash-clinic-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.15rem;
}

.dash-clinic-name {
    margin: 0 0 0.2rem;
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.dash-clinic-tagline {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
}

.dash-clinic-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
}

.dash-clinic-contacts span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.dash-clinic-contacts i {
    opacity: 0.65;
    width: 0.9rem;
    text-align: center;
}

.dash-header-meta {
    text-align: right;
    flex-shrink: 0;
}

.dash-greeting-text {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.15rem;
}

.dash-date {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.75rem;
}

.dash-header-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.dash-action-btn {
    font-weight: 600;
    font-size: 0.82rem;
    border-radius: 0.5rem;
}

.dash-kpi {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem !important;
    transition: transform 0.15s, box-shadow 0.15s;
}

.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dash-kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-bottom: 0.65rem;
}

.dash-kpi-icon-primary { background: #eff6ff; color: var(--primary-color, #0d6efd); }
.dash-kpi-icon-warning { background: #fff7ed; color: #f59e0b; }
.dash-kpi-icon-info { background: #ecfeff; color: #0891b2; }
.dash-kpi-icon-success { background: #ecfdf5; color: #10b981; }
.dash-kpi-icon-accent { background: #f0fdfa; color: var(--accent-color, #20c997); }
.dash-kpi-icon-leads { background: #fdf4ff; color: #a855f7; }

.dash-kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.1;
}

.dash-kpi-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.2rem;
}

.dash-kpi-trend {
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.15rem;
}

.dash-kpi-trend.trend-up { color: #10b981; }
.dash-kpi-trend.trend-down { color: #ef4444; }

.dash-payments-card .dash-card-title i {
    color: #059669;
}

.dash-payments-card {
    border-radius: 0.85rem !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fffb 100%);
    border: 1px solid #d1fae5 !important;
}

.dash-payment-kpi {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    height: 100%;
}

.dash-payment-kpi-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dash-payment-kpi-total .dash-payment-kpi-icon {
    background: #ecfdf5;
    color: #059669;
}

.dash-payment-kpi-count .dash-payment-kpi-icon {
    background: #eff6ff;
    color: #2563eb;
}

.dash-payment-kpi-avg .dash-payment-kpi-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

.dash-payment-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.dash-payment-kpi-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.dash-payment-chart-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1rem 0.75rem;
}

.dash-payment-chart-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.75rem;
}

.dash-payment-chart-heading i {
    color: #059669;
}

.dash-payment-trend-wrap {
    min-height: 220px;
}

.dash-payment-therapy-wrap {
    min-height: 220px;
}

.dash-chart-card,
.dash-panel {
    border-radius: 0.85rem !important;
}

.dash-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.dash-card-title i {
    color: var(--primary-color, #0d6efd);
    font-size: 0.9rem;
}

.dash-card-subtitle {
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.dash-chart-wrap {
    position: relative;
    height: 220px;
}

.dash-chart-donut {
    height: 180px;
    max-width: 200px;
    margin: 0 auto;
}

.dash-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    justify-content: center;
}

.dash-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
}

.dash-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-legend-item strong {
    color: #1e293b;
    font-weight: 700;
}

.dash-leads-badge {
    background: #fdf4ff;
    color: #a855f7;
    font-size: 0.82rem;
    padding: 0.35rem 0.65rem;
}

.dash-leads-list,
.dash-schedule-list,
.dash-recent-list {
    max-height: 380px;
    overflow-y: auto;
}

.dash-lead-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

.dash-lead-item:last-child { border-bottom: none; }

.dash-lead-item:hover {
    background: #f8fafc;
    color: inherit;
}

.dash-lead-item.lead-priority-high { border-left: 3px solid #f59e0b; }
.dash-lead-item.lead-priority-medium { border-left: 3px solid #94a3b8; }

.dash-lead-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.lead-priority-high .dash-lead-icon {
    background: #fff7ed;
    color: #f59e0b;
}

.dash-lead-body { flex: 1; min-width: 0; }

.dash-lead-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.dash-lead-top strong {
    font-size: 0.9rem;
    color: #1e293b;
}

.dash-lead-type {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

.lead-priority-high .dash-lead-type {
    background: #fff7ed;
    color: #c2410c;
}

.dash-lead-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    font-size: 0.78rem;
    color: #94a3b8;
}

.dash-lead-meta code {
    font-size: 0.72rem;
    background: #f8fafc;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

.dash-lead-arrow {
    color: #cbd5e1;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.dash-schedule-item,
.dash-recent-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.dash-schedule-item:last-child,
.dash-recent-item:last-child { border-bottom: none; }

.dash-schedule-time {
    flex-shrink: 0;
    width: 3.25rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary-color, #0d6efd);
    line-height: 1.2;
}

.dash-schedule-time small {
    display: block;
    font-weight: 500;
    font-size: 0.68rem;
    color: #94a3b8;
}

.dash-schedule-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dash-schedule-body strong,
.dash-recent-body strong {
    font-size: 0.88rem;
    color: #1e293b;
}

.dash-recent-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-recent-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: 0.88rem;
}

.dash-empty i {
    font-size: 1.75rem;
    opacity: 0.5;
}

.dash-loading {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
}

@media (max-width: 991.98px) {
    .dash-header-meta {
        text-align: left;
        width: 100%;
    }

    .dash-header-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .dash-kpi-value { font-size: 1.35rem; }
    .dash-clinic-name { font-size: 1.2rem; }
}

/* Permissions matrix */
.perm-panel {
    border: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.perm-panel-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 1.25rem 1.5rem;
}

.perm-panel-title {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.perm-panel-title > i {
    font-size: 1.35rem;
    color: var(--primary-color, #0d6efd);
    margin-top: 0.15rem;
}

.perm-panel-subtitle {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.perm-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr auto;
    gap: 1rem 1.25rem;
    align-items: end;
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}

.perm-role-picker .form-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.perm-role-info {
    min-width: 0;
}

.perm-role-badge {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    height: 100%;
}

.perm-role-badge > i {
    color: var(--primary-color, #0d6efd);
    margin-top: 0.15rem;
}

.perm-role-desc {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.perm-summary {
    text-align: right;
    padding: 0.5rem 0.15rem;
}

.perm-summary-count {
    display: block;
    font-size: 1.35rem;
    line-height: 1.1;
    color: #0f172a;
}

.perm-summary-label {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.perm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 3rem 1rem;
    color: #94a3b8;
}

.perm-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.perm-module-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.perm-module-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.perm-module-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.95rem 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #eef2f7;
}

.perm-module-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary-color, #0d6efd);
    flex-shrink: 0;
}

.perm-module-title {
    font-weight: 600;
    color: #0f172a;
}

.perm-module-desc {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 0.2rem;
    line-height: 1.35;
}

.perm-module-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.perm-module-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.perm-module-body {
    padding: 0.35rem 0;
}

.perm-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.perm-switch-row:last-child {
    border-bottom: 0;
}

.perm-switch-copy {
    min-width: 0;
    flex: 1;
}

.perm-switch-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.perm-switch-label {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.92rem;
}

.perm-switch-hint {
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.35;
}

.perm-switch-control {
    flex-shrink: 0;
    margin: 0;
    padding-left: 2.75em;
    min-height: 1.5rem;
}

.perm-switch-control .form-check-input {
    width: 2.5em;
    height: 1.35em;
    cursor: pointer;
    margin-top: 0;
}

.perm-action-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    line-height: 1.2;
}

.perm-action-info { background: #e0f2fe; color: #0369a1; }
.perm-action-success { background: #dcfce7; color: #15803d; }
.perm-action-primary { background: #dbeafe; color: #1d4ed8; }
.perm-action-danger { background: #fee2e2; color: #b91c1c; }
.perm-action-warning { background: #fef3c7; color: #b45309; }
.perm-action-secondary { background: #f1f5f9; color: #475569; }

.perm-panel-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

.perm-footer-hint {
    color: #64748b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

@media (max-width: 991.98px) {
    .perm-toolbar {
        grid-template-columns: 1fr;
    }

    .perm-summary {
        text-align: left;
    }

    .perm-modules {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .perm-module-header {
        grid-template-columns: auto 1fr;
    }

    .perm-module-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .perm-switch-row {
        align-items: flex-start;
    }
}

.admin-global-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.admin-global-loader.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.admin-global-loader-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
    min-width: 180px;
}

.admin-global-loader-gif {
    display: block;
    width: 64px;
    height: 64px;
}

.admin-global-loader-text {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #334155;
}

/* —— Setup onboarding guide —— */
.topbar-onboarding-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.topbar-onboarding-btn:hover,
.topbar-onboarding-btn:focus {
    color: var(--primary-color, #0d6efd);
    border-color: color-mix(in srgb, var(--primary-color, #0d6efd) 35%, #e2e8f0);
    background: color-mix(in srgb, var(--primary-color, #0d6efd) 8%, #fff);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.onboarding-modal .onboarding-modal-body {
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 1.75rem;
}

.onboarding-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}

.onboarding-progress-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #cbd5e1;
    transition: width 0.25s ease, background 0.25s ease;
}

.onboarding-progress-dot.is-active {
    width: 1.35rem;
    background: var(--primary-color, #0d6efd);
}

.onboarding-progress-dot.is-done {
    background: color-mix(in srgb, var(--primary-color, #0d6efd) 55%, #94a3b8);
}

.onboarding-step-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}

.onboarding-step-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    background: linear-gradient(145deg, var(--primary-color, #0d6efd) 0%, #1d4ed8 100%);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
    animation: onboardingIconIn 0.45s ease;
}

.onboarding-step-icon.is-welcome {
    background: linear-gradient(145deg, #0f766e 0%, #0d9488 100%);
    box-shadow: 0 12px 28px rgba(13, 148, 136, 0.28);
}

.onboarding-step-icon.is-done {
    background: linear-gradient(145deg, #15803d 0%, #22c55e 100%);
    box-shadow: 0 12px 28px rgba(34, 197, 94, 0.28);
}

.onboarding-step-icon.is-therapies {
    background: linear-gradient(145deg, #0e7490 0%, #06b6d4 100%);
    box-shadow: 0 12px 28px rgba(6, 182, 212, 0.28);
}

.onboarding-step-icon.is-types {
    background: linear-gradient(145deg, #c2410c 0%, #ea580c 100%);
    box-shadow: 0 12px 28px rgba(234, 88, 12, 0.28);
}

.onboarding-step-icon.is-therapists {
    background: linear-gradient(145deg, #1d4ed8 0%, #3b82f6 100%);
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.28);
}

.onboarding-step-icon.is-rooms {
    background: linear-gradient(145deg, #b45309 0%, #d97706 100%);
    box-shadow: 0 12px 28px rgba(217, 119, 6, 0.28);
}

.onboarding-step-icon.is-availability {
    background: linear-gradient(145deg, #0369a1 0%, #0ea5e9 100%);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.28);
}

@keyframes onboardingIconIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.onboarding-step-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.65rem;
    line-height: 1.3;
    animation: onboardingTextIn 0.4s ease;
}

.onboarding-step-text {
    max-width: 36rem;
    margin: 0 auto 1rem;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.55;
    animation: onboardingTextIn 0.45s ease;
}

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

.onboarding-modal .onboarding-step-hint {
    max-width: 36rem;
    margin: 0 auto;
    text-align: left;
}

.onboarding-modal-footer {
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.onboarding-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.onboarding-step-meta {
    font-variant-numeric: tabular-nums;
}

.onboarding-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    display: none;
    align-items: center;
    gap: 0.85rem;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    animation: onboardingTextIn 0.35s ease;
}

.onboarding-float.is-visible {
    display: flex;
}

.onboarding-float-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, var(--primary-color, #0d6efd) 0%, #1d4ed8 100%);
    font-size: 1rem;
}

.onboarding-float-body {
    min-width: 0;
    flex: 1 1 auto;
}

.onboarding-float-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.15rem;
}

.onboarding-float-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onboarding-float-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .onboarding-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .onboarding-footer-actions {
        margin-left: 0;
        width: 100%;
    }

    .onboarding-footer-actions .btn {
        flex: 1 1 auto;
    }

    .onboarding-float {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
        flex-wrap: wrap;
    }

    .onboarding-float-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Text fields are typed/stored in uppercase; placeholders stay as written. */
input[type="text"]:not([data-no-uppercase]):not(.js-no-uppercase),
input[type="search"]:not([data-no-uppercase]):not(.js-no-uppercase),
input:not([type]):not([data-no-uppercase]):not(.js-no-uppercase),
textarea:not([data-no-uppercase]):not(.js-no-uppercase) {
    text-transform: uppercase;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder,
input:not([type])::placeholder,
textarea::placeholder {
    text-transform: none;
}
