/* Alasta v5.17.T136a — iOS-like UX HOTFIX, sidebar list nav, mail resizing
   Warstwa końcowa po T135: spójny charakter, mniej „przyciskowe” menu i delikatne animacje. */

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif !important;
  --alasta-font: var(--font) !important;
  --alasta-display: var(--font) !important;
  --ios-blue: #007aff;
  --ios-indigo: #5856d6;
  --ios-purple: #af52de;
  --ios-green: #34c759;
  --ios-mint: #00c7be;
  --ios-orange: #ff9500;
  --ios-red: #ff3b30;
  --ios-yellow: #ffcc00;
  --ios-gray-1: #8e8e93;
  --ios-gray-2: #aeaeb2;
  --ios-gray-3: #c7c7cc;
  --ios-gray-4: #d1d1d6;
  --ios-gray-5: #e5e5ea;
  --ios-gray-6: #f2f2f7;
  --ios-bg: #f5f5f7;
  --ios-surface: rgba(255,255,255,.86);
  --ios-surface-solid: #ffffff;
  --ios-surface-soft: rgba(248,248,252,.82);
  --ios-border: rgba(60,60,67,.14);
  --ios-border-strong: rgba(60,60,67,.22);
  --ios-text: #111827;
  --ios-muted: #6b7280;
  --ios-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 34px rgba(17,24,39,.08);
  --ios-shadow-soft: 0 10px 30px rgba(17,24,39,.06);
  --ios-radius: 18px;
  --ios-radius-sm: 12px;
  --ios-radius-lg: 24px;

  --bg: var(--ios-bg) !important;
  --surface: var(--ios-surface-solid) !important;
  --surface-2: var(--ios-surface) !important;
  --surface-3: var(--ios-gray-6) !important;
  --border: var(--ios-border) !important;
  --text: var(--ios-text) !important;
  --muted: var(--ios-muted) !important;
  --accent: var(--ios-blue) !important;
  --accent-2: #0066d6 !important;
  --accent-soft: rgba(0,122,255,.10) !important;
  --accent-glow: rgba(0,122,255,.24) !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;
}

body.alasta-ios,
body {
  background:
    radial-gradient(circle at 18% -10%, rgba(0,122,255,.12), transparent 34rem),
    radial-gradient(circle at 102% 8%, rgba(175,82,222,.10), transparent 28rem),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 42%, #f2f2f7 100%) !important;
  color: var(--ios-text) !important;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* MENU BOCZNE — wraca do formy listy, nie zestawu ciężkich buttonów */
.sidebar,
.side-nav {
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,247,251,.72)) !important;
  border-right: 1px solid var(--ios-border) !important;
  box-shadow: 12px 0 30px rgba(17,24,39,.035) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.sidebar .brand,
.sidebar-foot,
.user-box {
  border-color: var(--ios-border) !important;
}

.sidebar .brand-name {
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
}

.sidebar .nav-grouped {
  gap: 10px !important;
}

.sidebar .nav-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 8px 8px !important;
}

.sidebar .nav-group-head {
  min-height: 24px !important;
  padding: 12px 9px 5px !important;
  margin: 0 !important;
  opacity: .82;
}

.sidebar .nav-group-label {
  color: var(--ios-gray-1) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.sidebar .nav-group-dot {
  width: 7px !important;
  height: 7px !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.04) !important;
}

.sidebar .pill,
.sidebar button.pill,
.sidebar .nav-item,
.side-nav button {
  position: relative !important;
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 9px 10px 9px 13px !important;
  margin: 1px 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #3f4755 !important;
  font-size: 13.5px !important;
  font-weight: 660 !important;
  letter-spacing: -0.015em !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background-color .18s cubic-bezier(.2,.8,.2,1),
    color .18s cubic-bezier(.2,.8,.2,1),
    opacity .18s cubic-bezier(.2,.8,.2,1),
    padding-left .18s cubic-bezier(.2,.8,.2,1) !important;
}

