/* ===== LumiClinic Components (Design System) =====
   Use these classes everywhere so themes can swap easily.
*/



/* Page wrapper + header */
.lc-page {
    padding: 1.25rem 0;
}

.lc-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lc-title {
    font-size: 26px;
    font-weight: 950;
    letter-spacing: -.02em;
    margin: 0;
}

.lc-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* Glass Card */
.lc-card {
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0,0,0,.38);
    backdrop-filter: blur(12px);
}

    .lc-card.pad {
        padding: 14px;
    }

/* Input group glass */
.lc-search {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 8px;
    backdrop-filter: blur(10px);
}

    .lc-search .input-group-text {
        background: rgba(255,255,255,.06) !important;
        border-color: rgba(255,255,255,.12) !important;
        color: rgba(234,242,255,.80);
    }

    .lc-search .form-control {
        border-color: rgba(255,255,255,.12) !important;
    }

/* Table */
.lc-table {
    color: var(--text) !important;
}

    .lc-table thead th {
        background: rgba(255,255,255,.04) !important;
        color: rgba(182,194,218,.95) !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
        font-size: 12px;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .lc-table td {
        color: rgba(234,242,255,.92) !important;
        border-color: rgba(255,255,255,.10) !important;
        background: transparent !important;
    }

        .lc-table td:nth-child(2), .lc-table td:nth-child(3) {
            color: rgba(234,242,255,.78) !important;
        }

    .lc-table a {
        color: var(--p1);
        font-weight: 850;
        text-decoration: none;
    }

        .lc-table a:hover {
            color: color-mix(in srgb, var(--p1) 70%, white 30%);
        }

/* Table wrapper */
.lc-tablewrap {
    overflow: auto;
    border-radius: 18px;
}

/* Small utilities */
.lc-muted {
    color: var(--muted);
}

/* Booking status pill */
.lc-status {
    padding: .28rem .62rem;
    border-radius: 999px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
}

    .lc-status.hold {
        background: rgba(255,204,102,.14);
        border-color: rgba(255,204,102,.32);
    }

    .lc-status.confirmed {
        background: rgba(46,229,157,.14);
        border-color: rgba(46,229,157,.30);
    }

    .lc-status.cancelled {
        background: rgba(255,91,122,.12);
        border-color: rgba(255,91,122,.30);
    }

/* ===== Bookings UI helpers ===== */

.lc-datebox {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 6px;
    backdrop-filter: blur(10px);
}

    .lc-datebox .form-control {
        min-width: 160px;
        border-radius: 999px !important;
    }

/* Status pill */
.lc-status {
    display: inline-block;
    padding: .28rem .62rem;
    border-radius: 999px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
}

    .lc-status.hold {
        background: rgba(255,204,102,.14);
        border-color: rgba(255,204,102,.32);
    }

    .lc-status.confirmed {
        background: rgba(46,229,157,.14);
        border-color: rgba(46,229,157,.30);
    }

    .lc-status.cancelled {
        background: rgba(255,91,122,.12);
        border-color: rgba(255,91,122,.30);
    }

/* Disable hover effect completely */
.lc-table tbody tr:hover td {
    background: transparent !important;
}

/* ===== Calendar FIX: keep Reserve on the right + compact rows + clearer date ===== */

/* Keep slot layout horizontal (left info, right action) */
.lc-slot {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important; /* compact */
    border-radius: 12px !important;
}

.lc-slot-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

/* Compact typography */
.lc-slot-time {
    font-size: 14px !important;
    font-weight: 900 !important;
}

.lc-slot .small,
.lc-slot .lc-muted {
    font-size: 12px !important;
    opacity: .9;
}

/* Reserve button: same position (right) + blue text */
.lc-slot-action {
    margin-left: auto !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    border-color: rgba(34,193,255,.55) !important;
    color: rgba(34,193,255,.95) !important; /* text BLUE */
    background: rgba(34,193,255,.08) !important;
}

    .lc-slot-action:hover {
        background: rgba(34,193,255,.14) !important;
        border-color: rgba(34,193,255,.70) !important;
        color: rgba(210,245,255,1) !important;
    }

/* Date under page title: make it readable */
.lc-pagehead .lc-muted {
    color: rgba(234,242,255,.82) !important;
}

/* Date input value readability (some browsers show it dim) */
.lc-datebox input[type="date"] {
    color: rgba(234,242,255,.90) !important;
}

/* Calendar: force time text to be bright */
.lc-slot-time {
    color: rgba(234,242,255,.96) !important;
}

.lc-slot .lc-muted {
    color: rgba(234,242,255,.55) !important;
}

/* ===== Calendar: disable ANY hover/active darkening on slots ===== */

/* no hover background changes */
.lc-slot:hover,
.lc-slot:focus,
.lc-slot:active {
    background: rgba(255,255,255,.03) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* prevent child elements from triggering weird hover/active styles */
.lc-slot *:hover {
    filter: none !important;
}

/* if any leftover list-group styles exist */
.list-group-item:hover,
.list-group-item:focus,
.list-group-item:active {
    background: transparent !important;
    color: inherit !important;
}

/* ===== Patient suggestions (glass) ===== */
.lc-suggest {
    margin-top: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.lc-suggest-item {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    color: rgba(234,242,255,.92);
    font-weight: 700;
}

    .lc-suggest-item + .lc-suggest-item {
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .lc-suggest-item:hover {
        background: rgba(255,255,255,.06);
    }

/* ===== Fix patient search input text + darker suggestions ===== */

/* Ensure typed text is bright */
#patientSearch {
    color: rgba(234,242,255,.96) !important;
    background: rgba(255,255,255,.05) !important;
}

    #patientSearch::placeholder {
        color: rgba(182,194,218,.65) !important;
    }

/* Make input-group icon box match dark theme */
.input-group-text {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(234,242,255,.80) !important;
}

/* Suggestions: darker + clearer separation */
.lc-suggest {
    background: rgba(10,14,30,.92) !important; /* darker */
    border: 1px solid rgba(34,193,255,.18) !important;
    box-shadow: 0 26px 78px rgba(0,0,0,.65) !important;
    backdrop-filter: blur(14px);
}

.lc-suggest-item {
    color: rgba(234,242,255,.92) !important;
    font-weight: 750;
}

    .lc-suggest-item + .lc-suggest-item {
        border-top: 1px solid rgba(255,255,255,.08) !important;
    }

    .lc-suggest-item:hover {
        background: rgba(34,193,255,.10) !important;
    }

/* Optional: if the whole dropdown overlaps too much, add a tiny offset */
.lc-suggest {
    margin-top: 10px !important;
}

/* Dark tabs */
.lc-tabs {
    border-bottom: 1px solid rgba(255,255,255,.12);
    gap: 6px;
}

    .lc-tabs .nav-link {
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.04);
        color: rgba(234,242,255,.82);
        border-radius: 999px;
        padding: .45rem .85rem;
        font-weight: 800;
    }

        .lc-tabs .nav-link.active {
            background: rgba(34,193,255,.12);
            border-color: rgba(34,193,255,.22);
            color: rgba(234,242,255,.95);
        }

/* ===== Details page readability fixes ===== */

/* Any text inside our cards should be readable */
.lc-card, .lc-card * {
    color: rgba(234,242,255,.92);
}

    /* Secondary text */
    .lc-card .lc-muted, .lc-card .text-muted {
        color: rgba(182,194,218,.75) !important;
    }

    /* Definition lists (dt/dl) */
    .lc-card dt {
        color: rgba(182,194,218,.88) !important;
        font-weight: 800;
    }

    .lc-card dd {
        color: rgba(234,242,255,.92) !important;
    }

/* Tabs: make sure text is not dark */
.lc-tabs .nav-link {
    color: rgba(234,242,255,.86) !important;
}

    .lc-tabs .nav-link:not(.active):hover {
        color: rgba(234,242,255,.95) !important;
    }

/* Pills (dark, premium) */
.lc-pill {
    display: inline-block;
    padding: .30rem .60rem;
    border-radius: 999px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(234,242,255,.92);
}

.lc-pill--primary {
    background: rgba(34,193,255,.14);
    border-color: rgba(34,193,255,.28);
}

.lc-pill--success {
    background: rgba(46,229,157,.14);
    border-color: rgba(46,229,157,.26);
}

.lc-pill--warn {
    background: rgba(255,204,102,.14);
    border-color: rgba(255,204,102,.28);
}

/* Visits groups subtle separation */
.lc-group {
    border: 1px solid rgba(255,255,255,.10);
}

/* Category/Treatment dropdown should float above everything */
.lc-suggest {
    position: absolute !important;
    z-index: 99999 !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.75) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

/* make dropdown more compact */
.lc-suggest-item {
    padding: 8px 10px !important;
    font-weight: 800;
}

/* Treatment dropdown: force it under the input */
.trt-suggest {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    display: none;
}

.position-relative:has(.trt-suggest) {
    overflow: visible !important;
}

.lc-badge {
    display: inline-block;
    padding: .34rem .68rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: .82rem;
    border: 1px solid rgba(34,193,255,.24);
    background: rgba(34,193,255,.12);
    color: rgba(234,242,255,.92);
}

.lc-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: .28rem .62rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(230,238,250,.88);
}

    .lc-status.is-ok {
        background: rgba(25,135,84,.16);
        border-color: rgba(25,135,84,.35);
        color: #9ff0c2;
    }

    .lc-status.is-info {
        background: rgba(34,193,255,.14);
        border-color: rgba(34,193,255,.32);
        color: #8fe3ff;
    }

    .lc-status.is-off {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.12);
        color: rgba(214,223,239,.76);
    }

