/* Clinic Q Super Admin Module Stylesheet */

/* ─────────────────────────────────────────────────────────────
   LAYOUT STRUCTURE (DESKTOP, COLLAPSED, & MOBILE DRAWER)
   ───────────────────────────────────────────────────────────── */
.sa-dash-body {
  background-color: #f7f9fc;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-primary, "Inter", Arial, sans-serif);
}

.sa-layout-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.sa-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-content-body {
  flex: 1;
  padding: 24px 32px;
  background-color: #f7f9fc;
}

@media (min-width: 1200px) {
  .col-xl-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

/* ─────────────────────────────────────────────────────────────
   SIDEBAR COMPONENT (DARK NAVY THEME - MATCHING REFERENCE DESIGN)
   ───────────────────────────────────────────────────────────── */
.sa-sidebar {
  width: 250px;
  background: #0f172a;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1040;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-sidebar-header {
  height: 70px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sa-brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.sa-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

.sa-brand-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.sa-sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sa-sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.sa-mobile-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sa-mobile-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Custom Sleek Scrollbar for Sidebar Navigation */
.sa-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.sa-sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.sa-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sa-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.sa-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.sa-nav-item {
  margin-bottom: 4px;
}

.sa-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  color: #94a3b8;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sa-nav-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.sa-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.sa-nav-link:hover .sa-nav-icon {
  color: #ffffff;
}

.sa-nav-link.active {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.sa-nav-link.active .sa-nav-icon {
  color: #ffffff;
}

/* Collapsed Sidebar State (Desktop 76px) */
.sa-layout-wrapper.sa-collapsed .sa-sidebar {
  width: 76px;
}

.sa-layout-wrapper.sa-collapsed .sa-brand-name,
.sa-layout-wrapper.sa-collapsed .sa-nav-text {
  display: none;
}

.sa-layout-wrapper.sa-collapsed .sa-nav-link {
  justify-content: center;
  padding: 12px;
}

.sa-layout-wrapper.sa-collapsed .sa-sidebar-header {
  justify-content: center;
  padding: 0;
}

.sa-layout-wrapper.sa-collapsed .sa-sidebar-toggle-btn {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   NAVBAR COMPONENT (TOP BAR)
   ───────────────────────────────────────────────────────────── */
.sa-navbar {
  height: 70px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--cq-border, #e2e8f0);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.sa-navbar-left {
  display: flex;
  align-items: center;
}

.sa-sidebar-toggle-top-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sa-sidebar-toggle-top-btn:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.sa-navbar-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
  max-width: 100%;
}

.sa-search-input {
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding-left: 42px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  height: 40px;
  font-size: 14px;
  line-height: 1.5;
  color: #0f172a;
  transition: all 0.2s ease;
}

.sa-search-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.sa-search-input:focus {
  background-color: #ffffff;
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.15);
}

.sa-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
  z-index: 5;
}

/* ─────────────────────────────────────────────────────────────
   SA PAGE HEADER & BREADCRUMB BADGE (MATCHING REFERENCE DESIGN)
   ───────────────────────────────────────────────────────────── */
