:root {
  --red: #d71920;
  --red-dark: #a90f15;
  --soft: #f4f5f7;
  --ink: #25282d;
}
body {
  background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
  color: var(--ink);
  min-height: 100vh;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.topbar {
  background: #fff;
  border-bottom: 1px solid rgba(215, 25, 32, 0.12);
}
.navbar {
  min-height: 72px;
}
.container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-link-small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 14px;
  transition: background 0.2s ease;
}
.nav-link-small:hover {
  background: rgba(215, 25, 32, 0.08);
}
.nav-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #fff;
  color: var(--red);
  border: 1px solid rgba(215, 25, 32, 0.18);
  box-shadow: 0 6px 18px rgba(215, 25, 32, 0.12);
}
.app-card {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.08);
}
.dashboard-page {
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 40px;
}
.dashboard-menu {
  display: grid;
  gap: 18px;
}
.dashboard-menu-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 74px;
  padding: 18px 24px;
  border: 1.8px solid var(--red);
  border-radius: 24px;
  background: #fff;
  color: var(--red);
  text-decoration: none;
  box-shadow: 0 20px 30px rgba(215, 25, 32, 0.08);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.dashboard-menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 38px rgba(215, 25, 32, 0.16);
}
.dashboard-menu-card .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(215, 25, 32, 0.12);
  color: var(--red);
  font-size: 1.1rem;
}
.dashboard-menu-card .card-label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dashboard-card {
  border: 1px solid rgba(215, 25, 32, 0.14);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 52px rgba(17, 24, 39, 0.08);
  overflow: hidden;
}
.dashboard-card.weather-card {
  min-height: 460px;
}
.dashboard-card.usage-card {
  min-height: 460px;
}
.dashboard-card-header {
  padding: 24px 24px 0;
}
.dashboard-card-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.dashboard-card-title i {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(215, 25, 32, 0.12);
  color: var(--red);
}
.dashboard-card-body {
  padding: 24px;
  position: relative;
}
.dashboard-card-body.chart-body {
  padding-top: 20px;
  padding-bottom: 20px;
}
.dashboard-card-meta {
  margin: 0 0 12px;
  color: #4c5158;
  font-size: 0.95rem;
  line-height: 1.8;
}
.watermark {
  position: absolute;
  inset: 180px 24px 24px;
  background: url('data:image/svg+xml,%3Csvg width="280" height="200" viewBox="0 0 280 200" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ctext x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Segoe UI, sans-serif" font-size="36" fill="rgba(215,25,32,0.06)"%3EMASTER SPARE LIST%3C/text%3E%3C/text%3E%3C/svg%3E')
    no-repeat center center/contain;
  opacity: 0.25;
}
.dashboard-footer {
  margin-top: 32px;
  padding: 20px 26px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--red), #ff7a70);
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(215, 25, 32, 0.18);
}
.btn-danger {
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-hover-bg: var(--red-dark);
  --bs-btn-hover-border-color: var(--red-dark);
}
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at top left,
      rgba(215, 25, 32, 0.12),
      transparent 30%
    ),
    linear-gradient(135deg, #ffffff 0%, #f2f3f5 100%);
}
.login-card {
  width: min(100%, 440px);
  border: 0;
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(17, 24, 39, 0.14);
}
.logo-badge {
  width: 74px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--red);
  color: #fff;
  font-size: 32px;
}
.table-card {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.08);
}
.form-control,
.form-select {
  border-radius: 12px;
  padding: 0.72rem 0.9rem;
}
.stat-pill {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.07);
}
.fade-up {
  animation: fadeUp 0.36s ease both;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dashboard-page {
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 40px;
}
.dashboard-menu {
  display: grid;
  gap: 18px;
}
.dashboard-menu-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 74px;
  padding: 18px 24px;
  border: 1.8px solid var(--red);
  border-radius: 24px;
  background: #fff;
  color: var(--red);
  text-decoration: none;
  box-shadow: 0 20px 30px rgba(215, 25, 32, 0.08);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.dashboard-menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 38px rgba(215, 25, 32, 0.16);
}
.dashboard-menu-card .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(215, 25, 32, 0.12);
  color: var(--red);
  font-size: 1.1rem;
}
.dashboard-menu-card .card-label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dashboard-card {
  border: 1px solid rgba(215, 25, 32, 0.14);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 52px rgba(17, 24, 39, 0.08);
  overflow: hidden;
}
.dashboard-card.weather-card,
.dashboard-card.usage-card {
  min-height: 460px;
}
.dashboard-card-header {
  padding: 24px 24px 0;
}
.dashboard-card-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.dashboard-card-title i {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(215, 25, 32, 0.12);
  color: var(--red);
}
.dashboard-card-body {
  padding: 24px;
  position: relative;
}
.dashboard-card-body.chart-body {
  padding-top: 20px;
  padding-bottom: 20px;
}
.dashboard-card-meta {
  margin: 0 0 12px;
  color: #4c5158;
  font-size: 0.95rem;
  line-height: 1.8;
}
.watermark {
  position: absolute;
  inset: 180px 24px 24px;
  background: url('data:image/svg+xml,%3Csvg width="280" height="200" viewBox="0 0 280 200" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ctext x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Segoe UI, sans-serif" font-size="36" fill="rgba(215,25,32,0.06)"%3EMASTER SPARE LIST%3C/text%3E%3C/svg%3E')
    no-repeat center center/contain;
  opacity: 0.25;
}
.dashboard-footer {
  margin-top: 32px;
  padding: 20px 26px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--red), #ff7a70);
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(215, 25, 32, 0.18);
}
@media (max-width: 768px) {
  .dashboard-page {
    padding: 20px 16px 28px;
  }
  .dashboard-card-body.chart-body {
    padding-bottom: 22px;
  }
}
@media (max-width: 576px) {
  .dashboard-menu-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }
  .dashboard-menu-card .card-icon {
    width: 48px;
    height: 48px;
  }
  .dashboard-card {
    border-radius: 20px;
  }
}

.reference-login {
  background: #fff;
  align-items: center;
  justify-items: center;
}
.reference-login-card {
  width: min(100%, 402px);
  min-height: 526px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}
