/**
 * UI Polish Pro — professional CRM layer (reversible)
 *
 * Loads AFTER ui-polish.css. Comment out the <link> in index.html
 * (see “UI polish pro”) to revert to KX-603 brand-green overlay only.
 *
 * Brand-green primary · gray cancel · red delete · white cards on light gray canvas
 */

:root {
  --pro-bg: #eef1f6;
  --pro-surface: #ffffff;
  --pro-surface-muted: #f8fafc;
  --pro-border: rgba(15, 23, 42, 0.08);
  --pro-border-strong: rgba(15, 23, 42, 0.12);
  --pro-text: #0f172a;
  --pro-text-secondary: #334155;
  --pro-text-muted: #64748b;
  /* Brand primary (aligned with ui-polish.css / logo) */
  --pro-primary: var(--brand-green, #7ead5a);
  --pro-primary-hover: var(--brand-green-hover, #88b569);
  --pro-primary-dim: var(--brand-green-dim, #6f9a4f);
  --pro-primary-soft: var(--brand-green-soft, rgba(126, 173, 90, 0.14));
  --pro-primary-text: var(--brand-brown, #413225);
  --pro-cancel-bg: #f1f5f9;
  --pro-cancel-border: #cbd5e1;
  --pro-cancel-text: #475569;
  --pro-cancel-hover: #e2e8f0;
  --pro-danger: #dc2626;
  --pro-danger-hover: #b91c1c;
  --pro-danger-soft: #fef2f2;
  --pro-danger-border: rgba(220, 38, 38, 0.35);
  --pro-radius: 12px;
  --pro-radius-lg: 14px;
  --pro-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 16px rgba(15, 23, 42, 0.04);
  --pro-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
  --pro-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pro-dur: 0.2s;
  --pro-row-hover: var(--brand-green-softer, rgba(126, 173, 90, 0.08));
  --pro-focus: 0 0 0 3px rgba(126, 173, 90, 0.28);
}

/* —— Canvas & breathing room —— */
body {
  background: var(--pro-bg);
  color: var(--pro-text);
}

.main {
  background: var(--pro-bg);
}

.view-root {
  padding: 0.35rem 0.5rem 1.5rem;
}

.reqd-page,
.tg-guides-page,
.gcom-page,
.settings-page,
.finance-page,
.vis-page,
.daytour-page,
.services-page.reqd-page,
.suppliers-page,
.statistics-page,
.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-title {
  color: var(--pro-text);
  letter-spacing: -0.02em;
}

.topbar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pro-border);
  box-shadow: var(--pro-shadow-sm);
}

.muted,
.small.muted,
.panel-muted {
  color: var(--pro-text-muted);
}

.panel-title,
h2.panel-title,
h3.panel-title {
  color: var(--pro-text);
}

/* —— White cards —— */
.panel,
.modal-panel,
.finance-cash-card,
.grid-stats--dashboard .stat-card,
.dash-latest-panel,
.dash-ops-panel,
.requests-page .requests-table-panel,
.clients-page .clients-table-panel,
.clients-page .clients-block1,
.operations-page .panel.panel--compact,
.statistics-page .statistics-table-panel,
.statistics-page .panel.panel--compact,
.vis-page .vis-toolbar-panel,
.vis-page .vis-table-panel,
.daytour-page .daytour-toolbar-panel,
.daytour-page .daytour-table-panel,
.services-page .panel.panel--compact,
.suppliers-page .panel.panel--compact,
.gcom-panel,
.gcom-inbox__detail,
.gcom-filters,
.settings-page .panel,
.backup-restore-section,
.catalogs-page .panel,
.bookmarks-page .panel,
.act-catalog-page .panel {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius-lg);
  box-shadow: var(--pro-shadow-sm);
}

.panel-header,
.panel-header--compact {
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--pro-surface-muted) 100%);
  border-bottom: 1px solid var(--pro-border);
}

.panel-body-pad {
  padding: 1.15rem 1.25rem 1.3rem;
}

