/*!
 * NetLoan - Device Lending Management System
 * Copyright (c) 2026 Sascha Kühn - NetCologne GmbH
 * All rights reserved.
 */
/* ── Variables ───────────────────────────────────────────── */
:root {
  --gv-sidebar-width: 210px;
  --gv-topbar-height: 62px;
  --gv-sidebar-bg: #1a1d23;
  --gv-sidebar-text: #a8adb8;
  --gv-sidebar-active-bg: rgba(255,255,255,.08);
  --gv-sidebar-active-text: #fff;
  --gv-sidebar-hover-bg: rgba(255,255,255,.05);
  --gv-sidebar-section: #5c6070;
  --gv-topbar-bg: #fff;
  --gv-body-bg: #f4f6fb;
  --gv-card-shadow: 0 1px 4px rgba(0,0,0,.07);
}

/* ── Base ────────────────────────────────────────────────── */
body { background: var(--gv-body-bg); font-size: .9rem; }

/* ── Topbar ──────────────────────────────────────────────── */
.gv-topbar {
  height: var(--gv-topbar-height);
  background: var(--gv-topbar-bg);
  border-bottom: 1px solid #e5e7eb;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
}
.gv-topbar-left  { display: flex; align-items: center; justify-content: flex-start; }
.gv-topbar-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.15;
}
.gv-brand-link  { text-decoration: none; display: block; }
.gv-brand-net   { font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 1.65rem; color: #1a1a2e; letter-spacing: -.5px; }
.gv-brand-loan  { font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 1.65rem; color: #007a9e; letter-spacing: -.5px; }
.gv-powered     { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: .72rem; color: #888; text-align: center; }
.gv-gk          { color: #007a9e; font-weight: bold; }
.gv-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* ── Layout ──────────────────────────────────────────────── */
.gv-wrapper {
  display: flex;
  padding-top: var(--gv-topbar-height);
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.gv-sidebar {
  width: var(--gv-sidebar-width);
  background: var(--gv-sidebar-bg);
  position: fixed;
  top: var(--gv-topbar-height);
  left: 0; bottom: 0;
  overflow-y: auto;
  padding: 1rem .5rem;
  z-index: 1020;
}
.gv-sidebar .nav-link {
  display: flex; align-items: center; gap: .55rem;
  color: var(--gv-sidebar-text);
  padding: .45rem .75rem;
  border-radius: .4rem;
  font-size: .85rem;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.gv-sidebar .nav-link:hover   { background: var(--gv-sidebar-hover-bg);  color: #fff; }
.gv-sidebar .nav-link.active  { background: var(--gv-sidebar-active-bg); color: var(--gv-sidebar-active-text); font-weight: 500; }
.gv-sidebar .nav-link i       { font-size: 1rem; flex-shrink: 0; }
.sidebar-section {
  font-size: .68rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gv-sidebar-section);
  padding: .9rem .75rem .3rem;
}

/* ── Main ────────────────────────────────────────────────── */
.gv-main {
  margin-left: var(--gv-sidebar-width);
  padding: 1.5rem;
  flex: 1;
  min-width: 0;
}

/* ── Page header ─────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.page-header h1 { font-size: 1.3rem; font-weight: 600; margin: 0; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  border: 1px solid #e5e7eb;
  border-radius: .6rem;
  box-shadow: var(--gv-card-shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid #e9ecef;
  padding: .75rem 1rem;
  font-weight: 500;
  font-size: .88rem;
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card { border-radius: .6rem; padding: 1.1rem 1.25rem; border: 1px solid #e5e7eb; background: #fff; box-shadow: var(--gv-card-shadow); }
.stat-card .stat-label { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: .35rem; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .stat-sub   { font-size: .78rem; color: #9ca3af; margin-top: .25rem; }

/* ── Tables ──────────────────────────────────────────────── */
.table { font-size: .85rem; }
.table th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; border-top: none; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table tbody tr:hover td { background: #f8fafc; }

/* ── Badges ──────────────────────────────────────────────── */
.badge { font-weight: 500; font-size: .73rem; }

/* Status badges */
.badge-status-available   { background: #dcfce7; color: #15803d; }
.badge-status-loaned      { background: #fef9c3; color: #a16207; }
.badge-status-defective   { background: #fee2e2; color: #b91c1c; }
.badge-status-retired     { background: #f3f4f6; color: #4b5563; }
.badge-status-maintenance { background: #e0e7ff; color: #4338ca; }
.badge-status-active      { background: #dcfce7; color: #15803d; }
.badge-status-overdue     { background: #fee2e2; color: #b91c1c; }
.badge-status-returned    { background: #f3f4f6; color: #4b5563; }
.badge-status-cancelled   { background: #f3f4f6; color: #4b5563; }
.badge-status-partially_loaned { background: #ffedd5; color: #c2410c; }
.badge-status-new         { background: #e0e7ff; color: #4338ca; }

/* ── Delivery badges ─────────────────────────────────────── */
.badge-delivery { background: #f1f5f9; color: #475569; }

/* ── Forms ───────────────────────────────────────────────── */
.form-label { font-size: .83rem; font-weight: 500; margin-bottom: .3rem; }
.form-control, .form-select {
  font-size: .875rem;
  border-color: #d1d5db;
  border-radius: .4rem;
}
.form-control:focus, .form-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.15);
}
.form-section-title { font-weight: 600; font-size: .85rem; color: #374151; margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 1px solid #e5e7eb; }

/* ── Delivery option cards ───────────────────────────────── */
.delivery-option input[type=radio] { display: none; }
.delivery-option label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; cursor: pointer; padding: .9rem .5rem;
  border: 2px solid #e5e7eb; border-radius: .5rem;
  font-size: .8rem; font-weight: 500; color: #6b7280;
  transition: all .15s; text-align: center;
}
.delivery-option label i { font-size: 1.5rem; }
.delivery-option input[type=radio]:checked + label {
  border-color: #6366f1; background: #eef2ff; color: #4338ca;
}
.delivery-option label:hover { border-color: #a5b4fc; background: #f5f3ff; }

/* ── Timeline ────────────────────────────────────────────── */
.timeline { position: relative; }
.timeline-item { display: flex; gap: .85rem; padding-bottom: 1.2rem; position: relative; }
.timeline-item:not(:last-child)::before {
  content: ''; position: absolute;
  left: 15px; top: 32px; bottom: 0; width: 1px;
  background: #e5e7eb;
}
.timeline-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .85rem;
}
.timeline-content { flex: 1; }
.timeline-title   { font-size: .85rem; font-weight: 500; color: #111827; }
.timeline-meta    { font-size: .78rem; color: #6b7280; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { border-radius: .4rem; font-size: .85rem; }
.btn-sm { font-size: .8rem; }

/* ── Login page ──────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1d23 0%, #2d3748 100%);
}
.login-card { width: 100%; max-width: 400px; border-radius: .8rem; }
.login-logo  { font-size: 1.5rem; font-weight: 700; color: #4f46e5; }

/* ── Search bar ──────────────────────────────────────────── */
.search-form { max-width: 380px; }

/* ── Pagination / filter pills ───────────────────────────── */
.filter-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .75rem; border-radius: 2rem;
  font-size: .78rem; font-weight: 500;
  border: 1px solid #e5e7eb;
  color: #4b5563; background: #fff;
  text-decoration: none; transition: all .15s;
}
.filter-pill:hover, .filter-pill.active {
  background: #6366f1; color: #fff; border-color: #6366f1;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .gv-sidebar { transform: translateX(-100%); transition: transform .25s; }
  .gv-sidebar.open { transform: translateX(0); }
  .gv-main { margin-left: 0; padding: 1rem; }
}