/* ========================================================================== 
   CertVault Module CSS (CV)
   --------------------------------------------------------------------------
   Load AFTER /css/golden.css.

   This stylesheet adds CV-specific presentation rules only. It intentionally
   inherits TradeSuite (TS) universal geometry for status pills,
   fixed headers, fixed navigation, safe-area handling, and shared spacing.

   Required order:
     <link rel="stylesheet" href="/css/golden.css">
     <link rel="stylesheet" href="/css/cv.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   CV theme selection
   --------------------------------------------------------------------------
   Set data-cv-theme on the application shell after the user selects their
   favourite tool brand during first-run setup. Only --ts-colour-brand changes;
   universal TS component geometry does not.
   -------------------------------------------------------------------------- */

html[data-ts-theme="e-ink"] { --ts-colour-brand: #f7f7f5; }
html[data-ts-theme="dewalt"] { --ts-colour-brand: #f4bc18; }
html[data-ts-theme="milwaukee"] { --ts-colour-brand: #db001c; }
html[data-ts-theme="makita"] { --ts-colour-brand: #008c95; }
html[data-ts-theme="bosch"] { --ts-colour-brand: #005691; }
html[data-ts-theme="ridgid"] { --ts-colour-brand: #e35a18; }
html[data-ts-theme="hilti"] { --ts-colour-brand: #d81e26; }
html[data-ts-theme="ryobi"] { --ts-colour-brand: #c5d82d; }
html[data-ts-theme="klein"] { --ts-colour-brand: #e06316; }
html[data-ts-theme="metabo"] { --ts-colour-brand: #00744f; }
html[data-ts-theme="festool"] { --ts-colour-brand: #002d5b; }
html[data-ts-theme="flex"] { --ts-colour-brand: #d22730; }
html[data-ts-theme="greenlee"] { --ts-colour-brand: #007b3b; }

/* --------------------------------------------------------------------------
   CV app shell and Home/Search screen
   -------------------------------------------------------------------------- */

.cv-app {
  --cv-icon-size: 4.75rem;
  --cv-card-min-height: 10.5rem;
  --cv-card-gap: var(--ts-space-4);
  min-height: 100dvh;
}

/* The main CV header uses the TS fixed-header foundation. */
.cv-header {
  min-height: var(--ts-header-height);
}

.cv-header .ts-header__inner {
  align-items: center;
}

.cv-header__identity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
  align-items: center;
}

.cv-header__identity-separator {
  font-weight: var(--ts-font-weight-bold);
}

/* Keeps header count/pill columns flush on the right. */
.cv-header__summary {
  display: grid;
  gap: var(--ts-space-2);
  justify-items: end;
}

.cv-home-main {
  /* Reduced space between the header bottom edge and the first content element */
  padding-top: calc(var(--ts-header-height) + var(--ts-space-4));
}

/* CV search and filter controls share the TS bordered-surface treatment. */
.cv-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ts-space-3);
  align-items: stretch;
}

.cv-search-field {
  min-width: 0;
}

.cv-filter-toggle {
  position: relative;
  width: 3.5rem;
  min-width: 3.5rem;
}

.cv-filter-toggle svg,
.cv-search-field svg,
.cv-back-button svg,
.cv-bottom-nav svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 2.25;
}

/* The CV filter is intentionally restricted to the three permitted states. */
.cv-filter-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--ts-space-2));
  right: 0;
  width: max-content;
  min-width: 11.25rem;
}

.cv-filter-menu[hidden] {
  display: none;
}

.cv-filter-option[data-cv-filter="active"]::before,
.cv-filter-option[data-cv-filter="due"]::before,
.cv-filter-option[data-cv-filter="expired"]::before {
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--ts-space-3);
  border: var(--ts-border);
  border-radius: 50%;
  content: "";
}

.cv-filter-option[data-cv-filter="active"]::before {
  background: var(--ts-status-active-bg);
}

.cv-filter-option[data-cv-filter="due"]::before {
  background: var(--ts-status-due-bg);
}

.cv-filter-option[data-cv-filter="expired"]::before {
  background: var(--ts-status-expired-bg);
}

/* --------------------------------------------------------------------------
   CV certification cards
   --------------------------------------------------------------------------
   Structure expectation:
     .cv-cert-card.ts-record-card
       .cv-cert-card__icon.ts-record-card__icon
       .cv-cert-card__content.ts-record-card__content
         .cv-cert-card__title.ts-record-card__title      (line 1, left)
         .cv-cert-card__expiry.ts-record-card__expiry    (line 2, left)
         .cv-cert-card__status-row                       (line 3, right)
           .ts-status
   -------------------------------------------------------------------------- */

.cv-cert-list {
  display: grid;
  gap: var(--ts-space-4);
}

.cv-cert-card {
  min-height: var(--cv-card-min-height);
  cursor: pointer;
  transition: transform 160ms ease;
}

.cv-cert-card:active {
  transform: translateY(1px);
}

.cv-cert-card:hover {
}

.cv-cert-card__icon {
  width: var(--cv-icon-size);
  height: var(--cv-icon-size);
  background: linear-gradient(135deg, #f6f6f6, #dddddd);
}

/* Any icon asset supplied by CV is shown as a grayscale card icon. */
.cv-cert-card__icon img,
.cv-cert-card__icon svg {
  width: 100%;
  height: 100%;
  padding: var(--ts-space-2);
  object-fit: contain;
  filter: grayscale(1);
}

.cv-cert-card__content {
  align-self: stretch;
  grid-template-rows: auto auto minmax(var(--ts-status-height), 1fr);
}

.cv-cert-card__title {
  align-self: start;
}

.cv-cert-card__expiry {
  align-self: start;
}

/* Line 3 is always right-aligned, regardless of status text length. */
.cv-cert-card__status-row {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  min-height: var(--ts-status-height);
  padding-top: var(--ts-space-1);
}

/* --------------------------------------------------------------------------
   CV first-run setup
   -------------------------------------------------------------------------- */

.cv-setup-dialog {
  width: min(calc(100vw - var(--ts-space-4) - var(--ts-space-4)), 34rem);
  margin: auto;
  padding: var(--ts-space-5);
  background: var(--ts-colour-surface);
  border: var(--ts-border);
  border-radius: var(--ts-radius-lg);
}

.cv-setup-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.cv-setup-dialog__title {
  margin: 0;
  color: var(--ts-colour-ink);
  font-size: 1.25rem;
  font-weight: var(--ts-font-weight-bold);
}

.cv-setup-form {
  display: grid;
  gap: var(--ts-space-4);
  margin-top: var(--ts-space-4);
}

.cv-form-field {
  display: grid;
  gap: var(--ts-space-2);
}

.cv-form-field label {
  color: var(--ts-colour-ink);
  font-size: 0.875rem;
  font-weight: var(--ts-font-weight-semibold);
}

.cv-form-field input,
.cv-form-field select {
  min-height: 3rem;
  padding-inline: var(--ts-space-3);
  background: var(--ts-colour-surface);
  border: var(--ts-border);
  border-radius: var(--ts-radius-sm);
}

.cv-primary-button {
  min-height: 3rem;
  padding-inline: var(--ts-space-4);
  background: var(--ts-colour-brand);
  border: var(--ts-border);
  border-radius: var(--ts-radius-sm);
  color: var(--ts-colour-brand-contrast);
  cursor: pointer;
  font-weight: var(--ts-font-weight-bold);
}

/* --------------------------------------------------------------------------
   CV Settings selectors
   -------------------------------------------------------------------------- */

.cv-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ts-space-3);
  margin-top: var(--ts-space-4);
}

.cv-selector-box {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--ts-space-2);
  background: var(--ts-colour-surface);
  border: var(--ts-border);
  border-radius: var(--ts-radius-sm);
  color: var(--ts-colour-ink);
  font-size: 0.875rem;
  font-weight: var(--ts-font-weight-semibold);
  cursor: pointer;
  text-align: center;
}

.cv-selector-box[aria-pressed="true"] {
  border-color: var(--ts-colour-brand);
  border-width: 2px;
  background: var(--ts-colour-surface-subtle);
}

.cv-selector-box--full {
  grid-column: 1 / -1;
}

.cv-theme-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: var(--ts-space-2);
  border-radius: var(--ts-radius-round);
  border: 1px solid var(--ts-colour-line);
}

/* --------------------------------------------------------------------------
   CV certificate-detail screen
   -------------------------------------------------------------------------- */

.cv-detail-header {
  grid-template-columns: auto minmax(0, 1fr) var(--ts-status-width);
}

.cv-detail-header__status {
  justify-self: end;
}

.cv-detail-main {
  padding-top: calc(var(--ts-detail-header-height) + var(--ts-space-5));
}

/* The two-column OCR layout is shared in Golden CSS; these are CV labels. */
.cv-ocr-panel {
  width: 100%;
}

.cv-ocr-field--full {
  grid-column: 1 / -1;
}

/*
  Certificate images are not placed inside a separate wrapper. The image itself
  shares the OCR panel's exact left/right boundaries and uses true credit-card
  geometry.
*/
.cv-document-face {
  width: 100%;
  aspect-ratio: var(--ts-credit-card-ratio);
  background: var(--ts-colour-surface);
  object-fit: cover;
}

.cv-document-face:focus-visible {
  outline: 0.2rem solid rgb(21 21 21 / 24%);
  outline-offset: 0.125rem;
}

/* --------------------------------------------------------------------------
   CV card inspection mode
   -------------------------------------------------------------------------- */

.cv-inspection-header {
  grid-template-columns: auto minmax(0, 1fr) var(--ts-status-width);
}

.cv-inspection-stage {
  background: var(--ts-colour-surface);
}

/*
  JS calculates --ts-inspection-document-height after measuring the available
  portrait viewport. The image alone rotates; this header and its status pill
  retain normal portrait geometry.
*/
.cv-inspection-document {
  background: var(--ts-colour-surface);
}

/* --------------------------------------------------------------------------
   CV navigation behaviour
   -------------------------------------------------------------------------- */

.cv-home-screen .ts-bottom-nav {
  display: block;
}

.cv-detail-screen .ts-bottom-nav,
.cv-inspection-screen .ts-bottom-nav {
  display: none;
}

/* --------------------------------------------------------------------------
   CV responsive adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 23rem) {
  .cv-app {
    --cv-icon-size: 4rem;
    --cv-card-min-height: 9.75rem;
  }

  .cv-cert-card {
    gap: var(--ts-space-3);
  }

  .cv-cert-card__title {
    font-size: 1rem;
  }

  .cv-header__identity {
    font-size: 0.875rem;
  }
}

@media (min-width: 48rem) {
  .cv-home-main,
  .cv-detail-main {
    padding-inline: var(--ts-space-6);
  }

  .cv-cert-list {
    gap: var(--ts-space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-cert-card {
    transition: none;
  }
}