/**
 * AHMED / NESMA — Mandated cross-page UI styling
 * Implements approved modernization mandates (#20–#33, #35–#36, #71–#74).
 * Visual only. Loaded last to override legacy theme literals safely.
 */

/* ========== INSTITUTIONAL TOKEN BRIDGES ========== */
html[data-theme="dark"],
body.body--dark {
  --calendar-today-bg: color-mix(in srgb, var(--brand-teal) 16%, var(--surface-primary));
  --calendar-selected-bg: color-mix(in srgb, var(--brand-teal) 24%, var(--surface-primary));
  --calendar-header-bg: var(--brand-black);
}

html[data-theme="light"] {
  --calendar-today-bg: color-mix(in srgb, var(--brand-teal) 10%, var(--surface-primary));
  --calendar-selected-bg: color-mix(in srgb, var(--brand-teal) 16%, var(--surface-primary));
}

/* ========== SHADOW REDUCTION (#33) ========== */
.ag-card,
.ag-empty,
.ag-cc-surface,
.ag-cc-block,
.ag-cc-flat,
.ag-cc-rail,
.ag-settings-card,
.ag-help-card,
.ag-info-card,
.ag-admin-card,
.ag-org-metric,
.ag-mom-panel,
.ag-status-report-kpi,
html[data-theme="light"] .ag-card,
html[data-theme="light"] .ag-empty {
  box-shadow: none !important;
}

/* Elevated surfaces only */
.q-dialog__inner > .q-card,
.q-dialog__inner > .ag-card,
.q-dialog__inner > .ag-dialog,
.ag-mtg-sheet,
.ag-login-stage {
  box-shadow: var(--shadow-elevated) !important;
}

.q-menu,
.ag-actions-filter-popover,
.ag-mail-filter-pop,
.ag-header-menu {
  box-shadow: var(--shadow-standard) !important;
}

/* ========== PAGE HEADERS (#21) ========== */
.ag-page-header,
.ag-actions-page-header,
.ag-gov-page-header,
.ag-mail-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.ag-page-header-copy {
  flex: 1 1 12rem;
  min-width: 0;
}

.ag-page-header h1,
.ag-actions-page-header h1,
.ag-gov-page-header h1 {
  margin: 0;
  font-size: clamp(1.35rem, 1.12rem + 0.65vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-primary);
}

.ag-page-header p,
.ag-actions-page-header p {
  margin: 0.35rem 0 0;
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  max-width: 62ch;
}

.ag-page-meta {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0.2rem;
}

.ag-page-header-side,
.ag-page-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ag-page-logo-wrap {
  flex: 0 0 auto;
}

