/* =============================================================
   arXiv Design System — Shared Component Styles
   Component reference for arXiv Check and Admin Console
   ============================================================= */


/* ─── Brand Tokens ──────────────────────────────────────────── */
:root {

  /* Access Lime family — primary buttons */
  --ds-accent:              #c4d82e;
  --ds-accent-hover:        #b5c626;
  --ds-accent-active:       #a4b520;
  --ds-accent-disabled-bg:       #e6efb8;
  --ds-accent-disabled-fg:     #8a9a5a;

  /* Lime tint family — secondary buttons */
  --ds-accent-wash:            #f0f9e8;
  --ds-accent-wash-hover:      #e2f3d0;
  --ds-accent-wash-active:     #d4edb8;
  --ds-accent-border:        #9cb522;
  --ds-accent-border-active: #6b7a10;
  --ds-disabled-bg:        #fafafa;
  --ds-disabled-border:    #d8d8d8;
  --ds-disabled-fg:      #b0b0b0;

  /* Library Grey family — tertiary buttons */
  --ds-text-muted:              #6b6459;
  --ds-surface-hover-strong:     #f0eeec;
  --ds-text-strong:   #4a433d;
  --ds-surface-active:    #e4e0db;
  --ds-text-disabled:          #b0aba6;

  /* Danger red family — destructive buttons */
  --ds-danger:             #c62828;
  --ds-danger-hover:       #b71c1c;
  --ds-danger-active:      #9a0007;
  --ds-danger-disabled-bg:      #f5d0d0;
  --ds-danger-disabled-fg:    #c47878;
  --ds-danger-wash-hover: #fdf0f0;
  --ds-danger-wash-active:#f5d0d0;

  /* Link / content hyperlinks — light mode */
  --ds-link:               #1565c0;
  --ds-link-hover:         #1050a0;
  --ds-link-disabled:           #b0aba6;
  --ds-link-visited:       #7b2fbe;

  /* Shared */
  --ds-text:              #1c1a17;
  --ds-focus-ring:        #1565c0;
  --ds-border-strong:       #cbc5be;
}


/* ─── Button Base ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.08s ease;
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

.btn:focus-visible {
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 2px;
}


/* ─── Primary ───────────────────────────────────────────────── */
.btn-primary {
  background: var(--ds-accent);
  color: var(--ds-text);
  border: 1px solid transparent;
}

.btn-primary:hover:not(:disabled) { background: var(--ds-accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--ds-accent-active); }
.btn-primary:disabled {
  background: var(--ds-accent-disabled-bg);
  color: var(--ds-accent-disabled-fg);
  cursor: not-allowed;
}


/* ─── Secondary ─────────────────────────────────────────────── */
.btn-secondary {
  background: var(--ds-accent-wash);
  color: var(--ds-text);
  border: 1px solid var(--ds-accent-border);
}

.btn-secondary:hover:not(:disabled) { background: var(--ds-accent-wash-hover); }
.btn-secondary:active:not(:disabled) {
  background: var(--ds-accent-wash-active);
  border-color: var(--ds-accent-border-active);
}
.btn-secondary:disabled {
  background: var(--ds-disabled-bg);
  border-color: var(--ds-disabled-border);
  color: var(--ds-disabled-fg);
  cursor: not-allowed;
}


/* ─── Tertiary ──────────────────────────────────────────────── */
.btn-tertiary {
  background: transparent;
  color: var(--ds-text-muted);
  border: 1px solid var(--ds-text-muted);
  box-shadow: none;
}

.btn-tertiary:hover:not(:disabled) {
  background: var(--ds-surface-hover-strong);
  border-color: var(--ds-text-strong);
  color: var(--ds-text-strong);
}
.btn-tertiary:active:not(:disabled) {
  background: var(--ds-surface-active);
  border-color: var(--ds-text-strong);
  color: var(--ds-text-strong);
}
.btn-tertiary:disabled {
  border-color: var(--ds-text-disabled);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}


/* ─── Destructive Button ────────────────────────────────────── */
.btn-destructive {
  background: var(--ds-danger);
  color: #ffffff;
  border: 1px solid transparent;
}

