/* -------------------------------------------------------------------
   Stage 105.0D CLEAN — UI v2 Shared Page Surfaces / Data Controls Polish
   Frontend-only professional surface layer for real ISP Forge pages.

   Scope:
   - CSS-first polish for shared content surfaces, tables, filters, forms,
     tabs, badges, empty states, and modal body chrome.
   - Builds on Stage 105.0C without changing route/menu functions.
   - No backend, API, popup, save, billing, RADIUS or protected logic changes.
------------------------------------------------------------------- */

:root {
  --ui-v2-stage: "105.0D CLEAN";
  --ui-v2-surface-bg: rgba(15, 23, 42, 0.82);
  --ui-v2-surface-bg-soft: rgba(15, 23, 42, 0.58);
  --ui-v2-surface-border: rgba(148, 163, 184, 0.18);
  --ui-v2-surface-border-strong: rgba(45, 212, 191, 0.23);
  --ui-v2-surface-text: #e8f1ff;
  --ui-v2-surface-muted: rgba(203, 213, 225, 0.74);
  --ui-v2-table-head: rgba(2, 6, 23, 0.72);
  --ui-v2-table-row: rgba(15, 23, 42, 0.36);
  --ui-v2-table-row-alt: rgba(30, 41, 59, 0.30);
  --ui-v2-field-bg: rgba(2, 6, 23, 0.36);
  --ui-v2-field-border: rgba(148, 163, 184, 0.24);
  --ui-v2-focus-ring: rgba(45, 212, 191, 0.28);
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] #content,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .content,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .main-content,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .page-content {
  color: var(--ui-v2-surface-text);
}

/* Page titles and section headers */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] #content h1,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] #content h2,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] #content h3,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .content h1,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .content h2,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .content h3,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .page-title,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .section-title,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .card-title,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .panel-title {
  color: #f8fbff !important;
  letter-spacing: -0.015em;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] #content h1,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .content h1,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .page-title {
  margin-bottom: 14px !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .muted,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .small,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .help-text,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .hint,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .description,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .text-muted {
  color: var(--ui-v2-surface-muted) !important;
}

/* Shared cards / panels, without forcing display or behaviour changes. */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .panel,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .section,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .box,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .widget,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .settings-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .summary-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .kpi-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .stat-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .data-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .report-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .customer-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .billing-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .setup-card,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tools-card {
  border-color: var(--ui-v2-surface-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.040), rgba(255,255,255,0.020)),
    var(--ui-v2-surface-bg) !important;
  box-shadow: 0 18px 54px rgba(2, 6, 23, 0.20) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .card:hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .panel:hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .settings-card:hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .summary-card:hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .kpi-card:hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .stat-card:hover {
  border-color: rgba(45, 212, 191, 0.25) !important;
}

/* Toolbars, filter rows and action bars */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .toolbar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .filter-bar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .filters,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .filter-row,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .search-row,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .action-bar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .actions,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .button-row,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .form-actions {
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: linear-gradient(135deg, rgba(15,23,42,0.68), rgba(30,41,59,0.40)) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 38px rgba(2, 6, 23, 0.14) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .toolbar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .filter-bar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .filter-row,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .search-row,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .action-bar {
  gap: 10px !important;
}

/* Data tables: polished without changing table display model. */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .table-wrap,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .table-container,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .table-responsive,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .data-table-wrap {
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 18px !important;
  background: rgba(15,23,42,0.42) !important;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.16) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] thead th,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] table th {
  color: rgba(226, 241, 255, 0.94) !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.74)) !important;
  border-bottom: 1px solid rgba(45, 212, 191, 0.18) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] table td {
  border-bottom-color: rgba(148, 163, 184, 0.12) !important;
  color: rgba(232, 241, 255, 0.90) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] tbody tr:nth-child(even) td {
  background: var(--ui-v2-table-row-alt) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] tbody tr:hover td {
  background: rgba(20, 184, 166, 0.075) !important;
}

