/* ================================================================
   Proksef Druki Design System v1.0 (port z Proksef)
   Clean · Professional · Light
   Accent: #3D5139 (Forest Green)
   ================================================================ */

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --accent:        #3D5139;
  --accent-light:  #eef1ee;
  --accent-mid:    #c5d0c3;
  --accent-hover:  #314430;
  --accent-text:   #ffffff;

  /* Neutrals */
  --bg:            #f5f5f3;
  --bg-card:       #ffffff;
  --bg-sidebar:    #ffffff;
  --bg-hover:      #f0f0ee;
  --border:        #e5e5e3;
  --border-light:  #f0f0ee;

  /* Text */
  --text-1:        #1a1a18;
  --text-2:        #4a4a47;
  --text-3:        #8a8a85;
  --text-4:        #b0b0aa;

  /* Semantic */
  --green:         #3D5139;
  --green-bg:      #eef1ee;
  --red:           #c0392b;
  --red-bg:        #fdf2f2;
  --amber:         #b45309;
  --amber-bg:      #fffbeb;
  --blue:          #1d4ed8;
  --blue-bg:       #eff6ff;

  /* Layout */
  --sidebar-w:     220px;
  --topbar-h:      56px;
  --radius:        10px;
  --radius-sm:     6px;
  --radius-lg:     16px;
  --radius-pill:   999px;

  /* Shadow */
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05);
  --shadow:        0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:     0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);

  /* Font */
  --font:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'DM Mono', 'Fira Code', monospace;
}

html { font-size: 15px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }

/* ── App Shell ─────────────────────────────────────────────────── */
.os-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  max-height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-header {
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-1);
  margin-bottom: 12px;
}
.sidebar-title span { color: var(--accent); }

.brain-search {
  position: relative;
}
.brain-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 12px;
  pointer-events: none;
}
.brain-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 30px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-1);
  font-size: 13px;
  outline: none;
  transition: border .15s;
}
.brain-search input:focus {
  border-color: var(--accent-mid);
  background: #fff;
}
.brain-search input::placeholder { color: var(--text-3); }

.tenant-chip {
  margin: 8px 16px 4px;
  padding: 8px 10px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.tenant-chip-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3);
  margin-bottom: 1px;
}
.tenant-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* Nav */
.sidebar-nav { flex: 1; padding: 8px 0; }

.nav-group { margin-bottom: 4px; }

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-4);
  padding: 10px 18px 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  margin: 1px 8px;
  transition: background .12s, color .12s;
  position: relative;
}
.nav-link i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  flex-shrink: 0;
  transition: color .12s;
}
.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.nav-link:hover i { color: var(--text-2); }
.nav-link.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.nav-link.active i { color: var(--accent); }

.nav-count {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-bg);
  color: var(--red);
}
.nav-count.green { background: var(--green-bg); color: var(--green); }

/* Sidebar Footer */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
}