.reference-login-card .card-body {
  padding: 96px 30px 28px;
  display: flex;
  flex-direction: column;
}
.reference-logo-wrap {
  min-height: 178px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.reference-logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: scale(0.9);
}
.reference-gear {
  color: #ff3131;
  font-size: 42px;
  line-height: 1;
}
.reference-logo-text {
  display: grid;
  line-height: 1;
}
.reference-logo-text small {
  justify-self: end;
  color: #ff3131;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0;
}
.reference-logo-text strong {
  color: #20242a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}
.reference-logo-text em {
  color: #20242a;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 5px;
}
.reference-login-form {
  margin-top: auto;
}
.reference-login-form .form-label {
  margin-bottom: 6px;
  color: #1f2933;
  font-weight: 700;
}
.reference-input {
  height: 40px;
  border: 1.5px solid #ff3131;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}
.reference-input:focus {
  border-color: #ff3131;
  box-shadow: 0 0 0 0.18rem rgba(255, 49, 49, 0.13);
}
.password-line {
  position: relative;
}
.password-line .reference-input {
  padding-right: 42px;
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #ff3131;
  opacity: 0.7;
}
.reference-login-button {
  height: 42px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(90deg, #ff3131 0%, #ff7b78 100%);
}
.reference-login-button:hover,
.reference-login-button:focus {
  color: #fff;
  background: linear-gradient(90deg, #e92727 0%, #ff6966 100%);
}
@media (max-width: 576px) {
  .reference-login-card {
    min-height: 500px;
  }
  .reference-login-card .card-body {
    padding: 82px 26px 26px;
  }
}

/* Reference-style admin dashboard */
body:has(.dashboard-page) {
  background: #f6f7f9;
}

.topbar {
  background: #fff;
  border-bottom: 0;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.14);
  z-index: 1030;
}

.navbar {
  min-height: 60px;
  padding: 0 8px;
}

.navbar-brand {
  color: #df0000 !important;
  font-size: 1.08rem;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-mark {
  width: 46px;
  display: inline-flex;
  justify-content: center;
  color: #ff1f1f;
  font-size: 0.7rem;
}

.nav-link-small {
  gap: 6px;
  padding: 8px 4px;
  border-radius: 0;
  color: #df0000;
  font-size: 0.96rem;
  font-weight: 700;
}

.nav-link-small i {
  font-size: 1.35rem;
}

.nav-link-small:hover {
  background: transparent;
  color: #b90000;
}

.nav-icon,
.nav-icon:hover,
.nav-icon:focus {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #df0000;
}

.nav-icon::after {
  display: none;
}

.dashboard-page {
  max-width: none;
  min-height: calc(100vh - 60px);
  margin: 0;
  padding: 32px 5.85vw 86px;
  background: #f7f8fa;
}

.dashboard-menu {
  gap: 12px;
  margin-bottom: 70px !important;
}

.dashboard-menu-card {
  position: relative;
  min-height: 62px;
  padding: 14px 28px 14px 18px;
  border: 1px solid #ff2020;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  color: #e30000;
}

.dashboard-menu-card.active {
  background: #ffe4e4;
  box-shadow: 0 12px 24px rgba(255, 32, 32, 0.08);
}

.dashboard-menu-card:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(255, 32, 32, 0.08);
  background: #fff7f7;
}

.dashboard-menu-card .card-icon {
  width: 36px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  color: #df0000;
  font-size: 1.45rem;
}

.dashboard-menu-card .card-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.menu-chevron {
  margin-left: auto;
  color: #fff;
  font-size: 1.2rem;
}

.dashboard-widget-row {
  justify-content: center;
  column-gap: clamp(90px, 22vw, 480px);
}

.dashboard-widget-row > [class*="col-"] {
  flex: 0 0 482px;
  width: 482px;
  max-width: calc(100vw - 32px);
}

.dashboard-card {
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.03);
}

.dashboard-card.weather-card,
.dashboard-card.dashboard-card-chart {
  min-height: 456px;
}

.dashboard-card-header {
  padding: 22px 21px 0;
}

.dashboard-card-title {
  gap: 8px;
  color: #3e4146;
  font-size: 1.13rem;
  font-weight: 700;
}

.dashboard-card-title i {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #666b70;
  font-size: 1.16rem;
}

.dashboard-card-body {
  min-height: 386px;
  padding: 12px 21px 24px;
}

.dashboard-card-body.chart-body {
  height: 382px;
  padding: 18px 44px 24px;
}

.dashboard-card-meta {
  margin-bottom: 15px;
  color: #34373c;
  font-size: 0.86rem;
  line-height: 1.7;
}

.watermark {
  inset: 145px 26px 42px;
  background: url('data:image/svg+xml,%3Csvg width="430" height="190" viewBox="0 0 430 190" xmlns="http://www.w3.org/2000/svg"%3E%3Cg opacity="0.18"%3E%3Cpath fill="%23ff2d2d" d="M70 45h28l6 24 22 9 21-13 20 20-13 21 9 22 24 6v28l-24 6-9 22 13 21-20 20-21-13-22 9-6 24H70l-6-24-22-9-21 13-20-20 13-21-9-22-24-6v-28l24-6 9-22L1 85l20-20 21 13 22-9 6-24Zm14 50a53 53 0 1 0 0 106 53 53 0 0 0 0-106Z"/%3E%3Ctext x="160" y="92" font-family="Arial, sans-serif" font-size="18" fill="%23ff2d2d"%3EMAYORA%3C/text%3E%3Ctext x="95" y="126" font-family="Arial, sans-serif" font-size="34" font-weight="700" fill="%233b3f45"%3EMASTER SPARE LIST%3C/text%3E%3Ctext x="98" y="160" font-family="Arial, sans-serif" font-size="28" letter-spacing="18" fill="%233b3f45"%3EENGINEERING%3C/text%3E%3C/g%3E%3C/svg%3E') no-repeat center center/contain;
  opacity: 1;
  pointer-events: none;
}

.dashboard-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  margin: 0;
  padding: 15px 20px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #ff3c6b 0%, #ff4930 100%);
  box-shadow: none;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
}

@media (max-width: 992px) {
  .dashboard-page {
    padding: 24px 16px 86px;
  }

  .dashboard-menu {
    margin-bottom: 32px !important;
  }

  .dashboard-widget-row {
    row-gap: 24px;
  }
}

@media (max-width: 576px) {
  .navbar .container-fluid {
    gap: 10px;
  }

  .navbar-brand {
    font-size: 0.82rem;
  }

  .nav-link-small span,
  .nav-link-small {
    font-size: 0.82rem;
  }

  .dashboard-menu-card {
    flex-direction: row;
    align-items: center;
    min-height: 58px;
    padding: 12px 16px;
  }

  .dashboard-card.weather-card,
  .dashboard-card.dashboard-card-chart {
    min-height: 420px;
  }

  .dashboard-card-body.chart-body {
    height: 340px;
    padding-inline: 18px;
  }
}

/* Pixel-match dashboard reference overrides */
body:has(.dashboard-page) {
  overflow-x: hidden;
  background: #f6f7f9;
}

body:has(.dashboard-page) .topbar {
  height: 60px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

body:has(.dashboard-page) .navbar {
  min-height: 60px;
  height: 60px;
  padding: 0 13px;
}

body:has(.dashboard-page) .navbar-brand {
  gap: 12px !important;
  color: #e40000 !important;
  font-size: 1.12rem;
  font-weight: 500 !important;
  letter-spacing: 0;
}

body:has(.dashboard-page) .brand-mark {
  width: 44px;
  height: 20px;
  background: url('data:image/svg+xml,%3Csvg width="96" height="40" viewBox="0 0 96 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg opacity="0.95"%3E%3Cpath fill="%23ff2e2e" d="M13 7h6l2 6 5 2 5-3 4 4-3 5 2 5 6 2v6l-6 2-2 5 3 5-4 4-5-3-5 2-2 6h-6l-2-6-5-2-5 3-4-4 3-5-2-5-6-2v-6l6-2 2-5-3-5 4-4 5 3 5-2 2-6Zm3 13a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"/%3E%3Ctext x="42" y="14" font-family="Arial" font-size="6" fill="%23ff2e2e" font-weight="700"%3EMAYORA%3C/text%3E%3Ctext x="31" y="24" font-family="Arial" font-size="8" fill="%2324292f" font-weight="700"%3EMASTER SPARE LIST%3C/text%3E%3Ctext x="32" y="34" font-family="Arial" font-size="6" fill="%2324292f" letter-spacing="2"%3EENGINEERING%3C/text%3E%3C/g%3E%3C/svg%3E') no-repeat left center/contain;
}

body:has(.dashboard-page) .brand-mark i {
  display: none;
}

body:has(.dashboard-page) .navbar .ms-auto {
  gap: 28px !important;
}

body:has(.dashboard-page) .nav-link-small {
  gap: 6px;
  padding: 0;
  color: #e00000;
  font-size: 0.96rem;
  font-weight: 700;
}

body:has(.dashboard-page) .nav-link-small i {
  color: #e00000;
  font-size: 1.37rem;
}

body:has(.dashboard-page) .nav-icon,
body:has(.dashboard-page) .nav-icon:hover,
body:has(.dashboard-page) .nav-icon:focus {
  width: 20px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e00000;
}

body:has(.dashboard-page) .dashboard-page {
  display: block;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 32px 5.85vw 86px !important;
  background: #f7f8fa;
}

body:has(.dashboard-page) .dashboard-menu {
  width: 100%;
  max-width: none;
  gap: 12px;
  margin: 0 0 70px !important;
}

body:has(.dashboard-page) .dashboard-menu-card,
body:has(.dashboard-page) .dashboard-menu-card.active {
  width: 100% !important;
  min-height: 62px;
  padding: 13px 20px;
  border: 1px solid #ff2020;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  color: #e00000;
}

body:has(.dashboard-page) .dashboard-menu-card:hover {
  background: #fff;
  box-shadow: none;
}

body:has(.dashboard-page) .dashboard-menu-card .card-icon {
  width: 34px;
  height: 34px;
  margin-right: 18px;
  border-radius: 0;
  background: transparent;
  color: #e00000;
  font-size: 1.45rem;
}

body:has(.dashboard-page) .dashboard-menu-card:nth-child(2) .card-icon {
  color: #f3c233;
}

body:has(.dashboard-page) .dashboard-menu-card:nth-child(2) .card-icon::before {
  content: "";
  position: absolute;
}

body:has(.dashboard-page) .dashboard-menu-card:nth-child(4) .card-icon {
  color: #0c0c0c;
}

body:has(.dashboard-page) .dashboard-menu-card .card-label {
  color: #e00000;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
}

body:has(.dashboard-page) .menu-chevron {
  margin-left: auto;
  padding-right: 8px;
  color: #fff;
  font-size: 1.1rem;
}

body:has(.dashboard-page) .dashboard-widget-row {
  display: flex;
  justify-content: center;
  column-gap: 25.2vw;
  row-gap: 28px;
  margin-left: 0;
  margin-right: 0;
}

body:has(.dashboard-page) .dashboard-widget-row > [class*="col-"] {
  flex: 0 0 482px !important;
  width: 482px !important;
  max-width: 482px !important;
  padding-left: 0;
  padding-right: 0;
}

body:has(.dashboard-page) .dashboard-card {
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.025);
  overflow: hidden;
}

body:has(.dashboard-page) .dashboard-card.weather-card,
body:has(.dashboard-page) .dashboard-card.dashboard-card-chart {
  min-height: 456px;
  height: 456px;
}

body:has(.dashboard-page) .dashboard-card-header {
  padding: 22px 21px 0;
}

body:has(.dashboard-page) .dashboard-card-title {
  gap: 8px;
  color: #3b3e43;
  font-size: 1.13rem;
  font-weight: 700;
}

body:has(.dashboard-page) .dashboard-card-title i {
  width: auto;
  height: auto;
  background: transparent;
  color: #666a6f;
  font-size: 1.18rem;
}

body:has(.dashboard-page) .dashboard-card-body {
  position: relative;
  min-height: 390px;
  padding: 12px 21px 24px;
}

body:has(.dashboard-page) .dashboard-card-meta {
  position: relative;
  z-index: 2;
  margin: 0 0 15px;
  color: #2f3338;
  font-size: 0.86rem;
  line-height: 1.55;
}

body:has(.dashboard-page) .watermark,
body:has(.dashboard-page) .dashboard-card-chart .chart-body::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 148px;
  bottom: 36px;
  background: url('data:image/svg+xml,%3Csvg width="520" height="210" viewBox="0 0 520 210" xmlns="http://www.w3.org/2000/svg"%3E%3Cg opacity="0.16"%3E%3Cpath fill="%23ff3131" d="M79 27h35l8 31 27 12 27-17 25 25-17 27 12 27 31 8v35l-31 8-12 27 17 27-25 25-27-17-27 12-8 31H79l-8-31-27-12-27 17-25-25 17-27-12-27-31-8v-35l31-8 12-27-17-27 25-25 27 17 27-12 8-31Zm17 62a66 66 0 1 0 0 132 66 66 0 0 0 0-132Z"/%3E%3Ctext x="390" y="72" font-family="Arial, sans-serif" font-size="20" fill="%23ff3131"%3EMAYORA%3C/text%3E%3Ctext x="104" y="113" font-family="Arial, sans-serif" font-size="39" font-weight="700" fill="%23383d44"%3EMASTER SPARE LIST%3C/text%3E%3Ctext x="106" y="152" font-family="Arial, sans-serif" font-size="30" letter-spacing="18" fill="%23383d44"%3EENGINEERING%3C/text%3E%3C/g%3E%3C/svg%3E') no-repeat center center/contain;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

body:has(.dashboard-page) .dashboard-card-body.chart-body {
  height: 386px;
  min-height: 386px;
  padding: 18px 54px 12px;
}

body:has(.dashboard-page) .dashboard-card-body.chart-body canvas {
  position: relative;
  z-index: 2;
}

body:has(.dashboard-page) .dashboard-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 15px 20px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #ff3b6f 0%, #ff4630 100%);
  color: #fff;
  font-size: 0.83rem;
  font-weight: 500;
  box-shadow: none;
}

