/* PartVault shared design system. Colors sampled directly from the company
   logo (static/img/logo.png): brick red from the wordmark, navy from the
   gear icon. Every template includes this file instead of its own
   duplicated inline <style> block for chrome (topbar, nav, buttons, tables,
   banners, forms). Page-specific layout still lives in each template. */

:root {
  --pv-red: #8b2a25;
  --pv-red-dark: #6d211d;
  --pv-red-light: #fbebea;
  --pv-navy: #273d63;
  --pv-navy-dark: #1c2d49;
  --pv-ink: #1d1f1c;
  --pv-gray-900: #222222;
  --pv-gray-700: #555555;
  --pv-gray-500: #888888;
  --pv-gray-300: #dddddd;
  --pv-gray-100: #f7f7f7;
  --pv-white: #ffffff;
  /* Page/card background -- kept separate from --pv-white (which also
     serves as button *text* color on colored backgrounds, e.g. white text
     on a navy button) so dark mode can flip the background without
     breaking button text contrast. Defaults to white, so light mode is
     pixel-identical to before this variable existed. */
  --pv-surface: var(--pv-white);

  --pv-success-bg: #e6f4ea;
  --pv-success-fg: #1e7e34;
  --pv-success-border: #b7dfc0;
  --pv-error-bg: #fdecea;
  --pv-error-fg: #a52a1f;
  --pv-error-border: #f5c6c1;
  --pv-info-bg: #eef2f7;
  --pv-info-fg: #44546b;
  --pv-info-border: #d6dee8;

  --pv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pv-radius: 6px;
  --pv-radius-sm: 4px;
  --pv-shadow: 0 1px 3px rgba(29, 31, 28, 0.08);
  --pv-max-width: 960px;
}

/* Dark mode -- follows the OS/browser color-scheme preference by default
   (the @media block, also the no-JS fallback), with an explicit per-user
   override available via [data-theme] on <html> (see theme-toggle.js).
   [data-theme="dark"]/[data-theme="light"] have higher specificity than the
   plain `:root` inside the media query, so an explicit choice always wins
   regardless of the OS setting. Every rule in this file is already built on
   the variables below, so redefining them here re-themes the whole site;
   --pv-white is deliberately left untouched (see --pv-surface's comment
   above) since it doubles as button text color in both themes. */
@media (prefers-color-scheme: dark) {
  :root {
    --pv-red: #c9564e;
    --pv-red-dark: #a8443d;
    --pv-red-light: #3a2321;
    --pv-navy: #7c93c2;
    --pv-navy-dark: #5f78a8;
    --pv-ink: #e8e6e3;
    --pv-gray-900: #f0f0f0;
    --pv-gray-700: #c7c9cd;
    --pv-gray-500: #9a9ea6;
    --pv-gray-300: #3a3d42;
    --pv-gray-100: #24262a;
    --pv-surface: #17181b;

    --pv-success-bg: #16321f;
    --pv-success-fg: #6fcf87;
    --pv-success-border: #2c5c3b;
    --pv-error-bg: #3a2321;
    --pv-error-fg: #e8837a;
    --pv-error-border: #6b3630;
    --pv-info-bg: #232833;
    --pv-info-fg: #a9b7cc;
    --pv-info-border: #3a4252;

    --pv-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --pv-red: #c9564e;
  --pv-red-dark: #a8443d;
  --pv-red-light: #3a2321;
  --pv-navy: #7c93c2;
  --pv-navy-dark: #5f78a8;
  --pv-ink: #e8e6e3;
  --pv-gray-900: #f0f0f0;
  --pv-gray-700: #c7c9cd;
  --pv-gray-500: #9a9ea6;
  --pv-gray-300: #3a3d42;
  --pv-gray-100: #24262a;
  --pv-surface: #17181b;

  --pv-success-bg: #16321f;
  --pv-success-fg: #6fcf87;
  --pv-success-border: #2c5c3b;
  --pv-error-bg: #3a2321;
  --pv-error-fg: #e8837a;
  --pv-error-border: #6b3630;
  --pv-info-bg: #232833;
  --pv-info-fg: #a9b7cc;
  --pv-info-border: #3a4252;

  --pv-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Explicit light forces the original palette even if the OS prefers dark. */
:root[data-theme="light"] {
  --pv-red: #8b2a25;
  --pv-red-dark: #6d211d;
  --pv-red-light: #fbebea;
  --pv-navy: #273d63;
  --pv-navy-dark: #1c2d49;
  --pv-ink: #1d1f1c;
  --pv-gray-900: #222222;
  --pv-gray-700: #555555;
  --pv-gray-500: #888888;
  --pv-gray-300: #dddddd;
  --pv-gray-100: #f7f7f7;
  --pv-surface: #ffffff;

  --pv-success-bg: #e6f4ea;
  --pv-success-fg: #1e7e34;
  --pv-success-border: #b7dfc0;
  --pv-error-bg: #fdecea;
  --pv-error-fg: #a52a1f;
  --pv-error-border: #f5c6c1;
  --pv-info-bg: #eef2f7;
  --pv-info-fg: #44546b;
  --pv-info-border: #d6dee8;

  --pv-shadow: 0 1px 3px rgba(29, 31, 28, 0.08);
}

button.theme-toggle-btn {
  background: none;
  border: 1px solid var(--pv-gray-300);
  color: var(--pv-gray-500);
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 12px;
}

button.theme-toggle-btn:hover {
  background: none;
  color: var(--pv-navy);
  border-color: var(--pv-navy);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--pv-font);
  max-width: var(--pv-max-width);
  margin: 0 auto;
  padding: 0 20px 60px;
  color: var(--pv-ink);
  background: var(--pv-surface);
}

a {
  color: var(--pv-navy);
}

/* Brand header (see templates/_brand_header.html) */
.pv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--pv-gray-300);
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 10px;
}

