:root {
  --app-primary: #1f6f5f;
  --app-primary-rgb: 31, 111, 95;
  --app-primary-dark: #174f45;
  --app-accent: #cfe7d8;
  --app-ink: #1b1f24;
  --app-ink-soft: #343a40;
  --app-ink-muted: #545c66;
  --app-surface: rgba(255, 255, 255, 0.92);
  --app-surface-strong: rgba(255, 255, 255, 0.98);
  --app-border: rgba(28, 51, 45, 0.16);
  --app-table-head-bg: rgba(224, 230, 235, 0.98);
  --app-table-head-color: #2c333a;
  --app-shadow: 0 20px 45px rgba(25, 45, 39, 0.08);
  --app-shadow-soft: 0 12px 28px rgba(25, 45, 39, 0.06);
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-body-color: var(--app-ink);
  --bs-secondary-color: var(--app-ink-soft);
  --bs-secondary-rgb: 52, 58, 64;
  --bs-tertiary-color: var(--app-ink-muted);
  --bs-tertiary-rgb: 84, 92, 102;
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary-dark);
  --bs-border-color: var(--app-border);
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(207, 231, 216, 0.75), transparent 34%),
    radial-gradient(circle at top right, rgba(186, 218, 209, 0.55), transparent 28%),
    linear-gradient(180deg, #eef3ef 0%, #f7f8f5 100%);
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #eef3ef 100%, #fafafa 0%);
  color: var(--app-ink);
}

a {
  transition: color 0.18s ease, opacity 0.18s ease;
}

html.js select.tom-select {
  display: none !important;
}

