/* UX 5.1: the shared manager shell and dashboard presentation. */
:root { --m51-header-height: 118px; --m51-sidebar-width: 230px; }

body>main:has(#manager25:not(.hidden)) { max-width: none; margin: 0; padding: var(--m51-header-height) 0 0; }
body:has(#manager25:not(.hidden)) #dev-personas:not(:empty) { width: calc(100% - var(--m51-sidebar-width)); margin-left: var(--m51-sidebar-width); }
#manager25:not(.hidden) { display: block; min-height: calc(100vh - var(--m51-header-height)); }
#manager25 .m51-header {
  position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center;
  width: 100%; height: var(--m51-header-height); padding: 14px clamp(20px, 2.2vw, 36px);
  gap: clamp(20px, 2.8vw, 44px); color: #10394d;
  background: linear-gradient(104deg, #fff 0%, #fff 19%, #f5fdfb 41%, #e7f8f7 67%, #e2f0fb 100%);
  border-bottom: 1px solid #cfe3e7; box-shadow: 0 5px 24px #133b4a14;
}
#manager25 .m51-logo { display: flex; flex: 0 0 175px; align-items: center; justify-content: flex-start; height: 100%; min-width: 0; }
#manager25 .m51-logo img { display: block; width: 132px; max-width: 100%; height: auto; object-fit: contain; }
#manager25 .m25-utility { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: clamp(8px, 1.15vw, 18px); min-width: 0; min-height: 0; margin: 0; }
#manager25 #m25-global-search { flex: 1 1 290px; width: auto; min-width: 145px; max-width: 440px; height: 46px; background: #ffffffdb; border: 1px solid #cbdfe5; border-radius: 11px; box-shadow: 0 2px 9px #17475a0a; }
#manager25 #m25-global-query { min-width: 0; font-size: .85rem; }
#manager25 .m25-top { display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; order: 0; min-width: 0; min-height: 0; gap: .6rem; margin: 0; padding: 0; }
#manager25 .m25-top label { display: flex; align-items: center; gap: .35rem; min-width: 0; color: #315d6b; font-size: .8rem; }
#manager25 #m25-dossier-label { flex: 0 1 250px; min-width: 0; }
#manager25 #m25-dossier { width: min(190px, 100%); min-width: 0; min-height: 44px; }
#manager25 #m25-locale { min-height: 44px; max-width: 110px; }
#manager25 #m25-refresh { min-height: 44px; }
#manager25 .m25-user { flex: none; gap: .55rem; min-width: 0; padding: 0; font-size: .83rem; }
#manager25 .m25-user { position: relative; display: block; }
#manager25 .m25-user summary { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .2rem .4rem; border-radius: 10px; cursor: pointer; list-style: none; }
#manager25 .m25-user summary::-webkit-details-marker { display: none; }
#manager25 .m25-user summary:hover, #manager25 .m25-user[open] summary { background: #ffffffa8; }
#manager25 .m51-profile-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: grid; gap: .35rem; min-width: 170px; padding: .85rem; border: 1px solid #d4e4e8; border-radius: 11px; background: #fff; box-shadow: 0 12px 30px #0c34402c; }
#manager25 .m51-profile-menu strong { font-size: .9rem; }
#manager25 .m51-profile-menu small { font-size: .75rem; }
#manager25 .m51-profile-menu button { margin-top: .4rem; min-height: 38px; }
#manager25 .m25-user-avatar { flex: 0 0 36px; width: 36px; height: 36px; background: linear-gradient(135deg, #0e8e86, #3b78a1); }
#manager25 #m25-activity-shortcut { flex: 0 0 42px; width: 42px; height: 42px; }
#manager25 .m25-sidebar, body:has(#dev-personas:not(:empty)) #manager25 .m25-sidebar { position: fixed; top: var(--m51-header-height); bottom: auto; left: 0; z-index: 20; width: var(--m51-sidebar-width); height: calc(100vh - var(--m51-header-height)); padding: 1.25rem .8rem .9rem; overflow-y: auto; background: linear-gradient(160deg, #0d3441, #0a303c 60%, #123e49); }
#manager25 .m25-main { width: calc(100% - var(--m51-sidebar-width)); max-width: none; min-width: 0; margin: 0 0 0 var(--m51-sidebar-width); padding: clamp(1.3rem, 2.1vw, 2rem) clamp(1.2rem, 2.5vw, 2.8rem) 3rem; }
#manager25 .m25-nav button.active { background: linear-gradient(90deg, #207d7e, #1b636b); box-shadow: inset 4px 0 #7ce2d7, 0 3px 12px #092c3429; }
#manager25 .m25-sidebar-account { margin-top: auto; }
#manager25 .m305-home-intro { margin-bottom: 1rem; }
#manager25 .m305-home>h1, #manager25 .m305-home-intro h1 { color: #0d3448; font-weight: 700; }
#manager25 .m305-home-intro h1 { margin-bottom: .15rem !important; }
#manager25 .m51-subtitle { margin: 0; color: #55717b; font-size: .92rem; }
#manager25 .m305-today { margin: .2rem 0 1.15rem; }
#manager25 .m305-today-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.7rem, 1.1vw, 1.15rem); }
#manager25 .m305-today-grid .m305-kpi { height: 126px; min-height: 126px; padding: 1rem; border-radius: 13px; box-shadow: 0 7px 22px #153e4b0d; }
#manager25 .m305-kpi-icon { flex: 0 0 50px; width: 50px; height: 50px; }
#manager25 .m305-kpi-copy strong { font-size: 2rem !important; }
#manager25 .m305-kpi-copy>span { font-size: .88rem !important; }
#manager25 .m3a-feed { margin: .85rem 0 1.25rem; border-radius: 12px; box-shadow: 0 5px 20px #153e4b0a; }
#manager25 .m3a-feed-head { padding: .7rem 1rem; }
#manager25 .m3a-event { min-height: 54px; }
#manager25 .m305-dossier-table-wrap { border-radius: 12px; box-shadow: 0 7px 22px #153e4b0c; }
#manager25 .m305-section-heading { margin-bottom: .65rem; }
#manager25 :is(.m305-paper, .m305-dossier-header, .m305-actions-table, .m305-finding-content) { border-radius: 12px; box-shadow: 0 5px 20px #153e4b0a; }
#manager25 #m25-view { scroll-margin-top: calc(var(--m51-header-height) + 16px); }
#manager25 :is(.m3a-feed, .m305-dossier-header, .m305-paper) { scroll-margin-top: calc(var(--m51-header-height) + 16px); }

@media (max-width: 1200px) and (min-width: 761px) {
  :root { --m51-sidebar-width: 70px; }
  #manager25 .m51-header { gap: 18px; padding-inline: 18px; }
  #manager25 .m51-logo { flex-basis: 145px; }
  #manager25 .m51-logo img { width: 132px; }
  #manager25 .m25-utility { gap: 8px; }
  #manager25 .m25-top { flex-basis: auto; gap: .35rem; }
  #manager25 .m25-top label { font-size: 0; }
  #manager25 .m25-top select { font-size: .78rem; }
  #manager25 #m25-dossier-label { flex-basis: 155px; }
  #manager25 #m25-dossier { width: 155px; }
  #manager25 #m25-locale { max-width: 90px; }
  #manager25 #m25-refresh { font-size: .75rem; padding-inline: .45rem; }
  #manager25 .m25-user #m25-user-name { display: none; }
  #manager25 .m25-sidebar-account { justify-content: center; padding-inline: 0; }
  #manager25 .m25-sidebar-account>span:last-child { display: none; }
  #manager25 #m25-global-search { flex-basis: 180px; }
  #manager25 .m305-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --m51-header-height: 112px; --m51-sidebar-width: 0px; }
  #manager25 .m51-header { display: grid; grid-template-columns: 100px 42px minmax(0, 1fr); grid-template-rows: 42px 48px; align-content: center; gap: 5px 7px; padding: 7px 12px; }
  #manager25 .m51-logo { grid-column: 1; grid-row: 1; height: 42px; }
  #manager25 .m51-logo img { width: 62px; }
  #manager25 .m25-menu-toggle { display: grid; place-items: center; grid-column: 2; grid-row: 1; position: static; width: 42px; min-height: 40px; padding: 0; border-radius: 9px; background: #e2f2f3; color: #104554; font-size: 1.3rem; }
  #manager25 .m25-menu-toggle span { display: none; }
  #manager25 .m25-utility { display: contents; }
  #manager25 #m25-global-search { grid-column: 1 / 3; grid-row: 2; width: 100%; min-width: 0; height: 42px; }
  #manager25 #m25-global-query { font-size: .76rem; }
  #manager25 .m25-top { grid-column: 3; grid-row: 2; justify-content: flex-start; gap: 3px; margin: 0; min-width: 0; }
  #manager25 .m25-top label { font-size: 0; }
  #manager25 .m25-top select { min-height: 42px; padding: .3rem .25rem; font-size: .72rem; }
  #manager25 #m25-dossier-label { flex: 1 1 auto; min-width: 0; }
  #manager25 #m25-dossier { width: 100%; min-height: 42px; }
  #manager25 #m25-language-label { flex: 0 0 75px; }
  #manager25 #m25-locale { width: 75px; max-width: 75px; }
  #manager25 #m25-refresh { flex: 0 0 34px; width: 34px; min-width: 34px; min-height: 42px; padding: 0; font-size: 0; }
  #manager25 #m25-refresh::before { content: '↻'; font-size: 1.25rem; }
  #manager25 #m25-activity-shortcut { grid-column: 3; grid-row: 1; justify-self: end; margin-right: 43px; }
  #manager25 .m25-user { grid-column: 3; grid-row: 1; justify-self: end; }
  #manager25 .m25-user #m25-user-name { display: none; }
  #manager25 .m25-sidebar { display: none; top: var(--m51-header-height); width: min(290px, 85vw); height: calc(100dvh - var(--m51-header-height)); padding-top: 1rem; box-shadow: 8px 0 26px #0b344044; }
  #manager25 .m25-sidebar.open { display: flex; }
  #manager25 .m25-sidebar.open .m25-nav button { justify-content: flex-start; }
  #manager25 .m25-sidebar.open .m25-nav button .m3a-nav-label { display: inline; }
  #manager25 .m25-sidebar.open .m25-sidebar-account>span:last-child { display: grid; }
  #manager25 .m25-main { width: 100%; margin: 0; padding: 1.1rem .9rem 2rem; }
  #manager25 .m305-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  #manager25 .m305-today-grid { grid-template-columns: 1fr; gap: .65rem; }
  #manager25 .m305-today-grid .m305-kpi { height: auto; min-height: 88px; padding: .75rem .9rem; }
  #manager25 .m305-kpi-copy small { display: block; }
  #manager25 .m305-kpi-copy strong { font-size: 1.75rem !important; }
  #manager25 .m3a-feed { max-height: 235px; overflow-y: auto; }
}

@media print {
  body>main:has(#manager25:not(.hidden)) { padding-top: 0; }
  #manager25 .m51-header, #manager25 .m25-sidebar { display: none !important; }
  #manager25 .m25-main { width: 100%; margin: 0; padding: 0; }
}

/* The contributor screen shares the new header colors and card finish. */
.field-body>header { position: sticky; top: 0; z-index: 20; min-height: 72px; background: linear-gradient(104deg, #fff 0%, #f3fcfa 48%, #e3f1fb 100%); color: #10394d; border-bottom: 1px solid #cfe3e7; box-shadow: 0 5px 20px #133b4a12; }
.field-body>header h1, .field-body>header .page-brand { color: #0d3448; }
.field-body :is(#field-list, #field-task-action, #field-notifications, .toolbar) { border-radius: 12px; box-shadow: 0 5px 20px #153e4b0a; }
@media (max-width: 540px) { .field-body>header { min-height: 62px; } }