/*
 * Muhdo.Common.Blazor theme: the design tokens and the Bootstrap restyling the Muhdo portals share (buttons, links,
 * cards, badges, list groups, forms, dropdowns, nav tiles, table header rows and the generic utilities).
 *
 * Link once in index.html, after Bootstrap (its overrides win over Bootstrap's by coming later), and before the app's own
 * theme sheet, muhdo-shell.css, muhdo-toasts.css, muhdo-controls.css and the app's own overrides:
 * <link href="_content/Muhdo.Common.Blazor/css/muhdo-theme.css?v=<package version>" rel="stylesheet" />
 *
 * The tokens sit on a plain :root with no @layer. A portal overrides them in a :root block of its own linked after this
 * sheet, or per organisation in a style block injected after every link. The app links Google Fonts (Hanken Grotesk,
 * JetBrains Mono) and Material Design Icons itself; this sheet only names the fonts.
 */

:root {
   --brand-50:  #ECF7FC;
   --brand-100: #D2ECF7;
   --brand-300: #6FC1E4;
   --brand-500: #1694C8;
   --brand-600: #0E7CAB;
   --brand-700: #0C6488;
   --brand-800: #0C4E69;

   --brand:        var(--brand-500);
   --brand-strong: var(--brand-600);
   --brand-tint:   var(--brand-50);
   --brand-on:     #ffffff;
   --brand-rgb:    22, 148, 200;

   --ink-900: #0E1A22;
   --ink-800: #16242E;
   --ink-700: #243441;
   --ink-600: #3C4D59;
   --ink-500: #5B6B76;
   --ink-400: #8595A0;
   --ink-300: #AEBBC4;
   --line-300: #D7DEE4;
   --line-200: #E4EAEF;
   --line-100: #EEF2F5;
   --surface:  #FFFFFF;
   --surface-2:#FAFCFD;
   --canvas:   #F4F7F9;

   --nav-bg:        linear-gradient(180deg, #0E2A37 0%, #0A2230 100%);
   --nav-link:      rgba(255, 255, 255, .72);
   --nav-active-bg: color-mix(in srgb, var(--sidebar-fg) 12%, transparent);
   --nav-active-fg: var(--sidebar-fg);
   --sidebar-fg:    #FFFFFF;
   --topbar-bg:     #E9EEF2;
   --topbar-fg:     var(--ink-800);

   --nav-hover-bg:         rgba(var(--brand-rgb), .16);
   --nav-active-bar:       var(--brand);
   --nav-active-bar-width: 3px;
   --nav-active-radius:    0 9px 9px 0;
   --nav-brand-bg:         transparent;

   --topbar-line:          var(--line-300);
   --topbar-shadow:        0 2px 12px rgba(13, 30, 40, .08);
   --topbar-ink-900:       var(--ink-900);
   --topbar-ink-600:       var(--ink-600);
   --topbar-ink-500:       var(--ink-500);
   --topbar-ink-400:       var(--ink-400);
   --topbar-pill-bg:       var(--surface-2);
   --topbar-pill-bg-focus: var(--surface);
   --topbar-pill-line:     var(--line-200);
   --topbar-accent:        var(--brand-strong);
   --topbar-accent-tint:   rgba(var(--brand-rgb), .10);
   --topbar-link:          var(--brand-strong);
   --topbar-bg-sm:         var(--nav-bg);
   --topbar-ink-sm:        var(--sidebar-fg);
   --topbar-line-sm:       color-mix(in srgb, var(--topbar-ink-sm) 8%, transparent);

   --card-head-bg:  var(--surface-2);
   --page-bg:       var(--canvas);

   --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;
   --shadow-sm: 0 1px 2px rgba(13,30,40,.06), 0 1px 1px rgba(13,30,40,.04);
   --shadow-md: 0 4px 14px rgba(13,30,40,.08), 0 2px 4px rgba(13,30,40,.04);
   --shadow-lg: 0 24px 60px rgba(13,30,40,.16), 0 8px 20px rgba(13,30,40,.08);

   --ok:#1F9D6B;     --ok-tint:#E6F6EF;    --ok-line:#BDE6D3;
   --warn:#C77A12;   --warn-tint:#FBF1DD;  --warn-line:#F0DBAE;
   --bad:#D6455B;    --bad-tint:#FBE7EB;   --bad-line:#F2C3CC;
   --info:var(--brand-600);  --info-tint:var(--brand-50);
   --grape:#5B5BD6;  --grape-tint:#ECECFB; --grape-line:#CFCFF4;

   --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

   --content-bg:    var(--surface);
   --page-title:    var(--ink-900);

   --card-head-border: 1px solid var(--line-200);
   --card-head-fg:     var(--ink-800);
   --card-body-bg:     var(--surface);
   --card-body-fg:     var(--ink-800);

   --c-primary-bg: var(--brand);        --c-primary-border: 1px solid var(--brand);       --c-primary-fg: var(--brand-on);
   --c-success-bg: var(--ok-tint);      --c-success-border: 1px solid var(--ok-line);     --c-success-fg: var(--ok);
   --c-warning-bg: var(--warn-tint);    --c-warning-border: 1px solid var(--warn-line);   --c-warning-fg: var(--warn);
   --c-info-bg:    var(--info-tint);    --c-info-border: 1px solid var(--brand-100);      --c-info-fg:    var(--brand-700);
   --c-danger-bg:  var(--bad-tint);     --c-danger-border: 1px solid var(--bad-line);     --c-danger-fg:  var(--bad);
   --c-light-bg:   var(--surface-2);    --c-light-border: 1px solid var(--line-200);      --c-light-fg:   var(--ink-700);
   --c-secondary-bg: var(--line-100);   --c-secondary-border: 1px solid var(--line-200);  --c-secondary-fg: var(--ink-600);

   --lg-bg: var(--surface);   --lg-border: 1px solid var(--line-200);  --lg-fg: var(--ink-800);
   --lg-active-bg: var(--brand-50); --lg-active-border: 1px solid var(--brand-100); --lg-active-fg: var(--brand-700);

   --acc-head-bg: var(--surface-2); --acc-head-fg: var(--ink-800);
   --acc-body-bg: var(--surface);   --acc-body-fg: var(--ink-700);

   --bs-primary-rgb:       var(--brand-rgb);
   --bs-link-color:        var(--brand-strong);
   --bs-link-color-rgb:    var(--brand-rgb);
   --bs-link-hover-color:  var(--brand-700);
   --bs-primary-bg-subtle: var(--brand-50);
   --bs-primary-border-subtle: var(--brand-100);
   --bs-body-bg:           var(--page-bg);
   --bs-body-color:        var(--ink-800);
   --bs-border-color:      var(--line-200);
   --bs-card-bg:           var(--surface);
   --bs-card-cap-bg:       var(--card-head-bg);
   --bs-font-sans-serif:   'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}


.btn-primary {
   --bs-btn-bg: var(--brand);
   --bs-btn-border-color: var(--brand);
   --bs-btn-hover-bg: var(--brand-strong);
   --bs-btn-hover-border-color: var(--brand-strong);
   --bs-btn-active-bg: var(--brand-700);
   --bs-btn-active-border-color: var(--brand-700);
   --bs-btn-disabled-bg: var(--brand);
   --bs-btn-disabled-border-color: var(--brand);
   --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-info {
   --bs-btn-color: #fff;
   --bs-btn-hover-color: #fff;
   --bs-btn-active-color: #fff;
   --bs-btn-disabled-color: #fff;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-secondary {
   --bs-btn-color: var(--ob-fg);
   --bs-btn-border-color: var(--ob-line);
   --bs-btn-hover-color: var(--ob-fg);
   --bs-btn-hover-bg: var(--ob-tint);
   --bs-btn-hover-border-color: var(--ob-line);
   --bs-btn-active-color: var(--ob-fg);
   --bs-btn-active-bg: var(--ob-tint);
   --bs-btn-active-border-color: var(--ob-line);
   --bs-btn-disabled-color: var(--ob-fg);
   --bs-btn-disabled-bg: transparent;
   --bs-btn-disabled-border-color: var(--ob-line);
}
.btn-outline-primary   { --ob-fg: var(--brand-strong);   --ob-line: var(--brand);    --ob-tint: var(--brand-tint); --bs-btn-focus-shadow-rgb: var(--brand-rgb); }
.btn-outline-success   { --ob-fg: var(--c-success-fg);   --ob-line: var(--ok-line);  --ob-tint: var(--c-success-bg); }
.btn-outline-danger    { --ob-fg: var(--c-danger-fg);    --ob-line: var(--bad-line); --ob-tint: var(--c-danger-bg); }
.btn-outline-secondary { --ob-fg: var(--c-secondary-fg); --ob-line: var(--line-200); --ob-tint: var(--c-secondary-bg); }
.text-primary { color: var(--brand-strong) !important; }
.border-primary { border-color: var(--brand) !important; }
a { color: var(--brand-strong); text-decoration: none; }


body {
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}


.card-header {
   background-color: var(--card-head-bg);
   background-image: linear-gradient(180deg, rgba(var(--brand-rgb), .08), transparent);
   border-bottom: var(--card-head-border);
   color: var(--card-head-fg);
   font-weight: 600;
}
.card-body {
   background-color: var(--card-body-bg);
   color: var(--card-body-fg);
}

.card > .card-body:last-child {
   border-bottom-left-radius: calc(var(--r-lg) - 1px);
   border-bottom-right-radius: calc(var(--r-lg) - 1px);
}
.card > .card-body:first-child:last-child {
   border-radius: calc(var(--r-lg) - 1px);
}
.card .card > .card-header, .card .card > .card-body, .card .card > .card-footer,
.acc-body .card > .card-header, .acc-body .card > .card-body, .acc-body .card > .card-footer {
   border-radius: 0;
}


.bg-primary { background-color: var(--c-primary-bg) !important; border: var(--c-primary-border) !important; color: var(--c-primary-fg) !important; }
.bg-primary-subtle { border: 1px solid var(--bs-primary-bg-subtle) !important; }
.bg-success,   .bg-success-subtle   { background-color: var(--c-success-bg)   !important; border: var(--c-success-border)   !important; color: var(--c-success-fg)   !important; }
.bg-warning,   .bg-warning-subtle   { background-color: var(--c-warning-bg)   !important; border: var(--c-warning-border)   !important; color: var(--c-warning-fg)   !important; }
.bg-info,      .bg-info-subtle      { background-color: var(--c-info-bg)      !important; border: var(--c-info-border)      !important; color: var(--c-info-fg)      !important; }
.bg-light,     .bg-light-subtle     { background-color: var(--c-light-bg)     !important; border: var(--c-light-border)     !important; color: var(--c-light-fg)     !important; }
.bg-secondary, .bg-secondary-subtle { background-color: var(--c-secondary-bg) !important; border: var(--c-secondary-border) !important; color: var(--c-secondary-fg) !important; }
.bg-danger-subtle { background-color: var(--c-danger-bg) !important; border: var(--c-danger-border) !important; color: var(--c-danger-fg) !important; }


.btn-light:not(.dropdown-toggle) {
   --bs-btn-bg: var(--surface);
   --bs-btn-border-color: var(--line-300);
   --bs-btn-color: var(--ink-800);
   --bs-btn-hover-bg: var(--line-100);
   --bs-btn-hover-border-color: var(--line-300);
   --bs-btn-hover-color: var(--ink-900);
   --bs-btn-active-bg: var(--line-100);
   --bs-btn-active-border-color: var(--line-300);
   box-shadow: var(--shadow-sm);
}


.list-group-item { background-color: var(--lg-bg); border: var(--lg-border); color: var(--lg-fg); }
.list-group-item.active {
   background-color: var(--lg-active-bg);
   border: var(--lg-active-border);
   color: var(--lg-active-fg);
}
.list-group-item-action { transition: background-color .12s ease, color .12s ease; }
.list-group-item-action:hover:not(.active) { background-color: var(--surface-2); color: var(--ink-900); }
.list-group-item h5 { font-size: 1rem; }


.av-tile { background: var(--brand-50); color: var(--brand-600); }
img.av-tile { object-fit: contain; padding: 4px; }

.card-head-icon,
.card-header > i:first-child {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   margin-right: 9px;
   border-radius: 9px;
   background: var(--brand-50);
   color: var(--brand-600);
   font-size: 17px;
   vertical-align: middle;
}

.spec-list { display: flex; flex-direction: column; }

.spec-row {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 10px 2px;
   border-bottom: 1px solid var(--line-100);
}
.spec-row:last-child { border-bottom: 0; }
.spec-label {
   color: var(--ink-400);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
}
.spec-label {
   flex: 0 0 auto;
}
.spec-value {
   min-width: 0;
   padding-left: 14px;
   font-weight: 600;
   color: var(--ink-800);
   word-break: break-word;
}
.spec-value a { color: var(--brand-700); }
.spec-value a:hover { text-decoration: underline; }
@media (min-width: 768px) {
   .spec-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; }
   .spec-value { padding-left: 0; text-align: right; }
}

.kpi:hover { border-color:var(--brand-300); box-shadow:var(--shadow-md); }

.skeleton .sk-hero, .skeleton .sk-card { border-radius:var(--r-lg); background:var(--line-100); margin-bottom:10px; animation:skeleton-pulse 1.2s ease-in-out infinite; }
.skeleton .sk-hero { height:76px; }
.skeleton .sk-card { height:62px; }
@keyframes skeleton-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* Let grid columns shrink so their content can truncate instead of overflowing into the next column */
.min-w-0 { min-width:0; }

.mono { font-family: var(--mono); }


.btn, .btn-group-sm > .btn { --bs-btn-border-radius: 9px; --bs-btn-font-weight: 600; }


.badge { --bs-badge-border-radius: 999px; --bs-badge-font-weight: 600; --bs-badge-padding-x: .65em; --bs-badge-padding-y: .4em; }


.text-danger { color: var(--bad) !important; }


/* Sets one run of content off from the next where a card or a heading would be too much */
.divider { border-top:1px solid var(--line-300); opacity:1; margin:18px 0 14px; }


.form-select {
   background-color: var(--surface-2);
   border-radius: var(--r-md);
}
.form-select:hover { border-color: var(--line-300); }
.form-select:focus {
   border-color: var(--brand);
   box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}


.btn-primary.dropdown-toggle:not(.dropdown-toggle-split) {
   --bs-btn-bg: var(--surface-2);
   --bs-btn-border-color: var(--line-200);
   --bs-btn-color: var(--ink-800);
   --bs-btn-hover-bg: var(--line-100);
   --bs-btn-hover-border-color: var(--line-300);
   --bs-btn-hover-color: var(--ink-900);
   --bs-btn-active-bg: var(--line-100);
   --bs-btn-active-border-color: var(--line-300);
   --bs-btn-active-color: var(--ink-900);
   --bs-btn-disabled-bg: var(--surface-2);
   --bs-btn-disabled-border-color: var(--line-200);
   --bs-btn-disabled-color: var(--ink-400);
   font-size: 1rem;
   font-weight: 600;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: 2rem;
}
.btn-primary.dropdown-toggle:not(.dropdown-toggle-split)::after {
   position: absolute;
   top: 50%;
   right: .75rem;
   margin: 0;
   transform: translateY(-50%);
}


.who { display:flex; align-items:center; gap:10px; }
.who b { font-weight:600; color:var(--ink-900); font-size:13px; }
.cell-stack { display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.cell-stack small { color:var(--ink-400); font-size:11.5px; }
.kid { font-family:var(--mono); font-size:12.5px; color:var(--ink-800); font-weight:500; }


.kpi { display:block; background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-lg); padding:16px 17px; box-shadow:var(--shadow-sm); height:100%; }
.kpi .kc { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.kpi .lab { font-size:12px; color:var(--ink-500); font-weight:600; }
.kpi .val { font-size:30px; font-weight:800; color:var(--ink-900); letter-spacing:-.02em; line-height:1; font-feature-settings:"tnum"; }
.kpi .delta { display:inline-flex; align-items:center; gap:2px; font-weight:700; font-family:var(--mono); font-size:11.5px; padding:2px 6px; border-radius:6px; }
.kpi .delta.up { color:var(--ok); background:var(--ok-tint); }
.kpi .delta.down { color:var(--bad); background:var(--bad-tint); }
.kpi .spark { display:block; width:100%; height:30px; margin-top:10px; opacity:.9; }


.work-row { display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line-100); cursor:pointer; transition:background-color .12s ease; }
.work-row:last-child { border-bottom:none; }
.work-row .who { gap:9px; flex:1; min-width:0; }
.work-row .age { font-size:11.5px; color:var(--ink-400); font-family:var(--mono); }
.work-row:hover { background:var(--surface-2); }


.barrow { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.barrow:last-child { margin-bottom:0; }
.barrow .bl { width:130px; font-size:12.5px; color:var(--ink-600); display:flex; align-items:center; gap:7px; }
.barrow .bl .mdi { color:var(--brand-600); font-size:15px; }
.barrow .bt { flex:1; height:9px; border-radius:999px; background:var(--line-100); overflow:hidden; }
.barrow .bt i { display:block; height:100%; border-radius:999px; }
.barrow .bv { width:46px; text-align:right; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-800); }

/* Everything from here on stays after the rules above: .nav-tile and .header-row beat .bg-light, the nav tile's icon beats
   the card-header icon, and .sub-text beats .card-body, only by coming later. */
.nav-tile {
   margin-bottom: 14px;
   background-color: var(--surface) !important;
}

   .nav-tile .card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: transparent;
      border: 0;
      color: var(--ink-800);
   }

      .nav-tile .card-header > i {
         display: inline-grid;
         place-items: center;
         width: 36px;
         height: 36px;
         flex-shrink: 0;
         border-radius: 10px;
         font-size: 19px;
         transition: background .12s ease;
      }

   .nav-tile:hover .card-header {
      color: var(--brand-700);
   }

      .nav-tile:hover .card-header > i {
         background: var(--brand-100);
      }

.avatar-xs {
   width: 24px;
   height: 24px;
}

.avatar-sm {
   width: 36px;
   height: 36px;
   object-fit: cover;
}

.avatar-md {
   width: 48px;
   height: 48px;
   object-fit: cover;
}

.sub-text {
   font-size: 12px;
   color: var(--ink-400);
}

.card {
   --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
   border: 1px solid var(--line-300);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow-sm);
}

   /* A card nested in a card or an accordion body drops its own chrome. Nav tiles keep theirs, and so do plan note cards,
      which read as a grid of tiles. */
   .card .card:not(.nav-tile, .plan-note),
   .acc-body .card:not(.nav-tile, .plan-note) {
      border: 0;
      border-radius: 0;
      box-shadow: none;
   }

