/**
 * Doctaz Brand Theme — single source of truth for primary color tokens.
 * Loaded LAST so it wins over Bootstrap, Ubold (app.min.css), and custom.css.
 *
 * Primary = teal #0d9488. Every existing Bootstrap utility that resolves
 * --bs-primary inherits automatically; targeted selectors below cover
 * Ubold's pre-compiled rules that hard-code the original purple.
 */

:root {
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
    --primary: #0d9488; /* Ubold's own variable */
    --doctaz-brand: #0d9488;
    --doctaz-brand-dark: #0b7a70;
    --doctaz-brand-darker: #095e57;
    --doctaz-brand-soft: #ccfbf1;
    --doctaz-brand-soft-border: #99f6e4;
}

/* Buttons */
.btn-primary {
    color: #fff !important;
    background-color: var(--doctaz-brand) !important;
    border-color: var(--doctaz-brand) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--doctaz-brand-dark) !important;
    border-color: var(--doctaz-brand-dark) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--doctaz-brand) !important;
    border-color: var(--doctaz-brand) !important;
    opacity: 0.65;
}
.btn-outline-primary {
    color: var(--doctaz-brand);
    border-color: var(--doctaz-brand);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--doctaz-brand);
    border-color: var(--doctaz-brand);
    color: #fff;
}

/* Surfaces */
.bg-primary { background-color: var(--doctaz-brand) !important; }
.bg-soft-primary { background-color: var(--doctaz-brand-soft) !important; }
.text-primary { color: var(--doctaz-brand) !important; }
.border-primary { border-color: var(--doctaz-brand) !important; }

/* Links / focus */
a { color: var(--doctaz-brand); }
a:hover { color: var(--doctaz-brand-dark); }
.form-control:focus,
.form-select:focus {
    border-color: var(--doctaz-brand);
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15);
}
.form-check-input:checked {
    background-color: var(--doctaz-brand);
    border-color: var(--doctaz-brand);
}
.form-check-input:focus {
    border-color: var(--doctaz-brand);
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15);
}

/* Progress */
.progress-bar { background-color: var(--doctaz-brand); }

/* Alerts (Bootstrap variants targeting primary) */
.alert-primary {
    color: var(--doctaz-brand-darker);
    background-color: var(--doctaz-brand-soft);
    border-color: var(--doctaz-brand-soft-border);
}

/* Badges */
.badge-primary,
.badge.bg-primary {
    background-color: var(--doctaz-brand) !important;
    color: #fff;
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--doctaz-brand);
    border-color: var(--doctaz-brand);
}
.page-link { color: var(--doctaz-brand); }
.page-link:hover { color: var(--doctaz-brand-dark); }

/* Dropdown active item */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--doctaz-brand);
    color: #fff;
}

/* Modal accent (replaces custom.css .modalBody-Background teal #26a69a) */
.modalBody-Background {
    background: var(--doctaz-brand);
    border: 2px solid var(--doctaz-brand);
    padding: 12px !important;
}

/* Toastr — keep brand consistency on info toasts */
#toast-container > .toast-info {
    background-color: var(--doctaz-brand);
}

/* ---------------------------------------------------------------------------
 * Unified topbar dropdown menus
 * Applies to language picker (.lang-dropdown-menu), profile dropdown
 * (.profile-dropdown / .user-pro-dropdown), and notifications (.dropdown-lg
 * inside .notification-list) so all three share one chrome.
 * ------------------------------------------------------------------------- */
.lang-dropdown-menu,
.profile-dropdown,
.user-pro-dropdown,
.notification-list .dropdown-menu {
    min-width: 200px !important;
    margin-top: 8px !important;
    padding: 6px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
    background-color: #fff;
}

.notification-list .dropdown-menu.dropdown-lg {
    min-width: 320px !important;
    padding: 4px !important;
}

.lang-dropdown-menu .dropdown-item,
.profile-dropdown .dropdown-item,
.user-pro-dropdown .dropdown-item,
.notification-list .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.3;
    color: #344054 !important;
    transition: background-color .12s ease, color .12s ease;
}

.lang-dropdown-menu .dropdown-item:hover,
.profile-dropdown .dropdown-item:hover,
.user-pro-dropdown .dropdown-item:hover,
.notification-list .dropdown-item:hover {
    background-color: var(--doctaz-brand-soft) !important;
    color: var(--doctaz-brand-darker) !important;
}

.lang-dropdown-menu .dropdown-item.active,
.lang-dropdown-menu .dropdown-item:active {
    background-color: var(--doctaz-brand-soft) !important;
    color: var(--doctaz-brand-darker) !important;
    font-weight: 600;
}

.lang-dropdown-menu .dropdown-divider,
.profile-dropdown .dropdown-divider,
.user-pro-dropdown .dropdown-divider,
.notification-list .dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid #eef0f4;
}