.panel-header--compact {
  padding: 0.9rem 1.15rem;
}

.grid-stats--dashboard {
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.grid-stats--dashboard .stat-card {
  padding: 1.3rem 1.25rem 1.15rem;
  border-radius: var(--pro-radius-lg);
  min-height: 9rem;
}

.grid-stats--dashboard .stat-card::before {
  background: var(--pro-primary);
}

.grid-stats--dashboard .stat-card__value {
  color: var(--pro-text);
}

.grid-stats--dashboard .stat-card__label,
.grid-stats--dashboard .stat-card__sub {
  color: var(--pro-text-muted);
}

.finance-cash-card {
  padding: 1rem 1.15rem;
}

.finance-cash-card--usd,
.finance-cash-card--eur {
  border-left: 3px solid var(--pro-primary);
}

/* —— Tables (all main lists) —— */
.table-wrap {
  margin: 0;
  border-radius: calc(var(--pro-radius) - 2px);
  overflow: auto;
  background: var(--pro-surface);
}

table.data {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

table.data thead th {
  position: relative;
  padding: 0.85rem 1.1rem !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pro-text-muted) !important;
  background: var(--pro-surface-muted) !important;
  border-bottom: 1px solid var(--pro-border-strong) !important;
  white-space: nowrap;
}

table.data tbody td {
  padding: 0.95rem 1.1rem !important;
  color: var(--pro-text-secondary);
  border-bottom: 1px solid var(--pro-border);
  vertical-align: middle;
  transition:
    background var(--pro-dur) var(--pro-ease),
    color var(--pro-dur) var(--pro-ease),
    box-shadow var(--pro-dur) var(--pro-ease);
}

table.data tbody tr:last-child td {
  border-bottom: none;
}

table.data tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.9);
}

table.data tbody tr:hover td {
  background: var(--pro-row-hover) !important;
  color: var(--pro-text);
  box-shadow: inset 3px 0 0 var(--pro-primary);
}

.empty-state {
  padding: 2.25rem 1.25rem !important;
  color: var(--pro-text-muted);
}

/* Rich table headers (Requests, Clients, Operations, …) */
table.clients-table--rich thead th,
table.data thead th.rq-th,
.requests-page table.data thead th,
.operations-page table.data thead th,
.statistics-page table.data thead th,
.daytour-page table.dt-table thead th,
.vis-page table.vis-table thead th,
.services-page table.data thead th,
table.sgh-table thead th {
  background: var(--pro-surface-muted) !important;
  color: var(--pro-text-muted) !important;
  border-bottom: 1px solid var(--pro-border-strong) !important;
}

.finance-page table.finance-table thead th {
  background: var(--pro-surface-muted);
  color: var(--pro-text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--pro-border-strong);
}

.finance-page table.finance-table tbody tr:hover td {
  background: var(--pro-row-hover);
  box-shadow: inset 3px 0 0 var(--pro-primary);
}

/* —— Modern buttons —— */
.btn,
.icon-btn,
.list-pager__page,
.list-pager__nav,
.tab,
.ce-tab,
.itv-tab,
.finance-tabs .tab,
.tabs-settings .tab,
.op-view-btn,
.topbar-toggle-chip,
.modal-footer .btn,
.modal-footer [data-close-modal] {
  transition:
    background var(--pro-dur) var(--pro-ease),
    border-color var(--pro-dur) var(--pro-ease),
    box-shadow var(--pro-dur) var(--pro-ease),
    color var(--pro-dur) var(--pro-ease),
    transform var(--pro-dur) var(--pro-ease);
}

.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--pro-cancel-border);
  background: var(--pro-surface);
  color: var(--pro-text-secondary);
  box-shadow: var(--pro-shadow-sm);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #94a3b8;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--pro-focus);
}

/* Primary — brand green */
.btn-primary,
.topbar-actions #btn-primary-action,
.topbar-actions--requests #btn-primary-action {
  background: var(--pro-primary);
  border-color: var(--pro-primary-dim);
  color: var(--pro-primary-text);
  box-shadow: 0 1px 2px rgba(111, 154, 79, 0.22);
}

