/* Shared CSAI web language, adapted from FinstackHub's UI component standard.
   Loaded after page styles. Tenant names, logos and application behavior stay configurable. */
html.csai-hub {
  color-scheme: light;
  --canvas: #eceef1;
  --surface: rgba(255,255,255,.92);
  --surface-muted: #f7f5fc;
  --ink: #242039;
  --line: #e9e7f1;
  --primary: #6340ad;
  --primary-rgb: 99,64,173;
  --primary-hover: #553695;
  --primary-dark: #4d3187;
  --primary-light: #8460d1;
  --primary-lighter: #f0ebfc;
  --primary-blue: #6340ad;
  --secondary-indigo: #6944bd;
  --primary-gradient: linear-gradient(115deg,#6340ad,#6944bd);
  --primary-gradient-hover: linear-gradient(115deg,#553695,#6340ad);
  --emerald: #6340ad;
  --navy: #4d3187;
  --accent: #6944bd;
  --accent-rgb: 105,68,189;
  --bg-primary: #fff;
  --bg-secondary: #eceef1;
  --bg-tertiary: #f7f5fc;
  --bg-card: #fff;
  --bg-hover: #f7f5fc;
  --text-primary: #242039;
  --text-secondary: #6c7180;
  --text-tertiary: #777d8b;
  --text-muted: #777d8b;
  --border-primary: #e9e7f1;
  --border-color: #e9e7f1;
  --success: #138a75;
  --success-color: #138a75;
  --success-light: #e6f7f1;
  --warning: #b87716;
  --warning-color: #b87716;
  --warning-light: #fff3db;
  --error: #c45151;
  --error-color: #c45151;
  --error-light: #fff0ef;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 70px;
}
.csai-hub body {
  min-width: 320px;
  background: linear-gradient(145deg,#f3f4f6,#e8eaed) fixed !important;
  color: var(--ink);
  font-family: var(--font-body) !important;
  font-size: 14px;
}
.csai-hub *, .csai-hub *::before, .csai-hub *::after { box-sizing: border-box; }
.csai-hub :is(button,input,select,textarea) { font-family: var(--font-body); }
.csai-hub :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid rgba(99,64,173,.35) !important;
  outline-offset: 3px;
}
.csai-hub :is(button,input,select,textarea):disabled { cursor: not-allowed; opacity: .6; }
.csai-hub .floating-header {
  height: 80px !important;
  padding: 0 !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px #41346c0b !important;
  backdrop-filter: blur(18px);
  animation: none;
}
/* Retain the existing 80px shell height so page offsets remain aligned. */
.csai-hub .floating-header-content { padding: 12px 28px; gap: 12px; height: 80px !important; min-height: 0 !important; flex-wrap: nowrap !important; }
.csai-hub .floating-header .header-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; }
.csai-hub body:has(#globalFloatingHeader) .sidebar-toggle { display: none !important; }
.csai-hub .floating-header .brand-section { flex: 1; }
.csai-hub .floating-header :is(.header-menu-btn,.action-button) i { color: var(--primary) !important; }
.csai-hub .floating-header :is(.brand-title,.brand-info h1) {
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  font-size: 22px !important;
}
.csai-hub .floating-header :is(.brand-subtitle,.brand-info p) {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
  font-size: 12px;
}
.csai-hub .floating-header :is(.header-menu-btn,.action-button) {
  background: #fff !important;
  color: var(--primary) !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px;
  box-shadow: none;
  min-height: 37px;
}
.csai-hub .floating-header :is(.header-menu-btn,.action-button):hover { background: var(--primary-lighter) !important; }
.csai-hub .status-indicator-modern { color: var(--success) !important; background: var(--success-light); border-color: #cdece3; }
.csai-hub .modern-logo { border-radius: 10px; box-shadow: none; border-color: var(--line); }
.csai-hub .sidebar-menu { background: var(--surface); border-right: 1px solid var(--line); box-shadow: 5px 0 22px #41346c08; }
.csai-hub .sidebar-header { background: var(--surface-muted); padding: 20px 14px; gap: 8px; }
.csai-hub .sidebar-brand { min-width: 0; }
.csai-hub .sidebar-brand h3 { font-size: 15px; color: var(--ink); }
.csai-hub .sidebar-brand p { font-size: 11px; overflow-wrap: anywhere; }
.csai-hub .nav-section-title { font-size: 10px; letter-spacing: .8px; color: var(--text-secondary); }
.csai-hub .sidebar-nav :is(.nav-item,.nav-item-parent,.nav-subitem,.nav-subitem-parent,.nav-sub-subitem) {
  min-height: 37px; border-radius: 8px; font-size: 12px; color: var(--text-secondary); gap: 8px;
}
.csai-hub .sidebar-nav :is(.nav-item,.nav-item-parent,.nav-subitem,.nav-subitem-parent,.nav-sub-subitem):is(:hover,.active) {
  background: var(--primary-lighter); color: var(--primary);
}
.csai-hub .sidebar-nav :is(.active,:hover) > i { color: var(--primary); }
.csai-hub .sidebar-menu.collapsed :is(.nav-section-title,.nav-item-parent,.nav-subitem-parent) { display: none; }
.csai-hub :is(.card,.stat-card,.metric-card,.dashboard-card,.v-card,.page-header,.content-card) {
  background: var(--surface) !important; border: 1px solid var(--line); border-radius: 14px !important;
  box-shadow: 0 4px 20px #41346c08 !important;
}
.csai-hub :is(.page-title,h1.text-h4) { font-size: clamp(24px,2.2vw,28px) !important; font-weight: 680; letter-spacing: -.5px; }
.csai-hub :is(.card-title,.section-title) { color: var(--ink); font-weight: 650; font-size: 14px !important; }
.csai-hub :is(.btn-primary,.btn-refresh,.v-btn.bg-primary) {
  background: var(--primary-gradient) !important; color: #fff !important; border: 1px solid transparent;
  border-radius: 9px !important; min-height: 37px; box-shadow: 0 3px 8px #6340ad18;
}
.csai-hub :is(.btn-primary,.btn-refresh,.v-btn.bg-primary):hover { background: var(--primary-gradient-hover) !important; }
.csai-hub .btn-secondary { background: #fff; color: var(--text-primary); border: 1px solid var(--line); border-radius: 9px; min-height: 37px; }
.csai-hub :is(.btn-danger,.btn-delete) { background: var(--error-light) !important; color: #a43f45 !important; border: 1px solid #efcecc; border-radius: 9px; }
.csai-hub :is(.form-control,.form-input,.form-select,.filter-input,.filter-select,input[type=date],input[type=search],select) {
  min-height: 37px; max-width: 100%; border: 1px solid var(--line); border-radius: 9px;
  background-color: #fff; color: var(--ink); font-size: 13px; padding: 8px 11px;
}
.csai-hub select:not([multiple]):not([size]) {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c7180' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center; background-repeat: no-repeat;
}
.csai-hub :is(.filter-bar,.filters,.filter-toolbar) { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.csai-hub :is(.form-group,.filter-field) { min-width: 0; }
.csai-hub .filter-field :is(input,select) { width: 100%; height: 42px; padding-top: 8px !important; padding-bottom: 8px !important; }
.csai-hub :is(.form-group,.filter-field) > label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.csai-hub :is(.table-container,.table-wrapper,.table-responsive,.v-table__wrapper) { max-width: 100%; overflow-x: auto; }
.csai-hub :is(.data-table,.modern-table) { border-collapse: collapse; width: 100%; font-size: 12px; }
.csai-hub :is(.data-table,.modern-table) th { background: var(--surface-muted); color: var(--text-secondary); font-size: 11px; font-weight: 650; padding: 12px; }
.csai-hub :is(.data-table,.modern-table) td { padding: 12px; border-bottom: 1px solid var(--line); }
.csai-hub :is(.data-table,.modern-table) tbody tr:hover { background: #faf8fd; }
.csai-hub :is(.profile-modal-content,.swal2-popup) { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 55px #41346c26; }
.csai-hub .hub-confirmation { width: min(440px,calc(100vw - 32px)); margin: auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 18px 55px #41346c26; }
.csai-hub .hub-confirmation::backdrop { background: rgba(36,32,57,.4); }
.csai-hub .hub-confirmation h2 { margin: 0 0 12px; font-size: 18px; }
.csai-hub .hub-confirmation p { margin: 0 0 24px; color: var(--text-secondary); line-height: 1.6; }
.csai-hub .hub-confirmation-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.csai-hub .hub-confirmation button { padding: 8px 14px; }
.csai-hub body:has(.login-container:not([style*="display: none"])) { margin-left: 0 !important; }
@media (max-width: 768px) {
  .csai-hub .sidebar-menu { left: calc(-1 * var(--sidebar-width)) !important; width: var(--sidebar-width) !important; top: 80px !important; height: calc(100dvh - 80px); }
  .csai-hub .sidebar-menu.active { left: 0 !important; }
  .csai-hub .floating-header-content { padding: 10px 16px; gap: 8px; }
  .csai-hub .floating-header .brand-title { font-size: 17px !important; }
  .csai-hub .floating-header .brand-subtitle { font-size: 10px; }
  .csai-hub .floating-header :is(.status-indicator-modern,.action-button span) { display: none; }
  .csai-hub .header-actions { gap: 6px; }
  .csai-hub .brand-section { gap: 8px; min-width: 0; }
  .csai-hub .modern-logo { width: 36px; height: 36px; }
  .csai-hub .modern-logo img { max-width: 100%; }
  .csai-hub :is(.container,.main-container) { padding-left: 16px; padding-right: 16px; }
  .csai-hub :is(.filter-bar,.filters,.filter-toolbar) > :is(.form-group,.filter-field) { flex: 1 1 100%; }
  .csai-hub .sidebar-overlay { background: rgba(36,32,57,.4); }
}
@media (prefers-reduced-motion: reduce) {
  .csai-hub *, .csai-hub *::before, .csai-hub *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}