/* VWL-Cloud brand — Vintage With Love UI & Branding Design Standard, Section 2 */
:root {
  --vwl-teal: #FB2471;       /* Primary Action Colour */
  --vwl-teal-dark: #C61675;  /* Accent Colour — used as the darker/hover variant */
  --vwl-teal-mid: #F869AE;   /* Secondary mid-tone pink */
  --vwl-teal-pale: #F4D1EF;  /* Secondary pale pink */
  --vwl-bg: #F4F5F7;         /* Soft light-grey page canvas, so white content panels stand out against it */
  --vwl-mid: #595D69;        /* Secondary Text */
  --vwl-light: #F6DCEA;      /* Light borders/dividers — a tint of the Accent Colour, matching the same tint used in the redesigned invoice PDF */
  --vwl-white: #FFFFFF;
  --vwl-dark: #363A3D;       /* Primary Heading Colour */
  --vwl-amber: #C47B1A;      /* Unchanged — a semantic warning colour, not part of the brand palette */
}

body { background: var(--vwl-bg); color: var(--vwl-dark); font-family: Helvetica, Arial, sans-serif; }

.vwl-titlebar {
  background: var(--vwl-white);
  color: var(--vwl-dark);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 3px solid var(--vwl-teal-dark);    /* dark pink accent bar */
  border-bottom: 3px solid var(--vwl-teal-dark); /* dark pink accent bar */
}
.vwl-banner-logo { height: 34px; width: auto; display: block; }
.vwl-word { font-family: "Times New Roman", serif; font-weight: bold; font-size: 1.1rem; letter-spacing: 1px; }
.vwl-tag { font-style: italic; color: var(--vwl-teal-pale); font-size: 0.9rem; }
.vwl-sep { border-left: 1px solid var(--vwl-teal); height: 22px; }
.vwl-sub { color: var(--vwl-teal); font-size: 0.9rem; }
.vwl-dot { color: var(--vwl-teal); font-size: 0.9rem; }
.vwl-user { color: var(--vwl-teal); text-decoration: none; font-size: 0.9rem; }

.vwl-nav {
  background: var(--vwl-white);
  border-bottom: 1px solid var(--vwl-light);
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.vwl-nav a {
  color: var(--vwl-mid);
  text-decoration: none;
  padding: 12px 14px;
  font-size: 0.95rem;
}
.vwl-nav a.active { color: var(--vwl-teal); font-weight: bold; }
.vwl-nav a:hover { color: var(--vwl-teal); }
.vwl-nav-sep { border-left: 1px solid var(--vwl-light); height: 20px; margin: 0 4px; }

.vwl-nav-dropdown { display: flex; align-items: center; }
.vwl-nav-dropdown .dropdown-toggle {
  color: var(--vwl-mid);
  text-decoration: none;
  padding: 12px 14px;
  font-size: 0.95rem;
}
.vwl-nav-dropdown .dropdown-toggle.active { color: var(--vwl-teal); font-weight: bold; }
.vwl-nav-dropdown .dropdown-toggle:hover { color: var(--vwl-teal); }
.vwl-nav-dropdown .dropdown-item:active,
.vwl-nav-dropdown .dropdown-item:focus { background: var(--vwl-teal-pale); color: var(--vwl-dark); }
.vwl-nav-dropdown form { margin: 0; }
.vwl-nav-dropdown button.dropdown-item { width: 100%; text-align: left; border: none; background: none; }
/* Reset the generic .vwl-nav a padding/size inside the dropdown menu itself,
   so items look like normal Bootstrap dropdown items, not top-level nav links. */
.vwl-nav-dropdown .dropdown-menu a,
.vwl-nav-dropdown .dropdown-menu .dropdown-item {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  color: var(--vwl-dark);
}
.vwl-nav-dropdown .dropdown-menu a:hover,
.vwl-nav-dropdown .dropdown-menu .dropdown-item:hover { color: var(--vwl-teal); background: var(--vwl-bg); }

.vwl-nav-toggle {
  background: var(--vwl-teal);
  border: none;
  color: var(--vwl-white);
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 4px;
}
.vwl-nav-toggle:hover, .vwl-nav-toggle:focus { background: var(--vwl-teal-dark); }

/* Below the "large" breakpoint, the nav becomes a full-width dropdown panel
   under the title bar, toggled by the hamburger button. At "large" and
   above it reverts to the normal horizontal bar via d-lg-flex in the
   template (Bootstrap's collapse utilities handle the breakpoint switch). */
@media (max-width: 991.98px) {
  .vwl-nav {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0;
  }
  .vwl-nav a {
    padding: 12px 16px;
    border-bottom: 1px solid var(--vwl-bg);
  }
  .vwl-nav-sep { display: none; }
}

@media (max-width: 575.98px) {
  .vwl-titlebar { padding: 0 10px; height: auto; min-height: 48px; flex-wrap: wrap; }
  .vwl-word { font-size: 1rem; }
  .vwl-content { padding: 12px; }
}

.vwl-content { padding: 20px; }

.stat-card {
  background: var(--vwl-white);
  border: 1px solid var(--vwl-light);
  border-radius: 4px;
  padding: 12px 16px;
}
.stat-card .label { color: var(--vwl-mid); font-size: 0.8rem; }
.stat-card .value { color: var(--vwl-teal); font-size: 1.5rem; font-weight: bold; }
.stat-card .sub { color: var(--vwl-mid); font-size: 0.75rem; }

.badge-status-instock { background: var(--vwl-teal); }
.badge-status-unpriced { background: var(--vwl-amber); }
.badge-status-repair { background: var(--vwl-amber); }
.badge-status-sold { background: #A32D2D; }
.badge-status-writtenoff { background: var(--vwl-mid); }
.badge-status-auction { background: #6B4C9A; }
.badge-status-removed { background: var(--vwl-dark); }
.badge-status-edited { background: #2E6B8A; }
.badge-status-returned { background: #3D8B5F; }

.btn-vwl { background: var(--vwl-teal); color: var(--vwl-white); border: none; }
.btn-vwl:hover { background: var(--vwl-teal-dark); color: var(--vwl-white); }

/* Mobile: let search/filter inputs and buttons stretch full-width instead
   of a fixed max-width or shrink-to-content, so they're easy to tap and
   don't overflow the screen. */
@media (max-width: 575.98px) {
  .form-control.w-auto, .form-select.w-auto { width: 100% !important; max-width: 100% !important; }
  form.d-flex.flex-wrap > .btn { flex: 1 1 auto; }
  .stat-card .value { font-size: 1.2rem; }
}

/* Draggable column resize handles (Stock screen + report tables) */
table.table-resizable thead th {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
}
.col-resize-handle:hover,
.col-resize-handle:active {
  background: var(--vwl-teal);
  opacity: 0.4;
}