/* ═══════════════════════════════════════════
   Piese — 2026 Design System
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

:root {
  /* ── 2026 Monochrome + Emerald Accent ── */
  /* Grey scale (steel / charcoal / soft black) */
  --grey-0: #ffffff; --grey-50: #fafafa; --grey-100: #f4f4f5;
  --grey-200: #e4e4e7; --grey-300: #d4d4d8; --grey-400: #a1a1aa;
  --grey-500: #71717a; --grey-600: #52525b; --grey-700: #3f3f46;
  --grey-800: #27272a; --grey-900: #18181b; --grey-950: #09090b;
  /* Emerald accent (single pop) */
  --accent-50: #ecfdf5; --accent-100: #d1fae5; --accent-200: #a7f3d0;
  --accent-300: #6ee7b7; --accent-400: #34d399; --accent-500: #10b981;
  --accent-600: #059669; --accent-700: #047857; --accent-800: #065f46;
  --accent-900: #064e3b;

  /* Backward compat aliases */
  --emerald-50: var(--accent-50); --emerald-100: var(--accent-100); --emerald-200: var(--accent-200);
  --emerald-300: var(--accent-300); --emerald-400: var(--accent-400); --emerald-500: var(--accent-500);
  --emerald-600: var(--accent-600); --emerald-700: var(--accent-700); --emerald-800: var(--accent-800);
  --emerald-900: var(--accent-900); --emerald-950: var(--accent-900);
  --slate-50: var(--grey-50); --slate-100: var(--grey-100); --slate-200: var(--grey-200);
  --slate-300: var(--grey-300); --slate-400: var(--grey-400); --slate-500: var(--grey-500);
  --slate-600: var(--grey-600); --slate-700: var(--grey-700); --slate-800: var(--grey-800);
  --slate-900: var(--grey-900); --slate-950: var(--grey-950);
  --charcoal-200: var(--grey-200); --charcoal-300: var(--grey-300); --charcoal-700: var(--grey-700);
  --charcoal-800: var(--grey-800); --charcoal-900: var(--grey-900); --charcoal-950: var(--grey-950);
  --honey-50: #fffbeb; --honey-100: #fef3c7; --honey-200: #fde68a; --honey-500: #f59e0b; --honey-600: #d97706; --honey-700: #b45309;

  --primary: var(--accent-600); --primary-light: var(--accent-50);
  --accent: var(--accent-500);
  --danger: #ef4444; --danger-light: #fef2f2;
  --success: var(--accent-600); --success-light: var(--accent-50);
  --warning: #f59e0b; --warning-light: #fffbeb;
  --info: #6366f1; --info-light: #eef2ff;

  /* Surfaces */
  --bg-body: var(--grey-50); --bg-surface: var(--grey-0); --bg-surface-raised: var(--grey-0);
  --bg-sidebar: var(--grey-0); --border-sidebar: var(--grey-200);
  --text-primary: var(--grey-900); --text-secondary: var(--grey-500); --text-muted: var(--grey-400);

  /* Layout */
  --sidebar-w: 252px; --sidebar-collapsed: 68px;
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
  /* Radius */
  --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem;
  /* Font */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --grey-0: #09090b; --grey-50: #111113; --grey-100: #18181b;
  --grey-200: #27272a; --grey-300: #3f3f46; --grey-400: #52525b;
  --grey-500: #71717a; --grey-600: #a1a1aa; --grey-700: #d4d4d8;
  --grey-800: #e4e4e7; --grey-900: #f4f4f5; --grey-950: #fafafa;
  --accent-50: #052e16; --accent-100: #064e3b; --accent-200: #065f46;
  --accent-600: #34d399; --accent-700: #6ee7b7; --accent-800: #a7f3d0;
  --bg-body: var(--grey-50); --bg-surface: var(--grey-100); --bg-surface-raised: var(--grey-200);
  --bg-sidebar: var(--grey-100); --border-sidebar: var(--grey-200);
  --text-primary: var(--grey-900); --text-secondary: var(--grey-600); --text-muted: var(--grey-500);
  --danger: #f87171; --danger-light: #1c1010;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.45), 0 4px 6px -4px rgba(0,0,0,.3);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.35);
}
[data-theme="dark"] body { color-scheme:dark; }

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); color:var(--text-primary); background:var(--bg-body); line-height:1.5; -webkit-font-smoothing:antialiased; }
img, svg { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
::selection { background:var(--accent-200); color:var(--grey-900); }

/* ── App Layout ── */
.app-body { display:flex; min-height:100vh; }
.app-sidebar {
  position:fixed; top:.75rem; left:.75rem; bottom:.75rem;
  width:calc(var(--sidebar-w) - 1.5rem);
  background:var(--bg-sidebar); backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  display:flex; flex-direction:column;
  z-index:100; transition:all .25s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  border:1px solid var(--border-sidebar);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.app-sidebar.collapsed { width:calc(var(--sidebar-collapsed) - 1.5rem); }
.app-main {
  flex:1; margin-left:var(--sidebar-w);
  display:flex; flex-direction:column;
  min-height:100vh; max-width:calc(100vw - var(--sidebar-w));
  overflow-x:hidden;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.app-sidebar.collapsed ~ .app-main { margin-left:var(--sidebar-collapsed); max-width:calc(100vw - var(--sidebar-collapsed)); }

/* Sidebar logo */
.sidebar-logo {
  display:flex; align-items:center; gap:.75rem;
  padding:1.25rem 1rem .75rem; color:var(--text-primary); white-space:nowrap; overflow:hidden;
}
.sidebar-logo img { width:44px; height:auto; object-fit:contain; flex-shrink:0; }
.sidebar-logo span { font-family:'Plus Jakarta Sans',var(--font); font-weight:800; font-size:1.25rem; letter-spacing:-.03em; opacity:1; transition:opacity .2s; }
.collapsed .sidebar-logo span { opacity:0; display:none; }
.collapsed .sidebar-logo { justify-content:center; padding:1.25rem .5rem .75rem; gap:0; }

/* Sidebar toggle */
.sidebar-toggle {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  margin:0 .75rem .5rem; flex-shrink:0;
  padding:.4rem .75rem; border-radius:var(--radius-md);
  background:transparent; border:none;
  color:var(--slate-500); cursor:pointer;
  font-size:.72rem; font-weight:600; transition:all .15s;
  white-space:nowrap; overflow:hidden;
}
.sidebar-toggle:hover { background:var(--grey-200); color:var(--grey-700); }
.sidebar-toggle .material-symbols-outlined { font-size:1rem; flex-shrink:0; }
.sidebar-toggle .toggle-label { transition:opacity .15s; }
.collapsed .sidebar-toggle { justify-content:center; margin:0 auto .5rem; padding:.4rem; }
.collapsed .sidebar-toggle .toggle-label { display:none; }

/* Sidebar nav items */
.sidebar-nav { flex:1; padding:.5rem .75rem; overflow-y:auto; overflow-x:hidden; }
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--grey-300); border-radius:3px; }
.nav-section-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); padding:.75rem .75rem .35rem; white-space:nowrap; overflow:hidden;
}
.collapsed .nav-section-label { text-align:center; font-size:0; }
.collapsed .nav-section-label::after { content:'···'; font-size:.65rem; }
.nav-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .75rem; border-radius:var(--radius-md); color:var(--text-secondary);
  cursor:pointer; transition:all .15s; white-space:nowrap; overflow:hidden;
  margin-bottom:2px; font-weight:500; font-size:.85rem;
}
.nav-item:hover { background:var(--grey-100); color:var(--text-primary); }
.nav-item.active { background:var(--accent-600); color:#fff; font-weight:600; }
.nav-item .material-symbols-outlined { font-size:1.25rem; flex-shrink:0; width:1.5rem; text-align:center; }
.nav-item span:last-child { opacity:1; transition:opacity .15s; overflow:hidden; }
.collapsed .nav-item span:last-child { opacity:0; width:0; overflow:hidden; display:none; }
.collapsed .nav-item { justify-content:center; padding:.6rem; gap:0; position:relative; }
.collapsed .nav-item .material-symbols-outlined { width:auto; }

/* Nav badge */
.nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.2rem; height:1.2rem; padding:0 .3rem;
  background:var(--accent-500); color:#fff;
  font-size:.6rem; font-weight:700; border-radius:999px;
  margin-left:.35rem; line-height:1;
}
.nav-item.active .nav-badge { background:rgba(255,255,255,.3); }
.collapsed .nav-badge {
  position:absolute; top:.25rem; right:.25rem;
  margin-left:0; min-width:.9rem; height:.9rem; font-size:.5rem; padding:0 .2rem;
}

