/* ==========================================================================
   FICHES INTERVENTION - Main Stylesheet
   Import all CSS modules
   Style: Industrial Precision
   ========================================================================== */

@import url('variables.css');
@import url('base.css');
@import url('components.css');
@import url('signature.css');
@import url('toast.css');

/* ==========================================================================
   PAGE-SPECIFIC STYLES
   ========================================================================== */

/* -------------------------------------------------------------------------
   AUTH PAGES (Login / Setup)
   ------------------------------------------------------------------------- */

.auth-container,
.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--gradient-surface);
  position: relative;
  overflow: hidden;
}

/* Decorative background elements */
.auth-container::before,
.login-page::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 100%;
  background: radial-gradient(circle, var(--color-accent-200) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}

.auth-container::after,
.login-page::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, var(--color-primary-200) 0%, transparent 70%);
  opacity: 0.2;
  pointer-events: none;
}

.login-logo,
.auth-icon {
  width: 88px;
  height: 88px;
  background: var(--gradient-accent);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.login-logo svg,
.auth-icon svg {
  width: 48px;
  height: 48px;
  color: white;
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-header h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.auth-header p {
  color: var(--color-slate-500);
  font-size: var(--text-sm);
}

.login-card,
.auth-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: white;
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  z-index: 1;
}

.auth-card-large {
  max-width: 480px;
}

.login-title {
  font-family: var(--font-display);
  text-align: center;
  margin-bottom: var(--space-2);
}

.login-subtitle {
  text-align: center;
  color: var(--color-slate-500);
  margin-bottom: var(--space-8);
}

.login-form,
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.login-footer {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-slate-400);
}

/* Setup page sections */
.setup-section {
  padding: var(--space-5);
  background: var(--color-slate-50);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
}

.setup-section:last-of-type {
  margin-bottom: 0;
}

.setup-section h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  color: var(--color-primary-800);
}

/* -------------------------------------------------------------------------
   DASHBOARD PAGE
   ------------------------------------------------------------------------- */

.dashboard {
  padding: var(--space-6) var(--space-4) var(--space-4) var(--space-4);
}

.dashboard .page-header {
  text-align: center;
  padding: var(--space-2) 0 var(--space-4);
}

.dashboard .page-header h1 {
  font-size: var(--text-3xl);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  transition: all var(--duration-200) var(--ease-out);
}

.stat-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 22px;
  height: 22px;
}

.stat-icon-primary {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.stat-icon-warning {
  background: var(--color-warning-100);
  color: var(--color-warning-dark);
}

.stat-icon-success {
  background: var(--color-success-100);
  color: var(--color-success-dark);
}

.stat-icon-info {
  background: var(--color-info-100);
  color: var(--color-info-dark);
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-slate-900);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Quick Actions */
.quick-actions {
  margin-bottom: var(--space-6);
}

.quick-actions h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  padding-left: var(--space-1);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.action-buttons .btn {
  justify-content: flex-start;
  gap: var(--space-3);
}

.action-buttons .btn svg {
  width: 20px;
  height: 20px;
}

/* Recent Section */
.recent-section {
  margin-bottom: var(--space-4);
}

.recent-section h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  padding-left: var(--space-1);
}

/* -------------------------------------------------------------------------
   INTERVENTION FORM
   ------------------------------------------------------------------------- */

.intervention-form-section {
  background: white;
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-4);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.intervention-form-header {
  padding: var(--space-4) var(--space-5);
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--color-slate-100);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.intervention-form-header-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--gradient-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-accent);
}

.intervention-form-header-icon svg {
  width: 18px;
  height: 18px;
}

.intervention-form-header-title {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  color: var(--color-slate-800);
}

.intervention-form-body {
  padding: var(--space-5);
}

/* Description lines */
.description-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.description-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.description-line-number {
  width: 32px;
  height: 32px;
  background: var(--gradient-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: white;
  flex-shrink: 0;
  margin-top: var(--space-2-5);
}

.description-line-input {
  flex: 1;
}

.description-line-remove {
  width: 40px;
  height: 40px;
  margin-top: var(--space-1-5);
  color: var(--color-slate-400);
  border-radius: var(--radius-lg);
  transition: all var(--duration-150) var(--ease-out);
}

.description-line-remove:hover {
  background: var(--color-error-50);
  color: var(--color-error);
}

.add-description-btn {
  width: 100%;
  padding: var(--space-4);
  border: 2px dashed var(--color-slate-300);
  border-radius: var(--radius-xl);
  color: var(--color-slate-500);
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all var(--duration-200) var(--ease-out);
  margin-top: var(--space-4);
}

.add-description-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-700);
  background: var(--color-accent-50);
}

/* Client selector */
.client-selector {
  position: relative;
}

.client-selector-input {
  cursor: pointer;
}

.client-selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-slate-200);
  max-height: 320px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  margin-top: var(--space-2);
  display: none;
}

