:root {
  --primary: #2b5ec8;
  --primary-hover: #234fa9;
  --secondary: #1aab8e;
  --accent: #7a67d8;
  --surface: #ffffff;
  --surface-alt: #f3f6fb;
  --background: #edf2f8;
  --border: #d6deea;
  --text-primary: #132033;
  --text-secondary: #5a6a7e;
  --success: #1e9b69;
  --warning: #c1841b;
  --danger: #c64545;
  --info: #2f6db2;

  --success-soft: #e7f7f0;
  --warning-soft: #fff4dd;
  --danger-soft: #ffeceb;
  --info-soft: #e9f2ff;

  /* legacy aliases for existing markup compatibility */
  --color-bg: var(--background);
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-alt);
  --color-border: var(--border);
  --color-text: var(--text-primary);
  --color-text-soft: var(--text-secondary);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);


  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.1rem;
  --radius-xl: 1.35rem;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(15, 32, 53, 0.06);
  --shadow-md: 0 10px 24px rgba(15, 32, 53, 0.08);
  --shadow-lg: 0 20px 44px rgba(15, 32, 53, 0.12);

  --font-body: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #f7f9fc 0%, var(--background) 240px, var(--background) 100%);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.55;
}

main.container {
  max-width: 1120px;
  padding-bottom: var(--space-7) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--text-primary);
  font-weight: 620;
  letter-spacing: -0.013em;
}

small,
.small,
.text-muted {
  color: var(--text-secondary) !important;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover {
  color: var(--primary-hover);
}

.navbar {
  background: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(140%) blur(6px);
  padding-block: 0.72rem;
}

.navbar-brand {
  color: var(--text-primary) !important;
  font-weight: 640;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.68rem;
  color: var(--text-primary) !important;
  font-weight: 640;
  letter-spacing: 0.01em;
}

.brand-link img {
  width: 146px;
  height: auto;
  display: block;
}

.main-nav {
  gap: 0.4rem;
}

.navbar .nav-link {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-pill);
  padding: 0.46rem 0.86rem;
  font-weight: 520;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.navbar .nav-link:hover {
  color: var(--text-primary) !important;
  background: var(--surface-alt);
  border-color: #e0e6f1;
}

.navbar .nav-link.is-active {
  color: var(--primary) !important;
  background: #eaf0fb;
  border-color: #d5e0f8;
}

.hero {
  background: linear-gradient(156deg, #2f5fc6 0%, #2c73aa 54%, #1fa08d 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero h1,
.hero .h3,
.hero p {
  color: inherit;
}

.hero .btn-light {
  border: 1px solid rgba(255, 255, 255, 0.56);
  color: #17325f;
}

.hero .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.hero .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

.item-card {
  overflow: hidden;
}

.item-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 240px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.item-preview__image,
.item-preview__placeholder {
  max-width: 100%;
  max-height: 100%;
}

.item-preview__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.item-preview__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card .h4,
.card .h5,
.card .h6 {
  margin-bottom: 0.9rem;
}

.card .list-group-item {
  border-color: #e2e8f2;
  padding-inline: 0;
}

.list-group-flush > .list-group-item {
  background: transparent;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.77rem;
  line-height: 1.2;
  padding: 0.3rem 0.72rem;
  border-radius: var(--radius-pill);
  border: 1px solid #cddcf7;
  background: #edf2fe;
  color: #2a579e;
  font-weight: 610;
}

/* compatibility: avoid :has selector for wider browser support */
.status-pill + form,
form + .status-pill {
  margin-top: 0.35rem;
}

form.card,
.card form {
  margin-bottom: 0;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.form-control,
.form-select {
  border-radius: var(--radius-md);
  border: 1px solid #ccd8e9;
  padding: 0.6rem 0.78rem;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-control::placeholder {
  color: #7e8da1;
}

textarea.form-control {
  min-height: 110px;
}

.form-control:hover,
.form-select:hover {
  border-color: #b8c9df;
}

.form-control:focus,
.form-select:focus {
  border-color: #8aacef;
  box-shadow: 0 0 0 0.2rem rgba(43, 94, 200, 0.15);
}

.form-control:disabled,
.form-select:disabled,
.btn:disabled {
  background: #f2f5fa;
  color: #8a98ab;
  border-color: #d8e0eb;
  cursor: not-allowed;
}

.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  padding: 0.56rem 0.92rem;
  transition: transform 0.14s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(43, 94, 200, 0.22);
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: #96aedf;
}

.btn-outline-primary:hover {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.btn-light {
  background: #fff;
  border-color: #d5deea;
}

.btn-light:hover {
  background: #f8faff;
  border-color: #c7d5ea;
}

.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.alert-success {
  background: var(--success-soft);
  color: #1e694b;
  border-color: #bde8d4;
}

.alert-danger {
  background: var(--danger-soft);
  color: #8e3131;
  border-color: #f2c4c1;
}

.alert-warning {
  background: var(--warning-soft);
  color: #85580f;
  border-color: #f0d4a0;
}

.alert-info {
  background: var(--info-soft);
  color: #2e5a98;
  border-color: #c5d9fb;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #f5f8fd;
  --bs-table-hover-bg: #edf2fb;
  margin-bottom: 0;
}

.table thead th {
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 640;
  border-bottom-width: 1px;
}

.table td,
.table th {
  border-color: var(--border);
  vertical-align: middle;
  padding-block: 0.8rem;
}

.border,
.rounded {
  border-color: var(--border) !important;
}

.border.rounded {
  border-radius: var(--radius-md) !important;
  background: var(--surface-alt);
}

.card-img-top {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  height: 210px;
  object-fit: cover;
}

.auth-page {
  background: radial-gradient(circle at 16% -5%, rgba(43, 94, 200, 0.15) 0%, rgba(43, 94, 200, 0) 46%), linear-gradient(180deg, #f8fafe 0%, #eef3fa 100%);
}

.auth-brand-panel {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 1.4rem;
}

.auth-brand-panel img {
  width: min(230px, 52vw);
  height: auto;
  opacity: 0.95;
}

.auth-page .card {
  box-shadow: var(--shadow-lg);
  border-color: #d5deeb;
}

.auth-page main.container {
  padding-top: var(--space-5);
}

.app-footer {
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-size: 0.86rem;
}

.app-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  color: var(--text-secondary);
}

.app-footer .footer-brand img {
  width: 22px;
  height: 22px;
}

@media (max-width: 991.98px) {
  .navbar .container {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .main-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.45rem;
  }
}

@media (max-width: 767.98px) {
  main.container {
    padding-inline: 0.85rem;
  }

  .brand-link img {
    width: 128px;
  }

  .card,
  .hero {
    border-radius: var(--radius-lg);
  }

  .btn,
  .form-control,
  .form-select {
    min-height: 42px;
  }

  .table-responsive {
    border-radius: var(--radius-md);
  }

  .app-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-secondary);
  margin: 1rem 0;
  font-size: 0.88rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.login-divider span {
  padding: 0 0.75rem;
}