/* Sidebar footer */
.sidebar-footer {
  padding:.75rem; border-top:1px solid var(--grey-200);
}

/* ── Page Header ── */
.page-header {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.25rem 1.75rem; margin:1rem 1rem 0;
  background:var(--bg-surface); border:1px solid var(--grey-200);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
  flex-shrink:0;
}
.page-title {
  font-size:1.5rem; font-weight:800; color:var(--slate-900);
  letter-spacing:-.02em; flex-shrink:0;
}
.page-header-actions {
  display:flex; align-items:center; gap:.75rem; margin-left:auto;
}

/* Search */
.search-box {
  display:flex; align-items:center; gap:.5rem;
  background:var(--slate-100); border:1px solid var(--slate-200);
  border-radius:var(--radius-lg); padding:.4rem .75rem; min-width:200px;
  transition:all .2s;
}
.search-box:focus-within { border-color:var(--emerald-500); background:var(--bg-surface); box-shadow:0 0 0 3px var(--emerald-100); }
.search-box .material-symbols-outlined { font-size:1.1rem; color:var(--slate-400); }
.search-box input {
  border:none; background:none; outline:none; width:100%;
  font-size:.85rem; color:var(--slate-700);
}
.search-box input::placeholder { color:var(--slate-400); }
.search-box select {
  border:none; background:none; outline:none;
  font-size:.8rem; color:var(--slate-500); cursor:pointer;
  border-left:1px solid var(--slate-300); padding-left:.5rem; margin-left:.25rem;
}