.sidebar .pill::before,
.sidebar button.pill::before,
.sidebar .nav-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 99px;
  background: var(--ios-blue);
  opacity: 0;
  transform: scaleY(.45);
  transition: opacity .18s ease, transform .18s ease;
}

.sidebar .pill:hover,
.sidebar button.pill:hover,
.sidebar .nav-item:hover,
.side-nav button:hover {
  background: rgba(60,60,67,.07) !important;
  color: #111827 !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar .pill.active,
.sidebar button.pill.active,
.sidebar .nav-item.active,
.side-nav button.active,
.sidebar .pill[aria-current="page"] {
  background: rgba(0,122,255,.108) !important;
  color: var(--ios-blue) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 17px !important;
}

.sidebar .pill.active::before,
.sidebar button.pill.active::before,
.sidebar .nav-item.active::before,
.sidebar .pill[aria-current="page"]::before {
  opacity: 1;
  transform: scaleY(1);
}

.sidebar .pill .nav-icon,
.sidebar button.pill .nav-icon {
  opacity: .82;
  color: currentColor !important;
  transition: opacity .18s ease, transform .18s ease;
}

.sidebar .pill.active .nav-icon,
.sidebar button.pill.active .nav-icon,
.sidebar .pill:hover .nav-icon {
  opacity: 1;
}

.sidebar .nav-sep {
  height: 1px !important;
  margin: 10px 16px !important;
  background: var(--ios-border) !important;
  border: 0 !important;
}

.mail-nav-unread,
.nav-badge,
.badge.count {
  background: var(--ios-red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,59,48,.12) !important;
}

/* Karty, panele i tabele — nowoczesne, systemowe, jak iOS / macOS */
.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: 1px solid var(--ios-border) !important;
  background: var(--ios-surface) !important;
  border-radius: var(--ios-radius) !important;
  box-shadow: var(--ios-shadow-soft) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.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(--ios-shadow) !important;
}

.view.active,
section.view:not([hidden]) {
  animation: iosViewIn .26s cubic-bezier(.2,.8,.2,1) both;
}

.modal-card,
dialog[open] .mail-dialog-card,
.mail-dialog[open] .mail-dialog-card,
.mail-dialog-card,
.auth-card {
  animation: iosSheetIn .24s cubic-bezier(.16,1,.3,1) both;
}

.modal-backdrop,
dialog::backdrop,
.mail-dialog::backdrop {
  background: rgba(15,23,42,.28) !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  animation: iosFadeIn .18s ease both;
}

/* Przyciski — spokojniejsze rozmieszczenie i iOS-like system colors */
.section-actions,
.view-actions,
.view-header .actions,
.view-header > .actions,
.view-header > .section-actions,
.card-header .actions,
.card-header .section-actions,
.toolbar,
.view-toolbar,
.form-actions,
.modal-footer,
.dialog-footer,
dialog footer,
.mail-dialog-card > footer,
.sales-toolbar,
.integration-actions,
.admin-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.view-header,
.page-header,
.card-header,
.section-header {
  gap: 14px !important;
}

.btn, button.btn, .mail-btn, .iconbtn, button.iconbtn,
.action-btn, .toolbar button, .view-toolbar button,
button:not(.pill):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: 12px !important;
  border-color: var(--ios-border-strong) !important;
  font-weight: 720 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  transition:
    background-color .18s cubic-bezier(.2,.8,.2,1),
    border-color .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s cubic-bezier(.2,.8,.2,1),
    transform .14s cubic-bezier(.2,.8,.2,1),
    color .18s cubic-bezier(.2,.8,.2,1) !important;
}

.btn:hover, button.btn:hover, .mail-btn:hover, .iconbtn:hover, button.iconbtn:hover,
.action-btn:hover, .toolbar button:hover, .view-toolbar button:hover,
button:not(.pill):not(.nav-item):not(.tab):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(17,24,39,.08) !important;
}