/* Forms */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] label,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .form-label,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .field-label {
  color: rgba(226, 241, 255, 0.88) !important;
  font-weight: 800 !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] select,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] textarea {
  border-color: var(--ui-v2-field-border) !important;
  background-color: var(--ui-v2-field-bg) !important;
  color: rgba(248, 251, 255, 0.94) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input:focus,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] select:focus,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] textarea:focus {
  border-color: rgba(45, 212, 191, 0.55) !important;
  box-shadow: 0 0 0 4px var(--ui-v2-focus-ring) !important;
  outline: none !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input::placeholder,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] textarea::placeholder {
  color: rgba(148, 163, 184, 0.72) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[readonly],
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] textarea[readonly],
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] select[disabled],
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[disabled],
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] textarea[disabled] {
  opacity: .76;
  cursor: not-allowed;
}

/* Buttons: preserve click handlers and element types; only refine surface. */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] button,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .btn,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[type="button"],
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[type="submit"] {
  border-radius: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .005em;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] button:not(:disabled):hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .btn:not(:disabled):hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[type="button"]:not(:disabled):hover,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[type="submit"]:not(:disabled):hover {
  filter: brightness(1.06);
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] button:disabled,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .btn:disabled,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[type="button"]:disabled,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] input[type="submit"]:disabled {
  opacity: .56 !important;
  cursor: not-allowed !important;
}

/* Tabs / pills / route chips */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tabs,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tab-bar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .pill-bar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .section-tabs {
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(2, 6, 23, 0.26) !important;
  border-radius: 18px !important;
  padding: 6px !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tab,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tab-btn,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .pill,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tab-button {
  border-radius: 13px !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tab.active,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tab-btn.active,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .pill.active,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tab-button.active {
  background: linear-gradient(135deg, rgba(20,184,166,0.20), rgba(37,99,235,0.15)) !important;
  border-color: rgba(45,212,191,0.28) !important;
  color: #f8fbff !important;
}

/* Badges and status chips */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .badge,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .status,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .chip,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .tag,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .label-pill {
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(255,255,255,0.055) !important;
  color: rgba(226,241,255,0.88) !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .success,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .badge-success,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .status-success {
  color: #bbf7d0 !important;
  background: rgba(34,197,94,0.13) !important;
  border-color: rgba(34,197,94,0.26) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .warning,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .badge-warning,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .status-warning {
  color: #fde68a !important;
  background: rgba(245,158,11,0.13) !important;
  border-color: rgba(245,158,11,0.28) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .danger,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .badge-danger,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .status-danger,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .error {
  color: #fecaca !important;
  background: rgba(239,68,68,0.13) !important;
  border-color: rgba(239,68,68,0.28) !important;
}

/* Modals / popups: surface polish only, no close/cancel logic changes. */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .modal,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .modal-content,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .popup,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .popup-content,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .dialog,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .dialog-content {
  border-color: rgba(148, 163, 184, 0.20) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(20,184,166,0.13), transparent 15rem),
    linear-gradient(180deg, rgba(15,23,42,0.985), rgba(2,6,23,0.965)) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .modal-header,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .popup-header,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .dialog-header {
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .modal-footer,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .popup-footer,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .dialog-footer {
  border-top-color: rgba(148, 163, 184, 0.16) !important;
  background: rgba(2, 6, 23, 0.18) !important;
}

/* Empty/loading states */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .empty-state,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .loading,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .placeholder,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .no-data {
  border: 1px dashed rgba(148, 163, 184, 0.24) !important;
  background: rgba(15, 23, 42, 0.34) !important;
  border-radius: 18px !important;
  color: rgba(203, 213, 225, 0.80) !important;
}

/* Scrollbars for data-heavy areas */
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .table-wrap::-webkit-scrollbar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .table-container::-webkit-scrollbar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .modal-content::-webkit-scrollbar,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .popup-content::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .table-wrap::-webkit-scrollbar-thumb,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .table-container::-webkit-scrollbar-thumb,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .modal-content::-webkit-scrollbar-thumb,
html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .popup-content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.36);
  border-radius: 999px;
}

/* Desktop density pass: slightly more breathing room without changing layouts. */
@media (min-width: 1100px) {
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .card,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .panel,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .settings-card,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .summary-card,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .kpi-card,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .stat-card {
    margin-bottom: 16px;
  }
}

@media (max-width: 780px) {
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .toolbar,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .filter-bar,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .filter-row,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .search-row,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] .action-bar {
    border-radius: 16px !important;
  }

  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] table th,
  html[data-ispforge-ui-v2-surfaces="shared-page-polish"] table td {
    font-size: 12px !important;
  }
}