/*
  Civet WorkSphere UI foundation
  This file deliberately layers on top of page-specific styles.  It never
  redefines generic utility classes such as .grid, which keeps Tailwind and
  existing module layouts in control of their own structure.
*/

:root {
  --erp-page-max: 1600px;
  --erp-page-pad: 24px;
  --erp-space-1: 6px;
  --erp-space-2: 10px;
  --erp-space-3: 14px;
  --erp-space-4: 18px;
  --erp-space-5: 24px;
  --erp-control-height: 48px;
  --erp-radius-sm: 10px;
  --erp-radius-md: 14px;
  --erp-radius-lg: 18px;
  --erp-ease: cubic-bezier(.2, .7, .25, 1);
  --erp-motion-fast: 160ms;
  --erp-motion-base: 220ms;
  --erp-focus: rgba(56, 189, 248, .25);
  --erp-surface: rgba(8, 23, 42, .88);
  --erp-border: rgba(148, 163, 184, .22);
}

/* Typography refinement: a single sharp, readable enterprise text system. */
html {
  font-family: Inter, Manrope, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { font-weight: 500; letter-spacing: .002em; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.015em; text-shadow: none; }
h1, .h1 { font-size: clamp(26px, 2vw, 30px); }
h2, .h2 { font-size: clamp(20px, 1.65vw, 22px); }
h3, .h3 { font-size: 18px; }
button, .btn { font-weight: 600; }
label, .form-label, .field-label { font-weight: 600; letter-spacing: .015em; }

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; scroll-behavior: smooth; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; }
*, *::before, *::after { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .45) transparent; }
:where(.sidebar-scroll-wrapper, .erp-table-scroll, .frame-box, .modal-box, .modal-content, .erp-file-viewer__body) {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
  scroll-behavior: smooth;
}
form, .enterprise-field, .civet-field, .support-desk-body { overscroll-behavior: auto; touch-action: pan-y; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, svg, video { height: auto; }
button, input, select, textarea { min-width: 0; max-width: 100%; font: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
textarea { min-height: 96px; resize: vertical; }

/* Type scale is stable across modules without fighting page heading colors. */
h1, .h1 { font-size: clamp(26px, 2vw, 30px); line-height: 1.25; font-weight: 700; }
h2, .h2 { font-size: clamp(20px, 1.65vw, 22px); line-height: 1.3; font-weight: 700; }
h3, .h3 { font-size: 18px; line-height: 1.35; font-weight: 600; }
label, .form-label, .field-label { font-size: 13px; }
input, select, textarea { font-size: 15px; }
table, table th, table td { font-size: 14px; }

/* Shared shell: added only to actual workspace pages by erp_protection.js. */
main.erp-page-shell:not(.login-page),
.main-content.erp-page-shell,
#mainContent.erp-page-shell,
.enterprise-page {
  width: min(100%, var(--erp-page-max));
  min-width: 0;
  margin-inline: auto;
  padding: var(--erp-page-pad);
}

:where(main, .main, .main-content, .content, .enterprise-page, .tab-content,
  .card, .panel, .enterprise-card, .summary-tile, .support-card, .kpi-card,
  .modal-box, .frame-box, .grid-wrap, .table-responsive, .table-scroll) {
  min-width: 0;
}

/* Use named layout classes only; do not take over Tailwind's generic .grid. */
:where(.enterprise-grid, .dashboard-grid, .responsive-grid, .civet-grid,
  .erp-card-grid, .erp-report-grid) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--erp-space-4);
  width: 100%;
}

:where(.enterprise-form-grid, .support-form-grid, .form-grid, .civet-form-grid,
  .responsive-grid-2) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--erp-space-4);
  width: 100%;
}

:where(.enterprise-grid, .dashboard-grid, .responsive-grid, .civet-grid,
  .erp-card-grid, .erp-report-grid, .enterprise-form-grid, .support-form-grid,
  .form-grid, .civet-form-grid, .responsive-grid-2) > * { min-width: 0; }

/* Cards retain their footprint.  State uses color, shadow and transform only. */
:where(.card, .panel, .enterprise-card, .summary-tile, .module-card,
  .support-card, .kpi-card, .report-card, .civet-section-card) {
  width: 100%;
  min-width: 0;
  height: auto;
  max-width: 100%;
  border-radius: var(--erp-radius-md);
  transition: background-color var(--erp-motion-base) var(--erp-ease),
    border-color var(--erp-motion-base) var(--erp-ease),
    color var(--erp-motion-base) var(--erp-ease),
    box-shadow var(--erp-motion-base) var(--erp-ease),
    opacity var(--erp-motion-fast) var(--erp-ease),
    transform var(--erp-motion-fast) var(--erp-ease);
}

:where(.card, .panel, .enterprise-card, .summary-tile, .module-card,
  .support-card, .kpi-card, .report-card, .civet-section-card):hover {
  border-color: rgba(125, 211, 252, .42);
  box-shadow: 0 14px 30px rgba(2, 6, 23, .22);
}

:where(.card, .panel, .enterprise-card, .summary-tile, .module-card,
  .support-card, .kpi-card, .report-card, .civet-section-card).active,
:where(.card, .panel, .enterprise-card, .summary-tile, .module-card,
  .support-card, .kpi-card, .report-card, .civet-section-card).is-active {
  transform: scale(1.02);
  border-color: rgba(125, 211, 252, .64);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .16), 0 16px 34px rgba(2, 6, 23, .28);
}

/* Buttons do not resize after interaction. Compact and icon controls opt out. */
:where(button, .btn, .civet-button, .primary-action, .action-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--erp-control-height);
  min-width: 140px;
  max-width: 220px;
  padding: 0 18px;
  border-radius: var(--erp-radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--erp-motion-fast) var(--erp-ease),
    border-color var(--erp-motion-fast) var(--erp-ease),
    color var(--erp-motion-fast) var(--erp-ease),
    box-shadow var(--erp-motion-fast) var(--erp-ease),
    opacity var(--erp-motion-fast) var(--erp-ease),
    transform var(--erp-motion-fast) var(--erp-ease);
}

:where(button, .btn, .civet-button, .primary-action, .action-button):hover {
  box-shadow: 0 8px 18px rgba(2, 6, 23, .22);
  transform: translateY(-1px);
}

:where(button, .btn, .civet-button, .primary-action, .action-button):active { transform: translateY(0); }

:where(.field-action, .erp-mobile-nav-toggle, .erp-file-viewer__actions button,
  .erp-file-viewer__actions a, .civet-date-toolbar button, .civet-date-grid button,
  table button, table .btn, .table-action-btn, .icon-button, [data-icon-button],
  button[aria-label]:not(.erp-module-toggle)) {
  min-width: 0;
  max-width: none;
  min-height: 0;
}

/* Navigation tabs are compact controls, not full-width form actions. */
:where(.tab-btn, .subtab-btn, .erp-report-choice, .support-tabs button, .tabs-list button) {
  min-width: 0;
  max-width: none;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  white-space: nowrap;
}

/* The authentication eye is always a contained icon control, never a full-size action. */
body.login-shell-body .field-control > .field-action {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 10px;
}
body.login-shell-body .field-control > .field-action:hover { transform: translateY(-50%); }
body.login-shell-body .login-input:has(+ .field-action) { padding-right: 58px; }

table :where(button, .btn, .table-action-btn) {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 12px;
}

/* Equal admin modules with complete, readable labels. */
#adminSidebar .erp-accordion { gap: 14px; padding: 12px 18px 18px; }
#adminSidebar .erp-module-toggle {
  height: 108px;
  min-height: 108px;
  gap: 5px;
  padding: 9px 24px 9px 8px;
  border-radius: 14px;
}
#adminSidebar .erp-module-toggle span {
  max-width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: initial;
  line-height: 1.16;
  overflow: visible;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
