/* Alasta v5.17.T135 — jednolity UX w stylu MES
   Cel: każdy moduł ma tę samą typografię, rytm, kolory i „pillsowy” charakter MES. */

:root {
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  --alasta-font: var(--font) !important;
  --alasta-display: var(--font) !important;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace !important;

  --mes-bg: #f8fafc;
  --mes-bg-2: #f1f5f9;
  --mes-surface: #ffffff;
  --mes-surface-soft: #f8fafc;
  --mes-border: #e2e8f0;
  --mes-border-strong: #cbd5e1;
  --mes-text: #0f172a;
  --mes-text-2: #1e293b;
  --mes-muted: #64748b;
  --mes-muted-2: #94a3b8;
  --mes-accent: #0ea5e9;
  --mes-accent-2: #0284c7;
  --mes-accent-soft: #e0f2fe;
  --mes-accent-border: #7dd3fc;
  --mes-green: #10b981;
  --mes-green-soft: #ecfdf5;
  --mes-green-border: #86efac;
  --mes-amber: #f59e0b;
  --mes-amber-soft: #fffbeb;
  --mes-red: #ef4444;
  --mes-red-soft: #fef2f2;
  --mes-radius-sm: 8px;
  --mes-radius: 10px;
  --mes-radius-lg: 14px;
  --mes-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
  --mes-shadow-hover: 0 8px 20px rgba(15,23,42,.09), 0 2px 6px rgba(14,165,233,.08);

  --bg: var(--mes-bg) !important;
  --surface: var(--mes-surface) !important;
  --surface-2: var(--mes-surface) !important;
  --surface-3: var(--mes-bg-2) !important;
  --border: var(--mes-border) !important;
  --text: var(--mes-text) !important;
  --muted: var(--mes-muted) !important;
  --accent: var(--mes-accent) !important;
  --accent-2: var(--mes-accent-2) !important;
  --accent-soft: var(--mes-accent-soft) !important;
  --accent-glow: rgba(14,165,233,.22) !important;
}

html,
body,
body *:not(code):not(pre):not(kbd):not(samp):not(.mono):not(.monospace):not(.sku):not(.sku-code):not(.barcode-text) {
  font-family: var(--font) !important;
}

code, pre, kbd, samp,
.mono, .monospace, .sku, .sku-code, .barcode-text,
[class*="code"], [class*="Code"], .rcp-card-code, .mes-order-pill-code {
  font-family: var(--mono) !important;
}

body {
  color: var(--mes-text) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(14,165,233,.08), transparent 32rem),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  letter-spacing: -0.006em;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

/* Ramy aplikacji — mniej „różnych aplikacji”, więcej jednego panelu operacyjnego */
.app, .main, main, .content, .view, .page, .workspace, .app-main,
#app, #main, #content {
  color: var(--mes-text) !important;
}

.topbar, .app-topbar, .header, .view-header, .page-header,
.card-header, .table-head, .section-header, .settings-header {
  letter-spacing: -0.01em;
}

.view-header, .page-header {
  border-bottom: 1px solid rgba(226,232,240,.82) !important;
}

.view-header h1, .view-header h2, .page-header h1, .page-header h2,
.card h1, .card h2, .card h3, h1, h2, h3 {
  color: var(--mes-text) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.028em !important;
}

.view-header p, .page-header p, .muted, small, .hint, .subtle,
.card small, .table-card small, .settings-card small {
  color: var(--mes-muted) !important;
}

/* Karty / panele w każdym module */
.card, .table-card, .settings-card, .panel, .box, .widget, .stat-card,
.kpi-card, .metric-card, .summary-card, .modal-card, .dialog-card,
.sales-card, .sales-panel, .integration-card, .admin-card,
.rcp-panel, .rcp-card, .rcp-reader-card, .mail-reader, .mail-list-pane,
.mail-rail, .mail-toolbar, .mail-dialog-card,
.mes-stat-card, .worker-order-card, .sku-hist-stat, .emp-cal-summary,
[class*="-card"], [class*="-panel"] {
  border-color: var(--mes-border) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92)) !important;
  border-radius: var(--mes-radius-lg) !important;
  box-shadow: var(--mes-shadow) !important;
}

.card:hover, .table-card:hover, .settings-card:hover, .panel:hover,
.sales-card:hover, .integration-card:hover, .admin-card:hover,
.rcp-card:hover, .worker-order-card:hover, .mail-message:hover,
[class*="-card"]:hover {
  box-shadow: var(--mes-shadow-hover) !important;
}

/* Tabele — ten sam „MESowy” rytm: jasne nagłówki, delikatne linie */
table, .table, .data-table, .mes-crud-table, .rcp-workers-table-v2,
.rcp-backups-table, .sales-table, .integrations-table {
  border-color: var(--mes-border) !important;
  color: var(--mes-text) !important;
}

thead, .table-header, .mes-crud-head, tr.table-header,
.table-card thead tr, .data-table thead tr {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
}