/* View toggle */
.view-toggle {
  display:inline-flex; background:var(--slate-100); border-radius:var(--radius-md);
  padding:3px; gap:2px;
}
.view-toggle-btn {
  display:grid; place-items:center; width:34px; height:30px;
  border:none; background:none; border-radius:var(--radius-sm);
  color:var(--slate-400); cursor:pointer; transition:all .15s;
}
.view-toggle-btn:hover { color:var(--slate-600); }
.view-toggle-btn.active { background:var(--bg-surface); color:var(--emerald-700); box-shadow:var(--shadow-xs); }
.view-toggle-btn .material-symbols-outlined { font-size:1.15rem; }

/* ── Content Area ── */
.page-content {
  flex:1; padding:1.5rem 2rem 2rem;
  min-height:0; min-width:0;
  display:flex; flex-direction:column;
}
.page-content::-webkit-scrollbar { width:5px; }
.page-content::-webkit-scrollbar-thumb { background:var(--slate-300); border-radius:3px; }

/* ── Cards Container ── */
#orders-container, .cards-grid {
  display:flex; flex-wrap:wrap; gap:1rem 1.25rem;
  align-content:flex-start; width:100%;
}
#orders-container.table-mode {
  flex-direction:column; flex-wrap:nowrap;
}
#orders-container.table-mode > .data-table-wrapper {
  max-height:calc(100vh - 10rem); overflow:auto;
}
#orders-container > .order-card, .cards-grid .order-card { flex:1 1 100%; min-width:0; }
#orders-container > .order-card.collapsed, .cards-grid .order-card.collapsed { flex:0 0 auto; width:calc(33.333% - 1rem); min-width:280px; }
#orders-container > .scroll-sentinel, #orders-container > .scroll-end,
.cards-grid > .scroll-sentinel, .cards-grid > .scroll-end { flex:1 1 100%; }