/* =========================
   Dashboard X
========================= */

.dbx-shell {
    display: grid;
    gap: 1.15rem;
}

.dbx-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.2rem;
    padding: 1.5rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.10);
    background: radial-gradient(circle at 12% 25%, rgba(34,193,255,.16), transparent 28%), radial-gradient(circle at 86% 16%, rgba(111,109,255,.16), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
}

.dbx-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    color: rgba(210,223,243,.78);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dbx-kicker__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(135deg,#22c1ff,#6f6dff);
    box-shadow: 0 0 18px rgba(34,193,255,.45);
}

.dbx-title {
    margin: 0 0 .55rem 0;
    color: rgba(241,247,255,.98);
    font-size: clamp(2rem,4vw,3.25rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.03em;
}

.dbx-subtitle {
    margin: 0;
    max-width: 58ch;
    color: rgba(194,209,231,.82);
    font-size: 1.02rem;
    line-height: 1.75;
}

    .dbx-subtitle span {
        color: #eef7ff;
        font-weight: 900;
    }

.dbx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.45rem;
}

.dbx-btn-primary {
    min-height: 48px;
    padding: .8rem 1.15rem;
    border: none;
    border-radius: 14px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(90deg,#22c1ff 0%, #6f6dff 100%);
    box-shadow: 0 14px 34px rgba(62,121,255,.25);
}

    .dbx-btn-primary:hover {
        color: #fff;
        transform: translateY(-1px);
    }

.dbx-btn-soft {
    min-height: 48px;
    padding: .8rem 1.15rem;
    border-radius: 14px;
    color: rgba(236,244,255,.92);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    font-weight: 800;
}

    .dbx-btn-soft:hover {
        color: #fff;
        border-color: rgba(34,193,255,.24);
        background: rgba(255,255,255,.06);
    }

.dbx-hero__visual {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dbx-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(20px);
    opacity: .75;
}

.dbx-orb--1 {
    width: 170px;
    height: 170px;
    left: 10%;
    top: 12%;
    background: rgba(34,193,255,.18);
}

.dbx-orb--2 {
    width: 150px;
    height: 150px;
    right: 14%;
    top: 18%;
    background: rgba(111,109,255,.18);
}

.dbx-orb--3 {
    width: 190px;
    height: 190px;
    bottom: 6%;
    right: 20%;
    background: rgba(0,200,170,.12);
}

.dbx-status-card {
    position: relative;
    z-index: 2;
    width: min(100%, 320px);
    min-height: 150px;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
    box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dbx-status-card__icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #f7fbff;
    font-size: 1.45rem;
    background: linear-gradient(135deg,#22c1ff 0%, #6f6dff 100%);
    box-shadow: 0 16px 34px rgba(56,120,255,.26);
}

.dbx-status-card__label {
    color: rgba(194,207,227,.72);
    font-size: .88rem;
    font-weight: 800;
}

.dbx-status-card__value {
    color: rgba(241,247,255,.98);
    font-size: 1.6rem;
    font-weight: 900;
    margin-top: .15rem;
}

.dbx-float {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .95rem;
    border-radius: 999px;
    color: rgba(234,243,255,.94);
    font-size: .86rem;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .dbx-float i {
        color: #84ddff;
    }

.dbx-float--a {
    top: 6%;
    right: 4%;
}

.dbx-float--b {
    bottom: 12%;
    left: 6%;
}

.dbx-float--c {
    bottom: 2%;
    right: 18%;
}

.dbx-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
}

.dbx-strip-card {
    padding: 1rem 1.05rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

.dbx-strip-card__label {
    color: rgba(187,202,225,.68);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dbx-strip-card__value {
    margin-top: .3rem;
    color: rgba(239,246,255,.96);
    font-weight: 800;
}

.dbx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
}

.dbx-tile {
    position: relative;
    display: block;
    min-height: 190px;
    padding: 1.1rem;
    text-decoration: none;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.10);
    background: radial-gradient(circle at top right, rgba(255,255,255,.05), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: 0 18px 42px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .dbx-tile:hover {
        transform: translateY(-4px);
        border-color: rgba(34,193,255,.24);
        box-shadow: 0 24px 48px rgba(0,0,0,.25), 0 0 0 1px rgba(34,193,255,.06) inset;
    }

.dbx-tile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dbx-tile__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #f7fbff;
    font-size: 1.15rem;
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

.dbx-tile__arrow {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: rgba(235,244,255,.86);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

.dbx-tile__title {
    margin-top: 1rem;
    color: rgba(241,247,255,.98);
    font-size: 1.08rem;
    font-weight: 900;
}

.dbx-tile__desc {
    margin-top: .42rem;
    color: rgba(190,205,227,.78);
    line-height: 1.65;
    min-height: 52px;
}

.dbx-tile__footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #a9dcff;
    font-size: .88rem;
    font-weight: 800;
}

.dbx-tile__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(34,193,255,.45), rgba(111,109,255,0));
}

.dbx-tile--cyan .dbx-tile__icon {
    background: linear-gradient(135deg,#22c1ff,#0ea5e9);
}

.dbx-tile--violet .dbx-tile__icon {
    background: linear-gradient(135deg,#7c3aed,#6f6dff);
}

.dbx-tile--blue .dbx-tile__icon {
    background: linear-gradient(135deg,#2563eb,#22c1ff);
}

.dbx-tile--teal .dbx-tile__icon {
    background: linear-gradient(135deg,#14b8a6,#22c1ff);
}

.dbx-tile--indigo .dbx-tile__icon {
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
}

.dbx-tile--slate .dbx-tile__icon {
    background: linear-gradient(135deg,#334155,#64748b);
}

.dbx-tile--gold .dbx-tile__icon {
    background: linear-gradient(135deg,#f59e0b,#f97316);
}

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

@media (max-width: 991.98px) {
    .dbx-hero {
        grid-template-columns: 1fr;
    }

    .dbx-strip {
        grid-template-columns: 1fr;
    }
}

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

    .dbx-hero {
        padding: 1rem;
        border-radius: 22px;
    }

    .dbx-title {
        font-size: 2rem;
    }
}

/* ===== Navbar polish ===== */

.lc-navbar .nav-link {
    color: rgba(235,243,255,.82) !important;
    border-radius: 12px;
    padding: .6rem .8rem !important;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

    .lc-navbar .nav-link:hover {
        color: #ffffff !important;
        background: rgba(255,255,255,.06) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }

    .lc-navbar .nav-link.active {
        color: #ffffff !important;
        background: rgba(34,193,255,.10) !important;
        box-shadow: inset 0 0 0 1px rgba(34,193,255,.18);
    }

    .lc-navbar .nav-link i {
        opacity: .92;
    }

/* ===== Footer upgrade ===== */

.lc-footer {
    margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lc-footer__inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(201,214,234,.78);
    font-size: .92rem;
}

.lc-footer__brand {
    color: rgba(230,240,255,.9);
    font-weight: 700;
}

.lc-footer__right strong {
    color: #8fdcff;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .lc-footer__inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: .8rem 0;
    }
}

.lc-navbar .nav-link {
    position: relative;
}

    .lc-navbar .nav-link.active::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, #22c1ff, #6f6dff);
        box-shadow: 0 0 12px rgba(34,193,255,.45);
    }

.lc-navbar .navbar-brand {
    letter-spacing: -.02em;
    font-weight: 900 !important;
}

    .lc-navbar .navbar-brand i {
        filter: drop-shadow(0 0 10px rgba(34,193,255,.30));
    }

.dbx-hero {
    animation: dbxHeroFloat 7s ease-in-out infinite;
}

@keyframes dbxHeroFloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

.dbx-status-card {
    position: relative;
    overflow: hidden;
}

    .dbx-status-card::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(circle, rgba(255,255,255,.12), transparent 45%);
        transform: translateX(-35%) translateY(-20%);
        pointer-events: none;
    }

.dbx-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34,193,255,.22), rgba(111,109,255,.16), rgba(255,255,255,.04));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .0;
    transition: opacity .22s ease;
    pointer-events: none;
}

.dbx-tile:hover::before {
    opacity: 1;
}

.dbx-tile:hover .dbx-tile__icon {
    transform: scale(1.04);
    box-shadow: 0 18px 34px rgba(56,120,255,.30);
}

.dbx-tile__icon {
    transition: transform .18s ease, box-shadow .18s ease;
}

.dbx-tile:hover .dbx-tile__arrow {
    transform: translateY(-2px) translateX(2px);
    border-color: rgba(34,193,255,.22);
}

.dbx-tile__arrow {
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.dbx-strip-card {
    position: relative;
    overflow: hidden;
}

    .dbx-strip-card::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(34,193,255,.55), rgba(111,109,255,.0));
    }

.dbx-strip-card__value {
    font-size: .96rem;
}

.lc-footer {
    box-shadow: 0 -10px 30px rgba(0,0,0,.16);
}

.lc-footer__right strong {
    text-shadow: 0 0 10px rgba(34,193,255,.18);
}

.dbx-title__glow {
    display: inline-block;
    margin-left: .2rem;
    background: linear-gradient(90deg, #22c1ff, #8fdcff, #6f6dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 22px rgba(34,193,255,.10);
}

/* ================================
   Compatibility Aliases (DO NOT REMOVE)
   These keep old class names working with the new theme.
================================ */

/* Tables: fix dark text + unify look */
.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: var(--r-lg, 22px);
    border: 1px solid var(--line2, rgba(255,255,255,.08));
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,0));
}

    .table-modern thead th {
        background: var(--tableHead, rgba(255,255,255,.06));
        color: var(--muted, rgba(255,255,255,.70));
        font-weight: 700;
        letter-spacing: .25px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line2, rgba(255,255,255,.08));
        white-space: nowrap;
    }

    .table-modern tbody td {
        color: var(--text, rgba(255,255,255,.92));
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255,255,255,.06);
        vertical-align: middle;
    }

    .table-modern tbody tr:hover {
        background: var(--tableRowHover, rgba(37,199,255,.08));
    }

