/**
 * AHMED / NESMA — Phases 2–8 page visual modernization
 * Visual-only polish across modules. Preserves all interaction architecture.
 */

/* ========== LOGIN — Nesma first impression ========== */
.ag-login-wrap {
  background:
    radial-gradient(ellipse 65% 48% at 8% 12%, color-mix(in srgb, var(--brand-teal) 18%, transparent), transparent 58%),
    radial-gradient(ellipse 50% 40% at 92% 82%, color-mix(in srgb, var(--brand-orange) 8%, transparent), transparent 52%),
    linear-gradient(165deg, var(--page-bg), var(--surface-secondary));
}

html[data-theme="dark"] .ag-login-wrap,
body.body--dark .ag-login-wrap,
.q-dark .ag-login-wrap {
  background:
    radial-gradient(ellipse 65% 48% at 8% 12%, color-mix(in srgb, var(--brand-teal) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 50% 40% at 92% 82%, color-mix(in srgb, var(--brand-orange) 6%, transparent), transparent 52%),
    var(--page-bg);
}

.ag-login-stage {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  border-color: var(--border-subtle);
}

.ag-login-hero {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--brand-dark-teal) 92%, black), var(--brand-black));
  position: relative;
}

.ag-login-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--brand-progress-marker-w);
  background: linear-gradient(180deg, var(--brand-orange), color-mix(in srgb, var(--brand-orange) 40%, var(--brand-teal)));
  pointer-events: none;
}

.ag-login-hero > * {
  position: relative;
  z-index: 1;
}

.ag-login-points li::before {
  background: var(--brand-orange);
  border-radius: 1px;
  width: 8px;
  height: 3px;
  transform: skewY(-12deg);
}

.ag-login-card-head h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ========== DASHBOARD — executive command center ========== */
.ag-cc-top h1 {
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.ag-cc-top p {
  color: var(--text-secondary);
  font-size: var(--type-sm);
  max-width: 58ch;
}

.ag-cc-rail {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  background: var(--surface-primary);
}

.ag-cc-rail-item {
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-cc-rail-n {
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ag-cc-surface,
.ag-cc-block,
.ag-cc-flat {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  background: var(--surface-primary);
}

.ag-cc-kicker,
.ag-cc-brief-k,
.ag-cc-prep-lab,
.ag-cc-filter-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ag-cc-badge {
  border-radius: var(--radius-sm);
  font-size: var(--type-xs);
  font-weight: 600;
  padding: 0.15rem 0.45rem;
}

.ag-cc-prep-row {
  border-radius: var(--radius-md);
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-cc-prep-badge--warn {
  color: var(--brand-amber);
  background: color-mix(in srgb, var(--brand-amber) 14%, transparent);
}

/* ========== MY TASKS — operational worklist ========== */
.ag-tasks-page {
  gap: var(--space-4);
}

.ag-actions-page-header h1 {
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  font-weight: 600;
}

.ag-actions-control {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-primary);
  box-shadow: none;
}

.ag-actions-control-row {
  gap: var(--space-3);
}

.ag-task-row {
  transition:
    background var(--motion-fast) var(--ag-ease),
    box-shadow var(--motion-drawer) var(--ag-ease);
}

.ag-task-row.is-expanded {
  box-shadow: inset var(--brand-progress-marker-w) 0 0 0 var(--brand-teal);
}

.ag-task-expand {
  transition:
    max-height var(--motion-drawer) var(--ag-ease),
    opacity var(--motion-drawer) var(--ag-ease);
}

.ag-tasks-summary-host .ag-cc-rail,
.ag-tasks-chips-host {
  border-radius: var(--radius-lg);
}

/* ========== CALENDAR — institutional event workspace ========== */
.cal-header,
.calendar-header,
.ag-cal-header {
  background: linear-gradient(180deg, var(--brand-dark-teal), var(--brand-black)) !important;
  color: var(--text-inverse) !important;
}

.cal-event,
.calendar-event,
.fc-event {
  border-radius: var(--radius-sm) !important;
  font-size: 0.8125rem;
}

/* ========== MEETING DETAIL — event record sheet ========== */
.ag-mtg-sheet {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  border-color: var(--border-subtle);
}

.ag-mtg-header {
  border-bottom-color: var(--border-subtle);
}

.ag-mtg-title {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ag-mtg-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ag-mtg-meta-chip {
  border-radius: var(--radius-sm);
  font-size: var(--type-xs);
}

/* ========== MATERIALS — preparation workspace ========== */
.ag-mat-panel,
.ag-materials-panel,
.ag-mat-deadline-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-primary);
  box-shadow: none;
}

.ag-mat-deadline-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-dark-teal);
}

