.modal-overlay.hidden {
    display: none !important;
}

.field-label {
    display: block;
    margin-bottom: 0.1875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(71 85 105);
}

.auth-shell {
    position: relative;
    background-color: #082f2b;
    background-image: linear-gradient(180deg, rgba(8, 47, 43, 0.66), rgba(7, 89, 133, 0.36)), url("../images/login-bg.svg");
    background-size: cover;
    background-position: center;
}

.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.auth-main {
    position: relative;
    z-index: 1;
}

.login-card {
    border-color: rgba(203, 213, 225, 0.55) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.34) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-panel {
    width: min(100%, 26rem);
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
}

.login-brand {
    margin-bottom: 1.5rem;
    text-align: center;
}

.login-brand-logo,
.login-brand-initial {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 0.75rem;
}

.login-brand-logo {
    border: 1px solid #e2e8f0;
    object-fit: cover;
}

.login-brand-initial {
    display: grid;
    place-items: center;
    background: #0f766e;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}

.login-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.login-error {
    margin-bottom: 1rem;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fef2f2;
    padding: 0.75rem 1rem;
    color: #991b1b;
    font-size: 0.875rem;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.login-label {
    display: block;
}

.login-label-text {
    display: block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
}

.login-input {
    width: 100%;
    height: 3rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0 1rem;
    color: #0f172a;
    font-size: 1rem;
    background: #fff;
    outline: none;
}

.login-input:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px #ccfbf1;
}

.login-submit {
    width: 100%;
    height: 3rem;
    border: 0;
    border-radius: 0.75rem;
    background: #0f766e;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

html.modal-open,
body.modal-open {
    overflow: hidden !important;
}

body.modal-open {
    height: 100vh;
}

@media (min-width: 1024px) {
    html.sidebar-collapsed #app-sidebar {
        width: 4.5rem;
    }

    html.sidebar-collapsed #app-main {
        margin-left: 4.5rem;
    }

    html.sidebar-collapsed #app-sidebar .sidebar-text {
        display: none;
    }

    #app-sidebar .sidebar-link {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        white-space: nowrap;
    }

    #app-sidebar .sidebar-icon {
        display: inline-flex;
        width: 1.25rem;
        justify-content: center;
        line-height: 1;
    }

    #app-sidebar .sidebar-icon svg {
        width: 1rem;
        height: 1rem;
        stroke: currentColor;
        flex: 0 0 auto;
    }

    #app-sidebar .sidebar-rupee {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
    }

    html.sidebar-collapsed #app-sidebar .sidebar-link {
        justify-content: center;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}

.field-input,
.field-textarea {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background: white;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    outline: none;
}

#global-search {
    border-color: #99f6e4 !important;
    background: linear-gradient(180deg, #f8fffd 0%, #f0fdfa 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.12);
}

#global-search:focus,
#global-search:focus-visible {
    border-color: #0f766e !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.24) !important;
}

.field-input:focus,
.field-textarea:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgb(240 253 250);
}

.field-textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.theme-toggle-icon {
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-radius: 9999px;
}

html.dark .theme-toggle-icon::after {
    content: "";
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: #111827;
}

.calendar-day {
    display: flex;
    min-height: 4rem;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.5rem;
    border: 1px solid rgb(204 251 241);
    background: rgb(240 253 250);
    padding: 0.5rem;
    color: rgb(19 78 74);
}

.calendar-day:hover {
    border-color: rgb(20 184 166);
}

.calendar-day.is-off {
    border-color: rgb(254 205 211);
    background: rgb(255 241 242);
    color: rgb(159 18 57);
}

.calendar-day.is-today {
    box-shadow: inset 0 0 0 2px #0f766e;
}

.calendar-day-status {
    align-self: flex-start;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
}

#toggle-weekends.is-active {
    background: rgb(255 228 230);
    color: rgb(159 18 57);
}

.followup-calendar {
    position: fixed;
    top: calc(100% - 0.25rem);
    z-index: 70;
    width: min(16.5rem, calc(100vw - 1.25rem));
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    background: white;
    padding: 0.5rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2);
}

.followup-calendar-right {
    right: auto;
    left: 0;
}

.followup-calendar-left {
    left: 0;
    right: auto;
}

