/* 0 · Fonts */
@font-face {
  font-family: "Lexend";
  src: url("Lexend/Lexend-VariableFont_wght.ttf") format("truetype-variations"),
       url("Lexend/Lexend-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 0 · Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Thin scrollbars everywhere (views that hide scrollbars override with scrollbar-width: none) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-muted) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--gray-muted);
  border-radius: var(--radius-pill);
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 1 · Primitives */
:root {
  /* Value */
  /* color */
  --base-white: #ffffff;
  --blue-highlight: #cedef1;
  --blue-primary: #0a5bb8;
  --blue-sky: #4095f6;
  --gray-background: #f6f7f8;
  --gray-border: #e1e4e8;
  --gray-muted: #a0a0a0;
  --gray-row-alt: #f1f5f8;
  --gray-text: #383838;
  --green-action: #2eab1a;
  --green-highlight: #e5f7da;
  --green-hover: #249413;
  --green-status: #56d741;
  --orange-amber: #faa500;
  --orange-status: #fdba74;
  --red-alert: #de0106;
  --red-highlight: #fce6e6;
  --red-status: #f87171;
  --yellow-highlight: #fff6e5;
  --yellow-status: #fde047;
}
/* 2 · Tokens */
:root {
  /* Value */
  /* color */
  --action-primary: var(--green-action);
  --action-primary-hover: var(--green-hover);
  --action-secondary: var(--blue-primary);
  --border-default: var(--gray-border);
  --brand-primary: var(--blue-primary);
  --brand-sky: var(--blue-sky);
  --feedback-error: var(--red-alert);
  --feedback-success: var(--green-action);
  --feedback-warning: var(--orange-amber);
  --highlight-blue: var(--blue-highlight);
  --highlight-gray: var(--gray-row-alt);
  --highlight-green: var(--green-highlight);
  --highlight-red: var(--red-highlight);
  --highlight-yellow: var(--yellow-highlight);
  --status-blue: var(--blue-sky);
  --status-green: var(--green-status);
  --status-orange: var(--orange-status);
  --status-red: var(--red-status);
  --status-yellow: var(--yellow-status);
  --surface-card: var(--base-white);
  --surface-page: var(--gray-background);
  --surface-row-alt: var(--gray-row-alt);
  --surface-row-hover: var(--green-highlight);
  --text-default: var(--gray-text);
  --text-link: var(--blue-primary);
  --text-muted: var(--gray-muted);
  --text-white: var(--base-white);
  --surface-disabled: var(--gray-background);
  /* focus / error rings for form fields (see "Common form-field states") */
  --focus-border: var(--blue-sky);
  --focus-ring: 0 0 0 1px var(--blue-sky);
  --error-ring: 0 0 0 1px var(--red-alert);
  /* font */
  --font-base: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* 3 · Scale */
:root {
  /* Value */
  /* number */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 20px;
  --space-3xl: 24px;
}
/* 4 · Icons (CSS mask — color follows currentColor, size follows font-size/em) */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.icon-search {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/></svg>");
}

.icon-calendar {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/></svg>");
}

.icon-users {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z'/></svg>");
}

.icon-user-plus {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M720-400v-120H600v-80h120v-120h80v120h120v80H800v120h-80Zm-360-80q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z'/></svg>");
}

.icon-send {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z'/></svg>");
}

.icon-link {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z'/></svg>");
}

.icon-calendar-off {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m388-212-56-56 92-92-92-92 56-56 92 92 92-92 56 56-92 92 92 92-56 56-92-92-92 92ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z'/></svg>");
}

.icon-phone {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z'/></svg>");
}

.icon-home {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z'/></svg>");
}

.icon-user {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z'/></svg>");
}

/* Messages (bottom navigation) - outline envelope; color follows currentColor like every .icon */
.icon-messages {
  --icon: url("data:image/svg+xml,<svg width='20' height='16' viewBox='0 0 20 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M19.4629 1.67383C19.4865 1.77901 19.5 1.88803 19.5 2V14C19.5 14.8239 18.8239 15.5 18 15.5H2C1.17614 15.5 0.5 14.8239 0.5 14V2C0.5 1.88811 0.512512 1.77895 0.536133 1.67383L1.73535 2.42383L9.73535 7.42383L10 7.58984L10.2646 7.42383L18.2646 2.42383L19.4629 1.67383ZM17.7354 3.57617L10 8.41016L2.26465 3.57617L1.5 3.09766V14.5H18.5V3.09766L17.7354 3.57617ZM2 0.5H18C18.6487 0.5 19.2045 0.919607 19.4121 1.5H0.587891C0.795486 0.919607 1.35133 0.5 2 0.5Z' stroke='black'/></svg>");
}

.icon-inbox {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-120H640q-30 38-71.5 59T480-240q-47 0-88.5-21T320-320H200v120Zm280-120q38 0 69-22t43-58h168v-360H200v360h168q12 36 43 58t69 22ZM200-200h560-560Z'/></svg>");
}

.icon-more {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z'/></svg>");
}

/* Logout (More page Sign out) - color follows currentColor like every .icon */
.icon-logout {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z'/></svg>");
}

.icon-chevron-left {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z'/></svg>");
}

.icon-chevron-right {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
}

.icon-plus {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z'/></svg>");
}

.icon-coffee {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M160-120v-80h640v80H160Zm160-160q-66 0-113-47t-47-113v-400h640q33 0 56.5 23.5T880-760v120q0 33-23.5 56.5T800-560h-80v120q0 66-47 113t-113 47H320Zm0-80h240q33 0 56.5-23.5T640-440v-320H240v320q0 33 23.5 56.5T320-360Zm400-280h80v-120h-80v120ZM320-360h-80 400-320Z'/></svg>");
}

.icon-lock {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM490-80H240q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v52q-18-6-37.5-9t-42.5-3v-40H240v400h212q8 24 16 41.5T490-80Zm230 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm66-106 28-28-74-74v-112h-40v128l86 86ZM240-560v400-400Z'/></svg>");
}

.icon-calendar-plus {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80Zm-480-80q-33 0-56.5-23.5T120-240v-480q0-33 23.5-56.5T200-800h40v-80h80v80h240v-80h80v80h40q33 0 56.5 23.5T760-720v244q-20-3-40-3t-40 3v-84H200v320h280q0 20 3 40t11 40H200Zm0-480h480v-80H200v80Zm0 0v-80 80Z'/></svg>");
}

.icon-x {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/></svg>");
}

.icon-down-arrow {
  --icon: url('data:image/svg+xml,<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.75 0.75L5.25 5.25L9.75 0.75" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-color: var(--text-muted);
}
.icon-up-arrow {
  --icon: url('data:image/svg+xml,<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.75 5.25L5.25 0.75L9.75 5.25" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-color: var(--text-muted);
}

.icon-left-arrow {
  --icon: url('data:image/svg+xml,<svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.4165 0.916626L0.916504 6.41663L6.4165 11.9166" stroke="white" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

.icon-profile {
  --icon: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.87868 7.37132C6.31607 6.80871 6 6.04565 6 5.25C6 4.45435 6.31607 3.69129 6.87868 3.12868C7.44129 2.56607 8.20435 2.25 9 2.25C9.79565 2.25 10.5587 2.56607 11.1213 3.12868C11.6839 3.69129 12 4.45435 12 5.25C12 6.04565 11.6839 6.80871 11.1213 7.37132C10.5587 7.93393 9.79565 8.25 9 8.25C8.20435 8.25 7.44129 7.93393 6.87868 7.37132Z" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 15.75V14.25C4.5 13.4544 4.81607 12.6913 5.37868 12.1287C5.94129 11.5661 6.70435 11.25 7.5 11.25H10.5C11.2956 11.25 12.0587 11.5661 12.6213 12.1287C13.1839 12.6913 13.5 13.4544 13.5 14.25V15.75" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-clock {
  --icon: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.76381 11.5831C2.42459 10.7642 2.25 9.88642 2.25 9C2.25 8.11358 2.42459 7.23583 2.76381 6.41689C3.10303 5.59794 3.60023 4.85382 4.22703 4.22703C4.85382 3.60023 5.59794 3.10303 6.41689 2.76381C7.23583 2.42459 8.11358 2.25 9 2.25C9.88642 2.25 10.7642 2.42459 11.5831 2.76381C12.4021 3.10303 13.1462 3.60023 13.773 4.22703C14.3998 4.85382 14.897 5.59794 15.2362 6.41689C15.5754 7.23583 15.75 8.11358 15.75 9C15.75 9.88642 15.5754 10.7642 15.2362 11.5831C14.897 12.4021 14.3998 13.1462 13.773 13.773C13.1462 14.3998 12.4021 14.897 11.5831 15.2362C10.7642 15.5754 9.88642 15.75 9 15.75C8.11358 15.75 7.23583 15.5754 6.41689 15.2362C5.59794 14.897 4.85382 14.3998 4.22703 13.773C3.60023 13.1462 3.10303 12.4021 2.76381 11.5831Z" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 5.25V9L11.25 11.25" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-badge-users {
  --icon: url('data:image/svg+xml,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.35095 4.94067C5.0462 4.63593 4.875 4.2226 4.875 3.79163C4.875 3.36065 5.0462 2.94732 5.35095 2.64258C5.6557 2.33783 6.06902 2.16663 6.5 2.16663C6.93098 2.16663 7.3443 2.33783 7.64905 2.64258C7.9538 2.94732 8.125 3.36065 8.125 3.79163C8.125 4.2226 7.9538 4.63593 7.64905 4.94067C7.3443 5.24542 6.93098 5.41663 6.5 5.41663C6.06902 5.41663 5.6557 5.24542 5.35095 4.94067Z" stroke="%230A5BB8" stroke-width="1.08333" stroke-linecap="round" stroke-linejoin="round"/><path d="M1.625 11.375V10.2917C1.625 9.71703 1.85327 9.16593 2.2596 8.7596C2.66593 8.35327 3.21703 8.125 3.79167 8.125H5.95833C6.53297 8.125 7.08407 8.35327 7.4904 8.7596C7.89673 9.16593 8.125 9.71703 8.125 10.2917V11.375" stroke="%230A5BB8" stroke-width="1.08333" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.6665 1.69543C9.13256 1.81476 9.54565 2.08581 9.84064 2.46585C10.1356 2.84589 10.2958 3.3133 10.2958 3.79439C10.2958 4.27549 10.1356 4.74289 9.84064 5.12293C9.54565 5.50297 9.13256 5.77402 8.6665 5.89335" stroke="%230A5BB8" stroke-width="1.08333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-eye {
  --icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.6665 7.99996C6.6665 8.35358 6.80698 8.69272 7.05703 8.94277C7.30708 9.19282 7.64622 9.33329 7.99984 9.33329C8.35346 9.33329 8.6926 9.19282 8.94265 8.94277C9.19269 8.69272 9.33317 8.35358 9.33317 7.99996C9.33317 7.64634 9.19269 7.3072 8.94265 7.05715C8.6926 6.8071 8.35346 6.66663 7.99984 6.66663C7.64622 6.66663 7.30708 6.8071 7.05703 7.05715C6.80698 7.3072 6.6665 7.64634 6.6665 7.99996Z" stroke="%230A5BB8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 8C12.4 10.6667 10.4 12 8 12C5.6 12 3.6 10.6667 2 8C3.6 5.33333 5.6 4 8 4C10.4 4 12.4 5.33333 14 8Z" stroke="%230A5BB8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-plus-user {
  --icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_54_883)"><path d="M6.11454 6.55229C5.61445 6.05219 5.3335 5.37391 5.3335 4.66667C5.3335 3.95942 5.61445 3.28115 6.11454 2.78105C6.61464 2.28095 7.29292 2 8.00016 2C8.70741 2 9.38568 2.28095 9.88578 2.78105C10.3859 3.28115 10.6668 3.95942 10.6668 4.66667C10.6668 5.37391 10.3859 6.05219 9.88578 6.55229C9.38568 7.05238 8.70741 7.33333 8.00016 7.33333C7.29292 7.33333 6.61464 7.05238 6.11454 6.55229Z" stroke="%230A5BB8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 14V12.6667C4 11.9594 4.28095 11.2811 4.78105 10.781C5.28115 10.281 5.95942 10 6.66667 10H10" stroke="%230A5BB8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.6665 10.6666V14.6666" stroke="%230A5BB8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.6665 12.6666H10.6665" stroke="%230A5BB8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_54_883"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>')
}
.icon-close {
  --icon: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 4.5L4.5 13.5" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 4.5L13.5 13.5" stroke="%23A0A0A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}
.dropdown-icon-close {
  --icon: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.9502 4.94995L13.0502 13.05M13.0502 4.94995L4.9502 13.05" stroke="%235B6B7B" stroke-width="1.8" stroke-linecap="round"/></svg>');
}
.icon-primary-tick {
  --icon: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 9L7.5 12.75L14.25 4.5" stroke="%230A5BB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-color: var(--blue-primary);
}
.icon-trash{
    --icon: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.33337 7.58325H21.6667" stroke="%23DE0106" stroke-width="1.84167" stroke-linecap="round"/><path d="M9.75 7.58325V6.06659C9.75 5.60688 9.93262 5.166 10.2577 4.84093C10.5827 4.51587 11.0236 4.33325 11.4833 4.33325H14.5167C14.9764 4.33325 15.4173 4.51587 15.7423 4.84093C16.0674 5.166 16.25 5.60688 16.25 6.06659V7.58325" stroke="%23DE0106" stroke-width="1.84167"/><path d="M7.15002 7.58325L8.12502 20.1499C8.15284 20.7056 8.39334 21.2292 8.79669 21.6124C9.20004 21.9956 9.73534 22.2089 10.2917 22.2083H15.7084C16.2647 22.2089 16.8 21.9956 17.2034 21.6124C17.6067 21.2292 17.8472 20.7056 17.875 20.1499L18.85 7.58325" stroke="%23DE0106" stroke-width="1.84167" stroke-linejoin="round"/><path d="M10.8334 11.375V17.875M15.1667 11.375V17.875" stroke="%23DE0106" stroke-width="1.84167" stroke-linecap="round"/></svg>');
    background-color: var(--red-alert, #D93025);
    width:26px;
    height:26px;
}
.icon-scanned-documents{
  --icon: url('data:image/svg+xml,<svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.833 0.5V7.16699H14.167C15.274 7.16717 16.167 8.05991 16.167 9.16699V12.833H0.5V9.16699C0.5 8.0598 1.39281 7.16699 2.5 7.16699H3.83301V0.5H12.833ZM2.5 7.83301C1.76552 7.83301 1.16699 8.43252 1.16699 9.16699V12.167H15.5V9.16699C15.5 8.43263 14.9013 7.83318 14.167 7.83301H2.5ZM13.333 9.66699C13.5171 9.66699 13.667 9.81591 13.667 10C13.667 10.1841 13.5171 10.333 13.333 10.333C13.1491 10.3328 13 10.184 13 10C13 9.81601 13.1491 9.66717 13.333 9.66699ZM4.5 7.16699H12.167V1.16699H4.5V7.16699Z" stroke="%230A5BB8"/></svg>');
}
.icon-incoming-faxes{
  --icon: url('data:image/svg+xml,<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.833 0.5V4.66699H14.167C15.274 4.66717 16.167 5.55991 16.167 6.66699V12.833H4.12793L3.97852 12.998C3.60737 13.4097 3.08908 13.667 2.5 13.667C1.39292 13.667 0.500175 12.774 0.5 11.667V5.83301C0.500175 4.72597 1.39292 3.83301 2.5 3.83301C3.08908 3.83301 3.60737 4.09031 3.97852 4.50195L4.12793 4.66699H5.5V0.5H12.833ZM2.5 4.5C1.76563 4.5 1.16717 5.09868 1.16699 5.83301V11.667C1.16717 12.4013 1.76563 13 2.5 13C3.23437 13 3.83283 12.4013 3.83301 11.667V5.83301C3.83283 5.09868 3.23437 4.5 2.5 4.5ZM4.5 12.167H15.5V6.66699C15.5 5.93263 14.9013 5.33318 14.167 5.33301H4.5V12.167ZM10.833 9.66699C11.0171 9.66699 11.167 9.81591 11.167 10C11.167 10.1841 11.0171 10.333 10.833 10.333C10.6491 10.3328 10.5 10.184 10.5 10C10.5 9.81601 10.6491 9.66717 10.833 9.66699ZM13.333 9.66699C13.5171 9.66699 13.667 9.81591 13.667 10C13.667 10.1841 13.5171 10.333 13.333 10.333C13.1491 10.3328 13 10.184 13 10C13 9.81601 13.1491 9.66717 13.333 9.66699ZM8.66699 7.16699V10.333H6.33301V7.16699H8.66699ZM10.833 7.16699C11.0171 7.16699 11.167 7.31591 11.167 7.5C11.167 7.68409 11.0171 7.83301 10.833 7.83301C10.6491 7.83283 10.5 7.68399 10.5 7.5C10.5 7.31601 10.6491 7.16717 10.833 7.16699ZM13.333 7.16699C13.5171 7.16699 13.667 7.31591 13.667 7.5C13.667 7.68409 13.5171 7.83301 13.333 7.83301C13.1491 7.83283 13 7.68399 13 7.5C13 7.31601 13.1491 7.16717 13.333 7.16699ZM6.16699 4.66699H12.167V1.16699H6.16699V4.66699Z" stroke="%230A5BB8"/></svg>');
}
.icon-sticky-notes{
  --icon: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.66699 0.5H13.333C13.9735 0.5 14.5 1.02647 14.5 1.66699V9.79297L9.79297 14.5H1.66699C1.02647 14.5 0.5 13.9735 0.5 13.333V1.66699C0.5 1.02647 1.02647 0.5 1.66699 0.5ZM1.16699 13.833H9.66699V9.66699H13.833V1.16699H1.16699V13.833ZM7 8V8.66699H3.83301V8H7ZM11.167 4.66699V5.33301H3.83301V4.66699H11.167Z" stroke="%230A5BB8"/></svg>');
}
.icon-document{
  --icon: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.91663 2.125V4.95833C9.91663 5.14619 9.99125 5.32636 10.1241 5.4592C10.2569 5.59204 10.4371 5.66667 10.625 5.66667H13.4583" stroke="%230A5BB8" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.0416 14.875H4.95829C4.58257 14.875 4.22223 14.7257 3.95656 14.4601C3.69088 14.1944 3.54163 13.8341 3.54163 13.4583V3.54167C3.54163 3.16594 3.69088 2.80561 3.95656 2.53993C4.22223 2.27426 4.58257 2.125 4.95829 2.125H9.91663L13.4583 5.66667V13.4583C13.4583 13.8341 13.309 14.1944 13.0434 14.4601C12.7777 14.7257 12.4173 14.875 12.0416 14.875Z" stroke="%230A5BB8" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.375 9.20825H10.625" stroke="%230A5BB8" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.375 12.0417H9.20833" stroke="%230A5BB8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-color: var(--blue-primary);
}
.icon-filter{
  --icon: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.83337 2.83325H14.1667V4.37175C14.1666 4.74744 14.0173 5.10772 13.7516 5.37334L10.625 8.49992V13.4583L6.37504 14.8749V8.85409L3.20171 5.36342C2.96473 5.1027 2.83341 4.76303 2.83337 4.41071V2.87221V2.83325Z" stroke="%23A0A0A0" stroke-width="1.41667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-color: var(--text-muted);
}
.icon-print{
  --icon: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.75 12.75H14.25C14.6478 12.75 15.0294 12.592 15.3107 12.3107C15.592 12.0294 15.75 11.6478 15.75 11.25V8.25C15.75 7.85218 15.592 7.47064 15.3107 7.18934C15.0294 6.90804 14.6478 6.75 14.25 6.75H3.75C3.35218 6.75 2.97064 6.90804 2.68934 7.18934C2.40804 7.47064 2.25 7.85218 2.25 8.25V11.25C2.25 11.6478 2.40804 12.0294 2.68934 12.3107C2.97064 12.592 3.35218 12.75 3.75 12.75H5.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 6.75V3.75C12.75 3.35218 12.592 2.97064 12.3107 2.68934C12.0294 2.40804 11.6478 2.25 11.25 2.25H6.75C6.35218 2.25 5.97064 2.40804 5.68934 2.68934C5.40804 2.97064 5.25 3.35218 5.25 3.75V6.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.25 11.25C5.25 10.8522 5.40804 10.4706 5.68934 10.1893C5.97064 9.90804 6.35218 9.75 6.75 9.75H11.25C11.6478 9.75 12.0294 9.90804 12.3107 10.1893C12.592 10.4706 12.75 10.8522 12.75 11.25V14.25C12.75 14.6478 12.592 15.0294 12.3107 15.3107C12.0294 15.592 11.6478 15.75 11.25 15.75H6.75C6.35218 15.75 5.97064 15.592 5.68934 15.3107C5.40804 15.0294 5.25 14.6478 5.25 14.25V11.25Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-fax{
  --icon: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 5.25V3H12.75V5.25" stroke="%230A5BB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.75 9C6.75 8.80109 6.82902 8.61032 6.96967 8.46967C7.11032 8.32902 7.30109 8.25 7.5 8.25H10.5C10.6989 8.25 10.8897 8.32902 11.0303 8.46967C11.171 8.61032 11.25 8.80109 11.25 9V15C11.25 15.1989 11.171 15.3897 11.0303 15.5303C10.8897 15.671 10.6989 15.75 10.5 15.75H7.5C7.30109 15.75 7.11032 15.671 6.96967 15.5303C6.82902 15.3897 6.75 15.1989 6.75 15V9Z" stroke="%230A5BB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.75 9.75H3.75C3.35218 9.75 2.97064 9.59196 2.68934 9.31066C2.40804 9.02936 2.25 8.64782 2.25 8.25V6C2.25 5.60218 2.40804 5.22064 2.68934 4.93934C2.97064 4.65804 3.35218 4.5 3.75 4.5H12.75C13.1478 4.5 13.5294 4.65804 13.8107 4.93934C14.092 5.22064 14.25 5.60218 14.25 6V8.25C14.25 8.64782 14.092 9.02936 13.8107 9.31066C13.5294 9.59196 13.1478 9.75 12.75 9.75H12" stroke="%230A5BB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-edit{
  --icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 20H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.5 3.50023C16.8978 3.1024 17.4374 2.87891 18 2.87891C18.2786 2.87891 18.5544 2.93378 18.8118 3.04038C19.0692 3.14699 19.303 3.30324 19.5 3.50023C19.697 3.69721 19.8532 3.93106 19.9598 4.18843C20.0665 4.4458 20.1213 4.72165 20.1213 5.00023C20.1213 5.2788 20.0665 5.55465 19.9598 5.81202C19.8532 6.06939 19.697 6.30324 19.5 6.50023L7 19.0002L3 20.0002L4 16.0002L16.5 3.50023Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-zoom-in{
  --icon: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.75004 14.1668C11.7416 14.1668 14.1667 11.7417 14.1667 8.75016C14.1667 5.75862 11.7416 3.3335 8.75004 3.3335C5.7585 3.3335 3.33337 5.75862 3.33337 8.75016C3.33337 11.7417 5.7585 14.1668 8.75004 14.1668Z" stroke="%233A4654" stroke-width="1.7"/><path d="M12.9166 12.9165L16.6666 16.6665" stroke="%233A4654" stroke-width="1.7" stroke-linecap="round"/><path d="M6.41663 8.75H11.0833" stroke="%233A4654" stroke-width="1.7" stroke-linecap="round"/></svg>')
}
.icon-zoom-out{
  --icon: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.75004 14.1668C11.7416 14.1668 14.1667 11.7417 14.1667 8.75016C14.1667 5.75862 11.7416 3.3335 8.75004 3.3335C5.7585 3.3335 3.33337 5.75862 3.33337 8.75016C3.33337 11.7417 5.7585 14.1668 8.75004 14.1668Z" stroke="%233A4654" stroke-width="1.7"/><path d="M12.9166 12.9165L16.6666 16.6665" stroke="%233A4654" stroke-width="1.7" stroke-linecap="round"/><path d="M8.74996 6.4165V11.0832M6.41663 8.74984H11.0833" stroke="%233A4654" stroke-width="1.7" stroke-linecap="round"/></svg>');
}
.icon-download{
  --icon: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3.3335V11.2502M6.83337 8.5835L10 11.7502L13.1667 8.5835" stroke="%233A4654" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.16663 15.4165H15.8333" stroke="%233A4654" stroke-width="1.7" stroke-linecap="round"/></svg>');
}




/* Common Button */
.bttn {
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm); /* icon + label spacing - don't add margins to icons inside buttons */
    padding: 7px 14px;
    font-family: Lexend;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Primary */
.bttn-primary {
    color: var(--text-white, #FFF);
    border-radius: var(--radius-md, 8px);
    background: var(--color-green, #2EAB1A);
}
.bttn-primary.outline {
    color: var(--color-green, #2EAB1A);
    border-radius: var(--radius-md, 8px);
    border:1px solid var(--color-green, #2EAB1A);
    background: var(--surface-card, #FFF);
}

/* Secondary */
.bttn-secondary{
  color: var(--base-white, #FFFFFF);
  border-radius: var(--radius-md, 8px);
  background: var(--blue-primary, #0A5BB8);
}

.bttn-secondary.outline {
  color: var(--blue-primary, #0A5BB8);
  border: 1px solid var(--blue-primary, #0A5BB8);
  background: var(--surface-card, #FFF);
}

/* Disabled */
.bttn-disabled {
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--stroke-color, #E1E4E8);
    background: var(--surface-card, #FFF);
    color: var(--text-muted, #A0A0A0);
}

/* Button Danger */
.bttn-danger {
    color: var(--red-alert, #D93025);
    border: 1px solid var(--red-alert, #D93025);
    border-radius: var(--radius-md, 8px);
}
    
/* Button Group */
.bttn-group {
    padding: 16px;
    background: #FFF;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #E5E5E5;
}

.pwa-footer {
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    gap: var(--space-lg);
    background: var(--surface-card);
    border-top: 1px solid var(--border-default);
}

.pwa-footer .bttn {
    flex: 1;
}

/* Stacked footer: full-width buttons one above the other */
.pwa-footer--stack {
    flex-direction: column;
    gap: var(--space-md);
}

/* Common page shell (.pwa-home is declared further down with .inbox-home / .index-document-home). */

/* App bar - the single header used by every screen. Do not restyle it inside views.
   Markup: <header class="pwa-appbar">
             <div class="pwa-appbar__title" ng-click="..."><i class="icon icon-left-arrow"></i> Title</div>
             <div class="pwa-appbar__action" ng-click="...">...</div>   (optional, sits on the right)
           </header> */
.pwa-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 var(--space-xl);
    background: var(--brand-primary);
    color: var(--text-white);
    font-size: 15px;
    font-weight: 500;
}

/* Keeps the bar pinned while the page itself scrolls (screens without an inner .pwa-content scroller) */
.pwa-appbar--sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}

.pwa-appbar__title {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex: 1;
    min-width: 0;
    color: var(--text-white);
    font-size: 15px;
    font-weight: 500;
}

/* Back arrow is always <i class="icon icon-left-arrow"> - no inline SVG arrows */
.pwa-appbar .icon {
    flex-shrink: 0;
}

.pwa-appbar [ng-click] {
    cursor: pointer;
}

.pwa-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.pwa-actions--horizontal .bttn {
    flex: 1;
}

/* Common form field (label above control) */
.pwa-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.pwa-field__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-default);
}

.pwa-dropdown-text {
    font-weight: 400;
    font-size: 13px;
    color: var(--gray-text);
}

/* Home-style bottom navigation */
.hs-bottomnav {
    flex-shrink: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: var(--space-sm) 0;
    background: var(--surface-card);
    border-top: 1px solid var(--border-default);
}

.hs-navitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 11px;
    color: var(--text-muted);
}

.hs-navitem--active {
    color: var(--action-primary);
}

.hs-navitem .icon {
    font-size: 20px;
}

/* Logout power-switch glyph - same brankic-switch2 icon used in EMR_Mobile (only this glyph is registered here) */
@font-face {
    font-family: "brankic";
    src: url("../../fonts/brankic.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.pwa-appbar__logout:before {
    content: "\e75c";
    font-family: "brankic";
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 1;
    color: #fff;
}

/* App-bar icon button (28px) */
.pwa-appbar__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

/* Date navigator: "< date >" + Today link */
.pwa-date-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pwa-date-nav__controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-default);
}

.pwa-date-nav__today {
    color: var(--text-link);
    font-size: 13px;
    font-weight: 500;
}

/* Muted count / caption text (e.g. "12 appointments") */
.pwa-count-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* Filter chip (pill). Active state stays in the view: .filter-chip--active is toggled via ng-class */
.filter-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 43px;
    min-height: 29px;
    padding: 0 var(--space-lg);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    transition: .2s;
}

/* Text-only cancel button - use together with .bttn */
.cancel-link {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    cursor: pointer;
}

/* Loading skeleton placeholders */
.pwa-skeleton-line {
    flex-shrink: 0;
    height: 16px;
    border-radius: var(--radius-sm);
    background: var(--gray-row-alt);
}

.pwa-skeleton-block {
    flex-shrink: 0;
    height: 90px;
    border-radius: var(--radius-sm);
    background: var(--gray-row-alt);
}

/* Success / confirmation screen (icon, heading, message, key-value detail rows, actions).
   Rows expect two <span>s: label (first) and value (last). */
.pwa-success {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-row-alt);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.pwa-success__content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pwa-success__card {
    width: 100%;
    max-width: none !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 40px 24px;
}

.pwa-success__icon-wrap {
    display: flex;
    justify-content: center;
}

.pwa-success__icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--green-action);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 6px 16px 0px rgba(46, 171, 26, 0.4);
}

.pwa-success__heading {
    text-align: center;
    font-family: Lexend;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--gray-text);
}

.pwa-success__message {
    font-family: Lexend;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--gray-muted);
}

.pwa-success__details {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 0px 14px;
    background-color: var(--base-white);
}

.pwa-success__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0px;
    gap: 20px;
}

.pwa-success__row:last-child::after {
    display: none;
}

.pwa-success__row:last-child {
    border-bottom: none;
}

.pwa-success__row span:first-child {
    color: var(--text-muted);
    font-size: 14px;
}

.pwa-success__row span:last-child {
    color: var(--text-default);
    font-size: 12px;
    
    text-align: right;
}

.pwa-success__actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.document_card{
  display: flex;
  padding: var(--space-lg);
  gap: var(--space-lg);
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-default, #E1E4E8);
  background: var(--surface-card, #FFF);
}

.client_card{
  display: flex;
  padding: var(--space-md) var(--space-lg);
  gap: var(--space-lg);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-default, #E1E4E8);
  background: var(--surface-card, #FFF);
}

.card-left-block{
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  h2{
    color: var(--text-default, #383838);
    font-size: 13px;
    font-weight: 400;
  }
  span{
    color: var(--text-muted, #A0A0A0);
    font-size: 11px;
    font-weight: 400;
  }
}
.card-right-block{
  display: flex;
  gap: 8px;
  align-items: center;
}

.inbox-cards-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.inbox-card{
  display: flex;
  padding: var(--space-lg);
  gap: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default, #E1E4E8);
  background: var(--surface-card, #FFF);
  align-items: flex-start;
  .middle-block{
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    h2{
      color: var(--text-default, #383838);
      font-size: 14px;
      font-weight: 400;
    }
    span{
      color: var(--text-muted, #A0A0A0);
      font-size: 12px;
      font-weight: 400;
    }
    span:nth-child(2){
      color: var(--text-muted, #A0A0A0);
      font-size: 10px;
      font-weight: 400;
    }
  }
  .right-block{
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.badge{
  display: flex;
  padding: 3px 7px;
  align-items: flex-start;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.badge-success{
  border-radius: 3px;
  background: var(--highlight-green, #E5F7DA);
  color: var(--color-green, #2EAB1A);
  font-family: Lexend;
}
.badge-secondary{
  border-radius: 3px;
  background: var(--surface-row-alt, #F1F5F8);
  color: var(--text-muted, #A0A0A0);
  font-family: Lexend;
}

.badge-primary{
  border-radius: 3px;
  background: var(--highlight-blue, #CEDEF1);
  color: var(--blue-primary, #0A5BB8);
}

.badge-warning{
  border-radius: 3px;
  background: var(--yellow-highlight, #fff6e5);
  color: var(--orange-amber, #faa500);
}



.emr-date-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

/* =====================================================================================
   Form controls - the single source for every field look. Views must not redeclare
   these; use the modifiers below. Focus / error / disabled states follow further down.

   Text input / native <select> . .pwa-field__input        (--sm = compact 40px / 13px)
   Custom select (opens a sheet)  .pwa-select               (--sm, --multi)
                                  > .pwa-select__value | .pwa-select__placeholder, .pwa-select__icon
   Textarea ..................... .pwa-textarea             (--sm = compact, --grow = fills the column)
   Search box ................... .pwa-search              > .pwa-search__icon, .pwa-search__input, .pwa-search__clear
                                  (.dropdown-search = same box inside bottom sheets)
   Icon inside a field .......... .pwa-field__icon-wrap    > control + .pwa-field__icon(--sm)
   ===================================================================================== */
.pwa-field__input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-lg);
  background: var(--surface-card);
  color: var(--text-default);
  font-size: 14px;
  font-weight: 400;
}

/* One placeholder colour for every field. :where() keeps it at zero specificity. */
:where(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Compact field (dense grids, filter rows) */
.pwa-field__input--sm {
  height: 40px;
  font-size: 13px;
}

/* Native time input: left-aligned value (iOS centres it), picker icon on the right */
input[type="time"].pwa-field__input {
  text-align: left;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  cursor: pointer;
}
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-clear-button {
  display: none;
}

/* Custom select trigger (a tappable row that opens a bottom sheet) */
.pwa-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  height: 44px;
  padding: 0 var(--space-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-default);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pwa-select__value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-default);
}

/* Hover sits before the focus/error states so those win over it */
.pwa-select:where(:not(.is-disabled, [aria-disabled="true"])):hover {
  border-color: var(--brand-sky);
  border-width:2px;
}
.pwa-select--sm {
  height: 40px;
  font-size: 13px;
}
/* Wraps chips onto several lines */
.pwa-select--multi {
  height: auto;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
}

/* Edit Demographics cards use the standard controls at the 13px card text size */
.edit-demographics-fields__card :is(.pwa-field__input, .pwa-select) {
  font-size: 13px;
}

/* Add Client / Edit Demographics: the "Link Additional Providers" box */
.add-client-fields__providers-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 12px 16px 14px;
  background-color: var(--base-white);
}
.add-client-fields__user-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.add-client-fields__add-provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--blue-highlight);
  color: var(--blue-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}
/* Common form-field states
   Normal / focus / error / disabled for every PWA control: .pwa-field__input, .pwa-select (custom
   select), native input / textarea / select, date + time fields, contenteditable. Pages must not
   restyle these states locally - change them here. Priority: disabled > error > focus.
   :where() keeps the generic selectors at zero specificity so the .pwa-field-error rules win. */
.pwa-field__input,
.pwa-select,
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="color"], [type="image"], [class*="search__input"])),
textarea,
select,
[contenteditable="true"] {
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Focus */
.pwa-field__input:focus-visible,
.pwa-select:focus-visible,
.pwa-select.is-open,
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="color"], [type="image"], [class*="search__input"])):focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}

/* Error - wrap the field in .pwa-field-error (or put it on the control itself) */
.pwa-field-error .pwa-field__input,
.pwa-field-error .pwa-select,
.pwa-field-error input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [class*="search__input"])),
.pwa-field-error textarea,
.pwa-field-error select,
.pwa-field-error [contenteditable="true"],
.pwa-field__input.pwa-field-error,
.pwa-select.pwa-field-error,
.emr-date-picker--invalid .pwa-field__input,
.pwa-field__input.emr-date-picker--invalid {
  border-color: var(--feedback-error);
}
/* error + focus: stay red, add the ring */
.pwa-field-error .pwa-field__input:focus-visible,
.pwa-field-error .pwa-select:focus-visible,
.pwa-field-error .pwa-select.is-open,
.pwa-field-error input:focus-visible,
.pwa-field-error textarea:focus-visible,
.pwa-field-error select:focus-visible,
.pwa-field-error [contenteditable="true"]:focus-visible,
.pwa-field__input.pwa-field-error:focus-visible,
.pwa-select.pwa-field-error:focus-visible,
.emr-date-picker--invalid .pwa-field__input:focus-visible,
.pwa-field__input.emr-date-picker--invalid:focus-visible {
  border-color: var(--feedback-error);
  box-shadow: var(--error-ring);
}
.pwa-field-error__message {
  margin-top: var(--space-xs);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--feedback-error);
}

/* Disabled - no hover/focus appearance */
.pwa-field__input:disabled,
.pwa-select.is-disabled,
.pwa-select[aria-disabled="true"],
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="color"], [type="image"], [class*="search__input"])):disabled,
textarea:disabled,
select:disabled {
  background: var(--surface-disabled);
  color: var(--text-muted);
  border-color: var(--border-default);
  box-shadow: none;
  cursor: not-allowed;
}
.pwa-field-error .pwa-field__input:disabled,
.pwa-field-error .pwa-select.is-disabled,
.pwa-field-error input:disabled,
.pwa-field-error textarea:disabled,
.pwa-field-error select:disabled {
  border-color: var(--border-default);
  box-shadow: none;
}

.pwa-select__placeholder {
    color: var(--text-muted);
}

/* Chevron slot on the right of a .pwa-select */
.pwa-select__icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Multi-line text field. Transition, focus, error and disabled looks come from the form-field states above. */
.pwa-textarea {
    width: 100%;
    min-height: 96px;
    padding: var(--space-lg);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-default);
    font-size: 14px;
    font-family: inherit;
    line-height: 20px;
    resize: none;
}

/* Compact textarea (short notes in dense forms) - user can drag it taller */
.pwa-textarea--sm {
    min-height: 56px;
    padding: var(--space-md) var(--space-lg);
    font-size: 13px;
    resize: vertical;
}

/* Message body: fills the remaining height of a flex column */
.pwa-textarea--grow {
    flex: 1;
    min-height: 200px;
}

/* Search box: bordered row holding an icon, a bare input and an optional clear icon.
   .pwa-search in pages, .dropdown-search inside sheets. The box (not the input) shows focus. */
.dropdown-search,
.pwa-search {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    height: 44px;
    padding: 0 var(--space-lg);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dropdown-search {
    flex: 1;
}
.pwa-search {
    width: 100%;
    flex-shrink: 0;
}
.dropdown-search:focus-within,
.pwa-search:focus-within {
    border-color: var(--focus-border);
    box-shadow: var(--focus-ring);
}

.dropdown-search__icon,
.pwa-search__icon,
.pwa-search__clear {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 16px;
    flex-shrink: 0;
}
.pwa-search__icon[ng-click],
.pwa-search__clear {
    cursor: pointer;
}
.dropdown-search .icon-search {
    background-color: var(--gray-muted);
}

.dropdown-search__input,
.pwa-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    color: var(--text-default);
}

/* Removable person chip (linked / other providers): text + .icon-close */
.pwa-user-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--gray-row-alt);
  border: 1px solid var(--gray-border);
  font-size: 13px;
  color: var(--text-default);
}
.pwa-user-tag .icon-close {
  cursor: pointer;
  background-color: var(--gray-muted);
}

/* Required-field marker (label asterisk) */
.required {
  color: var(--feedback-error);
  font-size: 14px;
}
.pwa-required {
  font-size: 11px;
  color: var(--text-muted);
}

/* Icon inside a field: wrap the control in .pwa-field__icon-wrap */
.pwa-field__icon-wrap {
    position: relative;
}
.pwa-field__icon {
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    color:var(--text-muted);
}
/* Smaller decorative icon (date/time fields) - taps pass through to the input underneath */
.pwa-field__icon--sm {
    font-size: 15px;
    pointer-events: none;
}
/* Time field drawn with its own .pwa-field__icon: the native picker button is stretched,
   invisible, over the whole field so a tap anywhere opens the picker */
.pwa-field__icon-wrap--picker input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
}
.primary-pill{
  border-radius: 999px;
  background: var(--Highlight-Blue, #CEDEF1);
  display: flex;
  padding: 3px 10px;
  align-items: center;
  gap: 4px;
  color: var(--brand-primary, #0A5BB8);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}



/* Global PWA main page container - caps width on larger screens, stays fluid on mobile */
main[role="main"] {
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Common PWA bottom sheet (lookups / pickers sliding up from the bottom).
   Markup: .bottom-sheet__backdrop[.show] > .bottom-sheet >
           .dropdown__handle + (.dropdown__header | .bottom-sheet__header) + .dropdown__list + .dropdown__footer
   Modifiers: .bottom-sheet__backdrop--pages (sits above the bottom nav), .bottom-sheet--tall (88vh). */

.bottom-sheet__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .30s ease,
        background .30s ease,
        visibility .30s;

    z-index: 999;
    .icon-chevron-right{
      background-color: var(--gray-muted);
    }
}

.bottom-sheet {
    width: 100%;
    max-width: 568px;
    background: var(--base-white);
    border-radius: 20px 20px 0 0;

    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);

    height: auto;
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: 0 -8px 32px rgba(15, 23, 33, .18);
    overflow: hidden;
}

.bottom-sheet--tall {
    max-height: 88vh;
}

.bottom-sheet__backdrop.show {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, .45);
}

.bottom-sheet__backdrop.show .bottom-sheet {
    transform: translateY(0);
}

/* Common PWA Modal (confirmation, information, signature pad, time picker popups)
   Centered modal card. These popups are opened through ModalPopupService ($uibModal), which
   already supplies the dimmed full-viewport .modal-backdrop and the z-index layering, so only the
   legacy Bootstrap window chrome around the card is reset here (via :has) and the card itself is
   styled. Markup:
   .pwa-modal > .pwa-modal-header (.pwa-modal-title + .pwa-modal-close) / .pwa-modal-body /
   .pwa-modal-footer (.pwa-modal-btn--primary|secondary|danger) */
/* bootstrap.css is not loaded in the PWA, so the overlay itself (fixed, full viewport, centered, dimmed) is defined here */
.modal:has(.pwa-modal) {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

body:has(.pwa-modal) .modal-backdrop {
    position: fixed;
    inset: 0;
    background: #0F1721;
    opacity: .5;
}

.modal-dialog:has(.pwa-modal) {
    width: 100%;
    max-width: 480px;
    margin: auto !important;
}

.modal-content:has(.pwa-modal) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pwa-modal {
    width: 100%;
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    background: var(--surface-card, #FFF);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(15, 23, 33, .18);
    font-family: var(--font-base);
}

.pwa-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg, 12px);
    margin-bottom: var(--space-md, 10px);
}

.pwa-modal-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-default);
}

.pwa-modal-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -6px 0 0;
    border-radius: var(--radius-md, 8px);
    color: var(--text-muted);
    cursor: pointer;
}

.pwa-modal-close:hover {
    background: var(--surface-row-alt);
}

.pwa-modal-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bordered, rounded drawing surface (signature pad). Border only - no padding - so the full area stays usable. */
.pwa-modal-canvas {
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-card, #FFF);
}

.pwa-modal-body label {
    display: block;
    margin: 0;
    font-weight: inherit;
    max-width: 100%;
}

.pwa-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg, 12px);
    margin-top: var(--space-3xl, 24px);
}

.pwa-modal-btn {
    min-width: 96px;
    min-height: 40px;
    padding: 7px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.pwa-modal-btn--primary {
    background: var(--action-primary);
    color: var(--text-white);
}

.pwa-modal-btn--primary:hover {
    background: var(--action-primary-hover);
}

.pwa-modal-btn--secondary {
    background: var(--surface-card, #FFF);
    border-color: var(--border-default);
    color: var(--text-default);
}

.pwa-modal-btn--secondary:hover {
    background: var(--surface-row-alt);
}

.pwa-modal-btn--danger {
    background: var(--feedback-error);
    color: var(--text-white);
}

.pwa-modal-btn--danger:hover {
    filter: brightness(.9);
}

.pwa-modal-close:focus-visible,
.pwa-modal-btn:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .modal:has(.pwa-modal) {
        padding: 0 16px;
    }

    .modal-dialog:has(.pwa-modal) {
        max-width: calc(100% - 32px);
    }

    .pwa-modal {
        padding: 20px;
    }
}

.dropdown__handle {
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    background: var(--gray-row-alt);
    border-radius: 100px;
    margin: 10px auto 0;
}

.bottom-sheet__header {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color:var(--text-default);
}

.pwa-dropdown-title {
    font-weight: 500;
    font-size: 16px;
    color: var(--gray-text);
}

.dropdown__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-default);
}

.bottom-sheet__backdrop--pages{
  bottom:58px;
  .dropdown__header{
    span{
      font-weight: 500;
      font-size: 16px;
      color: var(--text-default);
    }
    .dropdown-icon-close{
      background: var(--text-muted);
    }
  }
}

@media (min-width: 768px) {
  .bottom-sheet__backdrop--pages .bottom-sheet{
    height: 264px;
  }
}
.bottom-sheet__backdrop--pages .bottom-sheet{
  height: 280px;
}

/* Sheet header: no bottom padding - the search field / list below supplies its own top spacing */
.dropdown__header {
    flex-shrink: 0;
    padding: var(--space-lg) var(--space-xl) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    font-weight: 400;
    span{
        font-weight: 500;
        font-size: 16px;
        color: var(--text-default);
    }

    /* Normalizes legacy bare "icon icon-close" close triggers (no .dropdown-close wrapper)
       to the same touch target / hover behavior as the standard .dropdown-close button,
       without requiring markup changes on every page. */
    .icon-close {
        position: relative;
        cursor: pointer;
        z-index: 1;
    }
    .icon-close::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: transparent;
        z-index: -1;
        transition: background-color .15s ease;
    }
    .icon-close:hover::before,
    .icon-close:active::before {
        background: var(--gray-row-alt);
    }
    .icon-close:focus-visible::before {
        outline: 2px solid var(--brand-primary, #0A5BB8);
        outline-offset: 2px;
    }
}

/* Common close/cross button for every PWA backdrop/bottom-sheet header,
   regardless of the page-specific header wrapper class it sits inside. */
.dropdown-close {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--gray-row-alt);

    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease;
}
.dropdown-close .dropdown-icon-close {
    background-color: #5B6B7B;
}
.dropdown-close:hover,
.dropdown-close:active {
    background: var(--gray-border, #D0D5DD);
}
.dropdown-close:focus-visible {
    outline: 2px solid var(--brand-primary, #0A5BB8);
    outline-offset: 2px;
}

.dropdown__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dropdown__list--pages .dropdown__item{
  display:flex;
  gap: 12px;
  align-items: center;
  .dropdown-menu__icon{
    height:38px;
    width:38px;
    background-color: var(--gray-background);
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    .icon{
      background-color: var(--blue-primary)
    }
  }
  .dropdown-menu__content{
    flex: 1;
    display:flex;
    flex-direction: column;
    gap:2px;
    .dropdown-menu__title{
      font-size:14px;
      font-weight: 400;
    }
    .dropdown-menu__description{
      font-size:11px;
      font-weight: 400;
      color: var(--text-muted);
    }
  }
}

/* Common sheet row (single-select = .dropdown-item-radio, multi-select = .dropdown-item-checkbox) */
.dropdown__item {
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    border-bottom: 1px solid var(--gray-row-alt);
    color: var(--text-default);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.dropdown__item:last-child {
    border-bottom: none;
}
.dropdown__item:hover {
    background: var(--gray-row-alt);
}
.dropdown__item--selected,
.dropdown__item--selected:hover,
.dropdown__item.primary-active,
.dropdown__item.primary-active:hover,
.dropdown__item.is-selected,
.dropdown__item.is-selected:hover {
    background: var(--blue-highlight);
}

/* "Select all" row at the top of a multi-select sheet */
.dropdown__select-all {
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    cursor: pointer;
    border-bottom: 1px solid var(--gray-row-alt);
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 500;
}

/* Common sheet footer (Cancel / OK buttons) */
.dropdown__footer {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--gray-row-alt);
    background: var(--surface-card);
}
.dropdown__footer .bttn {
    flex: 1;
    width: auto;
}
.dropdown__footer--stack {
    flex-direction: column;
}
.dropdown__footer--stack .bttn {
    flex: none;
    width: 100%;
}

/* ---- Button size / layout modifiers (combine with .bttn + a colour variant) ----
   Declared after every contextual ".x .bttn" rule and doubled up (.bttn.bttn--x) so a modifier
   always wins over container defaults such as .pwa-footer .bttn / .dropdown__footer .bttn. */

/* Small button - pagination Previous/Next and other compact actions */
.bttn.bttn--sm {
    flex: none;
    width: auto;
    min-width: 56px;
    min-height: 32px;
    padding: 6px 14px;
}

/* Fixed-width secondary action (e.g. Cancel) next to a primary that fills the row */
.bttn.bttn--narrow {
    flex: 0 0 100px;
    width: 100px;
}

/* Content-width call-to-action (empty states, inline actions) */
.bttn.bttn--auto {
    flex: none;
    width: auto;
    min-width: 180px;
    padding: 7px var(--space-2xl);
}

/* Row of equal-width buttons (footers, confirm dialogs) */
.bttn-row {
    display: flex;
    gap: var(--space-md);
}

.bttn-row > .bttn {
    flex: 1 1 0;
    width: 100%;
}

.bttn-row > .bttn.bttn--narrow {
    flex: 0 0 100px;
    width: 100px;
}

/* Text-only link button */
.bttn.bttn-link {
    width: auto;
    min-height: auto;
    padding: 0;
    gap: 3px;
    background: transparent;
    border: 0;
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 500;
}

/* Pill "+ Add" / "+ New" action in card and list headers (e.g. + New Rx) */
.bttn-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--text-white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.dropdown__item-primary-active{
  background-color: var(--blue-highlight);
  .dropdown-text-primary-active {
    color: var(--blue-primary);
  }
}
.dropdown__item-secondary-active{
  background-color: var(--green-highlight);
  .dropdown-text-secondary-active {
    color: var(--green-action);
  }
}
.dropdown__item-secondary-active:hover{
  background-color: var(--green-highlight);
}

.dropdown__item-primary-active:hover {
  background-color: var(--blue-highlight);
}

.dropdown-text {
    font-weight: 400;
    font-style: Regular;
    font-size: 13px;
    color: var(--gray-text);
}

/* Common selected-state for a single tappable option inside a .dropdown__list */
.dropdown-text.primary-active {
    color: var(--brand-primary);
    font-weight: 500;
}

.dropdown__item:has(.dropdown-text.primary-active) {
    background: var(--blue-highlight);
}

/* Search (sheet search field - same look as every other PWA form field, incl. focus state) */
.dropdown-search-main {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg) !important;
}
/* Segmented tabs inside a lookup sheet (e.g. All / Providers / Staff) */
.dropdown-tabs {
    display: flex;
    padding: 3px;
    background-color: var(--gray-row-alt);
    border-radius: var(--radius-lg);
}
.dropdown-tabs-block {
    padding: var(--space-lg) var(--space-2xl) 0;
}
.dropdown-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: var(--space-sm) 0;
    text-align: center;
    cursor: pointer;
}
.dropdown-tab--active {
    color: var(--text-default);
    background: var(--surface-card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
    border-radius: var(--radius-md);
}

/* "N selected · Clear" row above a multi-select list */
.dropdown-selection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 8px 20px;
    color: var(--text-default);
    font-size: 13px;
    font-weight: 600;
}
.dropdown-clear {
    border: none;
    background: transparent;
    color: #0A5BB8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* User/provider row with avatar inside a lookup sheet.
   Default = compact rounded row; .user-item--row = full-width bordered row (Add Client / Edit Demographics). */
.user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
}
.user-item:hover {
    background: #F7F9FC;
}
.user-item__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue-sky);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.user-item.is-selected .user-item__avatar {
    background: var(--blue-primary);
}
.user-item__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-item__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-item__subtitle {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-item.is-selected {
    background: #CEDEF1;
}
.user-item--row {
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-border);
    border-radius: 0;
}
.user-item--row .user-item__name {
    font-size: 14px;
    font-weight: inherit;
}
.user-item--row.is-selected {
    background-color: #DCE9FB !important;
    color: #0A5BB8 !important;
}
.user-item--row.is-selected .user-item__name {
    color: #0A5BB8 !important;
    font-weight: 500 !important;
}

/* Drug-warning / drug-interaction sheets (Order Rx Add Prescription, Rx Edit Prescription) */
.rx-warn-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.rx-warn-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-default);
    margin-bottom: var(--space-xs);
}
.rx-warn-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rx-warn-card__head {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
}
.rx-warn-card__head--normal {
    background: #FFF3BF;
    color: #5C4400;
}
.rx-warn-card__head--high {
    background: #FCE6E6;
    color: #B10000;
}
.rx-warn-card__body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-default);
}
.rx-warn-card__row {
    display: flex;
    gap: 6px;
}
.rx-warn-card__row b {
    min-width: 92px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-weight: 600;
}
/* "Other" reason field under the override select (look = .pwa-field__input--sm) */
.rx-warn-other-input {
    margin-top: 6px;
}
.rx-warn-link {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-primary);
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
}
.rx-warn-highrisk {
    text-align: center;
    color: #B10000;
    font-weight: 600;
    font-size: 13px;
}
.rx-warn-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--border-default);
    background: var(--surface-card);
}
.rx-moreinfo-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
    font-size: 13px;
    color: var(--text-default);
}