.btn:active, button.btn:active, .mail-btn:active, .iconbtn:active,
.action-btn:active, .toolbar button:active, .view-toolbar button:active {
  transform: translateY(0) scale(.985) !important;
}

.btn.primary, .btn-primary, button.primary, .mail-btn-primary,
.btn-worker-new, .save-btn, .submit-btn, [data-action="save"], [type="submit"] {
  background: var(--ios-blue) !important;
  border-color: var(--ios-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0,122,255,.24) !important;
}

.btn.primary:hover, .btn-primary:hover, button.primary:hover, .mail-btn-primary:hover,
[type="submit"]:hover {
  background: #0066d6 !important;
  border-color: #0066d6 !important;
  box-shadow: 0 10px 26px rgba(0,122,255,.30) !important;
}

.btn.ghost, button.ghost, .mail-btn:not(.mail-btn-primary), .iconbtn,
button.secondary, .btn.secondary {
  background: rgba(255,255,255,.72) !important;
  color: #263244 !important;
}

.btn.danger, button.danger, .mail-btn-danger, .btn-danger, .delete-btn,
[data-action="delete"], .danger {
  color: var(--ios-red) !important;
  border-color: rgba(255,59,48,.24) !important;
  background: rgba(255,59,48,.08) !important;
}

/* Formularze */
.input, input, select, textarea,
.mail-rich-editor, [contenteditable="true"] {
  border-radius: 12px !important;
  border-color: var(--ios-border-strong) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.035) !important;
}

.input:focus, input:focus, select:focus, textarea:focus,
.mail-rich-editor:focus, [contenteditable="true"]:focus {
  border-color: var(--ios-blue) !important;
  box-shadow: 0 0 0 4px rgba(0,122,255,.16), inset 0 1px 2px rgba(0,0,0,.035) !important;
}

/* Segmenty / filtry */
.tabs, .tabbar, .filter-tabs, .subtabs, .segmented, .pill-tabs,
.mes-tabs, .picklist-filters, .sku-hist-filters, .worker-orders-tabs,
.psm-mode-tabs, .rcp-manual-tabs, .rcp-pay-mode-tabs, .mail-filter-switch,
[role="tablist"] {
  background: rgba(118,118,128,.12) !important;
  border: 1px solid rgba(118,118,128,.12) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  box-shadow: none !important;
}

.tab.active, .tab-btn.active, .filter-tab.active, .subtab.active,
.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,
[role="tab"][aria-selected="true"], [data-tab].active {
  background: #fff !important;
  color: var(--ios-blue) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04) !important;
}

/* Poczta — regulowane szerokości paneli */
#mail-app.mail-resizable .mail-workspace {
  grid-template-columns:
    minmax(210px, var(--mail-rail-w, 260px))
    7px
    minmax(280px, var(--mail-list-w, 390px))
    7px
    minmax(360px, 1fr) !important;
  position: relative;
}

#mail-app.mail-resizable .mail-rail { grid-column: 1 !important; border-right: 0 !important; }
#mail-app.mail-resizable .mail-resizer-rail { grid-column: 2 !important; }
#mail-app.mail-resizable .mail-list-pane { grid-column: 3 !important; border-right: 0 !important; }
#mail-app.mail-resizable .mail-resizer-list { grid-column: 4 !important; }
#mail-app.mail-resizable .mail-reader { grid-column: 5 !important; }

.mail-resizer {
  position: relative;
  z-index: 5;
  align-self: stretch;
  width: 7px;
  min-width: 7px;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  border-radius: 999px;
}

.mail-resizer::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  border-radius: 999px;
  background: rgba(60,60,67,.18);
  transition: width .16s ease, left .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.mail-resizer:hover::before,
.mail-resizer.is-dragging::before {
  left: 2px;
  width: 3px;
  background: var(--ios-blue);
  box-shadow: 0 0 0 4px rgba(0,122,255,.11);
}

