/* PFR Donații prototype — extra styles (Tailwind CDN compatible) */
/* Optimized for 8h/day operator use: warm off-white background, deep text, compact tables */

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

:root {
  --app-bg: #F3F1EC;          /* warm off-white — eye comfort */
  --card-bg: #FFFFFF;
  --border: #CBD5E1;          /* slate-300 */
  --border-soft: #E2E8F0;     /* slate-200 */
  --text: #1E1B2E;            /* deeper near-black */
  --text-muted: #64748B;
  --brand: #482FA1;
  --brand-soft: #F5F3FF;
  --accent: #D8405E;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--app-bg);
  color: var(--text);
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
  color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  background: linear-gradient(135deg, #D8405E, #C13350);
  transition: all 0.15s ease;
  border: none; cursor: pointer; text-decoration: none;
}
.btn-primary:hover { box-shadow: 0 6px 16px -6px rgba(216, 64, 94, 0.5); transform: translateY(-1px); }

.btn-violet {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
  color: white; background: linear-gradient(135deg, #482FA1, #6B4ED8);
  transition: all 0.15s; border: none; cursor: pointer; text-decoration: none;
}
.btn-violet:hover { box-shadow: 0 6px 16px -6px rgba(72, 47, 161, 0.5); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
  color: #1E1B2E; background: white; border: 1px solid var(--border); cursor: pointer; text-decoration: none;
  transition: all 0.15s;
}
.btn-secondary:hover { background: #FAFAF7; border-color: #94A3B8; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.45rem 0.7rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500;
  color: #475569; background: transparent; border: none; cursor: pointer; text-decoration: none;
}
.btn-ghost:hover { background: #E8E5DE; }

/* Cards */
.card {
  background: var(--card-bg);
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,15,30,0.04);
}

/* Inputs */
.input {
  width: 100%; min-height: 44px; padding: 0.625rem 0.8rem; border-radius: 0.5rem; border: 1px solid var(--border);
  font-size: 0.9375rem; color: var(--text); transition: all 0.15s; background: white;
}
.input::placeholder { color: #94a3b8; }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(72,47,161,0.15); }

/* Native selects & filter dropdowns — taller, comfortable tap targets */
select {
  min-height: 44px; padding: 0.625rem 2.2rem 0.625rem 0.8rem;
  font-size: 0.9375rem; color: var(--text);
  border: 1px solid var(--border); border-radius: 0.5rem; background-color: white;
  cursor: pointer; transition: all 0.15s; line-height: 1.2;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
}
select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(72,47,161,0.15); }
select:hover { border-color: #94A3B8; }

.label { display: block; font-size: 0.8125rem; font-weight: 500; color: #1E1B2E; margin-bottom: 0.3rem; }

/* Checkboxes & radios — larger, comfortable tap targets, brand accent */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; flex: 0 0 auto;
  cursor: pointer; accent-color: var(--brand);
  vertical-align: middle;
}
input[type="checkbox"] { border-radius: 5px; }

/* Badges — neutral by default, colored only for semantics */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.badge-neutral { background: #E8E5DE; color: #1E1B2E; }
.badge-green   { background: #D1FAE5; color: #047857; }   /* confirmat */
.badge-blue    { background: #E0F2FE; color: #0369A1; }   /* emis */
.badge-amber   { background: #FEF3C7; color: #92400E; }   /* warning */
.badge-red     { background: #FFE4E6; color: #BE123C; }   /* alert / expirat */
.badge-gray    { background: #E2E8F0; color: #334155; }
.badge-violet  { background: #EDE9FE; color: #5B21B6; }   /* used sparingly */
.badge-dot { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; }

/* Tables — compact (operator-friendly) */
th {
  text-align: left; font-size: 11px; font-weight: 600; color: #64748B;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem; background: #FAFAF7;
  border-bottom: 1px solid var(--border-soft);
}
td {
  padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.3;
}
tbody tr { height: 36px; }
tbody tr:hover { background: #F8FAFC; }
tbody tr.row-link { cursor: pointer; }

/* Page title — more compact */
.page-title { font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }

/* Breadcrumb */
.crumb { font-size: 13px; color: #64748B; }
.crumb a:hover { color: var(--brand); }
.crumb .current { color: #1E1B2E; font-weight: 500; }

/* Sidebar nav active state — violet left border */
.nav-item-active {
  position: relative;
  background: #F5F3FF;
  color: #3D2685;
  font-weight: 600;
}
.nav-item-active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: #482FA1;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border); border-radius: 0.625rem; padding: 2.25rem 1.5rem;
  text-align: center; background: #FAFAF7; transition: all 0.15s; cursor: pointer;
}
.upload-zone:hover { border-color: var(--brand); background: #F5F3FF; }

.kpi-trend-up { color: #059669; }
.kpi-trend-down { color: #DC2626; }

/* Tabele în documentele generate — compacte (rânduri joase, font mic) */
.doc-table { font-size: 9px; }
.doc-table th, .doc-table td {
  padding: 2px 6px !important;
  line-height: 1.25 !important;
  font-size: 9px !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #1E1B2E !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.doc-table th { font-weight: 700; color: #64748B !important; }
.doc-body { line-height: 1.35; }

/* Tabele de selecție loturi (emitere aviz/bon/casare) — coloane aliniate */
.lot-table th, .lot-table td { vertical-align: middle; }
.lot-table td:has(> input.text-right) { text-align: right; }
.lot-table td > input.input { display: inline-block; }
/* numeric input boxes — lățime uniformă, aliniate la dreapta sub header */
.lot-table td > input.input.text-right { width: 96px; max-width: 96px; text-align: right; }

/* ---- Mobile-first responsive tables: turn rows into labeled cards on phones ---- */
@media (max-width: 767px) {
  table.rt thead { display: none; }
  table.rt, table.rt tbody, table.rt tr, table.rt td { display: block; width: 100%; }
  table.rt tr {
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    background: var(--card-bg);
    margin-bottom: 0.6rem;
    padding: 0.15rem 0.85rem;
    height: auto;
    box-shadow: 0 1px 2px rgba(15,15,30,0.04);
  }
  table.rt tr:hover { background: var(--card-bg); }
  table.rt td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border: none; border-bottom: 1px solid var(--border-soft);
    padding: 0.55rem 0; text-align: right; min-height: 0; line-height: 1.35;
  }
  table.rt td:last-child { border-bottom: none; }
  table.rt td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 600; color: #64748B;
    text-transform: uppercase; letter-spacing: 0.04em;
    text-align: left; flex: 0 0 auto; white-space: nowrap;
  }
  /* hide checkbox / empty-header cells on mobile cards */
  table.rt td[data-label=""] { display: none; }
  /* the row's first meaningful cell reads as a card heading */
  table.rt td.rt-title { font-weight: 600; font-size: 0.95rem; }

  /* Editable tables opt out of card conversion — they scroll horizontally instead */
  table.rt.no-card { display: table; }
  table.rt.no-card thead { display: table-header-group; }
  table.rt.no-card tbody { display: table-row-group; }
  table.rt.no-card tfoot { display: table-footer-group; }
  table.rt.no-card tr { display: table-row; border: none; border-radius: 0; background: transparent; margin: 0; padding: 0; box-shadow: none; }
  table.rt.no-card td { display: table-cell; text-align: left; border-bottom: 1px solid var(--border-soft); padding: 0.5rem 0.5rem; }
  table.rt.no-card td::before { content: none; }
  table.rt.no-card td[data-label=""] { display: table-cell; }
}

/* Subtle icon circle (replaces big colored squares) */
.icon-circle-sm {
  width: 28px; height: 28px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F1F5F9; color: #475569;
}

/* Timeline (article history) */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: ''; position: absolute; left: 0.4rem; top: 0; bottom: 0;
  width: 2px; background: var(--border-soft);
}
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-dot {
  position: absolute; left: -1.25rem; top: 0.25rem;
  width: 12px; height: 12px; border-radius: 9999px;
  background: white; border: 2px solid var(--brand);
}
.timeline-dot.muted { border-color: #94A3B8; }
.timeline-dot.success { border-color: #059669; }
.timeline-dot.warn { border-color: #D97706; }
.timeline-dot.danger { border-color: #DC2626; }