th, .th, .table-header > *, .mes-crud-head > *, .table-head-cell {
  color: var(--mes-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
}

td, .td, .table-row > *, .mes-crud-row > * {
  border-color: rgba(226,232,240,.92) !important;
}

tr:hover, .table-row:hover, .mes-crud-row:hover {
  background: rgba(240,249,255,.55) !important;
}

/* Formularze */
.input, input, select, textarea,
.mail-rich-editor, [contenteditable="true"] {
  background: #fff !important;
  border-color: var(--mes-border-strong) !important;
  color: var(--mes-text) !important;
  border-radius: var(--mes-radius) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.035) !important;
}

.input:focus, input:focus, select:focus, textarea:focus,
.mail-rich-editor:focus, [contenteditable="true"]:focus {
  border-color: var(--mes-accent) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18), inset 0 1px 2px rgba(15,23,42,.035) !important;
  outline: none !important;
}

label, .label, .field-label, .form-label {
  color: var(--mes-text-2) !important;
  font-weight: 700 !important;
}

/* Przyciski — charakter MES: sky accent, miękkie krawędzie, lekki lift */
.btn, button.btn, .mail-btn, .iconbtn, button.iconbtn,
.action-btn, .toolbar button, .view-toolbar button,
button:not(.nav-item):not(.tab):not(.mes-tab):not(.picklist-tab):not(.sku-hist-tab):not(.worker-orders-tab):not(.psm-tab):not(.rcp-manual-tab):not(.rcp-pay-mode-tab) {
  border-radius: var(--mes-radius) !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  border-color: var(--mes-border-strong) !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .12s ease !important;
}

.btn:hover, button.btn:hover, .mail-btn:hover, .iconbtn:hover, button.iconbtn:hover,
.action-btn:hover, .toolbar button:hover, .view-toolbar button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(14,165,233,.12) !important;
}

.btn.primary, .btn-primary, button.primary, .mail-btn-primary,
.btn-worker-new, .save-btn, .submit-btn, [data-action="save"], [type="submit"] {
  background: linear-gradient(135deg, var(--mes-accent), #38bdf8) !important;
  border-color: var(--mes-accent-2) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.22) !important;
}

.btn.primary:hover, .btn-primary:hover, button.primary:hover, .mail-btn-primary:hover,
[type="submit"]:hover {
  background: linear-gradient(135deg, var(--mes-accent-2), var(--mes-accent)) !important;
  box-shadow: 0 8px 22px rgba(14,165,233,.28) !important;
}

.btn.danger, button.danger, .mail-btn-danger, .btn-danger, .delete-btn,
[data-action="delete"], .danger {
  border-color: #fecaca !important;
  background: var(--mes-red-soft) !important;
  color: #b91c1c !important;
}

.btn.danger:hover, button.danger:hover, .mail-btn-danger:hover, .btn-danger:hover,
.delete-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

/* Zakładki/filtry — jeden wspólny wzór z panelu MES */
.mes-tabs, .picklist-filters, .sku-hist-filters, .worker-orders-tabs,
.psm-mode-tabs, .rcp-manual-tabs, .rcp-pay-mode-tabs, .mail-filter-switch,
.tabs, .tabbar, .filter-tabs, .subtabs, .segmented, .pill-tabs,
[role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
  padding: 5px !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border: 1px solid rgba(203,213,225,.72) !important;
  border-radius: var(--mes-radius) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.045) !important;
}

.mes-tab, .picklist-tab, .sku-hist-tab, .worker-orders-tab,
.psm-tab, .rcp-manual-tab, .rcp-pay-mode-tab, .mail-filter-switch button,
.tab, .tab-btn, .filter-tab, .subtab, [role="tab"], [data-tab] {
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}

.mes-tab:hover:not(.active), .picklist-tab:hover:not(.active), .sku-hist-tab:hover:not(.active),
.worker-orders-tab:hover:not(.active), .psm-tab:hover:not(.active), .rcp-manual-tab:hover:not(.active),
.rcp-pay-mode-tab:hover:not(.active), .mail-filter-switch button:hover:not(.active),
.tab:hover:not(.active), .tab-btn:hover:not(.active), .filter-tab:hover:not(.active), .subtab:hover:not(.active),
[role="tab"]:hover:not(.active), [data-tab]:hover:not(.active) {
  background: rgba(255,255,255,.72) !important;
  color: #1e293b !important;
  transform: translateY(-1px);
}

.mes-tab.active, .picklist-tab.active, .sku-hist-tab.active, .worker-orders-tab.active,
.psm-tab.active, .rcp-manual-tab.active, .rcp-pay-mode-tab.active, .mail-filter-switch button.active,
.tab.active, .tab-btn.active, .filter-tab.active, .subtab.active,
[role="tab"][aria-selected="true"], [data-tab].active {
  background: #fff !important;
  color: var(--mes-accent) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(14,165,233,.15), 0 1px 2px rgba(15,23,42,.05) !important;
}