/* Card wrappers */
.table-card,
.list-card {
    background: linear-gradient(180deg, var(--surface, rgba(255,255,255,.075)), var(--surface2, rgba(255,255,255,.055)));
    border: 1px solid var(--line2, rgba(255,255,255,.08));
    border-radius: var(--r-lg, 22px);
    box-shadow: var(--shadow, 0 14px 40px rgba(0,0,0,.45));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Extra safety: ensure Bootstrap tables never force dark text */
.table {
    color: var(--text, rgba(255,255,255,.92)) !important;
}

    .table > :not(caption) > * > * {
        color: var(--text, rgba(255,255,255,.92)) !important;
        border-color: rgba(255,255,255,.08) !important;
    }

/* ===== User Dropdown (FINAL) ===== */
.lc-navbar {
    position: relative;
    z-index: 50;
}

    .lc-navbar .lc-userdd .dropdown-menu {
        z-index: 9999;
        /* no “table border” look */
        border: 0 !important;
        outline: 0 !important;
        /* rounded glass */
        border-radius: 18px;
        padding: 8px;
        /* solid-enough glass (doesn’t show behind) */
        background: rgba(10, 18, 40, .78);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        /* soft shadow */
        box-shadow: 0 18px 50px rgba(0,0,0,.55);
        /* remove square edges / clipping */
        overflow: hidden;
    }

    .lc-navbar .lc-userdd .dropdown-divider {
        border-top: 1px solid rgba(255,255,255,.10);
        margin: 6px 0;
    }

    .lc-navbar .lc-userdd .dropdown-item {
        color: rgba(255,255,255,.92);
        border-radius: 14px;
        padding: 10px 12px;
    }

        .lc-navbar .lc-userdd .dropdown-item:hover,
        .lc-navbar .lc-userdd .dropdown-item:focus {
            background: rgba(37,199,255,.12);
            color: rgba(255,255,255,.95);
        }

    .lc-navbar .lc-userdd .btn-link {
        color: rgba(255,255,255,.92);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .lc-navbar .lc-userdd .btn-link:hover {
            opacity: .92;
        }

    /* remove Bootstrap default focus ring that looks “boxed” */
    .lc-navbar .lc-userdd .dropdown-toggle:focus {
        box-shadow: none !important;
    }

/* ===== Borderless Tables (no outer frame) ===== */
.lc-table,
.table-modern {
    border: 0 !important; /* يشيل الإطار */
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}

    .lc-table thead th,
    .table-modern thead th {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .lc-table tbody td,
    .table-modern tbody td {
        border-bottom: 1px solid rgba(255,255,255,.06); /* فواصل ناعمة */
    }

    .lc-table tbody tr:last-child td,
    .table-modern tbody tr:last-child td {
        border-bottom: 0;
    }

/* ================================
   Patients Index — FINAL Modern Table (Clean + Contemporary) — FIXED ALIGNMENT
   Paste at END of lc.components.css
================================ */

@media (min-width: 992px) {

    /* Card shell already from lc-card; just refine table */
    .lc-card.table-card {
        padding: 14px;
        border-radius: 22px;
    }

        .lc-card.table-card .lc-table {
            border: 0 !important;
            background: transparent !important;
            border-collapse: separate !important;
            border-spacing: 0 !important;
            width: 100%;
            min-width: 760px; /* يمنع تكسير الأعمدة إذا الشاشة ضاقت */
        }

            /* ===== Header: modern, readable, aligned ===== */
            .lc-card.table-card .lc-table thead th {
                background: rgba(255,255,255,.035) !important;
                color: rgba(255,255,255,.72) !important;
                border: 0 !important;
                padding: 14px 16px !important;
                font-weight: 900;
                letter-spacing: .22px;
                font-size: 12px;
                text-transform: uppercase;
                position: sticky;
                top: 0;
                z-index: 2;
            }

                .lc-card.table-card .lc-table thead th:first-child {
                    border-top-left-radius: 16px;
                    padding-left: 22px !important; /* نفس body عشان ما يصير فراغ */
                }

                .lc-card.table-card .lc-table thead th:last-child {
                    border-top-right-radius: 16px;
                    text-align: right;
                    padding-right: 18px !important;
                }

            /* ===== Body rows: clean separators + subtle hover ===== */
            .lc-card.table-card .lc-table tbody td {
                border: 0 !important;
                padding: 16px 16px !important;
                color: rgba(255,255,255,.86);
                vertical-align: middle;
            }

                /* first column gets a tiny inner accent WITHOUT shifting columns */
                .lc-card.table-card .lc-table tbody td:first-child {
                    position: relative;
                    padding-left: 22px !important;
                }

                    .lc-card.table-card .lc-table tbody td:first-child::before {
                        content: "";
                        position: absolute;
                        left: 8px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 3px;
                        height: 18px;
                        border-radius: 999px;
                        background: linear-gradient(180deg, rgba(37,199,255,.95), rgba(42,168,255,.20));
                        opacity: .75;
                    }

            .lc-card.table-card .lc-table tbody tr {
                position: relative;
                background: rgba(255,255,255,.02) !important;
                transition: background .18s ease, transform .12s ease;
            }

                /* subtle row divider */
                .lc-card.table-card .lc-table tbody tr + tr td {
                    border-top: 1px solid rgba(255,255,255,.06) !important;
                }

                /* REMOVE the old row accent that caused the left gap */
                .lc-card.table-card .lc-table tbody tr::before {
                    display: none !important;
                }

                .lc-card.table-card .lc-table tbody tr:hover {
                    background: rgba(37,199,255,.06) !important;
                }

            /* Name link */
            .lc-card.table-card .lc-table tbody td:first-child a {
                color: rgba(37,199,255,.98);
                font-weight: 950;
                text-decoration: none;
                letter-spacing: .15px;
            }

                .lc-card.table-card .lc-table tbody td:first-child a:hover {
                    filter: brightness(1.06);
                }

            /* Phone: tidy numeric */
            .lc-card.table-card .lc-table tbody td:nth-child(2) {
                font-variant-numeric: tabular-nums;
                letter-spacing: .15px;
                color: rgba(255,255,255,.82);
                white-space: nowrap;
            }

            /* Created: muted */
            .lc-card.table-card .lc-table tbody td:nth-child(3) {
                color: rgba(255,255,255,.68);
                font-variant-numeric: tabular-nums;
                white-space: nowrap;
            }

            /* Action (Details) */
            .lc-card.table-card .lc-table tbody td:last-child {
                text-align: right;
                white-space: nowrap;
                padding-right: 18px !important;
            }

            .lc-card.table-card .lc-table .btn-outline-primary {
                border-color: rgba(37,199,255,.30) !important;
                color: rgba(37,199,255,.95) !important;
                border-radius: 999px;
                padding: 8px 14px;
                background: rgba(37,199,255,.06) !important;
            }

                .lc-card.table-card .lc-table .btn-outline-primary:hover {
                    background: rgba(37,199,255,.14) !important;
                    border-color: rgba(37,199,255,.44) !important;
                }
}

/* Mobile cards stay as-is (already good) */
@media (max-width: 991.98px) {
    .d-lg-none .list-card {
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.04);
        box-shadow: 0 14px 40px rgba(0,0,0,.35);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Patients — fix header width + clipping */
.lc-card.table-card .table-scroll {
    overflow: auto;
    border-radius: 18px;
}

/* ================================
   Patient Details v2 — New Look (Scoped)
================================ */

.lc-pdetails .lc-pd2-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr;
    gap: 14px;
    margin-top: 14px;
}

.lc-pdetails .lc-pd2-card {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

    /* subtle top accent */
    .lc-pdetails .lc-pd2-card::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 14px;
        width: 42px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(37,199,255,.95), rgba(42,168,255,.15));
        opacity: .9;
    }

.lc-pdetails .lc-pd2-card__title {
    color: rgba(255,255,255,.72);
    font-weight: 900;
    letter-spacing: .22px;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.lc-pdetails .lc-pd2-kv {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 14px;
    align-items: center;
}

    .lc-pdetails .lc-pd2-kv .k {
        color: rgba(255,255,255,.62);
        font-weight: 900;
    }

    .lc-pdetails .lc-pd2-kv .v {
        color: rgba(255,255,255,.92);
        font-variant-numeric: tabular-nums;
    }

.lc-pdetails .lc-pd2-num {
    font-size: 34px;
    font-weight: 950;
    color: rgba(255,255,255,.94);
    line-height: 1;
    margin-top: 4px;
}

.lc-pdetails .lc-pd2-sub {
    color: rgba(255,255,255,.65);
    margin-top: 8px;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 992px) {
    .lc-pdetails .lc-pd2-grid {
        grid-template-columns: 1fr;
    }

    .lc-pdetails .lc-pd2-kv {
        grid-template-columns: 130px 1fr;
    }
}

/* ===== Fix: Add Visit button contrast in header ===== */
.lc-pdetails .lc-pd-actions .btn-success {
    background: rgba(30,230,166,.14) !important;
    border-color: rgba(30,230,166,.35) !important;
    color: rgba(255,255,255,.92) !important; /* النص يصير واضح */
}

    .lc-pdetails .lc-pd-actions .btn-success:hover {
        background: rgba(30,230,166,.20) !important;
        border-color: rgba(30,230,166,.45) !important;
    }

/* ================================
   Patient Details — FINAL Polish (Scoped)
   Put at END of lc.components.css
================================ */

/* ===== Hero ===== */
.lc-pdetails .lc-pd-heroCard {
    border-radius: 22px;
}

.lc-pdetails .lc-pd-heroTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.lc-pdetails .lc-pd-h1 {
    margin: 2px 0 6px;
    font-weight: 950;
    letter-spacing: .2px;
    font-size: 34px;
}

.lc-pdetails .lc-pd-actionsRow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .lc-pdetails .lc-pd-actionsRow .btn {
        border-radius: 999px !important;
        padding: 8px 12px !important;
    }

/* Fix Add Visit readability + unify buttons */
.lc-pdetails .btn-success {
    background: rgba(30,230,166,.16) !important;
    border-color: rgba(30,230,166,.35) !important;
    color: rgba(255,255,255,.92) !important;
}

    .lc-pdetails .btn-success:hover {
        background: rgba(30,230,166,.22) !important;
        border-color: rgba(30,230,166,.45) !important;
    }

.lc-pdetails .btn-outline-secondary {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.88) !important;
}

    .lc-pdetails .btn-outline-secondary:hover {
        background: rgba(255,255,255,.07) !important;
    }

.lc-pdetails .btn-outline-danger {
    background: rgba(255,84,112,.10) !important;
    border-color: rgba(255,84,112,.26) !important;
    color: rgba(255,84,112,.95) !important;
}

    .lc-pdetails .btn-outline-danger:hover {
        background: rgba(255,84,112,.16) !important;
        border-color: rgba(255,84,112,.34) !important;
    }

/* ===== Mini stat strip ===== */
.lc-pdetails .lc-pd-statStrip {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.lc-pdetails .lc-pd-mini {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 12px 14px;
}

.lc-pdetails .lc-pd-miniNum {
    font-weight: 950;
    font-size: 22px;
    margin-top: 4px;
    color: rgba(255,255,255,.92);
}

.lc-pdetails .lc-pd-miniNumSm {
    font-size: 16px;
}

/* ===== Sections header chips ===== */
.lc-pdetails .lc-pd-section {
    border-radius: 22px;
}

.lc-pdetails .lc-pd-secTitle {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.lc-pdetails .lc-chip {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37,199,255,.12);
    border: 1px solid rgba(37,199,255,.18);
    color: rgba(37,199,255,.95);
}

.lc-pdetails .lc-pd-secH {
    font-weight: 950;
    margin-top: 2px;
}

/* ===== Key/Value (Overview) ===== */
.lc-pdetails .lc-pd-kv2 {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 14px;
    align-items: center;
}

    .lc-pdetails .lc-pd-kv2 .k {
        color: rgba(255,255,255,.70);
        font-weight: 900;
    }

    .lc-pdetails .lc-pd-kv2 .v {
        color: rgba(255,255,255,.92);
        font-variant-numeric: tabular-nums;
    }

/* ===== TABLE TEXT FIX (was too dark) ===== */
/* Apply only inside Details page tables */
.lc-pdetails table {
    color: rgba(255,255,255,.90) !important;
}

    .lc-pdetails table td {
        color: rgba(255,255,255,.86) !important;
    }

    .lc-pdetails table th {
        color: rgba(255,255,255,.72) !important;
    }

.lc-pdetails .lc-table,
.lc-pdetails .table-modern {
    background: rgba(255,255,255,.02) !important;
}

    .lc-pdetails .lc-table tbody tr:hover,
    .lc-pdetails .table-modern tbody tr:hover {
        background: rgba(37,199,255,.06) !important;
    }

/* Fix “PRICE / Total” and any muted text inside visits partial */
.lc-pdetails .lc-muted,
.lc-pdetails .text-muted,
.lc-pdetails .text-body-secondary {
    color: rgba(255,255,255,.68) !important;
}

/* Make tiny table labels readable */
.lc-pdetails .table-sm th,
.lc-pdetails .table-sm td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* ===== Visits cards buttons (Edit/Delete inside visit card) ===== */
.lc-pdetails .btn-sm {
    border-radius: 999px !important;
}

/* ===== Layout spacing refinement ===== */
.lc-pdetails .row.g-3 {
    --bs-gutter-y: 14px;
    --bs-gutter-x: 14px;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .lc-pdetails .lc-pd-heroTop {
        flex-direction: column;
    }

    .lc-pdetails .lc-pd-actionsRow {
        justify-content: flex-start;
    }

    .lc-pdetails .lc-pd-statStrip {
        grid-template-columns: 1fr;
    }

    .lc-pdetails .lc-pd-kv2 {
        grid-template-columns: 130px 1fr;
    }
}

/* ===== Patient Details: Info full-width polish ===== */
.lc-pdetails .lc-pd-info {
    border-radius: 22px;
}

.lc-pdetails .lc-pd-infoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin-top: 10px;
}

.lc-pdetails .lc-pd-infoItem {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 12px 14px;
}

    .lc-pdetails .lc-pd-infoItem .k {
        color: rgba(255,255,255,.65);
        font-weight: 900;
        font-size: 12px;
        letter-spacing: .18px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .lc-pdetails .lc-pd-infoItem .v {
        color: rgba(255,255,255,.92);
        font-variant-numeric: tabular-nums;
    }

.lc-pdetails .lc-pd-infoNotes {
    grid-column: 1 / -1;
}

/* responsive */
@media (max-width: 992px) {
    .lc-pdetails .lc-pd-infoGrid {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Visits Cards — Modern Treatments List
================================ */

.lc-visit {
    border-radius: 22px;
}

.lc-visit__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.lc-visit__title {
    font-weight: 950;
    letter-spacing: .2px;
}

.lc-visit__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .lc-visit__actions .btn {
        border-radius: 999px !important;
        padding: 7px 12px !important;
    }

/* list container */
.lc-treatList {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    overflow: hidden;
}

/* one treatment row */
.lc-treat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.07);
}

    .lc-treat:first-child {
        border-top: 0;
    }

    .lc-treat:hover {
        background: rgba(37,199,255,.06);
    }

.lc-treat__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lc-treat__text {
    min-width: 0;
}

.lc-treat__name {
    font-weight: 950;
    color: rgba(255,255,255,.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-treat__sub {
    margin-top: 4px;
    color: rgba(255,255,255,.66);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-treat__right {
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
}

/* numeric chips */
.lc-numchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    font-variant-numeric: tabular-nums;
}

.lc-numchip__k {
    color: rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18px;
    text-transform: uppercase;
}

.lc-numchip__v {
    color: rgba(255,255,255,.92);
    font-weight: 900;
}

/* total bar */
.lc-visit__total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
}

.lc-totalchip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(37,199,255,.20);
    background: rgba(37,199,255,.08);
    color: rgba(255,255,255,.92);
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

/* note */
.lc-visit__note {
    margin-top: 10px;
    color: rgba(255,255,255,.70);
    font-size: 13px;
}

/* responsive */
@media (max-width: 768px) {
    .lc-treat {
        align-items: flex-start;
        flex-direction: column;
    }

    .lc-treat__right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ================================
   Toast — Dark Glass (Global)
================================ */
.lc-toastHost {
    pointer-events: none;
}

    .lc-toastHost .lc-toast {
        pointer-events: auto;
    }

.lc-toast {
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(10,18,40,.78) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
    overflow: hidden;
}

.lc-toast__head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.92) !important;
}

.lc-toast__body {
    color: rgba(255,255,255,.86) !important;
}

.lc-toast__time {
    color: rgba(255,255,255,.60) !important;
}

/* close button in dark */
.lc-toast__close {
    filter: invert(1);
    opacity: .75;
}

    .lc-toast__close:hover {
        opacity: 1;
    }

/* icon tones */
.lc-toast.is-success .lc-toast__icon {
    color: rgba(30,230,166,.95);
}

.lc-toast.is-warning .lc-toast__icon {
    color: rgba(255,176,32,.95);
}

.lc-toast.is-danger .lc-toast__icon {
    color: rgba(255,84,112,.95);
}

.lc-toast.is-info .lc-toast__icon {
    color: rgba(37,199,255,.95);
}

/* subtle left accent */
.lc-toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: rgba(37,199,255,.55);
    opacity: .9;
}

.lc-toast.is-success::before {
    background: rgba(30,230,166,.55);
}

.lc-toast.is-warning::before {
    background: rgba(255,176,32,.55);
}

.lc-toast.is-danger::before {
    background: rgba(255,84,112,.55);
}

/* ================================
   Select / Dropdown (Category & Treatment) — Dark Theme Safe
   Works best on Firefox + modern browsers; others will at least improve the control.
================================ */

/* the select control itself */
select.form-select,
select.form-control,
select {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.90) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    /* hints browser to use dark UI for native widgets where supported */
    color-scheme: dark;
}

    select:focus {
        border-color: rgba(37,199,255,.35) !important;
        box-shadow: 0 0 0 3px rgba(37,199,255,.18) !important;
    }

    /* placeholder-ish / empty option (if you have one) */
    select option[value=""],
    select option:disabled {
        color: rgba(255,255,255,.55) !important;
    }

/* ===== Firefox supports styling dropdown list ===== */
@-moz-document url-prefix() {
    select {
        background-color: rgba(10,18,40,.88) !important;
    }

        select option {
            background-color: rgba(10,18,40,.98) !important;
            color: rgba(255,255,255,.92) !important;
        }

            select option:hover,
            select option:checked {
                background-color: rgba(37,199,255,.18) !important;
                color: rgba(255,255,255,.95) !important;
            }
}

/* ===== WebKit/Chromium: limited option styling, but we try ===== */
select option {
    color: rgba(255,255,255,.92);
}

/* If the dropdown still appears white in Chrome/Edge:
   that's native behavior and can't be fully overridden with CSS.
   The control will still look correct; only the opened list stays OS-styled. */

/* ================================
   Category & Treatment selects only
================================ */

select.lc-dd {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.92) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color-scheme: dark; /* يساعد المتصفح يخلي القائمة dark */
}

    select.lc-dd:focus {
        border-color: rgba(37,199,255,.35) !important;
        box-shadow: 0 0 0 3px rgba(37,199,255,.18) !important;
    }

    /* محاولة تحسين عناصر القائمة (تشتغل تمام على Firefox، وجزئيًا على غيره) */
    select.lc-dd option {
        color: rgba(255,255,255,.92);
    }