@media (max-width: 1200px) {
  body:has(.dashboard-page) .dashboard-widget-row {
    column-gap: 48px;
  }
}

@media (max-width: 992px) {
  body:has(.dashboard-page) .dashboard-page {
    padding: 24px 16px 86px !important;
  }

  body:has(.dashboard-page) .dashboard-menu {
    margin-bottom: 32px !important;
  }

  body:has(.dashboard-page) .dashboard-widget-row > [class*="col-"] {
    flex-basis: min(482px, calc(100vw - 32px)) !important;
    width: min(482px, calc(100vw - 32px)) !important;
    max-width: min(482px, calc(100vw - 32px)) !important;
  }
}

/* Public welcome page */
body:has(.welcome-page) {
  min-height: 100vh;
  background: #f6f7f9;
  overflow: hidden;
}

.welcome-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 20px 78px;
  background: #f6f7f9;
}

.welcome-center {
  width: min(100%, 420px);
  margin-top: 90px;
  text-align: center;
}

.welcome-logo {
  justify-content: center;
  margin: 0 auto 62px;
  transform: scale(0.72);
  transform-origin: center;
}

.welcome-logo .reference-gear {
  font-size: 44px;
}

.welcome-logo .reference-logo-text small {
  font-size: 6px;
}

.welcome-logo .reference-logo-text strong {
  font-size: 12px;
}

.welcome-logo .reference-logo-text em {
  font-size: 8px;
  letter-spacing: 5px;
}