.client-selector-dropdown.is-open {
  display: block;
  animation: dropdownIn var(--duration-200) var(--ease-spring);
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.client-selector-option {
  padding: var(--space-4);
  cursor: pointer;
  transition: background var(--duration-100) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-slate-100);
}

.client-selector-option:last-child {
  border-bottom: none;
}

.client-selector-option:hover {
  background: var(--color-slate-50);
}

.client-selector-option.is-selected {
  background: var(--color-accent-50);
}

.client-selector-option-new {
  border-top: 1px solid var(--color-slate-100);
  color: var(--color-accent-700);
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
}

/* -------------------------------------------------------------------------
   PDF PREVIEW
   ------------------------------------------------------------------------- */

.pdf-preview-container {
  background: white;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.pdf-preview-frame,
.pdf-frame {
  width: 100%;
  height: 80vh;
  border: none;
  background: var(--color-slate-100);
}

.pdf-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: white;
  border-top: 1px solid var(--color-slate-100);
}

/* -------------------------------------------------------------------------
   SETTINGS PAGE
   ------------------------------------------------------------------------- */

.page-container {
  padding: var(--space-6) var(--space-4) var(--space-8) var(--space-4);
}

.settings-section {
  margin-bottom: var(--space-6);
}

.settings-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
}

.settings-item {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  background: white;
  gap: var(--space-4);
}

.settings-item:first-child {
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.settings-item:last-child {
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

.settings-item:only-child {
  border-radius: var(--radius-2xl);
}

.settings-item + .settings-item {
  border-top: 1px solid var(--color-slate-100);
}

.settings-item-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xl);
  background: var(--color-slate-100);
  color: var(--color-slate-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-item-icon svg {
  width: 20px;
  height: 20px;
}

.settings-item-content {
  flex: 1;
  min-width: 0;
}

.settings-item-title {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  color: var(--color-slate-900);
}

.settings-item-subtitle {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  margin-top: var(--space-1);
}

.settings-item-action {
  color: var(--color-slate-400);
  flex-shrink: 0;
}

/* Logo upload */
.logo-upload {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.logo-preview {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background: var(--color-slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px dashed var(--color-slate-300);
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-placeholder {
  color: var(--color-slate-400);
  font-size: var(--text-xs);
  text-align: center;
}

/* -------------------------------------------------------------------------
   INTERVENTION DETAIL PAGE
   ------------------------------------------------------------------------- */

.detail-header {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-card);
}

.detail-ref {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-accent-700);
  margin-bottom: var(--space-2);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-slate-500);
}

.detail-section {
  background: white;
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-4);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.detail-section-header {
  padding: var(--space-4) var(--space-5);
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--color-slate-100);
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  color: var(--color-slate-700);
}

.detail-section-body {
  padding: var(--space-5);
}

.detail-card {
  margin-bottom: var(--space-4);
}

.detail-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
  padding: var(--space-4) var(--space-5);
  margin: 0;
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--color-slate-100);
}

.detail-content {
  padding: var(--space-4) var(--space-5);
}

.detail-title {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--color-slate-900);
  margin: 0 0 var(--space-2) 0;
}

.detail-text {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-relaxed);
}

.detail-text:last-child {
  margin-bottom: 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-slate-100);
  gap: var(--space-4);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-slate-500);
  flex-shrink: 0;
}

.detail-value {
  font-size: var(--text-sm);
  color: var(--color-slate-900);
  text-align: right;
  word-break: break-word;
}

.detail-list {
  list-style: none;
  padding: var(--space-4) var(--space-5);
  margin: 0;
}

.detail-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-100);
  font-size: var(--text-sm);
  color: var(--color-slate-700);
  line-height: var(--leading-relaxed);
}

.detail-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-list li:first-child {
  padding-top: 0;
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Signature and email info in detail sections */
.detail-section .detail-meta {
  display: block;
  padding: var(--space-4) var(--space-5);
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

.detail-section .signature-preview {
  display: block;
  max-width: 250px;
  margin: var(--space-4) var(--space-5);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
}

.detail-section .alert {
  margin: var(--space-4) var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.detail-section .alert-warning {
  background: var(--color-warning-50);
  border-left: 3px solid var(--color-warning);
  color: var(--color-warning-dark);
}

/* -------------------------------------------------------------------------
   UTILITY OVERRIDES FOR SPECIFIC CONTEXTS
   ------------------------------------------------------------------------- */

/* Remove padding when card is full-width in form */
.form-card-flush {
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
  border-radius: 0;
}

/* Sticky footer for forms */
.sticky-footer {
  position: sticky;
  bottom: 0;
  background: white;
  padding: var(--space-4);
  border-top: 1px solid var(--color-slate-100);
  margin: 0 calc(var(--space-4) * -1);
  margin-bottom: calc(var(--space-4) * -1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .action-buttons {
    flex-direction: row;
  }

  .action-buttons .btn {
    flex: 1;
    justify-content: center;
  }
}