.sa-page-header-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.sa-header-breadcrumb-badge {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

.sa-breadcrumb-badge-home {
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.sa-breadcrumb-badge-home:hover {
  color: #1d4ed8;
}

.sa-breadcrumb-badge-sep {
  color: #94a3b8;
  margin: 0 8px;
}

.sa-breadcrumb-badge-link {
  color: #2563eb;
  font-weight: 500;
}

.sa-breadcrumb-badge-link:hover {
  color: #1d4ed8;
}

.sa-breadcrumb-badge-active {
  color: #2563eb;
  font-weight: 600;
}

.sa-navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sa-navbar-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--cq-border, #e2e8f0);
  background: #ffffff;
  color: var(--cq-slate, #334155);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}

.sa-navbar-icon-btn:hover {
  background: var(--cq-light-bg, #f8fafc);
  color: var(--cq-blue-primary, #2563eb);
}

.sa-notification-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cq-red, #ef4444);
  border: 2px solid #ffffff;
}

.sa-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.sa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cq-blue-primary, #2563eb) 0%, var(--cq-blue-dark, #1d4ed8) 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.sa-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cq-navy, #0f172a);
  display: block;
  line-height: 1.2;
}

.sa-profile-role {
  font-size: 11.5px;
  color: var(--cq-muted, #64748b);
  display: block;
}

.sa-dropdown-menu {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  border: 1px solid var(--cq-border, #e2e8f0);
}

/* ─────────────────────────────────────────────────────────────
   CARDS & STATS THEME
   ───────────────────────────────────────────────────────────── */
.sa-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--cq-border, #e2e8f0);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  padding: 24px;
}

.sa-stat-card {
  position: relative;
  width: 100%;
  min-height: 125px;
  background: #ffffff;
  border-radius: 26px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(0, 40, 100, 0.04);
  border: 1px solid rgba(235, 240, 246, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sa-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 40, 100, 0.08);
}

/* Bottom Flowing Wave matching user reference SVG */
.sa-stat-card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 48px;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M 0,60 C 70,60 110,22 200,8 L 200,60 Z' fill='%23edf4ff'/%3E%3C/svg%3E");
  transition: all 0.3s ease;
}

.sa-stat-card-blue::after   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M 0,60 C 70,60 110,22 200,8 L 200,60 Z' fill='%23edf4ff'/%3E%3C/svg%3E"); }
.sa-stat-card-green::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M 0,60 C 70,60 110,22 200,8 L 200,60 Z' fill='%23e6f9ed'/%3E%3C/svg%3E"); }
.sa-stat-card-red::after    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M 0,60 C 70,60 110,22 200,8 L 200,60 Z' fill='%23fdeeed'/%3E%3C/svg%3E"); }
.sa-stat-card-cyan::after   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M 0,60 C 70,60 110,22 200,8 L 200,60 Z' fill='%23e2f7ff'/%3E%3C/svg%3E"); }
.sa-stat-card-purple::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M 0,60 C 70,60 110,22 200,8 L 200,60 Z' fill='%23f1e9fe'/%3E%3C/svg%3E"); }

.sa-stat-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sa-stat-label {
  font-size: 1.02rem;
  font-weight: 600;
  color: #4b586d;
  margin-bottom: 2px;
  letter-spacing: -0.2px;
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
}

.sa-stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
}

.sa-stat-icon {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  font-size: 32px;
}

.text-primary {
  color: #0066fe !important;
}

.text-success {
  color: #16a34a !important;
}

.text-danger {
  color: #dc2626 !important;
}

.text-cyan {
  color: #0284c7 !important;
}

.text-purple {
  color: #7c3aed !important;
}

/* Radial Gradient Icon Squircle Box per Metric */
.sa-stat-icon-blue    { background: radial-gradient(circle at center, #edf4ff 0%, #e3eeff 100%); color: #0066fe; }
.sa-stat-icon-green   { background: radial-gradient(circle at center, #f0fdf4 0%, #dcfce7 100%); color: #16a34a; }
.sa-stat-icon-red     { background: radial-gradient(circle at center, #fef2f2 0%, #fee2e2 100%); color: #dc2626; }
.sa-stat-icon-cyan    { background: radial-gradient(circle at center, #ecfeff 0%, #cffaff 100%); color: #0284c7; }
.sa-stat-icon-purple  { background: radial-gradient(circle at center, #f5f3ff 0%, #ede9fe 100%); color: #7c3aed; }
.sa-stat-icon-indigo  { background: radial-gradient(circle at center, #eef2ff 0%, #e0e7ff 100%); color: #4f46e5; }
.sa-stat-icon-amber   { background: radial-gradient(circle at center, #fffbe6 0%, #fef3c7 100%); color: #d97706; }
.sa-stat-icon-emerald { background: radial-gradient(circle at center, #ecfdf5 0%, #d1fae5 100%); color: #059669; }

.sa-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--cq-navy, #0f172a);
  margin-bottom: 16px;
}

/* ─────────────────────────────────────────────────────────────
   TABLE THEME
   ───────────────────────────────────────────────────────────── */
.sa-table-wrapper {
  background: #ffffff;
  border: 1px solid var(--cq-border, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.sa-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.sa-table th {
  background-color: #f8fafc;
  color: var(--cq-muted, #64748b);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cq-border, #e2e8f0);
}

.sa-table td {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--cq-slate, #334155);
  border-bottom: 1px solid var(--cq-border, #e2e8f0);
  vertical-align: middle;
}

.sa-table tbody tr:last-child td {
  border-bottom: none;
}

.sa-table tbody tr:hover {
  background-color: #f8fafc;
}

/* ─────────────────────────────────────────────────────────────
   FORM CONTROLS & INPUT THEME (MODERN & EYE-CATCHING)
   ───────────────────────────────────────────────────────────── */
.sa-form-group {
  margin-bottom: 20px;
}

.sa-form-label,
.sa-card .form-label,
.needs-validation .form-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 7px;
  display: block;
  letter-spacing: -0.1px;
}

.sa-form-label .text-danger,
.sa-card .form-label .text-danger,
.needs-validation .form-label .text-danger {
  color: #ef4444 !important;
  font-weight: 700;
  margin-left: 2px;
}

.sa-form-label .text-muted,
.sa-card .form-label .text-muted,
.needs-validation .form-label .text-muted {
  font-size: 12px;
  font-weight: 400;
  color: #64748b !important;
}

.sa-form-control,
.sa-form-select,
.sa-card .form-control,
.sa-card .form-select,
.needs-validation .form-control,
.needs-validation .form-select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-primary, "Inter", Arial, sans-serif);
  color: #0f172a;
  background-color: #ffffff;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.sa-card .form-control::placeholder,
.needs-validation .form-control::placeholder {
  color: #94a3b8;
  font-size: 13.5px;
  opacity: 1;
}

.sa-card .form-control:hover,
.sa-card .form-select:hover,
.needs-validation .form-control:hover,
.needs-validation .form-select:hover {
  border-color: #94a3b8;
}

.sa-form-control:focus,
.sa-form-select:focus,
.sa-card .form-control:focus,
.sa-card .form-select:focus,
.needs-validation .form-control:focus,
.needs-validation .form-select:focus {
  outline: none;
  border-color: #2563eb;
  background-color: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12);
}

/* Textarea sizing */
.sa-card textarea.form-control,
.needs-validation textarea.form-control {
  min-height: 44px;
  line-height: 1.5;
  resize: vertical;
}

/* Universal Input Group & Icon-Prefix / Suffix Styling */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  line-height: 1.5;
  transition: all 0.2s ease;
}

/* Prefix Icon / Text (Left Side) */
.input-group > .input-group-text:first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.input-group > .input-group-text:first-child ~ .form-control,
.needs-validation .input-group > .input-group-text:first-child ~ .form-control,
.input-group.has-validation > .input-group-text:first-child ~ .form-control {
  position: relative;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* Suffix / Password Toggle Button (Right Side) */
.input-group > .form-control:first-child,
.needs-validation .input-group > .form-control:first-child,
.input-group.has-validation > .form-control:first-child {
  position: relative;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .toggle-pwd-btn,
.input-group.has-validation > .toggle-pwd-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border: 1px solid #cbd5e1;
  border-left: none;
  background: #f8fafc;
  color: #64748b;
  padding: 0 14px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}

.input-group > .toggle-pwd-btn:hover,
.input-group.has-validation > .toggle-pwd-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* Active & Focus States */
.input-group:focus-within > .input-group-text:first-child {
  border-color: #2563eb !important;
  color: #2563eb;
  background-color: #eff6ff;
}

.input-group:focus-within > .form-control {
  border-color: #2563eb !important;
  z-index: 3;
}

.input-group:focus-within > .toggle-pwd-btn {
  border-color: #2563eb;
}


/* ─────────────────────────────────────────────────────────────
   VALIDATION STYLES (NO-VALIDATE / NEEDS-VALIDATION)
   ───────────────────────────────────────────────────────────── */

/* Clean valid state: avoid overwhelming green icons across whole form */
.was-validated .needs-validation .form-control:valid,
.was-validated .needs-validation .form-select:valid {
  border-color: #cbd5e1;
  background-image: none !important;
}

.was-validated .needs-validation .form-control:valid:focus,
.was-validated .needs-validation .form-select:valid:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12);
}

/* Invalid State */
.sa-form-control.is-invalid,
.sa-form-select.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .needs-validation .form-control:invalid,
.was-validated .needs-validation .form-select:invalid,
.was-validated .needs-validation textarea.form-control:invalid {
  border-color: #ef4444 !important;
  background-color: #fffafb !important;
  background-image: none !important;
}

.was-validated .needs-validation .form-select:invalid,
.form-select.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dc3545' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-position: right 14px center !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .needs-validation .form-control:invalid:focus,
.was-validated .needs-validation .form-select:invalid:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.16) !important;
}

/* Input group invalid state */
.input-group.has-validation:has(.is-invalid) > .toggle-pwd-btn,
.was-validated .input-group.has-validation:has(:invalid) > .toggle-pwd-btn {
  border-color: #ef4444 !important;
  background-color: #fffafb !important;
  color: #ef4444 !important;
}

/* Invalid Feedback */
.invalid-feedback,
.sa-form-group .invalid-feedback,
.needs-validation .invalid-feedback {
  display: none;
  width: 100%;
  font-size: 12.5px;
  color: #dc2626;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: -0.1px;
}

.invalid-feedback.d-block,
.is-invalid ~ .invalid-feedback,
.is-invalid + .invalid-feedback,
.input-group.has-validation:has(.is-invalid) ~ .invalid-feedback,
.input-group.has-validation:has(.is-invalid) > .invalid-feedback,
.was-validated .needs-validation :invalid ~ .invalid-feedback,
.was-validated .needs-validation .input-group.has-validation:has(:invalid) ~ .invalid-feedback,
.was-validated .needs-validation .input-group.has-validation:has(:invalid) > .invalid-feedback {
  display: flex !important;
  align-items: center;
  gap: 5px;
  animation: saFeedbackSlideDown 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}


@keyframes saFeedbackSlideDown {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS THEME
   ───────────────────────────────────────────────────────────── */
.sa-btn-primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 10.5px 22px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.sa-btn-primary:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38);
}

.sa-btn-primary:active {
  transform: translateY(0);
}

.sa-btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sa-btn-secondary {
  background-color: #ffffff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 10.5px 22px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.sa-btn-secondary:hover {
  background-color: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

/* ─────────────────────────────────────────────────────────────
   STATUS BADGES
   ───────────────────────────────────────────────────────────── */
.sa-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.sa-badge-active {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.sa-badge-inactive {
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.sa-badge-suspended {
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.sa-badge-pending {
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER COMPONENT
   ───────────────────────────────────────────────────────────── */
.sa-footer {
  background-color: #ffffff;
  border-top: 1px solid var(--cq-border, #e2e8f0);
  padding: 16px 32px;
  margin-top: auto;
}

.sa-footer-link {
  color: var(--cq-muted, #64748b);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sa-footer-link:hover {
  color: var(--cq-blue-primary, #2563eb);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE & DRAWER BEHAVIOR
   ───────────────────────────────────────────────────────────── */
.sa-sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (max-width: 991px) {
  .sa-sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    z-index: 1060;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sa-layout-wrapper.sa-drawer-open .sa-sidebar {
    transform: translateX(260px);
  }

  .sa-layout-wrapper.sa-drawer-open .sa-sidebar-backdrop {
    display: block;
    opacity: 1;
  }

  .sa-navbar {
    padding: 0 16px;
  }

  .sa-navbar-search {
    width: 200px;
  }

  .sa-content-body {
    padding: 20px 16px;
  }

  .sa-footer {
    padding: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────
   CLINICS LIST & DATATABLES CUSTOM THEME
   ───────────────────────────────────────────────────────────── */

/* Search input with leading icon */
.sa-table-search-box {
  width: 380px;
  max-width: 100%;
}

.sa-table-search-input {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding-left: 44px;
  padding-right: 16px;
  height: 44px;
  font-size: 14px;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}

.sa-table-search-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.sa-table-search-input:focus {
  background-color: #ffffff;
  border-color: #0066fe;
  box-shadow: 0 0 0 3.5px rgba(0, 102, 254, 0.15);
  outline: none;
}

.sa-table-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
  z-index: 5;
}

/* Filter Button */
.sa-btn-filter {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  height: 44px;
  padding: 0 20px;
  font-weight: 600;
  font-size: 14px;
  color: #475569;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}

.sa-btn-filter:hover, .sa-btn-filter:focus {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Primary Add Button */
.sa-btn-add-primary {
  background-color: #0066fe;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  height: 44px;
  padding: 0 24px;
  font-weight: 600;
  font-size: 14.5px;
  box-shadow: 0 4px 14px rgba(0, 102, 254, 0.25);
  transition: all 0.2s ease;
  text-decoration: none;
}

.sa-btn-add-primary:hover {
  background-color: #0052cc;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 102, 254, 0.35);
}

/* Table Card Container */
.sa-table-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 20px;
  box-shadow: 0 4px 20px -2px rgba(0, 40, 100, 0.04);
  padding: 0;
  overflow: hidden;
}

.sa-table-header {
  padding: 20px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.sa-page-length-select {
  width: 78px;
  display: inline-block;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}

.sa-page-length-select:focus {
  border-color: #0066fe;
  box-shadow: 0 0 0 3px rgba(0, 102, 254, 0.15);
  outline: none;
}

/* DataTables Custom Table Styling */
.sa-data-table {
  width: 100% !important;
  margin: 0 !important;
}

.sa-data-table.table-bordered {
  border: 1px solid #e2e8f0 !important;
  border-collapse: collapse !important;
}

.sa-data-table thead th,
.sa-data-table.table-bordered thead th {
  background-color: #f8fafc;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 700;
  padding: 14px 18px;
  border: 1px solid #e2e8f0 !important;
  border-bottom: 2px solid #cbd5e1 !important;
  white-space: nowrap;
}

.sa-data-table tbody td,
.sa-data-table.table-bordered tbody td {
  padding: 14px 18px;
  font-size: 14px;
  color: #334155;
  border: 1px solid #e2e8f0 !important;
  vertical-align: middle;
}

.sa-data-table tbody tr:hover td {
  background-color: #f8fafc;
}

/* Status Pills */
.sa-badge-active-pill {
  background-color: #dcfce7;
  color: #16a34a;
  border-radius: 20px;
  padding: 6px 18px;
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
}

.sa-badge-inactive-pill {
  background-color: #fee2e2;
  color: #dc2626;
  border-radius: 20px;
  padding: 6px 18px;
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
}

/* View Button */
.sa-btn-view-pill {
  background-color: #e3eeff;
  color: #0066fe;
  border-radius: 10px;
  padding: 6px 20px;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
  border: none;
}

.sa-btn-view-pill:hover {
  background-color: #0066fe;
  color: #ffffff;
}

/* DataTables Footer & Pagination Styling */
.sa-table-footer {
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

.dataTables_info {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding-top: 6px !important;
}

.dataTables_paginate {
  margin: 0 !important;
}

.dataTables_paginate .pagination {
  gap: 6px;
  margin: 0;
}

.dataTables_paginate .page-item .page-link {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-weight: 600;
  font-size: 13.5px;
  padding: 6px 14px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}

.dataTables_paginate .page-item.active .page-link {
  background-color: #0066fe !important;
  border-color: #0066fe !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 254, 0.3);
}

.dataTables_paginate .page-item:not(.active) .page-link:hover {
  background-color: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Subscription Status Pills & Duration */
.sa-badge-active-pill {
  background-color: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sa-badge-expired-pill {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sa-sub-duration-pill {
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  display: inline-block;
}

/* Action Icons & Buttons */
.sa-action-btn-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sa-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  background: transparent;
}

.sa-action-btn.sa-btn-view {
  background-color: #e3eeff;
  color: #0066fe;
}

.sa-action-btn.sa-btn-view:hover {
  background-color: #0066fe;
  color: #ffffff;
  transform: translateY(-1px);
}

.sa-action-btn.sa-btn-edit {
  background-color: #f1f5f9;
  color: #475569;
}

.sa-action-btn.sa-btn-edit:hover {
  background-color: #0f172a;
  color: #ffffff;
  transform: translateY(-1px);
}

.sa-action-btn.sa-btn-delete {
  background-color: #fee2e2;
  color: #dc2626;
}

.sa-action-btn.sa-btn-delete:hover {
  background-color: #dc2626;
  color: #ffffff;
  transform: translateY(-1px);
}

.sa-badge-clickable {
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.sa-badge-clickable:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

/* Form Sections & Password Toggle Theme */
.sa-form-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.sa-form-section-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-color: #eff6ff;
  color: #0066fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.sa-password-wrapper {
  position: relative;
}

.sa-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-password-toggle:hover {
  color: #334155;
}

/* ─────────────────────────────────────────────────────────────
   CLINIC DETAILS / VIEW PAGE STYLES (NEW REFERENCE DESIGN)
   ───────────────────────────────────────────────────────────── */
.sa-clinic-banner-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 24px 28px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
  margin-bottom: 24px;
}

.sa-clinic-logo-box {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sa-clinic-logo-box:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.sa-logo-hover-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  background: #0284c7;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  transition: transform 0.2s ease, background 0.2s ease;
  pointer-events: none;
}

.sa-clinic-logo-box:hover .sa-logo-hover-badge {
  transform: scale(1.1);
  background: #0369a1;
}

.sa-clinic-banner-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0f172a;
}

.sa-clinic-banner-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: #64748b;
  margin-top: 6px;
}

.sa-clinic-banner-meta i {
  color: #94a3b8;
  font-size: 14px;
}

.sa-clinic-banner-meta .meta-sep {
  color: #cbd5e1;
}

.sa-clinic-stats-group {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .sa-clinic-stats-group {
    width: 100%;
  }
}

.sa-small-stat-card {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 14px;
  padding: 14px 20px;
  text-align: center;
  min-width: 130px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sa-small-stat-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  transform: translateY(-2px);
}

.sa-small-stat-card .stat-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eff6ff;
  color: #0066fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 6px;
}

.sa-small-stat-card .stat-number {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
  line-height: 1.2;
}

.sa-small-stat-card .stat-title {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-top: 4px;
  white-space: nowrap;
}

/* Horizontal Nav Tabs (Pills Bar) */
.sa-clinic-pills-bar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  overflow-x: auto;
  white-space: nowrap;
}

.sa-clinic-pill-btn {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.sa-clinic-pill-btn:hover {
  background: #f1f5f9;
  color: #0066fe;
}

.sa-clinic-pill-btn.active {
  background: #0066fe;
  color: #ffffff;
  font-weight: 600;
}

.sa-clinic-pill-btn.active i {
  color: #ffffff;
}

/* Overview Cards */
.sa-detail-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.02);
  margin-bottom: 24px;
}

.sa-detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.sa-detail-card-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sa-detail-card-title i {
  color: #0066fe;
  font-size: 18px;
}

.sa-btn-card-edit {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.sa-btn-card-edit:hover {
  background: #f8fafc;
  color: #0066fe;
  border-color: #cbd5e1;
}

/* Key-Value Info Table */
.sa-info-table {
  width: 100%;
  margin-bottom: 0;
}

.sa-info-table tr {
  border-bottom: 1px solid #f8fafc;
}

.sa-info-table tr:last-child {
  border-bottom: none;
}

.sa-info-table td {
  padding: 10px 0;
  font-size: 13.5px;
  vertical-align: middle;
}

.sa-info-table td.sa-key-col {
  color: #64748b;
  font-weight: 500;
  width: 38%;
}

.sa-info-table td.sa-val-col {
  color: #0f172a;
  font-weight: 600;
}

.sa-copy-icon-btn {
  background: transparent;
  border: none;
  color: #0066fe;
  padding: 0 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  transition: color 0.15s ease;
}

.sa-copy-icon-btn:hover {
  color: #004ecc;
}

/* Logo Box Preview inside Card */
.sa-logo-upload-preview {
  width: 130px;
  height: 130px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 16px;
}

/* Quick Action Vertical Buttons */
.sa-btn-action-primary {
  background: #0066fe;
  color: #ffffff;
  border: 1px solid #0066fe;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: all 0.2s ease;
  text-decoration: none;
}

.sa-btn-action-primary:hover {
  background: #0052cc;
  border-color: #0052cc;
  color: #ffffff;
}

.sa-btn-action-soft {
  background: #ffffff;
  color: #0066fe;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: all 0.2s ease;
  text-decoration: none;
}

.sa-btn-action-soft:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #0052cc;
}

.sa-btn-action-danger {
  background: #ffffff;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.sa-btn-action-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.sa-btn-action-success {
  background: #ffffff;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.sa-btn-action-success:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

@media (min-width: 992px) {
  .sa-border-start-lg {
    border-left: 1px solid #e2e8f0;
  }
}


/* Business Hours Table */
.sa-hours-table {
  width: 100%;
}

.sa-hours-table td {
  padding: 8px 0;
  font-size: 13.5px;
}

.sa-hours-table .day-col {
  color: #475569;
  font-weight: 500;
  width: 35%;
}

.sa-hours-table .time-col {
  color: #0f172a;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   CLINIC SCHEDULE TAB STYLES & REFINED ALIGNMENT
   ───────────────────────────────────────────────────────────── */
.sa-schedule-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sa-schedule-header-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.sa-schedule-day-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 28px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.sa-schedule-day-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.sa-schedule-day-card.is-closed {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.sa-day-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #bfdbfe;
}

.is-closed .sa-day-avatar {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

.sa-day-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sa-day-name {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.sa-schedule-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 6px;
  display: block;
}

.sa-schedule-select {
  height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background-color: #ffffff;
  transition: all 0.2s ease;
  box-shadow: none;
}

.sa-schedule-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.sa-schedule-timing-col {
  border-left: 1px solid #edf2f7;
  padding-left: 32px;
}

@media (max-width: 991.98px) {
  .sa-schedule-timing-col {
    border-left: none;
    border-top: 1px solid #edf2f7;
    padding-left: 0;
    padding-top: 20px;
    margin-top: 10px;
  }
}

.sa-session-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  transition: all 0.2s ease;
}

.sa-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

.sa-time-input-group {
  display: flex;
  align-items: center;
  width: 100%;
}

.sa-time-input-group .input-group-text {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: #64748b;
  padding: 0 12px;
  height: 42px;
  font-size: 13px;
}

.sa-time-input-group .form-control {
  border: 1.5px solid #cbd5e1;
  border-radius: 0 10px 10px 0;
  height: 42px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
}

.sa-time-input-group .form-control:focus {
  border-color: #2563eb;
  box-shadow: none;
}

.sa-closed-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 20px 24px;
  color: #64748b;
}

.sa-copy-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 24px 28px;
}

.sa-day-pill-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.sa-day-pill-check:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.sa-day-pill-check:has(input:checked) {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.sa-day-pill-check input {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   SUPER ADMIN LOGIN PORTAL THEME
   ───────────────────────────────────────────────────────────── */
.sa-login-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 10%, #1e293b 0%, #0f172a 100%);
  font-family: var(--font-primary, "Inter", Arial, sans-serif);
  color: #0f172a;
  position: relative;
  overflow-x: hidden;
}

.sa-login-body::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 350px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.sa-login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 20px;
  padding: 38px 34px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 1px solid #e2e8f0;
  animation: saLoginFadeUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.sa-logo-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.sa-brand-title {
  font-family: var(--font-heading, "Manrope", sans-serif);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: #0f172a;
}

.sa-input-password {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.sa-input-group-text {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: none;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  color: #64748b;
  cursor: pointer;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sa-input-group-text:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.input-group:focus-within .sa-input-group-text {
  border-color: #2563eb;
}

.sa-btn-login {
  width: 100%;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.sa-btn-login:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38);
}

.sa-btn-login:active {
  transform: translateY(0);
}

.sa-btn-login:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 576px) {
  .sa-login-card {
    padding: 28px 22px;
    border-radius: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────
   SUPER ADMIN PLANS & SUBSCRIPTIONS STYLES
   ───────────────────────────────────────────────────────────── */
.sa-plan-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sa-plan-badge-active {
  background-color: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.sa-plan-badge-inactive {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.sa-plan-price {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
}

.sa-plan-duration {
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  display: inline-block;
}

.sa-plan-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  transition: all 0.15s ease-in-out;
}

.sa-plan-action-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.sa-plan-action-btn.edit-btn:hover {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.sa-plan-action-btn.delete-btn:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

/* Subscription Status Badges & Duration Pill */
.sa-badge-active-pill {
  background-color: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sa-badge-expired-pill {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sa-sub-duration-pill {
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  display: inline-block;
}

/* DataTables Responsive Footer & Pagination Layout */
.sa-table-footer {
  padding: 18px 24px !important;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  margin-top: 8px;
}

.dataTables_info {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}

.dataTables_paginate {
  margin: 0 !important;
}

.dataTables_paginate .pagination {
  gap: 6px;
  margin: 0 !important;
}

/* Notification provider cards */
.notification-settings-tabs { margin: 20px 0 0; border-bottom: 1px solid #dbe4ee; gap: 8px; }
.notification-settings-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; color: #64748b; font-weight: 700; padding: 12px 22px; }
.notification-settings-tabs .nav-link:hover { color: #263a63; background: #f8fafc; }
.notification-settings-tabs .nav-link.active { color: #263a63; background: #eef2ff; border-bottom-color: #6366f1; }
.notification-provider-card { border: 1px solid #dbe4ee; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.notification-provider-card.is-active { border-color: #8b7cff; box-shadow: 0 0 0 2px rgba(99, 78, 220, .12); }
.notification-provider-card .notification-provider-card-header { padding: 10px !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notification-provider-card-header strong, .notification-provider-card-header small { display: block; }
.notification-provider-card-header small { color: #64748b; margin-top: 3px; }
.notification-provider-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #f1f5f9; color: #263a63; font-size: 1.25rem; }
.notification-provider-card-body { padding: 0 20px 20px; }
.notification-provider-details > [data-provider-detail] { border: 1px solid #dbe4ee; border-radius: 14px; background: #fff; padding: 20px; min-height: 100%; }
.notification-provider-details > [data-provider-detail]:not(.d-none) { border-color: #8b7cff; box-shadow: 0 0 0 2px rgba(99, 78, 220, .12); }
.notification-provider-details .notification-provider-card-body > [class*="col-"] { margin-top: 0; margin-bottom: 14px; }
.notification-provider-card-body > [class*="col-"] { width: 100%; padding-left: 0; padding-right: 0; margin-top: 14px; }
.notification-provider-switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.notification-provider-switch input { opacity: 0; width: 0; height: 0; }
.notification-provider-slider { position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background: #cbd5e1; transition: .2s ease; }
.notification-provider-slider::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s ease; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); }
.notification-provider-switch input:checked + .notification-provider-slider { background: #16a34a; }
.notification-provider-switch input:checked + .notification-provider-slider::before { transform: translateX(20px); }