/*
 * PAOFI premium correction layer
 *
 * This stylesheet is intentionally narrow and should load after premium.css.
 * It repairs cross-app containment, account-page flow, and program accent
 * consistency without changing application markup or data visualizations.
 */

/*
 * The shell is intentionally neutral so program identity can come from the
 * active workspace. The old teal names remain only as compatibility aliases
 * for legacy selectors; their rendered values now belong to the neutral
 * navy/violet shell.
 */
:root {
  --p-teal-950: #171a2b;
  --p-teal-900: #202844;
  --p-teal-800: #35416b;
  --p-teal-700: #4b568c;
  --p-teal-600: #616ca3;
  --p-teal-500: #7883b7;
  --p-teal-300: #b5bce0;
  --p-teal-200: #d7dbef;
  --p-teal-100: #eceef8;
  --p-teal-50: #f7f8fc;
  --p-primary: var(--program-accent);
  --p-primary-hover: color-mix(in srgb, var(--program-accent) 86%, #171a2b);
  --p-primary-soft: var(--program-accent-soft);
  --p-focus: var(--program-accent);
  --p-bg: #f4f5f9;
  --p-bg-warm: #f8f7f5;
  --p-surface-muted: #f6f7fb;
  --p-border: #dde1eb;
  --p-border-strong: #c8cedd;
  --program-accent: #4b568c;
  --program-accent-soft: #eceef8;
  --program-accent-rgb: 75, 86, 140;
  --surface-muted: #f1f3f8;
  --ring: 0 0 0 3px rgba(var(--program-accent-rgb), 0.2);
}

body[data-program="organization"] {
  --program-accent: #4b568c;
  --program-accent-soft: #eceef8;
  --program-accent-rgb: 75, 86, 140;
}

/* System administration belongs to the Administration visual family. */
body[data-program="system"] {
  --program-accent: var(--p-violet-700);
  --program-accent-soft: var(--p-violet-100);
  --program-accent-rgb: 104, 80, 163;
}

/* A calm, neutral shell lets every route's own accent remain unmistakable. */
.app-sidebar {
  background:
    radial-gradient(circle at 45% -8%, rgba(181, 188, 224, 0.18), transparent 18rem),
    linear-gradient(180deg, #202844 0%, #171d33 58%, #111525 100%);
  box-shadow: 12px 0 38px rgba(17, 21, 37, 0.16);
}

.route-progress span {
  background: linear-gradient(
    90deg,
    var(--p-green-700),
    var(--p-yellow-500),
    var(--p-blue-700),
    var(--p-coral-700),
    var(--p-violet-700)
  );
}

.sidebar-user-avatar {
  background: linear-gradient(135deg, #d7dbef, var(--p-yellow-500));
  color: #202844;
}

.modal-backdrop {
  background: rgba(23, 26, 43, 0.54);
}

.toast {
  background: #202844;
}

.login-screen {
  background:
    radial-gradient(circle at 10% 12%, rgba(36, 90, 168, 0.14), transparent 25rem),
    radial-gradient(circle at 92% 84%, rgba(248, 192, 0, 0.16), transparent 24rem),
    #f1f3f8;
}

.login-experience {
  box-shadow: 0 38px 110px rgba(23, 26, 43, 0.2);
}

.login-story {
  background:
    radial-gradient(circle at 14% 76%, rgba(248, 192, 0, 0.22), transparent 17rem),
    radial-gradient(circle at 88% 16%, rgba(181, 188, 224, 0.2), transparent 18rem),
    linear-gradient(145deg, #29345a, #171d33 70%);
}

.dashboard-intro {
  background:
    linear-gradient(90deg, rgba(23, 29, 51, 0.98) 0%, rgba(32, 40, 68, 0.93) 43%, rgba(32, 40, 68, 0.4) 72%, rgba(32, 40, 68, 0.22) 100%),
    var(--dashboard-hero-image-large, var(--dashboard-hero-image, linear-gradient(135deg, #29345a, #171d33)));
}

.dashboard-analytics-landscape {
  background:
    radial-gradient(circle at 9% 7%, rgba(104, 80, 163, 0.08), transparent 21rem),
    linear-gradient(145deg, #f8f9fc, #ffffff);
}

.analytics-ribbon {
  background:
    radial-gradient(circle at 12% 8%, rgba(181, 188, 224, 0.18), transparent 14rem),
    linear-gradient(180deg, #29345a, #171d33);
}

/*
 * Program navigation keeps its identity even while another workspace is
 * active. The selected route then uses the active program color for the rail,
 * wash, and icon instead of the former global accent.
 */
.nav-program[data-program="livelihood"] {
  --nav-program-accent: var(--p-green-700);
  --nav-program-soft: var(--p-green-100);
}

.nav-program[data-program="nutrition"] {
  --nav-program-accent: #b17600;
  --nav-program-soft: var(--p-yellow-100);
}

.nav-program[data-program="scholarship"] {
  --nav-program-accent: var(--p-blue-700);
  --nav-program-soft: var(--p-blue-100);
}

.nav-program[data-program="health"] {
  --nav-program-accent: var(--p-coral-700);
  --nav-program-soft: var(--p-coral-100);
}

.nav-program[data-program="administration"] {
  --nav-program-accent: var(--p-violet-700);
  --nav-program-soft: var(--p-violet-100);
}

.nav-program .nav-icon {
  color: color-mix(in srgb, var(--nav-program-accent) 64%, white);
}

.nav-program summary::marker {
  color: color-mix(in srgb, var(--nav-program-accent) 72%, white);
}

.nav-item.active {
  background:
    linear-gradient(90deg, rgba(var(--program-accent-rgb), 0.36), rgba(255, 255, 255, 0.08));
  box-shadow: inset 3px 0 0 var(--program-accent), 0 8px 20px rgba(0, 0, 0, 0.1);
}

.nav-item.active .nav-icon {
  color: color-mix(in srgb, var(--program-accent) 62%, white);
}

/*
 * Keep every common glyph centered inside its own paint boundary. Legacy
 * modules use several differently sized icon wells, so preserve their sizes
 * while enforcing the same containment contract.
 */
:where(
  .button-icon,
  .nav-icon,
  .search-icon,
  .dashboard-command-icon,
  .finance-quick-icon,
  .finance-book-mark,
  .finance-import-icon,
  .finance-card-icon,
  .document-drop-icon,
  .document-service-status > span,
  .document-purpose-cards button > span,
  .document-history-list article > span,
  .scholarship-type-icon,
  .coming-soon-mark
) {
  box-sizing: border-box;
  min-inline-size: 0;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
  isolation: isolate;
}

:where(
  .button-icon,
  .nav-icon,
  .search-icon,
  .dashboard-command-icon,
  .finance-quick-icon,
  .finance-book-mark,
  .finance-import-icon,
  .finance-card-icon,
  .document-drop-icon,
  .document-service-status > span,
  .document-purpose-cards button > span,
  .document-history-list article > span,
  .scholarship-type-icon,
  .coming-soon-mark
) > svg {
  display: block;
  flex: 0 0 auto;
  max-inline-size: 70%;
  max-block-size: 70%;
  pointer-events: none;
}

.button-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

:where(.action-button, .icon-button, .text-button) > svg,
.button-icon > svg {
  display: block;
  flex: 0 0 auto;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  max-inline-size: 100%;
  max-block-size: 100%;
  pointer-events: none;
}

.icon-button {
  overflow: hidden;
}

/*
 * Primary icon wells follow the current workspace instead of retaining the
 * legacy green/teal treatment. Semantic warning, danger, statement, and
 * budget variants keep their existing meaning.
 */
body[data-program] :where(
  .search-icon,
  .coming-soon-mark,
  .document-drop-icon,
  .finance-quick-icon,
  .finance-import-icon,
  .document-purpose-cards button > span,
  .document-history-list article > span
) {
  border-color: color-mix(in srgb, var(--program-accent) 18%, transparent);
  background: var(--program-accent-soft);
  color: var(--program-accent);
  box-shadow: inset 0 0 0 1px rgba(var(--program-accent-rgb), 0.1);
}

body[data-program] .finance-book-mark:not(.is-statement):not(.is-summary):not(.is-budget):not(.is-balance) {
  background: var(--program-accent-soft);
  color: var(--program-accent);
}

body[data-program] .document-service-status:not(.offline) > span {
  background: var(--program-accent-soft);
  color: var(--program-accent);
}

body[data-program] :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--program-accent);
}

body[data-program="scholarship"] .scholarship-type-icon.accent-aqua {
  background: var(--program-accent-soft);
  color: var(--program-accent);
}

body[data-program="system"] .account-role-guidance {
  border-inline-start-color: var(--program-accent);
  background: var(--program-accent-soft);
  color: color-mix(in srgb, var(--program-accent) 68%, var(--p-text));
}

/*
 * Dashboard commands retain organization context while their icon and hover
 * state identify the destination program.
 */
.dashboard-command {
  --command-accent: var(--program-accent);
  --command-accent-soft: var(--program-accent-soft);
  --command-accent-rgb: var(--program-accent-rgb);
}

.dashboard-command[data-menu-route="database"],
.dashboard-command[data-menu-route^="livelihood-"] {
  --command-accent: var(--p-green-700);
  --command-accent-soft: var(--p-green-100);
  --command-accent-rgb: 49, 116, 75;
}

.dashboard-command[data-menu-route^="nutrition-"] {
  --command-accent: #9a6500;
  --command-accent-soft: var(--p-yellow-100);
  --command-accent-rgb: 154, 101, 0;
}

.dashboard-command[data-menu-route^="scholarship-"] {
  --command-accent: var(--p-blue-700);
  --command-accent-soft: var(--p-blue-100);
  --command-accent-rgb: 36, 90, 168;
}

.dashboard-command[data-menu-route^="health-"] {
  --command-accent: var(--p-coral-700);
  --command-accent-soft: var(--p-coral-100);
  --command-accent-rgb: 183, 77, 60;
}

.dashboard-command[data-menu-route^="admin-"] {
  --command-accent: var(--p-violet-700);
  --command-accent-soft: var(--p-violet-100);
  --command-accent-rgb: 104, 80, 163;
}

.dashboard-command .dashboard-command-icon {
  border: 1px solid rgba(var(--command-accent-rgb), 0.14);
  background: var(--command-accent-soft);
  color: var(--command-accent);
}

.dashboard-command:hover {
  border-color: rgba(var(--command-accent-rgb), 0.3);
  background: color-mix(in srgb, var(--command-accent-soft) 78%, white);
}

/* Replace remaining Scholarship document-center legacy green interactions. */
body[data-program="scholarship"] .scholarship-type-search:focus-within,
body[data-program="scholarship"] .scholarship-document-search:focus-within {
  border-color: var(--program-accent);
  box-shadow: 0 0 0 3px rgba(var(--program-accent-rgb), 0.16);
}

body[data-program="scholarship"] .scholarship-document-groups button:hover,
body[data-program="scholarship"] .scholarship-document-groups button.active,
body[data-program="scholarship"] .scholarship-type-groups button:hover,
body[data-program="scholarship"] .scholarship-type-groups button.active {
  border-color: var(--program-accent);
  background: var(--program-accent);
  color: var(--p-white);
}

body[data-program="scholarship"] .scholarship-type-tile:hover {
  border-color: color-mix(in srgb, var(--program-accent) 48%, var(--p-border));
  box-shadow: 0 8px 20px rgba(var(--program-accent-rgb), 0.1);
}

body[data-program="scholarship"] .scholarship-type-tile.active {
  border-color: var(--program-accent);
  background: var(--program-accent-soft);
  box-shadow: inset 4px 0 var(--program-accent);
}

body[data-program] .document-center-tabs button.active {
  background: var(--program-accent);
  color: var(--p-white);
  box-shadow: 0 8px 20px rgba(var(--program-accent-rgb), 0.18);
}

body[data-program] .document-purpose-cards button:hover,
body[data-program] .document-purpose-cards button.active {
  border-color: color-mix(in srgb, var(--program-accent) 48%, var(--p-border));
  background: var(--program-accent-soft);
  color: color-mix(in srgb, var(--program-accent) 78%, var(--p-text));
}

/* Accounts: the summary column stacks naturally beside the independent editor. */
.accounts-layout {
  grid-template-columns: minmax(280px, 0.82fr) minmax(380px, 1.18fr);
  align-items: start;
}

.accounts-summary-column {
  display: grid;
  gap: 16px;
  min-width: 0;
  align-content: start;
}

@media (max-width: 960px) {
  .accounts-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}