.btn-primary:hover:not(:disabled),
.topbar-actions #btn-primary-action:hover,
.topbar-actions--requests #btn-primary-action:hover {
  background: var(--pro-primary-hover);
  border-color: var(--pro-primary-dim);
  color: var(--pro-primary-text);
  box-shadow: 0 6px 18px rgba(126, 173, 90, 0.28);
}

/* Cancel / secondary — gray */
.btn-ghost,
.modal-footer .btn-ghost,
.modal-footer [data-close-modal].btn,
.modal-footer [data-close-modal].btn-ghost {
  background: var(--pro-cancel-bg);
  border-color: var(--pro-cancel-border);
  color: var(--pro-cancel-text);
  box-shadow: none;
}

.btn-ghost:hover:not(:disabled),
.modal-footer .btn-ghost:hover:not(:disabled),
.modal-footer [data-close-modal]:hover {
  background: var(--pro-cancel-hover);
  border-color: #94a3b8;
  color: var(--pro-text);
}

/* Delete — red */
.btn-danger {
  background: var(--pro-danger-soft);
  border-color: var(--pro-danger-border);
  color: var(--pro-danger);
}

.btn-danger:hover:not(:disabled) {
  background: var(--pro-danger);
  border-color: var(--pro-danger-hover);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}

.btn-sm,
.btn-compact {
  border-radius: 8px;
}

/* —— Tabs & nav (brand green active) —— */
.tab.is-active,
.ce-tab.is-active,
.itv-tab.is-active,
.finance-tabs .tab.is-active,
.tabs-settings .tab.is-active,
.op-view-btn.is-active {
  color: var(--pro-primary-text);
  border-bottom-color: var(--pro-primary);
  background: var(--pro-primary-soft);
}

.nav-item.is-active {
  color: var(--pro-primary-text);
  background: var(--pro-primary-soft);
  border-color: rgba(126, 173, 90, 0.45);
  box-shadow: inset 0 0 0 1px rgba(126, 173, 90, 0.2);
}

.nav-item.is-active .nav-item__icon {
  background: var(--pro-primary-soft);
  border-color: var(--pro-primary-dim);
  color: var(--pro-primary-text);
}

.list-pager__page.is-active {
  background: var(--pro-primary);
  border-color: var(--pro-primary-dim);
  color: var(--pro-primary-text);
  box-shadow: 0 2px 8px rgba(126, 173, 90, 0.28);
}

/* —— Forms —— */
input,
select,
textarea,
.inp-sm,
.inp-compact,
.select-compact {
  border-radius: 10px;
  border-color: var(--pro-cancel-border);
  background: var(--pro-surface);
}

input:focus,
select:focus,
textarea:focus,
.inp-sm:focus,
.inp-compact:focus,
.select-compact:focus {
  border-color: var(--pro-primary);
  box-shadow: var(--pro-focus);
}

/* —— Modal —— */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.modal-panel {
  border-radius: var(--pro-radius-lg);
  box-shadow: var(--pro-shadow-md);
}

.modal-header,
.modal-footer {
  padding: 0.85rem 1.15rem;
}

.modal-title {
  color: var(--pro-text);
}

.modal-footer .btn-primary {
  min-width: 5.5rem;
}

/* —— Communications & misc panels —— */
.gcom-filters {
  border-radius: var(--pro-radius);
  border-color: var(--pro-border);
}

.gcom-item.is-active {
  border-color: rgba(126, 173, 90, 0.35);
  background: #fff;
}

.gcom-item.is-active::before {
  background: var(--pro-primary);
}

.gcom-item:hover td,
.gcom-item:hover {
  background: var(--pro-row-hover);
}

.badge-confirmed {
  background: var(--pro-primary-soft);
  color: var(--pro-primary-dim);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  table.data tbody td,
  .grid-stats--dashboard .stat-card {
    transition: none !important;
  }

  .btn:hover:not(:disabled) {
    transform: none;
  }
}