/* Pastylki, statusy i liczniki */
.pill, .badge, .tag, .chip, .status, .count, .tab-count, .sku-hist-tab-count,
.mail-account b, .mail-folder b, .nav-badge {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

.pill.active, .badge.active, .chip.active {
  background: var(--mes-accent-soft) !important;
  color: #0369a1 !important;
  border-color: var(--mes-accent-border) !important;
}

/* Sidebar i nawigacja — spójny rytm, bez innych czcionek */
.sidebar, .nav, .nav-group, .nav-item, .side-nav, .mobile-nav {
  font-family: var(--font) !important;
}

.nav-item, .sidebar button, .side-nav button {
  border-radius: var(--mes-radius) !important;
  font-weight: 700 !important;
}

.nav-item.active, .sidebar button.active, .side-nav button.active {
  background: linear-gradient(135deg, var(--mes-accent-soft), #fff) !important;
  color: #0369a1 !important;
  border-color: var(--mes-accent-border) !important;
}

/* Mail, RCP, Sprzedaż — nadpisanie wcześniejszych lokalnych „charakterów” */
.mail-app, .mail-workspace, .mail-toolbar, .mail-message, .mail-reader,
.rcp-root, .rcp-panel, .rcp-card, .sales-dashboard, .sales-card,
.integrations-view, .admin-view {
  font-family: var(--font) !important;
  color: var(--mes-text) !important;
}

.mail-message.active, .rcp-card-row.is-today, .selected, .is-selected {
  background: linear-gradient(90deg, #f0f9ff, #ffffff) !important;
  border-color: var(--mes-accent-border) !important;
}

.mail-logo, .brand-mark, .app-logo {
  background: linear-gradient(135deg, #0f172a, #334155) !important;
  color: #fff !important;
}

/* Wartości liczbowe jak w MES — mocne, tabularne, ale bez innej rodziny fontu */
.metric-value, .stat-value, .kpi-value, .mes-stat-card-val,
.sales-metric-value, .rcp-stat-value, .mail-count, .value-big {
  font-family: var(--font) !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.035em !important;
  color: var(--mes-text) !important;
}

/* Dark theme spójny z MES, ale nie przebarwia każdego modułu osobno */
body.dark,
:root[data-theme="dark"] {
  --mes-bg: #0f172a;
  --mes-bg-2: #111827;
  --mes-surface: #172033;
  --mes-surface-soft: #1e293b;
  --mes-border: #334155;
  --mes-border-strong: #475569;
  --mes-text: #e5edf7;
  --mes-text-2: #f1f5f9;
  --mes-muted: #94a3b8;
  --mes-muted-2: #64748b;
}

body.dark {
  background:
    radial-gradient(circle at 12% 0%, rgba(14,165,233,.12), transparent 32rem),
    linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

body.dark .card, body.dark .table-card, body.dark .settings-card, body.dark .panel,
body.dark .box, body.dark .widget, body.dark .stat-card, body.dark .kpi-card,
body.dark .metric-card, body.dark .summary-card, body.dark .modal-card,
body.dark .dialog-card, body.dark .sales-card, body.dark .integration-card,
body.dark .admin-card, body.dark .rcp-panel, body.dark .rcp-card,
body.dark .mail-reader, body.dark .mail-list-pane, body.dark .mail-rail,
body.dark .mail-toolbar, body.dark [class*="-card"], body.dark [class*="-panel"] {
  background: linear-gradient(135deg, rgba(23,32,51,.98), rgba(15,23,42,.92)) !important;
  border-color: var(--mes-border) !important;
  color: var(--mes-text) !important;
}

body.dark .mes-tabs, body.dark .picklist-filters, body.dark .sku-hist-filters,
body.dark .worker-orders-tabs, body.dark .psm-mode-tabs, body.dark .rcp-manual-tabs,
body.dark .rcp-pay-mode-tabs, body.dark .mail-filter-switch, body.dark .tabs,
body.dark .tabbar, body.dark .filter-tabs, body.dark .subtabs, body.dark [role="tablist"] {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  border-color: #334155 !important;
}

body.dark .mes-tab.active, body.dark .picklist-tab.active, body.dark .sku-hist-tab.active,
body.dark .worker-orders-tab.active, body.dark .psm-tab.active, body.dark .rcp-manual-tab.active,
body.dark .rcp-pay-mode-tab.active, body.dark .mail-filter-switch button.active,
body.dark .tab.active, body.dark .tab-btn.active, body.dark .filter-tab.active,
body.dark .subtab.active, body.dark [role="tab"][aria-selected="true"], body.dark [data-tab].active {
  background: #172033 !important;
  color: #7dd3fc !important;
}

body.dark .input, body.dark input, body.dark select, body.dark textarea,
body.dark .mail-rich-editor, body.dark [contenteditable="true"] {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: var(--mes-text) !important;
}

@media (max-width: 720px) {
  .card, .table-card, .settings-card, .panel, [class*="-card"], [class*="-panel"] {
    border-radius: 12px !important;
  }
  .mes-tabs, .picklist-filters, .sku-hist-filters, .worker-orders-tabs,
  .psm-mode-tabs, .rcp-manual-tabs, .rcp-pay-mode-tabs, .mail-filter-switch,
  .tabs, .tabbar, .filter-tabs, .subtabs, [role="tablist"] {
    gap: 4px !important;
    padding: 4px !important;
  }
}