:root {

  --app-bg-top: #f5f9ff;

  --app-bg-bottom: #eef4ff;

  --app-surface: #ffffff;

  --app-ink: #13253f;

  --app-muted: #5f7189;

  --app-brand: #0d4d8c;

  --app-brand-strong: #083b6d;

  --app-line: #d7e1ee;

  --app-shadow: 0 10px 28px rgba(13, 35, 68, 0.1);

}



html {

  font-size: 14px;

  position: relative;

  min-height: 100%;

}



@media (min-width: 768px) {

  html {

    font-size: 15px;

  }

}



body.app-body {

  font-family: "Segoe UI Variable Text", "Trebuchet MS", "Verdana", sans-serif;

  color: var(--app-ink);

  margin: 0;

  min-height: 100vh;

  background:

    radial-gradient(120% 80% at 0% 0%, rgba(112, 186, 255, 0.28) 0%, transparent 65%),

    linear-gradient(180deg, var(--app-bg-top) 0%, var(--app-bg-bottom) 100%);

}



.app-header {

  position: sticky;

  top: 0;

  z-index: 1030;

  backdrop-filter: blur(6px);

}



.app-navbar {

  background: rgba(255, 255, 255, 0.92);

  border-bottom: 1px solid var(--app-line);

  box-shadow: 0 6px 20px rgba(8, 34, 72, 0.08);

}



.app-brand {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--app-brand-strong);

}



.app-brand-logo {

  height: 34px;

  width: auto;

}



.app-nav-link {

  color: var(--app-ink) !important;

  font-weight: 600;

  border-radius: 999px;

  padding: 0.42rem 0.85rem !important;

}



.app-nav-link:hover,

.app-nav-link:focus {

  background: #e8f0ff;

  color: var(--app-brand-strong) !important;

}



.app-user-pill {

  background: #eaf7ee;

  border: 1px solid #cde8d6;

  color: #235b3d;

  border-radius: 999px;

  padding: 0.35rem 0.8rem !important;

  font-weight: 700;

}



.app-shell {

  padding-top: 1.2rem;

  padding-bottom: 1.2rem;

}



.app-main {

  min-height: calc(100vh - 170px);

}



.app-footer {

  border-top: 1px solid var(--app-line);

  background: rgba(255, 255, 255, 0.75);

  color: var(--app-muted);

  padding: 0.9rem 0;

}



.card,

.table,

.alert,

.modal-content {

  border-color: var(--app-line);

}



.card {

  border-radius: 14px;

  box-shadow: var(--app-shadow);

}



.card-header {

  border-bottom-color: var(--app-line);

}



.table {

  border-radius: 10px;

  overflow: hidden;

  background: #fff;

}



.table thead th {

  background-color: #123964;

  color: #f4f8ff;

  border-bottom: 0;

  font-weight: 700;

}



.table > :not(caption) > * > * {

  border-bottom-color: #e3eaf4;

}



.table-hover > tbody > tr:hover > * {

  background-color: #f2f8ff;

}



.btn {

  border-radius: 10px;

  font-weight: 600;

}