#adminSidebar .erp-module-toggle .module-icon { width: 28px; height: 28px; border-radius: 10px; font-size: 14px; }
#adminSidebar .erp-module-toggle .module-chevron { right: 9px; top: 10px; }
/* Two equal module cards per row; labels wrap only between complete words. */
#adminSidebar .erp-accordion { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
#adminSidebar .erp-module { grid-column: auto !important; }
#adminSidebar .erp-accordion { grid-auto-flow: row dense; }
#adminSidebar .erp-module[data-module="dashboard"] { --erp-module-order: 10; --erp-subnav-order: 11; }
#adminSidebar .erp-module[data-module="fuel"] { --erp-module-order: 20; --erp-subnav-order: 21; }
#adminSidebar .erp-module[data-module="finance"] { --erp-module-order: 30; --erp-subnav-order: 31; }
#adminSidebar .erp-module[data-module="plant-machinery"] { --erp-module-order: 40; --erp-subnav-order: 41; }
#adminSidebar .erp-module[data-module="stores-inventory"] { --erp-module-order: 50; --erp-subnav-order: 51; }
#adminSidebar .erp-module[data-module="admin-register"] { --erp-module-order: 60; --erp-subnav-order: 61; }
#adminSidebar .erp-module[data-module="settings"] { --erp-module-order: 70; --erp-subnav-order: 71; }
#adminSidebar .erp-module[data-module="logs"] { --erp-module-order: 80; --erp-subnav-order: 81; }
#adminSidebar .erp-module { grid-row: auto !important; order: var(--erp-module-order) !important; }
#adminSidebar .erp-module-toggle { height: 116px; min-height: 116px; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 24px 11px 8px; text-align: center; }
#adminSidebar .erp-module-toggle span { display: block; width: 100%; max-width: 100%; overflow: visible; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; font-size: 10px; line-height: 1.15; text-wrap: balance; }
#adminSidebar .erp-module-toggle .module-icon { flex: 0 0 28px; width: 28px; height: 28px; }
#adminSidebar .erp-module-toggle .module-chevron { top: 10px; right: 9px; transform: none; }
#adminSidebar .erp-module.expanded > .erp-module-toggle .module-chevron { transform: rotate(90deg); }
#adminSidebar .sidebar-scroll-wrapper {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#adminSidebar .erp-module-toggle {
  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out,
    color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
}
#adminSidebar .erp-module-toggle:hover { transform: translateY(-2px); }
#adminSidebar .erp-module-toggle:active { transform: translateY(0); }
/* The active card stays in its existing grid cell. Its submenu becomes the
   next full-width grid row, so opening Fuel never moves it below Dashboard. */