/* ── Order Card ── */
.order-card {
  background:var(--bg-surface); border:1px solid var(--grey-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:all .2s; overflow:hidden; flex-shrink:0;
  min-width:0; max-width:100%;
}
.order-card:hover { box-shadow:var(--shadow-md); border-color:var(--slate-300); }

.order-card-header {
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:.25rem .5rem; padding:.65rem 1rem;
  border-bottom:1px solid var(--slate-100);
}
.order-card.collapsed .order-card-header {
  grid-template-columns:auto 1fr auto auto;
}
.order-card.collapsed .order-card-date { display:none; }
.order-card-idx {
  font-size:.65rem; font-weight:800; color:var(--accent-700);
  background:var(--accent-50); border:1px solid var(--accent-200);
  border-radius:var(--radius-sm); padding:.2rem .5rem; flex-shrink:0;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.order-card-client {
  min-width:0; overflow:hidden;
}
.order-card-client h3 {
  font-size:.92rem; font-weight:800; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em;
}
.order-card-client p {
  font-size:.75rem; color:var(--text-muted); display:flex; align-items:center; gap:.2rem; margin-top:.15rem;
  font-variant-numeric:tabular-nums;
}
.order-card-client p .material-symbols-outlined { font-size:.8rem; color:var(--accent-500); }
.order-card-meta {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.order-card-date {
  font-size:.68rem; color:var(--text-muted); background:var(--grey-100);
  padding:.15rem .45rem; border-radius:var(--radius-sm); font-variant-numeric:tabular-nums;
}

/* Status badge */
.status-badge {
  display:inline-flex; align-items:center;
  padding:.3rem .75rem; border-radius:var(--radius-md);
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; border:1.5px solid transparent; cursor:pointer;
  transition:all .15s;
}
.status-badge.status-incomplet { background-color:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.status-badge.status-anulat { background-color:#fef2f2; color:#991b1b; border-color:#fca5a5; }
.status-badge.status-ofertat { background-color:#fffbeb; color:#b45309; border-color:#fde68a; }
.status-badge.status-confirmat { background-color:#f0f9ff; color:#1d4ed8; border-color:#bfdbfe; }
.status-badge.status-facturat { background-color:var(--accent-50); color:var(--accent-800); border-color:var(--accent-200); }

select.status-badge {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:1.8rem; outline:none;
  background-repeat:no-repeat; background-position:right .4rem center; background-size:12px;
}
select.status-badge:hover { box-shadow:var(--shadow-sm); }
select.status-badge:focus { box-shadow:0 0 0 3px rgba(99,102,241,.15); }
select.status-badge.status-incomplet, select.status-badge.status-anulat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.status-badge.status-ofertat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.status-badge.status-confirmat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.status-badge.status-facturat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Dark mode status overrides */
[data-theme="dark"] .status-badge.status-incomplet { background-color:#2a1010; color:#fca5a5; border-color:#7f1d1d; }
[data-theme="dark"] .status-badge.status-anulat { background-color:#2a1010; color:#f87171; border-color:#7f1d1d; }
[data-theme="dark"] .status-badge.status-ofertat { background-color:#1c1508; color:#fbbf24; border-color:#78350f; }
[data-theme="dark"] .status-badge.status-confirmat { background-color:#0c1529; color:#93c5fd; border-color:#1e3a5f; }
[data-theme="dark"] .status-badge.status-facturat { background-color:#052e16; color:var(--accent-300); border-color:var(--accent-900); }
[data-theme="dark"] select.status-badge.status-incomplet, [data-theme="dark"] select.status-badge.status-anulat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] select.status-badge.status-ofertat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] select.status-badge.status-confirmat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] select.status-badge.status-facturat {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Card tabs */
.card-tabs {
  display:flex; background:var(--slate-50); border-bottom:1px solid var(--slate-200);
}
.card-tab {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.5rem 1rem; background:none; border:none;
  border-bottom:2px solid transparent;
  font-size:.78rem; font-weight:600; color:var(--slate-400);
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.card-tab .material-symbols-outlined { font-size:.95rem; }
.card-tab:hover { color:var(--slate-600); background:var(--slate-100); }
.card-tab.active { color:var(--emerald-700); border-bottom-color:var(--emerald-600); background:var(--bg-surface); }

.card-panel { display:none; }
.card-panel.active { display:block; min-width:0; overflow:hidden; }
.card-body { transition:all .15s; min-width:0; overflow:hidden; }
.card-collapse-icon { transition:transform .2s; }

/* Card details grid */
.details-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.detail-item {
  display:flex; align-items:baseline; gap:.5rem;
  padding:.55rem 1rem; border-bottom:1px solid var(--slate-100);
}
.detail-item:nth-child(odd) { border-right:1px solid var(--slate-100); }
.detail-item-full { grid-column:1/-1; border-right:none !important; }
.detail-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--slate-400); white-space:nowrap; flex-shrink:0;
}
.detail-value { font-size:.88rem; font-weight:600; color:var(--slate-800); word-break:break-word; }

/* Card footer */
.order-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; background:var(--slate-50);
  border-top:1px solid var(--slate-200); flex-wrap:wrap; gap:.5rem;
}
.order-card-total {
  font-size:.95rem; font-weight:800; color:var(--emerald-800);
}
.card-actions { display:flex; gap:.35rem; }

/* ── Data Table (table view) ── */
.data-table-wrapper {
  overflow:auto; background:var(--bg-surface); border:1px solid var(--slate-200);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  flex:1; min-height:0; min-width:0;
}
.data-table {
  width:100%; border-collapse:collapse; font-size:.82rem;
}
.data-table th {
  background:var(--slate-50); color:var(--slate-600);
  padding:.6rem .75rem; text-align:left; font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid var(--slate-200); white-space:nowrap;
  position:sticky; top:0; z-index:1;
}
.data-table td {
  padding:.55rem .75rem; border-bottom:1px solid var(--slate-100);
  color:var(--slate-700);
}
.data-table tbody tr { transition:background .1s; }
.data-table tbody tr:hover { background:var(--slate-50); }
.data-table .text-right { text-align:right; }
.data-table .text-center { text-align:center; }

/* Pinned columns */
.data-table th.col-pinned, .data-table td.col-pinned {
  position:sticky; z-index:2; background:var(--bg-surface);
  box-shadow:2px 0 4px rgba(0,0,0,.06);
}
.data-table thead th.col-pinned { z-index:3; background:var(--slate-50); }
.data-table th.col-pinned-right, .data-table td.col-pinned-right {
  position:sticky; right:0; z-index:2; background:var(--bg-surface);
  box-shadow:-2px 0 4px rgba(0,0,0,.06);
}
.data-table thead th.col-pinned-right { z-index:3; background:var(--slate-50); }

.pin-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:none; background:none;
  color:var(--slate-300); cursor:pointer; border-radius:var(--radius-sm);
  margin-left:.25rem; vertical-align:middle; padding:0;
  transition:all .15s; flex-shrink:0;
}
.pin-btn:hover { color:var(--slate-500); background:var(--slate-200); }
.pin-btn.pinned { color:var(--emerald-600); }
.pin-btn .material-symbols-outlined { font-size:.85rem; }

.th-content { display:inline-flex; align-items:center; gap:.15rem; }

/* Expandable parts row in table view */
.piese-toggle-btn {
  display:inline-flex; align-items:center; gap:.2rem;
  background:none; border:1px solid var(--slate-300); border-radius:var(--radius-sm);
  padding:.15rem .5rem; font-size:.8rem; font-weight:600;
  color:var(--emerald-700); cursor:pointer; transition:all .15s;
}
.piese-toggle-btn .material-symbols-outlined { font-size:1rem; transition:transform .2s; }
.piese-toggle-btn:hover { background:var(--emerald-50); border-color:var(--emerald-400); }
.piese-toggle-btn.active { background:var(--emerald-50); border-color:var(--emerald-500); }

.parts-expand-row td {
  padding:0 !important; background:var(--slate-50);
}
.parts-expand-row .parts-table-wrap {
  padding:.5rem .75rem .75rem;
}
.parts-expand-row .parts-table {
  border:1px solid var(--slate-200); border-radius:var(--radius-md); overflow:hidden;
}

/* Parts table (inside cards) */
.parts-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.parts-table {
  width:100%; min-width:700px; border-collapse:collapse; font-size:.8rem;
}
.parts-table th {
  background:var(--slate-50); color:var(--slate-500); padding:.45rem .6rem;
  text-align:left; font-weight:700; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.04em; border-bottom:1px solid var(--slate-200);
  white-space:nowrap;
}
.parts-table td {
  padding:.4rem .6rem; border-bottom:1px solid var(--slate-100);
}
.parts-table tbody tr:nth-child(even) { background:var(--slate-50); }
.parts-table .text-right { text-align:right; }
.parts-table .text-center { text-align:center; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .85rem; border:none; border-radius:var(--radius-md);
  font-size:.8rem; font-weight:600; cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.btn .material-symbols-outlined { font-size:1rem; font-variation-settings:'wght' 500; }
.btn-primary { background:var(--emerald-700); color:#fff; }
.btn-primary:hover { background:var(--emerald-800); }
.btn-secondary { background:var(--slate-100); color:var(--slate-700); border:1px solid var(--slate-200); }
.btn-secondary:hover { background:var(--slate-200); }
.btn-accent { background:var(--accent); color:var(--slate-900); }
.btn-accent:hover { background:#e89200; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-ghost { background:none; color:var(--slate-500); }
.btn-ghost:hover { background:var(--slate-100); color:var(--slate-700); }
.btn-sm { padding:.3rem .6rem; font-size:.75rem; }
.btn-sm .material-symbols-outlined { font-size:.9rem; }

/* ── Pagination / Infinite Scroll ── */
.pagination {
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  padding:1rem; flex-shrink:0;
}
.pagination-info { font-size:.82rem; font-weight:600; color:var(--slate-500); }
.scroll-sentinel {
  display:flex; justify-content:center; padding:2rem 0 3rem;
}
.scroll-end {
  text-align:center; padding:1.5rem 0 3rem;
  color:var(--slate-400); font-size:.82rem;
}

/* ── Loader / Empty / Toast ── */
.loader-spinner {
  width:24px; height:24px; border:3px solid var(--slate-200);
  border-top-color:var(--emerald-600); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.page-loader { display:flex; justify-content:center; padding:3rem; }
.page-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.75rem; padding:2rem; color:var(--text-primary);
  flex:1; text-align:center;
  position:relative; z-index:2;
  justify-content:flex-start; padding-top:20vh;
}
.page-empty-content {
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  padding:1.5rem 2.5rem; border-radius:var(--radius-xl);
  background:rgba(255,255,255,.65); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.5); box-shadow:var(--shadow-md);
  position:relative; z-index:3;
}
[data-theme="dark"] .page-empty-content {
  background:rgba(24,24,27,.6); border-color:rgba(255,255,255,.08);
}
.page-empty .material-symbols-outlined { font-size:2.5rem; color:var(--text-primary); }
.page-empty p { font-size:.9rem; font-weight:500; }
.page-empty-bg {
  position:fixed; bottom:0; left:var(--sidebar-w); right:0;
  height:75vh; pointer-events:none; z-index:1;
}
.page-empty-bg img {
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
  opacity:.8;
}
[data-theme="dark"] .page-empty-bg img {
  opacity:.4;
}
.app-sidebar.collapsed ~ .app-main .page-empty-bg { left:var(--sidebar-collapsed); }
@media (max-width:1024px) { .page-empty-bg { left:var(--sidebar-collapsed); height:60vh; } }
@media (max-width:768px) { .page-empty-bg { left:0; height:50vh; } }

.toast {
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
  background:var(--slate-800); color:#fff; padding:.6rem 1.5rem;
  border-radius:var(--radius-lg); font-size:.85rem; font-weight:600;
  box-shadow:var(--shadow-lg); z-index:9999;
  animation:toastIn .3s ease;
}
.toast.toast-error { background:var(--danger); }
.toast.toast-success { background:var(--emerald-700); }
@keyframes toastIn {
  from { opacity:0; transform:translateX(-50%) translateY(.75rem); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── Forms ── */
.form-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem; padding:1rem 0;
}
.form-section {
  border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  padding:1.25rem; background:var(--bg-surface);
}
.form-section legend {
  font-size:.8rem; font-weight:700; color:var(--emerald-700);
  padding:.2rem .75rem; background:var(--emerald-50);
  border-radius:var(--radius-sm); border:1px solid var(--emerald-200);
}
.input-group { position:relative; }
.input-field {
  width:100%; padding:.6rem .75rem; border:1px solid var(--slate-300);
  border-radius:var(--radius-md); font-size:.88rem; color:var(--slate-800);
  background:var(--bg-surface); transition:all .2s; outline:none;
}
.input-field:focus { border-color:var(--emerald-500); box-shadow:0 0 0 3px var(--emerald-100); }
.input-field::placeholder { color:transparent; }
.input-label {
  position:absolute; top:50%; left:.75rem; transform:translateY(-50%);
  font-size:.85rem; color:var(--slate-400); pointer-events:none;
  transition:all .2s ease;
}
.input-field:focus ~ .input-label,
.input-field:not(:placeholder-shown) ~ .input-label {
  top:0; font-size:.65rem; font-weight:700; color:var(--emerald-700);
  background:var(--bg-surface); padding:0 .35rem; transform:translateY(-50%);
}
textarea.input-field { min-height:60px; resize:vertical; }
textarea.input-field ~ .input-label { top:1rem; }
textarea.input-field:focus ~ .input-label,
textarea.input-field:not(:placeholder-shown) ~ .input-label { top:0; }

/* Legacy floating label compat */
.input-container { position:relative; }
.input-element {
  width:100%; padding:.6rem .75rem; border:1px solid var(--slate-300);
  border-radius:var(--radius-md); font-size:.88rem; color:var(--slate-800);
  background:var(--bg-surface); transition:all .2s; outline:none; height:auto;
}
.input-element:focus { border-color:var(--emerald-500); box-shadow:0 0 0 3px var(--emerald-100); }
.input-element[readonly] { background:var(--slate-50); cursor:default; }
.input-element::placeholder { color:transparent; }
.input-element:is(:focus, :not(:placeholder-shown)) ~ .input-label {
  top:0; font-size:.65rem; font-weight:700; color:var(--emerald-700);
  background:var(--bg-surface); padding:0 .35rem; transform:translateY(-50%);
  left:.5rem; scale:1;
}
textarea.input-element { resize:vertical; min-height:2.5rem; }

/* ── Dialog / Modal ── */
dialog.modal {
  width:min(90vw, 700px); max-height:85vh; margin:auto;
  border:none; border-radius:var(--radius-xl);
  padding:0; box-shadow:var(--shadow-xl);
  overflow-y:auto;
}
dialog.modal::backdrop { background:rgba(15,23,42,.5); backdrop-filter:blur(4px); }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--slate-200);
  background:var(--slate-50); position:sticky; top:0; z-index:1;
}
.modal-header h2 { font-size:1.1rem; font-weight:700; }
.modal-close {
  display:grid; place-items:center; width:32px; height:32px;
  background:none; border:none; border-radius:var(--radius-sm);
  color:var(--slate-400); cursor:pointer; transition:all .15s;
}
.modal-close:hover { background:var(--slate-200); color:var(--slate-700); }
.modal-body { padding:1.25rem; }
.modal-footer {
  display:flex; justify-content:flex-end; gap:.5rem;
  padding:1rem 1.25rem; border-top:1px solid var(--slate-200);
  background:var(--slate-50); position:sticky; bottom:0;
}

/* Legacy dialog compat */
.edit-order-dialog {
  width:min(92vw, 720px); max-height:88vh; margin:auto;
  border:none; border-radius:var(--radius-xl); padding:0;
  box-shadow:var(--shadow-xl); overflow-y:auto; background:var(--bg-surface);
}
.edit-order-dialog::backdrop { background:rgba(15,23,42,.5); backdrop-filter:blur(4px); }
.close-dialog-wrapper {
  display:flex; justify-content:flex-end; padding:.75rem 1rem;
  border-bottom:1px solid var(--slate-200); background:var(--slate-50);
  position:sticky; top:0; z-index:1;
}
.close-dialog {
  display:grid; place-items:center; width:32px; height:32px;
  background:none; border:none; border-radius:var(--radius-sm);
  color:var(--slate-400); cursor:pointer;
}
.close-dialog:hover { background:var(--slate-200); color:var(--slate-700); }
.form-section {
  display:flex; flex-wrap:wrap; gap:.75rem; padding:1rem;
  border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  margin:.5rem 1rem; background:var(--bg-surface);
}
.form-section legend {
  font-size:.8rem; font-weight:700; color:var(--emerald-700);
  padding:.2rem .75rem; background:var(--emerald-50);
  border-radius:var(--radius-sm); border:1px solid var(--emerald-200);
}
.form-section .input-container { flex:1 1 200px; position:relative; }
.inner-form-section {
  flex:1 1 100%; display:flex; flex-wrap:wrap; gap:.75rem; padding:.75rem;
  border:1px solid var(--slate-200); border-radius:var(--radius-md);
}
.inner-form-section legend {
  font-size:.75rem; font-weight:600; color:var(--slate-500);
  padding:.1rem .5rem;
}
.parts-section { transition:height .3s ease; }
/* Right-aligned action row at the bottom of every parts-section.
   Hosts the Șterge piesa / Resetează piesa buttons (visibility toggled in JS). */
.parts-section-actions {
  flex:1 1 100%; display:flex; justify-content:flex-end; gap:.5rem;
  margin-top:.25rem; padding-top:.5rem;
  border-top:1px dashed var(--slate-200);
}
.parts-section-actions:empty { display:none; }
.submit-button-container { width:100%; padding:0 1rem 1rem; }
.submit-button {
  width:100%; padding:.7rem; background:var(--emerald-700); color:#fff;
  border:none; border-radius:var(--radius-md); font-weight:700;
  font-size:.95rem; cursor:pointer; transition:background .2s;
}
.submit-button:hover { background:var(--emerald-800); }

/* Total price highlight */
#total_selling_price { color:var(--emerald-700); font-weight:800; }

/* ── Login Page ── */
.login-body {
  display:flex; min-height:100vh; background:var(--slate-50);
}
.login-form-container {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1 1 28rem; padding:2rem; perspective:1000px;
}
.logo-container {
  width:auto; max-width:12rem; margin-bottom:1.5rem;
  display:grid; place-items:center;
}
.logo-container img { width:100%; height:auto; object-fit:contain; }
.login-title {
  font-size:clamp(1.5rem, 4vw, 2rem); font-weight:900;
  color:var(--slate-900); margin-bottom:2rem; text-align:center;
  background:none; -webkit-text-fill-color:unset;
}
.flip-card-inner {
  width:100%; max-width:380px; text-align:center;
  transition:transform .6s; transform-style:preserve-3d;
}
.flip-card-inner.is-flipped { transform:rotateY(180deg); }
.form, .error-container {
  backface-visibility:hidden; width:100%;
  display:flex; flex-direction:column; gap:1.25rem;
}
.error-container { position:absolute; transform:rotateY(180deg); }
.inputs-wrapper { display:flex; flex-direction:column; gap:1rem; }
.form-wrapper {
  width:100%; max-width:380px; padding:2rem;
  background:var(--bg-surface); border:1px solid var(--slate-200);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
}
.form-wrapper-title {
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:1.25rem; color:var(--slate-900);
  margin-bottom:1.5rem;
}
.form-wrapper-title .material-symbols-outlined { color:var(--emerald-600); font-size:1.5rem; }
.vertical-line { display:none; }
.login-background {
  flex:1 1 28rem;
  background:url('/assets/image.png') center/cover no-repeat;
  position:relative;
}
.login-background::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.1) 100%);
}

.error-wrapper, .success-wrapper {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.error-icon { font-size:3rem; color:var(--danger); }
.success-icon { font-size:3rem; color:var(--success); }
.error-message { font-size:1rem; color:var(--danger); text-align:center; word-wrap:break-word; }
.success-message { font-size:1rem; color:var(--success); text-align:center; word-wrap:break-word; }
.back-to-login {
  padding:.5rem 1.5rem; border:1.5px solid var(--slate-300);
  background:none; border-radius:var(--radius-md);
  font-weight:600; cursor:pointer; transition:all .2s;
}
.back-to-login:hover { background:var(--slate-100); }
.toggle-password {
  position:absolute; top:50%; right:.75rem; transform:translateY(-50%);
  color:var(--slate-400); cursor:pointer; background:none; border:none;
}
.toggle-password:hover { color:var(--slate-700); }
.loader {
  display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:20px; height:20px; border:2px solid var(--slate-200);
  border-top-color:var(--emerald-600); border-radius:50%;
  animation:spin .7s linear infinite; z-index:2;
}

/* ── Users Table ── */
#usersTable { width:100%; border-collapse:collapse; }
#usersTable thead { background:var(--slate-50); }
#usersTable th { padding:.65rem .75rem; text-align:left; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); border-bottom:2px solid var(--slate-200); }
#usersTable td { padding:.6rem .75rem; border-bottom:1px solid var(--slate-100); font-size:.85rem; }
#usersTable tbody tr:hover { background:var(--slate-50); }
#usersTable button { background:none; border:none; color:var(--emerald-600); cursor:pointer; padding:.25rem; border-radius:var(--radius-sm); }
#usersTable button:hover { background:var(--emerald-50); }

/* ── Client table compat (confirmed-list, range-parts) ── */
.client-table { width:100%; border-collapse:collapse; }
.client-table th, .client-table td { padding:.55rem .75rem; text-align:left; border-bottom:1px solid var(--slate-100); }
.client-table th { background:var(--slate-50); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); border-bottom:2px solid var(--slate-200); }
.client-table tbody tr:hover { background:var(--slate-50); }
.table-wrapper { overflow:auto; flex:1; }

/* ── Public oferta page ── */
.public-page {
  max-width:800px; margin:0 auto; padding:2rem;
  font-family:var(--font);
}
.public-header {
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:1rem; border-bottom:2px solid var(--grey-200);
  margin-bottom:1.5rem;
}
.public-header-left { display:flex; align-items:center; gap:1rem; }
.public-header-logo { height:2.5rem; width:auto; object-fit:contain; }
.public-header h1 { font-size:1.5rem; font-weight:900; color:var(--text-primary); letter-spacing:-.02em; }
.public-header .date { font-size:.82rem; color:var(--text-muted); }
.public-info {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--slate-200); border-radius:var(--radius-md);
  margin-bottom:1.5rem; overflow:hidden;
}
.public-info-cell {
  padding:.6rem 1rem; border-bottom:1px solid var(--slate-200);
}
.public-info-cell:nth-child(odd) { border-right:1px solid var(--slate-200); }
.public-info-label { font-size:.65rem; font-weight:700; text-transform:uppercase; color:var(--slate-400); margin-bottom:.1rem; }
.public-info-value { font-size:.9rem; font-weight:600; color:var(--slate-800); }
.public-total {
  text-align:right; font-size:1.3rem; font-weight:900; color:var(--emerald-800);
  padding:.75rem 0; margin-top:.5rem; border-top:3px solid var(--emerald-700);
}
.public-footer { margin-top:2rem; padding-top:.75rem; border-top:1px solid var(--slate-200); font-size:.7rem; color:var(--slate-400); text-align:center; }
.public-actions {
  display:flex; justify-content:center; gap:.75rem; margin-top:1.5rem;
}

/* ── Responsive ── */
@media (max-width:1024px) {
  .app-sidebar { width:var(--sidebar-collapsed); }
  .app-sidebar .nav-item span:last-child { opacity:0; width:0; }
  .app-sidebar .nav-section-label { font-size:0; text-align:center; }
  .app-sidebar .nav-section-label::after { content:'···'; font-size:.65rem; }
  .sidebar-logo span { opacity:0; }
  .sidebar-toggle { display:none; }
  .app-main { margin-left:var(--sidebar-collapsed); max-width:calc(100vw - var(--sidebar-collapsed)); }
  .page-header { padding:1rem 1.25rem .75rem; }
  .page-content { padding:1rem 1.25rem 2rem; }
}
@media (max-width:768px) {
  .app-sidebar {
    position:fixed; bottom:.75rem; top:auto; left:50%; right:auto;
    transform:translateX(-50%) translateY(0);
    width:auto !important; max-width:calc(100vw - 1.5rem); height:auto;
    flex-direction:row; border-right:none;
    border:1px solid var(--slate-700);
    border-radius:var(--radius-xl);
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    z-index:200;
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
  }
  .app-sidebar.nav-hidden {
    transform:translateX(-50%) translateY(calc(100% + 1.5rem));
    opacity:0; pointer-events:none;
  }
  .sidebar-logo, .sidebar-toggle, .nav-section-label, .sidebar-footer { display:none !important; }
  .sidebar-nav {
    display:flex; flex-direction:row; padding:.35rem .4rem;
    overflow-x:auto; overflow-y:hidden; gap:.15rem; width:auto;
    justify-content:center; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sidebar-nav::-webkit-scrollbar { display:none; }
  .nav-item {
    flex-direction:column; gap:.1rem; padding:.35rem .55rem; font-size:.55rem; flex-shrink:0;
    border-radius:var(--radius-md) !important;
  }
  .nav-item .material-symbols-outlined { font-size:1.15rem; }
  .nav-item span:last-child { opacity:1 !important; width:auto !important; font-size:.55rem; white-space:nowrap; }
  .nav-badge { position:static !important; min-width:.85rem; height:.85rem; font-size:.45rem; margin-left:.1rem; padding:0 .15rem; }
  .app-main { margin-left:0 !important; max-width:100vw !important; padding-bottom:5.5rem; }
  .page-header { flex-direction:column; align-items:stretch; }
  .page-header-actions { margin-left:0; }
  .details-grid { grid-template-columns:1fr; }
  .detail-item:nth-child(odd) { border-right:none; }
  .public-info { grid-template-columns:1fr; }
  .public-info-cell:nth-child(odd) { border-right:none; }
}

/* ── Print ── */
@media print {
  .app-sidebar, .page-header, .pagination, .card-actions, .toast, .public-actions { display:none !important; }
  .app-main { margin-left:0 !important; }
  .page-content { overflow:visible !important; padding:0 !important; }
  .order-card { break-inside:avoid; box-shadow:none !important; border:1px solid #ddd; }
  body { background:var(--bg-surface); font-size:10pt; }
}