/* Alasta v5.17.T133 — unified UX layer inspired by RCP */

:root {
  --alasta-font: "Segoe UI Variable", "Aptos", "Segoe UI", "SF Pro Text", system-ui, sans-serif;
  --alasta-display: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --alasta-bg: #f3f6fa;
  --alasta-ink: #0f172a;
  --alasta-muted: #64748b;
  --alasta-line: #dbe4ef;
  --alasta-card: rgba(255,255,255,.92);
  --alasta-card-solid: #ffffff;
  --alasta-radius: 18px;
  --alasta-radius-sm: 12px;
  --alasta-shadow: 0 18px 48px rgba(15, 23, 42, .08);
  --alasta-shadow-soft: 0 8px 26px rgba(15, 23, 42, .07);
  --alasta-blue: #2563eb;
  --alasta-blue-soft: #eff6ff;
  --alasta-green: #15803d;
  --alasta-green-soft: #ecfdf3;
  --alasta-amber: #d97706;
  --alasta-amber-soft: #fff7ed;
}

html, body,
button, input, select, textarea, dialog,
.input, .btn, .pill, .card, .view, .modal-body,
.mail-shell, .rcp-view, .mes-view {
  font-family: var(--alasta-font) !important;
  font-feature-settings: "cv02", "cv03", "cv04";
}

