/* ═══ Kronexia ERP — main.css ═══════════════════════════════════════════════ */

:root {
  --sidebar-width: 230px;
  --sidebar-bg: #1e3a5f;
  --sidebar-brand-bg: #16304f;
  --sidebar-text: #ffffff;
  --sidebar-active: #ffffff;
  --sidebar-hover-bg: rgba(255,255,255,0.08);
  --topbar-h: 52px;
  --content-bg: #f4f6f9;
}

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 14px; background: var(--content-bg); }

/* ── Sidebar shell ─────────────────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width 0.2s ease;
  overflow: hidden;
}

/* ── Brand area — sticky, uses secondary color ─────────────────────────────── */
.sidebar-brand {
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.9rem 1rem 0.75rem;
  background: var(--sidebar-brand-bg);
  color: var(--sidebar-text);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-brand i { font-size: 1.25rem; color: #4dabf7; flex-shrink: 0; }
.sidebar-brand span { overflow: hidden; text-overflow: ellipsis; }

/* ── Scrollable nav area ───────────────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0 1rem;
}

/* ── Nav links ─────────────────────────────────────────────────────────────── */
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.45rem 1rem;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-nav .nav-link:hover  { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
.sidebar-nav .nav-link.active { background: rgba(255,255,255,0.13); color: var(--sidebar-active); font-weight: 600; }
.sidebar-nav .nav-link.disabled { opacity: 0.4; pointer-events: none; }
.sidebar-nav .nav-link i { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; transition: font-size 0.2s ease; }
.sidebar-nav .nav-link span { overflow: hidden; text-overflow: ellipsis; }

/* ── Section headers — collapsible ────────────────────────────────────────── */
.nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text);
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.nav-section-header:hover { opacity: 0.85; }
.nav-section-label { flex: 1; }
.nav-chevron { font-size: 0.65rem; transition: transform 0.22s ease; flex-shrink: 0; }
.nav-section-header.is-collapsed .nav-chevron { transform: rotate(-90deg); }

/* ── Section items container — animated collapse ───────────────────────────── */
.nav-section-items {
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.25s ease;
}
.nav-section-items.is-collapsed { max-height: 0; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  font-size: 0.8rem;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-footer .footer-username { flex: 1; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.sidebar-footer a { color: var(--sidebar-text) !important; opacity: 0.7; }
.sidebar-footer a:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR (56px — icon only)
═══════════════════════════════════════════════════════════════════════════════ */
body.sidebar-collapsed #sidebar { width: 56px; }
body.sidebar-collapsed #main-wrapper { margin-left: 56px; }

/* Brand: hide text, center icon */
body.sidebar-collapsed .sidebar-brand { justify-content: center; gap: 0; padding: 0.9rem 0; }
body.sidebar-collapsed .sidebar-brand span { display: none; }

/* Section headers: hide label + chevron, show as thin divider */
body.sidebar-collapsed .nav-section-header {
  justify-content: center;
  padding: 0.4rem 0;
  opacity: 0.25;
  cursor: default;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 0.15rem;
}
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-chevron { display: none; }

/* Section items: always expanded in icon mode */
body.sidebar-collapsed .nav-section-items { max-height: 600px !important; }

/* Nav links: center icon, bigger, hide text */
body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; gap: 0; padding: 0.5rem 0; }
body.sidebar-collapsed .sidebar-nav .nav-link i { font-size: 1.2rem; width: auto; }
body.sidebar-collapsed .sidebar-nav .nav-link span { display: none; }

/* Footer: hide username, center logout icon */
body.sidebar-collapsed .sidebar-footer { justify-content: center; gap: 0; }
body.sidebar-collapsed .sidebar-footer .footer-username { display: none; }

/* ── Main wrapper ──────────────────────────────────────────────────────────── */
#main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */
#topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#topbar .breadcrumb-item { font-size: 0.85rem; }
#sidebar-toggle { color: #6b7280; }
#sidebar-toggle:hover { color: #1e3a5f; }

/* ── Content ───────────────────────────────────────────────────────────────── */
#content {
  flex: 1;
  padding: 1.25rem 1.5rem;
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.25rem; }
.page-title  { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card { border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.card-header { background: #fff; border-bottom: 1px solid #e5e7eb; font-weight: 600; }

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.stat-card .card-body { padding: 1rem 1.25rem; }
.stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #1e293b; }
.stat-label { font-size: 0.78rem; color: #6b7280; margin-top: 2px; }

/* ── Quick links ────────────────────────────────────────────────────────────── */
.quick-link { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.quick-link:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
.quick-link .card-body { color: #374151; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table { font-size: 0.875rem; }
.table th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover td { background: #f8fafc; }

/* ── Sticky list page header ────────────────────────────────────────────────── */
/* JS in base.html wraps elements before the first table-responsive into this div.
   padding-bottom:1px prevents margin-collapse so the filter card's mb-3 is counted
   in getBoundingClientRect().height and the background fully covers the gap. */
.list-sticky-header {
  position: sticky;
  top: var(--topbar-h);
  z-index: 1020;
  background: var(--content-bg);
  padding-bottom: 1px;
}

/* ── Sticky thead ───────────────────────────────────────────────────────────── */
/* body scrolls. topbar is sticky at 0. .list-sticky-header (when present) is sticky
   at var(--topbar-h). thead sticks below both using --sticky-hdr-h (set by JS).
   !important needed: Bootstrap 5.3 .table>:not(caption)>*>* specificity (0,2,0)
   beats our (0,1,2) — it overrides background and box-shadow. */
.table thead {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sticky-hdr-h, 0px));
  z-index: 5;
}
.table > thead > tr > th {
  background-color: #f8f9fa !important;
  box-shadow: inset 0 -2px 0 #dee2e6 !important;
}
.table > thead.bg-white > tr > th,
.table > thead.table-white > tr > th { background-color: #fff !important; }

/* .table-responsive must not be a scroll container (overflow-x:auto would
   contain sticky positioning and break it). Override to visible so #content
   handles any horizontal overflow. */
.table-responsive { overflow: visible; }

/* ── Zoomable images ────────────────────────────────────────────────────────── */
[data-zoom] { cursor: zoom-in; transition: opacity 0.15s; }
[data-zoom]:hover { opacity: 0.85; }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-label { font-size: 0.8rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; }
.form-control, .form-select { font-size: 0.875rem; border-color: #d1d5db; border-radius: 6px; }
.form-control:focus, .form-select:focus { border-color: #4dabf7; box-shadow: 0 0 0 3px rgba(77,171,247,0.15); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn-primary { background: #1e3a5f; border-color: #1e3a5f; }
.btn-primary:hover { background: #16304f; border-color: #16304f; }

/* ── Art typeahead dropdown — fixed overlay (positioned by JS, never displaces rows) */
.art-search-wrap { position: relative; }
.art-row-dropdown {
  position: fixed;
  z-index: 1070;
  display: none;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
}
.art-row-dropdown.show { display: block; }

/* ── Login page ─────────────────────────────────────────────────────────────── */
.login-body { background: linear-gradient(135deg, #1e3a5f 0%, #2d5986 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-wrapper { width: 100%; max-width: 400px; padding: 1rem; }
.login-card { padding: 2rem; border-radius: 12px; border: none; }

/* ── Badges / misc ───────────────────────────────────────────────────────────── */
.font-monospace { font-family: ui-monospace, monospace; }
.fw-medium { font-weight: 500; }