:root {
  --t2-navy: #071a2b;
  --t2-navy-2: #0a2238;
  --t2-blue: #1178bd;
  --t2-blue-dark: #0d65a5;
  --t2-blue-soft: #eaf4fb;
  --t2-cyan: #18a6b8;
  --t2-green: #1d9e75;
  --t2-red: #cb3a45;
  --t2-text: #17212b;
  --t2-muted: #6f8090;
  --t2-line: #dde5ec;
  --t2-soft: #edf2f6;
  --t2-bg: #f6f8fa;
  --t2-white: #fff;
  --accent: var(--t2-blue);
  --danger: var(--t2-red);
  --success: var(--t2-green);
}

/* One workspace expansion control applies to every module. The app toolbar
   remains available so branch, navigation and browser full screen never get
   trapped behind an individual page's maximized panel. */
body.workspace-expanded .app-shell{grid-template-columns:minmax(0,1fr)!important}
body.workspace-expanded .app-rail,body.workspace-expanded .app-sidebar{display:none!important}
body.workspace-expanded .app-main{grid-column:1!important;grid-template-rows:52px 0 auto minmax(0,1fr) 0!important}
body.workspace-expanded .activity-tabs,body.workspace-expanded .statusbar{display:none!important}
body.workspace-expanded .app-content{padding:6px;scrollbar-gutter:auto}
body.workspace-expanded .app-content>.t2-workspace{width:100%;max-width:100%}
#workspace-modules-button,#workspace-expand-button,#screen-fullscreen-button{white-space:nowrap}
body.t2-english dialog[open]{margin:auto!important;inset:0;max-width:calc(100dvw - 28px)!important;max-height:calc(100dvh - 28px)!important;overflow:auto;overscroll-behavior:contain;border:1px solid #bed0dc;border-radius:9px;padding:20px;box-shadow:0 20px 70px #071b3444;color:#173c52;background:#fff}
body.t2-english dialog::backdrop{background:#071b3455}
body.t2-english dialog h2,body.t2-english dialog h3{margin:0 0 16px;font-size:21px}
body.t2-english dialog input:not([type="checkbox"]):not([type="radio"]),body.t2-english dialog select,body.t2-english dialog textarea{width:100%;min-width:0;min-height:38px;padding:8px 10px;border:1px solid #b7cbd8;border-radius:5px;font:14px "Segoe UI",Arial,sans-serif;background:#fff;color:#173c52}
body.t2-english dialog button{min-height:36px;padding:7px 12px;border:1px solid #aac5d5;border-radius:5px;font:600 13px "Segoe UI",Arial,sans-serif;background:#f3f8fb;color:#086b98}
body.t2-english dialog button.primary{background:#087eb7;border-color:#087eb7;color:#fff}
body.t2-english dialog label{min-width:0;font-size:13px;line-height:1.5}
body.t2-english dialog input:focus,body.t2-english dialog select:focus,body.t2-english dialog textarea:focus{outline:2px solid #0a82b5;outline-offset:1px}
body.t2-english .tm-dialog{width:min(880px,96vw)}
@media(max-width:600px){body.t2-english .tm-dialog form{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1100px){
  .app-topbar .user-summary{display:none}
  .app-topbar .top-actions{gap:4px}
  #workspace-expand-button{max-width:110px;white-space:normal}
}
@media(max-width:760px){
  body.workspace-expanded .app-main{grid-template-rows:auto 0 auto minmax(0,1fr) 0!important}
  .app-topbar{flex-wrap:wrap;height:auto!important;gap:6px;padding:7px!important}
  .app-topbar .top-actions{flex-wrap:wrap;justify-content:flex-start}
}

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; overflow: hidden;
  color: var(--t2-text); background: var(--t2-bg);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
/* The legacy theme applies Syne to every LTR descendant with a high-specificity
   selector. T2 intentionally uses a neutral clinical UI typeface instead. */
html[dir="ltr"] body.t2-english,
html[dir="ltr"] body.t2-english * {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell {
  display: grid; grid-template-columns: 58px 254px minmax(0,1fr);
  height: 100vh; min-height: 0; overflow: hidden;
}

.app-rail {
  z-index: 30; display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 10px 7px; color: #d8e7f2; background: var(--t2-navy);
}
.app-rail button {
  display: grid; width: 42px; height: 42px; place-items: center;
  border: 0; border-radius: 10px; color: #a9bfd0; background: transparent;
  font-size: 11px; font-weight: 800;
}
.app-rail button:hover, .app-rail button.active { color: #fff; background: rgba(255,255,255,.12); }
.app-rail .brand-mark {
  color: #fff; background: linear-gradient(145deg,var(--t2-cyan),var(--t2-blue-dark));
  box-shadow: 0 8px 20px rgba(17,120,189,.28); font-size: 14px;
}
.rail-links, .rail-bottom { display: flex; flex-direction: column; gap: 6px; }
.rail-bottom { margin-top: auto; }
.app-rail .user-avatar { color: #fff; background: #123551; border: 1px solid rgba(255,255,255,.2); }

.app-sidebar {
  z-index: 20; display: flex; min-width: 0; flex-direction: column;
  background: var(--t2-white); border-right: 1px solid var(--t2-line);
}
.sidebar-header {
  display: flex; min-height: 70px; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--t2-line);
}
.sidebar-header strong { display: block; color: var(--t2-navy-2); font-size: 15px; letter-spacing: .08em; }
.sidebar-header small { display: block; margin-top: 3px; color: var(--t2-muted); font-size: 10px; }
.sidebar-header > span {
  padding: 3px 6px; border: 1px solid #b9d9ed; border-radius: 5px;
  color: var(--t2-blue-dark); background: var(--t2-blue-soft); font-size: 8px; font-weight: 800;
}
.command-search {
  display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center;
  gap: 8px; margin: 12px; padding: 9px 10px; border: 1px solid var(--t2-line);
  border-radius: 8px; color: var(--t2-muted); background: var(--t2-bg); text-align: left; font-size: 11px;
}
.command-search i, .dialog-search i {
  position: relative; display: inline-block; width: 13px; height: 13px;
  border: 2px solid currentColor; border-radius: 50%;
}
.command-search i::after, .dialog-search i::after {
  position: absolute; right: -5px; bottom: -3px; width: 6px; height: 2px;
  content: ""; transform: rotate(45deg); background: currentColor;
}
kbd {
  padding: 2px 5px; border: 1px solid #cbd5df; border-bottom-width: 2px;
  border-radius: 4px; color: var(--t2-muted); background: #fff; font-size: 9px;
}
.app-nav { flex: 1; overflow: auto; padding: 2px 10px 18px; }
.nav-section-title {
  margin: 15px 8px 6px; color: var(--t2-muted);
  font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.nav-item {
  display: flex; min-height: 34px; align-items: center; gap: 10px; margin: 2px 0;
  padding: 7px 9px; border: 1px solid transparent; border-radius: 7px;
  color: #425466; text-decoration: none; font-size: 12px; font-weight: 600;
}
.nav-item:hover { color: var(--t2-navy-2); background: var(--t2-soft); }
.nav-item.active {
  border-color: #c8e1f1; color: var(--t2-blue-dark); background: var(--t2-blue-soft);
  box-shadow: inset 3px 0 0 var(--t2-blue);
}
.nav-icon {
  display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center;
  border-radius: 5px; color: var(--t2-muted); background: var(--t2-soft);
  font-size: 8px; font-weight: 800;
}
.nav-badge {
  margin-left: auto; padding: 2px 4px; border: 1px solid #d8dee4; border-radius: 4px;
  color: #7a8791; background: #f7f8f9; font-size: 6px; font-weight: 850; letter-spacing: .06em;
}
.sidebar-footer {
  display: flex; min-height: 49px; align-items: center; justify-content: space-between;
  padding: 10px 13px; border-top: 1px solid var(--t2-line); color: var(--t2-muted); font-size: 10px;
}
.sidebar-footer > span { display: flex; align-items: center; gap: 6px; }
.sidebar-footer i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--t2-green);
  box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}
.sidebar-footer button { border: 0; color: var(--t2-blue-dark); background: transparent; font-size: 10px; font-weight: 700; }

.app-main {
  display: grid; min-width: 0; min-height: 0; height: 100vh; overflow: hidden;
  grid-template-rows: 70px auto minmax(0,1fr) 26px;
}
.app-topbar {
  z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 0 22px; border-bottom: 1px solid var(--t2-line); background: rgba(255,255,255,.97);
}
.page-heading, .top-actions, .user-summary { display: flex; align-items: center; }
.page-heading { gap: 10px; }
.workspace-history-button { flex:0 0 auto; min-height:36px; padding:6px 9px; border:1px solid #cbdce8; border-radius:5px; background:#fff; color:#164d6b; font:inherit; cursor:pointer; white-space:nowrap; }
.workspace-history-button:hover { background:#edf5fa; border-color:#9bbbd1; }
.page-heading small, .dialog-header small {
  color: var(--t2-blue-dark); font-size: 8px; font-weight: 800; letter-spacing: .12em;
}
#page-title { margin: 2px 0 0; color: var(--t2-navy-2); font-size: 19px; letter-spacing: -.02em; }
.top-actions { gap: 8px; }
.branch-switcher {
  display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 4px 7px;
  border: 1px solid var(--t2-line); border-radius: 7px; color: var(--t2-muted); background: #fff;
}
.branch-switcher span { font-size: 8px; font-weight: 800; text-transform: uppercase; }
.branch-switcher select {
  max-width: 145px; border: 0; outline: 0; color: var(--t2-navy-2); background: #fff;
  font-size: 10px; font-weight: 750;
}
.top-actions > button, .mobile-menu {
  min-height: 32px; padding: 7px 10px; border: 1px solid var(--t2-line);
  border-radius: 7px; background: #fff; font-size: 10px; font-weight: 700;
}
.top-actions > button:hover { border-color: #b7d5e9; color: var(--t2-blue-dark); background: var(--t2-blue-soft); }
.user-summary { min-width: 110px; flex-direction: column; align-items: flex-end; padding: 0 6px; }
.user-summary strong { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.user-summary small { margin-top: 2px; color: var(--t2-muted); font-size: 9px; text-transform: capitalize; }
.mobile-menu { display: none; }
.clinical-context {
  display: flex; min-height: 42px; align-items: center; gap: 10px; padding: 6px 22px;
  border-bottom: 1px solid #c8dce8; color: #2b4c61; background: #f2f9fd;
}
.clinical-context[hidden] { display: none; }
.context-mark {
  display: grid; width: 28px; height: 28px; place-items: center; border-radius: 6px;
  color: #fff; background: var(--t2-blue-dark); font-size: 7px; font-weight: 900;
}
.clinical-context div { min-width: 160px; }
.clinical-context small, .clinical-context strong { display: block; }
.clinical-context small { color: #6f8796; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.clinical-context strong { margin-top: 2px; font-size: 10px; }
.clinical-context > span:not(.context-mark) {
  padding: 3px 6px; border: 1px solid #d1e1ea; border-radius: 4px; background: #fff; font-size: 8px;
}
.clinical-context button {
  margin-left: auto; border: 0; color: var(--t2-blue-dark); background: transparent; font-size: 8px; font-weight: 800;
}
.app-content {
  min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto;
  padding: 22px; scrollbar-gutter: stable; overscroll-behavior: contain;
}
.statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 12px; border-top: 1px solid var(--t2-line); color: var(--t2-muted);
  background: #fff; font-size: 9px;
}

#progress {
  position: fixed; z-index: 1000; top: 0; left: 0; width: 0; height: 2px;
  background: var(--t2-cyan); opacity: 0; transition: width .22s, opacity .18s;
}
#progress.loading { width: 72%; opacity: 1; }
#progress.done { width: 100%; opacity: 0; }

.module-dialog {
  width: min(760px,calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: 12px; box-shadow: 0 28px 80px rgba(4,21,35,.35);
}
.module-dialog::backdrop { background: rgba(5,24,39,.62); backdrop-filter: blur(3px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 13px; }
.dialog-header h2 { margin: 3px 0 0; color: var(--t2-navy-2); font-size: 18px; }
.dialog-header button {
  width: 32px; height: 32px; border: 1px solid var(--t2-line);
  border-radius: 7px; background: #fff; font-size: 20px;
}
.dialog-search {
  display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center;
  gap: 10px; margin: 0 20px 12px; padding: 11px 13px;
  border: 1px solid #bcd8ea; border-radius: 8px; color: var(--t2-blue-dark); background: #f8fcff;
}
.dialog-search input { min-width: 0; border: 0; outline: 0; color: var(--t2-text); background: transparent; font-size: 13px; }
.module-results {
  display: grid; max-height: min(56vh,460px); grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px; overflow: auto; padding: 4px 14px 18px;
}
.module-result {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 11px; border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: left;
}
.module-result:hover, .module-result.selected { border-color: #cae1ef; background: var(--t2-blue-soft); }
.module-result strong, .module-result small { display: block; }
.module-result strong { color: var(--t2-text); font-size: 11px; }
.module-result small { margin-top: 3px; color: var(--t2-muted); font-size: 9px; }
.dialog-footer {
  display: flex; gap: 18px; padding: 9px 18px; border-top: 1px solid var(--t2-line);
  color: var(--t2-muted); background: var(--t2-bg); font-size: 9px;
}
.p-center { display: grid; min-height: 240px; place-items: center; }
.p-error { color: var(--t2-red); }

/* Role-aware guide center. This is a normal routed page, not a modal or
   blocking overlay: users keep browser Back/Forward and every destination is
   the real live screen rather than an invented screenshot. */
.guide-center { display: grid; gap: 10px; max-width: 1180px; margin: 0 auto; }
.guide-hero,
.guide-toolbar,
.guide-card,
.guide-trust-note {
  border: 1px solid #ccd8e0;
  border-radius: 7px;
  background: #fff;
}
.guide-hero {
  display: flex; align-items: start; justify-content: space-between; gap: 18px;
  padding: 16px 18px;
}
.guide-hero small,
.guide-card header small,
.guide-persona-summary small {
  color: #517085; font-size: 8px; font-weight: 850; letter-spacing: .09em;
}
.guide-hero h1 { margin: 3px 0 5px; color: #0a314a; font-size: 22px; }
.guide-hero p,
.guide-card header p { max-width: 760px; margin: 0; color: #5d7180; font-size: 11px; line-height: 1.5; }
.guide-toolbar {
  display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end;
  gap: 12px; padding: 10px 12px;
}
.guide-toolbar label span { display: block; margin-bottom: 4px; color: #405e72; font-size: 9px; font-weight: 750; }
.guide-toolbar input {
  width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #b9cfdd;
  border-radius: 5px; color: #172b3a; background: #fff; font-size: 11px;
}
.guide-persona-summary { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.guide-persona-summary small { width: 100%; text-align: right; }
.guide-persona-summary span,
.guide-personas span {
  padding: 3px 6px; border: 1px solid #cae0ec; border-radius: 999px;
  color: #174f70; background: #f1f8fc; font-size: 8px; font-weight: 750;
}
.guide-trust-note { display: flex; gap: 8px; padding: 8px 11px; color: #526a79; font-size: 9px; }
.guide-trust-note strong { color: #174f70; }
.guide-list { display: grid; gap: 9px; }
.guide-card { overflow: hidden; }
.guide-card.current { border-color: #6fb8dd; box-shadow: inset 3px 0 0 #1385bb; }
.guide-card > header {
  display: flex; align-items: start; justify-content: space-between; gap: 16px;
  padding: 13px 14px; border-bottom: 1px solid #dbe4ea;
}
.guide-card h2 { margin: 3px 0 4px; color: #123d57; font-size: 15px; }
.guide-screen-link {
  display: grid; grid-template-columns: 46px minmax(140px, auto) 1fr; align-items: center;
  gap: 8px; padding: 7px 14px; border-bottom: 1px solid #e2e8ec; background: #f5f8fa;
}
.guide-screen-link span { color: #527184; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.guide-screen-link strong { color: #243e50; font-size: 10px; }
.guide-screen-link code { overflow: hidden; color: #6f8090; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.guide-personas { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 14px 0; }
.guide-capabilities {
  display: grid; grid-template-columns: minmax(180px, .5fr) 1fr; gap: 8px;
  margin: 8px 14px 0; padding: 7px 9px; border: 1px solid #d9e3e8; border-radius: 5px;
  color: #5c7080; background: #f7f9fa; font-size: 8px;
}
.guide-capabilities.available { border-color: #bce3d6; background: #f2fbf8; }
.guide-capabilities.limited { border-color: #ead6ad; background: #fff9eb; }
.guide-capabilities strong { color: #304f62; }
.guide-capabilities span { overflow-wrap: anywhere; }
.guide-visual {
  margin: 10px 14px 0; border: 1px solid #cbdce6; border-radius: 7px;
  color: #2b4658; background: linear-gradient(145deg, #f7fbfd, #edf6fa); overflow: hidden;
}
.guide-visual figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 9px; border-bottom: 1px solid #d8e5ec; background: rgba(255,255,255,.72);
}
.guide-visual figcaption strong { color: #164f70; font-size: 9px; }
.guide-visual figcaption span { color: #637886; font-size: 8px; }
.guide-visual-screen { display: grid; grid-template-columns: 62px minmax(135px,.45fr) 1fr; align-items: stretch; min-height: 82px; }
.guide-visual-window {
  display: flex; align-items: start; gap: 4px; padding: 10px 9px; border-right: 1px solid #d8e5ec;
  background: #173f57;
}
.guide-visual-window span { width: 6px; height: 6px; border-radius: 999px; background: #8cc9e4; }
.guide-visual-window span:nth-child(2) { background: #b8dfd4; }
.guide-visual-window span:nth-child(3) { background: #ead493; }
.guide-visual-route {
  display: grid; align-content: center; gap: 4px; padding: 10px 12px; border-right: 1px solid #d8e5ec;
  background: rgba(255,255,255,.48);
}
.guide-visual-route small { color: #648091; font-size: 7px; font-weight: 850; letter-spacing: .09em; }
.guide-visual-route strong { color: #153f59; font-size: 10px; line-height: 1.3; }
.guide-visual ol {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(105px,1fr); align-items: stretch;
  gap: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none;
}
.guide-visual li {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 5px;
  min-height: 80px; padding: 9px 12px; text-align: center;
}
.guide-visual li:not(:last-child)::after {
  position: absolute; right: -5px; top: calc(50% - 5px); z-index: 1;
  width: 9px; height: 9px; border-top: 1px solid #82a9bd; border-right: 1px solid #82a9bd;
  background: #f1f8fb; content: ''; transform: rotate(45deg);
}
.guide-visual li > span {
  display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px;
  color: #fff; background: #147eae; font-size: 9px; font-weight: 900;
}
.guide-visual li > strong { max-width: 130px; color: #294858; font-size: 8px; line-height: 1.35; }
.guide-card-columns { display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 18px; padding: 12px 14px 15px; }
.guide-card-columns h3 { margin: 0 0 7px; color: #35566a; font-size: 10px; }
.guide-card-columns ul,
.guide-card-columns ol { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.guide-card-columns li { color: #4f6574; font-size: 9px; line-height: 1.45; }
.guide-card-columns li strong,
.guide-card-columns li span { display: block; }
.guide-card-columns li strong { color: #263f50; font-size: 10px; }
.guide-card-columns li span { margin-top: 1px; }
.guide-screen-directory {
  overflow: hidden; border: 1px solid #ccd8e0; border-radius: 7px; background: #fff;
}
.guide-screen-directory > header {
  display: flex; align-items: start; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid #dbe4ea;
}
.guide-screen-directory > header small { color: #517085; font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.guide-screen-directory > header h2 { margin: 3px 0; color: #123d57; font-size: 15px; }
.guide-screen-directory > header p { max-width: 720px; margin: 0; color: #5d7180; font-size: 9px; }
.guide-screen-directory > header > strong { color: #527184; font-size: 9px; white-space: nowrap; }
.guide-screen-directory > div {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; padding: 10px;
}
.guide-screen-directory button {
  min-width: 0; padding: 8px 9px; border: 1px solid #d9e3e8; border-radius: 5px;
  color: #263f50; background: #f8fafb; text-align: left;
}
.guide-screen-directory button:hover { border-color: #88bdd9; background: #f0f8fc; }
.guide-screen-directory button strong,
.guide-screen-directory button code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-screen-directory button strong { font-size: 9px; }
.guide-screen-directory button code { margin-top: 3px; color: #71828e; font-size: 8px; }
@media (max-width: 760px) {
  .guide-hero,
  .guide-card > header { flex-direction: column; }
  .guide-toolbar,
  .guide-card-columns { grid-template-columns: 1fr; }
  .guide-persona-summary { justify-content: start; }
  .guide-persona-summary small { text-align: left; }
  .guide-screen-link { grid-template-columns: 42px 1fr; }
  .guide-screen-link code { grid-column: 2; }
  .guide-capabilities { grid-template-columns: 1fr; }
  .guide-visual figcaption { align-items: start; flex-direction: column; }
  .guide-visual-screen { grid-template-columns: 44px 1fr; }
  .guide-visual-route { border-right: 0; }
  .guide-visual ol { grid-column: 1 / -1; border-top: 1px solid #d8e5ec; }
  .guide-screen-directory > header { flex-direction: column; }
}
/* T2 is an English-first clinical workspace. Legacy modules keep their
   underlying behavior while their layout is normalized to LTR inside T2. */
body.t2-english #page-content > * {
  direction: ltr !important;
}
body.t2-english #page-content :is(input, textarea, select) {
  direction: ltr;
}
/* Native date/time pickers draw their segment labels in the browser's UI
   language. Forcing LTR on an Arabic-locale browser reverses those Arabic
   labels glyph-by-glyph, so only on such browsers these controls keep their
   natural RTL - every other input stays LTR. */
html[data-browser-rtl='1'] body.t2-english #page-content
  :is(input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month']) {
  direction: rtl;
}
body.t2-english #page-content :is(th, legend, label) {
  text-align: left;
}
body.t2-english #page-content :is(
  [data-patient-name],
  .patient-name,
  .patient-name-ar,
  [class*="patient-name"],
  [id*="patient-name"]
) {
  direction: auto;
  unicode-bidi: plaintext;
}

@media (min-width: 761px) and (max-width: 1020px) {
  .app-shell { grid-template-columns: 56px 224px minmax(0,1fr); }
  .user-summary { display: none; }
  .branch-switcher span { display: none; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 52px minmax(0,1fr); }
  .app-sidebar {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: 52px;
    width: min(280px,calc(100vw - 52px)); transform: translateX(-110%);
    box-shadow: 16px 0 40px rgba(5,24,39,.24); transition: transform .18s;
  }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { grid-column: 2; }
  .mobile-menu { display: inline-grid; }
  .app-topbar { padding: 0 12px; }
  .app-content { padding: 14px; }
  #logout-button { display: none; }
  .module-results { grid-template-columns: 1fr; }
  .statusbar span:nth-child(2) { display: none; }
}

/* Prisma T2 activity workspace
   Dense, role-specific navigation replaces the generic all-module dashboard shell. */
.app-shell {
  grid-template-columns: 58px 226px minmax(0, 1fr);
  background: #e8edf1;
}
.app-rail {
  gap: 8px;
  padding-top: 7px;
  background: #0b2538;
}
.app-rail button {
  width: 38px;
  height: 38px;
  border-radius: 6px;
}
.app-rail .brand-mark {
  border-radius: 8px;
  background: #087eb5;
  box-shadow: none;
}
.sidebar-header {
  min-height: 52px;
  padding: 8px 10px 8px 13px;
}
.sidebar-header strong {
  font-size: 13px;
  letter-spacing: .09em;
}
.sidebar-header small {
  font-size: 8px;
}
#collapse-navigation {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid #d2dce3;
  border-radius: 4px;
  color: #4d6677;
  background: #fff;
  font-size: 15px;
}
.workspace-switcher {
  display: grid;
  gap: 4px;
  padding: 9px 12px 7px;
  border-bottom: 1px solid var(--t2-line);
}
.workspace-switcher span {
  color: #6e8290;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}
.workspace-switcher select {
  width: 100%;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #cfdbe3;
  border-radius: 4px;
  outline: 0;
  color: #183d55;
  background: #fff;
  font-size: 10px;
  font-weight: 750;
}
.command-search {
  margin: 8px 10px;
  padding: 7px 8px;
  border-radius: 4px;
  font-size: 10px;
}
.app-nav {
  padding: 0 7px 10px;
}
.nav-section-title {
  margin: 10px 6px 5px;
  font-size: 8px;
}
.nav-item {
  min-height: 31px;
  gap: 8px;
  margin: 1px 0;
  padding: 5px 7px;
  border-radius: 4px;
  font-size: 10px;
}
.nav-item.active {
  border-color: #b9d4e3;
  background: #e5f2f9;
  box-shadow: inset 3px 0 0 #087eb5;
}
.nav-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  border-radius: 3px;
  font-size: 7px;
}
.nav-icon svg {
  width: 13px;
  height: 13px;
}
.app-rail button svg {
  width: 18px;
  height: 18px;
}
.app-main {
  grid-template-rows: 52px auto auto minmax(0, 1fr) 23px;
  background: #f4f6f8;
}
.app-topbar { grid-row: 1; }
.activity-tabs { grid-row: 2; }
.clinical-context { grid-row: 3; }
.app-content { grid-row: 4; }
.statusbar { grid-row: 5; }
.app-topbar {
  padding: 0 14px;
  border-bottom-color: #cfd8df;
}
.page-heading small {
  color: #5e7585;
  font-size: 9px;
}
#page-title {
  margin-top: 0;
  font-size: 16px;
}
.top-actions > button,
.mobile-menu,
.branch-switcher {
  min-height: 29px;
  border-radius: 4px;
}
.activity-tabs {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 1px;
  overflow-x: auto;
  padding: 3px 10px 0;
  border-bottom: 1px solid #cbd5dc;
  background: #e7ecef;
  scrollbar-width: thin;
}
.activity-tab-group {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: end;
  gap: 2px;
}
.activity-tab-group + .activity-tab-group {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #c5d0d7;
}
.activity-tab-group-label {
  align-self: center;
  padding: 0 5px;
  color: #647986;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  white-space: nowrap;
}
.current-activity-group {
  padding: 0 3px;
  background: #dbe9f0;
}

.activity-tabs[hidden] {
  display: none;
}
.activity-tab {
  display: flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  padding: 5px 10px 6px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  color: #496273;
  text-decoration: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
}
.activity-tab:hover {
  color: #174b69;
  background: rgba(255, 255, 255, .55);
}
.activity-tab.active {
  border-color: #c5d2da;
  color: #0c5f8b;
  background: #fff;
  box-shadow: inset 0 2px 0 #1385bb;
}
.activity-context {
  color: #083f5e;
  cursor: default;
}
.recent-activity {
  border-style: dashed;
  color: #637783;
  font-weight: 600;
}
.clinical-context {
  min-height: 37px;
  padding: 4px 14px;
  background: #edf6fb;
}
.app-content {
  padding: 10px 12px;
}
.statusbar {
  padding: 0 10px;
  font-size: 9px;
}
/* Collapsed means gone, not narrowed. A 46px strip of icons beside the
   58px rail showed the same destinations twice — exactly the duplication
   this redesign exists to remove. The rail keeps the shortcuts and now
   carries the control that brings the sidebar back. */
/* Scoped above 760px on purpose. Below that the sidebar is already a fixed
   overlay driven by the ☰ control, and this rule — being more specific than
   the bare .app-shell inside the media query — would have overridden the
   mobile two-column layout on every phone, now that collapsed is the
   default rather than an opt-in. */
@media (min-width: 761px) {
  .navigation-collapsed .app-shell {
    grid-template-columns: 58px 0 minmax(0, 1fr);
  }
  /* Zero width, still in the grid. `display:none` would pull the sidebar out
     of the layout entirely and let .app-main fall into the 0px column —
     exactly what squeezed the workspace into a sliver. */
  .navigation-collapsed .app-sidebar {
    overflow: hidden;
    visibility: hidden;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .navigation-collapsed .app-main {
    grid-column: 3;
  }
}
.rail-toggle {
  width: 34px; height: 30px; border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px; color: #cfe3f0; background: rgba(255,255,255,.06);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.rail-toggle:hover { color: #fff; background: rgba(255,255,255,.14); }
.navigation-collapsed .sidebar-header {
  justify-content: center;
  padding: 8px;
}
.navigation-collapsed .product-lockup,
.navigation-collapsed .workspace-switcher,
.navigation-collapsed .command-search > span,
.navigation-collapsed .command-search > kbd,
.navigation-collapsed .nav-section-title,
.navigation-collapsed .nav-label,
.navigation-collapsed .sidebar-footer {
  display: none;
}
.navigation-collapsed .command-search {
  display: grid;
  width: 30px;
  height: 30px;
  grid-template-columns: 1fr;
  place-items: center;
  margin: 8px;
  padding: 0;
}
.navigation-collapsed .nav-item {
  justify-content: center;
  padding: 5px;
}

/* Shared specialty pages use compact work controls, not repeated marketing banners. */
.t2-workspace {
  width: 100%;
  max-width: none;
  gap: 7px;
  margin: 0;
}
.t2-command {
  min-height: 46px;
  padding: 7px 9px;
  border-color: #c9d5dd;
  border-radius: 4px;
  color: #183c53;
  background: #fff;
  box-shadow: none;
}
.t2-command-mark {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #176f9d;
  font-size: 10px;
}
.t2-command h2 {
  font-size: 13px;
}
.t2-command p {
  margin-top: 2px;
  color: #6a7f8d;
  font-size: 10px;
}
.t2-command .t2-button {
  border-color: #c8d5de;
  color: #24485e;
  background: #f8fafb;
}
.t2-command .t2-button.primary {
  border-color: #147cac;
  background: #147cac;
}
.t2-kpis,
.t2-kpis.t2-kpis-six {
  gap: 0;
  overflow: hidden;
  border: 1px solid #d0dbe2;
  border-radius: 4px;
  background: #fff;
}
.t2-kpi {
  min-height: 55px;
  padding: 7px 9px;
  border: 0;
  border-right: 1px solid #dde5ea;
  border-radius: 0;
}
.t2-kpi:last-child {
  border-right: 0;
}
.t2-kpi::after {
  display: none;
}
.t2-kpi small {
  font-size: 9px;
}
.t2-kpi strong {
  margin-top: 3px;
  font-size: 16px;
}
.t2-kpi span {
  margin-top: 1px;
  font-size: 9px;
}
.t2-tabs {
  min-height: 32px;
  padding: 2px;
  border-radius: 4px;
}
.t2-tab {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 3px;
}
.t2-grid {
  gap: 7px;
}

.t2-resizable-columns {
  position: relative;
}

.t2-column-resizer {
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  width: 14px;
  min-width: 14px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  transform: translateX(-50%);
}

.t2-layout-controls {
  position: absolute;
  z-index: 32;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  border: 1px solid #aac5d5;
  border-radius: 7px;
  background: #f8fcfe;
  box-shadow: 0 3px 10px rgba(17, 62, 88, .12);
  /* Keep the action buttons beside the divider. Centering this group on the
     divider covered its visible grip, so a mouse drag hit the reset button. */
  transform: translate(12px, -50%);
}

.t2-layout-overlay[hidden] {
  display: none !important;
}

.t2-layout-control,
.t2-panel-layout-button {
  display: inline-grid;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 5px;
  color: #245c79;
  background: transparent;
  font: 800 15px/1 system-ui, sans-serif;
  cursor: pointer;
}

.t2-layout-control:hover,
.t2-layout-control:focus-visible,
.t2-panel-layout-button:hover,
.t2-panel-layout-button:focus-visible {
  color: #fff;
  background: #0b83b9;
  outline: none;
}

.t2-panel-layout-button {
  flex: 0 0 auto;
  margin-inline-start: 4px;
  border: 1px solid #b9ceda;
  background: #f8fcfe;
}

.t2-layout-panel-hidden {
  display: none !important;
}

.t2-resizable-columns[data-t2-maximized='true'] {
  grid-template-columns: minmax(0, 1fr) !important;
}

.t2-resizable-columns > .t2-layout-panel-maximized {
  grid-column: 1 / -1 !important;
}

.t2-column-resizer::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  border-radius: 2px;
  background: #a9c4d4;
  content: '';
  opacity: .48;
  transition: opacity .15s, background .15s, box-shadow .15s;
}

.t2-column-resizer::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 18px;
  height: 34px;
  place-items: center;
  border: 1px solid #aac5d5;
  border-radius: 9px;
  color: #3f718d;
  background: #f8fcfe;
  box-shadow: 0 3px 10px rgba(17, 62, 88, .12);
  content: '⋮';
  font-size: 15px;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.t2-column-resizer:hover::before,
.t2-column-resizer:focus-visible::before,
body.t2-resizing-columns .t2-column-resizer::before {
  background: #0b83b9;
  box-shadow: 0 0 0 3px rgba(11, 131, 185, .12);
  opacity: 1;
}

.t2-column-resizer:focus-visible {
  outline: 2px solid #0b83b9;
  outline-offset: 2px;
}

body.t2-resizing-columns {
  cursor: col-resize;
  user-select: none;
}
.t2-panel {
  border-radius: 4px;
}
.t2-panel-head {
  min-height: 39px;
  padding: 7px 9px;
}
.t2-detail-body {
  gap: 7px;
  padding: 8px;
}

@media (min-width: 761px) and (max-width: 1020px) {
  .app-shell {
    grid-template-columns: 54px 206px minmax(0, 1fr);
  }
}

/* Keep the navigation as an overlay on phones. This final rule intentionally
   follows the dense desktop shell so later desktop tuning cannot squeeze the
   page into a third grid column on a mobile viewport. */
@media (max-width: 760px) {
  .app-shell,
  .navigation-collapsed .app-shell {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .app-main,
  .navigation-collapsed .app-main {
    grid-column: 2;
    min-width: 0;
    grid-template-rows: auto auto auto minmax(0, 1fr) 23px;
  }
  .app-topbar {
    min-width: 0;
    min-height: 82px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
  }
  .page-heading {
    min-width: 0;
    width: 100%;
  }
  .page-heading > div {
    min-width: 0;
  }
  #page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top-actions {
    min-width: 0;
    width: 100%;
    gap: 4px;
  }
  .branch-switcher {
    min-width: 0;
    flex: 1 1 112px;
    padding-inline: 5px;
  }
  .branch-switcher span {
    display: none;
  }
  .branch-switcher select {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  .top-actions > button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 7px;
    white-space: nowrap;
  }
  .user-summary {
    min-width: 0;
    max-width: 74px;
    padding: 0 2px;
  }
  .user-summary strong,
  .user-summary small {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #logout-button {
    display: inline-flex;
  }
}

.pg-workspace { gap: 10px; }
.pg-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.pg-secret { padding: 12px; border-color: #d6a83c; background: #fff9e8; }
.pg-secret header { display: flex; align-items: center; justify-content: space-between; }
.pg-secret p { font-size: 9px; color: #765517; }
.pg-secret > div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; margin-top: 6px; }
.pg-secret code { padding: 6px; background: #fff; border: 1px solid #e8cf8f; border-radius: 6px; overflow-wrap: anywhere; }
@media (max-width: 980px) { .pg-grid { grid-template-columns: 1fr; } }

/* Global display tools, including pages with their own table/dialog styles. */
body.t2-english .app-shell,body.t2-english .app-main{height:var(--t2-viewport-height,100dvh)!important;min-height:0}
body.t2-english .app-main{grid-template-rows:auto auto auto minmax(0,1fr) auto}
body.t2-english.workspace-expanded .app-main{grid-template-rows:auto 0 auto minmax(0,1fr) 0!important}
body.t2-english .app-topbar{min-height:52px;height:auto;flex-wrap:wrap;gap:6px 14px;padding:7px 12px}
body.t2-english .app-topbar .top-actions{flex-wrap:wrap;gap:5px;min-width:0}
body.t2-english .page-heading{flex:1 1 220px;min-width:0}
body.t2-english .page-heading h1{white-space:normal;overflow-wrap:anywhere}
body.t2-english .screen-scale{display:inline-flex;gap:0;align-items:center;white-space:nowrap}
body.t2-english .screen-scale button{border-radius:0;padding:5px 7px;min-width:30px}
body.t2-english .screen-scale button:first-child{border-radius:5px 0 0 5px}
body.t2-english .screen-scale button:last-child{border-radius:0 5px 5px 0}
body.t2-english dialog[open]{max-width:calc(var(--t2-viewport-width,100dvw) - 16px)!important;max-height:calc(var(--t2-viewport-height,100dvh) - 16px)!important}
body.t2-english .t2-managed-window{overflow:auto!important;overscroll-behavior:contain;min-width:0;min-height:0}
body.t2-english .t2-window-positioned{position:fixed!important;margin:0!important;right:auto!important;bottom:auto!important;transform:none!important;box-sizing:border-box!important}
body.t2-english .t2-window-bar{position:sticky;top:-20px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;margin:0 0 12px;background:#fff;border-bottom:1px solid #d3e0e8;font:13px "Segoe UI",Arial,sans-serif;color:#486878}
body.t2-english .t2-window-move{cursor:move;touch-action:none;user-select:none;padding:5px;flex:1;min-width:80px}
body.t2-english .t2-window-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
body.t2-english .t2-window-actions button{font-size:12px;min-height:30px;padding:4px 8px;white-space:nowrap}
body.t2-english .t2-window-resize{position:sticky;bottom:0;margin-left:auto;margin-right:-12px;width:28px;height:28px;display:grid;place-items:center;cursor:nwse-resize;touch-action:none;user-select:none;background:#e8f4fb;border-radius:4px;color:#076b97;font-size:20px;z-index:30}
body.t2-english .t2-window-move:focus-visible,body.t2-english .t2-window-resize:focus-visible{outline:2px solid #087eb7;outline-offset:2px}
body.t2-english .t2-managed-window form{min-width:0}
body.t2-english .t2-managed-window :is(input,select,textarea){max-width:100%}
@media print{.screen-scale,.t2-window-bar,.t2-window-resize{display:none!important}body.t2-english{zoom:1!important}}

.screen-desktop-link{display:inline-flex;align-items:center;min-height:36px;padding:7px 12px;border:1px solid #d4e2ec;border-radius:4px;background:#fff;color:#143b52;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
/* Restricted HR bilingual presentation (M12). English remains the primary line;
   the Arabic line shows only inside a root marked data-t2-bilingual="on".
   No global direction change and no activation outside HR self-service. */
.t2-bi{display:inline-flex;flex-direction:column;line-height:1.15}
.t2-bi-ar{display:none;font-size:.85em;opacity:.8;unicode-bidi:isolate}
[data-t2-bilingual="on"] .t2-bi-ar{display:block}
[data-t2-bilingual="off"] .t2-bi-ar{display:none}
.t2-bi-en{display:block}
:is(button,.t2-button,.t2-tab,summary,th) .t2-bi{vertical-align:middle;text-align:start}
.t2-fact>small .t2-bi-ar,.t2-kpi>small .t2-bi-ar{font-size:.95em}