/* ═══════════════════════════════════════════════════════════════════════════
   ERP Calibration — Design System
   Aesthetic: Precision Dark — industrial metrology, technical authority
   Fonts: Syne (headings) · DM Sans (body) · JetBrains Mono (data/numbers)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --c-chrome:        #0d1117;
  --c-chrome-s1:     #161b22;
  --c-chrome-s2:     #21262d;
  --c-chrome-border: rgba(255, 255, 255, 0.07);

  --c-page-bg:   #f1f5f9;
  --c-surface:   #ffffff;
  --c-surface-2: #f8fafc;
  --c-border:    #e2e8f0;

  --c-text:       #0f172a;
  --c-text-2:     #334155;
  --c-text-muted: #64748b;
  --c-text-light: rgba(255, 255, 255, 0.88);
  --c-text-faint: rgba(255, 255, 255, 0.38);

  --c-cyan:       #06b6d4;
  --c-cyan-dim:   rgba(6, 182, 212, 0.12);
  --c-green:      #10b981;
  --c-amber:      #f59e0b;
  --c-red:        #ef4444;
  --c-blue:       #3b82f6;
  --c-violet:     #8b5cf6;

  --sidebar-w:    220px;
  --sidebar-w-sm: 64px;
  --navbar-h:     56px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);

  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--c-page-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-text);
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--c-chrome) !important;
  border-bottom: 2px solid var(--c-cyan) !important;
  height: var(--navbar-h);
  padding: 0 1.25rem !important;
}

.navbar .navbar-text,
.navbar .nav-link {
  color: var(--c-text-light) !important;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.navbar .nav-link:hover { color: var(--c-cyan) !important; }

#lang-toggle-btn {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--c-text-faint) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  padding: 0.15rem 0.55rem !important;
  border-radius: 3px !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
}
#lang-toggle-btn:hover {
  border-color: var(--c-cyan) !important;
  color: var(--c-cyan) !important;
}

.navbar a.text-warning { color: var(--c-amber) !important; font-size: 0.85rem; }
.navbar a.text-warning:hover { opacity: 0.8; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--c-chrome) !important;
  border-right: 1px solid var(--c-chrome-border) !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-heading {
  font-family: var(--font-mono) !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: var(--c-text-faint) !important;
  text-transform: uppercase !important;
}

.sidebar-section-label {
  font-family: var(--font-mono) !important;
  font-size: 0.56rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: var(--c-text-faint) !important;
  text-transform: uppercase !important;
  padding: 0 0.6rem !important;
  margin-top: 1.25rem !important;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  border-radius: var(--r-sm) !important;
  padding: 0.5rem 0.65rem !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  border: none !important;
  border-left: 2px solid transparent !important;
}

.sidebar .nav-link:hover {
  background: var(--c-chrome-s1) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.sidebar .nav-link.active {
  background: var(--c-cyan-dim) !important;
  color: var(--c-cyan) !important;
  font-weight: 500 !important;
  border-left-color: var(--c-cyan) !important;
}

/* ── Page content ────────────────────────────────────────────────────────── */
#page-content {
  background: var(--c-page-bg);
  min-height: calc(100vh - var(--navbar-h));
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--c-surface) !important;
}

.card-header {
  border-bottom: 1px solid var(--c-border) !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.65rem 1rem !important;
  border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0 !important;
}

.card-header.bg-primary  { background: var(--c-blue)  !important; border-bottom-color: transparent !important; }
.card-header.bg-success  { background: var(--c-green) !important; border-bottom-color: transparent !important; }
.card-header.bg-warning  { background: var(--c-amber) !important; border-bottom-color: transparent !important; color: var(--c-text) !important; }
.card-header.bg-info     { background: var(--c-cyan)  !important; border-bottom-color: transparent !important; color: var(--c-text) !important; }
.card-header.bg-light    { background: var(--c-surface-2) !important; color: var(--c-text-2) !important; }

/* ── Dashboard KPI cards ─────────────────────────────────────────────────── */
.kpi-card {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--c-surface) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  overflow: hidden !important;
  cursor: pointer;
}

.kpi-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.kpi-number {
  font-family: var(--font-mono) !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0 !important;
  color: var(--c-text) !important;
}

.kpi-label {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--c-text-muted) !important;
  margin-bottom: 0.5rem !important;
}

.kpi-icon {
  font-size: 1.8rem;
  opacity: 0.12;
  color: var(--c-text);
}

