/* UltraClinic v8 — safe final UI stabilization layer */
:root{--uc8-primary:#4054e8;--uc8-navy:#0b1834;--uc8-text:#17223f;--uc8-muted:#6d7894;--uc8-bg:#f5f7fc;--uc8-line:#e5e9f3;--uc8-radius:16px;--uc8-shadow:0 10px 30px rgba(24,39,75,.07)}
html,body{min-height:100%}body{background:var(--uc8-bg);color:var(--uc8-text);overflow-x:hidden}.main-wrapper{min-height:100vh}.page-wrapper{background:var(--uc8-bg);min-height:100vh}.content{padding:24px}.navbar-header{background:#fff;border-bottom:1px solid var(--uc8-line);box-shadow:0 3px 14px rgba(22,35,70,.035)}
/* Sidebar readability */
.sidebar{background:linear-gradient(180deg,#0a1732 0%,#0e2248 100%)!important;border-right:0!important;box-shadow:8px 0 28px rgba(6,18,42,.14)}
.sidebar .sidebar-logo{background:rgba(255,255,255,.035)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}.sidebar .sidebar-inner,.sidebar .sidebar-menu{background:transparent!important}.sidebar .sidebar-menu .menu-title,.sidebar .sidebar-menu .menu-title span{color:#8fa3ca!important}.sidebar .sidebar-menu ul li a{color:#c9d5ed!important;background:transparent;border-radius:10px;margin:2px 10px;padding:10px 12px;transition:background .2s ease,color .2s ease,transform .2s ease}.sidebar .sidebar-menu ul li a i,.sidebar .sidebar-menu ul li a svg{color:#9fb2d8!important}.sidebar .sidebar-menu ul li a:hover{background:rgba(255,255,255,.075)!important;color:#fff!important;transform:translateX(2px)}.sidebar .sidebar-menu ul li.active>a,.sidebar .sidebar-menu ul li>a.active{background:linear-gradient(135deg,#5268f3,#7356e8)!important;color:#fff!important;box-shadow:0 8px 20px rgba(63,80,214,.3)}.sidebar .sidebar-menu ul li.active>a i,.sidebar .sidebar-menu ul li>a.active i{color:#fff!important}.sidebar .submenu ul li a{color:#b7c5df!important}.sidebar .submenu ul li a:hover,.sidebar .submenu ul li a.active{color:#fff!important}
/* Stable cards/forms/tables without breaking Bootstrap geometry */
.card{border:1px solid var(--uc8-line);border-radius:var(--uc8-radius);box-shadow:var(--uc8-shadow);background:#fff}.card-header{background:#fff;border-bottom:1px solid var(--uc8-line);padding:17px 20px}.card-body{padding:20px}.form-label,label:not(.form-check-label){color:#34415f;font-weight:600}.form-control,.form-select{min-height:44px;border:1px solid #dce2ee;border-radius:10px;background:#fff;color:#17223f;box-shadow:none}.form-control:focus,.form-select:focus{border-color:#7382f2;box-shadow:0 0 0 4px rgba(64,84,232,.1)}textarea.form-control{min-height:100px}.input-group .form-control{min-width:0}.input-group-text{border-color:#dce2ee;background:#f7f8fc}.select2-container{max-width:100%;width:100%!important}.select2-container--default .select2-selection--single{height:44px!important;border:1px solid #dce2ee!important;border-radius:10px!important}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px!important;padding-left:13px!important}.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px!important}.btn{border-radius:10px;font-weight:600}.btn-primary{background:linear-gradient(135deg,#4054e8,#6648df);border-color:transparent;box-shadow:0 7px 16px rgba(64,84,232,.2)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(64,84,232,.25)}.table-responsive{border-radius:12px}.table{--bs-table-bg:transparent}.table thead th{background:#f7f8fc;color:#43506f;font-size:12px;font-weight:700;border-bottom:1px solid var(--uc8-line);white-space:nowrap}.table tbody td{vertical-align:middle;border-color:#edf0f6}.table-hover tbody tr:hover{background:#fafbfe}.modal-content{border:0;border-radius:18px;box-shadow:0 24px 70px rgba(17,31,69,.2)}
/* Keep page grid sane */
.row{--bs-gutter-x:1.5rem}.row>[class*=col-]{min-width:0}.footer{background:#fff!important;border-top:1px solid var(--uc8-line)!important}
/* Dashboard animation foundation */
.uc-live-dashboard .uc-hero,.uc-live-dashboard .uc-stat-card,.uc-live-dashboard .uc-card{opacity:0;transform:translateY(18px)}.uc-live-dashboard.uc8-ready .uc-hero,.uc-live-dashboard.uc8-ready .uc-stat-card,.uc-live-dashboard.uc8-ready .uc-card{animation:uc8Rise .58s cubic-bezier(.2,.75,.25,1) forwards}.uc-live-dashboard.uc8-ready .uc-stat-card:nth-child(1){animation-delay:.04s}.uc-live-dashboard.uc8-ready .uc-stat-card:nth-child(2){animation-delay:.08s}.uc-live-dashboard.uc8-ready .uc-stat-card:nth-child(3){animation-delay:.12s}.uc-live-dashboard.uc8-ready .uc-stat-card:nth-child(4){animation-delay:.16s}.uc-live-dashboard.uc8-ready .uc-stat-card:nth-child(5){animation-delay:.20s}.uc-live-dashboard.uc8-ready .uc-stat-card:nth-child(6){animation-delay:.24s}.uc-live-dashboard.uc8-ready .uc-card{animation-delay:.18s}@keyframes uc8Rise{to{opacity:1;transform:none}}
.uc-live-dashboard .uc-stat-card{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.uc-live-dashboard .uc-stat-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-32px;top:-38px;background:rgba(78,98,238,.07);transition:transform .3s ease}.uc-live-dashboard .uc-stat-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(30,46,95,.12);border-color:#d6dcf2}.uc-live-dashboard .uc-stat-card:hover:after{transform:scale(1.35)}.uc-live-dashboard .uc-stat-icon{animation:uc8Float 3.4s ease-in-out infinite}@keyframes uc8Float{50%{transform:translateY(-4px)}}.uc-live-dashboard .uc-live-dot{box-shadow:0 0 0 0 rgba(47,222,153,.5);animation:uc8Pulse 1.8s infinite}@keyframes uc8Pulse{70%{box-shadow:0 0 0 9px rgba(47,222,153,0)}100%{box-shadow:0 0 0 0 rgba(47,222,153,0)}}
.uc-live-dashboard .uc-appointment-item{transition:background .2s ease,transform .2s ease}.uc-live-dashboard .uc-appointment-item:hover{background:#f8f9ff;transform:translateX(3px)}.uc-live-dashboard .uc-avatar-initial{transition:transform .25s ease}.uc-live-dashboard .uc-appointment-item:hover .uc-avatar-initial{transform:scale(1.08)}
.uc8-clock{min-width:170px;padding:10px 14px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(9px);color:#fff;text-align:center}.uc8-clock-time{display:block;font-size:22px;line-height:1;font-weight:800;letter-spacing:.04em}.uc8-clock-date{display:block;margin-top:5px;font-size:11px;color:rgba(255,255,255,.72)}.uc8-skeleton{position:relative;overflow:hidden}.uc8-skeleton:before{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:translateX(-100%);animation:uc8Shimmer 1.1s infinite}@keyframes uc8Shimmer{to{transform:translateX(100%)}}
@media(max-width:1199px){.content{padding:20px}.card-body{padding:18px}}@media(max-width:767px){.content{padding:14px}.card{border-radius:14px}.card-header{padding:14px 15px}.card-body{padding:15px}.uc8-clock{min-width:145px}.uc8-clock-time{font-size:18px}.table-responsive{overflow-x:auto}.sidebar .sidebar-menu ul li a{margin-left:8px;margin-right:8px}}
[data-bs-theme=dark] body,[data-bs-theme=dark] .page-wrapper{background:#0d1527}[data-bs-theme=dark] .card,[data-bs-theme=dark] .card-header,[data-bs-theme=dark] .navbar-header,[data-bs-theme=dark] .footer{background:#121d33!important;border-color:#26334e!important;color:#e9edfa}[data-bs-theme=dark] .form-control,[data-bs-theme=dark] .form-select{background:#16223b;color:#edf1ff;border-color:#2e3a55}[data-bs-theme=dark] .table thead th{background:#17243d;color:#c8d2e8}[data-bs-theme=dark] .table tbody td{border-color:#26334c}

/* Dashboard visibility safeguard: page-specific dashboard-live.css owns dashboard visuals */
.uc-live-dashboard .uc-hero,.uc-live-dashboard .uc-stat-card,.uc-live-dashboard .uc-card{opacity:1;transform:none}


/* ==========================================================
   UltraClinic FINAL Layer System — v12.0
   One mobile drawer backdrop + one Bootstrap modal stack.
   ========================================================== */
:root {
  --uc-drawer-width: min(360px, 88vw);
  --uc-z-header: 1020;
  --uc-z-drawer-backdrop: 1040;
  --uc-z-drawer: 1050;
  --uc-z-dropdown: 1080;
  --uc-z-modal-backdrop: 1990;
  --uc-z-modal: 2000;
  --uc-z-modal-widget: 2020;
  --uc-z-toast: 2100;
}

.navbar-header, .header { z-index: var(--uc-z-header) !important; }
.dropdown-menu,
.select2-container--open,
.flatpickr-calendar,
.daterangepicker,
.datepicker,
.bootstrap-datetimepicker-widget { z-index: var(--uc-z-dropdown) !important; }

/* Retire every legacy sidebar overlay. The final controller uses #ucDrawerBackdrop only. */
.sidebar-overlay,
.sidebar-overlay.opened {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#ucDrawerBackdrop {
  display: none;
}

@media (max-width: 991.98px) {
  html.uc-drawer-open,
  body.uc-drawer-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: var(--uc-drawer-width) !important;
    max-width: var(--uc-drawer-width) !important;
    height: 100dvh !important;
    margin: 0 !important;
    z-index: var(--uc-z-drawer) !important;
    transform: translate3d(-102%,0,0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: transform .24s ease, visibility 0s linear .24s !important;
    box-shadow: 16px 0 40px rgba(2,10,25,.34) !important;
    isolation: isolate;
  }

  body.uc-drawer-open .sidebar,
  .main-wrapper.slide-nav .sidebar {
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .24s ease, visibility 0s !important;
  }

  .sidebar,
  .sidebar *,
  .sidebar a,
  .sidebar button {
    pointer-events: auto !important;
  }

  .sidebar .sidebar-inner,
  .sidebar .sidebar-menu,
  .sidebar [data-simplebar],
  .sidebar .simplebar-content-wrapper,
  .sidebar .simplebar-content {
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .sidebar .sidebar-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 20 !important;
    cursor: pointer !important;
  }

  #ucDrawerBackdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--uc-drawer-width);
    z-index: var(--uc-z-drawer-backdrop);
    background: rgba(5, 12, 28, .58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
    -webkit-tap-highlight-color: transparent;
  }

  body.uc-drawer-open #ucDrawerBackdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease, visibility 0s;
  }

  /* A modal always closes and supersedes the drawer. */
  body.modal-open .sidebar {
    transform: translate3d(-102%,0,0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.modal-open #ucDrawerBackdrop {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Modal portal: all modals are direct children of body. */
body > .modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--uc-z-modal) !important;
  opacity: 1 !important;
  filter: none !important;
}
body > .modal.show { display: block !important; }
body > .modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--uc-z-modal-backdrop) !important;
  pointer-events: auto !important;
}
body > .modal-backdrop.show { opacity: .5 !important; }
body > .modal .modal-dialog,
body > .modal .modal-content,
body > .modal .modal-content * { pointer-events: auto !important; }
body > .modal .modal-content {
  position: relative !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}
body.modal-open .select2-container--open,
body.modal-open .dropdown-menu,
body.modal-open .flatpickr-calendar,
body.modal-open .daterangepicker,
body.modal-open .datepicker,
body.modal-open .bootstrap-datetimepicker-widget {
  z-index: var(--uc-z-modal-widget) !important;
}
.popover, .tooltip { z-index: var(--uc-z-modal-widget) !important; }
.toast-container, .toast { z-index: var(--uc-z-toast) !important; }

@media (max-width: 420px) {
  :root { --uc-drawer-width: 86vw; }
}