.btn-destructive:hover:not(:disabled) { background: var(--ds-danger-hover); }
.btn-destructive:active:not(:disabled) { background: var(--ds-danger-active); }
.btn-destructive:disabled {
  background: var(--ds-danger-disabled-bg);
  color: var(--ds-danger-disabled-fg);
  cursor: not-allowed;
}


/* ─── Icon Button ───────────────────────────────────────────── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--ds-border-strong);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ds-text-muted);
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.btn-icon.btn-icon-sm { width: 28px; height: 28px; font-size: 14px; }

.btn-icon:hover:not(:disabled) {
  background: var(--ds-surface-hover-strong);
  border-color: var(--ds-text-disabled);
  color: var(--ds-text-strong);
}
.btn-icon:active:not(:disabled) {
  background: var(--ds-surface-active);
  border-color: var(--ds-text-disabled);
  color: var(--ds-text-strong);
}
.btn-icon:focus-visible {
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 2px;
}
.btn-icon:disabled {
  border-color: var(--ds-border-strong);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}

.btn-icon.btn-icon-constructive { color: var(--ds-accent-border); }
.btn-icon.btn-icon-constructive:hover:not(:disabled) {
  background: var(--ds-accent-wash);
  color: var(--ds-accent-border-active);
}
.btn-icon.btn-icon-constructive:active:not(:disabled) {
  background: var(--ds-accent-wash-hover);
  color: var(--ds-accent-border-active);
}

.btn-icon.btn-icon-destructive { color: var(--ds-danger); }
.btn-icon.btn-icon-destructive:hover:not(:disabled) {
  background: var(--ds-danger-wash-hover);
  color: var(--ds-danger-hover);
}
.btn-icon.btn-icon-destructive:active:not(:disabled) {
  background: var(--ds-danger-wash-active);
  color: var(--ds-danger-active);
}
.btn-icon.btn-icon-destructive:disabled { color: var(--ds-danger-disabled-fg); }

.btn-icon[aria-pressed="true"] {
  background: var(--ds-surface-active);
  border-color: var(--ds-text-disabled);
  color: var(--ds-text-strong);
}
.btn-icon[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--ds-surface-hover-strong);
  border-color: var(--ds-text-disabled);
  color: var(--ds-text-strong);
}


/* ─── Link-style Button ─────────────────────────────────────── */
.btn-link {
  display: inline;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ds-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-radius: 2px;
}

.btn-link:hover:not(:disabled) { text-decoration-color: var(--ds-accent-border); }
.btn-link:active:not(:disabled) {
  text-decoration-color: var(--ds-accent-border);
  text-decoration-thickness: 2px;
}
.btn-link:focus-visible {
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 2px;
}
.btn-link:disabled {
  color: var(--ds-link-disabled);
  text-decoration: none;
  cursor: not-allowed;
}


/* ─── Icon Inside Text Button ───────────────────────────────── */
.btn .bi,
.btn svg.btn-icon-svg {
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
}


/* ─── Loading / Pending State ───────────────────────────────── */
.btn.is-loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.85;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
  flex-shrink: 0;
}


/* ─── Info Card ─────────────────────────────────────────────── */
.info-card {
  display: flex;
  flex-direction: column;
  background: #e8e4dc;
  border-radius: 5px;
  overflow: hidden;
  border-top: 4px solid #c4d82e;
}

.info-card-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.info-card-row:last-child { border-bottom: none; }

.info-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a8078;
}

.info-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: #1c1a17;
  word-break: break-all;
}

.info-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ds-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.info-link:hover   { color: var(--ds-link-hover); }
.info-link:visited { color: var(--ds-link-visited); }