/* ---------------------------------------------------------------------------
 * Notifications dropdown — unread state, layout, header, footer
 * ------------------------------------------------------------------------- */
.notification-list .noti-title {
    padding: 10px 12px 6px !important;
    background: transparent !important;
    border-radius: 6px;
}
.notification-list .noti-title h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.notification-list .notify-item {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px !important;
    margin: 2px 0;
    border-radius: 8px;
    position: relative;
}
.notification-list .notify-item .notify-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
}
.notification-list .notify-item .notify-icon img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    display: block;
}
.notification-list .notify-item .notify-details {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #344054 !important;
    word-break: break-word;
}
.notification-list .notify-item .notify-details small {
    display: block;
    margin-top: 3px;
    font-size: 0.75rem;
    color: #6b7280 !important;
}

/* Unread state: soft teal pill + left accent bar + dark readable text.
 * Replaces Bootstrap's default solid-primary fill (which made text unreadable). */
.notification-list .notify-item.active {
    background-color: var(--doctaz-brand-soft) !important;
    color: var(--doctaz-brand-darker) !important;
    box-shadow: inset 3px 0 0 var(--doctaz-brand);
}
.notification-list .notify-item.active .notify-details {
    color: var(--doctaz-brand-darker) !important;
    font-weight: 500;
}
.notification-list .notify-item.active .notify-details small {
    color: var(--doctaz-brand-dark) !important;
    opacity: 0.85;
}

/* Footer "View all" link */
.notification-list .notify-all {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px !important;
    margin-top: 4px;
    border-top: 1px solid #eef0f4;
    border-radius: 0 0 8px 8px;
    color: var(--doctaz-brand) !important;
    font-weight: 600;
}
.notification-list .notify-all:hover {
    background-color: var(--doctaz-brand-soft) !important;
    color: var(--doctaz-brand-darker) !important;
}

/* Notification bell icon button in the topbar */
.notification-list > a.dropdown-toggle {
    position: relative;
    padding: 8px 10px !important;
    color: #fff !important;
}
.notification-list > a.dropdown-toggle .noti-icon {
    font-size: 18px;
    line-height: 1;
}
.notification-list .noti-icon-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #34495e;
}
.notification-list .noti-icon-badge:empty { display: none; }

.profile-dropdown .dropdown-header,
.user-pro-dropdown .dropdown-header {
    padding: 8px 12px 4px !important;
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Logout item — subtle red accent so it reads as a terminal action */
.profile-dropdown .dropdown-item[href*="logout"],
.user-pro-dropdown .dropdown-item[href*="logout"] {
    color: #b42318 !important;
}
.profile-dropdown .dropdown-item[href*="logout"]:hover,
.user-pro-dropdown .dropdown-item[href*="logout"]:hover {
    background-color: #fee4e2 !important;
    color: #912018 !important;
}

/* ---------------------------------------------------------------------------
 * Left sidebar (shared across all role navigations)
 * Applies to .left-side-menu used by admin / doctor / patient / nurse / aprn /
 * healthcare. All visual conventions in one place — per-role nav files own
 * structure, this file owns chrome.
 * ------------------------------------------------------------------------- */
.left-side-menu {
    background: #fff !important;
    border-right: 1px solid #eef0f4;
    width: 260px !important;
    padding-bottom: 24px;
}

/* User card at top */
.left-side-menu .user-boxx {
    padding: 24px 16px 18px;
    text-align: center;
    border-bottom: 1px solid #eef0f4;
    margin-bottom: 12px;
}
.left-side-menu .user-boxx img.avatar-md {
    width: 72px;
    height: 72px;
    border: 3px solid var(--doctaz-brand-soft);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.18);
    object-fit: cover;
}
.left-side-menu .user-boxx .dropdown-toggle {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    text-decoration: none;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
}
.left-side-menu .user-boxx .dropdown-toggle::after {
    display: none; /* keep the avatar area clean; dropdown still toggles */
}
.left-side-menu .user-boxx p.text-muted {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d !important;
    margin: 0;
    line-height: 1.4;
}

/* Wallet balance chip — used by sidebar_wallet helper */
.sidebar-wallet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px auto 0;
    padding: 8px 14px;
    background: var(--doctaz-brand-soft);
    color: var(--doctaz-brand-darker);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}
.sidebar-wallet i { font-size: 14px; }
.sidebar-wallet .sidebar-wallet-currency {
    font-size: 0.7rem;
    opacity: 0.7;
    font-weight: 500;
}

/* Section header (optional grouping label) */
.left-side-menu .sidebar-section {
    padding: 16px 20px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9ca3af;
}
.left-side-menu hr {
    border: 0;
    border-top: 1px solid #eef0f4;
    margin: 12px 16px;
}

/* Nav items */
.left-side-menu #sidebar-menu > ul > li > a,
.left-side-menu .side-nav .side-nav-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 16px !important;
    margin: 2px 10px;
    border-radius: 8px;
    color: #475569 !important;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.left-side-menu #sidebar-menu > ul > li > a > i,
