/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTS — A2ZDocs
   Stack: FastAPI + Jinja2 + Tailwind CDN + Vanilla JS
   Requires: tokens.css loaded first
   Load order: tokens.css → style.css → components.css → a11y.css

   Usage: Add class names directly to HTML elements.
   All interactive behaviour (modal open/close, tabs) is in ui.js.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   1. BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <button class="btn btn-primary">Save PDF</button>
     <button class="btn btn-secondary btn-sm">Cancel</button>
     <button class="btn btn-ghost btn-icon" aria-label="Settings">
       <i class="fas fa-cog"></i>
     </button>
     <button class="btn btn-destructive">Delete page</button>
     <a href="/download" class="btn btn-primary btn-lg btn-full">Download</a>
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  cursor: pointer;
  border: 1.5px solid transparent;
  min-height: var(--min-touch);
  white-space: nowrap;
  text-decoration: none;
  transition:
    background    var(--motion-fast)    var(--ease-default),
    color         var(--motion-fast)    var(--ease-default),
    border-color  var(--motion-fast)    var(--ease-default),
    box-shadow    var(--motion-fast)    var(--ease-default);
  user-select: none;
  -webkit-user-select: none;
}

.btn:focus-visible {
  outline: 2.5px solid var(--color-brand-600);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* — Primary — */
.btn-primary {
  background: var(--color-brand-600);
  color: var(--color-text-on-brand);
  border-color: var(--color-brand-600);
}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-brand-700);
  border-color: var(--color-brand-700);
  box-shadow: 0 4px 14px rgba(37,99,235,0.30);
}
.btn-primary:active:not(:disabled) { background: var(--color-brand-800); }

/* — Secondary — */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-body);
  border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-brand-50);
  border-color: var(--color-brand-300);
  color: var(--color-brand-700);
}

/* — Ghost — */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-neutral-100);
  color: var(--color-text-body);
}

/* — Destructive — */
.btn-destructive {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}
.btn-destructive:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
  box-shadow: 0 4px 14px rgba(220,38,38,0.25);
}

/* — Sizes — */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  min-height: 36px;
  border-radius: var(--radius-sm);
  gap: var(--space-1);
}
.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  min-height: 52px;
  border-radius: var(--radius-lg);
}
.btn-icon {
  padding: var(--space-3);
  min-width: var(--min-touch);
  border-radius: var(--radius-md);
  gap: 0;
}
.btn-full { width: 100%; justify-content: center; }

/* — Loading state — */
.btn.btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn.btn-loading::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════════
   2. FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <div class="field">
       <label class="field-label" for="email">Email <span class="field-required">*</span></label>
       <input type="email" id="email" class="input" placeholder="you@example.com" />
       <p class="field-hint">We'll never share your email.</p>
     </div>

     <div class="field">
       <label class="field-label" for="country">Country</label>
       <select id="country" class="input input-select">...</select>
     </div>

     <label class="checkbox-label">
       <input type="checkbox" class="checkbox-native" />
       <span class="checkbox-box"></span>
       <span class="checkbox-text">I agree to the terms</span>
     </label>
   ═══════════════════════════════════════════════════════════════════════ */

/* Field wrapper */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-body);
  line-height: 1.4;
}

.field-required {
  color: var(--color-error);
  margin-left: 2px;
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-error-text);
  font-weight: var(--font-medium);
}
.field-error::before { content: '⚠'; flex-shrink: 0; }

.field-success {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-success-text);
  font-weight: var(--font-medium);
}
.field-success::before { content: '✓'; flex-shrink: 0; }