.welcome-center h1 {
  margin: 0 0 12px;
  color: #1f2730;
  font-size: 1.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.welcome-center p {
  margin: 0 0 30px;
  color: #4b535c;
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0;
}

.welcome-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 45px;
  border-radius: 18px;
  background: linear-gradient(90deg, #ff3131 0%, #ff7d79 100%);
  box-shadow: 0 13px 24px rgba(255, 60, 60, 0.18);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.welcome-login-button:hover,
.welcome-login-button:focus {
  color: #fff;
  background: linear-gradient(90deg, #f12b2b 0%, #ff706c 100%);
}

.welcome-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  padding: 15px 20px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #ff3a35 0%, #ff7d7a 100%);
  color: #fff;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 500;
}

@media (max-width: 576px) {
  body:has(.welcome-page) {
    overflow: auto;
  }

  .welcome-center {
    margin-top: 40px;
  }

  .welcome-logo {
    margin-bottom: 42px;
  }

  .welcome-center h1 {
    font-size: 1.45rem;
  }
}

/* Blue logo theme */
:root {
  --red: #0b8ff5;
  --red-dark: #006dcc;
  --theme-blue: #0b8ff5;
  --theme-blue-dark: #006dcc;
  --theme-blue-soft: #e7f4ff;
  --theme-blue-glow: rgba(11, 143, 245, 0.18);
}

.text-danger,
.dropdown-item.text-danger,
.navbar-brand.text-danger {
  color: var(--theme-blue) !important;
}

.btn-danger,
.reference-login-button,
.welcome-login-button {
  background: linear-gradient(90deg, #0b8ff5 0%, #66c6ff 100%) !important;
  border-color: var(--theme-blue) !important;
  box-shadow: 0 13px 24px rgba(11, 143, 245, 0.2) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.reference-login-button:hover,
.reference-login-button:focus,
.welcome-login-button:hover,
.welcome-login-button:focus {
  background: linear-gradient(90deg, #0077d8 0%, #43b8ff 100%) !important;
  border-color: var(--theme-blue-dark) !important;
}

.reference-gear,
.reference-logo-text small,
.password-toggle,
body:has(.dashboard-page) .navbar-brand,
body:has(.dashboard-page) .nav-link-small,
body:has(.dashboard-page) .nav-link-small i,
body:has(.dashboard-page) .nav-icon,
body:has(.dashboard-page) .nav-icon:hover,
body:has(.dashboard-page) .nav-icon:focus,
.nav-link-small,
.nav-link-small i,
.nav-icon,
.dashboard-menu-card,
.dashboard-menu-card .card-label,
.dashboard-menu-card .card-icon {
  color: var(--theme-blue) !important;
}

.reference-input,
.reference-input:focus {
  border-color: var(--theme-blue) !important;
}

.reference-input:focus {
  box-shadow: 0 0 0 0.18rem rgba(11, 143, 245, 0.13) !important;
}

.brand-logo-img {
  width: 48px;
  height: 24px;
  object-fit: contain;
  object-position: left center;
}

body:has(.dashboard-page) .brand-mark {
  background: none !important;
}

body:has(.dashboard-page) .brand-logo-img {
  width: 50px;
  height: 24px;
}

.welcome-logo-img {
  display: block;
  width: 118px;
  height: 58px;
  margin: 0 auto 60px;
  object-fit: contain;
}

.login-logo-img {
  display: block;
  width: 184px;
  height: 96px;
  object-fit: contain;
}

.reference-logo-wrap {
  align-items: flex-start;
}

.dashboard-menu-card,
body:has(.dashboard-page) .dashboard-menu-card,
body:has(.dashboard-page) .dashboard-menu-card.active {
  border-color: var(--theme-blue) !important;
  color: var(--theme-blue) !important;
}

.dashboard-menu-card.active,
body:has(.dashboard-page) .dashboard-menu-card.active {
  background: #fff !important;
  box-shadow: none !important;
}

.dashboard-menu-card:hover,
body:has(.dashboard-page) .dashboard-menu-card:hover {
  background: #f7fbff !important;
  box-shadow: 0 10px 24px rgba(11, 143, 245, 0.08) !important;
}

body:has(.dashboard-page) .dashboard-menu-card:nth-child(2) .card-icon,
body:has(.dashboard-page) .dashboard-menu-card:nth-child(4) .card-icon {
  color: var(--theme-blue) !important;
}

.menu-chevron,
body:has(.dashboard-page) .menu-chevron {
  color: #d9efff !important;
}

.dashboard-card-title i,
body:has(.dashboard-page) .dashboard-card-title i {
  color: #5f6872 !important;
}

.watermark,
body:has(.dashboard-page) .watermark,
body:has(.dashboard-page) .dashboard-card-chart .chart-body::before {
  background: url('../img/logospread-transparent.png') no-repeat center center/contain !important;
  opacity: 0.08 !important;
}

body:has(.dashboard-page) .dashboard-card-chart .chart-body::before {
  top: 116px;
  left: 10px;
  right: 10px;
  bottom: 28px;
  opacity: 0.09 !important;
}

.dashboard-footer,
body:has(.dashboard-page) .dashboard-footer,
.welcome-footer {
  background: linear-gradient(90deg, #008bf5 0%, #66c6ff 100%) !important;
}

.topbar {
  border-bottom-color: rgba(11, 143, 245, 0.12) !important;
}

.nav-link-small:hover {
  background: rgba(11, 143, 245, 0.08) !important;
}

.app-card,
.table-card,
.stat-pill,
.dashboard-card {
  box-shadow: 0 18px 45px rgba(6, 74, 126, 0.08);
}

@media (max-width: 576px) {
  .welcome-logo-img {
    width: 104px;
    height: 52px;
    margin-bottom: 42px;
  }

  .brand-logo-img {
    width: 42px;
  }
}

/* New horizontal blue logo sizing */
.brand-logo-img,
body:has(.dashboard-page) .brand-logo-img {
  width: 58px !important;
  height: 30px !important;
  object-fit: contain !important;
}

.login-logo-img {
  width: 238px !important;
  height: 118px !important;
  object-fit: contain !important;
}

.welcome-logo-img {
  width: 150px !important;
  height: 74px !important;
  object-fit: contain !important;
  margin-bottom: 54px !important;
}

.watermark,
body:has(.dashboard-page) .watermark,
body:has(.dashboard-page) .dashboard-card-chart .chart-body::before {
  background-image: url('../img/logospread-transparent.png') !important;
  opacity: 0.075 !important;
}

body:has(.dashboard-page) .watermark {
  left: 18px !important;
  right: 18px !important;
}

body:has(.dashboard-page) .dashboard-card-chart .chart-body::before {
  opacity: 0.08 !important;
}

@media (max-width: 576px) {
  .login-logo-img {
    width: 210px !important;
    height: 104px !important;
  }

  .welcome-logo-img {
    width: 132px !important;
    height: 66px !important;
  }
}

/* Dashboard stock summary accordion */
.dashboard-menu button.dashboard-menu-card {
  font-family: inherit;
  text-align: left;
}

.dashboard-stock-summary {
  display: grid;
  gap: 26px;
  min-height: 168px;
  padding: 28px 32px;
  border-radius: 8px;
  background: linear-gradient(90deg, #0079df 0%, #0b8ff5 100%);
  box-shadow: 0 24px 36px rgba(7, 84, 148, 0.18);
  color: #fff;
}

.dashboard-stock-summary[hidden] {
  display: none !important;
}

.stock-summary-line {
  color: #fff;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.stock-summary-line:hover,
.stock-summary-line:focus {
  color: #fff;
  text-decoration: underline;
}

body:has(.dashboard-page) .dashboard-menu:has(.dashboard-stock-summary:not([hidden])) {
  margin-bottom: 70px !important;
}

.dashboard-menu-card[aria-expanded="true"] .menu-chevron {
  transform: rotate(180deg);
}

.menu-chevron {
  transition: transform 0.18s ease;
}

/* CSS-only stock summary toggle fix */
.dashboard-stock-toggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.dashboard-stock-toggle + .dashboard-menu-card {
  cursor: pointer;
}

.dashboard-stock-toggle:not(:checked) + .dashboard-menu-card + .dashboard-stock-summary {
  display: none !important;
}

.dashboard-stock-toggle:checked + .dashboard-menu-card + .dashboard-stock-summary {
  display: grid !important;
}

.dashboard-stock-toggle:checked + .dashboard-menu-card .menu-chevron {
  transform: rotate(180deg);
}

/* Input spare parts reference layout */
.stock-input-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 0 88px;
}

.stock-input-card,
.stock-table-card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(6, 74, 126, 0.08);
  overflow: hidden;
}

.stock-input-card {
  margin-bottom: 30px;
}

.stock-panel-header,
.stock-table-toolbar {
  min-height: 53px;
  background: linear-gradient(90deg, #008bf5 0%, #56bfff 100%);
  color: #fff;
}

.stock-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  font-size: 1.08rem;
  font-weight: 700;
}

.stock-input-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 20px;
  padding: 28px 24px 24px;
}

.form-field {
  min-width: 0;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  color: #303640;
  font-size: 0.95rem;
  font-weight: 400;
}

.stock-input-form .form-control,
.stock-input-form .form-select {
  height: 41px;
  border: 1px solid #cbd3dd;
  border-radius: 4px;
  padding: 8px 14px;
  box-shadow: none;
}

.stock-input-form .form-control:focus,
.stock-input-form .form-select:focus {
  border-color: #0b8ff5;
  box-shadow: 0 0 0 0.16rem rgba(11, 143, 245, 0.12);
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.stock-save-button {
  min-width: 90px;
  height: 37px;
  border-radius: 7px !important;
  font-size: 0.88rem;
}

.stock-table-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 25px;
}

.stock-trash-button,
.stock-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  border: 0;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
}

.stock-trash-button {
  width: 98px;
  background: #e9f4ff;
  color: #0b76d7;
}

.stock-export-button {
  height: 27px;
  padding: 0 12px;
  background: #00a65a;
  color: #fff;
  font-size: 0.82rem;
}

.stock-export-button:hover {
  color: #fff;
  background: #008d4d;
}

.stock-table-body {
  padding: 26px 24px 10px;
}

.stock-table-card .dt-layout-row:first-child {
  justify-content: flex-end;
  margin-bottom: 20px;
}

.stock-table-card .dt-layout-cell.dt-start {
  display: none;
}

.stock-table-card .dt-search {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1f2933;
  font-size: 0.88rem;
}

.stock-table-card .dt-search input {
  height: 27px;
  width: 181px;
  border: 1px solid #aeb5bd;
  border-radius: 2px;
}

.stock-input-table {
  width: 100% !important;
  color: #3f4854;
  font-size: 0.95rem;
}

.stock-input-table thead th {
  padding: 14px 10px;
  border-bottom: 1px solid #bfc5cc;
  background: #fafafa;
  color: #1f2933;
  font-weight: 700;
  white-space: nowrap;
}

.stock-input-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #d8dde3;
  vertical-align: middle;
}

.stock-input-table tbody tr {
  min-height: 110px;
}

.stock-type-badge {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 4px;
  background: #e7f4ff;
  color: #0b76d7;
  font-size: 0.72rem;
}

.stock-table-image {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
}

.stock-action-stack {
  display: grid;
  width: 60px;
}

.stock-action-edit,
.stock-action-delete {
  width: 60px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
}

.stock-action-edit {
  border-radius: 5px 5px 0 0;
  background: #4361ee;
}

.stock-action-delete {
  border-radius: 0 0 5px 5px;
  background: #dc3545;
}

.stock-action-edit:hover,
.stock-action-delete:hover {
  color: #fff;
  filter: brightness(0.95);
}

.stock-table-card .dt-layout-row:last-child {
  align-items: center;
  margin-top: 4px;
}

.stock-table-card .dt-info {
  font-size: 0.9rem;
}

.stock-table-card .dt-paging .dt-paging-button {
  min-width: 41px;
  height: 37px;
  border: 1px solid #d3d7dd !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #1f2933 !important;
}

.stock-table-card .dt-paging .dt-paging-button.current {
  background: #f7f7f7 !important;
}

@media (max-width: 992px) {
  .stock-input-page {
    padding: 20px 16px 88px;
  }

  .stock-input-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .stock-input-form {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .stock-table-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding: 14px;
  }
}

/* Line management reference layout */
.line-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 0 92px;
}

.line-title {
  margin: 0 0 22px;
  text-align: center;
  color: #1f2933;
  font-size: 1.9rem;
  font-weight: 700;
}

.line-add-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  margin: 0 0 14px 6px;
  padding: 0 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, #008bf5 0%, #4fbdff 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.line-add-button:hover {
  color: #fff;
  background: linear-gradient(90deg, #0078d8 0%, #39b1ff 100%);
}

.line-form-card,
.line-table-card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(6, 74, 126, 0.08);
}

.line-form-card {
  margin-bottom: 16px;
  padding: 22px 24px;
}

.line-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 18px;
  align-items: end;
}