/* Firefox: نضمن القائمة نفسها dark */
@-moz-document url-prefix() {
    select.lc-dd {
        background-color: rgba(10,18,40,.88) !important;
    }

        select.lc-dd option {
            background-color: rgba(10,18,40,.98) !important;
            color: rgba(255,255,255,.92) !important;
        }

            select.lc-dd option:hover,
            select.lc-dd option:checked {
                background-color: rgba(37,199,255,.18) !important;
                color: rgba(255,255,255,.95) !important;
            }
}

/* ===== Fix white outline/border for lc-dd ===== */
select.lc-dd {
    outline: none !important;
    box-shadow: none !important;
}

    select.lc-dd:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(37,199,255,.18) !important; /* glow سماوي بدل الأبيض */
        border-color: rgba(37,199,255,.35) !important;
    }

/* Firefox: remove the white frame around the opened list */
@-moz-document url-prefix() {
    select.lc-dd {
        border-color: rgba(255,255,255,.14) !important;
    }

        select.lc-dd:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 rgba(255,255,255,.92);
        }
}

/* Try to avoid “hard white” selected highlight look */
@-moz-document url-prefix() {
    select.lc-dd option:checked {
        background-color: rgba(37,199,255,.20) !important;
    }
}

/* ================================
   Add Visit — FINAL UI (Scoped)
   (Works with lc-visitForm / lc-vf-section / lc-group classes)
================================ */