.theme-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-3);
}
.theme-toggle-wrap:hover { background: var(--bg-hover); }
.theme-toggle-label { flex: 1; }
.toggle-track {
  width: 28px; height: 16px;
  background: var(--border);
  border-radius: var(--radius-pill);
  position: relative;
}
.toggle-thumb {
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px; left: 2px;
  transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
}
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; min-width: 0; }
.user-name-text {
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role-text { font-size: 11px; color: var(--text-3); }
.user-logout {
  color: var(--text-3);
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.user-logout:hover { color: var(--red); background: var(--red-bg); }

/* ── Main Wrapper ──────────────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* ── Topbar ────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  position: sticky; top: 0; z-index: 50;
}

.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}
.topbar-crumb-sep { font-size: 10px; }
.topbar-crumb.current {
  font-weight: 600;
  color: var(--text-1);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--accent-light);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  transition: background .15s;
}
.ai-pill:hover { background: var(--accent-mid); }
.ai-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.3); }
}

.topbar-btn {
  width: 34px; height: 34px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color .15s, background .15s;
}
.topbar-btn:hover { background: var(--bg-hover); border-color: var(--accent-mid); }
.notif-dot {
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  position: absolute;
  top: 5px; right: 5px;
  border: 1.5px solid #fff;
}

.topbar-user {
  display: flex; align-items: center; gap: 8px;
}
.topbar-user-name { font-size: 13px; font-weight: 600; color: var(--text-1); text-align: right; }
.topbar-user-company { font-size: 11px; color: var(--text-3); text-align: right; }
.topbar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── Page Content ──────────────────────────────────────────────── */
.page-content, .main-content {
  flex: 1;
  padding: 28px 40px;
}

/* ── Page Header ───────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.page-header-left h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--text-1);
  margin-bottom: 3px;
}
.page-header-left p {
  font-size: 13.5px;
  color: var(--text-3);
}
.page-header-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}
.card-subtitle {
  font-size: 12px; color: var(--text-3);
  margin-bottom: 16px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.stat-label {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-3);
  margin-bottom: 8px;
}
.stat-value {
  font-size: 26px; font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text-1);
  line-height: 1;
}
.stat-change {
  font-size: 12px; margin-top: 6px;
  color: var(--text-3);
}
.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--red); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600;
  border: none; cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--text-1);
  color: #fff;
}
.btn-primary:hover { background: #2a2a28; }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-1);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent-mid); }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-hover); }

.btn-danger {
  background: var(--red);
  color: #fff;
}
.btn-danger:hover { background: #a93226; }
.btn-sm { padding: 5px 14px; font-size: 12.5px; }
.btn-xs { padding: 3px 10px; font-size: 11.5px; }
.btn i { font-size: 12px; }

/* ── Tables ────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.table-search {
  position: relative; flex: 1; max-width: 280px;
}
.table-search i {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3); font-size: 12px; pointer-events: none;
}
.table-search input {
  width: 100%; height: 34px; padding: 0 10px 0 30px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg); color: var(--text-1);
  font-size: 13px; outline: none;
  transition: border .15s;
}
.table-search input:focus { border-color: var(--accent-mid); background: #fff; }

table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-3);
  padding: 10px 18px;
  text-align: left;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background .1s;
}
tbody tr:hover { background: #fafaf8; }
tbody tr:last-child { border-bottom: none; }
tbody td {
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--text-1);
  vertical-align: middle;
}

/* ── Badges / Pills ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.badge-green  { background: var(--green-bg); color: var(--green); }
.badge-red    { background: var(--red-bg); color: var(--red); }
.badge-amber  { background: var(--amber-bg); color: var(--amber); }
.badge-blue   { background: var(--blue-bg); color: var(--blue); }
.badge-gray   { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
.badge-accent { background: var(--accent-light); color: var(--accent); }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}
.form-control {
  width: 100%; height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-1);
  font-size: 14px; font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
.form-control:focus { border-color: var(--accent-mid); background: #fff; }
.form-control::placeholder { color: var(--text-4); }
textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; }
select.form-control { appearance: none; cursor: pointer; }
.form-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ── Alert banners ─────────────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-bottom: 16px;
}
.alert-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--accent-mid); }
.alert-danger   { background: var(--red-bg); color: var(--red); border: 1px solid #f5c6c3; }
.alert-warning  { background: var(--amber-bg); color: var(--amber); border: 1px solid #fcd34d; }
.alert-info     { background: var(--blue-bg); color: var(--blue); border: 1px solid #bfdbfe; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 20px;
}
.tab-link {
  padding: 8px 16px;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.tab-link:hover { color: var(--text-1); }
.tab-link.active {
  color: var(--text-1); font-weight: 600;
  border-bottom-color: var(--text-1);
}

/* ── Empty State ───────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.empty-state-icon { font-size: 36px; color: var(--text-4); margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; color: var(--text-3); max-width: 300px; }

/* ── Livewire wrap ─────────────────────────────────────────────── */
.kp-livewire-wrap { width: 100%; }

/* ── Flash messages ────────────────────────────────────────────── */
.flash-success {
  background: var(--green-bg); border: 1px solid var(--accent-mid);
  color: var(--green); padding: 12px 16px; border-radius: var(--radius-sm);
  margin-bottom: 20px; font-size: 13.5px;
}

/* ── Breadcrumb ────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-3);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { font-size: 10px; }
.breadcrumb .current { color: var(--text-1); font-weight: 500; }

/* ── Utility ───────────────────────────────────────────────────── */
.text-muted   { color: var(--text-3); }
.text-small   { font-size: 12px; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-amber   { color: var(--amber); }
.fw-bold      { font-weight: 700; }
.fw-600       { font-weight: 600; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-2        { gap: 8px; }
.gap-3        { gap: 12px; }
.mt-1         { margin-top: 4px; }
.mt-2         { margin-top: 8px; }
.mt-3         { margin-top: 16px; }
.mt-4         { margin-top: 24px; }
.mb-2         { margin-bottom: 8px; }
.mb-3         { margin-bottom: 16px; }
.mb-4         { margin-bottom: 24px; }
.p-3          { padding: 16px; }
.p-4          { padding: 24px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }
  .page-content, .main-content { padding: 16px; }
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ── Livewire / Alpine helpers ─────────────────────────────────── */
[wire\:loading] { opacity: .6; }
[x-cloak] { display: none !important; }

/* ── Accounting module ─────────────────────────────────────────── */
.kp-section-header {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-3);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}
.amount-positive { color: var(--green); font-weight: 600; }
.amount-negative { color: var(--red); font-weight: 600; }
.gl-debit  { color: var(--blue); font-weight: 600; }
.gl-credit { color: var(--green); font-weight: 600; }

/* Invoice statuses */
.status-draft     { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.status-issued    { background: var(--blue-bg); color: var(--blue); padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.status-sent      { background: var(--amber-bg); color: var(--amber); padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.status-paid      { background: var(--green-bg); color: var(--green); padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.status-overdue   { background: var(--red-bg); color: var(--red); padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.status-cancelled { background: var(--bg); color: var(--text-3); padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }

/* ── Dark mode ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #111110;
  --bg-card:     #1c1c1a;
  --bg-sidebar:  #161615;
  --bg-hover:    #232321;
  --border:      #2a2a28;
  --border-light:#222220;
  --text-1:      #f0f0eb;
  --text-2:      #a8a8a0;
  --text-3:      #606058;
  --text-4:      #404038;
  --accent-light: rgba(61,81,57,.18);
  --accent-mid:   rgba(61,81,57,.35);
  --green-bg:    rgba(61,81,57,.15);
  --red-bg:      rgba(192,57,43,.12);
  --amber-bg:    rgba(180,83,9,.12);
  --blue-bg:     rgba(29,78,216,.12);
}

/* ── Banners ───────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.banner-warning {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid #fde68a;
}
.banner-success {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--accent-mid);
}
.banner-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid #fecaca;
}
.banner-info {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid #bfdbfe;
}
.banner-chevron {
  margin-left: auto;
  opacity: .5;
}

/* ── btn-green ─────────────────────────────────────────────────── */
.btn-green {
  background: var(--accent);
  color: #fff;
}
.btn-green:hover { background: var(--accent-hover); }

/* ── Card body ─────────────────────────────────────────────────── */
.card-body {
  padding: 16px 20px;
}
.card > .card-header + .card-body {
  padding-top: 0;
}

/* ── Stat sub & trend ──────────────────────────────────────────── */
.stat-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}
.stat-trend {
  font-weight: 600;
}
.stat-trend.up { color: var(--green); }
.stat-trend.down { color: var(--red); }

/* ── Modal / Dialog ────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.modal-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), 0 20px 40px rgba(0,0,0,.1);
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
}

/* ── Data list (key-value pairs) ───────────────────────────────── */
.data-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.data-row:last-child { border-bottom: none; }
.data-label {
  font-size: 13px;
  color: var(--text-3);
}
.data-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
}

/* ── Progress bar ──────────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width .3s;
}
.progress-fill.green { background: #16a34a; }
.progress-fill.red { background: var(--red); }
.progress-fill.amber { background: var(--amber); }

/* ── Pill tabs (accounting module) ─────────────────────────────── */
.pill-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.pill-tab {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
  border: none;
  background: none;
}
.pill-tab:hover { color: var(--text-1); background: var(--bg-card); }
.pill-tab.active { background: var(--bg-card); color: var(--text-1); box-shadow: var(--shadow-sm); }

/* ── Action link row ───────────────────────────────────────────── */
.action-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-1);
  transition: background .15s;
}
.action-link:hover { background: var(--bg-hover); }
.action-link-icon {
  width: 32px; height: 32px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 13px;
  flex-shrink: 0;
}
.action-link-title { font-size: 13.5px; font-weight: 500; }
.action-link-desc { font-size: 12px; color: var(--text-3); }

/* ── Dropdown ──────────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 150;
}
.dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-2);
  transition: background .1s;
  cursor: pointer;
  border: none; background: none; width: 100%;
  text-align: left;
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text-1); }
.dropdown-item i { width: 16px; text-align: center; color: var(--text-3); font-size: 12px; }

/* ── Pagination ────────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-light);
}
.pagination-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all .12s;
}
.pagination-btn:hover { background: var(--bg-hover); }
.pagination-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination-info { margin-left: auto; font-size: 12.5px; color: var(--text-3); }

/* ── Dot indicators ────────────────────────────────────────────── */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: #22c55e; }
.dot-red { background: #ef4444; }
.dot-amber { background: #f59e0b; }
.dot-blue { background: #3b82f6; }

/* ── Sidebar scrollbar polish ──────────────────────────────────── */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; }
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .banner { display: none !important; }
  .main-wrapper { margin-left: 0 !important; }
  .page-content, .main-content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; }
}

/* ── Dashboard grids ───────────────────────────────────────────── */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.dash-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .dash-grid-2, .dash-grid-3 { grid-template-columns: 1fr; }
}

/* ── Brain insight box ─────────────────────────────────────────── */
.brain-insight-box {
  padding: 16px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.brain-insight-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.brain-insight-text {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Nav badge (inbox counter) ─────────────────────────────────── */
.nav-badge {
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Sidebar nav icon alignment ────────────────────────────────── */
.nav-link i {
  width: 20px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--text-3);
}
.nav-link.active i {
  color: var(--accent);
}
.nav-link:hover i {
  color: var(--text-2);
}

/* ================================================================
   COMMAND CENTER — Dashboard for 10K companies
   ================================================================ */

/* ── Welcome ───────────────────────────────────────────────────── */
.cmd-welcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.cmd-welcome h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.4px;
  margin: 0 0 4px;
}
.cmd-welcome-context {
  font-size: 13.5px;
  color: var(--text-3);
}
.cmd-welcome-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}

/* ── Alert bar ─────────────────────────────────────────────────── */
.cmd-alert-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  color: #92400e;
  font-size: 13px;
  margin-bottom: 20px;
}
.cmd-alert-bar i { color: #d97706; }

/* ── Stats row ─────────────────────────────────────────────────── */
.cmd-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.cmd-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cmd-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cmd-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.1;
}
.cmd-stat-label {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ── Main 3-column grid ────────────────────────────────────────── */
.cmd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.cmd-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Deadlines ─────────────────────────────────────────────────── */
.cmd-deadlines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmd-deadline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background .12s;
}
.cmd-deadline:hover { background: var(--bg-hover); }
.cmd-deadline.urgent {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
}
.cmd-deadline-date {
  text-align: center;
  min-width: 36px;
}
.cmd-deadline-day {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.cmd-deadline.urgent .cmd-deadline-day { color: #b45309; }
.cmd-deadline-month {
  display: block;
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
}
.cmd-deadline.urgent .cmd-deadline-month { color: #b45309; }
.cmd-deadline-info { flex: 1; min-width: 0; }
.cmd-deadline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.cmd-deadline.urgent .cmd-deadline-title { color: #92400e; }
.cmd-deadline-desc {
  font-size: 11.5px;
  color: var(--text-3);
}
.cmd-deadline-countdown { flex-shrink: 0; }

/* ── Badges ────────────────────────────────────────────────────── */
.cmd-badge-red {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}
.cmd-badge-amber {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: #fffbeb; color: #d97706; border: 1px solid #fde68a;
}
.cmd-badge-green {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: #ecfdf5; color: #16a34a; border: 1px solid #bbf7d0;
}
.cmd-badge-gray {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: #f5f5f3; color: var(--text-3); border: 1px solid var(--border);
}

/* ── Count badge in card header ────────────────────────────────── */
.cmd-count {
  background: var(--bg);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

/* ── Empty state mini ──────────────────────────────────────────── */
.cmd-empty-mini {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.cmd-empty-mini i {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--border);
}

/* ── Quick actions grid ────────────────────────────────────────── */
.cmd-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cmd-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all .12s;
}
.cmd-action:hover {
  background: var(--accent-light);
  border-color: var(--accent-mid);
  color: var(--accent);
}
.cmd-action i {
  width: 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.cmd-action:hover i { color: var(--accent); }

/* ── Assistant card ────────────────────────────────────────────── */
.cmd-assistant-card {
  border-color: var(--accent-mid);
}
.cmd-assistant-msg {
  padding: 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 12px;
}
.cmd-assistant-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmd-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
  text-align: left;
  width: 100%;
}
.cmd-suggestion:hover {
  background: var(--accent-light);
  border-color: var(--accent-mid);
  color: var(--accent);
}
.cmd-suggestion i {
  width: 16px;
  text-align: center;
  color: var(--accent);
  font-size: 12px;
}

/* ── System status ─────────────────────────────────────────────── */
.cmd-system-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmd-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-light);
}
.cmd-status-row:last-child { border-bottom: none; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .cmd-stats { grid-template-columns: repeat(3, 1fr); }
  .cmd-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .cmd-stats { grid-template-columns: repeat(2, 1fr); }
  .cmd-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Ksiegowosc Pro - KP Classes (merged from global-styles)
   ================================================================ */
:root {
    /* GŁÓWNE KOLORY AKCJI */
    --kp-primary: #3D5139;
    --kp-primary-hover: #314430;
    --kp-success: #16a34a;
    --kp-success-hover: #15803d;
    --kp-warning: #d97706;
    --kp-warning-hover: #b45309;
    --kp-error: #dc2626;
    --kp-error-hover: #b91c1c;
    --kp-info: #2563eb;
    --kp-info-hover: #1d4ed8;

    /* TEKST — jasny motyw */
    --kp-text: #1a1a18;
    --kp-text-secondary: #4a4a47;
    --kp-text-muted: #8a8a85;
    --kp-text-hint: #b0b0aa;

    /* TŁA — jasne, czyste */
    --kp-bg-glass: #ffffff;
    --kp-bg-glass-dark: #f8f8f6;
    --kp-bg-overlay: rgba(0, 0, 0, 0.4);

    /* BORDERY */
    --kp-border-light: #e5e5e3;
    --kp-border-medium: #d5d5d2;
    --kp-border-focus: #3D5139;

    /* BLUR — wyłączony */
    --kp-blur-standard: none;
    --kp-blur-modal: blur(8px);

    /* RADIUS */
    --kp-radius-sm: 6px;
    --kp-radius-md: 8px;
    --kp-radius-lg: 10px;
    --kp-radius-xl: 14px;
    --kp-radius-full: 999px;

    /* TRANSITIONS */
    --kp-transition-fast: 0.12s ease;
    --kp-transition-base: 0.15s ease;
    --kp-transition-slow: 0.25s ease;
}

/* ── Typography ─────────────────────────────────────────────── */
.kp-title, .kp-h1, .kp-h2, .kp-h3 { color: var(--kp-text); font-weight: 600; }
.kp-h1 { font-size: 22px; letter-spacing: -.3px; }
.kp-h2 { font-size: 18px; }
.kp-h3 { font-size: 15px; }
.kp-text, .kp-description { color: var(--kp-text-secondary); }
.kp-label, .kp-meta { color: var(--kp-text-muted); font-size: 13px; }
.kp-value, .kp-amount, .kp-number { color: var(--kp-text); font-weight: 600; }
.kp-hint, .kp-helper { color: var(--kp-text-hint); font-size: 12px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.kp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--kp-radius-full); font-weight: 600;
    font-size: 13.5px; cursor: pointer; transition: all var(--kp-transition-base);
    border: none; text-decoration: none; white-space: nowrap;
}
.kp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kp-btn-primary { background: var(--kp-primary); color: #fff; }
.kp-btn-primary:hover:not(:disabled) { background: var(--kp-primary-hover); }
.kp-btn-secondary { background: #fff; color: var(--kp-text); border: 1.5px solid var(--kp-border-light); }
.kp-btn-secondary:hover:not(:disabled) { background: #f5f5f3; border-color: var(--kp-border-medium); }
.kp-btn-success { background: var(--kp-success); color: #fff; }
.kp-btn-success:hover:not(:disabled) { background: var(--kp-success-hover); }
.kp-btn-danger { background: var(--kp-error); color: #fff; }
.kp-btn-danger:hover:not(:disabled) { background: var(--kp-error-hover); }
.kp-btn-warning { background: var(--kp-warning); color: #fff; }
.kp-btn-warning:hover:not(:disabled) { background: var(--kp-warning-hover); }
.kp-btn-ghost { background: transparent; color: var(--kp-text-secondary); border: 1.5px solid var(--kp-border-light); }
.kp-btn-ghost:hover:not(:disabled) { background: #f5f5f3; color: var(--kp-text); }
.kp-btn-sm { padding: 5px 12px; font-size: 12.5px; }
.kp-btn-lg { padding: 12px 24px; font-size: 15px; }
.kp-btn-icon { padding: 8px; width: 36px; height: 36px; }
.kp-btn-icon.kp-btn-sm { width: 30px; height: 30px; padding: 5px; }

/* ── Badges ─────────────────────────────────────────────────── */
.kp-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--kp-radius-full); font-size: 11.5px; font-weight: 600; }
.kp-badge-success, .kp-status-success, .kp-status-posted, .kp-status-approved { background: #ecfdf5; color: #16a34a; border: 1px solid #bbf7d0; }
.kp-badge-warning, .kp-status-warning, .kp-status-pending, .kp-status-ready_for_review { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.kp-badge-error, .kp-status-error, .kp-status-rejected, .kp-status-failed { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.kp-badge-info, .kp-status-info, .kp-status-draft { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.kp-badge-neutral, .kp-status-neutral { background: #f5f5f3; color: var(--kp-text-secondary); border: 1px solid var(--kp-border-light); }
.kp-confidence-high { background: #ecfdf5; color: #16a34a; }
.kp-confidence-medium { background: #fffbeb; color: #d97706; }
.kp-confidence-low { background: #fef2f2; color: #dc2626; }

/* ── Loading ─────────────────────────────────────────────────── */
.kp-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--kp-border-light); border-top-color: var(--kp-primary); border-radius: 50%; animation: kp-spin 0.8s linear infinite; }
.kp-spinner-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes kp-spin { to { transform: rotate(360deg); } }
.kp-loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.kp-btn.kp-loading { pointer-events: none; opacity: 0.7; }
.kp-btn.kp-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,.15); border-top-color: currentColor; border-radius: 50%; animation: kp-spin 0.8s linear infinite; margin-left: 6px; }
.kp-skeleton { background: linear-gradient(90deg, #f0f0ee 25%, #e5e5e3 50%, #f0f0ee 75%); background-size: 200% 100%; animation: kp-shimmer 1.5s infinite; border-radius: var(--kp-radius-sm); }
@keyframes kp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.kp-skeleton-text { height: 16px; margin-bottom: 8px; }
.kp-skeleton-title { height: 24px; width: 60%; margin-bottom: 12px; }
.kp-skeleton-card { height: 120px; border-radius: var(--kp-radius-lg); }

/* ── States ─────────────────────────────────────────────────── */
.kp-state-message { text-align: center; padding: 48px 24px; color: var(--kp-text-secondary); }
.kp-state-message .kp-state-icon { font-size: 40px; margin-bottom: 14px; color: var(--kp-text-hint); }
.kp-state-message .kp-state-title { font-size: 17px; font-weight: 600; color: var(--kp-text); margin-bottom: 6px; }
.kp-state-message .kp-state-description { font-size: 13.5px; color: var(--kp-text-muted); margin-bottom: 20px; }
.kp-empty-state .kp-state-icon { color: var(--kp-text-hint); }
.kp-error-state .kp-state-icon, .kp-error-state .kp-state-title { color: var(--kp-error); }

/* ── Cards ─────────────────────────────────────────────────── */
.kp-card { background: #fff; border: 1px solid var(--kp-border-light); border-radius: var(--kp-radius-lg); padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color var(--kp-transition-base); }
.kp-card:hover { border-color: var(--kp-border-medium); }
.kp-card-title { color: var(--kp-text); font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.kp-card-content { color: var(--kp-text-secondary); }
.kp-cards-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kp-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kp-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .kp-cards-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Forms ─────────────────────────────────────────────────── */
.kp-input, .kp-select, .kp-textarea {
    width: 100%; padding: 9px 12px; background: #fff; border: 1.5px solid var(--kp-border-light);
    border-radius: var(--kp-radius-md); color: var(--kp-text); font-size: 14px; transition: border var(--kp-transition-fast);
}
.kp-input:focus, .kp-select:focus, .kp-textarea:focus { outline: none; border-color: var(--kp-primary); box-shadow: 0 0 0 3px rgba(61,81,57,0.12); }
.kp-input::placeholder, .kp-textarea::placeholder { color: var(--kp-text-hint); }
.kp-form-group { margin-bottom: 14px; }
.kp-form-label { display: block; color: var(--kp-text-secondary); font-size: 13px; font-weight: 600; margin-bottom: 5px; }

/* ── Page Header ─────────────────────────────────────────────── */
.kp-page-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 20px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--kp-border-light); }
.kp-page-header-left { display: flex; align-items: center; gap: 12px; }
.kp-page-header-actions { display: flex; align-items: center; gap: 8px; }
.kp-page-title { font-size: 22px; font-weight: 700; color: var(--kp-text); margin: 0; letter-spacing: -.3px; }
.kp-page-subtitle { font-size: 13px; color: var(--kp-text-muted); margin: 4px 0 0; }
.kp-page-content { padding: 20px; }
.kp-divider { height: 1px; background: var(--kp-border-light); margin: 16px 0; }
.kp-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--kp-radius-full); font-size: 12px; font-weight: 500; }
.kp-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Utility classes — Tailwind compat ─────────────────────── */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.grid-cols-1 { grid-template-columns: repeat(1,1fr); }
.grid-cols-2 { grid-template-columns: repeat(2,1fr); }
.grid-cols-3 { grid-template-columns: repeat(3,1fr); }
.grid-cols-4 { grid-template-columns: repeat(4,1fr); }
.grid-cols-5 { grid-template-columns: repeat(5,1fr); }
.grid-cols-6 { grid-template-columns: repeat(6,1fr); }
@media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2,1fr); } .sm\:grid-cols-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2,1fr); } .md\:grid-cols-3 { grid-template-columns: repeat(3,1fr); } .md\:grid-cols-4 { grid-template-columns: repeat(4,1fr); } .md\:grid-cols-5 { grid-template-columns: repeat(5,1fr); } .md\:flex { display: flex; } }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3,1fr); } .lg\:grid-cols-4 { grid-template-columns: repeat(4,1fr); } }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}
.ml-1{margin-left:4px}.ml-2{margin-left:8px}.mr-1{margin-right:4px}.mr-2{margin-right:8px}.mx-auto{margin-left:auto;margin-right:auto}
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:20px;padding-right:20px}
.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}.py-6{padding-top:24px;padding-bottom:24px}
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-base{font-size:16px}.text-lg{font-size:18px}.text-xl{font-size:20px}.text-2xl{font-size:24px}.text-3xl{font-size:30px}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}
.text-right{text-align:right}.text-center{text-align:center}.text-left{text-align:left}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.leading-tight{line-height:1.25}

/* Text colors — remapped for light mode */
.text-white { color: var(--kp-text); }
.text-gray-300 { color: #6b7280; }
.text-gray-400 { color: #8a8a85; }
.text-gray-500 { color: #6b7280; }
.text-slate-300 { color: #64748b; }
.text-slate-400 { color: #8a8a85; }
.text-slate-500 { color: #64748b; }
.text-blue-300, .text-blue-400 { color: #2563eb; }
.text-green-300 { color: #16a34a; }
.text-emerald-300 { color: #059669; }
.text-red-300 { color: #dc2626; }
.text-yellow-300 { color: #d97706; }
.text-orange-300 { color: #ea580c; }
.text-purple-300 { color: #7c3aed; }
.text-cyan-300 { color: #0891b2; }
.text-indigo-300 { color: #4f46e5; }

.rounded{border-radius:4px}.rounded-md{border-radius:6px}.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid;border-color:var(--kp-border-light)}.border-t{border-top:1px solid var(--kp-border-light)}.border-b{border-bottom:1px solid var(--kp-border-light)}

/* BG opacity helpers — remapped for light */
.bg-emerald-500\/10,.bg-green-500\/10 { background: #ecfdf5; }
.bg-emerald-500\/20,.bg-green-500\/20 { background: #dcfce7; }
.bg-red-500\/10 { background: #fef2f2; }
.bg-red-500\/20 { background: #fee2e2; }
.bg-blue-600\/80 { background: #2563eb; color: #fff; }
.bg-white\/5,.bg-white\/10,.bg-white\/20 { background: #f8f8f6; }
.border-emerald-500\/30,.border-green-500\/30 { border-color: #bbf7d0; }
.border-red-500\/30 { border-color: #fecaca; }
.border-white\/10,.border-white\/20 { border-color: var(--kp-border-light); }
.backdrop-blur-sm { backdrop-filter: none; }
.bg-blue-500\/10,.bg-blue-500\/20{background:#eff6ff}.border-blue-500\/30{border-color:#bfdbfe}
.bg-cyan-500\/20{background:#ecfeff}.border-cyan-500\/30{border-color:#a5f3fc}
.bg-purple-500\/10,.bg-purple-500\/20{background:#f5f3ff}.border-purple-500\/20,.border-purple-500\/30{border-color:#ddd6fe}
.bg-yellow-500\/20{background:#fffbeb}.border-yellow-500\/30{border-color:#fde68a}

.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.min-w-0{min-width:0}.max-w-7xl{max-width:80rem}.max-w-2xl{max-width:42rem}
.space-y-2>*+*{margin-top:8px}.space-y-3>*+*{margin-top:12px}.space-y-4>*+*{margin-top:16px}.space-y-6>*+*{margin-top:24px}.space-x-2>*+*{margin-left:8px}.space-x-4>*+*{margin-left:16px}
.transition-all{transition:all .15s ease}.transition-colors{transition:background-color .15s,border-color .15s,color .15s}
.cursor-pointer{cursor:pointer}.select-none{user-select:none}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.z-50{z-index:50}.z-10{z-index:10}.opacity-50{opacity:.5}.opacity-70{opacity:.7}

/* ── Work-mode buttons (panel ksiegowego) ── */
.work-mode-btn {
    padding: 5px 14px; border-radius: var(--kp-radius-full);
    font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--kp-border-light);
    color: var(--kp-text-secondary); background: #fff; transition: all var(--kp-transition-fast);
    text-decoration: none;
}
.work-mode-btn:hover { background: #f5f5f3; border-color: var(--kp-border-medium); }
.work-mode-btn.active { background: var(--kp-primary); color: #fff; border-color: var(--kp-primary); }

/* ================================================================
   MASSIVE INLINE STYLE OVERRIDES
   Fixes 102 accounting blade views with hardcoded dark-theme colors.
   Uses CSS attribute selectors to override inline style="" values.
   ================================================================ */

/* ── TEXT COLOR overrides (light text on dark → dark text on light) ── */

/* White / near-white text → dark text */
[style*="color: #fff"],
[style*="color:#fff"],
[style*="color: white"],
[style*="color:white"] {
    color: var(--kp-text) !important;
}

/* Slate light text → dark text */
[style*="color: #f1f5f9"],
[style*="color:#f1f5f9"],
[style*="color: #e2e8f0"],
[style*="color:#e2e8f0"],
[style*="color: #cbd5e1"],
[style*="color:#cbd5e1"] {
    color: var(--kp-text) !important;
}

/* Muted slate → proper muted */
[style*="color: #94a3b8"],
[style*="color:#94a3b8"] {
    color: var(--kp-text-muted) !important;
}

[style*="color: #64748b"],
[style*="color:#64748b"],
[style*="color: #475569"],
[style*="color:#475569"] {
    color: var(--kp-text-secondary) !important;
}

/* White with opacity → muted */
[style*="color: rgba(255,255,255,0.4)"],
[style*="color: rgba(255,255,255,0.5)"],
[style*="color: rgba(255, 255, 255, 0.4)"],
[style*="color: rgba(255, 255, 255, 0.5)"] {
    color: var(--kp-text-hint) !important;
}

[style*="color: rgba(255,255,255,0.6)"],
[style*="color: rgba(255,255,255,0.7)"],
[style*="color: rgba(255,255,255,0.8)"],
[style*="color: rgba(255, 255, 255, 0.6)"],
[style*="color: rgba(255, 255, 255, 0.8)"] {
    color: var(--kp-text-secondary) !important;
}

/* Slate with opacity → muted */
[style*="color: rgba(148, 163, 184, 0.5)"],
[style*="color: rgba(148, 163, 184, 0.6)"],
[style*="color: rgba(148,163,184,0.5)"],
[style*="color: rgba(148,163,184,0.6)"] {
    color: var(--kp-text-hint) !important;
}

[style*="color: rgba(148, 163, 184, 0.8)"],
[style*="color: rgba(148,163,184,0.8)"] {
    color: var(--kp-text-muted) !important;
}

/* Purple/indigo accent → forest green accent */
[style*="color: #8b5cf6"],
[style*="color:#8b5cf6"],
[style*="color: #818cf8"],
[style*="color:#818cf8"],
[style*="color: #a78bfa"],
[style*="color:#a78bfa"],
[style*="color: #6366f1"],
[style*="color:#6366f1"] {
    color: var(--kp-primary) !important;
}

/* ── SEMANTIC COLORS — keep but ensure visibility ── */
/* Green text stays green */
[style*="color: #6ee7b7"],
[style*="color:#6ee7b7"] {
    color: #16a34a !important;
}
[style*="color: #10b981"],
[style*="color:#10b981"] {
    color: #059669 !important;
}
[style*="color: #22c55e"],
[style*="color:#22c55e"] {
    color: #16a34a !important;
}

/* Red text stays red */
[style*="color: #fca5a5"],
[style*="color:#fca5a5"] {
    color: #dc2626 !important;
}
[style*="color: #ef4444"],
[style*="color:#ef4444"] {
    color: #dc2626 !important;
}

/* Amber/yellow text stays amber */
[style*="color: #f59e0b"],
[style*="color:#f59e0b"] {
    color: #d97706 !important;
}
[style*="color: #fbbf24"],
[style*="color:#fbbf24"] {
    color: #b45309 !important;
}

/* ── BACKGROUND overrides (dark bg → light bg) ── */

/* Dark slate backgrounds → white */
[style*="background: rgba(30, 41, 59"],
[style*="background:rgba(30, 41, 59"],
[style*="background: rgba(30,41,59"],
[style*="background:rgba(30,41,59"] {
    background: #ffffff !important;
    border: 1px solid var(--kp-border-light) !important;
}

/* Near-black backgrounds → white */
[style*="background: rgba(15,23,42"],
[style*="background:rgba(15,23,42"],
[style*="background: rgba(15, 23, 42"],
[style*="background: #0f172a"],
[style*="background:#0f172a"],
[style*="background: #1e293b"],
[style*="background:#1e293b"] {
    background: #f8f8f6 !important;
}

/* White with low opacity (dark theme cards) → light cards */
[style*="background:rgba(255,255,255,0.02)"],
[style*="background:rgba(255,255,255,0.03)"],
[style*="background:rgba(255,255,255,0.04)"],
[style*="background:rgba(255,255,255,0.05)"],
[style*="background: rgba(255,255,255,0.02)"],
[style*="background: rgba(255,255,255,0.03)"],
[style*="background: rgba(255,255,255,0.04)"],
[style*="background: rgba(255,255,255,0.05)"],
[style*="background: rgba(255, 255, 255, 0.03)"],
[style*="background: rgba(255, 255, 255, 0.05)"] {
    background: #ffffff !important;
    border-color: var(--kp-border-light) !important;
}

/* Slightly more opaque white → subtle gray */
[style*="background:rgba(255,255,255,0.08)"],
[style*="background:rgba(255,255,255,0.1)"],
[style*="background: rgba(255,255,255,0.08)"],
[style*="background: rgba(255,255,255,0.1)"],
[style*="background: rgba(255, 255, 255, 0.1)"] {
    background: #f5f5f3 !important;
}

/* Purple accent backgrounds → forest green accent */
[style*="background:rgba(139,92,246"],
[style*="background: rgba(139,92,246"],
[style*="background: rgba(139, 92, 246"],
[style*="background:rgba(99,102,241"],
[style*="background: rgba(99,102,241"],
[style*="background: rgba(99, 102, 241"] {
    background: rgba(61,81,57,0.1) !important;
}

/* Emerald/green backgrounds — make lighter for light theme */
[style*="background:rgba(16,185,129,0.15)"],
[style*="background: rgba(16,185,129,0.15)"],
[style*="background: rgba(16, 185, 129, 0.15)"] {
    background: #ecfdf5 !important;
}
[style*="background:rgba(34,197,94,0.15)"],
[style*="background: rgba(34,197,94,0.15)"],
[style*="background: rgba(34, 197, 94, 0.15)"] {
    background: #ecfdf5 !important;
}

/* Red backgrounds — lighter */
[style*="background:rgba(239,68,68,0.15)"],
[style*="background: rgba(239,68,68,0.15)"],
[style*="background:rgba(239,68,68,0.1)"],
[style*="background: rgba(239,68,68,0.1)"],
[style*="background: rgba(239, 68, 68"] {
    background: #fef2f2 !important;
}

/* Amber/yellow backgrounds — lighter */
[style*="background:rgba(245,158,11,0.15)"],
[style*="background: rgba(245,158,11"],
[style*="background: rgba(245, 158, 11"] {
    background: #fffbeb !important;
}

/* Blue backgrounds — lighter */
[style*="background:rgba(59,130,246,0.15)"],
[style*="background: rgba(59,130,246"],
[style*="background: rgba(59, 130, 246"],
[style*="background:rgba(96,165,250"],
[style*="background: rgba(96,165,250"] {
    background: #eff6ff !important;
}

/* ── BORDER overrides ── */

/* White/transparent borders → light gray */
[style*="border:1px solid rgba(255,255,255,0.04)"],
[style*="border:1px solid rgba(255,255,255,0.06)"],
[style*="border:1px solid rgba(255,255,255,0.08)"],
[style*="border:1px solid rgba(255,255,255,0.1)"],
[style*="border:1px solid rgba(255,255,255,0.15)"],
[style*="border:1px solid rgba(255,255,255,0.2)"],
[style*="border: 1px solid rgba(255,255,255,0.04)"],
[style*="border: 1px solid rgba(255,255,255,0.06)"],
[style*="border: 1px solid rgba(255,255,255,0.08)"],
[style*="border: 1px solid rgba(255,255,255,0.1)"],
[style*="border: 1px solid rgba(255,255,255,0.15)"],
[style*="border: 1px solid rgba(255,255,255,0.2)"],
[style*="border: 1px solid rgba(255, 255, 255, 0.1)"],
[style*="border: 1px solid rgba(255, 255, 255, 0.06)"] {
    border-color: var(--kp-border-light) !important;
}

/* Slate/gray borders → light gray */
[style*="border: 1px solid rgba(148, 163, 184, 0.1)"],
[style*="border: 1px solid rgba(148, 163, 184, 0.2)"],
[style*="border: 1px solid rgba(148,163,184,0.1)"],
[style*="border: 1px solid rgba(148,163,184,0.2)"],
[style*="border:1px solid rgba(148,163,184,0.1)"],
[style*="border:1px solid rgba(148,163,184,0.2)"] {
    border-color: var(--kp-border-light) !important;
}

/* Purple/indigo borders → forest green */
[style*="border:1px solid rgba(129,140,248,0.3)"],
[style*="border: 1px solid rgba(129,140,248,0.3)"],
[style*="border:1px solid rgba(139,92,246,0.3)"],
[style*="border: 1px solid rgba(139,92,246,0.3)"],
[style*="border:1px solid rgba(139,92,246,0.2)"],
[style*="border: 1px solid rgba(139, 92, 246"] {
    border-color: rgba(61,81,57,0.3) !important;
}

/* Green borders — proper light green */
[style*="border: 1px solid rgba(16,185,129,0.3)"],
[style*="border:1px solid rgba(16,185,129,0.3)"],
[style*="border: 1px solid rgba(34,197,94,0.2)"],
[style*="border:1px solid rgba(34,197,94,0.2)"] {
    border-color: #bbf7d0 !important;
}

/* Red borders — proper light red */
[style*="border: 1px solid rgba(239,68,68,0.3)"],
[style*="border:1px solid rgba(239,68,68,0.3)"],
[style*="border: 1px solid rgba(239,68,68,0.15)"] {
    border-color: #fecaca !important;
}

/* ── FORM ELEMENT overrides ── */

/* Dark-themed inputs/selects */
select[style*="background:rgba(255,255,255,0.05)"],
select[style*="background: rgba(255,255,255,0.05)"],
input[style*="background:rgba(255,255,255,0.05)"],
input[style*="background: rgba(255,255,255,0.05)"],
textarea[style*="background:rgba(255,255,255,0.05)"],
textarea[style*="background: rgba(255,255,255,0.05)"] {
    background: #ffffff !important;
    border: 1.5px solid var(--kp-border-light) !important;
    color: var(--kp-text) !important;
}

/* ── BUTTON overrides ── */

/* Purple action buttons → green accent */
button[style*="background:rgba(139,92,246,0.2)"],
button[style*="background: rgba(139,92,246,0.2)"],
button[style*="background: rgba(139, 92, 246"],
a[style*="background:rgba(139,92,246,0.2)"],
a[style*="background: rgba(139,92,246,0.2)"] {
    background: var(--kp-primary) !important;
    color: #fff !important;
    border-color: var(--kp-primary) !important;
}

/* Green action buttons — keep green but proper shade */
button[style*="background:rgba(34,197,94,0.15)"],
button[style*="background: rgba(34,197,94,0.15)"] {
    background: #ecfdf5 !important;
    color: #16a34a !important;
    border-color: #bbf7d0 !important;
}

/* Red action buttons — keep red but proper shade */
button[style*="background:rgba(239,68,68,0.1)"],
button[style*="background: rgba(239,68,68,0.1)"] {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

/* ── GRADIENT / BACKDROP overrides ── */
[style*="backdrop-filter: blur"] {
    backdrop-filter: none !important;
}

/* ── TABLE overrides for dark-themed tables ── */
th[style*="color: rgba(148, 163, 184"],
th[style*="color:#94a3b8"],
th[style*="color: #94a3b8"] {
    color: var(--kp-text-muted) !important;
}

td[style*="color: #e2e8f0"],
td[style*="color:#e2e8f0"],
td[style*="color: #f1f5f9"],
td[style*="color:#f1f5f9"] {
    color: var(--kp-text) !important;
}

/* ── HOVER STATE overrides ── */
[style*="background:rgba(255,255,255,0.05)"]:hover,
[style*="background: rgba(255,255,255,0.05)"]:hover,
[style*="background:rgba(255,255,255,0.03)"]:hover,
[style*="background: rgba(255,255,255,0.03)"]:hover {
    background: #f5f5f3 !important;
}

/* ── BORDER-LEFT accents (keep colorful but adjust) ── */
[style*="border-left:3px solid #8b5cf6"],
[style*="border-left: 3px solid #8b5cf6"],
[style*="border-left:3px solid #818cf8"],
[style*="border-left: 3px solid #818cf8"] {
    border-left-color: var(--kp-primary) !important;
}

[style*="border-left:3px solid #3b82f6"],
[style*="border-left: 3px solid #3b82f6"] {
    border-left-color: #2563eb !important;
}

/* ── SHADOW overrides (dark shadows → subtle light shadows) ── */
[style*="box-shadow: 0 0 20px rgba(139,92,246"],
[style*="box-shadow: 0 0 20px rgba(139, 92, 246"] {
    box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
}

/* ── SCROLLBAR for content areas ── */
[style*="overflow-y:auto"]::-webkit-scrollbar,
[style*="overflow-y: auto"]::-webkit-scrollbar,
[style*="overflow:auto"]::-webkit-scrollbar {
    width: 5px;
}
[style*="overflow-y:auto"]::-webkit-scrollbar-thumb,
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
    background: var(--kp-border-light);
    border-radius: 3px;
}

/* ── FINAL CATCH-ALL for remaining dark patterns ── */

/* Any remaining dark background patterns */
[style*="background: linear-gradient(135deg, rgba(30"],
[style*="background:linear-gradient(135deg, rgba(30"],
[style*="background: linear-gradient(to"] {
    background: #ffffff !important;
}

/* Wire loading states */
[wire\:loading][style*="background"] {
    background: rgba(255,255,255,0.8) !important;
}
</style>
// Auto-fix dark-theme embedded <style> blocks in accounting views
document.addEventListener("DOMContentLoaded", function() {
    var colorMap = {
        // Text: light-on-dark → dark-on-light
        "#fff": "#1a1a18",
        "#ffffff": "#1a1a18",
        "#f1f5f9": "#1a1a18",
        "#e2e8f0": "#1a1a18",
        "#cbd5e1": "#4a4a47",
        "#94a3b8": "#8a8a85",
        "#64748b": "#6b7280",
        "#475569": "#4a4a47",
        "#6ee7b7": "#16a34a",
        "#4ade80": "#16a34a",
        "#fca5a5": "#dc2626",
        "#fbbf24": "#d97706",
        "#c084fc": "#7c3aed",
        "#a78bfa": "#7c3aed",
        "#818cf8": "#3D5139",
        "#8b5cf6": "#3D5139",
        "#60a5fa": "#2563eb",
        // Accent: purple → forest green
        "#3b82f6": "#3D5139"
    };

    var bgMap = {
        "rgba(255, 255, 255, 0.03)": "#ffffff",
        "rgba(255, 255, 255, 0.05)": "#ffffff",
        "rgba(255,255,255,0.03)": "#ffffff",
        "rgba(255,255,255,0.05)": "#ffffff",
        "rgba(255, 255, 255, 0.08)": "#f8f8f6",
        "rgba(255, 255, 255, 0.1)": "#f5f5f3",
        "rgba(255,255,255,0.1)": "#f5f5f3",
        "rgba(30, 41, 59, 0.5)": "#ffffff",
        "rgba(30, 41, 59, 0.6)": "#ffffff",
        "rgba(30, 41, 59, 0.4)": "#f8f8f6",
        "rgba(30,41,59,0.5)": "#ffffff",
        "rgba(30,41,59,0.6)": "#ffffff",
        "rgba(15, 23, 42, 0.95)": "#f5f5f3",
        "rgba(15,23,42,0.95)": "#f5f5f3",
        // Purple accents → green
        "rgba(139, 92, 246, 0.15)": "rgba(61,81,57,0.1)",
        "rgba(139, 92, 246, 0.2)": "rgba(61,81,57,0.15)",
        "rgba(139, 92, 246, 0.3)": "rgba(61,81,57,0.2)",
        "rgba(139,92,246,0.15)": "rgba(61,81,57,0.1)",
        "rgba(139,92,246,0.2)": "rgba(61,81,57,0.15)",
        "rgba(99, 102, 241, 0.15)": "rgba(61,81,57,0.1)",
        "rgba(129, 140, 248, 0.3)": "rgba(61,81,57,0.2)",
        // Semantic → lighter versions
        "rgba(59, 130, 246, 0.15)": "#eff6ff",
        "rgba(59, 130, 246, 0.3)": "rgba(37,99,235,0.15)",
        "rgba(34, 197, 94, 0.15)": "#ecfdf5",
        "rgba(16, 185, 129, 0.15)": "#ecfdf5",
        "rgba(245, 158, 11, 0.15)": "#fffbeb",
        "rgba(168, 85, 247, 0.15)": "#f5f3ff",
        "rgba(239, 68, 68, 0.15)": "#fef2f2",
        "rgba(239, 68, 68, 0.1)": "#fef2f2"
    };

    var borderMap = {
        "rgba(255, 255, 255, 0.06)": "#e5e5e3",
        "rgba(255, 255, 255, 0.08)": "#e5e5e3",
        "rgba(255, 255, 255, 0.1)": "#e5e5e3",
        "rgba(255, 255, 255, 0.15)": "#d5d5d2",
        "rgba(255, 255, 255, 0.2)": "#d5d5d2",
        "rgba(255,255,255,0.06)": "#e5e5e3",
        "rgba(255,255,255,0.08)": "#e5e5e3",
        "rgba(255,255,255,0.1)": "#e5e5e3",
        "rgba(148, 163, 184, 0.1)": "#e5e5e3",
        "rgba(148, 163, 184, 0.2)": "#d5d5d2",
        "rgba(139, 92, 246, 0.3)": "rgba(61,81,57,0.3)",
        "rgba(129, 140, 248, 0.3)": "rgba(61,81,57,0.3)",
        "rgba(16, 185, 129, 0.3)": "#bbf7d0",
        "rgba(34, 197, 94, 0.2)": "#bbf7d0",
        "rgba(239, 68, 68, 0.3)": "#fecaca",
        "rgba(59, 130, 246, 0.3)": "#bfdbfe"
    };

    var opacityTextMap = {
        "rgba(255, 255, 255, 0.4)": "#b0b0aa",
        "rgba(255, 255, 255, 0.5)": "#8a8a85",
        "rgba(255, 255, 255, 0.6)": "#8a8a85",
        "rgba(255, 255, 255, 0.7)": "#6b7280",
        "rgba(255, 255, 255, 0.8)": "#4a4a47",
        "rgba(148, 163, 184, 0.5)": "#b0b0aa",
        "rgba(148, 163, 184, 0.6)": "#8a8a85",
        "rgba(148, 163, 184, 0.8)": "#6b7280"
    };

    // Combine all maps
    var allReplacements = {};
    var k;
    for (k in colorMap) allReplacements[k] = colorMap[k];
    for (k in bgMap) allReplacements[k] = bgMap[k];
    for (k in borderMap) allReplacements[k] = borderMap[k];
    for (k in opacityTextMap) allReplacements[k] = opacityTextMap[k];

    // Process all embedded <style> tags (skip the first one which is this file)
    var styles = document.querySelectorAll("style");
    for (var i = 0; i < styles.length; i++) {
        var css = styles[i].textContent;
        if (!css || css.indexOf("kp-primary") !== -1) continue; // Skip our own styles
        var changed = false;
        for (k in allReplacements) {
            if (css.indexOf(k) !== -1) {
                // Use split/join for global replace (no regex needed)
                css = css.split(k).join(allReplacements[k]);
                changed = true;
            }
        }
        // Also fix box-shadow with dark colors
        if (css.indexOf("box-shadow") !== -1) {
            css = css.replace(/box-shadow:\s*0\s+0\s+\d+px\s+rgba\(139,\s*92,\s*246[^)]*\)/g, "box-shadow: 0 1px 3px rgba(0,0,0,.07)");
            css = css.replace(/box-shadow:\s*0\s+\d+px\s+\d+px\s+rgba\(59,\s*130,\s*246[^)]*\)/g, "box-shadow: 0 1px 3px rgba(0,0,0,.07)");
            changed = true;
        }
        // Fix backdrop-filter
        if (css.indexOf("backdrop-filter") !== -1) {
            css = css.replace(/backdrop-filter:\s*blur\([^)]+\)/g, "backdrop-filter: none");
            changed = true;
        }
        if (changed) {
            styles[i].textContent = css;
        }
    }
});
/* --- bank-styles --- */
/* ==========================================
   BANK PAGE - GLASSMORPHISM
   ========================================== */

.bank-page {
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-header h1 {
    color: #ffffff;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.header-stats {
    display: flex;
    gap: 12px;
}

.stat-badge {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    min-width: 120px;
}

.stat-badge .stat-number {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.stat-badge .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.stat-badge.balance { border-left: 3px solid #3b82f6; }
.stat-badge.unmatched { border-left: 3px solid #f59e0b; }
.stat-badge.suggestions { border-left: 3px solid #8b5cf6; }
.stat-badge.matched { border-left: 3px solid #22c55e; }

/* ==========================================
   TABS
   ========================================== */

.tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tab {
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.tab.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

.tab i {
    font-size: 14px;
}

/* ==========================================
   TAB CONTENT
   ========================================== */

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==========================================
   FILTERS
   ========================================== */

.filters-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.filters-bar select,
.filters-bar input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.filters-bar select {
    min-width: 180px;
}

.filters-bar input {
    flex: 1;
    max-width: 300px;
}

.filters-bar input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.filters-bar select option {
    background: #1e293b;
    color: #ffffff;
}

/* ==========================================
   BANK ACCOUNTS GRID
   ========================================== */

.bank-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.account-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.account-card:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.account-card.active {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
}

.account-card .account-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.account-card .account-number {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-family: monospace;
    margin-bottom: 12px;
}

.account-card .account-balance {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.account-card .balance-amount {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

.account-card .balance-currency {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.account-card .account-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.account-card .account-stat {
    font-size: 12px;
}

.account-card .account-stat .stat-num {
    color: #ffffff;
    font-weight: 600;
}

.account-card .account-stat .stat-text {
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   TRANSACTIONS LAYOUT
   ========================================== */

.transactions-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}

.transactions-list-wrapper {
    min-width: 0;
}

/* ==========================================
   DATA TABLE
   ========================================== */

.data-table-wrapper {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

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

.data-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    padding: 14px 16px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.data-table tr {
    cursor: pointer;
    transition: background 0.15s;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.data-table tbody tr.selected {
    background: rgba(59, 130, 246, 0.15);
}

.data-table .text-right {
    text-align: right;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.unmatched {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-badge.suggested {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.status-badge.matched {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge i {
    font-size: 10px;
}

/* Amount colors */
.amount-credit {
    color: #22c55e !important;
}

.amount-debit {
    color: #ef4444 !important;
}

/* ==========================================
   AI MATCHING PANEL
   ========================================== */

.ai-matching-panel {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 600px;
}

.ai-matching-panel .panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-matching-panel .panel-header h3 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-matching-panel .panel-header h3 i {
    color: #8b5cf6;
}

.ai-matching-panel .panel-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.empty-state i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 13px;
}

/* Suggestion cards */
.suggestion-card {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.suggestion-card:last-child {
    margin-bottom: 0;
}

.suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.confidence-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.confidence-badge.high {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.confidence-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.confidence-badge.low {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.match-type {
    color: #a78bfa;
    font-size: 11px;
    background: rgba(139, 92, 246, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
}

.suggestion-details {
    margin-bottom: 12px;
}

.suggestion-details .detail-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    margin-bottom: 2px;
}

.suggestion-details .detail-value {
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 8px;
}

.suggestion-actions {
    display: flex;
    gap: 8px;
}

/* ==========================================
   RECONCILIATION TAB
   ========================================== */

.reconciliation-header {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.reconciliation-stats {
    display: flex;
    gap: 32px;
}

.rec-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rec-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.rec-value {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.rec-stat.difference .rec-value {
    color: #ef4444;
}

.rec-stat.difference .rec-value.zero {
    color: #22c55e;
}

.reconciliation-actions {
    display: flex;
    gap: 12px;
}

.unmatched-transactions {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.unmatched-transactions h3 {
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 16px 0;
}

.unmatched-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
}

.unmatched-item:last-child {
    margin-bottom: 0;
}

.unmatched-item .item-info {
    flex: 1;
}

.unmatched-item .item-desc {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 2px;
}

.unmatched-item .item-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.unmatched-item .item-amount {
    font-size: 16px;
    font-weight: 600;
    margin-right: 16px;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover { background: #2563eb; }

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }

.btn-success {
    background: #22c55e;
    color: #ffffff;
}

.btn-success:hover { background: #16a34a; }

.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger:hover { background: rgba(239, 68, 68, 0.3); }

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ==========================================
   MODAL
   ========================================== */

.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: none;
}

.modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
    z-index: 999999 !important;
}

.modal-content {
    position: relative !important;
    background: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 1000000 !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #ffffff;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form elements in modal */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.form-control:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.form-control option {
    background: #1e293b;
    color: #ffffff;
}

.file-upload-area {
    border: 2px dashed rgba(59, 130, 246, 0.4);
    border-radius: 10px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(59, 130, 246, 0.05);
}

.file-upload-area:hover {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.1);
}

.file-upload-area i {
    font-size: 32px;
    color: #3b82f6;
    margin-bottom: 12px;
}

.file-upload-area p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Detail grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
}

.detail-item .label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.detail-item .value {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

.detail-item.full-width {
    grid-column: span 2;
}

/* ==========================================
   PAGINATION
   ========================================== */

.pagination-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination-bar button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.pagination-bar button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.pagination-bar button.active {
    background: #3b82f6;
    border-color: #3b82f6;
}

.pagination-bar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1200px) {
    .transactions-layout {
        grid-template-columns: 1fr;
    }

    .ai-matching-panel {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 16px;
    }

    .header-stats {
        width: 100%;
        flex-wrap: wrap;
    }

    .stat-badge {
        flex: 1;
        min-width: 100px;
        padding: 12px 16px;
    }

    .filters-bar {
        flex-wrap: wrap;
    }

    .filters-bar input {
        max-width: none;
        width: 100%;
    }

    .bank-accounts-grid {
        grid-template-columns: 1fr;
    }

    .reconciliation-header {
        flex-direction: column;
        gap: 16px;
    }

    .reconciliation-stats {
        flex-wrap: wrap;
        gap: 16px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-item.full-width {
        grid-column: span 1;
    }
}
/* --- kontrahenci-styles --- */
/* ============================================
   KONTRAHENCI - GLASS EFFECT STYLES
   ============================================ */

.kontrahenci-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ============================================
   FILTERS BAR - GLASS EFFECT
   ============================================ */
.filters-bar {
    padding: 16px 20px;
    margin-bottom: 20px;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.filters-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-select option {
    background: #1e293b;
    color: #ffffff;
}

.filter-select:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.filter-radio-group {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}

.radio-label:hover {
    color: #ffffff;
}

.radio-label:has(input:checked) {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.radio-label input[type="radio"] {
    cursor: pointer;
    accent-color: #3b82f6;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    flex: 1;
    max-width: 400px;
    transition: all 0.2s;
}

.search-box:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.search-box iconify-icon {
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
}

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 14px;
    color: #ffffff;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   TABLE - GLASS EFFECT
   ============================================ */
.table-container {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

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

.data-table th,
.data-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table thead {
    background: rgba(255, 255, 255, 0.05);
}

.data-table th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
}

.data-table tbody tr {
    transition: background 0.15s;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

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

/* Column sizes */
.col-code { width: 120px; }
.col-nip { width: 140px; }
.col-type { width: 100px; }
.col-status { width: 120px; }
.col-actions { width: 100px; text-align: right; }

/* Cell content */
.code-badge {
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.party-name {
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
}

.party-short-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

/* NIP column */
.data-table td:nth-child(3) {
    color: #ffffff;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 13px;
}

.role-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-radius: 4px;
    margin-left: 6px;
    display: inline-block;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.vat-status {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

.vat-ok {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.vat-error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.vat-unknown {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.vat-na {
    color: rgba(255, 255, 255, 0.4);
}

.text-muted {
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.btn-icon {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.15s;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ============================================
   PAGINATION - GLASS EFFECT
   ============================================ */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.pagination-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.pagination-controls {
    display: flex;
    gap: 6px;
}

.btn-page {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.15s;
    min-width: 36px;
    text-align: center;
}

.btn-page:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: #3b82f6;
}

.btn-page.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.btn-page:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-dots {
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   MODAL - GLASS EFFECT
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

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

.modal-content {
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px 16px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 16px 16px;
}

/* ============================================
   FORM - GLASS STYLE
   ============================================ */
.form-section {
    margin-bottom: 28px;
}

.form-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    flex: 1;
    margin-bottom: 16px;
}

.form-group.flex-2 { flex: 2; }
.form-group.flex-1 { flex: 1; }

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.8);
}

.required {
    color: #ef4444;
    margin-left: 2px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.15s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-group select option {
    background: #1e293b;
    color: #ffffff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-group input:read-only {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.checkboxes {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #ffffff;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

/* ============================================
   DRAWER - GLASS EFFECT
   ============================================ */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.drawer-content {
    width: 480px;
    max-width: 90%;
    height: 100%;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.drawer-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
}

.drawer-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.drawer-section {
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
}

.drawer-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 500;
    min-width: 140px;
}

.detail-value {
    font-size: 14px;
    color: #ffffff;
    text-align: right;
    flex: 1;
}

.detail-value a {
    color: #60a5fa;
    text-decoration: none;
}

.detail-value a:hover {
    text-decoration: underline;
}

.address-block {
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.notes-block {
    white-space: pre-wrap;
    background: rgba(255, 255, 255, 0.05);
    padding: 14px;
    border-radius: 8px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   STATES
   ============================================ */
.empty-state,
.loading-state,
.error-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   BUTTONS - GLASS STYLE
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn iconify-icon {
    font-size: 18px;
}

.btn-primary {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 14px 20px;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: 2000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-info { background: #3b82f6; }

/* ============================================
   GLASS CARD (Generic)
   ============================================ */
.glass-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: 100%;
    }

    .filter-radio-group {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .kontrahenci-container {
        padding: 12px;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .form-row {
        flex-direction: column;
    }

    .drawer-content {
        width: 100%;
    }

    .modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .data-table {
        font-size: 13px;
    }

    .data-table th,
    .data-table td {
        padding: 10px 12px;
    }
}
/* --- close-styles --- */
/* ==========================================
   CLOSE COCKPIT PAGE - GLASSMORPHISM
   Styled like Rozrachunki page
   ========================================== */

.close-cockpit-page {
    padding: 20px;
    padding-bottom: 100px; /* Space for fixed action bar */
}

/* ==========================================
   PAGE HEADER
   ========================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.page-header h1 {
    color: #ffffff;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
}

.header-stats {
    display: flex;
    gap: 12px;
}

.stat-badge {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    min-width: 140px;
}

.stat-badge .stat-number {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.stat-badge .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-transform: uppercase;
}

.stat-badge.progress { border-left: 3px solid #3b82f6; }
.stat-badge.completed { border-left: 3px solid #22c55e; }
.stat-badge.remaining { border-left: 3px solid #f59e0b; }

/* ==========================================
   STATUS BAR
   ========================================== */

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.countdown-box {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.countdown-box i {
    color: #f59e0b;
}

.status-badge-box .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.draft {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.status-badge.in_progress {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge.pending_approval {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.approved {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.closed {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.status-badge.reopened {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge i {
    font-size: 8px;
}

/* ==========================================
   TABS
   ========================================== */

.tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tab {
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.tab.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

.tab i {
    font-size: 14px;
}

/* ==========================================
   BLOCKERS WARNING
   ========================================== */

.blockers-warning {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 3px solid #ef4444;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.blockers-warning i {
    color: #ef4444;
    font-size: 18px;
}

.blockers-warning .btn-link {
    margin-left: auto;
    background: none;
    border: none;
    color: #60a5fa;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
}

/* ==========================================
   TAB CONTENT
   ========================================== */

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==========================================
   DATA TABLE - GLASSMORPHISM
   ========================================== */

.data-table-wrapper {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

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

.data-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table td {
    padding: 14px 16px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.data-table tbody tr {
    transition: all 0.2s;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

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

.loading-cell {
    text-align: center;
    padding: 60px 20px !important;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.loading-spinner i {
    font-size: 32px;
    color: #3b82f6;
}

/* Status icons in table */
.status-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.status-icon.pending {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.status-icon.in_progress {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.status-icon.completed {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.status-icon.skipped {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-icon.blocked {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Status badge in table */
.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pill.pending {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.status-pill.in_progress {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.status-pill.completed {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.status-pill.skipped {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-pill.blocked {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* ==========================================
   EVIDENCE BINDER
   ========================================== */

.evidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.evidence-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.evidence-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.evidence-card:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.evidence-card i {
    font-size: 40px;
    color: #3b82f6;
    margin-bottom: 12px;
}

.evidence-card .doc-name {
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: 500;
}

.evidence-card .doc-size {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* ==========================================
   WORKFLOW
   ========================================== */

.workflow-container {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
}

.workflow-steps-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.workflow-step {
    text-align: center;
    flex: 1;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.workflow-step.active {
    opacity: 1;
}

.workflow-step .step-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
}

.workflow-step.active .step-circle {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #60a5fa;
}

.workflow-step .step-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.workflow-step .step-user {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

.workflow-step .step-date {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    margin-top: 2px;
}

.workflow-connector {
    flex: 0 0 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    top: -20px;
}

.workflow-actions-box {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
}

.workflow-actions-box h3 {
    color: #ffffff;
    margin: 0 0 16px 0;
    font-size: 16px;
}

.workflow-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: rgba(107, 114, 128, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(107, 114, 128, 0.5);
}

.btn-success {
    background: #22c55e;
    color: #ffffff;
}

.btn-success:hover {
    background: #16a34a;
}

.btn-warning {
    background: #f59e0b;
    color: #ffffff;
}

.btn-warning:hover {
    background: #d97706;
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ==========================================
   ACTION BAR (FIXED BOTTOM)
   ========================================== */

.action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.action-left, .action-right {
    display: flex;
    gap: 12px;
}

/* ==========================================
   MODALS
   ========================================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999998;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999998;
}

.modal-content {
    position: relative;
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    z-index: 9999999;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
}

.modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form groups */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
}

.form-group select option {
    background: #1e293b;
    color: #ffffff;
}

.item-name-display {
    color: #60a5fa;
    font-weight: 600;
    margin: 0;
}

/* Warning box */
.warning-box {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
}

.warning-box i {
    color: #ef4444;
    font-size: 20px;
    flex-shrink: 0;
}

.warning-box p {
    color: rgba(255, 255, 255, 0.9);
    margin: 4px 0;
    font-size: 14px;
}

.warning-box p strong {
    color: #ef4444;
}

/* ==========================================
   DETAIL MODAL - SPECIFIC STYLES
   ========================================== */

#detail-modal.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: none;
}

#detail-modal.modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#detail-modal .modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
    z-index: 999999 !important;
}

#detail-modal .modal-content {
    position: relative !important;
    background: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 1000000 !important;
}

/* Detail modal grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    background: rgba(15, 23, 42, 0.5);
    padding: 12px;
    border-radius: 8px;
}

.detail-item .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.detail-item .value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.detail-item.full-width {
    grid-column: span 2;
}

/* Clickable table rows */
.data-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Toast Notifications */
.toast {
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease;
}

.toast.success {
    border-left: 4px solid #10b981;
}

.toast.error {
    border-left: 4px solid #ef4444;
}

.toast.warning {
    border-left: 4px solid #f59e0b;
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: #10b981;
}

.toast.error .toast-icon {
    color: #ef4444;
}

.toast.warning .toast-icon {
    color: #f59e0b;
}

.toast-content {
    flex: 1;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #ffffff;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOutRight 0.3s ease forwards;
}

/* ==========================================
   COMPLETE/SKIP/UPLOAD/FINALIZE MODALS - SPECIFIC STYLES
   ========================================== */

#modal-complete .modal-content,
#modal-skip .modal-content,
#modal-upload .modal-content,
#modal-finalize .modal-content {
    background: rgba(30, 41, 59, 0.98) !important;
}

#modal-complete .modal-backdrop,
#modal-skip .modal-backdrop,
#modal-upload .modal-backdrop,
#modal-finalize .modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
}
/* --- raporty-styles --- */
/* ==========================================
   RAPORTY PAGE - Style z księgowań
   Reports View
   ========================================== */

.raporty-container {
    padding: 20px;
    position: relative;
    min-height: 600px;
}

/* ==========================================
   HEADER
   ========================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-left h1 {
    color: #ffffff;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.header-stats {
    display: flex;
    gap: 16px;
}

.stat-badge {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-badge .stat-number {
    display: block;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
}

.stat-badge .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* ==========================================
   TABS
   ========================================== */

.tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

.tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.tab.active {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* ==========================================
   REPORTS GRID
   ========================================== */

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

/* Search Bar */
.search-bar {
    margin-bottom: 24px;
}

.search-box {
    position: relative;
    max-width: 400px;
}

.search-box iconify-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
}

.search-box input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-box input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.period-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.period-selector input[type="date"] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* ==========================================
   REPORT CARD - BIAŁE TŁO = CIEMNY TEKST
   ========================================== */

.report-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.report-card.financial {
    border-left: 4px solid #3b82f6;
}

.report-card.operational {
    border-left: 4px solid #8b5cf6;
}

.report-card.analytical {
    border-left: 4px solid #22c55e;
}

.report-card.jpk {
    border-left: 4px solid #f59e0b;
}

.report-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-icon {
    flex-shrink: 0;
}

/* CIEMNY TEKST NA BIAŁYM TLE */
.report-title {
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.report-description {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.report-meta {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-label {
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
}

.meta-value {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
}

/* Confidence bar */
.confidence-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.confidence-bar {
    background: #e5e7eb;
    height: 8px;
    border-radius: 4px;
    width: 100px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.confidence-fill.high {
    background: #22c55e;
}

.confidence-fill.medium {
    background: #f59e0b;
}

.confidence-fill.low {
    background: #ef4444;
}

.confidence-text {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 13px;
}

.report-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* Form controls w kartach */
.variant-select,
.date-input-compact {
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
}

.variant-select:focus,
.date-input-compact:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.checkbox-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.checkbox-compact input[type="checkbox"] {
    cursor: pointer;
}

.report-date {
    color: #6b7280;
    font-size: 13px;
}

.report-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.report-status.status-ready_for_review {
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
}

.report-status.status-approved {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.report-status.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.report-status.status-posted {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.report-status.status-draft {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

.report-actions {
    display: flex;
    gap: 8px;
}

/* ==========================================
   MODAL - CIEMNE TŁO = BIAŁY TEKST
   ========================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
}

.modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.modal-content {
    position: relative;
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.modal-content.modal-small {
    max-width: 500px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    line-height: 1;
}

.modal-close:hover {
    color: #ef4444;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Modal sections */
.modal-section {
    margin-bottom: 24px;
}

.modal-section h3 {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-info-row {
    display: flex;
    margin-bottom: 8px;
}

.modal-info-label {
    color: rgba(255, 255, 255, 0.6);
    width: 150px;
    flex-shrink: 0;
    font-size: 13px;
}

.modal-info-value {
    color: #ffffff;
    font-size: 13px;
}

/* Items table in modal */
.items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.items-table th {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}

.items-table td {
    color: #ffffff;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.items-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.account-code {
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
}

/* Editable account input */
.account-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    width: 100px;
}

.account-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.item-confidence {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.item-confidence.high {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.item-confidence.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.item-confidence.low {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Form in modal */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-bottom: 8px;
}

.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
}

.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    border: none;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Buttons on white card background */
.report-card .btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.report-card .btn-primary:hover {
    background: #2563eb;
}

.report-card .btn-success {
    background: #22c55e;
    color: #ffffff;
}

.report-card .btn-success:hover {
    background: #16a34a;
}

.report-card .btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.report-card .btn-danger:hover {
    background: #dc2626;
}

.report-card .btn-secondary {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
}

.report-card .btn-secondary:hover {
    background: #e5e7eb;
}

/* Modal buttons */
.modal .btn-success {
    background: #22c55e;
    color: #ffffff;
}

.modal .btn-danger {
    background: #ef4444;
    color: #ffffff;
}

/* ==========================================
   LOADING & EMPTY STATE
   ========================================== */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ffffff;
    z-index: 100;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
    grid-column: 1 / -1;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 16px;
    margin: 0;
}

/* ==========================================
   TOAST
   ========================================== */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 20px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-info { background: #3b82f6; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 16px;
    }

    .header-stats {
        width: 100%;
        justify-content: space-between;
    }

    .tabs-bar {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .reports-grid {
        grid-template-columns: 1fr;
    }

    .report-meta {
        gap: 16px;
    }

    .modal-content {
        width: 95%;
        max-height: 95vh;
    }
}
/* --- dokumenty-styles --- */
/* ==========================================
   DOKUMENTY PAGE - GLASSMORPHISM (wzor: Rozrachunki)
   ========================================== */

.dokumenty-page {
    padding: 20px;
    position: relative;
    min-height: 600px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-header h1 {
    color: #ffffff;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.header-stats {
    display: flex;
    gap: 12px;
}

.stat-badge {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    min-width: 140px;
}

.stat-badge .stat-number {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.stat-badge .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.stat-badge.total { border-left: 3px solid #3b82f6; }
.stat-badge.draft { border-left: 3px solid #f59e0b; }
.stat-badge.ksef { border-left: 3px solid #22c55e; }

/* ==========================================
   TABS
   ========================================== */

.tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tab {
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.tab.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

/* ==========================================
   FILTERS
   ========================================== */

.filters-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filters-bar select,
.filters-bar input[type="text"],
.filters-bar input[type="date"] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.filters-bar select {
    min-width: 160px;
}

.filters-bar input[type="text"] {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.filters-bar input[type="date"] {
    width: 150px;
}

.filters-bar input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.filters-bar select option {
    background: #1e293b;
    color: #ffffff;
}

.filters-bar select:focus,
.filters-bar input:focus {
    outline: none;
    border-color: #3b82f6;
}

/* ==========================================
   DATA TABLE - GLASSMORPHISM
   ========================================== */

.data-table-wrapper {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

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

.data-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    background: rgba(59, 130, 246, 0.2);
}

.data-table th.sorted-asc .sort-icon::after { content: ' ▲'; }
.data-table th.sorted-desc .sort-icon::after { content: ' ▼'; }

.data-table td {
    padding: 14px 16px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.data-table tr {
    cursor: pointer;
    transition: background 0.15s;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.data-table .text-right {
    text-align: right;
}

/* Document number link */
.doc-number {
    font-weight: 600;
    color: #60a5fa;
    cursor: pointer;
}

.doc-number:hover {
    text-decoration: underline;
}

/* Document type badges */
.doc-type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.doc-type-invoice_in { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.doc-type-invoice_out { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.doc-type-correction_in { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.doc-type-correction_out { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.doc-type-internal { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }

/* Party column */
.doc-party {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Amount column */
.doc-amount {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.draft {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.status-badge.pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.status-badge.approved {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge.posted {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.status-badge.cancelled {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Actions column */
.doc-actions {
    display: flex;
    gap: 6px;
}

.doc-actions button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.doc-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   TAB CONTENT
   ========================================== */

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==========================================
   MODAL - GLASSMORPHISM
   ========================================== */

#document-modal.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: none;
}

#document-modal.modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#document-modal .modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
    z-index: 999999 !important;
}

#document-modal .modal-content {
    position: relative !important;
    background: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 1000000 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px 16px 0 0;
}

.modal-header h2 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #ffffff;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 16px 16px;
}

/* Detail grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
}

.detail-item .label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.detail-item .value {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

/* Detail sections */
.detail-section {
    margin-bottom: 24px;
}

.detail-section h3 {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row {
    display: flex;
    margin-bottom: 8px;
}

.detail-label {
    color: rgba(255, 255, 255, 0.6);
    width: 140px;
    flex-shrink: 0;
    font-size: 13px;
}

.detail-value {
    color: #ffffff;
    font-size: 13px;
}

/* Lines table in modal */
.lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 12px;
}

.lines-table th {
    background: rgba(30, 41, 59, 0.8);
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
}

.lines-table td {
    padding: 10px 12px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lines-table .text-right {
    text-align: right;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-success {
    background: #22c55e;
    color: #ffffff;
}

.btn-success:hover {
    background: #16a34a;
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ==========================================
   PAGINATION
   ========================================== */

.pagination-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination-bar button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.pagination-bar button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.pagination-bar button.active {
    background: #3b82f6;
    border-color: #3b82f6;
}

.pagination-bar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-left: 16px;
}

/* ==========================================
   LOADING
   ========================================== */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ffffff;
    z-index: 100;
    border-radius: 12px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================
   EMPTY STATE
   ========================================== */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 16px;
}

/* ==========================================
   FLOATING ACTION BUTTON
   ========================================== */

.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    transition: all 0.2s;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab:hover {
    background: #2563eb;
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 20px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-info { background: #3b82f6; }
.toast-warning { background: #f59e0b; }

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1200px) {
    .header-stats {
        gap: 8px;
    }

    .stat-badge {
        padding: 12px 16px;
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 16px;
    }

    .header-stats {
        width: 100%;
        justify-content: space-between;
    }

    .stat-badge {
        flex: 1;
        min-width: auto;
        padding: 12px 16px;
    }

    .tabs-bar {
        flex-wrap: wrap;
    }

    .tab {
        padding: 8px 14px;
        font-size: 13px;
    }

    .filters-bar {
        flex-direction: column;
    }

    .filters-bar select,
    .filters-bar input {
        width: 100%;
        max-width: none;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .fab {
        bottom: 20px;
        right: 20px;
    }
}
/* --- vat-styles --- */
/* ==========================================
   VAT PAGE - GLASSMORPHISM (jak rozrachunki)
   ========================================== */

.vat-page {
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1 {
    color: #ffffff;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ==========================================
   SUMMARY STATS - w headerze po prawej (jak rozrachunki)
   ========================================== */

.header-stats {
    display: flex;
    gap: 12px;
}

.stat-badge {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 120px;
}

.stat-badge .stat-number {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.stat-badge .stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    text-transform: uppercase;
    margin-top: 2px;
}

.stat-badge.sales { border-top: 3px solid #22c55e; }
.stat-badge.purchase { border-top: 3px solid #f59e0b; }
.stat-badge.result { border-top: 3px solid #ef4444; }

.stat-badge.result.positive .stat-number { color: #ef4444; }
.stat-badge.result.negative .stat-number { color: #22c55e; }

/* ==========================================
   TOOLBAR - wszystko w jednej linii
   ========================================== */

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 8px;
}

.toolbar select,
.toolbar input {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.toolbar select option {
    background: #1e293b;
    color: #ffffff;
}

.toolbar input {
    width: 140px;
}

.toolbar input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   TABS (w toolbarze)
   ========================================== */

.tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tab {
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.tab.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

/* ==========================================
   FILTERS (jak rozrachunki)
   ========================================== */

.filters-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.filters-bar select,
.filters-bar input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.filters-bar select {
    min-width: 150px;
}

.filters-bar input {
    flex: 1;
    max-width: 250px;
}

.filters-bar input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.filters-bar select option {
    background: #1e293b;
    color: #ffffff;
}

/* ==========================================
   DATA TABLE - GLASSMORPHISM (jak rozrachunki)
   ========================================== */

.data-table-wrapper {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

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

.data-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    padding: 14px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    padding: 14px 16px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.data-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.data-table tr.invalid {
    background: rgba(239, 68, 68, 0.1);
}

.data-table .text-right {
    text-align: right;
}

/* GTU badges */
.gtu-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gtu-badge {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.gtu-badge:hover {
    background: rgba(139, 92, 246, 0.4);
}

/* Rate badge */
.rate-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Status */
.status-valid { color: #22c55e; }
.status-invalid { color: #ef4444; }

/* ==========================================
   TAB CONTENT
   ========================================== */

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==========================================
   SUMMARY BREAKDOWN (Podsumowanie tab)
   ========================================== */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.summary-section {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.summary-section h3 {
    color: #ffffff;
    font-size: 14px;
    margin: 0 0 16px 0;
    font-weight: 600;
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.breakdown-item .label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

.breakdown-item .value {
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}

.breakdown-item .count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    margin-left: 8px;
}

/* ==========================================
   JPK PREVIEW
   ========================================== */

.jpk-preview-wrapper {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.jpk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.jpk-header h3 {
    color: #ffffff;
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

.jpk-actions {
    display: flex;
    gap: 8px;
}

.jpk-validation {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 8px;
}

.jpk-validation.valid {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.jpk-validation.invalid {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.jpk-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.jpk-total-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.jpk-total-item .code {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-family: monospace;
    margin-bottom: 4px;
}

.jpk-total-item .value {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

/* ==========================================
   MODAL - GLASSMORPHISM (identyczne jak rozrachunki)
   ========================================== */

#gtu-modal.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: none;
}

#gtu-modal.modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#gtu-modal .modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
    z-index: 999999 !important;
}

#gtu-modal .modal-content {
    position: relative !important;
    background: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 1000000 !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #ffffff;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Detail grid - jak rozrachunki */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.detail-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
}

.detail-item .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.detail-item .value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

/* Section header w modalu */
.modal-section-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Checkboxes */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    cursor: pointer;
}

.checkbox-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.checkbox-item input {
    accent-color: #3b82f6;
}

.checkbox-item span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
}

/* ==========================================
   BUTTONS (jak rozrachunki)
   ========================================== */

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   PAGINATION (jak rozrachunki)
   ========================================== */

.pagination-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination-bar button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.pagination-bar button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pagination-bar button.active {
    background: #3b82f6;
    border-color: #3b82f6;
}

.pagination-bar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Helper classes */
.loading-text {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.error-text {
    color: #ef4444;
    text-align: center;
    padding: 20px;
}

.empty-text {
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1024px) {
    .header-stats {
        flex-direction: column;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .jpk-totals {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* --- ksiegowania-styles --- */
/* ==========================================
   KSIEGOWANIA PAGE - Etap 2.13
   PostingBatch Approval View - GLASS EFFECT
   ========================================== */

.ksiegowania-page {
    padding: 20px;
    position: relative;
    min-height: 600px;
}

/* ==========================================
   HEADER
   ========================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-left h1 {
    color: #ffffff;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.header-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.header-stats {
    display: flex;
    gap: 16px;
}

.header-stat {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
}

.header-stat .stat-value {
    display: block;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
}

.header-stat .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.header-stat.warning .stat-value {
    color: #f59e0b;
}

/* ==========================================
   TABS - GLASS EFFECT
   ========================================== */

.tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.tab-btn.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.tab-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.tab-btn.active .tab-count {
    background: rgba(59, 130, 246, 0.3);
}

/* ==========================================
   BATCHES LIST
   ========================================== */

.batches-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

/* ==========================================
   BATCH CARD - GLASS EFFECT
   ========================================== */

.batch-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}

.batch-card:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.batch-card.status-approved {
    border-left: 4px solid #22c55e;
}

.batch-card.status-rejected {
    border-left: 4px solid #ef4444;
}

.batch-card.status-ready_for_review {
    border-left: 4px solid #f59e0b;
}

.batch-card.status-posted {
    border-left: 4px solid #3b82f6;
}

.batch-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

/* BIAŁY TEKST NA GLASS */
.batch-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
}

.batch-title:hover {
    color: #60a5fa;
}

.batch-number {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.batch-meta {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
}

.meta-value {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

/* Confidence bar */
.confidence-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.confidence-bar {
    background: rgba(255, 255, 255, 0.1);
    height: 8px;
    border-radius: 4px;
    width: 100px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.confidence-fill.high {
    background: #22c55e;
}

.confidence-fill.medium {
    background: #f59e0b;
}

.confidence-fill.low {
    background: #ef4444;
}

.confidence-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}

.batch-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.batch-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.batch-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.batch-status.status-ready_for_review {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.batch-status.status-approved {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.batch-status.status-rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.batch-status.status-posted {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.batch-status.status-draft {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.batch-actions {
    display: flex;
    gap: 8px;
}

/* ==========================================
   MODAL - GLASS EFFECT
   ========================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
}

.modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.modal-content.modal-small {
    max-width: 500px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px 16px 0 0;
}

.modal-header h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    line-height: 1;
}

.modal-close:hover {
    color: #ef4444;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 16px 16px;
}

/* Modal sections */
.modal-section {
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
}

.modal-section h3 {
    color: #ffffff;
    font-size: 14px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-info-row {
    display: flex;
    margin-bottom: 8px;
}

.modal-info-label {
    color: rgba(255, 255, 255, 0.6);
    width: 150px;
    flex-shrink: 0;
    font-size: 13px;
}

.modal-info-value {
    color: #ffffff;
    font-size: 13px;
}

/* Items table in modal */
.items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.items-table th {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}

.items-table td {
    color: #ffffff;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.items-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.account-code {
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
}

/* Editable account input */
.account-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    width: 100px;
}

.account-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.item-confidence {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.item-confidence.high {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.item-confidence.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.item-confidence.low {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Form in modal */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-bottom: 8px;
}

.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
}

.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
}

/* ==========================================
   BUTTONS - GLASS STYLE
   ========================================== */

.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    border: none;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-success {
    background: #22c55e;
    color: #ffffff;
}

.btn-success:hover {
    background: #16a34a;
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.btn-danger:hover {
    background: #dc2626;
}

/* ==========================================
   LOADING & EMPTY STATE
   ========================================== */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ffffff;
    z-index: 100;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
    grid-column: 1 / -1;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 16px;
}

/* ==========================================
   TOAST
   ========================================== */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 20px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-info { background: #3b82f6; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 16px;
    }

    .header-stats {
        width: 100%;
        justify-content: space-between;
    }

    .tabs-bar {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .batches-list {
        grid-template-columns: 1fr;
    }

    .batch-meta {
        gap: 16px;
    }

    .modal-content {
        width: 95%;
        max-height: 95vh;
    }
}
/* --- kolejki-styles --- */
/* ============================================
   KOLEJKI - GLASS EFFECT STYLES
   ============================================ */

.kolejki-container {
    padding: 20px;
    min-height: 100vh;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-header h1 {
    margin: 0;
    font-size: 24px;
    color: #ffffff;
}

.view-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
    border-radius: 8px;
}

.btn-toggle {
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s;
}

.btn-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.btn-toggle.active {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ============================================
   FILTERS - GLASS EFFECT
   ============================================ */

.filters-bar {
    padding: 12px 16px;
    margin-bottom: 20px;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.filters-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.filter-select option {
    background: #1e293b;
    color: #ffffff;
}

.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    flex: 1;
    max-width: 250px;
}

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 14px;
    color: #ffffff;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   KANBAN - GLASS EFFECT
   ============================================ */

.kanban-container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 20px;
}

.kanban-loading {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.6);
    width: 100%;
}

/* Kolumny Kanban - Glass Effect */
.kanban-column {
    flex: 1;
    min-width: 250px;
    max-width: 320px;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.kanban-header {
    padding: 12px 16px;
    border-top: 3px solid #3b82f6;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-icon {
    font-size: 18px;
}

.kanban-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
}

.kanban-count {
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.kanban-cards {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
}

.kanban-loading-cards {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.kanban-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    font-size: 13px;
    font-style: italic;
}

/* ============================================
   KANBAN CARD - GLASS EFFECT
   ============================================ */

.kanban-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid #eab308;
    cursor: pointer;
    transition: all 0.2s;
}

.kanban-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-priority {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

/* Priority colors */
.card-priority.priority-P0 {
    background: #dc2626;
    color: #ffffff;
}

.card-priority.priority-P1 {
    background: #f59e0b;
    color: #ffffff;
}

.card-priority.priority-P2 {
    background: #eab308;
    color: #1a1a1a;
}

.card-priority.priority-P3 {
    background: #22c55e;
    color: #ffffff;
}

.card-auto {
    font-size: 14px;
}

.card-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #ffffff;
}

.card-due {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.card-due.overdue {
    color: #ef4444;
    font-weight: 500;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-assigned {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.card-assigned .unassigned {
    font-style: italic;
    opacity: 0.7;
}

/* ============================================
   TABLE VIEW - GLASS EFFECT
   ============================================ */

.table-container {
    overflow-x: auto;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

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

.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table th {
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.data-table td {
    color: #ffffff;
}

.clickable-row {
    cursor: pointer;
    transition: background 0.2s;
}

.clickable-row:hover {
    background: rgba(255, 255, 255, 0.08);
}

.priority-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.title-cell {
    max-width: 300px;
    color: #ffffff;
}

.auto-badge {
    margin-left: 6px;
}

.category-badge {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.status-badge {
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.overdue {
    color: #ef4444 !important;
    font-weight: 500;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   DRAWER - GLASS EFFECT
   ============================================ */

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
}

.drawer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.drawer-content {
    position: relative;
    width: 500px;
    max-width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    z-index: 1;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
}

.drawer-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.drawer-header-info h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    padding: 0;
    line-height: 1;
}

.drawer-close:hover {
    color: #ffffff;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: transparent;
}

.drawer-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.drawer-section h4 {
    margin: 0 0 12px 0;
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.detail-value {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

.description-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.related-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: #ffffff;
}

.related-item:last-child {
    border-bottom: none;
}

/* Timeline */
.action-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline-item {
    display: flex;
    gap: 12px;
}

.timeline-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
    min-width: 0;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.timeline-performer {
    font-weight: 500;
    font-size: 13px;
    color: #ffffff;
}

.timeline-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.timeline-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.timeline-comment {
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
}

.timeline-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    font-size: 13px;
}

.drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.drawer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.status-select {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.status-select option {
    background: #1e293b;
    color: #ffffff;
}

/* ============================================
   MODAL - GLASS EFFECT
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(4px);
}

.modal-content {
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-sm {
    max-width: 400px;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: #ffffff;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
}

.modal-close:hover {
    color: #ffffff;
}

.modal-body {
    padding: 20px;
}

.modal-body textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.modal-body textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.modal-body textarea:focus {
    outline: none;
    border-color: #3b82f6;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   BUTTONS - GLASS EFFECT
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-success {
    background: #22c55e;
    color: #ffffff;
}

.btn-success:hover {
    background: #16a34a;
}

.btn-icon {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    z-index: 2000;
    animation: slideIn 0.3s ease;
}

.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-info { background: #3b82f6; }

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Glass card generic */
.glass-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .kanban-container {
        flex-wrap: nowrap;
    }

    .kanban-column {
        min-width: 280px;
    }

    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: none;
    }

    .drawer-content {
        width: 100%;
        border-radius: 12px 12px 0 0;
    }
}
/* --- ustawienia-styles --- */
/* ==========================================
   SETTINGS PAGE LAYOUT - Etap 2.14
   ========================================== */

.settings-page {
    padding: 20px;
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    color: #ffffff;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.settings-layout {
    display: flex;
    gap: 24px;
}

/* ==========================================
   SETTINGS NAV
   ========================================== */

.settings-nav {
    width: 240px;
    flex-shrink: 0;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    padding: 12px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.settings-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.2s;
    cursor: pointer;
}

.settings-nav .nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.settings-nav .nav-item.active {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.settings-nav .nav-icon {
    font-size: 18px;
}

/* ==========================================
   SETTINGS CONTENT
   ========================================== */

.settings-content {
    flex: 1;
    min-width: 0;
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block;
}

.settings-section h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 8px 0;
}

.section-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0 0 20px 0;
}

/* ==========================================
   SETTINGS CARD (biale tlo, ciemny tekst)
   ========================================== */

.settings-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.settings-card .card-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================
   SETTING ROW
   ========================================== */

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-row:first-child {
    padding-top: 0;
}

.setting-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.setting-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.setting-info h3 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.setting-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 0;
}

/* ==========================================
   TOGGLE SWITCH
   ========================================== */

.toggle {
    position: relative;
    width: 52px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d1d5db;
    border-radius: 28px;
    transition: 0.3s;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle input:checked + .toggle-slider {
    background: #22c55e;
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.settings-card .form-label {
    color: #ffffff !important;
}

.settings-card label {
    color: #ffffff !important;
}

.form-input,
.form-select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
}

.form-select option {
    background: #1e293b;
    color: #ffffff;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-hint {
    display: block;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px;
    margin-top: 6px;
}

.settings-card .form-hint {
    color: rgba(255, 255, 255, 0.5) !important;
}

.form-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.range-value {
    text-align: center;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
}

.settings-card .range-value {
    color: #ffffff !important;
}

/* ==========================================
   CHECKBOX GROUP
   ========================================== */

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.checkbox-item input {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

/* ==========================================
   INTEGRATIONS GRID
   ========================================== */

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.integration-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.integration-card.connected {
    border-color: rgba(34, 197, 94, 0.5);
}

.integration-card.disconnected {
    border-color: rgba(245, 158, 11, 0.5);
}

.integration-icon {
    font-size: 32px;
}

.integration-info h3 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.integration-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 4px 0 0 0;
}

.integration-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.connected { background: #22c55e; }
.status-dot.disconnected { background: #f59e0b; }

/* ==========================================
   USERS TABLE
   ========================================== */

.users-table-wrapper {
    overflow-x: auto;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.users-table th {
    text-align: left;
    padding: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.users-table td {
    padding: 12px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: #3b82f6;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.role-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

.role-badge.admin { background: #fee2e2; color: #991b1b; }
.role-badge.accountant { background: #dbeafe; color: #1e40af; }
.role-badge.viewer { background: #f3f4f6; color: #374151; }

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

.status-badge.active { background: #dcfce7; color: #166534; }
.status-badge.inactive { background: #f3f4f6; color: #6b7280; }

/* ==========================================
   LOGS
   ========================================== */

.logs-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.logs-filters .form-select,
.logs-filters .form-input {
    width: auto;
    min-width: 150px;
}

.logs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.log-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.log-icon {
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.log-content {
    flex: 1;
    min-width: 0;
}

.log-message {
    color: #ffffff;
    font-size: 14px;
}

.log-message strong {
    color: #60a5fa;
}

.log-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-top: 4px;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover { background: #2563eb; }

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 900px) {
    .settings-layout {
        flex-direction: column;
    }

    .settings-nav {
        width: 100%;
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .settings-nav .nav-item {
        flex: 1 1 auto;
        min-width: 140px;
        margin-bottom: 0;
        justify-content: center;
        padding: 10px 12px;
    }

    .integrations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .setting-info {
        width: 100%;
    }

    .logs-filters {
        flex-direction: column;
    }

    .logs-filters .form-select,
    .logs-filters .form-input {
        width: 100%;
    }
}

/* --- deadlines-styles --- */
/* Reset i base */
.kp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* Page header */
.kp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 24px;
}

.kp-page-header-content {
    flex: 1;
}

.kp-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.kp-title-icon {
    width: 32px;
    height: 32px;
    color: #3b82f6;
}

.kp-page-subtitle {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

.kp-page-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Breadcrumb */
.kp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.kp-breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.kp-breadcrumb a:hover {
    color: #3b82f6;
}

.kp-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.3);
}

.kp-breadcrumb span:last-child {
    color: rgba(255, 255, 255, 0.9);
}

/* Month navigation */
.kp-month-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 16px;
}

.kp-month-label {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    min-width: 140px;
    text-align: center;
}

/* Buttons */
.kp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.kp-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.kp-btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    transform: translateY(-1px);
}

.kp-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.kp-btn-danger:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.kp-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.kp-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.kp-btn-icon {
    padding: 8px;
}

.kp-btn-group {
    display: flex;
    gap: 4px;
}

/* Alerts */
.kp-alert {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.kp-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.kp-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.kp-alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.kp-alert-warning .kp-alert-icon {
    color: #f59e0b;
}

.kp-alert-danger .kp-alert-icon {
    color: #ef4444;
}

.kp-alert-content {
    flex: 1;
}

.kp-alert-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.kp-alert-text {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.kp-alert-action {
    flex-shrink: 0;
}

/* Stats grid */
.kp-stats-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}

.kp-stats-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.kp-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.kp-stat-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.kp-stat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 0;
}

.kp-stat-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.kp-stat-indicator-danger {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.kp-stat-indicator-warning {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.kp-stat-indicator-success {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.kp-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kp-stat-card-body {
    padding: 16px 20px;
}

.kp-stat-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.kp-stat-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.kp-stat-card-danger .kp-stat-value {
    color: #ef4444;
}

.kp-stat-card-warning .kp-stat-value {
    color: #f59e0b;
}

.kp-stat-card-success .kp-stat-value {
    color: #22c55e;
}

.kp-stat-unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.kp-stat-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kp-stat-amount {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.kp-stat-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.kp-stat-card-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-stat-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

.kp-stat-link:hover {
    color: #60a5fa;
}

/* Cards */
.kp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.kp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.kp-card-actions {
    display: flex;
    gap: 8px;
}

.kp-card-body {
    padding: 20px;
}

.kp-card-body-flush {
    padding: 0;
}

/* Grid */
.kp-grid {
    display: grid;
    gap: 20px;
}

.kp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.kp-card-span-2 {
    grid-column: span 2;
}

/* Detail grid */
.kp-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kp-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kp-detail-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.kp-detail-value {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

/* Tables */
.kp-table-responsive {
    overflow-x: auto;
}

.kp-table {
    width: 100%;
    border-collapse: collapse;
}

.kp-table th {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kp-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.kp-table-row-danger {
    background: rgba(239, 68, 68, 0.05) !important;
}

.kp-table-row-warning {
    background: rgba(245, 158, 11, 0.05) !important;
}

/* Badges */
.kp-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

.kp-badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.kp-badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.kp-badge-success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* Priority */
.kp-priority {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

.kp-priority-critical {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.kp-priority-high {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.kp-priority-normal {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.kp-priority-low {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* Empty state */
.kp-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.kp-empty-icon {
    margin-bottom: 16px;
}

.kp-empty-icon svg {
    width: 48px;
    height: 48px;
}

.kp-empty-icon-success {
    color: #22c55e;
}

.kp-empty-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.kp-empty-text {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* Text utilities */
.kp-text-right {
    text-align: right;
}

.kp-text-center {
    text-align: center;
}

.kp-text-nowrap {
    white-space: nowrap;
}

.kp-text-primary {
    color: #3b82f6;
}

.kp-text-success {
    color: #22c55e;
}

.kp-text-warning {
    color: #f59e0b;
}

.kp-text-danger {
    color: #ef4444;
}

.kp-text-muted {
    color: rgba(255, 255, 255, 0.5);
}

.kp-text-lg {
    font-size: 16px;
}

.kp-link {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

.kp-link:hover {
    color: #60a5fa;
}

/* Pagination */
.kp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.kp-pagination a,
.kp-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.kp-pagination a {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kp-pagination a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.kp-pagination .active span {
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
}

.kp-pagination .disabled span {
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* Filters */
.kp-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.kp-filter-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.kp-filter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.kp-filter-btn.active {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

/* Responsive */
@media (max-width: 1200px) {
    .kp-stats-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kp-page-header {
        flex-direction: column;
    }

    .kp-stats-grid-3 {
        grid-template-columns: 1fr;
    }

    .kp-grid-2 {
        grid-template-columns: 1fr;
    }

    .kp-card-span-2 {
        grid-column: span 1;
    }
}
/* --- onboarding-styles --- */
/* ==========================================
   ONBOARDING WIZARD - GLASSMORPHISM DESIGN
   5-step wizard for company configuration
   ========================================== */

.onboarding-page {
    padding: 20px;
    padding-bottom: 100px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================
   PAGE HEADER
   ========================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-header h1 {
    color: #ffffff;
    font-size: 28px;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
}

.header-stats {
    display: flex;
    gap: 12px;
}

.stat-badge {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 12px;
    text-align: center;
    min-width: 100px;
}

.stat-badge .stat-number {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.stat-badge .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-badge.progress { border-left: 3px solid #3b82f6; }
.stat-badge.current-step { border-left: 3px solid #22c55e; }

/* ==========================================
   WIZARD PROGRESS BAR
   ========================================== */

.wizard-progress {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 24px;
}

.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-bottom: 24px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    position: relative;
}

.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 25px);
    width: calc(100% - 50px);
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.wizard-step.completed:not(:last-child)::after {
    background: #22c55e;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.step-number {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    font-size: 14px;
}

.step-check {
    display: none;
    color: #ffffff;
    font-size: 14px;
}

.wizard-step.active .step-circle {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
}

.wizard-step.active .step-number {
    color: #60a5fa;
}

.wizard-step.completed .step-circle {
    background: rgba(34, 197, 94, 0.3);
    border-color: #22c55e;
}

.wizard-step.completed .step-number {
    display: none;
}

.wizard-step.completed .step-check {
    display: block;
    color: #22c55e;
}

.step-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    transition: color 0.3s;
}

.wizard-step.active .step-label,
.wizard-step.completed .step-label {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   STEP CONTENT
   ========================================== */

.step-content-wrapper {
    position: relative;
}

.step-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.step-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.step-header i {
    font-size: 32px;
    color: #3b82f6;
}

.step-header h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 4px 0;
}

.step-header p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
}

.step-body {
    padding: 24px;
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 0;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(15, 23, 42, 0.7);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-group select option {
    background: #1e293b;
    color: #ffffff;
}

/* ==========================================
   COA SELECTION (STEP 2)
   ========================================== */

.coa-selection {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.coa-option {
    flex: 1;
    background: rgba(15, 23, 42, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 16px;
}

.coa-option:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
}

.coa-option.selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.option-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.option-icon i {
    font-size: 24px;
    color: #60a5fa;
}

.option-content h3 {
    color: #ffffff;
    font-size: 15px;
    margin: 0 0 4px 0;
}

.option-content p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin: 0;
}

.option-check {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.3s;
}

.option-check i {
    font-size: 24px;
    color: #3b82f6;
}

.coa-option.selected .option-check {
    opacity: 1;
}

.coa-select-wrapper {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    padding: 20px;
}

.coa-select-wrapper label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.coa-select-wrapper select {
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.coa-info {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coa-info .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coa-info .label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.coa-info .value {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

/* ==========================================
   IMPORT METHODS (STEP 3)
   ========================================== */

.import-methods {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.import-method {
    flex: 1;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.import-method:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

.import-method.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.import-method i {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    display: block;
}

.import-method.active i {
    color: #60a5fa;
}

.import-method span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
}

.import-method.active span {
    color: #ffffff;
}

.import-section {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    padding: 20px;
}

/* Manual entry table */
.manual-entry-table {
    overflow-x: auto;
}

.manual-entry-table .data-table {
    width: 100%;
    border-collapse: collapse;
}

.manual-entry-table .data-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    padding: 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.manual-entry-table .data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.manual-entry-table input {
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.manual-entry-table input:focus {
    outline: none;
    border-color: #3b82f6;
}

.manual-entry-table tfoot td {
    background: rgba(255, 255, 255, 0.03);
    padding-top: 12px;
}

.manual-entry-table tfoot strong {
    color: #ffffff;
    font-size: 14px;
}

.btn-icon {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.balance-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.balance-check i {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
}

.balance-check span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.balance-check.balanced {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.balance-check.balanced i {
    color: #22c55e;
}

.balance-check.balanced span {
    color: #4ade80;
}

.balance-check.unbalanced {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.balance-check.unbalanced i {
    color: #ef4444;
}

.balance-check.unbalanced span {
    color: #f87171;
}

/* File upload */
.file-upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.file-upload-area:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.05);
}

.file-upload-area i {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 16px;
}

.file-upload-area p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0 0 8px 0;
}

.file-upload-area .file-hint {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.upload-progress {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.file-name {
    color: #ffffff;
    font-size: 13px;
}

.file-status {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.progress-bar.small {
    height: 4px;
    margin-bottom: 0;
}

/* CSV options */
.csv-options {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================
   MAPPING TABLE (STEP 4)
   ========================================== */

.mapping-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.mapping-stats {
    display: flex;
    gap: 16px;
}

.mapping-stats .stat {
    text-align: center;
    padding: 8px 16px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    min-width: 80px;
}

.mapping-stats .stat-value {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.mapping-stats .stat-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
}

.mapping-stats .stat.mapped { border-left: 3px solid #22c55e; }
.mapping-stats .stat.auto { border-left: 3px solid #3b82f6; }
.mapping-stats .stat.pending { border-left: 3px solid #f59e0b; }

.mapping-actions {
    display: flex;
    gap: 12px;
}

.mapping-table-wrapper {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    overflow: hidden;
}

.mapping-table {
    width: 100%;
    border-collapse: collapse;
}

.mapping-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mapping-table td {
    padding: 14px 16px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.mapping-table tbody tr {
    cursor: pointer;
    transition: background 0.2s;
}

.mapping-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.confidence-bar {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.confidence-fill {
    height: 100%;
    border-radius: 3px;
}

.confidence-fill.high { background: #22c55e; }
.confidence-fill.medium { background: #f59e0b; }
.confidence-fill.low { background: #ef4444; }

/* Status pills */
.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pill.auto_confirmed { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.status-pill.manually_confirmed { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.status-pill.auto_suggested { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.status-pill.unmapped { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.status-pill.skipped { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.status-pill.pending { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.status-pill.completed { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

/* ==========================================
   VERIFICATION (STEP 5)
   ========================================== */

.verification-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.verification-card {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.verification-card .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.verification-card .card-header i {
    font-size: 20px;
    color: #3b82f6;
}

.verification-card .card-header h3 {
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    flex: 1;
}

.btn-edit {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-edit:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.verification-card .card-body {
    padding: 16px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.summary-item .value {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

/* Validation results */
.validation-results {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.validation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.validation-header i {
    font-size: 20px;
    color: #3b82f6;
}

.validation-header h3 {
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    flex: 1;
}

.validation-body {
    padding: 16px;
}

.validation-placeholder {
    text-align: center;
    padding: 32px;
    color: rgba(255, 255, 255, 0.5);
}

.validation-placeholder i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.validation-placeholder p {
    margin: 0;
    font-size: 14px;
}

.validation-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.validation-item:last-child {
    margin-bottom: 0;
}

.validation-item.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.validation-item.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.validation-item.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.validation-item i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.validation-item.success i { color: #22c55e; }
.validation-item.error i { color: #ef4444; }
.validation-item.warning i { color: #f59e0b; }

.validation-item span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
}

/* ==========================================
   WIZARD NAVIGATION
   ========================================== */

.wizard-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.nav-left, .nav-right {
    display: flex;
    gap: 12px;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: rgba(107, 114, 128, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(107, 114, 128, 0.5);
}

.btn-success {
    background: #22c55e;
    color: #ffffff;
}

.btn-success:hover {
    background: #16a34a;
}

.btn-warning {
    background: #f59e0b;
    color: #ffffff;
}

.btn-warning:hover {
    background: #d97706;
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* ==========================================
   MODALS
   ========================================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999998;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    z-index: 9999999;
}

.modal-content.modal-lg {
    max-width: 700px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
}

.modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Mapping modal specific */
.mapping-details {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.source-account, .target-account {
    flex: 1;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    padding: 16px;
}

.source-account h4, .target-account h4 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.account-info {
    margin-bottom: 12px;
}

.account-info .code {
    color: #60a5fa;
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.account-info .name {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.account-balance {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.account-balance strong {
    color: #ffffff;
}

.mapping-arrow {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.mapping-arrow i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.3);
}

.alternatives {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.alternatives-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    display: block;
    margin-bottom: 8px;
}

.alternatives-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alternative-chip {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.alternative-chip:hover {
    background: rgba(59, 130, 246, 0.3);
    color: #ffffff;
}

/* Info box */
.info-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-box.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.info-box.success i {
    color: #22c55e;
}

.info-box i {
    font-size: 20px;
    flex-shrink: 0;
}

.info-box p {
    color: rgba(255, 255, 255, 0.9);
    margin: 4px 0;
    font-size: 14px;
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */

.toast {
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease;
}

.toast.success { border-left: 4px solid #10b981; }
.toast.error { border-left: 4px solid #ef4444; }
.toast.warning { border-left: 4px solid #f59e0b; }

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast.success .toast-icon { color: #10b981; }
.toast.error .toast-icon { color: #ef4444; }
.toast.warning .toast-icon { color: #f59e0b; }

.toast-content {
    flex: 1;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #ffffff;
}

@keyframes slideInRight {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(400px); opacity: 0; }
}

.toast.hiding {
    animation: slideOutRight 0.3s ease forwards;
}

/* ==========================================
   LOADING STATES
   ========================================== */

.loading-cell {
    text-align: center;
    padding: 60px 20px !important;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.loading-spinner i {
    font-size: 32px;
    color: #3b82f6;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 16px;
    }

    .header-stats {
        width: 100%;
    }

    .stat-badge {
        flex: 1;
    }

    .wizard-steps {
        flex-wrap: wrap;
        gap: 16px;
    }

    .wizard-step:not(:last-child)::after {
        display: none;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .coa-selection {
        flex-direction: column;
    }

    .import-methods {
        flex-direction: column;
    }

    .mapping-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mapping-stats {
        justify-content: space-between;
    }

    .verification-grid {
        grid-template-columns: 1fr;
    }

    .mapping-details {
        flex-direction: column;
    }

    .mapping-arrow {
        transform: rotate(90deg);
        padding: 10px 0;
    }
}