.btn-primary {

  background: linear-gradient(120deg, #0d4d8c 0%, #115fa8 100%);

  border-color: #0d4d8c;

}



.btn-primary:hover,

.btn-primary:focus {

  background: linear-gradient(120deg, #0b4279 0%, #0f5392 100%);

  border-color: #0b4279;

}



.form-control,

.form-select {

  border-color: #cbd8e6;

  border-radius: 10px;

}



.form-control:focus,

.form-select:focus,

.form-check-input:focus,

.btn:focus,

.btn:active:focus,

.btn-link.nav-link:focus {

  border-color: #5a98d8;

  box-shadow: 0 0 0 0.2rem rgba(63, 133, 207, 0.22);

}



.text-muted {

  color: var(--app-muted) !important;

}



/* Legacy module normalization across older views */

.container-fluid.mt-4,

.container-fluid.mt-5 {

  background: rgba(255, 255, 255, 0.65);

  border: 1px solid #dde6f2;

  border-radius: 14px;

  padding: 1.1rem 1.1rem;

  box-shadow: 0 8px 20px rgba(10, 34, 66, 0.06);

}



.display-6,

.h3,

.h4 {

  color: var(--app-ink);

  font-weight: 750;

}



.app-page-title {

  color: var(--app-ink) !important;

  font-weight: 800;

  margin-bottom: 0.35rem;

}



.app-page-subtitle {

  color: var(--app-muted) !important;

  margin-bottom: 0;

}



.card-header.bg-primary,

.card-header.bg-success,

.card-header.bg-dark,

.card-header.bg-info {

  color: #f4f8ff !important;

  border-bottom: 0;

}



.card-header.bg-primary {

  background: linear-gradient(120deg, #0d4d8c 0%, #115fa8 100%) !important;

}



.card-header.bg-success {

  background: linear-gradient(120deg, #0e7f4f 0%, #16925d 100%) !important;

}



.card-header.bg-dark,

.card-header.bg-info {

  background: linear-gradient(120deg, #213752 0%, #2a4f78 100%) !important;

}



.list-group-item-action {

  color: #1f3352;

  font-weight: 600;

}



.list-group-item-action:hover {

  background: #edf4ff;

}



.btn-success {

  background: linear-gradient(120deg, #138854 0%, #18a365 100%);

  border-color: #128352;

}



.btn-success:hover,

.btn-success:focus {

  background: linear-gradient(120deg, #117648 0%, #168f59 100%);

  border-color: #106e43;

}



.btn-danger {

  background: linear-gradient(120deg, #ba2839 0%, #d13848 100%);

  border-color: #af2435;

}



.btn-danger:hover,

.btn-danger:focus {

  background: linear-gradient(120deg, #a82232 0%, #bf3442 100%);

  border-color: #9e2130;

}



@media (max-width: 991.98px) {

  .app-user-nav {

    margin-top: 0.5rem;

  }

}



.product-create-page {

  --pc-surface: #ffffff;

  --pc-ink: #0f172a;

  --pc-muted: #5b6477;

  --pc-accent: #0b6efd;

  --pc-accent-soft: #dbe8ff;

}



.pc-hero {

  color: #f8fbff;

  background: radial-gradient(120% 140% at 8% 0%, #3ea4ff 0%, #005eb8 58%, #003e79 100%);

  border-radius: 1rem;

  padding: 1.25rem 1.5rem;

  box-shadow: 0 18px 30px rgba(0, 34, 74, 0.28);

}



.pc-kicker {

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-weight: 700;

  opacity: 0.88;

}



.pc-title {

  font-size: clamp(1.4rem, 2.3vw, 2rem);

  font-weight: 800;

  line-height: 1.1;

}



.pc-subtitle {

  color: rgba(248, 251, 255, 0.92);

  max-width: 52ch;

}



.pc-card {

  border-radius: 1rem;

  overflow: hidden;

}



.pc-form .pc-label {

  font-size: 0.84rem;

  font-weight: 700;

  color: var(--pc-ink);

  margin-bottom: 0.35rem;

}



.pc-input {

  min-height: 2.85rem;

  border-radius: 0.75rem;

  border: 1px solid #d6dde9;

  background-color: #fbfdff;

}



.pc-input:focus {

  border-color: var(--pc-accent);

  box-shadow: 0 0 0 0.2rem var(--pc-accent-soft);

  background-color: #fff;

}



.pc-switch-wrap {

  background: #f5f8ff;

  border: 1px solid #d8e3ff;

  border-radius: 0.75rem;

  padding: 0.7rem 0.9rem;

}



.pc-switch {

  margin-left: 0;

}



.pc-switch:checked {

  background-color: #0a8f3f;

  border-color: #0a8f3f;

}



.pc-switch-label {

  color: #173053;

  font-weight: 600;

}



.pc-btn-primary {

  border-radius: 0.7rem;

  font-weight: 600;

  padding-inline: 1.1rem;

}



.pc-btn-secondary {

  border-radius: 0.7rem;

  font-weight: 600;

  color: #334155;

}



.pc-tip-card {

  border: 1px solid #dbe7ff;

  background: linear-gradient(180deg, #f8fbff 0%, #edf3ff 100%);

  color: #1f3554;

  border-radius: 1rem;

  padding: 1rem;

  font-size: 0.92rem;

}



@media (max-width: 991.98px) {

  .pc-tip-card {

    margin-top: -0.4rem;

  }

}