.mail-resizer::after {
  content: '⋮';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(60,60,67,.26);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity .16s ease;
}

.mail-resizer:hover::after,
.mail-resizer.is-dragging::after { opacity: 1; }

body.mail-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

body.mail-resizing iframe,
body.mail-resizing .mail-rich-editor { pointer-events: none !important; }

.mail-compose-dialog,
.mail-dialog-card.mail-resizable-dialog,
dialog .mail-dialog-card {
  resize: horizontal;
  overflow: auto;
  min-width: min(560px, calc(100vw - 30px));
  max-width: min(1180px, calc(100vw - 24px));
}

.mail-compose-dialog {
  width: min(920px, calc(100vw - 28px));
}

.mail-dialog-card > footer .mail-footer-spacer { flex: 1 1 auto !important; }

@keyframes iosViewIn {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes iosSheetIn {
  from { opacity: 0; transform: translateY(14px) scale(.982); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes iosFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.dark,
:root[data-theme="dark"] {
  --ios-bg: #0b0d12;
  --ios-surface: rgba(28,28,30,.78);
  --ios-surface-solid: #1c1c1e;
  --ios-surface-soft: rgba(44,44,46,.78);
  --ios-border: rgba(255,255,255,.12);
  --ios-border-strong: rgba(255,255,255,.18);
  --ios-text: #f5f5f7;
  --ios-muted: #a1a1aa;
  --bg: #0b0d12 !important;
  --surface: #1c1c1e !important;
  --text: #f5f5f7 !important;
  --muted: #a1a1aa !important;
}

body.dark .sidebar,
body.dark .side-nav {
  background: linear-gradient(180deg, rgba(28,28,30,.82), rgba(17,24,39,.74)) !important;
  border-right-color: var(--ios-border) !important;
}

body.dark .sidebar .pill,
body.dark .sidebar button.pill,
body.dark .sidebar .nav-item {
  color: #d1d5db !important;
}

body.dark .sidebar .pill:hover,
body.dark .sidebar button.pill:hover,
body.dark .sidebar .nav-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

body.dark .sidebar .pill.active,
body.dark .sidebar button.pill.active,
body.dark .sidebar .nav-item.active {
  background: rgba(10,132,255,.18) !important;
  color: #64b5ff !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: var(--ios-surface) !important;
  border-color: var(--ios-border) !important;
}

body.dark .input, body.dark input, body.dark select, body.dark textarea,
body.dark .mail-rich-editor, body.dark [contenteditable="true"] {
  background: rgba(28,28,30,.88) !important;
  border-color: var(--ios-border-strong) !important;
  color: var(--ios-text) !important;
}

@media (max-width: 1180px) {
  #mail-app.mail-resizable .mail-workspace {
    grid-template-columns: minmax(190px, var(--mail-rail-w, 220px)) 7px minmax(300px, 1fr) !important;
  }
  #mail-app.mail-resizable .mail-resizer-list,
  #mail-app.mail-resizable .mail-reader { display: none !important; }
  #mail-app.mail-resizable .mail-list-pane { grid-column: 3 !important; }
}

@media (max-width: 720px) {
  .sidebar .pill,
  .sidebar button.pill { min-height: 42px !important; }
  .card, .table-card, .settings-card, .panel, [class*="-card"], [class*="-panel"] {
    border-radius: 16px !important;
  }
  #mail-app.mail-resizable .mail-workspace { grid-template-columns: 1fr !important; }
  #mail-app.mail-resizable .mail-rail,
  #mail-app.mail-resizable .mail-resizer { display: none !important; }
  #mail-app.mail-resizable .mail-list-pane,
  #mail-app.mail-resizable .mail-reader { grid-column: 1 !important; }
}

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


/* T136a HOTFIX: nie animuj ekranu bootowania i ogranicz koszt pierwszego renderu */
body.state-boot .view,
body.state-boot section.view,
body.state-boot .modal-card,
body.state-boot .card {
  animation: none !important;
}