.followup-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.followup-calendar-head button {
    border-radius: 0.5rem;
    background: rgb(241 245 249);
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(71 85 105);
}

.followup-calendar-weekdays,
.followup-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.followup-calendar-weekdays {
    margin-bottom: 0.1875rem;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 800;
    color: rgb(100 116 139);
}

.followup-calendar-empty,
.followup-calendar-day {
    min-height: 1.9rem;
    border-radius: 0.4375rem;
}

.followup-calendar-day {
    border: 1px solid rgb(153 246 228);
    background: rgb(204 251 241);
    font-weight: 800;
    color: rgb(19 78 74);
}

.followup-calendar-day.is-open:hover,
.followup-calendar-day.is-selected {
    border-color: #0f766e;
    background: #0f766e;
    color: white;
}

.followup-calendar-day.is-off {
    cursor: not-allowed;
    border-color: rgb(254 205 211);
    background: rgb(255 228 230);
    color: rgb(159 18 57);
    opacity: 1;
}

.followup-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(71 85 105);
}

.followup-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.followup-calendar-legend i {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
}

.followup-calendar-legend i.is-open {
    background: rgb(20 184 166);
}

.followup-calendar-legend i.is-off {
    background: rgb(244 63 94);
}

.modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 1px solid rgb(148 163 184);
    outline: 1px solid rgba(255, 255, 255, 0.8);
    outline-offset: -2px;
}

.modal-header {
    position: sticky;
    top: 0;
    z-index: 25;
    background: #ffffff;
    padding-top: 0.15rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(226 232 240);
}

@media (max-width: 640px) {
    #app-header {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border-bottom-color: #d7e2ea;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    #app-header > .flex {
        min-height: 3.65rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    #global-search {
        border-color: #99f6e4 !important;
        background: linear-gradient(180deg, #f8fffd 0%, #f0fdfa 100%) !important;
    }

    #theme-toggle {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    .mobile-bottom-nav {
        border-top-color: #d7e2ea;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.12);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.15rem);
    }

    .mobile-bottom-link {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-height: 3.2rem;
        border-radius: 0.8rem;
        color: #64748b;
        transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }

    .mobile-bottom-link.is-active {
        color: #0f766e;
        font-weight: 700;
        background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
        box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.32);
        transform: translateY(-1px);
    }

    .mobile-bottom-icon {
        display: inline-flex;
        width: 1.45rem;
        height: 1.45rem;
        align-items: center;
        justify-content: center;
    }

    .mobile-bottom-icon svg {
        width: 1.35rem;
        height: 1.35rem;
        stroke: currentColor;
    }

    .mobile-bottom-link span:last-child {
        font-size: 0.69rem;
        line-height: 1;
    }

    .mobile-bottom-link.is-active .mobile-bottom-icon {
        transform: scale(1.08);
    }

    #mobile-more-menu {
        border-color: #d7e2ea !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.2) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .modal-overlay {
        align-items: flex-start;
        padding: 0.35rem;
    }

    .modal-panel {
        width: calc(100vw - 0.7rem) !important;
        max-width: calc(100vw - 0.7rem) !important;
        max-height: calc(100vh - 0.7rem) !important;
        margin-top: 0 !important;
        border-radius: 0.9rem !important;
    }

    .followup-modal-panel {
        max-width: calc(100vw - 0.5rem) !important;
        max-height: calc(100vh - 0.5rem) !important;
        margin-top: 0 !important;
        border-radius: 0.85rem !important;
    }

    .patient-sticky-info {
        top: var(--app-header-height, 56px) !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        padding: 0.65rem 0.6rem !important;
        border-radius: 0.65rem;
    }

    .patient-sticky-info h1 {
        font-size: 1.12rem;
        line-height: 1.25;
    }

    .patient-sticky-info .h-14.w-14 {
        width: 2.7rem !important;
        height: 2.7rem !important;
    }

    .patient-sticky-info .text-sm {
        font-size: 0.79rem;
        line-height: 1.25;
    }

    #floating-followup {
        bottom: 5rem !important;
        right: 0.75rem !important;
        height: 3.2rem !important;
        border-radius: 0.9rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-size: 0.94rem;
    }

    .followup-modal-panel form#visit-form {
        padding: 0.7rem !important;
    }

    #visit-form .modal-header,
    #visit-form > .mb-3.flex.items-center.justify-between {
        position: sticky;
        top: 0;
        z-index: 26;
        background: #ffffff;
        margin-left: -0.7rem;
        margin-right: -0.7rem;
        padding: 0.6rem 0.7rem 0.55rem;
        border-bottom: 1px solid rgb(226 232 240);
    }

    html.dark #visit-form .modal-header,
    html.dark #visit-form > .mb-3.flex.items-center.justify-between {
        background: #111827;
        border-bottom-color: #334155;
    }

    #visit-form .field-input,
    #visit-form .field-textarea,
    #visit-form button.field-input {
        min-height: 2.9rem;
        font-size: 1rem;
    }

    #visit-form .followup-layout {
        gap: 0.85rem !important;
    }

    #visit-form .followup-main-textarea {
        min-height: 6.5rem;
    }

    #visit-form .followup-history-panel {
        max-height: none;
    }

    #visit-form .sticky.bottom-0 {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
        margin-left: -0.7rem !important;
        margin-right: -0.7rem !important;
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }

    #visit-form .sticky.bottom-0 button {
        height: 2.95rem;
        font-size: 1.08rem;
    }
}