.ag-page-logo {
  max-height: 2.5rem;
  max-width: 8rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ========== READ MODE — record presentation (#20) ========== */
.ag-detail-dialog .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-dialog .ag-detail-field label,
.ag-detail-dialog .ag-detail-field .label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

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

.ag-detail-dialog .ag-detail-grid {
  gap: var(--space-1) var(--space-5);
}

.ag-detail-code {
  font-family: var(--ag-font, "IBM Plex Sans", monospace);
  font-size: var(--type-xs);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
}

.ag-detail-link {
  color: var(--brand-dark-teal);
  text-decoration: none;
  font-weight: 500;
}

.ag-detail-link:hover {
  text-decoration: underline;
  color: var(--brand-teal);
}

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

/* ========== EDIT MODE — professional forms (#26) ========== */
.ag-edit-dialog .q-field--outlined .q-field__control,
.ag-form-stack .q-field--outlined .q-field__control {
  border-radius: var(--radius-md);
  min-height: var(--ag-control-h);
  background: var(--input-bg);
}

.ag-edit-dialog .q-field__label,
.ag-form-stack .q-field__label {
  font-size: var(--type-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.ag-edit-dialog .ag-form-stack,
.ag-form-stack {
  gap: var(--space-3);
}

.ag-edit-dialog .q-textarea .q-field__control {
  min-height: 5.5rem;
}

/* ========== TABLES (#22) — scroll-safe ========== */
.ag-table-wrap {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: none;
  max-height: none !important;
  overflow: visible !important;
}

/* Wide governance tables may scroll horizontally */
.ag-table-wrap.ag-actions-wrap,
.ag-table-wrap.ag-for-review-wrap,
.ag-table-wrap.ag-archive-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.ag-table-wrap .q-table__middle,
.ag-table-wrap .q-table__container {
  overflow: visible !important;
  max-height: none !important;
}

.ag-table-wrap .q-table thead tr,
.ag-table-wrap .q-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-head-bg, var(--surface-secondary));
  color: var(--text-secondary);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.ag-table-wrap .q-table tbody td {
  font-size: var(--type-sm);
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 2.75rem;
}

.ag-table-wrap .q-table tbody tr {
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-table-wrap .q-table tbody tr:hover {
  background: var(--table-row-hover, var(--surface-hover));
}

.ag-table-wrap .q-table tbody tr.selected,
.ag-table-wrap .q-table tbody tr.q-tr--selected {
  background: var(--surface-selected) !important;
  box-shadow: inset var(--brand-progress-marker-w) 0 0 0 var(--brand-teal);
}

.ag-table-wrap .q-table__bottom {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-xs);
  color: var(--text-muted);
}

.ag-table-wrap .q-table__sort-icon {
  color: var(--brand-dark-teal);
  opacity: 0.75;
}

html[data-theme="dark"] .ag-table-wrap .q-table__sort-icon {
  color: var(--brand-teal);
}

/* ========== FILTERS (#23) ========== */
.ag-toolbar .q-field,
.ag-toolbar .q-select,
.ag-status-report-filters .q-field {
  font-size: var(--type-sm);
}

.ag-toolbar .q-field--outlined .q-field__control,
.ag-status-report-filters .q-field--outlined .q-field__control {
  border-radius: var(--radius-md);
  min-height: var(--ag-control-h);
}

.ag-filter-active-chip,
.ag-cc-filter-chip.is-active,
.ag-actions-filter-chip.is-active {
  background: var(--surface-selected) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  box-shadow: inset var(--brand-progress-marker-w) 0 0 0 var(--brand-orange);
}

/* ========== STATUS BADGES (#24) ========== */
.ag-badge,
[class*="ag-badge-"] {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--type-xs);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

/* ========== BUTTON HIERARCHY (#25) ========== */
.ag-page-header-action.ag-btn-primary,
.ag-toolbar .ag-btn-primary {
  min-height: var(--ag-control-h-lg, 40px);
}

.ag-dialog-footer .ag-btn-danger,
.ag-dialog-footer .q-btn.ag-btn-danger {
  margin-left: auto;
}

.ag-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Quasar primary → institutional teal (not orange) */
.q-btn.bg-primary:not(.ag-mail-btn--gmail):not(.ag-provider-btn) {
  background: var(--interactive-primary, var(--brand-dark-teal)) !important;
  color: var(--text-on-primary, var(--text-inverse)) !important;
}

.q-btn.bg-primary:not(.ag-mail-btn--gmail):not(.ag-provider-btn):hover {
  background: var(--interactive-primary-hover, var(--primary-hover)) !important;
}

/* ========== DROPDOWNS / POPOVERS (#27) ========== */
.q-menu,
.q-select__dialog,
.ag-actions-filter-popover {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
}

.q-item--active,
.q-manual-focusable--focused {
  background: color-mix(in srgb, var(--brand-teal) 10%, var(--surface-primary)) !important;
  color: var(--text-primary) !important;
}

/* ========== EMPTY STATES (#28) ========== */
.ag-empty {
  padding: var(--space-4) var(--space-5) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
  font-size: var(--type-sm) !important;
  color: var(--text-secondary) !important;
  max-width: 100%;
}

.ag-empty--compact {
  padding: var(--space-3) var(--space-4) !important;
}

/* ========== SIDEBAR (#35) ========== */
.ag-sidebar {
  border-right: 1px solid color-mix(in srgb, var(--brand-black) 40%, transparent);
}

.ag-nav-group-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-text-muted);
  padding: var(--space-3) var(--space-4) var(--space-1);
}

.ag-nav-link.active {
  color: var(--sidebar-active-text);
  font-weight: 600;
}

/* ========== TOP BAR (#36) ========== */
.ag-header {
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
}

.ag-header-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.ag-user-trigger {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-user-trigger:hover {
  background: var(--surface-hover);
}

/* ========== NOTIFICATIONS — institutional overrides ========== */
.ag-notif-card--unread {
  border-left: var(--brand-progress-marker-w) solid var(--brand-orange) !important;
  background: color-mix(in srgb, var(--brand-orange) 5%, var(--surface-primary)) !important;
}

.ag-notif-type-chip--meeting.is-active {
  background: var(--brand-teal) !important;
}

.ag-notif-icon--meeting {
  --ag-notif-tone: var(--brand-teal);
}

.ag-notif-type-chip--task.is-active {
  background: var(--brand-dark-teal) !important;
}

.ag-notif-icon--task {
  --ag-notif-tone: var(--brand-dark-teal);
}

.ag-notif-type-chip--request.is-active {
  background: var(--brand-amber) !important;
}

.ag-notif-type-chip--reminder.is-active {
  background: var(--brand-orange) !important;
}

/* ========== REQUESTS — de-blue ticket rows ========== */
.ag-table-wrap .ag-req-table tbody tr.ag-req-row--status-open {
  --req-ticket: var(--brand-teal);
  --req-ticket-bg: color-mix(in srgb, var(--brand-teal) 6%, var(--surface-primary));
}

.ag-req-code-link {
  color: var(--brand-dark-teal) !important;
}

html[data-theme="dark"] .ag-req-code-link {
  color: var(--brand-teal) !important;
}

/* ========== GOVERNANCE / INVEST / ADMIN LIST PAGES ========== */
.ag-gov-list-wrap,
.ag-invest-list-wrap,
.ag-audit-wrap {
  gap: var(--space-3);
}

.ag-record-row,
.ag-meeting-row,
.ag-invest-row {
  transition: background var(--motion-fast) var(--ag-ease);
}

.ag-record-row:hover,
.ag-meeting-row:hover {
  background: var(--surface-hover);
}

/* ========== EXPANDABLE RECORDS / MOTION (#30) ========== */
.ag-tasks-expand,
.ag-task-expand,
.ag-company-body-expand__inner {
  transition:
    max-height var(--motion-drawer) var(--ag-ease),
    opacity var(--motion-drawer) var(--ag-ease),
    background var(--motion-fast) var(--ag-ease);
}

/* ========== LINKS — institutional, not orange (#10) ========== */
.ag-content a:not(.ag-mail-link):not(.ag-provider-link):not(.q-btn):not(.ag-nav-link):not(.ag-detail-link) {
  color: var(--brand-dark-teal);
  font-weight: 500;
}

html[data-theme="dark"] .ag-content a:not(.ag-mail-link):not(.ag-provider-link):not(.q-btn):not(.ag-nav-link) {
  color: var(--brand-teal);
}

/* ========== TABS ========== */
.ag-page-tabs .q-tab {
  font-weight: 500;
  font-size: var(--type-sm);
  min-height: 2.5rem;
  transition: background var(--motion-fast) var(--ag-ease), color var(--motion-fast) var(--ag-ease);
}

.ag-page-tabs .q-tab--active {
  font-weight: 600;
}

/* ========== INFORMATION DENSITY (#71) ========== */
.ag-content,
.ag-page-body {
  line-height: 1.45;
  overflow: visible;
  min-height: 0;
  flex: 1 0 auto;
}

.ag-main {
  overflow: visible;
  min-height: 0;
}

.ag-muted,
.text-muted,
.ag-meta {
  font-size: var(--type-xs);
  color: var(--text-muted);
}

/* ========== PROGRESSIVE BRAND STRIP (#74) ========== */
.ag-cc-top::after,
.ag-status-report-cover {
  /* orange strip already on status report via qa-refinements */
}

.ag-loading-bar,
.ag-progress-strip {
  height: var(--brand-progress-marker-w);
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-teal));
  border-radius: var(--radius-sm);
}

