/* Mahara application UI — a compact system for authenticated work screens. */
:root {
  --app-ink: #101510;
  --app-ink-soft: #26342b;
  --app-green: #086b43;
  --app-green-dark: #123f2b;
  --app-green-soft: #eef6f1;
  --app-canvas: #ffffff;
  --app-surface: #ffffff;
  --app-line: #e1e7e3;
  --app-line-strong: #c6d0c9;
  --app-muted: #5e6a62;
  --app-danger: #a43c36;
  --app-warning: #8a5b14;
  --app-info: #315f73;
  --app-radius: 12px;
  --app-shadow: 0 8px 24px rgba(18, 36, 25, .045);
}

body.app-shell-page { background: var(--app-canvas); color: var(--app-ink); }
body.app-shell-page .main-content { min-height: calc(100vh - 90px); }
body.app-shell-page .main-footer { display: none; }
body.app-shell-page .main-header { background: rgba(255, 255, 255, .97); }

.app-shell { width: min(1240px, calc(100% - 40px)); margin-inline: auto; padding: 26px 0 72px; }
.app-shell.is-narrow { width: min(760px, calc(100% - 32px)); }

.workspace-nav {
  display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 26px; padding: 6px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface);
}
.workspace-nav::-webkit-scrollbar { display: none; }
.workspace-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 11px;
  color: var(--app-muted); text-decoration: none; white-space: nowrap; font-size: .82rem; font-weight: 750;
  border: 1px solid transparent; border-radius: 8px;
}
.workspace-nav a:hover { color: var(--app-green-dark); background: #f5f7f3; }
.workspace-nav a.is-active { color: #fff; background: var(--app-green-dark); }
.workspace-nav i { width: 15px; text-align: center; }

.app-page-head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--app-line-strong);
}
.app-page-head > div { min-width: 0; }
.app-kicker { display: block; margin-bottom: 7px; color: var(--app-green); font-size: .74rem; font-weight: 850; letter-spacing: .05em; }
.app-page-head h1 { margin: 0; color: var(--app-ink); font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.12; letter-spacing: -.025em; }
.app-page-head p { max-width: 680px; margin: 7px 0 0; color: var(--app-muted); font-size: .92rem; line-height: 1.65; }
.app-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.app-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 41px;
  padding: 9px 15px; border: 1px solid var(--app-green-dark); border-radius: 8px;
  background: var(--app-green-dark); color: #fff; text-decoration: none; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer;
}
.app-button:hover { background: #0b3321; color: #fff; }
.app-button.is-secondary { background: transparent; color: var(--app-green-dark); }
.app-button.is-secondary:hover { background: var(--app-green-soft); }
.app-button.is-quiet { border-color: var(--app-line); background: var(--app-surface); color: var(--app-ink-soft); }
.app-button.is-danger { border-color: #d6a7a2; background: transparent; color: var(--app-danger); }
.app-button.is-small { min-height: 34px; padding: 6px 11px; font-size: .78rem; }
.app-button[disabled] { opacity: .72; cursor: not-allowed; }

.app-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.app-span-8 { grid-column: span 8; }
.app-span-7 { grid-column: span 7; }
.app-span-6 { grid-column: span 6; }
.app-span-5 { grid-column: span 5; }
.app-span-4 { grid-column: span 4; }
.app-span-3 { grid-column: span 3; }
.app-panel { border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); }
.app-panel-pad { padding: 24px; }
.app-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.app-panel-head h2, .app-panel-head h3 { margin: 0; color: var(--app-ink); font-size: 1.03rem; }
.app-panel-head p { margin: 3px 0 0; color: var(--app-muted); font-size: .8rem; }

.app-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--app-line); background: var(--app-line); }
.app-metric { min-height: 105px; padding: 17px; background: var(--app-surface); }
.app-metric span { display: block; color: var(--app-muted); font-size: .76rem; }
.app-metric strong { display: block; margin-top: 12px; color: var(--app-ink); font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; }
.app-metric small { display: block; margin-top: 8px; color: #5f6b64; font-size: .72rem; }

.app-profile-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.app-avatar { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--app-green-dark); color: #fff; font-size: 1.5rem; font-weight: 850; }
.app-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-profile-summary h1 { margin: 0 0 4px; font-size: 1.45rem; }
.app-profile-summary p { margin: 0; color: var(--app-muted); font-size: .86rem; }
.app-meta-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; color: var(--app-muted); font-size: .77rem; }
.app-meta-line span { display: inline-flex; align-items: center; gap: 6px; }

