/* ==========================================================================
   IVQA SaaS Design System — app.css
   ----------------------------------------------------------------------------
   ADDITIVE layer. Loaded AFTER theme CSS in every portal header.
   All custom classes are prefixed `.app-*` so they never collide with
   Bootstrap, AdminLTE, or existing `.ivqa-*` theme styles.
   Inspired by Stripe Dashboard / Notion / Linear.
   ========================================================================== */

/* ---------- Design Tokens ------------------------------------------------- */
:root {
  /* Brand */
  --app-primary:        #2563eb;
  --app-primary-hover:  #1d4ed8;
  --app-primary-soft:   #eff6ff;

  /* Neutral scale */
  --app-gray-50:  #f8fafc;
  --app-gray-100: #f1f5f9;
  --app-gray-200: #e2e8f0;
  --app-gray-300: #cbd5e1;
  --app-gray-400: #94a3b8;
  --app-gray-500: #64748b;
  --app-gray-600: #475569;
  --app-gray-700: #334155;
  --app-gray-800: #1e293b;
  --app-gray-900: #0f172a;

  /* Semantic */
  --app-success: #16a34a;
  --app-warning: #d97706;
  --app-danger:  #dc2626;
  --app-info:    #0284c7;

  /* Surface */
  --app-bg:            #f8fafc;
  --app-surface:       #ffffff;
  --app-border:        #e2e8f0;
  --app-text:          #0f172a;
  --app-text-muted:    #64748b;

  /* Radius */
  --app-radius-sm:  6px;
  --app-radius:     10px;
  --app-radius-lg:  14px;

  /* Shadows (soft only) */
  --app-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --app-shadow:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --app-shadow-md: 0 4px 12px rgba(15,23,42,.08);

  /* Spacing scale */
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-8: 32px;

  /* Typography */
  --app-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --app-font-size-xs:   12px;
  --app-font-size-sm:   13px;
  --app-font-size-base: 14px;
  --app-font-size-lg:   16px;
  --app-font-size-xl:   18px;
  --app-font-size-2xl:  22px;

  /* Transitions */
  --app-transition: 150ms ease;
}

/* ---------- Buttons ------------------------------------------------------- */
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--app-font-sans);
  font-size: var(--app-font-size-base);
  font-weight: 500;
  line-height: 1.25;
  border: 1px solid transparent;
  border-radius: var(--app-radius-sm);
  cursor: pointer;
  transition: background-color var(--app-transition),
              border-color var(--app-transition),
              color var(--app-transition),
              box-shadow var(--app-transition);
  text-decoration: none;
  user-select: none;
}
.app-btn:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}
.app-btn:disabled,
.app-btn.is-disabled {
  opacity: .6;
  cursor: not-allowed;
}

.app-btn-primary {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary);
}
.app-btn-primary:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: #fff;
}

.app-btn-secondary {
  background: var(--app-surface);
  color: var(--app-gray-700);
  border-color: var(--app-gray-200);
}
.app-btn-secondary:hover {
  background: var(--app-gray-50);
  border-color: var(--app-gray-300);
  color: var(--app-gray-900);
}

.app-btn-ghost {
  background: transparent;
  color: var(--app-gray-600);
  border-color: transparent;
}
.app-btn-ghost:hover {
  background: var(--app-gray-100);
  color: var(--app-gray-900);
}

.app-btn-danger {
  background: var(--app-danger);
  color: #fff;
  border-color: var(--app-danger);
}
.app-btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.app-btn-sm { padding: 5px 10px; font-size: var(--app-font-size-sm); }
.app-btn-lg { padding: 10px 20px; font-size: var(--app-font-size-lg); }

/* ---------- Inputs -------------------------------------------------------- */
.app-input,
.app-select,
.app-textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--app-font-sans);
  font-size: var(--app-font-size-base);
  line-height: 1.5;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-gray-200);
  border-radius: var(--app-radius-sm);
  transition: border-color var(--app-transition),
              box-shadow var(--app-transition);
}
.app-input:focus,
.app-select:focus,
.app-textarea:focus {
  outline: none;
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.app-input::placeholder,
.app-textarea::placeholder {
  color: var(--app-gray-400);
}
.app-input:disabled,
.app-select:disabled,
.app-textarea:disabled {
  background: var(--app-gray-50);
  color: var(--app-gray-500);
  cursor: not-allowed;
}
.app-textarea { min-height: 88px; resize: vertical; }

.app-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  color: var(--app-gray-700);
}