/* Clickable cards (grid tiles + full-width list rows) get the nav-tile lift + brand ring on hover */
.card.hand-cursor {
   transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

   .card.hand-cursor:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(var(--brand-rgb), .14);
      border-color: rgba(var(--brand-rgb), .45);
   }

.card-header.h4, .card-header.h5, .card-header h3 {
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.4;
   margin: 0;
}

.btn.h4 {
   margin: 0;
}

.arrow-none::after {
   display: none;
}

.input-group > .btn:has(+ .input-control) {
   border-top-right-radius: var(--bs-btn-border-radius) !important;
   border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}

.font-20 {
   font-size: 20px !important;
}

.font-24 {
   font-size: 24px !important;
}

.valid.modified:not([type=checkbox]) {
   outline: 1px solid #26b050;
}

.invalid {
   outline: 1px solid red;
}

.invalid-tooltip {
   position: static;
   display: block;
   width: fit-content;
}

.dropdown-menu {
   max-height: 300px;
   overflow-y: auto;
   overflow-x: hidden;
   background: var(--surface);
   border: 1px solid var(--line-300);
   border-radius: var(--r-md);
   box-shadow: var(--shadow-lg);
   padding: 6px;
}

.dropdown-menu .dropdown-item {
   border-radius: var(--r-sm);
   padding: 8px 12px;
   color: var(--ink-700);
   overflow: hidden;
   text-overflow: ellipsis;
}