.line-form label {
  display: block;
  margin-bottom: 7px;
  color: #303640;
}

.line-form-actions {
  display: flex;
  gap: 8px;
}

.line-table-card {
  padding: 26px 24px 22px;
  min-height: 558px;
}

.line-table-card .dt-layout-row:first-child {
  display: block;
  margin-bottom: 2px;
}

.line-table-card .dt-length {
  margin-bottom: 2px;
  color: #1f2933;
  font-size: 0.93rem;
}

.line-table-card .dt-length select {
  height: 24px;
  min-width: 45px;
  padding: 0 4px;
  border: 1px solid #999;
  border-radius: 2px;
}

.line-table-card .dt-search {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 2px;
  color: #1f2933;
  font-size: 0.93rem;
}

.line-table-card .dt-search input {
  width: 173px;
  height: 20px;
  margin-left: 0;
  border: 1px solid #888;
  border-radius: 1px;
}

.line-table {
  width: 100% !important;
  color: #1f2933;
  font-size: 0.95rem;
}

.line-table thead th {
  padding: 16px 15px;
  border-bottom: 1px solid #e5e8ec;
  background: #f8f8f8;
  font-weight: 700;
}

.line-table tbody td {
  height: 119px;
  padding: 16px 15px;
  border-bottom: 1px solid #e4e7eb;
  vertical-align: middle;
}

.line-table th:nth-child(1),
.line-table td:nth-child(1) {
  width: 43%;
}

.line-table th:nth-child(2),
.line-table td:nth-child(2) {
  width: 49%;
}

.line-table th:nth-child(3),
.line-table td:nth-child(3) {
  width: 8%;
  text-align: center;
}

.line-action-stack {
  display: grid;
  justify-content: center;
  width: 58px;
  border-radius: 5px;
  overflow: hidden;
  background: #f1f1f1;
}

.line-edit-button,
.line-delete-button {
  width: 58px;
  height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #f0f0f0;
  text-decoration: none;
  font-size: 0.94rem;
}

.line-edit-button {
  color: #f7a600;
}

.line-delete-button {
  color: #ee3548;
}

.line-edit-button:hover,
.line-delete-button:hover {
  background: #e9f4ff;
}

.line-table-card .dt-layout-row:last-child {
  display: block;
  margin-top: 2px;
}

.line-table-card .dt-info {
  color: #1f2933;
  font-size: 0.94rem;
}

.line-table-card .dt-paging {
  display: flex;
  gap: 0;
  justify-content: flex-start;
  font-size: 0.94rem;
}

.line-table-card .dt-paging .dt-paging-button {
  min-width: auto;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2458ff !important;
}

@media (max-width: 992px) {
  .line-page {
    padding: 20px 16px 92px;
  }

  .line-form {
    grid-template-columns: 1fr;
  }
}

/* Output stock reference layout */
.output-stock-page {
  width: 100%;
  padding: 0 0 92px;
  background: #f7f8fa;
}

.output-form-card,
.output-history-card {
  width: 100%;
  background: #fff;
  overflow: hidden;
}

.output-form-card {
  margin-bottom: 16px;
  border-radius: 8px 8px 0 0;
}

.output-history-card {
  margin: 0 24px;
  width: calc(100% - 48px);
  border-radius: 8px;
}

.output-panel-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  background: linear-gradient(90deg, #008bf5 0%, #56bfff 100%);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 700;
}

.output-stock-form {
  padding: 24px 24px 16px;
}

.output-form-subtitle {
  margin-bottom: 26px;
  color: #111827;
  font-size: 0.9rem;
}

.output-field {
  margin-bottom: 22px;
}

.output-field label {
  display: block;
  margin-bottom: 10px;
  color: #444b54;
  font-weight: 700;
}

.output-field label i {
  color: #555;
}

.output-field .form-select,
.output-field .form-control {
  width: 100%;
  height: 41px;
  border: 1px solid #c8d0d9;
  border-radius: 4px;
  box-shadow: none;
}

.output-field .form-select:focus,
.output-field .form-control:focus {
  border-color: #0b8ff5;
  box-shadow: 0 0 0 0.16rem rgba(11, 143, 245, 0.12);
}

.output-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 4px;
  width: 220px;
}

.output-submit-button,
.output-light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  text-decoration: none;
  font-size: 0.95rem;
}