.left-side-menu .side-nav .side-nav-link > i {
    font-size: 17px;
    width: 20px;
    text-align: center;
    color: inherit;
    margin: 0 !important;
}
.left-side-menu #sidebar-menu > ul > li > a > span {
    flex: 1 1 auto;
    min-width: 0;
}
.left-side-menu #sidebar-menu > ul > li > a:hover {
    background-color: var(--doctaz-brand-soft);
    color: var(--doctaz-brand-darker) !important;
}

/* Active state */
.left-side-menu #sidebar-menu > ul > li.menuitem-active > a,
.left-side-menu #sidebar-menu > ul > li.active > a,
.left-side-menu #sidebar-menu > ul > li > a.menuitem-active {
    background-color: var(--doctaz-brand-soft) !important;
    color: var(--doctaz-brand-darker) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--doctaz-brand);
}
.left-side-menu #sidebar-menu > ul > li.menuitem-active > a i,
.left-side-menu #sidebar-menu > ul > li.active > a i {
    color: var(--doctaz-brand) !important;
}

/* Collapsible sub-menus */
.left-side-menu .nav-second-level {
    padding-left: 0;
    list-style: none;
    margin: 4px 0 4px 32px;
}
.left-side-menu .nav-second-level > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6b7280 !important;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.left-side-menu .nav-second-level > li > a:hover,
.left-side-menu .nav-second-level > li.menuitem-active > a {
    background-color: var(--doctaz-brand-soft);
    color: var(--doctaz-brand-darker) !important;
}
.left-side-menu .menu-arrow {
    margin-left: auto;
    transition: transform .15s ease;
    color: #9ca3af;
    font-size: 14px;
}
.left-side-menu .menu-arrow::before { content: "\203A"; }
.left-side-menu a[aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }

/* Sidebar badges — hide when zero/empty via .sidebar-badge--zero modifier */
.left-side-menu .badge {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
}
.left-side-menu .badge-info,
.left-side-menu .badge.bg-info {
    background-color: var(--doctaz-brand-soft) !important;
    color: var(--doctaz-brand-darker) !important;
}
.left-side-menu .badge-danger,
.left-side-menu .badge.bg-danger {
    background-color: #fee2e2 !important;
    color: #b42318 !important;
}
.left-side-menu .badge-success,
.left-side-menu .badge.bg-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}
/* Zero-count: muted treatment so the counter is still visible but reads as
 * "nothing to do" rather than disappearing. */
.left-side-menu .sidebar-badge--zero {
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
    font-weight: 500;
}
.left-side-menu .badge:empty { display: none !important; }

/* Logout: full-width subtle red, sits at bottom with a clean separator */
.left-side-menu #sidebar-menu > ul > li.sidebar-logout {
    margin-top: 18px;
    border-top: 1px solid #eef0f4;
    padding-top: 12px;
}
.left-side-menu #sidebar-menu > ul > li.sidebar-logout > a {
    color: #b42318 !important;
}
.left-side-menu #sidebar-menu > ul > li.sidebar-logout > a:hover {
    background-color: #fee4e2 !important;
    color: #912018 !important;
}
.left-side-menu #sidebar-menu > ul > li.sidebar-logout > a i {
    color: inherit !important;
}

/* Simplebar tweaks for the scroll container */
.left-side-menu .simplebar-scrollbar::before {
    background: var(--doctaz-brand) !important;
    opacity: 0.4;
}

/* ---------------------------------------------------------------------------
 * Condensed sidebar (Ubold body[data-sidebar-size="condensed"])
 * When the hamburger collapses the sidebar to icon-only mode, hide the user
 * card text, wallet pill, badges, labels, and section headers. Only icons
 * remain. Centered, no left-accent bar (would overflow the narrow rail).
 * ------------------------------------------------------------------------- */
body[data-sidebar-size="condensed"] .left-side-menu {
    width: 70px !important;
    padding-bottom: 12px;
}

/* User card — collapse to a centered small avatar only */
body[data-sidebar-size="condensed"] .left-side-menu .user-boxx {
    padding: 14px 6px;
    border-bottom: 1px solid #eef0f4;
    margin-bottom: 8px;
}
body[data-sidebar-size="condensed"] .left-side-menu .user-boxx img.avatar-md {
    width: 40px;
    height: 40px;
    border-width: 2px;
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.18);
}
body[data-sidebar-size="condensed"] .left-side-menu .user-boxx .dropdown,
body[data-sidebar-size="condensed"] .left-side-menu .user-boxx p.text-muted,
body[data-sidebar-size="condensed"] .left-side-menu .sidebar-wallet,
body[data-sidebar-size="condensed"] .left-side-menu .sidebar-section,
body[data-sidebar-size="condensed"] .left-side-menu .badge,
body[data-sidebar-size="condensed"] .left-side-menu .menu-arrow {
    display: none !important;
}