/* Input base */
.input {
  display: block;
  width: 100%;
  min-height: var(--input-height);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  line-height: 1.5;
  transition:
    border-color var(--motion-fast) var(--ease-default),
    box-shadow   var(--motion-fast) var(--ease-default),
    background   var(--motion-fast) var(--ease-default);
}
.input::placeholder { color: var(--color-text-placeholder); }
.input:hover:not(:disabled):not(:focus) { border-color: var(--color-neutral-400); }
.input:focus {
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}
.input:disabled {
  background: var(--color-neutral-100);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.input.is-error  { border-color: var(--color-error); }
.input.is-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.input.is-success { border-color: var(--color-success); }

/* Select variant */
.input-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* Textarea */
.input-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

/* Checkbox */
.checkbox-label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}
.checkbox-native { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-box {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  transition:
    background     var(--motion-fast) var(--ease-default),
    border-color   var(--motion-fast) var(--ease-default);
}
.checkbox-native:checked + .checkbox-box {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
}
.checkbox-native:checked + .checkbox-box::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.checkbox-native:focus-visible + .checkbox-box {
  outline: 2.5px solid var(--color-brand-600);
  outline-offset: 2px;
}
.checkbox-text {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.5;
}

/* Radio group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.radio-native { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-dot {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--motion-fast) var(--ease-default);
}
.radio-native:checked + .radio-dot {
  border-color: var(--color-brand-600);
}
.radio-native:checked + .radio-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-brand-600);
}
.radio-native:focus-visible + .radio-dot {
  outline: 2.5px solid var(--color-brand-600);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. CARD + PANEL
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <div class="card">
       <h3 class="card-title">Compress PDF</h3>
       <p class="card-desc">Reduce file size without losing quality.</p>
     </div>

     <div class="panel">
       <div class="panel-header">
         <h2 class="panel-title">Options</h2>
       </div>
       <div class="panel-body">...</div>
       <div class="panel-footer">
         <button class="btn btn-primary">Apply</button>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow   var(--motion-default) var(--ease-out),
    border-color var(--motion-default) var(--ease-out),
    transform    var(--motion-default) var(--ease-out);
}

.card-interactive:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-brand-200);
  transform: translateY(-2px);
}
.card-interactive:focus-visible {
  outline: 2.5px solid var(--color-brand-600);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus), var(--shadow-lg);
}

.card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* Photo preview card — neutral canvas for image display */
.card-photo {
  background: #f0f2f5;
  border-color: #dde0e6;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  position: relative;
  overflow: hidden;
}

/* Panel — structured layout with header / body / footer */
.panel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.panel-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-neutral-50);
}
.panel-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.panel-body {
  padding: var(--space-6);
}
.panel-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  background: var(--color-neutral-50);
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. MODAL / DIALOG
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <!-- Trigger -->
     <button class="btn btn-primary" onclick="openModal('confirmDelete')">Delete</button>

     <!-- Modal markup (in body, outside other content) -->
     <div id="confirmDelete" class="modal-overlay" role="dialog"
          aria-modal="true" aria-labelledby="confirmDelete-title"
          aria-hidden="true">
       <div class="modal">
         <div class="modal-header">
           <h2 id="confirmDelete-title" class="modal-title">Delete page 3?</h2>
           <button class="btn btn-ghost btn-icon modal-close"
                   onclick="closeModal('confirmDelete')"
                   aria-label="Close dialog">
             <i class="fas fa-times"></i>
           </button>
         </div>
         <div class="modal-body">
           <p>This action cannot be undone.</p>
         </div>
         <div class="modal-footer">
           <button class="btn btn-secondary" onclick="closeModal('confirmDelete')">Cancel</button>
           <button class="btn btn-destructive" onclick="deletePage(3)">Delete</button>
         </div>
       </div>
     </div>

   JS: openModal() / closeModal() are in ui.js
   ═══════════════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--motion-default) var(--ease-default),
    visibility var(--motion-default) var(--ease-default);
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--motion-default) var(--ease-out);
}
.modal-overlay.is-open .modal {
  transform: scale(1) translateY(0);
}