@media (max-width: 640px) {
    html.dark #app-header {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
        border-bottom-color: #334155 !important;
        box-shadow: 0 10px 22px rgba(2, 6, 23, 0.45);
    }

    html.dark #theme-toggle {
        border-color: #334155 !important;
        background: #0f172a !important;
    }

    html.dark .mobile-bottom-nav {
        border-top-color: #334155 !important;
        background: rgba(15, 23, 42, 0.94) !important;
        box-shadow: 0 -10px 24px rgba(2, 6, 23, 0.5) !important;
    }

    html.dark .mobile-bottom-link {
        color: #94a3b8 !important;
    }

    html.dark .mobile-bottom-link.is-active {
        color: #99f6e4 !important;
        background: linear-gradient(180deg, rgba(20, 184, 166, 0.2) 0%, rgba(15, 118, 110, 0.28) 100%) !important;
        box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.32);
    }

    html.dark #mobile-more-menu {
        border-color: #334155 !important;
        background: rgba(15, 23, 42, 0.97) !important;
        box-shadow: 0 20px 42px rgba(2, 6, 23, 0.6) !important;
    }
}

.followup-main-textarea {
    min-height: 7rem;
}

.followup-modal-panel {
    border-width: 1px;
}

.followup-layout .field-textarea {
    min-height: 5.5rem;
}

.followup-history-panel {
    max-height: 68vh;
    overflow: auto;
}

.followup-history-item {
    border-radius: 0.65rem;
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
    padding: 0.55rem 0.65rem;
}

.followup-history-label {
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #0369a1;
}

.followup-history-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    line-height: 1.38;
    color: #0f172a;
}

.search-result-item.is-active {
    background: rgb(240 253 250);
}

.appointment-patient-option.is-active {
    border-color: #14b8a6;
    background: #f0fdfa;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}

@media (max-width: 640px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
    }

    .dashboard-kpi-card {
        aspect-ratio: 1 / 1;
        min-height: 0;
        padding: 0.45rem !important;
        min-width: 0;
    }

    .dashboard-kpi-card p.text-sm {
        font-size: 0.63rem !important;
        line-height: 1.05 !important;
    }

    .dashboard-kpi-card p.text-3xl {
        font-size: 1.05rem !important;
        line-height: 1.1 !important;
        overflow-wrap: anywhere;
    }

    .dashboard-kpi-card .h-10.w-16 {
        height: 0.95rem !important;
        width: 1.75rem !important;
        border-radius: 0.4rem !important;
    }

    .dashboard-kpi-card .text-xs {
        font-size: 0.58rem !important;
    }

    .dashboard-kpi-card.lg\:col-span-2 {
        grid-column: span 1 / span 1;
    }
}

.visit-card {
    position: relative;
    overflow: visible;
    margin-left: 0;
    border-color: #dbe7f1;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.visit-card:hover {
    transform: none;
    border-color: #c6d8e7;
    box-shadow: none;
}

.visit-card::before {
    content: none;
}