/* Nav items — center the icon, hide the label, normalize hit area */
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li > a {
    justify-content: center;
    padding: 12px 0 !important;
    margin: 2px 8px;
    min-height: 42px;
    gap: 0;
    font-size: 0; /* safety net: collapse any bare (un-spanned) text label so it can't leak past the rail */
}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li > a > span {
    display: none !important;
}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li > a > i {
    width: 22px;
    font-size: 19px;
}

/* Active state in condensed mode: drop the left bar (would clip), tint the
 * whole pill solid teal-soft with brand-teal icon. */
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li.menuitem-active > a,
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li.active > a {
    background-color: var(--doctaz-brand-soft) !important;
    color: var(--doctaz-brand) !important;
    box-shadow: none;
}

/* Hide sub-menus by default in condensed; they reveal as a hover popover below. */
body[data-sidebar-size="condensed"] .left-side-menu .nav-second-level {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Condensed hover flyout — clean popover panel
 * Overrides Ubold's app.css flyout (which widens the parent into an empty bar
 * and lets submenu text overflow). doctaz-theme.css loads last, so these win.
 * ------------------------------------------------------------------------- */
/* Keep the hovered parent icon-only on the 70px rail (don't widen to 260px). */
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > a {
    width: auto;
    background-color: var(--doctaz-brand-soft);
    color: var(--doctaz-brand) !important;
    box-shadow: none;
}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > a > span {
    display: none !important;
}

/* Reveal the submenu as a self-contained popover anchored right of the rail. */
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > .collapse > ul {
    display: block !important;
    position: absolute;
    left: 70px;
    top: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 6px;
    margin: 0;
    z-index: 1000;
}
/* Item rows: override Ubold's fixed width:190px / white-space:nowrap. */
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > .collapse > ul a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 8px 12px;
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: normal;
    border-radius: 6px;
    color: #475569 !important;
}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > .collapse > ul a:hover {
    background-color: var(--doctaz-brand-soft);
    color: var(--doctaz-brand-darker) !important;
}

/* Hide the inline <hr> dividers in condensed mode (they look like glitches at 70px) */
body[data-sidebar-size="condensed"] .left-side-menu hr {
    margin: 8px 12px;
}

/* Logout: keep red treatment, icon-only */
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li.sidebar-logout {
    margin-top: 10px;
    padding-top: 8px;
}

/* ============================================================
   Edit Profile (tabbed) — shared across all roles
   ============================================================ */
.profile-identity {
  display: flex; align-items: center; gap: 16px;
  background: var(--doctaz-brand-soft);
  border: 1px solid var(--doctaz-brand-soft-border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 18px;
}
.profile-identity .pi-avatar {
  width: 64px; height: 64px; border-radius: 12px;   /* squared, matches 1:1 cropper */
  object-fit: cover; border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25); flex: none;
}
.profile-identity .pi-meta { flex: 1; min-width: 0; }
.profile-identity .pi-name {
  font-weight: 600; font-size: 1.05rem; color: var(--doctaz-brand-darker); margin: 0;
}
.profile-identity .pi-role {
  font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase;
  color: #5b8d86; margin-top: 2px;
}
.profile-identity .pi-action .btn { white-space: nowrap; }