#adminSidebar .erp-module.expanded,
#adminSidebar .erp-module.search-open {
  display: contents;
}
#adminSidebar .erp-module.expanded > .erp-module-toggle,
#adminSidebar .erp-module.search-open > .erp-module-toggle {
  grid-column: auto;
  order: var(--erp-module-order);
}
#adminSidebar .erp-module.expanded > .erp-subnav,
#adminSidebar .erp-module.search-open > .erp-subnav {
  grid-column: 1 / -1;
  order: var(--erp-subnav-order);
  width: 100%;
  min-width: 0;
  padding: 10px 0 6px 0;
}
#adminSidebar .erp-subitem {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.admin-topbar-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; min-height: 34px; padding: 0 10px; border: 1px solid rgba(52, 211, 153, .30); border-radius: 10px; color: #6ee7b7; background: rgba(16, 185, 129, .12); }
.admin-topbar-whatsapp:hover { color: #d1fae5; background: rgba(16, 185, 129, .20); }
#userAccountListPane .erp-table-scroll { padding-right: 12px; }
#storesTable th:last-child, #storesTable td:last-child { min-width: 142px; padding-right: 14px; }
#storesTable td:last-child > div { flex-wrap: nowrap !important; align-items: center; }
#storesTable .user-avatar-button { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; overflow: hidden; border-radius: 50%; }
#storesTable .user-avatar-button img,
.user-account-card .user-avatar-button img,
.profile-photo-preview img { display: block; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center; }
#userAccountListPane .user-account-table-frame { overflow: auto !important; scrollbar-width: thin; scrollbar-color: #38bdf8 rgba(15, 23, 42, .9); }
#userAccountListPane .user-account-table-frame::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
#userAccountListPane .user-account-table-frame::-webkit-scrollbar-track { background: rgba(15, 23, 42, .9); border-radius: 999px; }
#userAccountListPane .user-account-table-frame::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #0e7490, #38bdf8); border: 2px solid rgba(15, 23, 42, .9); border-radius: 999px; }
#userAccountListPane .user-account-table-frame::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #0891b2, #7dd3fc); }
.user-table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(148, 163, 184, .14); border-radius: 12px; background: rgba(15, 23, 42, .58); color: #94a3b8; font-size: 12px; }
.user-table-pagination > div { display: flex; gap: 8px; }
.user-table-pagination .btn { min-width: 0; min-height: 36px; padding: 0 12px; }
.user-table-pagination .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.user-table-pagination__summary { display: grid; gap: 3px; color: #cbd5e1; font-weight: 600; }
.user-table-pagination__summary::after { content: attr(data-erp-page-meta); color: #7dd3fc; font-size: 11px; font-weight: 600; }
.user-table-pagination__summary:not([data-erp-page-meta])::after { content: 'Total records'; color: #94a3b8; }
.user-profile-preview { width: min(640px, calc(100vw - 32px)); }
.user-profile-preview__header { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.user-profile-preview__avatar { width: 72px; height: 72px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(56, 189, 248, .35); border-radius: 50%; background: rgba(14, 116, 144, .16); color: #7dd3fc; font-size: 28px; }
.user-profile-preview__avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-profile-preview__header strong, .user-profile-preview__header span { display: block; }
.user-profile-preview__header strong { color: #f8fafc; font-size: 18px; }
.user-profile-preview__header span { margin-top: 4px; color: #7dd3fc; font-family: ui-monospace, monospace; font-size: 13px; }
.user-profile-preview__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.user-profile-preview__details > div { min-width: 0; padding: 12px; border: 1px solid rgba(148, 163, 184, .12); border-radius: 10px; background: rgba(15, 23, 42, .5); }
.user-profile-preview__details dt { color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.user-profile-preview__details dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #e2e8f0; font-size: 14px; font-weight: 600; }
@media (max-width: 560px) { .user-table-pagination { align-items: stretch; flex-direction: column; } .user-table-pagination > div { width: 100%; } .user-table-pagination .btn { flex: 1; } .user-profile-preview__details { grid-template-columns: 1fr; } }

/* Inward/outward entry forms use a predictable, compact register layout. */
#adminInwardForm .admin-register-grid,
#adminOutwardForm .admin-register-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: end; gap: 16px; }
#adminInwardForm .admin-register-grid .admin-letter-field,
#adminOutwardForm .admin-register-grid .admin-letter-field { grid-column: span 2; }
#adminInwardForm .admin-register-grid .admin-entry-date-field,
#adminOutwardForm .admin-register-grid .admin-entry-date-field { grid-column: auto; grid-row: auto; }
#adminInwardForm .admin-register-assignees,
#adminOutwardForm .admin-register-assignees { grid-template-columns: minmax(0, 460px); }
#adminInwardForm .enterprise-actions,
#adminOutwardForm .enterprise-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, .12); }
#adminInwardForm button[type="submit"],
#adminOutwardForm button[type="submit"] { min-width: 132px; }
@media (max-width: 900px) { #adminInwardForm .admin-register-grid, #adminOutwardForm .admin-register-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #adminInwardForm .admin-register-grid .admin-letter-field, #adminOutwardForm .admin-register-grid .admin-letter-field { grid-column: 1 / -1; } }
@media (max-width: 600px) { #adminInwardForm .admin-register-grid, #adminOutwardForm .admin-register-grid { grid-template-columns: 1fr !important; } #adminInwardForm .admin-register-grid .admin-letter-field, #adminOutwardForm .admin-register-grid .admin-letter-field { grid-column: auto; } #adminInwardForm .admin-register-assignees, #adminOutwardForm .admin-register-assignees { grid-template-columns: 1fr; } }

/* Support Desk is a viewport dialog, never a panel constrained by dashboard content. */
#supportDeskModal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
}
#supportDeskModal .support-desk-dialog {
  width: min(940px, calc(100dvw - 48px)) !important;
  max-width: calc(100dvw - 48px) !important;
  height: auto;
  max-height: min(88dvh, 860px) !important;
  margin: 0 !important;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}
#supportDeskModal .support-desk-body { min-width: 0; overflow: auto; padding: 24px; }
#supportDeskModal .support-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#supportDeskModal .support-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#supportDeskModal .support-desk-dialog > :first-child { min-width: 0; padding: 18px 24px !important; }
#supportDeskModal .support-desk-dialog > :first-child > div { min-width: 0; }
#supportDeskModal .support-desk-dialog > :first-child h2,
#supportDeskModal .support-desk-dialog > :first-child p { overflow-wrap: anywhere; }
#supportDeskModal .support-tab { flex: 0 0 auto; min-width: 0; height: 44px; padding: 0 16px; border-radius: 0; white-space: nowrap; }
#supportDeskModal .support-form-grid > label,
#supportDeskModal #supportTicketForm > label,
#supportDeskModal #supportTicketForm > div { min-width: 0; }
#supportDeskModal .modern-input { max-width: 100%; min-width: 0; }
#supportDeskModal .support-readonly span { overflow-wrap: anywhere; white-space: normal; }
#supportDeskModal .support-editor { min-height: 160px; }
#supportDeskModal .support-editor-toolbar { align-items: center; min-width: 0; }
#supportDeskModal .support-editor-toolbar button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; display: inline-grid; place-items: center; }
#supportDeskModal .support-editor-toolbar input[type="color"] { flex: 0 0 32px; width: 32px; min-width: 32px; height: 32px; }
#supportDeskModal #supportTicketForm > .flex { margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, .12); }
#supportDeskModal #supportTicketForm > .flex > button { width: auto; min-width: 116px; max-width: 180px; height: 44px; min-height: 44px; padding: 0 16px; }
#supportDeskModal .support-tabs { overflow-x: auto; scrollbar-width: none; }
#supportDeskModal .support-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  #supportDeskModal { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; }
  #supportDeskModal .support-desk-dialog { width: min(760px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; max-height: 92dvh !important; }
  #supportDeskModal .support-info-grid, #supportDeskModal .support-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #supportDeskModal { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important; }
  #supportDeskModal .support-desk-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; border-radius: 16px; }
  #supportDeskModal .support-desk-body { padding: 16px; }
  #supportDeskModal .support-desk-dialog > :first-child { align-items: flex-start !important; padding: 14px 16px !important; }
  #supportDeskModal .support-desk-dialog > :first-child > button { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
  #supportDeskModal .support-info-grid, #supportDeskModal .support-form-grid { grid-template-columns: 1fr; }
  #supportDeskModal .support-editor-toolbar { gap: 4px; }
  #supportDeskModal .support-editor-toolbar button { min-width: 32px; min-height: 32px; padding: 4px 6px; }
  #supportDeskModal #supportTicketForm > .flex { align-items: stretch; flex-direction: column-reverse; }
  #supportDeskModal #supportTicketForm > .flex > button { width: 100%; max-width: none; }
}

:where(button, .btn, .civet-button, .primary-action, .action-button):focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, [role="tab"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--erp-focus);
}

/* Tabs have a fixed, non-stretching touch target. */
:where(.onpage-subtabs-container, .support-tabs, .subtab-bar, .tabs-list) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

:where(.subtab-btn, .tab-btn, .erp-report-choice, [role="tab"]) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  max-width: 220px;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--erp-motion-fast) var(--erp-ease),
    border-color var(--erp-motion-fast) var(--erp-ease),
    color var(--erp-motion-fast) var(--erp-ease),
    box-shadow var(--erp-motion-fast) var(--erp-ease),
    opacity var(--erp-motion-fast) var(--erp-ease),
    transform var(--erp-motion-fast) var(--erp-ease);
}

:where(.subtab-btn, .tab-btn, .erp-report-choice, [role="tab"]).active,
:where(.subtab-btn, .tab-btn, .erp-report-choice, [role="tab"])[aria-selected="true"] {
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .32), 0 8px 20px rgba(2, 6, 23, .22);
}

/* Toolbars and form footers contain their controls instead of spilling outward. */
:where(.enterprise-actions, .form-footer, .modal-footer, form .actions,
  .page-toolbar, .toolbar, .report-toolbar) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

:where(.enterprise-actions, .form-footer, .modal-footer, form .actions,
  .page-toolbar, .toolbar, .report-toolbar) > * { min-width: 0; }

/* Tables become one contained scroll region; surrounding cards never scroll sideways. */
.erp-table-scroll,
:where(.table-responsive, .table-scroll, .frame-box, .grid-wrap, .support-table-wrap) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  -webkit-overflow-scrolling: touch;
}

.erp-table-scroll:hover,
.erp-table-scroll:focus-within {
  scrollbar-color: rgba(56, 189, 248, .85) rgba(15, 23, 42, .72);
}
.erp-table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.erp-table-scroll::-webkit-scrollbar-track { background: rgba(15, 23, 42, .72); border-radius: 999px; }
.erp-table-scroll::-webkit-scrollbar-thumb { background: transparent; border: 2px solid rgba(15, 23, 42, .72); border-radius: 999px; }
.erp-table-scroll:hover::-webkit-scrollbar-thumb,
.erp-table-scroll:focus-within::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, .85); }
.erp-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.erp-table-scroll thead th,
:where(.table-responsive, .table-scroll, .frame-box, .grid-wrap, .support-table-wrap) thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Enterprise data-grid layer.  It is added by erp_protection.js and remains
   presentation-only: module row data and existing table event handlers are
   intentionally left untouched. */
.erp-data-grid-scroll {
  border: 1px solid rgba(71, 101, 142, .42);
  border-radius: 16px;
  background: rgba(7, 18, 35, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  overscroll-behavior: auto;
  scroll-padding: 12px;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
}
.erp-data-grid-scroll[data-erp-tall-grid="true"] { max-height: min(56vh, 540px); }
.erp-data-grid-scroll.erp-grid-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.erp-data-grid-scroll:not(.erp-grid-dragging) { cursor: grab; }
.erp-data-grid-scroll :is(button, a, input, select, textarea, label) { cursor: pointer; }
.erp-data-grid-scroll :is(input, textarea) { cursor: text; }
.erp-data-grid {
  --erp-grid-header: #112d54;
  --erp-grid-row: rgba(10, 21, 39, .82);
  --erp-grid-row-alt: rgba(20, 40, 69, .38);
  color: #dbeafe;
}
.erp-data-grid thead th {
  padding: 13px 14px;
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
  background: var(--erp-grid-header);
  border-bottom: 1px solid rgba(96, 165, 250, .3);
  scroll-snap-align: start;
}
.erp-data-grid thead th:first-child { border-top-left-radius: 14px; }
.erp-data-grid thead th:last-child { border-top-right-radius: 14px; }
.erp-data-grid tbody td {
  padding: 12px 14px;
  line-height: 1.4;
  vertical-align: middle;
  border-color: rgba(71, 85, 105, .34);
  scroll-snap-align: start;
}
.erp-data-grid tbody tr { background: var(--erp-grid-row); transition: background-color 180ms var(--erp-ease); }
.erp-data-grid tbody tr:nth-child(even) { background: var(--erp-grid-row-alt); }
.erp-data-grid tbody tr:hover { background: rgba(30, 78, 126, .48); }
.erp-data-grid[data-erp-has-serial="true"] thead th:first-child,
.erp-data-grid[data-erp-has-serial="true"] tbody td:first-child {
  position: sticky;
  left: 0;
  min-width: 64px;
  text-align: center;
}
.erp-data-grid[data-erp-has-serial="true"] thead th:first-child { z-index: 5; background: var(--erp-grid-header); }
.erp-data-grid[data-erp-has-serial="true"] tbody td:first-child { z-index: 2; background: var(--erp-grid-row); box-shadow: 1px 0 0 rgba(71, 101, 142, .3); }
.erp-data-grid[data-erp-has-serial="true"] tbody tr:nth-child(even) td:first-child { background: var(--erp-grid-row-alt); }
.erp-data-grid[data-erp-has-serial="true"] tbody tr:hover td:first-child { background: rgba(30, 78, 126, .48); }
/* Action headers are identified rather than assuming every final column is an action column. */
.erp-data-grid[data-erp-has-actions="true"] .erp-grid-action-col {
  position: sticky;
  right: 0;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  background: var(--erp-grid-row);
  box-shadow: -1px 0 0 rgba(71, 101, 142, .3);
}
.erp-data-grid[data-erp-has-actions="true"] thead .erp-grid-action-col { z-index: 5; background: var(--erp-grid-header); }
.erp-data-grid[data-erp-has-actions="true"] tbody tr:nth-child(even) .erp-grid-action-col { background: var(--erp-grid-row-alt); }
.erp-data-grid[data-erp-has-actions="true"] tbody tr:hover .erp-grid-action-col { background: rgba(30, 78, 126, .48); }
.erp-data-grid[data-erp-has-serial="true"] :is(thead th:first-child,tbody td:first-child),
.erp-data-grid[data-erp-has-actions="true"] .erp-grid-action-col {
  position:static;
  left:auto;
  right:auto;
  box-shadow:none;
}
.erp-data-grid :is(td, th) > :is(button, .btn, .action-btn, .table-action) { vertical-align: middle; }
.erp-data-grid :is(th, td):first-child { text-align: left; }
.erp-data-grid :is(th, td):is(.status, [data-status]) { text-align: center; }
.erp-data-grid :is(th, td):is(.amount, .currency, [data-amount]) { text-align: right; font-variant-numeric: tabular-nums; }
.erp-data-grid caption { padding: 10px 14px; text-align: left; color: #94a3b8; font-size: 12px; caption-side: bottom; }

/* Shared filter controls are injected by erp_protection.js. They are scoped
   to data grids so existing form controls and module-specific filters retain
   their original behaviour. */
.erp-grid-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; min-width:0; }
.erp-grid-search { display:flex; align-items:center; gap:8px; min-width:min(100%,260px); height:40px; padding:0 12px; border:1px solid rgba(71,101,142,.58); border-radius:11px; background:rgba(15,30,53,.7); color:#7dd3fc; }
.erp-grid-search input { width:220px; min-width:0; height:100%; border:0 !important; outline:0; background:transparent !important; color:#e5eefc !important; font-size:13px; }
.erp-grid-search input::placeholder { color:#7890ad; }
.erp-grid-reset,.erp-grid-chip { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; border:1px solid rgba(100,116,139,.42); border-radius:10px; background:rgba(30,41,59,.72); color:#cbd5e1; padding:0 11px; font-size:12px; font-weight:650; transition:background-color .2s ease,border-color .2s ease,color .2s ease; }
.erp-grid-reset:hover,.erp-grid-chip:hover { color:#f8fafc; border-color:rgba(56,189,248,.7); background:rgba(14,116,144,.24); }
.erp-grid-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.erp-grid-chip { max-width:230px; min-height:30px; padding:0 9px; color:#b9e5ff; }
.erp-grid-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.erp-grid-column-title { display:inline; }
.erp-grid-filter-trigger,.erp-grid-sort-trigger { display:inline-grid; place-items:center; width:25px; height:25px; margin-left:4px; border:0; border-radius:7px; background:transparent; color:#93c5fd; vertical-align:middle; transition:background-color .2s ease,color .2s ease; }
.erp-grid-filter-trigger:hover,.erp-grid-filter-trigger:focus-visible,.erp-grid-sort-trigger:hover,.erp-grid-sort-trigger:focus-visible { background:rgba(56,189,248,.18); color:#e0f2fe; outline:0; }
.erp-grid-filter-menu { position:fixed; z-index:6000; width:min(300px,calc(100vw - 20px)); padding:13px; border:1px solid rgba(96,165,250,.44); border-radius:14px; background:linear-gradient(180deg,#132944,#081323); box-shadow:0 20px 56px rgba(0,0,0,.55); color:#e5eefc; }
.erp-grid-filter-menu__title { margin:0 0 10px; font-size:14px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.erp-grid-filter-menu__search { display:flex; align-items:center; gap:7px; height:36px; padding:0 10px; border:1px solid rgba(71,101,142,.58); border-radius:9px; background:rgba(15,23,42,.66); color:#7dd3fc; }
.erp-grid-filter-menu__search input { width:100%; border:0 !important; outline:0; background:transparent !important; color:#e5eefc !important; font-size:12px; }
.erp-grid-filter-menu__choices { max-height:230px; margin:10px -3px; overflow:auto; overscroll-behavior:contain; }
.erp-grid-filter-menu__choices label { display:flex; align-items:center; gap:8px; min-height:34px; padding:0 7px; border-radius:8px; color:#d6e4f5; font-size:12px; cursor:pointer; }
.erp-grid-filter-menu__choices label:hover { background:rgba(56,189,248,.12); }
.erp-grid-filter-menu__choices span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.erp-grid-filter-menu__choices p { margin:12px 6px; color:#94a3b8; font-size:12px; }
.erp-grid-filter-menu__actions { display:flex; justify-content:flex-end; gap:8px; padding-top:10px; border-top:1px solid rgba(148,163,184,.16); }
.erp-grid-filter-menu__actions button { min-height:34px; border:1px solid rgba(100,116,139,.5); border-radius:8px; background:rgba(30,41,59,.8); color:#dbeafe; padding:0 12px; font-size:12px; font-weight:700; }
.erp-grid-filter-menu__actions [data-action="apply"] { border-color:rgba(14,165,233,.72); background:rgba(2,132,199,.56); color:#fff; }
@media (max-width:720px) { .erp-grid-toolbar { gap:8px; } .erp-grid-search { flex:1 1 100%; } .erp-grid-search input { width:100%; } .erp-grid-reset { margin-left:auto; } .erp-grid-filter-trigger,.erp-grid-sort-trigger { width:23px; height:23px; margin-left:3px; } }

/* A visible, compact affordance communicates that wide grids can be swiped.
   It disappears for a fully fitting table without changing its layout. */
.erp-data-grid-scroll[data-erp-overflowing="true"]::after {
  content: 'Swipe, Shift + wheel, or Shift + ← / → to view more columns';
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 8px 12px 10px auto;
  color: #7dd3fc;
  font-size: 11px;
  line-height: 1.2;
  opacity: .78;
}
@media (min-width: 900px) { .erp-data-grid-scroll:not(:hover):not(:focus-within)::after { opacity: .45; } }

@media (max-width: 720px) {
  .erp-data-grid-scroll { border-radius: 12px; }
  .erp-data-grid-scroll[data-erp-tall-grid="true"] { max-height: min(62vh, 460px); }
  .erp-data-grid thead th,
  .erp-data-grid tbody td { padding: 11px 12px; }
  .erp-data-grid-scroll::after { margin-right: 10px; font-size: 10px; }
}

/* Long scroll regions retain native edge handoff: once they reach an edge,
   the page continues scrolling instead of trapping the mouse wheel. */
:where(.erp-data-grid-scroll, .modal-box, .modal-content, .support-desk-body, [data-erp-scroll-container]) {
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

/* User Logs is intentionally a contained workspace: summary statistics stay
   visible while only the event timeline scrolls. */
#logs-recycle-tab:not(.hidden) { min-height: 0; }
#logs-recycle-tab:not(.hidden) > .enterprise-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); min-height: min(720px, calc(100dvh - 150px)); max-height: calc(100dvh - 124px); overflow: hidden; }
#logs-recycle-tab .user-log-timeline { min-height: 0; overflow: auto; overscroll-behavior: auto; padding: 2px 4px 4px; scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, .8) transparent; }
#logs-recycle-tab .user-log-timeline::-webkit-scrollbar { width: 8px; }
#logs-recycle-tab .user-log-timeline::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(56, 189, 248, .76); background-clip: padding-box; }
#logs-recycle-tab .user-log-timeline > .panel { min-height: 76px; border-color: rgba(71, 101, 142, .42); transition: border-color 180ms var(--erp-ease), background-color 180ms var(--erp-ease), transform 180ms var(--erp-ease); }
#logs-recycle-tab .user-log-timeline > .panel:hover { transform: translateX(2px); border-color: rgba(56, 189, 248, .55); background: rgba(20, 40, 69, .6); }

/* P&M display tables follow a predictable asset-grid alignment. */
:is(#pnm-own-assets, #pnm-hire-assets, #pnm-spare-assets) table.erp-data-grid th,
:is(#pnm-own-assets, #pnm-hire-assets, #pnm-spare-assets) table.erp-data-grid td { min-height: 64px; vertical-align: middle; }
:is(#pnm-own-assets, #pnm-hire-assets, #pnm-spare-assets) table.erp-data-grid th:not(:nth-child(2)),
:is(#pnm-own-assets, #pnm-hire-assets, #pnm-spare-assets) table.erp-data-grid td:not(:nth-child(2)) { text-align: center; }
:is(#pnm-own-assets, #pnm-hire-assets, #pnm-spare-assets) .erp-grid-serial-col { width: 64px; min-width: 64px; text-align: center !important; font-variant-numeric: tabular-nums; }
.pnm-report-table.erp-data-grid th, .pnm-report-table.erp-data-grid td { padding: 12px 14px; vertical-align: middle; }
.pnm-report-table.erp-data-grid th:first-child, .pnm-report-table.erp-data-grid td:first-child { text-align: center; }

/* Admin activity log filter row stays beneath the header while the table body
   scrolls; its serial column remains compact and fixed. */
#logsDataTable.erp-data-grid { min-width: 1280px; }
#logsDataTable.erp-data-grid .erp-grid-serial-col,
#logsDataTable.erp-data-grid th:first-child,
#logsDataTable.erp-data-grid td:first-child { width: 68px; min-width: 68px; text-align: center; }
#logsPaginationControls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid rgba(148, 163, 184, .14); border-radius: 12px; background: rgba(15, 23, 42, .5); }
#logsCountLabel { color: #cbd5e1 !important; font-weight: 600; }
.logs-clear-filters { min-width: 0; min-height: 34px; padding: 0 12px; font-size: 12px; }

@media (max-width: 720px) {
  #logs-recycle-tab:not(.hidden) > .enterprise-panel { min-height: 0; max-height: none; overflow: visible; }
  #logs-recycle-tab .user-log-timeline { max-height: min(62dvh, 560px); }
  .user-table-pagination__summary { width: 100%; }
}

/* Form controls retain a consistent rhythm without rewriting custom themes. */
:where(.enterprise-field, .civet-field, .field-group, .form-group) > :is(input, select, textarea),
:where(.enterprise-form-grid, .support-form-grid, .form-grid, .civet-form-grid) :is(input, select, textarea) {
  width: 100%;
  max-width: 100%;
}

/* Modal content stays centered, has a bounded scroll body, and preserves footer actions. */
:where(.modal-bg, .modal, .support-desk-modal, [class*="modal-overlay"], [class*="modal-backdrop"]) {
  z-index: 5000;
}

:where(.modal-box, .dialog, .support-desk-dialog, [role="dialog"], [class*="modal-content"]) {
  width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(90vh, 90dvh);
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

:where(.modal-box, .dialog, .support-desk-dialog, [role="dialog"], [class*="modal-content"])::-webkit-scrollbar { display: none; }
:where(.modal-box, .dialog, .support-desk-dialog, [role="dialog"], [class*="modal-content"]) :where(.modal-footer, .form-footer) {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 14px;
  background: inherit;
}

/* Shared desktop sidebar and mobile drawer. */
:where(.sidebar, [data-erp-drawer]) {
  scrollbar-width: none;
  overscroll-behavior: contain;
}
:where(.sidebar, [data-erp-drawer])::-webkit-scrollbar { display: none; }

.erp-mobile-nav-toggle,
.erp-mobile-drawer-overlay { display: none; }

.erp-mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 4998;
  border: 0;
  border-radius: 0;
  background: rgba(2, 6, 23, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--erp-motion-base) var(--erp-ease);
}
.erp-mobile-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Admin accordion: visibility changes, not height/padding/margin animation. */
#adminSidebar .erp-module { min-width: 0; }
#adminSidebar .erp-module > .erp-subnav {
  display: none;
  min-width: 0;
  padding: 10px 0 6px 12px;
  opacity: 0;
}
#adminSidebar .erp-module.expanded > .erp-subnav,
#adminSidebar .erp-module.search-open > .erp-subnav {
  display: grid;
  gap: 6px;
  opacity: 1;
  animation: erp-fade-in var(--erp-motion-fast) var(--erp-ease) both;
}

/* Folder groups follow the same non-layout animation rule. */
.sidebar-subtabs-list-wrapper,
.erp-settings-group-items,
.erp-pnm-group-items {
  max-height: none !important;
  transition: opacity var(--erp-motion-fast) var(--erp-ease),
    transform var(--erp-motion-fast) var(--erp-ease) !important;
}
.sidebar-subtabs-list-wrapper.collapsed { transition-property: opacity, transform !important; }
.sidebar-subtabs-list-wrapper.collapsed { display: none !important; }
.erp-settings-group:not(.is-open) > .erp-settings-group-items,
.erp-pnm-group:not(.is-open) > .erp-pnm-group-items { display: none !important; }
.erp-settings-group.is-open > .erp-settings-group-items,
.erp-pnm-group.is-open > .erp-pnm-group-items { display: grid !important; }

.erp-module-toggle, .erp-subitem, .sidebar-subtab, .nav-item {
  transition: background-color var(--erp-motion-fast) var(--erp-ease),
    border-color var(--erp-motion-fast) var(--erp-ease),
    color var(--erp-motion-fast) var(--erp-ease),
    box-shadow var(--erp-motion-fast) var(--erp-ease),
    opacity var(--erp-motion-fast) var(--erp-ease),
    transform var(--erp-motion-fast) var(--erp-ease);
}

/* Date picker is fixed to the viewport by its script, always above dialogs. */
.civet-date-popup, .flatpickr-calendar, .datepicker-dropdown {
  z-index: 8000 !important;
  max-width: calc(100vw - 24px);
}
.civet-date-popup { position: fixed !important; }

/* File previewer is a self-contained, bounded dialog. */
.erp-file-viewer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--erp-motion-base) var(--erp-ease), visibility 0s linear var(--erp-motion-base);
}
.erp-file-viewer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.erp-file-viewer__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .84); }
.erp-file-viewer__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  height: min(780px, 90dvh);
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, .32);
  border-radius: var(--erp-radius-lg);
  background: #071526;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
  transform: translate3d(0, 12px, 0) scale(.98);
  transition: transform var(--erp-motion-base) var(--erp-ease);
}
.erp-file-viewer.is-open .erp-file-viewer__dialog { transform: translate3d(0, 0, 0) scale(1); }
.erp-file-viewer__dialog header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  color: #e0f2fe;
}
.erp-file-viewer__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-file-viewer__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.erp-file-viewer__actions :where(button, a) {
  display: inline-grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, .24);
  border-radius: 9px;
  color: #dbeafe;
  background: rgba(15, 35, 61, .75);
  text-decoration: none;
}
.erp-file-viewer__body { position: relative; display: grid; flex: 1; min-height: 0; place-items: center; overflow: auto; background: #020617; }
.erp-file-viewer__body img { max-width: 94%; max-height: 94%; object-fit: contain; transform-origin: center; }
.erp-file-viewer__body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.erp-file-viewer-open, .erp-drawer-active { overflow: hidden !important; }

/* Generated/manual number fields remain visually distinct. */
.erp-number-auto { cursor: not-allowed !important; color: #334155 !important; background: #d9dee7 !important; border-color: #c4ccd7 !important; }
.erp-number-manual { cursor: text !important; }
.erp-number-feedback { display: block; min-height: 1.1em; margin-top: 5px; color: #94a3b8; font-size: 11px; }
.erp-number-feedback.is-error { color: #fda4af; }

.erp-security-warning {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10000;
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 15px;
  border: 1px solid rgba(251, 191, 36, .48);
  border-radius: 13px;
  background: rgba(69, 26, 3, .96);
  color: #fef3c7;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
  font: 600 13px/1.4 Inter, "Segoe UI", sans-serif;
}
.erp-security-warning button { float: right; min-width: 0; min-height: 0; margin-left: 12px; padding: 0; border: 0; background: transparent; color: inherit; }

/* Alert banners retain their severity cue, pause on hover, and can be dismissed locally. */
.erp-alert-stack { display: grid; gap: 8px; margin-bottom: 16px; }
.erp-alert-banner { position: relative; min-width: 0; padding-right: 48px; }
.erp-alert-banner .alert-label i { width: 16px; height: 16px; font-size: 16px; color: #fbbf24; }
.erp-alert-banner .alert-message { overflow: hidden; text-overflow: ellipsis; }
.erp-alert-banner.is-marquee:hover .alert-message { animation-play-state: paused; }
.erp-alert-dismiss {
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%) !important;
  transition: background-color var(--erp-motion-fast) var(--erp-ease), border-color var(--erp-motion-fast) var(--erp-ease), color var(--erp-motion-fast) var(--erp-ease);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  color: #e2e8f0;
  background: rgba(2, 6, 23, .28);
}
.erp-alert-dismiss:hover, .erp-alert-dismiss:active { background: rgba(255, 255, 255, .12); transform: translateY(-50%) !important; }
.erp-alert-dismiss i { pointer-events: none; }

/* Edit-user sections stay readable rather than collapsing into four narrow columns. */
#userAccountEditPane #editLoginForm > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
#userAccountEditPane #editLoginForm > div[style*="grid-template-columns"] > section { min-width: 0; }

/* Filter actions share the standard action footprint. */
#tab-reports form .flex.gap-3 > button {
  width: 140px;
  min-width: 140px;
  height: 48px;
  min-height: 48px;
  padding-inline: 16px;
}

.erp-sensitive-page [data-sensitive],
.erp-sensitive-page .credential-sensitive,
.erp-sensitive-page input[type="password"] { user-select: none; -webkit-user-select: none; }

@keyframes erp-fade-in { from { opacity: 0; transform: translate3d(0, -4px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* Desktop: a fixed, independently scrollable navigation area. */
@media (min-width: 769px) {
  :where(.sidebar, [data-erp-drawer]) { overflow-y: auto; overflow-x: hidden; }
  .erp-mobile-nav-toggle { display: none !important; }
}

@media (max-width: 1200px) {
  :where(.enterprise-grid, .dashboard-grid, .responsive-grid, .civet-grid, .erp-card-grid, .erp-report-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :where(.enterprise-grid, .dashboard-grid, .responsive-grid, .civet-grid, .erp-card-grid, .erp-report-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --erp-page-pad: 16px; }
  body.erp-drawer-active { overflow: hidden; }
  /* One compact, glass navigation launcher across iPhone, ColorOS and Android.
     It stays above the gesture area and uses the same drawer rather than
     duplicating or removing any existing navigation options. */
  .erp-mobile-nav-toggle,
  #hamburgerBtn,
  .mob-hamburger,
  [data-sidebar-toggle] {
    position: fixed;
    right: auto !important;
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    left: 50% !important;
    z-index: 5002 !important;
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-columns: 30px auto;
    gap: 8px;
    width: auto !important;
    min-width: 112px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    place-items: center;
    border: 1px solid rgba(226, 232, 240, .38) !important;
    border-radius: 28px !important;
    color: #f8fafc !important;
    background: linear-gradient(135deg, rgba(51, 65, 85, .76), rgba(15, 23, 42, .62)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 12px 32px rgba(2, 6, 23, .42) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    transform: translateX(-50%) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--erp-motion-base) var(--erp-ease), border-color var(--erp-motion-base) var(--erp-ease), box-shadow var(--erp-motion-base) var(--erp-ease), transform var(--erp-motion-fast) var(--erp-ease) !important;
  }
  .erp-mobile-nav-toggle::after,
  #hamburgerBtn::after,
  .mob-hamburger::after,
  [data-sidebar-toggle]::after { content: 'Menu'; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
  .erp-mobile-nav-toggle > i,
  #hamburgerBtn > i,
  .mob-hamburger > i,
  [data-sidebar-toggle] > i { width: 30px; font-size: 18px; text-align: center; }
  .erp-mobile-nav-toggle[aria-expanded="true"],
  #hamburgerBtn[aria-expanded="true"],
  .mob-hamburger[aria-expanded="true"],
  [data-sidebar-toggle][aria-expanded="true"] { background: linear-gradient(135deg, rgba(14, 116, 144, .82), rgba(30, 41, 59, .78)) !important; border-color: rgba(125, 211, 252, .7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 12px 36px rgba(14, 165, 233, .25) !important; }
  .erp-mobile-nav-toggle:active,
  #hamburgerBtn:active,
  .mob-hamburger:active,
  [data-sidebar-toggle]:active { transform: translateX(-50%) scale(.96) !important; }
  /* Admin keeps its launcher anchored in one location; header reflows and
     drawer state cannot shift it horizontally. */
  #hamburgerBtn {
    left: 50% !important;
    right: auto !important;
    flex: 0 0 auto !important;
    transform: translateX(-50%) !important;
    contain: layout paint;
  }
  #hamburgerBtn:active { transform: translateX(-50%) scale(.96) !important; }
  /* Narrow drawers retain two equal cards; names wrap at spaces only. */
  #adminSidebar .erp-accordion { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; padding: 12px 14px 18px; }
  #adminSidebar .erp-module { grid-column: auto !important; }
  #adminSidebar .erp-module-toggle {
    height: 116px;
    min-height: 116px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px 11px 8px;
    text-align: center;
  }
  #adminSidebar .erp-module-toggle span {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: 10px;
    line-height: 1.15;
    text-wrap: balance;
  }
  #adminSidebar .erp-module-toggle .module-icon { flex: 0 0 28px; width: 28px; height: 28px; }
  #adminSidebar .erp-module-toggle .module-chevron { top: 10px; right: 9px; transform: none; }
  #adminSidebar .erp-module.expanded > .erp-module-toggle .module-chevron { transform: rotate(90deg); }
  /* User dashboard: a single bottom bar, with the drawer control inside it.
     The complete module list stays in the drawer, so no capability is lost. */
  .user-bottom-nav {
    min-height: max(74px, calc(env(safe-area-inset-bottom) + 66px)) !important;
    padding: 7px max(12px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    gap: 8px !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(226, 232, 240, .20) !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, .90), rgba(30, 41, 59, .76)) !important;
    box-shadow: 0 -10px 32px rgba(2, 6, 23, .30), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
  }
  .user-bottom-nav .mobile-nav-link { flex: 0 1 70px !important; max-width: 72px !important; }
  .user-bottom-nav .mobile-nav-link:nth-of-type(n+3) { display: none !important; }
  .user-bottom-nav .erp-mobile-nav-toggle--bottom {
    position: static !important;
    display: inline-grid !important;
    flex: 0 0 122px !important;
    min-width: 122px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    transform: none !important;
  }
  .user-bottom-nav .erp-mobile-nav-toggle--bottom:active { transform: scale(.96) !important; }
  .erp-mobile-drawer-overlay { display: block; }
  [data-erp-drawer] {
    display: flex !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 5000 !important;
    width: min(86vw, 340px) !important;
    max-width: calc(100vw - 28px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding-top: env(safe-area-inset-top) !important;
    overflow: hidden !important;
    transform: translate3d(-105%, 0, 0) !important;
    visibility: hidden !important;
    box-shadow: 20px 0 48px rgba(2, 6, 23, .44) !important;
    transition: transform var(--erp-motion-base) var(--erp-ease), visibility 0s linear var(--erp-motion-base) !important;
  }
  [data-erp-drawer].erp-drawer-open { transform: translate3d(0, 0, 0) !important; visibility: visible !important; transition-delay: 0s !important; }
  [data-erp-drawer] .sidebar-scroll-wrapper { min-height: 0; overflow-y: auto !important; overflow-x: hidden !important; }
  html.erp-has-mobile-drawer main:not(.login-page), html.erp-has-mobile-drawer .main-content { padding-top: max(70px, calc(env(safe-area-inset-top) + 62px)) !important; padding-bottom: max(86px, calc(env(safe-area-inset-bottom) + 78px)) !important; }
  :where(.enterprise-form-grid, .support-form-grid, .form-grid, .civet-form-grid, .responsive-grid-2) { grid-template-columns: 1fr; }
  :where(.onpage-subtabs-container, .support-tabs, .subtab-bar, .tabs-list) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  :where(.onpage-subtabs-container, .support-tabs, .subtab-bar, .tabs-list)::-webkit-scrollbar { display: none; }
  :where(.modal-bg, .modal, .support-desk-modal, [class*="modal-overlay"], [class*="modal-backdrop"]) { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .erp-file-viewer { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .erp-file-viewer__dialog { height: min(760px, 96dvh); border-radius: 14px; }

  /* Keep login focused: no oversized marketing block before essential fields. */
  .login-page .brand-column { min-height: 0; padding: max(18px, env(safe-area-inset-top)) 18px 8px; }
  .login-page .brand-content { padding: 24px 0 10px; }
  .login-page .portal-chip, .login-page .brand-copy { display: none; }
  .login-page .brand-title { margin: 0; font-size: clamp(26px, 8vw, 34px); }
  .login-page .auth-column { padding: 8px 12px max(20px, env(safe-area-inset-bottom)); }
  .login-page .auth-panel { width: 100%; max-height: none; padding: 24px 18px; }
  #userAccountEditPane #editLoginForm > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Authentication uses the same action dimensions as the workspace. */
body.login-shell-body .primary-action {
  width: min(100%, 220px);
  min-height: 48px;
  height: 48px;
  margin-inline: auto;
}

@media (max-width: 600px) {
  :where(.enterprise-grid, .dashboard-grid, .responsive-grid, .civet-grid, .erp-card-grid, .erp-report-grid) { grid-template-columns: 1fr; }
  :where(.enterprise-actions, .form-footer, .modal-footer, form .actions, .page-toolbar, .toolbar, .report-toolbar) > :where(button, .btn, .civet-button, .primary-action, .action-button) { width: 100%; max-width: none; }
  .erp-table-scroll table { min-width: 640px; }
  .login-page .brand-lockup { gap: 10px; }
  .login-page .brand-logo-frame { width: 136px; height: 49px; }
  .login-page .brand-divider { height: 36px; }
  .login-page .brand-name { font-size: 16px; }
  .login-page .auth-title { font-size: 28px; }
  .topbar { gap: 8px !important; }
  .topbar > div:last-child { min-width: 0; gap: 6px !important; }
  .admin-topbar-logout { display: inline-grid; width: 34px; min-width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(251, 113, 133, .28); border-radius: 10px; background: rgba(244, 63, 94, .10); }
  .admin-topbar-logout span { display: none; }
  .admin-topbar-logout i { margin: 0 !important; font-size: 14px; }
  .admin-topbar-whatsapp { display: inline-grid; width: 34px; min-width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(52, 211, 153, .30); border-radius: 10px; color: #6ee7b7; background: rgba(16, 185, 129, .12); }
  .admin-topbar-whatsapp span { display: none; }
  .admin-topbar-whatsapp i { font-size: 16px; }
  .user-mobile-header { gap: 8px; padding-inline: 12px; }
  .user-mobile-header > div:first-child { min-width: 0; }
  .user-mobile-header > div:last-child { gap: 6px; }
  .user-mobile-header > div:last-child > :where(button, a) { flex: 0 0 34px; width: 34px; height: 34px; min-width: 34px; min-height: 34px; display: inline-grid; place-items: center; padding: 0; }
}

@media (max-width: 420px) {
  .user-mobile-header > div:first-child span { display: none; }
  .user-mobile-header #sessionTimerMobile { display: none; }
  .user-mobile-header > div:last-child > span:last-child { max-width: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

@media (max-width: 420px) {
  :root { --erp-page-pad: 12px; }
  .erp-mobile-nav-toggle, #hamburgerBtn, .mob-hamburger, [data-sidebar-toggle] { min-width: 104px !important; height: 50px !important; min-height: 50px !important; padding: 0 15px !important; }
  .user-bottom-nav .erp-mobile-nav-toggle--bottom { flex-basis: 112px !important; min-width: 112px !important; }
  [data-erp-drawer] { width: min(90vw, 330px) !important; }
  :where(.modal-box, .dialog, .support-desk-dialog, [role="dialog"], [class*="modal-content"]) { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
}

@media (hover: none) {
  :where(.card, .panel, .enterprise-card, .summary-tile, .module-card, .support-card, .kpi-card, .report-card, .civet-section-card):hover,
  :where(button, .btn, .civet-button, .primary-action, .action-button):hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Executive user dashboard */
.user-executive-hero,.user-dashboard-panel,.user-summary-card{border:1px solid rgba(148,163,184,.14);background:linear-gradient(145deg,rgba(22,34,54,.92),rgba(12,22,38,.96));box-shadow:0 14px 30px rgba(2,8,23,.22)}
.user-executive-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;margin-bottom:20px;border-radius:16px;overflow:hidden}.user-executive-hero::after{position:absolute;top:-160px;right:-110px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.18),transparent 67%);content:"";pointer-events:none}.user-executive-eyebrow,.user-panel-heading p{margin:0 0 7px;color:#7dd3fc;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.user-executive-eyebrow i{margin-right:7px}.user-executive-hero h2{margin:0;color:#f8fafc;font-size:clamp(26px,3vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.035em}.user-executive-hero>div>p:last-child{margin:9px 0 0;color:#94a3b8;font-size:14px}.user-executive-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}.user-executive-meta span,.user-panel-heading>span,.status-dot{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;color:#cbd5e1;background:rgba(15,23,42,.66);border:1px solid rgba(148,163,184,.15);border-radius:999px;font-size:11px;font-weight:700}.user-executive-meta i{color:#38bdf8}
.user-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 14px}.user-summary-card{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:126px;padding:18px;border-radius:16px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.user-summary-card:hover{transform:translateY(-3px);border-color:var(--summary-accent,rgba(125,211,252,.5));box-shadow:0 18px 35px rgba(2,8,23,.38)}.user-summary-card>div{min-width:0}.user-summary-card span:not(.summary-icon){display:block;overflow:hidden;color:#94a3b8;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}.user-summary-card strong{display:block;margin-top:8px;color:#f8fafc;font-size:clamp(19px,1.8vw,27px);line-height:1;letter-spacing:-.04em;white-space:nowrap}.user-summary-card small{display:block;margin-top:8px;color:#64748b;font-size:11px;line-height:1.25}.summary-icon{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--summary-accent,#38bdf8) 17%,transparent);color:var(--summary-accent,#38bdf8);font-size:17px}.tone-blue{--summary-accent:#60a5fa}.tone-purple{--summary-accent:#c084fc}.tone-amber{--summary-accent:#fbbf24}.tone-emerald{--summary-accent:#34d399}.tone-cyan{--summary-accent:#22d3ee}.tone-indigo{--summary-accent:#818cf8}.tone-rose{--summary-accent:#fb7185}.tone-sky{--summary-accent:#38bdf8}
.user-dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;margin:20px 0 14px}.user-dashboard-panel{min-width:0;padding:20px;border-radius:16px}.user-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.user-panel-heading h3{margin:0;color:#f8fafc;font-size:16px;line-height:1.2;font-weight:800;letter-spacing:-.02em}.user-panel-heading>button{padding:0;color:#7dd3fc;background:transparent;border:0;font-size:12px;font-weight:800;cursor:pointer}.module-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.module-status-card{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:12px;color:#cbd5e1;text-align:left;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:rgba(15,23,42,.43);cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease}.module-status-card:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.42);background:rgba(30,41,59,.78)}.module-status-card>i:first-child{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:rgba(148,163,184,.1);font-size:14px}.module-status-card span{flex:1;min-width:0}.module-status-card strong,.module-status-card small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.module-status-card strong{color:#e2e8f0;font-size:12px}.module-status-card small{margin-top:3px;color:#64748b;font-size:10px}.module-status-card>i:last-child{color:#64748b;font-size:11px}.user-quick-actions{display:flex;flex-direction:column}.user-quick-actions>button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;margin-top:8px;padding:9px 11px;color:#dbeafe;text-align:left;border:1px solid rgba(125,211,252,.16);border-radius:11px;background:rgba(14,165,233,.07);font-size:12px;font-weight:750;cursor:pointer;transition:background .25s ease,transform .25s ease}.user-quick-actions>button:hover{transform:translateX(2px);background:rgba(14,165,233,.15)}.user-quick-actions i{width:18px;color:#38bdf8}
.user-analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 20px}.user-analytics-grid .activity-panel{grid-column:span 2}.executive-chart-wrap{position:relative;height:250px}.activity-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.activity-timeline>div{display:flex;gap:9px;min-width:0}.activity-timeline>div>i{margin-top:4px;color:#38bdf8;font-size:12px}.activity-timeline p{min-width:0;margin:0}.activity-timeline strong,.activity-timeline span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.activity-timeline strong{color:#e2e8f0;font-size:12px}.activity-timeline span{margin-top:4px;color:#64748b;font-size:11px}
@media (max-width:1180px){.user-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-dashboard-layout{grid-template-columns:1fr}.user-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.user-quick-actions .user-panel-heading{grid-column:1/-1}.user-quick-actions>button{margin:0}}
@media (max-width:720px){.user-executive-hero{flex-direction:column;align-items:flex-start;padding:22px 18px}.user-executive-meta{justify-content:flex-start}.user-summary-grid,.module-status-grid,.user-analytics-grid,.activity-timeline{grid-template-columns:1fr}.user-summary-card{min-height:104px}.user-analytics-grid .activity-panel{grid-column:auto}.user-quick-actions{grid-template-columns:1fr}.executive-chart-wrap{height:220px}}

/* Payment allotment workspace */
#tab-payments{max-width:1600px;margin:0 auto;padding-bottom:24px}#tab-payments .payments-grid{display:grid;grid-template-columns:minmax(0,650px) minmax(0,1fr);gap:20px;align-items:start}#tab-payments .payments-grid>.panel{border-radius:16px!important;min-width:0}#tab-payments #savePaymentForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important}#tab-payments #savePaymentForm>div{min-width:0;margin:0!important}#tab-payments #savePaymentForm label{min-height:18px;margin-bottom:6px!important;color:#cbd5e1!important;font-size:11px!important;font-weight:800!important;letter-spacing:.045em}#tab-payments #savePaymentForm :is(input,select){min-height:48px!important;border-radius:12px!important;background:rgba(30,41,59,.78)!important;border-color:rgba(148,163,184,.22)!important;transition:border-color .25s ease,box-shadow .25s ease!important}#tab-payments #savePaymentForm :is(input,select):focus{border-color:rgba(56,189,248,.75)!important;box-shadow:0 0 0 3px rgba(56,189,248,.13)!important}#tab-payments #savePaymentForm>div:nth-child(5){display:contents}#tab-payments #savePaymentForm>div:nth-child(5)>div{min-width:0}#tab-payments #savePaymentForm button[type="submit"]{grid-column:1/-1;justify-self:center;min-width:180px!important;width:auto!important;min-height:48px!important;padding-inline:28px!important;border-radius:12px!important;box-shadow:0 10px 22px rgba(245,158,11,.18)}#tab-payments .payments-grid> .panel:last-child>div[style*="overflow-x"]{max-width:100%;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#38bdf8 transparent}#tab-payments #bunkPaymentsTable{min-width:900px!important}#tab-payments #bunkPaymentsTable thead{position:sticky;top:0;z-index:2;background:#12345a}#tab-payments #bunkPaymentsTable th:first-child,#tab-payments #bunkPaymentsTable td:first-child{position:sticky;left:0;z-index:1;background:#102039}#tab-payments #bunkPaymentsTable thead th:first-child{z-index:3;background:#12345a}
@media (max-width:1080px){#tab-payments .payments-grid{grid-template-columns:1fr}#tab-payments .payments-grid>.panel:first-child{max-width:none}}@media (max-width:600px){#tab-payments #savePaymentForm{grid-template-columns:1fr}#tab-payments #savePaymentForm>div:nth-child(5){display:grid;grid-template-columns:1fr;gap:16px}#tab-payments .panel{padding:18px!important}}