/* ============================================================
   /achizitii sub-app — Civic OS, dense data variant
   Scoped: loaded only via AchizitiiLayout.astro.
   Reuses brutalist token NAMES (paper/ink/stamp/state/signal,
   btn-brutal, input-brutal, chip-brutal, label-meta, tracking-meta)
   but redefines them in the platform's blue/amber/slate palette.
   No tailwind.config.mjs change. No global.css change.
   ============================================================ */

.achizitii-app {
  --paper: #FFFFFF;
  --ink: #0F172A;
  --ink-soft: #1E293B;
  --ink-mute: #475569;
  --stamp: #2563EB;
  --stamp-deep: #1D4ED8;
  --stamp-soft: #DBEAFE;
  --state: #10B981;
  --state-soft: #D1FAE5;
  --signal: #B45309;
  --signal-bg: #F59E0B;
  --signal-soft: #FEF3C7;
  --meta: #64748B;
  --rule: #E2E8F0;
  --rule-soft: #F1F5F9;
  --page: #FAFBFC;

  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
  min-height: 100vh;
}

/* ===== Color utilities ===== */
.achizitii-app .bg-paper { background-color: var(--paper); }
.achizitii-app .bg-ink { background-color: var(--ink); color: var(--paper); }
.achizitii-app .bg-stamp { background-color: var(--stamp); color: var(--paper); }
.achizitii-app .bg-state { background-color: var(--state-soft); }
.achizitii-app .bg-signal { background-color: var(--signal-soft); }
.achizitii-app .bg-page { background-color: var(--page); }

.achizitii-app .text-paper { color: var(--paper); }
.achizitii-app .text-ink { color: var(--ink); }
.achizitii-app .text-stamp { color: var(--stamp); }
.achizitii-app .text-state { color: #047857; }
.achizitii-app .text-signal { color: var(--signal); }
.achizitii-app .text-meta { color: var(--meta); }

.achizitii-app .border-ink { border-color: var(--ink); }
.achizitii-app .border-paper { border-color: var(--paper); }
.achizitii-app .border-stamp { border-color: var(--stamp); }

/* Hover variants — must escape colon for Tailwind-style class names */
.achizitii-app .hover\:bg-stamp:hover { background-color: var(--stamp); color: var(--paper); }
.achizitii-app .hover\:bg-stamp\/10:hover { background-color: rgba(37, 99, 235, 0.10); }
.achizitii-app .hover\:bg-paper:hover { background-color: var(--paper); }
.achizitii-app .hover\:bg-ink:hover { background-color: var(--ink); color: var(--paper); }
.achizitii-app .hover\:bg-rule-soft:hover { background-color: var(--rule-soft); }
.achizitii-app .hover\:text-stamp:hover { color: var(--stamp); }
.achizitii-app .hover\:text-ink:hover { color: var(--ink); }
.achizitii-app .hover\:text-paper:hover { color: var(--paper); }
.achizitii-app .hover\:border-stamp:hover { border-color: var(--stamp); }
.achizitii-app .hover\:border-paper:hover { border-color: var(--paper); }

/* ===== Typography ===== */
.achizitii-app .tracking-meta {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.achizitii-app .label-meta {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
}
.achizitii-app .normal-case { text-transform: none; }
.achizitii-app .tracking-normal { letter-spacing: 0; }

.achizitii-app .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.achizitii-app .font-display {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.achizitii-app .font-serif { font-family: 'Plus Jakarta Sans', Georgia, serif; }

/* ===== Buttons ===== */
.achizitii-app .btn-brutal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.achizitii-app .btn-brutal:hover {
  background: var(--ink);
  color: var(--paper);
}
.achizitii-app .btn-brutal-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border: 1px solid var(--stamp);
  background: var(--stamp);
  color: var(--paper);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.achizitii-app .btn-brutal-primary:hover {
  background: var(--stamp-deep);
  border-color: var(--stamp-deep);
}

/* ===== Form inputs ===== */
.achizitii-app .input-brutal {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  outline: none;
  transition: all 150ms;
  width: 100%;
}
.achizitii-app .input-brutal:focus {
  border-color: var(--stamp);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.achizitii-app .input-brutal::placeholder {
  color: #94A3B8;
}

/* ===== Chips / pills ===== */
.achizitii-app .chip-brutal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
  white-space: nowrap;
}
.achizitii-app .chip-brutal:hover {
  background: var(--rule-soft);
  border-color: #CBD5E1;
}
/* Chips with explicit bg-ink override (active state) */
.achizitii-app .chip-brutal.bg-ink,
.achizitii-app .chip-brutal.bg-stamp {
  border-color: transparent;
}

/* ===== Tables (data-dense default for sub-app) ===== */
.achizitii-app table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.achizitii-app th {
  text-align: left;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--meta);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--rule-soft);
}
.achizitii-app td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.achizitii-app tbody tr:hover td {
  background: rgba(241, 245, 249, 0.6);
}

/* Visual rule under section headers — replaces brutalist double border */
.achizitii-app .rule-meta {
  height: 1px;
  background: linear-gradient(90deg, var(--rule) 0%, transparent 100%);
  margin: 8px 0 16px;
}

/* Mini sub-nav strip — used at top of every /achizitii page */
.achizitii-subnav {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink-soft);
}
.achizitii-subnav-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
}
.achizitii-subnav a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 4px 0;
  transition: color 120ms;
  font-size: 11.5px;
}
.achizitii-subnav a:hover { color: var(--paper); }
.achizitii-subnav a.is-active { color: #93C5FD; }
.achizitii-subnav-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 13px;
  color: var(--paper) !important;
  text-transform: none !important;
}
.achizitii-subnav-spacer { flex: 1; }
.achizitii-subnav-back { font-size: 11px; opacity: 0.6; }
.achizitii-subnav-back:hover { opacity: 1; }

/* ===== Cards & panels ===== */
.achizitii-app .panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
}
.achizitii-app .panel-tight { padding: 12px 14px; }

/* ===== Misc helpers used in stash pages ===== */
.achizitii-app .max-w-content { max-width: 72rem; margin-left: auto; margin-right: auto; }

/* ===== Responsive guard ===== */
@media (max-width: 720px) {
  .achizitii-subnav-inner { gap: 10px; flex-wrap: wrap; padding: 10px 12px; }
  .achizitii-subnav a { font-size: 10.5px; }
}