/* Section cards */
.lc-visitForm .lc-vf-section {
    border-radius: 22px;
}

/* Section titles */
.lc-visitForm .lc-vf-secTitle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.lc-visitForm .lc-vf-secTitle--row {
    justify-content: space-between;
}

/* Chip icon like dashboard */
.lc-visitForm .lc-chip {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37,199,255,.12);
    border: 1px solid rgba(37,199,255,.18);
    color: rgba(37,199,255,.95);
}

/* Labels */
.lc-visitForm .form-label {
    color: rgba(255,255,255,.78);
    font-weight: 800;
    letter-spacing: .1px;
}

/* Group card */
.lc-visitForm .lc-group {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

/* Group header */
.lc-visitForm .lc-vf-groupHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.lc-visitForm .lc-vf-groupTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.88);
}

    .lc-visitForm .lc-vf-groupTitle i {
        color: rgba(37,199,255,.90);
    }

/* Table container in group */
.lc-visitForm .lc-tablewrap {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
}

/* Table headers */
.lc-visitForm .lc-table thead th {
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.72) !important;
    border: 0 !important;
    letter-spacing: .18px;
    font-size: 12px;
    text-transform: uppercase;
}

/* Table cells */
.lc-visitForm .lc-table tbody td {
    color: rgba(255,255,255,.86) !important;
    border-color: rgba(255,255,255,.07) !important;
}