.modal-lg  { max-width: 680px; }
.modal-xl  { max-width: 900px; }
.modal-full { max-width: calc(100vw - var(--space-8)); max-height: calc(100vh - var(--space-8)); }

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}
.modal-body {
  padding: var(--space-6);
}
.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.modal-close {
  flex-shrink: 0;
  color: var(--color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   5. ALERT (inline) + STATUS BANNER
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <div class="alert alert-info" role="note">
       <i class="fas fa-info-circle alert-icon"></i>
       <div>
         <strong class="alert-title">Processing</strong>
         <p class="alert-body">Your file is being compressed.</p>
       </div>
     </div>

     <div class="alert alert-error" role="alert">
       <i class="fas fa-triangle-exclamation alert-icon"></i>
       <p>File too large. Maximum size is 50 MB.</p>
     </div>
   ═══════════════════════════════════════════════════════════════════════ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
}
.alert-title {
  display: block;
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}
.alert-body { color: inherit; opacity: 0.9; }

.alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}
.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}
.alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.alert-error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. PROGRESS + UPLOAD STATE
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <!-- Determinate progress -->
     <div class="progress-wrap">
       <div class="progress-bar" role="progressbar"
            aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
            aria-label="Compressing PDF"
            style="width:45%"></div>
     </div>

     <!-- Indeterminate -->
     <div class="progress-wrap">
       <div class="progress-bar progress-indeterminate" role="progressbar"
            aria-label="Processing"></div>
     </div>

     <!-- Upload zone (enhances existing .drop-zone) -->
     <div class="upload-zone" id="dropZone"
          onclick="document.getElementById('fileInput').click()">
       <i class="fas fa-cloud-arrow-up upload-icon"></i>
       <p class="upload-title">Drop PDF here or click to upload</p>
       <p class="upload-hint">Max 50 MB</p>
       <input type="file" id="fileInput" class="sr-only" />
     </div>

     <!-- Upload state card -->
     <div class="upload-state">
       <i class="fas fa-file-pdf upload-state-icon"></i>
       <div class="upload-state-info">
         <span class="upload-state-name">document.pdf</span>
         <span class="upload-state-size">2.4 MB</span>
       </div>
       <button class="btn btn-ghost btn-icon btn-sm" aria-label="Remove file">
         <i class="fas fa-times"></i>
       </button>
     </div>
   ═══════════════════════════════════════════════════════════════════════ */

/* Progress bar */
.progress-wrap {
  width: 100%;
  height: 8px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-wrap-sm { height: 4px; }
.progress-wrap-lg { height: 12px; }

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-600));
  border-radius: var(--radius-full);
  transition: width var(--motion-slow) var(--ease-out);
  min-width: 0;
}

@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); width: 40%; }
  50%  { transform: translateX(150%); width: 60%; }
  100% { transform: translateX(400%); width: 40%; }
}
.progress-bar.progress-indeterminate {
  width: 40% !important;
  animation: progress-indeterminate 1.4s var(--ease-default) infinite;
}

/* Progress with label */
.progress-labeled {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--color-border-brand);
  border-radius: var(--radius-xl);
  background: var(--color-brand-50);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  cursor: pointer;
  transition:
    background     var(--motion-fast) var(--ease-default),
    border-color   var(--motion-fast) var(--ease-default),
    box-shadow     var(--motion-fast) var(--ease-default);
}
.upload-zone:hover {
  background: var(--color-brand-100, #dbeafe);
  border-color: var(--color-brand-400);
}
.upload-zone.is-dragover {
  background: var(--color-brand-100, #dbeafe);
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.upload-zone:focus-visible {
  outline: 2.5px solid var(--color-brand-600);
  outline-offset: 2px;
}
.upload-icon {
  font-size: 2.5rem;
  color: var(--color-brand-400);
  display: block;
  margin-bottom: var(--space-4);
}
.upload-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-body);
  margin-bottom: var(--space-2);
}
.upload-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Upload state (file attached) */
.upload-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-brand);
  border-radius: var(--radius-md);
}
.upload-state-icon {
  font-size: 1.5rem;
  color: var(--color-error);
  flex-shrink: 0;
}
.upload-state-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upload-state-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-state-size {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   7. TABS
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <div class="tabs" data-tabs="pdfTabs">
       <div class="tab-list" role="tablist" aria-label="PDF tools">
         <button class="tab-btn is-active" role="tab"
                 id="tab-basic" aria-controls="panel-basic" aria-selected="true">
           Basic
         </button>
         <button class="tab-btn" role="tab"
                 id="tab-advanced" aria-controls="panel-advanced" aria-selected="false">
           Advanced
         </button>
       </div>
       <div id="panel-basic" class="tab-panel is-active" role="tabpanel" aria-labelledby="tab-basic">
         ...
       </div>
       <div id="panel-advanced" class="tab-panel" role="tabpanel" aria-labelledby="tab-advanced" hidden>
         ...
       </div>
     </div>

   JS: Tab switching is handled automatically by ui.js for [data-tabs] elements.
   ═══════════════════════════════════════════════════════════════════════ */

.tabs { width: 100%; }

.tab-list {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tab-list::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition:
    color        var(--motion-fast) var(--ease-default),
    border-color var(--motion-fast) var(--ease-default);
  white-space: nowrap;
  min-height: var(--min-touch);
}
.tab-btn:hover:not(.is-active) {
  color: var(--color-text-body);
  border-bottom-color: var(--color-neutral-300);
}
.tab-btn.is-active {
  color: var(--color-brand-600);
  border-bottom-color: var(--color-brand-600);
}
.tab-btn:focus-visible {
  outline: 2.5px solid var(--color-brand-600);
  outline-offset: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-panel { padding-top: var(--space-5); }
.tab-panel[hidden] { display: none; }

/* Pill tabs variant */
.tab-list-pill {
  border-bottom: none;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
}
.tab-list-pill .tab-btn {
  border-bottom: none;
  border-radius: var(--radius-md);
  margin-bottom: 0;
  padding: var(--space-2) var(--space-4);
}
.tab-list-pill .tab-btn.is-active {
  background: var(--color-surface);
  color: var(--color-brand-700);
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════════════════════════════════
   8. BADGE + CHIP
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <span class="badge badge-success">Passed</span>
     <span class="badge badge-error">Failed</span>
     <span class="badge badge-warning">Review</span>
     <span class="badge badge-info">Step 2 of 4</span>
     <span class="badge badge-neutral">Draft</span>
   ═══════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-success  { background: var(--color-success-bg);  border-color: var(--color-success-border);  color: var(--color-success-text); }
.badge-error    { background: var(--color-error-bg);    border-color: var(--color-error-border);    color: var(--color-error-text); }
.badge-warning  { background: var(--color-warning-bg);  border-color: var(--color-warning-border);  color: var(--color-warning-text); }
.badge-info     { background: var(--color-info-bg);     border-color: var(--color-info-border);     color: var(--color-info-text); }
.badge-neutral  { background: var(--color-neutral-100); border-color: var(--color-neutral-300);    color: var(--color-text-secondary); }
.badge-brand    { background: var(--color-brand-600);   color: var(--color-text-on-brand); }


/* ═══════════════════════════════════════════════════════════════════════
   9. SKELETON LOADER (already in a11y.css — extended here)
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <div class="skeleton skeleton-text" style="width:60%"></div>
     <div class="skeleton skeleton-image" style="height:200px"></div>
     <div class="skeleton skeleton-circle" style="width:48px;height:48px"></div>
   ═══════════════════════════════════════════════════════════════════════ */

.skeleton-text    { height: var(--text-sm); border-radius: var(--radius-xs); }
.skeleton-image   { border-radius: var(--radius-md); width: 100%; }
.skeleton-circle  { border-radius: 50%; }
.skeleton-button  { height: var(--min-touch); width: 120px; border-radius: var(--radius-md); }

/* Skeleton group — stacked text lines */
.skeleton-block > .skeleton + .skeleton { margin-top: var(--space-2); }
.skeleton-block > .skeleton:last-child   { width: 75%; }


/* ═══════════════════════════════════════════════════════════════════════
   10. STEP INDICATOR (Passport photo wizard + multi-step tools)
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <nav class="step-indicator" aria-label="Progress">
       <div class="step is-done" aria-current="false">
         <span class="step-number"><i class="fas fa-check"></i></span>
         <span class="step-label">Country</span>
       </div>
       <div class="step-line"></div>
       <div class="step is-active" aria-current="step">
         <span class="step-number">2</span>
         <span class="step-label">Options</span>
       </div>
       <div class="step-line"></div>
       <div class="step">
         <span class="step-number">3</span>
         <span class="step-label">Upload</span>
       </div>
     </nav>
   ═══════════════════════════════════════════════════════════════════════ */

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--space-2) 0;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  min-width: 64px;
}
.step-number {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  background: var(--color-neutral-200);
  color: var(--color-text-muted);
  border: 2px solid var(--color-neutral-300);
  transition:
    background    var(--motion-default) var(--ease-default),
    border-color  var(--motion-default) var(--ease-default),
    color         var(--motion-default) var(--ease-default);
}
.step-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.step-line {
  flex: 1;
  height: 2px;
  background: var(--color-neutral-300);
  min-width: 24px;
  max-width: 48px;
  align-self: center;
  margin-bottom: 18px; /* align with step-number center */
  transition: background var(--motion-default) var(--ease-default);
}

.step.is-done .step-number {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success-text);
}
.step.is-done .step-label { color: var(--color-success-text); }
.step.is-done + .step-line { background: var(--color-brand-300); }

.step.is-active .step-number {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.20);
}
.step.is-active .step-label { color: var(--color-brand-700); font-weight: var(--font-semibold); }


/* ═══════════════════════════════════════════════════════════════════════
   11. DOMAIN: PASSPORT PHOTO OVERLAY COMPONENTS
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <div class="photo-editor-container">
       <img src="..." class="photo-preview-img" alt="Your uploaded photo" />
       <div class="face-safe-zone" id="faceSafeZone">
         <span class="face-safe-label" id="faceSafeLabel">Position face here</span>
       </div>
       <div class="face-axis face-axis-h"></div>
       <div class="face-axis face-axis-v"></div>
     </div>

     <!-- Validation list -->
     <ul class="validation-list" role="list">
       <li class="validation-item validation-pass">
         <i class="fas fa-check-circle validation-icon"></i>
         <div>
           <strong>Face centered</strong>
           <p>Your face is well-positioned.</p>
         </div>
       </li>
       <li class="validation-item validation-fail">
         <i class="fas fa-times-circle validation-icon"></i>
         <div>
           <strong>Background not plain</strong>
           <p>Try a white or light-gray wall.</p>
         </div>
       </li>
       <li class="validation-item validation-warn">
         <i class="fas fa-exclamation-triangle validation-icon"></i>
         <div>
           <strong>Slight tilt detected</strong>
           <p>Look directly at the camera for best results.</p>
         </div>
       </li>
     </ul>
   ═══════════════════════════════════════════════════════════════════════ */

/* Photo editor canvas container */
.photo-editor-container {
  position: relative;
  display: inline-block;
  background: #f0f2f5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* CRITICAL: no transitions/animations while user aligns face */
  transition: none !important;
  animation: none !important;
}

.photo-preview-img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* Face safe zone overlay */
.face-safe-zone {
  position: absolute;
  border: 2.5px solid rgba(37,99,235,0.65);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.3);
  pointer-events: none;
  /* State transitions are OK — they happen after analysis, not during drag */
  transition: border-color 0.25s var(--ease-default);
}
.face-safe-zone.state-ok      { border-color: rgba(16,185,129,0.8); }
.face-safe-zone.state-warn    { border-color: rgba(217,119,6,0.8); }
.face-safe-zone.state-fail    { border-color: rgba(220,38,38,0.8); }

.face-safe-label {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-brand-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  pointer-events: none;
}

/* Alignment guides */
.face-axis {
  position: absolute;
  background: rgba(37,99,235,0.15);
  pointer-events: none;
}
.face-axis-h { left: 0; right: 0; height: 1px; top: 50%; }
.face-axis-v { top: 0; bottom: 0; width: 1px; left: 50%; }

/* Rule-of-thirds grid (optional, toggle with JS) */
.face-thirds-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(37,99,235,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.4) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
}

/* Validation list */
.validation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.validation-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  transition: background var(--motion-fast) var(--ease-default);
}
.validation-icon {
  flex-shrink: 0;
  width: 20px;
  font-size: 1rem;
  margin-top: 1px;
}
.validation-item strong {
  display: block;
  font-weight: var(--font-semibold);
  margin-bottom: 2px;
}
.validation-item p {
  opacity: 0.85;
  font-size: var(--text-xs);
}