#visit-list .visit-card:nth-child(even)::before {
    background: transparent;
}

.visit-timeline {
    position: relative;
    padding-left: 0.25rem;
}

.visit-timeline::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    border-radius: 9999px;
    background: #bfdbfe;
    box-shadow: none;
}

.visit-card::after {
    content: none;
}

#visit-list .visit-card:nth-child(even)::after {
    background: transparent;
    box-shadow: none;
}

#visit-list .visit-card:nth-child(3n) {
    border-color: #dbe7f1;
    background: #ffffff;
}

#visit-list .visit-card:nth-child(3n)::before,
#visit-list .visit-card:nth-child(3n)::after {
    background: transparent;
}

#visit-list .visit-card:nth-child(3n)::after {
    box-shadow: none;
}

.visit-gap-pill,
.visit-missed-pill {
    white-space: nowrap;
    border: 1px solid transparent;
}

.timeline-separator {
    position: relative;
    margin: 0 0 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.timeline-separator::before {
    content: none;
}

.timeline-separator-pill {
    position: relative;
    z-index: 1;
    border: 1px solid #99f6e4;
    background: linear-gradient(180deg, #f0fdfa, #ccfbf1);
    color: #0f766e;
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.timeline-separator-pill.is-warning {
    border-color: #fecdd3;
    background: linear-gradient(180deg, #fff1f2, #ffe4e6);
    color: #be123c;
}

.timeline-separator-pill.is-good {
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #f0fdf4, #dcfce7);
    color: #166534;
}

.visit-gap-pill {
    border-color: #99f6e4;
    background: linear-gradient(90deg, #ecfeff, #ccfbf1);
}

.visit-missed-pill {
    border-color: #fecdd3;
    background: linear-gradient(90deg, #fff1f2, #ffe4e6);
}

.visit-note {
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.visit-chip {
    border: 1px solid #dbe8f3;
    background: #f8fbff;
}

.visit-summary {
    line-height: 1.45;
    color: #475569;
}

.visit-meta-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}

.visit-meta-item {
    min-width: 0;
}

.visit-meta-label {
    font-weight: 700;
    color: #0f172a;
    margin-right: 0.25rem;
}

.visit-meta-value {
    color: #334155;
}

.visit-status-pill {
    display: inline-block;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.visit-status-pill.is-due {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

#visit-list .visit-card:nth-child(1)::after {
    background: transparent;
    box-shadow: none;
}

#visit-list .visit-card:nth-child(2)::after {
    background: transparent;
    box-shadow: none;
}

#visit-list .visit-card:nth-child(3)::after {
    background: transparent;
    box-shadow: none;
}

.visit-date-group {
    position: relative;
    margin-left: 0.95rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.visit-date-group::before {
    content: "";
    position: absolute;
    left: -0.92rem;
    top: 1.05rem;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 9999px;
    border: 2px solid #ffffff;
    background: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.visit-date-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid #dbe7f1;
}

.visit-date-group-title {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.22rem 0.65rem;
}

.visit-date-group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.visit-date-group-cards {
    padding: 0.2rem 0.55rem 0.5rem;
}

.visit-date-group-cards .visit-card {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    background: transparent !important;
}

.visit-date-group-cards .visit-card:last-child {
    border-bottom: 0;
}

.visit-date-group.is-teal {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.visit-date-group.is-teal .visit-date-group-head {
    border-bottom-color: #bfefe6;
}

.visit-date-group.is-teal .visit-date-group-title {
    background: #ccfbf1;
    color: #0f766e;
}

@media (max-width: 960px) {
    .visit-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.history-display-field {
    position: relative;
    border-radius: 0.75rem;
    border: 1px solid rgb(204 251 241);
    background: linear-gradient(180deg, rgb(240 253 250), white);
    padding: 0.75rem 0.75rem 0.75rem 1rem;
}

.history-display-field::before {
    content: "";
    position: absolute;
    inset: 0.75rem auto 0.75rem 0.5rem;
    width: 0.1875rem;
    border-radius: 9999px;
    background: #14b8a6;
}

.history-display-field:nth-child(2n)::before {
    background: #38bdf8;
}

.history-display-field:nth-child(3n)::before {
    background: #a78bfa;
}

.history-display-field h3 {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f766e;
}

.history-display-field p {
    min-height: 2.25rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #0f172a;
    line-height: 1.55;
}

.history-scroll {
    max-height: min(68vh, 34rem);
    overflow: auto;
    padding-right: 0.35rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #0f766e #dbeafe;
}

.history-scroll::-webkit-scrollbar {
    width: 10px;
}

.history-scroll::-webkit-scrollbar-track {
    background: #dbeafe;
    border-radius: 9999px;
}

.history-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0d9488, #0284c7);
    border-radius: 9999px;
    border: 2px solid #dbeafe;
}

.history-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0f766e, #0369a1);
}

.theme-ready.theme-switching *,
.theme-ready.theme-switching *::before,
.theme-ready.theme-switching *::after {
    transition: background-color 460ms ease-in-out, color 460ms ease-in-out, border-color 460ms ease-in-out, box-shadow 460ms ease-in-out, fill 460ms ease-in-out, stroke 460ms ease-in-out !important;
    transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-ready.theme-switching *,
    .theme-ready.theme-switching *::before,
    .theme-ready.theme-switching *::after {
        transition: none !important;
    }
}

.settings-field-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

html.dark {
    color-scheme: dark;
}

html.dark body {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

html.dark header,
html.dark nav,
html.dark .bg-white,
html.dark .bg-white\/95 {
    background-color: #111827 !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-100 {
    background-color: #1e293b !important;
}

html.dark .bg-slate-900 {
    background-color: #0f766e !important;
}

html.dark .bg-teal-700,
html.dark .bg-clinic {
    background-color: #0d9488 !important;
}

html.dark .bg-teal-50,
html.dark .bg-emerald-50,
html.dark .bg-indigo-50,
html.dark .bg-red-50,
html.dark .bg-rose-50,
html.dark .bg-amber-50 {
    background-color: rgba(15, 118, 110, 0.16) !important;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-teal-100,
html.dark .border-indigo-100,
html.dark .border-emerald-200,
html.dark .border-red-200 {
    border-color: #334155 !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

html.dark .text-slate-900,
html.dark .text-slate-950,
html.dark .text-slate-800,
html.dark .text-slate-700 {
    color: #e2e8f0 !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-400 {
    color: #94a3b8 !important;
}

html.dark .text-teal-700,
html.dark .text-teal-800,
html.dark .text-teal-900,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-indigo-700,
html.dark .text-indigo-900,
html.dark .text-red-800,
html.dark .text-rose-700,
html.dark .text-rose-900,
html.dark .text-amber-700,
html.dark .text-amber-900 {
    color: #5eead4 !important;
}

html.dark .shadow-sm,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: none !important;
}

html.dark .field-label {
    color: #cbd5e1;
}

html.dark .field-input,
html.dark .field-textarea,
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark #global-search {
    border-color: #0f766e !important;
    background: linear-gradient(180deg, #10222f 0%, #0f1d2b 100%) !important;
    color: #e2e8f0 !important;
}

html.dark #global-search:focus,
html.dark #global-search:focus-visible {
    border-color: #2dd4bf !important;
    background: #0b1220 !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.22) !important;
}

html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}

html.dark option {
    background-color: #111827;
    color: #e2e8f0;
}

html.dark .field-input:focus,
html.dark .field-textarea:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark #search-results {
    background-color: #111827 !important;
    border-color: #334155 !important;
}

html.dark #search-results a:hover,
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover {
    background-color: #1e293b !important;
}

html.dark .search-result-item.is-active {
    background-color: #164e63 !important;
}

html.dark .appointment-patient-option.is-active {
    border-color: #2dd4bf !important;
    background-color: #12313a !important;
}

html.dark .modal-overlay {
    background-color: rgba(2, 6, 23, 0.72) !important;
}

html.dark .modal-panel {
    border-color: #475569 !important;
    outline-color: rgba(148, 163, 184, 0.5);
}

html.dark .modal-header {
    background: #111827;
    border-bottom-color: #334155;
}

html.dark #visit-list .visit-card {
    background: #111827 !important;
    border-color: #3b536f !important;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28) !important;
}

html.dark #visit-list .visit-card:nth-child(even) {
    background: #172033 !important;
    border-color: #456179 !important;
}

html.dark .visit-card > * {
    position: relative;
}

html.dark .visit-card .font-semibold,
html.dark .visit-card p:not(.visit-note-label) {
    color: #f8fafc !important;
}

html.dark .visit-note {
    background: #1f2b3d !important;
    border: 1px solid #34445c;
}

html.dark #visit-list .visit-card:nth-child(even) .visit-note {
    background: #22324a !important;
    border-color: #3d5069;
}

html.dark .visit-note-label {
    color: #93c5fd !important;
}

html.dark .visit-print,
html.dark .visit-chip {
    background: #26364d !important;
    color: #e2e8f0 !important;
}

html.dark .visit-edit-toggle {
    background: #3f3418 !important;
    color: #fde68a !important;
}

html.dark .visit-delete-btn {
    background: #3f1f2b !important;
    color: #fecdd3 !important;
}

html.dark .visit-print {
    background: #1e3a5f !important;
    color: #dbeafe !important;
}

html.dark .visit-chip-fee {
    background: rgba(20, 184, 166, 0.2) !important;
    color: #5eead4 !important;
}

html.dark .visit-timeline::before {
    background: linear-gradient(180deg, #14b8a6, #0ea5e9);
}

html.dark .visit-card::after {
    border-color: #0f172a;
}

html.dark .visit-gap-pill {
    border-color: #0f766e;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.2), rgba(14, 116, 144, 0.22));
}

html.dark .visit-missed-pill {
    border-color: #9f1239;
    background: linear-gradient(90deg, rgba(190, 24, 93, 0.24), rgba(136, 19, 55, 0.26));
}

html.dark .visit-summary {
    color: #cbd5e1;
}

html.dark .visit-meta-label,
html.dark .visit-meta-value {
    color: #e2e8f0;
}

html.dark .visit-status-pill {
    border-color: #166534;
    background: rgba(22, 101, 52, 0.24);
    color: #bbf7d0;
}

html.dark .visit-status-pill.is-due {
    border-color: #9f1239;
    background: rgba(190, 24, 93, 0.24);
    color: #fecdd3;
}

html.dark .timeline-separator::before {
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.45), rgba(56, 189, 248, 0.4), rgba(100, 116, 139, 0.2));
}

html.dark .timeline-separator-pill {
    border-color: #0f766e;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.2), rgba(15, 118, 110, 0.24));
    color: #99f6e4;
}

html.dark .timeline-separator-pill.is-warning {
    border-color: #9f1239;
    background: linear-gradient(180deg, rgba(190, 24, 93, 0.26), rgba(136, 19, 55, 0.3));
    color: #fecdd3;
}

html.dark .timeline-separator-pill.is-good {
    border-color: #166534;
    background: linear-gradient(180deg, rgba(22, 101, 52, 0.28), rgba(21, 128, 61, 0.3));
    color: #bbf7d0;
}

html.dark .visit-date-group {
    background: #111827;
    border-color: #3b536f;
}

html.dark .visit-date-group::before {
    border-color: #0f172a;
    background: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

html.dark .visit-date-group-head {
    border-bottom-color: #334155;
}

html.dark .visit-date-group-title {
    background: #1e293b;
    color: #e2e8f0;
}

html.dark .visit-date-group.is-teal {
    background: #0f2028;
    border-color: #2d4f5f;
}

html.dark .visit-date-group.is-teal .visit-date-group-head {
    border-bottom-color: #2d4f5f;
}

html.dark .visit-date-group.is-teal .visit-date-group-title {
    background: #134e4a;
    color: #99f6e4;
}

html.dark .visit-date-group-cards .visit-card {
    background: transparent !important;
    border-color: #334155 !important;
}

html.dark .patient-history-readonly {
    background: #111827 !important;
    border-color: #3b536f !important;
}

html.dark .history-display-field {
    background: linear-gradient(180deg, #19263a 0%, #131d2d 100%) !important;
    border-color: #3b536f !important;
}

html.dark .history-display-field h3 {
    color: #99f6e4 !important;
}

html.dark .history-display-field p {
    color: #f8fafc !important;
}

html.dark .history-scroll {
    scrollbar-color: #2dd4bf #1e293b;
}

html.dark .history-scroll::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark .history-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #14b8a6, #0ea5e9);
    border-color: #1e293b;
}

html.dark .patient-sticky-info {
    background-color: rgba(17, 24, 39, 0.96) !important;
    border-color: #334155 !important;
}

html.dark .patient-sticky-info h1 {
    color: #f8fafc !important;
}

html.dark .patient-sticky-info p {
    color: #cbd5e1 !important;
}

html.dark .patient-sticky-info a[aria-label] {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark .patient-create-heading h1 {
    color: #f8fafc !important;
}

html.dark .patient-create-heading p {
    color: #b6c3d6 !important;
}

html.dark .patient-create-panel {
    background: linear-gradient(180deg, #141f31 0%, #111827 100%) !important;
    border-color: #3d4f68 !important;
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08) !important;
}

html.dark .patient-create-history {
    background: linear-gradient(180deg, #152235 0%, #101827 100%) !important;
}

html.dark .patient-create-panel h2 {
    color: #f8fafc !important;
}

html.dark .patient-create .field-label {
    color: #c7d2e3 !important;
}

html.dark .patient-create .field-input,
html.dark .patient-create .field-textarea,
html.dark .patient-create select {
    background-color: #0b1220 !important;
    border-color: #40536f !important;
    color: #f8fafc !important;
}

html.dark .patient-create .field-input:hover,
html.dark .patient-create .field-textarea:hover,
html.dark .patient-create select:hover {
    border-color: #5d7291 !important;
}

html.dark .patient-create .field-input:focus,
html.dark .patient-create .field-textarea:focus,
html.dark .patient-create select:focus {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.14) !important;
}

html.dark #app-sidebar {
    background-color: #0b1730 !important;
    border-color: #23314c !important;
}

html.dark #app-sidebar .sidebar-link {
    color: #dbeafe !important;
}

html.dark #app-sidebar .sidebar-link:hover {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #f8fafc !important;
}

