/* =====================================================
   ORIGINAL BASE (UNCHANGED)
===================================================== */
.btn_custom{text-transform:none}

div:where(.swal2-container).swal2-center>.swal2-popup{height:400px;width:430px}
.light-style .swal2-popup .swal2-title{margin-top:5px}
.swal2-actions{direction:rtl}

.btn-primary-edit{color:#fff;background-color:#9055fd;border-color:#9055fd}
.btn-primary-edit:hover{background-color:#7644cc;border-color:#7644cc;color:#fff}

.login-images{opacity:75%;filter:invert(1) sepia(1) saturate(5) hue-rotate(155deg)}

.ellipsis-text,.subhead-text{
  align-items:center;
  max-width:180px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  vertical-align:middle
}

.ellipsis-text.hoverable:hover,
.hover-container.datapoint:hover .subhead-text,
.hover-container.history:hover .subhead-text{
  white-space:normal;
  z-index:9999;
  position:relative;
  background-color:rgba(0,0,0,0);
  max-width:200px
}

.equal-height{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:180px;
  transition:all .3s ease-in-out
}

.card:hover{box-shadow:0 8px 16px rgba(0,0,0,.2)}
.card-custom-body{display:flex;flex-direction:column;justify-content:center;text-align:center;height:100%}
.scrollable-card-body{max-height:400px;overflow-y:auto}

.alert-log-item{
  box-shadow:0 4px 6px rgba(0,0,0,.2);
  color:#595151;
  background:#f9f9f9;
  padding:10px;
  border-radius:6px;
  margin-bottom:10px
}

/* =====================================================
   TABLE (COLOR UNCHANGED – TEXT ONLY REFINED)
===================================================== */
.gtable {
  font-family: "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 14px;                /* slightly more than card */
  border: 1px solid #e5e7eb;          /* soft neutral separator */
  background: #ffffff;

  overflow: hidden;                   /* required for rounded corners */
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* HEADER BACKGROUND – UNCHANGED */
.gtable thead{background:#f8f9fa}

/* UPDATED: small text + First Letter Capital */

.gtable th {
  background-color: color-mix(
    in srgb,
    var(--primary-color, #64748b) 25%,
    #f8f9fa
  );
  color: var(--app-text-color, #111827);

  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;             /* prevents cramped look */
  letter-spacing: 0.045em;      /* slightly better for 12px */
  text-transform: lowercase;

  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;

  white-space: nowrap;          /* avoids awkward wraps */
  user-select: none;            /* headers shouldn't be selectable */
}

/* First letter capital only */
.gtable th::first-letter {
  text-transform: uppercase;
}

.gtable td{
  padding:12px 16px;
  vertical-align:middle;
  border-bottom:1px solid #f1f3f4;
  font-size:1rem
}

.gtable td.text-human,
.gtable td.text-human span {
  text-transform: capitalize;
}

.gtable tbody tr:hover {
  background-color: color-mix(
    in srgb,
    var(--primary-color, #64748b) 4%,
    #f8f9fa
  );
  transition: background-color 0.2s ease;
}

.gtable tbody tr[data-expandable="true"]:hover {
  background-color: color-mix(
    in srgb,
    var(--primary-color, #64748b) 10%,
    #f8f9fa
  );
}

.gtable a{
  color:#1a73e8;
  text-decoration:none;
  font-weight:500
}
.gtable a:hover{text-decoration:underline}

/* =====================================================
   BUTTONS & BADGES (UNCHANGED)
===================================================== */
.gbtn{
  border-radius:20px;
  font-size:12px;
  padding:4px 12px;
  font-weight:500;
  transition:all .2s ease
}

.gbtn-primary{background:#1a73e8;color:#fff;border:none}
.gbtn-primary:hover{background:#1765cc}

.gbtn-warning{background:#fbbc04;color:#202124;border:none}
.gbtn-warning:hover{background:#e2aa03}

.gbadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  font-size:12px;
  font-weight:500;
  border-radius:8px;
  margin:2px
}

.gbadge-success{background:#e6f4ea;color:#137333}
.gbadge-danger{background:#fce8e6;color:#c5221f}
.gbadge-warning{background:#fef7e0;color:#a05a00}
.gbadge-info{background:#e8f0fe;color:#185abc}
.gbadge-primary{background:#e8f0fe;color:#1a73e8}
.gbadge-secondary{background:#f1f3f4;color:#5f6368}
.gbadge-dark{background:#202124;color:#fff}

.pagesize-custom{
  background:#e5e5e6;
  border-color:#e5e5e6;
  color:#000;
  box-shadow:0 2px 6px rgba(0,0,0,.05)
}

/* =====================================================
   ERROR PAGE (UNCHANGED)
===================================================== */
.error-page *{box-sizing:border-box}
.error-page{
  margin:0;
  padding:0;
  font-family:"Inter",sans-serif;
  background:linear-gradient(to right,#f8f9fa,#e9ecef);
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  color:#212529
}

.error-page .error-container{
  background:#fff;
  border-radius:16px;
  padding:60px 40px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  max-width:700px;
  width:90%;
  text-align:center;
  animation:fadeIn .6s ease-in-out
}

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

.error-page .error-code{font-size:6rem;font-weight:700;color:#ff6b6b}
.error-page h1{font-size:2.5rem;color:#343a40;margin:10px 0 20px}
.error-page p{font-size:1.1rem;color:#6c757d;margin:0 0 15px}

@media(max-width:600px){
  .error-page .error-code{font-size:4rem}
  .error-page h1{font-size:1.8rem}
}

/* =====================================================
   Table Expand Row – Readability Improvements
===================================================== */

/* Expanded row background + separation */
.gtable tr.expand-row,
.gtable tr[id^="expand-"] {
    background-color: #f8fafc; /* softer than #f8f9fa */
}

/* Remove default hover effect on expanded row */
.gtable tr[id^="expand-"]:hover {
    background-color: #f8fafc;
}

/* Expanded content container */
.gtable tr[id^="expand-"] td {
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
}

/* Inner content card */
.gtable tr[id^="expand-"] .expand-content {
    padding: 12px 20px;
    margin: 8px 16px;
    background: #ffffff;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    line-height: 1.6;
}

/* Labels */
.gtable tr[id^="expand-"] .expand-label {
    font-weight: 600;
    color: #111827;
}

/* Meta info (dates etc.) */
.gtable tr[id^="expand-"] .expand-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

/* Smooth open/close feel */
.gtable tr[id^="expand-"] {
    transition: background-color 0.2s ease;
}

/* Chevron animation (optional polish) */
.gtable .model-name i {
    transition: transform 0.2s ease;
}

/* =====================================================
   Action Buttons – Single Source of Truth
===================================================== */
/* =====================================================
   Rounded-3 Primary Button (White Text)
===================================================== */

.custom-btn {
  border-radius: 0.75rem;        /* Bootstrap rounded-3 */
  color: #fff !important;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Keep text white on all states */
.custom-btn:hover,
.custom-btn:focus,
.custom-btn:active {
  color: #fff !important;
}

/* Optional: softer hover (recommended) */
.custom-btn:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Icon polish */
.custom-btn i {
  font-size: 16px;
  line-height: 1;
}

/* =====================================================
   Page Size Dropdown Button
===================================================== */

.pagesize-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 14px;
  color: #334155;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;

  transition: all 0.15s ease-in-out;
}

/* Hover */
.pagesize-btn:hover {
  background-color: #eef2f7;
  color: #1e293b;
}

/* Active / open */
.pagesize-btn:focus,
.pagesize-btn.show {
  background-color: #e2e8f0;
  border-color: #cbd5e1;
  box-shadow: none;
}

/* Icon refinement */
.pagesize-btn i {
  font-size: 16px;
  opacity: 0.85;
}

/* Dropdown menu polish */
.dropdown-menu {
  border-radius: 12px;
  border-color: #e2e8f0;
}

.dropdown-item {
  font-size: 14px;
  padding: 8px 14px;
}

.dropdown-item:hover {
  background-color: #f1f5f9;
}

/* =====================================================
   Dropdown – Action Menu
===================================================== */
.dropdown-actions {
  min-width: 160px;
  padding: 6px 0;
  border-radius: 10px;
}

/* Dropdown items */
.dropdown-actions .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 14px;
  padding: 8px 14px;
  line-height: 1.25;
}

/* Icons inside dropdown */
.dropdown-actions .dropdown-item i {
  font-size: 16px;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Hover feedback (non-destructive) */
.dropdown-actions .dropdown-item:hover {
  background-color: var(--bs-gray-100);
}

/* Destructive action hover */
.dropdown-actions .dropdown-item.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.08);
}

/* Active / keyboard navigation */
.dropdown-actions .dropdown-item:active,
.dropdown-actions .dropdown-item:focus {
  background-color: var(--bs-gray-100);
}

/* =====================================================
   Page Size Button & Menu
===================================================== */
.pagesize-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

/* Current value emphasis */
.pagesize-value {
  min-width: 24px;
  text-align: center;
}

/* Dropdown menu */
.pagesize-menu {
  min-width: 120px;
  padding: 6px 0;
  border-radius: 10px;
}

/* Menu items */
.pagesize-menu .dropdown-item {
  font-size: 14px;
  padding: 8px 14px;
}

/* Hover */
.pagesize-menu .dropdown-item:hover {
  background-color: var(--bs-gray-100);
}

/* Active selection */
.pagesize-menu .dropdown-item.active {
  font-weight: 600;
  background-color: rgba(13, 110, 253, 0.08);
}

/* =====================================================
   White text & icons ONLY for primary action buttons
===================================================== */

/* Text color */
.btn-primary.action-btn {
  color: #ffffff !important;
}

/* Icon color */
.btn-primary.action-btn i {
  color: #ffffff !important;
}

/* Maintain white on hover / focus / active */
.btn-primary.action-btn:hover,
.btn-primary.action-btn:focus,
.btn-primary.action-btn:active {
  color: #ffffff !important;
}

.btn-primary.action-btn:hover i,
.btn-primary.action-btn:focus i,
.btn-primary.action-btn:active i {
  color: #ffffff !important;
}


/* STRONG ACTIVE INDICATOR */
.menu-item.active > .menu-link {
  background: #1e40af;                 /* darker blue */
  color: #ffffff;
  font-weight: 600;
  position: relative;
}

/* LEFT ACCENT BAR = instant recognition */
.menu-item.active > .menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: #93c5fd;                 /* light accent */
  border-radius: 0 4px 4px 0;
}

.menu-link {
  color: #475569;
}

.menu-link:hover {
  background: #e5e7eb;
  color: #0f172a;
}

.menu-sub .menu-item.active > .menu-link {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
  position: relative;
}

.menu-sub .menu-item.active > .menu-link::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #2563eb;
  border-radius: 2px;
}

.menu-item {
  margin-bottom: 6px;
}

.menu-sub {
  margin-top: 6px;
  margin-bottom: 10px;
}

.menu-link {
  transition: background 0.18s ease,
              color 0.18s ease,
              transform 0.12s ease;
}

.menu-link:hover {
  transform: translateX(2px);
}

.breadcrumb {
  font-size: 0.875rem;
  color: #64748b;
}

.breadcrumb-item.active {
  color: #0f172a;
  font-weight: 500;
}
.mdi {
    font-size: 1.1rem;   /* slightly bigger icons for affordance */
    vertical-align: middle;
}
.table td, .table th {
    color: #212529; /* default dark text */
}

.table .text-primary {
    color: #0d6efd; /* links/actions */
}












/* =====================================================
   SIDEBAR / MENU BASE
===================================================== */
.layout-menu.menu-vertical.menu.bg-menu-theme {
  background-color: transparent !important;
}

/* Menu item rounding */
.menu-vertical .menu-item .menu-link,
.menu-vertical .menu-header,
.menu-vertical .menu-block {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* =====================================================
   ACTIVE / OPEN MENU STATES
===================================================== */

/* Limit highlight width */
.menu-item.active > .menu-link,
.menu-item.active.open > .menu-link {
  width: 80%;
}

/* Active text & icons */
.menu-item.active > .menu-link,
.menu-item.active > .menu-link i,
.menu-item.active > .menu-link .text-truncate,
.menu-item.open > .menu-link i,
.menu-item.open > .menu-link .text-truncate {
  color: #ffffff !important;
}

/* =====================================================
   HOVER & TRANSITION POLISH
===================================================== */
.menu-link {
  transition: background 0.18s ease,
              color 0.18s ease,
              transform 0.12s ease;
}

.menu-link:hover {
  transform: translateX(2px);
}

/* =====================================================
   GLOBAL APP BACKGROUND (SCROLL SAFE)
===================================================== */
html,
body {
  height: 100%;
  background-color: var(--primary-bg-soft);
}

/* All layout containers must be transparent */
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.content-body,
.page-content,
.container-fluid,
.container-xxl,
.dashboard-wrapper,
.dashboard-content,
.row {
  background: transparent !important;
}

.card-rounded { border-radius: 20px; }

/* =========================
   Empty state (tables)
   ========================= */

.empty-state {
  max-width: 420px;
}

.empty-title {
  font-weight: 600;
}

.empty-description {
  font-size: 0.875rem;
  color: #6c757d;
}

/* Hide table header when empty */
.table thead.is-empty {
  display: none;
}
.empty-wrapper {
  min-height: 280px;
}
.empty-icon .empty-icon-symbol::before {
  font-size: 48px;
  line-height: 1;
}