/* Square "Go" button beside a search field (sheet search and in-page .pwa-search-row) */
.dropdown-search__go,
.pwa-search-row__go {
    width: 64px;
    min-height: 44px;
    flex-shrink: 0;
    padding: 0;
}

.dropdown-empty {
    padding: 40px var(--space-xl);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.index-document-home,
.inbox-home,
.pwa-home {
    height: 100vh;
    /* dvh = visible viewport; plain vh overflows by the mobile browser toolbar height */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
}

.footer-pagination {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: 14px;
    padding-top: 0px !important;
    align-items: center;
    .pagination__count{
      font-size: 11px;
      color: var(--text-muted);
    }
    .pagination__actions{
      display:flex;
      gap: var(--space-sm);
    }
}

/* ---- Shared page components ----
   Naming: new shared classes use .pwa-<block>__<element>--<modifier> and tokens only.
   Shared page-shell/form classes (.pwa-appbar, .pwa-field*, .pwa-select*, …) were renamed from .sch-*;
   view-local .sch-* / .dropdown-* / .bttn* / .hs-* names stay as they are, and classes toggled
   via ng-class or used by JS are never renamed. */

/* Patient banner: avatar + name / info strip under the app bar */
.pwa-patient-banner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 10px 16px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
}

.pwa-patient-banner__avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
}