.pv-header .pv-logo-link {
  display: flex;
  align-items: center;
}

.pv-header img.pv-logo {
  height: 44px;
  width: auto;
  display: block;
}

.pv-header .pv-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pv-header img.pv-customer-logo {
  height: 44px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  display: block;
  padding-left: 16px;
  border-left: 1px solid var(--pv-gray-300);
}

.pv-header .pv-page-title {
  font-size: 0.95rem;
  color: var(--pv-gray-700);
  white-space: nowrap;
}

a.pv-logout, a.pv-contact {
  color: var(--pv-gray-500);
  font-size: 0.85rem;
  text-decoration: none;
}

a.pv-logout:hover {
  text-decoration: underline;
  color: var(--pv-red);
}

a.pv-contact:hover {
  text-decoration: underline;
  color: var(--pv-navy);
}

/* Admin sub-nav (_admin_nav.html) */
nav.admin-nav {
  margin: 14px 0 10px;
  border-bottom: 1px solid var(--pv-gray-300);
  padding-bottom: 10px;
}

nav.admin-nav a {
  color: var(--pv-gray-700);
  font-size: 0.88rem;
  text-decoration: none;
  margin-right: 20px;
  padding-bottom: 4px;
}

nav.admin-nav a.active {
  color: var(--pv-red);
  font-weight: 600;
  border-bottom: 2px solid var(--pv-red);
}

nav.admin-nav a:hover {
  color: var(--pv-red);
}

/* Page titles / subtitles */
h1.pv-title {
  font-size: 1.4rem;
  margin: 18px 0 4px;
}

p.pv-subtitle {
  color: var(--pv-gray-700);
  margin-top: 0;
}

h2.pv-section {
  font-size: 1rem;
  margin-top: 40px;
  margin-bottom: 0;
  color: var(--pv-ink);
}

/* Flash banners */
.pv-message, .message {
  background: var(--pv-success-bg);
  color: var(--pv-success-fg);
  border: 1px solid var(--pv-success-border);
  border-radius: var(--pv-radius-sm);
  padding: 10px 14px;
  margin-top: 16px;
  font-size: 0.9rem;
}

.pv-error, .error {
  background: var(--pv-error-bg);
  color: var(--pv-error-fg);
  border: 1px solid var(--pv-error-border);
  border-radius: var(--pv-radius-sm);
  padding: 10px 14px;
  margin-top: 16px;
  font-size: 0.9rem;
}

.banner-preparing {
  background: var(--pv-info-bg);
  color: var(--pv-info-fg);
  border: 1px solid var(--pv-info-border);
  border-radius: var(--pv-radius);
  padding: 12px 16px;
  margin-top: 20px;
  font-size: 0.9rem;
}

.banner-error {
  background: var(--pv-error-bg);
  color: var(--pv-error-fg);
  border: 1px solid var(--pv-error-border);
  border-radius: var(--pv-radius);
  padding: 12px 16px;
  margin-top: 20px;
  font-size: 0.9rem;
}