.output-submit-button {
  width: 174px;
  height: 46px;
  margin-bottom: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #008bf5 0%, #56bfff 100%);
  color: #fff;
  font-weight: 600;
}

.output-submit-button:hover {
  filter: brightness(0.96);
}

.output-light-button {
  height: 46px;
  margin-top: 0;
  padding: 0 20px;
  border-radius: 3px;
  background: #efefef;
  color: #000;
}

.output-light-button:hover {
  color: #000;
  background: #e5e5e5;
}

.output-history-card .output-panel-header {
  min-height: 52px;
  padding-left: 27px;
}

.output-table-wrap {
  padding: 26px 12px 16px;
}

.output-history-card .dt-layout-row:first-child {
  justify-content: flex-end;
  margin-bottom: 0;
}

.output-history-card .dt-layout-cell.dt-start {
  display: none;
}

.output-history-card .dt-search {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #111827;
  font-size: 0.93rem;
}

.output-history-card .dt-search input {
  width: 181px;
  height: 27px;
  border: 1px solid #9ca3af;
  border-radius: 2px;
}

.output-history-table {
  width: 100% !important;
  color: #111827;
  font-size: 0.94rem;
}

.output-history-table thead th {
  padding: 14px 12px;
  border-bottom: 1px solid #aeb4bc;
  background: #fafafa;
  color: #111827;
  font-weight: 700;
  white-space: nowrap;
}

.output-history-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid #e1e5ea;
  vertical-align: middle;
}

.output-history-table tbody td strong {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 800;
}

.output-history-table tbody td small {
  color: #111827;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.output-pdf-link {
  color: #3867ff;
  font-size: 1rem;
}

.output-action-row {
  display: flex;
  gap: 5px;
}

.output-edit-button,
.output-delete-button {
  width: 59px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1rem;
}

.output-edit-button {
  background: #efefef;
  color: #000;
}

.output-delete-button {
  background: #dc3545;
  color: #fff;
}

.output-edit-button:hover,
.output-delete-button:hover {
  filter: brightness(0.96);
}

.output-history-card .dt-layout-row:last-child {
  align-items: center;
  margin-top: 4px;
}

.output-history-card .dt-info {
  color: #111827;
  font-size: 0.94rem;
}

.output-history-card .dt-paging .dt-paging-button {
  min-width: 42px;
  height: 38px;
  border: 1px solid #c7ccd3 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #111827 !important;
}

.output-history-card .dt-paging .dt-paging-button.current {
  background: linear-gradient(#333, #0f0f0f) !important;
  color: #fff !important;
}

@media print {
  .topbar,
  .output-form-card,
  .dashboard-footer,
  .welcome-footer {
    display: none !important;
  }

  .output-history-card {
    margin: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .output-history-card {
    margin: 0 12px;
    width: calc(100% - 24px);
  }

  .output-stock-form {
    padding-inline: 16px;
  }
}

/* Users management reference layout */
.users-page {
  max-width: 1162px;
  margin: 0 auto;
  padding: 20px 0 92px;
}

.users-card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(6, 74, 126, 0.08);
  overflow: hidden;
}

.users-card-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(90deg, #008bf5 0%, #56bfff 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(6, 74, 126, 0.15);
}

.users-card-header h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.54rem;
  font-weight: 700;
}

.users-card-header h1 i {
  font-size: 1.7rem;
}

.users-add-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.users-add-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
}

.users-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #d7ecff;
}

.users-form .form-control,
.users-form .form-select {
  height: 38px;
  border-radius: 4px;
}

.users-form-actions {
  display: flex;
  gap: 8px;
}

.users-table-wrap {
  padding: 24px 0 18px;
}

.users-card .dt-layout-row:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0;
  margin: 0;
}

.users-card .dt-layout-cell.dt-start,
.users-card .dt-layout-cell.dt-end {
  padding: 0;
}

.users-card .dt-length {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #111827;
  font-size: 0.94rem;
}

.users-card .dt-length::before {
  content: 'Tampilkan';
}

.users-card .dt-length label {
  font-size: 0;
}

.users-card .dt-length label::after {
  content: ' data per halaman';
  font-size: 0.94rem;
}

.users-card .dt-length select {
  height: 28px;
  min-width: 53px;
  border: 1px solid #a4a9b0;
  border-radius: 4px;
}

.users-card .dt-search {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #111827;
  font-size: 0.94rem;
}

.users-card .dt-search label {
  font-size: 0;
}

.users-card .dt-search label::after {
  content: 'Cari:';
  font-size: 0.94rem;
}

.users-card .dt-search input {
  width: 181px;
  height: 28px;
  border: 1px solid #9da3ab;
  border-radius: 2px;
}

.users-table {
  width: 100% !important;
  margin-top: 0 !important;
  color: #4a5563;
  font-size: 0.94rem;
}

.users-table thead th {
  padding: 14px 10px;
  border-bottom: 1px solid #9fbad4;
  background: #eaf6ff;
  color: #006dcc;
  font-weight: 800;
}

.users-table tbody td {
  padding: 8px 10px;
  height: 50px;
  border-bottom: 1px solid #c8e6ff;
  vertical-align: middle;
}

.users-table th:nth-child(1),
.users-table td:nth-child(1) {
  width: 8%;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
  width: 36%;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
  width: 25%;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
  width: 13%;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
  width: 18%;
}

.users-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.users-edit-button,
.users-delete-button {
  width: 33px;
  height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.94rem;
}

.users-edit-button {
  background: #dcefff;
  color: #008bf5;
}

.users-delete-button {
  background: #e7f4ff;
  color: #006dcc;
}

.users-delete-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.users-card .dt-layout-row:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid #c8e6ff;
}

.users-card .dt-info {
  color: #111827;
  font-size: 0;
}

.users-card .dt-info::before {
  content: 'Halaman 1 dari 1';
  font-size: 0.94rem;
}

.users-card .dt-paging {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #4a5563;
}

.users-card .dt-paging .dt-paging-button {
  min-width: auto;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #4a5563 !important;
}

.users-card .dt-paging .dt-paging-button.current {
  min-width: 43px;
  height: 43px;
  border: 1px solid #adb5bd !important;
  background: #fff !important;
  color: #111827 !important;
}

@media (max-width: 992px) {
  .users-page {
    padding: 20px 16px 92px;
  }

  .users-form {
    grid-template-columns: 1fr 1fr;
  }

  .users-card-header {
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 14px;
  }
}

@media (max-width: 640px) {
  .users-form {
    grid-template-columns: 1fr;
  }
}

/* Employee management reference layout */
.employees-page {
  max-width: 1162px;
  margin: 0 auto;
  padding: 18px 0 92px;
}

.employees-card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(6, 74, 126, 0.08);
  overflow: hidden;
}

.employees-card-header {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(90deg, #008bf5 0%, #56bfff 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(6, 74, 126, 0.15);
}

.employees-card-header h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.54rem;
  font-weight: 700;
}

.employees-card-header h1 i {
  font-size: 1.7rem;
}

.employees-add-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.employees-add-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
}

.employees-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid #d7ecff;
}

.employees-form .form-control {
  height: 38px;
  border-radius: 4px;
}

.employees-form-actions {
  display: flex;
  gap: 8px;
}

.employees-toolbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 25px;
}

.employees-trash-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: #e7f4ff;
  color: #006dcc;
  font-size: 0.85rem;
}

.employees-table-wrap {
  padding: 0 0 18px;
}

.employees-card .dt-layout-row:first-child {
  display: none;
}

.employees-table {
  width: 100% !important;
  margin: 0 !important;
  color: #4a5563;
  font-size: 0.94rem;
}

.employees-table thead th {
  padding: 18px 20px;
  border-bottom: 1px solid #9fbad4;
  background: #eaf6ff;
  color: #006dcc;
  font-weight: 800;
}