.lc-visitForm .lc-table tbody tr:hover {
    background: rgba(37,199,255,.06) !important;
}

/* Buttons match dashboard */
.lc-visitForm .btn {
    border-radius: 999px !important;
}

/* Summary: chip */
.lc-visitForm #procSummary {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(37,199,255,.18);
    background: rgba(37,199,255,.08);
    color: rgba(255,255,255,.88);
    font-variant-numeric: tabular-nums;
}

/* Softer separators */
.lc-visitForm hr {
    border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* ================================
   Category & Treatment selects (Scoped via lc-dd)
================================ */

/* The select control itself */
.lc-visitForm select.lc-dd {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.92) !important;
    border-radius: 14px !important;
    outline: none !important;
    box-shadow: none !important;
    /* helps native dropdown follow dark theme where supported */
    color-scheme: dark;
}

    /* Focus glow in theme colors (no white ring) */
    .lc-visitForm select.lc-dd:focus {
        border-color: rgba(37,199,255,.35) !important;
        box-shadow: 0 0 0 3px rgba(37,199,255,.18) !important;
    }

    /* Options: best effort (full control on Firefox, partial elsewhere) */
    .lc-visitForm select.lc-dd option {
        color: rgba(255,255,255,.92);
    }

/* Firefox: we can truly darken the opened dropdown list */
@-moz-document url-prefix() {
    .lc-visitForm select.lc-dd {
        background-color: rgba(10,18,40,.88) !important;
    }

        .lc-visitForm select.lc-dd option {
            background-color: rgba(10,18,40,.98) !important;
            color: rgba(255,255,255,.92) !important;
        }

            .lc-visitForm select.lc-dd option:hover,
            .lc-visitForm select.lc-dd option:checked {
                background-color: rgba(37,199,255,.18) !important;
                color: rgba(255,255,255,.95) !important;
            }
}