html.dark #app-sidebar a.bg-teal-50 {
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.2), rgba(34, 211, 238, 0.16)) !important;
    color: #99f6e4 !important;
    border: 1px solid rgba(45, 212, 191, 0.28);
}

html.dark #app-sidebar a.bg-teal-50 .sidebar-icon,
html.dark #app-sidebar a.bg-teal-50 .sidebar-text {
    color: #99f6e4 !important;
}

html.dark .calendar-day {
    border-color: #115e59;
    background: rgba(20, 184, 166, 0.14);
    color: #99f6e4;
}

html.dark .calendar-day.is-off {
    border-color: #7f1d1d;
    background: rgba(127, 29, 29, 0.32);
    color: #fecdd3;
}

html.dark .calendar-day-status {
    background: rgba(15, 23, 42, 0.72);
}

html.dark .followup-calendar {
    border-color: #334155;
    background: #111827;
}

html.dark .followup-history-panel {
    border-color: #334155;
    background: #111827;
}

html.dark .followup-history-item {
    border-color: #3b536f;
    background: linear-gradient(180deg, #172033 0%, #131b2d 100%);
}

html.dark .followup-history-label {
    color: #7dd3fc;
}

html.dark .followup-history-value {
    color: #e2e8f0;
}

html.dark .followup-calendar-head button {
    background: #1e293b;
    color: #cbd5e1;
}

html.dark .followup-calendar-day {
    border-color: #115e59;
    background: rgba(20, 184, 166, 0.24);
    color: #99f6e4;
}

html.dark .followup-calendar-day.is-open:hover,
html.dark .followup-calendar-day.is-selected {
    border-color: #2dd4bf;
    background: #0d9488;
    color: white;
}

html.dark .followup-calendar-day.is-off {
    border-color: #7f1d1d;
    background: rgba(127, 29, 29, 0.5);
    color: #fecdd3;
}

html.dark code {
    color: #99f6e4;
}

html.dark .file\:bg-slate-100::file-selector-button {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

@media print {
    html.dark,
    html.dark body,
    html.dark .prescription {
        background: white !important;
        color: #020617 !important;
    }
}

@media print {
    body.thermal .prescription {
        width: 72mm;
        font-size: 12px;
    }

    @page {
        size: A4;
        margin: 14mm;
    }

    body.thermal {
        width: 72mm;
    }
}