.dropdown-menu .dropdown-item i {
   padding-right: 10px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
   background-color: var(--brand-50);
   color: var(--brand-700);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
   background-color: var(--brand);
   color: #FFFFFF;
}


img.flag-small {
   width: 16px;
   height: 12px;
   margin-right: 0.4rem;
}


/* Toasts (muhdo-toasts.css) on the theme tokens, so per-organisation colours flow through */
:root {
   --muhdo-toast-z-index: 9999;
   --muhdo-toast-success: var(--ok);   --muhdo-toast-success-tint: var(--ok-tint);
   --muhdo-toast-warning: var(--warn); --muhdo-toast-warning-tint: var(--warn-tint);
   --muhdo-toast-error:   var(--bad);  --muhdo-toast-error-tint:   var(--bad-tint);
   --muhdo-toast-info:    var(--info); --muhdo-toast-info-tint:    var(--info-tint);
   --muhdo-toast-bg: var(--card-body-bg); --muhdo-toast-fg: var(--card-body-fg);
   --muhdo-toast-border-color: var(--line-300);
   --muhdo-toast-radius: var(--r-md); --muhdo-toast-shadow: var(--shadow-lg);
}


.message-component-background {
   font-size: .9375rem;
}

.row-hover-light:hover {
   background-color: var(--surface-2);
}

.card:has(.dropdown-menu.show) {
   z-index: 3;
}


.hand-cursor {
   cursor: pointer;
}

.overflow-150, .overflow-300, .overflow-400, .overflow-500 {
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
}

.overflow-150 {
   max-height: 150px;
}

.overflow-300 {
   max-height: 300px;
}

.overflow-400 {
   max-height: 400px;
}

.overflow-500 {
   max-height: 500px;
}

.header-row {
   text-transform: uppercase;
   letter-spacing: .09em;
   font-size: 10.5px;
   font-weight: 700;
   color: var(--ink-400) !important;
   background: transparent !important;
   border-bottom: 1px solid var(--line-200);
   padding: 8px 0;
}

.sub-text {
   font-size: 12px;
}

.min-height-150px {
   min-height: 150px !important;
}

.min-height-500px {
   min-height: 500px !important;
}

.image-preview {
   max-height: 160px;
}

.text-truncate-custom {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}