/* ─── Dark Mode Overrides ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-accent-wash:            #1a2306;
    --ds-accent-wash-hover:      #212e08;
    --ds-accent-wash-active:     #28380a;
    --ds-disabled-bg:        #1e1e1e;
    --ds-disabled-border:    #2e2e2e;
    --ds-disabled-fg:      #4e4e4e;

    --ds-text-muted:              #b0aba6;
    --ds-surface-hover-strong:     #272420;
    --ds-text-strong:   #d4cfc9;
    --ds-surface-active:    #302c28;
    --ds-text-disabled:          #484340;

    --ds-accent-disabled-bg:       #252f08;
    --ds-accent-disabled-fg:     #5a6b30;

    --ds-danger-disabled-bg:     #3a0f0f;
    --ds-danger-disabled-fg:   #864040;
    --ds-danger-wash-hover:  #2a0808;
    --ds-danger-wash-active: #380d0d;

    --ds-link:              #64b5f6;
    --ds-link-hover:        #90caf9;
    --ds-link-disabled:          #484340;
    --ds-link-visited:      #c690e3;

    --ds-focus-ring:        #64b5f6;
  }

  html:not([data-theme="light"]) .btn-secondary         { color: var(--ds-accent); }
  html:not([data-theme="light"]) .btn-secondary:disabled { color: var(--ds-disabled-fg); }

  html:not([data-theme="light"]) .btn-icon.btn-icon-destructive { color: #e57373; border-color: #e57373; }
  html:not([data-theme="light"]) .btn-icon.btn-icon-destructive:hover:not(:disabled)  { background: var(--ds-danger-wash-hover);  border-color: #ef9a9a; color: #ef9a9a; }
  html:not([data-theme="light"]) .btn-icon.btn-icon-destructive:active:not(:disabled) { background: var(--ds-danger-wash-active); border-color: #ef9a9a; color: #ef9a9a; }
  html:not([data-theme="light"]) .btn-icon.btn-icon-destructive:disabled              { color: var(--ds-danger-disabled-fg); border-color: var(--ds-border-strong); }

  html:not([data-theme="light"]) .btn-icon.btn-icon-constructive                            { border-color: var(--ds-accent); }
  html:not([data-theme="light"]) .btn-icon.btn-icon-constructive:hover:not(:disabled)       { background: #2e4a0a; border-color: var(--ds-accent); color: var(--ds-accent); }
  html:not([data-theme="light"]) .btn-icon.btn-icon-constructive:active:not(:disabled)      { background: #253a08; border-color: var(--ds-accent); color: var(--ds-accent); }

  html:not([data-theme="light"]) .info-card       { background: #2e2b26; }
  html:not([data-theme="light"]) .info-card-row   { border-bottom-color: rgba(255,255,255,0.07); }
  html:not([data-theme="light"]) .info-label      { color: #cbcdac; }
  html:not([data-theme="light"]) .info-value      { color: #c4d82e; }
  html:not([data-theme="light"]) .info-link       { color: #c4d82e; }
  html:not([data-theme="light"]) .info-link:hover { color: #d8ee50; }
  html:not([data-theme="light"]) .info-link:visited { color: #a8c020; }
}


/* ─── Submission Type Badges ─────────────────────────────────── */
/*
 * Color-coded labels matching the arXiv Check moderation tool.
 * Base class .ds-badge handles shape; type modifiers supply color.
 *
 * Contrast ratios (WCAG, verified):
 *   .ds-badge--new   #1a3d78 on #d4e9ff — 8.5:1  AAA ✓
 *   .ds-badge--rep   #7a5c00 on #fef3c7 — 5.6:1  AA  ✓
 *   .ds-badge--wdr   #ffffff on #474340 — 9.8:1  AAA ✓
 *   .ds-badge--cross #4a4540 on #e8e4df — 7.5:1  AAA ✓
 */
.ds-badge {
  display: inline-block;
  font-family: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
  font-size: 11px;
  font-weight: 400;
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.ds-badge--new   { background: #d4e9ff; color: #1a3d78; border-color: #93c5fd; }
.ds-badge--rep   { background: #fef3c7; color: #7a5c00; border-color: #fde68a; }
.ds-badge--wdr   { background: #474340; color: #ffffff; border-color: #474340; }
.ds-badge--cross { background: #e8e4df; color: #4a4540; border-color: #cbc5be; }