/* ========== MAIL — enterprise mail workspace ========== */
.ag-mail {
  border-radius: var(--radius-lg);
  border-color: var(--border-subtle);
  box-shadow: none;
}

.ag-mail-btn--primary {
  background: var(--interactive-primary, var(--primary)) !important;
  border-color: var(--interactive-primary, var(--primary)) !important;
  color: var(--text-on-primary, var(--text-inverse)) !important;
}

.ag-mail-list-row.is-selected,
.ag-mail-list-row:hover {
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-mail-list-row.is-selected {
  box-shadow: inset var(--brand-progress-marker-w) 0 0 0 var(--brand-teal);
}

.ag-mail-reader {
  border-left: 1px solid var(--border-subtle);
}

/* ========== GOVERNANCE LISTS — Actions, Approvals, Resolutions, Signatures ========== */
.ag-actions-page-header,
.ag-gov-page-header {
  margin-bottom: var(--space-2);
}

.ag-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}

.ag-health-overdue,
.ag-due-overdue,
[class*="--overdue"] {
  /* semantic — do not use brand orange for overdue */
}

/* ========== ORGANISATION — governance directory ========== */
.ag-org-strip {
  gap: var(--space-3);
}

.ag-org-metric {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-primary);
  box-shadow: none;
  transition: border-color var(--motion-fast) var(--ag-ease);
}

.ag-org-metric:hover {
  border-color: var(--border-default);
}

.ag-org-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark-teal);
}

html[data-theme="dark"] .ag-org-value {
  color: var(--brand-teal);
}

/* ========== INVESTMENTS — gate pipeline ========== */
.ag-gate-card,
.ag-invest-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}

/* ========== NOTIFICATIONS ========== */
.ag-notif-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-notif-card--unread {
  border-left: var(--brand-progress-marker-w) solid var(--brand-orange);
  background: color-mix(in srgb, var(--brand-orange) 6%, var(--surface-primary));
}

.ag-notif-type-chip {
  border-radius: var(--radius-sm);
  font-size: var(--type-xs);
  font-weight: 600;
}

/* ========== SEARCH ========== */
.ag-search-result {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-search-result:hover {
  background: var(--surface-hover);
}

/* ========== ADMIN / SETTINGS — dense but consistent ========== */
.ag-settings-card,
.ag-help-card,
.ag-info-card,
.ag-admin-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}

/* ========== READ MODE — record/document presentation (view dialogs only) ========== */
.ag-detail-field {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 0.5rem 0 0.65rem;
  box-shadow: none;
}

.ag-detail-field label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.ag-detail-field .value {
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.45;
}

.ag-detail-field--emphasize {
  background: color-mix(in srgb, var(--brand-teal) 6%, var(--surface-primary));
  border-bottom-color: color-mix(in srgb, var(--brand-teal) 35%, var(--border-subtle));
  box-shadow: inset var(--brand-progress-marker-w) 0 0 0 var(--brand-teal);
  padding-left: 0.65rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ag-detail-field--emphasize label {
  color: var(--brand-dark-teal);
}

html[data-theme="dark"] .ag-detail-field--emphasize label {
  color: var(--brand-teal);
}

.ag-detail-header h2,
.ag-detail-header .ag-detail-title {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ========== ACTIVITY / CORRESPONDENCE ========== */
.ag-activity-item,
.ag-corr-row,
.ag-task-corr-row {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-activity-item:hover,
.ag-corr-row:hover,
.ag-task-corr-row:hover {
  background: var(--surface-hover);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 960px) {
  .ag-login-stage {
    grid-template-columns: 1fr;
  }

  .ag-login-hero {
    padding: var(--space-6);
    min-height: auto;
  }

  .ag-cc-split,
  .ag-cc-split--analytics,
  .ag-cc-split--half {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ag-cc-rail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ag-mail-toolbar {
    flex-wrap: wrap;
  }
}