.profile-tabs.nav-tabs { border-bottom: 2px solid #e9ecef; gap: 4px; margin-bottom: 18px; }
.profile-tabs.nav-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  color: #64748b; font-weight: 500; padding: 8px 16px; background: none;
}
.profile-tabs.nav-tabs .nav-link:hover { color: var(--doctaz-brand-dark); }
.profile-tabs.nav-tabs .nav-link.active {
  color: var(--doctaz-brand); border-bottom-color: var(--doctaz-brand);
  font-weight: 600; background: none;
}
.profile-tabs.nav-tabs .nav-link.is-danger { color: #b42318; }
.profile-tabs.nav-tabs .nav-link.is-danger.active { border-bottom-color: #b42318; }

/* Tab panes. On doctor/nurse/aprn the Profile + Professional panes share one
 * <form>, so they are NOT direct children of .tab-content — Bootstrap's
 * `.tab-content > .tab-pane { display:none }` (direct-child only) misses them
 * and inactive panes keep their layout height, pushing the active pane out of
 * view (blank area). Hide inactive panes regardless of nesting; force the
 * active pane visible (overrides `.fade` opacity:0). Paired with the custom
 * tab controller in includes_bottom.php. */
.profile-tabs ~ .tab-content .tab-pane { display: none; }
.profile-tabs ~ .tab-content .tab-pane.active { display: block; opacity: 1; }

.profile-grid { display: grid; grid-template-columns: 1fr; gap: 14px 20px; }
@media (min-width: 768px) {
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .profile-grid .span-2 { grid-column: 1 / 3; }
}
.profile-grid .form-label { font-weight: 500; margin-bottom: 4px; }

.profile-locked {
  display: flex; align-items: center; gap: 8px;
  background: #f8fafc; border: 1px solid #e9ecef; border-radius: 8px;
  padding: 10px 12px; color: #475569;
}
.profile-locked .fe-lock { color: #94a3b8; }
.profile-locked .pl-note { font-size: 0.75rem; color: #94a3b8; margin-left: auto; }

.profile-social .input-group-text { color: var(--doctaz-brand-dark); }

.profile-actions { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }

/* ============================================================
   Healthcare Staff Calendar
   All rules scoped to #staffCalendarPanel, #apptCalendarPanel / .sc-* so other
   FullCalendar usages (dashboards) are unaffected.
   ============================================================ */

/* --- Panel header --- */
#staffCalendarPanel .sc-panel-head, #apptCalendarPanel .sc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eef1f4;
}
#staffCalendarPanel .sc-panel-title, #apptCalendarPanel .sc-panel-title { display: flex; align-items: center; gap: 12px; }
#staffCalendarPanel .sc-panel-icon, #apptCalendarPanel .sc-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--doctaz-brand-soft);
  color: var(--doctaz-brand-dark);
  font-size: 1.1rem;
  flex: 0 0 auto;
}
#staffCalendarPanel .sc-panel-title h4, #apptCalendarPanel .sc-panel-title h4 { font-size: 1.05rem; font-weight: 600; color: #1f2d3d; }

/* --- Empty state --- */
#staffCalendarPanel .sc-empty, #apptCalendarPanel .sc-empty { text-align: center; padding: 48px 16px; }
#staffCalendarPanel .sc-empty-icon, #apptCalendarPanel .sc-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--doctaz-brand-soft);
  color: var(--doctaz-brand-dark);
  font-size: 1.6rem;
}

/* --- Layout: sidebar + calendar --- */
#staffCalendarPanel .sc-layout, #apptCalendarPanel .sc-layout { display: flex; gap: 22px; align-items: flex-start; }
#staffCalendarPanel .sc-sidebar, #apptCalendarPanel .sc-sidebar { flex: 0 0 232px; max-width: 232px; }
#staffCalendarPanel .sc-calendar-wrap, #apptCalendarPanel .sc-calendar-wrap { flex: 1 1 auto; min-width: 0; }

/* --- Filter groups --- */
#staffCalendarPanel .sc-filter-group + .sc-filter-group, #apptCalendarPanel .sc-filter-group + .sc-filter-group { margin-top: 22px; }
#staffCalendarPanel .sc-filter-head, #apptCalendarPanel .sc-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#staffCalendarPanel .sc-filter-title, #apptCalendarPanel .sc-filter-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* All / None toggle */
#staffCalendarPanel .sc-allstaff, #apptCalendarPanel .sc-allstaff {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--doctaz-brand);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
#staffCalendarPanel .sc-allstaff:hover, #apptCalendarPanel .sc-allstaff:hover { background: var(--doctaz-brand-soft); }

/* Role group toggle */
#staffCalendarPanel .sc-role, #apptCalendarPanel .sc-role { margin-bottom: 6px; }
#staffCalendarPanel .sc-role-toggle, #apptCalendarPanel .sc-role-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
}
#staffCalendarPanel .sc-role-toggle:hover, #apptCalendarPanel .sc-role-toggle:hover { background: #f5f7f9; }
#staffCalendarPanel .sc-role-name, #apptCalendarPanel .sc-role-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#staffCalendarPanel .sc-role-count, #apptCalendarPanel .sc-role-count {
  font-size: 0.66rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background: #eef1f4;
  color: #94a3b8;
  padding: 0 5px;
}
#staffCalendarPanel .sc-role-toggle.is-active .sc-role-name, #apptCalendarPanel .sc-role-toggle.is-active .sc-role-name { color: var(--doctaz-brand-dark); }
#staffCalendarPanel .sc-role-toggle.is-active .sc-role-count, #apptCalendarPanel .sc-role-toggle.is-active .sc-role-count {
  background: var(--doctaz-brand-soft);
  color: var(--doctaz-brand-dark);
}