/* ── DataTable ───────────────────────────────────────────────────────────── */
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background-color: #f0f9ff !important;
  transition: background-color 0.1s ease;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--c-text-muted) !important;
  background: var(--c-surface-2) !important;
  border-bottom: 2px solid var(--c-border) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  color: var(--c-text) !important;
  border-bottom: 1px solid var(--c-border) !important;
}

/* ── Status badges — soft pills ──────────────────────────────────────────── */
.cell-status-completed,
.cell-status-paid,
.cell-status-final    { background: #dcfce7 !important; color: #166534 !important; font-weight: 600 !important; border-radius: 20px !important; padding: 2px 10px !important; font-size: 0.75rem !important; font-family: var(--font-body) !important; }

.cell-status-failed,
.cell-status-cancelled,
.cell-status-overdue  { background: #fee2e2 !important; color: #991b1b !important; font-weight: 600 !important; border-radius: 20px !important; padding: 2px 10px !important; font-size: 0.75rem !important; font-family: var(--font-body) !important; }

.cell-status-in-progress { background: #cffafe !important; color: #155e75 !important; font-weight: 600 !important; border-radius: 20px !important; padding: 2px 10px !important; font-size: 0.75rem !important; font-family: var(--font-body) !important; }

.cell-status-draft    { background: #f1f5f9 !important; color: #475569 !important; font-weight: 600 !important; border-radius: 20px !important; padding: 2px 10px !important; font-size: 0.75rem !important; font-family: var(--font-body) !important; }

.cell-status-confirmed,
.cell-status-under-review { background: #dbeafe !important; color: #1e40af !important; font-weight: 600 !important; border-radius: 20px !important; padding: 2px 10px !important; font-size: 0.75rem !important; font-family: var(--font-body) !important; }

.cell-status-unpaid   { background: #fef9c3 !important; color: #854d0e !important; font-weight: 600 !important; border-radius: 20px !important; padding: 2px 10px !important; font-size: 0.75rem !important; font-family: var(--font-body) !important; }

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-control, .form-select {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12) !important;
  outline: none !important;
}

.form-control:placeholder-shown { background: var(--c-surface-2) !important; }

.form-label {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--c-text-2) !important;
  margin-bottom: 0.3rem !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  transition: all 0.15s ease !important;
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.2;
  filter: grayscale(100%);
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary,
.btn-secondary {
  transition: opacity 0.15s ease, filter 0.15s ease;
}

/* ── Delete confirm zone ─────────────────────────────────────────────────── */
.delete-confirm-zone {
  border: 1px solid #fecaca;
  border-radius: var(--r-sm);
  background: #fff5f5;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}

/* ── Certificate detail page ─────────────────────────────────────────────── */
.cert-header-card {
  background: linear-gradient(135deg, #0d1117 0%, #0f2744 55%, #0369a1 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(6, 182, 212, 0.18);
}
.cert-header-card .cert-number { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: var(--c-cyan); }
.cert-header-card .cert-meta   { font-size: 0.875rem; opacity: 0.72; }
.cert-info-label  { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; color: var(--c-text-muted); letter-spacing: 0.09em; }
.cert-info-value  { font-size: 0.9rem; color: var(--c-text); }
.cert-section-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  height: 100%;
  background: var(--c-surface);
}
.cert-section-card h6 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--c-text-muted);
  border-bottom: 2px solid var(--c-border);
  padding-bottom: 0.35rem;
  margin-bottom: 0.6rem;
}
.comment-entry {
  border-left: 3px solid var(--c-cyan);
  background: #f0fdff;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.6rem;
}
.comment-entry .comment-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-text-muted); }
.comment-entry .comment-text { font-size: 0.875rem; margin-top: 0.2rem; }

/* ── Section headers ─────────────────────────────────────────────────────── */
.section-header {
  padding: 0.28rem 0.75rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.sh-blue   { border-left: 3px solid var(--c-blue);   background: #eff6ff; color: #1e40af; }
.sh-green  { border-left: 3px solid var(--c-green);  background: #f0fdf4; color: #166534; }
.sh-orange { border-left: 3px solid #f97316;         background: #fff7ed; color: #c2410c; }
.sh-purple { border-left: 3px solid var(--c-violet); background: #f5f3ff; color: #5b21b6; }
.sh-teal   { border-left: 3px solid var(--c-cyan);   background: #ecfeff; color: #155e75; }
.sh-gray   { border-left: 3px solid #94a3b8;         background: #f8fafc; color: #475569; }

/* ── Audit log ───────────────────────────────────────────────────────────── */
.audit-diff-table { font-family: var(--font-mono); font-size: 0.82rem; }
.audit-diff-table td,
.audit-diff-table th { vertical-align: middle; padding: 0.3rem 0.6rem !important; }

.audit-json-block {
  background: var(--c-chrome);
  border: 1px solid var(--c-chrome-s2);
  border-radius: var(--r-sm);
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: #a8b5c9;
  max-height: 420px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Modal nav arrows ────────────────────────────────────────────────────── */
.modal-nav-btn { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page-bg {
  background: var(--c-chrome) !important;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%) !important;
}

.login-card {
  background: var(--c-chrome-s1) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
}

.login-card .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 1.5rem 1.5rem 1rem !important;
}

.login-card .card-header h4 {
  color: var(--c-text-light) !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.login-card .card-body { padding: 1.5rem !important; }

.login-card .form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--c-text-light) !important;
}

.login-card .form-control:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
  color: var(--c-text-light) !important;
}

.login-card .form-control::placeholder { color: rgba(255, 255, 255, 0.3) !important; }

.login-card .form-label {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

.login-card .btn-primary {
  background: var(--c-cyan) !important;
  border-color: var(--c-cyan) !important;
  color: #0d1117 !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

.login-card .btn-primary:hover {
  background: #22d3ee !important;
  border-color: #22d3ee !important;
}

/* ── Sidebar — responsive ─────────────────────────────────────────────────── */
.sidebar-link { display: flex; align-items: center; }

.sidebar-icon {
  display: inline-flex;
  width: 1.2rem;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

@media (min-width: 992px) {
  .sidebar {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: var(--sidebar-w) !important;
    width: var(--sidebar-w) !important;
    height: 100vh !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    padding: 1rem 0.6rem !important;
    margin: 0 !important;
  }
  .sidebar-heading, .sidebar-section-label, .sidebar-label { display: inline !important; }
  .sidebar-link { justify-content: flex-start; }
  .sidebar-link i, .sidebar-link .sidebar-icon { margin-right: 0.5rem !important; }
  #page-content { margin-left: 0 !important; margin-top: 0 !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar {
    min-width: var(--sidebar-w-sm) !important;
    width: var(--sidebar-w-sm) !important;
    position: fixed;
    left: 0;
    top: var(--navbar-h);
    height: calc(100vh - var(--navbar-h)) !important;
    z-index: 1020;
    padding: 0.5rem 0.35rem !important;
    overflow-y: auto;
  }
  .sidebar-heading, .sidebar-section-label, .sidebar-label { display: none !important; }
  .sidebar .nav { gap: 0.15rem; }
  .sidebar .sidebar-link {
    justify-content: center;
    padding: 0.55rem 0.4rem;
    border-radius: var(--r-sm);
  }
  .sidebar .sidebar-link .sidebar-icon { margin-right: 0 !important; font-size: 1.15rem; line-height: 1; }
  .dash-table-container th[data-dash-column="start_date"],
  .dash-table-container td[data-dash-column="start_date"],
  .dash-table-container th[data-dash-column="end_date"],
  .dash-table-container td[data-dash-column="end_date"],
  .dash-table-container th[data-dash-column="technician"],
  .dash-table-container td[data-dash-column="technician"] { display: none !important; }
  #page-content { padding: 0.9rem !important; margin-left: var(--sidebar-w-sm); }
}

@media (max-width: 767.98px) {
  /* Sidebar: hidden off-screen by default, slides in as overlay */
  .sidebar {
    position: fixed !important;
    left: calc(-1 * var(--sidebar-w)) !important;
    top: var(--navbar-h) !important;
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    height: calc(100vh - var(--navbar-h)) !important;
    z-index: 1030 !important;
    transition: left 0.25s ease !important;
    padding: 1rem 0.6rem !important;
    overflow-y: auto;
  }

  /* Restore labels inside the mobile drawer */
  .sidebar-heading, .sidebar-section-label, .sidebar-label { display: inline !important; }
  .sidebar-link { justify-content: flex-start !important; }
  .sidebar-link i, .sidebar-link .sidebar-icon { margin-right: 0.5rem !important; }

  /* Sidebar open: slide in */
  .sidebar-drawer-open .sidebar {
    left: 0 !important;
  }

  /* Page content: no left margin */
  #page-content { padding: 0.9rem !important; margin-left: 0 !important; }

  /* Backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1029;
    cursor: pointer;
  }
  .sidebar-backdrop.active { display: block; }
}