/* Make small selects in table look consistent */
.lc-visitForm .form-select-sm.lc-dd {
    border-radius: 12px !important;
    padding-top: .30rem !important;
    padding-bottom: .30rem !important;
}

/* Numeric inputs tidy */
.lc-visitForm input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* ================================
   Add Visit — Table Colors (Darker + Theme-aligned) + Hover not darker
   Scoped to .lc-visitForm only
================================ */

/* Table wrapper: darker navy surface */
.lc-visitForm .lc-tablewrap {
    background: rgba(7, 18, 38, .55) !important; /* قريب من bg1 */
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

/* Table header: slightly brighter than body, but still dark */
.lc-visitForm .lc-table thead th {
    background: rgba(7, 18, 38, .75) !important;
    color: rgba(255,255,255,.78) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Body rows: deep navy, not grey */
.lc-visitForm .lc-table tbody tr {
    background: rgba(7, 18, 38, .42) !important;
}

/* separators subtle */
.lc-visitForm .lc-table tbody td {
    border-top: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.88) !important;
}

/* Hover: DO NOT darken — slightly brighten + add glow line */
.lc-visitForm .lc-table tbody tr:hover {
    background: rgba(37,199,255,.07) !important; /* يفتح شوي */
    box-shadow: inset 0 0 0 1px rgba(37,199,255,.10);
}

    /* Keep inputs/selects inside table readable on hover */
    .lc-visitForm .lc-table tbody tr:hover .form-control,
    .lc-visitForm .lc-table tbody tr:hover .form-select {
        background: rgba(255,255,255,.05) !important;
    }

/* Make delete (−) button clearer but still subtle */
.lc-visitForm .lc-table .btn-outline-danger {
    border-color: rgba(255,84,112,.28) !important;
    color: rgba(255,84,112,.92) !important;
    background: rgba(255,84,112,.06) !important;
}

    .lc-visitForm .lc-table .btn-outline-danger:hover {
        background: rgba(255,84,112,.12) !important;
        border-color: rgba(255,84,112,.38) !important;
    }

/* ===== FORCE Add Visit table theme (must be LAST) ===== */
.lc-visitForm .lc-group .lc-tablewrap,
.lc-visitForm .lc-group .lc-tablewrap * {
    /* nothing here - just raises specificity context */
}

.lc-visitForm .lc-group .lc-tablewrap {
    background: rgba(7,18,38,.55) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.lc-visitForm .lc-group table.lc-table thead th {
    background: rgba(7,18,38,.78) !important;
    color: rgba(255,255,255,.78) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.lc-visitForm .lc-group table.lc-table tbody tr {
    background: rgba(7,18,38,.42) !important;
}

.lc-visitForm .lc-group table.lc-table tbody td {
    color: rgba(255,255,255,.88) !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
}

.lc-visitForm .lc-group table.lc-table tbody tr:hover {
    background: rgba(37,199,255,.07) !important;
    box-shadow: inset 0 0 0 1px rgba(37,199,255,.10) !important;
}

/* ===== Reports: Top patients readability (strong override) ===== */
.lc-reportsPage .top-patients-table tbody tr td {
    color: rgba(255,255,255,.88) !important;
}

    .lc-reportsPage .top-patients-table tbody tr td:first-child,
    .lc-reportsPage .top-patients-table tbody tr td.top-patient-name,
    .lc-reportsPage .top-patients-table tbody tr td:first-child a,
    .lc-reportsPage .top-patients-table tbody tr td.top-patient-name a {
        color: #ffffff !important;
        font-weight: 800 !important;
        opacity: 1 !important;
    }

    .lc-reportsPage .top-patients-table tbody tr td:nth-child(2),
    .lc-reportsPage .top-patients-table tbody tr td.top-patient-phone {
        color: rgba(255,255,255,.78) !important;
    }

.lc-reportsPage .top-patients-table tbody tr:hover td {
    background: rgba(37,199,255,.05) !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .lc-title,
    .lc-pagehead .lc-title,
    .lc-page .lc-title,
    .container .lc-title {
        color: #8fd8ff !important;
        opacity: 1 !important;
        text-shadow: 0 2px 18px rgba(0, 140, 255, 0.16);
    }
}