/* =========================================
   DR. MOIDEEN NAFSEER
   Premium Clinic Login Page
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');
:root {
    --navy: #103b59;
    --navy-dark: #082b43;
    --teal: #079b91;
    --teal-dark: #087d77;
    --text: #24445d;
    --muted: #71869a;
    --border: #dce8f2;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

#appointmentTime option.past-time-option,
#appointmentTime option.past-time-option:disabled {
    background-color: transparent !important;
    color: #c62828 !important;
}

/* Passed appointment times - disabled, light red */
/*#appointmentTime option.past-time-option,*/
/*#appointmentTime option.past-time-option:disabled {*/
/*    background-color: #ffd6d6 !important;*/
/*    color: #c62828 !important;*/
/*}*/
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: #eef5fb;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

/* LEFT CLINIC PANEL */

.clinic-panel {
    position: relative;
    min-height: 100vh;
    padding: 46px 7.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 90%,
            rgba(7, 155, 145, 0.15),
            transparent 40%
        ),
        linear-gradient(145deg, #f8fcff 0%, #e8f5f8 100%);
}

.clinic-panel::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(7, 155, 145, 0.12);
    border-radius: 50%;
    right: -180px;
    top: 18%;
    pointer-events: none;
}

.clinic-panel::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(16, 59, 89, 0.08);
    border-radius: 50%;
    right: -115px;
    top: calc(18% + 65px);
    pointer-events: none;
}


/*.clinic-photo-overlay {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    z-index: 0;*/
/*    display: block;*/
/*    background:*/
/*        linear-gradient(*/
/*            90deg,*/
/*            rgba(248, 252, 255, 0.92) 0%,*/
/*            rgba(232, 245, 248, 0.82) 55%,*/
/*            rgba(232, 245, 248, 0.55) 100%*/
/*        ),*/
/*        url("../images/loginimage.png") center / cover no-repeat;*/
/*    pointer-events: none;*/
/*}*/


.clinic-photo-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background:
        linear-gradient(
            90deg,
            rgba(248, 252, 255, 0.45) 0%,
            rgba(232, 245, 248, 0.35) 55%,
            rgba(232, 245, 248, 0.20) 100%
        ),
        url("../images/loginimage.png") center / cover no-repeat;
    pointer-events: none;
}




.brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 17px;
}

.brand-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--teal);
    border-radius: 17px;
    font-size: 33px;
    font-weight: 700;
    box-shadow: 0 9px 22px rgba(7, 155, 145, 0.18);
}

.brand h2 {
    margin: 0 0 5px;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 500;
}

.brand p {
    margin: 0;
    color: #698298;
    font-size: 9px;
    letter-spacing: 3px;
}

.welcome-content {
    position: relative;
    z-index: 1;
    max-width: 530px;
    padding: 48px 0;
}

.eyebrow,
.small-label {
    display: inline-block;
    color: var(--teal-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.3px;
}

.welcome-content h1 {
    margin: 23px 0 20px;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 5.1vw, 76px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -1.8px;
}

.welcome-content h1 span {
    color: var(--teal);
}

.intro {
    max-width: 390px;
    margin: 0 0 32px;
    color: #657e93;
    font-size: 16px;
    line-height: 1.9;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 19px;
}

.benefit-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #cce9e5;
    border-radius: 13px;
    font-size: 21px;
}

.benefit h3 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.benefit p {
    margin: 0;
    color: #748a9d;
    font-size: 11px;
}

.clinic-footer {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #71899d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

/* RIGHT LOGIN PANEL */

.form-panel {
    min-height: 100vh;
    padding: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(7, 155, 145, 0.08),
            transparent 38%
        ),
        linear-gradient(145deg, #edf4fc, #e4eef9);
}

.login-card {
    width: 100%;
    max-width: 490px;
    padding: 43px 44px 35px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 29px;
    box-shadow: 0 25px 70px rgba(20, 57, 87, 0.09);
}

.mobile-brand {
    display: none;
}

.card-heading {
    margin-bottom: 32px;
    text-align: center;
}

.card-heading .small-label {
    margin-bottom: 12px;
}

.card-heading h2 {
    margin: 0 0 11px;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(29px, 3vw, 39px);
    font-weight: 500;
}

.clinic-login-name {
    margin: 0 0 10px;
    color: var(--teal-dark);
    font-size: 19px;
    font-weight: 650;
}

.card-heading > p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.form-group {
    margin-bottom: 23px;
}

.form-group > label {
    display: block;
    margin-bottom: 10px;
    color: var(--navy-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.input-wrap {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 16px;
    background: #f4f8fc;
    border: 1px solid var(--border);
    border-radius: 13px;
    transition: border-color 0.2s, box-shadow 0.2s,
                background 0.2s;
}

.input-wrap:focus-within {
    background: var(--white);
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(7, 155, 145, 0.09);
}

.input-wrap > span {
    color: #8298ab;
    font-size: 17px;
}

.input-wrap input {
    width: 100%;
    min-width: 0;
    height: 51px;
    padding: 0;
    color: var(--navy);
    background: transparent;
    border: 0;
    outline: none;
    font: inherit;
    font-size: 13px;
}

.input-wrap input::placeholder {
    color: #9aabbb;
}

.toggle-password {
    flex-shrink: 0;
    padding: 5px;
    color: #657e93;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -1px 0 26px;
    font-size: 11px;
}

.remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #72869a;
    cursor: pointer;
}

.remember input {
    accent-color: var(--teal);
}

.login-options a {
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
}

.login-options a:hover {
    color: var(--teal-dark);
    text-decoration: underline;
}

.login-submit {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--white);
    background: linear-gradient(105deg, #0a9d91, #07877f);
    border: 0;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(7, 155, 145, 0.13);
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 25px rgba(7, 155, 145, 0.22);
}

.login-submit span:last-child {
    font-size: 19px;
}

.separator {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 25px 0;
    color: #8799aa;
    font-size: 11px;
}

.separator::before,
.separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #dce7f1;
}

.login-security-note {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    background: #f2f8fb;
    border: 1px solid #e2edf5;
    border-radius: 14px;
}

.login-security-note > span {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    background: var(--white);
    border-radius: 11px;
    font-size: 20px;
}

.login-security-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--navy);
    font-size: 12px;
}

.login-security-note p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.help-text {
    margin: 25px 0 0;
    color: #7d90a2;
    font-size: 11px;
    text-align: center;
}






/* =========================================
   DR. MOIDEEN NAFSEER - ADMIN DASHBOARD
   Navy, Teal & White Theme
========================================= */

.dashboard-layout {
    --dash-navy: #103B59;
    --dash-navy-dark: #082B43;
    --dash-teal: #079B91;
    --dash-teal-dark: #087D77;
    --dash-text: #24445D;
    --dash-muted: #71869A;
    --dash-border: #E3EBF2;
    --dash-bg: #F2F6FA;

    min-height: 100vh;
    display: flex;
    color: var(--dash-text);
    background: var(--dash-bg);
    font-family: "Segoe UI", Arial, sans-serif;
}

.dashboard-layout * {
    box-sizing: border-box;
}

.dashboard-layout a {
    text-decoration: none;
}

/* SIDEBAR */

.dashboard-layout .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    width: 265px;
    padding: 25px 17px 18px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    color: #fff;
    background: linear-gradient(180deg, #103B59 0%, #082B43 100%);
}

.dashboard-layout .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 7px 28px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.dashboard-layout .brand-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--dash-teal);
    border-radius: 13px;
    font-size: 25px;
}

.dashboard-layout .sidebar-brand h5 {
    margin: 0 0 5px;
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 500;
}

.dashboard-layout .sidebar-brand span {
    color: #B7D6E0;
    font-size: 8px;
    letter-spacing: 1.2px;
}

.dashboard-layout .sidebar-section {
    margin: 27px 10px 12px;
    color: #8FAFBE;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.dashboard-layout .nav-item {
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 5px;
    padding: 0 13px;
    color: #C5D7E2;
    border-radius: 10px;
    font-size: 15px;
    transition: background .2s, color .2s;
}

.dashboard-layout .nav-item > span {
    width: 21px;
    text-align: center;
    font-size: 18px;
}

.dashboard-layout .nav-item:hover,
.dashboard-layout .nav-item.active {
    color: #fff;
    background: linear-gradient(100deg, #079B91, #087D77);
    box-shadow: 0 6px 15px rgba(0,0,0,.12);
}

.dashboard-layout .sidebar-bottom {
    margin-top: auto;
    padding-top: 25px;
}

.dashboard-layout .admin-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 8px;
    border-top: 1px solid rgba(255,255,255,.13);
}

.dashboard-layout .admin-avatar,
.dashboard-layout .top-avatar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--dash-teal);
    border-radius: 50%;
    font-weight: 700;
}

.dashboard-layout .admin-profile strong,
.dashboard-layout .admin-profile small {
    display: block;
}

.dashboard-layout .admin-profile strong {
    color: white;
    font-size: 11px;
}

.dashboard-layout .admin-profile small {
    margin-top: 4px;
    color: #A9C4D1;
    font-size: 10px;
}

.dashboard-layout .logout-button {
    width: 100%;
    padding: 11px;
    color: #D7E5ED;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    font-size: 12px;
    cursor: pointer;
}

.dashboard-layout .logout-button:hover {
    background: rgba(255,255,255,.14);
}

/* MAIN CONTENT AND TOPBAR */

.dashboard-layout .main-content {
    min-width: 0;
    min-height: 100vh;
    flex: 1;
    margin-left: 265px;
}

.dashboard-layout .topbar {
    height: 77px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 35px;
    background: #fff;
    border-bottom: 1px solid var(--dash-border);
}

.dashboard-layout .breadcrumb-text {
    color: var(--dash-muted);
    font-size: 12px;
}

.dashboard-layout .breadcrumb-text strong {
    color: var(--dash-navy);
}

.dashboard-layout .breadcrumb-divider {
    margin: 0 10px;
    color: #B8C6D2;
}

.dashboard-layout .topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-layout .status-indicator {
    width: 8px;
    height: 8px;
    background: #24B47E;
    border-radius: 50%;
}

.dashboard-layout .admin-label {
    color: var(--dash-text);
    font-size: 11px;
}

.dashboard-layout .top-avatar {
    width: 36px;
    height: 36px;
    margin-left: 5px;
}

.dashboard-layout .menu-toggle {
    display: none;
    padding: 7px 10px;
    color: var(--dash-navy);
    background: #F0F7F8;
    border: 0;
    border-radius: 8px;
    font-size: 21px;
    cursor: pointer;
}

/* DASHBOARD BODY */

.dashboard-layout .dashboard-body {
    max-width: 1700px;
    margin: auto;
    padding: 35px;
}

/* Announcements page spacing */
.dashboard-layout .block-time-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 30px 28px !important;
    box-sizing: border-box;
}











.dashboard-layout .welcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 27px;
}

.dashboard-layout .welcome-label {
    color: var(--dash-teal-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.dashboard-layout .welcome-row h1 {
    margin: 9px 0 8px;
    color: var(--dash-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 500;
}

.dashboard-layout .welcome-row h1 span {
    color: #D5A54A;
    font-size: 20px;
}

.dashboard-layout .welcome-row p {
    margin: 0;
    color: var(--dash-muted);
    font-size: 12px;
}

.dashboard-layout .today-date {
    flex-shrink: 0;
    padding: 12px 15px;
    color: var(--dash-navy);
    background: #fff;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    font-size: 11px;
}

/* SUMMARY CARDS */

.dashboard-layout .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 25px;
}

.dashboard-layout .stat-card {
    min-width: 0;
    padding: 21px 19px;
    background: #fff;
    border: 1px solid #E8EEF4;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(16,59,89,.025);
    transition: transform .2s, box-shadow .2s;
}

.dashboard-layout .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(16,59,89,.07);
}

.dashboard-layout .stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #667F92;
    font-size: 11px;
    font-weight: 600;
}

.dashboard-layout .stat-icon {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.dashboard-layout .teal-icon {
    color: #07877F;
    background: #E1F5F1;
}

.dashboard-layout .blue-icon {
    color: #286DA0;
    background: #E6F1FC;
}

.dashboard-layout .amber-icon {
    color: #B98120;
    background: #FFF3D9;
}

.dashboard-layout .green-icon {
    color: #25875D;
    background: #E4F6EA;
}

.dashboard-layout .stat-card h2 {
    margin: 19px 0 7px;
    color: var(--dash-navy);
    font-size: 31px;
    font-weight: 700;
}

.dashboard-layout .stat-card p {
    margin: 0;
    color: #8A9CAD;
    font-size: 10px;
    line-height: 1.6;
}

/* APPOINTMENTS AND QUICK ACTIONS */

.dashboard-layout .content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: 22px;
}

.dashboard-layout .content-card {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid #E8EEF4;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(16,59,89,.025);
}

.dashboard-layout .card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
}

.dashboard-layout .card-heading h3 {
    margin: 0 0 7px;
    color: var(--dash-navy);
    font-size: 15px;
    font-weight: 700;
}

.dashboard-layout .card-heading p {
    margin: 0;
    color: var(--dash-muted);
    font-size: 10px;
}

.dashboard-layout .view-all {
    color: var(--dash-teal-dark);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-layout .empty-state {
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #EDF1F5;
}

.dashboard-layout .empty-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-teal);
    background: #E7F7F4;
    border-radius: 17px;
    font-size: 27px;
}

.dashboard-layout .empty-state h4 {
    margin: 17px 0 7px;
    color: var(--dash-navy);
    font-size: 13px;
}

.dashboard-layout .empty-state p {
    max-width: 280px;
    margin: 0;
    color: var(--dash-muted);
    font-size: 11px;
    line-height: 1.7;
}

.dashboard-layout .quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid #EDF1F5;
}

.dashboard-layout .action-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-teal-dark);
    background: #E7F7F4;
    border-radius: 12px;
    font-size: 20px;
}

.dashboard-layout .quick-action > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.dashboard-layout .quick-action strong,
.dashboard-layout .quick-action small {
    display: block;
}

.dashboard-layout .quick-action strong {
    color: var(--dash-navy);
    font-size: 11px;
}

.dashboard-layout .quick-action small {
    margin-top: 5px;
    color: var(--dash-muted);
    font-size: 10px;
}

.dashboard-layout .action-arrow {
    color: #9DAFBD;
    font-size: 23px;
}

.dashboard-layout .quick-action:hover strong,
.dashboard-layout .view-all:hover {
    color: var(--dash-teal);
}

.dashboard-layout .dashboard-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 27px;
    padding: 18px 0;
    color: #899BAA;
    border-top: 1px solid #E1EAF1;
    font-size: 10px;
}




/* =====================================
   DOCTOR AVAILABILITY PAGE
===================================== */

.availability-page {
    max-width: 1100px;
    margin: 0 auto;
    color: #263746;
}

.availability-heading h1 {
    color: #103B59;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.availability-heading p {
    color: #718096;
    margin-bottom: 0;
}

.availability-card {
    border: 1px solid #e5edf2;
    border-radius: 14px;
    box-shadow: 0 5px 24px rgba(16, 59, 89, 0.08);
    background: #ffffff;
    
    margin-top: 25px;
}

.availability-card .card-body {
    padding: 30px;
}

.availability-field label,
.availability-card .form-label {
    display: block;
    color: #103B59;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 9px;
}

.availability-card .form-control,
.availability-card .form-select {
    min-height: 47px;
    border: 1px solid #d9e2e8;
    border-radius: 8px;
    color: #263746;
    background-color: #ffffff;
}

.availability-card .form-control:focus,
.availability-card .form-select:focus {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.12);
}

.availability-actions {
    padding-top: 22px;
    border-top: 1px solid #edf1f4;
   
  
    
    

    
}

.availability-actions .btn-primary {
    background-color: #079B91;
    border-color: #079B91;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
}

.availability-actions .btn-primary:hover {
    background-color: #067d75;
    border-color: #067d75;
}


/* Doctor Availability Messages */
.availability-alert {
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.availability-alert-success {
    color: #176c45;
    background: #e8f7ee;
    border: 1px solid #b8e6c9;
}

.availability-alert-error {
    color: #a52834;
    background: #fdecee;
    border: 1px solid #f5c2c7;
}





/* Doctor Availability - Refined Layout */

.availability-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    color: #103B59;
}

.availability-heading {
    margin-bottom: 24px;
}

.availability-heading h1 {
    color: #103B59;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 8px;
}

.availability-heading p {
    color: #718096;
    font-size: 15px;
}

.availability-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5edf2;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(16, 59, 89, 0.07);
}

.availability-card .card-body {
    padding: 30px;
}

.availability-card .form-label {
    display: block;
    margin-bottom: 10px;
    color: #103B59;
    font-size: 13px;
    font-weight: 700;
}

.availability-card .form-control,
.availability-card .form-select {
    width: 100%;
    min-height: 47px;
    padding: 10px 14px;
    border: 1px solid #d5e0e8;
    border-radius: 9px;
    background-color: #ffffff;
    color: #263746;
    font-size: 15px;
    box-shadow: none;
}

.availability-card .form-control:focus,
.availability-card .form-select:focus {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.12);
}

.availability-actions {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e9eff3;
}

.availability-actions .btn-primary {
    min-height: 46px;
    padding: 12px 24px;
    background: #079B91;
    border: 1px solid #079B91;
    border-radius: 9px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s ease;
}

.availability-actions .btn-primary:hover {
    background: #067d75;
    border-color: #067d75;
}




/* Doctor Availability - Demo Layout Fix */

.availability-page {
    width: calc(100% - 40px);
    max-width: 1140px;
    margin: 30px auto !important;
    padding: 0 !important;
}

/*.availability-page .availability-heading {*/
/*    margin-bottom: 24px;*/
/*}*/




.availability-page .availability-heading {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    padding: 30px 34px;
    margin-bottom: 24px;
    border-radius: 20px;

    /*background:*/
    /*    linear-gradient(*/
    /*        90deg,*/
    /*        rgba(7, 65, 88, 0.95) 0%,*/
    /*        rgba(7, 112, 124, 0.75) 50%,*/
    /*        rgba(7, 112, 124, 0.15) 100%*/
    /*    ),*/
    /*    url('../images/doctoravailability.png')*/
    /*    center right / cover no-repeat;*/
    
    
    
    
    
background:
    linear-gradient(
        90deg,
        rgba(7, 65, 88, 0.95) 0%,
        rgba(7, 112, 124, 0.75) 50%,
        rgba(7, 112, 124, 0.15) 100%
    ),
    url('../images/doctoravailability.png')
    center 25% / cover no-repeat;


    box-shadow: 0 10px 28px rgba(16, 59, 89, 0.15);
}

.availability-page .availability-heading .availability-eyebrow,
.availability-page .availability-heading h1,
.availability-page .availability-heading p {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.availability-page .availability-heading h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 10px 0;
}

.availability-page .availability-heading p {
    font-size: 14px;
    margin-bottom: 0;
}















.availability-page .availability-card {
    width: 100%;
    border: 1px solid #e5edf2;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 24px rgba(16, 59, 89, 0.07);
}




/* Move Doctor Availability section upward */
.availability-page {
    margin-top: 10px !important;
}

/* Reduce space above the availability banner */
.availability-page .availability-heading {
    margin-top: 0 !important;
}

.availability-page .availability-card .card-body {
    padding: 24px;
}

.availability-page .availability-card .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 14px !important;
    margin: 0 !important;
}

.availability-page .availability-card .row > div[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.availability-page .form-label {
    display: block;
    margin-bottom: 9px;
    color: #103B59;
    font-size: 13px;
    font-weight: 700;
}

.availability-page .form-control,
.availability-page .form-select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d5e0e8;
    border-radius: 8px;
    font-size: 15px;
}

.availability-page .availability-actions {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid #e5edf2;
}

.availability-page .availability-actions .btn-primary {
    background: #079B91;
    border-color: #079B91;
    padding: 12px 20px;
    font-weight: 700;
}


/* ========================================
   DOCTOR AVAILABILITY - PROFESSIONAL STYLING
======================================== */

.availability-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 28px !important;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #243746;
}

.availability-heading {
    margin-bottom: 26px !important;
}

.availability-heading h1 {
    font-size: 28px;
    font-weight: 700;
    color: #103B59;
    margin-bottom: 8px;
}

.availability-heading p {
    color: #647787;
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* Individual section cards */
.availability-page .availability-card {
    display: block;
    width: 100%;
    margin: 0 0 26px !important;
    background: #ffffff;
    border: 1px solid #e0e9ef;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(16, 59, 89, 0.07);
    overflow: hidden;
}

.availability-page .availability-card .card-body {
    padding: 26px !important;
}

/* Section headings */
.availability-section-title {
    color: #103B59;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7eef2;
}

.availability-subtitle {
    color: #103B59;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
}

.availability-help {
    color: #6b7c89;
    font-size: 13px;
    line-height: 1.7;
    margin-top: 24px;
    margin-bottom: 0;
}

/* Form labels */
.availability-page .form-label {
    display: block;
    color: #344c5d;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Inputs, dropdowns and text areas */
.availability-page .form-control,
.availability-page .form-select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: #263b4a;
    background-color: #ffffff;
    border: 1px solid #ccd9e2;
    border-radius: 7px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.availability-page textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.availability-page .form-control:focus,
.availability-page .form-select:focus {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.12);
}

/* Button spacing */
.availability-page .availability-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e7eef2;
}

/* Professional button appearance */
.availability-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.availability-page .btn:hover {
    transform: translateY(-1px);
}

.availability-page .btn-primary,
.availability-page .btn-success {
    color: #ffffff;
    background: #079B91;
    border-color: #079B91;
}

.availability-page .btn-primary:hover,
.availability-page .btn-success:hover {
    background: #067e76;
    border-color: #067e76;
}

.availability-page .btn-warning {
    color: #ffffff;
    background: #d3913d;
    border-color: #d3913d;
}

.availability-page .btn-warning:hover {
    background: #b77928;
}

.availability-page .btn-danger {
    color: #ffffff;
    background: #d94a55;
    border-color: #d94a55;
}

.availability-page .btn-danger:hover {
    background: #bd3541;
}

.availability-page .btn-secondary {
    color: #ffffff;
    background: #647787;
    border-color: #647787;
}

.availability-page .btn-secondary:hover {
    background: #4c5f6e;
}

/* Success and error messages */
.availability-alert {
    padding: 13px 16px;
    margin-bottom: 20px;
    border-radius: 7px;
    font-size: 14px;
}

.availability-alert-success {
    color: #126447;
    background: #e7f7ef;
    border: 1px solid #b9e7d0;
}

.availability-alert-error {
    color: #9f2632;
    background: #fff0f1;
    border: 1px solid #f0c5c9;
}















/* ===== PREMIUM DOCTOR AVAILABILITY PAGE ===== */

.availability-page {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 30px !important;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #263b4a;
}

/* Page heading */
.availability-heading {
    position: relative;
    padding: 28px 30px;
    margin-bottom: 28px !important;
    border-radius: 16px;
    background: linear-gradient(120deg, #103B59, #176b78);
    box-shadow: 0 8px 24px rgba(16, 59, 89, .16);
}

.availability-heading h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 0 0 8px;
}

.availability-heading p {
    color: #d7e9ef;
    font-size: 14px;
    margin: 0;
    line-height: 1.7;
}

/* Separate, elegant section cards */
.availability-page .availability-card {
    margin: 0 0 28px !important;
    border: 1px solid #e0eaf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(16, 59, 89, .07);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.availability-page .availability-card:hover {
    box-shadow: 0 9px 28px rgba(16, 59, 89, .11);
}

.availability-page .availability-card .card-body {
    padding: 28px !important;
}

/* Section titles with teal accent */
.availability-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #103B59;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 25px;
    padding: 0 0 17px;
    border-bottom: 1px solid #e7eef3;
}

.availability-section-title::before {
    content: "";
    display: block;
    flex: 0 0 5px;
    height: 30px;
    border-radius: 5px;
    background: linear-gradient(180deg, #079B91, #49c5b7);
}

.availability-subtitle {
    color: #103B59;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.availability-help {
    color: #718391;
    font-size: 13px;
    line-height: 1.7;
}

/* Form labels */
.availability-page .form-label {
    color: #344d5e;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 9px;
}

/* Modern form controls */
.availability-page .form-control,
.availability-page .form-select {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    color: #243b4b;
    background-color: #f9fbfd;
    border: 1px solid #d8e3eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.availability-page .form-control:hover,
.availability-page .form-select:hover {
    border-color: #a9c9d1;
}

.availability-page .form-control:focus,
.availability-page .form-select:focus {
    background-color: #fff;
    border-color: #079B91;
    box-shadow: 0 0 0 4px rgba(7, 155, 145, .11);
    outline: none;
}

.availability-page textarea.form-control {
    min-height: 115px;
    resize: vertical;
}

/* Action area */
.availability-page .availability-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #e7eef3;
}

/* Consistent buttons */
.availability-page .btn {
    min-height: 43px;
    padding: 11px 21px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(16, 59, 89, .09);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.availability-page .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 59, 89, .15);
}

.availability-page .btn-primary,
.availability-page .btn-success {
    color: #fff;
    background: #079B91;
}

.availability-page .btn-primary:hover,
.availability-page .btn-success:hover {
    color: #fff;
    background: #067e76;
}

.availability-page .btn-warning {
    color: #fff;
    background: #c68a35;
}

.availability-page .btn-warning:hover {
    color: #fff;
    background: #a96e20;
}

.availability-page .btn-danger {
    color: #fff;
    background: #d94a55;
}

.availability-page .btn-danger:hover {
    color: #fff;
    background: #bb3440;
}

.availability-page .btn-secondary {
    color: #fff;
    background: #617887;
}

/* Posted item placeholders */
.availability-page .availability-subtitle {
    padding-top: 3px;
}


























/* =========================================
   AVAILABILITY PAGE - SECTION DESIGN
========================================= */

/*.availability-page {*/
/*    max-width: 1440px;*/
/*    width: 100%;*/
/*    margin: 0 auto;*/
/*    padding: 30px 28px;*/
/*    box-sizing: border-box;*/
/*}*/

.availability-page {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto !important;
    padding: 0 28px !important;
    box-sizing: border-box;
}


/* Heading banner */
.availability-eyebrow {
    color: #70e1d3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    margin-bottom: 10px;
}

.availability-heading {
    padding: 30px;
    margin-bottom: 26px !important;
    border-radius: 15px;
    background: linear-gradient(115deg, #103B59, #176c78);
    box-shadow: 0 8px 24px rgba(16, 59, 89, .15);
}

.availability-heading h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 750;
    margin: 0 0 8px;
}

.availability-heading p {
    color: #e0eff5;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* White cards with clear separation */
.availability-page .availability-card {
    display: block;
    width: 100%;
    margin: 0 0 24px !important;
    border: 1px solid #e0eaf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(16, 59, 89, .07);
    overflow: hidden;
}

.availability-page .availability-card-body {
    padding: 26px;
}

/* Icon and heading row */
.availability-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 24px;
}

.availability-section-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 27px;
    font-weight: 700;
}

.icon-teal {
    color: #079B91;
    background: #D8F5F1;
}

.icon-amber {
    color: #AD6A15;
    background: #FFE9C5;
}

.icon-red {
    color: #D83F4A;
    background: #FFE0E0;
}

.icon-blue {
    color: #4C70D9;
    background: #E1E8FF;
}

.availability-section-heading-text {
    min-width: 0;
}

.availability-page .availability-section-title {
    color: #103B59;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.35;
    margin: 0 0 5px;
    padding: 0;
    border: 0;
}

.availability-section-description {
    color: #687f91;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Responsive grid independent of Bootstrap */
.availability-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
}

.availability-block-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.availability-leave-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.availability-announcement-grid {
    grid-template-columns: 1.1fr .7fr 1.5fr;
}

.availability-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.availability-field {
    min-width: 0;
}

.availability-message-field {
    grid-row: auto;
}

.availability-page .form-label {
    display: block;
    color: #344d5e;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.availability-page .form-control,
.availability-page .form-select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    color: #243b4b;
    background: #f8fafc;
    border: 1px solid #d7e2eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.availability-page textarea.form-control {
    min-height: 86px;
    resize: vertical;
}

.availability-page .form-control:focus,
.availability-page .form-select:focus {
    background: #fff;
    border-color: #079B91;
    outline: none;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, .12);
}

/* Buttons */
.availability-page .availability-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e8eef3;
}

.availability-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(16, 59, 89, .08);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.availability-page .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16, 59, 89, .13);
}

.availability-page .btn-primary,
.availability-page .btn-success {
    color: #fff;
    background: #079B91;
    border-color: #079B91;
}




.availability-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 22px;
}

.availability-page .btn-primary:hover,
.availability-page .btn-success:hover {
    color: #fff;
    background: #067e76;
}

.availability-page .btn-warning {
    color: #fff;
    background: #D3913D;
    border-color: #D3913D;
}

.availability-page .btn-warning:hover {
    background: #B77928;
}

.availability-page .btn-danger {
    color: #fff;
    background: #D94A55;
    border-color: #D94A55;
}

.availability-page .btn-danger:hover {
    background: #BD3541;
}

.availability-page .btn-secondary {
    color: #fff;
    background: #617887;
    border-color: #617887;
}

/* Supporting text and placeholders */
.availability-page .availability-help {
    color: #718391;
    font-size: 12px;
    line-height: 1.7;
    margin: 14px 0 0;
}

.availability-list-placeholder {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e8eef3;
}

.availability-page .availability-subtitle {
    color: #103B59;
    font-size: 15px;
    font-weight: 750;
    margin: 0 0 7px;
}

.availability-page .availability-alert {
    padding: 13px 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
}

.availability-page .availability-alert-success {
    color: #126447;
    background: #e7f7ef;
    border: 1px solid #b9e7d0;
}

.availability-page .availability-alert-error {
    color: #9f2632;
    background: #fff0f1;
    border: 1px solid #f0c5c9;
}



/* =========================================
   ADMIN DASHBOARD - PREMIUM CLINIC DESIGN
   Outer background transparent
========================================= */

.admin-dashboard-summary {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 24px !important;
    padding: 22px 20px !important;
    box-sizing: border-box !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.admin-dashboard-title {
    margin: 0 0 20px !important;
    color: #103B59 !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}

/* Three equal cards in one row */
.admin-dashboard-cards {
    display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Common card styling */
.admin-dashboard-card {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 150px !important;
    padding: 24px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    overflow: hidden;
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: 17px !important;

    box-shadow: 0 8px 22px rgba(16, 59, 89, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(16, 59, 89, 0.11);
}

/* Unique blue card */
.admin-card-blue {
    background: linear-gradient(135deg, #F3F7FF 0%, #E4EEFF 100%) !important;
    border-color: #D6E5FF !important;
    border-left-color: #2165D5 !important;
}

/* Signature teal card */
.admin-card-teal {
    background: linear-gradient(135deg, #EEFBF8 0%, #DDF6F0 100%) !important;
    border-color: #CDEFE7 !important;
    border-left-color: #079B91 !important;
}

/* Premium purple card */
.admin-card-purple {
    background: linear-gradient(135deg, #F8F4FF 0%, #EEE5FF 100%) !important;
    border-color: #E6D9FF !important;
    border-left-color: #8054D6 !important;
}

/* Icon circles */
.admin-card-icon {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 54px !important;
    min-width: 54px;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    font-size: 24px !important;
}

.admin-card-blue .admin-card-icon {
    color: #2165D5 !important;
}

.admin-card-teal .admin-card-icon {
    color: #079B91 !important;
}

.admin-card-purple .admin-card-icon {
    color: #8054D6 !important;
}

/* Card text */
.admin-card-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.admin-card-value {
    margin: -5px 0 5px !important;
    color: #103B59 !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

.admin-card-content h3 {
    margin: 0 0 7px !important;
    color: #103B59 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}

.admin-card-content p {
    margin: 0 !important;
    color: #5F758B !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}















/* ==========================================
   PREMIUM MEDICAL DASHBOARD REDESIGN
   Dr. Moideen Nafseer
========================================== */

.dashboard-layout {
    --dash-navy: #103B59;
    --dash-navy-dark: #082B43;
    --dash-teal: #079B91;
    --dash-teal-dark: #087D77;
    --dash-text: #183B56;
    --dash-muted: #6F879C;
    --dash-border: #E2EBF3;
    --dash-bg: #F1F6FB;

    background: var(--dash-bg);
    color: var(--dash-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

/* SIDEBAR */

.dashboard-layout .sidebar {
    width: 265px;
    padding: 25px 16px 18px;
    background: linear-gradient(165deg, #103B59 0%, #082B43 100%);
    box-shadow: 5px 0 24px rgba(8, 43, 67, 0.08);
}

.dashboard-layout .sidebar-brand {
    padding-bottom: 27px;
}

.dashboard-layout .sidebar-brand h5 {
    font-size: 16px;
    font-weight: 600;
}

.dashboard-layout .sidebar-brand span {
    font-size: 9px;
    letter-spacing: 1.3px;
}

.dashboard-layout .sidebar-section {
    margin: 27px 10px 13px;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: #A8C8D8;
}

.dashboard-layout .nav-item {
    min-height: 48px;
    margin-bottom: 7px;
    padding: 0 13px;
    gap: 13px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 500;
    color: #D3E2EC;
    transition: background .2s, transform .2s;
}

.dashboard-layout .nav-item > span {
    width: 23px;
    font-size: 19px;
}

.dashboard-layout .nav-item:hover {
    background: rgba(255, 255, 255, .09);
    color: #FFFFFF;
    transform: translateX(2px);
}

.dashboard-layout .nav-item.active {
    background: linear-gradient(105deg, #079B91, #087D77);
    color: #FFFFFF;
    box-shadow: 0 7px 18px rgba(0, 155, 145, .2);
}

.dashboard-layout .admin-profile strong {
    font-size: 13px;
}

.dashboard-layout .admin-profile small {
    font-size: 11px;
}

.dashboard-layout .logout-button {
    font-size: 13px;
    border-radius: 10px;
}

/* MAIN CONTENT */

.dashboard-layout .main-content {
    background: #F1F6FB;
}

.dashboard-layout .topbar {
    height: 72px;
    padding: 0 30px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #E4ECF3;
}

.dashboard-layout .breadcrumb-text {
    font-size: 13px;
}

.dashboard-layout .admin-label {
    font-size: 12px;
}

/* PAGE SPACING */

.dashboard-layout .dashboard-body {
    max-width: 1800px;
    padding: 28px;
}

/* WELCOME BANNER */

.dashboard-layout .welcome-row {
    position: relative;
    overflow: hidden;
    min-height: 175px;
    padding: 31px 34px;
    margin-bottom: 20px;
    border-radius: 20px;

    background:
       linear-gradient(
           90deg,
           rgba(211, 245, 239, 0.97) 0%,
           rgba(232, 247, 250, 0.88) 48%,
            rgba(216, 237, 246, 0.40) 100%
        ),
        url('../images/loginimage.png')
       center right / cover no-repeat;



    border: 1px solid #D7EBEF;
    box-shadow: 0 8px 25px rgba(16, 59, 89, 0.045);
}

.dashboard-layout .welcome-row::after {
    content: "+";
    position: absolute;
    right: 45px;
    bottom: -62px;
    font-size: 210px;
    line-height: 1;
    font-weight: 200;
    color: rgba(7, 155, 145, .055);
    pointer-events: none;
}

.dashboard-layout .welcome-row > div {
    position: relative;
    z-index: 1;
}

.dashboard-layout .welcome-label {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #07877F;
}

.dashboard-layout .welcome-row h1 {
    margin: 12px 0 9px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 2.6vw, 39px);
    font-weight: 600;
    color: #103B59;
}

.dashboard-layout .welcome-row h1 span {
    color: #D7A33F;
    font-size: 25px;
}

.dashboard-layout .welcome-row p {
    font-size: 15px;
    color: #4D7188;
    line-height: 1.6;
}

.dashboard-layout .today-date {
    padding: 14px 18px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(16,59,89,.06);
    font-size: 13px;
    color: #103B59;
}

/* STATISTIC CARDS */

.dashboard-layout .stats-grid {
    gap: 16px;
    margin-bottom: 22px;
}

.dashboard-layout .stat-card {
    padding: 23px 21px;
    min-height: 166px;
    border: 1px solid #E4ECF4;
    border-radius: 17px;
    background: #FFFFFF;
    box-shadow: 0 5px 20px rgba(16, 59, 89, .035);
    transition: transform .2s, box-shadow .2s;
}

.dashboard-layout .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 28px rgba(16, 59, 89, .09);
}

.dashboard-layout .stat-top {
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #385B75;
    font-weight: 600;
}

.dashboard-layout .stat-icon {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    font-size: 22px;
}

.dashboard-layout .teal-icon {
    background: #DDF6F1;
    color: #079B91;
}

.dashboard-layout .blue-icon {
    background: #E2F0FF;
    color: #287BBE;
}

.dashboard-layout .amber-icon {
    background: #FFF1D2;
    color: #D58B14;
}

.dashboard-layout .green-icon {
    background: #DFF5E9;
    color: #209768;
}

.dashboard-layout .stat-card h2 {
    margin: 13px 0 6px;
    font-size: 35px;
    font-weight: 700;
    color: #103B59;
}

.dashboard-layout .stat-card p {
    font-size: 12px;
    line-height: 1.6;
    color: #71869A;
}

/* APPOINTMENTS AND QUICK ACTIONS */

.dashboard-layout .content-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr);
    gap: 20px;
}

.dashboard-layout .content-card {
    padding: 25px;
    border-radius: 18px;
    border: 1px solid #E3EBF3;
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(16, 59, 89, .035);
}

.dashboard-layout .card-heading {
    margin-bottom: 19px;
    padding-bottom: 17px;
    border-bottom: 1px solid #E9EFF5;
}

.dashboard-layout .card-heading h3 {
    margin-bottom: 6px;
    font-size: 19px;
    font-weight: 700;
    color: #103B59;
}

.dashboard-layout .card-heading p {
    font-size: 13px;
    color: #72879B;
}

.dashboard-layout .view-all {
    padding: 10px 13px;
    border-radius: 10px;
    background: #E6F8F5;
    color: #087D77;
    font-size: 13px;
}

.dashboard-layout .view-all:hover {
    background: #D1F1EB;
}

/* EMPTY APPOINTMENTS STATE */

.dashboard-layout .empty-state {
    min-height: 245px;
    padding: 25px;
    border-top: 0;
}

.dashboard-layout .empty-icon {
    width: 65px;
    height: 65px;
    border-radius: 20px;
    font-size: 30px;
    background: #E3F7F3;
    color: #079B91;
}

.dashboard-layout .empty-state h4 {
    margin: 17px 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #103B59;
}

.dashboard-layout .empty-state p {
    max-width: 340px;
    font-size: 13px;
    line-height: 1.8;
    color: #72879B;
}

/* QUICK ACTIONS */

.dashboard-layout .quick-action {
    padding: 16px 12px;
    margin-bottom: 7px;
    border: 1px solid transparent;
    border-radius: 13px;
    transition: background .2s, border-color .2s, transform .2s;
}

.dashboard-layout .quick-action:hover {
    background: #F3FAFC;
    border-color: #E2EDF4;
    transform: translateX(3px);
}

.dashboard-layout .action-icon {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    font-size: 22px;
}

.dashboard-layout .quick-action:nth-of-type(2) .action-icon {
    background: #E1F5F1;
    color: #079B91;
}

.dashboard-layout .quick-action strong {
    font-size: 14px;
    color: #103B59;
}

.dashboard-layout .quick-action small {
    font-size: 12px;
    line-height: 1.5;
    color: #72879B;
}

.dashboard-layout .action-arrow {
    font-size: 25px;
    color: #64859B;
}

/* FOOTER */

.dashboard-layout .dashboard-footer {
    margin-top: 25px;
    padding: 18px 0 8px;
    border-top: 1px solid #DDE7F0;
    font-size: 12px;
    color: #71869A;
}







/* Dashboard Stat Card Icons */
.dashboard-layout .stat-icon,
.dashboard-layout .action-icon,
.dashboard-layout .empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-layout .stat-icon i {
    font-size: 23px;
}

.dashboard-layout .teal-icon i {
    color: #079B91;
}

.dashboard-layout .blue-icon i {
    color: #1685D8;
}

.dashboard-layout .amber-icon i {
    color: #F0A000;
}

.dashboard-layout .green-icon i {
    color: #0AA77A;
}

/* Today's Appointments Empty State Icon */
.dashboard-layout .empty-icon i {
    font-size: 42px;
    color: #1685D8;
}

/* Quick Action Icons */
.dashboard-layout .quick-action .action-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #E0F7F4;
    color: #079B91;
    font-size: 19px;
}

.dashboard-layout .quick-action:nth-of-type(2) .action-icon {
    background: #E8F1FF;
    color: #2878D4;
}

.dashboard-layout .quick-action:nth-of-type(3) .action-icon {
    background: #F0E9FF;
    color: #8250DF;
}

.dashboard-layout .quick-action .action-arrow {
    margin-left: auto;
    font-size: 24px;
    color: #079B91;
}

















/* Clean Professional Clinic Topbar */
.dashboard-layout .topbar {
    background: #FFFFFF;
    border-bottom: 1px solid #E3EBF2;
    box-shadow: 0 3px 12px rgba(16, 59, 89, 0.04);
    position: sticky;
}

/* Breadcrumb styling */
.dashboard-layout .breadcrumb-text {
    color: #71869A;
    font-size: 12px;
}

.dashboard-layout .breadcrumb-text strong {
    color: #103B59;
    font-weight: 700;
}

.dashboard-layout .breadcrumb-divider {
    color: #079B91;
}

/* Administrator area */
.dashboard-layout .admin-label {
    color: #31566C;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-layout .top-avatar {
    background: #079B91;
    border: 3px solid #E0F5F2;
    box-shadow: none;
}



/* =========================================
   ANNOUNCEMENTS HERO BANNER
========================================= */

.announcements-hero {
    position: relative;
    width: 100%;
    min-height: 190px;
    display: flex;
    align-items: center;
    padding: 30px 34px;
    margin: 25px 0 26px;
    overflow: hidden;
    border-radius: 20px;



background:
    linear-gradient(
        90deg,
        rgba(4, 67, 84, 0.88) 0%,
        rgba(4, 105, 119, 0.65) 42%,
        rgba(4, 105, 119, 0.12) 75%,
        rgba(4, 105, 119, 0.02) 100%
    ),
    url('../images/doctorannouncementimage.png');

background-size: cover;
background-position: center;
background-repeat: no-repeat;



    box-shadow: 0 10px 25px rgba(16, 59, 89, 0.12);
}

/* Banner Content */
.announcements-hero-content {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.announcements-hero-label {
    display: inline-block;
    margin-bottom: 14px;
    color: #8ff5e9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.announcements-hero h1 {
    margin: 0 0 14px;
    color: #ffffff;
    /*font-size: clamp(28px, 3vw, 42px);*/
    font-weight: 750;
    line-height: 1.2;
    font-size: 28px;
}

.announcements-hero p {
    max-width: 500px;
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
}















/* =========================================
   DOCTOR VIDEOS HERO BANNER
========================================= */

.doctor-videos-hero {
    position: relative;
    width: 100%;
    min-height: 190px;
    display: flex;
    align-items: center;
    padding: 30px 34px;
    margin: 25px 0 26px;
    overflow: hidden;
    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 67, 84, 0.88) 0%,
            rgba(4, 105, 119, 0.65) 42%,
            rgba(4, 105, 119, 0.12) 75%,
            rgba(4, 105, 119, 0.02) 100%
        ),
        url('../images/doctorvideobanner.png');

    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;

    box-shadow: 0 10px 25px rgba(16, 59, 89, 0.12);
}

/* Banner Content */
.doctor-videos-hero-content {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.doctor-videos-hero-label {
    display: inline-block;
    margin-bottom: 14px;
    color: #8ff5e9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.doctor-videos-hero h1 {
    margin: 0 0 14px;
    color: #ffffff;
    /*font-size: clamp(28px, 3vw, 42px);*/
    font-weight: 750;
    line-height: 1.2;
    font-size: 28px;

}

.doctor-videos-hero p {
    max-width: 500px;
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
}







/* Doctor Availability - View Button */
.availability-section-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.availability-section-heading-text {
    flex: 1;
    min-width: 0;
}

.availability-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: #103B59;
    color: #FFFFFF;
    text-decoration: none;
    border: 1px solid #103B59;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.availability-view-btn:hover {
    background: #079B91;
    border-color: #079B91;
    color: #FFFFFF;
}




















/* ==========================================
   VIEW DOCTOR AVAILABILITY
========================================== */

/*.view-availability-page {*/
/*    padding: 24px;*/
/*   min-height: 100vh;*/
/*    background: #f2f8fc;*/
/*    color: #103B59;*/
/*}*/


.view-availability-page {
    padding: 0;
    min-height: 100vh;
    background: #f2f8fc;
    color: #103B59;
}


/* Page Banner */

.availability-banner {
    min-height: 155px;
    padding: 28px 32px;
    margin-bottom: 22px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    background: linear-gradient(
        110deg,
        #c9f0f0 0%,
        #e9f8fb 55%,
        #d9eeee 100%
    );
}

.availability-banner-icon {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    color: #079B91;
    border-radius: 25px;
    font-size: 42px;
}

.availability-banner-content h1 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 750;
    color: #103B59;
}

.availability-banner-content p {
    margin: 0;
    color: #345b78;
    font-size: 16px;
    line-height: 1.6;
}

/* Main Records Panel */

.availability-records-panel {
    padding: 22px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(16, 59, 89, 0.06);
}

/* Records Header */

.availability-records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 0 10px;
}

.availability-total {
    display: flex;
    align-items: center;
    gap: 18px;
}

.availability-total-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c8f1ef;
    color: #087e82;
    border-radius: 22px;
    font-size: 27px;
}

.availability-total-label {
    font-size: 15px;
    color: #103B59;
}

.availability-total-number {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    color: #079B91;
}

/* Back to Settings Button */

.availability-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 20px;
    border: 1px solid #079B91;
    border-radius: 14px;
    color: #079B91;
    background: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.availability-back-btn:hover {
    background: #079B91;
    color: #ffffff;
}

/* Individual Record Cards */

/*.availability-record-card {*/
/*    display: grid;*/
   
    
    
/*grid-template-columns:*/
/*    58px*/
/*    minmax(165px, 1.2fr)*/
/*    minmax(125px, 0.9fr)*/
/*    minmax(125px, 0.9fr)*/
/*    minmax(155px, 1.1fr)*/
/*    100px;*/


    
    
/*    align-items: center;*/
/*    gap: 14px;*/
/*    min-height: 100px;*/
/*    padding: 16px 18px;*/
/*    margin-bottom: 12px;*/
/*    border: 1px solid #e2eff7;*/
/*    border-radius: 17px;*/
/*    background: linear-gradient(*/
/*        105deg,*/
/*        #f2fbfd,*/
/*        #ffffff 55%,*/
/*        #eefaff*/
/*    );*/
/*    position: relative;*/
/*}*/





.view-availability-page .availability-record-card {
    display: grid;
    grid-template-columns:
        58px
        minmax(165px, 1.2fr)
        minmax(125px, 0.9fr)
        minmax(125px, 0.9fr)
        minmax(155px, 1.1fr)
        150px;
    align-items: center;
    gap: 14px;
    min-height: 90px;
    padding: 16px 18px;
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid #e2eff7;
    border-radius: 0;
    background: #ffffff;
    position: relative;
}


.availability-record-card:last-child {
    margin-bottom: 0;
}

.availability-record-card:nth-of-type(even) {
    background: linear-gradient(
        105deg,
        #f6f7ff,
        #ffffff 55%,
        #eff7ff
    );
}

/* Record Number */

.availability-record-number {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4f5f2;
    color: #079B91;
    font-size: 27px;
    font-weight: 800;
}

.availability-record-card:nth-of-type(3n)
.availability-record-number {
    background: #e4e3ff;
    color: #6862ce;
}

.availability-record-card:nth-of-type(4n)
.availability-record-number {
    background: #dceeff;
    color: #1682c8;
}

/* Record Information */

.availability-data {
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid #dfedf5;
}

.availability-data-label {
    display: block;
    margin-bottom: 7px;
    color: #345b78;
    font-size: 13px;
}

.availability-data-label i {
    margin-right: 6px;
    font-size: 16px;
}

.availability-date-value {
    color: #103B59;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Time and Holiday Labels */

.availability-data-value {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 12px;
    background: #d9f6f2;
    color: #079B91;
    font-size: 15px;
    font-weight: 750;
    white-space: nowrap;
}

.availability-data-value.time-until {
    background: #dceeff;
    color: #0878bd;
}

.availability-data-value.holiday {
    background: #fff2dc;
    color: #c87800;
}

/* View, Edit and Delete Actions */

.availability-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/*.availability-action-btn {*/
/*    width: 34px;*/
/*    height: 34px;*/
/*    flex-shrink: 0;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 0;*/
/*    border: none;*/
/*    border-radius: 10px;*/
/*    cursor: pointer;*/
/*    font-size: 15px;*/
/*    text-decoration: none;*/
/*    transition: all 0.2s ease;*/
/*}*/

.availability-action-btn {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
}
















.availability-view-action {
    color: #0878bd;
    background: #dceeff;
}

.availability-edit-action {
    color: #079B91;
    background: #d9f6f2;
}

.availability-delete-action {
    color: #dc3545;
    background: #ffe5e8;
}

.availability-action-btn:hover {
    transform: translateY(-2px);
    filter: brightness(0.96);
}

/* Empty Records Message */

.availability-empty {
    padding: 55px 20px;
    text-align: center;
    color: #61798b;
}

.availability-empty i {
    display: block;
    margin-bottom: 12px;
    color: #079B91;
    font-size: 45px;
}

.availability-empty h5 {
    color: #103B59;
    font-weight: 700;
}

.availability-empty p {
    margin-bottom: 0;
}






















/* Actions column: heading above, buttons in one row */
/*.availability-actions {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, 35px);*/
/*    grid-template-rows: auto 35px;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    column-gap: 6px;*/
/*    row-gap: 8px;*/
/*    min-width: 125px;*/
/*}*/


.availability-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 125px;
}

/* Actions heading spans the full width */
.availability-actions-heading {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    margin: 0;
    color: #718096;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Keep View, Edit and Delete on the same row */
.availability-actions .availability-action-btn {
    grid-row: 2;
    width: 35px;
    height: 35px;
    margin: 0;
}





/* Align Actions heading with the other column labels */
.availability-record-card {
    align-items: start;
}

.availability-record-card > .availability-actions {
    display: grid;
    grid-template-columns: repeat(3, 35px);
    grid-template-rows: 20px 35px;
    justify-content: center;
    align-content: start;
    align-items: center;
    column-gap: 6px;
    row-gap: 8px;
    min-width: 125px;
    margin-top: 0;
    padding-top: 0;
}

/* Actions heading at the top */
.availability-record-card > .availability-actions
.availability-actions-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    margin: 0;
    text-align: center;
    line-height: 20px;
}

/* All three buttons on the same row */
.availability-record-card > .availability-actions
.availability-action-btn {
    grid-row: 2;
    width: 35px;
    height: 35px;
    margin: 0;
}








/* Remove the unwanted horizontal line above Actions */
.availability-record-card > .availability-actions {
    border-top: none !important;
    background-image: none !important;
}

.availability-record-card > .availability-actions::before,
.availability-record-card > .availability-actions::after {
    content: none !important;
    display: none !important;
}

/* Match Actions heading with other column labels */
.availability-record-card .availability-actions-heading {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #718096;
    text-align: center;
}




/* Add the missing vertical separator before Actions */
.availability-record-card > .availability-actions {
    border-left: 1px solid #dce8ef !important;
    padding-left: 12px;
    box-sizing: border-box;
}

/* Keep the Actions heading and buttons aligned */
.availability-record-card > .availability-actions {
    justify-self: stretch;
    min-width: 0;
}




/* Smaller action icons with better spacing */
.availability-record-card > .availability-actions {
    padding-left: 8px;
    padding-right: 4px;
    column-gap: 4px;
    min-width: 0;
    grid-template-columns: repeat(3, 30px);
}

/* Reduce button size */
.availability-record-card > .availability-actions
.availability-action-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 8px;
}

/* Keep Actions heading centered */
.availability-record-card .availability-actions-heading {
    text-align: center;
}








/* ==========================================
   DOCTOR AVAILABILITY DETAILS MODAL
========================================== */

.availability-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 32, 49, 0.65);
    backdrop-filter: blur(5px);
    overflow-y: auto;
}

.availability-modal-overlay.modal-open {
    display: flex;
}

.availability-details-modal {
    position: relative;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: 100%;
    max-width: 1000px;
    max-height: 92vh;
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    animation: availabilityModalEnter 0.25s ease;
}

@keyframes availabilityModalEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Left branding panel */
.availability-modal-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 24px;
    overflow: hidden;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(155deg, #103B59 0%, #075E69 55%, #079B91 100%);
}

.availability-modal-sidebar::before,
.availability-modal-sidebar::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.availability-modal-sidebar::before {
    width: 280px;
    height: 280px;
    top: -120px;
    left: -130px;
}

.availability-modal-sidebar::after {
    width: 240px;
    height: 240px;
    right: -120px;
    bottom: -80px;
}

.availability-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.availability-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.availability-modal-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 23px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 30px;
}

.availability-modal-sidebar h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 23px;
    font-weight: 750;
}

.availability-modal-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

.availability-modal-doctor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-top: 45px;
    margin-bottom: 17px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 38px;
}

.availability-modal-sidebar h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.availability-modal-sidebar > p:last-of-type {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

.availability-modal-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 12px;
}

/* Right content panel */
.availability-modal-content {
    min-width: 0;
    padding: 30px;
    overflow-y: auto;
    background: #ffffff;
}

.availability-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 23px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9eff3;
}

.availability-modal-heading h2 {
    margin: 0 0 7px;
    color: #103B59;
    font-size: 22px;
    font-weight: 750;
}

.availability-modal-heading p {
    margin: 0;
    color: #7b8794;
    font-size: 13px;
}

.availability-modal-record-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #cceee9;
    border-radius: 8px;
    background: #eaf9f6;
    color: #087e76;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Loading and error */
.availability-modal-loading {
    padding: 35px 10px;
    color: #718096;
    text-align: center;
    font-size: 14px;
}

.availability-modal-loading .spinner-border {
    margin-right: 8px;
    color: #079B91;
}

.availability-modal-error {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #f5c6cb;
    border-radius: 10px;
    background: #fff0f0;
    color: #b42332;
    font-size: 13px;
}

/* Summary row */
.availability-modal-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    margin-bottom: 25px;
    border: 1px solid #dcefeb;
    border-radius: 13px;
    background: linear-gradient(110deg, #f0faf8, #f7fbfd);
}

.availability-modal-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    border-radius: 11px;
    background: #d9f3ee;
    color: #07877e;
    font-size: 20px;
}

.availability-modal-summary > div:nth-child(2),
.availability-modal-summary > div:nth-child(5) {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.availability-modal-summary span {
    color: #718096;
    font-size: 11px;
}

.availability-modal-summary strong {
    color: #103B59;
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.availability-modal-summary-divider {
    width: 1px;
    height: 40px;
    margin: 0 5px;
    background: #d5e6e4;
}

/* Schedule details */
.availability-modal-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 15px;
    color: #103B59;
    font-size: 15px;
    font-weight: 750;
}

.availability-modal-section-title i {
    color: #079B91;
    font-size: 18px;
}

.availability-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.availability-modal-detail-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px 13px;
    border: 1px solid #e6edf2;
    border-radius: 12px;
    background: #ffffff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.availability-modal-detail-card:hover {
    box-shadow: 0 5px 15px rgba(16, 59, 89, 0.07);
    transform: translateY(-1px);
}

.availability-modal-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #e8f5f7;
    color: #176b82;
    font-size: 19px;
}

.holiday-card .availability-modal-detail-icon {
    background: #fff3e3;
    color: #b7791f;
}

.booking-card .availability-modal-detail-icon {
    background: #e9efff;
    color: #536ac1;
}

.admin-card .availability-modal-detail-icon {
    background: #f0eaff;
    color: #7654b6;
}

.reserved-card .availability-modal-detail-icon {
    background: #e5f7ed;
    color: #218653;
}

.availability-modal-detail-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.availability-modal-detail-card span {
    color: #718096;
    font-size: 11px;
    line-height: 1.4;
}

.availability-modal-detail-card strong {
    color: #103B59;
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

/* Last updated note */
.availability-modal-updated {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #f3f8fb;
    color: #647789;
    font-size: 12px;
    line-height: 1.6;
}

.availability-modal-updated > i {
    margin-top: 2px;
    color: #079B91;
}

.availability-modal-updated strong {
    color: #103B59;
    font-weight: 650;
}

/* Footer buttons */
.availability-modal-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 19px;
    border-top: 1px solid #e9eff3;
}

.availability-modal-secondary-btn,
.availability-modal-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.2s ease;
}

.availability-modal-secondary-btn {
    border-color: #dce6ec;
    background: #ffffff;
    color: #526477;
}

.availability-modal-secondary-btn:hover {
    background: #f1f5f8;
}

.availability-modal-primary-btn {
    background: #079B91;
    color: #ffffff;
}

.availability-modal-primary-btn:hover:not(:disabled) {
    background: #067c75;
}

.availability-modal-primary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}




.availability-modal-doctor-icon {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px;
    min-height: 100px;
    margin: 30px auto 17px;
    border: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
    display: block;
    position: relative;
    flex-shrink: 0;
}

.availability-modal-doctor-icon img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50% !important;
}

















/* =========================================
   EDIT DOCTOR AVAILABILITY PAGE
========================================= */

.edit-availability-page {
    padding: 22px;
    background: #f1f7fc;
}

/* Banner */
.edit-availability-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 155px;
    padding: 28px 34px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #d9efef;
    border-radius: 18px;
    background:
        radial-gradient(circle at 95% 10%, rgba(7,155,145,.13), transparent 30%),
        linear-gradient(115deg, #ffffff 0%, #f0fbfa 58%, #e4f7f6 100%);
}

.edit-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    border-radius: 18px;
    background: #ddf7f3;
    color: #079B91;
    font-size: 37px;
}

.edit-banner-tag {
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 7px;
    border-radius: 7px;
    background: #dff7f3;
    color: #087d75;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.edit-availability-banner h1 {
    margin: 0 0 7px;
    color: #103B59;
    font-size: 28px;
    font-weight: 800;
}

.edit-availability-banner h1 span {
    color: #079B91;
}

.edit-availability-banner p {
    max-width: 540px;
    margin: 0;
    color: #637d91;
    font-size: 13px;
    line-height: 1.7;
}

.edit-banner-decoration {
    position: absolute;
    right: 40px;
    top: 25px;
    color: rgba(7, 155, 145, .13);
    font-size: 105px;
    transform: rotate(-12deg);
}

/* Main layout */
.edit-availability-layout {
    display: grid;
    grid-template-columns: minmax(230px, .78fr) minmax(0, 2fr);
    align-items: stretch;
    gap: 16px;
}

/* Date panel */
.edit-date-panel,
.edit-settings-panel {
    min-width: 0;
    border: 1px solid #e1edf5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 22px rgba(16, 59, 89, .045);
}

.edit-date-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 23px;
    overflow: hidden;
}

.edit-panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.edit-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #e1f8f4;
    color: #079B91;
    font-size: 21px;
}

.edit-panel-heading h2 {
    margin: 0 0 5px;
    color: #103B59;
    font-size: 14px;
    font-weight: 700;
}

.edit-panel-heading p {
    margin: 0;
    color: #8293a3;
    font-size: 13px;
}

.edit-record-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    margin-bottom: 23px;
    border: 1px solid #d8efec;
    border-radius: 12px;
    background: linear-gradient(110deg, #effaf8, #f7fbfd);
}

.edit-record-number span {
    color: #758a9b;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .6px;
}

.edit-record-number strong {
    color: #079B91;
    font-size: 23px;
    font-weight: 800;
}

.edit-field-label {
    display: block;
    margin-bottom: 9px;
    color: #28485f;
    font-size: 14px;
    font-weight: 600;
}

.edit-field-label span {
    color: #e35b61;
}

.edit-form-control {
    min-height: 45px;
    border: 1px solid #d9e5ee;
    border-radius: 9px;
    background-color: #ffffff;
    color: #103B59;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

.edit-form-control:focus {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, .10);
}

.edit-date-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 13px;
    margin-top: 18px;
    border-radius: 10px;
    background: #f0f8fd;
    color: #5f7890;
    font-size: 11px;
    line-height: 1.65;
}

.edit-date-note i {
    margin-top: 2px;
    color: #1484b5;
}

.edit-date-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 110px;
    margin-top: 20px;
    color: #e4f4f4;
    font-size: 90px;
}

/* Right settings panel */
.edit-settings-panel {
    overflow: hidden;
}

.edit-form-section {
    padding: 22px 24px;
    border-bottom: 1px solid #edf1f5;
}

.edit-hours-section {
    background: linear-gradient(110deg, #ffffff, #fbfefe);
}

.edit-holiday-section {
    background: linear-gradient(110deg, #ffffff, #fffdf9);
}

.edit-booking-section {
    background: linear-gradient(110deg, #ffffff, #fcfaff);
}

.edit-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.edit-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
}

.step-teal {
    background: linear-gradient(135deg, #13b6aa, #07867e);
}

.step-orange {
    background: linear-gradient(135deg, #ffbd48, #e38b05);
}

.step-purple {
    background: linear-gradient(135deg, #a88aff, #7852e8);
}

.edit-section-heading h2 {
    margin: 0 0 5px;
    color: #103B59;
    font-size: 14px;
    font-weight: 600;
}

.edit-section-heading p {
    margin: 0;
    color: #7b8fa1;
    font-size: 13px;
    line-height: 1.5;
}

.edit-heading-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    border-radius: 13px;
    background: #e6f8f5;
    color: #079B91;
    font-size: 24px;
}

.edit-holiday-section .edit-heading-art {
    background: #fff3df;
    color: #e39719;
}

.edit-booking-section .edit-heading-art {
    background: #f0eaff;
    color: #8a65ed;
}

/* Input grid */
.edit-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    padding: 17px;
    border: 1px solid #d9f0ed;
    border-radius: 12px;
    background: rgba(235, 250, 247, .65);
}

.edit-holiday-section .edit-fields-grid {
    border-color: #f5e7cb;
    background: rgba(255, 249, 237, .65);
}

.edit-booking-section .edit-fields-grid {
    border-color: #e8e0ff;
    background: rgba(247, 244, 255, .7);
}

.edit-input-with-icon {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.edit-input-with-icon > i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: 1px solid #d9e5ee;
    border-right: 0;
    border-radius: 9px 0 0 9px;
    background: #f0f8fb;
    color: #147a93;
    font-size: 17px;
}

.edit-input-with-icon .edit-form-control {
    min-width: 0;
    border-radius: 0 9px 9px 0;
}

.edit-holiday-section .edit-input-with-icon > i {
    background: #fff2df;
    color: #d88a0a;
}

.edit-booking-section .edit-input-with-icon > i {
    background: #eee9ff;
    color: #795de0;
}

.edit-number-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    padding: 15px;
}

.edit-number-grid .edit-field-label {
    min-height: 32px;
    line-height: 1.5;
}

.edit-field-help {
    display: block;
    margin-top: 6px;
    color: #8a96a5;
    font-size: 10px;
}

/* Footer */
.edit-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    padding: 17px 24px;
    background: #ffffff;
}

.edit-cancel-btn,
.edit-update-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 19px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer;
}

.edit-cancel-btn {
    border: 1px solid #b9cddd;
    background: #ffffff;
    color: #103B59;
}

.edit-cancel-btn:hover {
    background: #f0f6fa;
    color: #103B59;
}

.edit-update-btn {
    border: 1px solid #079B91;
    background: linear-gradient(115deg, #0ca99e, #087e79);
    color: #ffffff;
    box-shadow: 0 5px 13px rgba(7,155,145,.15);
}

.edit-update-btn:hover {
    border-color: #066c67;
    background: #066c67;
    color: #ffffff;
    transform: translateY(-1px);
}
















































/* Always-visible calendar in Edit Availability */
.edit-calendar {
    margin-top: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #d9e9f1;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(16, 59, 89, 0.06);
}

.edit-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.edit-calendar-header strong {
    color: #103b59;
    font-size: 14px;
    text-align: center;
}

.edit-calendar-header button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: #e3f7f5;
    color: #079b91;
    cursor: pointer;
}

.edit-calendar-weekdays,
.edit-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    text-align: center;
}

.edit-calendar-weekdays span {
    padding: 6px 0;
    color: #71849a;
    font-size: 10px;
    font-weight: 700;
}

.edit-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #103b59;
    font-size: 12px;
    cursor: pointer;
}

.edit-calendar-day:hover {
    border-color: #079b91;
    background: #e3f7f5;
}

.edit-calendar-day.is-selected {
    background: #079b91;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(7, 155, 145, 0.25);
}

/*.edit-calendar-day.is-today:not(.is-selected) {*/
/*    border-color: #079b91;*/
/*}*/

.edit-calendar-day.is-empty {
    pointer-events: none;
}

.edit-calendar-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px;
    border: 1px solid #c8efeb;
    border-radius: 10px;
    background: #effbf9;
    color: #079b91;
}

.edit-calendar-selected i {
    font-size: 20px;
}

.edit-calendar-selected small,
.edit-calendar-selected strong {
    display: block;
}

.edit-calendar-selected small {
    margin-bottom: 3px;
    color: #71849a;
    font-size: 10px;
}

.edit-calendar-selected strong {
    color: #103b59;
    font-size: 12px;
}





































/* Delete Availability Confirmation Popup */
.availability-delete-modal {
    border: none;
    border-radius: 18px;
    overflow: hidden;
}

.availability-delete-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #d92d20;
    font-size: 26px;
}

.availability-delete-modal h5 {
    color: #103b59;
    font-weight: 700;
}

.availability-delete-modal p {
    font-size: 14px;
    line-height: 1.6;
}

.availability-delete-modal .btn {
    min-width: 115px;
    border-radius: 8px;
    padding: 9px 16px;
    font-weight: 600;
}




















/* FIX: Block Time submit button */
.block-time-page .availability-actions {
    display: flex !important;
   justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
}

.block-time-page .availability-actions button,
.block-time-page .availability-actions .btn-warning {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 12px 24px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    border-radius: 9px !important;
}

.block-time-page .availability-actions button i,
.block-time-page .availability-actions button span {
    display: inline-block !important;
    flex-shrink: 0 !important;
}








/* Block Time - View Button */
.block-time-page .block-time-heading-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
    padding: 10px 22px;
    min-height: 42px;
    border: 1px solid #079b91;
    border-radius: 9px;
    background: #ffffff;
    color: #079b91;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.block-time-page .block-time-heading-view-btn:hover {
    background: #079b91;
    border-color: #079b91;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(7, 155, 145, 0.18);
}

.block-time-page .block-time-heading-view-btn i {
    font-size: 15px;
}

/* Keep the heading and View button aligned */
.block-time-page .availability-section-heading {
    display: flex;
    align-items: center;
    gap: 18px;
}

.block-time-page .availability-section-heading-text {
    flex: 1;
    min-width: 0;
}


















/* Block Time View Button - Match Doctor Availability */
a.block-time-heading-view-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    margin-left: auto !important;
    padding: 12px 28px !important;
    min-width: 80px;
    min-height: 44px;
    border: 1px solid #103B59 !important;
    border-radius: 9px !important;
    background: #103B59 !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

a.block-time-heading-view-btn:hover {
    background: #079B91 !important;
    border-color: #079B91 !important;
    color: #ffffff !important;
}

a.block-time-heading-view-btn i {
    font-size: 15px;
}


































/* =========================================
   VIEW BLOCKED TIMES PAGE
========================================= */

.block-time-list-page {
    display: flex;
    min-height: 100vh;
    background: #f1f7fc;
    color: #103b59;
    font-family: "Segoe UI", sans-serif;
}

.block-time-list-page .sidebar {
    width: 265px;
    min-width: 265px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #103b59, #092e46);
    color: #fff;
}

.block-time-list-page .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 28px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    margin-bottom: 28px;
}

.block-time-list-page .sidebar-brand-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: #079b91;
    font-size: 30px;
    font-weight: 700;
}

.block-time-list-page .sidebar-brand h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.block-time-list-page .sidebar-brand small {
    font-size: 9px;
    letter-spacing: 1px;
    color: #c5d8e4;
}

.block-time-list-page .sidebar-menu-title {
    margin: 0 10px 18px;
    color: #a9c6d7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.block-time-list-page .sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    color: #dce9f0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.block-time-list-page .sidebar-link:hover,
.block-time-list-page .sidebar-link.active {
    background: #079b91;
    color: #fff;
}

.block-time-list-page .sidebar-logout {
    margin-top: auto;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
}

.block-time-list-page .availability-main {
    flex: 1;
    min-width: 0;
}

.block-time-list-page .availability-topbar {
    min-height: 72px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #fff;
    border-bottom: 1px solid #e3edf4;
    font-size: 12px;
}

.block-time-list-page .availability-topbar span {
    margin: 0 10px;
    color: #079b91;
}

.block-time-list-page .availability-admin {
    white-space: nowrap;
    color: #526a7b;
}

.block-time-list-page .availability-admin span {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #079b91;
}

.block-time-list-page .availability-content {
    padding: 28px;
}

.block-time-list-page .availability-page-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: linear-gradient(110deg, #cef2f0, #e0f3f2);
}

.block-time-list-page .availability-page-banner-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 22px;
    background: #fff;
    color: #079b91;
    font-size: 30px;
}

.block-time-list-page .availability-page-banner h1 {
    margin: 0 0 7px;
    color: #103b59;
    font-size: 27px;
    font-weight: 750;
}

.block-time-list-page .availability-page-banner p {
    margin: 0;
    color: #526b7d;
    font-size: 13px;
}

.block-time-list-page .availability-records-card {
    padding: 20px 17px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(16,59,89,.05);
}

.block-time-list-page .availability-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 8px 18px;
}

.block-time-list-page .availability-records-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.block-time-list-page .availability-records-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #d5f5f2;
    color: #079b91;
    font-size: 23px;
}

.block-time-list-page .availability-records-title small {
    color: #103b59;
    font-size: 12px;
}

.block-time-list-page .availability-records-title h2 {
    margin: 2px 0 0;
    color: #079b91;
    font-size: 28px;
    font-weight: 750;
}

.block-time-list-page .availability-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 17px;
    border: 1px solid #079b91;
    border-radius: 10px;
    background: #fff;
    color: #079b91;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.block-time-list-page .availability-back-btn:hover {
    background: #079b91;
    color: #fff;
}

.block-time-list-page .blocked-time-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.block-time-list-page .blocked-time-row {
    display: grid;
    grid-template-columns: 48px minmax(150px, 1fr) minmax(150px, 1.4fr) 140px;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid #dcecf6;
    border-radius: 15px;
    background: linear-gradient(110deg, #f5fcfc, #f7f9ff);
}

.block-time-list-page .blocked-time-number {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #d5f5f2;
    color: #079b91;
    font-size: 21px;
    font-weight: 750;
}

.block-time-list-page .blocked-time-date,
.block-time-list-page .blocked-time-reason {
    min-width: 0;
    padding: 5px 12px;
    border-right: 1px solid #dce8f1;
}

.block-time-list-page .blocked-time-date small,
.block-time-list-page .blocked-time-reason small {
    display: block;
    margin-bottom: 7px;
    color: #587184;
    font-size: 11px;
}

.block-time-list-page .blocked-time-date small i,
.block-time-list-page .blocked-time-reason small i {
    margin-right: 5px;
    color: #079b91;
}

.block-time-list-page .blocked-time-date strong,
.block-time-list-page .blocked-time-reason strong {
    display: block;
    overflow-wrap: anywhere;
    color: #103b59;
    font-size: 13px;
    font-weight: 700;
}

.block-time-list-page .blocked-time-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.block-time-list-page .blocked-time-actions small {
    width: 100%;
    margin-bottom: 3px;
    color: #587184;
    font-size: 10px;
    text-align: center;
}

.block-time-list-page .availability-action-btn {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.block-time-list-page .availability-view-action {
    background: #dceeff;
    color: #0877bf;
}

.block-time-list-page .availability-edit-action {
    background: #d9f5ee;
    color: #079b91;
}

.block-time-list-page .availability-delete-action {
    background: #ffe4e8;
    color: #e3445b;
}

.block-time-list-page .availability-action-btn:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
}

.block-time-list-page .availability-empty {
    padding: 45px 20px;
    text-align: center;
    color: #627b8c;
}

.block-time-list-page .availability-empty > i {
    color: #079b91;
    font-size: 38px;
}

.block-time-list-page .availability-empty h5 {
    margin-top: 14px;
    color: #103b59;
    font-weight: 700;
}













































/* =========================================
   MATCH BLOCKED TIMES PAGE TO AVAILABILITY
========================================= */

.block-time-list-page {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    background: #f1f7fc;
}

.block-time-list-page .sidebar {
    flex: 0 0 200px !important;
    width: 200px !important;
    min-width: 200px !important;
}

.block-time-list-page .availability-main {
    flex: 1 1 auto !important;
    width: calc(100% - 200px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.block-time-list-page .availability-topbar {
    width: 100% !important;
    min-height: 70px;
    padding: 20px 24px !important;
}

.block-time-list-page .availability-content {
    width: 100% !important;
    max-width: none !important;
    padding: 28px !important;
    margin: 0 !important;
}

.block-time-list-page .availability-page-banner {
    width: 100% !important;
    min-height: 116px;
    margin-bottom: 18px !important;
    padding: 24px !important;
    border-radius: 18px;
}

.block-time-list-page .availability-records-card {
    width: 100% !important;
    max-width: none !important;
    padding: 18px !important;
    border-radius: 18px;
}

.block-time-list-page .availability-records-header {
    padding: 0 6px 18px !important;
}

.block-time-list-page .blocked-time-list {
    width: 100% !important;
    gap: 10px !important;
}

.block-time-list-page .blocked-time-row {
    width: 100% !important;
    grid-template-columns:
        48px
        minmax(200px, 1fr)
        minmax(200px, 1.4fr)
        100px !important;
    gap: 12px !important;
    min-height: 78px;
    padding: 12px 15px !important;
    border-radius: 15px;
}

/* Keep actions aligned like Doctor Availability */
.block-time-list-page .blocked-time-actions {
    justify-content: center !important;
    border-left: 1px solid #dce8f1;
    padding-left: 10px;
}

.block-time-list-page .blocked-time-actions small {
    text-align: center;
}
















/* FIX: Keep all Block Time action icons in one row */
.block-time-list-page .blocked-time-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-left: none !important;
    padding-left: 8px !important;
}

/* Actions heading occupies its own row */
.block-time-list-page .blocked-time-actions small {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 3px !important;
    text-align: center !important;
}

/* Keep each icon the same size */
.block-time-list-page .blocked-time-actions .availability-action-btn {
    display: inline-flex !important;
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
}












/* Keep enough width for the Actions column */
.block-time-list-page .blocked-time-row {
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr) 125px !important;
}

/* Actions heading and icons */
.block-time-list-page .blocked-time-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 27px) !important;
    grid-template-rows: auto 27px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 5px !important;
    row-gap: 4px !important;
    border-left: 1px solid #dce8f1 !important;
    padding-left: 10px !important;
    min-width: 0 !important;
}

/* Actions label spans the full row */
.block-time-list-page .blocked-time-actions small {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Three icons stay in one row */
.block-time-list-page .blocked-time-actions .availability-action-btn {
    grid-row: 2 !important;
    width: 27px !important;
    height: 27px !important;
    margin: 0 !important;
    flex: none !important;
}







/* Remove extra vertical dividers in Block Time rows */
.block-time-list-page .blocked-time-date,
.block-time-list-page .blocked-time-reason {
    border-right: none !important;
}

/* Keep only one divider before Actions */
.block-time-list-page .blocked-time-actions {
    border-left: 1px solid #dce8f1 !important;
}




/* Divider between Date and Reason only */
.block-time-list-page .blocked-time-date {
    border-right: 1px solid #dce8f1 !important;
    padding-right: 16px !important;
}









/* Increase only column heading font sizes */
.block-time-list-page .blocked-time-date small,
.block-time-list-page .blocked-time-reason small,
.block-time-list-page .blocked-time-actions small {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #103b59 !important;
}











/* ==========================================
   BLOCK TIME DETAILS POPUP
========================================== */

.blocked-time-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 36, 53, 0.68);
    backdrop-filter: blur(5px);
}

.blocked-time-modal-overlay.is-open {
    display: flex;
}

.blocked-time-modal {
    position: relative;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: auto;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(0, 25, 45, 0.25);
}

/* Left branding panel */
.blocked-time-modal-sidebar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 570px;
    padding: 35px 22px;
    overflow: hidden;
    background: linear-gradient(160deg, #103b59 0%, #075b68 55%, #079b91 100%);
    color: #fff;
    text-align: center;
}

.blocked-time-modal-sidebar::before,
.blocked-time-modal-sidebar::after {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.blocked-time-modal-sidebar::before {
    top: -130px;
    left: -110px;
}

.blocked-time-modal-sidebar::after {
    right: -160px;
    bottom: -130px;
}

.blocked-time-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.blocked-time-modal-close:hover {
    background: #fff;
    color: #103b59;
}

.blocked-time-modal-brand-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.blocked-time-modal-main-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 29px;
}

.blocked-time-modal-brand-content h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 23px;
    font-weight: 750;
}

.blocked-time-modal-brand-content p {
    margin: 0 0 24px;
    color: #d5eeee;
    font-size: 12px;
}

.blocked-time-modal-doctor-icon {
    width: 104px;
    height: 104px;
    margin: 30px auto 18px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.blocked-time-modal-doctor-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blocked-time-modal-brand-content h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

/* Right details panel */
.blocked-time-modal-content {
    min-width: 0;
    padding: 30px;
    background: #fff;
}

.blocked-time-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e5edf3;
}

.blocked-time-modal-heading h2 {
    margin: 0 0 8px;
    color: #103b59;
    font-size: 23px;
    font-weight: 750;
}

.blocked-time-modal-heading p {
    margin: 0;
    color: #788b9a;
    font-size: 13px;
}

#blockedTimeRecordBadge {
    flex-shrink: 0;
    padding: 10px 13px;
    border: 1px solid #c6eeea;
    border-radius: 9px;
    background: #eafaf8;
    color: #078d84;
    font-size: 12px;
    font-weight: 700;
}

/* Record ID and date */
.blocked-time-modal-record-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
    padding: 17px;
    border: 1px solid #d7efed;
    border-radius: 14px;
    background: linear-gradient(110deg, #f1fbfa, #f5faff);
}

.blocked-time-modal-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.blocked-time-modal-info-item + .blocked-time-modal-info-item {
    padding-left: 15px;
    border-left: 1px solid #d7e5ed;
}

.blocked-time-modal-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #d5f5f2;
    color: #079b91;
    font-size: 20px;
}

.blocked-time-modal-info-item small,
.blocked-time-modal-detail-card small {
    display: block;
    margin-bottom: 7px;
    color: #75899b;
    font-size: 11px;
}

.blocked-time-modal-info-item strong,
.blocked-time-modal-detail-card strong {
    display: block;
    overflow-wrap: anywhere;
    color: #103b59;
    font-size: 14px;
    font-weight: 750;
}

/* Schedule detail cards */
.blocked-time-modal-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #103b59;
    font-size: 15px;
    font-weight: 750;
}

.blocked-time-modal-section-title i {
    color: #079b91;
    font-size: 19px;
}

.blocked-time-modal-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.blocked-time-modal-detail-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 76px;
    padding: 14px;
    border: 1px solid #dce8f1;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(16, 59, 89, 0.025);
}

.blocked-time-modal-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e4f6f5;
    color: #087f91;
    font-size: 19px;
}

.blocked-time-modal-detail-card:nth-child(2) .blocked-time-modal-detail-icon {
    background: #e8edff;
    color: #586ed7;
}

.blocked-time-modal-reason-card {
    grid-column: 1 / -1;
}

.blocked-time-modal-reason-card .blocked-time-modal-detail-icon {
    background: #fff1df;
    color: #c78325;
}

.blocked-time-modal-error {
    margin-top: 15px;
    padding: 12px;
    border: 1px solid #f3c5c5;
    border-radius: 10px;
    background: #fff1f1;
    color: #b42332;
    font-size: 13px;
}







/* =========================================
   EDIT BLOCK TIME PAGE
========================================= */

.block-time-edit-page {
    min-height: 100vh;
    background: #f2f7fb;
    color: #103b59;
}

.block-time-edit-page .availability-main {
    min-width: 0;
}

.block-time-edit-content {
    padding: 22px 20px 30px;
}

.block-time-edit-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 24px;
    margin-bottom: 20px;
    border: 1px solid #d8efed;
    border-radius: 14px;
    background: linear-gradient(115deg, #ffffff, #e9f9f7);
}

.block-time-edit-banner-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: #d9f5f1;
    color: #079b91;
    font-size: 23px;
}

.block-time-edit-banner h1 {
    margin: 0 0 5px;
    color: #103b59;
    font-size: 21px;
    font-weight: 750;
}

.block-time-edit-banner p {
    margin: 0;
    color: #71869a;
    font-size: 12px;
}

.block-time-record-badge {
    margin-left: auto;
    padding: 9px 13px;
    border-radius: 9px;
    background: #e2f7f3;
    color: #078b82;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.block-time-edit-layout {
    display: grid;
    grid-template-columns: minmax(250px, 315px) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.block-time-record-panel,
.block-time-fields-panel {
    min-width: 0;
    border: 1px solid #dfebf2;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.block-time-record-panel {
    padding: 18px 16px;
}

.block-time-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.block-time-section-heading h2 {
    margin: 0 0 4px;
    color: #103b59;
    font-size: 14px;
    font-weight: 750;
}

.block-time-section-heading p {
    margin: 0;
    color: #8294a5;
    font-size: 10px;
}

.block-time-section-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #e0f7f3;
    color: #079b91;
    font-size: 15px;
}

.block-time-record-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 12px;
    margin-bottom: 20px;
    border: 1px solid #d5eeeb;
    border-radius: 9px;
    background: #f3fbfa;
}

.block-time-record-number span {
    color: #688397;
    font-size: 9px;
    font-weight: 700;
}

.block-time-record-number strong {
    color: #079b91;
    font-size: 17px;
}

.block-time-field-label {
    display: block;
    margin-bottom: 8px;
    color: #244760;
    font-size: 11px;
    font-weight: 700;
}

.block-time-field-label span {
    color: #e34b59;
}

.block-time-input-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 43px;
    border: 1px solid #d5e3ed;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.block-time-input-wrap > i {
    width: 38px;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #eaf9f7;
    color: #079b91;
    font-size: 14px;
}

.block-time-input-wrap input {
    width: 100%;
    min-width: 0;
    min-height: 41px;
    padding: 8px 11px;
    border: 0;
    outline: none;
    background: transparent;
    color: #103b59;
    font-size: 12px;
}

.block-time-input-wrap:focus-within {
    border-color: #079b91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.09);
}

.block-time-record-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    margin-top: 18px;
    border-radius: 9px;
    background: #eff7fc;
    color: #718ba0;
    font-size: 10px;
    line-height: 1.6;
}

.block-time-record-note i {
    margin-top: 1px;
    color: #4387b3;
}

.block-time-doctor-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #edf1f5;
}

.block-time-doctor-brand img {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border: 2px solid #d7efec;
    border-radius: 50%;
    object-fit: cover;
}

.block-time-doctor-brand strong,
.block-time-doctor-brand small {
    display: block;
}

.block-time-doctor-brand strong {
    color: #103b59;
    font-size: 11px;
}

.block-time-doctor-brand small {
    margin-top: 4px;
    color: #8395a5;
    font-size: 9px;
}

.block-time-field-section {
    padding: 19px 17px;
}

.block-time-field-section + .block-time-field-section {
    border-top: 1px solid #edf1f5;
}

.block-time-field-section.time-section {
    background: linear-gradient(110deg, #fff, #f3fbfa);
}

.block-time-field-section.reason-section {
    background: linear-gradient(110deg, #fff, #faf7ff);
}

.block-time-step-number {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #079b91;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    box-shadow: 0 3px 8px rgba(7, 155, 145, 0.2);
}

.reason-section .block-time-step-number {
    background: #8963ef;
    box-shadow: 0 3px 8px rgba(137, 99, 239, 0.2);
}

.block-time-heading-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 10px;
    background: #e0f7f3;
    color: #079b91;
    font-size: 16px;
}

.reason-section .block-time-heading-icon {
    background: #f0e8ff;
    color: #8963ef;
}

.block-time-field-section textarea {
    display: block;
    width: 100%;
    min-height: 105px;
    padding: 12px;
    border: 1px solid #d5e3ed;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #103b59;
    font-family: inherit;
    font-size: 12px;
    resize: vertical;
}

.block-time-field-section textarea:focus {
    border-color: #8963ef;
    box-shadow: 0 0 0 3px rgba(137, 99, 239, 0.08);
}

.block-time-edit-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 9px;
    padding: 15px 17px;
    border-top: 1px solid #e8eef3;
    background: #fff;
}

.block-time-cancel-btn,
.block-time-update-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.block-time-cancel-btn {
    border: 1px solid #bdcedd;
    background: #fff;
    color: #47647b;
}

.block-time-cancel-btn:hover {
    background: #f0f5f8;
    color: #103b59;
}

.block-time-update-btn {
    border: 1px solid #079b91;
    background: #079b91;
    color: #fff;
    box-shadow: 0 4px 10px rgba(7, 155, 145, 0.16);
}

.block-time-update-btn:hover {
    border-color: #067f78;
    background: #067f78;
    color: #fff;
}

















/* FIX: Selected date highlight in Edit Block Time calendar */

.block-time-edit-page .edit-calendar-day.is-selected {
    background: #079b91 !important;
    color: #ffffff !important;
    border-color: #079b91 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(7, 155, 145, 0.20);
}

.block-time-edit-page .edit-calendar-day.is-selected:hover {
    background: #078b82 !important;
    color: #ffffff !important;
}

/*.block-time-edit-page .edit-calendar-day.is-today:not(.is-selected) {*/
/*    border: 1px solid #079b91;*/
/*    border-radius: 8px;*/
/*    color: #079b91;*/
/*}*/








.block-time-edit-page .edit-calendar-day.is-today:not(.is-selected) {
    border: none !important;
    border-radius: 0;
    color: inherit;
}
.block-time-edit-page .edit-calendar-day {
    cursor: pointer;
}




















/* Balanced height for Edit Block Time panels */
.block-time-edit-page .edit-availability-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
}

.block-time-edit-page .edit-date-panel,
.block-time-edit-page .edit-settings-panel {
    height: 100%;
    min-height: 0;
    align-self: stretch;
    box-sizing: border-box;
}

/* Keep the buttons at the bottom of the right panel */
.block-time-edit-page .edit-settings-panel {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.block-time-edit-page .edit-form-footer {
    margin-top: auto;
    padding: 18px 24px;
}









/* Remove excess decoration below the calendar */
.block-time-edit-page .edit-date-decoration {
    display: none !important;
}

/* Reduce unnecessary space below the calendar note */
.block-time-edit-page .edit-date-panel {
    padding-bottom: 20px;
}










/* Delete Block Time confirmation modal */
.delete-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 30, 42, 0.55);
    backdrop-filter: blur(2px);
}

.delete-confirm-modal {
    width: 100%;
    max-width: 500px;
    padding: 24px 32px 28px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    text-align: center;
    animation: deleteModalIn 0.2s ease-out;
}

.delete-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdebec;
    color: #e62932;
    font-size: 28px;
}

.delete-confirm-modal h2 {
    margin: 0 0 8px;
    color: #103b59;
    font-size: 21px;
    font-weight: 700;
}

.delete-confirm-modal p {
    margin: 0 auto 24px;
    max-width: 400px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.7;
}

.delete-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.delete-confirm-actions button {
    min-width: 115px;
    padding: 11px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

#cancelDeleteBlockTime {
    border: 1px solid #d7dee5;
    background: #f8fafc;
    color: #111827;
}

#cancelDeleteBlockTime:hover {
    background: #edf2f7;
}

#confirmDeleteBlockTime {
    border: 1px solid #e62932;
    background: #e62932;
    color: #ffffff;
}

#confirmDeleteBlockTime:hover {
    background: #c91f28;
}

@keyframes deleteModalIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
















/* Doctor Leave - View Records Button */
.doctor-leave-view-records-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    background: #079b91;
    color: #ffffff;
    border: 1px solid #079b91;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(7, 155, 145, 0.15);
}

.doctor-leave-view-records-btn i {
    font-size: 16px;
}

.doctor-leave-view-records-btn:hover {
    background: #067f77;
    border-color: #067f77;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(7, 155, 145, 0.22);
}

/* Align button with the Doctor Leave heading */
.doctor-leave-heading-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.doctor-leave-heading-row .availability-section-heading-text {
    flex: 1;
    min-width: 0;
}







/* =========================================
   DOCTOR LEAVE - VIEW RECORDS PAGE
========================================= */

.doctor-leave-record-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 22px 24px;
}

.doctor-leave-record-row {
    display: grid;
    grid-template-columns: 58px minmax(170px, 0.8fr) minmax(220px, 1.5fr) 125px;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: linear-gradient(110deg, #f1fbfd, #f5f9ff);
    border: 1px solid #dcecf7;
    border-radius: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.doctor-leave-record-row:hover {
    border-color: #b9e2e9;
    box-shadow: 0 5px 16px rgba(16, 59, 89, 0.06);
}

.doctor-leave-record-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #d5f5f1;
    color: #079b91;
    font-size: 25px;
    font-weight: 700;
}

.doctor-leave-record-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.doctor-leave-record-field > span,
.doctor-leave-record-actions > span {
    color: #55728c;
    font-size: 13px;
    font-weight: 400;
}

.doctor-leave-record-field > span i {
    margin-right: 5px;
    color: #47738f;
}

.doctor-leave-record-field > strong {
    color: #103b59;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.doctor-leave-reason {
    padding-left: 18px;
    border-left: 1px solid #d9eaf4;
}

.doctor-leave-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

.doctor-leave-status.status-cancelled {
    background: #fff0f0;
    color: #c53d4b;
}

.doctor-leave-status.status-reopened {
    background: #e1f8ef;
    color: #16835d;
}

.doctor-leave-record-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding-left: 14px;
    border-left: 1px solid #d9eaf4;
}

.doctor-leave-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.doctor-leave-action-buttons .availability-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.doctor-leave-action-buttons .availability-action-btn:hover {
    transform: translateY(-2px);
    filter: brightness(0.96);
}

.doctor-leave-action-buttons .availability-view-action {
    background: #dcefff;
    color: #0784c7;
}

.doctor-leave-action-buttons .availability-edit-action {
    background: #d8f6ef;
    color: #079b91;
}

.doctor-leave-action-buttons .availability-delete-action {
    background: #ffe4e8;
    color: #d93650;
}

.doctor-leave-empty {
    padding: 55px 20px;
    text-align: center;
    color: #668096;
}

.doctor-leave-empty > i {
    color: #079b91;
    font-size: 42px;
}

.doctor-leave-empty h3 {
    margin-top: 14px;
    color: #103b59;
    font-size: 21px;
}

.doctor-leave-empty p {
    margin-bottom: 0;
    font-size: 14px;
}












/* =========================================
   DOCTOR LEAVE - MATCH BLOCK TIME DESIGN
========================================= */

.blocked-times-banner {
    background: linear-gradient(110deg, #cef4f0 0%, #e0f7f7 100%);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 18px;
}

.blocked-times-banner-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #079b91;
    border-radius: 22px;
    font-size: 30px;
}

.blocked-times-banner h1 {
    margin: 0 0 5px;
    color: #103b59;
    font-size: 30px;
    font-weight: 700;
}

.blocked-times-banner p {
    margin: 0;
    color: #52728b;
    font-size: 14px;
}

.blocked-times-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 18px 18px;
    box-shadow: 0 5px 20px rgba(16, 59, 89, 0.04);
}

.blocked-times-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px 24px;
}

.blocked-times-total {
    display: flex;
    align-items: center;
    gap: 14px;
}

.blocked-times-total-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d5f5f1;
    color: #079b91;
    border-radius: 16px;
    font-size: 23px;
}

.blocked-times-total span {
    display: block;
    color: #103b59;
    font-size: 13px;
}

.blocked-times-total strong {
    display: block;
    color: #079b91;
    font-size: 27px;
    line-height: 1.2;
}

.blocked-times-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    border: 1px solid #079b91;
    border-radius: 13px;
    background: #ffffff;
    color: #079b91;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: 0.2s ease;
}

.blocked-times-back-btn:hover {
    background: #079b91;
    color: #ffffff;
}






/* Fix vertical alignment in Doctor Leave records */

.doctor-leave-record-row {
    align-items: center;
}

.doctor-leave-record-row > .doctor-leave-record-field {
    align-self: center;
    justify-content: center;
    min-height: 72px;
}

.doctor-leave-record-row > .doctor-leave-record-actions {
    align-self: center;
    justify-content: center;
    min-height: 72px;
    margin-top: 0;
}

.doctor-leave-record-row .doctor-leave-reason {
    padding-top: 0;
    padding-bottom: 0;
}

.doctor-leave-record-row .doctor-leave-record-field > span,
.doctor-leave-record-row .doctor-leave-record-field > strong {
    margin-top: 0;
    margin-bottom: 0;
}

.doctor-leave-record-row .doctor-leave-record-actions > span {
    margin: 0;
}

.doctor-leave-record-row .doctor-leave-action-buttons {
    margin: 0;
}













/* =========================================
   DOCTOR LEAVE DETAILS MODAL
========================================= */

.doctor-leave-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 35, 51, 0.72);
    backdrop-filter: blur(5px);
}

.doctor-leave-details-overlay.show {
    display: flex;
}

.doctor-leave-details-modal {
    position: relative;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: auto;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}

/* Left branding panel */
.doctor-leave-details-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 570px;
    padding: 35px 22px;
    overflow: hidden;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(160deg, #103b59 0%, #075b69 55%, #079b91 100%);
}

.doctor-leave-details-brand::before,
.doctor-leave-details-brand::after {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.doctor-leave-details-brand::before {
    top: -110px;
    left: -100px;
}

.doctor-leave-details-brand::after {
    right: -130px;
    bottom: -120px;
}

.doctor-leave-details-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.doctor-leave-details-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 29px;
}

.doctor-leave-details-brand h2 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

.doctor-leave-details-brand p {
    margin: 0;
    color: #e0f7f7;
    font-size: 13px;
}

.doctor-leave-details-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 38px 0 18px;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: #ffffff;
    background: #079b91;
    font-size: 42px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.doctor-leave-details-brand h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.doctor-leave-details-brand > span {
    color: #e0f7f7;
    font-size: 12px;
}

/* Right details panel */
.doctor-leave-details-content {
    min-width: 0;
    padding: 32px 30px;
    background: #ffffff;
}

.doctor-leave-details-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e0eaf1;
}

.doctor-leave-details-heading h2 {
    margin: 0 0 7px;
    color: #103b59;
    font-size: 22px;
    font-weight: 700;
}

.doctor-leave-details-heading p {
    margin: 0;
    color: #71869a;
    font-size: 12px;
}

.doctor-leave-details-heading > span {
    flex-shrink: 0;
    padding: 11px 13px;
    border: 1px solid #bdeee8;
    border-radius: 10px;
    color: #079b91;
    background: #effcf9;
    font-size: 12px;
    font-weight: 600;
}

.doctor-leave-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.doctor-leave-detail-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 92px;
    padding: 17px;
    border: 1px solid #d7e8f3;
    border-radius: 14px;
    background: linear-gradient(120deg, #ffffff, #f7fbfd);
}

.doctor-leave-detail-item > span {
    color: #6c8399;
    font-size: 12px;
}

.doctor-leave-detail-item > span i {
    margin-right: 7px;
    color: #079b91;
    font-size: 15px;
}

.doctor-leave-detail-item > strong {
    color: #103b59;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.doctor-leave-detail-wide {
    grid-column: 1 / -1;
}












/* Doctor Leave Details - Doctor Photo */

.doctor-leave-details-avatar {
    width: 100px;
    height: 100px;
    margin: 38px 0 18px;
    border: 4px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.doctor-leave-details-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}














/* Doctor Leave edit page - guidance message */
.doctor-leave-guidance {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #edf7ff;
    color: #315d86;
    font-size: 14px;
    line-height: 1.7;
}

.doctor-leave-guidance i {
    color: #1685f8;
    font-size: 19px;
    flex-shrink: 0;
}

/* Read-only information cards */
.doctor-leave-information-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 20px 0;
}

.doctor-leave-info-card {
    padding: 22px;
    border: 1px solid #e1edf2;
    border-radius: 16px;
    background: #ffffff;
    min-width: 0;
}

.doctor-leave-current-card {
    background: linear-gradient(135deg, #f0fbf7, #ffffff);
    border-color: #d9f1e8;
}

.doctor-leave-note-card {
    background: linear-gradient(135deg, #fff9ef, #ffffff);
    border-color: #f8e8d0;
}

.doctor-leave-info-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.doctor-leave-info-heading h3 {
    margin: 0;
    color: #103b59;
    font-size: 17px;
    font-weight: 700;
}

.doctor-leave-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #d9f7eb;
    color: #079b78;
    font-size: 19px;
}

.doctor-leave-note-card .doctor-leave-info-icon {
    background: #fff0d9;
    color: #e98416;
}

.doctor-leave-info-row {
    display: grid;
    grid-template-columns: 20px minmax(80px, 1fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 10px;
    padding: 13px 10px;
    border-bottom: 1px solid #e6f0ed;
    font-size: 13px;
}

.doctor-leave-info-row:last-child {
    border-bottom: 0;
}

.doctor-leave-info-row > i {
    color: #315d86;
    font-size: 16px;
}

.doctor-leave-info-row span {
    color: #315d86;
}

.doctor-leave-info-row strong {
    color: #183b55;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.doctor-leave-note-list {
    margin: 0;
    padding-left: 22px;
    color: #53677a;
    font-size: 13px;
    line-height: 1.9;
}

.doctor-leave-note-list li {
    padding-left: 3px;
    margin-bottom: 5px;
}







/* Doctor Leave - Fix Important Note card spacing */
.doctor-leave-information-grid {
    padding: 0 8px;
    box-sizing: border-box;
    gap: 20px;
}

.doctor-leave-info-card {
    min-width: 0;
    box-sizing: border-box;
}

.doctor-leave-note-card {
    margin-right: 4px;
}





















/* Doctor Leave edit page - compact information layout */
.doctor-leave-information-grid {
    gap: 16px;
    margin: 14px 0;
    padding: 0 6px;
    align-items: stretch;
}

.doctor-leave-info-card {
    padding: 16px 18px;
    border-radius: 14px;
}

.doctor-leave-info-heading {
    gap: 10px;
    margin-bottom: 12px;
}

.doctor-leave-info-icon {
    width: 36px;
    height: 36px;
    font-size: 17px;
}

.doctor-leave-info-heading h3 {
    font-size: 15px;
}

.doctor-leave-info-row {
    padding: 10px 8px;
    font-size: 12px;
    gap: 8px;
}

.doctor-leave-note-list {
    font-size: 12px;
    line-height: 1.7;
}

.doctor-leave-note-list li {
    margin-bottom: 3px;
}

.doctor-leave-guidance {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 13px;
}











/* Doctor Leave delete confirmation popup */
.doctor-leave-delete-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 39, 53, 0.58);
    backdrop-filter: blur(5px);
}

.doctor-leave-delete-overlay.show {
    display: flex;
}

.doctor-leave-delete-modal {
    width: 100%;
    max-width: 500px;
    padding: 26px 32px 28px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
    text-align: center;
    animation: doctorLeaveDeleteEnter 0.2s ease-out;
}

.doctor-leave-delete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #ffeaec;
    color: #ed2939;
    font-size: 28px;
}

.doctor-leave-delete-modal h2 {
    margin: 0 0 10px;
    color: #103b59;
    font-size: 22px;
    font-weight: 700;
}

.doctor-leave-delete-message {
    margin: 0 auto 20px;
    max-width: 390px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.7;
}

.doctor-leave-delete-record {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
    padding: 14px;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    background: #f8fafc;
}

.doctor-leave-delete-record div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.doctor-leave-delete-record span {
    color: #7b8794;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doctor-leave-delete-record strong {
    color: #103b59;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.doctor-leave-delete-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.doctor-leave-delete-actions button {
    min-width: 115px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

#cancelDoctorLeaveDelete {
    border: 1px solid #d5dee8;
    background: #f8fafc;
    color: #243447;
}

#cancelDoctorLeaveDelete:hover {
    background: #edf2f7;
}

#confirmDoctorLeaveDelete {
    border: 1px solid #ed2939;
    background: #ed2939;
    color: #ffffff;
}

#confirmDoctorLeaveDelete:hover {
    background: #cf1728;
}

@keyframes doctorLeaveDeleteEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}










/* Announcements heading with View button */
.announcements-heading-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.announcements-heading-row .availability-section-heading-text {
    flex: 1;
    min-width: 180px;
}

.announcements-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    background: #103b59;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.announcements-view-btn:hover {
    background: #079b91;
    color: #ffffff;
}














/* =====================================
   ANNOUNCEMENT RECORDS PAGE
===================================== */

.block-time-records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.block-time-total {
    display: flex;
    align-items: center;
    gap: 12px;
}

.block-time-total-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #d5f6f1;
    color: #079b91;
    font-size: 22px;
}

.block-time-total span {
    display: block;
    color: #526c80;
    font-size: 12px;
}

.block-time-total strong {
    display: block;
    color: #079b91;
    font-size: 27px;
    line-height: 1.2;
}

.block-time-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #079b91;
    border-radius: 10px;
    color: #079b91;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.block-time-back-btn:hover {
    background: #079b91;
    color: #ffffff;
}

.announcement-record-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.announcement-record-row {
    display: grid;
    grid-template-columns: 48px minmax(150px, 1.1fr)
        minmax(125px, 0.85fr) minmax(180px, 1.5fr) 112px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #d7e8f7;
    border-radius: 14px;
    background: linear-gradient(110deg, #f4fbfe, #f9fbff);
}

.announcement-record-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #d5f6f1;
    color: #079b91;
    font-size: 17px;
    font-weight: 700;
}

.announcement-record-field {
    min-width: 0;
    overflow-wrap: anywhere;
}

.announcement-record-field span {
    display: block;
    margin-bottom: 7px;
    color: #153b56;
    font-size: 12px;
}

.announcement-record-field span i {
    margin-right: 5px;
    color: #079b91;
}

.announcement-record-field strong {
    display: block;
    color: #103b59;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.announcement-record-actions {
    padding-left: 12px;
    border-left: 1px solid #d7e8f7;
    text-align: center;
}

.announcement-record-actions > span {
    display: block;
    margin-bottom: 8px;
    color: #153b56;
    font-size: 12px;
}

.announcement-record-actions > div {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.announcement-record-actions .availability-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.announcement-view-action {
    background: #dceeff;
    color: #1685d1;
}

.announcement-edit-action {
    background: #d9f7f0;
    color: #079b91;
}

.announcement-delete-action {
    background: #ffe2e7;
    color: #e34d59;
}

.announcement-record-actions button:hover {
    filter: brightness(0.95);
}















/* Vertical separators in Announcement records */
.announcement-record-date,
.announcement-record-message,
.announcement-record-actions {
    border-left: 1px solid #d7e8f7;
    padding-left: 14px;
}

/* Keep separators aligned inside each row */
.announcement-record-row {
    column-gap: 0;
}

.announcement-record-date,
.announcement-record-message {
    padding-right: 12px;
}














/* =====================================
   ANNOUNCEMENT DETAILS POPUP
===================================== */

.announcement-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(9, 31, 46, 0.65);
    backdrop-filter: blur(5px);
}

.announcement-details-overlay.show {
    display: flex;
}

.announcement-details-modal {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: auto;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
    animation: announcementDetailsEnter 0.22s ease-out;
}

.announcement-details-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 55px 22px;
    background: linear-gradient(160deg, #103b59, #087d83 75%, #079b91);
    color: #ffffff;
    text-align: center;
}

.announcement-details-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.announcement-details-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 18px;
    background: rgba(255,255,255,.13);
    font-size: 29px;
}

.announcement-details-brand h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 750;
}

.announcement-details-brand p {
    margin: 0;
    font-size: 12px;
    opacity: .9;
}

.announcement-details-avatar {
    width: 100px;
    height: 100px;
    margin: 30px 0 16px;
    overflow: hidden;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
}

.announcement-details-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.announcement-details-brand h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.announcement-details-brand > span {
    font-size: 12px;
}

.announcement-details-content {
    min-width: 0;
    padding: 30px;
    background: #ffffff;
}

.announcement-details-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e1eaf0;
}

.announcement-details-heading h2 {
    margin: 0 0 7px;
    color: #103b59;
    font-size: 22px;
    font-weight: 750;
}

.announcement-details-heading p {
    margin: 0;
    color: #718096;
    font-size: 12px;
}

.announcement-details-heading > span {
    flex-shrink: 0;
    padding: 10px 12px;
    border: 1px solid #bdeee7;
    border-radius: 10px;
    background: #effcf9;
    color: #079b91;
    font-size: 11px;
    font-weight: 700;
}

.announcement-details-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid #d4eeeb;
    border-radius: 14px;
    background: linear-gradient(100deg, #f0fbfa, #f6fbff);
}

.announcement-details-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #d7f6f1;
    color: #079b91;
    font-size: 20px;
}

.announcement-details-summary span,
.announcement-details-item span {
    display: block;
    margin-bottom: 5px;
    color: #73869a;
    font-size: 11px;
}

.announcement-details-summary strong,
.announcement-details-item strong {
    display: block;
    color: #103b59;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.announcement-details-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #d7e8f7;
    border-radius: 14px;
    background: #ffffff;
}

.announcement-details-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 19px;
}

.announcement-details-item > div:last-child {
    min-width: 0;
    flex: 1;
}

.announcement-details-item .title-icon {
    background: #e2f6f3;
    color: #079b91;
}

.announcement-details-item .date-icon {
    background: #e8ecff;
    color: #6978ec;
}

.announcement-details-item .message-icon {
    background: #fff0dc;
    color: #e98a24;
}

.announcement-details-message {
    min-height: 100px;
}

@keyframes announcementDetailsEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}









/* =========================================
   EDIT ANNOUNCEMENT PAGE
========================================= */

.edit-announcement-page {
    padding: 20px;
    min-height: calc(100vh - 70px);
    background: #f1f8fb;
    color: #103b59;
}

.ea-hero {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px 25px;
    margin-bottom: 20px;
    border: 1px solid #d4eeee;
    border-radius: 16px;
    background: linear-gradient(110deg, #fff, #e0f7f4);
}

.ea-hero-icon {
    width: 59px;
    height: 59px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #d9f7f2;
    color: #079b91;
    font-size: 27px;
}

.ea-hero h1 {
    margin: 0 0 5px;
    color: #103b59;
    font-size: 25px;
    font-weight: 800;
}

.ea-hero h1 span {
    color: #079b91;
}

.ea-hero p {
    margin: 0;
    color: #658096;
    font-size: 12px;
}

.ea-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 15px;
    align-items: stretch;
}

.ea-record-card,
.ea-form-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dcebf2;
    border-radius: 14px;
    background: #fff;
}

.ea-record-card {
    padding: 18px 16px;
}

.ea-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.ea-small-icon,
.ea-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: #dcf7f3;
    color: #079b91;
}

.ea-small-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
}

.ea-card-heading h2 {
    margin: 0;
    color: #103b59;
    font-size: 14px;
    font-weight: 800;
}

.ea-card-heading p {
    margin: 4px 0 0;
    color: #8499a9;
    font-size: 10px;
}

.ea-record-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 12px;
    margin-bottom: 20px;
    border: 1px solid #d2eeea;
    border-radius: 10px;
    background: #f1fbfa;
}

.ea-record-id span {
    color: #6e8999;
    font-size: 10px;
    font-weight: 700;
}

.ea-record-id strong {
    color: #079b91;
    font-size: 19px;
}

.ea-calendar-label,
.ea-label {
    display: block;
    margin-bottom: 8px;
    color: #103b59;
    font-size: 11px;
    font-weight: 800;
}

.ea-calendar-label span,
.ea-label span {
    color: #ef5350;
}

.ea-calendar {
    padding: 10px;
    border: 1px solid #d8eaf2;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(16, 59, 89, 0.04);
}

.ea-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 12px;
}

.ea-calendar-header strong {
    color: #103b59;
    font-size: 12px;
    font-weight: 800;
}

.ea-cal-nav {
    width: 29px;
    height: 29px;
    border: 0;
    border-radius: 8px;
    background: #e1f7f4;
    color: #079b91;
    cursor: pointer;
}

.ea-cal-nav:hover {
    background: #079b91;
    color: #fff;
}

.ea-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    text-align: center;
}

.ea-weekday {
    padding: 4px 0;
    color: #758da0;
    font-size: 9px;
    font-weight: 800;
}

.ea-day {
    width: 100%;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #31566e;
    font-size: 10px;
    cursor: pointer;
}

.ea-day:hover {
    background: #e1f7f4;
    color: #07877f;
}

.ea-day.selected {
    background: #079b91;
    color: #fff;
    font-weight: 800;
}

.ea-day.today:not(.selected) {
    border: 1px solid #079b91;
}

.ea-day.empty {
    pointer-events: none;
}

.ea-selected-date {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 9px;
    margin-top: 12px;
    border: 1px solid #c9eee8;
    border-radius: 9px;
    background: #effbf9;
}

.ea-selected-date > i {
    color: #079b91;
    font-size: 17px;
}

.ea-selected-date span {
    display: block;
    margin-bottom: 3px;
    color: #8096a5;
    font-size: 9px;
}

.ea-selected-date strong {
    display: block;
    color: #103b59;
    font-size: 10px;
}

.ea-note {
    padding: 12px 10px;
    margin-top: 15px;
    border-radius: 9px;
    background: #f0f7fc;
    color: #69879c;
    font-size: 10px;
    line-height: 1.7;
}

.ea-note i {
    margin-right: 5px;
    color: #079b91;
}

.ea-form-card {
    display: flex;
    flex-direction: column;
}

.ea-section {
    padding: 20px;
    border-bottom: 1px solid #e5edf3;
}

.ea-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
}

.ea-section-title-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ea-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #079b91;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 3px 7px #079b9140;
}

.ea-section-title h3 {
    margin: 0;
    color: #103b59;
    font-size: 14px;
    font-weight: 800;
}

.ea-section-title p {
    margin: 4px 0 0;
    color: #8197a8;
    font-size: 10px;
}

.ea-section-icon {
    width: 37px;
    height: 37px;
    font-size: 18px;
}

.ea-fields {
    padding: 17px;
    border: 1px solid #d1eeea;
    border-radius: 10px;
    background: #f3fbfa;
}

.ea-control {
    display: block;
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #d4e4ed;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #103b59;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.ea-control:focus {
    border-color: #079b91;
    box-shadow: 0 0 0 3px #079b911a;
}

textarea.ea-control {
    min-height: 145px;
    resize: vertical;
}

.ea-message-section {
    background: #fdfcff;
    border-bottom: 0;
}

.ea-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 20px;
    margin-top: auto;
    border-top: 1px solid #e5edf3;
    background: #fff;
}

.ea-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 17px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.ea-btn-cancel {
    border: 1px solid #bfd3e3;
    background: #fff;
    color: #45657b;
}

.ea-btn-cancel:hover {
    border-color: #9fb9cc;
    background: #f1f7fa;
    color: #103b59;
}

.ea-btn-update {
    border: 1px solid #079b91;
    background: #079b91;
    color: #fff;
    box-shadow: 0 4px 10px #079b9126;
}

.ea-btn-update:hover {
    border-color: #087f79;
    background: #087f79;
    color: #fff;
}








/* =========================================
   ANNOUNCEMENT DELETE CONFIRMATION POPUP
========================================= */

#announcementDeleteOverlay.doctor-leave-delete-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(9, 31, 48, 0.65);
    backdrop-filter: blur(4px);
}

#announcementDeleteOverlay.doctor-leave-delete-overlay.show {
    display: flex;
}

#announcementDeleteOverlay .doctor-leave-delete-modal {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 32px 28px 26px;
    border: 1px solid #e3eaf0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 22px 65px rgba(5, 30, 48, 0.24);
    text-align: center;
    animation: announcementDeleteAppear 0.22s ease-out;
}

#announcementDeleteOverlay .doctor-leave-delete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff0f0;
    color: #e34c54;
    font-size: 27px;
}

#announcementDeleteOverlay .doctor-leave-delete-modal h3 {
    margin: 0 0 10px;
    color: #103b59;
    font-size: 21px;
    font-weight: 800;
}

#announcementDeleteOverlay .doctor-leave-delete-modal p {
    margin: 0 auto 25px;
    max-width: 330px;
    color: #718698;
    font-size: 13px;
    line-height: 1.7;
}

#announcementDeleteOverlay .doctor-leave-delete-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

#announcementDeleteOverlay .doctor-leave-delete-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 19px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

#announcementDeleteOverlay .doctor-leave-delete-cancel {
    border: 1px solid #cfdae4;
    background: #ffffff;
    color: #456176;
}

#announcementDeleteOverlay .doctor-leave-delete-cancel:hover {
    background: #f0f6fa;
}

#announcementDeleteOverlay .doctor-leave-delete-confirm {
    border: 1px solid #df414b;
    background: #df414b;
    color: #ffffff;
}

#announcementDeleteOverlay .doctor-leave-delete-confirm:hover {
    border-color: #bd3039;
    background: #bd3039;
}

@keyframes announcementDeleteAppear {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}















/* =====================================
   DOCTOR VIDEOS - VIEW BUTTON
===================================== */

#viewDoctorVideosBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    background: #103B59;
    color: #ffffff;
    border: 1px solid #103B59;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.25s ease;
}

#viewDoctorVideosBtn:hover {
    background: #079B91;
    border-color: #079B91;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(7, 155, 145, 0.20);
}

#viewDoctorVideosBtn i {
    font-size: 15px;
}
















/* =====================================
   VIEW DOCTOR VIDEOS
===================================== */

.doctor-videos-list-card {
    margin-top: 25px;
    border-radius: 16px;
    overflow: hidden;
}

.doctor-videos-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.doctor-videos-list-heading .availability-section-title {
    color: #103B59;
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 7px;
}

.doctor-videos-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #e8f7f5;
    color: #103B59;
    font-size: 13px;
}

.doctor-videos-count strong {
    color: #079B91;
}

.doctor-videos-table-wrap {
    border: 1px solid #e3eaf0;
    border-radius: 10px;
}

.doctor-videos-table {
    margin-bottom: 0;
    min-width: 750px;
}

.doctor-videos-table thead th {
    padding: 16px 18px;
    background: #103B59;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: none;
}

.doctor-videos-table tbody td {
    padding: 15px 18px;
    color: #334155;
    font-size: 13px;
    border-color: #edf1f5;
}

.doctor-videos-table tbody tr:hover td {
    background: #f5fbfb;
}

.doctor-video-title-cell {
    min-width: 230px;
    font-weight: 600;
    color: #103B59 !important;
}

.doctor-video-title-cell > i {
    margin-right: 8px;
    color: #079B91;
}

.doctor-video-url-cell {
    min-width: 250px;
    max-width: 450px;
    overflow-wrap: anywhere;
}

.doctor-video-url-cell a {
    color: #087e91;
    text-decoration: none;
}

.doctor-video-url-cell a:hover {
    color: #103B59;
    text-decoration: underline;
}

.doctor-videos-action-heading {
    text-align: center;
}

.doctor-video-actions {
    min-width: 140px;
    text-align: center;
    white-space: nowrap;
}

.doctor-video-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 3px;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

/*.video-view-action {*/
/*    color: #087e91;*/
/*    background: #e8f7f5;*/
/*    border-color: #c8eeea;*/
/*}*/

.video-view-action {
    color: #1685d1;
    background: #dceeff;
    border-color: transparent;
}

/*.video-view-action:hover {*/
/*    color: #ffffff;*/
/*    background: #079B91;*/
/*}*/

.video-view-action:hover {
    color: #1685d1;
    background: #dceeff;
    filter: brightness(0.95);
}

/*.video-edit-action {*/
/*    color: #b7791f;*/
/*    background: #fff6e5;*/
/*    border-color: #f8e5b8;*/
/*}*/

.video-edit-action {
    color: #079b91;
    background: #d9f7f0;
    border-color: transparent;
}

/*.video-edit-action:hover {*/
/*    color: #ffffff;*/
/*    background: #b7791f;*/
/*}*/

.video-edit-action:hover {
    color: #079b91;
    background: #d9f7f0;
    filter: brightness(0.95);
}

.video-delete-action {
    color: #dc3545;
    background: #fff0f1;
    border-color: #f8d0d4;
}

.video-delete-action:hover {
    color: #ffffff;
    background: #dc3545;
}

.doctor-videos-empty {
    padding: 45px 20px !important;
    text-align: center;
    color: #64748b !important;
}

.doctor-videos-empty i {
    display: block;
    margin-bottom: 10px;
    color: #079B91;
    font-size: 32px;
}

.doctor-videos-empty p {
    margin: 0;
}





















/* =====================================
   DOCTOR VIDEO DETAILS POPUP
===================================== */

.doctor-video-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 35, 51, 0.64);
    backdrop-filter: blur(7px);
}

.doctor-video-details-overlay.show {
    display: flex;
}

.doctor-video-details-modal {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: 100%;
    max-width: 1000px;
    max-height: 88vh;
    overflow: auto;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

.doctor-video-details-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 550px;
    padding: 40px 22px;
    overflow: hidden;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(155deg, #103B59, #087b7c, #079B91);
}

.doctor-video-details-brand::before,
.doctor-video-details-brand::after {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.doctor-video-details-brand::before {
    top: -120px;
    left: -100px;
}

.doctor-video-details-brand::after {
    right: -120px;
    bottom: -120px;
}

.doctor-video-details-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9px;
    cursor: pointer;
}

.doctor-video-details-brand-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    font-size: 30px;
}

.doctor-video-details-brand h2 {
    font-size: 23px;
    font-weight: 750;
}

.doctor-video-details-brand > p {
    margin-bottom: 30px;
    font-size: 12px;
}

.doctor-video-details-brand-circle {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin-bottom: 22px;
    color: #ffffff;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 39px;
}

.doctor-video-details-brand h3 {
    font-size: 17px;
    font-weight: 700;
}

.doctor-video-details-brand > span {
    font-size: 12px;
}

.doctor-video-details-content {
    min-width: 0;
    padding: 32px 30px;
}

.doctor-video-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e4edf3;
}

.doctor-video-details-header h2 {
    margin-bottom: 8px;
    color: #103B59;
    font-size: 22px;
    font-weight: 750;
}

.doctor-video-details-header p {
    margin: 0;
    color: #718096;
    font-size: 12px;
}

.doctor-video-record-badge {
    flex-shrink: 0;
    padding: 10px 13px;
    color: #078e85;
    background: #e9f9f7;
    border: 1px solid #c9f0eb;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.doctor-video-details-information {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px minmax(0, 1.5fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
    background: linear-gradient(100deg, #f0fbfa, #f7fbff);
    border: 1px solid #d6efed;
    border-radius: 15px;
}

.doctor-video-information-icon,
.doctor-video-details-small-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #079B91;
    background: #d9f5f1;
    border-radius: 12px;
    font-size: 20px;
}

.doctor-video-information-icon.title-icon {
    color: #526ce5;
    background: #e9edff;
}

.doctor-video-details-information small,
.doctor-video-details-url-content small {
    display: block;
    margin-bottom: 6px;
    color: #718096;
    font-size: 11px;
}

.doctor-video-details-information strong {
    display: block;
    overflow-wrap: anywhere;
    color: #103B59;
    font-size: 13px;
}

.doctor-video-details-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 16px;
    color: #103B59;
    font-size: 15px;
    font-weight: 700;
}

.doctor-video-details-section-title i {
    color: #079B91;
    font-size: 20px;
}

.doctor-video-details-url-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border: 1px solid #dce8f2;
    border-radius: 14px;
}

.doctor-video-details-url-content {
    min-width: 0;
}

.doctor-video-details-url-content a {
    display: block;
    color: #087e91;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.doctor-video-details-url-content a:hover {
    text-decoration: underline;
}

.doctor-video-details-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    margin-top: 15px;
    padding: 20px;
    text-align: center;
    color: #64748b;
    background: #f7fafc;
    border: 1px dashed #d5e2ec;
    border-radius: 14px;
}

.doctor-video-details-preview i {
    margin-bottom: 8px;
    color: #079B91;
    font-size: 30px;
}

.doctor-video-details-preview p {
    margin: 0;
    font-size: 12px;
}

.doctor-video-details-error {
    margin-top: 15px;
    color: #dc3545;
    font-size: 13px;
}





.doctor-video-details-brand-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}










/* =========================================
   EDIT DOCTOR VIDEO PAGE
========================================= */

.doctor-video-edit-page {
    padding: 24px;
    background: linear-gradient(135deg, #f1f9ff, #f5fcfc);
    min-height: calc(100vh - 70px);
    color: #103b59;
}

.doctor-video-edit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 14px;
    flex-wrap: wrap;
}

.doctor-video-edit-breadcrumb a {
    color: #53799b;
    text-decoration: none;
}

.doctor-video-edit-breadcrumb a:hover {
    color: #079b91;
}

.doctor-video-edit-breadcrumb span {
    color: #079b91;
}

.doctor-video-edit-breadcrumb strong {
    color: #103b59;
}

.doctor-video-edit-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 30px;
    margin-bottom: 24px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(182, 241, 244, .96), rgba(234, 248, 252, .88)),
        url('../images/doctorvideobanner.png') center/cover;
    border: 1px solid rgba(7, 155, 145, .10);
}

.doctor-video-edit-banner-icon {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .9);
    border-radius: 20px;
    color: #079b91;
    font-size: 38px;
}

.doctor-video-edit-banner h1 {
    font-size: 29px;
    font-weight: 800;
    margin: 0 0 7px;
}

.doctor-video-edit-banner p {
    color: #426988;
    margin: 0;
    font-size: 15px;
}

.doctor-video-edit-grid {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.38fr);
    gap: 16px;
    align-items: stretch;
}

.doctor-video-preview-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(145deg, #082d50, #075d7e 65%, #079b91);
    box-shadow: 0 12px 35px rgba(16, 59, 89, .12);
}

.doctor-video-preview-heading,
.doctor-video-edit-form-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.doctor-video-preview-heading-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #42aaf0;
    color: #fff;
    font-size: 27px;
    flex-shrink: 0;
}

.doctor-video-preview-heading h2,
.doctor-video-edit-form-heading h2 {
    font-size: 23px;
    font-weight: 800;
    margin: 0 0 5px;
}

.doctor-video-preview-heading p,
.doctor-video-edit-form-heading p {
    font-size: 14px;
    margin: 0;
    opacity: .85;
    overflow-wrap: anywhere;
}

.doctor-video-preview-image {
    position: relative;
    min-height: 390px;
    border-radius: 18px;
    overflow: hidden;
    background-color: #123d5b;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}

.doctor-video-preview-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5, 27, 48, .05) 35%,
        rgba(3, 24, 47, .9) 100%
    );
    z-index: -1;
}

.doctor-video-preview-play {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border: 5px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(5, 35, 63, .62);
    font-size: 54px;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.doctor-video-preview-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: #079b91;
}

.doctor-video-preview-caption {
    padding: 16px;
    background: rgba(3, 27, 52, .9);
    margin: 0 12px 12px;
    border-radius: 12px;
}

.doctor-video-preview-caption h3 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
    margin: 0 0 5px;
}

.doctor-video-preview-caption p {
    font-size: 14px;
    margin: 0;
    color: #e0f3ff;
}

.doctor-video-preview-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px;
    margin-top: 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 13px;
    min-width: 0;
}

.doctor-video-preview-info-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .25);
    border-radius: 10px;
    font-size: 22px;
}

.doctor-video-preview-info small,
.doctor-video-preview-info strong,
.doctor-video-current-url span {
    display: block;
}

.doctor-video-preview-info small {
    color: #c4e6f6;
    margin-bottom: 4px;
}

.doctor-video-preview-info strong {
    font-size: 14px;
}

.doctor-video-current-url {
    flex: 1;
    min-width: 0;
}

.doctor-video-current-url span {
    overflow-wrap: anywhere;
    font-size: 13px;
}

.doctor-video-external-link {
    color: #fff;
    font-size: 22px;
}

.doctor-video-edit-form-card {
    padding: 26px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #e4eef7;
    border-radius: 26px;
    box-shadow: 0 12px 35px rgba(16, 59, 89, .06);
}

.doctor-video-edit-form-heading {
    padding-bottom: 20px;
    border-bottom: 1px solid #e1ebf5;
}

.doctor-video-edit-form-heading > span {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg, #6560ff, #4b42e9);
    color: white;
    font-size: 26px;
}

.doctor-video-edit-form-heading p {
    color: #547594;
}

.doctor-video-edit-field-card {
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e1eaf6;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff, #fbfaff);
}

.doctor-video-edit-field-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.doctor-video-edit-number {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dcd9ff;
    color: #5148e8;
    font-size: 17px;
    font-weight: 800;
}

.doctor-video-edit-number-teal {
    background: #c7f2e9;
    color: #087d76;
}

.doctor-video-edit-field-heading > div {
    flex: 1;
    min-width: 0;
}

.doctor-video-edit-field-heading label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #103b59;
    margin-bottom: 5px;
}

.doctor-video-edit-field-heading label b {
    color: #e53955;
}

.doctor-video-edit-field-heading p {
    color: #64809b;
    font-size: 13px;
    margin: 0;
}

.doctor-video-edit-field-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eeeaff;
    color: #6559ed;
    font-size: 24px;
    flex-shrink: 0;
}

.doctor-video-edit-link-icon {
    background: #e0f7f3;
    color: #079b91;
}

.doctor-video-edit-field-card .form-control {
    min-height: 50px;
    border: 1px solid #d5e3f1;
    border-radius: 11px;
    padding: 12px 15px;
    color: #173b5d;
    box-shadow: none;
}

.doctor-video-edit-field-card .form-control:focus {
    border-color: #079b91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, .1);
}

.doctor-video-edit-url-preview {
    padding: 22px;
    border-radius: 17px;
    background: linear-gradient(120deg, #f0f8ff, #f0fbf9);
}

.doctor-video-edit-url-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}

.doctor-video-edit-url-heading > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: #c9e1ff;
    color: #246fe5;
    border-radius: 50%;
    font-size: 22px;
}

.doctor-video-edit-url-heading strong {
    color: black;
    font-size: 14px;
    font-weight: 400px;
}

.doctor-video-edit-url-heading p {
    margin: 4px 0 0;
    color: #587b9d;
    font-size: 13px;
}

.doctor-video-edit-url-action {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doctor-video-edit-url-action > span {
    flex: 1;
    min-width: 0;
    padding: 15px;
    border-radius: 11px;
    background: #d9f5ef;
    color: #079b91;
    font-weight: 700;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.doctor-video-open-button,
.doctor-video-cancel-button,
.doctor-video-update-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    
    font-size: 13px;
    font-weight: 700;
   
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}

.doctor-video-open-button {
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #079b91;
    color: #07877f;
}

.doctor-video-open-button:hover {
    background: #e1f8f4;
}

/*.doctor-video-edit-footer {*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*    gap: 14px;*/
/*    margin-top: 24px;*/
/*    padding-top: 22px;*/
/*    border-top: 1px solid #e1ebf5;*/
/*}*/


.doctor-video-edit-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    padding: 17px 24px;
    border-top: 1px solid #e1ebf5;
}
/*.doctor-video-cancel-button {*/
/*    background: #fff;*/
/*    border: 1px solid #079b91;*/
/*    color: #087b79;*/
/*    min-width: 145px;*/
/*}*/
.doctor-video-cancel-button {
    min-width: auto;
    min-height: 44px;
    padding: 11px 19px;
    background: #ffffff;
    border: 1px solid #b9cddd;
    border-radius: 9px;
    color: #103B59;
    font-size: 13px;
    font-weight: 700;
}

/*.doctor-video-cancel-button:hover {*/
/*    background: #effbf9;*/
/*    color: #075e62;*/
/*}*/


.doctor-video-cancel-button:hover {
    background: #f0f6fa;
    color: #103B59;
}
/*.doctor-video-update-button {*/
/*    min-width: 155px;*/
/*    border: 1px solid #056b70;*/
/*    background: linear-gradient(135deg, #05616c, #078b86);*/
/*    color: #fff;*/
/*}*/

.doctor-video-update-button {
    min-width: auto;
    min-height: 44px;
    padding: 11px 19px;
    border: 1px solid #079B91;
    border-radius: 9px;
    background: linear-gradient(115deg, #0ca99e, #087e79);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 5px 13px rgba(7,155,145,.15);
}

/*.doctor-video-update-button:hover {*/
/*    background: #034f5b;*/
/*    color: #fff;*/
/*    transform: translateY(-1px);*/
/*}*/



.doctor-video-update-button:hover {
    background: #066c67;
    border-color: #066c67;
    color: #ffffff;
    transform: translateY(-1px);
}









/* DELETE DOCTOR VIDEO CONFIRMATION POPUP */
.doctor-video-delete-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 39, 56, 0.68);
    backdrop-filter: blur(5px);
}

.doctor-video-delete-overlay.show {
    display: flex;
}

.doctor-video-delete-modal {
    width: 100%;
    max-width: 430px;
    padding: 32px 30px 26px;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    animation: doctorDeletePopupIn 0.2s ease-out;
}

.doctor-video-delete-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff0f1;
    color: #e6404d;
    font-size: 27px;
}

.doctor-video-delete-modal h2 {
    margin: 0 0 12px;
    color: #103b59;
    font-size: 22px;
    font-weight: 800;
}

.doctor-video-delete-modal p {
    margin: 0 auto 24px;
    max-width: 330px;
    color: #718096;
    font-size: 14px;
    line-height: 1.7;
}

.doctor-video-delete-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.doctor-video-delete-actions button {
    min-height: 43px;
    padding: 10px 22px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #40566b;
    font-weight: 700;
    cursor: pointer;
}

.doctor-video-delete-actions .confirm-delete-button {
    border-color: #e6404d;
    background: #e6404d;
    color: #fff;
}

.doctor-video-delete-actions .confirm-delete-button:hover {
    background: #cf2938;
}

@keyframes doctorDeletePopupIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}







/* Doctor Leave / Emergency Banner Only */
/*.doctor-leave-page-banner {*/
/*    background-color: #dcf9f6;*/
/*    background-image: url('../images/doctorleave.png');*/
/*    background-size: cover;*/
/*    background-position: right center;*/
/*    background-repeat: no-repeat;*/
/*    border-radius: 22px;*/
/*}*/



/* Doctor Leave / Emergency - Dark Teal Banner */
.doctor-leave-page-banner {
    background-color: #075563 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 65, 78, 0.96) 0%,
            rgba(4, 91, 105, 0.88) 40%,
            rgba(4, 91, 105, 0.48) 72%,
            rgba(4, 91, 105, 0.18) 100%
        ),
        url('../images/doctorleave.png') !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 20px;
    overflow: hidden;
}

/* White heading */
.doctor-leave-page-banner h1 {
    color: #ffffff !important;
}

/* Light aqua description */
.doctor-leave-page-banner p {
    color: #e3f8f7 !important;
}

/* White icon background with teal icon */
.doctor-leave-page-banner .blocked-times-banner-icon {
    background-color: #ffffff !important;
    color: #079b91 !important;
}



























/* Block Time Banner - Dark Teal Overlay */
.block-time-page-banner {
    background-color: #075563 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 65, 78, 0.96) 0%,
            rgba(4, 91, 105, 0.88) 40%,
            rgba(4, 91, 105, 0.48) 72%,
            rgba(4, 91, 105, 0.18) 100%
        ),
        url('../images/blockview.png') !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 20px;
    overflow: hidden;
}

/* White heading */
.block-time-page-banner h1 {
    color: #ffffff !important;
}

/* Light aqua description */
.block-time-page-banner p {
    color: #e3f8f7 !important;
}

/* White icon container with teal icon */
.block-time-page-banner .availability-page-banner-icon {
    background-color: #ffffff !important;
    color: #079b91 !important;
}


















/* Doctor Availability - Dark Teal Banner */
.doctor-availability-hero {
    background-color: #075563 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 65, 78, 0.96) 0%,
            rgba(4, 91, 105, 0.88) 40%,
            rgba(4, 91, 105, 0.48) 72%,
            rgba(4, 91, 105, 0.18) 100%
        ),
        url('../images/dravailabilitybanner.png') !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 20px;
    overflow: hidden;
}

/* White heading */
.doctor-availability-hero h1 {
    color: #ffffff !important;
}

/* Light aqua subtitle */
.doctor-availability-hero p {
    color: #e3f8f7 !important;
}

/* White icon container with teal icon */
.doctor-availability-hero .availability-banner-icon {
    background-color: #ffffff !important;
    color: #079b91 !important;
}








/* Doctor Availability - Larger Column Headings */

/* Availability Date, Working From, Working Until, Weekly Holiday */
/*.view-availability-page .availability-data-label {*/
/*    font-size: 15px !important;*/
/*    font-weight: 700 !important;*/
/*    color: #075563 !important;*/
/*}*/

/* Actions heading */
/*.view-availability-page .availability-actions-heading {*/
/*    font-size: 15px !important;*/
/*    font-weight: 700 !important;*/
/*    color: #075563 !important;*/
/*}*/

/* Total Records label */
/*.view-availability-page .availability-total-label {*/
/*    font-size: 15px !important;*/
/*    font-weight: 700 !important;*/
/*    color: #075563 !important;*/
/*}*/



/* Doctor Availability - Clean Column Headings */
.view-availability-page .availability-data-label,
.view-availability-page .availability-actions-heading {
    display: block;
    box-sizing: border-box;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #526b7c !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 10px;
}

/* Keep the total-records label unchanged */
.view-availability-page .availability-total-label {
    display: inline-block;
}
































/* Saved values slightly larger */
.view-availability-page .availability-date-value,
.view-availability-page .availability-data-value {
    font-size: 15px !important;
}





/* Keep Weekly Holiday on One Line */
.view-availability-page .availability-record-card
.availability-data:nth-of-type(4) .availability-data-label {
    white-space: nowrap;
    font-size: 14px !important;
}

/* Keep the holiday column wide enough */
.view-availability-page .availability-record-card {
    overflow: visible;
}


.view-availability-page .availability-data-label {
    white-space: nowrap;
}













/* Doctor Availability - Clear Column Headings */
/*.view-availability-page .availability-data-label,*/
/*.view-availability-page .availability-actions-heading,*/
/*.view-availability-page .availability-total-label {*/
/*    display: inline-block;*/
/*    box-sizing: border-box;*/
/*    font-size: 12px !important;*/
/*    font-weight: 800 !important;*/
/*    letter-spacing: 0.3px;*/
/*    line-height: 1.4;*/
/*    text-transform: uppercase;*/
/*    color: #075563 !important;*/
/*    background: #E7F5F5;*/
/*    padding: 5px 7px;*/
/*    border-radius: 6px;*/
/*    margin-bottom: 8px;*/
/*}*/

/* Doctor Availability - Saved Values */
/*.view-availability-page .availability-date-value,*/
/*.view-availability-page .availability-data-value {*/
/*    display: block;*/
/*    font-size: 15px !important;*/
/*    font-weight: 400 !important;*/
/*    line-height: 1.6;*/
/*    color: #103B59 !important;*/
/*}*/

/* Keep Column Headings on One Line */
/*.view-availability-page .availability-data-label {*/
/*    white-space: nowrap;*/
/*}*/

/* Weekly Holiday - Compact Heading */
/*.view-availability-page .availability-record-card*/
/*.availability-data:nth-of-type(4) .availability-data-label {*/
/*    font-size: 11px !important;*/
/*    padding: 5px;*/
/*    white-space: nowrap;*/
/*}*/

/* Prevent Card Content from Being Clipped */
/*.view-availability-page .availability-record-card {*/
/*    overflow: visible;*/
/*}*/

/* Center Actions Heading */
/*.view-availability-page .availability-actions-heading {*/
/*    text-align: center;*/
/*    margin-bottom: 10px;*/
/*}*/




/* Doctor Availability - Separate Holiday and Actions */
/*.view-availability-page .availability-record-card {*/
/*    gap: 8px;*/
/*}*/

/* Give Weekly Holiday enough room */
/*.view-availability-page .availability-record-card*/
/*.availability-data:nth-of-type(4) {*/
/*    min-width: 160px;*/
/*    padding-right: 8px;*/
/*}*/

/* Separate the Actions column */
/*.view-availability-page .availability-record-card*/
/*.availability-actions {*/
/*    min-width: 100px;*/
/*    padding-left: 6px;*/
/*    border-left: 1px solid #D8E8F0;*/
/*    text-align: center;*/
/*}*/

/* Keep the Actions heading centered */
/*.view-availability-page .availability-actions-heading {*/
/*    display: block;*/
/*    width: fit-content;*/
/*    margin: 0 auto 8px;*/
/*    white-space: nowrap;*/
/*}*/

/* Keep action buttons neatly aligned */
/*.view-availability-page .availability-actions .availability-action-btn {*/
/*    margin: 1px;*/
/*}*/













/* Doctor Availability - Align Actions with Column Headings */
.view-availability-page .availability-record-card > .availability-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    gap: 0 !important;
}

/* Actions heading */
.view-availability-page .availability-record-card .availability-actions-heading {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
}

/* Action buttons */
/*.view-availability-page .availability-record-card .availability-actions .availability-action-btn {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    vertical-align: top;*/
/*    margin: 0 1px !important;*/
/*}*/






/* Doctor Availability - Keep Actions in One Horizontal Row */
.view-availability-page .availability-record-card > .availability-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 26px);
    grid-template-rows: auto 30px;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    min-width: 0;
    width: 100%;
    padding: 0 2px !important;
    border-left: 1px solid #D8E8F0;
    box-sizing: border-box;
    text-align: center;
}

/* Actions heading spans the full row */
.view-availability-page .availability-record-card .availability-actions-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    margin: 0 0 8px !important;
    white-space: nowrap;
}

/* Three action buttons stay side by side */
.view-availability-page .availability-record-card .availability-actions .availability-action-btn {
    grid-row: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    min-width: 26px;
    height: 30px;
    padding: 0;
    margin: 0 !important;
    box-sizing: border-box;
}



















































































































































/* Block Time - Clear Column Headings */
.block-time-list-page .blocked-time-date small,
.block-time-list-page .blocked-time-reason small,
.block-time-list-page .blocked-time-actions > small,
.block-time-list-page .availability-records-title small {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #075563 !important;
    background: #E7F5F5;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Block Time - Saved Values */
.block-time-list-page .blocked-time-date strong,
.block-time-list-page .blocked-time-reason strong {
    display: block;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6;
    color: #103B59 !important;
}

/* Block Time - Orange Column Icons */
.block-time-list-page .bi-calendar3,
.block-time-list-page .bi-calendar-event,
.block-time-list-page .bi-calendar-date,
.block-time-list-page .bi-chat-square-text,
.block-time-list-page .bi-chat-left-text,
.block-time-list-page .bi-chat-square-text-fill {
    color: #E89535 !important;
    font-size: 15px !important;
    margin-right: 4px;
}








































/* Doctor Leave / Emergency - Clear Column Headings */
.doctor-leave-record-row .doctor-leave-record-field > span {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #075563 !important;
    background: #E7F5F5;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Doctor Leave / Emergency - Orange Icons */
.doctor-leave-record-row .bi-calendar-event,
.doctor-leave-record-row .bi-chat-left-text {
    color: #E89535 !important;
    font-size: 15px !important;
    margin-right: 4px;
}

/* Doctor Leave / Emergency - Saved Values */
.doctor-leave-record-row .doctor-leave-record-field > strong {
    display: block;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6;
    color: #103B59 !important;
}





/* Doctor Leave / Emergency - Match Actions Heading Style */
.doctor-leave-record-row .availability-actions-heading,
.doctor-leave-record-row .doctor-leave-actions > span,
.doctor-leave-record-row .doctor-leave-record-actions > span {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #075563 !important;
    background: #E7F5F5;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}






















/* Announcements - Clear Column Headings */
.announcement-record-row .announcement-record-field > span,
.announcement-record-actions > span {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #075563 !important;
    background: #E7F5F5;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Announcements - Orange Column Icons */
.announcement-record-title .bi-megaphone,
.announcement-record-date .bi-calendar-event,
.announcement-record-message .bi-chat-left-text {
    color: #E89535 !important;
    font-size: 15px !important;
    margin-right: 4px;
}

/* Announcements - Saved Values */
.announcement-record-row .announcement-record-field > strong {
    display: block;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6;
    color: #103B59 !important;
}








/* Doctor Leave - Style Total Records Heading */
.blocked-times-total > div:last-child > span {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #075563 !important;
    background: #E7F5F5;
    padding: 6px 10px;
    border-radius: 6px;
}

/* Announcements - Style Total Records Heading */
.block-time-total > div:last-child > span {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #075563 !important;
    background: #E7F5F5;
    padding: 6px 10px;
    border-radius: 6px;
}









































/* Doctor Availability - Force Space Between Action Icons */
.view-availability-page .availability-record-card > .availability-actions {
    column-gap: 10px !important;
    grid-template-columns: repeat(3, 26px) !important;
}

.view-availability-page .availability-record-card > .availability-actions .availability-action-btn {
    margin: 0 !important;
    width: 26px !important;
    min-width: 26px !important;
    justify-self: center;
}



.view-availability-page .availability-record-card .availability-actions .availability-action-btn {
    transform: translateY(8px);
}






















/* =========================================
   DOCTOR AVAILABILITY - FINAL CLEAN DESIGN
   ========================================= */

/* Clean white records area */
.view-availability-page .availability-records-panel {
    background: #fff !important;
    padding: 28px !important;
    border: 1px solid #e5edf4 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

/* Record row layout */
.view-availability-page .availability-record-card {
    display: grid !important;
    grid-template-columns: 84px 1.3fr 1fr 1fr 1.1fr 170px !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 102px !important;
    padding: 18px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e4ebf2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* Remove alternate row backgrounds */
.view-availability-page .availability-record-card:nth-child(even),
.view-availability-page .availability-record-card:nth-child(odd) {
    background: #fff !important;
}

/* Record number */
.view-availability-page .availability-record-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #e0f5f3 !important;
    color: #078d85 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}

/* Column separators */
.view-availability-page .availability-record-card .availability-data {
    min-width: 0 !important;
    padding: 10px 18px !important;
    border-left: 1px solid #e0e9f1 !important;
}

/* Plain column headings */
.view-availability-page .availability-record-card .availability-data-label,
.view-availability-page .availability-record-card .availability-actions-heading {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #405d76 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* Remove coloured value boxes */
.view-availability-page .availability-record-card .availability-date-value,
.view-availability-page .availability-record-card .availability-data-value {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #153750 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* Actions column */
.view-availability-page .availability-record-card > .availability-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 0 0 16px !important;
    margin: 0 !important;
    border-left: 1px solid #e0e9f1 !important;
    box-sizing: border-box !important;
}

/* Action buttons */
.view-availability-page .availability-record-card .availability-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

/* Keep the actions heading visible above the icons */
.view-availability-page .availability-record-card .availability-actions-heading {
    display: block !important;
    text-align: center !important;
}














































/* Doctor Availability - Clean Shared Table Layout */
.view-availability-page .availability-table-header,
.view-availability-page .availability-record-card {
    display: grid;
    grid-template-columns:
        58px
        minmax(155px, 1.25fr)
        minmax(125px, 1fr)
        minmax(125px, 1fr)
        minmax(145px, 1.15fr)
        120px;
    align-items: center;
    column-gap: 0;
}

.view-availability-page .availability-table-header {
    padding: 15px 12px;
    background: #f5f8fc;
    border: 1px solid #e3ebf5;
    border-radius: 14px 14px 0 0;
    color: #34516c;
    font-size: 14px;
    /*font-weight: 700;*/
    text-transform: uppercase;
}

.view-availability-page .availability-table-header > div {
    padding: 0 12px;
    border-right: 1px solid #e1eaf3;
    white-space: nowrap;
}

.view-availability-page .availability-table-header > div:last-child {
    border-right: none;
    text-align: center;
}

.view-availability-page .availability-table-header i {
    margin-right: 7px;
    font-size: 14px;
}

.view-availability-page .availability-table-body {
    border: 1px solid #e3ebf5;
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 0 12px;
    background: #fff;
}

.view-availability-page .availability-record-card {
    min-height: 82px;
    margin: 0;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #e4edf5;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.view-availability-page .availability-record-card:last-child {
    border-bottom: none;
}

.view-availability-page .availability-record-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border-radius: 50%;
    background: #e0f6f4;
    color: #079b91;
    font-size: 22px;
    font-weight: 700;
}

.view-availability-page .availability-record-card .availability-data {
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-right: 1px solid #e1eaf3;
    color: #173c59;
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* Hide the repeated labels inside each record */
.view-availability-page .availability-record-card .availability-data-label {
    display: none !important;
}

.view-availability-page .availability-record-card .availability-date-value,
.view-availability-page .availability-record-card .availability-data-value {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #173c59;
    font-size: 14px;
    font-weight: 400;
}

.view-availability-page .availability-record-card .availability-holiday-cell {
    gap: 7px;
    white-space: nowrap;
}

.view-availability-page .availability-record-card .availability-holiday-cell i {
    color: #345b79;
}

.view-availability-page .availability-record-card > .availability-actions {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0 8px !important;
    border: none;
    background: transparent;
}

.view-availability-page .availability-record-card .availability-action-btn {
    display: inline-flex !important;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin: 0 !important;
    padding: 0;
    border: none;
    border-radius: 50%;
    text-decoration: none;
    font-size: 15px;
}

.view-availability-page .availability-record-card .availability-view-action {
    background: #e1f1ff;
    color: #0784d5;
}

.view-availability-page .availability-record-card .availability-edit-action {
    background: #e0f6f3;
    color: #079b91;
}

.view-availability-page .availability-record-card .availability-delete-action {
    background: #ffebef;
    color: #ed3150;
}







/* Fix Doctor Availability column alignment */
.view-availability-page .availability-record-card {
    grid-template-columns:
        58px
        minmax(0, 1.2fr)
        minmax(0, 0.9fr)
        minmax(0, 0.9fr)
        minmax(0, 1.1fr)
        170px !important;
    padding-left: 10px;
    padding-right: 10px;
}

/* Keep each column's content and vertical separator aligned */
.view-availability-page .availability-record-card > .availability-data {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 12px;
    border-right: 1px solid #e4edf5;
}

/* Reduce the size of record number circles */
.view-availability-page .availability-record-number {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    font-size: 18px !important;
    margin: auto;
}

/* Keep action buttons centered in their column */
.view-availability-page .availability-record-card > .availability-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    padding: 8px 4px !important;
}

/* Keep the heading aligned with the action buttons */
.view-availability-page .availability-record-card .availability-actions-heading {
    margin-bottom: 0 !important;
    text-align: center;
}












/* Doctor Availability - Align Header and Data Columns */
.view-availability-page .availability-record-card {
    display: grid !important;
    grid-template-columns: 60px 1.2fr 0.9fr 0.9fr 1.1fr 170px !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* Consistent column spacing */
.view-availability-page .availability-record-card > .availability-data {
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 14px !important;
    border-right: 1px solid #e0eaf3;
}

/* Keep the record number column compact */
.view-availability-page .availability-record-number {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 17px !important;
    justify-self: center;
    align-self: center;
}

/* Align action buttons */
.view-availability-page .availability-record-card > .availability-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 8px !important;
    border-left: 0 !important;
}

/* Keep the table headings on the same column grid */
.view-availability-page .availability-table-header {
    display: grid !important;
    grid-template-columns: 60px 1.2fr 0.9fr 0.9fr 1.1fr 170px !important;
    gap: 0 !important;
}

















/* =========================================
   BLOCK TIME - TABLE DESIGN
   Scoped only to the Block Time view page
========================================= */

.block-time-list-page .block-time-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dce7f5;
    border-radius: 14px;
    background: #ffffff;
}

.block-time-list-page .block-time-table-header,
.block-time-list-page .block-time-table-row {
    display: grid;
    grid-template-columns: 72px 1.15fr 1.15fr 180px;
    align-items: center;
}

.block-time-list-page .block-time-table-header {
    min-height: 52px;
    background: #f4f8fd;
    border-bottom: 1px solid #dce7f5;
    color: #103b59;
    font-size: 12px;
    font-weight: 700;
}

.block-time-list-page .block-time-table-header .availability-data {
    padding: 16px 14px;
    white-space: nowrap;
}

.block-time-list-page .block-time-table-header i {
    margin-right: 7px;
    font-size: 14px;
}

.block-time-list-page .block-time-table-row {
    min-height: 88px;
    background: #ffffff;
    border-bottom: 1px solid #dce7f5;
}

.block-time-list-page .block-time-table-row:last-child {
    border-bottom: none;
}

.block-time-list-page .block-time-table-row .availability-data {
    min-width: 0;
    min-height: 88px;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    color: #103b59;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.block-time-list-page .block-time-table-row .block-time-number-column {
    justify-content: center;
}

.block-time-list-page .availability-row-number {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dff6f3;
    color: #079b91;
    font-weight: 700;
}

.block-time-list-page .block-time-table-row .block-time-date-column,
.block-time-list-page .block-time-table-row .block-time-reason-column {
    border-left: 1px solid #dce7f5;
}

.block-time-list-page .block-time-table-row .block-time-actions-column {
    border-left: 1px solid #dce7f5;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.block-time-list-page .block-time-table-header .block-time-actions-column {
    text-align: center;
}

.block-time-list-page .block-time-actions-column .availability-action-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    text-decoration: none;
}









/* =========================================
   DOCTOR LEAVE - HORIZONTAL TABLE
========================================= */

.doctor-leave-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dce7f5;
    border-radius: 14px;
    background: #fff;
}

.doctor-leave-table-header,
.doctor-leave-table-row {
    display: grid;
    grid-template-columns: 72px minmax(150px, 0.9fr) minmax(220px, 1.5fr) 180px;
    align-items: center;
}

.doctor-leave-table-header {
    min-height: 52px;
    background: #f4f8fd;
    border-bottom: 1px solid #dce7f5;
    color: #103b59;
    font-size: 12px;
    font-weight: 700;
}

.doctor-leave-table-header .availability-data {
    padding: 16px 12px;
    white-space: nowrap;
}

.doctor-leave-table-header i {
    margin-right: 6px;
}

.doctor-leave-table-row {
    min-height: 88px;
    background: #fff;
    border-bottom: 1px solid #dce7f5;
}

.doctor-leave-table-row:last-child {
    border-bottom: none;
}

.doctor-leave-table-row .availability-data {
    min-width: 0;
    min-height: 88px;
    padding: 16px 12px;
    display: flex;
    align-items: center;
    color: #103b59;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.doctor-leave-table-row .doctor-leave-number-column {
    justify-content: center;
}

.doctor-leave-table-row .doctor-leave-date-column,
.doctor-leave-table-row .doctor-leave-reason-column,
.doctor-leave-table-row .doctor-leave-actions-column {
    border-left: 1px solid #dce7f5;
}

.doctor-leave-table-row .doctor-leave-reason-column {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
}

.doctor-leave-reason-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.doctor-leave-reason-content strong {
    font-weight: 500;
}

.doctor-leave-table-row .doctor-leave-actions-column {
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.doctor-leave-table-header .doctor-leave-actions-column {
    justify-content: center;
}

.doctor-leave-table-row .availability-row-number {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dff6f3;
    color: #079b91;
    font-weight: 700;
}

.doctor-leave-table-row .availability-action-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    text-decoration: none;
}






/* ANNOUNCEMENTS - AVAILABILITY STYLE TABLE */

.announcement-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dce7f5;
    border-radius: 14px;
    background: #fff;
}

.announcement-table-header,
.announcement-table-row {
    display: grid;
    grid-template-columns: 72px minmax(150px, 1fr) minmax(150px, 1fr) minmax(220px, 1.6fr) 126px;
    align-items: center;
}

.announcement-table-header {
    min-height: 52px;
    background: #f4f8fd;
    border-bottom: 1px solid #dce7f5;
    color: #103b59;
    font-size: 14px;
    /*font-weight: 700;*/
}

.announcement-table-header .availability-data {
    padding: 16px 10px;
    white-space: nowrap;
}

.announcement-table-header i {
    margin-right: 5px;
}

.announcement-table-row {
    min-height: 88px;
    background: #fff;
    border-bottom: 1px solid #dce7f5;
}

.announcement-table-row:last-child {
    border-bottom: none;
}

.announcement-table-row .availability-data {
    min-width: 0;
    min-height: 88px;
    padding: 16px 10px;
    display: flex;
    align-items: center;
    color: #103b59;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.announcement-table-row .announcement-number-column {
    justify-content: center;
}

.announcement-table-row .announcement-title-column,
.announcement-table-row .announcement-date-column,
.announcement-table-row .announcement-message-column,
.announcement-table-row .announcement-actions-column {
    border-left: 1px solid #dce7f5;
}

.announcement-table-row .announcement-actions-column {
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.announcement-table-header .announcement-actions-column {
    justify-content: center;
}

.announcement-table-row .availability-row-number {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dff6f3;
    color: #079b91;
    font-weight: 700;
}

.announcement-table-row .availability-action-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    text-decoration: none;
}








/* DOCTOR VIDEOS - BLOCK TIME STYLE TABLE */

.doctor-videos-horizontal-table {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d5e3f5;
    border-radius: 14px;
    background: #fff;
}

.doctor-videos-table-header,
.doctor-videos-table-row {
    display: grid;
    grid-template-columns: 72px minmax(180px, 1fr) minmax(250px, 1.6fr) 180px;
    align-items: center;
}

.doctor-videos-table-header {
    min-height: 56px;
    background: #f4f8fd;
    border-bottom: 1px solid #d5e3f5;
    color: #103b59;
    font-size: 14px;
    font-weight: 700;
}

.doctor-videos-table-header > div {
    padding: 16px 12px;
    white-space: nowrap;
}

.doctor-videos-table-header i {
    margin-right: 5px;
}

.doctor-videos-table-row {
    min-height: 88px;
    border-bottom: 1px solid #d5e3f5;
}

.doctor-videos-table-row:last-child {
    border-bottom: none;
}

.doctor-videos-table-row > div {
    min-width: 0;
    min-height: 88px;
    padding: 16px 12px;
    display: flex;
    align-items: center;
    color: #103b59;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.doctor-videos-table-row .doctor-videos-title-column,
.doctor-videos-table-row .doctor-videos-url-column,
.doctor-videos-table-row .doctor-videos-actions-column {
    border-left: 1px solid #d5e3f5;
}

.doctor-videos-row-number {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #dff6f3;
    color: #079b91;
    font-weight: 700;
}

.doctor-videos-title-column {
    gap: 9px;
}

.doctor-videos-title-icon {
    flex-shrink: 0;
    color: #079b91;
}

.doctor-videos-url-column a {
    color: #075b91;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.doctor-videos-table-row .doctor-videos-actions-column {
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.doctor-videos-table-header .doctor-videos-actions-column {
    justify-content: center;
}

.doctor-videos-table-row .doctor-video-action-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50%;
    text-decoration: none;
}

.doctor-videos-empty-row {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #64748b;
}

.doctor-videos-empty-row i {
    font-size: 30px;
}









/*today css*/




/* FINAL FIX: Compact Availability Action Buttons */
.view-availability-page .availability-record-card .availability-actions .availability-action-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
    
}

.view-availability-page .availability-record-card .availability-actions {
  
    
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    height: 100% !important;
    gap: 7px !important;
    min-width: 125px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    row-gap: 0 !important;
    transform: none !important;
    

    
    
}






/* =========================================
   FINAL: COMPACT DOCTOR AVAILABILITY TABLE
========================================= */

/* One shared grid for header and rows (identical column widths) */
.view-availability-page .availability-table-header,
.view-availability-page .availability-record-card {
    display: grid !important;
    grid-template-columns:
        60px
        minmax(0, 1.2fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.1fr)
        130px !important;
    column-gap: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Remove side padding so row lines align with the header */
.view-availability-page .availability-table-body {
    padding: 0 !important;
}

/* Header */
.view-availability-page .availability-table-header {
    min-height: 44px !important;
    align-items: stretch !important;
}

.view-availability-page .availability-table-header > div {
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.view-availability-page .availability-table-header > div:not(:first-child) {
    border-left: 1px solid #e0eaf3 !important;
}

.view-availability-page .availability-table-header > div:first-child,
.view-availability-page .availability-table-header > div:last-child {
    justify-content: center !important;
}

/* Shorter rows */
.view-availability-page .availability-record-card {
    min-height: 64px !important;
    align-items: stretch !important;
}

.view-availability-page .availability-record-card:last-child {
    border-bottom: 0 !important;
}

/* Tighter cells, one line per column (matches the header) */
.view-availability-page .availability-record-card > .availability-data {
    min-height: 0 !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    border-left: 1px solid #e0eaf3 !important;
    border-right: 0 !important;
}

/* Smaller number circle, centered in its column */
.view-availability-page .availability-record-number {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 16px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
}

/* Actions column */
.view-availability-page .availability-record-card > .availability-actions {
    padding: 0 8px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid #e0eaf3 !important;
    border-right: 0 !important;
}





/* =========================================
   FINAL: COMPACT BLOCK TIME TABLE
========================================= */

/* Same grid for header and rows; date column narrower, reason wider */
.block-time-list-page .block-time-table-header,
.block-time-list-page .block-time-table-row {
    grid-template-columns: 60px 0.8fr 1.6fr 130px !important;
}

/* Shorter header */
.block-time-list-page .block-time-table-header {
    min-height: 44px !important;
}

.block-time-list-page .block-time-table-header .availability-data {
    padding: 12px 14px !important;
}

/* Shorter rows */
.block-time-list-page .block-time-table-row {
    min-height: 64px !important;
}

.block-time-list-page .block-time-table-row .availability-data {
    min-height: 64px !important;
    padding: 10px 14px !important;
}

/* Smaller number circle */
.block-time-list-page .availability-row-number {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 15px !important;
}

/* Smaller action buttons */
.block-time-list-page .block-time-actions-column {
    gap: 8px !important;
}

.block-time-list-page .block-time-actions-column .availability-action-btn {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 12px !important;
}








/* =========================================
   FINAL: COMPACT DOCTOR LEAVE TABLE
========================================= */

/* Same grid for header and rows; date column narrower, reason wider */
.doctor-leave-table-header,
.doctor-leave-table-row {
    grid-template-columns: 60px 0.8fr 1.8fr 130px !important;
    align-items: stretch !important;
}

/* Shorter header */
.doctor-leave-table-header {
    min-height: 44px !important;
}

.doctor-leave-table-header .availability-data {
    padding: 12px 14px !important;
}

/* Shorter rows (a little room for the status badge) */
.doctor-leave-table-row {
    min-height: 72px !important;
}

.doctor-leave-table-row .availability-data {
    min-height: 72px !important;
    padding: 10px 14px !important;
}

/* Reason cell: remove the extra top and bottom padding */
.doctor-leave-table-row .doctor-leave-reason-column {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
}

.doctor-leave-reason-content {
    gap: 5px !important;
}

/* Smaller status badge */
.doctor-leave-table-row .doctor-leave-status {
    margin-top: 0 !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
}

/* Smaller number circle */
.doctor-leave-table-row .availability-row-number {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 15px !important;
}

/* Smaller action buttons */
.doctor-leave-table-row .doctor-leave-actions-column {
    gap: 8px !important;
}

.doctor-leave-table-row .availability-action-btn {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 12px !important;
}





/* =========================================
   FINAL: COMPACT ANNOUNCEMENTS TABLE
========================================= */

/* Same grid for header and rows; message gets the most room */
.announcement-table-header,
.announcement-table-row {
    grid-template-columns: 60px 1fr 0.8fr 1.7fr 130px !important;
    align-items: stretch !important;
}

/* Shorter header */
.announcement-table-header {
    min-height: 44px !important;
}

.announcement-table-header .availability-data {
    padding: 12px 14px !important;
}

/* Shorter rows, plain white background */
.announcement-table-row {
    min-height: 64px !important;
    background: #ffffff !important;
}

.announcement-table-row .availability-data {
    min-height: 64px !important;
    padding: 10px 14px !important;
}

/* Smaller number circle */
.announcement-table-row .availability-row-number {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 15px !important;
}

/* Smaller action buttons that fit inside the column */
.announcement-table-row .announcement-actions-column {
    gap: 8px !important;
    padding: 10px 8px !important;
}

.announcement-table-row .availability-action-btn {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 12px !important;
}






/* =========================================
   FINAL: COMPACT DOCTOR VIDEOS TABLE
========================================= */

/* Same grid for header and rows; title gets more room so it doesn't wrap */
.doctor-videos-table-header,
.doctor-videos-table-row {
    grid-template-columns: 60px 1.4fr 1.3fr 130px !important;
    align-items: stretch !important;
}

/* Shorter header */
.doctor-videos-table-header {
    min-height: 44px !important;
}

.doctor-videos-table-header > div {
    padding: 12px 14px !important;
}

/* Shorter rows */
.doctor-videos-table-row {
    min-height: 64px !important;
}

.doctor-videos-table-row > div {
    min-height: 64px !important;
    padding: 10px 14px !important;
}

/* Smaller number circle */
.doctor-videos-row-number {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 15px !important;
}

/* Smaller action buttons */
.doctor-videos-table-row .doctor-videos-actions-column {
    gap: 8px !important;
}

.doctor-videos-table-row .doctor-video-action-btn {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    margin: 0 !important;
    font-size: 12px !important;
}

















/* Block Time view page: use the shared dashboard layout */
.block-time-list-page.block-time-content {
    display: block !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.block-time-list-page.block-time-content .availability-content {
    padding: 0 !important;
}









.view-availability-page .availability-table-header,
.view-availability-page .availability-table-header * {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 600 !important;
}



/* Column headings: Poppins on every table */
.block-time-table-header,
.block-time-table-header *,
.doctor-leave-table-header,
.doctor-leave-table-header *,
.announcement-table-header,
.announcement-table-header *,
.doctor-videos-table-header,
.doctor-videos-table-header * {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 600 !important;
}






.availability-records-title small,
.blocked-times-total > div:last-child > span,
.block-time-total > div:last-child > span,
.doctor-videos-count {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 600 !important;
}







/* Doctor Videos - Add Video Button */
.doctor-videos-add-btn {
    background-color: #ffffff !important;
    border: 1px solid #079B91 !important;
    color: #079B91 !important;
    transition: all 0.2s ease;
}

.doctor-videos-add-btn:hover,
.doctor-videos-add-btn:focus {
    background-color: #079B91 !important;
    border-color: #079B91 !important;
    color: #ffffff !important;
}
















/* Doctor Videos - Delete Confirmation Popup Theme */

.doctor-video-delete-icon {
    background-color: #DDF7F1 !important;
    color: #079B91 !important;
}

.doctor-video-delete-icon i {
    color: #079B91 !important;
}

.confirm-delete-button {
    background-color: #079B91 !important;
    border: 1px solid #079B91 !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.confirm-delete-button i {
    color: #ffffff !important;
}

.confirm-delete-button:hover,
.confirm-delete-button:focus {
    background-color: #103B59 !important;
    border-color: #103B59 !important;
    color: #ffffff !important;
}

.confirm-delete-button:hover i,
.confirm-delete-button:focus i {
    color: #ffffff !important;
}




/* Announcements - Delete Confirmation Popup Theme */

.doctor-leave-delete-modal .doctor-leave-delete-icon {
    background-color: #DDF7F1 !important;
    color: #079B91 !important;
}

.doctor-leave-delete-modal .doctor-leave-delete-icon i {
    color: #079B91 !important;
}

.doctor-leave-delete-modal .doctor-leave-delete-confirm {
    background-color: #079B91 !important;
    border-color: #079B91 !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.doctor-leave-delete-modal .doctor-leave-delete-confirm i {
    color: #ffffff !important;
}

.doctor-leave-delete-modal .doctor-leave-delete-confirm:hover,
.doctor-leave-delete-modal .doctor-leave-delete-confirm:focus {
    background-color: #103B59 !important;
    border-color: #103B59 !important;
    color: #ffffff !important;
}




/* Doctor Leave / Emergency - Delete Confirmation Theme */

.doctor-leave-delete-modal .doctor-leave-delete-icon {
    background-color: #DDF7F1 !important;
    color: #079B91 !important;
}

.doctor-leave-delete-modal .doctor-leave-delete-icon i {
    color: #079B91 !important;
}

.doctor-leave-delete-modal #confirmDoctorLeaveDelete {
    background-color: #079B91 !important;
    border: 1px solid #079B91 !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.doctor-leave-delete-modal #confirmDoctorLeaveDelete:hover,
.doctor-leave-delete-modal #confirmDoctorLeaveDelete:focus {
    background-color: #103B59 !important;
    border-color: #103B59 !important;
    color: #ffffff !important;
}






/* Block Time - Delete Confirmation Popup Theme */

.delete-confirm-modal .delete-confirm-icon {
    background-color: #DDF7F1 !important;
    color: #079B91 !important;
}

.delete-confirm-modal .delete-confirm-icon i {
    color: #079B91 !important;
}

.delete-confirm-modal #confirmDeleteBlockTime {
    background-color: #079B91 !important;
    border: 1px solid #079B91 !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.delete-confirm-modal #confirmDeleteBlockTime:hover,
.delete-confirm-modal #confirmDeleteBlockTime:focus {
    background-color: #103B59 !important;
    border-color: #103B59 !important;
    color: #ffffff !important;
}





/* Doctor Availability - Delete Confirmation Popup Theme */

.availability-delete-modal .availability-delete-icon {
    background-color: #DDF7F1 !important;
    color: #079B91 !important;
}

.availability-delete-modal .availability-delete-icon i {
    color: #079B91 !important;
}

/* Yes, Delete Button */
.availability-delete-modal button.btn-danger {
    background-color: #079B91 !important;
    border: 1px solid #079B91 !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

/* Button Hover */
.availability-delete-modal button.btn-danger:hover,
.availability-delete-modal button.btn-danger:focus {
    background-color: #103B59 !important;
    border-color: #103B59 !important;
    color: #ffffff !important;
}








/* =========================================
   SIDEBAR: fits 7 menu items
========================================= */

/* Thin scrollbar so it doesn't squeeze the menu */
.dashboard-layout .sidebar {
    padding: 20px 16px 14px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.dashboard-layout .sidebar::-webkit-scrollbar {
    width: 6px;
}

.dashboard-layout .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
}

.dashboard-layout .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* Slightly tighter brand and section spacing */
.dashboard-layout .sidebar-brand {
    padding-bottom: 20px !important;
}

.dashboard-layout .sidebar-section {
    margin: 18px 10px 10px !important;
}

/* Compact menu items that never wrap */
.dashboard-layout .nav-item {
    min-height: 42px !important;
    margin-bottom: 4px !important;
    padding: 0 12px !important;
    gap: 12px !important;
    font-size: 14px !important;
    white-space: nowrap;
}

/* Less space above Sign Out */
.dashboard-layout .sidebar-bottom {
    padding-top: 14px !important;
}











/* =====================================================
   ADD STAFF PAGE
   Clinic Theme: Navy + Teal
===================================================== */

.add-staff-page {
    background: #f1f7fb;
    padding: 28px;
}

/* Hero Banner */



/* Hero Banner - Clinic Background Image */




/* =========================================
   ADD STAFF - FINAL BANNER FIX
========================================= */

.add-staff-hero {
    position: relative;
    min-height: 185px;
    padding: 30px;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3, 77, 88, 0.97) 0%,
            rgba(3, 77, 88, 0.88) 48%,
            rgba(3, 77, 88, 0.45) 100%
        ),
        url('../images/addstaffbanner.png')
        center right / cover no-repeat !important;

    border: 1px solid #075967;
    border-radius: 22px;
}

/* Keep banner content above the background */
.add-staff-hero-icon,
.add-staff-hero-content {
    position: relative;
    z-index: 2;
}

/* White icon tile with teal icon */
.add-staff-hero-icon {
    background: #ffffff !important;
    color: #079B91 !important;
    box-shadow: none !important;
}

.add-staff-hero-icon i {
    color: #079B91 !important;
}

/* Readable banner heading */
.add-staff-hero-content > span {
    color: #72E8DE !important;
}

.add-staff-hero-content h1 {
    color: #ffffff !important;
}

.add-staff-hero-content p {
    color: #F0FAFC !important;
}

/* Remove decorative icon on the right */
.add-staff-hero-decoration {
    display: none !important;
}

/* Prevent the banner from overlapping the form */
.add-staff-card {
    position: relative;
    z-index: 1;
}






























.add-staff-hero::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -45px;
    top: -85px;
    border-radius: 50%;
    border: 30px solid rgba(7, 155, 145, 0.09);
    pointer-events: none;
}

.add-staff-hero-icon {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    color: #ffffff;
    background: linear-gradient(145deg, #079b91, #057d79);
    box-shadow: 0 10px 22px rgba(7, 155, 145, 0.2);
}

.add-staff-hero-icon i {
    font-size: 43px;
}

.add-staff-hero-content {
    position: relative;
    z-index: 1;
}

.add-staff-hero-content > span {
    display: block;
    margin-bottom: 8px;
    color: #078c85;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.add-staff-hero-content h1 {
    /*margin: 0 0 8px;*/
    /*color: #103b59;*/
    /*font-size: clamp(28px, 3vw, 40px);*/
    /*font-weight: 800;*/
    
    
     margin: 0 0 8px;
    font-size: 32px;
    font-weight: 750;
    color: #103B59;
}

.add-staff-hero-content p {
    /*margin: 0;*/
    /*color: #607a91;*/
    /*font-size: 15px;*/
    /*line-height: 1.7;*/
     margin: 0;
    color: #345b78;
    font-size: 16px;
    line-height: 1.6;
}

.add-staff-hero-decoration {
    position: absolute;
    right: 55px;
    bottom: -24px;
    color: rgba(7, 155, 145, 0.08);
    font-size: 155px;
    pointer-events: none;
}

/* Main Form Card */
.add-staff-card {
    overflow: hidden;
    border: 1px solid #e7eff5;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(16, 59, 89, 0.07);
}

/* Card Header */
.add-staff-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 28px 32px 20px;
}

.add-staff-card-header h2 {
    margin: 0 0 8px;
    color: #103b59;
    font-size: 25px;
    font-weight: 800;
}

.add-staff-card-header p {
    margin: 0;
    color: #7b8fa3;
    font-size: 14px;
}

.add-staff-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border: 1px solid #e1f2f2;
    border-radius: 16px;
    background: #effafa;
}

.add-staff-info > i {
    color: #078f89;
    font-size: 32px;
}

.add-staff-info strong,
.add-staff-info span {
    display: block;
}

.add-staff-info strong {
    margin-bottom: 4px;
    color: #103b59;
    font-size: 14px;
}

.add-staff-info span {
    color: #7b8fa3;
    font-size: 11px;
}

/* Form Layout */
#addStaffForm {
    padding: 8px 32px 0;
}

.add-staff-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.add-staff-field {
    min-width: 0;
}

.add-staff-field-full {
    grid-column: 1 / -1;
}

.add-staff-field label {
    display: block;
    margin-bottom: 9px;
    color: #103b59;
    font-size: 14px;
    font-weight: 700;
}

.add-staff-field label span {
    color: #e34d59;
}

/* Input and Icon */
.add-staff-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.add-staff-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 15px;
    color: #078f89;
    background: #eaf9f7;
}

.add-staff-input-icon i {
    font-size: 22px;
}

.add-staff-input-wrap .form-control {
    min-width: 0;
    height: 52px;
    padding: 12px 18px;
    border: 1px solid #d8e2ec;
    border-radius: 12px;
    background-color: #ffffff;
    color: #103b59;
    font-size: 14px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.add-staff-input-wrap .form-control::placeholder {
    color: #91a1b4;
}

.add-staff-input-wrap .form-control:focus {
    border-color: #079b91;
    box-shadow: 0 0 0 4px rgba(7, 155, 145, 0.10);
}

.add-staff-help {
    display: block;
    margin: 7px 0 0 68px;
    color: #8194a7;
    font-size: 11px;
}

/* Password Visibility Button */
.add-staff-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 48px;
    flex: 0 0 42px;
    margin-left: -57px;
    position: relative;
    z-index: 2;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #8093a7;
    font-size: 18px;
}

.add-staff-password-toggle:hover {
    color: #079b91;
}

/* Form Action Footer */
.add-staff-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 30px -32px 0;
    padding: 22px 32px;
    background: linear-gradient(110deg, #f4f9fc, #edf6fb);
    border-top: 1px solid #edf3f7;
}

.add-staff-reset-btn,
.add-staff-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-staff-reset-btn {
    border: 1px solid #079b91;
    background: #ffffff;
    color: #078b85;
}

.add-staff-reset-btn:hover {
    background: #e6f8f5;
    border-color: #078b85;
    color: #066f6b;
}

.add-staff-save-btn {
    border: 1px solid #079b91;
    background: #079b91;
    color: #ffffff;
    box-shadow: 0 5px 12px rgba(7, 155, 145, 0.12);
}

.add-staff-save-btn:hover {
    background: #103b59;
    border-color: #103b59;
    color: #ffffff;
    transform: translateY(-1px);
}

.add-staff-reset-btn i,
.add-staff-save-btn i {
    font-size: 18px;
}







/* =========================================
   ADD STAFF - MATCH AVAILABILITY BANNER
========================================= */

.add-staff-hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    min-height: 180px !important;
    padding: 28px 32px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box;
}

/* Keep icon on the left */
.add-staff-hero-icon {
    position: relative !important;
    flex: 0 0 88px !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
}

/* Keep heading and description beside the icon */
.add-staff-hero-content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0;
    z-index: 2;
}

.add-staff-hero-content > span {
    display: block;
    margin: 0 0 8px !important;
    color: #72E8DE !important;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: 3px;
}

.add-staff-hero-content h1 {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 750;
    line-height: 1.2;
}

.add-staff-hero-content p {
    margin: 0 !important;
    color: #F0FAFC !important;
    font-size: 16px !important;
    line-height: 1.6;
}

/* Remove decorative icon on the right */
.add-staff-hero-decoration {
    display: none !important;
}











/* =========================================
   ADD STAFF - MATCH AVAILABILITY CARD STYLE
========================================= */

.add-staff-page .add-staff-card {
    width: 100%;
    margin: 0 0 24px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0eaf0;
    border-radius: 14px;
    box-shadow: 0 5px 22px rgba(16, 59, 89, 0.07);
}

/* Staff Details heading */
.add-staff-page .add-staff-card > .add-staff-section-heading {
    box-sizing: border-box;
    width: 100%;
    padding: 26px 26px 0;
    margin: 0 0 24px;
}





.add-staff-page .add-staff-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    width: 100%;
    margin-bottom: 24px;
}

.add-staff-page .availability-section-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 27px;
}

.add-staff-page .icon-teal {
    color: #079B91;
    background: #D8F5F1;
}

.add-staff-page .availability-section-title {
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    color: #103B59;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.35;
}

.add-staff-page .availability-section-description {
    margin: 0;
    color: #687f91;
    font-size: 13px;
    line-height: 1.6;
}

/* Form spacing and alignment */
.add-staff-page #addStaffForm {
    padding: 0 26px 26px;
}

.add-staff-page .add-staff-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 22px;
}

.add-staff-page .add-staff-field {
    min-width: 0;
}

.add-staff-page .add-staff-field-full {
    grid-column: 1 / -1;
}


/* Keep the Email Address field compact */
.add-staff-page .add-staff-field-full {
    grid-column: auto;
    max-width: 500px;
}









.add-staff-page .add-staff-field label {
    margin-bottom: 8px;
    color: #344d5e;
    font-size: 13px;
    font-weight: 600;
}

/* Consistent input sizes */
.add-staff-page .add-staff-input-icon {
    width: 52px;
    height: 46px;
    flex: 0 0 52px;
    border-radius: 12px;
    font-size: 20px;
}

.add-staff-page .add-staff-input-wrap {
    gap: 11px;
}

.add-staff-page .add-staff-input-wrap .form-control {
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #d5e0e8;
    border-radius: 9px;
    background: #ffffff;
    color: #263b4a;
    font-size: 14px;
}

.add-staff-page .add-staff-input-wrap .form-control:focus {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.12);
}

/* Password visibility button */
.add-staff-page .add-staff-password-toggle {
    width: 36px;
    height: 40px;
    flex: 0 0 36px;
    margin-left: -47px;
    font-size: 16px;
}

/* Save and Reset buttons */
/*.add-staff-page .add-staff-form-actions {*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*    gap: 10px;*/
/*    margin: 26px 0 0;*/
/*    padding: 20px 0 0;*/
/*    border-top: 1px solid #e7eef3;*/
/*    background: #ffffff;*/
/*}*/


.add-staff-page .add-staff-form-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #e7eef3;
    background: #fff;
}













.add-staff-page .add-staff-form-actions .btn {
    min-height: 42px;
    padding: 10px 20px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
}

.add-staff-page .add-staff-form-actions .btn-primary {
    color: #ffffff;
    background: #079B91;
    border-color: #079B91;
}

.add-staff-page .add-staff-form-actions .btn-primary:hover {
    background: #067e76;
    border-color: #067e76;
}



.staff-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 81px;
    padding: 13px 20px;
    background: #103f60;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.staff-view-btn:hover {
    background: #087f83;
    color: #ffffff;
    text-decoration: none;
}

.staff-view-btn i {
    font-size: 15px;
}























/* ========================================
   VIEW STAFF PAGE
======================================== */

.view-staff-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Banner */
.staff-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px 32px;
    min-height: 150px;
    margin-bottom: 22px;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(110deg, #075363, #078d98);
}

.staff-banner-icon {
    width: 76px;
    height: 76px;
    min-width: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: #ffffff;
    color: #009f98;
    font-size: 34px;
}

.staff-banner-content h1 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 750;
}

.staff-banner-content p {
    margin: 0;
    color: #e6f8fb;
    font-size: 15px;
}

/* Records Panel */
.staff-records-panel {
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e1ebf5;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(16, 63, 96, 0.04);
}

.staff-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 25px;
}

.staff-total {
    display: flex;
    align-items: center;
    gap: 18px;
}

.staff-total-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #d7f5f1;
    color: #009f98;
    font-size: 27px;
}

.staff-total-label {
    color: #103f60;
    font-size: 14px;
}

.staff-total-number {
    color: #009f98;
    font-size: 32px;
    font-weight: 750;
    line-height: 1.3;
}

/* Add Staff Button */
.staff-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 19px;
    border: 1px solid #009f98;
    border-radius: 12px;
    background: #ffffff;
    color: #009f98;
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.staff-back-btn:hover {
    background: #009f98;
    color: #ffffff;
}

/* Search Field */
.staff-search-box {
    position: relative;
    margin-bottom: 22px;
}

.staff-search-box > i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #8295a8;
    pointer-events: none;
}

.staff-search-box input {
    width: 100%;
    min-height: 46px;
    padding: 12px 15px 12px 43px;
    border: 1px solid #d9e6f2;
    border-radius: 10px;
    background: #ffffff;
    color: #103f60;
    font-size: 14px;
    outline: none;
}

.staff-search-box input:focus {
    border-color: #009f98;
    box-shadow: 0 0 0 3px rgba(0, 159, 152, 0.10);
}




/* Table Header */
/*.staff-table-header,*/
/*.staff-record-card {*/
/*    display: grid;*/
/*    grid-template-columns:*/
/*        minmax(160px, 1.3fr)*/
/*        minmax(130px, 1fr)*/
/*        minmax(200px, 1.5fr)*/
/*        125px;*/
/*    align-items: center;*/
/*    gap: 16px;*/
/*}*/

/* Table Header */







/* Staff Table Header and Records */
.staff-table-header,
.staff-record-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 1fr)
        minmax(0, 1.5fr)
        125px;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}








.staff-table-header {
    padding: 15px 13px;
    border: 1px solid #dce8f5;
    border-radius: 12px 12px 0 0;
    background: #f4f8fd;
    color: #103f60;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
}

















.staff-table-header > div {
    min-width: 0;
}

.staff-table-header i {
    margin-right: 4px;
    font-size: 13px;
}

.staff-header-number {
    text-align: center;
}

.staff-header-actions {
    text-align: center;
}

/* Staff Record */
/*.staff-table-body {*/
/*    width: 100%;*/
/*}*/




/*.staff-table-body {*/
/*    width: 100%;*/
/*    min-width: 0;*/
/*}*/

.staff-table-body {
    width: 100%;
    min-width: 0;
}


/*.staff-record-card {*/
/*    padding: 15px 13px;*/
/*    border-right: 1px solid #dce8f5;*/
/*    border-bottom: 1px solid #dce8f5;*/
/*    border-left: 1px solid #dce8f5;*/
/*    background: #ffffff;*/
/*    transition: background 0.2s ease;*/
/*}*/

/*.staff-record-card:hover {*/
/*    background: #f8fcff;*/
/*}*/

.staff-record-card:hover {
    background: #f8fcff;
}

.staff-record-card {
    min-height: 64px;
    padding: 14px 13px;
    border-right: 1px solid #dce8f5;
    border-bottom: 1px solid #dce8f5;
    border-left: 1px solid #dce8f5;
    background: #fff;
    transition: background 0.2s ease;
}
/*.staff-record-card {*/
/*    padding: 15px 13px;*/
/*    border-right: 1px solid #dce8f5;*/
/*    border-bottom: 1px solid #dce8f5;*/
/*    border-left: 1px solid #dce8f5;*/
/*    background: #ffffff;*/
/*    transition: background 0.2s ease;*/
/*}*/

/*.staff-record-card:hover {*/
/*    background: #f8fcff;*/
/*}*/

.staff-record-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50%;
    background: #ddf5f2;
    color: #009f98;
    font-size: 13px;
    font-weight: 750;
}
.staff-data {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #24445f;
    font-size: 13px;
}

/*.staff-data {*/
/*    min-width: 0;*/
/*    overflow-wrap: anywhere;*/
/*    color: #24445f;*/
/*    font-size: 13px;*/
/*}*/



/*.staff-data {*/
/*    min-width: 0;*/
/*    overflow-wrap: anywhere;*/
/*    color: #24445f;*/
/*    font-size: 13px;*/
/*}*/

/*.staff-details-cell strong {*/
/*    display: block;*/
/*    color: #103f60;*/
/*    font-size: 14px;*/
/*    font-weight: 700;*/
/*}*/

/*.staff-details-cell span {*/
/*    display: block;*/
/*    margin-top: 5px;*/
/*    color: #8092a4;*/
/*    font-size: 12px;*/
/*    overflow-wrap: anywhere;*/
/*}*/

.staff-details-cell strong {
    display: block;
    color: #103f60;
    font-size: 14px;
    font-weight: 700;
}

.staff-details-cell span {
    display: block;
    margin-top: 5px;
    color: #8092a4;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.staff-data-icon {
    margin-right: 4px;
    color: #009f98;
}
.staff-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.staff-details-cell,
.staff-email-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}


/*.staff-email-cell {*/
/*    overflow-wrap: anywhere;*/
/*}*/

/* Action Buttons */
/*.staff-actions {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 5px;*/
/*}*/

/*.staff-actions {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 5px;*/
/*}*/

.staff-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.staff-action-btn:hover {
    transform: translateY(-2px);
}

.staff-view-action {
    background: #e0f0ff;
    color: #0876c9;
}

.staff-view-action:hover {
    background: #c8e5ff;
    color: #075ca0;
}

.staff-edit-action {
    background: #def6f1;
    color: #009f98;
}

.staff-edit-action:hover {
    background: #c4eee6;
    color: #007c76;
}

.staff-delete-action {
    background: #ffebef;
    color: #e34860;
}

.staff-delete-action:hover {
    background: #ffd8df;
    color: #c92d46;
}

/* Records Footer */
.staff-records-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    color: #71859a;
    font-size: 13px;
}

/* Empty State */
.staff-empty {
    padding: 45px 20px;
    text-align: center;
    border: 1px solid #dce8f5;
    border-radius: 0 0 12px 12px;
    background: #ffffff;
}

.staff-empty > i {
    display: block;
    margin-bottom: 12px;
    color: #009f98;
    font-size: 38px;
}

.staff-empty h5 {
    margin-bottom: 8px;
    color: #103f60;
    font-weight: 700;
}

.staff-empty p {
    margin-bottom: 20px;
    color: #71859a;
    font-size: 14px;
}
















/* Staff Search and Date Filters */
.staff-filter-form {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr) 110px 110px;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.staff-filter-form .staff-search-box {
    margin-bottom: 0;
}
.staff-username {
    display: block;
    margin-top: 5px;
    color: #718096;
    font-size: 12px;
    font-weight: 400;
}

.staff-reset-password-action {
    color: #d97706;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.staff-reset-password-action:hover {
    color: #ffffff;
    background: #d97706;
    border-color: #d97706;
}
.staff-date-filter {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 10px;
    border: 1px solid #d9e6f2;
    border-radius: 10px;
    background: #fff;
    color: #103f60;
    font-family: inherit;
    font-size: 13px;
}

.staff-date-filter:focus {
    border-color: #009f98;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 159, 152, 0.1);
}

.staff-search-btn,
.staff-reset-btn {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.staff-search-btn {
    background: #103f60;
}

.staff-search-btn:hover {
    background: #087f83;
}

.staff-reset-btn {
    background: #65727b;
}

.staff-reset-btn:hover {
    background: #4d5961;
}



/*TODAYS CSS*/


/* ========================================
   VIEW STAFF - PROPER TABLE GRID
======================================== */

.staff-table-header,
.staff-record-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 1fr)
        minmax(0, 1.5fr)
        125px;
    gap: 0;
    column-gap: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Header */
.staff-table-header {
    align-items: stretch;
    padding: 0;
    border: 1px solid #dce8f5;
    border-radius: 12px 12px 0 0;
    background: #f4f8fd;
    overflow: hidden;
}

.staff-table-header > div {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 15px 16px;
    border-right: 1px solid #dce8f5;
    box-sizing: border-box;
}

.staff-table-header > div:last-child {
    justify-content: center;
    border-right: none;
}

/* Rows */
.staff-table-body {
    width: 100%;
}

.staff-record-card {
    align-items: stretch;
    min-height: 64px;
    padding: 0;
    border: 0;
    border-right: 1px solid #dce8f5;
    border-bottom: 1px solid #dce8f5;
    border-left: 1px solid #dce8f5;
    border-radius: 0;
    background: #fff;
}

.staff-record-card:hover {
    background: #f8fcff;
}

.staff-record-card > .staff-data,
.staff-record-card > .staff-actions {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid #dce8f5;
    box-sizing: border-box;
}

.staff-record-card > .staff-actions {
    justify-content: center;
    gap: 5px;
    border-right: none;
}

.staff-record-card > .staff-data {
    overflow-wrap: anywhere;
}

.staff-details-cell,
.staff-email-cell {
    min-width: 0;
}

.staff-details-cell {
    display: block !important;
    align-content: center;
}

.staff-details-cell strong,
.staff-details-cell span {
    overflow-wrap: anywhere;
}

.staff-data-icon {
    flex-shrink: 0;
}

.staff-actions .staff-action-btn {
    flex-shrink: 0;
}


















/* ===== Reset Staff Password Popup ===== */

.reset-password-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 36, 48, 0.62);
    backdrop-filter: blur(4px);
}

.reset-password-overlay.show {
    display: flex;
}

/*.reset-password-modal {*/
/*    display: grid;*/
/*    grid-template-columns: 290px minmax(0, 1fr);*/
/*    width: 100%;*/
/*    max-width: 960px;*/
/*    overflow: hidden;*/
/*    border-radius: 22px;*/
/*    background: #ffffff;*/
/*    box-shadow: 0 24px 70px rgba(0, 30, 40, 0.25);*/
/*}*/




.reset-password-modal {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: 100%;
    max-width: 1000px;
    max-height: 590px;
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 30, 40, 0.25);
}



.reset-password-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 32px;
    color: #ffffff;
    background: linear-gradient(145deg, #087F83, #06454D 75%);
}
/* Left teal panel */
/*.reset-password-info {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    padding: 38px 30px;*/
/*    color: #ffffff;*/
/*    background: linear-gradient(145deg, #087F83, #06454D 75%);*/
/*}*/

.reset-lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    margin-bottom: 26px;
    border: 7px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #07545B;
    font-size: 42px;
}

.reset-password-info h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.reset-gold-line {
    width: 42px;
    height: 4px;
    margin-bottom: 20px;
    border-radius: 4px;
    background: #D99532;
}

.reset-password-info p {
    margin: 0;
    color: #e7f5f5;
    font-size: 14px;
    line-height: 1.8;
}

/* Right form panel */
/*.reset-password-form-panel {*/
/*    padding: 38px 42px;*/
/*}*/
.reset-password-form-panel {
    padding: 30px 36px;
}

.reset-section-label {
    color: #D99532;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

/*.reset-password-form-panel h2 {*/
/*    margin: 10px 0 8px;*/
/*    color: #07545B;*/
/*    font-size: 29px;*/
/*    font-weight: 700;*/
/*}*/
.reset-password-form-panel h2 {
    margin: 10px 0 8px;
    color: #07545B;
    font-size: 27px;
    font-weight: 700;
}

.reset-form-description {
    margin: 0 0 20px;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}
/*.reset-form-description {*/
/*    margin: 0 0 27px;*/
/*    color: #718096;*/
/*    font-size: 13px;*/
/*    line-height: 1.7;*/
/*}*/

/*.reset-form-group {*/
/*    margin-bottom: 19px;*/
/*}*/
.reset-form-group {
    margin-bottom: 15px;
}

.reset-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #173B47;
    font-size: 13px;
    font-weight: 600;
}

.reset-form-group input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dce5e9;
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: #173B47;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.reset-form-group input:focus {
    border-color: #087F83;
    box-shadow: 0 0 0 3px rgba(8, 127, 131, 0.10);
}

.reset-form-group input[readonly] {
    background: #f1f5f7;
    color: #526777;
}

.reset-form-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.reset-password-submit,
.reset-password-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}







/*.reset-password-submit {*/
/*    flex: 1;*/
/*    background: #087F83;*/
/*    color: #ffffff;*/
/*}*/

.reset-password-submit {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    min-height: 36px;
    background: #087F83;
    color: #ffffff;
}


.reset-password-submit:hover {
    background: #07545B;
    transform: translateY(-1px);
}
/*.reset-password-back {*/
/*    min-width: 105px;*/
/*    background: #e9eef2;*/
/*    color: #173B47;*/
/*}*/
.reset-password-back {
    flex: 0 0 auto;
    width: auto;
    min-width: 80px;
    min-height: 36px;
    background: #e9eef2;
    color: #173B47;
}

.reset-password-back:hover {
    background: #dce5e9;
}









.reset-password-info {
    position: relative;
}

.reset-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.reset-popup-close:hover {
    background: rgba(255, 255, 255, 0.25);
}




































/* =========================================
   EDIT STAFF PAGE
========================================= */

.edit-staff-page {
    padding: 28px;
    background: #f4f8fb;
    min-height: calc(100vh - 75px);
}

/* Page Banner */
.edit-staff-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 30px 34px;
    margin-bottom: 26px;
    overflow: hidden;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(115deg, #064e59, #087f83 62%, #11a69a);
    box-shadow: 0 12px 28px rgba(6, 78, 89, 0.14);
}

.edit-staff-banner-icon {
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 30px;
}

.edit-staff-banner-content {
    position: relative;
    z-index: 1;
}

.edit-staff-banner-tag {
    display: block;
    margin-bottom: 7px;
    color: #b7f5e9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.edit-staff-banner h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 750;
    letter-spacing: -0.8px;
}

.edit-staff-banner h1 span {
    color: #9cf0df;
}

.edit-staff-banner p {
    margin: 9px 0 0;
    color: #d6f1f0;
    font-size: 14px;
}

.edit-staff-banner-art {
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.09);
    font-size: 125px;
    pointer-events: none;
}

/* Main Layout */
.edit-staff-layout {
    display: grid;
    grid-template-columns: minmax(245px, 0.75fr) minmax(0, 1.65fr);
    gap: 24px;
    align-items: stretch;
}

/* Profile Panel */
.edit-staff-profile-panel {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    padding: 30px 25px;
    border: 1px solid #e1ebef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(28, 65, 83, 0.05);
}

.edit-staff-profile-top {
    position: relative;
    z-index: 1;
    text-align: center;
}

.edit-staff-profile-label {
    display: inline-block;
    margin-bottom: 24px;
    padding: 7px 12px;
    border-radius: 30px;
    background: #e9f8f5;
    color: #07877e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.edit-staff-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid #e8f7f4;
    border-radius: 50%;
    background: linear-gradient(145deg, #d8f4ee, #f0fbf8);
    color: #07877e;
    font-size: 43px;
    box-shadow: 0 7px 20px rgba(7, 135, 126, 0.1);
}

.edit-staff-profile-top h2 {
    margin: 0;
    color: #18394e;
    font-size: 21px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.edit-staff-profile-top p {
    margin: 7px 0 15px;
    color: #8193a1;
    font-size: 13px;
}

.edit-staff-id {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #d9efea;
    border-radius: 9px;
    background: #f3fbf9;
    color: #087f78;
    font-size: 12px;
    font-weight: 700;
}

.edit-staff-profile-divider {
    height: 1px;
    margin: 27px 0 22px;
    background: #eaf0f3;
}

.edit-staff-profile-info {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
}

.edit-staff-info-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff8f7;
    color: #098a81;
    font-size: 19px;
}

.edit-staff-profile-info small,
.edit-staff-profile-info strong {
    display: block;
}

.edit-staff-profile-info small {
    margin-bottom: 4px;
    color: #8a9aa6;
    font-size: 11px;
}

.edit-staff-profile-info strong {
    color: #25465a;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.edit-staff-profile-note {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 28px;
    padding: 14px;
    border: 1px solid #dcefeb;
    border-radius: 12px;
    background: #f2faf8;
    color: #087f78;
}

.edit-staff-profile-note > i {
    margin-top: 2px;
    font-size: 17px;
}

.edit-staff-profile-note p {
    margin: 0;
    color: #54776f;
    font-size: 12px;
    line-height: 1.7;
}

.edit-staff-profile-decoration {
    position: absolute;
    right: -12px;
    bottom: -35px;
    color: rgba(8, 143, 132, 0.045);
    font-size: 125px;
    pointer-events: none;
}

/* Form Panel */
.edit-staff-form-panel {
    min-width: 0;
    padding: 31px;
    border: 1px solid #e1ebef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(28, 65, 83, 0.05);
}

.edit-staff-form-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #edf1f4;
}

.edit-staff-section-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #e5f7f3;
    color: #07877e;
    font-size: 23px;
}

.edit-staff-form-heading h2 {
    margin: 0 0 6px;
    color: #193d52;
    font-size: 19px;
    font-weight: 750;
}

.edit-staff-form-heading p {
    margin: 0;
    color: #8293a0;
    font-size: 12px;
    line-height: 1.6;
}

/* Fields */
.edit-staff-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 22px;
}

.edit-staff-field {
    min-width: 0;
}

.edit-staff-field label {
    display: block;
    margin-bottom: 10px;
    color: #304d60;
    font-size: 12px;
    font-weight: 700;
}

.edit-staff-field label span {
    color: #e05c63;
}

.edit-staff-input-wrap {
    position: relative;
}

.edit-staff-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    transform: translateY(-50%);
    color: #78929e;
    font-size: 17px;
    pointer-events: none;
}

.edit-staff-control {
    width: 100%;
    height: 49px;
    padding: 11px 14px 11px 43px;
    border: 1px solid #dce6eb;
    border-radius: 11px;
    background: #fbfdfe;
    color: #213f52;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.edit-staff-control:focus {
    border-color: #0a9a8e;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(10, 154, 142, 0.1);
    outline: none;
}

.edit-staff-control::placeholder {
    color: #a4b2bc;
    font-size: 12px;
}

.edit-staff-field > small {
    display: block;
    margin-top: 8px;
    color: #94a3ae;
    font-size: 11px;
    line-height: 1.5;
}

/* Information Tip */
.edit-staff-form-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 29px;
    padding: 14px 16px;
    border-radius: 11px;
    background: #f5f9fc;
    color: #718593;
    font-size: 12px;
    line-height: 1.7;
}

.edit-staff-form-tip i {
    margin-top: 2px;
    color: #0b948a;
    font-size: 16px;
}

/* Footer Buttons */
.edit-staff-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 23px;
    border-top: 1px solid #edf1f4;
}

.edit-staff-cancel-btn,
.edit-staff-update-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 21px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.edit-staff-cancel-btn {
    border: 1px solid #dce5eb;
    background: #ffffff;
    color: #5b7080;
}

.edit-staff-cancel-btn:hover {
    border-color: #bdcdd7;
    background: #f5f8fa;
    color: #304d60;
    transform: translateY(-1px);
}

.edit-staff-update-btn {
    border: 1px solid #07877e;
    background: linear-gradient(120deg, #07877e, #0ba496);
    color: #ffffff;
    box-shadow: 0 5px 12px rgba(7, 135, 126, 0.16);
}

.edit-staff-update-btn:hover {
    background: linear-gradient(120deg, #066f69, #07877e);
    color: #ffffff;
    box-shadow: 0 8px 17px rgba(7, 135, 126, 0.22);
    transform: translateY(-1px);
}

























/* =========================================
   STAFF DELETE CONFIRMATION POPUP
========================================= */

.staff-delete-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(18, 35, 48, 0.55);
    backdrop-filter: blur(4px);
}

.staff-delete-overlay.show {
    display: flex;
}

.staff-delete-modal {
    width: 100%;
    max-width: 430px;
    padding: 32px 28px 26px;
    border: 1px solid #edf0f3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 22px 70px rgba(16, 35, 50, 0.24);
    text-align: center;
    animation: staffDeletePopupIn 0.22s ease-out;
}

@keyframes staffDeletePopupIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.staff-delete-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 1px solid #bce9e1;
    border-radius: 50%;
    background: #e5f7f3;
    color: #07877e;
    font-size: 27px;
}

.staff-delete-modal h2 {
    margin: 0 0 12px;
    color: #203747;
    font-size: 23px;
    font-weight: 750;
}

.staff-delete-modal p {
    margin: 0 auto;
    max-width: 330px;
    color: #71818d;
    font-size: 13px;
    line-height: 1.8;
}

.staff-delete-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.staff-delete-actions button {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

#cancelStaffDelete {
    border: 1px solid #dce4e9;
    background: #ffffff;
    color: #526675;
}

#cancelStaffDelete:hover {
    background: #f3f6f8;
}

#confirmStaffDelete {
    border: 1px solid #07877e;
    background: #07877e;
    color: #ffffff;
}

#confirmStaffDelete:hover {
    border-color: #066f69;
    background: #066f69;
    transform: translateY(-1px);
}

.staff-delete-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}












/* =========================================
   STAFF LOGIN PAGE
   Updated to match Admin Login styling
   Admin Login remains unchanged
========================================= */

.staff-login-page {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #24445d;
    background: #eef5fb;
}

.staff-login-page *,
.staff-login-page *::before,
.staff-login-page *::after {
    box-sizing: border-box;
}


.staff-login-page .staff-login-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 100vh;
}

/* =========================================
   LEFT SIDE - CLINIC BACKGROUND
========================================= */

/*.staff-login-page .staff-login-visual {*/
/*    position: relative;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*    overflow: hidden;*/
/*    min-width: 0;*/
/*    min-height: 100vh;*/
/*    padding: 42px clamp(30px, 3.8vw, 58px);*/
/*    color: #103b59;*/

/*    background:*/
/*        linear-gradient(*/
/*            90deg,*/
/*            rgba(255, 255, 255, 0.16),*/
/*            rgba(255, 255, 255, 0.02)*/
/*        ),*/
/*        url("../images/staffloginbanner.png")*/
/*        center center / cover no-repeat;*/
/*}*/















.staff-login-page .staff-login-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-width: 0;
    min-height: 100vh;
    padding: 42px clamp(30px, 3.8vw, 58px);
    color: #103b59;
    
    
    
    
    
    
   

    
    
/*background-image:*/
/*    linear-gradient(*/
/*        90deg,*/
/*        rgba(255, 255, 255, 0.04),*/
/*        rgba(255, 255, 255, 0)*/
/*    ),*/
/*    url("../images/staffloginbanner.png");*/

/*background-repeat: no-repeat;*/
/*background-size: 100% 100%;*/
/*background-position: center center;*/


    background-image:
        linear-gradient(
         90deg,
          rgba(255, 255, 255, 0.10),
           rgba(255, 255, 255, 0)
       ),
       url("../images/newstaffloginbannerimage.png");

background-repeat: no-repeat;
background-size: cover;
background-position: 75% center;}


.staff-login-page .staff-clinic-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.staff-login-page .staff-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    color: #ffffff;
    background: #079b91;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(7, 155, 145, 0.16);
    font-size: 29px;
}

.staff-login-page .staff-brand-name {
    margin: 0;
    color: #103b59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.2;
}

.staff-login-page .staff-brand-subtitle {
    margin-top: 6px;
    color: #526e86;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.staff-login-page .staff-welcome-content {
    position: relative;
    z-index: 1;
    margin: 40px 0;
}

.staff-login-page .staff-eyebrow {
    margin: 0 0 23px;
    color: #079b91;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.staff-login-page .staff-welcome-content h1 {
    margin: 0;
    color: #103b59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 5.1vw, 76px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -1.8px;
}

.staff-login-page .staff-welcome-content h1 span {
    color: #079b91;
}

.staff-login-page .staff-welcome-description {
    margin: 22px 0 0;
    color: #526e86;
    font-size: 16px;
    line-height: 1.9;
}

.staff-login-page .staff-feature-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 8px;
}

.staff-login-page .staff-feature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.staff-login-page .staff-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    color: #079b91;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #ccefeb;
    border-radius: 17px;
    font-size: 21px;
}

.staff-login-page .staff-feature h3 {
    margin: 0 0 5px;
    color: #103b59;
    font-size: 13px;
    font-weight: 700;
}

.staff-login-page .staff-feature p {
    margin: 0;
    color: #526e86;
    font-size: 11px;
    line-height: 1.6;
}

/* =========================================
   RIGHT SIDE - LOGIN PANEL
========================================= */

.staff-login-page .staff-login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 100vh;
    padding: 35px clamp(22px, 4vw, 55px);

    background:
        radial-gradient(
            circle at top right,
            rgba(7, 155, 145, 0.08),
            transparent 38%
        ),
        linear-gradient(145deg, #eef5fb, #e7f0fa);
}

.staff-login-page .staff-login-card {
    width: 100%;
    max-width: 490px;
    padding: 39px 44px 32px;
    background: #ffffff;
    border: 1px solid rgba(220, 232, 242, 0.9);
    border-radius: 29px;
    box-shadow: 0 22px 65px rgba(16, 59, 89, 0.09);
}

.staff-login-page .staff-portal-label {
    display: block;
    width: fit-content;
    margin: 0 auto 17px;
    padding: 8px 13px;
    color: #087d77;
    background: rgba(7, 155, 145, 0.09);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
}

.staff-login-page .staff-login-card > h2 {
    margin: 0;
    color: #103b59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(29px, 3vw, 39px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.6px;
    text-align: center;
}

.staff-login-page .staff-login-card > h2 span {
    color: #079b91;
}

.staff-login-page .staff-doctor-name {
    margin: 14px 0 0;
    color: #079b91;
    font-size: 19px;
    font-weight: 650;
    text-align: center;
}

.staff-login-page .staff-login-description {
    margin: 10px 0 28px;
    color: #71869a;
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}

/* FORM FIELDS */

.staff-login-page .staff-form-group {
    margin-bottom: 22px;
}

.staff-login-page .staff-form-group > label {
    display: block;
    margin-bottom: 10px;
    color: #103b59;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.staff-login-page .staff-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 16px;
    background: #f5f9fd;
    border: 1px solid #dce8f2;
    border-radius: 13px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.staff-login-page .staff-input-wrapper > i {
    flex-shrink: 0;
    color: #718da5;
    font-size: 14px;
}

.staff-login-page .staff-input-wrapper:focus-within {
    background: #ffffff;
    border-color: #079b91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.09);
}

.staff-login-page .staff-input-wrapper input {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0;
    color: #24445d;
    background: transparent;
    border: none;
    outline: none;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
}

.staff-login-page .staff-input-wrapper input::placeholder {
    color: #879caf;
}

.staff-login-page .staff-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 36px;
    padding: 0;
    color: #71869a;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* REMEMBER ME AND FORGOT PASSWORD */

.staff-login-page .staff-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 25px;
    font-size: 11px;
}

.staff-login-page .staff-remember-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #71869a;
    cursor: pointer;
}

.staff-login-page .staff-remember-option input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #079b91;
    cursor: pointer;
}

.staff-login-page .staff-forgot-password {
    color: #087d77;
    font-weight: 700;
    text-decoration: none;
}

.staff-login-page .staff-forgot-password:hover {
    text-decoration: underline;
}

/* SIGN-IN BUTTON */

.staff-login-page .staff-signin-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: 100%;
    min-height: 56px;
    padding: 12px 18px;
    color: #ffffff;
    background: linear-gradient(110deg, #079b91, #087d77);
    border: none;
    border-radius: 13px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(8, 77, 91, 0.13);
    transition: transform 0.2s, box-shadow 0.2s;
}

.staff-login-page .staff-signin-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(8, 77, 91, 0.2);
}

.staff-login-page .staff-signin-button i {
    font-size: 13px;
}

/* AUTHORIZED ACCESS AND HELP */

.staff-login-page .staff-authorized-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.staff-login-page .staff-authorized-note > span {
    flex: 1;
    max-width: 55px;
    height: 1px;
    background: #dce8f2;
}

.staff-login-page .staff-authorized-note p {
    margin: 0;
    color: #71869a;
    font-size: 10px;
    text-align: center;
}

.staff-login-page .staff-help-text {
    margin: 15px 0 0;
    color: #71869a;
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
}







/* =========================================
   STAFF DASHBOARD
   Reuses Admin Dashboard styling
========================================= */

.dashboard-layout .topbar-right .admin-label {
    font-size: 11px;
}

.dashboard-layout .topbar-right .top-avatar {
    font-size: 18px;
}

.dashboard-layout .admin-dashboard-summary {
    margin-top: 0;
}

.dashboard-layout .admin-dashboard-title {
    margin: 0 0 20px;
    color: #103B59;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 25px;
    font-weight: 700;
}

.dashboard-layout .admin-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-layout .admin-dashboard-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid #E3EBF2;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(16, 59, 89, 0.04);
}

.dashboard-layout .admin-card-blue {
    background: linear-gradient(135deg, #EDF3FF, #E3EDFF);
    border-left: 5px solid #2868E8;
}

.dashboard-layout .admin-card-teal {
    background: linear-gradient(135deg, #E9FAF6, #DDF6F0);
    border-left: 5px solid #079B91;
}

.dashboard-layout .admin-card-purple {
    background: linear-gradient(135deg, #F5EFFF, #EEE5FF);
    border-left: 5px solid #8650E8;
}

.dashboard-layout .admin-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    color: #2868E8;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    font-size: 25px;
}

.dashboard-layout .admin-card-teal .admin-card-icon {
    color: #079B91;
}

.dashboard-layout .admin-card-purple .admin-card-icon {
    color: #8650E8;
}

.dashboard-layout .admin-card-content {
    min-width: 0;
}

.dashboard-layout .admin-card-value {
    margin: -3px 0 4px;
    color: #103B59;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

.dashboard-layout .admin-card-content h3 {
    margin: 0 0 8px;
    color: #103B59;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-layout .admin-card-content p {
    margin: 0;
    color: #71869A;
    font-size: 11px;
    line-height: 1.7;
}




.staff-password-masked {
    -webkit-text-security: disc;
    text-security: disc;
}

/* Staff login - center welcome text in the space below the logo */
.staff-login-page .staff-login-visual {
    justify-content: flex-start;
}

.staff-login-page .staff-welcome-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding-bottom: 60px; /* nudges the text slightly above true center */
}


/* Staff login - make description text clearly visible */
.staff-login-page .staff-welcome-description {
    color: #103b59;      /* dark navy, matches the heading */
    font-weight: 600;
    font-size: 17px;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8);
}












/* =========================================
   BOOK WALK-IN PATIENT PAGE
   Matches Doctor Availability Styling
========================================= */

.walkin-booking-page .walkin-dashboard-body {
    padding: 30px 28px;
}

/* Clinic banner */
.walkin-booking-page .walkin-page-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 220px;
    padding: 32px;
    margin-bottom: 26px;
    overflow: hidden;
    border-radius: 15px;
    background:
        linear-gradient(
            90deg,
            rgba(7, 43, 67, 0.94) 0%,
            rgba(16, 83, 103, 0.78) 55%,
            rgba(16, 83, 103, 0.20) 100%
        ),
        url("../images/bookpatientbannerimage.png")
        center / cover no-repeat;
    box-shadow: 0 8px 24px rgba(16, 59, 89, 0.15);
}

.walkin-booking-page .walkin-banner-content {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.walkin-booking-page .walkin-eyebrow {
    margin-bottom: 10px;
    color: #70e1d3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.walkin-booking-page .walkin-page-banner h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
}

.walkin-booking-page .walkin-page-banner p {
    max-width: 510px;
    margin: 0;
    color: #e0eff5;
    font-size: 14px;
    line-height: 1.7;
}

/* Patient details card */
.walkin-booking-page .walkin-patient-card {
    width: 100%;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e0eaf0;
    border-radius: 14px;
    box-shadow: 0 5px 22px rgba(16, 59, 89, 0.07);
}

/* Section heading */
.walkin-booking-page .walkin-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e7eef3;
}

.walkin-booking-page .walkin-heading-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #079b91;
    background: #d8f5f1;
    border-radius: 14px;
    font-size: 25px;
}

.walkin-booking-page .walkin-heading-title {
    min-width: 0;
}

.walkin-booking-page .walkin-heading-title h2 {
    margin: 0 0 6px;
    color: #103b59;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
}

.walkin-booking-page .walkin-heading-title p {
    margin: 0;
    color: #687f91;
    font-size: 13px;
    line-height: 1.6;
}

/* Patient form grid */
.walkin-booking-page .walkin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 22px;
}

.walkin-booking-page .walkin-field {
    min-width: 0;
}

.walkin-booking-page .walkin-field label {
    display: block;
    margin-bottom: 9px;
    color: #344d5e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.35px;
}

.walkin-booking-page .walkin-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 13px;
    background: #f9fbfd;
    border: 1px solid #d8e3eb;
    border-radius: 8px;
    transition: background 0.2s, border-color 0.2s,
                box-shadow 0.2s;
}

.walkin-booking-page .walkin-input-wrap > i {
    flex: 0 0 auto;
    color: #71899a;
    font-size: 17px;
}

.walkin-booking-page .walkin-input-wrap input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 0;
    color: #243b4b;
    background: transparent;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 14px;
}

.walkin-booking-page .walkin-input-wrap input::placeholder {
    color: #91a2af;
}

.walkin-booking-page .walkin-input-wrap:focus-within {
    background: #ffffff;
    border-color: #079b91;
    box-shadow: 0 0 0 4px rgba(7, 155, 145, 0.11);
}

/* Slot information */
.walkin-booking-page .walkin-slot-notice {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    padding: 15px 17px;
    background: #f0f8f8;
    border: 1px solid #d8eeeb;
    border-radius: 9px;
}

.walkin-booking-page .walkin-slot-notice > i {
    flex: 0 0 auto;
    color: #079b91;
    font-size: 20px;
}

.walkin-booking-page .walkin-notice-divider {
    align-self: stretch;
    width: 1px;
    background: #c9e3df;
}

.walkin-booking-page .walkin-slot-notice p {
    margin: 0;
    color: #526d7b;
    font-size: 13px;
    line-height: 1.6;
}



.walkin-booking-page .walkin-book-new-button,
.walkin-booking-page .walkin-book-manual-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-height: 40px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}




.walkin-booking-page .walkin-book-new-button {
    background: #079b91;
}


.walkin-booking-page .walkin-book-new-button:hover {
    background: #067e76;
    transform: translateY(-1px);
}

.walkin-booking-page .walkin-book-manual-button {
    background: #103b59;
}

.walkin-booking-page .walkin-book-manual-button:hover {
    background: #082b43;
    transform: translateY(-1px);
}



.walkin-booking-page #bookNewSlotBtn,
.walkin-booking-page #bookManualSlotBtn {
    margin-top: 18px;
    margin-right: 8px;
}



/* Form feedback */
.walkin-booking-page .walkin-message {
    display: none;
    margin-top: 20px;
    padding: 13px 16px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.6;
}

.walkin-booking-page .walkin-message:not(:empty) {
    display: block;
}




/* Book Walk-in Patient - View Button */

.walkin-booking-page .walkin-section-heading {
    position: relative;
}

.walkin-booking-page .walkin-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 81px;
    min-height: 43px;
    margin-left: auto;
    padding: 11px 22px;
    color: #ffffff;
    background: #103B59;
    border: 1px solid #103B59;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;
}

.walkin-booking-page .walkin-view-btn:hover {
    color: #ffffff;
    background: #079B91;
    border-color: #079B91;
    transform: translateY(-1px);
}





































/* =====================================================
   PATIENT RECORDS PAGE
   Matches Doctor Availability page design
   ===================================================== */

.view-patients-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 4px 0 28px;
    color: #103B59;
    box-sizing: border-box;
}

.view-patients-page *,
.view-patients-page *::before,
.view-patients-page *::after {
    box-sizing: border-box;
}

/* ---------- Banner ---------- */

.view-patients-page .patients-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 155px;
    padding: 28px 32px;
    margin: 0 0 22px;
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            rgba(0, 65, 78, 0.97) 0%,
            rgba(0, 93, 106, 0.83) 52%,
            rgba(0, 93, 106, 0.18) 100%
        ),
        url('../images/patientviewbannerimage.png')
        center / cover no-repeat;
    box-shadow: none;
}

.view-patients-page .patients-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 28px;
}

.view-patients-page .patients-banner-icon {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 24px;
    background: #fff;
    color: #079B91;
    font-size: 34px;
}

.view-patients-page .patients-banner h1 {
    margin: 0 0 9px;
    color: #fff;
    font-size: 31px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.4px;
}

.view-patients-page .patients-banner p {
    max-width: 600px;
    margin: 0;
    color: #eef9fb;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- White records panel ---------- */

.view-patients-page .patients-records-panel {
    width: 100%;
    overflow: hidden;
    border: 1px solid #DFEAF5;
    border-radius: 20px;
    background: #fff;
    box-shadow: none;
}

/* ---------- Total patients header ---------- */

.view-patients-page .patients-records-header {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 38px;
    border: none;
}

.view-patients-page .patients-total {
    display: flex;
    align-items: center;
    gap: 19px;
}

.view-patients-page .patients-total-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 20px;
    background: #C9F2EF;
    color: #079B91;
    font-size: 28px;
}

.view-patients-page .patients-total-label {
    margin: 0 0 4px;
    color: #174568;
    font-size: 14px;
    font-weight: 400;
}

.view-patients-page .patients-total-number {
    color: #079B91;
    font-size: 34px;
    font-weight: 750;
    line-height: 1.1;
}

.view-patients-page .patients-back-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 19px;
    border: 1px solid #079B91;
    border-radius: 14px;
    background: #fff;
    color: #079B91;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.view-patients-page .patients-back-btn:hover {
    background: #079B91;
    color: #fff;
}

/* ---------- Search toolbar ---------- */

.view-patients-page .patients-toolbar {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 15px 28px;
    border-top: 1px solid #E6EEF5;
    border-bottom: 1px solid #E6EEF5;
}

.view-patients-page .patients-search-box {
    width: min(100%, 470px);
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
    border: 1px solid #D6E4EF;
    border-radius: 10px;
    background: #fff;
    color: #71869A;
}

.view-patients-page .patients-search-box:focus-within {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, .09);
}

.view-patients-page .patients-search-box input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #103B59;
    font: inherit;
    font-size: 13px;
}

.view-patients-page .patients-search-box input::placeholder {
    color: #8B9DAD;
}

.view-patients-page .patients-search-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #55738A;
    font-size: 13px;
}

/* ---------- Table grid (header + rows share the same columns) ---------- */

.view-patients-page .patients-table-header,
.view-patients-page .patients-record-card {
    display: grid;
    grid-template-columns:
        60px
        minmax(0, 1.3fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 0.9fr)
        130px;
    column-gap: 0;
    padding: 0;
    align-items: stretch;
}

/* ---------- Table headings ---------- */

.view-patients-page .patients-table-header {
    min-height: 54px;
    border: none;
    background: #F2F7FC;
    color: #214B70;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .3px;
}

.view-patients-page .patients-table-header > div {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-left: 1px solid #E0EAF3;
}

.view-patients-page .patients-table-header > div:first-child {
    justify-content: center;
    border-left: 0;
}

.view-patients-page .patients-table-header > div:last-child {
    justify-content: center;
}

.view-patients-page .patients-table-header i {
    margin-right: 5px;
    color: #244F76;
    font-size: 13px;
}

.view-patients-page .patients-col-number {
    color: #214B70;
}

.view-patients-page .patients-col-actions {
    text-align: center;
}

/* ---------- Patient rows ---------- */

.view-patients-page .patients-record-card {
    min-height: 64px;
    border: none;
    border-bottom: 1px solid #DCE8F5;
    background: #fff;
    color: #174568;
    font-size: 13px;
    transition: background .2s ease;
}

.view-patients-page .patients-record-card:last-child {
    border-bottom: none;
}

.view-patients-page .patients-record-card:nth-child(even) {
    background: #fff;
}

.view-patients-page .patients-record-card:hover {
    background: #F8FBFE;
}

.view-patients-page .patients-record-card[hidden] {
    display: none !important;
}

/* Number circle (first column, no vertical line) */
.view-patients-page .patients-record-number {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E0F6F4;
    color: #079B91;
    font-size: 15px;
    font-weight: 700;
}

/* Data cells with vertical column lines */
.view-patients-page .patients-record-card > .patients-data,
.view-patients-page .patients-record-card > .patients-actions {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 10px 14px;
    border-left: 1px solid #E0EAF3;
}

.view-patients-page .patients-data {
    min-width: 0;
    overflow-wrap: anywhere;
}

.view-patients-page .patients-name strong {
    color: #103B59;
    font-size: 13px;
    font-weight: 650;
}

.view-patients-page .patients-location i {
    margin-right: 5px;
    flex-shrink: 0;
    color: #1684B5;
}

.view-patients-page .patients-mobile-label {
    display: none;
}

/* ---------- Action buttons ---------- */

.view-patients-page .patients-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.view-patients-page .patients-action-btn {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.view-patients-page .patients-view-btn {
    border-color: #D9ECFC;
    background: #E4F2FF;
    color: #1684D5;
}

.view-patients-page .patients-edit-btn {
    border-color: #D5F0EB;
    background: #DDF5F0;
    color: #079B91;
}

.view-patients-page .patients-delete-btn {
    border-color: #F8DCE4;
    background: #FFE8EF;
    color: #E33E62;
}

.view-patients-page .patients-view-btn:hover {
    background: #1684D5;
    color: #fff;
}

.view-patients-page .patients-edit-btn:hover {
    background: #079B91;
    color: #fff;
}

.view-patients-page .patients-delete-btn:hover {
    background: #E33E62;
    color: #fff;
}

/* ---------- Empty state ---------- */

.view-patients-page .patients-empty {
    padding: 42px 20px;
    text-align: center;
    color: #71869A;
}

.view-patients-page .patients-empty[hidden] {
    display: none !important;
}

.view-patients-page .patients-empty > i {
    display: block;
    margin-bottom: 12px;
    color: #079B91;
    font-size: 36px;
}

.view-patients-page .patients-empty h5 {
    margin-bottom: 8px;
    color: #103B59;
    font-size: 17px;
    font-weight: 700;
}

.view-patients-page .patients-empty p {
    margin: 0;
    font-size: 13px;
}

/* ---------- Footer and pagination ---------- */

.view-patients-page .patients-records-footer {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 15px 28px;
    border-top: 1px solid #E2ECF4;
    color: #71869A;
    font-size: 12px;
}

.view-patients-page .patients-pagination {
    display: flex;
    align-items: center;
    gap: 9px;
}

.view-patients-page .patients-pagination button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #D6E4EF;
    border-radius: 9px;
    background: #fff;
    color: #214B70;
    font: inherit;
    cursor: pointer;
}

.view-patients-page .patients-pagination button:hover:not(:disabled) {
    border-color: #079B91;
    color: #079B91;
}

.view-patients-page .patients-pagination button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.view-patients-page .patients-pagination > span {
    min-width: 48px;
    color: #103B59;
    font-weight: 700;
    text-align: center;
}
















/* =========================================
   PATIENT RECORDS - TABLE INSIDE PADDED CARD
   (match Doctor Availability layout)
========================================= */

/* White card with padding, so the table sits inset */
.view-patients-page .patients-records-panel {
    padding: 28px;
    overflow: visible;
}

/* "Total Patients" row */
.view-patients-page .patients-records-header {
    min-height: 0;
    padding: 0 10px;
    margin-bottom: 22px;
}

/* Search row: no full-width lines, just spacing */
.view-patients-page .patients-toolbar {
    min-height: 0;
    padding: 0 0 18px;
    border-top: 0;
    border-bottom: 0;
}

/* Table header: bordered, rounded top corners */
.view-patients-page .patients-table-header {
    min-height: 44px;
    border: 1px solid #e3ebf5;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

/* Table body: bordered, rounded bottom corners */
.view-patients-page #patientsTableBody {
    border: 1px solid #e3ebf5;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    background: #fff;
}

/* Last visible row has no extra line above the border */
.view-patients-page #patientsTableBody .patients-record-card:last-of-type {
    border-bottom: 0;
}











/* ==========================================
   PATIENT DETAILS POPUP (complete, compact)
   ========================================== */

.patient-details-modal[hidden] {
    display: none !important;
}

.patient-details-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: inherit;
}

.patient-details-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 35, 52, .70);
    backdrop-filter: blur(5px);
}

.patient-details-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: min(100%, 1000px);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

/* ---------- Left teal branding panel ---------- */

.patient-details-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 45px 22px 24px;
    text-align: center;
    color: #fff;
    background: linear-gradient(155deg, #104766, #075c6a 55%, #078b83);
}

.patient-details-sidebar::before,
.patient-details-sidebar::after {
    position: absolute;
    content: "";
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    pointer-events: none;
}

.patient-details-sidebar::before {
    top: -100px;
    left: -110px;
}

.patient-details-sidebar::after {
    right: -150px;
    bottom: -160px;
}

.patient-details-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
}

.patient-details-close:hover {
    background: rgba(255,255,255,.25);
}

.patient-details-brand-icon {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 23px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 17px;
    background: rgba(255,255,255,.12);
    font-size: 28px;
}

.patient-details-sidebar h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: 23px;
    font-weight: 750;
}

.patient-details-subtitle {
    position: relative;
    z-index: 1;
    margin: 7px 0 25px;
    color: #d5edf0;
    font-size: 13px;
}

.patient-details-profile-icon {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: #dcecff;
    color: #2878c8;
    font-size: 29px;
    font-weight: 750;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 5px 16px rgba(0,0,0,.12);
}

.patient-details-sidebar h3 {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.patient-details-clinic {
    position: relative;
    z-index: 1;
    margin: 25px 0 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.patient-details-clinic-small {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #d5edf0;
    font-size: 12px;
}

/* ---------- Right information panel (no scrollbar) ---------- */

.patient-details-main {
    min-width: 0;
    padding: 22px 26px 18px;
    overflow: visible;
    background: #fff;
}

.patient-details-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e4edf4;
}

.patient-details-heading h2 {
    margin: 0 0 5px;
    color: #174568;
    font-size: 21px;
    font-weight: 750;
}

.patient-details-heading p {
    margin: 0;
    color: #7c8fa2;
    font-size: 13px;
}

.patient-details-record-badge {
    flex-shrink: 0;
    padding: 10px 13px;
    border: 1px solid #c6efea;
    border-radius: 10px;
    background: #ecfaf8;
    color: #078b83;
    font-size: 12px;
    font-weight: 700;
}

.patient-details-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 1px 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin: 16px 0;
    padding: 12px 15px;
    border: 1px solid #d3eeea;
    border-radius: 16px;
    background: linear-gradient(110deg, #f0faf8, #f7fbfd);
}

.patient-detail-summary-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #d5f3ef;
    color: #079b91;
    font-size: 19px;
}

.patient-details-summary small,
.patient-detail-card small {
    display: block;
    margin-bottom: 4px;
    color: #788ca1;
    font-size: 11px;
}

.patient-details-summary strong,
.patient-detail-card strong {
    display: block;
    color: #174568;
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.patient-details-summary-divider {
    width: 1px;
    height: 42px;
    background: #d4e5e8;
}

.patient-details-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: #174568;
    font-size: 15px;
    font-weight: 750;
}

.patient-details-section-title i {
    color: #079b91;
    font-size: 20px;
}

/* 3 columns = only 2 rows of cards */
.patient-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.patient-detail-card {
    min-width: 0;
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid #e0eaf3;
    border-radius: 15px;
    background: #fff;
}

.patient-detail-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 19px;
}

.patient-detail-icon.teal {
    background: #e4f5f5;
    color: #168ca0;
}

.patient-detail-icon.blue {
    background: #e5f3ff;
    color: #1684d5;
}

.patient-detail-icon.amber {
    background: #fff2df;
    color: #d98713;
}

.patient-detail-icon.purple {
    background: #eeebff;
    color: #8165e8;
}

.patient-detail-icon.green {
    background: #e2f7ed;
    color: #168d63;
}

.patient-details-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid #e5edf3;
}

.patient-details-footer span {
    color: #71869a;
    font-size: 12px;
}

.patient-details-footer span i {
    margin-right: 5px;
    color: #079b91;
}

.patient-details-footer button {
    padding: 8px 16px;
    border: 1px solid #d6e4ef;
    border-radius: 9px;
    background: #fff;
    color: #174568;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.patient-details-footer button:hover {
    border-color: #079b91;
    color: #079b91;
}
































/* =========================================
   EDIT PATIENT RECORD PAGE
========================================= */

.edit-patient-page {
    padding-top: 10px !important;
    color: #103B59;
}

/* Page banner */
.patient-edit-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 23px;
    min-height: 145px;
    padding: 25px 32px;
    margin-bottom: 18px;
    overflow: hidden;
    background: linear-gradient(110deg, #ffffff 0%, #effbf9 55%, #d0f1ed 100%);
    border: 1px solid #d5eceb;
    border-radius: 18px;
}

.patient-edit-banner-icon {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #079B91;
    background: #ddf7f3;
    border-radius: 20px;
    font-size: 35px;
}

.patient-edit-tag {
    display: inline-block;
    padding: 6px 11px;
    margin-bottom: 7px;
    color: #07877F;
    background: #d9f6f1;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}

.patient-edit-banner h1 {
    margin: 0 0 7px;
    color: #103B59;
    font-size: 29px;
    font-weight: 750;
}

.patient-edit-banner h1 span {
    color: #079B91;
}

.patient-edit-banner p {
    margin: 0;
    color: #71869A;
    font-size: 13px;
}

.patient-edit-banner-art {
    position: absolute;
    right: 30px;
    bottom: -25px;
    color: rgba(7, 155, 145, .13);
    font-size: 105px;
    transform: rotate(-12deg);
    pointer-events: none;
}

/* Main two-column layout */
.patient-edit-layout {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.65fr);
    gap: 18px;
    align-items: stretch;
}

/* Left calendar panel */
.patient-edit-date-panel,
.patient-edit-details-panel {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #dfeaf2;
    border-radius: 17px;
    box-shadow: 0 5px 22px rgba(16, 59, 89, .035);
}

.patient-edit-date-panel {
    padding: 24px;
}

.patient-edit-panel-heading,
.patient-edit-details-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.patient-edit-section-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #079B91;
    background: #def7f3;
    border-radius: 14px;
    font-size: 24px;
}

.patient-edit-panel-heading h2,
.patient-edit-details-heading h2 {
    margin: 0 0 5px;
    color: #103B59;
    font-size: 17px;
    font-weight: 750;
}

.patient-edit-panel-heading p,
.patient-edit-details-heading p {
    margin: 0;
    color: #8295A7;
    font-size: 11px;
}

/* Record ID */
.patient-edit-record-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    margin-bottom: 23px;
    background: #f0fbf9;
    border: 1px solid #d0efea;
    border-radius: 12px;
}

.patient-edit-record-number span {
    color: #71869A;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.patient-edit-record-number strong {
    color: #079B91;
    font-size: 25px;
    font-weight: 800;
}

/* Field labels */
.patient-edit-label,
.patient-edit-field label {
    display: block;
    margin-bottom: 10px;
    color: #103B59;
    font-size: 13px;
    font-weight: 700;
}

.patient-edit-label span,
.patient-edit-field label span {
    color: #e05252;
}

/* Calendar */
.patient-edit-calendar {
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e2edf4;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(16, 59, 89, .025);
}

.patient-edit-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
}

.patient-edit-calendar-header strong {
    color: #103B59;
    font-size: 14px;
    font-weight: 750;
    text-align: center;
}

.patient-edit-calendar-header button {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #079B91;
    background: #e0f7f3;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.patient-edit-calendar-header button:hover {
    color: #ffffff;
    background: #079B91;
}

.patient-edit-weekdays,
.patient-edit-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    text-align: center;
}

.patient-edit-weekdays {
    margin-bottom: 7px;
}

.patient-edit-weekdays span {
    padding: 5px 0;
    color: #71869A;
    font-size: 10px;
    font-weight: 700;
}

.patient-edit-day {
    min-width: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #24445D;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.patient-edit-day:hover {
    color: #07877F;
    background: #e7f8f5;
    border-color: #c8ece6;
}

.patient-edit-day.is-selected {
    color: #ffffff;
    background: #079B91;
    border-color: #079B91;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(7, 155, 145, .17);
}

.patient-edit-day.is-empty {
    pointer-events: none;
}

/* Selected date summary */
.patient-edit-selected-date {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 10px;
    margin-top: 14px;
    background: #f0faf8;
    border: 1px solid #e0f1ee;
    border-radius: 10px;
}

.patient-edit-selected-date > i {
    color: #079B91;
    font-size: 21px;
}

.patient-edit-selected-date small,
.patient-edit-selected-date strong {
    display: block;
}

.patient-edit-selected-date small {
    margin-bottom: 4px;
    color: #71869A;
    font-size: 10px;
}

.patient-edit-selected-date strong {
    color: #103B59;
    font-size: 12px;
}

.patient-edit-date-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    color: #71869A;
    font-size: 11px;
    line-height: 1.6;
}

.patient-edit-date-note i {
    margin-top: 1px;
    color: #079B91;
    font-size: 15px;
}

/* Right patient information panel */
.patient-edit-details-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.patient-edit-details-heading {
    padding: 24px 26px 0;
    margin-bottom: 27px;
}

.patient-edit-heading-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #0aa99b, #07877f);
    border-radius: 50%;
    font-size: 22px;
    box-shadow: 0 5px 12px rgba(7, 155, 145, .15);
}

.patient-edit-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding: 0 30px 28px;
}

.patient-edit-field {
    min-width: 0;
}

.patient-edit-input-wrap {
    min-height: 55px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7e5ef;
    border-radius: 11px;
    transition: border-color .2s, box-shadow .2s;
}

.patient-edit-input-wrap:focus-within {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, .10);
}

.patient-edit-input-wrap > span {
    width: 58px;
    min-height: 53px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #079B91;
    background: #effaf8;
    border-right: 1px solid #e0efed;
    font-size: 21px;
}

.patient-edit-input-wrap input {
    width: 100%;
    min-width: 0;
    min-height: 53px;
    padding: 12px 15px;
    color: #103B59;
    background: transparent;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

.patient-edit-input-wrap input:focus {
    outline: none;
    box-shadow: none;
}

.patient-edit-input-wrap input::placeholder {
    color: #9aabbb;
    font-weight: 400;
}

.patient-edit-field > small {
    display: block;
    margin-top: 6px;
    color: #8295A7;
    font-size: 10px;
}

/* Cancel and update buttons */
.patient-edit-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    padding: 24px 26px;
    margin-top: auto;
    border-top: 1px solid #e7eef4;
}

.patient-edit-cancel-btn,
.patient-edit-update-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.patient-edit-cancel-btn {
    color: #526d83;
    background: #ffffff;
    border: 1px solid #c7d8e5;
}

.patient-edit-cancel-btn:hover {
    color: #103B59;
    background: #f3f7fa;
    border-color: #9fb7c9;
}

.patient-edit-update-btn {
    color: #ffffff;
    background: linear-gradient(105deg, #0aa99b, #07877f);
    border: 1px solid #079B91;
    box-shadow: 0 5px 13px rgba(7, 155, 145, .12);
}

.patient-edit-update-btn:hover {
    color: #ffffff;
    background: #067d75;
    transform: translateY(-1px);
    box-shadow: 0 7px 17px rgba(7, 155, 145, .2);
}








/*today css*/




/* ==========================================
   PATIENT LOGIN PAGE
   ========================================== */

.patient-login-page {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #103B59;
    background: #EEF5FB;
}

.patient-login-page * {
    box-sizing: border-box;
}

.patient-login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* LEFT PANEL - BACKGROUND IMAGE */

.patient-login-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 46px 7.5%;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.08) 60%,
            rgba(255, 255, 255, 0.02) 100%
        ),
        url("../images/patientloginbannerimage.png")
        center center / cover no-repeat;
}

/* CLINIC BRAND */

.patient-clinic-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 17px;
}

.patient-brand-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #079B91;
    border-radius: 17px;
    font-size: 29px;
    box-shadow: 0 8px 22px rgba(7, 155, 145, 0.18);
}

.patient-brand-name {
    color: #103B59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.2;
}

.patient-brand-subtitle {
    margin-top: 6px;
    color: #536A80;
    font-size: 9px;
    letter-spacing: 2.5px;
}

/* LEFT CONTENT */

.patient-welcome-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 530px;
    margin: auto 0;
    padding: 45px 0;
}

.patient-title-line {
    width: 55px;
    height: 3px;
    margin-bottom: 25px;
    background: #079B91;
}

.patient-welcome-content h1 {
    margin: 0 0 20px;
    color: #103B59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4.1vw, 62px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.patient-welcome-content h1 span {
    color: #079B91;
}

.patient-welcome-description {
    max-width: 390px;
    margin: 0;
    color: #536A80;
    font-size: 15px;
    line-height: 1.8;
}

/* FEATURE ITEMS */

.patient-feature-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.patient-feature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.patient-feature-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #079B91;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid #C7EAE6;
    border-radius: 50%;
    font-size: 19px;
}

.patient-feature h3 {
    margin: 0 0 5px;
    color: #103B59;
    font-size: 13px;
    font-weight: 700;
}

.patient-feature p {
    margin: 0;
    color: #536A80;
    font-size: 11px;
    line-height: 1.5;
}

/* RIGHT PANEL */

.patient-login-form-side {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    background: linear-gradient(145deg, #EDF5FC, #E5F3F3);
}

/* LOGIN CARD */

.patient-login-card {
    width: 100%;
    max-width: 490px;
    padding: 42px 38px 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(16, 59, 89, 0.09);
}

.patient-portal-label {
    margin: 0 0 14px;
    color: #079B91;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.patient-login-card h2 {
    margin: 0 0 4px;
    color: #103B59;
    /*font-family: Georgia, "Times New Roman", serif;*/
    font-size: 29px;
    font-weight: 500;
    text-align: center;
}

.patient-login-heading {
    margin: 0 0 14px;
    color: #079B91;
    /*font-family: Georgia, "Times New Roman", serif;*/
    font-size: 19px;
    font-weight: 650;
    text-align: center;
}

.patient-login-description {
    max-width: 360px;
    margin: 0 auto 32px;
    color: #61758B;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
}

/* INPUT FIELDS */

.patient-form-group {
    margin-bottom: 23px;
}

.patient-form-group label {
    display: block;
    margin-bottom: 10px;
    color: #082B43;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.patient-input-wrapper {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 17px;
    background: #F4F8FC;
    border: 1px solid #DCE8F2;
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.patient-input-wrapper:focus-within {
    background: #FFFFFF;
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.09);
}

/*.patient-input-wrapper > i {*/
/*    flex-shrink: 0;*/
/*    color: #607994;*/
/*    font-size: 17px;*/
/*}*/



.patient-input-wrapper > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    min-width: 20px;
    color: #607994;
    font-size: 17px;
    line-height: 1;
}

.patient-input-wrapper input {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #103B59;
    font-family: inherit;
    font-size: 13px;
}

.patient-input-wrapper input::placeholder {
    color: #8A9BB0;
}

/* LOGIN BUTTON */

.patient-login-button {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(100deg, #079B91, #07877F);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(7, 155, 145, 0.17);
    transition: transform 0.2s, box-shadow 0.2s;
}

.patient-login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 25px rgba(7, 155, 145, 0.24);
}

/* REGISTRATION SECTION */

.patient-register-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: #61758B;
    font-size: 12px;
}

.patient-register-divider::before,
.patient-register-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #DCE7F1;
}

.patient-register-button {
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid #079B91;
    border-radius: 14px;
    background: #FFFFFF;
    color: #079B91;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}

.patient-register-button:hover {
    background: #079B91;
    color: #FFFFFF;
}

/* FOOTER */

.patient-authorized-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.patient-authorized-note span {
    width: 35px;
    height: 1px;
    background: #DCE7F1;
}

.patient-authorized-note p {
    margin: 0;
    color: #71869A;
    font-size: 11px;
}

.patient-help-text {
    margin: 22px 0 0;
    color: #24445D;
    text-align: center;
    font-size: 11px;
     font-weight: 400;
    line-height: 1.7;
}

/* =========================================
   PATIENT LOGIN FOOTER LINKS + TERMS & CONDITIONS PAGE
   (reuses .patient-login-* styles above; only additions here)
========================================= */

.patient-help-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
}

.patient-help-link {
    color: #079B91;
    font-weight: 600;
    text-decoration: none;
}

.patient-help-link:hover,
.patient-help-link:focus {
    text-decoration: underline;
}

.patient-help-separator {
    color: #9AAFC3;
}

.patient-login-form-side.patient-terms-page {
    align-items: flex-start;
}

.patient-login-card.patient-terms-card {
    max-width: 860px;
    padding: 42px 52px 32px;
}

.patient-terms-brand {
    justify-content: center;
    margin-bottom: 28px;
}

.patient-terms-line {
    margin: 0 auto 30px;
}

.patient-terms-section {
    margin-bottom: 24px;
}

.patient-terms-section h4 {
    margin: 0 0 8px;
    color: #103B59;
    font-size: 16px;
    font-weight: 650;
}

.patient-terms-section p {
    margin: 0 0 6px;
    color: #536A80;
    font-size: 14px;
    line-height: 1.75;
}

.patient-terms-operator {
    margin-top: 30px;
    padding: 18px 20px;
    text-align: center;
    background: #E7F6F4;
    border: 1px solid #B5E3DE;
    border-radius: 16px;
}

.patient-terms-operator span {
    display: block;
    margin-bottom: 4px;
    color: #536A80;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.patient-terms-operator strong {
    color: #07756E;
    font-size: 16px;
    letter-spacing: 0.5px;
}

@media (max-width: 991px) {
    .patient-login-card.patient-terms-card {
        padding: 38px 36px 30px;
    }
}

@media (max-width: 767px) {
    .patient-login-card.patient-terms-card {
        max-width: 640px;
        padding: 32px 24px 26px;
    }
}

@media (max-width: 480px) {
    .patient-login-form-side.patient-terms-page {
        padding: 20px 14px;
    }

    .patient-login-card.patient-terms-card {
        padding: 28px 18px 24px;
        border-radius: 20px;
    }

    .patient-terms-brand {
        gap: 12px;
        margin-bottom: 22px;
    }

    .patient-terms-brand .patient-brand-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
        border-radius: 14px;
    }

    .patient-terms-section h4 {
        font-size: 15px;
    }

    .patient-terms-section p {
        font-size: 13px;
    }
}















.patient-profile-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 190px;
    padding: 25px 34px;
    margin-bottom: 25px;

    overflow: hidden;
    border-radius: 15px;

    background-image:
        linear-gradient(
            90deg,
            rgba(7, 65, 88, 0.95) 0%,
            rgba(7, 112, 124, 0.78) 48%,
            rgba(7, 112, 124, 0.20) 100%
        ),
        url("../images/patientprofilebannerimage.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: 0 10px 28px rgba(16, 59, 89, 0.15);
}











.patient-profile-banner-content {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 620px;
}


.patient-profile-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #70E1D3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}




.patient-profile-banner h1 {
    margin: 0 0 10px;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 750;
}





.patient-profile-banner p {
    max-width: 560px;
    margin: 0;
    color: #E0EFF5;
    font-size: 14px;
    line-height: 1.8;
}

.patient-profile-banner-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 7px 12px;
    color: #103B59;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    font-size: 11px;
}

.patient-profile-banner-note i {
    color: #079B91;
}




















/* =========================================
   PATIENT PROFILE - ID CARD ILLUSTRATION
========================================= */

.patient-profile-illustration {
    position: relative;
    flex: 0 0 260px;
    width: 260px;
    height: 200px;
    margin: 0 10px 0 15px;
    z-index: 2;
}

/* Decorative dots */
.patient-illustration-dots {
    position: absolute;
    top: 10px;
    left: 0;
    width: 55px;
    height: 55px;
    opacity: 0.9;
    background-image: radial-gradient(
        #48DDD8 2px,
        transparent 2.5px
    );
    background-size: 15px 15px;
}

/* Clipboard / ID card */
.patient-id-card {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 150px;
    height: 160px;
    padding-top: 32px;
    background: linear-gradient(145deg, #FFFFFF, #E6F5FC);
    border: 5px solid rgba(255, 255, 255, 0.95);
    border-radius: 17px;
    box-shadow: 0 15px 30px rgba(0, 38, 67, 0.25);
}

/* Clipboard clip */
.patient-id-clip {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 24px;
    background: #075477;
    border: 3px solid #C8E9F5;
    border-radius: 9px 9px 6px 6px;
    z-index: 2;
}

.patient-id-clip::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 10px;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    border: 6px solid #075477;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

/* Person icon */
.patient-id-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: #D5EDF8;
}

.patient-id-avatar svg {
    display: block;
    width: 50px;
    height: 50px;
}

/* ID information lines */
.patient-id-line {
    height: 6px;
    margin-left: 15px;
    margin-bottom: 7px;
    border-radius: 10px;
    background: #B6E1F4;
}

.patient-id-line-long {
    width: 90px;
}

.patient-id-line-short {
    width: 68px;
}

.patient-id-line-small {
    width: 42px;
    height: 4px;
    opacity: 0.65;
}





.patient-verified-shield {
    position: absolute;
    z-index: 3;
    width: 110px;
    height: 100px;
    right: 39px;
    bottom: 15px;

    filter: drop-shadow(0 8px 10px rgba(0, 47, 66, 0.28));
}

.patient-verified-shield svg {
    display: block;
    width: 100%;
    height: 100%;
}




/* Align Patient Profile buttons to the left */
.patient-profile-page .availability-actions {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    text-align: left;
}


















/* =========================================
   PATIENT BOOK APPOINTMENT PAGE
========================================= */

.booking-intro {
    margin-bottom: 26px;
}

.booking-intro h1 {
    color: #103B59;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 750;
    margin: 8px 0;
}

.booking-intro p {
    color: #6F879C;
    margin: 0;
    line-height: 1.7;
}

.booking-panel {
    background: #fff;
    border: 1px solid #e7edf3;
    border-radius: 20px;
    padding: clamp(18px, 3vw, 30px);
    box-shadow: 0 8px 28px rgba(16, 59, 89, 0.06);
}

.booking-panel-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 25px;
}

.booking-heading-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #e8f7f5;
    color: #079B91;
    font-size: 23px;
}

.booking-panel-heading h2 {
    font-size: 21px;
    font-weight: 750;
    color: #103B59;
    margin: 0 0 5px;
}

.booking-panel-heading p {
    font-size: 13px;
    color: #6F879C;
    margin: 0;
}

/* Seven circular date buttons */

/*.booking-dates {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(7, minmax(0, 1fr));*/
/*    gap: clamp(7px, 1.8vw, 18px);*/
/*    align-items: start;*/
/*}*/


/* Eight circular date buttons - 4 per row */

.booking-dates {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 22px);
    align-items: start;
}

.booking-date-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}





.booking-date-circle:focus-visible {
    outline: 3px solid #103B59;
    outline-offset: 4px;
}

/*.booking-date-circle.selected {*/
/*    background: linear-gradient(135deg, #079B91 0%, #0F4058 100%);*/
/*    border: 3px solid #0F4058;*/
/*    box-shadow: 0 0 0 4px rgba(7, 155, 145, 0.16),*/
/*                0 7px 18px rgba(15, 64, 88, 0.22);*/
/*    transform: scale(1.04);*/
/*}*/

.booking-date-circle .date-day {
    font-size: clamp(9px, 1.1vw, 12px);
    font-weight: 750;
    letter-spacing: 0.5px;
}

.booking-date-circle .date-number {
    font-size: clamp(17px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.3;
}

.booking-date-label {
    text-align: center;
    color: #6F879C;
    font-size: 11px;
    font-weight: 600;
    min-height: 16px;
}

.booking-date-label.today-label {
    color: #079B91;
}

/* Selected date summary */

.selected-date-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    margin-top: 27px;
    background: #f3f8fc;
    border: 1px solid #e7eff6;
    border-radius: 12px;
    color: #103B59;
    font-size: 14px;
}

.selected-date-summary i {
    color: #079B91;
    font-size: 19px;
}

/* Booking buttons */

.booking-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 23px;
}

.booking-action-btn {
    min-height: 52px;
    padding: 13px 18px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.2px;
    text-align: center;

    cursor: pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.booking-action-btn:hover {
    transform: translateY(-2px);
    
    
   
}


/*.booking-action-primary {*/
/*    background: linear-gradient(110deg, #0F4058 0%, #079B91 100%);*/
/*    color: #ffffff;*/
/*    border: 1px solid transparent;*/
/*}*/



/*.booking-action-primary:hover {*/
/*    background: linear-gradient(110deg, #079B91 0%, #0F4058 100%);*/
/*}*/




/* Book Appointment button */
.booking-action-primary {
    background: linear-gradient(100deg, #079B91, #07877F);
    color: #FFFFFF;
    border: 1px solid #079B91;
    /*transition: background 0.25s ease,*/
    /*            transform 0.25s ease,*/
    /*            box-shadow 0.25s ease;*/
    
    
    
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 5px 13px rgba(7, 155, 145, 0.12);
}

/* Hover effect — similar to Save Staff */
/*.booking-action-primary:hover {*/
/*    background: #067D75;*/
/*    color: #FFFFFF;*/
/*    border-color: #067D75;*/
/*    transform: translateY(-1px);*/
/*    box-shadow: 0 7px 17px rgba(7, 155, 145, 0.20);*/
/*}*/

.booking-action-primary:hover {
    background: linear-gradient(100deg, #07877F, #067D75);
    color: #FFFFFF;
    border-color: #07877F;
    transform: none;
    box-shadow: 0 5px 13px rgba(7, 155, 145, 0.12);
}



.booking-action-secondary {
    background: linear-gradient(135deg, #F0FAF8 0%, #E3F1F7 100%);
    color: #0F4058;
    border: 1px solid #CDE7E5;
}

.booking-action-secondary:hover {
    background: #E4EDF6;
}

/* Information note */

.booking-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
    color: #6F879C;
    font-size: 12px;
    line-height: 1.7;
}

.booking-note i {
    color: #079B91;
    font-size: 16px;
    margin-top: 1px;
}





















/* =========================================
   BOOK APPOINTMENT BANNER
========================================= */

.booking-hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 190px;
    margin-bottom: 28px;
    padding: 30px 34px;
    overflow: hidden;
    border-radius: 22px;

    background-image:
        linear-gradient(
            90deg,
            rgba(4, 61, 81, 0.90) 0%,
            rgba(0, 105, 122, 0.78) 52%,
            rgba(0, 125, 145, 0.12) 100%
        ),
        url("../images/bookingappoitmentbannerimage.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: 0 12px 28px rgba(16, 59, 89, 0.14);
}

.booking-hero-content {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.booking-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #d0fff7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.booking-hero-content h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 750;
    line-height: 1.2;
}

.booking-hero-content p {
    max-width: 580px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.8;
}




















/* Appointment Booking Confirmation */
.booking-confirmation {
    margin-top: 8px;
    padding: 10px 13px;
    background: #f2f8ff;
    border-left: 4px solid #1769ee;
    border-radius: 7px;
    color: #17324d;
    font-size: 14px;
    line-height: 1.5;
}

.booking-confirmation strong {
    display: block;
    color: #17324d;
    font-weight: 600;
}

.booking-confirmation p {
    margin: 0;
    color: #17324d;
}






/*today css*/


/* =========================================
   SECOND PATIENT BOOKING POPUP
========================================= */

.second-patient-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 35, 55, 0.62);
}

.second-patient-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 24px 16px 18px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
    animation: secondPatientPopupIn 0.2s ease-out;
}

.second-patient-modal h3 {
    margin: 0 35px 10px 0;
    color: #17253a;
    font-size: 20px;
    font-weight: 700;
}

.second-patient-description {
    margin-bottom: 14px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.second-patient-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #eef3f8;
    color: #17253a;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.second-patient-close:hover {
    background: #dce6f0;
}

.second-patient-modal label {
    display: block;
    margin-bottom: 6px;
    color: #17253a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.second-patient-modal input {
    display: block;
    width: 100%;
    min-height: 42px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    color: #17253a;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.second-patient-modal input:focus {
    outline: none;
    border-color: #1769ee;
    box-shadow: 0 0 0 3px rgba(23, 105, 238, 0.12);
}

.second-patient-message {
    margin: 0 0 10px;
    color: #b42318;
    font-size: 13px;
    line-height: 1.5;
}

.second-patient-modal form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 13px;
    border: none;
    border-radius: 9px;
    background: #1769ee;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.second-patient-modal form > button:hover:not(:disabled) {
    background: #0d55cc;
    transform: translateY(-1px);
}

.second-patient-modal form > button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@keyframes secondPatientPopupIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}





















/* SECOND PATIENT POPUP CENTER FIX */

#secondPatientModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;

    display: none;
    align-items: center !important;
    justify-content: center !important;

    padding: 20px;
    margin: 0 !important;
    background: rgba(15, 35, 55, 0.62);
    box-sizing: border-box;
}

#secondPatientModal .second-patient-modal {
    position: relative !important;
    width: 100%;
    max-width: 440px;
    margin: auto !important;
    padding: 24px 16px 18px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}



























/* Appointment date circles — restore circular shape */
.booking-date-circle {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    border-radius: 50% !important;
    background: linear-gradient(135deg, #0F4058 0%, #079B91 100%) !important;
    border: 3px solid #DDF5F2 !important;
    color: #FFFFFF !important;

    box-shadow: 0 5px 14px rgba(15, 64, 88, 0.18);
    transition: all 0.25s ease;
    cursor: pointer;
    line-height: 1.2;
}

.booking-date-circle:hover {
    background: linear-gradient(135deg, #079B91 0%, #0F4058 100%) !important;
    transform: translateY(-2px);
}

/*.booking-date-circle.selected {*/
/*    border: 3px solid #0F4058 !important;*/
/*    box-shadow: 0 0 0 4px rgba(7, 155, 145, 0.18),*/
/*                0 7px 18px rgba(15, 64, 88, 0.22);*/
/*    transform: scale(1.04);*/
/*}*/
.booking-date-circle.selected {
    background: linear-gradient(135deg, #103B59 0%, #079B91 100%) !important;
    border: 4px solid #D4A24C !important;
    color: #FFFFFF !important;
    box-shadow:
        0 0 0 4px rgba(212, 162, 76, 0.22),
        0 8px 20px rgba(16, 59, 89, 0.20);
    transform: scale(1.06);
}

.booking-date-circle .date-day {
    font-size: 12px;
    font-weight: 700;
}

.booking-date-circle .date-number {
    font-size: 25px;
    font-weight: 800;
}

.booking-date-label {
    display: block;
    margin-top: 8px;
    text-align: center;
}




/* =========================================
   MY APPOINTMENTS - BANNER BACKGROUND
========================================= */

.my-appointments-hero-banner {
    background-image:
        linear-gradient(
            90deg,
            rgba(15, 64, 88, 0.96) 0%,
            rgba(15, 64, 88, 0.80) 42%,
            rgba(15, 64, 88, 0.18) 100%
        ),
        url('../images/myappointmentbannerimage.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================
   MY APPOINTMENTS - MAIN PANEL
========================================= */

.my-appointments-panel {
    width: 100%;
    margin-top: 26px;
    padding: 26px 24px;
    background: #FFFFFF;
    border: 1px solid #E5EEF5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(16, 59, 89, 0.07);
}

/* Section heading */

.my-appointments-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.my-appointments-heading-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #DDF7F3, #E6F2F8);
    color: #079B91;
    border-radius: 15px;
    font-size: 28px;
}

.my-appointments-heading h2 {
    margin: 0 0 6px;
    color: #103B59;
    font-size: 21px;
    font-weight: 750;
}

.my-appointments-heading p {
    margin: 0;
    color: #7187A2;
    font-size: 13px;
}

/* =========================================
   APPOINTMENTS TABLE
========================================= */

.my-appointments-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #FFFFFF;
    border: 1px solid #E3EDF5;
    border-radius: 13px;
}

.my-appointments-table {
    width: 100%;
    min-width: 850px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #103B59;
}

.my-appointments-table thead th {
    padding: 17px 15px;
    background: linear-gradient(100deg, #EAF4FC, #F0F7FC);
    color: #103B59;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #DCE9F4;
}

.my-appointments-table tbody td {
    padding: 20px 15px;
    vertical-align: middle;
    font-size: 14px;
    border-bottom: 1px solid #E8EFF6;
}

.my-appointments-table tbody tr:last-child td {
    border-bottom: none;
}

.my-appointments-table tbody tr {
    transition: background-color 0.2s ease;
}

.my-appointments-table tbody tr:hover {
    background-color: #F6FBFE;
}

/* Date and time */

.appointment-date-cell,
.appointment-time-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.appointment-date-cell i,
.appointment-time-cell i {
    color: #079B91;
    font-size: 19px;
}

.appointment-booking-id {
    color: #103B59;
    font-weight: 400;
    white-space: nowrap;
}

/* =========================================
   APPOINTMENT STATUS
========================================= */

.appointment-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    background: #DDF7EF;
    color: #087443;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.appointment-status-badge i {
    font-size: 8px;
}

/* =========================================
   CANCEL APPOINTMENT BUTTON
========================================= */

.appointment-action-cell {
    min-width: 215px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.cancel-appointment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 220px;
    padding: 11px 14px;
    background: linear-gradient(100deg, #EF343B, #DF202B);
    color: #FFFFFF;
    border: 1px solid #E52D35;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cancel-appointment-btn:hover {
    background: linear-gradient(100deg, #D9232D, #C91825);
    color: #FFFFFF;
    border-color: #C91825;
}

.cancel-appointment-btn:disabled {
    background: #E6EBF0;
    color: #64748B;
    border-color: #D5DEE7;
    cursor: not-allowed;
}

/* One-hour cancellation information */

.cancellation-note {
    display: block;
    max-width: 225px;
    color: #637D9C;
    font-size: 11px;
    line-height: 1.6;
}

/* =========================================
   NO UPCOMING APPOINTMENTS
========================================= */

.no-appointments-message {
    padding: 55px 20px;
    text-align: center;
    color: #7187A2;
}

.no-appointments-message > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 17px;
    background: #E5F6F3;
    color: #079B91;
    border-radius: 50%;
    font-size: 34px;
}

.no-appointments-message h3 {
    margin-bottom: 9px;
    color: #103B59;
    font-size: 21px;
    font-weight: 750;
}

.no-appointments-message p {
    margin-bottom: 20px;
    font-size: 14px;
}

.book-appointment-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(100deg, #079B91, #07877F);
    color: #FFFFFF;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    transition: background 0.2s ease;
}

.book-appointment-link:hover {
    background: linear-gradient(100deg, #07877F, #066F69);
    color: #FFFFFF;
}






/* Patient name in My Appointments */
.appointment-patient-name {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #103b59;
   font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.appointment-patient-name i {
    color: #08a69c;
    font-size: 19px;
    flex-shrink: 0;
}






/*sat css*/



/* =========================================
   SETTINGS PAGE
   Pooja - Doctor Appointment
========================================= */

.settings-page {
    width: 100%;
}

/* SETTINGS BANNER */

.settings-banner {
    position: relative;
    min-height: 220px;
    padding: 35px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 28px;

    background:
        linear-gradient(
            90deg,
            rgba(16, 59, 89, 0.90) 0%,
            rgba(8, 126, 139, 0.65) 55%,
            rgba(8, 126, 139, 0.15) 100%
        ),
        url('../images/settingsbackgroundbannerimage.png')
        center / cover no-repeat;

    color: #FFFFFF;
}

.settings-banner-content {
    position: relative;
    z-index: 1;
    max-width: 570px;
}

.settings-eyebrow {
    color: #BDEBE5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.settings-banner h1 {
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
}

.settings-banner p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    max-width: 480px;
}

/* SETTINGS CARD */

.settings-card {
    background: #FFFFFF;
    border: 1px solid #E5EBF0;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(16, 59, 89, 0.05);
    overflow: hidden;
}

.settings-card .availability-card-body {
    padding: 26px;
}

/* SETTINGS GRID */

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* SETTINGS FIELDS */

.settings-page .availability-field {
    min-width: 0;
}

.settings-page .availability-field .form-label {
    display: block;
    color: #263D50;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 9px;
}

.settings-page .availability-field .form-control,
.settings-page .availability-field .form-select {
    width: 100%;
    min-height: 47px;
    border: 1px solid #D9E2EA;
    border-radius: 9px;
    padding: 10px 13px;
    background-color: #FFFFFF;
    color: #263D50;
    box-shadow: none;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.settings-page .availability-field .form-control:focus,
.settings-page .availability-field .form-select:focus {
    border-color: #087E8B;
    box-shadow: 0 0 0 3px rgba(8, 126, 139, 0.10);
    outline: none;
}

/* SETTINGS BUTTONS */

.settings-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #E9EEF2;
}

.settings-actions .settings-save-btn {
    background-color: #087E8B;
    border-color: #087E8B;
    color: #FFFFFF;
    border-radius: 9px;
    padding: 11px 22px;
    font-weight: 600;
}

.settings-actions .settings-save-btn:hover {
    background-color: #066873;
    border-color: #066873;
    color: #FFFFFF;
}

.settings-actions .btn-secondary {
    background-color: #FFFFFF;
    color: #425466;
    border: 1px solid #D9E2EA;
    border-radius: 9px;
    padding: 11px 20px;
    font-weight: 600;
}

.settings-actions .btn-secondary:hover {
    background-color: #F3F7FA;
    color: #263D50;
    border-color: #C8D5E0;
}

/* SETTINGS ALERTS */

.settings-page .availability-alert-success {
    margin-bottom: 20px;
}

.settings-page .availability-alert-error {
    margin-bottom: 20px;
}






/*TODAYS CSS*/



/* =========================================
   EDIT AVAILABILITY - BLOCK TIME ENTRY CARDS
========================================= */

.edit-block-time-section .block-time-form-card {
    position: relative;
    padding: 20px;
    background: #FAFAFA;
    border: 1px solid #DCDCDC;
    border-radius: 10px;
}

.edit-block-time-section .block-time-form-card + .block-time-form-card {
    margin-top: 18px;
}

.block-time-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.block-time-entry-title {
    margin: 0;
    color: #17324A;
    font-size: 16px;
    font-weight: 600;
}

.remove-block-time-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #FF4757;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.remove-block-time-btn:hover {
    background: #E52D40;
}

.block-time-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.block-time-form-actions .save-block-time-btn {
    border-radius: 7px;
    padding: 9px 16px;
    font-weight: 600;
}

.block-time-form-actions .save-block-time-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.block-time-message {
    flex-basis: 100%;
    font-size: 13px;
    font-weight: 500;
}

.block-time-message.is-success {
    color: #087E5B;
}

.block-time-message.is-error {
    color: #B42318;
}

.block-time-add-wrapper {
    margin-top: 18px;
}

#addBlockTimeForm {
    border-radius: 7px;
    padding: 10px 17px;
    font-weight: 600;
}
































/* Fix scrolling in View Availability Details popup */
.availability-modal-overlay {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 16px;
    box-sizing: border-box;
    align-items: flex-start;
}

.availability-details-modal {
    margin: auto;
    max-height: none;
    height: auto;
    overflow: visible;
}

.availability-modal-content {
    min-height: 0;
    overflow: visible;
}







/*todays css*/





/* =========================================
   VIEW AVAILABILITY - COMPACT BLOCK TIMES
========================================= */

.blocked-entries-heading {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.blocked-entries-count {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 20px;
    background: #e7f7f5;
    color: #087f83;
    font-size: 10px;
    font-weight: 700;
}

.blocked-entries-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blocked-time-card {
    display: grid;
    grid-template-columns: 145px 180px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #dce9f0;
    border-radius: 9px;
    background: #fff;
}

.blocked-time-date-group,
.blocked-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: #173e5c;
    font-size: 12px;
}

.blocked-time-date-group i,
.blocked-time-range i {
    flex-shrink: 0;
    color: #079c9a;
    font-size: 13px;
}

.blocked-time-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.blocked-time-number {
    display: none;
}

.blocked-time-reason {
    min-width: 0;
    padding: 0 0 0 12px;
    border-left: 1px solid #dce9f0;
    background: transparent;
}

.blocked-time-reason span {
    display: none;
}

.blocked-time-reason p {
    margin: 0;
    color: #000000;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.blocked-time-reason p::before {
    content: "Reason: ";
    color: #71869a;
    font-weight: 600;
}



/* Improve View Availability popup left sidebar */
/*.availability-details-modal {*/
/*    width: min(1000px, calc(100vw - 40px));*/
/*}*/


.availability-details-modal {
    width: min(1000px, calc(100vw - 40px));
    max-width: 1000px;
}
/*.availability-modal-sidebar {*/
/*    flex: 0 0 270px;*/
/*    width: 270px;*/
/*    min-width: 270px;*/
/*    padding: 36px 24px;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    text-align: center;*/
/*}*/






.availability-modal-sidebar {
    flex: 0 0 250px;
    width: 250px;
    min-width: 250px;
    padding: 36px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.availability-modal-sidebar h2 {
    font-size: 22px;
    line-height: 1.35;
    margin: 18px 0 6px;
}

.availability-modal-sidebar .availability-modal-subtitle {
    margin-bottom: 26px;
}

.availability-modal-doctor-icon {
    margin: 0 0 16px;
}

.availability-modal-doctor-icon img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

.availability-modal-sidebar h3 {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 7px;
}

.availability-modal-sidebar > p {
    line-height: 1.5;
}

.availability-modal-status {
    margin-top: 22px;
    max-width: 100%;
    white-space: normal;
}

.availability-modal-content {
    flex: 1 1 auto;
    min-width: 0;
}




/* Availability Date Range - single line */
.availability-date-range-info {
    min-width: 0;
}

.availability-date-range-info > span {
    display: block;
    margin-bottom: 7px;
}

.availability-date-range-values {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

.availability-date-range-values strong {
    color: #173e5c;
    font-size: 14px;
    font-weight: 750;
}

.availability-date-range-values .date-separator {
    color: #079c9a;
    font-weight: 700;
}




/*TODAYS CSS*/

/* =========================================
   DOCTOR AVAILABILITY - OVERLAP POPUP
========================================= */

.availability-overlap-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.availability-overlap-dialog {
    background: #fff;
    width: 100%;
    max-width: 520px;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
}

.availability-overlap-dialog h3 {
    color: #b42318;
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 22px;
}

.availability-overlap-message {
    line-height: 1.7;
    color: #333;
    margin-bottom: 14px;
}

.availability-overlap-note {
    line-height: 1.7;
    color: #555;
    margin-bottom: 0;
}

.availability-overlap-actions {
    text-align: right;
    margin-top: 24px;
}

.availability-overlap-actions button {
    min-height: 42px;
}




















/*SOFTWARE UPDATED CSS -THURSDAY*/
















/* =========================================
   SETTINGS - CUSTOM TIME PICKER
========================================= */

.custom-time-input {
    background-color: #fff;
    cursor: pointer;
}

.custom-time-input:focus {
    cursor: pointer;
    border-color: #103b59;
    box-shadow: 0 0 0 0.2rem rgba(16, 59, 89, 0.12);
}

.time-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 30, 45, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.time-picker-overlay.show {
    display: flex;
}

.time-picker-box {
    width: 100%;
    max-width: 350px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
}

.time-picker-box h5 {
    color: #103b59;
    font-weight: 700;
    margin-bottom: 20px;
}

.time-picker-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}

.time-picker-row select {
    width: 100%;
    min-width: 0;
    padding: 10px 6px;
    border: 1px solid #d7e0e8;
    border-radius: 8px;
    background: #fff;
    color: #153b59;
}

.time-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.time-picker-actions button {
    padding: 9px 18px;
    border-radius: 8px;
}

.time-picker-cancel {
    border: 1px solid #d7e0e8;
    background: #fff;
    color: #153b59;
}

.time-picker-ok {
    border: none;
    background: #103b59;
    color: #fff;
}

.time-picker-ok:hover {
    background: #0b2e46;
}

/* =========================================
   SETTINGS - WEEKLY HOLIDAYS
========================================= */

.settings-form-grid .availability-field .form-check {
    margin-bottom: 4px;
}

.settings-form-grid .form-check-input {
    cursor: pointer;
    accent-color: #103b59;
}

/*.settings-form-grid .form-check-input:checked {*/
/*    background-color: #103b59;*/
/*    border-color: #103b59;*/
/*}*/


/* All selected weekly holiday checkboxes show red ticks */
.settings-form-grid .form-check-input:checked {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    accent-color: #dc3545;
}

/* Keep all weekday text the same color */
.settings-form-grid .holiday-red {
    color: inherit !important;
}


/* Friday and Sunday - normal text, red checked tick marks */
.settings-form-grid .holiday-red {
    color: inherit !important;
}

.settings-form-grid .holiday-red .form-check-input {
    accent-color: #dc3545;
}

.settings-form-grid .holiday-red .form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}





/* =====================================================
   DOCTOR AVAILABILITY MONTH CALENDAR
   ===================================================== */

.availability-calendar-toolbar {
    display: flex;
    justify-content: center;
    margin: 24px 0;
}

.availability-month-select {
    max-width: 280px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 18px;
    color: #0878d1;
    text-align: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.availability-month-select:focus {
    box-shadow: none;
}

.availability-calendar-weekdays,
.availability-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
}

.availability-calendar-weekdays {
    margin-bottom: 14px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.availability-calendar-grid {
    padding: 12px 0 28px;
}

.availability-day {
    width: 58px;
    height: 58px;
    justify-self: center;
    border: 1px solid #dce5ed;
    border-radius: 50%;
    background: #fff;
    color: #103b59;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(16, 59, 89, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.availability-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(16, 59, 89, 0.14);
}

.availability-day .day-number {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.availability-day .day-name {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
}

.availability-day.is-holiday {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.availability-day.is-selected {
    outline: 3px solid #0d9488;
    outline-offset: 2px;
}

.availability-day:focus-visible {
    outline: 3px solid #0d9488;
    outline-offset: 3px;
}

.availability-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
















/* DOCTOR LEAVE POPUP */

.doctor-leave-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 30, 45, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.doctor-leave-dialog {
    width: 100%;
    max-width: 450px;
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
}

.doctor-leave-dialog h3 {
    color: #103b59;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
}

.doctor-leave-dialog label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #344054;
}

.doctor-leave-dialog textarea {
    width: 100%;
    resize: vertical;
}

.doctor-leave-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

#doctorLeaveSelectedDate {
    color: #667085;
    font-size: 14px;
    margin-bottom: 20px;
}

#doctorLeaveSavedReason {
    background: #fff1f1;
    border: 1px solid #f5c2c2;
    color: #a52828;
    border-radius: 8px;
    padding: 12px;
    margin-top: 15px;
}





























.doctor-leave-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.doctor-leave-modal-header h3 {
    margin: 0;
}

.doctor-leave-close {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s ease;
}

.doctor-leave-close:hover {
    color: #dc3545;
}












/* Calendar Month Navigation */
.availability-calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    margin: 20px 0 30px;
}

.availability-month-title {
    text-align: center;
    margin: 0;
}

.calendar-nav-btn {
    padding: 10px 20px;
    background: #103B59;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}





/* Calendar Month Navigation */
.availability-calendar-toolbar {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 130px;
    align-items: center;
    gap: 10px;
    margin: 20px 0 30px;
    width: 100%;
}

.availability-month-title {
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.calendar-nav-btn {
    width: 120px;
    padding: 10px 12px;
    background: #103B59;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    justify-self: center;
}

.calendar-nav-btn:hover {
    background: #087f78;
}








/*.calendar-nav-btn:hover {*/
/*    background: #087f78;*/
/*    transform: translateY(-2px);*/
/*}*/

















/* ======================================
   EDIT AVAILABILITY - TIME SLOT DESIGN
====================================== */

.edit-slots-section {
    margin-top: 25px;
}

.time-period {
    padding: 16px;
    border-radius: 12px;
    margin-top: 16px;
    border: 1px solid #e2edf3;
}

.morning-period {
    background: #effafa;
}

.afternoon-period {
    background: #fffaf0;
}

.evening-period {
    background: #f8f3ff;
}

.time-period-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.time-period-heading h3 {
    font-size: 15px;
    font-weight: 700;
    color: #123b59;
    margin: 0;
}

.time-period-heading h3 span {
    font-size: 13px;
    font-weight: 500;
    color: #668096;
}

.slot-count {
    font-size: 12px;
    font-weight: 600;
    color: #527087;
}

.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}

.time-slot-btn {
    width: 100%;
    min-height: 34px;
    border: 1px solid #159bc5;
    border-radius: 5px;
    background: #ffffff;
    color: #087da8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-slot-btn:hover {
    background: #e1f5fa;
}

.time-slot-btn.inactive {
    border-color: #c9dce5;
    color: #b2c5cf;
    background: #f7fafb;
}




/* View popup slot styling */
.time-slot-btn:disabled {
    cursor: default;
    opacity: 1;
}

.time-slot-btn.view-slot-active {
    border-color: #159bc5;
    color: #087da8;
    background: #ffffff;
}

.time-slot-btn:disabled:hover {
    background: #ffffff;
}

.time-slot-btn.inactive:disabled:hover {
    background: #f7fafb;
}






/* =========================================
   APPOINTMENTS PAGE
========================================= */

/*.appointments-page {*/
/*    padding: 25px;*/
/*    width: 100%;*/
/*}*/


.appointments-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 30px 28px !important;
    box-sizing: border-box;
}

.dashboard-layout .dashboard-body:has(.appointments-page) {
    padding: 0 !important;
}


.appointments-heading {
    margin-bottom: 25px;
}

.appointments-eyebrow {
    color: #159b91;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 7px;
}

.appointments-heading h1 {
    color: #103b59;
    font-size: 27px;
    font-weight: 700;
    margin: 0 0 7px;
}

.appointments-heading p {
    color: #788793;
    font-size: 13px;
    margin: 0;
}

/* WALK-IN CARD */

.appointments-card {
    background: #ffffff;
    border: 1px solid #e9eef2;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 18px rgba(16, 59, 89, 0.05);
}

/* CARD HEADER */

.appointments-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf1f4;
}

.appointments-card-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7f5f3;
    color: #159b91;
    border-radius: 10px;
    font-size: 21px;
}

.appointments-card-header h2 {
    color: #103b59;
    font-size: 21px;
    font-weight: 750;
    margin: 0 0 5px;
}

.appointments-card-header p {
    color: #89949e;
    font-size: 13px;
    margin: 0;
}

/* FORM GRID */

.appointments-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 20px;
}

.appointments-field {
    min-width: 0;
}

.appointments-field label {
    display: block;
    color: #34495a;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 9px;
}

.appointments-field .form-control,
.appointments-field .form-select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #dce4e9;
    border-radius: 7px;
    color: #34495a;
    font-size: 13px;
    background-color: #ffffff;
    box-shadow: none;
}

.appointments-field .form-control {
    padding: 10px 13px;
}

.appointments-field .form-select {
    padding: 10px 35px 10px 13px;
}

.appointments-field .form-control:focus,
.appointments-field .form-select:focus {
    border-color: #159b91;
    box-shadow: 0 0 0 3px rgba(21, 155, 145, 0.10);
}

.appointments-field .form-control::placeholder {
    color: #a7b0b8;
    font-size: 12px;
}

.appointments-help {
    display: block;
    color: #84919c;
    font-size: 11px;
    line-height: 1.5;
    margin-top: 7px;
}

/* BOOK BUTTON */

.appointments-form-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #edf1f4;
}

.appointments-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 135px;
    padding: 12px 25px;
    background: #159b62;
    color: #ffffff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.appointments-book-btn:hover {
    background: #117d50;
}

.appointments-book-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}



/*.appointments-card {*/
/*    width: 93%;*/
/*    max-width: 950px;*/
/*    margin: 24px auto 0;*/
/*}*/


.appointments-card {
    width: 93%;
    max-width: 1070px;
    margin: 24px auto 0;
}



/* APPOINTMENT DATE NAVIGATION */
/*.appointment-date-navigation {*/
/*    padding: 18px 20px;*/
/*    margin-bottom: 20px;*/
/*    background: #f8fafc;*/
/*    border: 1px solid #e8edf2;*/
/*    border-radius: 12px;*/
/*}*/

/*.appointment-date-heading h5 {*/
/*    font-size: 14px;*/
/*    font-weight: 600;*/
/*    color: #263746;*/
/*    margin-bottom: 14px;*/
/*}*/

/*.appointment-date-list {*/
/*    display: flex;*/
/*    gap: 10px;*/
/*    overflow-x: auto;*/
/*    padding-bottom: 5px;*/
/*}*/

/*.appointment-date-item {*/
/*    min-width: 95px;*/
/*    padding: 12px 14px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    gap: 5px;*/
/*    text-decoration: none;*/
/*    background: #ffffff;*/
/*    border: 1px solid #e1e7ed;*/
/*    border-radius: 10px;*/
/*    color: #34495e;*/
/*    transition: all 0.2s ease;*/
/*}*/

/*.appointment-date-item span {*/
/*    font-size: 12px;*/
/*    color: #687987;*/
/*}*/

/*.appointment-date-item strong {*/
/*    font-size: 15px;*/
/*    font-weight: 700;*/
/*}*/

/*.appointment-date-item:hover {*/
/*    border-color: #01374b;*/
/*    color: #01374b;*/
/*}*/

/*.appointment-date-item.active {*/
/*    background: #01374b;*/
/*    border-color: #01374b;*/
/*    color: #ffffff;*/
/*}*/

/*.appointment-date-item.active span {*/
/*    color: #dceaf0;*/
/*}*/




/* THREE-DATE NAVIGATION */
.appointment-date-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background: #f8fafc;
    border: 1px solid #e8edf2;
    border-radius: 10px;
}

.appointment-date-list {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.date-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #01374b;
    background: #ffffff;
    border: 1px solid #dce5eb;
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
}

.date-arrow:hover {
    background: #01374b;
    color: #ffffff;
}

.appointment-date-item {
    min-width: 100px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #dce5eb;
    border-radius: 9px;
    color: #34495e;
}

.appointment-date-item span {
    font-size: 12px;
    color: #687987;
}

.appointment-date-item strong {
    font-size: 15px;
    font-weight: 700;
}

.appointment-date-item.active {
    background: #01374b;
    border-color: #01374b;
    color: #ffffff;
}

.appointment-date-item.active span {
    color: #dceaf0;
}




/* APPOINTMENTS HERO */

.appointments-hero {
    position: relative;
    width: 100%;
    min-height: 155px;
    border-radius: 20px;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0, 65, 77, 0.94),
            rgba(0, 85, 98, 0.72),
            rgba(0, 65, 77, 0.20)
        ),
        url('../images/appointment-hero.png');

    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.appointments-hero-content {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 25px 32px;
    position: relative;
    z-index: 2;
}

.appointments-hero-icon {
    width: 88px;
    height: 88px;
    min-width: 88px;
    border-radius: 24px;
    background: #ffffff;
    color: #009e9a;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 38px;
}

.appointments-hero-text .appointments-eyebrow {
    color: #a4e8df;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.appointments-hero-text h1 {
    color: #ffffff;
    font-size: 34px;
    font-weight: 750;
    margin: 0 0 6px;
}

.appointments-hero-text p {
    color: #ffffff;
    font-size: 15px;
    margin: 0;
}



/* APPOINTMENTS HERO ICON */

.appointments-hero-icon {
    width: 88px;
    height: 88px;
    min-width: 88px;
    border-radius: 24px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appointments-hero-icon i {
    font-size: 42px;
    color: #009e9a;
}





html {
    scroll-behavior: smooth;
}




/* GOLDEN STAR BESIDE WELCOME HEADING */
.welcome-star {
    color: #e9aa32;
    font-size: 25px;
    margin-left: 3px;
}

/* DASHBOARD DATE AND TIME CARD */
.today-date {
    display: flex;
    align-items: center;
   gap: 12px;
}



.dashboard-date-icon {
    font-size: 22px;
    color: #079B91;
}





.dashboard-date-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
   justify-content: center;
   gap: 5px;
   width: 100%;
}




.dashboard-date-details strong {
    display: block;
   font-size: 14px;
   color: #103B59;
   line-height: 1.4;
}



.dashboard-date-details small {
    display: block;
    font-size: 13px;
    color: #6F879C;
    line-height: 1.4;
}







/*.dashboard-date-details {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 4px;*/
/*}*/

/*.dashboard-date-details strong {*/
/*    font-size: 14px;*/
/*    color: #103B59;*/
/*}*/

/*.dashboard-date-details small {*/
/*    font-size: 13px;*/
/*    color: #6F879C;*/
/*}*/























/* =====================================
   REPLACEMENT PATIENT POPUP
===================================== */

.replacement-dialog {
    width: min(92%, 520px);
    max-width: 520px;
    max-height: 90vh;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: #ffffff;
    color: #243447;
    box-shadow: 0 20px 60px rgba(16, 40, 61, 0.22);
    overflow: auto;
}

.replacement-dialog::backdrop {
    background: rgba(13, 35, 52, 0.65);
    backdrop-filter: blur(4px);
}

.replacement-dialog[open] {
    animation: replacementPopupIn 0.25s ease-out;
}

@keyframes replacementPopupIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* HEADER */

.replacement-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 25px;
    background: #103B59;
    color: #ffffff;
}

.replacement-dialog-header h4 {
    margin: 0 0 7px;
    font-size: 21px;
    font-weight: 700;
}

.replacement-dialog-header p {
    margin: 0;
    font-size: 13px;
    color: #d5e5ee;
    line-height: 1.5;
}

.replacement-close-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.replacement-close-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* FORM BODY */

.replacement-dialog-body {
    padding: 24px 25px 10px;
}

.replacement-dialog-body .form-label {
    display: block;
    margin-bottom: 8px;
    color: #263d50;
    font-size: 13px;
    font-weight: 600;
}

.replacement-dialog-body .form-control {
    min-height: 43px;
    border: 1px solid #dce4eb;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
}

.replacement-dialog-body .form-control:focus {
    border-color: #087f83;
    box-shadow: 0 0 0 3px rgba(8,127,131,0.12);
}

.replacement-dialog-body .form-control[readonly] {
    background: #f0f5f8;
    color: #103B59;
    font-weight: 600;
}

/* FOOTER */

.replacement-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 25px 22px;
    border-top: 1px solid #edf0f3;
}

.replacement-dialog-footer .btn {
    min-height: 42px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.replacement-dialog-footer .btn-primary {
    background: #087f83;
    border-color: #087f83;
}

.replacement-dialog-footer .btn-primary:hover {
    background: #06696d;
    border-color: #06696d;
}

.replacement-dialog-footer .btn-light {
    background: #f1f4f7;
    border-color: #e2e8ed;
    color: #40566a;
}






/* ANNOUNCEMENTS HERO - CLINIC THEME */
.block-time-hero {
    background:
        linear-gradient(
            90deg,
            rgba(4, 75, 82, 0.96) 0%,
            rgba(4, 88, 98, 0.88) 45%,
            rgba(4, 88, 98, 0.35) 100%
        ),
        url('../images/viewannouncement.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 190px;
    border-radius: 18px;
    padding: 30px;
    display: flex;
    align-items: center;
    color: #ffffff;
}

.block-time-hero h1,
.block-time-hero p {
    color: #ffffff;
}

.block-time-hero .block-time-hero-icon {
    color: #ffffff;
}







/* =====================================
   GLOBAL FONT - ENTIRE SOFTWARE
===================================== */

html,
body,
body * {
    font-family: "Segoe UI", Arial, sans-serif !important;
}










/* =========================================
   ANNOUNCEMENT RECORDS PAGE - MATCH VIEW AVAILABILITY
========================================= */

/* ---------- Hero banner ---------- */
.announcement-page .block-time-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 155px;
    margin: 0 0 24px !important;
    padding: 28px 32px;
}

.announcement-page .block-time-hero-icon {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 24px;
    color: #079b91;
    font-size: 38px;
}

.announcement-page .block-time-hero-icon i {
    color: #079b91;
}

.announcement-page .block-time-hero h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 750;
    line-height: 1.25;
}

.announcement-page .block-time-hero p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* ---------- Records card ---------- */
.announcement-page .availability-card {
    margin: 0 !important;
    background: #ffffff;
    border: 1px solid #e5edf4;
    border-radius: 20px;
    box-shadow: none;
    overflow: visible;
}

.announcement-page .availability-card-body {
    padding: 28px;
}

/* ---------- Total Records row ---------- */
.announcement-page .block-time-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 22px;
    padding: 0 10px;
}

.announcement-page .block-time-total {
    display: flex;
    align-items: center;
    gap: 18px;
}

.announcement-page .block-time-total-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c8f1ef;
    color: #087e82;
    border-radius: 20px;
    font-size: 27px;
}

.announcement-page .block-time-total > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* plain label, no chip */
.announcement-page .block-time-total > div:last-child > span {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: #103b59;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    text-transform: none;
}

.announcement-page .block-time-total strong {
    margin: 0;
    color: #079b91;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
}

/* ---------- Add Announcements button ---------- */
.announcement-page .block-time-back-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid #079b91;
    border-radius: 14px;
    background: #ffffff;
    color: #079b91;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.announcement-page .block-time-back-btn:hover {
    background: #079b91;
    color: #ffffff;
}

/* ---------- Table inset inside the padded card ---------- */
.announcement-page .announcement-table-container {
    border: 1px solid #e3ebf5;
    border-radius: 14px;
    overflow: hidden;
}







/* ADD ANNOUNCEMENTS PAGE SPACING */
.dashboard-layout .dashboard-body.add-announcement-page {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto !important;
    padding: 52px !important;
    box-sizing: border-box;
}





/* =========================================
   ADD ANNOUNCEMENT PAGE - SPACING FIX
========================================= */

.dashboard-layout .dashboard-body.add-announcement-page {
    padding: 30px 28px !important;
}

/* Card */
.add-announcement-page .availability-card {
    max-width: 900px;          /* CHANGED: medium width */
    margin: 0 auto;        /* CHANGED: left aligned (use 0 auto to center) */
    overflow: hidden;
}

.add-announcement-page .availability-card-body {
    padding: 28px;
}

/* Heading row: icon | title + description | View button */
.add-announcement-page .availability-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e7eef3;
}

.add-announcement-page .availability-section-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
}

.add-announcement-page .availability-section-heading-text {
    flex: 1;
    min-width: 0;
}

/* remove the old teal bar + underline + extra spacing */
.add-announcement-page .availability-section-title {
    display: block;
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.35;
}

.add-announcement-page .availability-section-title::before {
    content: none;
    display: none;
}

.add-announcement-page .availability-section-description {
    margin: 0;
}

.add-announcement-page .announcements-view-btn {
    margin-left: auto;
}

  
.add-announcement-page .availability-announcement-grid {
   display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;   
   gap: 20px; 
     max-width: 700px;
     
     margin-left: auto;
    margin-right: auto;
     
     
}

.add-announcement-page .announcement-message-group {
    max-width: 700px;
   
}

/*.add-announcement-page .availability-announcement-grid {*/
/*    display: grid;*/
/*    grid-template-columns: minmax(0, 1fr) 200px;*/
/*    gap: 20px;*/
/*    width: 100%;*/
/*    max-width: none;*/
/*    box-sizing: border-box;*/
/*}*/

.add-announcement-page .availability-announcement-grid .availability-field:last-child {
    grid-column: 1 / -1;
}

.add-announcement-page .form-label {
    display: block;
    margin-bottom: 8px;
    color: #344d5e;
    font-size: 14px;
    font-weight: 600;
}

.add-announcement-page .form-control {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: #f9fbfd;
    border: 1px solid #d8e3eb;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
}

.add-announcement-page textarea.form-control {
    min-height: 100px;         /* CHANGED: 110px -> 100px */
    resize: vertical;
}

.add-announcement-page .form-control:focus {
    background: #fff;
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, .12);
}

/* Buttons */
/*.add-announcement-page .availability-actions {*/
/*    display: flex;*/
/*   justify-content: flex-start;*/
/*   align-items: center;*/
/*   flex-wrap: wrap;*/
/*   gap: 12px;*/
/*    margin-top: 26px;*/
/*    padding-top: 22px;*/
/*    border-top: 1px solid #e7eef3;*/
/*}*/


.add-announcement-page .availability-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    padding-left: calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
    border-top: 1px solid #e7eef3;
}


.add-announcement-page .availability-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    
    
    
    
    
}
















/* =========================================
   VIEW DOCTOR VIDEOS - HEADER ROW
   (matches View Announcements)
========================================= */

.doctor-videos-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 22px;
    padding: 0 10px;
}

.doctor-videos-total {
    display: flex;
    align-items: center;
    gap: 18px;
}

.doctor-videos-total-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c8f1ef;
    color: #087e82;
    border-radius: 20px;
    font-size: 27px;
}

.doctor-videos-total > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.doctor-videos-total > div:last-child > span {
    color: #103b59;
    font-size: 15px;
    font-weight: 400;
}

.doctor-videos-total strong {
    color: #079b91;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
}



/* VIEW DOCTOR VIDEOS - PADDING ON THE CARD ITSELF */
.dashboard-layout section.availability-card.doctor-videos-list-card {
    margin: 0 !important;
    padding: 28px !important;
    overflow: visible !important;
    border: 1px solid #e5edf4;
    border-radius: 20px;
    box-shadow: none;
}

.dashboard-layout section.doctor-videos-list-card > .availability-card-body {
    padding: 0 !important;
}





/* =========================================
   ADD DOCTOR VIDEO PAGE - SPACING FIX
   (matches Add Announcement)
========================================= */

.dashboard-layout .dashboard-body.add-video-page {
    padding: 30px 28px !important;
}

/* Card */
/*.add-video-page .availability-card {*/
/*    max-width: 900px;*/
/*    margin: 0 auto;*/
   
/*    overflow: hidden;*/
/*}*/




/* Card */
.add-video-page .availability-card {
    max-width: 900px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    overflow: hidden;
}
.add-video-page .availability-card-body {
    /*padding: 28px;*/
    
    
    padding: 28px 28px 22px;
}

/* Heading row: icon | title + description | View button */
.add-video-page .availability-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e7eef3;
}

.add-video-page .availability-section-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
}

.add-video-page .availability-section-heading-text {
    flex: 1;
    min-width: 0;
}

/* remove the old teal bar + underline + extra spacing */
.add-video-page .availability-section-title {
    display: block;
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.35;
}

.add-video-page .availability-section-title::before {
    content: none;
    display: none;
}

.add-video-page .availability-section-description {
    margin: 0;
}

.add-video-page .announcements-view-btn {
    margin-left: auto;
}

/* Form grid: Title + URL side by side */
.add-video-page .availability-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 100%;
    
    margin: 0 ;
}

.add-video-page .form-label {
    display: block;
    margin-bottom: 8px;
    color: #344d5e;
    font-size: 14px;
    font-weight: 600;
}

.add-video-page .form-control {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: #f9fbfd;
    border: 1px solid #d8e3eb;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
}

.add-video-page .form-control:focus {
    background: #fff;
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7, 155, 145, .12);
}

/* Buttons */
.add-video-page .availability-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e7eef3;
}

.add-video-page .availability-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}




/* Availability status labels */

.availability-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.available-status {
    background: #e0f5ee;
    color: #078568;
}

.holiday-status {
    background: #fff0e8;
    color: #d66b32;
}

.personal-leave-status {
    background: #f0eaff;
    color: #7650b5;
}






/* CANCEL APPOINTMENT CONFIRMATION */

.cancel-confirm-dialog {
    width: min(420px, calc(100% - 30px));
    border: none;
    border-radius: 14px;
    padding: 28px 22px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
}

.cancel-confirm-dialog::backdrop {
    background: rgba(20, 28, 40, 0.65);
    backdrop-filter: blur(3px);
}

.cancel-confirm-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #fff0f0;
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
}

.cancel-confirm-dialog h4 {
    font-size: 20px;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 12px;
}

.cancel-confirm-dialog p {
    font-size: 13px;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 22px;
}

.cancel-confirm-dialog p strong {
    color: #dc3545;
}

.cancel-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cancel-confirm-actions button {
    border-radius: 7px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#keepAppointmentBtn {
    background: #ffffff;
    border: 1px solid #ced4da;
    color: #495057;
}

#confirmCancelAppointmentBtn {
    background: #c82333;
    border: 1px solid #c82333;
    color: #ffffff;
}

.cancel-confirm-actions button:hover {
    opacity: 0.9;
}



.doctor-videos-add-btn {
    background-color: #ffffff !important;
    border: 1px solid #079B91 !important;
    color: #079B91 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}


.appointments-card .table thead th,
.appointments-card .table tbody td {
    font-size: 14px;
    font-weight: 600;
}




/* Match Cancel/Edit button with Cancel button */
.appointments-card .cancel-edit-appointment-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    border-radius: 9px !important;
    white-space: nowrap;
}

.doctor-video-preview-image {
    position: relative;
    overflow: hidden;
}

.doctor-video-inline-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
    z-index: 5;
}
.dashboard-body:has(.appointments-page) {
    padding-top: 0 !important;
}

.appointments-page {
    padding-top: 30px !important;
}

.appointments-page .appointments-card {
    margin-top: 0 !important;
}

.appointments-page #appointments {
    margin-top: 24px !important;
}










/* BOOKING MESSAGE MODAL */
#bookingMessageDialog {
    width: min(420px, calc(100% - 32px));
    max-width: 420px;
    border: 1px solid #dcebed;
    border-radius: 18px;
    padding: 30px;
    background: #ffffff;
    color: #103B59;
    text-align: center;
    box-shadow: 0 18px 55px rgba(16, 59, 89, 0.20);
}

#bookingMessageDialog::backdrop {
    background: rgba(16, 40, 61, 0.55);
    backdrop-filter: blur(3px);
}

#bookingMessageDialog .cancel-confirm-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5f6f3;
    color: #079B91;
    font-size: 28px;
}

#bookingMessageDialog h4 {
    margin-bottom: 10px;
    color: #103B59;
    font-size: 21px;
    font-weight: 750;
}

#bookingMessageDialog p {
    margin-bottom: 24px;
    color: #6F879C;
    font-size: 14px;
    line-height: 1.6;
}

#bookingMessageDialog .cancel-confirm-actions {
    display: flex;
    justify-content: center;
}

#bookingMessageDialog .cancel-confirm-actions button {
    min-width: 115px;
    padding: 11px 25px;
    border: 1px solid #079B91;
    border-radius: 9px;
    background: #079B91;
    color: #ffffff;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: 0.2s ease;
}

#bookingMessageDialog .cancel-confirm-actions button:hover {
    background: #067c75;
    border-color: #067c75;
}

/* BOOKING MESSAGE CLOSE BUTTON */
#bookingMessageDialog {
    position: relative;
}

.booking-message-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce5ed;
    border-radius: 10px;
    background: #f1f4f7;
    color: #103B59;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s ease;
}

.booking-message-close:hover {
    background: #e3eeef;
    color: #079B91;
}


















/* Patient Booking - Holiday Dates */

.booking-date-circle.holiday-date {
    background: #FDE8E8 !important;
    border: 2px solid #DC2626 !important;
    color: #DC2626 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

.booking-date-circle.holiday-date:hover {
    background: #FDE8E8 !important;
    color: #DC2626 !important;
    transform: none !important;
}

.booking-date-circle.holiday-date:disabled {
    pointer-events: auto;
}

.booking-date-label.holiday-label {
    color: #DC2626 !important;
    font-weight: 700;
}


/* Fix Font Awesome icons on Patient Login */

body.patient-login-page i.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal;
}

body.patient-login-page i.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal;
}












/* =========================================
   SECOND PATIENT POPUP - ADMIN THEME
========================================= */

#secondPatientModal .second-patient-modal {
    padding: 0 16px 20px !important;
    background: #ffffff !important;
    border: 1px solid #e0eaf0;
    border-radius: 15px !important;
    box-shadow: 0 15px 40px rgba(16, 59, 89, 0.20);
    overflow: hidden;
}

/* Navy popup heading */
#secondPatientModal .second-patient-modal h3 {
    margin: 0 -16px 16px !important;
    padding: 20px 52px 17px 16px;
    color: #ffffff !important;
    background: linear-gradient(110deg, #103B59, #176B78);
    font-size: 20px;
    font-weight: 700;
    border-radius: 0;
}

/* Description */
#secondPatientModal .second-patient-description {
    color: #647787;
    margin-bottom: 16px;
}

/* Close button */
#secondPatientModal .second-patient-close {
    top: 17px;
    right: 14px;
    width: 32px;
    height: 32px;
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 8px;
    font-size: 22px;
}

#secondPatientModal .second-patient-close:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* Input label */
#secondPatientModal .second-patient-modal label {
    color: #344c5d;
    font-size: 12px;
    font-weight: 700;
}

/* Input field */
#secondPatientModal .second-patient-modal input {
    min-height: 43px;
    border: 1px solid #d5e0e8;
    border-radius: 8px;
    color: #263746;
}

#secondPatientModal .second-patient-modal input:focus {
    border-color: #079B91;
    box-shadow: 0 0 0 3px rgba(7,155,145,0.12);
}

/* Teal booking button */
#secondPatientModal .second-patient-modal form > button {
    min-height: 42px;
    padding: 11px 20px;
    color: #ffffff;
    background: #079B91;
    border: 1px solid #079B91;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

#secondPatientModal .second-patient-modal form > button:hover:not(:disabled) {
    background: #067D77;
    border-color: #067D77;
    transform: none;
}














/* =========================================
   PATIENT APPOINTMENT CANCEL POPUPS
========================================= */

.patient-cancel-dialog,
.patient-success-dialog {
    width: min(420px, calc(100% - 30px));
    max-width: 420px;
    border: none;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    background: #ffffff;
    color: #343a40;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.20);
    overflow: visible;
}

.patient-cancel-dialog::backdrop,
.patient-success-dialog::backdrop {
    background: rgba(16, 35, 52, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Confirmation warning icon */
.patient-cancel-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fff0f1;
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
}

.patient-cancel-dialog h4 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #343a40;
}

.patient-cancel-dialog p {
    margin: 0 auto 22px;
    max-width: 350px;
    color: #6c757d;
    font-size: 13px;
    line-height: 1.7;
}

.patient-cancel-dialog p strong {
    color: #dc3545;
}

/* Confirmation buttons */
.patient-cancel-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.patient-cancel-actions button {
    min-height: 39px;
    padding: 9px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

#keepPatientBooking {
    background: #ffffff;
    color: #59636e;
    border: 1px solid #cbd3dc;
}

#keepPatientBooking:hover {
    background: #f1f4f7;
}

#confirmPatientCancel {
    background: #cf2336;
    color: #ffffff;
    border: 1px solid #cf2336;
}

#confirmPatientCancel:hover {
    background: #b91d2e;
}

.patient-cancel-actions button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success popup */
.patient-success-dialog {
    padding: 30px 24px;
    border-radius: 17px;
}

.patient-success-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e4f7f4;
    color: #009f91;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.patient-success-dialog h4 {
    margin: 0 0 10px;
    color: #103b59;
    font-size: 21px;
    font-weight: 700;
}

.patient-success-dialog p {
    margin: 0 0 25px;
    color: #71869b;
    font-size: 13px;
}

#patientCancelSuccessOk {
    width: 115px;
    height: 44px;
    border: none;
    border-radius: 9px;
    background: #009f91;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

#patientCancelSuccessOk:hover {
    background: #00877b;
}


/* Success popup close button */
.patient-success-dialog {
    position: relative;
}

.patient-success-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: 1px solid #dce4ec;
    border-radius: 9px;
    background: #f5f7fa;
    color: #103b59;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
}

.patient-success-close:hover {
    background: #e8eef4;
}






/* =========================================
   MY APPOINTMENTS - MATCH ADMIN APPOINTMENTS TOP SPACING
========================================= */

.dashboard-layout .dashboard-body:has(.my-appointments-panel) {
    padding-top: 0 !important;
}

.dashboard-layout .my-appointments-panel {
    margin-top: 30px !important;
}



#bookingErrorModal .btn-close {
    z-index: 5;
    cursor: pointer;
    opacity: 0.7;
}

#bookingErrorModal .btn-close:hover {
    opacity: 1;
}


#bookingErrorModal .btn-close:focus,
#bookingErrorModal .btn-close:focus-visible,
#bookingErrorModal .btn-close:active {
    outline: none !important;
    box-shadow: none !important;
}























/* =========================================
   PATIENT DOCTOR VIDEOS
========================================= */

.patient-videos-page {
    padding: 25px;
}

.patient-videos-page .availability-heading {
    margin-bottom: 28px;
}

.patient-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.patient-video-card {
    background: #fff;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(16, 59, 89, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.patient-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(16, 59, 89, 0.12);
}

.patient-video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #eaf0f5;
    overflow: hidden;
    cursor: pointer;
}

.patient-video-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.patient-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: #079b91;
    color: #fff;
    font-size: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}

.patient-video-play:hover {
    background: #087d77;
    transform: translate(-50%, -50%) scale(1.08);
}

.patient-video-card-body {
    padding: 18px;
}

.patient-video-card-body h3 {
    color: #103B59;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

.patient-video-player {
    width: 100%;
    height: 100%;
    min-height: 200px;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
    background: #000;
}

.patient-video-empty {
    background: #fff;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    padding: 55px 20px;
    text-align: center;
}

.patient-video-empty > i {
    font-size: 48px;
    color: #079b91;
}

.patient-video-empty h3 {
    color: #103B59;
    font-size: 20px;
    font-weight: 700;
    margin-top: 15px;
}

.patient-video-empty p {
    color: #71869a;
    margin-bottom: 0;
}





/* =========================================
   DOCTOR ANNOUNCEMENT POPUP
========================================= */

.doctor-announcement-container {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 370px;
    max-width: calc(100% - 30px);
    z-index: 99999;
}

.doctor-announcement-popup {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5edf2;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(16, 40, 61, 0.18);
    animation: doctorAnnouncementSlideUp 0.6s ease forwards;
}

.doctor-announcement-popup[hidden] {
    display: none !important;
}

.doctor-announcement-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-right: 12px;
}

.doctor-announcement-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: #fff3df;
    color: #d3913d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.doctor-announcement-details {
    flex: 1;
    min-width: 0;
}

.doctor-announcement-label {
    display: block;
    color: #079b91;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    margin-bottom: 5px;
}

.doctor-announcement-details h4 {
    color: #103b59;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.4;
}

.doctor-announcement-details p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 9px;
    overflow-wrap: anywhere;
}

.doctor-announcement-expiry {
    display: block;
    color: #d3913d;
    font-size: 11px;
    font-weight: 600;
}

.doctor-announcement-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 25px;
    height: 25px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.doctor-announcement-close:hover {
    color: #103b59;
}

@keyframes doctorAnnouncementSlideUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}







/* Doctor Videos - Header vertical dividers */
.doctor-videos-table-header > div:not(:first-child) {
    border-left: 1px solid #d5e3f5;
    box-sizing: border-box;
}



/* =========================================
   PATIENT LOCATION POPUP
========================================= */

.patient-location-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 25, 40, 0.72);
    backdrop-filter: blur(5px);
}

.patient-location-modal {
    width: 100%;
    max-width: 460px;
    padding: 35px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    animation: patientModalShow 0.3s ease;
}

.patient-location-modal-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf2f7;
    color: #103b59;
    border-radius: 50%;
    font-size: 23px;
}

.patient-location-modal h2 {
    margin: 0 0 10px;
    color: #103b59;
    font-size: 25px;
    text-align: center;
}

.patient-location-modal > p {
    margin: 0 0 24px;
    color: #687786;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.patient-location-patient-info {
    padding: 15px;
    margin-bottom: 22px;
    background: #f5f8fa;
    border-radius: 10px;
}

.patient-location-patient-info > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.patient-location-patient-info > div + div {
    margin-top: 12px;
}

.patient-location-patient-info span {
    color: #82909c;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.patient-location-patient-info strong {
    color: #263c4e;
    font-size: 14px;
}

.patient-location-input-group label {
    display: block;
    margin-bottom: 9px;
    color: #263c4e;
    font-size: 12px;
    font-weight: 700;
}

.patient-location-input-wrapper {
    position: relative;
}

.patient-location-input-wrapper i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #103b59;
}

.patient-location-input-wrapper input {
    width: 100%;
    min-height: 48px;
    padding: 12px 15px 12px 43px;
    border: 1px solid #dce3e9;
    border-radius: 9px;
    outline: none;
    font-size: 14px;
    box-sizing: border-box;
}

.patient-location-input-wrapper input:focus {
    border-color: #103b59;
    box-shadow: 0 0 0 3px rgba(16, 59, 89, 0.09);
}

.patient-location-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.patient-location-modal-actions button {
    flex: 1;
    min-height: 46px;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.patient-location-cancel {
    background: #edf1f4;
    color: #465563;
}

.patient-location-save {
    background: #103b59;
    color: #ffffff;
}

.patient-location-save:hover {
    background: #174e73;
}

@keyframes patientModalShow {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}





/* LOCATION POPUP CLOSE BUTTON */

.patient-location-modal {
    position: relative;
}

.patient-location-close {
    position: absolute;
    top: 15px;
    right: 17px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #edf5f4;
    color: #045862;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.patient-location-close:hover {
    background: #045862;
    color: #ffffff;
}

/* MATCH SOFTWARE COLOUR COMBINATION */

.patient-location-modal-icon {
    background: #e7f2f1;
    color: #045862;
}

.patient-location-modal h2 {
    color: #045862;
}

.patient-location-input-wrapper input:focus {
    border-color: #045862;
    box-shadow: 0 0 0 3px rgba(4, 88, 98, 0.10);
}

.patient-location-input-wrapper i {
    color: #045862;
}

.patient-location-save {
    background: #045862;
}

.patient-location-save:hover {
    background: #03464e;
}





/* VIEW APPOINTMENTS - LIGHT BLACK TABLE TEXT */

.appointments-responsive-table thead th,
.appointments-responsive-table tbody td {
    color: #555555 !important;
    font-weight: 500 !important;
}












/* =========================================
   ADMIN LOGIN - MOBILE RESPONSIVE
   767x1024, 424, 412, 400, 393, 385, 360
========================================= */

@media (max-width: 767px) {

    /* Single column: hide the big photo panel */
    .login-page {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .login-page .clinic-panel {
        display: none;
    }

    /* Centered card on a soft background */
    .login-page .form-panel {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 32px 24px;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at 50% 0%, rgba(7, 155, 145, 0.12), transparent 55%),
            linear-gradient(160deg, #eef5fb, #e4eef9);
    }

    .login-page .login-card {
        width: 100%;
        max-width: 440px;
        padding: 34px 28px 28px;
        border-radius: 24px;
        box-shadow: 0 18px 50px rgba(20, 57, 87, 0.12);
    }

    /* Logo on top (icon only, the name is shown below) */
    .login-page .mobile-brand {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
    }

    .login-page .mobile-brand > span:last-child {
        display: none;
    }

    .login-page .mobile-brand .brand-icon {
        width: 58px;
        height: 58px;
        font-size: 30px;
        border-radius: 17px;
    }

    /* Heading block, centered with a gold divider */
    .login-page .card-heading {
        margin-bottom: 26px;
    }

    .login-page .card-heading .small-label {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .login-page .card-heading h2 {
        font-size: 32px;
        margin-bottom: 0;
    }

    .login-page .card-heading h2::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin: 12px auto 14px;
        border-radius: 3px;
        background: #D99532;
    }

    .login-page .clinic-login-name {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .login-page .card-heading > p {
        font-size: 12px;
    }

    /* Form fields: touch-friendly, no iOS zoom */
    .login-page .form-group {
        margin-bottom: 20px;
    }

    .login-page .input-wrap {
        min-height: 52px;
    }

    .login-page .input-wrap input {
        height: 50px;
        font-size: 16px;
    }

    .login-page .login-options {
        margin-bottom: 22px;
    }

    .login-page .login-submit {
        min-height: 54px;
        font-size: 15px;
    }

    .login-page .separator {
        margin: 22px 0;
    }
    
    
    
    
    
    
        /* VIEW APPOINTMENTS - MOBILE ACTION BUTTONS */

    .appointments-responsive-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .appointments-responsive-table table {
        min-width: 850px;
    }

    /*.appointments-responsive-table th:last-child,*/
    /*.appointments-responsive-table td:last-child {*/
    /*    position: sticky;*/
    /*    right: 0;*/
    /*    min-width: 175px;*/
    /*    white-space: nowrap;*/
    /*    background: #ffffff;*/
    /*    z-index: 5;*/
    /*    box-shadow: -5px 0 8px rgba(16, 59, 89, 0.08);*/
    /*}*/

    /*.appointments-responsive-table thead th:last-child {*/
    /*    background: #eaf4fc;*/
    /*    z-index: 6;*/
    /*}*/

    .appointments-responsive-table td:last-child .d-flex {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .appointments-responsive-table td:last-child button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    
    
       
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}
@media (max-width: 991px) {

    .dashboard-layout .sidebar {
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
    }

    .dashboard-layout .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.28);
    }

    .dashboard-layout .main-content {
        margin-left: 0;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: none;
        background: rgba(8, 43, 67, 0.55);
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.show {
        display: block;
    }

    body.sidebar-locked {
        overflow: hidden;
    }

    /* Top bar */
    .dashboard-layout .topbar {
        height: 64px;
        padding: 0 16px;
        gap: 12px;
    }

    .dashboard-layout .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        font-size: 26px;
        line-height: 1;
        flex-shrink: 0;
    }

    .dashboard-layout .breadcrumb-text {
        flex: 1;
        min-width: 0;
    }

    /* Page body */
    .dashboard-layout .dashboard-body {
        padding: 16px;
    }

    /* Welcome banner stacks */
    .dashboard-layout .welcome-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        min-height: 0;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .dashboard-layout .welcome-row h1 {
        font-size: 26px;
        line-height: 1.3;
    }

    .dashboard-layout .welcome-row p {
        font-size: 14px;
    }

    .dashboard-layout .today-date {
        padding: 11px 14px;
    }

    /* Summary cards: one per row */
    .admin-dashboard-summary {
        padding: 6px 0 0 !important;
        margin-bottom: 16px !important;
    }

    .admin-dashboard-title {
        font-size: 22px !important;
        margin-bottom: 14px !important;
    }

    .admin-dashboard-cards {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .admin-dashboard-card {
        min-height: 0 !important;
        padding: 18px !important;
    }

    .admin-card-value {
        font-size: 32px !important;
    }

    /* Footer */
    .dashboard-layout .dashboard-footer {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
    }
}


/* Sidebar close (X) button - mobile only */
.dashboard-layout .sidebar-close {
    display: none;
}





/* Admin Sidebar Close Button - Mobile */
@media (max-width: 991px) {
    .dashboard-layout .sidebar-close {
        display: flex !important;
        position: absolute;
        top: 15px;
        right: 14px;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        border: none;
        border-radius: 6px;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        z-index: 1005;
    }
}

@media (min-width: 992px) {
    .dashboard-layout .sidebar-close {
        display: none !important;
    }
}










@media (max-width: 991px) {

    .dashboard-layout .sidebar-close {
        position: absolute;
        top: 16px;
        right: 14px;
        z-index: 2;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 10px;
        font-size: 15px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .dashboard-layout .sidebar-close:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    /* Keep the clinic name clear of the X */
    .dashboard-layout .sidebar-brand {
        padding-right: 40px;
    }
}










/* Small phones: 424, 412, 400, 393, 385, 360 */

@media (max-width: 480px) {

    .login-page .form-panel {
        padding: 22px 16px;
    }

    .login-page .login-card {
        padding: 28px 20px 24px;
        border-radius: 22px;
    }

    .login-page .mobile-brand .brand-icon {
        width: 52px;
        height: 52px;
        font-size: 27px;
        border-radius: 15px;
    }

    .login-page .card-heading h2 {
        font-size: 28px;
    }

    .login-page .clinic-login-name {
        font-size: 17px;
    }

    .login-page .input-wrap {
        gap: 10px;
        padding: 0 14px;
    }

    .login-page .login-options {
        font-size: 11px;
    }
}

/* Very small: 360x640, 360x772 */
@media (max-width: 380px) {

    .login-page .form-panel {
        padding: 16px 12px;
    }

    .login-page .login-card {
        padding: 24px 16px 20px;
    }

    .login-page .card-heading h2 {
        font-size: 26px;
    }

    .login-page .login-options {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}







/* Appointment calendar - mobile date circle spacing */

@media (max-width: 480px) {

    .booking-dates {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 18px;
    }

    .booking-date-option {
        width: 100%;
        min-width: 0;
        gap: 6px;
    }

    .booking-date-circle {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        flex-shrink: 0;
    }

    .booking-date-circle .date-day {
        font-size: 9px;
    }

    .booking-date-circle .date-number {
        font-size: 19px;
    }

    .booking-date-label {
        margin-top: 2px;
        font-size: 10px;
    }

    .booking-date-circle.selected {
        transform: none;
    }
    
    
    
    
        /* Doctor Availability Calendar - Circle Spacing */

    .availability-page .availability-calendar-weekdays,
    .availability-page .availability-calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .availability-page .availability-day {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .availability-page .availability-day .day-number {
        font-size: 13px !important;
    }

    .availability-page .availability-day .day-name {
        font-size: 8px !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
     .availability-page .availability-calendar-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .availability-page .calendar-nav-btn {
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        padding: 8px 7px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .availability-page .availability-month-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}
















/* PATIENT LOGIN - MOBILE LAYOUT LIKE ADMIN LOGIN */

@media (max-width: 767px) {

    .patient-login-layout {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* Hide left clinic image and welcome content */
    .patient-login-visual {
        display: none;
    }

    /* Full-screen background */
    .patient-login-form-side {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 32px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(7, 155, 145, 0.12),
                transparent 55%
            ),
            linear-gradient(160deg, #eef5fb, #e4eef9);
    }

    /* Centre the patient login card */
    .patient-login-card {
        width: 100%;
        max-width: 440px;
        padding: 34px 28px 28px;
        border-radius: 24px;
        box-shadow: 0 18px 50px rgba(20, 57, 87, 0.12);
    }
}











/* =========================================
   PATIENT PROFILE - MOBILE RESPONSIVE FIX
========================================= */

@media (max-width: 600px) {

    .patient-profile-page {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .patient-profile-page .availability-card {
        width: 100%;
        margin: 12px auto 0;
    }

    .patient-profile-page .availability-card .card-body {
        padding: 20px 18px;
    }

    .patient-profile-page .patient-profile-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
    }

    .patient-profile-page .availability-field {
        width: 100%;
        min-width: 0;
    }

    .patient-profile-page .availability-field .form-control {
        width: 100%;
        min-height: 46px;
        font-size: 14px;
    }

    .patient-profile-page .availability-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .patient-profile-page .availability-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}








/* =========================================
   PATIENT BOOKING - MOBILE ALIGNMENT
========================================= */

@media (max-width: 480px) {

    .dashboard-layout .dashboard-body {
        padding: 14px 12px 20px !important;
    }

    .dashboard-layout .dashboard-body > .availability-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .booking-panel {
        width: 100%;
        padding: 18px 14px !important;
        border-radius: 16px;
    }

    .booking-panel-heading {
        align-items: center;
        gap: 11px;
        margin-bottom: 22px;
    }

    .booking-heading-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 20px;
    }

    .booking-panel-heading h2 {
        font-size: 17px;
        line-height: 1.35;
    }

    .booking-panel-heading p {
        font-size: 11px;
        line-height: 1.5;
    }

    .booking-dates {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-items: center;
        column-gap: 4px;
        row-gap: 16px;
    }

    .booking-date-option {
        width: 100%;
        align-items: center;
    }

    .selected-date-summary {
        margin-top: 20px;
        padding: 11px 12px;
        font-size: 11px;
        line-height: 1.5;
        border-radius: 10px;
    }

    .booking-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 18px;
    }

    .booking-action-btn {
        width: 100%;
        min-width: 0;
        min-height: 58px;
        padding: 9px 6px;
        flex-direction: column;
        gap: 5px;
        border-radius: 10px;
        font-size: 10px;
        line-height: 1.3;
        letter-spacing: 0;
    }

    .booking-action-btn i {
        font-size: 15px;
    }

    .booking-note {
        margin-top: 15px;
        font-size: 10px;
        line-height: 1.5;
    }
}

@media (max-width: 380px) {

    .booking-panel {
        padding: 16px 11px !important;
    }

    .booking-panel-heading h2 {
        font-size: 15px;
    }

    .booking-date-circle {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    .booking-date-circle .date-number {
        font-size: 17px;
    }

    .booking-actions {
        gap: 7px;
    }

    .booking-action-btn {
        font-size: 9px;
        padding: 8px 4px;
    }
}











/* =========================================
   ADMIN APPOINTMENT DATE NAVIGATION
   MOBILE RESPONSIVE FIX
========================================= */

@media (max-width: 600px) {

    .appointment-date-navigation {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        padding: 12px 8px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .appointment-date-list {
        display: flex;
        width: 100%;
        min-width: 0;
        justify-content: center;
        gap: 6px;
        padding: 0 32px;
        box-sizing: border-box;
    }

    .appointment-date-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 2px;
        text-align: center;
        box-sizing: border-box;
    }

    .appointment-date-item span {
        font-size: 10px;
        white-space: nowrap;
    }

    .appointment-date-item strong {
        font-size: 12px;
        white-space: nowrap;
    }

    .date-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        flex: none;
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .date-arrow[data-step="-1"] {
        left: 6px;
    }

    .date-arrow[data-step="1"] {
        right: 6px;
    }
    
    
    
    
    
    
    
     .edit-availability-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .edit-availability-page #editAvailabilityForm {
        width: 100% !important;
        min-width: 0 !important;
    }

    .edit-availability-page .edit-availability-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 14px !important;
    }

    .edit-availability-page .edit-date-panel,
    .edit-availability-page .edit-settings-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    
    
    
    
    
    .edit-availability-page .edit-hours-section .edit-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .edit-availability-page .edit-hours-section .edit-field-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    .edit-availability-page .edit-hours-section .edit-input-with-icon {
        width: 100% !important;
        min-width: 0 !important;
    }

    .edit-availability-page .edit-hours-section .edit-input-with-icon > i {
        flex: 0 0 28px !important;
        width: 28px !important;
        font-size: 13px !important;
    }

    .edit-availability-page .edit-hours-section .edit-input-with-icon input[type="time"] {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 6px 2px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    
    
    

    
    
    .add-announcement-page .availability-section-heading {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .add-announcement-page .availability-section-icon {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .add-announcement-page .availability-section-heading-text {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .add-announcement-page .availability-section-title {
        font-size: 17px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
    }

    .add-announcement-page .availability-section-description {
        font-size: 10px !important;
        line-height: 1.45 !important;
        text-align: left !important;
        margin: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .add-announcement-page .announcements-view-btn {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        padding: 7px 9px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    
    
    
    .add-announcement-page .availability-announcement-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .add-announcement-page .availability-announcement-grid .availability-field {
        min-width: 0 !important;
        width: 100% !important;
    }

    .add-announcement-page .availability-announcement-grid .availability-field:last-child {
        grid-column: 1 / -1 !important;
    }

    .add-announcement-page .availability-announcement-grid .form-control {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}









/* =========================================
   VIEW AVAILABILITY - MOBILE & TABLET FIX
   767px, 600px, 424px, 412px, 400px,
   393px, 385px, 360px
========================================= */

@media screen and (max-width: 991px) {

    .view-availability-page {
        width: 100% !important;
        min-width: 0 !important;
    }

    .view-availability-page .availability-records-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Header and rows use identical five columns */
    .view-availability-page .availability-table-header,
    .view-availability-page .availability-record-card {
        display: grid !important;

        grid-template-columns:
            45px
            175px
            125px
            125px
            150px !important;

        width: 620px !important;
        min-width: 620px !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Header text must remain readable */
    .view-availability-page .availability-table-header {
        min-height: 55px !important;
        padding: 0 !important;
    }

    .view-availability-page .availability-table-header > div {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        padding: 8px 7px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Table body matches header width */
    .view-availability-page .availability-table-body {
        width: 620px !important;
        min-width: 620px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .view-availability-page .availability-record-card {
        min-height: 65px !important;
    }

    .view-availability-page .availability-record-card > .availability-data {
        min-width: 0 !important;
        padding: 8px 7px !important;
        font-size: 12px !important;
    }

    .view-availability-page .availability-record-card > .availability-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
    }
}
























/* VIEW ANNOUNCEMENTS - MOBILE TABLE FIX */
@media (max-width: 600px) {

    .announcement-page .announcement-table-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .announcement-page .announcement-table-header,
    .announcement-page .announcement-table-row {
        display: grid !important;
        grid-template-columns: 45px 140px 125px 200px 110px !important;
        width: 620px !important;
        min-width: 620px !important;
        box-sizing: border-box !important;
    }

    .announcement-page .announcement-table-header {
        align-items: center !important;
    }

    .announcement-page .announcement-table-row {
        align-items: stretch !important;
    }

    .announcement-page .announcement-table-header .availability-data,
    .announcement-page .announcement-table-row .availability-data {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .announcement-page .announcement-table-header .availability-data {
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 12px 6px !important;
    }

    .announcement-page .announcement-table-row .availability-data {
        font-size: 12px !important;
        padding: 12px 7px !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .announcement-page .announcement-table-row .announcement-actions-column {
        gap: 5px !important;
        justify-content: center !important;
    }
}


















/* =========================================
   VIEW AVAILABILITY DETAILS - MOBILE FIX
========================================= */

@media (max-width: 600px) {

    .availability-modal-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .availability-details-modal {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 auto !important;
        overflow: visible !important;
        border-radius: 14px !important;
    }

    .availability-modal-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 45px 18px 22px !important;
    }

    .availability-modal-content {
        width: 100% !important;
        min-width: 0 !important;
        padding: 20px 16px !important;
        overflow: visible !important;
    }
    
.availability-modal-summary {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 0.8fr) 28px minmax(0, 1.5fr) !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 10px !important;
}

.availability-modal-summary-divider {
    display: none !important;
}

.availability-date-range-info {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.availability-date-range-values {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 4px !important;
}

.availability-date-range-values strong {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    flex: none !important;
}



.availability-date-range-info {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
}

.availability-date-range-values {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 3px !important;
}

.availability-date-range-values strong {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    flex: none !important;
}

.availability-date-range-values .date-separator {
    flex: none !important;
    white-space: nowrap !important;
}


.availability-date-range-values strong {
    font-size: 14px !important;
    overflow-wrap: anywhere !important;
}

.availability-modal-summary-divider {
    display: none !important;
}
    
    .availability-modal-summary > div:nth-child(2),
.availability-modal-summary > div:nth-child(4) {
    padding-left: 8px !important;
    min-width: 0 !important;
}

.availability-modal-summary-icon {
    margin-right: 5px !important;
}
    

    .availability-date-range-info {
    padding-left: 10px !important;
    margin-left: 4px !important;
    box-sizing: border-box !important;
}
    
    

    /* Availability Date From / To - Horizontal Layout */
.availability-modal-grid .availability-modal-detail-card:nth-child(1),
.availability-modal-grid .availability-modal-detail-card:nth-child(2) {
    grid-column: auto !important;
}




.availability-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.availability-modal-grid .availability-modal-detail-card {
    gap: 8px !important;
    min-width: 0 !important;
}






/* Keep Schedule Dates on One Line */
.availability-modal-grid .availability-modal-detail-card:nth-child(1) strong,
.availability-modal-grid .availability-modal-detail-card:nth-child(2) strong {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}


    .availability-modal-grid .availability-modal-detail-card span {
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
}
    
     .time-slot-btn {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 4px 1px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
  
.availability-modal-blocked-section > .availability-modal-section-title {
    margin-top: 14px !important;
    padding-top: 3px !important;
    margin-bottom: 15px !important;
}
}

/* PASTE NEW CODE HERE */
/* Availability Date Range - keep on one line */
@media (max-width: 900px) {

    .availability-date-range-info {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .availability-date-range-values {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 4px !important;
    }

    .availability-date-range-values strong,
    .availability-date-range-values .date-separator {
        white-space: nowrap !important;
        flex: none !important;
        overflow-wrap: normal !important;
    }
}

/* Small phones: fit "01 Nov 2026 - 30 Nov 2026" in one line */
@media (max-width: 600px) {

   .availability-date-range-values strong {
       font-size: 14px !important;
    }}

/* Restore original desktop summary layout */
.availability-summary-card {
    display: contents;
}
    
    
    
    
    
    
/* Availability ID + Date Range side by side on phones (icons hidden) */
@media (max-width: 600px) {

    #availabilityModalDetails .availability-modal-summary {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 12px !important;
    }

    /* hide the 2 icons and the divider to free up width */
    #availabilityModalDetails .availability-modal-summary-icon,
    #availabilityModalDetails .availability-modal-summary-divider {
        display: none !important;
    }

    #availabilityModalDetails .availability-modal-summary > div {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    /* Availability ID column */
    #availabilityModalDetails .availability-modal-summary > div:nth-of-type(1) {
        padding-right: 14px !important;
    }

    /* Date range column with a thin separator */
    #availabilityModalDetails .availability-date-range-info {
        width: 100% !important;
        flex: none !important;
        padding-left: 14px !important;
        border-left: 1px solid #d5e6e4 !important;
    }

    #availabilityModalDetails .availability-modal-summary span {
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    #availabilityModalDetails .availability-date-range-values {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    #availabilityModalDetails .availability-date-range-values strong,
    #availabilityModalDetails .availability-date-range-values .date-separator {
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        flex: none !important;
    }
}

@media (max-width: 400px) {
    #availabilityModalDetails .availability-date-range-values strong,
    #availabilityModalDetails .availability-date-range-values .date-separator {
        font-size: 11px !important;
    }
}

@media (max-width: 370px) {
    #availabilityModalDetails .availability-modal-summary span {
        font-size: 10px !important;
    }
    #availabilityModalDetails .availability-date-range-values strong,
    #availabilityModalDetails .availability-date-range-values .date-separator {
        font-size: 10px !important;
    }
}

/* Separator between Availability ID and Date Range (phones) */
@media (max-width: 600px) {

    #availabilityModalDetails .availability-modal-summary {
        grid-template-columns: 70px minmax(0, 1fr) !important;
        column-gap: 0 !important;
    }

    /* ID column: space on the right */
    #availabilityModalDetails .availability-modal-summary > div:nth-child(2) {
        padding-right: 12px !important;
        margin-right: 0 !important;
    }

    /* Date range column: visible separator line + space on the left */
    #availabilityModalDetails .availability-modal-summary > .availability-date-range-info {
        padding-left: 14px !important;
        margin-left: 0 !important;
        border-left: 1px solid #b9d6d3 !important;
        min-height: 36px !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* VIEW ANNOUNCEMENTS - MOBILE BUTTON FIX */
@media (max-width: 600px) {

    .announcement-page .availability-card-body {
        padding: 18px 14px !important;
    }

    .announcement-page .block-time-records-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 18px !important;
        box-sizing: border-box !important;
    }

    .announcement-page .block-time-total {
        gap: 14px !important;
        min-width: 0 !important;
    }

    .announcement-page .block-time-total-icon {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        font-size: 23px !important;
        border-radius: 16px !important;
    }

    .announcement-page .block-time-back-btn {
        display: flex !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 11px 14px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }
    
    
    
    
    .add-video-page .availability-card-body {
        padding: 18px 14px !important;
    }

    /* icon + text on row 1, button on row 2 */
    .add-video-page .availability-section-heading {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
        padding-bottom: 16px !important;
    }

    .add-video-page .availability-section-icon {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        font-size: 20px !important;
    }

    .add-video-page .availability-section-heading-text {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    .add-video-page .availability-section-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
        white-space: normal !important;
    }

    .add-video-page .availability-section-description {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* View Videos button: own row, compact, left aligned */
    .add-video-page .announcements-view-btn {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 9px 16px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Title and URL fields: one per row */
    .add-video-page .availability-video-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .add-video-page .availability-actions {
        margin-top: 16px !important;
        padding-top: 16px !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}
/* VIEW ANNOUNCEMENTS - TABLET TABLE FIX */
@media (min-width: 601px) and (max-width: 900px) {

    .announcement-page .announcement-table-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .announcement-page .announcement-table-header,
    .announcement-page .announcement-table-row {
        display: grid !important;
        grid-template-columns: 45px 140px 155px 200px 110px !important;
        width: 650px !important;
        min-width: 650px !important;
        box-sizing: border-box !important;
    }

    .announcement-page .announcement-table-header .availability-data,
    .announcement-page .announcement-table-row .availability-data {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .announcement-page .announcement-table-header .availability-data {
        white-space: nowrap !important;
    }

    .announcement-page .announcement-date-column {
        white-space: nowrap !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* =========================================
   ANNOUNCEMENT DETAILS POPUP - MOBILE
   (same layout as Doctor Availability popup)
========================================= */
@media (max-width: 700px) {

    .announcement-details-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* one column: teal header on top, details below */
    .announcement-details-modal {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        margin: auto !important;
        overflow: visible !important;
        border-radius: 16px !important;
    }

    /* teal header, centered like Doctor Availability */
    .announcement-details-brand {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 45px 18px 24px !important;
        min-height: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .announcement-details-close {
        top: 14px !important;
        right: 14px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 22px !important;
    }

    .announcement-details-brand-icon {
        width: 56px !important;
        height: 56px !important;
        margin: 0 0 14px !important;
        font-size: 25px !important;
    }

    .announcement-details-brand h2 {
        margin: 0 0 5px !important;
        font-size: 20px !important;
    }

    .announcement-details-brand p {
        font-size: 12px !important;
    }

    /* doctor photo and name visible again */
    .announcement-details-avatar {
        display: block !important;
        width: 90px !important;
        height: 90px !important;
        margin: 20px 0 12px !important;
    }

    .announcement-details-brand h3 {
        display: block !important;
        margin: 0 0 5px !important;
        font-size: 15px !important;
    }

    .announcement-details-brand > span {
        display: block !important;
        font-size: 11px !important;
    }

    /* details area */
    .announcement-details-content {
        padding: 20px 16px 22px !important;
        overflow: visible !important;
    }

    .announcement-details-heading {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
    }

    .announcement-details-heading h2 {
        font-size: 19px !important;
    }

    .announcement-details-summary {
        gap: 10px !important;
        padding: 11px 12px !important;
    }

    .announcement-details-item {
        gap: 10px !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .announcement-details-item-icon,
    .announcement-details-summary-icon {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        font-size: 17px !important;
    }

    .announcement-details-summary strong,
    .announcement-details-item strong {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .announcement-details-message {
        min-height: 70px !important;
    }
}




















/* =========================================
   VIEW AVAILABILITY - TOTAL RECORDS INLINE
========================================= */

@media screen and (max-width: 991px) {

    .view-availability-page .availability-total {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .view-availability-page .availability-total-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    .view-availability-page .availability-total-label {
        margin: 0 !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .view-availability-page .availability-total-number {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

}































/* =========================================
   VIEW DOCTOR VIDEOS - MOBILE
   (424, 412, 400, 393, 385, 360 widths)
========================================= */
@media (max-width: 700px) {

    /* less padding on the white card */
    .dashboard-layout section.availability-card.doctor-videos-list-card {
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }

    /* Total row: count on top, Add Video button below, full width */
    .doctor-videos-records-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 0 !important;
        margin: 0 0 18px !important;
    }

    .doctor-videos-total {
        gap: 14px !important;
        min-width: 0 !important;
    }

    .doctor-videos-total-icon {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        font-size: 23px !important;
        border-radius: 16px !important;
    }

    .doctor-videos-records-header .doctor-videos-add-btn,
    .doctor-videos-records-header .btn,
    .doctor-videos-records-header > a {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* table scrolls sideways inside its own box */
    .doctor-videos-horizontal-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .doctor-videos-horizontal-table .doctor-videos-table-header,
    .doctor-videos-horizontal-table .doctor-videos-table-row {
        display: grid !important;
        grid-template-columns: 45px 150px 220px 110px !important;
        width: 525px !important;
        min-width: 525px !important;
        box-sizing: border-box !important;
    }

    .doctor-videos-horizontal-table .doctor-videos-table-header > div {
        padding: 12px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .doctor-videos-horizontal-table .doctor-videos-table-row > div {
        padding: 10px !important;
        font-size: 12px !important;
    }

    .doctor-videos-horizontal-table .doctor-videos-actions-column {
        gap: 5px !important;
        justify-content: center !important;
    }

    /* ---------- Video details popup (view icon) ---------- */

    .doctor-video-details-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .doctor-video-details-modal {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        margin: auto !important;
        overflow: visible !important;
        border-radius: 16px !important;
    }

    .doctor-video-details-brand {
        min-height: 0 !important;
        padding: 45px 18px 24px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .doctor-video-details-close {
        top: 14px !important;
        right: 14px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .doctor-video-details-brand-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 14px !important;
        font-size: 25px !important;
    }

    .doctor-video-details-brand > p {
        margin-bottom: 18px !important;
    }

    .doctor-video-details-brand-circle {
        width: 90px !important;
        height: 90px !important;
        margin-bottom: 12px !important;
    }

    .doctor-video-details-content {
        padding: 20px 16px 22px !important;
    }

    .doctor-video-details-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
    }

    .doctor-video-details-header h2 {
        font-size: 19px !important;
    }

    .doctor-video-details-information {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 12px 10px !important;
        padding: 12px !important;
    }

    .doctor-video-information-icon,
    .doctor-video-details-small-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .doctor-video-details-url-card {
        padding: 13px !important;
        gap: 10px !important;
    }
}





/* =========================================
   EDIT DOCTOR VIDEO PAGE - MOBILE / TABLET
   (767, 424, 412, 400, 393, 385, 360 widths)
========================================= */
@media (max-width: 900px) {

    /* stop anything from pushing the page wider than the screen */
    .doctor-video-edit-page,
    .doctor-video-edit-page * {
        min-width: 0;
        box-sizing: border-box;
    }

    .doctor-video-edit-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 12px !important;
        min-height: 0 !important;
    }

    .doctor-video-edit-breadcrumb {
        gap: 8px !important;
        margin-bottom: 14px !important;
        font-size: 12px !important;
    }

    /* banner */
    .doctor-video-edit-banner {
        gap: 14px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
    }

    .doctor-video-edit-banner-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 26px !important;
        border-radius: 15px !important;
    }

    .doctor-video-edit-banner h1 {
        font-size: 21px !important;
        margin-bottom: 4px !important;
    }

    .doctor-video-edit-banner p {
        font-size: 13px !important;
    }

    /* one column: preview on top, form below */
    .doctor-video-edit-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .doctor-video-edit-grid > *,
    .doctor-video-edit-form-card,
    .doctor-video-preview-card,
    .doctor-video-edit-field-card,
    .doctor-video-edit-url-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* preview card */
    .doctor-video-preview-card {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .doctor-video-preview-heading,
    .doctor-video-edit-form-heading {
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .doctor-video-preview-heading-icon,
    .doctor-video-edit-form-heading > span {
        width: 44px !important;
        height: 44px !important;
        font-size: 21px !important;
        border-radius: 12px !important;
    }

    .doctor-video-preview-heading h2,
    .doctor-video-edit-form-heading h2 {
        font-size: 18px !important;
    }

    .doctor-video-preview-heading p,
    .doctor-video-edit-form-heading p {
        font-size: 12px !important;
    }

    .doctor-video-preview-image {
        min-height: 220px !important;
        border-radius: 14px !important;
    }

    .doctor-video-preview-play {
        width: 64px !important;
        height: 64px !important;
        border-width: 4px !important;
        font-size: 34px !important;
    }

    .doctor-video-preview-caption {
        padding: 12px !important;
        margin: 0 8px 8px !important;
    }

    .doctor-video-preview-caption h3 {
        font-size: 15px !important;
    }

    .doctor-video-preview-caption p {
        font-size: 12px !important;
    }

    .doctor-video-preview-info {
        gap: 10px !important;
        padding: 10px !important;
    }

    .doctor-video-preview-info-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    /* form card */
    .doctor-video-edit-form-card {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .doctor-video-edit-form-heading {
        padding-bottom: 14px !important;
    }

    .doctor-video-edit-field-card {
        padding: 14px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }

    .doctor-video-edit-field-heading {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .doctor-video-edit-number {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }

    .doctor-video-edit-field-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
    }

    .doctor-video-edit-field-heading label {
        font-size: 13px !important;
    }

    .doctor-video-edit-field-heading p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .doctor-video-edit-field-card .form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* current URL box: text on top, small Open button below */
    .doctor-video-edit-url-preview {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .doctor-video-edit-url-heading {
        gap: 10px !important;
    }

    .doctor-video-edit-url-heading > span {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    .doctor-video-edit-url-action {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .doctor-video-edit-url-action > span {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    .doctor-video-open-button {
        width: auto !important;
        min-height: 38px !important;
        padding: 8px 16px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        align-self: flex-start !important;
    }

    /* Cancel / Update buttons: small, side by side */
    .doctor-video-edit-footer {
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 6px !important;
        padding: 14px 0 0 !important;
    }

    .doctor-video-cancel-button,
    .doctor-video-update-button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 18px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        justify-content: center !important;
    }
}

/* phones */
@media (max-width: 480px) {

    .doctor-video-edit-footer {
        justify-content: stretch !important;
    }

    .doctor-video-cancel-button,
    .doctor-video-update-button {
        flex: 1 1 0 !important;
        padding: 8px 10px !important;
    }
}

/* very small phones */
@media (max-width: 400px) {

    .doctor-video-edit-banner-icon {
        display: none !important;
    }

    .doctor-video-edit-banner h1 {
        font-size: 19px !important;
    }

    .doctor-video-preview-image {
        min-height: 190px !important;
    }

    .doctor-video-edit-field-icon {
        display: none !important;
    }
    
    
    
    
    .edit-form-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }

    .edit-cancel-btn,
    .edit-update-btn {
        height: auto !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }

    .edit-cancel-btn {
        flex: 0 0 auto !important;
    }

    /* Update takes the remaining space; if it can't fit beside Cancel,
       it drops to its own full-width row, still on one line */
    .edit-update-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
}






/* DOCTOR VIDEOS - HEADING AND VIEW BUTTON INLINE */

@media screen and (max-width: 700px) {

    .add-video-page .availability-section-heading {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    .add-video-page .availability-section-icon {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .add-video-page .availability-section-heading-text {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .add-video-page .availability-section-title {
        white-space: nowrap !important;
        margin: 0 !important;
        font-size: 16px !important;
    }

    .add-video-page .availability-section-description {
        display: none !important;
    }

    .add-video-page .announcements-view-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 0 0 auto !important;
        padding: 7px 10px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

}


/* WALK-IN APPOINTMENT - MOBILE FIELD ALIGNMENT */

@media screen and (max-width: 600px) {

    /* Give date and time fields sufficient width */
    .appointments-page .appointments-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 16px !important;
    }

    /* Date and time labels */
    .appointments-page label[for="appointmentDate"],
    .appointments-page label[for="appointmentTime"] {
        display: block !important;
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        position: static !important;
    }

    /* Inputs and dropdowns */
    .appointments-page #appointmentDate,
    .appointments-page #appointmentTime {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Help text below time dropdown */
    .appointments-page .appointments-help {
        display: block !important;
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 9px !important;
        line-height: 1.4 !important;
        margin-top: 6px !important;
    }

}


/* WALK-IN PATIENT - KEEP HEADING ON ONE LINE */

@media screen and (max-width: 400px) {

   .appointments-page .appointments-card:has(#walkinBookingForm)
   .appointments-card-header h2 {
       font-size: 19px !important;
       white-space: nowrap !important;
        line-height: 1.3 !important;
        letter-spacing: -0.4px !important;
    }

}





















/* =========================================
   DOCTOR AVAILABILITY - MOBILE HEADING FIX
========================================= */

@media screen and (max-width: 700px) {

    .availability-page .availability-section-heading {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .availability-page .availability-section-icon {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 19px !important;
    }

    .availability-page .availability-section-heading-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .availability-page .availability-section-title {
        display: block !important;
        white-space: nowrap !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .availability-page .availability-section-description {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    .availability-page .availability-view-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-left: auto !important;
        padding: 7px 9px !important;
        font-size: 10px !important;
    }
}


@media screen and (max-width: 700px) {
    
    .availability-page .availability-section-title {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
    }

    .availability-page .availability-section-title::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 3px !important;
        width: 3px !important;
        height: 18px !important;
        border-radius: 4px;
        background: linear-gradient(180deg, #079B91, #49c5b7);
    }
    
    
    
   /* SETTINGS FORM - MOBILE RESPONSIVE */
@media screen and (max-width: 767px) {

    .settings-form-grid {
       grid-template-columns: minmax(0, 1fr) !important;
       gap: 18px !important;
    }

    .settings-form-grid .availability-field {
      width: 100%;
        min-width: 0;
   }

    .settings-form-grid .availability-field .form-label {
        min-height: auto !important;
        margin-bottom: 8px !important;
   }
    .settings-form-grid .availability-field .form-control,
    .settings-form-grid .availability-field .form-select {
        width: 100% !important;
    }

    .settings-card .availability-card-body {
        padding: 18px !important;
   }
} 
    
    
    
   
   
   
   
   
   
   
   
   
   
   
   
   
   /* Selected appointment date */
/*.booking-date-circle.selected {*/
/*    background: linear-gradient(135deg, #103B59 0%, #079B91 100%) !important;*/
/*    border: 4px solid #103B59 !important;*/
/*    color: #FFFFFF !important;*/

/*    box-shadow:*/
/*        0 0 0 4px rgba(7, 155, 145, 0.22),*/
/*        0 8px 20px rgba(16, 59, 89, 0.25);*/

/*    transform: scale(1.06);*/
/*}*/
   
   
   /* Selected appointment date - Gold highlight */
.booking-date-circle.selected {
   background: linear-gradient(135deg, #103B59 0%, #079B91 100%) !important;
    border: 4px solid #D4A24C !important;
    color: #FFFFFF !important;
    box-shadow:
        0 0 0 4px rgba(212, 162, 76, 0.22),
        0 8px 20px rgba(16, 59, 89, 0.20);
    transform: scale(1.06);
}
   
   
/*   #appointmentTime option.past-time-option,*/
/*#appointmentTime option.past-time-option:disabled {*/
/*    background-color: transparent !important;*/
/*    color: #c62828 !important;*/
/*}*/
   
   
   

/* =================================
   LUNCH BREAK SETTINGS
================================= */

.lunch-break-field {
    align-self: start;
}

.lunch-break-card {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #b8d8f5;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0f6ff, #eaf3ff);
}

.lunch-break-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.lunch-break-header .form-label {
    color: #10283d;
    font-size: 17px;
    font-weight: 700;
}

.lunch-break-header .form-label i {
    margin-right: 8px;
    color: #0752a0;
}

.lunch-break-header .form-switch {
    padding-left: 2.8em;
}

.lunch-break-header .form-check-input {
    width: 2.5em;
    height: 1.3em;
    cursor: pointer;
}

/*.lunch-break-header .form-check-input:checked {*/
/*    background-color: #009f8b;*/
/*    border-color: #009f8b;*/
/*}*/

.lunch-break-card .form-label {
    color: #10283d;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
}

.lunch-break-card .form-select {
    min-height: 43px;
    border: 1px solid #cbd9e8;
    border-radius: 9px;
    color: #10283d;
    background-color: #fff;
    font-size: 14px;
}

.lunch-break-note {
    display: block;
    margin-top: 12px;
    color: #315477;
    font-size: 12px;
}

.lunch-break-note i {
    margin-right: 5px;
    color: #0752a0;
}

/* Lunch Break - Image 2 Design */

.lunch-break-card {
    background: linear-gradient(135deg, #f0f6ff, #eaf3ff) !important;
    border: 1px solid #b8d8f5 !important;
    border-radius: 14px;
    padding: 16px 18px;
}

/* Enabled toggle - teal green */
.lunch-break-header .form-check-input:checked {
    background-color: #009f8b !important;
    border-color: #009f8b !important;
}

/* Toggle focus - remove unwanted red/blue glow */
.lunch-break-header .form-check-input:focus {
    box-shadow: none !important;
}


.lunch-break-card {
    background: #d9f0ff !important;
    border: 3px solid blue !important;
}

@media (max-width: 576px) {
    .lunch-break-card {
        padding: 14px;
    }

    .lunch-break-header .form-label {
        font-size: 15px;
    }
}