.app-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-action-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; padding: 15px 17px; border: 1px solid var(--app-line); border-radius: 10px; color: var(--app-ink-soft); text-decoration: none; }
.app-action-card:hover { border-color: var(--app-green); background: #f6faf7; }
.app-action-card span { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 800; }
.app-action-card i { color: var(--app-green); }

.app-list { display: flex; flex-direction: column; }
.app-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--app-line); }
.app-list-row:first-child { padding-top: 0; }
.app-list-row:last-child { padding-bottom: 0; border-bottom: 0; }
.app-list-row h3 { margin: 0 0 4px; font-size: .93rem; }
.app-list-row p { margin: 0; color: var(--app-muted); font-size: .78rem; }

.app-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.app-card { display: flex; flex-direction: column; min-height: 190px; padding: 20px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); }
.app-card:hover { border-color: #8faa98; }
.app-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.app-card h2, .app-card h3 { margin: 12px 0 5px; font-size: 1rem; line-height: 1.35; }
.app-card p { margin: 0; color: var(--app-muted); font-size: .82rem; line-height: 1.6; }
.app-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 15px; }
.app-card-foot .app-button:first-child { flex: 1; }

.app-chip { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 4px 8px; border: 1px solid var(--app-line); background: #f4f5f1; color: var(--app-muted); font-size: .7rem; font-weight: 750; }
.app-chip.is-success, .app-status.is-new, .app-status.is-open, .app-status.is-completed, .app-status.is-paid { border-color: #b7d2c1; background: #edf6f0; color: #13613b; }
.app-status.is-verified { border-color: #b7d2c1; background: #edf6f0; color: #13613b; }
.app-chip.is-warning, .app-status.is-pending, .app-status.is-offer_selected, .app-status.is-agreement_pending, .app-status.is-awaiting_payment_confirmation, .app-status.is-in_progress, .app-status.is-unpaid { border-color: #dbcba9; background: #fbf6e9; color: #72501b; }
.app-status.is-processing { border-color: #b8cfdb; background: #edf6fa; color: var(--app-info); }
.app-chip.is-danger, .app-status.is-disputed, .app-status.is-cancelled, .app-status.is-failed, .app-status.is-rejected { border-color: #e0b7b3; background: #fff2f1; color: var(--app-danger); }
.app-status { display: inline-flex; padding: 5px 9px; border: 1px solid var(--app-line); background: #f4f5f1; color: var(--app-muted); font-size: .7rem; font-weight: 800; white-space: nowrap; }

.app-filter { margin-bottom: 18px; padding: 18px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); }
.app-filter-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; }
.app-field { grid-column: span 3; }
.app-field.is-wide { grid-column: span 6; }
.app-field label { display: block; margin-bottom: 6px; color: var(--app-ink-soft); font-size: .73rem; font-weight: 800; }
.app-field input, .app-field select, .app-form input:not([type=checkbox]):not([type=radio]), .app-form select, .app-form textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--app-line-strong); border-radius: 8px; background: #fff; color: var(--app-ink); font: inherit; font-size: .86rem;
}
.app-form textarea { min-height: 110px; resize: vertical; }
.app-field input:focus, .app-field select:focus, .app-form input:focus, .app-form select:focus, .app-form textarea:focus { outline: 3px solid rgba(8, 107, 67, .13); border-color: var(--app-green); }
.app-form-group { margin-bottom: 15px; }
.app-form-group > label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 800; }
.app-help { display: block; margin-top: 5px; color: var(--app-muted); font-size: .72rem; line-height: 1.5; }
.app-error { margin-top: 5px; color: var(--app-danger); font-size: .72rem; }
.app-form-section { padding: 19px 0; border-bottom: 1px solid var(--app-line); }
.app-form-section:first-child { padding-top: 0; }
.app-form-section:last-child { padding-bottom: 0; border-bottom: 0; }
.app-form-section > summary { cursor: pointer; list-style: none; color: var(--app-ink); font-size: .95rem; font-weight: 850; }
.app-form-section > summary::-webkit-details-marker { display: none; }
.app-form-section > summary::after { content: "+"; float: left; color: var(--app-green); font-size: 1.15rem; }
.app-form-section[open] > summary::after { content: "−"; }
.app-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.app-choice-grid ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0; list-style: none; }
.app-choice-grid li { border: 1px solid var(--app-line); padding: 8px 10px; background: #fff; font-size: .78rem; }
.app-choice-grid label { display: flex; align-items: center; gap: 7px; cursor: pointer; }

.app-table-wrap { overflow-x: auto; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); }
.app-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.app-table th { padding: 12px 14px; border-bottom: 1px solid var(--app-line-strong); background: #f7f9f8; color: var(--app-muted); text-align: right; font-size: .7rem; font-weight: 850; }
.app-table td { padding: 13px; border-bottom: 1px solid var(--app-line); color: var(--app-ink-soft); font-size: .78rem; vertical-align: middle; }
.app-table tr:last-child td { border-bottom: 0; }
.app-table td strong { color: var(--app-ink); font-size: .84rem; }
.app-table a { color: var(--app-green-dark); font-weight: 800; text-decoration: none; }

@media (max-width: 720px) {
  .responsive-record-wrap { overflow: visible; border: 0; background: transparent; }
  .responsive-record-table { min-width: 0; border: 0; }
  .responsive-record-table thead { display: none; }
  .responsive-record-table tbody { display: grid; gap: 12px; }
  .responsive-record-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--app-line-strong); background: var(--app-surface); }
  .responsive-record-table td { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--app-line); overflow-wrap: anywhere; }
  .responsive-record-table td::before { content: attr(data-label); color: var(--app-muted); font-size: .66rem; font-weight: 800; }
  .responsive-record-table .record-main,
  .responsive-record-table .record-wide,
  .responsive-record-table .record-action { grid-column: 1 / -1; }
  .responsive-record-table .record-main { border-top: 3px solid var(--app-green-dark); }
  .responsive-record-table .record-action { display: block; padding: 0; border: 0; }
  .responsive-record-table .record-action::before { content: none; }
  .responsive-record-table .record-action a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; color: #fff; background: var(--app-green-dark); }
}

