/* ============================================================
   Ράμμος ΑΕ — Σύστημα Ψηφιοποίησης Καταλόγων Οπλισμού
   Design System — Industrial / Steel αισθητική
   ============================================================ */

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

:root {
  /* Steel palette — χάλυβας */
  --steel-50: #f6f7f8;
  --steel-100: #eaecef;
  --steel-200: #d2d7dd;
  --steel-300: #aab3be;
  --steel-400: #7c8896;
  --steel-500: #5d6a7a;
  --steel-600: #495362;
  --steel-700: #3c4450;
  --steel-800: #343a44;
  --steel-900: #2e333b;
  --steel-950: #1a1d22;

  /* Brand accent — εταιρικό μπορντό Ράμμος ΑΕ (RGB 129,1,50) */
  --forge-400: #b83a63;
  --forge-500: #9a1244;
  --forge-600: #810132;
  --forge-700: #6a0129;

  /* Status */
  --ok: #16a34a;
  --ok-bg: #f0fdf4;
  --warn: #d97706;
  --warn-bg: #fffbeb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  --shadow-panel: 0 1px 3px rgba(26,29,34,0.08), 0 1px 2px rgba(26,29,34,0.04);
  --shadow-raised: 0 4px 12px rgba(26,29,34,0.10), 0 2px 4px rgba(26,29,34,0.06);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--steel-800);
  background: var(--steel-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--steel-900); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 11px 20px; border: none; border-radius: var(--radius);
  cursor: pointer; transition: all 0.15s ease; text-decoration: none;
}
.btn-primary { background: var(--forge-600); color: white; }
.btn-primary:hover { background: var(--forge-700); transform: translateY(-1px); box-shadow: var(--shadow-raised); }
.btn-secondary { background: var(--steel-200); color: var(--steel-800); }
.btn-secondary:hover { background: var(--steel-300); }
.btn-ghost { background: transparent; color: var(--steel-600); border: 1px solid var(--steel-300); }
.btn-ghost:hover { background: var(--steel-50); border-color: var(--steel-400); }
.topbar .btn-ghost:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---- Forms ---- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-weight: 600; font-size: 14px;
  color: var(--steel-700); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; font-size: 15px; font-family: var(--font-body);
  border: 1.5px solid var(--steel-300); border-radius: var(--radius);
  background: white; color: var(--steel-900); transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--forge-500);
  box-shadow: 0 0 0 3px rgba(129,1,50,0.12);
}

/* ---- Cards / Panels ---- */
.panel {
  background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel); border: 1px solid var(--steel-200);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  font-family: var(--font-display);
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-steel { background: var(--steel-200); color: var(--steel-700); }
.badge-forge { background: var(--forge-400); color: white; }

/* ---- Status dots ---- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-processing { background: var(--forge-500); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- Top bar ---- */
.topbar {
  background: #8c8c8a; color: white;
  padding: 0 24px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--forge-600); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; color: white;
}
.topbar-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: white; }
.topbar-sub { font-size: 12px; color: #f0f0f0; }

/* ---- Utilities ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.muted { color: var(--steel-500); }
.mono { font-family: var(--font-mono); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.text-sm { font-size: 14px; } .text-xs { font-size: 12px; }
.spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }