/* Préo — design system minimaliste.
 *
 * Variables CSS centralisées dans :root. Pour rebrand → modifier ici.
 * Les classes nommées (.app-input, .confirm-modal-*) sont les seules utilisées
 * par les forms et partials portés. Tailwind via CDN couvre tout le reste.
 *
 * Étendre au besoin selon les features ajoutées par DPAE.
 */

:root {
  /* Brand — aligné sur la homepage (Atlassian blue #0c66e4) */
  --brand-50:  #deebff;
  --brand-100: #b3d4ff;
  --brand-200: #4c9aff;
  --brand-400: #2684ff;
  --brand-500: #0c66e4;
  --brand-600: #0c66e4;
  --brand-700: #0747a6;
  --brand-900: #091e42;

  /* Surface */
  --surface-page:   #f7f8f9;
  --surface-card:   #ffffff;
  --surface-subtle: #f4f5f7;
  --surface-hover:  #ebecf0;

  /* Ink (typo) — navy Atlassian */
  --ink:        #172b4d;
  --ink-muted:  #42526e;
  --ink-soft:   #6b778c;

  /* Borders & lines */
  --line:        #dfe1e6;
  --line-strong: #c1c7d0;

  /* Sémantiques */
  --success-bg:   #dcfce7;
  --success-text: #15803d;
  --info-bg:      #dbeafe;
  --info-text:    #1d4ed8;
  --warning-bg:   #fef3c7;
  --warning-text: #a16207;
  --danger-bg:    #fee2e2;
  --danger-text:  #b91c1c;

  /* Effets */
  --radius-btn:  10px;
  --radius-card: 16px;
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-pop:  0 8px 24px -4px rgb(0 0 0 / 0.12);
}

[x-cloak] { display: none !important; }

/* ════════════════════════════════════════════════════════════════
 * INPUTS — utilisés par apps.accounts.forms
 * Classes : app-input, app-input--otp, app-checkbox
 * ═══════════════════════════════════════════════════════════════ */

.app-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 120ms, box-shadow 120ms;
}
.app-input::placeholder { color: var(--ink-soft); }
.app-input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--brand-600);
}
.app-input:disabled {
  background: var(--surface-hover);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.app-input--otp {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.5em;
  font-variant-numeric: tabular-nums;
  padding: 12px 16px;
}

.app-checkbox {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  accent-color: var(--brand-600);
}

/* ════════════════════════════════════════════════════════════════
 * CONFIRM MODAL — utilisé par templates/_partials/confirm_modal.html
 * ═══════════════════════════════════════════════════════════════ */

.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}

.confirm-modal {
  background: var(--surface-card);
  border-radius: 20px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-pop);
  text-align: center;
}

.confirm-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-modal-icon svg { width: 28px; height: 28px; }
.confirm-modal-icon--info   { background: var(--info-bg);   color: var(--info-text); }
.confirm-modal-icon--danger { background: var(--danger-bg); color: var(--danger-text); }

.confirm-modal-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}

.confirm-modal-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 24px;
}

.confirm-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.confirm-modal-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.confirm-modal-btn--ghost {
  background: var(--surface-card);
  border-color: var(--line);
  color: var(--ink);
}
.confirm-modal-btn--ghost:hover { background: var(--surface-hover); }

.confirm-modal-btn--primary {
  background: var(--ink);
  color: var(--surface-card);
}
.confirm-modal-btn--primary:hover { background: var(--brand-700); }

.confirm-modal-btn--danger {
  background: var(--danger-text);
  color: var(--surface-card);
}
.confirm-modal-btn--danger:hover { background: #991b1b; }

/* ════════════════════════════════════════════════════════════════
 * Responsive : touch targets 44px sur mobile
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .app-input          { font-size: 16px; }   /* évite zoom auto iOS */
  .confirm-modal-btn  { padding: 14px 20px; min-height: 44px; }
}