.employees-table tbody td {
  height: 57px;
  padding: 9px 20px;
  border-bottom: 1px solid #c8e6ff;
  vertical-align: middle;
}

.employees-table th:nth-child(1),
.employees-table td:nth-child(1) {
  width: 17%;
}

.employees-table th:nth-child(2),
.employees-table td:nth-child(2) {
  width: 35%;
}

.employees-table th:nth-child(3),
.employees-table td:nth-child(3) {
  width: 16%;
}

.employees-table th:nth-child(4),
.employees-table td:nth-child(4) {
  width: 16%;
}

.employees-table th:nth-child(5),
.employees-table td:nth-child(5) {
  width: 16%;
}

.employees-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.employees-edit-button,
.employees-delete-button {
  width: 33px;
  height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.94rem;
}

.employees-edit-button {
  background: #dcefff;
  color: #008bf5;
}

.employees-delete-button {
  background: #e7f4ff;
  color: #006dcc;
}

.employees-edit-button:hover,
.employees-delete-button:hover {
  filter: brightness(0.96);
}

.employees-card .dt-layout-row:last-child {
  display: none;
}

@media (max-width: 992px) {
  .employees-page {
    padding: 20px 16px 92px;
  }

  .employees-form {
    grid-template-columns: 1fr 1fr;
  }

  .employees-card-header {
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 14px;
  }
}

@media (max-width: 640px) {
  .employees-form {
    grid-template-columns: 1fr;
  }
}

/* Role based dashboard */
.dashboard-page.dashboard-user .dashboard-menu {
  margin-bottom: 70px !important;
}

.dashboard-page.dashboard-user .dashboard-menu-card {
  min-height: 62px;
}

.dashboard-page.dashboard-user .dashboard-widget-row {
  margin-top: 0;
}

body:has(.dashboard-page.dashboard-user) .dropdown-menu {
  min-width: 180px;
  padding: 14px 16px;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14) !important;
}

body:has(.dashboard-page.dashboard-user) .dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0b8ff5 !important;
  font-size: 1rem;
}

/* Navbar dropdown blue theme cleanup */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item i {
  color: #0b8ff5 !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: #e7f4ff !important;
  color: #006dcc !important;
}

.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i {
  color: #006dcc !important;
}

.dropdown-divider {
  border-top-color: #d7ecff !important;
}

/* Customer logo navy theme override */
:root {
  --red: #173755;
  --red-dark: #0d2944;
  --theme-blue: #173755;
  --theme-blue-dark: #0d2944;
  --theme-blue-soft: #eaf1f7;
  --theme-blue-glow: rgba(23, 55, 85, 0.18);
}

.navbar-brand,
.navbar-brand.text-danger,
.nav-link-small,
.nav-link-small i,
.nav-icon,
.nav-icon:hover,
.nav-icon:focus,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item i,
.dashboard-menu-card,
.dashboard-menu-card .card-label,
.dashboard-menu-card .card-icon,
body:has(.dashboard-page) .navbar-brand,
body:has(.dashboard-page) .nav-link-small,
body:has(.dashboard-page) .nav-link-small i,
body:has(.dashboard-page) .nav-icon,
body:has(.dashboard-page) .dashboard-menu-card .card-label,
body:has(.dashboard-page) .dashboard-menu-card .card-icon {
  color: #173755 !important;
}

.brand-logo-img,
body:has(.dashboard-page) .brand-logo-img {
  width: 72px !important;
  height: 34px !important;
  object-fit: contain !important;
}

.login-logo-img {
  width: 290px !important;
  height: 118px !important;
  object-fit: contain !important;
}

.welcome-logo-img {
  width: 230px !important;
  height: 96px !important;
  object-fit: contain !important;
  margin-bottom: 46px !important;
}

.dashboard-menu-card,
body:has(.dashboard-page) .dashboard-menu-card,
body:has(.dashboard-page) .dashboard-menu-card.active,
.reference-input,
.reference-input:focus {
  border-color: #173755 !important;
}

.nav-link-small:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dashboard-menu-card:hover,
body:has(.dashboard-page) .dashboard-menu-card:hover {
  background: #eaf1f7 !important;
  color: #0d2944 !important;
}

.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i {
  color: #0d2944 !important;
}