.pwa-patient-banner__name {
    font-size: 14px;
    font-weight: 600;
    color: #1D2939;
}

.pwa-patient-banner__info {
    font-size: 12px;
    color: #667085;
    margin-top: 2px;
}

/* Profile card: avatar + name / info + chevron (More page) */
.pwa-profile-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.pwa-profile-card__avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.pwa-profile-card__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-profile-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-default);
}

.pwa-profile-card__info {
    font-size: 11px;
    color: var(--text-muted);
}

.pwa-profile-card > .icon {
    color: var(--text-muted);
}

/* More page: white content area, stacked cards */
.pwa-more {
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--surface-card);
}

.pwa-more .bttn {
    flex-shrink: 0;
    font-weight: 500;
}

/* In-page search: field + .pwa-search-row__go button */
.pwa-search-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.pwa-search-row > .pwa-search {
    flex: 1;
    min-width: 0;
}

/* "Newest / Oldest" style sort toggle in list headers */
.pwa-sort-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 400;
}

/* Floating action menu: dimmed scrim + stacked labelled actions above the FAB.
   The FAB button itself stays in the view (colour / size differ per screen). */
.pwa-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 50;
}

.pwa-fab-wrap {
    position: fixed;
    /* keep inside the centered 768px main column on wide screens */
    right: max(var(--space-2xl), calc((100vw - 768px) / 2 + var(--space-2xl)));
    bottom: 80px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2xl);
}

