:root {
  --bg: #071724;
  --bg-soft: #0b2435;
  --panel: #ffffff;
  --panel-soft: #f6fafc;
  --text: #102a3b;
  --muted: #6c7f8d;
  --line: #dce8ee;
  --teal: #08a9ab;
  --teal-dark: #087d8d;
  --cyan: #37d7cf;
  --navy: #06283e;
  --danger: #c8434f;
  --warning: #c88416;
  --success: #218b67;
  --shadow: 0 18px 50px rgba(9, 37, 54, .14);
  --radius: 20px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: #edf5f7; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 58px; height: 58px; flex: 0 0 auto; filter: drop-shadow(0 10px 18px rgba(19, 185, 185, .18)); }
.brand-lockup h1 { margin: 0; letter-spacing: -.045em; font-size: clamp(1.6rem, 3vw, 2.5rem); color: var(--navy); }
.brand-lockup h1 span { color: var(--teal); }
.brand-lockup p { margin: 3px 0 0; color: #718896; }
.eyebrow { display: block; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .68rem; color: var(--teal-dark); }

.primary-button, .secondary-button, .danger-button {
  border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.primary-button { color: white; background: linear-gradient(135deg, #15b9b7, #0589a1); box-shadow: 0 10px 25px rgba(4, 150, 161, .24); }
.secondary-button { color: var(--navy); background: #eaf3f6; border: 1px solid #d3e2e8; }
.danger-button { color: white; background: #bd4552; }
.primary-button:hover, .secondary-button:hover, .danger-button:hover { transform: translateY(-1px); }
.icon-button { border: 0; background: transparent; color: inherit; border-radius: 10px; padding: 8px; }

/* Login */
html, body.login-body { height: 100%; overflow: hidden; }
.login-body { background: #eaf7f8; overflow: hidden; }
.login-shell {
  position: relative; isolation: isolate; width: 100%; max-width: 100vw; height: 100dvh; min-height: 620px;
  overflow: hidden; background:
    radial-gradient(circle at 10% 14%, rgba(255,255,255,.98) 0 18%, rgba(245,252,253,.92) 40%, rgba(216,241,243,.78) 72%, rgba(6,42,63,.98) 100%);
}
.login-grid-glow { position: absolute; inset: 0; z-index: -1; opacity: .24; pointer-events: none; background-image: linear-gradient(rgba(8,125,141,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(8,125,141,.08) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, #000, transparent 62%); }
.login-ambient { position: absolute; z-index: 0; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.ambient-one { width: 440px; height: 440px; left: -220px; bottom: -230px; background: rgba(53,225,209,.16); }
.ambient-two { width: 260px; height: 260px; left: 38%; top: -145px; background: rgba(13,142,179,.09); }
.login-panel { position: relative; z-index: 6; width: min(48%, 820px); height: 100%; display: grid; align-items: center; padding: clamp(24px, 3.2vw, 62px) clamp(28px, 5.2vw, 88px); background: transparent; }
.login-panel-inner { width: min(590px, 100%); margin: auto; position: relative; }
.login-brand { margin-bottom: clamp(16px, 2.2vh, 26px); }
.login-card { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.92); border-radius: 28px; padding: clamp(20px, 2.2vw, 28px); backdrop-filter: blur(24px) saturate(135%); box-shadow: 0 28px 70px rgba(16,61,78,.17), inset 0 1px rgba(255,255,255,.82); }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; background: rgba(226,239,243,.82); border-radius: 14px; padding: 4px; margin-bottom: 20px; }
.role-btn { border: 0; background: transparent; padding: 12px; border-radius: 11px; color: #526b78; font-weight: 800; }
.role-btn.active { color: #fff; background: linear-gradient(135deg, #19bcbc, #28d5c8); box-shadow: 0 8px 20px rgba(11,171,173,.24); }
.mini-icon { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; border: 1px solid currentColor; margin-right: 7px; font-size: .72rem; }
.login-alert { padding: 11px 13px; margin-bottom: 16px; border-radius: 10px; background: #ffedf0; color: #9e2937; font-size: .9rem; }
.login-form { display: grid; gap: 15px; }
.login-form label > span:first-child { display: block; margin-bottom: 7px; font-weight: 800; font-size: .84rem; }
.input-shell { min-height: 48px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.82); border: 1px solid #cfe0e7; border-radius: 12px; padding: 0 12px; transition: border .18s, box-shadow .18s, background .18s; }
.input-shell:focus-within { border-color: #18b8b8; background: #fff; box-shadow: 0 0 0 4px rgba(24,184,184,.1); }
.input-shell input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 12px 4px; color: var(--text); }
.field-icon { color: var(--teal-dark); font-weight: 900; font-size: .72rem; }
.password-toggle { color: #748b98; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #677e8b; font-size: .82rem; }
.check-label { display: inline-flex !important; align-items: center; gap: 7px; }
.check-label input { accent-color: var(--teal); }
.muted-link { color: #0d8ca0; }
.login-submit { min-height: 50px; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }
.login-hint { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 11px 13px; background: rgba(235,246,248,.78); border-radius: 12px; font-size: .72rem; color: #526d79; }
.login-hint strong { grid-row: span 2; align-self: center; color: var(--navy); }
.trust-row { margin-top: clamp(12px, 2vh, 20px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.trust-row div { padding: 8px 4px; border-right: 1px solid rgba(130,166,178,.25); }
.trust-row div:last-child { border-right: 0; }
.trust-row strong, .trust-row span { display: block; }
.trust-row strong { color: var(--navy); font-size: .74rem; }
.trust-row span { color: #83949e; font-size: .62rem; margin-top: 3px; }

.hero-panel { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; background: linear-gradient(105deg, transparent 0 34%, rgba(7,36,53,.08) 46%, rgba(5,34,51,.94) 76%, #041c2d 100%); }
.hero-panel::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(237,248,249,1) 0 40%, rgba(237,248,249,.96) 45%, rgba(237,248,249,.54) 51%, transparent 61%); }
.hero-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 78% 42%, rgba(30,197,194,.32), transparent 42%), linear-gradient(135deg, transparent 35%, rgba(2,24,39,.22)); }
.radial-gallery { position: absolute; z-index: 2; width: min(65vw, 1040px); aspect-ratio: 1; right: clamp(-245px, -9vw, -80px); top: 48%; transform: translateY(-50%); animation: galleryFloat 8s ease-in-out infinite; }
.radial-halo, .radial-track { position: absolute; border-radius: 50%; inset: 8%; pointer-events: none; }
.radial-halo { background: conic-gradient(from 80deg, rgba(61,224,207,.05), rgba(25,170,184,.62), rgba(255,255,255,.2), rgba(20,128,156,.7), rgba(61,224,207,.05)); filter: drop-shadow(0 18px 40px rgba(0,0,0,.2)); }
.halo-one { inset: 8%; animation: ringSpin 42s linear infinite; }
.halo-two { inset: 15%; opacity: .68; animation: ringSpinReverse 34s linear infinite; }
.radial-track { border: 1px solid rgba(112,241,229,.42); }
.track-one { inset: 4%; border-style: dashed; animation: ringSpin 56s linear infinite; }
.track-two { inset: 22%; border-color: rgba(255,255,255,.24); animation: ringSpinReverse 48s linear infinite; }
.hero-main-frame { position: absolute; left: 50%; top: 48%; width: 64%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; overflow: hidden; border: clamp(8px, .8vw, 13px) solid rgba(219,251,249,.88); box-shadow: 0 0 0 18px rgba(24,176,184,.19), 0 0 0 39px rgba(21,111,139,.18), 0 34px 90px rgba(0,0,0,.35); background: #07364c; }
.hero-image-stack { position: absolute; inset: 0; }
.hero-image { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 72% center; opacity: 0; transform: scale(1.09) rotate(.4deg); transition: opacity 1.2s ease, transform 7s cubic-bezier(.2,.65,.2,1); }
.hero-image.active { opacity: 1; transform: scale(1.015) rotate(0); }
.hero-main-glass { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 35%, rgba(2,22,37,.22) 78%); box-shadow: inset 0 0 60px rgba(3,31,48,.28); }
.orbit-node { position: absolute; z-index: 5; width: clamp(112px, 10vw, 180px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid rgba(235,255,253,.92); background: #0a4158; box-shadow: 0 18px 45px rgba(0,0,0,.3), 0 0 0 8px rgba(20,187,185,.15); }
.orbit-node img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.node-one { left: 10%; top: 8%; animation: nodeFloatOne 7s ease-in-out infinite; }
.node-two { right: 6%; top: 15%; width: clamp(100px, 8.8vw, 155px); animation: nodeFloatTwo 8.5s ease-in-out infinite; }
.node-three { left: 12%; bottom: 8%; width: clamp(105px, 9.2vw, 165px); animation: nodeFloatTwo 9s ease-in-out infinite reverse; }
.node-four { right: 4%; bottom: 12%; width: clamp(118px, 10vw, 180px); animation: nodeFloatOne 8s ease-in-out infinite reverse; }
.radial-pulse { position: absolute; z-index: 6; width: 12px; height: 12px; border-radius: 50%; background: #72f5e8; box-shadow: 0 0 20px #72f5e8, 0 0 42px rgba(114,245,232,.65); }
.pulse-one { left: 5%; top: 46%; animation: pulseGlow 2.6s ease-in-out infinite; }
.pulse-two { right: 13%; top: 47%; animation: pulseGlow 2.6s ease-in-out .8s infinite; }
.pulse-three { left: 48%; bottom: 1%; animation: pulseGlow 2.6s ease-in-out 1.5s infinite; }
.hero-copy { position: absolute; z-index: 7; right: clamp(30px, 4vw, 76px); bottom: clamp(38px, 6vh, 78px); width: min(520px, 29vw); padding: 21px 23px; color: #fff; border-radius: 20px; background: rgba(5,39,59,.74); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(18px); box-shadow: 0 18px 45px rgba(0,0,0,.25); pointer-events: auto; }
.hero-copy .eyebrow { color: #6ff4e5; }
.hero-copy h2 { margin: 7px 0 9px; font-size: clamp(1.55rem, 2.1vw, 2.7rem); line-height: 1.02; letter-spacing: -.04em; }
.hero-copy p { margin: 0; color: #d7ebf0; line-height: 1.45; font-size: .86rem; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.hero-pills span { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); padding: 6px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.slide-dots { position: absolute; z-index: 8; right: clamp(28px, 4vw, 72px); bottom: 22px; display: flex; gap: 7px; pointer-events: auto; }
.slide-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.34); }
.slide-dots button.active { width: 24px; border-radius: 99px; background: #5de8dd; }
@keyframes galleryFloat { 0%,100% { transform: translateY(-50%) translate3d(0,0,0); } 50% { transform: translateY(-50%) translate3d(-10px,-8px,0); } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes ringSpinReverse { to { transform: rotate(-360deg); } }
@keyframes nodeFloatOne { 0%,100% { transform: translate3d(0,0,0) rotate(-1deg); } 50% { transform: translate3d(12px,-13px,0) rotate(2deg); } }
@keyframes nodeFloatTwo { 0%,100% { transform: translate3d(0,0,0) rotate(1deg); } 50% { transform: translate3d(-12px,12px,0) rotate(-2deg); } }
@keyframes pulseGlow { 0%,100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }

/* Main app */
.app-body { background: #eaf2f5; min-height: 100vh; height: auto; overflow-x: hidden; overflow-y: auto !important; }
.app-shell { min-height: 100vh; height: auto; display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
.sidebar { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, #071f31, #082d42 60%, #062034); color: #dcecf1; padding: 22px 14px 16px; display: flex; flex-direction: column; z-index: 20; box-shadow: 12px 0 36px rgba(5,31,48,.12); }
.sidebar-brand { padding: 4px 12px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand .brand-mark { width: 46px; height: 46px; }
.sidebar-brand h1 { font-size: 1.1rem; color: #fff; }
.sidebar-brand p { font-size: .72rem; color: #85a6b6; }
.main-nav { display: grid; gap: 4px; padding: 18px 0; overflow-y: auto; }
.nav-item { width: 100%; border: 0; background: transparent; color: #9eb8c5; display: flex; align-items: center; gap: 12px; text-align: left; border-radius: 12px; padding: 10px 12px; font-weight: 750; font-size: .86rem; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(2px); }
.nav-item.active { color: #fff; background: linear-gradient(135deg, rgba(35,205,196,.25), rgba(16,139,170,.22)); box-shadow: inset 3px 0 #45e2d4; }
.nav-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.07); font-size: .64rem; letter-spacing: .04em; }
.nav-item.active .nav-icon { background: rgba(67,226,214,.18); color: #6ff4e5; }
.sidebar-footer { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.server-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.055); }
.server-chip strong, .server-chip small { display: block; }
.server-chip strong { font-size: .77rem; }.server-chip small { color: #82a5b4; font-size: .67rem; margin-top: 2px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #31d39b; box-shadow: 0 0 14px #31d39b; }
.logout-link { display: block; text-align: center; margin-top: 10px; color: #9bb6c3; text-decoration: none; font-size: .77rem; }
.workspace { min-width: 0; min-height: 100vh; height: auto; overflow: visible; }
.topbar { position: sticky; top: 0; z-index: 15; min-height: 82px; padding: 14px 24px; display: flex; align-items: center; gap: 20px; background: rgba(247,251,252,.88); backdrop-filter: blur(18px); border-bottom: 1px solid #dbe7ec; }
.page-heading { min-width: 190px; }
.page-heading h2 { margin: 2px 0 0; font-size: 1.45rem; letter-spacing: -.03em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.global-search { width: min(310px, 28vw); display: flex; align-items: center; gap: 8px; background: white; border: 1px solid #d8e5ea; border-radius: 12px; padding: 0 11px; }
.global-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 10px 0; }
.user-menu { display: flex; align-items: center; gap: 9px; padding: 4px 7px 4px 4px; }
.user-menu strong, .user-menu small { display: block; white-space: nowrap; }
.user-menu strong { font-size: .8rem; }.user-menu small { color: #7e919b; font-size: .68rem; margin-top: 2px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; font-weight: 900; background: linear-gradient(135deg, var(--teal), #2586b4); }
.mobile-menu { display: none; }
.content { min-height: calc(100vh - 82px); padding: 22px 24px max(88px, env(safe-area-inset-bottom)); overflow: visible; }
.view-header { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.view-header > div:first-child { flex: 1; }
.view-header h3 { margin: 3px 0 4px; font-size: 1.25rem; }
.view-header p { margin: 0; color: var(--muted); font-size: .86rem; }
.view-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { position: relative; overflow: hidden; background: white; border: 1px solid #dce8ed; border-radius: 18px; padding: 17px; box-shadow: 0 8px 28px rgba(22,63,80,.06); }
.metric-card::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; right: -32px; top: -32px; background: rgba(16,174,175,.08); }
.metric-card .metric-label { color: #708591; font-size: .74rem; font-weight: 800; }
.metric-card .metric-value { margin-top: 7px; font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; }
.metric-card .metric-foot { margin-top: 6px; color: #83959e; font-size: .7rem; }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; margin-top: 16px; }
.panel-card { background: #fff; border: 1px solid #dbe7ec; border-radius: 18px; box-shadow: 0 8px 28px rgba(22,63,80,.055); overflow: hidden; }
.panel-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e4edf0; }
.panel-card > header h4 { margin: 0; font-size: .94rem; }
.panel-card > header span { color: #7a8d96; font-size: .72rem; }
.panel-card .panel-body { padding: 16px 18px; }
.chart-wrap { height: 230px; display: flex; align-items: end; gap: 14px; padding-top: 16px; }
.bar-group { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; gap: 7px; text-align: center; color: #758b96; font-size: .65rem; }
.bar { min-height: 6px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #3de0cf, #098ca8); box-shadow: 0 8px 16px rgba(10,159,169,.18); }
.list-stack { display: grid; gap: 10px; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #e3ecef; border-radius: 13px; background: #fbfdfd; }
.list-row .row-main { flex: 1; min-width: 0; }
.list-row strong, .list-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row strong { font-size: .82rem; }.list-row small { color: #7b8d96; margin-top: 3px; font-size: .7rem; }
.row-badge, .status-badge { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; padding: 5px 8px; font-size: .65rem; font-weight: 900; background: #e9f4f6; color: #267a89; }
.status-badge.success { background: #e4f7ef; color: #207a59; }
.status-badge.warning { background: #fff3de; color: #a46813; }
.status-badge.danger { background: #ffe7ea; color: #a73845; }
.status-badge.neutral { background: #edf1f3; color: #5d717b; }

.data-card { background: #fff; border: 1px solid #dbe7ec; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 28px rgba(22,63,80,.055); }
.table-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e3ecef; background: #fbfdfd; }
.table-toolbar .filter-input { max-width: 310px; width: 100%; border: 1px solid #d6e4e9; border-radius: 10px; padding: 9px 11px; outline: none; }
.table-toolbar .table-count { margin-left: auto; color: #78909a; font-size: .72rem; }
.table-scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e5edf0; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 2; color: #687e89; background: #f6fafb; font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }
td { font-size: .78rem; color: #294452; }
tr:hover td { background: #fbfdfd; }
.cell-main strong, .cell-main small { display: block; }
.cell-main small { color: #81929a; margin-top: 3px; }
.table-actions { display: flex; gap: 5px; justify-content: flex-end; }
.table-actions button { border: 1px solid #d8e5e9; background: white; border-radius: 8px; padding: 6px 8px; font-size: .67rem; font-weight: 800; color: #43606c; }
.table-actions button:hover { border-color: #5bc7c5; color: #087d8d; }
.table-actions .delete { color: #b2424e; }
.empty-state { padding: 50px 22px; text-align: center; color: #7a8e98; }
.empty-state strong { display: block; color: var(--navy); margin-bottom: 5px; }

.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-summary { grid-column: 1 / -1; }
.mini-list { display: grid; gap: 10px; }
.mini-list-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid #e6eef1; font-size: .78rem; }
.mini-list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-list-row span:last-child { font-weight: 900; color: var(--teal-dark); }
.audit-details { max-width: 430px; white-space: normal; color: #687e89; font-size: .7rem; }

/* Modal and forms */
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(3,20,32,.64); backdrop-filter: blur(7px); }
.modal-card { width: min(880px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: 22px; box-shadow: 0 32px 90px rgba(0,0,0,.32); }
.modal-card > header { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: rgba(255,255,255,.95); border-bottom: 1px solid #e2ebee; }
.modal-card h3 { margin: 4px 0 0; }
#recordForm { padding: 18px 20px 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: .76rem; font-weight: 850; color: #49636f; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #d4e2e7; border-radius: 10px; background: #fbfdfd; padding: 10px 11px; outline: none; color: var(--text); }
.form-field textarea { min-height: 100px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #1cb4b5; box-shadow: 0 0 0 3px rgba(28,180,181,.1); }
.form-check { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.form-check input { width: auto; accent-color: var(--teal); }
#recordForm footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5edef; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: grid; gap: 9px; width: min(360px, calc(100vw - 40px)); }
.toast { padding: 13px 15px; border-radius: 12px; color: #fff; background: #0e455a; box-shadow: 0 14px 34px rgba(0,0,0,.23); animation: toastIn .24s ease; font-size: .82rem; }
.toast.error { background: #a63c49; }.toast.success { background: #176f5b; }.toast.info { background:#315f83; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }


/* SMTP, reminders and notification controls */
.smtp-toolbar-option { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 8px 11px; border: 1px solid #cfe0e6; border-radius: 11px; background: rgba(255,255,255,.9); color: #42616d; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.smtp-toolbar-option input, .smtp-switch input, .smtp-module-option input { accent-color: var(--teal); }
.email-notification-block { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 15px; border: 1px solid #cfe6e8; border-radius: 14px; background: linear-gradient(135deg, #f3fbfb, #edf6f9); }
.email-notification-block > .form-field.full, .email-notification-block > .smtp-notify-title { grid-column: 1 / -1; }
.smtp-notify-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.smtp-notify-title strong { color: var(--navy); font-size: .82rem; }
.smtp-notify-title span { color: #6c838e; font-size: .68rem; }
.smtp-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.settings-stack { display: grid; gap: 16px; }
.settings-section-note { margin: 0 0 14px; color: #6f838d; font-size: .78rem; line-height: 1.5; }
.smtp-switch { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 12px; border: 1px solid #d7e6ea; border-radius: 11px; background: #f8fbfc; font-size: .78rem; font-weight: 800; color: #3e5a66; }
.smtp-module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.smtp-module-option { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #dce8ec; border-radius: 11px; background: #fbfdfd; font-size: .72rem; font-weight: 800; color: #49636f; }
.settings-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.email-log-list { display: grid; gap: 9px; max-height: 340px; overflow: auto; }
.email-log-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 10px 11px; border: 1px solid #e0e9ed; border-radius: 12px; background: #fbfdfd; }
.email-log-row strong, .email-log-row small { display: block; }
.email-log-row strong { font-size: .76rem; }.email-log-row small { margin-top: 3px; color: #7d9099; font-size: .67rem; }
.smtp-password-state { color: #1d7d64; font-size: .7rem; font-weight: 800; }

@media (max-height: 760px) and (min-width: 941px) {
  .login-panel { padding-top: 18px; padding-bottom: 18px; }
  .login-brand { margin-bottom: 12px; }
  .login-brand .brand-mark { width: 48px; height: 48px; }
  .login-brand h1 { font-size: 1.8rem; }
  .login-card { padding: 18px 21px; }
  .login-form { gap: 11px; }
  .input-shell { min-height: 43px; }
  .login-submit { min-height: 44px; }
  .login-hint { margin-top: 10px; padding: 8px 11px; }
  .trust-row { margin-top: 8px; }
}

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .topbar-actions .secondary-button { display: none; }
}
@media (max-width: 940px) {
  html, body.login-body { min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .login-shell { height: auto; min-height: 100dvh; overflow: hidden; }
  .login-panel { width: 100%; min-height: 100dvh; padding: 28px 20px; }
  .login-panel-inner { width: min(560px, 100%); }
  .hero-panel { opacity: .26; }
  .hero-panel::before { background: rgba(236,248,249,.74); }
  .radial-gallery { width: min(115vw, 900px); right: -45%; top: 50%; }
  .hero-copy, .slide-dots { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; transform: translateX(-104%); width: 270px; transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu { display: inline-grid; }
  .global-search { width: min(280px, 35vw); }
}
@media (max-width: 720px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); }
  .trust-row div:nth-child(2) { border-right: 0; }
  .topbar { padding: 11px 13px; min-height: 70px; }
  .page-heading { min-width: 0; }
  .page-heading .eyebrow { display: none; }
  .page-heading h2 { font-size: 1.05rem; }
  .global-search { display: none; }
  .user-menu div { display: none; }
  .content { padding: 14px 12px max(72px, env(safe-area-inset-bottom)); }
  .view-header { align-items: stretch; flex-direction: column; }
  .metric-grid, .report-grid { grid-template-columns: 1fr; }
  .report-summary { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .email-notification-block { grid-template-columns: 1fr; }
  .email-notification-block > .form-field.full, .email-notification-block > .smtp-notify-title { grid-column: auto; }
  .smtp-settings-grid, .smtp-module-grid { grid-template-columns: 1fr; }
  .login-card { padding: 20px; }
  .login-hint { grid-template-columns: 1fr; }
  .login-hint strong { grid-row: auto; }
}
@media (max-width: 480px) {
  .login-brand .brand-mark { width: 48px; height: 48px; }
  .login-brand h1 { font-size: 1.5rem; }
  .role-btn { padding: 10px 7px; }
  .trust-row { display: none; }
  .orbit-node { display: none; }
  .topbar-actions { gap: 3px; }
  .metric-grid { gap: 10px; }
  .metric-card { padding: 14px; }
}
.smtp-notify-title strong, .smtp-notify-title span { display: block; }
.smtp-notify-title span { margin-top: 3px; }

/* Dual-recipient email delivery, due-date dashboard, backups and login gallery */
.email-notification-block > .recipient-grid { grid-column: 1 / -1; }
.recipient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recipient-card { display: grid; gap: 9px; min-width: 0; padding: 12px; border: 1px solid #d7e7ea; border-radius: 13px; background: rgba(255,255,255,.76); }
.recipient-card .smtp-switch { min-height: 64px; align-items: flex-start; padding: 0; border: 0; background: transparent; }
.recipient-card .smtp-switch span { display: block; line-height: 1.35; }
.recipient-card .smtp-switch small { display: block; margin-top: 3px; color: #7a8e98; font-size: .66rem; font-weight: 550; }
.recipient-card > input { width: 100%; min-width: 0; border: 1px solid #d4e2e7; border-radius: 10px; background: #fff; padding: 10px 11px; outline: none; color: var(--text); }
.recipient-card > input:focus { border-color: #1cb4b5; box-shadow: 0 0 0 3px rgba(28,180,181,.1); }
.recipient-card > input:disabled { opacity: .58; cursor: not-allowed; background: #edf3f5; }
.smtp-notify-title > div { min-width: 0; }
.smtp-notify-title .email-template-chip { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 6px 9px; border: 1px solid #bfe0df; border-radius: 999px; background: #e8f8f6; color: #16796f; font-size: .65rem; font-weight: 850; white-space: nowrap; }
.due-soon-row { border-color: #f0d8ad; background: linear-gradient(90deg, #fffaf0, #fbfdfd); }
.backup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.file-button { cursor: pointer; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery-card { min-width: 0; overflow: hidden; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 11px; padding: 10px; border: 1px solid #dce8ec; border-radius: 14px; background: #fbfdfd; }
.gallery-card img { width: 76px; height: 64px; object-fit: cover; border-radius: 10px; background: #e8f1f3; }
.gallery-card div { min-width: 0; }
.gallery-card strong, .gallery-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-card strong { font-size: .76rem; }
.gallery-card small { margin-top: 4px; color: #7c9099; font-size: .65rem; }
.gallery-card .danger-button { grid-column: 1 / -1; width: 100%; }
.hero-empty { display: grid; place-items: center; padding: 34px; color: rgba(255,255,255,.88); background: linear-gradient(135deg, #0a4358, #117b85); font-weight: 800; text-align: center; }

@media (max-width: 1180px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .recipient-grid, .gallery-grid { grid-template-columns: 1fr; }
  .email-notification-block > .recipient-grid { grid-column: auto; }
  .smtp-notify-title { align-items: flex-start; flex-direction: column; }
  .gallery-card { grid-template-columns: 72px minmax(0, 1fr); }
}

/* Searchable catalogs and professional invoice builder */
.searchable-select { display: grid; gap: 7px; }
.searchable-select > input[type="search"] { width: 100%; border: 1px solid #cfe0e6; border-radius: 10px; padding: 9px 11px 9px 34px; outline: none; color: var(--text); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23647f8a' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='m10.5 10.5 3.4 3.4'/%3E%3C/svg%3E") no-repeat 11px center; }
.searchable-select > input[type="search"]:focus { border-color: #1cb4b5; box-shadow: 0 0 0 3px rgba(28,180,181,.1); }
.searchable-select > select { min-height: 42px; }
.searchable-select > small, .combo-help { color: #7a8e98; font-size: .65rem; font-weight: 600; }
.form-field datalist { max-height: 260px; }

.invoice-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; border: 1px solid #cce5e6; border-radius: 15px; background: linear-gradient(135deg,#f2fbfa,#edf7fa); }
.invoice-editor-header strong, .invoice-editor-header span { display: block; }
.invoice-editor-header strong { color: var(--navy); font-size: .9rem; }
.invoice-editor-header div > span { margin-top: 4px; color: #6f858f; font-size: .69rem; line-height: 1.45; }
.invoice-catalog-chip { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #dff5f2; color: #14766e; font-size: .66rem; font-weight: 900; white-space: nowrap; }
.invoice-lines-section { padding: 15px; border: 1px solid #d7e6ea; border-radius: 15px; background: #fbfdfd; }
.invoice-lines-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.invoice-lines-title strong, .invoice-lines-title span { display: block; }
.invoice-lines-title strong { font-size: .82rem; color: var(--navy); }
.invoice-lines-title span { margin-top: 3px; color: #7b8f98; font-size: .66rem; }
#invoiceLines { display: grid; gap: 10px; }
.invoice-line { display: grid; grid-template-columns: minmax(240px,2.2fr) minmax(80px,.6fr) minmax(115px,.8fr) minmax(115px,.8fr) 34px; gap: 9px; align-items: end; padding: 11px; border: 1px solid #dbe8ec; border-radius: 13px; background: white; }
.invoice-line > div { display: grid; gap: 5px; min-width: 0; }
.invoice-line label { color: #526c77; font-size: .66rem; font-weight: 850; }
.invoice-line input { width: 100%; min-width: 0; border: 1px solid #d4e2e7; border-radius: 9px; padding: 9px 10px; outline: none; background: #fbfdfd; color: var(--text); }
.invoice-line input:focus { border-color: #1cb4b5; box-shadow: 0 0 0 3px rgba(28,180,181,.1); }
.invoice-line input:disabled { color: #0b7280; background: #edf8f8; font-weight: 900; }
.invoice-line-remove { width: 34px; height: 38px; border: 1px solid #f0cdd1; border-radius: 9px; background: #fff0f2; color: #b13e4a; font-size: 1.25rem; font-weight: 900; }
.invoice-line-remove:hover { background: #b5424e; color: white; }
.invoice-totals-editor { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 15px; border: 1px solid #cde4e6; border-radius: 15px; background: linear-gradient(135deg,#f6fbfc,#edf8f8); }
.invoice-totals-editor input:disabled { color: #087d8d; font-weight: 900; background: white; }
.table-actions button:nth-child(2), .table-actions button:nth-child(3) { border-color: #c9e1e3; color: #087d8d; background: #f2fbfa; }

@media (max-width: 940px) {
  .invoice-line { grid-template-columns: minmax(0,1fr) minmax(74px,.35fr) minmax(100px,.45fr); }
  .invoice-line-service { grid-column: 1 / -1; }
  .invoice-line-remove { grid-column: 3; justify-self: end; }
  .invoice-totals-editor { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .invoice-editor-header, .invoice-lines-title { align-items: stretch; flex-direction: column; }
  .invoice-catalog-chip { align-self: flex-start; }
  .invoice-line { grid-template-columns: 1fr 1fr; }
  .invoice-line-service { grid-column: 1 / -1; }
  .invoice-line-remove { grid-column: 2; justify-self: end; }
  .invoice-totals-editor { grid-template-columns: 1fr; }
}

/* Providers tab and patient photo uploader */
.patient-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.patient-avatar { flex: 0 0 auto; width: 46px; height: 46px; object-fit: cover; border-radius: 13px; border: 1px solid #cfe2e6; background: #edf7f7; box-shadow: 0 4px 12px rgba(8,68,78,.09); }
.patient-avatar-empty { display: grid; place-items: center; color: #118b91; font-size: 1.25rem; }
.patient-photo-uploader { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 16px; align-items: center; padding: 15px; border: 1px solid #cfe3e6; border-radius: 16px; background: linear-gradient(135deg,#f5fbfb,#edf7f8); }
.patient-photo-large { width: 150px; height: 130px; overflow: hidden; display: grid; place-items: center; border: 2px dashed #b9d8dc; border-radius: 16px; background: #fff; color: #15959a; font-size: 2.2rem; }
.patient-photo-large img { width: 100%; height: 100%; object-fit: cover; }
.patient-photo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.patient-photo-actions small { flex-basis: 100%; color: #718791; font-size: .68rem; font-weight: 650; }
.patient-photo-actions button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 620px) {
  .patient-photo-uploader { grid-template-columns: 1fr; }
  .patient-photo-large { width: 100%; height: 190px; }
}

/* Intelligent patient timeline and secure digital pet passport */
.patient-intelligence-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:center; padding:22px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#062b3d,#087f88); box-shadow:0 18px 40px rgba(6,43,61,.2); }
.patient-intelligence-photo { width:112px; height:112px; overflow:hidden; display:grid; place-items:center; border:3px solid rgba(255,255,255,.32); border-radius:26px; background:#fff; color:#0a8d91; font-size:2.8rem; }
.patient-intelligence-photo img { width:100%; height:100%; object-fit:cover; }
.patient-intelligence-main h3 { margin:4px 0 7px; font-size:1.65rem; }
.patient-intelligence-main p { margin:0; color:#d4eeee; line-height:1.5; }
.patient-intelligence-main .eyebrow { color:#8fe1dd; }
.patient-clinical-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.patient-clinical-chips span { max-width:100%; padding:7px 9px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.09); color:#e8f8f7; font-size:.66rem; font-weight:750; }
.health-score-card { min-width:150px; display:grid; place-items:center; gap:6px; padding:15px; border-radius:18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); text-align:center; }
.health-score-card > span { font-weight:900; }
.health-score-card > small { color:#cce9e8; font-size:.62rem; }
.health-score-ring { --score:75; width:92px; height:92px; position:relative; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#35e1d1 calc(var(--score) * 1%),rgba(255,255,255,.18) 0); }
.health-score-ring::before { content:""; position:absolute; inset:8px; border-radius:50%; background:#075263; }
.health-score-ring strong,.health-score-ring small { position:relative; z-index:1; }
.health-score-ring strong { font-size:1.65rem; line-height:1; }
.health-score-ring small { margin-left:2px; color:#cce9e8; }
.score-watch .health-score-ring { background:conic-gradient(#f2bb55 calc(var(--score) * 1%),rgba(255,255,255,.18) 0); }
.score-risk .health-score-ring { background:conic-gradient(#ef6f7b calc(var(--score) * 1%),rgba(255,255,255,.18) 0); }
.health-intelligence-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.health-alert-list { display:grid; gap:10px; }
.health-alert { display:grid; gap:8px; padding:13px 14px; border-radius:13px; border:1px solid #f0d8a4; background:#fff7e7; color:#78551b; }
.health-alert.danger { border-color:#efc2c8; background:#fff0f2; color:#9e2f3d; }
.health-alert.info { border-color:#c9dfef; background:#eef7ff; color:#315f83; }
.health-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.health-card-title strong,.health-card-title span { display:block; }
.health-card-title span { flex:0 0 auto; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.65); font-size:.62rem; font-weight:900; }
.health-card-explanation,.health-card-resolution { display:grid; grid-template-columns:86px minmax(0,1fr); gap:8px; padding-top:8px; border-top:1px solid currentColor; font-size:.7rem; line-height:1.48; opacity:.94; }
.health-card-explanation b,.health-card-resolution b { text-transform:uppercase; letter-spacing:.04em; font-size:.59rem; }
.health-card-resolution { color:#17684f; }
.health-clear { padding:13px; border-radius:12px; background:#e9f8f3; color:#247356; font-weight:800; }
.health-factor-panel .panel-body { align-content:start; }
.score-factor-list,.score-factor-grid { display:grid; grid-template-columns:1fr; gap:9px; }
.score-factor-card { padding:12px; border:1px solid #d8e7e9; border-radius:12px; background:#f8fbfb; color:#4c6872; }
.score-factor-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.score-factor-card header strong { color:#173d48; font-size:.72rem; }
.score-factor-card header span { flex:0 0 auto; color:#a33c49; font-size:.65rem; font-weight:900; }
.score-factor-card p { margin:8px 0 0; font-size:.67rem; line-height:1.5; }
.score-factor-card p b { color:#284e59; }
.score-factor-card .score-factor-fix { padding-top:8px; border-top:1px solid #dfeaec; color:#17684f; }
.health-score-clear { padding:13px; border-radius:12px; background:#e9f8f3; color:#247356; font-weight:800; }
.health-breakdown { margin-top:16px; padding:16px; border:1px solid #d5e5e8; border-radius:17px; background:#fff; box-shadow:0 8px 24px rgba(21,57,67,.06); }
.health-breakdown-summary { display:grid; grid-template-columns:220px minmax(0,1fr); gap:15px; align-items:center; }
.health-equation { padding:15px; border-radius:14px; background:linear-gradient(135deg,#062b3d,#087f88); color:#fff; }
.health-equation strong,.health-equation span { display:block; }
.health-equation strong { font-size:1.45rem; }
.health-equation span { margin-top:5px; color:#d2eeee; font-size:.68rem; line-height:1.4; }
.health-breakdown-summary h4 { margin:0 0 5px; color:#103b47; }
.health-breakdown-summary p { margin:0; color:#5a737c; font-size:.73rem; line-height:1.55; }
.health-breakdown .score-factor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:13px; }
.health-breakdown.compact { margin-top:16px; }
.timeline-controls { display:grid; gap:10px; margin:16px 0; padding:14px; border:1px solid #d9e7ea; border-radius:16px; background:#fff; }
.timeline-controls > input { width:100%; border:1px solid #cedee3; border-radius:11px; padding:11px 13px; outline:none; }
.timeline-controls > input:focus { border-color:#1cb4b5; box-shadow:0 0 0 3px rgba(28,180,181,.1); }
.timeline-filter-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.timeline-filter-buttons button { border:1px solid #d4e4e7; border-radius:999px; padding:7px 10px; background:#f8fbfb; color:#486670; font-size:.67rem; font-weight:800; }
.timeline-filter-buttons button.active { border-color:#0a9296; background:#dff5f2; color:#087379; }
.medical-timeline { position:relative; display:grid; gap:14px; padding:4px 0 72px; overflow:visible; }
.medical-timeline::after { content:""; display:block; height:1px; }
.medical-timeline::before { content:""; position:absolute; left:27px; top:8px; bottom:8px; width:2px; background:linear-gradient(#0ca1a2,#cfe3e5); }
.timeline-event { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:13px; }
.timeline-event[hidden] { display:none; }
.timeline-marker { position:relative; z-index:1; display:flex; justify-content:center; }
.timeline-marker span { width:44px; height:44px; display:grid; place-items:center; border:4px solid #edf5f6; border-radius:50%; background:#0b7d86; color:#fff; box-shadow:0 5px 15px rgba(9,86,96,.18); font-size:1.05rem; }
.timeline-event-card { min-width:0; padding:15px 16px; border:1px solid #d8e6e9; border-radius:16px; background:#fff; box-shadow:0 7px 22px rgba(21,57,67,.07); }
.timeline-event-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.timeline-event-card h4 { margin:3px 0 5px; color:var(--navy); font-size:.88rem; }
.timeline-event-card header small { color:#71858e; font-size:.66rem; }
.timeline-source { color:#0b8a8e; font-size:.58rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.timeline-event-card p { margin:11px 0 0; color:#506b75; font-size:.74rem; line-height:1.55; white-space:pre-wrap; }
.timeline-dates { display:inline-flex; margin-top:10px; padding:6px 8px; border-radius:8px; background:#fff5df; color:#7b5a20; font-size:.66rem; font-weight:800; }
.timeline-event-card > small { display:block; margin-top:8px; color:#667d86; }
.timeline-event-card footer { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:12px; }
.timeline-event-card footer button,.timeline-link { display:inline-flex; align-items:center; border:1px solid #cde1e3; border-radius:9px; padding:7px 9px; background:#f3fbfa; color:#087a80; font-size:.65rem; font-weight:850; text-decoration:none; }
.timeline-event-card footer button.delete { border-color:#efcbd0; background:#fff3f4; color:#aa3947; }
.timeline-editor-intro { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px; border:1px solid #cce3e5; border-radius:14px; background:linear-gradient(135deg,#f2fbfa,#edf7fa); }
.timeline-editor-intro strong,.timeline-editor-intro span { display:block; }
.timeline-editor-intro span { color:#6e848d; font-size:.68rem; line-height:1.45; }
.timeline-attachment-uploader { display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:center; padding:13px; border:1px dashed #bdd8dc; border-radius:14px; background:#f8fbfb; }
.timeline-attachment-preview { width:110px; height:92px; overflow:hidden; display:grid; place-items:center; border-radius:12px; background:#e7f2f3; color:#0b8990; font-size:1.8rem; font-weight:900; }
.timeline-attachment-preview img { width:100%; height:100%; object-fit:cover; }
.timeline-attachment-preview .pdf-preview { font-size:1rem; color:#a33b48; }
.timeline-attachment-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.timeline-attachment-actions small { flex-basis:100%; overflow:hidden; text-overflow:ellipsis; color:#6c828b; }
.timeline-attachment-actions button:disabled { opacity:.45; cursor:not-allowed; }
.passport-hero { display:grid; grid-template-columns:minmax(0,1fr) 180px 130px; align-items:center; gap:22px; padding:24px; border-radius:22px; color:#fff; background:linear-gradient(135deg,#052b3c,#0a8f91); box-shadow:0 20px 45px rgba(6,43,61,.22); }
.passport-identity { display:flex; align-items:center; gap:17px; min-width:0; }
.passport-photo { flex:0 0 auto; width:112px; height:112px; overflow:hidden; display:grid; place-items:center; border:3px solid rgba(255,255,255,.28); border-radius:26px; background:#fff; color:#0a8d91; font-size:2.8rem; }
.passport-photo img { width:100%; height:100%; object-fit:cover; }
.passport-identity h3 { margin:4px 0 5px; font-size:1.75rem; }
.passport-identity p { margin:0; color:#d4efef; line-height:1.5; }
.passport-identity .eyebrow { color:#89dfdc; }
.passport-active-chip,.passport-lost-chip { display:inline-flex; margin-top:10px; padding:6px 9px; border-radius:999px; font-size:.63rem; font-weight:900; }
.passport-active-chip { background:#dff7ed; color:#176c4f; }
.passport-lost-chip { background:#ffe1e4; color:#a12b3a; }
.passport-qr { padding:10px; border-radius:16px; background:#fff; }
.core-qr-svg { display:block; width:100%; height:auto; }
.passport-score { display:grid; place-items:center; gap:2px; padding:14px; border-radius:18px; background:rgba(255,255,255,.1); text-align:center; }
.passport-score strong { font-size:2rem; }
.passport-score span { font-weight:900; }
.passport-score small { color:#cde9e8; }.passport-score em { display:block; max-width:150px; color:#d9f0ef; font-size:.58rem; font-style:normal; line-height:1.35; }
.passport-link-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:end; margin-top:16px; padding:15px; border:1px solid #d5e5e8; border-radius:16px; background:#fff; }
.passport-link-card label { display:block; margin-bottom:6px; color:#56717b; font-size:.67rem; font-weight:850; }
.passport-link-card input { width:100%; border:1px solid #d0e1e4; border-radius:10px; padding:10px 11px; background:#f8fbfb; color:#36545f; }
.passport-link-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.passport-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.passport-settings-grid .panel-body { display:grid; gap:11px; }
.passport-notes-label { display:grid; gap:6px; color:#536e78; font-size:.68rem; font-weight:850; }
.passport-notes-label textarea { min-height:90px; border:1px solid #cedee3; border-radius:10px; padding:10px; resize:vertical; }
.passport-facts span { display:grid; gap:4px; padding:9px 0; border-bottom:1px solid #e5edef; color:#526d77; font-size:.72rem; }
.passport-facts span:last-child { border-bottom:0; }
.passport-facts strong { color:#153843; font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; }
.passport-data-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.passport-data-card { overflow:hidden; border:1px solid #d9e7ea; border-radius:17px; background:#fff; box-shadow:0 8px 24px rgba(21,57,67,.06); }
.passport-data-card > header { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; background:#f2f8f8; }
.passport-data-card > header h4 { margin:0; color:#0b5966; }
.passport-data-card > header span { min-width:26px; height:26px; display:grid; place-items:center; border-radius:999px; background:#dff3f1; color:#08757b; font-size:.67rem; font-weight:900; }
.passport-data-card > div { padding:0 15px; }
.passport-list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #e6eef0; }
.passport-list-row:last-child { border-bottom:0; }
.passport-list-row strong,.passport-list-row small { display:block; }
.passport-list-row strong { color:#183b46; font-size:.75rem; }
.passport-list-row small { margin-top:4px; color:#71858e; font-size:.65rem; }
.passport-list-row a { flex:0 0 auto; color:#087f84; font-size:.66rem; font-weight:900; text-decoration:none; }
.passport-empty { color:#71858e; font-size:.72rem; }
@media (max-width:1180px) {
  .health-breakdown .score-factor-grid { grid-template-columns:1fr; }
}
@media (max-width:1000px) {
  .patient-intelligence-hero { grid-template-columns:auto minmax(0,1fr); }
  .health-score-card { grid-column:1 / -1; grid-template-columns:auto auto auto; justify-content:center; }
  .passport-hero { grid-template-columns:minmax(0,1fr) 150px; }
  .passport-score { grid-column:1 / -1; grid-template-columns:auto auto auto; justify-content:center; gap:10px; }
  .passport-link-card { grid-template-columns:1fr; }
  .health-breakdown-summary { grid-template-columns:1fr; }
  .passport-link-actions { justify-content:flex-start; }
}
@media (max-width:760px) {
  .patient-intelligence-hero,.passport-hero { grid-template-columns:1fr; align-items:start; }
  .patient-intelligence-photo,.passport-photo { width:92px; height:92px; }
  .health-intelligence-grid,.passport-settings-grid,.passport-data-grid { grid-template-columns:1fr; }
  .passport-identity { align-items:flex-start; }
  .passport-qr { width:180px; }
  .timeline-event-card header { flex-direction:column; }
}
@media (max-width:520px) {
  .patient-intelligence-hero,.passport-hero { padding:17px; }
  .patient-intelligence-main h3,.passport-identity h3 { font-size:1.35rem; }
  .health-score-card { grid-template-columns:1fr; }
  .health-card-explanation,.health-card-resolution { grid-template-columns:1fr; gap:3px; }
  .timeline-event { grid-template-columns:42px minmax(0,1fr); gap:8px; }
  .medical-timeline::before { left:20px; }
  .timeline-marker span { width:36px; height:36px; border-width:3px; }
  .timeline-attachment-uploader { grid-template-columns:1fr; }
  .timeline-attachment-preview { width:100%; height:145px; }
  .passport-identity { flex-direction:column; }
}
.timeline-photo-link { display:block; margin-top:12px; max-width:440px; }
.timeline-medical-photo { display:block; width:100%; max-height:280px; object-fit:cover; border:1px solid #d4e4e7; border-radius:13px; background:#edf5f6; }

/* Clinical centers: Hospitalization, Diagnostics and Pharmacy */
.modal-card.clinical-modal { width:min(1180px,100%); max-height:94vh; }
.modal-card.clinical-modal #recordForm { padding-bottom:28px; }
.modal-card.clinical-modal .form-grid { align-items:start; }
.hospital-board,.diagnostic-center,.prescription-history { display:grid; gap:16px; min-width:0; }
.hospital-hero,.diagnostic-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#063247,#0b8f91); box-shadow:0 14px 32px rgba(7,62,73,.17); }
.hospital-hero > div:first-child { display:flex; align-items:center; gap:14px; min-width:0; }
.hospital-hero img,.hospital-paw { width:76px; height:76px; flex:0 0 auto; overflow:hidden; display:grid; place-items:center; border:3px solid rgba(255,255,255,.28); border-radius:18px; background:#fff; color:#087f86; object-fit:cover; font-size:2rem; }
.hospital-hero small,.diagnostic-hero small { color:#aee6e4; font-size:.65rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.hospital-hero h3,.diagnostic-hero h3 { margin:3px 0 5px; color:#fff; font-size:1.35rem; }
.hospital-hero p,.diagnostic-hero p { margin:0; color:#d8f0ef; font-size:.74rem; line-height:1.45; }
.hospital-hero-status { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.hospital-hero-status .status-badge,.diagnostic-hero .status-badge { border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.clinical-danger-banner,.clinical-warning-banner,.clinical-success-banner,.pharmacy-warning,.dose-assist-card { display:grid; gap:4px; padding:13px 15px; border-radius:13px; line-height:1.45; font-size:.72rem; }
.clinical-danger-banner { border:1px solid #f3b9c1; background:#fff0f2; color:#9c2d3c; font-weight:800; }
.clinical-warning-banner,.pharmacy-warning { border:1px solid #ead19a; background:#fff7e5; color:#765019; }
.clinical-success-banner { border:1px solid #bde3d4; background:#edf9f4; color:#1f7056; font-weight:800; }
.pharmacy-warning strong,.pharmacy-warning span,.dose-assist-card strong,.dose-assist-card span { display:block; }
.pharmacy-warning strong { color:#70470e; font-size:.78rem; }
.dose-assist-card { grid-column:1 / -1; border:1px solid #badfe0; background:linear-gradient(135deg,#effafa,#edf7fb); color:#365d69; }
.dose-assist-card strong { color:#087780; font-size:.78rem; }
.clinical-stat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.clinical-stat-grid article { min-width:0; padding:12px; border:1px solid #d9e7ea; border-radius:13px; background:#fff; box-shadow:0 5px 16px rgba(21,57,67,.05); }
.clinical-stat-grid small,.diagnostic-copy-grid small { display:block; margin-bottom:5px; color:#70858d; font-size:.58rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.clinical-stat-grid strong { display:block; overflow-wrap:anywhere; color:#173d48; font-size:.74rem; line-height:1.4; }
.clinical-stat-grid a { color:#087f86; text-decoration:none; }
.clinical-action-row { display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid #d7e6e9; border-radius:14px; background:#f7fbfb; }
.clinical-section { overflow:hidden; border:1px solid #d9e7ea; border-radius:16px; background:#fff; box-shadow:0 7px 21px rgba(21,57,67,.05); }
.clinical-section > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border-bottom:1px solid #e3edef; background:#f4f9f9; }
.clinical-section > header h4 { margin:0 0 3px; color:#153e49; font-size:.84rem; }
.clinical-section > header span { display:block; color:#70858e; font-size:.64rem; }
.clinical-section > .table-scroll,.clinical-section > .care-task-list,.clinical-section > .shift-note-grid,.clinical-section > .clinical-chart-grid,.clinical-section > .diagnostic-copy-grid { padding:13px; }
.clinical-chart-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.clinical-chart,.clinical-chart-empty { min-width:0; padding:12px; border:1px solid #dce9eb; border-radius:13px; background:#fbfdfd; }
.clinical-chart header,.clinical-chart footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.clinical-chart header strong { color:#183e49; font-size:.72rem; }
.clinical-chart header span { color:#087f86; font-size:.68rem; font-weight:900; }
.clinical-chart svg { display:block; width:100%; height:112px; margin:4px 0; overflow:visible; }
.clinical-chart svg line { stroke:#d7e4e7; stroke-width:1; }
.clinical-chart svg polyline { fill:none; stroke:#0d9295; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.clinical-chart svg circle { fill:#fff; stroke:#087f86; stroke-width:2; }
.clinical-chart footer { color:#71858d; font-size:.58rem; }
.clinical-chart-empty { display:grid; align-content:center; min-height:150px; text-align:center; }
.clinical-chart-empty strong,.clinical-chart-empty span { display:block; }
.clinical-chart-empty strong { color:#234852; }
.clinical-chart-empty span { margin-top:5px; color:#758991; font-size:.65rem; line-height:1.45; }
.care-task-list { display:grid; gap:9px; }
.care-task { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:11px; align-items:center; padding:11px; border:1px solid #dce9eb; border-radius:12px; background:#fbfdfd; }
.care-task.overdue { border-color:#efb8c0; background:#fff1f3; box-shadow:inset 4px 0 #c84455; }
.care-task-status { width:30px; height:30px; display:grid; place-items:center; border-radius:999px; background:#dff4f1; color:#087a80; font-weight:950; }
.care-task.overdue .care-task-status { background:#c84455; color:#fff; }
.care-task strong,.care-task span,.care-task small { display:block; }
.care-task strong { color:#173c47; font-size:.75rem; }
.care-task span { margin-top:3px; color:#5f7780; font-size:.65rem; }
.care-task small { margin-top:4px; color:#748890; font-size:.61rem; line-height:1.4; }
.care-task-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.care-task-actions button { border:1px solid #cfe0e4; border-radius:8px; padding:6px 8px; background:#fff; color:#37606b; font-size:.64rem; font-weight:850; }
.shift-note-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.shift-note { min-width:0; padding:12px; border:1px solid #dce9eb; border-radius:13px; background:#fbfdfd; }
.shift-note header { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }
.shift-note header strong { color:#173d48; font-size:.72rem; }
.shift-note header span { color:#748890; font-size:.59rem; text-align:right; }
.shift-note p { margin:9px 0 0; color:#526c76; font-size:.68rem; line-height:1.5; white-space:pre-wrap; }
.shift-note img { display:block; width:100%; max-height:230px; margin-top:10px; border-radius:10px; object-fit:cover; }
.discharge-box { padding-bottom:13px; }
.discharge-box p { margin:12px 15px 0; color:#4f6973; font-size:.7rem; line-height:1.5; white-space:pre-wrap; }
.diagnostic-hero > div:first-child { min-width:0; }
.diagnostic-hero > div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.diagnostic-copy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.diagnostic-copy-grid article { padding:12px; border:1px solid #dce8eb; border-radius:12px; background:#fbfdfd; }
.diagnostic-copy-grid p { margin:0; color:#4f6973; font-size:.68rem; line-height:1.5; white-space:pre-wrap; }
.diagnostic-copy-grid span { display:block; margin-top:8px; color:#087c81; font-size:.62rem; font-weight:900; }
.clinical-photo-upload { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:12px; border:1px dashed #bad5d9; border-radius:12px; background:#f7fbfb; }
.clinical-photo-upload span { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#607a84; font-size:.68rem; }
.prescription-history .clinical-section { margin-top:0; }
.table-filter-empty { padding:34px 18px; text-align:center; color:#72868e; }

@media (max-width:1120px) {
  .clinical-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .clinical-chart-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .modal-card.clinical-modal { width:100%; max-height:96vh; border-radius:16px; }
  .hospital-hero,.diagnostic-hero { align-items:flex-start; flex-direction:column; }
  .hospital-hero-status,.diagnostic-hero > div:last-child { justify-content:flex-start; }
  .clinical-stat-grid,.clinical-chart-grid,.diagnostic-copy-grid,.shift-note-grid { grid-template-columns:1fr; }
  .care-task { grid-template-columns:32px minmax(0,1fr); }
  .care-task-actions { grid-column:2; justify-content:flex-start; }
  .clinical-section > header { align-items:flex-start; flex-direction:column; }
}

/* v1.6.0: three-way staff, administrator and Pet Parent login */
.role-switch.role-switch-three{grid-template-columns:repeat(3,minmax(0,1fr))}.role-switch-three .role-btn{padding-inline:8px;white-space:nowrap}.role-switch-three .mini-icon{flex:none}@media(max-width:520px){.role-switch.role-switch-three{grid-template-columns:1fr}.role-switch-three .role-btn{justify-content:flex-start}}

/* v1.6.0 Analytics Center and Pet Parent Portal administration */
.invoice-line{grid-template-columns:minmax(230px,2fr) minmax(70px,.5fr) minmax(105px,.75fr) minmax(105px,.75fr) minmax(105px,.75fr) 34px}.analytics-filter{margin-bottom:14px}.analytics-filter-grid{display:grid;grid-template-columns:180px 180px minmax(240px,1fr) auto;gap:12px;align-items:end}.analytics-filter-grid label{display:grid;gap:6px;color:#526c77;font-size:.7rem;font-weight:850}.analytics-filter-grid input{border:1px solid #d4e3e7;border-radius:10px;padding:10px;background:#fbfdfd;color:var(--text)}.analytics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.analytics-card{background:#fff;border:1px solid #dbe8eb;border-top:4px solid #0b9a9d;border-radius:16px;padding:15px;box-shadow:0 8px 24px #163b4710}.analytics-card.warning{border-top-color:#d98d27}.analytics-card.danger{border-top-color:#c94a58}.analytics-card.success{border-top-color:#198b65}.analytics-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.analytics-card-head span{color:#607983;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.analytics-card-head strong{font-size:1.25rem;color:var(--navy);white-space:nowrap}.analytics-explain,.analytics-action{font-size:.68rem;line-height:1.45;margin-top:10px;color:#60757e}.analytics-action{padding-top:8px;border-top:1px solid #e4edef;color:#365d67}.analytics-panels{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:14px}.analytics-bars{height:220px;display:flex;align-items:end;justify-content:space-around;gap:10px;padding:10px 5px 0}.analytics-bar-group{height:100%;display:flex;flex:1;min-width:28px;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.analytics-dual-bars{height:180px;width:100%;display:flex;align-items:end;justify-content:center;gap:4px}.analytics-dual-bars span,.analytics-dual-bars i{display:block;width:min(18px,40%);border-radius:6px 6px 2px 2px}.analytics-dual-bars span{background:#0a8f9b}.analytics-dual-bars i{background:#2bc5b7}.analytics-legend{display:flex;justify-content:center;gap:18px;color:#69818a;font-size:.7rem}.analytics-legend b,.analytics-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;background:#0a8f9b}.analytics-legend i{background:#2bc5b7}.analytics-status-list{display:grid;gap:12px}.analytics-status-list label{display:flex;justify-content:space-between;color:#526b75;font-size:.72rem}.analytics-status-list>div>span{display:block;height:9px;background:#edf3f4;border-radius:99px;overflow:hidden;margin-top:5px}.analytics-status-list i{display:block;height:100%;background:linear-gradient(90deg,#0b8f9d,#2bc5b7)}.portal-section{margin-top:16px}.analytics-section-head{padding:14px 16px;background:#fff;border:1px solid #dbe8eb;border-bottom:0;border-radius:15px 15px 0 0}.analytics-section-head h4{margin:0;color:var(--navy)}.analytics-section-head p{margin:4px 0 0;color:#71868e;font-size:.7rem}.analytics-reason{display:block;max-width:320px;white-space:normal;color:#657b84}.analytics-action-list{display:grid;gap:9px}.analytics-action-row{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;gap:15px;background:#fff;border:1px solid #dbe8eb;border-left:5px solid #d98d27;border-radius:13px;padding:13px}.analytics-action-row.danger{border-left-color:#c94a58}.analytics-action-row span{display:block;color:#8a5b17;font-size:.64rem;font-weight:900;text-transform:uppercase}.analytics-action-row strong,.analytics-action-row small{display:block}.analytics-action-row small{color:#71868e;margin-top:3px}.analytics-action-row p{margin:0;color:#526b75;font-size:.72rem}.portal-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.portal-center-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.portal-center-list{display:grid;gap:8px}.portal-center-row{display:flex;align-items:center;gap:10px;border:1px solid #e0eaed;border-radius:12px;padding:10px;background:#fbfdfd}.portal-center-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e6f7f6}.portal-center-row button{border:1px solid #d2e3e6;background:#fff;color:#174956;border-radius:9px;padding:8px 10px;font-weight:800}.portal-account-notice{padding:14px;border-radius:13px;background:#eaf8f7;border:1px solid #cce9e7;color:#315a64}.portal-account-notice strong,.portal-account-notice span{display:block}.portal-account-notice span{margin-top:5px;font-size:.72rem}.form-field small{display:block;color:#788c94;font-size:.65rem;margin-top:4px}@media(max-width:1250px){.analytics-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:980px){.analytics-grid{grid-template-columns:repeat(2,1fr)}.analytics-panels,.portal-center-grid{grid-template-columns:1fr}.analytics-filter-grid{grid-template-columns:1fr 1fr}.analytics-filter-grid label:nth-child(3){grid-column:1/-1}.invoice-line{grid-template-columns:minmax(0,1fr) minmax(70px,.35fr) minmax(95px,.45fr)}.invoice-line-service{grid-column:1/-1}.invoice-line-remove{grid-column:3;justify-self:end}}@media(max-width:650px){.analytics-grid,.portal-metrics,.analytics-filter-grid{grid-template-columns:1fr}.analytics-action-row{grid-template-columns:1fr}.analytics-filter-grid label:nth-child(3){grid-column:auto}.invoice-line{grid-template-columns:1fr 1fr}.invoice-line-service{grid-column:1/-1}.invoice-line-remove{grid-column:2;justify-self:end}}

/* v1.6.1: responsive Analytics document flow and centered, unobtrusive login gallery */
body.app-body.analytics-view-active {
  min-height: 100dvh;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.analytics-view-active .app-shell,
.analytics-view-active .workspace {
  min-height: 100dvh;
  height: auto !important;
  overflow: visible !important;
}
.content.analytics-content {
  width: 100%;
  min-width: 0;
  min-height: calc(100dvh - 82px);
  height: auto !important;
  overflow: visible !important;
  padding-bottom: max(150px, calc(105px + env(safe-area-inset-bottom)));
}
.content.analytics-content::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 92px;
}
.content.analytics-content > *,
.content.analytics-content .panel-card,
.content.analytics-content .portal-section,
.content.analytics-content .table-scroll,
.content.analytics-content .analytics-action-row {
  min-width: 0;
  max-width: 100%;
}
.content.analytics-content .portal-section:last-of-type {
  margin-bottom: 12px;
}
.content.analytics-content .table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.content.analytics-content .analytics-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
}
.content.analytics-content .analytics-panels {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr));
}
.content.analytics-content .analytics-card-head {
  flex-wrap: wrap;
}
.content.analytics-content .analytics-card-head strong {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.content.analytics-content .analytics-action-row > * {
  min-width: 0;
}
.content.analytics-content .analytics-action-row p,
.content.analytics-content .analytics-reason {
  overflow-wrap: anywhere;
}

/* Keep the radial animation fully inside the viewport and centered on the visual half. */
.radial-gallery {
  left: 68%;
  right: auto;
  top: 50%;
  width: min(58vw, 930px);
  transform: translate(-50%, -50%);
  animation-name: galleryFloatCentered;
}
@keyframes galleryFloatCentered {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
  50% { transform: translate(-50%, -50%) translate3d(-8px, -7px, 0); }
}

/* Small corner caption: readable, but never blocks the login or main animation. */
.hero-copy {
  top: 18px;
  right: 18px;
  bottom: auto;
  width: min(320px, 23vw);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(5, 39, 59, .68);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.hero-copy h2 {
  margin: 4px 0 6px;
  font-size: clamp(.98rem, 1.18vw, 1.28rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.hero-copy p {
  font-size: .69rem;
  line-height: 1.35;
}
.hero-copy .eyebrow {
  font-size: .56rem;
  letter-spacing: .11em;
}
.hero-pills {
  gap: 4px;
  margin-top: 8px;
}
.hero-pills span {
  padding: 4px 7px;
  font-size: .56rem;
}
.slide-dots {
  right: 20px;
  bottom: 18px;
}

@media (max-width: 1250px) and (min-width: 941px) {
  .radial-gallery {
    left: 70%;
    width: min(64vw, 820px);
  }
  .hero-copy {
    width: min(270px, 24vw);
    padding: 10px 12px;
  }
  .hero-copy p { display: none; }
}

@media (max-width: 980px) {
  .content.analytics-content {
    padding-bottom: max(125px, calc(82px + env(safe-area-inset-bottom)));
  }
  .content.analytics-content .analytics-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .content.analytics-content .analytics-filter-grid label:nth-child(3),
  .content.analytics-content .analytics-filter-grid button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 940px) {
  .radial-gallery {
    left: 50%;
    right: auto;
    top: 50%;
    width: min(112vw, 900px);
  }
}

@media (max-width: 650px) {
  .content.analytics-content {
    min-height: calc(100dvh - 70px);
    padding-bottom: max(110px, calc(72px + env(safe-area-inset-bottom)));
  }
  .content.analytics-content::after { margin-top: 64px; }
  .content.analytics-content .analytics-filter-grid {
    grid-template-columns: 1fr;
  }
  .content.analytics-content .analytics-filter-grid label:nth-child(3),
  .content.analytics-content .analytics-filter-grid button {
    grid-column: auto;
  }
  .content.analytics-content .analytics-panels {
    grid-template-columns: 1fr;
  }
  .content.analytics-content .analytics-bars {
    height: 190px;
    gap: 5px;
  }
  .content.analytics-content .analytics-dual-bars {
    height: 150px;
  }
}

@media (max-height: 760px) and (min-width: 941px) {
  .radial-gallery { width: min(54vw, 760px); }
  .hero-copy { top: 12px; right: 12px; }
  .hero-copy h2 { font-size: .98rem; }
  .hero-pills { display: none; }
}


/* v1.6.2 responsive workspace hardening */
.app-body, .app-shell, .workspace, .topbar, .content { width: 100%; max-width: 100%; }
.workspace, .content, .view-header, .view-actions,
.metric-grid, .metric-card, .dashboard-grid, .report-grid,
.panel-card, .data-card, .table-toolbar, .table-scroll,
.analytics-grid, .analytics-panels, .portal-center-grid,
.portal-section, .analytics-section-head, .analytics-action-row,
.hospital-hero, .diagnostic-hero, .clinical-section, .clinical-section .panel-body,
.medical-timeline-shell, .passport-grid, .passport-score, .health-grid,
.timeline-event-card, .timeline-summary-grid, .clinical-grid {
  min-width: 0;
  max-width: 100%;
}
.workspace { overflow-x: auto; overflow-y: visible; }
.content {
  overflow-x: auto;
  overflow-y: visible;
  padding-right: max(24px, env(safe-area-inset-right));
  scrollbar-gutter: stable both-edges;
}
.content > * { max-width: 100%; }
.data-card, .panel-card, .metric-card, .analytics-card, .clinical-section, .portal-section {
  width: 100%;
}
.table-toolbar {
  flex-wrap: wrap;
  align-items: center;
}
.table-toolbar .filter-input {
  min-width: 0;
  flex: 1 1 220px;
}
.table-toolbar .table-count {
  margin-left: auto;
}
.table-scroll {
  max-width: 100%;
}
.table-scroll table {
  width: max(100%, 860px);
}
.view-header {
  flex-wrap: wrap;
}
.view-actions {
  flex: 1 1 100%;
}
.portal-center-grid,
.analytics-panels,
.dashboard-grid {
  align-items: start;
}
.portal-center-grid > *,
.analytics-panels > *,
.dashboard-grid > * {
  min-width: 0;
}
.analytics-reason {
  max-width: 100%;
}
.analytics-action-row {
  align-items: start;
}
@media (max-width: 1480px) {
  .metric-grid,
  .portal-metrics,
  .analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-grid,
  .analytics-panels,
  .portal-center-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1180px) {
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
    flex-wrap: wrap;
  }
  .global-search {
    width: min(100%, 420px);
  }
  .content {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 860px) {
  .metric-grid,
  .portal-metrics,
  .analytics-grid,
  .report-grid,
  .portal-center-grid,
  .analytics-panels,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .table-toolbar .table-count {
    margin-left: 0;
    width: 100%;
  }
}


/* v1.6.3 per-tab scrolling fix */
.app-body {
  height: 100vh;
  overflow: hidden !important;
}
.app-shell {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  align-items: stretch;
}
.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  height: 100vh;
  overflow: hidden;
}
.main-nav {
  min-height: 0;
}
.topbar {
  min-width: 0;
  position: sticky;
  top: 0;
}
.content {
  min-height: 0;
  height: 100%;
  overflow-y: auto !important;
  overflow-x: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(120px, env(safe-area-inset-bottom));
}
.content::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.content::-webkit-scrollbar-thumb {
  background: rgba(8, 125, 141, .35);
  border-radius: 999px;
  border: 2px solid rgba(234, 242, 245, .95);
}
.content::-webkit-scrollbar-track {
  background: rgba(8, 42, 62, .06);
}
@media (max-width: 940px) {
  .app-body {
    overflow-y: auto !important;
  }
  .app-shell,
  .workspace {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .content {
    height: auto;
    min-height: calc(100vh - 70px);
    overflow-y: auto !important;
  }
}


/* v1.6.4 reliable tab scrolling and backup status */
.app-body { height: 100vh; overflow: hidden !important; }
.app-shell { height: 100vh; min-height: 100vh; overflow: hidden; }
.workspace {
  display: block !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow-y: scroll !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.topbar { position: sticky; top: 0; z-index: 25; }
.content {
  height: auto !important;
  min-height: calc(100vh - 82px) !important;
  overflow: visible !important;
  padding-bottom: max(150px, env(safe-area-inset-bottom)) !important;
}
.workspace::-webkit-scrollbar { width: 13px; height: 13px; }
.workspace::-webkit-scrollbar-thumb {
  background: rgba(8,125,141,.45);
  border-radius: 999px;
  border: 3px solid #eaf2f5;
}
.workspace::-webkit-scrollbar-track { background: rgba(8,42,62,.08); }
#content[data-active-view="analytics"] { min-height: max-content !important; }
#content[data-active-view="analytics"]::after {
  content: "";
  display: block;
  height: 90px;
}
.backup-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.backup-status { min-height: 20px; margin-top: 10px; color: #607983; font-size: .72rem; line-height: 1.45; }
.backup-actions button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 940px) {
  .app-body { height: auto; min-height: 100vh; overflow-y: auto !important; }
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .workspace { height: auto !important; min-height: 100vh !important; overflow: visible !important; }
  .content { min-height: calc(100vh - 70px) !important; }
}


/* v1.6.5 browser-level scrolling: reliable for Analytics and every long tab */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}
body.app-body {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
.app-shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  align-items: start !important;
}
.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
}
.workspace {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
}
.content,
#content,
#content[data-active-view="analytics"] {
  display: block !important;
  height: auto !important;
  min-height: calc(100vh - 82px) !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: max(180px, env(safe-area-inset-bottom)) !important;
}
#content[data-active-view="analytics"]::after {
  content: "";
  display: block;
  clear: both;
  height: 140px;
}
html::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
html::-webkit-scrollbar-thumb {
  background: rgba(8, 125, 141, .52);
  border-radius: 999px;
  border: 3px solid #eaf2f5;
}
html::-webkit-scrollbar-track {
  background: rgba(8, 42, 62, .09);
}
@media (max-width: 940px) {
  html { overflow-y: scroll !important; }
  body.app-body, .app-shell, .workspace, .content, #content {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .sidebar { position: fixed !important; }
}

/* v1.6.6 fixed responsive navigation during browser scrolling */
@media (min-width: 941px) {
  .app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 270px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    z-index: 50 !important;
  }

  .sidebar .main-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .sidebar-footer {
    flex: 0 0 auto !important;
  }

  .workspace {
    width: calc(100% - 270px) !important;
    max-width: calc(100% - 270px) !important;
    min-width: 0 !important;
    margin-left: 270px !important;
  }

  .topbar,
  .content,
  #content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 940px) {
  .app-shell {
    display: block !important;
    width: 100% !important;
  }

  .workspace {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(270px, 88vw) !important;
    height: 100dvh !important;
    transform: translateX(-104%) !important;
    transition: transform .2s ease !important;
    overflow: hidden !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .sidebar .main-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* v1.7.0 secure client Form Links */
.form-link-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 16px;
  border:1px solid #cce5e6;
  border-radius:15px;
  background:linear-gradient(135deg,#f2fbfa,#edf7fa);
}
.form-link-intro strong,.form-link-intro span { display:block; }
.form-link-intro strong { color:var(--navy); }
.form-link-intro > div > span { margin-top:5px;color:#68808a;font-size:.72rem;line-height:1.5; }
.form-link-history {
  border:1px solid #d8e7ea;
  border-radius:15px;
  overflow:hidden;
  background:#fbfdfd;
}
.form-link-history > header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 15px;
  border-bottom:1px solid #e0eaed;
  background:#f2f8f8;
}
.form-link-history > header strong,.form-link-history > header span { display:block; }
.form-link-history > header span { margin-top:3px;color:#748992;font-size:.68rem; }
.form-link-history-list { display:grid;gap:8px;padding:10px;max-height:360px;overflow:auto; }
.form-link-history-row {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:11px;
  border:1px solid #dfeaed;
  border-radius:12px;
  background:#fff;
}
.form-link-history-icon {
  width:36px;height:36px;display:grid;place-items:center;border-radius:10px;
  background:#e7f7f6;font-size:18px;
}
.form-link-history-row .row-main strong,.form-link-history-row .row-main small { display:block; }
.form-link-history-row .row-main small { margin-top:3px;color:#768b94;font-size:.66rem; }
.form-link-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px; }
.form-link-actions button {
  border:1px solid #d2e2e6;background:#fff;color:#315661;border-radius:8px;padding:6px 8px;font-size:.65rem;font-weight:850;
}
.form-link-actions button.delete { color:#ad3e4b; }
.form-link-empty { padding:28px;text-align:center;color:#738892; }
.form-link-empty strong,.form-link-empty span { display:block; }
.form-link-empty strong { color:var(--navy);margin-bottom:5px; }
@media(max-width:760px){
  .form-link-intro { align-items:flex-start;flex-direction:column; }
  .form-link-history-row { grid-template-columns:auto minmax(0,1fr); }
  .form-link-history-row > .status-badge,.form-link-actions { grid-column:2;justify-self:start; }
}