/* =============================================================
   Inventory Management System – Custom Styles
   Bootstrap 5.3 | PHP 8.4
   ============================================================= */

/* ── Root variables ── */
:root {
  --inv-primary:   #0d6efd;
  --inv-dark:      #212529;
  --inv-sidebar:   #1a1d20;
  --inv-card-bg:   #f8f9fa;
  --inv-radius:    0.5rem;
  --inv-shadow:    0 2px 12px rgba(0,0,0,.08);
  --inv-transition: 0.2s ease-in-out;
}

/* ── Base ── */
body { background-color: #f0f2f5; }
.bg-light { background-color: #f0f2f5 !important; }

/* ── Navbar ── */
.navbar-brand { letter-spacing: .04em; font-size: 1.1rem; }
.nav-link { transition: color var(--inv-transition); }
.nav-link.active { color: #fff !important; border-bottom: 2px solid var(--inv-primary); }

/* ── Cards ── */
.card {
  border-radius: var(--inv-radius);
  box-shadow: var(--inv-shadow);
  border: 0;
}
.card-header { border-radius: var(--inv-radius) var(--inv-radius) 0 0 !important; }

/* ── Landing page ── */
.landing-user   { font-size: .85rem; color: #6c757d; letter-spacing: .03em; }
.landing-clock  { font-size: .8rem;  color: #adb5bd; }
.welcome-card   { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); }

/* ── Forms ── */
.form-row-label { font-weight: 600; font-size: .9rem; color: #495057; }
.form-section   { background: #fff; border-radius: var(--inv-radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--inv-shadow); }
.form-section-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #6c757d; margin-bottom: .75rem; border-bottom: 1px solid #e9ecef; padding-bottom: .5rem; }

/* ── Thumbnail ── */
.img-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #dee2e6;
  cursor: pointer;
  transition: transform var(--inv-transition), border-color var(--inv-transition);
}
.img-thumb:hover { transform: scale(1.08); border-color: var(--inv-primary); }

/* ── Gallery ── */
.gallery-card {
  border-radius: var(--inv-radius);
  overflow: hidden;
  box-shadow: var(--inv-shadow);
  transition: transform var(--inv-transition), box-shadow var(--inv-transition);
}
.gallery-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.gallery-card img   { width: 100%; height: 200px; object-fit: cover; }
.gallery-card .card-body { padding: .75rem 1rem; background: #fff; }
.category-badge-1 { background: #0d6efd; }
.category-badge-2 { background: #198754; }
.category-badge-3 { background: #fd7e14; }

/* ── DataTables overrides ── */
div.dataTables_wrapper { padding: .5rem; }
table.dataTable thead { background: #343a40; color: #fff; }
table.dataTable thead th { border-color: #495057 !important; }
.dt-button { border-radius: 4px !important; font-size: .8rem !important; }

/* ── Auth pages ── */
.auth-card     { max-width: 480px; margin: auto; }
.auth-card .card-header { padding: 2rem 1.5rem; }

/* ── Alerts & badges ── */
.alert { border-radius: var(--inv-radius); }
.badge-allowed   { background: #d1e7dd; color: #0a3622; }
.badge-denied    { background: #f8d7da; color: #58151c; }

/* ── Page header strip ── */
.page-header {
  background: #fff;
  border-radius: var(--inv-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--inv-shadow);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.page-header h4 { margin: 0; font-weight: 700; }

/* ── Session log ── */
.log-row-admin { background: #fff3cd; }

/* ── Print / PDF ── */
@media print {
  .navbar, .btn, .dataTables_filter, .dataTables_paginate,
  .dataTables_length, .dataTables_info, .dt-buttons,
  .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #dee2e6; }
  .print-section { page-break-inside: avoid; }
}

/* ── Spinner ── */
.spinner-overlay {
  position: fixed; inset: 0;
  background: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

/* ── Password strength bar ── */
.strength-bar { height: 4px; border-radius: 2px; transition: width .3s, background .3s; }

/* ── Lightbox overlay ── */
#lightbox-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.85); z-index: 10000;
  justify-content: center; align-items: center; cursor: pointer;
}
#lightbox-overlay.active { display: flex; }
#lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 6px; }

/* ── Misc ── */
.cursor-pointer { cursor: pointer; }
.table-action-btns a, .table-action-btns button { padding: .2rem .45rem; font-size: .8rem; }