body {
  color: var(--alasta-ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(37,99,235,.08), transparent 30vw),
    radial-gradient(circle at 92% 0%, rgba(21,128,61,.075), transparent 28vw),
    linear-gradient(180deg, #f8fafc 0%, var(--alasta-bg) 100%) !important;
}

h1, h2, h3,
.view-header h1,
.page-title,
.card-header h3,
.modal-title,
.mail-toolbar-brand strong,
.mail-list-head strong,
.mail-header-main h1 {
  font-family: var(--alasta-display) !important;
  letter-spacing: -.025em;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  border-right: 1px solid rgba(203,213,225,.78) !important;
  box-shadow: 18px 0 46px rgba(15,23,42,.045);
}

.brand {
  border-bottom: 1px solid rgba(203,213,225,.72);
}

.brand-logo-mark {
  filter: drop-shadow(0 8px 16px rgba(15,23,42,.16));
}

.brand-name {
  font-family: var(--alasta-display) !important;
  letter-spacing: -.05em;
}

.nav-group-head {
  opacity: .92;
  margin-top: 14px;
}

.pill {
  border-radius: 13px !important;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

.pill:hover {
  transform: translateX(2px);
  background: rgba(37,99,235,.07) !important;
}

.pill.active {
  background: linear-gradient(135deg, #eef5ff, #ffffff) !important;
  color: #1d4ed8 !important;
  box-shadow: inset 3px 0 #2563eb, 0 10px 24px rgba(37,99,235,.12) !important;
}

.topbar {
  background: rgba(248,250,252,.84) !important;
  border-bottom: 1px solid rgba(203,213,225,.75) !important;
  backdrop-filter: blur(16px);
}

.page-title {
  color: #14213a;
  font-weight: 760;
}

.view {
  animation: alasta-view-in .22s ease both;
}

@keyframes alasta-view-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header {
  margin-bottom: 18px;
}

.view-header h1 {
  font-size: clamp(24px, 2.1vw, 34px) !important;
  line-height: 1.05;
}

.view-subtitle,
.muted,
.small {
  color: var(--alasta-muted);
}

.card,
.table-card,
.settings-card,
.kpi-card,
.rcp-card,
.mes-card,
.integration-card,
.system-connection-card,
.t130-sales-card,
.t130-chart-card {
  border: 1px solid rgba(203,213,225,.78) !important;
  border-radius: var(--alasta-radius) !important;
  background: var(--alasta-card) !important;
  box-shadow: var(--alasta-shadow-soft) !important;
  backdrop-filter: blur(10px);
}

.card-header {
  border-bottom-color: rgba(226,232,240,.88) !important;
}

.btn,
.iconbtn,
.mes-tab,
.rcp-tab,
.mail-btn,
.mail-icon-btn {
  border-radius: 12px !important;
  font-weight: 720 !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

.btn:hover,
.iconbtn:hover,
.mes-tab:hover,
.rcp-tab:hover,
.mail-btn:hover,
.mail-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
}

.btn.primary,
.mail-btn-primary,
button.primary {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  border-color: #1e293b !important;
  color: #fff !important;
}

.btn.ghost,
.mes-tab,
.rcp-tab {
  background: rgba(255,255,255,.76) !important;
}

.input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  border-radius: 12px !important;
  border-color: #d7e0eb !important;
  background-color: rgba(255,255,255,.95) !important;
  color: #172033 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
  outline: none !important;
}

table,
.table-wrap,
.data-table {
  border-radius: var(--alasta-radius-sm);
}

.table-wrap [role="row"],
tbody tr,
.table-row {
  transition: background .14s ease, transform .14s ease;
}

tbody tr:hover,
.table-row:hover {
  background: #f8fafc;
}

.status-pill,
.role-badge,
.tag,
.chip,
.badge {
  border-radius: 999px !important;
  font-weight: 760 !important;
}

dialog,
.modal-content,
.mail-dialog-card {
  border-radius: 20px !important;
}

.rcp-tabs,
.mes-tabs,
.items-action-tabs {
  padding: 6px !important;
  border: 1px solid #dbe4ef !important;
  border-radius: 16px !important;
  background: rgba(226,232,240,.58) !important;
}

.rcp-tabs .active,
.mes-tabs .active,
.mes-tab.active {
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.11) !important;
}

.mail-shell {
  --mail-ink: var(--alasta-ink);
  --mail-muted: var(--alasta-muted);
  --mail-line: var(--alasta-line);
  --mail-warm: var(--alasta-amber);
  --mail-warm-soft: var(--alasta-amber-soft);
  background:
    radial-gradient(circle at 5% 0%, rgba(217,119,6,.08), transparent 31vw),
    radial-gradient(circle at 96% 12%, rgba(37,99,235,.08), transparent 27vw),
    #f3f6fa !important;
}

.mail-toolbar,
.mail-rail,
.mail-list-pane,
.mail-reader {
  border-color: rgba(203,213,225,.82) !important;
}

.mail-toolbar {
  height: 68px;
  box-shadow: 0 10px 34px rgba(15,23,42,.06);
}

.mail-workspace {
  gap: 10px;
  padding: 10px;
}

.mail-rail,
.mail-list-pane,
.mail-reader {
  border: 1px solid rgba(203,213,225,.82) !important;
  border-radius: 18px;
  box-shadow: var(--alasta-shadow-soft);
  overflow: hidden;
}

.mail-list-pane,
.mail-reader {
  background: rgba(255,255,255,.94) !important;
}

.mail-message.active {
  background: linear-gradient(90deg, #fff7ed, #ffffff) !important;
}

.mail-message.unread {
  background: #f8fbff !important;
}

.mail-signature-preview {
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  line-height: 1.5;
}

.mail-signature-preview:empty::before {
  content: "np. Pozdrawiam,\\A Jan Kowalski\\A Alasta";
  white-space: pre-line;
  color: #94a3b8;
}

.alasta-mail-signature {
  margin-top: 14px;
  color: #475569;
}

body.dark {
  --alasta-bg: #0f172a;
  --alasta-ink: #e5edf7;
  --alasta-muted: #9aa8bb;
  --alasta-line: #334155;
  --alasta-card: rgba(15,23,42,.88);
  --alasta-card-solid: #172033;
}

body.dark .sidebar,
body.dark .topbar,
body.dark .card,
body.dark .table-card,
body.dark .settings-card {
  background: rgba(15,23,42,.92) !important;
  border-color: rgba(51,65,85,.88) !important;
}

body.dark .input,
body.dark input,
body.dark select,
body.dark textarea {
  background-color: rgba(15,23,42,.9) !important;
  border-color: #334155 !important;
  color: #e5edf7 !important;
}

body.dark .pill.active {
  background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(15,23,42,.95)) !important;
  color: #bfdbfe !important;
}

@media (max-width: 900px) {
  .view-header {
    gap: 12px;
  }
  .card,
  .table-card,
  .settings-card {
    border-radius: 15px !important;
  }
  .mail-workspace {
    padding: 6px;
    gap: 6px;
  }
}