/* Staff toggle rows */
#staffCalendarPanel .sc-staff-list, #apptCalendarPanel .sc-staff-list { padding: 2px 0 4px; }
#staffCalendarPanel .sc-staff-toggle, #apptCalendarPanel .sc-staff-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  color: #475569;
  transition: background-color .12s ease;
}
#staffCalendarPanel .sc-staff-toggle:hover, #apptCalendarPanel .sc-staff-toggle:hover { background: #f5f7f9; }
#staffCalendarPanel .sc-staff-toggle.is-active, #apptCalendarPanel .sc-staff-toggle.is-active { background: var(--doctaz-brand-soft); }
#staffCalendarPanel .sc-dot, #apptCalendarPanel .sc-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sc-dot, #94a3b8);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
  transition: opacity .12s ease;
}
#staffCalendarPanel .sc-staff-toggle:not(.is-active) .sc-dot, #apptCalendarPanel .sc-staff-toggle:not(.is-active) .sc-dot { opacity: 0.35; }
#staffCalendarPanel .sc-staff-name, #apptCalendarPanel .sc-staff-name {
  flex: 1 1 auto;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#staffCalendarPanel .sc-staff-toggle.is-active .sc-staff-name, #apptCalendarPanel .sc-staff-toggle.is-active .sc-staff-name { color: var(--doctaz-brand-darker); }
#staffCalendarPanel .sc-staff-check, #apptCalendarPanel .sc-staff-check {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--doctaz-brand);
  opacity: 0;
}
#staffCalendarPanel .sc-staff-toggle.is-active .sc-staff-check, #apptCalendarPanel .sc-staff-toggle.is-active .sc-staff-check { opacity: 1; }

/* Status rows — checkbox + dot style (matches provider calendar) */
#staffCalendarPanel .sc-status-list, #apptCalendarPanel .sc-status-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#staffCalendarPanel .sc-status-toggle, #apptCalendarPanel .sc-status-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease, filter .15s ease;
  margin-bottom: 0;
  user-select: none;
}
#staffCalendarPanel .sc-status-toggle:not(.is-active), #apptCalendarPanel .sc-status-toggle:not(.is-active) {
  opacity: 0.4;
  filter: grayscale(0.5);
}
#staffCalendarPanel .sc-status-toggle:hover, #apptCalendarPanel .sc-status-toggle:hover {
  opacity: 1 !important;
  filter: none !important;
}
#staffCalendarPanel .sc-status-checkbox, #apptCalendarPanel .sc-status-checkbox {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #0d9488;
  flex-shrink: 0;
}
#staffCalendarPanel .sc-status-dot, #apptCalendarPanel .sc-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
#staffCalendarPanel .sc-status-dot[data-status="approved"],  #apptCalendarPanel .sc-status-dot[data-status="approved"]  { background: #10b981; }
#staffCalendarPanel .sc-status-dot[data-status="pending"],   #apptCalendarPanel .sc-status-dot[data-status="pending"]   { background: #f59e0b; }
#staffCalendarPanel .sc-status-dot[data-status="completed"], #apptCalendarPanel .sc-status-dot[data-status="completed"] { background: #06b6d4; }
#staffCalendarPanel .sc-status-dot[data-status="declined"],  #apptCalendarPanel .sc-status-dot[data-status="declined"]  { background: #94a3b8; }
#staffCalendarPanel .sc-status-dot[data-status="cancelled"], #apptCalendarPanel .sc-status-dot[data-status="cancelled"] { background: #ef4444; }
#staffCalendarPanel .sc-status-dot[data-status="expired"],   #apptCalendarPanel .sc-status-dot[data-status="expired"]   { background: #94a3b8; }
#staffCalendarPanel .sc-status-dot[data-status="missed"],    #apptCalendarPanel .sc-status-dot[data-status="missed"]    { background: #f59e0b; }

/* Legend */
#staffCalendarPanel .sc-legend-list, #apptCalendarPanel .sc-legend-list { display: flex; flex-direction: column; gap: 6px; }
#staffCalendarPanel .sc-legend-row, #apptCalendarPanel .sc-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #475569; }
#staffCalendarPanel .sc-legend-dot, #apptCalendarPanel .sc-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 2px solid transparent; }

/* --- Calendar surface --- */
#staffCalendarPanel .fc-toolbar.fc-header-toolbar, #apptCalendarPanel .fc-toolbar.fc-header-toolbar { margin-bottom: 16px; }
#staffCalendarPanel .fc-toolbar h2, #apptCalendarPanel .fc-toolbar h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2d3d;
  text-transform: capitalize;
}
#staffCalendarPanel .fc-view-container, #apptCalendarPanel .fc-view-container { border-radius: 10px; }
#staffCalendarPanel .fc-head .fc-day-header, #apptCalendarPanel .fc-head .fc-day-header {
  padding: 10px 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #f8fafb;
  border-color: #eef1f4;
}
#staffCalendarPanel .fc-day-number, #apptCalendarPanel .fc-day-number { font-size: 0.78rem; color: #64748b; padding: 6px 8px; }
#staffCalendarPanel .fc-unthemed td, #apptCalendarPanel .fc-unthemed td,
#staffCalendarPanel .fc-unthemed th, #apptCalendarPanel .fc-unthemed th { border-color: #eef1f4; }
.fc-list-view .fc-list-item td {color:#000!important; }
#staffCalendarPanel .fc-day-today, #apptCalendarPanel .fc-day-today,
#staffCalendarPanel .fc-list-item.fc-today, #apptCalendarPanel .fc-list-item.fc-today {
  background-color: var(--doctaz-brand-soft) !important;
}
#staffCalendarPanel .fc-day-today .fc-day-number, #apptCalendarPanel .fc-day-today .fc-day-number { color: var(--doctaz-brand-darker); font-weight: 700; }
#staffCalendarPanel .fc-more, #apptCalendarPanel .fc-more {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--doctaz-brand);
}

