/* ITSE-Geospatial v0.5.2 final UI polish
   Reference: WordPress ISP dashboard card and compact sidebar style. */
:root {
  --itse-final-sidebar: #30465d;
  --itse-final-sidebar-dark: #2e4359;
  --itse-final-sidebar-active: #f7fafc;
  --itse-final-sidebar-text: #cbd8ea;
  --itse-final-sidebar-title: #f8fbff;
  --itse-final-content-bg: #f3f8ff;
  --itse-final-card-border: #d7e4f4;
  --itse-final-card-shadow: 0 9px 22px rgba(35, 58, 86, .08);
  --itse-final-font: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

/* Page background and typography */
html, body, body.c-app {
  background: var(--itse-final-content-bg) !important;
  font-family: var(--itse-final-font) !important;
  color: #001b33;
}
.c-main {
  background: var(--itse-final-content-bg) !important;
  padding: 12px 14px 22px !important;
}
.c-wrapper { background: var(--itse-final-content-bg) !important; }

/* Sidebar: match compact WordPress menu screenshot */
.c-sidebar {
  width: 256px !important;
  background: var(--itse-final-sidebar) !important;
  box-shadow: none !important;
  border-right: 0 !important;
}
.c-wrapper {
  width: calc(100% - 256px) !important;
  margin-left: 256px !important;
}
.itse-sidebar-brand {
  height: 38px !important;
  min-height: 38px !important;
  justify-content: flex-start !important;
  padding-left: 14px !important;
  background: var(--itse-final-sidebar-active) !important;
  color: #90a3b8 !important;
  border-bottom: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.itse-sidebar-brand::before { display: none !important; }
.itse-sidebar-brand strong { color: #90a3b8 !important; font-weight: 500 !important; }
.itse-sidebar-nav {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--itse-final-sidebar) !important;
}
.itse-sidebar-nav .c-sidebar-nav-item,
.itse-sidebar-nav .c-sidebar-nav-dropdown { margin: 0 !important; }
.itse-sidebar-nav .c-sidebar-nav-link,
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  gap: 7px !important;
  color: var(--itse-final-sidebar-text) !important;
  background: transparent !important;
  font-family: var(--itse-final-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  transform: none !important;
  box-shadow: none !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle {
  min-height: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--itse-final-sidebar-title) !important;
}
.itse-sidebar-nav .c-sidebar-nav-link:hover,
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle:hover {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  transform: none !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-toggle,
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle.active {
  background: var(--itse-final-sidebar-active) !important;
  color: #91a2b6 !important;
  font-weight: 500 !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-toggle .itse-nav-icon,
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle.active .itse-nav-icon { color: #0b1723 !important; }
.itse-sidebar-nav .c-sidebar-nav-link.active {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-weight: 500 !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items {
  display: none;
  margin: 0 !important;
  padding: 5px 0 7px 0 !important;
  background: var(--itse-final-sidebar) !important;
  border-left: 0 !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-items { display: block !important; }
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .c-sidebar-nav-link {
  height: 26px !important;
  min-height: 26px !important;
  line-height: 26px !important;
  padding: 0 10px !important;
  padding-left: 10px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--itse-final-sidebar-text) !important;
}
.itse-nav-icon {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .itse-nav-icon { display: none !important; }
.c-sidebar-minimizer { display: none !important; }

/* Header/core spacing */
.c-header {
  min-height: 44px !important;
  background: #fff !important;
  border-bottom: 1px solid #d6e0ec !important;
  box-shadow: none !important;
}
.c-subheader {
  min-height: 38px !important;
  background: #fff !important;
  border-top: 1px solid #edf2f7 !important;
}
.breadcrumb { font-size: 13px !important; }
.itse-footer {
  background: var(--itse-final-content-bg) !important;
  border-top: 1px solid #d6e0ec !important;
  color: #4e657e !important;
  font-size: 13px !important;
}

/* Dashboard card grid - same feel as screenshot */
.ispi-wrap { background: var(--itse-final-content-bg) !important; padding: 8px 12px 22px !important; }
.ispi-stats-grid,
.react-stat-grid,
.field-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
.ispi-stat-card,
.react-stat,
.itse-stat-card,
.field-tracker-page .stat-card,
.field-summary-grid > div {
  min-height: 96px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid var(--itse-final-card-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--itse-final-card-shadow) !important;
  padding: 18px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  overflow: hidden !important;
  position: relative !important;
  border-left: 1px solid var(--itse-final-card-border) !important;
  border-bottom: 3px solid #26bdf2 !important;
}
.ispi-stat-card:hover,
.react-stat:hover,
.itse-stat-card:hover,
.field-tracker-page .stat-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(35,58,86,.10) !important;
}
.ispi-stat-card::after,
.react-stat::after,
.itse-stat-card::after { display: none !important; }
.ispi-stat-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: #e4f5ff !important;
  font-size: 19px !important;
  line-height: 1 !important;
}
.ispi-stat-card > div:not(.ispi-stat-icon) { min-width: 0 !important; }
.ispi-stat-number,
.react-stat .value,
.field-tracker-page .stat-card h4,
.field-summary-grid span,
.itse-stat-card h4,
.itse-stat-card .h4 {
  margin: 0 !important;
  color: #000b18 !important;
  font-family: var(--itse-final-font) !important;
  font-size: 25px !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}
.ispi-stat-label,
.react-stat .trend,
.field-tracker-page .stat-card span,
.field-summary-grid strong,
.itse-stat-card small,
.itse-stat-card .text-muted {
  display: block !important;
  margin-top: 4px !important;
  color: #00101f !important;
  font-family: var(--itse-final-font) !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ispi-stat-card::before {
  content: "Inventory";
  position: absolute;
  left: 73px;
  top: 17px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  color: #7a4dff;
}
.ispi-stat-card .ispi-stat-number { margin-top: 9px !important; }
.ispi-stat-blue { border-bottom-color: #8b5cf6 !important; }
.ispi-stat-blue .ispi-stat-icon { background: #efe9ff !important; }
.ispi-stat-blue::before { color: #6d45e8 !important; }
.ispi-stat-green { border-bottom-color: #22c55e !important; }
.ispi-stat-green .ispi-stat-icon { background: #dffbea !important; }
.ispi-stat-green::before { content: "New Stock"; color: #03a629 !important; }
.ispi-stat-teal { border-bottom-color: #14c8b7 !important; }
.ispi-stat-teal .ispi-stat-icon { background: #d8fbf5 !important; }
.ispi-stat-teal::before { content: "Recovery Stock"; color: #00a98f !important; }
.ispi-stat-purple { border-bottom-color: #8b5cf6 !important; }
.ispi-stat-purple .ispi-stat-icon { background: #eee8ff !important; }
.ispi-stat-purple::before { content: "Stock"; color: #7a4dff !important; }
.ispi-stat-orange { border-bottom-color: #f59e0b !important; }
.ispi-stat-orange .ispi-stat-icon { background: #fff4c7 !important; }
.ispi-stat-orange::before { content: "Deployment"; color: #ef8a00 !important; }
.ispi-stat-red { border-bottom-color: #fb7185 !important; }
.ispi-stat-red .ispi-stat-icon { background: #ffe4ea !important; }
.ispi-stat-red::before { content: "Lost"; color: #ff526b !important; }
.ispi-stat-yellow { border-bottom-color: #f7c500 !important; }
.ispi-stat-yellow .ispi-stat-icon { background: #fff8bf !important; }
.ispi-stat-yellow::before { content: "Damage"; color: #e8a000 !important; }

/* Card section headers like screenshot */
.ispi-summary-section,
.ispi-card.ispi-dashboard-section,
.ispi-section-card {
  border: 1px solid var(--itse-final-card-border) !important;
  border-radius: 14px !important;
  background: #f5faff !important;
  box-shadow: none !important;
  padding: 13px 16px !important;
}
.ispi-card,
.react-card {
  border: 1px solid var(--itse-final-card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(35,58,86,.06) !important;
}
.ispi-card-header,
.card-header,
.react-card-title {
  background: linear-gradient(180deg, #fff, #f7fbff) !important;
  border-bottom: 1px solid #d7e4f4 !important;
  color: #001b33 !important;
}

/* Dashboard text weights */
.ispi-card-header h3,
.react-card-title h3,
.ispi-summary-head h4,
.card-header strong,
.card-header h3 {
  font-family: var(--itse-final-font) !important;
  font-weight: 900 !important;
  color: #001b33 !important;
}

@media (min-width: 1500px) {
  .ispi-stats-grid,
  .react-stat-grid { grid-template-columns: repeat(6, minmax(240px, 1fr)) !important; }
}
@media (max-width: 991.98px) {
  .c-sidebar { transform: translateX(-256px); }
  .c-sidebar.c-sidebar-show { transform: translateX(0); }
  .c-wrapper { width: 100% !important; margin-left: 0 !important; }
}
@media (max-width: 575.98px) {
  .ispi-stats-grid,
  .react-stat-grid,
  .field-summary-grid { grid-template-columns: 1fr !important; }
  .ispi-stat-card,
  .react-stat,
  .itse-stat-card { min-height: 88px !important; }
}

/* ITSE-Geospatial v0.5.10.1 UI action-button and sidebar refinement
   Reference: MikroTik action section button colors + larger clean sidebar menu. */
:root {
  --itse-action-blue: #1e88e5;
  --itse-action-blue-dark: #1565c0;
  --itse-action-green: #16a34a;
  --itse-action-green-dark: #12803a;
  --itse-action-orange: #f59e0b;
  --itse-action-orange-dark: #d97706;
  --itse-action-gray: #64748b;
  --itse-action-gray-dark: #475569;
  --itse-action-red: #dc2626;
  --itse-action-red-dark: #b91c1c;
}

/* Global button system: all module buttons/tabs use the same polished color rhythm */
.btn,
button.btn,
a.btn,
.ispi-btn,
.itse-btn,
.action-btn,
button[type="submit"],
input[type="submit"] {
  border: 0 !important;
  border-radius: 8px !important;
  min-height: 34px !important;
  padding: 8px 13px !important;
  font-family: var(--itse-final-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 6px 13px rgba(15, 23, 42, .12) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
.ispi-btn:hover,
.itse-btn:hover,
.action-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 17px rgba(15, 23, 42, .17) !important;
  filter: brightness(.98) !important;
}
.btn:focus,
button.btn:focus,
a.btn:focus,
.ispi-btn:focus,
.itse-btn:focus,
.action-btn:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(30,136,229,.22), 0 6px 13px rgba(15,23,42,.12) !important;
}

/* Primary/default action = blue */
.btn-primary,
.btn-info,
.btn-outline-primary,
.btn-outline-info,
.btn:not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-secondary):not(.btn-dark):not(.btn-light):not(.btn-link),
.ispi-btn-primary,
.itse-btn-primary,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(180deg, var(--itse-action-blue) 0%, var(--itse-action-blue-dark) 100%) !important;
  color: #fff !important;
}

/* Save / Sync Server / active positive action = green */
.btn-success,
.ispi-btn-success,
.itse-btn-success,
button[name*="save"],
button[value*="save"],
a[href*="sync-server"],
form[action*="sync-server"] button,
form[action*="/sync"] button {
  background: linear-gradient(180deg, var(--itse-action-green) 0%, var(--itse-action-green-dark) 100%) !important;
  color: #fff !important;
}

/* Sync Clients / warning / pending action = orange */
.btn-warning,
.ispi-btn-warning,
.itse-btn-warning,
a[href*="sync-clients"],
form[action*="sync-clients"] button {
  background: linear-gradient(180deg, var(--itse-action-orange) 0%, var(--itse-action-orange-dark) 100%) !important;
  color: #fff !important;
}

/* Edit / neutral action = gray */
.btn-secondary,
.btn-dark,
.ispi-btn-secondary,
.itse-btn-secondary,
a[href$="/edit"],
a[href*="edit"].btn {
  background: linear-gradient(180deg, var(--itse-action-gray) 0%, var(--itse-action-gray-dark) 100%) !important;
  color: #fff !important;
}

/* Delete / destructive action = red */
.btn-danger,
.ispi-btn-danger,
.itse-btn-danger,
form[action*="delete"] button,
form[action*="destroy"] button,
button[onclick*="delete"],
button[onclick*="confirm"] {
  background: linear-gradient(180deg, var(--itse-action-red) 0%, var(--itse-action-red-dark) 100%) !important;
  color: #fff !important;
}

/* Sync MAC or third quick action = bright blue */
a[href*="sync-mac"],
form[action*="sync-mac"] button,
button[data-action*="sync-mac"] {
  background: linear-gradient(180deg, #2f9bff 0%, #1373d1 100%) !important;
  color: #fff !important;
}

/* Button groups inside tables/action columns */
td .btn,
.table .btn,
.ispi-table .btn,
.action-column .btn,
.btn-group .btn {
  min-height: 31px !important;
  padding: 7px 10px !important;
  margin: 2px 2px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
}

/* Tabs should look like action pills but a little softer */
.nav-tabs .nav-link,
.itse-tabs .nav-link,
.nav-pills .nav-link,
.card-header-tabs .nav-link,
a[data-toggle="tab"],
.ispi-tab {
  border: 1px solid #cfe0f3 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
  color: #0f2a44 !important;
  border-radius: 8px !important;
  min-height: 36px !important;
  padding: 9px 14px !important;
  margin-right: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 10px rgba(22, 45, 71, .08) !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.card-header-tabs .nav-link.active,
a[data-toggle="tab"].active,
.ispi-tab.active {
  background: linear-gradient(180deg, var(--itse-action-blue) 0%, var(--itse-action-blue-dark) 100%) !important;
  border-color: var(--itse-action-blue) !important;
  color: #fff !important;
}

/* Sidebar bigger, cleaner, and more readable */
.c-sidebar {
  width: 270px !important;
  background: #2f455d !important;
}
.c-wrapper {
  width: calc(100% - 270px) !important;
  margin-left: 270px !important;
}
.itse-sidebar-brand {
  height: 46px !important;
  min-height: 46px !important;
  padding-left: 15px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #8ea4bd !important;
  background: #f8fbff !important;
}
.itse-sidebar-brand strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #8ea4bd !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle {
  min-height: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 11px !important;
  gap: 10px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #f7fbff !important;
}
.itse-sidebar-nav .c-sidebar-nav-link {
  min-height: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 11px !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #d4e2f3 !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items {
  padding: 4px 0 8px 0 !important;
  background: #314a63 !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .c-sidebar-nav-link {
  height: 33px !important;
  min-height: 33px !important;
  line-height: 33px !important;
  padding-left: 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #d7e4f3 !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .c-sidebar-nav-link::before {
  content: "⊙";
  display: inline-block;
  width: 18px;
  min-width: 18px;
  margin-right: 8px;
  color: #d7e4f3;
  font-size: 13px;
  line-height: 1;
  opacity: .95;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .c-sidebar-nav-link.active::before,
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .c-sidebar-nav-link:hover::before {
  color: #ffffff;
}
.itse-sidebar-nav .c-sidebar-nav-link:hover,
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle:hover {
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-toggle,
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle.active {
  background: #eef3f8 !important;
  color: #23384f !important;
  font-weight: 800 !important;
}
.itse-sidebar-nav .c-sidebar-nav-link.active {
  background: rgba(255,255,255,.13) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
.itse-nav-icon {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .itse-nav-icon {
  display: none !important;
}

@media (max-width: 991.98px) {
  .c-sidebar { transform: translateX(-270px); }
  .c-sidebar.c-sidebar-show { transform: translateX(0); }
  .c-wrapper { width: 100% !important; margin-left: 0 !important; }
}

/* ITSE-Geospatial v0.5.10.3 typography + popup balance + theme customizer support */
:root {
  --itse-base-font-size: 13px;
  --itse-modal-font-size: 13px;
  --itse-button-font-size: 12px;
  --itse-sidebar-width: 270px;
  --itse-sidebar-font-size: 14px;
  --itse-submenu-font-size: 13px;
  --itse-card-radius: 12px;
  --itse-button-radius: 7px;
  --itse-login-panel-color: #5856d6;
  --itse-client-register-button-color: #ef4444;
}

html, body, body.c-app,
.form-control,
.custom-select,
.dropdown-menu,
.table,
.card,
.ispi-card,
.modal,
.popover,
.tooltip,
.btn,
button,
input,
select,
textarea {
  font-family: var(--itse-final-font) !important;
}

body, body.c-app,
.c-main,
.table,
.form-control,
.custom-select,
.dropdown-menu,
.card-body,
.ispi-card,
.ispi-card .form-control,
.ispi-table,
.ispi-input,
.ispi-select,
.ispi-textarea {
  font-size: var(--itse-base-font-size) !important;
  line-height: 1.45 !important;
}

h1, .h1 { font-size: 26px !important; }
h2, .h2 { font-size: 22px !important; }
h3, .h3, .ispi-card-header h3 { font-size: 17px !important; }
h4, .h4 { font-size: 15px !important; }
label, .form-label, .ispi-form-group label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e3850 !important;
}
.small, small, .text-muted { font-size: 11.5px !important; }

/* Popup/modal font was too large; keep it balanced and compact */
.modal,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.swal2-popup,
.bootbox.modal,
.itse-modal,
.ispi-modal,
.tj-modal,
.popup-window {
  font-size: var(--itse-modal-font-size) !important;
  line-height: 1.45 !important;
}
.modal-title,
.swal2-title,
.itse-modal-title,
.ispi-modal-title {
  font-size: 16px !important;
  font-weight: 800 !important;
}
.modal-content,
.itse-modal,
.ispi-modal,
.tj-modal,
.popup-window,
.card,
.ispi-card,
.react-card,
.itse-stat-card,
.ispi-stat-card {
  border-radius: var(--itse-card-radius) !important;
}
.modal-header,
.modal-footer { padding: 10px 14px !important; }
.modal-body { padding: 14px !important; }

/* Buttons keep same color rhythm but not oversized */
.btn,
button.btn,
a.btn,
.ispi-btn,
.itse-btn,
.action-btn,
button[type="submit"],
input[type="submit"] {
  border-radius: var(--itse-button-radius) !important;
  min-height: 31px !important;
  padding: 7px 11px !important;
  font-size: var(--itse-button-font-size) !important;
  font-weight: 800 !important;
}
td .btn,
.table .btn,
.ispi-table .btn,
.action-column .btn,
.btn-group .btn {
  min-height: 29px !important;
  padding: 6px 9px !important;
  font-size: calc(var(--itse-button-font-size) - 1px) !important;
}

/* Sidebar controlled by theme customizer */
.c-sidebar { width: var(--itse-sidebar-width) !important; background: var(--itse-final-sidebar) !important; }
.c-wrapper { width: calc(100% - var(--itse-sidebar-width)) !important; margin-left: var(--itse-sidebar-width) !important; }
.itse-sidebar-nav .c-sidebar-nav-dropdown-toggle {
  font-size: var(--itse-sidebar-font-size) !important;
  min-height: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
}
.itse-sidebar-nav .c-sidebar-nav-link {
  font-size: var(--itse-submenu-font-size) !important;
  min-height: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
}
.itse-sidebar-nav .c-sidebar-nav-dropdown-items { background: var(--itse-final-sidebar-dark) !important; }
.itse-sidebar-nav .c-sidebar-nav-dropdown-items .c-sidebar-nav-link {
  font-size: var(--itse-submenu-font-size) !important;
  height: 31px !important;
  min-height: 31px !important;
  line-height: 31px !important;
}

/* Forms and tables: reduce visual heaviness after TJ-box popup redesign */
.form-control,
.custom-select,
.ispi-input,
.ispi-select,
.ispi-textarea {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
}
textarea.form-control,
.ispi-textarea { min-height: 72px !important; }
.table th,
.table td,
.ispi-table th,
.ispi-table td {
  padding: 9px 10px !important;
  vertical-align: middle !important;
}
.table th,
.ispi-table th { font-size: 12px !important; font-weight: 800 !important; }
.table td,
.ispi-table td { font-size: 12.5px !important; }

/* Login page colors are controlled from appearance settings */
.bg-primary,
.card.text-white.bg-primary {
  background: var(--itse-login-panel-color) !important;
}
.itse-client-register-top {
  color: var(--itse-client-register-button-color) !important;
  border-color: var(--itse-client-register-button-color) !important;
}
.itse-client-register-top:hover {
  background: var(--itse-client-register-button-color) !important;
  color: #fff !important;
}

/* Appearance page */
.itse-theme-page .theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
}
.itse-theme-page .theme-panel {
  background: #fff;
  border: 1px solid #d7e4f4;
  border-radius: var(--itse-card-radius);
  padding: 14px;
}
.itse-theme-page .theme-panel h4 {
  margin: 0 0 12px;
  font-size: 15px !important;
  font-weight: 900;
  color: #0f2a44;
}
.itse-theme-page .theme-color {
  height: 36px !important;
  padding: 4px !important;
}
.itse-theme-page .theme-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px;
  background: #f3f8ff;
  border-radius: 10px;
  border: 1px dashed #cfe0f3;
}

@media (max-width: 991.98px) {
  .c-sidebar { transform: translateX(calc(var(--itse-sidebar-width) * -1)); }
  .c-sidebar.c-sidebar-show { transform: translateX(0); }
  .c-wrapper { width: 100% !important; margin-left: 0 !important; }
}

/* ITSE-Geospatial v0.5.10.7 Inventory dashboard value/ONU/Fiber redesign */
.inventory-dashboard-v2 .ispi-stat-card[data-kpi]::before { content: attr(data-kpi) !important; }
.inventory-dashboard-v2 .ispi-stats-grid { margin-bottom: 16px !important; }
.inventory-dashboard-v2 .inventory-value-grid,
.inventory-dashboard-v2 .inventory-summary-grid { grid-template-columns: repeat(6, minmax(185px, 1fr)) !important; }
.inventory-dashboard-v2 .inventory-core-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)) !important; }
.inventory-dashboard-v2 .ispi-stat-card {
  min-height: 92px !important;
  padding: 18px 20px !important;
}
.inventory-dashboard-v2 .ispi-stat-number {
  font-size: 25px !important;
  letter-spacing: -.03em !important;
}
.inventory-dashboard-v2 .ispi-stat-label small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #1e3a5f;
  font-weight: 700;
}
.inventory-dashboard-v2 .inventory-section-title {
  margin: 16px 0 12px !important;
  padding: 14px 18px !important;
}
.inventory-dashboard-v2 .inventory-section-title h3 {
  margin: 0 0 3px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #001b33 !important;
}
.inventory-dashboard-v2 .inventory-section-title p {
  margin: 0 !important;
  color: #314b68 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.inventory-dashboard-v2 .inventory-chart-row { align-items: stretch; }
.inventory-chart-card { overflow: hidden; }
.inventory-css-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(22px, 1fr));
  gap: 10px;
  align-items: end;
  height: 230px;
  padding: 22px 18px 10px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  border-top: 1px solid #dbe7f5;
}
.inventory-css-chart .chart-month {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: end;
  min-width: 0;
}
.inventory-css-chart .chart-month small {
  color: #29415d;
  font-size: 10px;
  font-weight: 800;
}
.inventory-css-chart .bar-stack {
  height: 170px;
  width: 28px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 6px 4px 0;
  border-radius: 14px 14px 6px 6px;
  background: #edf4fc;
  border: 1px solid #d9e6f5;
}
.inventory-css-chart .bar-stack i {
  display: block;
  width: 6px;
  min-height: 4px;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 3px 8px rgba(15,23,42,.1);
}
.inventory-css-chart .bar-stock,
.inventory-chart-legend .bar-stock-dot { background: #1e88e5; }
.inventory-css-chart .bar-deployed,
.inventory-chart-legend .bar-deployed-dot { background: #f59e0b; }
.inventory-css-chart .bar-recovery,
.inventory-chart-legend .bar-recovery-dot { background: #14c8b7; }
.inventory-chart-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 10px 16px 16px;
  color: #15324f;
  font-size: 12px;
  font-weight: 800;
  background: #fff;
}
.inventory-chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.inventory-chart-legend b { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
@media (max-width: 1500px) {
  .inventory-dashboard-v2 .inventory-value-grid,
  .inventory-dashboard-v2 .inventory-summary-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; }
  .inventory-dashboard-v2 .inventory-core-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
}
@media (max-width: 768px) {
  .inventory-dashboard-v2 .inventory-value-grid,
  .inventory-dashboard-v2 .inventory-summary-grid,
  .inventory-dashboard-v2 .inventory-core-grid { grid-template-columns: 1fr !important; }
  .inventory-css-chart { overflow-x: auto; grid-template-columns: repeat(12, 42px); }
}

/* ITSE-Geospatial v0.5.10.8 global Laravel form/table polish
   Applies to HRM, Inventory, Billing, Client, Supplier, SMS, System and future module pages. */
:root {
  --itse-input-height: 36px;
  --itse-input-radius: 9px;
  --itse-form-column-min: 240px;
  --itse-form-gap: 14px;
  --itse-card-shadow-strength: 8;
  --itse-table-row-height: 42px;
  --itse-field-bg: #ffffff;
  --itse-field-border: #cfe0f3;
  --itse-field-border-focus: var(--itse-action-blue);
  --itse-field-label: #203a55;
  --itse-soft-panel-bg: #f8fbff;
}

/* Keep page content visually consistent with Laravel/CoreUI layout */
.container-fluid.ispi-wrap,
.itse-module-page,
.ispi-wrap,
.c-main > .container-fluid {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Cards receive a single controlled rhythm instead of mixed module spacing */
.ispi-card,
.card,
.react-card,
.itse-card,
.theme-panel,
.modal-content,
.ispi-modal {
  border: 1px solid var(--itse-final-card-border) !important;
  border-radius: var(--itse-card-radius) !important;
  box-shadow: 0 calc(var(--itse-card-shadow-strength) * 1px) calc(var(--itse-card-shadow-strength) * 2.75px) rgba(35,58,86,.07) !important;
  background: #fff !important;
}
.ispi-card + .ispi-card,
.card + .card,
.ispi-card + .card,
.card + .ispi-card { margin-top: 16px !important; }
.ispi-card > form,
.card > form,
.card-body,
.ispi-card-body,
.ispi-panel-body {
  padding: 16px !important;
}
.ispi-card-header,
.card-header,
.modal-header,
.ispi-modal-header {
  min-height: 50px !important;
  padding: 12px 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  border-bottom: 1px solid #d7e4f4 !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.ispi-card-header h3,
.card-header h3,
.card-header strong,
.modal-title,
.ispi-modal-header h4 {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #001b33 !important;
}

/* Universal form grid: fixes random/uneven fields without changing blade logic */
.ispi-form-row,
.form-row,
.itse-form-row,
.module-form-row,
.filter-row,
.search-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--itse-form-column-min)), 1fr)) !important;
  gap: var(--itse-form-gap) !important;
  align-items: end !important;
  margin-bottom: var(--itse-form-gap) !important;
}
.form-row > [class*="col-"],
.ispi-form-row > [class*="col-"] {
  max-width: 100% !important;
  flex: initial !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ispi-form-group,
.form-group,
.itse-form-group {
  min-width: 0 !important;
  margin-bottom: 0 !important;
}
.ispi-form-group label,
.form-group label,
label.form-label,
label {
  margin-bottom: 6px !important;
  color: var(--itse-field-label) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Make plain inputs inside module rows full-width even when old pages omit wrappers */
.ispi-form-row > input,
.ispi-form-row > select,
.ispi-form-row > textarea,
.form-row > input,
.form-row > select,
.form-row > textarea,
.ispi-toolbar > input,
.ispi-toolbar > select,
.ispi-toolbar > .form-control,
.ispi-toolbar > .custom-select {
  width: 100% !important;
  min-width: 0 !important;
}
.form-control,
.custom-select,
.ispi-input,
.ispi-select,
.ispi-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: var(--itse-input-height) !important;
  border: 1px solid var(--itse-field-border) !important;
  border-radius: var(--itse-input-radius) !important;
  background: var(--itse-field-bg) !important;
  color: #0f2438 !important;
  box-shadow: inset 0 1px 0 rgba(15,23,42,.02) !important;
  padding: 8px 11px !important;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}
textarea,
textarea.form-control,
.ispi-textarea {
  min-height: calc(var(--itse-input-height) * 2.15) !important;
  resize: vertical !important;
}
.form-control:focus,
.custom-select:focus,
.ispi-input:focus,
.ispi-select:focus,
.ispi-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--itse-field-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(30,136,229,.16) !important;
  outline: 0 !important;
  background: #fff !important;
}
.form-control::placeholder,
.ispi-input::placeholder,
textarea::placeholder { color: #89a0b8 !important; }

/* Toolbar/filter forms should not look broken beside card headers */
.ispi-toolbar,
.card-header form,
.ispi-card-header form,
.filter-toolbar,
.search-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.ispi-toolbar .form-control,
.ispi-toolbar .custom-select,
.ispi-toolbar .ispi-input,
.ispi-toolbar .ispi-select,
.card-header form .form-control,
.ispi-card-header form .ispi-input {
  min-width: 190px !important;
  width: auto !important;
  flex: 1 1 190px !important;
}

/* Table polish: same row height, clean borders and readable headers */
.table-responsive,
.ispi-table-wrap {
  border-radius: 0 0 var(--itse-card-radius) var(--itse-card-radius) !important;
}
.table,
.ispi-table {
  margin-bottom: 0 !important;
  background: #fff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table th,
.ispi-table th {
  height: var(--itse-table-row-height) !important;
  padding: 9px 12px !important;
  background: #f7fbff !important;
  color: #18324d !important;
  border-bottom: 1px solid #d7e4f4 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.table td,
.ispi-table td {
  min-height: var(--itse-table-row-height) !important;
  padding: 9px 12px !important;
  border-bottom: 1px solid #edf3fa !important;
  color: #10283f !important;
  vertical-align: middle !important;
}
.table tbody tr:hover td,
.ispi-table tbody tr:hover td { background: #f8fbff !important; }
.ispi-empty,
.table .empty,
td[colspan] { color: #324d67 !important; }

/* Dashboards: prevent the big summary cards from crowding or overflowing on wide screens */
.ispi-stats-grid,
.inventory-dashboard-v2 .inventory-value-grid,
.inventory-dashboard-v2 .inventory-summary-grid,
.field-summary-grid,
.react-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}
.inventory-dashboard-v2 .inventory-core-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}
.ispi-stat-card,
.itse-stat-card,
.react-stat,
.field-summary-grid > div {
  border-radius: var(--itse-card-radius) !important;
}

/* Theme customizer itself follows the same balanced form system */
.itse-theme-page .theme-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 16px !important;
}
.itse-theme-page .theme-panel .form-row {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

@media (max-width: 768px) {
  .ispi-card-header,
  .card-header { align-items: stretch !important; }
  .ispi-toolbar,
  .card-header form,
  .ispi-card-header form { width: 100% !important; }
  .ispi-toolbar .form-control,
  .ispi-toolbar .custom-select,
  .ispi-toolbar .ispi-input,
  .ispi-toolbar .ispi-select,
  .card-header form .form-control,
  .ispi-card-header form .ispi-input {
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 0 !important;
  }
}


/* ITSE v0.5.10.9 sidebar collapse and profile-click fix */
.c-header-toggler,
.c-class-toggler,
.itse-profile-quick-link {
  cursor: pointer !important;
}
.itse-profile-quick-link {
  padding: 6px 8px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
}
.itse-profile-quick-link:hover {
  background: rgba(59, 130, 246, .08) !important;
}
@media (min-width: 992px) {
  body.itse-sidebar-collapsed .c-sidebar,
  .c-sidebar.itse-sidebar-collapsed {
    width: 58px !important;
    overflow-x: hidden !important;
  }
  body.itse-sidebar-collapsed .c-wrapper {
    width: calc(100% - 58px) !important;
    margin-left: 58px !important;
  }
  body.itse-sidebar-collapsed .itse-sidebar-brand {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.itse-sidebar-collapsed .itse-sidebar-brand .c-sidebar-brand-full {
    display: none !important;
  }
  body.itse-sidebar-collapsed .itse-sidebar-brand .c-sidebar-brand-minimized {
    display: inline-block !important;
    font-size: 11px !important;
  }
  body.itse-sidebar-collapsed .itse-sidebar-nav .c-sidebar-nav-link,
  body.itse-sidebar-collapsed .itse-sidebar-nav .c-sidebar-nav-dropdown-toggle {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 58px !important;
  }
  body.itse-sidebar-collapsed .itse-sidebar-nav .c-sidebar-nav-link span:not(.itse-nav-icon),
  body.itse-sidebar-collapsed .itse-sidebar-nav .c-sidebar-nav-dropdown-toggle span:not(.itse-nav-icon) {
    display: none !important;
  }
  body.itse-sidebar-collapsed .itse-sidebar-nav .itse-nav-icon {
    width: 58px !important;
    min-width: 58px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 17px !important;
  }
  body.itse-sidebar-collapsed .itse-sidebar-nav .c-sidebar-nav-dropdown-toggle::after,
  body.itse-sidebar-collapsed .itse-sidebar-nav .c-sidebar-nav-dropdown-items {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .c-sidebar {
    transform: translateX(-100%) !important;
    transition: transform .18s ease-in-out !important;
  }
  .c-sidebar.c-sidebar-show {
    transform: translateX(0) !important;
  }
  .c-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ITSE v0.5.10.15: move main footer text to sidebar bottom and make it theme-controlled */
.c-sidebar {
  display: flex !important;
  flex-direction: column !important;
}
.itse-sidebar-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 8px !important;
}
.itse-sidebar-footer-text {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  background: var(--itse-sidebar-footer-bg, #293d53) !important;
  color: var(--itse-sidebar-footer-color, #cbd8ea) !important;
  font-family: var(--itse-final-font) !important;
  font-size: var(--itse-sidebar-footer-font-size, 12px) !important;
  line-height: 1.35 !important;
}
.itse-sidebar-footer-title {
  font-weight: 800 !important;
  color: var(--itse-sidebar-footer-color, #cbd8ea) !important;
  margin-bottom: 2px !important;
  white-space: normal !important;
}
.itse-sidebar-footer-subtitle {
  opacity: .82 !important;
  color: var(--itse-sidebar-footer-color, #cbd8ea) !important;
  white-space: normal !important;
}
.c-footer.itse-footer {
  display: none !important;
}
@media (min-width: 992px) {
  body.itse-sidebar-collapsed .itse-sidebar-footer-text {
    display: none !important;
  }
}

/* ============================================================
   ITSE gradient dashboard KPI cards (billing-list style)
   Applied page-by-page with .itse-gradient-dashboard-cards
   ============================================================ */
.itse-gradient-dashboard-cards .ispi-stats-grid{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin: 10px 0 26px;
}
.itse-gradient-dashboard-cards .ispi-stat-card{
    min-height: 92px;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 16px 18px 36px !important;
    display: grid !important;
    grid-template-columns: 54px 1fr;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .22) !important;
    background: linear-gradient(135deg, #13a9db 0%, #24bfca 100%) !important;
}
.itse-gradient-dashboard-cards .ispi-stat-card::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: rgba(0, 0, 0, .16);
    pointer-events: none;
}
.itse-gradient-dashboard-cards .ispi-stat-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .24) !important;
}
.itse-gradient-dashboard-cards .ispi-stat-icon{
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 30px !important;
    line-height: 1;
    color: #fff !important;
    background: transparent !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.18));
    z-index: 1;
}
.itse-gradient-dashboard-cards .ispi-stat-number{
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    z-index: 1;
    position: relative;
}
.itse-gradient-dashboard-cards .ispi-stat-label{
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    z-index: 1;
    position: relative;
}
.itse-gradient-dashboard-cards .ispi-stat-label small{
    color: rgba(255,255,255,.95) !important;
    font-weight: 700 !important;
}
.itse-gradient-dashboard-cards .ispi-stat-card[data-kpi]::before{
    content: attr(data-kpi);
    position: absolute;
    left: 86px;
    top: 15px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    opacity: .98;
    z-index: 1;
}
.itse-gradient-dashboard-cards .ispi-stat-card[data-kpi] .ispi-stat-number{
    margin-top: 18px !important;
}
.itse-gradient-dashboard-cards .ispi-stat-blue{background:linear-gradient(135deg,#13a9db 0%,#24bfca 100%) !important;}
.itse-gradient-dashboard-cards .ispi-stat-green{background:linear-gradient(135deg,#22a6b3 0%,#31bdb1 100%) !important;}
.itse-gradient-dashboard-cards .ispi-stat-teal{background:linear-gradient(135deg,#199f9a 0%,#31bdb1 100%) !important;}
.itse-gradient-dashboard-cards .ispi-stat-purple{background:linear-gradient(135deg,#7357df 0%,#8b7eda 100%) !important;}
.itse-gradient-dashboard-cards .ispi-stat-orange{background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%) !important;}
.itse-gradient-dashboard-cards .ispi-stat-red{background:linear-gradient(135deg,#ef4444 0%,#f43f5e 100%) !important;}
.itse-gradient-dashboard-cards .ispi-stat-yellow{background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%) !important;}
.itse-gradient-dashboard-cards .ispi-stat-gray{background:linear-gradient(135deg,#505960 0%,#59636b 100%) !important;}
@media(max-width:768px){.itse-gradient-dashboard-cards .ispi-stats-grid{grid-template-columns:1fr;}}

/* Device dashboard stat cards share the same visual model */
.itse-gradient-dashboard-cards .ns-stat-grid{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 22px !important;
}
.itse-gradient-dashboard-cards .ns-stat{
    min-height:92px;
    border:0 !important;
    border-radius:4px !important;
    padding:16px 18px 36px !important;
    position:relative;
    overflow:hidden;
    color:#fff !important;
    box-shadow:0 7px 16px rgba(15,23,42,.22) !important;
    background:linear-gradient(135deg,#13a9db 0%,#24bfca 100%) !important;
}
.itse-gradient-dashboard-cards .ns-stat:nth-child(2),
.itse-gradient-dashboard-cards .ns-stat:nth-child(6){background:linear-gradient(135deg,#22a6b3 0%,#31bdb1 100%) !important;}
.itse-gradient-dashboard-cards .ns-stat:nth-child(3),
.itse-gradient-dashboard-cards .ns-stat:nth-child(7){background:linear-gradient(135deg,#7357df 0%,#8b7eda 100%) !important;}
.itse-gradient-dashboard-cards .ns-stat:nth-child(4),
.itse-gradient-dashboard-cards .ns-stat:nth-child(8){background:linear-gradient(135deg,#505960 0%,#59636b 100%) !important;}
.itse-gradient-dashboard-cards .ns-stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:rgba(0,0,0,.16)}
.itse-gradient-dashboard-cards .ns-stat .ico{width:44px;height:44px;background:transparent;color:#fff;font-size:30px;z-index:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}
.itse-gradient-dashboard-cards .ns-stat .num{color:#fff;font-size:18px;z-index:1;position:relative}
.itse-gradient-dashboard-cards .ns-stat .lbl{color:#fff;font-size:13px;font-weight:800;z-index:1;position:relative}

/* Bootstrap stat cards used by Field Tracker */
.itse-gradient-dashboard-cards .stat-card{
    min-height:92px;
    border:0 !important;
    border-radius:4px !important;
    overflow:hidden;
    color:#fff !important;
    box-shadow:0 7px 16px rgba(15,23,42,.22) !important;
    background:linear-gradient(135deg,#13a9db 0%,#24bfca 100%) !important;
    position:relative;
}
.itse-gradient-dashboard-cards .row > [class*="col-"]:nth-child(2) .stat-card{background:linear-gradient(135deg,#22a6b3 0%,#31bdb1 100%) !important;}
.itse-gradient-dashboard-cards .row > [class*="col-"]:nth-child(3) .stat-card{background:linear-gradient(135deg,#7357df 0%,#8b7eda 100%) !important;}
.itse-gradient-dashboard-cards .row > [class*="col-"]:nth-child(4) .stat-card{background:linear-gradient(135deg,#505960 0%,#59636b 100%) !important;}
.itse-gradient-dashboard-cards .stat-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:rgba(0,0,0,.16)}
.itse-gradient-dashboard-cards .stat-card .card-body{padding:16px 18px 36px !important;position:relative;z-index:1;}
.itse-gradient-dashboard-cards .stat-card h4{color:#fff !important;font-size:18px;font-weight:900;margin:0 0 6px;}
.itse-gradient-dashboard-cards .stat-card span{color:#fff !important;font-size:13px;font-weight:800;}

/* v0.5.10.32: Main React dashboard cards also use billing gradient card style */
.itse-gradient-dashboard-cards .react-stat-grid{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 22px !important;
    margin: 10px 0 26px !important;
}
.itse-gradient-dashboard-cards .react-stat{
    min-height: 92px !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 16px 18px 36px 76px !important;
    position: relative !important;
    overflow: hidden !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(15,23,42,.22) !important;
    background: linear-gradient(135deg,#13a9db 0%,#24bfca 100%) !important;
}
.itse-gradient-dashboard-cards .react-stat:nth-child(2),
.itse-gradient-dashboard-cards .react-stat:nth-child(6){background:linear-gradient(135deg,#22a6b3 0%,#31bdb1 100%) !important;}
.itse-gradient-dashboard-cards .react-stat:nth-child(3),
.itse-gradient-dashboard-cards .react-stat:nth-child(7){background:linear-gradient(135deg,#7357df 0%,#8b7eda 100%) !important;}
.itse-gradient-dashboard-cards .react-stat:nth-child(4),
.itse-gradient-dashboard-cards .react-stat:nth-child(8){background:linear-gradient(135deg,#505960 0%,#59636b 100%) !important;}
.itse-gradient-dashboard-cards .react-stat::after{content:"" !important;display:block !important;position:absolute;left:0;right:0;bottom:0;height:30px;background:rgba(0,0,0,.16);}
.itse-gradient-dashboard-cards .react-stat .meta{display:block !important;color:#fff !important;font-size:13px !important;font-weight:800 !important;position:relative;z-index:1;}
.itse-gradient-dashboard-cards .react-stat .meta span:first-child{display:block;color:#fff !important;}
.itse-gradient-dashboard-cards .react-stat .meta span:last-child{position:absolute;left:-58px;top:5px;font-size:34px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18));}
.itse-gradient-dashboard-cards .react-stat .value{color:#fff !important;font-size:18px !important;font-weight:900 !important;margin:7px 0 0 !important;line-height:1.2 !important;position:relative;z-index:1;}
.itse-gradient-dashboard-cards .react-stat .trend{color:#fff !important;font-size:12px !important;font-weight:800 !important;margin-top:3px !important;position:relative;z-index:1;}