.btn-danger,
.reference-login-button,
.welcome-login-button,
.stock-panel-header,
.stock-table-toolbar,
.line-add-button,
.users-card-header,
.users-add-button,
.employees-card-header,
.employees-add-button,
.output-panel-header,
.output-submit-button,
.dashboard-footer,
body:has(.dashboard-page) .dashboard-footer,
.welcome-footer {
  background: linear-gradient(90deg, #173755 0%, #2f5d84 100%) !important;
  border-color: #173755 !important;
  color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.reference-login-button:hover,
.reference-login-button:focus,
.welcome-login-button:hover,
.welcome-login-button:focus,
.line-add-button:hover,
.users-add-button:hover,
.employees-add-button:hover,
.output-submit-button:hover {
  background: linear-gradient(90deg, #0d2944 0%, #244c70 100%) !important;
  border-color: #0d2944 !important;
  color: #fff !important;
}

.stock-export-button {
  background: #173755 !important;
  color: #fff !important;
}

.stock-trash-button,
.employees-trash-button,
.users-edit-button,
.users-delete-button,
.employees-edit-button,
.employees-delete-button,
.stock-type-badge,
.output-edit-button {
  background: #eaf1f7 !important;
  color: #173755 !important;
}

.stock-input-table thead th,
.line-table thead th,
.users-table thead th,
.employees-table thead th {
  background: #eef4f9 !important;
  color: #173755 !important;
}

.stock-input-table tbody td,
.line-table tbody td,
.users-table tbody td,
.employees-table tbody td {
  border-bottom-color: #d8e5ef !important;
}

.users-card .dt-paging .dt-paging-button.current,
.output-history-card .dt-paging .dt-paging-button.current {
  background: linear-gradient(#173755, #0d2944) !important;
  color: #fff !important;
}

.output-pdf-link,
.line-edit-button,
.password-toggle {
  color: #173755 !important;
}

.watermark,
body:has(.dashboard-page) .watermark,
body:has(.dashboard-page) .dashboard-card-chart .chart-body::before {
  background-image: url('../img/logospread-transparent.png') !important;
  opacity: 0.065 !important;
}

.reference-input:focus,
.stock-input-form .form-control:focus,
.stock-input-form .form-select:focus,
.output-field .form-select:focus,
.output-field .form-control:focus {
  box-shadow: 0 0 0 0.16rem rgba(23, 55, 85, 0.14) !important;
}

.dropdown-divider {
  border-top-color: #d8e5ef !important;
}

/* Wider customer logo display fix */
.login-logo-img {
  width: 340px !important;
  height: 118px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.reference-logo-wrap {
  min-height: 178px !important;
  overflow: visible !important;
}

.welcome-logo-img {
  width: 300px !important;
  height: 104px !important;
  max-width: 92vw !important;
  object-fit: contain !important;
}

.brand-logo-img,
body:has(.dashboard-page) .brand-logo-img {
  width: 92px !important;
  height: 34px !important;
  object-fit: contain !important;
}

@media (max-width: 576px) {
  .login-logo-img {
    width: 300px !important;
    height: 104px !important;
  }

  .welcome-logo-img {
    width: 260px !important;
    height: 94px !important;
  }
}

/* Final responsive hardening for phone, tablet, and laptop layouts */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-width: 0;
}

img,
canvas,
svg {
    max-width: 100%;
}

.table-responsive,
.stock-table-body,
.line-table-card,
.users-table-wrap,
.employees-table-wrap,
.output-table-wrap,
.output-history-card,
.card-body {
    min-width: 0;
}

.navbar .container-fluid {
    min-width: 0;
    gap: 14px;
}

.navbar-brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar .ms-auto {
    flex-shrink: 0;
}

.dashboard-page,
.stock-input-page,
.line-page,
.users-page,
.employees-page {
    width: 100%;
    max-width: min(1162px, calc(100vw - 32px));
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 112px !important;
    margin-left: auto;
    margin-right: auto;
}

.output-stock-page {
    width: 100%;
    max-width: 100%;
    padding-bottom: 112px !important;
}

.output-stock-page .output-form-card,
.output-stock-page .output-history-card {
    width: calc(100vw - 48px);
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dashboard-menu-card,
.dashboard-stock-summary,
.stock-input-card,
.stock-list-card,
.line-table-card,
.users-card,
.employees-card {
    max-width: 100%;
}

.dashboard-widget-row {
    max-width: 100%;
}

.dashboard-widget-row > [class*="col-"] {
    min-width: 0;
}

.dashboard-widget-card {
    width: 100%;
    max-width: 482px;
    margin-left: auto;
    margin-right: auto;
}

.stock-input-form,
.line-form,
.users-form,
.employees-form {
    min-width: 0;
}

.form-control,
.form-select,
.btn,
input,
select,
textarea {
    max-width: 100%;
}

.stock-input-table,
.line-table,
.users-table,
.employees-table,
.output-history-table {
    width: 100% !important;
}

.dataTables_wrapper,
.dataTables_wrapper .row,
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollBody {
    max-width: 100%;
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
}

@media (max-width: 1200px) {
    .dashboard-page,
    .stock-input-page,
    .line-page,
    .users-page,
    .employees-page {
        max-width: calc(100vw - 28px);
    }

    .dashboard-widget-row {
        column-gap: clamp(24px, 7vw, 120px) !important;
    }

    .output-stock-page .output-form-card,
    .output-stock-page .output-history-card {
        width: calc(100vw - 32px);
    }
}

@media (max-width: 992px) {
    .dashboard-page {
        padding-top: 28px !important;
    }

    .dashboard-menu-card {
        width: 100% !important;
        min-height: 64px;
    }

    .dashboard-widget-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 28px !important;
        column-gap: 0 !important;
        justify-content: center !important;
    }

    .dashboard-widget-row > [class*="col-"] {
        width: 100% !important;
        max-width: 520px !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dashboard-widget-card {
        min-height: 420px !important;
    }

    .dashboard-chart-card canvas {
        max-height: 320px !important;
    }

    .stock-input-form,
    .line-form,
    .users-form,
    .employees-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stock-input-form .form-wide,
    .stock-input-form .form-actions,
    .line-form .form-wide,
    .users-form .form-wide,
    .employees-form .form-wide {
        grid-column: 1 / -1 !important;
    }

    .stock-input-table,
    .output-history-table {
        min-width: 980px;
    }

    .users-table,
    .employees-table {
        min-width: 760px;
    }

    .line-table {
        min-width: 620px;
    }
}

@media (max-width: 768px) {
    .navbar {
        min-height: 64px;
    }

    .navbar .container-fluid {
        flex-wrap: nowrap;
        padding-left: 12px;
        padding-right: 12px;
    }

    .navbar-brand {
        max-width: 48vw;
        font-size: 0.76rem !important;
        letter-spacing: 0.14em !important;
    }

    .brand-logo-img {
        width: 72px !important;
        height: 28px !important;
        object-fit: contain !important;
    }

    .nav-link-small {
        font-size: 0.82rem !important;
        gap: 4px !important;
    }

    .nav-link-small i,
    .navbar-menu-trigger i {
        font-size: 1rem !important;
    }

    .dashboard-page,
    .stock-input-page,
    .line-page,
    .users-page,
    .employees-page {
        max-width: calc(100vw - 20px);
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .dashboard-menu-card {
        padding: 12px 18px !important;
        border-radius: 14px !important;
        min-height: 58px;
    }

    .dashboard-menu-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .dashboard-menu-title {
        font-size: 0.9rem !important;
    }

    .dashboard-stock-summary {
        padding: 18px 20px !important;
    }

    .dashboard-stock-summary p {
        font-size: 0.9rem !important;
        line-height: 1.55;
    }

    .dashboard-widget-card {
        min-height: 360px !important;
        padding: 22px 20px !important;
    }

    .dashboard-logo-watermark {
        width: 86% !important;
    }

    .stock-input-card,
    .stock-list-card,
    .line-table-card,
    .users-card,
    .employees-card,
    .output-stock-page .output-form-card,
    .output-stock-page .output-history-card {
        border-radius: 10px !important;
    }

    .stock-input-card-header,
    .stock-list-toolbar,
    .users-header,
    .employees-header,
    .output-section-header {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .stock-table-toolbar,
    .users-table-controls,
    .employees-table-controls,
    .output-history-controls,
    .line-table-controls {
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .stock-table-toolbar .search-box,
    .users-table-controls .search-box,
    .employees-table-controls .search-box,
    .output-history-controls .search-box {
        width: 100% !important;
        max-width: none !important;
    }

    .footer,
    .dashboard-footer,
    .welcome-footer {
        min-height: 52px !important;
        padding: 14px 12px !important;
        font-size: 0.78rem !important;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .navbar .container-fluid {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .navbar-brand {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        font-size: 0.74rem !important;
    }

    .navbar .ms-auto {
        width: 100%;
        justify-content: flex-end;
        gap: 12px !important;
    }

    .navbar-menu-dropdown {
        right: 8px !important;
        left: auto !important;
        max-width: calc(100vw - 16px);
    }

    .login-card,
    .reference-login-card,
    .welcome-panel {
        width: calc(100vw - 28px) !important;
        max-width: 420px !important;
    }

    .login-logo-img {
        width: 280px !important;
        height: auto !important;
        max-height: none !important;
    }

    .welcome-logo-img {
        width: 280px !important;
        height: auto !important;
    }

    .dashboard-page,
    .stock-input-page,
    .line-page,
    .users-page,
    .employees-page {
        max-width: calc(100vw - 14px);
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .dashboard-menu-stack {
        gap: 12px !important;
    }

    .dashboard-menu-card {
        padding: 10px 14px !important;
    }

    .dashboard-widget-row > [class*="col-"] {
        max-width: 100% !important;
    }

    .dashboard-widget-card {
        min-height: 330px !important;
        padding: 18px 16px !important;
    }

    .dashboard-chart-card canvas {
        max-height: 250px !important;
    }

    .stock-input-form,
    .line-form,
    .users-form,
    .employees-form {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .stock-input-card-body,
    .line-form,
    .users-form,
    .employees-form,
    .output-form-body {
        padding: 20px 14px !important;
    }

    .stock-input-card-header,
    .stock-list-toolbar,
    .users-header,
    .employees-header,
    .output-section-header {
        min-height: 56px !important;
        padding: 14px !important;
    }

    .users-header,
    .employees-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .users-header .btn,
    .employees-header .btn {
        width: 100%;
        justify-content: center;
    }

    .stock-table-body,
    .line-table-card,
    .users-table-wrap,
    .employees-table-wrap,
    .output-table-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .stock-input-table {
        min-width: 1000px;
    }

    .output-history-table {
        min-width: 1120px;
    }

    .users-table,
    .employees-table {
        min-width: 760px;
    }

    .line-table {
        min-width: 640px;
    }

    .table-action-stack,
    .action-stack {
        min-width: 56px;
    }

    .output-form-actions,
    .stock-table-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .output-form-actions .btn,
    .stock-table-actions .btn {
        flex: 1 1 140px;
    }
}

@media (max-width: 380px) {
    .nav-link-small span {
        display: none;
    }

    .navbar .ms-auto {
        gap: 16px !important;
    }

    .login-logo-img,
    .welcome-logo-img {
        width: 236px !important;
    }

    .dashboard-menu-title {
        font-size: 0.82rem !important;
    }

    .dashboard-widget-card h3,
    .dashboard-widget-title,
    .stock-input-card-header,
    .users-title,
    .employees-title {
        font-size: 1rem !important;
    }
}