/* ============================================================
   Phase 6 Certificate management — certificate-grid.css
   Foundation surface 7d: card-grid layout for org certs and
   personal certs. Layered AFTER shell.css in _HeadAssets.
   No hex literals — all colors via hsl(var(--token)).
   No !important — specificity + load order do the work.
   Per RESTRUCTURE-09. Design spec Section 7d.
   ============================================================ */


/* ============================================================
   1. Cert card grid
   ============================================================ */

.secuura-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* 06-13: solo variant — used when no certs exist and the upload card is the only child.
   Bounds the card width so it doesn't sprawl, but anchors it to the left so it occupies
   the same slot it would as the first card in a populated grid (per Steve's ask:
   the empty-state card should not float off-centre on the right). */
.secuura-cert-grid--solo {
  grid-template-columns: minmax(0, 480px);
  justify-content: start;
}


/* ============================================================
   2. Individual cert card
   ============================================================ */

.secuura-cert-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 150ms ease;
}

.secuura-cert-card:hover {
  border-color: hsl(var(--primary) / 0.4);
}

/* Expiring-soon variant — accent-tinted border + subtle background fill */
.secuura-cert-card[data-expiring-soon="true"] {
  border-color: hsl(var(--accent));
  background-color: hsl(var(--accent) / 0.06);
}

.secuura-cert-card-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}

.secuura-cert-card-title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  flex-grow: 1;
  word-break: break-word;
}

.secuura-cert-card-badges {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* ============================================================
   3. Fingerprint / thumbprint row
   ============================================================ */

.secuura-cert-card-fingerprint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  word-break: break-all;
  padding: 4px 8px;
  background-color: hsl(var(--muted));
  border-radius: calc(var(--radius) - 4px);
}


/* ============================================================
   4. Meta row — expiry + validity dates
   ============================================================ */

.secuura-cert-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.secuura-cert-card-meta-expiry {
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Highlight expiry text when ≤30 days remain */
.secuura-cert-card[data-expiring-soon="true"] .secuura-cert-card-meta-expiry {
  color: hsl(var(--accent-foreground));
  font-weight: 600;
}

.secuura-cert-card-meta-dates {
  color: hsl(var(--muted-foreground));
}


/* ============================================================
   5. Card actions row
   ============================================================ */

.secuura-cert-card-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Normalize <a class="btn"> vs <button class="btn"> in the action row.
   Stretching alone wasn't enough — native <button> ships with user-agent
   padding/line-height that <a> doesn't, so the prior fix left Details/Delete
   visibly shorter than Set/Clear default. Force an explicit pixel height +
   uniform padding + line-height: 1 so vertical centring is governed entirely
   by inline-flex's align-items: center, identically for both elements. */
.secuura-cert-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 31px;                   /* matches Bootstrap .btn-sm rendered height */
  padding: 0 0.5rem;
  line-height: 1;
  box-sizing: border-box;
}


/* ============================================================
   6. Upload card — drag-and-drop .pfx variant
   ============================================================ */

.secuura-cert-upload-card {
  background-color: hsl(var(--card));
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  transition: border-color 150ms ease, background-color 150ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.secuura-cert-upload-card[data-dragover="true"] {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.05);
}

.secuura-cert-upload-card-icon {
  font-size: 2rem;
  color: hsl(var(--muted-foreground));
}

.secuura-cert-upload-card form {
  margin-top: 4px;
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.secuura-cert-upload-card p {
  margin: 0;
}

/* 06-13 pass 2: styled file picker — hides the native <input type="file"> Chrome
   button (which can't be themed) and replaces it with a Secuura-styled pill that
   shows an icon, an action label, and the chosen filename or a "no file chosen"
   placeholder. Click the label → opens the picker via the implicit <input> association. */
.secuura-cert-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.secuura-cert-file-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background-color: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
  margin: 0;
}
.secuura-cert-file-picker:hover {
  background-color: hsl(var(--muted) / 0.7);
  border-color: hsl(var(--primary) / 0.4);
}
.secuura-cert-file-picker:focus-within {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.secuura-cert-file-picker__icon {
  font-size: 1.25rem;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.secuura-cert-file-picker__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}
.secuura-cert-file-picker__label strong {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  font-weight: 600;
}
.secuura-cert-file-picker__filename {
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  word-break: break-all;
  max-width: 100%;
}
.secuura-cert-file-picker__filename[data-empty]::before {
  content: attr(data-empty);
  color: hsl(var(--muted-foreground));
}


/* ============================================================
   7. Tabbed segment — Issuer only (org cert vs personal cert)
   ============================================================ */

.secuura-cert-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  margin-bottom: 16px;
}

.secuura-cert-tab {
  border: none;
  background-color: transparent;
  color: hsl(var(--muted-foreground));
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  display: inline-block;
}

.secuura-cert-tab:hover {
  color: hsl(var(--foreground));
  text-decoration: none;
}

.secuura-cert-tab--active {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.08);
}

.secuura-cert-tab:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}


/* ============================================================
   8a. Phase 11 mobile refinements — 06-11 append only
   ============================================================ */

@media (max-width: 767.98px) {
  .secuura-cert-grid { grid-template-columns: 1fr; }
  .secuura-cert-card,
  .secuura-cert-upload-card { padding: 12px; }
  .secuura-cert-tabs { width: 100%; justify-content: stretch; }
  .secuura-cert-tab { flex: 1; min-height: 44px; }
}


/* ============================================================
   8. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .secuura-cert-card,
  .secuura-cert-upload-card,
  .secuura-cert-tab {
    transition: none;
  }
}