/* DioArt: sapphire, silver and paper. Loaded after the legacy layout. */
:root { --dio-blue:#245bd7; --dio-ink:#142641; --dio-silver:#e8edf4; --dio-line:#d5deeb; }
body.app-body { --accent:#245bd7; --accent-strong:#1745af; --accent-soft:#eaf0ff; --text:#142641; --muted:#60718a; font-family:"Segoe UI",sans-serif; background:#f2f5fa!important; color:var(--dio-ink); }
body.app-body .brand-logo-theme { background-image:url('../images/dioart-identity.png')!important; background-size:contain!important; background-repeat:no-repeat; background-position:center; width:150px; height:104px; }
body.app-body .app-header { background:#102542!important; border-right:1px solid #284465!important; box-shadow:none!important; }
body.app-body .app-nav a { border-radius:10px!important; }
body.app-body .app-nav a.active,body.app-body .app-nav a[aria-current="page"] { background:#245bd7!important; color:white!important; box-shadow:0 6px 20px #07192e40!important; }
body.app-body .command-topbar { background:#fff!important; border:1px solid var(--dio-line)!important; border-radius:16px!important; box-shadow:0 5px 22px #233c6410!important; }
body.app-body .command-product-name { color:#245bd7!important; letter-spacing:.18em; font-size:.7rem; font-weight:800; text-transform:uppercase; }
body.app-body .panel,body.app-body .stat-card,body.app-body .metric-card,body.app-body .content-card { background:#fff!important; border:1px solid var(--dio-line)!important; border-radius:16px!important; box-shadow:0 7px 26px #233c640a!important; }
body.app-body .panel-header { border-bottom-color:var(--dio-line)!important; }
body.app-body .eyebrow { color:#42628d!important; letter-spacing:.13em; }
body.app-body .primary-action { background:#245bd7!important; color:#fff!important; border:1px solid #245bd7!important; border-radius:10px!important; box-shadow:0 5px 14px #245bd724!important; }
body.app-body .primary-action:hover { background:#1745af!important; }
body.app-body .secondary-action { background:#edf2fa!important; color:#234369!important; border:1px solid #d3deed!important; border-radius:10px!important; }
body.app-body input:focus,body.app-body select:focus,body.app-body textarea:focus { outline:2px solid #7fa5ff!important; outline-offset:2px; box-shadow:none!important; }
body.app-body table thead { background:#edf2f9!important; color:#3c526e!important; }
body.app-body table tbody tr:hover { background:#f2f6ff!important; }
body.app-body .busy-spinner { border-top-color:#245bd7!important; }
/* Colour helps distinguish the operational summaries without colouring body copy. */
body.app-body .stat-card:nth-child(4n+1),body.app-body .metric-card:nth-child(4n+1) { border-top:4px solid #3275eb!important; }
body.app-body .stat-card:nth-child(4n+2),body.app-body .metric-card:nth-child(4n+2) { border-top:4px solid #12a589!important; }
body.app-body .stat-card:nth-child(4n+3),body.app-body .metric-card:nth-child(4n+3) { border-top:4px solid #ed9a2c!important; }
body.app-body .stat-card:nth-child(4n+4),body.app-body .metric-card:nth-child(4n+4) { border-top:4px solid #9a62d8!important; }
body.app-body .command-avatar { background:#eee7fb!important; color:#7048b2!important; }
body.app-body .panel-title-icon { color:#158d91!important; }
body.app-body.minimal-page .dioart-kicker { color:#78e6cb; }
body.app-body.minimal-page .dioart-rule { background:linear-gradient(90deg,#52c9f2,#76dfb0,#f2b558); width:120px; }
body.app-body.minimal-page { background:#0c203b url('../images/dioart-gallery.png') center/cover fixed!important; }
body.minimal-page .minimal-shell { width:min(1180px,100%)!important; margin:0 auto!important; }
body.minimal-page .minimal-main { width:100%; padding:0!important; }
body.minimal-page .auth-shell { width:min(1120px,100%); margin:auto; display:grid; grid-template-columns:1fr 440px; align-items:center; gap:80px; min-height:90vh; padding:40px 24px; }
body.minimal-page .dioart-welcome { color:#fff; max-width:510px; }
.dioart-welcome .dioart-kicker { color:#afc9fa; font-size:.74rem; letter-spacing:.25em; font-weight:700; }
.dioart-welcome h1 { font-size:clamp(2.5rem,4.4vw,4.4rem); line-height:1.06; letter-spacing:-.045em; margin:24px 0; color:#fff; font-weight:650; }
.dioart-welcome p { font-size:1.08rem; line-height:1.8; color:#c3d1e6; max-width:400px; }
.dioart-welcome .dioart-rule { width:70px; height:3px; background:#9cbdf7; margin:32px 0; }
body.minimal-page .auth-panel { width:100%!important; max-width:none!important; padding:36px!important; border:1px solid #d9e2ef!important; border-radius:22px!important; background:#fff!important; box-shadow:0 24px 80px #020e2660!important; }
body.minimal-page .auth-brand-heading { margin-bottom:24px; }
body.minimal-page .auth-brand-heading .brand-logo-theme { width:180px; height:145px; margin:auto; }
body.minimal-page .auth-form label { color:#314663!important; }
body.minimal-page .auth-form input[type="text"],body.minimal-page .auth-form input[type="password"],body.minimal-page .auth-form input[type="email"] { background:#f5f7fb!important; border:1px solid #cdd9e8!important; color:#142641!important; border-radius:10px!important; min-height:50px; }
body.minimal-page .auth-form input:focus { border-color:#245bd7!important; box-shadow:0 0 0 3px #245bd71c!important; }
body.minimal-page .auth-form .checkbox-row input { accent-color:#245bd7; }
body.minimal-page .auth-form .primary-action { background:#245bd7!important; color:white!important; border-radius:10px!important; }
body.minimal-page .auth-panel:hover { box-shadow:0 24px 80px #020e2660!important; }
@media(max-width:800px) { body.minimal-page .auth-shell { grid-template-columns:1fr; gap:24px; max-width:500px; padding:28px 18px; } .dioart-welcome h1 { font-size:2.3rem; margin:14px 0; } .dioart-welcome p,.dioart-welcome .dioart-rule { display:none; } body.minimal-page .auth-panel { padding:28px!important; } }

/* Keep the operational status readable at every dashboard width. */
html body.app-body:not(.minimal-page) .home-operations-alerts {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  border-top: 4px solid #12a589;
}
html body.app-body:not(.minimal-page) .home-operations-alerts .panel-header {
  grid-column: 1 / -1;
}
html body.app-body:not(.minimal-page) .home-operations-alerts h2 {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 700px) {
  html body.app-body:not(.minimal-page) .home-operations-alerts {
    grid-template-columns: minmax(0, 1fr);
  }
}