/* ========== REDUCED MOTION (#30) ========== */
@media (prefers-reduced-motion: reduce) {
  .ag-tasks-expand,
  .ag-task-expand,
  .ag-table-wrap .q-table tbody tr,
  .ag-nav-link,
  .ag-task-row {
    transition: none !important;
  }
}

/* ========== INVESTMENTS / GATES / DECISIONS (#50) ========== */
.ag-invest-gate-pill,
.ag-gate-badge,
.ag-invest-phase {
  font-size: var(--type-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* ========== FOR REVIEW (#46) ========== */
.ag-for-review-meeting-col {
  font-weight: 500;
  color: var(--text-primary);
}

.ag-for-review-actions .q-btn {
  font-size: var(--type-xs);
}

/* ========== AUDIT / BACKUP / ADMIN DENSE (#51) ========== */
.ag-audit-table .q-table tbody td,
.ag-backup-panel .q-table tbody td {
  font-size: var(--type-xs);
  font-family: var(--ag-font, "IBM Plex Sans", monospace);
}

.ag-backup-panel,
.ag-audit-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-primary);
}

/* ========== DISCLOSURES / ARCHIVE READ RECORDS ========== */
.ag-disclosure-detail .ag-detail-field,
.ag-archive-detail .ag-detail-field {
  /* inherits ag-detail-dialog rules when in view dialogs */
}

/* ========== DASHBOARD EXEC BUTTON ========== */
.ag-cc-exec-report-btn {
  color: var(--brand-dark-teal) !important;
  border: 1px solid var(--border-default) !important;
  font-weight: 500 !important;
}

html[data-theme="dark"] .ag-cc-exec-report-btn {
  color: var(--brand-teal) !important;
}