/* --- Toolbar buttons: white default, teal active --- */
#staffCalendarPanel .fc-button, #apptCalendarPanel .fc-button {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: capitalize;
  font-size: 0.8rem;
  font-weight: 600;
  height: auto;
  padding: 7px 14px;
}
#staffCalendarPanel .fc-button:not(:disabled):hover, #apptCalendarPanel .fc-button:not(:disabled):hover {
  background: var(--doctaz-brand-soft) !important;
  border-color: var(--doctaz-brand-soft-border) !important;
  color: var(--doctaz-brand-darker) !important;
}
#staffCalendarPanel .fc-button-primary:not(:disabled).fc-button-active,
#staffCalendarPanel .fc-button-primary:not(:disabled):active,
#apptCalendarPanel .fc-button-primary:not(:disabled).fc-button-active,
#apptCalendarPanel .fc-button-primary:not(:disabled):active {
  background: var(--doctaz-brand) !important;
  border-color: var(--doctaz-brand) !important;
  color: #fff !important;
}
#staffCalendarPanel .fc-button:disabled, #apptCalendarPanel .fc-button:disabled { opacity: 0.5; }
#staffCalendarPanel .fc-button-group > .fc-button, #apptCalendarPanel .fc-button-group > .fc-button { border-radius: 0 !important; margin: 0 !important; }
#staffCalendarPanel .fc-button-group > .fc-button:first-child, #apptCalendarPanel .fc-button-group > .fc-button:first-child { border-radius: 8px 0 0 8px !important; }
#staffCalendarPanel .fc-button-group > .fc-button:last-child, #apptCalendarPanel .fc-button-group > .fc-button:last-child { border-radius: 0 8px 8px 0 !important; border-left: 0 !important; }

/* --- Events --- */
#staffCalendarPanel .fc-event, #apptCalendarPanel .fc-event,
#staffCalendarPanel .sc-event, #apptCalendarPanel .sc-event {
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
#staffCalendarPanel .sc-event:hover, #apptCalendarPanel .sc-event:hover {
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.16);
  transform: translateY(-1px);
}
#staffCalendarPanel .sc-event .fc-title, #apptCalendarPanel .sc-event .fc-title,
#staffCalendarPanel .sc-event .fc-list-item-title, #apptCalendarPanel .sc-event .fc-list-item-title {
  font-weight: 600;
  color: #1f2d3d;
}

/* Status border treatments — fill stays the inline per-staff color */
#staffCalendarPanel .sc-event.status-pending, #apptCalendarPanel .sc-event.status-pending { border-style: dashed; border-color: currentColor; }
#staffCalendarPanel .sc-event.status-approved, #apptCalendarPanel .sc-event.status-approved { border-style: solid; }
#staffCalendarPanel .sc-event.status-completed, #apptCalendarPanel .sc-event.status-completed { border-style: solid; opacity: 0.9; }
#staffCalendarPanel .sc-event.status-missed, #apptCalendarPanel .sc-event.status-missed { border-style: dashed; opacity: 0.85; }
#staffCalendarPanel .sc-event.status-declined, #apptCalendarPanel .sc-event.status-declined,
#staffCalendarPanel .sc-event.status-expired, #apptCalendarPanel .sc-event.status-expired { border-style: dotted; opacity: 0.75; }
#staffCalendarPanel .sc-event.status-cancelled, #apptCalendarPanel .sc-event.status-cancelled { border-style: dotted; opacity: 0.7; }
#staffCalendarPanel .sc-event.status-cancelled .fc-title, #apptCalendarPanel .sc-event.status-cancelled .fc-title,
#staffCalendarPanel .sc-event.status-cancelled .fc-list-item-title, #apptCalendarPanel .sc-event.status-cancelled .fc-list-item-title { text-decoration: line-through; }

/* Event status badge injected by JS */
#staffCalendarPanel .sc-event-badge, #apptCalendarPanel .sc-event-badge {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
  display: inline-block;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* List view: enhanced styling for events */
#staffCalendarPanel .fc-list-item td, #apptCalendarPanel .fc-list-item td {
  padding: 10px 12px !important;
  vertical-align: middle;
}
#staffCalendarPanel .fc-list-item.fc-daygrid-day, #apptCalendarPanel .fc-list-item.fc-daygrid-day {
  border-color: #eef1f4;
}