.pwa-fab-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2xl);
}

.pwa-fab-item {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    cursor: pointer;
}

.pwa-fab-label {
    background: var(--surface-card);
    color: var(--text-default);
    font-size: 15px;
    font-weight: 500;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

/* Common Checkbox (square, filled on check) */
.chk-box {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid var(--border-default, #D0D5DD);
    border-radius: 4px;
    background: var(--surface-card);
    cursor: pointer;
    position: relative;
}

.chk-box:checked {
    background: var(--brand-sky);
    border-color: var(--brand-sky);
}

.chk-box:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--base-white, #FFF);
    transform: translate(-50%, -50%);
}

.chk-box:focus-visible {
    outline: 2px solid var(--brand-primary, #0A5BB8);
    outline-offset: 2px;
}

.chk-box:disabled {
    cursor: not-allowed;
    opacity: .5;
    background: var(--gray-row-alt, #F2F4F7);
}

/* Common Radio (circle, filled dot on check) */
.rdo-circle {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid var(--border-default, #D0D5DD);
    border-radius: 50%;
    background: var(--surface-card);
    cursor: pointer;
    position: relative;
}

.rdo-circle:checked {
    border-color: var(--brand-sky);
}

.rdo-circle:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-sky);
    transform: translate(-50%, -50%);
}

.rdo-circle:focus-visible {
    outline: 2px solid var(--brand-primary, #0A5BB8);
    outline-offset: 2px;
}

.rdo-circle:disabled {
    cursor: not-allowed;
    opacity: .5;
    background: var(--gray-row-alt, #F2F4F7);
}

/* Non-native visual radio indicator for single-select rows built as a tappable
   <div class="dropdown__item"> (not a real <input>) - same look as .rdo-circle,
   toggled via ng-class="{'is-selected': ...}" instead of the :checked pseudo-class. */
.dropdown-item-radio {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--border-default, #D0D5DD);
    border-radius: 50%;
    background: var(--surface-card);
    position: relative;
    box-sizing: border-box;
}

.dropdown-item-radio.is-selected {
    border-color: var(--brand-sky);
}

.dropdown-item-radio.is-selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-sky);
    transform: translate(-50%, -50%);
}

/* Non-native visual checkbox indicator for multi-select rows built as a tappable
   <div class="dropdown__item"> (not a real <input>) - same look as .chk-box,
   toggled via ng-class="{'is-selected': ...}" instead of the :checked pseudo-class. */
.dropdown-item-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--border-default, #D0D5DD);
    border-radius: 5px;
    background: var(--surface-card);
    position: relative;
    box-sizing: border-box;
}

.dropdown-item-checkbox.is-selected {
    background: var(--brand-sky);
    border-color: var(--brand-sky);
}

.dropdown-item-checkbox.is-selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--base-white, #FFF);
    transform: translate(-50%, -50%);
    -webkit-mask: url('data:image/svg+xml,<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8.2L11 1" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml,<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8.2L11 1" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: attr(data-value) !important;
}

.ql-snow .ql-picker.ql-size {
    width: 70px !important;
}
.ql-editor .ql-size-12px {
    font-size: 12px !important;
}
.ql-editor .ql-size-14px {
    font-size: 14px !important;
}
.ql-editor .ql-size-18px {
    font-size: 18px !important;
}
.ql-editor .ql-size-24px {
    font-size: 24px !important;
}
.k-list-container .k-list .k-item.k-state-selected {
  background-color: #0072C5 !important;
}
.k-list-container .k-list{
  background-color: white;
}
.k-dropdown-wrap .k-state-hover {
  background-color: #ececec;
}
.k-state-default > .k-select {
    background-color: #e9e9e9 !important;
}
.k-list-container .k-state-hover {
    background: #76b852 !important;
    color: #ffffff !important;
}

.row-divider{
    border-color: var(--gray-border);
    opacity: 0.15;
}