:root {
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  color: #281b3e;
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #9b57c3; outline-offset: 2px; }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.login-screen { position: fixed; z-index: 100; inset: 0; display: grid; grid-template-columns: clamp(420px, 28.2vw, 550px) minmax(0, 1fr); overflow-y: auto; background: #fff; }
.login-panel { position: relative; z-index: 1; min-width: 0; background: #fff; }
.login-panel-inner { display: flex; flex-direction: column; width: min(316px, calc(100% - 48px)); min-height: 100svh; margin: 0 auto; padding: clamp(48px, 11.3vh, 118px) 0 clamp(30px, 5vh, 54px); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand img { width: 50px; height: 50px; object-fit: contain; }
.login-brand span { display: grid; gap: 3px; }
.login-brand strong { color: #211731; font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.login-brand small { color: #aa79d5; font-size: 9px; font-weight: 800; letter-spacing: .24em; }
.login-main { margin-top: clamp(55px, 7.5vh, 90px); }
.login-eyebrow { margin: 0 0 11px; color: #7043c7; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.login-main h1 { margin: 0; color: #2d2141; font-size: clamp(43px, 3vw, 57px); line-height: 1.04; letter-spacing: -.048em; font-weight: 800; }
.login-intro { margin: 22px 0 0; color: #857196; font-size: 15px; line-height: 1.58; }
.login-form { display: grid; gap: 18px; margin-top: clamp(33px, 4.5vh, 48px); }
.login-form label { display: grid; gap: 8px; color: #2f2141; font-size: 12px; font-weight: 700; }
.login-form input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #e7deee; border-radius: 10px; background: #fff; color: #251b34; font-size: 12px; }
.login-form input::placeholder { color: #8c7d99; }
.login-form input:focus { border-color: #8a57c7; outline: 2px solid #8a57c733; outline-offset: 0; }
.login-form .primary-button { width: 100%; height: 52px; margin-top: 0; border-radius: 10px; background: #6940b6; box-shadow: none; font-size: 16px; font-weight: 750; }
.login-form .primary-button span { margin-left: 3px; font-size: 18px; font-weight: 500; }
.login-form .primary-button:disabled { cursor: wait; opacity: .68; }
.login-error { min-height: 20px; margin: 10px 0 0; color: #b52b53; font-size: 12px; line-height: 1.4; }
.login-assurance { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 26px; color: #9889a9; font-size: 11px; line-height: 1.35; }
.login-assurance svg { width: 17px; height: 17px; color: #9477af; stroke-width: 1.6; }
.login-visual { position: relative; min-width: 0; min-height: 100svh; overflow: hidden; background: linear-gradient(0deg, #241333a8 0%, #33214122 52%, #24133311 100%), url('./assets/clinic.png') center / cover no-repeat; }
.login-visual::before, .login-visual::after { position: absolute; width: 520px; height: 520px; border: 1px solid #ffffff24; border-radius: 50%; content: ''; pointer-events: none; }
.login-visual::before { top: 8%; left: 11%; }
.login-visual::after { top: 30%; left: 35%; }
.login-visual-content { position: absolute; left: clamp(44px, 9vw, 165px); bottom: clamp(38px, 7vh, 80px); z-index: 1; color: #fff; }
.login-visual-content span { font-size: 11px; font-weight: 700; opacity: .8; }
.login-visual-content p { margin: 8px 0 0; font-size: clamp(22px, 2vw, 31px); font-weight: 750; line-height: 1.03; letter-spacing: -.035em; }
@media (max-width: 760px) {
  .login-screen { grid-template-columns: minmax(0, 1fr); }
  .login-panel { grid-row: 2; }
  .login-panel-inner { width: min(420px, calc(100% - 44px)); min-height: 0; padding: 26px 0 35px; }
  .login-brand { position: absolute; top: -74px; left: max(22px, calc((100% - 420px) / 2)); z-index: 2; }
  .login-brand strong { color: #fff; }
  .login-brand small { color: #f0d2ff; }
  .login-main { margin-top: 7px; }
  .login-main h1 { max-width: 420px; font-size: clamp(36px, 9vw, 50px); }
  .login-intro { margin-top: 13px; font-size: 14px; }
  .login-form { margin-top: 26px; }
  .login-assurance { margin-top: 10px; }
  .login-visual { grid-row: 1; min-height: 200px; height: min(30vh, 270px); background-position: center 42%; }
  .login-visual::before, .login-visual::after { display: none; }
  .login-visual-content { right: 20px; bottom: 20px; left: auto; text-align: right; }
  .login-visual-content p { font-size: 18px; }
}
@media (max-width: 470px) {
  .login-visual-content { max-width: 42%; }
  .login-visual-content p { font-size: 16px; }
}

.app-shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  min-height: 100vh;
  background: #fff;
}
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 13px 18px;
  color: #fff;
  background: radial-gradient(circle at 25% 3%, #87539e 0, transparent 40%), linear-gradient(164deg, #5f3379 0%, #3a1959 70%, #4a2366 100%);
}
.brand { display: grid; justify-items: center; gap: 4px; margin: 2px 0 27px; text-align: center; }
.brand-tooth { display: block; width: 54px; height: 54px; margin-bottom: 2px; object-fit: contain; }
.brand strong { font-family: Georgia, serif; font-size: 18px; line-height: 1.02; font-weight: 500; }
.brand span { font-size: 8px; letter-spacing: 2.4px; }
.side-nav { display: grid; gap: 5px; }
.side-nav button {
  display: flex; align-items: center; gap: 11px; min-height: 42px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 8px; color: #f4e9fb;
  background: transparent; text-align: left; font-size: 12px; white-space: nowrap;
}
.side-nav button svg { width: 18px; height: 18px; }
.side-nav button:hover { background: #ffffff1d; }
.side-nav button.active { color: #43145c; background: #e7c8f8; font-weight: 700; box-shadow: 0 3px 9px #1a052621; }
.side-nav .nav-badge { display: grid; place-items: center; min-width: 17px; height: 17px; margin-left: auto; padding: 0 4px; border-radius: 50px; background: #ee5d75; color: white; font-size: 9px; font-weight: 800; }
.sidebar-user { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 14px 6px 4px; }
.sidebar-user img, .admin-account img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; object-position: center 18%; background: #edd6f2; border: 2px solid #e7c7ec; }
.sidebar-user span, .admin-account span { display: grid; gap: 2px; }
.sidebar-user strong { font-size: 10px; line-height: 1.08; }
.sidebar-user small { color: #e6d1ef; font-size: 8px; }

.main-panel { min-width: 0; background: #fff; }
.topbar { display: flex; align-items: center; gap: 17px; height: 66px; padding: 0 30px; border-bottom: 1px solid #f0eaf5; }
.topbar.settings-topbar { background: linear-gradient(130deg, #713590, #4a2068); color: #fff; border-bottom-color: #4a2068; }
.settings-topbar .icon-button { color: #fff; }
.settings-topbar .icon-button:hover { background: #ffffff26; }
.settings-topbar .admin-account small { color: #ead8f3; }
.settings-topbar .today-button { color: #fff; background: #ffffff1f; border-color: #ffffff75; }
.settings-topbar .today-button:hover { background: #ffffff33; }
.global-search { display: flex; align-items: center; gap: 8px; width: min(340px, 48vw); height: 37px; padding: 0 11px; color: #8b72a0; border: 1px solid #e8deee; border-radius: 8px; background: #f8f5fb; }
.global-search svg { width: 17px; height: 17px; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #302142; font-size: 11px; }
.global-search input::placeholder { color: #9a8aa8; }
.topbar-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; color: #593071; background: transparent; }
.icon-button:hover { background: #f2eaf7; }
.icon-button svg { width: 19px; height: 19px; }
.admin-account { display: flex; align-items: center; gap: 8px; }
.admin-account strong { font-size: 11px; line-height: 1; white-space: nowrap; }
.admin-account small { color: #9587a2; font-size: 9px; }
.mobile-menu { display: none; }

.page-content { width: 100%; padding: 27px 32px 50px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.page-heading h1 { margin: 0 0 3px; color: #21152f; font-size: clamp(23px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.5px; }
.page-heading p { margin: 0; color: #8f819f; font-size: 12px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 17px; border: 0; border-radius: 8px; background: linear-gradient(130deg, #8236ad, #5c2081); color: white; box-shadow: 0 3px 8px #64278a26; font-size: 12px; font-weight: 650; white-space: nowrap; }
.primary-button:hover { filter: brightness(1.07); }
.primary-button svg { width: 15px; height: 15px; }

.services-content { max-width: 1500px; margin: 0 auto; }
.services-page-heading { margin-bottom: 22px; }
.service-storage-note { margin: -12px 0 18px; color: #927da2; font-size: 10px; }
.service-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 19px; }
.service-filters button { min-height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: #f5edf9; color: #704a89; font-size: 11px; font-weight: 650; }
.service-filters button:hover { background: #eadcf3; }
.service-filters button.selected { background: #642482; color: #fff; box-shadow: 0 3px 8px #4f176b29; }
.services-toolbar { display: flex; gap: 12px; margin-bottom: 17px; }
.service-search { display: flex; align-items: center; gap: 8px; width: min(100%, 470px); height: 40px; padding: 0 12px; border: 1px solid #e7dded; border-radius: 8px; background: #faf8fc; color: #8b72a0; }
.service-search svg { width: 16px; height: 16px; }
.service-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #302142; font-size: 11px; }
.service-search input::placeholder { color: #9a8aa8; }
.services-toolbar select { min-width: 125px; height: 40px; padding: 0 11px; border: 1px solid #e7dded; border-radius: 8px; background: #fff; color: #624575; font-size: 11px; }
.service-table-wrap { overflow-x: auto; border: 1px solid #eee7f2; border-radius: 12px; background: #fff; box-shadow: 0 4px 18px #3f1e5a0a; }
.service-table { width: 100%; min-width: 610px; border-collapse: collapse; text-align: left; }
.service-table th { height: 44px; padding: 0 14px; background: #faf8fc; color: #624c75; font-size: 11px; font-weight: 750; white-space: nowrap; }
.service-table td { height: 75px; padding: 8px 14px; border-top: 1px solid #f1ebf4; color: #483454; font-size: 11px; }
.service-table th:first-child, .service-table td:first-child { width: 94px; }
.service-table th:nth-child(2) { width: 40%; }
.service-table th:nth-child(3) { width: 23%; }
.service-table th:nth-child(4), .service-table th:nth-child(5) { width: 13%; }
.service-thumbnail { display: block; width: 52px; height: 52px; border-radius: 8px; background: #f3e6f5; object-fit: cover; }
.service-image-preview { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-name { display: grid; gap: 3px; }
.service-name strong { color: #31213e; font-size: 12px; }
.service-name small { color: #9b8aa8; font-size: 10px; }
.service-duration { white-space: nowrap; }
.service-switch { position: relative; display: inline-block; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 20px; background: #cfc3d8; vertical-align: middle; }
.service-switch.on { background: #642482; }
.service-switch span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #28133c33; transition: transform .2s; }
.service-switch.on span { transform: translateX(16px); }
.service-actions { display: flex; gap: 10px; align-items: center; }
.service-actions button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #713494; }
.service-actions button:hover { background: #f3e9f8; }
.service-actions button.delete { color: #e44c64; }
.service-actions button.delete:hover { background: #fff0f2; }
.service-actions svg { width: 17px; height: 17px; }
.service-table .service-empty { height: 100px; color: #8b7a99; text-align: center; }
.appointment-dialog.service-dialog { width: min(610px, calc(100vw - 28px)); padding: 0; overflow: auto; }
.appointment-dialog.service-dialog form { display: block; }
.service-dialog-heading { position: sticky; z-index: 2; top: 0; align-items: flex-start; margin: 0; padding: 25px 28px 20px; border-bottom: 1px solid #f0e8f3; background: #fff; }
.service-dialog-heading h2 { font-size: 22px; letter-spacing: -.02em; }
.service-dialog-heading p { margin: 5px 0 0; color: #8c7b99; font-size: 12px; font-weight: 400; }
.service-dialog-body { display: grid; gap: 17px; padding: 24px 28px; }
.service-dialog-body .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-dialog-body .form-row label { min-width: 0; }
.service-dialog-body > label, .service-dialog-body .form-row label { gap: 8px; color: #4e3a5d; font-size: 12px; }
.service-dialog-body input:not([type="checkbox"]):not([type="file"]), .service-dialog-body select { height: 44px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.service-dialog-body input::placeholder { color: #a69aaf; }
.service-dialog-body input:focus, .service-dialog-body select:focus { border-color: #9b62b4; outline: 3px solid #9b62b426; outline-offset: 0; }
.service-image-section { padding: 17px; border: 1px solid #e9ddec; border-radius: 12px; background: #fcf9fd; }
.service-image-copy { display: grid; gap: 4px; margin-bottom: 14px; }
.service-image-copy strong { color: #40284f; font-size: 13px; }
.service-image-copy span { color: #897a96; font-size: 11px; }
.service-image-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 18px; }
.service-image-frame { width: 170px; height: 126px; overflow: hidden; border: 1px dashed #d8c8e1; border-radius: 10px; background: #f5eef8; }
.service-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 100%; color: #947ba5; font-size: 11px; }
.service-image-placeholder svg { width: 25px; height: 25px; }
.service-image-controls { display: grid; justify-items: start; gap: 9px; min-width: 0; }
.service-dialog label.service-upload-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 15px; overflow: hidden; border: 1px solid #d8bde5; border-radius: 8px; background: #fff; color: #672989; font-size: 12px; font-weight: 700; cursor: pointer; }
.service-upload-button:hover { background: #f6eefa; }
.service-upload-button:focus-within { outline: 2px solid #9b57c3; outline-offset: 2px; }
.service-dialog .service-upload-button input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.service-image-controls small { max-width: 240px; color: #897a96; font-size: 11px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.service-dialog .service-active-label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #ece4ef; border-radius: 10px; background: #fff; cursor: pointer; }
.service-dialog .service-active-label input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: #642482; }
.service-dialog .service-active-label span { display: grid; gap: 3px; }
.service-dialog .service-active-label strong { color: #483556; font-size: 12px; }
.service-dialog .service-active-label small { color: #93859d; font-size: 11px; font-weight: 400; }
.service-dialog .dialog-actions { position: sticky; bottom: 0; gap: 10px; padding: 16px 28px; border-top: 1px solid #f0e8f3; background: #fff; }
.service-dialog .dialog-actions button { min-height: 41px; }
@media (max-width: 540px) {
  .service-dialog-heading { padding: 20px 18px 16px; }
  .service-dialog-body { padding: 18px; }
  .service-dialog .dialog-actions { padding: 13px 18px; }
  .service-image-layout { grid-template-columns: 1fr; gap: 13px; }
  .service-image-frame { width: 100%; height: 150px; }
}
@media (max-width: 390px) {
  .service-dialog-body .form-row { grid-template-columns: 1fr; }
}

.calendar-panel { overflow: hidden; border: 1px solid #e8dced; border-radius: 18px; box-shadow: 0 10px 28px #3f1e5a0c; }
.calendar-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 78px; padding: 13px 20px; }
.view-toggle { display: flex; width: max-content; gap: 2px; padding: 3px; border: 1px solid #e9e0ee; border-radius: 10px; background: #f8f5fa; }
.view-toggle button { min-width: 65px; height: 38px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: #5e4073; font-size: 12px; font-weight: 650; }
.view-toggle button.selected { background: linear-gradient(120deg, #63247d, #842d8c); color: #fff; box-shadow: 0 3px 9px #4c1c672b; }
.date-controls { display: flex; align-items: center; gap: 6px; }
.date-controls strong { min-width: 180px; color: #2f1847; text-align: center; font-size: 18px; }
.compact { width: 34px; height: 34px; }
.compact svg { width: 17px; height: 17px; }
.today-button { justify-self: end; width: 90px; height: 39px; border: 1px solid #e3cfec; border-radius: 9px; background: #fbf5fe; color: #5e2478; font-size: 12px; font-weight: 650; }
.today-button:hover { background: #f2e7f8; }
.calendar-body { padding: 0 12px 12px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday { display: grid; place-items: center; height: 38px; border-bottom: 1px solid #f0eaf4; color: #55406b; font-size: 11px; font-weight: 750; }
.calendar-day { position: relative; display: grid; place-items: center; min-height: 55px; border: 0; border-bottom: 1px solid #f5f1f7; background: #fff; color: #332744; font-size: 12px; font-weight: 600; }
.calendar-day:hover { background: #f9f3fc; }
.calendar-day.outside { color: #b7a9c3; }
.calendar-day.today { color: #65218b; }
.calendar-day.selected { color: #fff; font-weight: 800; }
.calendar-day.selected::before { position: absolute; z-index: 0; width: 33px; height: 33px; border-radius: 50%; background: #6b258c; content: ""; }
.calendar-day span { position: relative; z-index: 1; }
.calendar-day.has-appointments:not(.selected)::after { position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: #a263c2; content: ""; }
.calendar-day.selected.has-appointments::after { position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: #ebd7f5; content: ""; }
.day-view { display: grid; gap: 8px; padding: 16px 7px 8px; }
.day-view .day-title { margin: 0 0 6px; font-size: 13px; color: #5e3a73; }
.day-slot { display: flex; align-items: center; gap: 15px; min-height: 45px; border-bottom: 1px solid #f3ecf6; color: #88789a; font-size: 11px; }
.day-slot span { width: 66px; flex: none; }
.day-slot b { color: #4b2762; font-size: 11px; }
.week-view .calendar-day { min-height: 80px; }
.week-view .calendar-day small { display: block; position: absolute; bottom: 11px; color: #8b65a4; font-size: 9px; }
.week-view .calendar-day.selected small { color: #7c4c96; }

.calendar-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); padding: 0; border-top: 1px solid #eee7f2; }
.calendar-sidebar { padding: 22px 20px; border-right: 1px solid #eee7f2; background: linear-gradient(140deg, #fcf9fd, #f7f1fa); }
.mini-month-title { margin: 0 0 15px 5px; color: #2f1847; font-size: 16px; font-weight: 750; }
.mini-calendar .weekday { height: 31px; border: 0; color: #70577f; font-size: 11px; }
.mini-calendar .calendar-day { min-height: 35px; border: 0; border-radius: 7px; background: transparent; font-size: 12px; }
.mini-calendar .calendar-day:hover { background: #eee3f5; }
.mini-calendar .calendar-day.selected { color: #fff; }
.mini-calendar .calendar-day.selected::before { width: 31px; height: 31px; }
.mini-calendar .calendar-day.has-appointments:not(.selected)::after { bottom: 2px; }
.calendar-legend { display: grid; gap: 12px; margin-top: 26px; padding: 22px 5px 0; border-top: 1px solid #e6d9eb; color: #49365d; font-size: 12px; }
.calendar-legend strong { margin-bottom: 3px; color: #2f1847; font-size: 13px; }
.calendar-legend span { display: flex; align-items: center; gap: 8px; }
.calendar-legend i { width: 13px; height: 13px; border-radius: 50%; }
.calendar-legend i.pending { background: #e6a54b; }
.calendar-legend i.confirmed { background: #4eae9a; }
.calendar-legend i.completed { background: #8873bc; }
.calendar-main { min-width: 0; overflow: auto; }
.schedule-scroll { max-height: 660px; overflow: auto; }
.schedule-grid { display: grid; grid-template-columns: 62px repeat(var(--schedule-days), minmax(112px, 1fr)); grid-template-rows: 59px repeat(var(--schedule-slots), 18px); min-width: 860px; }
.schedule-grid.day-schedule { min-width: 0; grid-template-columns: 75px minmax(0, 1fr); }
.schedule-corner { position: sticky; z-index: 5; top: 0; left: 0; grid-column: 1; grid-row: 1; border-right: 1px solid #eee8f2; border-bottom: 1px solid #eee8f2; background: #fff; }
.schedule-heading { position: sticky; z-index: 4; top: 0; display: grid; align-content: center; justify-items: center; gap: 2px; border: 0; border-left: 1px solid #eee8f2; border-bottom: 1px solid #eee8f2; background: #fff; color: #6d5d79; font-size: 11px; }
.schedule-heading strong { color: #38244e; font-size: 17px; }
.schedule-heading.today strong { color: #6b258c; }
.schedule-heading.selected { background: #f8f1fc; }
.schedule-heading.selected strong { color: #642482; }
.schedule-heading:hover { background: #f4ebf9; }
.schedule-column { z-index: 0; border-left: 1px solid #eee8f2; background: repeating-linear-gradient(to bottom, #fff 0, #fff 71px, #f3eef6 71px, #f3eef6 72px); }
.schedule-hour { z-index: 1; padding: 2px 7px 0 0; border-right: 1px solid #eee8f2; color: #8c7c99; background: #fff; text-align: right; font-size: 10px; }
.schedule-event { z-index: 2; display: block; min-width: 0; min-height: 0; overflow: hidden; margin: 2px 4px; padding: 3px 6px; border: 0; border-left: 3px solid #e6a54b; border-radius: 5px; background: #fff1db; color: #604321; text-align: left; cursor: pointer; }
.schedule-event.confirmed { border-color: #4eae9a; background: #e2f5f0; color: #225d52; }
.schedule-event.completed { border-color: #8873bc; background: #eee9f8; color: #554477; }
.schedule-event:hover, .schedule-event:focus-visible { filter: brightness(.96); box-shadow: 0 2px 8px #3217491a; }
.schedule-event strong, .schedule-event span { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.schedule-event strong { font-size: 11px; line-height: 12px; font-weight: 750; }
.schedule-event span { margin-top: 1px; font-size: 9px; line-height: 10px; }
.month-calendar { grid-template-rows: 44px repeat(var(--month-weeks), minmax(106px, 1fr)); }
.month-calendar .weekday { height: 44px; border-right: 1px solid #eee7f2; color: #4b315e; font-size: 12px; }
.month-date { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; padding: 8px 10px; border: 0; border-right: 1px solid #eee7f2; border-bottom: 1px solid #eee7f2; background: #fff; text-align: left; cursor: pointer; }
.month-date:hover { background: #fcf9fe; }
.month-date.outside { background: #fbf9fc; }
.month-date.selected { background: #faf1fc; }
.month-date-number { align-self: flex-end; display: grid; place-items: center; width: 29px; height: 29px; color: #302040; font-size: 13px; font-weight: 700; }
.month-date.outside .month-date-number { color: #ad9eb8; }
.month-date.selected .month-date-number { border-radius: 50%; background: #702582; color: #fff; }
.month-date.today:not(.selected) .month-date-number { border: 1px solid #a877bd; border-radius: 50%; color: #702582; }
.calendar-event { display: flex; align-items: center; gap: 4px; overflow: hidden; min-width: 0; padding: 5px 6px; border-radius: 6px; background: #fff0d5; color: #392748; font-size: 10px; white-space: nowrap; }
.calendar-event i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #e8a91e; }
.calendar-event strong { flex: none; font-weight: 750; }
.calendar-event span { overflow: hidden; text-overflow: ellipsis; }
.calendar-event.confirmed { background: #e4f5ec; }
.calendar-event.confirmed i { background: #64c89a; }
.calendar-event.completed { background: #efe4fa; }
.calendar-event.completed i { background: #9575dd; }
.more-events { padding: 2px 5px; color: #702582; font-size: 11px; font-weight: 700; }

.appointments-panel { padding-top: 23px; }
.list-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.list-heading h2 { margin: 0; color: #3a2253; font-size: 18px; }
.list-heading span { color: #796b8e; font-size: 12px; }
.appointment-table { --appointment-columns: 130px minmax(180px, 1.1fr) minmax(120px, .7fr) 165px minmax(500px, 1.7fr); overflow: hidden; border: 1px solid #e9def0; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px #3f1e5a12; }
.appointment-table-head, .appointment-row { display: grid; grid-template-columns: var(--appointment-columns); align-items: center; gap: 16px; padding-inline: 24px; }
.appointment-table-head { min-height: 56px; background: linear-gradient(100deg, #63247d, #80338b); color: #fff; font-size: 13px; font-weight: 700; }
.appointment-row { min-height: 90px; padding-block: 14px; border-bottom: 1px solid #eee5f2; transition: background .15s ease; }
.appointment-row:hover { background: #fbf7fd; }
.appointment-row:last-child { border-bottom: 0; }
.appointment-time { display: grid; justify-items: center; gap: 3px; width: max-content; min-width: 108px; padding: 10px 12px; border-radius: 10px; background: #f4e8f9; color: #54206e; font-size: 14px; font-weight: 750; white-space: nowrap; }
.appointment-time small { color: #8b7b99; font-size: 10px; font-weight: 500; }
.patient-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.patient-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(140deg, #ecc4c8, #8c5278); color: #fff; font-size: 10px; font-weight: 750; }
.appointment-row .patient-avatar { width: 44px; height: 44px; background: linear-gradient(140deg, #cc8ed6, #9f62b0); font-size: 13px; }
.patient-details { display: grid; gap: 4px; min-width: 0; }
.patient-cell strong { overflow: hidden; color: #2f1948; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.patient-details small { overflow: hidden; color: #7e7190; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.appointment-service { overflow: hidden; color: #5e5270; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.status { justify-self: start; padding: 5px 9px; border-radius: 5px; background: #dcf4ee; color: #227b66; font-size: 10px; font-weight: 650; white-space: nowrap; }
.status.pending { background: #fff0d9; color: #bd7c1f; }
.status.completed { background: #e9e5f7; color: #654792; }
.status.cancelled { background: #fde7eb; color: #b84c64; }
.appointment-row .status { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 9px; font-size: 12px; }
.appointment-row .status svg { width: 15px; height: 15px; stroke-width: 2; }
.row-actions { display: grid; grid-template-columns: 140px 70px 100px 150px; justify-content: start; align-items: center; gap: 8px; min-width: 0; }
.row-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 39px; border: 1px solid #ddcde8; border-radius: 9px; background: #fff; padding: 8px 11px; color: #512568; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.row-actions button[data-action="view"] { grid-column: 1; }
.row-actions button[data-action="edit"] { grid-column: 2; }
.row-actions button[data-action="confirm"], .row-actions button[data-action="complete"] { grid-column: 3; }
.row-actions button[data-action="cancel"] { grid-column: 4; }
.row-actions button svg { width: 16px; height: 16px; }
.row-actions button:hover, .row-actions button:focus-visible { background: #f4ebf9; border-color: #c8aed8; }
.row-actions button.primary-action { border-color: #702582; background: linear-gradient(120deg, #63247d, #842d8c); color: #fff; }
.row-actions button.primary-action:hover, .row-actions button.primary-action:focus-visible { border-color: #4b2465; background: #4b2465; }
.row-actions button.danger { border-color: #f0c5d1; background: #fff5f7; color: #c13d55; }
.row-actions button.danger:hover, .row-actions button.danger:focus-visible { border-color: #edbdc8; background: #fde7eb; }
.row-actions button:disabled { opacity: .55; cursor: wait; }
.empty-state { padding: 36px 18px; color: #8c7a9c; text-align: center; font-size: 12px; }

.appointment-dialog { width: min(440px, calc(100vw - 28px)); max-height: calc(100vh - 35px); overflow: auto; padding: 24px; border: 0; border-radius: 15px; box-shadow: 0 25px 75px #1d0b35a0; }
.appointment-dialog::backdrop { background: #1f0c32a6; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dialog-heading h2 { margin: 0; color: #342147; font-size: 21px; }
.appointment-dialog form { display: grid; gap: 15px; }
.appointment-dialog label { display: grid; gap: 6px; color: #5d476f; font-size: 11px; font-weight: 700; }
.appointment-dialog input, .appointment-dialog select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #e2d6e9; border-radius: 7px; color: #342344; background: #fff; font-size: 12px; }
.appointment-dialog textarea { width: 100%; min-height: 72px; padding: 10px; border: 1px solid #e2d6e9; border-radius: 7px; color: #342344; background: #fff; font-size: 12px; resize: vertical; }
.appointment-dialog textarea[readonly] { background: #f7f3f9; resize: none; }
.assessment-dialog { width: min(520px, calc(100vw - 28px)); }
.assessment-dialog h3 { margin: 22px 0 10px; color: #4d3362; font-size: 14px; }
.assessment-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 13px; border-radius: 9px; background: #f8f3fb; color: #6c587a; font-size: 12px; }
.assessment-summary strong { width: 100%; color: #342344; font-size: 15px; }
.assessment-answers { display: grid; gap: 0; margin: 0; border: 1px solid #eee6f3; border-radius: 9px; overflow: hidden; }
.assessment-answers div { padding: 9px 12px; border-bottom: 1px solid #eee6f3; }
.assessment-answers div:last-child { border-bottom: 0; }
.assessment-answers dt { color: #78688a; font-size: 11px; font-weight: 700; }
.assessment-answers dd { margin: 4px 0 0; color: #342344; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.assessment-empty, .assessment-notes { color: #6c587a; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.secondary-button { padding: 0 16px; min-height: 38px; border: 1px solid #dfd2e9; border-radius: 8px; background: #fff; color: #643f7b; font-size: 12px; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: min(330px, calc(100vw - 40px)); padding: 10px 14px; border-radius: 8px; color: white; background: #4a2068; box-shadow: 0 8px 24px #23103355; font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }

.dashboard-content { max-width: 1500px; margin: 0 auto; }
.dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dashboard-heading h1 { margin: 0 0 5px; color: #251836; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -.7px; }
.dashboard-heading p { margin: 0; color: #8b7c9c; font-size: 12px; }
.dashboard-heading time { color: #673286; text-align: right; font-size: 12px; font-weight: 750; white-space: nowrap; }
.dashboard-heading time span { color: #766486; font-weight: 500; }
.dashboard-error { margin: 0 0 15px; padding: 11px 14px; border-radius: 8px; background: #fff0f2; color: #a53254; font-size: 12px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-card { display: flex; flex-direction: column; min-width: 0; min-height: 150px; padding: 17px 17px 15px; border: 1px solid #eee6f4; border-radius: 13px; background: #fff; box-shadow: 0 5px 17px #3b175608; }
.stat-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 11px; border-radius: 9px; color: #6e2e97; background: #efe0f7; }
.stat-icon svg { width: 19px; height: 19px; }
.stat-red .stat-icon { color: #e04d70; background: #ffebf0; }
.stat-blue .stat-icon { color: #3189d3; background: #e6f2fe; }
.stat-pink .stat-icon { color: #e05b85; background: #ffeaf2; }
.stat-label { min-height: 26px; color: #473650; font-size: 11px; font-weight: 700; }
.stat-card strong { color: #281839; font-size: 30px; line-height: 1.15; }
.stat-card small { margin-top: 3px; color: #8c759d; font-size: 10px; }
.stat-red strong { color: #e44765; }
.stat-blue strong { color: #3086ce; }
.dashboard-charts { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px; }
.dashboard-bottom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, .8fr); gap: 16px; }
.dashboard-card { min-width: 0; padding: 18px; border: 1px solid #eee6f4; border-radius: 13px; background: #fff; box-shadow: 0 5px 17px #3b175608; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.card-heading h2 { margin: 0; color: #352346; font-size: 15px; line-height: 1.25; }
.card-heading p { margin: 2px 0 0; color: #9b8ba9; font-size: 10px; }
.card-period { padding: 5px 9px; border: 1px solid #eee5f4; border-radius: 6px; color: #766186; font-size: 10px; white-space: nowrap; }
.activity-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; height: 190px; padding: 6px 6px 0; border-bottom: 1px solid #eee7f3; background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #f1ebf5 calc(25% - 1px), #f1ebf5 25%); }
.activity-day { display: flex; align-items: center; flex-direction: column; min-width: 0; height: 100%; }
.activity-value { height: 18px; color: #7d5798; font-size: 10px; font-weight: 700; }
.activity-bar-track { display: flex; align-items: flex-end; width: min(100%, 38px); flex: 1; }
.activity-bar { display: block; width: 100%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #a65dca, #6e2d96); }
.activity-day:nth-child(even) .activity-bar { background: linear-gradient(180deg, #d6b4e8, #aa75cd); }
.activity-label { height: 21px; padding-top: 5px; color: #7c6a8b; font-size: 10px; }
.status-chart { display: flex; align-items: center; justify-content: space-around; gap: 19px; min-height: 190px; }
.status-donut { display: grid; place-items: center; width: clamp(110px, 12vw, 160px); height: clamp(110px, 12vw, 160px); flex: none; border-radius: 50%; background: #eee6f4; }
.donut-center { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 64%; height: 64%; border-radius: 50%; background: #fff; }
.donut-center strong { color: #30213e; font-size: 27px; line-height: 1; }
.donut-center span { margin-top: 5px; color: #9887a7; font-size: 10px; }
.status-legend { display: grid; gap: 12px; width: min(170px, 50%); }
.status-legend > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #6d5b7d; font-size: 10px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-legend strong { color: #54336d; font-size: 10px; }
.text-button { padding: 0; border: 0; background: transparent; color: #7a35a4; font-size: 11px; font-weight: 750; white-space: nowrap; }
.text-button:hover, .table-view:hover { text-decoration: underline; }
.today-table-wrap { overflow-x: auto; }
.today-table { width: 100%; border-collapse: collapse; text-align: left; }
.today-table th { padding: 10px 8px; background: #f6f0fa; color: #604e72; font-size: 10px; font-weight: 750; white-space: nowrap; }
.today-table th:first-child { border-radius: 7px 0 0 7px; }
.today-table th:last-child { border-radius: 0 7px 7px 0; }
.today-table td { padding: 10px 8px; border-bottom: 1px solid #f2ebf5; color: #6b587b; font-size: 10px; white-space: nowrap; }
.today-table tr:last-child td { border-bottom: 0; }
.table-patient { display: flex; align-items: center; gap: 8px; }
.table-patient strong { max-width: 120px; overflow: hidden; color: #3a2b48; text-overflow: ellipsis; }
.today-table .patient-avatar { width: 27px; height: 27px; }
.today-table .status { font-size: 9px; }
.table-view { padding: 5px 9px; border: 0; border-radius: 5px; background: #f1e5f8; color: #75329a; font-size: 10px; font-weight: 750; }
.today-table .today-empty { padding: 33px 8px; color: #9687a3; text-align: center; }
.quick-actions { display: grid; gap: 9px; }
.quick-actions button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 5px 8px; border: 1px solid #f1e7f6; border-radius: 7px; background: #faf6fd; color: #5d3477; text-align: left; font-size: 10px; font-weight: 700; }
.quick-actions button:hover { background: #efe0f8; }
.quick-actions button span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 5px; background: #76349f; color: white; }
.quick-actions button svg { width: 14px; height: 14px; }

.patients-content { max-width: 1500px; margin: 0 auto; }
.patient-page-heading { margin-bottom: 17px; }
.patients-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; margin-bottom: 14px; }
.patient-search { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #e7ddec; border-radius: 8px; color: #81559a; background: #fbf8fd; }
.patient-search svg { width: 16px; height: 16px; }
.patient-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #37264c; font-size: 11px; }
.patient-search input::placeholder { color: #a296ad; }
.patients-toolbar select { padding: 0 12px; border: 1px solid #e7ddec; border-radius: 8px; background: #fff; color: #654879; font-size: 11px; }
.patients-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(275px, 1fr); align-items: start; gap: 14px; }
.patients-list-panel { min-width: 0; }
.patients-table-head, .patient-list-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(110px, 1fr) 100px 80px; align-items: center; gap: 8px; }
.patients-table-head { padding: 12px 11px; color: #5d496e; font-size: 10px; font-weight: 800; }
.patient-list { display: grid; gap: 5px; }
.patient-list-row { width: 100%; min-height: 57px; padding: 8px 10px; border: 1px solid #eee8f3; border-radius: 8px; background: #fff; color: #78658b; text-align: left; font-size: 10px; box-shadow: 0 2px 7px #3c145405; }
.patient-list-row:hover { border-color: #cba5df; background: #fbf7fd; }
.patient-list-row.selected { border-color: #b67bd4; background: #f4eaf9; box-shadow: inset 3px 0 #8744ac; }
.patient-list-row b { color: #4e3564; text-align: center; }
.patient-name-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.patient-name-cell strong, .patient-list-contact { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-name-cell strong { color: #342243; }
.patient-photo { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: #efe3f4; }
.patient-detail-column { display: grid; gap: 10px; min-width: 0; }
.patient-detail-card { min-width: 0; padding: 15px; border: 1px solid #eee6f3; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px #3f1e5a0a; }
.patient-identity { display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 14px; border-bottom: 1px solid #f1eaf5; }
.patient-identity .large { width: 62px; height: 62px; flex: none; font-size: 18px; }
.patient-identity > div { min-width: 0; }
.patient-identity h2 { overflow: hidden; margin: 0 0 3px; color: #3a2454; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.patient-identity p { overflow: hidden; margin: 0 0 5px; color: #815994; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.patient-identity small { color: #9686a3; font-size: 10px; }
.patient-tabs { display: flex; gap: 3px; margin-top: 12px; border-bottom: 1px solid #eae0f0; }
.patient-tabs button { flex: 1; min-width: 0; padding: 9px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #9988a6; font-size: 10px; font-weight: 700; white-space: nowrap; }
.patient-tabs button.selected { border-bottom-color: #8037a6; color: #713094; }
.patient-tab-panel { min-height: 184px; max-height: 250px; overflow: auto; padding: 13px 0; }
.patient-info-list { display: grid; gap: 10px; }
.patient-info-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.patient-info-line svg { width: 16px; height: 16px; color: #79419b; }
.patient-info-line span { display: grid; gap: 2px; min-width: 0; }
.patient-info-line small { color: #a08dac; font-size: 9px; }
.patient-info-line strong { overflow-wrap: anywhere; color: #604974; font-size: 10px; font-weight: 650; }
.patient-tab-empty { margin: 12px 0; color: #9685a4; font-size: 11px; }
.patient-history-row, .patient-recent-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f2ecf5; }
.patient-history-row:last-child, .patient-recent-row:last-child { border-bottom: 0; }
.patient-history-row strong { color: #463154; font-size: 10px; }
.patient-history-row > span:nth-child(2) { color: #8e7b9c; font-size: 9px; }
.patient-history-row .status { font-size: 9px; }
.patient-note { padding: 8px; border-radius: 7px; background: #f9f5fb; }
.patient-note + .patient-note { margin-top: 8px; }
.patient-note strong { color: #543668; font-size: 10px; }
.patient-note p { margin: 4px 0 0; color: #746081; font-size: 10px; line-height: 1.4; white-space: pre-wrap; }
.edit-patient-button { width: 100%; }
.recent-patient-card .card-heading { margin-bottom: 7px; }
.recent-patient-card .card-heading h2 { font-size: 12px; }
.patient-recent-row span:first-child { display: grid; gap: 2px; color: #8e7a9c; font-size: 9px; }
.patient-recent-row strong { color: #563e69; font-size: 10px; }
.patient-recent-row .status { font-size: 9px; }
.patient-dialog .dialog-heading { margin-bottom: 3px; }
.patient-identity-note { margin: -6px 0 0; color: #876b99; font-size: 10px; }
.patient-dialog input[readonly] { background: #f6f2f8; color: #82758e; }

.messages-content { max-width: 1600px; margin: 0 auto; padding: 25px 22px 22px; }
.messages-page-heading { margin-bottom: 16px; }
.messages-layout { display: grid; grid-template-columns: minmax(190px, 235px) minmax(0, 1fr) minmax(190px, 240px); min-height: 560px; height: calc(100vh - 180px); max-height: 850px; overflow: hidden; border: 1px solid #eee6f2; border-radius: 13px; background: #fff; box-shadow: 0 5px 22px #3d19570c; }
.messages-inbox { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-right: 1px solid #eee7f2; }
.inbox-search { display: flex; align-items: center; gap: 5px; height: 36px; margin: 11px 9px 7px; padding: 0 9px; border: 1px solid #ece3f2; border-radius: 7px; color: #8b63a1; background: #faf7fc; }
.inbox-search svg { width: 14px; height: 14px; }
.inbox-search input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: #453452; font-size: 10px; }
.inbox-search input::placeholder { color: #a99ab2; }
.inbox-filters { display: flex; gap: 4px; padding: 0 9px 9px; }
.inbox-filters button { flex: 1; min-width: 0; height: 27px; padding: 0 3px; border: 1px solid #eee5f4; border-radius: 5px; background: #fbf8fd; color: #977fa5; font-size: 9px; font-weight: 700; }
.inbox-filters button.selected { border-color: #722c98; background: #722c98; color: #fff; }
.conversation-list { flex: 1; overflow-y: auto; }
.conversation-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 65px; padding: 10px 9px; border: 0; border-bottom: 1px solid #f3edf6; background: white; text-align: left; }
.conversation-row:hover { background: #faf5fd; }
.conversation-row.selected { background: #f2e8f8; box-shadow: inset 3px 0 #8843aa; }
.message-avatar { width: 31px; height: 31px; flex: none; border-radius: 50%; object-fit: cover; background: #ecd9f2; }
.message-initials { display: grid; place-items: center; color: #672b88; font-size: 9px; font-weight: 800; }
.message-avatar.large { width: 57px; height: 57px; font-size: 17px; }
.conversation-summary { display: grid; gap: 5px; min-width: 0; flex: 1; }
.conversation-summary strong { overflow: hidden; color: #352249; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-summary small { overflow: hidden; color: #92829e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta { display: grid; justify-items: end; gap: 8px; flex: none; }
.conversation-meta time { color: #a08eac; font-size: 8px; white-space: nowrap; }
.conversation-meta b { display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 20px; background: #e05a79; color: #fff; font-size: 8px; }
.inbox-empty { padding: 30px 12px; color: #9483a1; text-align: center; font-size: 11px; }
.message-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.thread-header { display: flex; align-items: center; gap: 9px; min-height: 61px; padding: 9px 13px; border-bottom: 1px solid #eee7f2; }
.thread-header > span:not(.message-avatar) { display: grid; gap: 3px; min-width: 0; }
.thread-header strong { overflow: hidden; color: #3b2850; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.thread-header small { overflow: hidden; color: #a08faf; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.thread-archive { margin-left: auto; padding: 5px 8px; border: 1px solid #e9dcf0; border-radius: 5px; background: #fff; color: #7c5a91; font-size: 9px; }
.thread-archive:hover { background: #f6edf9; }
.thread-messages { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; padding: 17px 15px; background: linear-gradient(180deg, #fff, #fdfbfe); }
.thread-message { display: flex; flex-direction: column; max-width: min(80%, 450px); }
.thread-message.incoming { align-self: flex-start; }
.thread-message.outgoing { align-self: flex-end; align-items: flex-end; }
.thread-message p { margin: 0; padding: 11px 13px; border-radius: 12px 12px 12px 3px; background: #f3ecf8; color: #4d3b5e; font-size: 11px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-message.outgoing p { border-radius: 12px 12px 3px 12px; background: linear-gradient(145deg, #a657c3, #6c2a8e); color: #fff; }
.thread-message time { margin-top: 4px; color: #a18faf; font-size: 9px; }
.thread-empty { margin: auto; color: #a293af; text-align: center; font-size: 11px; line-height: 1.5; }
.thread-composer { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-top: 1px solid #eee7f2; }
.thread-composer input { height: 37px; min-width: 0; flex: 1; padding: 0 13px; border: 1px solid #e8dff0; border-radius: 20px; outline: none; background: #fff; color: #473553; font-size: 11px; }
.thread-composer input:focus { border-color: #9955b6; }
.thread-composer button { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: #68258d; color: #fff; }
.thread-composer button:hover { background: #8744aa; }
.thread-composer button:disabled { opacity: .5; cursor: default; }
.thread-composer button svg { width: 16px; height: 16px; }
.message-info-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-y: auto; padding: 10px; border-left: 1px solid #eee7f2; background: #fdfbfe; }
.message-info-card { padding: 13px 10px; border: 1px solid #eee5f3; border-radius: 9px; background: #fff; }
.message-info-card h2 { margin: 0 0 13px; color: #3f2d50; font-size: 11px; }
.message-patient-profile { display: grid; justify-items: center; gap: 6px; padding-bottom: 12px; }
.message-patient-profile strong { color: #483258; font-size: 11px; }
.message-info-list { display: grid; gap: 11px; padding-top: 11px; border-top: 1px solid #f0e8f4; }
.message-profile-button { width: 100%; margin-top: 13px; padding: 7px; border: 1px solid #d8bce8; border-radius: 6px; background: #f5ebfa; color: #763597; font-size: 10px; font-weight: 700; }
.message-profile-pending { color: #9e8caa; font-size: 10px; line-height: 1.35; }
.message-quick-replies { display: grid; gap: 6px; }
.message-quick-replies button { padding: 7px 9px; border: 1px solid #e9def0; border-radius: 6px; background: #f7f1fa; color: #82539b; text-align: left; font-size: 9px; }
.message-quick-replies button:hover { background: #ead9f4; }

.gallery-content { max-width: 1500px; margin: 0 auto; }
.gallery-page-heading { margin-bottom: 20px; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.gallery-filters button { min-height: 34px; padding: 0 17px; border: 0; border-radius: 8px; color: #745b87; background: #f4edf8; font-size: 11px; font-weight: 650; }
.gallery-filters button.selected { color: #fff; background: #622384; box-shadow: 0 3px 8px #49205c24; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.gallery-card { min-width: 0; padding: 8px; border: 1px solid #ede4f1; border-radius: 13px; background: #fff; box-shadow: 0 5px 17px #3f1e5a0c; }
.gallery-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(145px, 17vw, 270px); overflow: hidden; border-radius: 8px; background: #f1eaf5; }
.gallery-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-pair img:first-child { border-right: 2px solid #fff; }
.gallery-pair::after { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #fff; color: #7d39a0; font-size: 17px; font-weight: 750; content: '⇄'; transform: translate(-50%, -50%); box-shadow: 0 2px 8px #35244344; }
.gallery-card-copy { display: flex; align-items: start; justify-content: space-between; gap: 8px; padding: 11px 5px 7px; }
.gallery-card-copy strong { display: block; color: #352047; font-size: 13px; }
.gallery-card-copy p { margin: 3px 0 0; color: #9383a1; font-size: 11px; line-height: 1.35; }
.gallery-card-actions { position: relative; }
.gallery-card-actions > button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 5px; background: transparent; color: #56316d; }
.gallery-card-actions > button:hover { background: #f2e8f8; }
.gallery-card-actions svg { width: 18px; height: 18px; }
.gallery-card-menu { position: absolute; z-index: 4; top: 25px; right: 0; display: grid; min-width: 145px; padding: 5px; border: 1px solid #e8dced; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px #2c123338; }
.gallery-card-menu button { padding: 8px; border: 0; border-radius: 4px; background: transparent; color: #4d3262; text-align: left; font-size: 11px; }
.gallery-card-menu button:hover { background: #f5ecfa; }
.gallery-card-menu button.danger { color: #bd4562; }
.gallery-card-badges { display: flex; gap: 7px; padding: 0 5px 4px; }
.gallery-badge { padding: 5px 8px; border-radius: 6px; background: #dff3ed; color: #267d69; font-size: 10px; font-weight: 700; }
.gallery-badge.draft { background: #fff0d8; color: #b17920; }
.gallery-badge.consent-missing { background: #fce8ed; color: #b74460; }
.gallery-empty { grid-column: 1 / -1; padding: 65px 20px; border: 1px dashed #d9c7e4; border-radius: 14px; color: #8e7c9b; text-align: center; font-size: 13px; }
.gallery-dialog { width: min(570px, calc(100vw - 28px)); }
.gallery-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery-upload-grid input { height: auto; min-height: 40px; padding: 9px; }
.gallery-upload-grid small { color: #9b8aa8; font-weight: 400; }
.gallery-check { display: flex !important; align-items: start; gap: 8px !important; line-height: 1.4; }
.gallery-check input { width: 16px; height: 16px; flex: none; margin: 0; }
.gallery-dialog-note { margin: -3px 0 0; color: #8e7e9b; font-size: 11px; }

.config-content { max-width: 1500px; margin: 0 auto; }
.config-heading h1 { display: flex; align-items: center; gap: 10px; }
#clinicSettingsView .config-heading h1 { color: #68278c; }
.config-note { margin: -5px 0 18px; padding: 10px 13px; border: 1px solid #eee2f4; border-radius: 8px; background: #faf5fd; color: #806b90; font-size: 11px; line-height: 1.45; }
.config-note.inline { margin: 0; }
.config-pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: #e6f4ed; color: #2b8061; font-size: 10px; font-weight: 800; white-space: nowrap; }
.config-heading .config-pill { font-size: 10px; }
.config-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.config-tabs button, .settings-tabs button { border: 0; border-radius: 7px; background: #f3eaf8; color: #78578c; font-size: 11px; font-weight: 700; cursor: pointer; }
.config-tabs button { padding: 10px 17px; }
.config-tabs button.selected, .settings-tabs button.selected { background: #68278c; color: #fff; }
.config-layout { display: grid; gap: 15px; align-items: start; }
.chatbot-layout { grid-template-columns: minmax(0, 1.6fr) minmax(265px, .85fr); }
.settings-layout { grid-template-columns: 190px minmax(0, 1fr); }
.config-card { min-width: 0; padding: 18px; border: 1px solid #eee5f3; border-radius: 11px; background: #fff; box-shadow: 0 5px 18px #3920440b; }
.config-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.config-card-head h2 { margin: 0; color: #38244b; font-size: 16px; }
.config-card-head p { margin: 4px 0 0; color: #9786a3; font-size: 11px; line-height: 1.4; }
.config-add { min-height: 32px; padding: 0 11px; font-size: 10px; white-space: nowrap; }
.config-search { display: grid; gap: 5px; margin-bottom: 14px; color: #624974; font-size: 10px; font-weight: 700; }
.config-search input, .config-form input, .config-form textarea, .closed-date-form input, .hours-row input[type="time"] { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid #e7ddec; border-radius: 7px; outline: 0; background: #fff; color: #3b2a4c; font: inherit; font-size: 11px; }
.config-search input:focus, .config-form input:focus, .config-form textarea:focus, .closed-date-form input:focus, .hours-row input:focus { border-color: #9252b0; box-shadow: 0 0 0 2px #9252b01c; }
.config-list { display: grid; gap: 8px; }
.config-list-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid #f0e8f4; border-radius: 8px; }
.config-list-item strong { color: #38244b; font-size: 11px; }
.config-list-item p { margin: 5px 0 0; color: #8a7898; font-size: 10px; line-height: 1.4; }
.config-item-actions { display: flex; gap: 5px; flex: none; }
.config-item-actions button { padding: 5px 7px; border: 0; background: transparent; color: #733795; font-size: 10px; font-weight: 700; cursor: pointer; }
.config-item-actions button:last-child { color: #b84e64; }
.config-empty { padding: 22px; color: #9583a2; text-align: center; font-size: 11px; }
.config-form { display: grid; gap: 13px; }
.config-form label { display: grid; gap: 6px; color: #513b62; font-size: 11px; font-weight: 700; }
.config-form textarea { resize: vertical; line-height: 1.45; }
.config-form .config-check, .hours-row .config-check { display: flex; align-items: center; gap: 8px; }
.config-check input { width: 15px; height: 15px; flex: none; accent-color: #743391; }
.config-form-actions { display: flex; justify-content: flex-end; gap: 9px; }
.config-form-actions .secondary-button { padding: 0 15px; }
.config-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chatbot-preview { display: flex; flex-direction: column; min-height: 470px; max-height: 660px; }
.preview-messages { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; min-height: 240px; overflow-y: auto; padding: 14px 8px; border: 1px solid #f0e8f4; border-radius: 8px; background: #fcf9fd; }
.preview-bubble { max-width: 90%; padding: 10px 11px; border-radius: 10px; font-size: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-bubble.bot { background: #eee2f6; color: #493159; }
.preview-bubble.thinking { opacity: .7; font-style: italic; }
.preview-bubble.patient { align-self: flex-end; background: #713094; color: #fff; }
.preview-suggestions { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 0; }
.preview-suggestions button { padding: 5px 7px; border: 1px solid #dbc4e8; border-radius: 6px; background: #fff; color: #743996; font-size: 9px; cursor: pointer; }
.preview-suggestions button:disabled, .preview-composer button:disabled { opacity: .55; cursor: wait; }
.preview-composer { display: flex; gap: 7px; }
.preview-composer input { flex: 1; min-width: 0; height: 35px; padding: 0 10px; border: 1px solid #e7ddec; border-radius: 18px; outline: none; font-size: 10px; }
.preview-composer button { display: grid; place-items: center; width: 35px; height: 35px; border: 0; border-radius: 50%; background: #713094; color: #fff; }
.preview-composer svg { width: 16px; height: 16px; }
.settings-tabs { display: grid; gap: 5px; padding: 8px; border: 1px solid #eee5f3; border-radius: 10px; background: #fff; }
.settings-tabs button { padding: 12px 11px; text-align: left; }
.settings-card { min-height: 340px; }
.clinic-logo-row { display: flex; align-items: center; gap: 11px; margin: 2px 0 16px; }
.clinic-logo-row img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; }
.clinic-logo-row span { display: grid; gap: 4px; color: #493457; font-size: 11px; }
.clinic-logo-row small { color: #9a89a5; font-size: 10px; }
.hours-list { display: grid; gap: 8px; }
.hours-row { display: grid; grid-template-columns: minmax(105px, .8fr) minmax(0, 1.4fr) minmax(0, 1.4fr); align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3edf5; color: #806c8d; font-size: 11px; }
.hours-period { display: flex; align-items: center; gap: 5px; min-width: 0; }
.hours-period small { color: #8b7399; font-size: 9px; }
.hours-period input[type="time"] { min-width: 0; }
.hours-row input:disabled { opacity: .45; }
.closed-date-form { display: flex; gap: 9px; margin-bottom: 16px; }
.closed-date-form input { max-width: 210px; }
.closed-date-form .primary-button { padding: 0 12px; }

@media (max-width: 1450px) {
  .appointment-table-head { display: none; }
  .appointment-row { grid-template-columns: 112px minmax(0, 1fr) minmax(110px, .7fr) 116px; gap: 10px 14px; padding: 15px 18px; }
  .row-actions { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 1050px) {
  .calendar-body { grid-template-columns: 185px minmax(0, 1fr); }
  .calendar-sidebar { padding: 16px 10px; }
  .chatbot-layout { grid-template-columns: minmax(0, 1fr); }
  .chatbot-preview { max-height: 520px; }
  .app-shell { grid-template-columns: 202px minmax(0, 1fr); }
  .page-content { padding: 25px 24px 40px; }
  .appointment-row { grid-template-columns: 108px minmax(0, 1fr) minmax(100px, .7fr) 110px; gap: 8px; padding-inline: 12px; }
  .dashboard-bottom { grid-template-columns: minmax(0, 1.6fr) minmax(170px, .8fr); }
  .patients-layout { grid-template-columns: minmax(0, 1.2fr) minmax(250px, 1fr); }
  .patients-table-head, .patient-list-row { grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) 75px 52px; gap: 4px; }
  .messages-layout { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); height: auto; max-height: none; }
  .messages-inbox, .message-thread { height: 550px; }
  .message-info-column { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; border-top: 1px solid #eee7f2; }
}
@media (max-width: 900px) {
  .row-actions { display: flex; flex-wrap: wrap; }
  .row-actions button { width: auto; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-charts, .dashboard-bottom { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patients-layout { grid-template-columns: 1fr; }
  .patient-detail-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .calendar-body { grid-template-columns: minmax(0, 1fr); }
  .calendar-sidebar { padding: 14px 16px; border-right: 0; border-bottom: 1px solid #eee7f2; }
  .mini-calendar { max-width: 320px; }
  .calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-top: 12px; }
  .calendar-legend strong { width: 100%; }
  .schedule-scroll { max-height: 560px; }
  .month-calendar { min-width: 630px; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-tabs { display: flex; flex-wrap: wrap; }
  .settings-tabs button { padding: 9px 11px; }
  .gallery-grid { gap: 12px; }
  .gallery-pair { height: 170px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; width: min(270px, 84vw); transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 28px #2e123c33; }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu { display: inline-grid; }
  .topbar { height: 58px; padding: 0 13px; gap: 7px; }
  .global-search { width: auto; flex: 1; }
  .topbar-actions { gap: 3px; }
  .admin-account span { display: none; }
  .page-content { padding: 23px 16px 36px; }
  .calendar-toolbar { grid-template-columns: 1fr auto; row-gap: 10px; }
  .date-controls { grid-column: 1; grid-row: 2; justify-self: start; }
  .today-button { grid-column: 2; grid-row: 2; }
  .calendar-day { min-height: 47px; }
  .appointment-row { grid-template-columns: 92px minmax(0, 1fr) 104px; }
  .appointment-time { min-width: 0; padding: 8px 7px; font-size: 11px; }
  .appointment-row .patient-cell { grid-column: 2; grid-row: 1; }
  .appointment-row .appointment-service { grid-column: 2 / -1; grid-row: 2; padding-left: 2px; }
  .appointment-row .status { grid-column: 3; grid-row: 1; }
  .row-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; grid-row: 3; }
  .row-actions button { width: auto; }
  .dashboard-heading { margin-bottom: 18px; }
  .patient-detail-column { grid-template-columns: 1fr; }
  .messages-layout { min-height: 480px; }
}
@media (max-width: 470px) {
  .config-heading { align-items: flex-start; flex-direction: column; }
  .config-heading .primary-button { width: auto; min-width: 0; padding: 0 14px; font-size: 11px; }
  .config-heading h1 { flex-wrap: wrap; }
  .config-card { padding: 13px; }
  .config-tabs button { padding: 8px 10px; font-size: 10px; }
  .config-item-actions { flex-direction: column; }
  .config-form-grid { grid-template-columns: 1fr; }
  .hours-row { grid-template-columns: 1fr; gap: 6px; }
  .hours-period input[type="time"] { padding: 6px 4px; font-size: 10px; }
  .services-page-heading { align-items: flex-start; flex-direction: column; }
  .services-page-heading p { max-width: none; }
  .services-page-heading .primary-button { width: auto; min-width: 0; padding: 0 14px; font-size: 11px; }
  .service-filters { gap: 5px; }
  .service-filters button { padding: 0 10px; font-size: 10px; }
  .services-toolbar { gap: 7px; }
  .services-toolbar select { min-width: 105px; padding: 0 5px; }
  .gallery-page-heading { align-items: flex-start; flex-direction: column; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-pair { height: 200px; }
  .gallery-upload-grid { grid-template-columns: 1fr; }
  .messages-content { padding: 18px 10px 20px; }
  .messages-layout { display: flex; flex-direction: column; height: auto; max-height: none; min-height: 0; }
  .messages-inbox { height: auto; max-height: 230px; flex: none; border-right: 0; border-bottom: 1px solid #eee7f2; }
  .conversation-list { max-height: 140px; }
  .message-thread { height: 430px; }
  .message-info-column { display: grid; grid-template-columns: 1fr; }
  .thread-message { max-width: 85%; }
  .patients-toolbar { grid-template-columns: minmax(0, 1fr) 112px; gap: 7px; }
  .patients-toolbar select { padding: 0 6px; font-size: 10px; }
  .patients-table-head, .patient-list-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 62px 32px; gap: 3px; }
  .patients-table-head { padding: 10px 5px; font-size: 9px; }
  .patient-list-row { padding: 7px 5px; font-size: 9px; }
  .patient-photo, .patient-name-cell .patient-avatar { display: none; }
  .patient-list-contact { font-size: 9px; }
  .dashboard-heading { align-items: flex-start; gap: 8px; }
  .dashboard-heading p { max-width: 210px; line-height: 1.35; }
  .dashboard-heading time { font-size: 10px; }
  .dashboard-stats { gap: 9px; }
  .stat-card { min-height: 133px; padding: 12px; }
  .stat-label { font-size: 10px; }
  .stat-card strong { font-size: 26px; }
  .dashboard-card { padding: 14px; }
  .status-chart { gap: 10px; }
  .status-donut { width: 110px; height: 110px; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .today-table { min-width: 420px; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 22px; }
  .page-heading p { max-width: 190px; line-height: 1.35; }
  .page-heading .primary-button { width: 39px; height: 39px; min-width: 39px; padding: 0; font-size: 0; }
  .page-heading .primary-button svg { width: 18px; height: 18px; }
  .gallery-page-heading p { max-width: none; }
  .gallery-page-heading .primary-button { width: auto; min-width: 0; padding: 0 14px; font-size: 11px; }
  .calendar-body { padding-inline: 0; }
  .calendar-toolbar { padding-inline: 10px; }
  .view-toggle button { min-width: 53px; padding-inline: 8px; }
  .date-controls strong { min-width: 118px; font-size: 14px; }
  .compact { width: 27px; height: 27px; }
  .today-button { width: 68px; }
  .calendar-day { min-height: 42px; font-size: 11px; }
  .calendar-day.selected::before { width: 28px; height: 28px; }
  .weekday { height: 32px; font-size: 10px; }
  .appointment-row { grid-template-columns: 76px minmax(0, 1fr) 90px; gap: 6px; padding-inline: 9px; }
  .appointment-row .patient-avatar { width: 30px; height: 30px; font-size: 10px; }
  .patient-cell { gap: 5px; }
  .appointment-time { font-size: 10px; }
  .patient-cell strong { font-size: 12px; }
  .appointment-row .status { padding: 5px 7px; font-size: 10px; }
  .row-actions { grid-column: 1 / -1; padding-top: 5px; }
  .row-actions button { min-height: 36px; }
}
.dentist-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0; padding:14px; background:#fff; border:1px solid #e8ddec; border-radius:12px; }
.dentist-controls strong { margin-right:auto; }
.thread-message .message-tools { display:flex; align-items:center; gap:8px; font-size:11px; }
.thread-message .message-tools button { border:0; background:transparent; color:#6b2b91; cursor:pointer; text-decoration:underline; }
.action-dialog { width: min(500px, calc(100vw - 28px)); }
.action-dialog-description { margin: -3px 0 1px; color: #6d5b78; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 45vh; overflow: auto; }
.action-dialog-fields { display: grid; gap: 15px; }
.action-dialog-fields:empty { display: none; }
.action-dialog .danger-button { background: #b42342; border-color: #b42342; }