/* Tables -- block+overflow-x instead of letting cell text wrap, so a long
   item name or description stays on one line and the table scrolls
   horizontally instead. Applied at every width now, not just mobile -- the
   underlying children (thead/tbody/tr/td) keep their native table layout
   regardless of the table element's own display value, so this doesn't
   break column alignment. */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pv-gray-300);
  vertical-align: middle;
}

#items-table td.thumb-cell {
  width: 1%;
  padding-right: 4px;
  white-space: nowrap;
}

img.drawing-thumb {
  width: 44px;
  height: 25px;
  object-fit: contain;
  background: var(--pv-gray-100);
  border: 1px solid var(--pv-gray-300);
  border-radius: 4px;
  vertical-align: middle;
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* The cached file is already the full 300x170 Onshape gives us -- this just
   scales the same image back up in place, no second fetch needed. ~6.8x
   matches 44px -> ~300px. Transform-only (no layout change), so it overlays
   neighboring rows without any table reflow. */
img.drawing-thumb:hover {
  position: relative;
  z-index: 10;
  transform: scale(6.8);
  border-color: var(--pv-navy);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pv-gray-700);
}

th[data-sort-column] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th[data-sort-column]:hover {
  color: var(--pv-navy);
}

th[data-sort-column].sort-asc::after {
  content: " \25B2";
  font-size: 0.7em;
}

th[data-sort-column].sort-desc::after {
  content: " \25BC";
  font-size: 0.7em;
}

/* Buttons */
button, a.pv-button, input[type="submit"] {
  display: inline-block;
  padding: 7px 16px;
  border: none;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-navy);
  color: var(--pv-white);
  font-size: 0.88rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

button:hover, a.pv-button:hover, input[type="submit"]:hover {
  background: var(--pv-navy-dark);
}

a.pv-button.primary, button.primary {
  background: var(--pv-red);
}

a.pv-button.primary:hover, button.primary:hover {
  background: var(--pv-red-dark);
}

a.pv-button.secondary, button.secondary {
  background: var(--pv-gray-700);
}

a.pv-button.secondary:hover, button.secondary:hover {
  background: var(--pv-ink);
}

button.enable {
  background: var(--pv-success-fg);
}

button.enable:hover {
  background: #155c27;
}

button.danger {
  background: var(--pv-surface);
  color: var(--pv-red);
  border: 1px solid var(--pv-red);
}

button.danger:hover {
  background: var(--pv-red);
  color: var(--pv-white);
}

/* Forms */
input[type="text"], input[type="password"], input[type="file"], select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--pv-gray-300);
  border-radius: var(--pv-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--pv-surface);
  color: var(--pv-ink);
}

input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pv-navy);
}

input.search-box {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.95rem;
  border: 1px solid var(--pv-gray-300);
  border-radius: var(--pv-radius);
  margin-top: 20px;
}

input.search-box:focus {
  outline: none;
  border-color: var(--pv-navy);
}

/* Tags */
.type-tag, .sync-tag, .status-tag {
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}

.type-tag {
  background: var(--pv-gray-100);
  color: var(--pv-gray-700);
}

.sync-tag.ok, .status-tag.active {
  background: var(--pv-success-bg);
  color: var(--pv-success-fg);
}

.sync-tag.syncing {
  background: var(--pv-info-bg);
  color: var(--pv-info-fg);
}

.sync-tag.error {
  background: var(--pv-error-bg);
  color: var(--pv-error-fg);
}

.sync-tag.pending, .status-tag.disabled {
  background: var(--pv-gray-100);
  color: var(--pv-gray-500);
}

/* Misc small text */
.never, .accounts, .synced-at, td.meta {
  color: var(--pv-gray-500);
  font-size: 0.83rem;
}

.never {
  font-style: italic;
}

.empty, p.no-matches {
  color: var(--pv-gray-700);
  margin-top: 24px;
}

/* Password visibility toggle (login, admin login, admin customer forms) */
.password-field {
  position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  padding-right: 44px;
}

.password-field.inline {
  display: inline-block;
  width: 140px;
}

.password-field.inline input {
  width: 100%;
}

button.password-toggle {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--pv-gray-500);
}

button.password-toggle:hover {
  background: none;
  color: var(--pv-navy);
}

/* Responsive: below tablet width, tighten body padding and let the header
   row wrap. Table horizontal-scroll behavior is unconditional now (see the
   base `table` rule above), not mobile-only. */
@media (max-width: 640px) {
  body {
    padding: 0 14px 40px;
  }

  .pv-header {
    padding-top: 14px;
  }

  .row-actions {
    flex-wrap: wrap;
  }
}