.app-hint {
  display: block;
  margin-top: 4px;
  font-size: var(--app-font-size-xs);
  color: var(--app-text-muted);
}

.app-input-error {
  border-color: var(--app-danger) !important;
}
.app-error-msg {
  display: block;
  margin-top: 4px;
  font-size: var(--app-font-size-xs);
  color: var(--app-danger);
}

.app-field { margin-bottom: var(--app-space-4); }

/* ---------- Cards --------------------------------------------------------- */
.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
  padding: var(--app-space-5);
}
.app-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--app-space-4);
  padding-bottom: var(--app-space-3);
  border-bottom: 1px solid var(--app-border);
}
.app-card-title {
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text);
  margin: 0;
}
.app-card-subtitle {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-muted);
  margin: 2px 0 0;
}

/* ---------- Tables -------------------------------------------------------- */
.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--app-font-size-base);
}
.app-table th,
.app-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}
.app-table thead th {
  background: var(--app-gray-50);
  font-weight: 600;
  font-size: var(--app-font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--app-gray-600);
  border-bottom: 1px solid var(--app-border);
}
.app-table tbody tr:hover {
  background: var(--app-gray-50);
}
.app-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Badges / Pills ----------------------------------------------- */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--app-font-size-xs);
  font-weight: 500;
  border-radius: 999px;
  background: var(--app-gray-100);
  color: var(--app-gray-700);
  line-height: 1.5;
}
.app-badge-primary { background: var(--app-primary-soft); color: var(--app-primary); }
.app-badge-success { background: #dcfce7; color: #166534; }
.app-badge-warning { background: #fef3c7; color: #92400e; }
.app-badge-danger  { background: #fee2e2; color: #991b1b; }

/* ---------- Alerts -------------------------------------------------------- */
.app-alert {
  padding: 12px 16px;
  border-radius: var(--app-radius-sm);
  border: 1px solid transparent;
  font-size: var(--app-font-size-sm);
  margin-bottom: var(--app-space-4);
}
.app-alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.app-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.app-alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.app-alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------- Empty State --------------------------------------------------- */
.app-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--app-text-muted);
}
.app-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  color: var(--app-gray-300);
}
.app-empty-title {
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-gray-700);
  margin: 0 0 4px;
}
.app-empty-text {
  font-size: var(--app-font-size-sm);
  margin: 0 0 16px;
}

/* ---------- Layout helpers ----------------------------------------------- */
.app-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--app-space-5); }
.app-stack     { display: flex; flex-direction: column; gap: var(--app-space-4); }
.app-row       { display: flex; align-items: center; gap: var(--app-space-3); }
.app-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--app-space-3); }

.app-mt-2 { margin-top: var(--app-space-2); }
.app-mt-4 { margin-top: var(--app-space-4); }
.app-mt-6 { margin-top: var(--app-space-6); }
.app-mb-2 { margin-bottom: var(--app-space-2); }
.app-mb-4 { margin-bottom: var(--app-space-4); }

.app-text-muted  { color: var(--app-text-muted); }
.app-text-danger { color: var(--app-danger); }
.app-text-sm     { font-size: var(--app-font-size-sm); }
.app-text-xs     { font-size: var(--app-font-size-xs); }

/* ---------- Page skeleton ------------------------------------------------- */
.app-page {
  background: var(--app-bg);
  min-height: 100%;
  padding: var(--app-space-6);
  font-family: var(--app-font-sans);
  color: var(--app-text);
}
.app-page-header {
  margin-bottom: var(--app-space-6);
}
.app-page-title {
  font-size: var(--app-font-size-2xl);
  font-weight: 600;
  margin: 0 0 4px;
}
.app-page-subtitle {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-muted);
  margin: 0;
}