/* Owner portal: Dashboard, Institutes, one institute's page. Works with app.css. */
.ow { display: flex; flex-direction: column; gap: 16px; }
.ow h2 { font-size: 18px; font-weight: 700; margin: 0; }
.ow h3 { font-size: 16px; font-weight: 700; margin: 0; }
.ow .page-head { margin-bottom: 0; }
.ow .panel { margin-bottom: 0; min-width: 0; }
.ow .panel > h2, .ow .panel > h3 { margin-bottom: 10px; }
.ow .panel-title { padding: 16px 20px 8px; }
.ow-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.ow .panel > .ow-between { margin-bottom: 10px; }
.ow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ow-grow { flex: 1 1 200px; min-width: 0; }
.ow-pad { padding: 14px 20px; }
.ow-r { text-align: right; }
th.ow-r { text-align: right; }
.btn.ow-white { background: #FFFFFF; color: #160F22; }
.ow .chip.ow-chip { min-height: 36px; padding: 3px 13px; font-size: 13px; }
.ow .chip.ow-chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.ow-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ow-fig { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 13px 15px; min-width: 0; text-align: left; font: inherit; color: inherit; }
.ow-l { font-size: 13px; color: var(--slate); }
.ow-v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.ow-v.bad { color: #9A2A0A; }
.ow-v.txt { font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.5; color: var(--ink-2); padding: 4px 0; }
.ow-s { font-size: 12.5px; color: var(--slate); }
.ow-link { font-weight: 600; color: #9A2A0A; }
.ow-riskbtn { cursor: pointer; background: #FFF8F3; border: 2px solid #E9B8A0; padding: 12px 14px; }
.ow-riskbtn:hover { background: #FFF1E8; }
.ow-two { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.ow-main { flex: 3 1 440px; min-width: 0; }
.ow-side { flex: 2 1 300px; min-width: 0; }
div.ow-side, .ow-col { display: flex; flex-direction: column; gap: 16px; }
.ow-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ow-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-2); }
.ow-todo .pill { flex: 0 0 84px; text-align: center; }
.ow-stack { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; }
.ow-seg.g { background: #1F7A4D; } .ow-seg.a { background: #E0A030; } .ow-seg.r { background: #B42318; } .ow-seg.n { background: #8C84A0; }
.ow-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.ow-mbar { margin-bottom: 11px; font-size: 13.5px; }
.ow-track { height: 8px; border-radius: 4px; background: #ECE8F2; overflow: hidden; margin-top: 4px; }
.ow-track > div { height: 100%; background: var(--brand); border-radius: 4px; }
.ow-track.big { height: 12px; border-radius: 6px; margin: 0; } .ow-track.big > div.low { background: #C2570C; }
.ow-tedit { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ow-dark { background: var(--night); color: #FFFFFF; border-radius: 18px; padding: 20px 22px; }
.ow-dim { color: #CFC8DC; font-size: 13px; }
.ow-bars { display: flex; align-items: stretch; gap: 8px; height: 170px; margin: 16px 0 6px; border-bottom: 1px solid #4B4160; }
.ow-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11.5px; color: #CFC8DC; }
.ow-bar i { display: block; width: 100%; min-height: 1px; background: #6D4FA3; border-radius: 4px 4px 0 0; } .ow-bar i.now { background: #C4A5FF; }
.ow-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ow-hbox { display: flex; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 16px; }
.ow-an { display: flex; flex-direction: column; gap: 12px; }
.ow-cmp { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) 54px; gap: 12px; align-items: center; min-height: 34px; font-size: 13.5px; }
.ow-cmp b { text-align: right; }
.ow-months { display: flex; gap: 10px; height: 150px; align-items: stretch; }
.ow-mo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font-size: 12px; min-width: 0; }
.ow-mo i { display: block; width: 100%; max-width: 40px; min-height: 1px; background: #C9B5F5; border-radius: 4px 4px 0 0; flex: 0 0 auto; max-height: 100px; } .ow-mo i.now { background: var(--brand); }
.ow-mo span { color: var(--slate); }
.ow-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--rule-2); font-size: 13.5px; }
.ow-linkrow { width: 100%; background: none; border-width: 1px 0 0; border-style: solid; border-color: var(--rule-2); font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 40px; }
.ow-linkrow:hover { background: var(--rule-2); } .ow-linkrow[aria-current] { font-weight: 700; }
.ow-risk { border: 2px solid #E9B8A0; }
.ow-rrow { display: flex; flex-wrap: wrap; gap: 14px 20px; padding: 14px 0; border-top: 1px solid var(--rule-2); }
.ow-rname { flex: 1 1 170px; } .ow-rname h4 { margin: 0 0 4px; font-size: 15px; } .ow-rname .pill { margin-bottom: 4px; }
.ow-rwhy { flex: 2 1 260px; font-size: 13.5px; min-width: 0; } .ow-rwhy ul { margin: 2px 0 6px; padding-left: 18px; }
.ow-dl { flex: 1 1 180px; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 13px; align-content: start; }
.ow-dl dt { color: var(--slate); } .ow-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ow-rbtns { flex: 0 1 160px; display: flex; flex-direction: column; gap: 6px; }
.ow input.ow-search { width: 240px; max-width: 100%; }
.ow .mt-view button { cursor: pointer; }
.ow-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ow-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.ow-card h3 { overflow-wrap: anywhere; }
.ow-chead { display: flex; gap: 12px; align-items: center; }
.ow-chead .ow-grow { flex-basis: 100px; }
.ow-logo { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #FFFFFF; font-weight: 700; font-size: 14px; object-fit: contain; background: #FFFFFF; }
.ow-logo.sm { width: 36px; height: 36px; border-radius: 10px; font-size: 12.5px; } .ow-logo.big { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }
.ow-cnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: #FAF9FC; border-radius: 12px; padding: 10px 12px; }
.ow-cnums b { display: block; font-size: 19px; } .ow-cnums span { font-size: 12px; color: var(--slate); }
.ow-alert { font-size: 13px; font-weight: 600; border-radius: 10px; padding: 8px 10px; }
.ow-alert.bad { background: #FDEBE4; color: #9A2A0A; } .ow-alert.warn { background: #FDF0E1; color: #8A4B0A; } .ow-alert.ok { background: #E5F3EC; color: #1F7A4D; } .ow-alert.none { background: var(--rule-2); color: #4A4160; }
.ow-cact { display: flex; gap: 6px; margin-top: auto; justify-content: flex-end; flex-wrap: wrap; }
.ow-card .ow-cact .btn { flex: 1; }
.ow-list { min-width: 980px; }
.ow-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ow-need.bad { color: #9A2A0A; font-weight: 600; } .ow-need.warn { color: #8A4B0A; font-weight: 600; } .ow-need.ok, .ow-need.none { color: var(--slate); }
.ow-back { align-self: flex-start; }
.ow-tabbody { display: flex; flex-direction: column; gap: 16px; }
.ow .tabs { margin-bottom: 0; }
.ow-switch { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 42px; margin: 0; border-top: 1px solid var(--rule-2); font-weight: 400; cursor: pointer; }
.ow-switch input { width: 18px; height: 18px; accent-color: var(--brand); }
.ow-laterbox { background: #FAF9FC; border-style: dashed; border-color: var(--field); }
.ow-brand { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.ow-dialog { width: min(560px, 100%); }
.ow-c { text-align: center; } th.ow-c { text-align: center; }
.ow-okt { color: #1F7A4D; }
.ow-mt { margin-top: 12px; }
.ow-num { width: 96px !important; min-height: 38px !important; padding: 4px 10px !important; }
.ow-end { display: flex; justify-content: flex-end; }
.ow-addrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--rule-2); }
.ow-addrow input { flex: 1 1 180px; width: auto; }
.ow-fs { border: 0; margin: 0; padding: 0; }
.ow-fs legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.ow-opt { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--rule); border-radius: 12px; cursor: pointer; }
.ow-opt input[type=radio] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.ow-opt > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ow-figbtn { cursor: pointer; } .ow-figbtn:hover { background: #FAF9FC; } .ow-figbtn .ow-s { color: var(--brand); font-weight: 600; }
.ow-rowend { justify-content: flex-end; flex-wrap: nowrap; }
.ow select.ow-pick { width: auto; min-height: 40px; }
.btn.ow-ghostw { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .45); }
.ow .tabs[aria-label=Courses] { flex-wrap: wrap; }
/* the owner menu */
.ow-menu .ow-group { font-size: 12px; font-weight: 600; color: #B3B6C6; padding: 10px 14px 2px; }
.ow-menu .side-link { min-height: 36px; padding: 6px 14px; }
.ow-menu .ow-later { color: #B3B6C6; }
.ow-tag { margin-left: auto; font-size: 11px; font-weight: 500; color: #B3B6C6; }
.layout.rail .ow-menu .ow-group { height: 1px; padding: 0; margin: 6px 8px; background: rgba(255, 255, 255, .15); overflow: hidden; color: transparent; }
.layout.rail .ow-menu .ow-later { opacity: .6; }
.layout.rail .ow-menu .ow-tag { display: none; }
@media (max-width: 860px) { .ow-menu .ow-group { display: none; } }
@media (max-width: 560px) { .ow-cmp { grid-template-columns: minmax(0, 1fr) 54px; } .ow-cmp .ow-track { grid-column: 1 / -1; grid-row: 2; } .ow input.ow-search { width: 100%; } }