.validation-pass {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}
.validation-warn {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.validation-fail {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

/* Compliance summary bar */
.compliance-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
.compliance-summary.all-pass {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1.5px solid var(--color-success-border);
}
.compliance-summary.has-fails {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1.5px solid var(--color-error-border);
}
.compliance-summary.has-warns {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1.5px solid var(--color-warning-border);
}


/* ═══════════════════════════════════════════════════════════════════════
   12. DOMAIN: PDF EDITOR PATTERNS
   ═══════════════════════════════════════════════════════════════════════
   How to use:
     <!-- Save indicator -->
     <div class="save-indicator" id="saveIndicator">
       <i class="fas fa-check-circle"></i>
       <span>Saved</span>
     </div>
     <div class="save-indicator save-indicator-saving" id="saveIndicator">
       <i class="fas fa-spinner fa-spin"></i>
       <span>Saving…</span>
     </div>
     <div class="save-indicator save-indicator-unsaved">
       <i class="fas fa-circle"></i>
       <span>Unsaved changes</span>
     </div>

     <!-- Undo/redo affordance -->
     <div class="undo-redo-group">
       <button class="btn btn-ghost btn-icon btn-sm" id="undoBtn"
               onclick="undoLast()" aria-label="Undo" title="Undo (Ctrl+Z)"
               disabled>
         <i class="fas fa-rotate-left"></i>
       </button>
       <button class="btn btn-ghost btn-icon btn-sm" id="redoBtn"
               onclick="redoLast()" aria-label="Redo" title="Redo (Ctrl+Y)"
               disabled>
         <i class="fas fa-rotate-right"></i>
       </button>
     </div>

     <!-- Page thumbnail -->
     <div class="page-thumb" data-page="1">
       <canvas class="page-thumb-canvas"></canvas>
       <span class="page-thumb-label">1</span>
     </div>
     <div class="page-thumb is-active" data-page="2">...</div>
   ═══════════════════════════════════════════════════════════════════════ */

/* Save indicator */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-success-text);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  opacity: 0;
  transition: opacity var(--motion-default) var(--ease-default);
  pointer-events: none;
}
.save-indicator.is-visible { opacity: 1; }
.save-indicator-saving {
  color: var(--color-text-secondary);
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
}
.save-indicator-unsaved {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

/* Undo/redo group */
.undo-redo-group {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  gap: 0;
}
.undo-redo-group .btn {
  border: none;
  border-radius: 0;
  min-height: 36px;
  min-width: 36px;
}
.undo-redo-group .btn + .btn {
  border-left: 1px solid var(--color-border);
}
.undo-redo-group .btn:focus-visible {
  outline-offset: -2px;
  z-index: 1;
}

/* Page thumbnail strip */
.page-thumb-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow-y: auto;
  background: var(--color-neutral-50);
  border-right: 1px solid var(--color-border);
  width: 100px;
  flex-shrink: 0;
}

.page-thumb {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition:
    border-color  var(--motion-fast) var(--ease-default),
    box-shadow    var(--motion-fast) var(--ease-default);
}
.page-thumb:hover { border-color: var(--color-brand-300); }
.page-thumb.is-active {
  border-color: var(--color-brand-600);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.20);
}
.page-thumb:focus-visible {
  outline: 2.5px solid var(--color-brand-600);
  outline-offset: 2px;
}
.page-thumb-canvas { display: block; width: 100%; height: auto; }
.page-thumb-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  background: rgba(255,255,255,0.85);
  padding: 2px 0;
}

/* Editor canvas area */
.editor-canvas-area {
  flex: 1;
  background: #e5e7eb;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6);
}
.editor-page-shadow {
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10);
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════════════
   13. RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

/* Safe area insets for mobile (notch-aware) */
.safe-pb { padding-bottom: env(safe-area-inset-bottom, var(--space-4)); }
.safe-pt { padding-top: env(safe-area-inset-top, 0); }

/* Touch: disable hover transforms on touch devices */
@media (hover: none) {
  .card-interactive:hover { transform: none; box-shadow: var(--shadow-card); }
  .btn:hover              { box-shadow: none; }
  .upload-zone:hover      { background: var(--color-brand-50); border-color: var(--color-border-brand); }
}

/* Stack form groups on mobile */
@media (max-width: 480px) {
  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; max-height: 92vh; }
  .panel-footer { justify-content: stretch; }
  .panel-footer .btn { flex: 1; justify-content: center; }
  .tab-list { gap: 0; }
}