/* List view time cell */
#staffCalendarPanel .fc-list-item-time, #apptCalendarPanel .fc-list-item-time {
  font-weight: 700;
  color: var(--doctaz-brand-darker);
  font-size: 0.85rem;
  min-width: 110px;
}

/* List view heading row */
#staffCalendarPanel .fc-list-heading td, #apptCalendarPanel .fc-list-heading td {
  background: #f8fafb;
  color: #475569;
  font-weight: 700;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px !important;
}
#staffCalendarPanel .fc-list-item:not(.fc-list-heading), #apptCalendarPanel .fc-list-item:not(.fc-list-heading) {
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#staffCalendarPanel .fc-list-item:not(.fc-list-heading):hover, #apptCalendarPanel .fc-list-item:not(.fc-list-heading):hover {
  background: linear-gradient(to right, var(--doctaz-brand-soft) 0%, transparent 30%);
  border-left-color: var(--doctaz-brand);
}
#staffCalendarPanel .fc-list-item:not(.fc-list-heading):hover .sc-event-badge, #apptCalendarPanel .fc-list-item:not(.fc-list-heading):hover .sc-event-badge {
  filter: brightness(1.08);
}

/* --- Lightweight popover --- */
.sc-popover {
  position: absolute;
  z-index: 1080; /* above calendar */
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 14px 16px;
  max-width: 280px;
  font-size: 0.8rem;
  color: #334155;
}
.sc-popover-head { margin-bottom: 10px; }
.sc-popover-badge { font-size: 0.72rem; }
.sc-popover-row { display: flex; gap: 8px; padding: 3px 0; }
.sc-popover-label { color: #94a3b8; flex: 0 0 64px; font-size: 0.74rem; }
.sc-popover-value { color: #334155; font-weight: 500; }
.sc-popover-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.sc-popover-link { color: var(--doctaz-brand); font-weight: 600; }
.sc-popover-link:hover { color: var(--doctaz-brand-dark); }

/* --- Responsive: sidebar stacks above calendar under lg --- */
@media (max-width: 991.98px) {
  #staffCalendarPanel .sc-layout, #apptCalendarPanel .sc-layout { flex-direction: column; }
  #staffCalendarPanel .sc-sidebar, #apptCalendarPanel .sc-sidebar { flex-basis: auto; max-width: 100%; width: 100%; }
  #staffCalendarPanel .sc-staff-list, #apptCalendarPanel .sc-staff-list { display: flex; flex-wrap: wrap; gap: 4px; }
  #staffCalendarPanel .sc-staff-toggle, #apptCalendarPanel .sc-staff-toggle { width: auto; }
}

/* ============================================================
   Unified Appointment Calendar (reuses staff calendar styles)
   ============================================================ */
#apptCalendarPanel { /* reuses all .sc-* styles from staff calendar */ }

#apptCalendarPanel .sc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eef1f4;
}

#apptCalendarPanel .sc-panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

#apptCalendarPanel .appt-schedule-btn {
  flex: 0 0 auto;
}

#apptCalendarPanel .sc-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#apptCalendarPanel .sc-status-toggle {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s ease, filter 0.12s ease, background-color 0.12s ease;
}

#apptCalendarPanel .sc-status-toggle:not(.is-active) {
  background-color: #f1f3f5 !important;
  color: #adb5bd !important;
  opacity: 0.6;
}

#apptCalendarPanel .sc-status-toggle:hover {
  opacity: 1;
  filter: brightness(0.95);
}

#apptCalendarPanel .appt-event-badge,
#apptCalendarPanel .appt-popover-badge {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-block;
  border-radius: 4px;
}

/* Popover buttons */
.appt-popover-btn {
  border: none;
  padding: 6px 12px;
  margin: 4px 4px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

.appt-popover-approve {
  background: var(--doctaz-brand);
  color: #fff;
}
.appt-popover-approve:hover { background: var(--doctaz-brand-dark); }

.appt-popover-decline {
  background: #ef4444;
  color: #fff;
}
.appt-popover-decline:hover { background: #dc2626; }

.appt-popover-reschedule {
  background: #f59e0b;
  color: #fff;
}
.appt-popover-reschedule:hover { background: #d97706; }

/* Responsive layout for appointment calendar */
@media (max-width: 991.98px) {
  #apptCalendarPanel .sc-layout { flex-direction: column; }
  #apptCalendarPanel .sc-sidebar { flex-basis: auto; max-width: 100%; width: 100%; margin-bottom: 16px; }
  #apptCalendarPanel .sc-panel-head { flex-wrap: wrap; }
  #apptCalendarPanel .appt-schedule-btn { width: 100%; }
}

@media (max-width: 767.98px) {
  #apptCalendarPanel .sc-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }
  #apptCalendarPanel .sc-panel-title {
    width: 100%;
  }
  #apptCalendarPanel .appt-schedule-btn {
    width: 100%;
  }
  #apptCalendarPanel .sc-status-list {
    justify-content: flex-start;
  }
}