.app-notice { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; padding: 13px 15px; border-right: 3px solid var(--app-green); background: #eaf1ec; color: var(--app-ink-soft); font-size: .8rem; line-height: 1.6; }
.app-notice.is-warning { border-color: #a57629; background: #f8f1df; }
.app-notice strong { display: block; margin-bottom: 2px; }

.app-empty { display: grid; place-items: center; min-height: 235px; padding: 32px; border: 1px dashed var(--app-line-strong); background: rgba(255, 254, 250, .55); text-align: center; }
.app-empty i { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 13px; background: var(--app-green-soft); color: var(--app-green); font-size: 1.1rem; }
.app-empty h2, .app-empty h3 { margin: 0 0 6px; font-size: 1rem; }
.app-empty p { max-width: 470px; margin: 0 0 16px; color: var(--app-muted); font-size: .8rem; line-height: 1.6; }

.app-progress { height: 5px; overflow: hidden; margin: 15px 0 7px; background: #dce2dd; }
.app-progress span { display: block; height: 100%; background: var(--app-green); }
.app-section-gap { margin-top: 14px; }
.app-number, bdi { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.app-form-actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.app-confirm-panel { margin-top: 42px; }
.app-confirm-panel h1 { margin: 7px 0 0; color: var(--app-ink); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.35; }
.app-confirm-panel > p { margin: 9px 0 0; color: var(--app-muted); font-size: .76rem; line-height: 1.75; }

/* Account recovery uses the same compact, green identity without utility-CSS dependencies. */
.account-recovery-page .main-content { background: #f5f7f4; }
.account-recovery { display: grid; min-height: 560px; place-items: center; padding: 48px 20px 72px; }
.account-recovery-card { width: min(520px, 100%); padding: 34px; background: #fff; border: 1px solid var(--app-line-strong); box-shadow: 0 22px 60px rgba(16, 39, 28, .08); }
.account-recovery-card.is-message { text-align: center; }
.account-recovery-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 22px; color: #fff; background: var(--app-green-dark); font-size: 1rem; }
.account-recovery-card.is-message .account-recovery-icon { margin-inline: auto; }
.account-recovery-icon.is-success { color: var(--app-green-dark); background: #dcefe3; }
.account-recovery-icon.is-warning { color: #7a5011; background: #f6e8c7; }
.account-recovery-kicker { display: block; margin-bottom: 7px; color: var(--app-green); font-size: .68rem; font-weight: 850; }
.account-recovery h1 { margin: 0; color: var(--app-ink); font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.25; }
.account-recovery h1 + p { margin: 11px 0 0; color: var(--app-muted); font-size: .8rem; line-height: 1.75; }
.account-recovery-form { display: grid; gap: 9px; margin-top: 24px; }
.account-recovery-form label { margin-top: 5px; color: var(--app-ink-soft); font-size: .72rem; font-weight: 800; }
.account-recovery-form input { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--app-ink); background: #fbfcfa; border: 1px solid var(--app-line-strong); outline: 0; font: inherit; font-size: .8rem; }
.account-recovery-form input:focus { background: #fff; border-color: var(--app-green); box-shadow: 0 0 0 3px rgba(7, 93, 67, .09); }
.account-recovery-form button,
.account-recovery-primary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; padding: 10px 15px; color: #fff; background: var(--app-green-dark); border: 1px solid var(--app-green-dark); text-decoration: none; font: inherit; font-size: .75rem; font-weight: 850; cursor: pointer; }
.account-recovery-card.is-message .account-recovery-primary { width: fit-content; min-width: 210px; margin: 25px auto 0; }
.account-recovery-back { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--app-muted); text-decoration: none; font-size: .69rem; font-weight: 750; }
.account-recovery-back:hover { color: var(--app-green); }
.account-recovery-help { color: var(--app-muted); font-size: .65rem; line-height: 1.6; }
.account-recovery-help ul { margin: 4px 0 0; padding-right: 18px; }
.account-recovery-errors { padding: 8px 10px; color: #8d302e; background: #fff0ef; font-size: .66rem; }
.account-recovery-errors ul { margin: 0; padding-right: 16px; }
@media (max-width: 560px) {
  .account-recovery { min-height: 500px; padding: 28px 12px 48px; }
  .account-recovery-card { padding: 25px 19px; }
  .account-recovery-card.is-message .account-recovery-primary { width: 100%; }
  .app-form-actions { display: grid; }
  .app-form-actions .app-button { width: 100%; }
  .app-confirm-panel { margin-top: 18px; }
}

/* Bring still-unmigrated application screens into the same visual rhythm. */
.opportunities-page .section-title, .workspace-page .section-title { font-size: clamp(1.75rem, 3vw, 2.45rem); }
.portfolio-manage-page .work-library { padding-top: 30px; }
.portfolio-manage-page .work-library-head h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.portfolio-manage-page .work-library-head { padding-bottom: 20px; }
.service-market .market-heading h1 { max-width: 680px; font-size: clamp(1.8rem, 3vw, 2.55rem); }
.hiring-list-page .hiring-dashboard-head h1, .hiring-list-page .hiring-dashboard-head p { color: #fff; }
.smart-brief-page .smart-brief-head h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
.hiring-request-page .hiring-intro h1 { font-size: clamp(1.85rem, 3.2vw, 2.65rem); }
.directory-page .talent-selector-copy h1 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.auth-shell .main-footer, .smart-brief-page .main-footer, .hiring-request-page .main-footer { display: none; }

/* Profile editor: one compact hierarchy instead of stacked promotional cards. */
.profile-edit-page .app-panel { padding: 0 22px; }
.profile-edit-section { padding: 22px 0; border-bottom: 1px solid var(--app-line); }
.profile-edit-section:last-of-type { border-bottom: 0; }
.profile-edit-page .app-form-row { margin-top: 0; }
.profile-edit-full { grid-column: 1 / -1; }
.profile-photo-field { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 18px; padding: 13px; border: 1px solid var(--app-line); background: #f7f7f2; }
.profile-photo-field > img, .profile-photo-field > span { width: 72px; height: 72px; display: grid; place-items: center; object-fit: cover; border-radius: 3px; background: var(--app-green-dark); color: #fff; }
.profile-photo-field .app-form-group { margin: 0; }
.profile-edit-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 0 20px; border-top: 1px solid var(--app-line); }

/* Keep the specialist editors inside the same scale and canvas. */
.portfolio-editor-page .portfolio-editor { padding-top: 28px; }
.portfolio-editor-page .portfolio-editor-head h1 { font-size: clamp(1.75rem, 3vw, 2.4rem) !important; line-height: 1.15; }
.portfolio-editor-page .portfolio-editor-head { padding-bottom: 20px; }
.service-editor-page .service-editor { padding-top: 28px; }
.service-editor-page .market-heading h1 { max-width: 680px; font-size: clamp(1.75rem, 3vw, 2.4rem) !important; line-height: 1.15; }
.execution-workspace-page .execution-space { padding-top: 28px; }
.execution-workspace-page .execution-head h1 { font-size: clamp(1.75rem, 3vw, 2.4rem) !important; }

/* Request cockpit: compact, task-led, and aligned to the platform palette. */
.request-detail-page .project-workspace { background: var(--app-canvas) !important; }
.request-detail-page .workspace-header { padding: 28px 0 50px !important; background: var(--app-green-dark) !important; }
.request-detail-page .workspace-header .container, .request-detail-page .main-layout { max-width: 1240px !important; }
.request-detail-page .workspace-header .project-title { max-width: 780px; margin-bottom: 10px !important; font-size: clamp(1.65rem, 3vw, 2.35rem) !important; line-height: 1.15 !important; letter-spacing: -.02em; }
.request-detail-page .workspace-header .project-meta { gap: 16px !important; font-size: .78rem !important; }
.request-detail-page .project-identity .id-badge { margin-bottom: 8px !important; padding: 3px 7px !important; border-radius: 2px !important; font-size: .7rem !important; }
.request-detail-page .status-badge { padding: 6px 9px !important; border-radius: 3px !important; background: rgba(255,255,255,.12) !important; box-shadow: none !important; font-size: .76rem !important; }
.request-detail-page .status-badge.in_progress, .request-detail-page .status-badge.completed { background: #dceadf !important; color: #16452f !important; }
.request-detail-page .status-badge.new { background: #f4ead2 !important; color: #664917 !important; }
.request-detail-page .main-layout { gap: 14px !important; margin-top: -24px !important; }
.request-detail-page .card { margin-bottom: 14px !important; padding: 17px !important; border-color: var(--app-line) !important; border-radius: 4px !important; background: var(--app-surface) !important; box-shadow: var(--app-shadow) !important; }
.request-detail-page .card-title { font-size: 1rem !important; }
.request-detail-page .stepper-card { padding: 14px 10px !important; }
.request-detail-page .step { padding: 0 7px !important; }
.request-detail-page .step-icon { width: 34px !important; height: 34px !important; border-radius: 3px !important; }
.request-detail-page .step-label { font-size: .7rem !important; }
.request-detail-page .step.active .step-icon { border-color: var(--app-green) !important; background: var(--app-green) !important; }
.request-detail-page .tabs-nav { gap: 3px !important; margin-bottom: 12px !important; padding: 3px !important; border: 1px solid var(--app-line); background: #f2f3ef; }
.request-detail-page .tab-btn { padding: 8px 11px !important; border-radius: 2px !important; font-size: .78rem !important; }
.request-detail-page .tab-btn.active { box-shadow: none !important; }
.request-detail-page .alert-box { gap: 12px !important; margin-bottom: 14px !important; padding: 14px !important; border-radius: 4px !important; box-shadow: none !important; }
.request-detail-page .alert-box.info,
.request-detail-page .alert-box.info p { color: #075985 !important; }
.request-detail-page .alert-icon, .request-detail-page .icon, .request-detail-page .action-icon-wrapper { border-radius: 3px !important; }
.request-detail-page .chat-card { height: min(590px, 68vh) !important; padding: 0 !important; }
.request-detail-page .msg-avatar, .request-detail-page .avatar.lg, .request-detail-page .send-btn, .request-detail-page .input-wrapper { border-radius: 4px !important; }
.request-detail-page .msg-bubble, .request-detail-page .action-btn, .request-detail-page .offer-highlights { border-radius: 3px !important; }
.request-detail-page .timer-card { background: var(--app-green-dark) !important; }
.request-detail-page .timer-content .label { color: #e2ece7 !important; opacity: 1 !important; }
.request-detail-page .timer-content .value { color: #cce5d3 !important; }
.request-detail-page .action-btn.danger { color: #b42323 !important; }
.request-detail-page .action-card-highlight { background: var(--app-green-dark) !important; }
.request-detail-page .pulse-btn { animation: none !important; box-shadow: none !important; }

/* Older finance operations inherit the new shell without changing their logic. */
.finance-legacy-page .page-section, .finance-legacy-page > .main-content { background: transparent !important; }
.finance-legacy-page .page-section > .container, .finance-legacy-page .main-content > .container, .finance-legacy-page .container.mx-auto { width: min(1180px, calc(100% - 40px)) !important; max-width: 1180px !important; margin-inline: auto !important; padding-top: 28px !important; padding-bottom: 64px !important; }
.finance-legacy-page .section-header { margin-bottom: 18px !important; padding-bottom: 17px; border-bottom: 1px solid var(--app-line-strong); }
.finance-legacy-page .section-badge { display: inline-flex; padding: 4px 8px !important; border: 1px solid #b7d2c1; border-radius: 2px !important; background: #edf6f0 !important; color: var(--app-green) !important; font-size: .7rem !important; font-weight: 800; }
.finance-legacy-page .section-title, .finance-legacy-page h1.text-2xl, .finance-legacy-page h1.md\:text-3xl { margin-top: 7px !important; font-size: clamp(1.65rem, 3vw, 2.3rem) !important; line-height: 1.15 !important; }
.finance-legacy-page .section-description { margin-top: 5px !important; color: var(--app-muted) !important; font-size: .82rem !important; }
.finance-legacy-page .profile-section, .finance-legacy-page .card { border: 1px solid var(--app-line) !important; border-radius: 4px !important; background: var(--app-surface) !important; box-shadow: var(--app-shadow) !important; }
.finance-legacy-page .checkout-total-card { color: #fff !important; background: linear-gradient(135deg, var(--primary-600) 0%, #064e3b 100%) !important; }
.finance-legacy-page .checkout-total-card .amount-display,
.finance-legacy-page .checkout-total-card .amount-display span { color: #fff !important; }
.finance-legacy-page .card-section-title { color: var(--app-ink) !important; font-size: .93rem !important; }
.finance-legacy-page .table-wrapper,
.finance-legacy-page .overflow-x-auto {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 3px !important;
  border-color: var(--app-line) !important;
  box-shadow: none !important;
}
.finance-legacy-page .main-content,
.finance-legacy-page .page-section,
.finance-legacy-page .container,
.finance-legacy-page .profile-section,
.finance-legacy-page .card { min-width: 0; }
.finance-legacy-page table th { background: #f3f4ef !important; color: var(--app-muted) !important; font-size: .72rem !important; }
.finance-legacy-page table td { font-size: .78rem !important; }
.finance-legacy-page .btn { border-radius: 3px !important; box-shadow: none !important; }
.finance-legacy-page .btn-primary, .finance-legacy-page .filter-buttons .btn.active { border-color: var(--app-green-dark) !important; background: var(--app-green-dark) !important; color: #fff !important; }
.finance-legacy-page input, .finance-legacy-page select, .finance-legacy-page textarea { border-radius: 3px !important; }
.finance-legacy-page .invoice-grid { gap: 14px !important; }
.finance-legacy-page .amount-chip, .finance-legacy-page .badge { border-radius: 2px !important; }
.finance-state-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 12px; border: 1px solid #b7d2c1; border-radius: 3px; background: #edf6f0; color: var(--app-green); font-size: 1rem !important; opacity: 1 !important; }
.finance-legacy-page .card-section-title i { margin-left: 6px; color: var(--app-green); }

/* Active finance requests: dense tables become calm, comparable request records. */
.finance-active { width: min(100% - 40px, 1120px); margin-inline: auto; padding: 34px 0 72px; }
.finance-active-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.finance-active-head h1 { margin: 5px 0 0; color: var(--app-ink); font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.2; }
.finance-active-head p { margin: 7px 0 0; color: var(--app-muted); font-size: .78rem; }
.finance-active-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--app-line); background: #fff; }
.finance-active-metrics article { min-width: 0; padding: 17px 19px; border-left: 1px solid var(--app-line); }
.finance-active-metrics article:last-child { border-left: 0; }
.finance-active-metrics span { display: block; margin-bottom: 5px; color: var(--app-muted); font-size: .67rem; font-weight: 750; }
.finance-active-metrics strong { color: var(--app-ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.finance-active-metrics small { color: var(--app-muted); font-size: .62rem; }
.finance-active-metrics .needs-attention strong { color: #9a5a12; }
.finance-active-list { display: grid; gap: 10px; }
.finance-request-card { padding: 19px 21px; border: 1px solid var(--app-line); background: #fff; box-shadow: 0 10px 30px rgba(16, 39, 28, .035); }
.finance-request-card > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--app-line); }
.finance-request-card > header > div { min-width: 0; }
.finance-request-code { color: var(--app-green); font-size: .65rem; font-weight: 850; }
.finance-request-card h2 { margin: 3px 0 0; overflow: hidden; color: var(--app-ink); font-size: 1rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.finance-request-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 14px 0; }
.finance-request-parties div { min-width: 0; }
.finance-request-card dt { color: var(--app-muted); font-size: .62rem; font-weight: 750; }
.finance-request-card dd { margin: 3px 0 0; overflow: hidden; color: var(--app-ink-soft); font-size: .75rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.finance-request-card > footer { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-top: 13px; border-top: 1px solid var(--app-line); }
.finance-request-values { display: flex; gap: 34px; margin: 0; }
.finance-request-values dd { font-size: .82rem; font-variant-numeric: tabular-nums; }
.finance-request-card .app-button { flex: 0 0 auto; }

@media (max-width: 980px) {
  .app-span-8, .app-span-7, .app-span-6, .app-span-5, .app-span-4 { grid-column: span 12; }
  .app-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-field, .app-field.is-wide { grid-column: span 6; }
}
@media (max-width: 680px) {
  .app-shell { width: min(100% - 24px, 1240px); padding-top: 14px; }
  .workspace-nav { margin-inline: -12px; border-right: 0; border-left: 0; }
  .workspace-nav a { min-height: 36px; padding: 7px 9px; }
  .app-page-head, .app-profile-summary { display: flex; flex-direction: column; align-items: stretch; }
  .app-page-head { gap: 14px; }
  .app-head-actions { width: 100%; }
  .app-head-actions .app-button { flex: 1; }
  .app-profile-summary .app-button { width: 100%; }
  .app-metrics, .app-actions-grid, .app-cards { grid-template-columns: 1fr; }
  .app-field, .app-field.is-wide { grid-column: span 12; }
  .app-form-row, .app-choice-grid ul { grid-template-columns: 1fr; }
  .app-panel-pad { padding: 16px; }
  .app-card { min-height: 170px; }
  .profile-edit-page .app-panel { padding-inline: 15px; }
  .profile-photo-field { grid-template-columns: 56px minmax(0, 1fr); padding: 10px; }
  .profile-photo-field > img, .profile-photo-field > span { width: 56px; height: 56px; }
  .profile-edit-actions { position: sticky; bottom: 0; z-index: 8; margin-inline: -15px; padding-inline: 15px; background: rgba(255,254,250,.96); }
  .profile-edit-actions .app-button { flex: 1; }
  .request-detail-page .workspace-header { padding: 20px 0 42px !important; }
  .request-detail-page .header-content { gap: 14px !important; }
  .request-detail-page .project-title { font-size: 1.55rem !important; }
  .request-detail-page .project-meta { flex-direction: column; gap: 5px !important; }
  .request-detail-page .main-layout { margin-top: -22px !important; }
  .request-detail-page .content-column { order: 0 !important; }
  .request-detail-page .sidebar-column { order: 1 !important; }
  .request-detail-page .card { padding: 14px !important; }
  .finance-legacy-page .page-section > .container, .finance-legacy-page .main-content > .container, .finance-legacy-page .container.mx-auto { width: min(100% - 24px, 1180px) !important; padding-top: 16px !important; }
  .finance-legacy-page .overflow-x-auto,
  .finance-legacy-page .table-wrapper { scrollbar-width: thin; }
  .finance-active { width: min(100% - 24px, 1120px); padding: 22px 0 48px; }
  .finance-active-head { margin-bottom: 14px; }
  .finance-active-head h1 { font-size: 1.55rem; }
  .finance-active-head p { max-width: 30ch; font-size: .7rem; line-height: 1.6; }
  .finance-active-metrics { grid-template-columns: 1fr 1fr; }
  .finance-active-metrics article { padding: 13px 14px; }
  .finance-active-metrics article:nth-child(2) { border-left: 0; }
  .finance-active-metrics article:last-child { grid-column: 1 / -1; border-top: 1px solid var(--app-line); }
  .finance-request-card { padding: 16px; }
  .finance-request-card h2 { font-size: .9rem; }
  .finance-request-parties { gap: 10px; }
  .finance-request-card > footer { display: grid; align-items: stretch; }
  .finance-request-values { justify-content: space-between; gap: 12px; }
  .finance-request-values > div { min-width: 0; }
  .finance-request-card .app-button { width: 100%; justify-content: space-between; }
}

/* Secondary information remains readable on white management surfaces. */
.portfolio-manage-page .work-card-meta,
.portfolio-manage-page .work-card-state small,
.portfolio-manage-page .verified-work-section a > small { color: #5f6b64; }
.portfolio-manage-page .work-library-head > a,
.portfolio-manage-page .work-library-head > a span { color: #fff; }

/* Unified administration shell. */
.admin-shell { background: #ecece6; color: var(--app-ink); }
.admin-shell .layout { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.admin-shell .sidebar { width: auto; min-height: 100vh; padding: 0; background: #101510; color: #dbe5dd; border-left: 1px solid #283129; }
.admin-shell .admin-brand { display: flex; align-items: center; gap: 11px; margin: 20px 18px 17px; color: #fff; text-decoration: none; }
.admin-shell .admin-brand .brand-symbol { width: 38px; height: 38px; }
.admin-shell .admin-brand span:last-child { display: grid; }
.admin-shell .admin-brand small { color: #91a096; font-size: .68rem; }
.admin-shell .sidebar-title, .admin-shell .sidebar-subtitle { margin-inline: 19px; }
.admin-shell .sidebar-title { font-size: .75rem; font-weight: 800; color: #fff; }
.admin-shell .sidebar-subtitle { margin-top: 2px; color: #7f8d83; font-size: .68rem; }
.admin-shell .admin-main { min-width: 0; }
.admin-shell .topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #d2d7d2; background: rgba(250, 250, 246, .95); backdrop-filter: blur(12px); }
.admin-shell .admin-content { width: min(1280px, calc(100% - 40px)); max-width: none; margin: auto; padding: 24px 0 60px; }
.admin-shell .topbar > .container { width: min(1280px, calc(100% - 40px)); max-width: none; margin: auto; }
.admin-shell .sidebar-toggle { display: none; border-radius: 3px; background: var(--app-green-dark); }
.admin-shell .admin-sidebar { display: flex; flex-direction: column; min-height: calc(100vh - 105px); gap: 20px; padding: 12px 12px 18px; }
.admin-shell .sidebar-section { display: grid; gap: 3px; }
.admin-shell .sidebar-section-title { margin: 0 8px 7px; color: #718077; font-size: .65rem; font-weight: 800; letter-spacing: .05em; }
.admin-shell .sidebar-link { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 8px 10px; border: 1px solid transparent; border-radius: 3px; color: #b3c0b7; text-decoration: none; font-size: .79rem; font-weight: 750; }
.admin-shell .sidebar-link i { width: 17px; text-align: center; color: #7f9185; }
.admin-shell .sidebar-link:hover { background: #1a221c; color: #fff; }
.admin-shell .sidebar-link.active { border-color: #2f6446; background: #173d29; color: #fff; }
.admin-shell .sidebar-link.active i { color: #a8d5b8; }
.admin-shell .sidebar-footer { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid #29322b; }
.admin-shell .sidebar-footer a { color: #91a096; text-decoration: none; font-size: .75rem; }
.admin-shell .topbar-container { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-shell .topbar-context { display: grid; }
.admin-shell .topbar-context span { color: var(--app-muted); font-size: .67rem; }
.admin-shell .topbar-context strong { font-size: .88rem; }
.admin-shell .topbar-actions { display: flex; align-items: center; gap: 8px; }
.admin-shell .topbar-search-form { display: flex; align-items: center; width: 250px; height: 37px; border: 1px solid var(--app-line); background: #fff; }
.admin-shell .topbar-search-form input { flex: 1; min-width: 0; height: 100%; padding: 7px 10px; border: 0; outline: 0; background: transparent; font: inherit; font-size: .75rem; }
.admin-shell .topbar-search-form button { width: 36px; height: 100%; border: 0; background: transparent; color: var(--app-green); cursor: pointer; }
.admin-shell .topbar-date, .admin-shell .topbar-logout { height: 37px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--app-line); background: #fff; color: var(--app-muted); font-size: .72rem; text-decoration: none; }
.admin-shell .topbar-logout:hover { border-color: #d6a7a2; color: var(--app-danger); }
.admin-shell button.topbar-logout { font-family: inherit; cursor: pointer; }
@media (max-width: 768px) {
  .admin-shell .layout { display: block; }
  .admin-shell .sidebar { width: 270px; }
  .admin-shell .admin-content, .admin-shell .topbar > .container { width: min(100% - 24px, 1280px); }
  .admin-shell .sidebar-toggle { display: inline-flex; }
}

/* Final spacing and surface pass across account, finance and administration screens. */
.admin-shell { background: #fff; }
body.admin-shell .topbar { background: rgba(255, 255, 255, .97); border-color: var(--app-line); }
.admin-shell .admin-content { padding-top: 28px; }
.admin-shell .dashboard-card,
.admin-shell .card,
.admin-shell .stats-card,
.admin-shell .table-card,
.admin-shell .filter-card {
  background: #fff;
  border-color: var(--app-line);
  border-radius: 12px;
  box-shadow: var(--app-shadow);
}

.request-detail-page .card,
.finance-legacy-page .profile-section,
.finance-legacy-page .card,
.finance-legacy-page .table-wrapper,
.finance-legacy-page .btn,
.finance-legacy-page input,
.finance-legacy-page select,
.finance-legacy-page textarea {
  border-radius: 10px !important;
}
.request-detail-page .card { margin-bottom: 18px !important; padding: 20px !important; }
.request-detail-page .tabs-nav { gap: 6px !important; padding: 5px !important; background: #f6f8f7 !important; border-radius: 10px !important; }
.request-detail-page .tab-btn { border-radius: 7px !important; }
.finance-legacy-page table th { background: #f7f9f8 !important; }
.profile-edit-actions { background: rgba(255, 255, 255, .97); }

@media (max-width: 680px) {
  .app-grid { gap: 14px; }
  .app-panel-pad { padding: 18px; }
  .request-detail-page .card { padding: 16px !important; }
}