.ts-control,
.ts-input,
.ts-dropdown,
.ts-wrap {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ts-control {
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.ts-input {
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  outline: none;
  background: transparent;
  font: inherit;
}

.ts-dropdown {
  font-size: 0.9375rem;
}

.tom-select-like + .ts-wrapper {
  position: relative;
  width: 100%;
}

.tom-select-like + .ts-wrapper.dropdown-active {
  z-index: 25;
}

.tom-select-like + .ts-wrapper .ts-control {
  position: relative;
  flex-wrap: nowrap;
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 2.5rem 0.375rem 0.75rem;
  border-radius: 0.9rem;
  border-color: rgba(27, 51, 45, 0.14);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.tom-select-like + .ts-wrapper .ts-control > input,
.tom-select-like + .ts-wrapper .ts-control > .item {
  font-size: 1rem;
  line-height: 1.5;
}

.tom-select-like + .ts-wrapper .ts-control > .item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tom-select-like + .ts-wrapper .ts-control > input {
  min-width: 1ch !important;
  flex: 1 1 auto;
}

.tom-select-like + .ts-wrapper .ts-control > input::placeholder {
  color: rgba(74, 98, 91, 0.9);
  opacity: 1;
}

.tom-select-like + .ts-wrapper .ts-dropdown {
  border-radius: 0.9rem;
  border-color: rgba(27, 51, 45, 0.14);
  overflow: hidden;
  z-index: 30;
}

.tom-select-like:disabled + .ts-wrapper .ts-control,
.tom-select-like + .ts-wrapper.disabled .ts-control {
  background-color: rgba(233, 236, 239, 0.9);
  color: rgba(84, 92, 102, 0.95);
  opacity: 1;
}

.tom-select-like.is-invalid + .ts-wrapper .ts-control {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.12);
}

.tom-select-validation-message {
  display: none;
}

.tom-select-validation-message.d-block {
  display: block;
}

.navbar.app-navbar {
  position: relative;
  z-index: 1035;
  isolation: isolate;
  background: rgba(20, 38, 33, 0.88) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(18, 33, 29, 0.22);
}

.app-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.app-navbar .navbar-brand img.poniris-brand-img {
  height: 1.15rem;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.app-navbar .nav-link,
.app-navbar .dropdown-item {
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.app-navbar .navbar-nav .nav-link {
  border-radius: 999px;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.app-navbar .navbar-nav .nav-link:hover,
.app-navbar .navbar-nav .nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.dropdown-menu {
  z-index: 1045;
  border: 1px solid rgba(26, 49, 43, 0.08);
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgba(21, 38, 34, 0.12);
  padding: 0.5rem;
}

.dropdown-item {
  border-radius: 0.75rem;
  padding: 0.55rem 0.8rem;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: rgba(var(--app-primary-rgb), 0.08);
}

.app-shell {
  position: relative;
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 14rem;
  pointer-events: none;
}

.app-shell > :not(.modal) {
  position: relative;
}

.card,
.modal-content {
  border: 1px solid var(--app-border);
  border-radius: 1.25rem;
  background: var(--app-surface-strong);
  box-shadow: var(--app-shadow-soft);
  backdrop-filter: blur(12px);
}

.card-header,
.modal-header,
.modal-footer {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(28, 51, 45, 0.12);
}

.card-header:first-child,
.modal-header:first-child {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.card-footer:last-child,
.modal-footer:last-child {
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}

.btn {
  border-radius: 0.9rem;
  font-weight: 600;
  box-shadow: none;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
  border-width: 1px;
  background-color: rgba(255, 255, 255, 0.92);
}

.btn-outline-primary {
  color: var(--app-primary-dark);
  border-color: rgba(var(--app-primary-rgb), 0.5);
}

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

.btn-primary {
  background: linear-gradient(135deg, #1f6f5f, #2d8b74);
  border-color: transparent;
  box-shadow: 0 14px 24px rgba(var(--app-primary-rgb), 0.18);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, #195a4d, #267260);
  border-color: transparent;
}

.btn-outline-secondary {
  color: var(--app-ink-soft);
  border-color: rgba(26, 49, 43, 0.28);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
  color: var(--app-ink);
  background-color: rgba(19, 43, 36, 0.08);
  border-color: rgba(26, 49, 43, 0.36);
}

.btn-outline-danger {
  color: #a52834;
  border-color: rgba(176, 42, 55, 0.45);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
  color: #fff;
  background-color: #b02a37;
  border-color: #b02a37;
}

.form-control,
.form-select,
.ts-control {
  border-radius: 0.9rem;
  border-color: rgba(27, 51, 45, 0.14);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.form-control::placeholder,
.form-select::placeholder {
  color: rgba(74, 98, 91, 0.9);
}

.form-control:focus,
.form-select:focus,
.ts-control.focus,
.ts-wrapper.focus .ts-control {
  border-color: rgba(var(--app-primary-rgb), 0.36);
  box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-rgb), 0.12);
}

.table-responsive {
  border-radius: 1rem;
}

.card > .card-body > .table-responsive,
.card > .table-responsive,
.modal-content > .modal-body > .table-responsive {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#htmx-toast-container {
  z-index: 1080;
}

#htmx-toast-container .toast {
  min-width: 220px;
}

.table-flash {
  animation: flash 1.2s ease;
}

@keyframes flash {
  from {
    background-color: rgba(255, 223, 93, 0.4);
  }

  to {
    background-color: transparent;
  }
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(19, 43, 36, 0.045);
}

.table th,
.table td {
  vertical-align: middle;
}

.table thead th {
  background-color: var(--app-table-head-bg);
  border-bottom-width: 1px;
  color: var(--app-table-head-color);
}

.table thead.table-light th {
  background-color: var(--app-table-head-bg);
}

.table tbody tr {
  transition: transform 0.16s ease, background-color 0.16s ease;
  border-color: rgba(28, 51, 45, 0.12);
}

.table tbody tr:hover {
  background-color: rgba(233, 240, 236, 0.92);
}

.table tbody td:not(.fw-semibold) {
  color: var(--app-ink-soft);
}

.table thead th,
.table thead th.text-secondary,
.table thead th .text-secondary,
.table thead a,
.table thead a.text-secondary {
  color: var(--app-table-head-color) !important;
}

.table thead a:hover,
.table thead a:focus-visible {
  color: var(--app-ink) !important;
}

.table tbody td {
  color: var(--app-ink);
}

.table .btn-group .btn-sm {
  padding: 0.275rem 0.5rem;
  font-size: 0.78rem;
}

.collapse-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

tr[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-arrow {
  transform: rotate(90deg);
}

.badge {
  border-radius: 999px;
  padding: 0.5em 0.8em;
}

.breadcrumb {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(28, 51, 45, 0.12);
  border-radius: 999px;
  display: inline-flex;
  margin-bottom: 0;
  padding: 0.65rem 1rem;
}

.alert {
  border: 1px solid rgba(28, 51, 45, 0.16);
  border-radius: 1rem;
}

.alert-info {
  color: #0f3f65;
  background-color: #d8ebf8;
  border-color: #9fc7e2;
}

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

.app-select-max-180 {
  max-width: 180px;
}

.app-select-min-220 {
  min-width: 220px;
}

.app-max-w-40rem {
  max-width: 40rem;
}

.app-table-min-w-860 {
  min-width: 860px;
}

.app-table-min-w-960 {
  min-width: 960px;
}

.app-col-w-80 {
  width: 80px;
}

.app-col-w-120 {
  width: 120px;
}

.app-col-w-160 {
  width: 160px;
}

.app-col-w-6rem {
  width: 6rem;
}

.app-col-w-7rem {
  width: 7rem;
}

.app-col-w-9rem {
  width: 9rem;
}

.app-col-w-12pct {
  width: 12%;
}

.app-col-w-28pct {
  width: 28%;
}

.app-col-w-48pct {
  width: 48%;
}

.app-input-w-90 {
  width: 90px;
}

.app-field-w-80 {
  width: 80px;
}

.app-code-min-w-180 {
  min-width: 180px;
}

.app-badge-fixed-height {
  height: 1.4rem;
}

.app-btn-min-width {
  min-width: 4.6rem;
}

/* Blue utility for specific action buttons (keep transparent background) */
.text-blue {
  color: #0d6efd !important;
}

.btn-outline-blue {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  background: transparent !important;
}

.btn-outline-blue:hover,
.btn-outline-blue:focus {
  color: #0d6efd !important;
  background: rgba(13, 110, 253, 0.06) !important;
  border-color: #0d6efd !important;
}

.app-progress-compact {
  height: 10px;
}

.app-progress-label {
  min-width: 38px;
  text-align: right;
}

.app-status-badge {
  min-width: 6rem;
  display: inline-block;
  text-align: center;
}

.app-text-danger-soft {
  color: rgba(220, 53, 69, 0.65);
}

.app-cursor-pointer,
.app-editable-cell,
.editable-cell {
  cursor: pointer;
}

.app-dropzone {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.app-dropzone.is-dragover {
  background: #eef4ff;
  border-color: #0d6efd;
}

.app-dropzone-icon {
  font-size: 2rem;
}

.app-dropzone-link {
  text-decoration: underline;
}

.app-home-hero-logo {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, rgba(31, 111, 95, 0.16), rgba(207, 231, 216, 0.85));
}

.app-home-hero-logo-img {
  height: 54px;
}

.app-form-hidden {
  display: none;
}

.app-sku-product-badge {
  display: inline-block;
  min-width: 16px;
  text-align: center;
}

.app-sku-link-btn {
  color: #0d6efd;
  border-color: rgba(13, 110, 253, 0.45);
}

.app-sku-link-btn:hover,
.app-sku-link-btn:focus-visible {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.app-sku-link-btn svg:not(.text-secondary) {
  color: #0d6efd;
}


.app-to-be-destroyed td {
  background-color: #ff631a69 !important;
  color: #000 !important;
}

#sales-form-card,
#sales-stocks > .card {
  height: auto;
}

@media (min-width: 992px) {
  #sales-form-card,
  #sales-stocks > .card {
    height: 540px;
  }

  #sales-form-card > form {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #sales-form-card > form > .card-body,
  #sales-stocks > .card > .card-body {
    flex: 1 1 auto;
  }

  #sales-form-card > form > .card-body {
    overflow: visible;
    position: relative;
    z-index: 2;
  }

  #sales-stocks > .card > .card-body {
    overflow-y: auto;
  }

  #sales-form-card > form > .card-footer {
    flex-shrink: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
  }
}

.available-stock-table thead th {
  color: #3b3b3b;
}

.available-stock-day-link {
  color: inherit;
}

.available-stock-day-meta {
  font-size: 0.78rem;
}

.available-stock-table > :not(caption) > * > .available-stock-summary-cell {
  background-color: #bff5e4;
  color: #373a3c;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}

.available-stock-row {
  background-color: #e8f5f2;
}

.available-stock-label {
  color: #2d6a55;
}

@media (max-width: 991.98px) {
  .app-navbar .navbar-nav .nav-link {
    border-radius: 0.85rem;
  }
}