/* Density is a screen preference; document and print layouts retain their sizing. */
@media screen {
  .hosiq-ui-density{flex:0 0 auto;margin:16px 0 0;padding:10px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.035)}
  .hosiq-ui-density[hidden]{display:none!important}
  .hosiq-ui-density-label{display:block;margin-bottom:7px;color:#b9c9e1;font-size:11px;font-weight:700;letter-spacing:.04em}
  .hosiq-ui-density-options{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .hosiq-ui-density-options button{min-height:34px;padding:6px 8px;border:1px solid transparent;border-radius:7px;background:transparent;color:#cbd7eb;font-size:13px;font-weight:750;line-height:1.3}
  .hosiq-ui-density-options button[aria-pressed="true"]{background:#e5f7fb;color:#075b77;border-color:#74d8e9;box-shadow:0 1px 4px #0002}
  .hosiq-ui-density-options button:hover{border-color:#8ebdd0}
  .hosiq-ui-density-options button:focus-visible{outline:3px solid #53dce9;outline-offset:2px}
  .hosiq-density-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html[data-hosiq-density="compact"] body{font-size:14px;line-height:1.2}
  html[data-hosiq-density="compact"] .main{padding:12px 16px 40px}
  html[data-hosiq-density="compact"] .side{padding:12px 10px}
  html[data-hosiq-density="compact"] .side>.nav{margin-top:8px;gap:1px}
  html[data-hosiq-density="compact"] .nav button{padding:3px 6px;min-height:24px;font-size:13px;line-height:1.15;border-radius:5px}
  html[data-hosiq-density="compact"] .nav-queue-count{min-width:18px;height:16px;padding:0 4px}
  html[data-hosiq-density="compact"] .nav-section-label{padding:4px 6px 1px}
  html[data-hosiq-density="compact"] .side>.sidefoot{font-size:11px;line-height:1.2;padding-top:6px}
  html[data-hosiq-density="compact"] .hosiq-logout-slot #logoutBtn{min-height:24px;padding:3px 6px;font-size:13px;line-height:1.15}
  html[data-hosiq-density="compact"] .hosiq-ui-density{margin-top:8px;padding:4px}
  html[data-hosiq-density="compact"] .hosiq-ui-density-label{margin-bottom:4px}
  html[data-hosiq-density="compact"] .hosiq-ui-density-options{gap:2px}
  html[data-hosiq-density="compact"] #appView .top{gap:6px;margin-bottom:8px}
  html[data-hosiq-density="compact"] #appView .top h1{font-size:24px}
  html[data-hosiq-density="compact"] #appView :where(.grid,.fields,.registration-fields,.workspace-hub){gap:4px}
  html[data-hosiq-density="compact"] #appView :where(.card,.workspace-hub .hub-card){padding:8px;border-radius:8px}
  html[data-hosiq-density="compact"] #appView :is(.card[style*="margin-top:14px"],.card[style*="margin-top:12px"],.card[style*="margin-top: 14px"],.card[style*="margin-top: 12px"]){margin-top:6px!important}
  html[data-hosiq-density="compact"] #appView .section{margin-top:6px}
  html[data-hosiq-density="compact"] #appView .section-head{gap:4px;margin-bottom:4px}
  html[data-hosiq-density="compact"] #appView .section-head h2{font-size:18px}
  html[data-hosiq-density="compact"] #appView .card h3{font-size:15px}
  html[data-hosiq-density="compact"] #appView .metric b{font-size:24px;margin-top:2px}
  html[data-hosiq-density="compact"] #appView .field label{font-size:11px;letter-spacing:.025em;line-height:1.15;margin-bottom:2px}
  html[data-hosiq-density="compact"] #appView :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="image"]),select,textarea){padding:3px 6px!important;line-height:1.2;min-height:26px;border-radius:5px}
  html[data-hosiq-density="compact"] #appView :where(.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),.field select,.field textarea){font-size:14px}
  html[data-hosiq-density="compact"] #appView textarea{min-height:56px;line-height:1.25}
  html[data-hosiq-density="compact"] #appView :is(button.primary,button.secondary,button.danger){padding:2px 6px!important;min-height:24px!important;font-size:13px;line-height:1.15;border-radius:5px}
  html[data-hosiq-density="compact"] #appView .actions{gap:3px!important;margin-top:4px}
  html[data-hosiq-density="compact"] #appView :is(.ref-admin-row-actions,.master-row-actions,.supply-mini-actions){gap:3px!important}
  html[data-hosiq-density="compact"] #appView :where(.table th,.table td,.hub-table th,.hub-table td){padding:2px 5px;line-height:1.15}
  html[data-hosiq-density="compact"] #appView .status{padding:3px 6px;margin-top:4px;line-height:1.2}
  html[data-hosiq-density="compact"] #appView :where(.badge,.pill){padding:1px 4px;line-height:1.15}
  html[data-hosiq-density="compact"] #appView .frozen-patient-strip{padding:4px 6px;gap:4px;margin-bottom:6px!important}
  html[data-hosiq-density="compact"] .hosiq-ui-density-options button{min-height:24px;padding:2px 5px;font-size:12px}
  html[data-hosiq-density="compact"] #appView :where(.small,.context,.table,.hub-table){line-height:1.2}
  html[data-hosiq-density="compact"] #appView :is([role="tab"],.tabs>button,.inventory-tabs>button,.ot-workspace-tab,.master-tab,.discharge-standard-tabs>button,.service-cat,.service-subcategory-tabs>button){min-height:24px!important;padding:2px 6px!important;font-size:12px;line-height:1.15;border-radius:5px;gap:4px}
  html[data-hosiq-density="compact"] #appView :is([role="tablist"],.discharge-standard-tabs,.service-category-tabs,.service-subcategory-tabs){gap:2px;padding:2px;margin-bottom:6px}
  html[data-hosiq-density="compact"] #appView :is(.rx-step-number,.master-tab-icon){width:20px;height:20px;flex-basis:20px;font-size:11px}
  html[data-hosiq-density="compact"] #appView .rx-step-copy b{font-size:13px;line-height:1.15}
  html[data-hosiq-density="compact"] #appView .rx-step-copy small{font-size:11px;line-height:1.15}
}
@media screen and (min-width:1051px){html[data-hosiq-density="compact"] .shell{grid-template-columns:220px minmax(0,1fr)}}
@media screen and (max-width:1050px){.hosiq-ui-density{max-width:260px}}
@media screen and (max-width:600px){html[data-hosiq-density="compact"] .main{padding:12px 10px 40px}}
/* Keep comfortable touch targets and avoid mobile input zoom in compact mode. */
@media screen and (pointer:coarse),screen and (max-width:600px){
  .hosiq-ui-density-options button{min-height:44px}
  html[data-hosiq-density="compact"] .hosiq-ui-density-options button{min-height:40px}
  html[data-hosiq-density="compact"] #appView :is(button.primary,button.secondary,button.danger,[role="tab"],.tabs>button,.inventory-tabs>button,.ot-workspace-tab,.master-tab,.discharge-standard-tabs>button,.service-cat,.service-subcategory-tabs>button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="image"]),select){min-height:40px!important}
  html[data-hosiq-density="compact"] #appView :where(input,select,textarea){font-size:16px}
  html[data-hosiq-density="compact"] .nav button,html[data-hosiq-density="compact"] .hosiq-logout-slot #logoutBtn{min-height:40px}
}
/* OT navigation stays prominent in both display densities, including the dynamic Implants tab. */
@media screen {
  #appView #otWorkspaceTabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:10px;margin:10px 0 14px;border:1px solid #b49bd6;border-top:4px solid #68439b;border-radius:10px;background:#f0eaff;box-shadow:0 2px 6px #4c2a8514}
  #appView #otWorkspaceTabs .ot-workspace-tab{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px!important;padding:10px 12px!important;border:2px solid #a78ac9;border-radius:7px;background:#fff;color:#3f2868;font-size:14px;font-weight:800;line-height:1.25;text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
  #appView #otWorkspaceTabs .ot-workspace-tab:not(.active):not([aria-selected="true"]):not(:disabled):hover{background:#e4d8f7;border-color:#68439b}
  #appView #otWorkspaceTabs .ot-workspace-tab.active,#appView #otWorkspaceTabs .ot-workspace-tab[aria-selected="true"]{background:#4c2a85;color:#fff;border-color:#4c2a85;box-shadow:inset 0 -3px 0 #c4aff0}
  #appView #otWorkspaceTabs .ot-workspace-tab:focus-visible{outline:3px solid #0876a0;outline-offset:2px}
  #appView #otWorkspaceTabs .ot-workspace-tab:disabled{opacity:.6;cursor:not-allowed}
}
@media screen and (max-width:1200px){#appView #otWorkspaceTabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:600px){#appView #otWorkspaceTabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}}
@media print{.hosiq-ui-density{display:none!important}}