trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}

.animate-slide-in {
  animation: slideInRight 0.8s ease-out forwards;
}

/* Basket drawer: highlight a newly-added item so the practitioner can
   immediately see where it landed when the drawer opens. */
@keyframes basket-item-glow-fade {
  0% {
    background-color: rgba(135, 168, 117, 0.30);
    box-shadow: inset 0 0 0 2px rgba(135, 168, 117, 0.55);
  }
  60% {
    background-color: rgba(135, 168, 117, 0.18);
    box-shadow: inset 0 0 0 1px rgba(135, 168, 117, 0.35);
  }
  100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 0 transparent;
  }
}

.basket-item-glow {
  animation: basket-item-glow-fade 2s ease-out;
}

[data-animate] {
  opacity: 0;
}

[data-animate].animate {
  animation: fadeUp 0.8s ease-out forwards;
}

.hover-scale {
  transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Simple nature green loading spinner */
@keyframes nature-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.nature-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f0f4f1;
  border-top: 4px solid #3e7e62;
  border-radius: 50%;
  animation: nature-spin 1s linear infinite;
}

/* Wizard step transitions */
.wizard-step-active {
  opacity: 1;
  transform: translateX(0);
}

.wizard-step-exit {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.wizard-step-exit-left {
  opacity: 0;
  transform: translateX(-20px);
}

.wizard-step-exit-right {
  opacity: 0;
  transform: translateX(20px);
}

.wizard-step-enter {
  opacity: 0;
}

.wizard-step-enter-right {
  transform: translateX(20px);
}

.wizard-step-enter-left {
  transform: translateX(-20px);
}
@import "flatpickr.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* === Trix Editor Overrides === */

/* Hide file tools (we use custom attachment system) */
.trix-button-group--file-tools {
  display: none !important;
}

/* Hide code buttons (not useful for clinical notes) */
.trix-button--icon-code {
  display: none !important;
}

/* Custom underline button icon. Trix renders every toolbar icon as a background
   image on the ::before (and hides the button's text label via
   text-indent: -9999px), so we supply an SVG here exactly like the built-in
   bold / italic buttons. The earlier text-"U" approach rendered blank: Trix's
   own `.trix-button--icon::before` rule outranks ours on specificity, forcing
   display:inline-block, and the inherited text-indent then shifted the glyph
   off-screen. */
.trix-button--icon-underline::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2017c3.31%200%206-2.69%206-6V3h-2.5v8c0%201.93-1.57%203.5-3.5%203.5S8.5%2012.93%208.5%2011V3H6v8c0%203.31%202.69%206%206%206zm-7%202v2h14v-2H5z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

/* Match Trix editor border/focus with design system */
trix-editor {
  border: 1px solid theme('colors.nature.sandy-gray.300') !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 0.75rem !important;
  min-height: 120px;
  font-size: 0.875rem;
  color: theme('colors.nature.sandy-gray.800');
  background: white;
  transition: box-shadow 0.15s ease, border-radius 0.15s ease;
}

trix-editor:focus {
  outline: none !important;
  border-color: theme('colors.nature.sandy-gray.300') !important;
  box-shadow: 0 0 0 1px theme('colors.nature.green.DEFAULT') !important;
}

/* Style the toolbar — collapsed by default, expands on focus */
trix-toolbar {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0;
  background: theme('colors.nature.sandy-gray.50');
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-color 0.2s ease;
}

/* Expand toolbar when editor or toolbar button has focus.
   max-height fits up to two wrapped button rows on narrow phones (see below). */
trix-toolbar:focus-within,
trix-toolbar:has(+ trix-editor:focus) {
  max-height: 6rem;
  opacity: 1;
  padding: 0.25rem;
  border-color: theme('colors.nature.sandy-gray.200');
}

/* Mobile fit: Trix's button row is `flex-wrap: nowrap` by default, and its
   min-content width propagates up through the grid/flex containers (whose
   min-width is `auto`), forcing the editor — and the whole consultation form —
   wider than a narrow phone. Letting the buttons wrap removes that floor so the
   fields always stay within the screen, and keeps every button reachable
   (instead of clipped / horizontally scrolling). */
trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* And let buttons wrap *within* a group too, so even ~320px phones fit. */
trix-toolbar .trix-button-group {
  flex-wrap: wrap;
}

/* Long words / pasted URLs in the body wrap instead of forcing width. */
.trix-content {
  overflow-wrap: anywhere;
}

/* Make each consultation field a query container, so the toolbar can adapt to
   the *field's* own width rather than the viewport. This is what lets a
   half-width field (the side-by-side Tongue / Pulse diagnostics, or any field
   when the resizable side panel narrows the form) trim its toolbar even on a
   wide screen. inline-size containment also stops the toolbar's min-content
   width from propagating up and forcing the field — and the form — wider. */
[data-controller~="field-attachments"] {
  container-type: inline-size;
  container-name: trix-field;
}

/* === Consultation field attach affordance ("+" upload button) === */

/* Keep the icon button a perfect square so rounded-full reads as a circle, not
   a pill. The global mobile rule (~line 812) forces min-height: 44px on every
   <button> for touch targets, which would stretch this 24px button to 24x44 (a
   vertical pill on tablets); pin its box back to 1.5rem (w-6 / h-6) and stop it
   shrinking in the flex container. appearance: none strips any native chrome.
   Scoped to the direct-child icon buttons so the dropdown menu items (Upload
   file / Take photo) keep their full-height touch targets. */
.attach-affordance > button {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

/* On touch devices the hover-reveal never fires and focus-within drops the
   instant the button is tapped, so keep the attach affordance permanently
   visible. Fine-pointer (desktop) devices keep the existing hover /
   focus-within reveal untouched. The icon keeps its compact 24px size so it
   stays discreet on small screens. */
@media (hover: none) and (pointer: coarse) {
  .attach-affordance {
    opacity: 1 !important;
  }
}

/* Trim low-value formatting buttons whenever the field itself is narrow, so the
   toolbar fits a single row instead of wrapping to two. This fires for both a
   full-width field on a phone AND a field that is only half-width on a wide
   screen (side-by-side Tongue / Pulse, or the narrowed side-panel layout) — the
   full ~14-button toolbar needs ~486px and wraps below that. Kept: Bold, Italic,
   Underline, Bullet list, Numbered list, Undo, AI. Buttons stay full-size so tap
   targets remain finger-friendly. Scoped via the `trix-field` container so the
   template / notification editors (which aren't query containers) keep their
   full toolbar. */
@container trix-field (max-width: 500px) {
  [data-controller~="field-attachments"] .trix-button--icon-strike,
  [data-controller~="field-attachments"] .trix-button--icon-link,
  [data-controller~="field-attachments"] .trix-button--icon-heading-1,
  [data-controller~="field-attachments"] .trix-button--icon-quote,
  [data-controller~="field-attachments"] .trix-button--icon-decrease-nesting-level,
  [data-controller~="field-attachments"] .trix-button--icon-increase-nesting-level,
  [data-controller~="field-attachments"] .trix-button--icon-redo {
    display: none !important;
  }
}

/* Seamlessly connect toolbar and editor when toolbar is visible */
trix-toolbar:focus-within + trix-editor,
trix-toolbar:has(+ trix-editor:focus) + trix-editor {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

trix-toolbar .trix-button {
  border-color: transparent;
  border-radius: 0.25rem;
  width: 2rem;
  height: 2rem;
  /* Keep these icon buttons square. The global mobile rule below (~line 812)
     forces min-height: 44px on every <button> for touch targets, which would
     stretch these 32px buttons into vertical rectangles — so pin min-height
     back to 2rem here (higher specificity wins). min-width + no flex shrink
     guard the horizontal axis too. The trimmed button set (below 640px) is
     what lets the remaining squares fit on one row. */
  min-width: 2rem;
  min-height: 2rem;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  background-size: 60%;
  opacity: 0.45;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

trix-toolbar .trix-button:hover {
  background: theme('colors.nature.sandy-gray.200');
  opacity: 0.8;
}

trix-toolbar .trix-button.trix-active {
  background: theme('colors.nature.green.DEFAULT');
  color: white;
  opacity: 1;
}

trix-toolbar .trix-button-group {
  border-color: theme('colors.nature.sandy-gray.200');
  border-radius: 0.25rem;
  margin-right: 0.5rem;
}

/* Restore list and blockquote styles inside Trix (Tailwind Preflight strips them) */
trix-editor ul,
.trix-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

trix-editor ol,
.trix-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

trix-editor blockquote,
.trix-content blockquote {
  border-left: 3px solid theme('colors.nature.sandy-gray.300');
  padding-left: 0.75rem;
  margin: 0.5rem 0;
  color: theme('colors.nature.sandy-gray.600');
}

/* === AI note-formatting toolbar button + menu === */

/* Sparkle button — sits in the (global) Trix toolbar, tinted green as the AI
   accent so it reads as distinct from the formatting buttons. */
trix-toolbar .trix-button-group--ai-tools {
  border: none;
  margin-right: 0;
}

trix-toolbar .trix-ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  color: theme('colors.nature.green.DEFAULT');
  opacity: 0.7;
}

trix-toolbar .trix-ai-button svg {
  width: 1.05rem;
  height: 1.05rem;
}

trix-toolbar .trix-ai-button:hover {
  background: rgba(107, 142, 91, 0.18); /* nature-green-light @ 18% */
  color: theme('colors.nature.green.dark');
  opacity: 1;
}

trix-toolbar .trix-ai-button:disabled {
  cursor: default;
}

/* Pulsing while a format request is in flight. */
trix-toolbar .trix-ai-button--working {
  animation: ai-sparkle-pulse 1s ease-in-out infinite;
  opacity: 1;
}

@keyframes ai-sparkle-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* The 2-item popover anchored under the sparkle button. */
.ai-format-menu {
  position: absolute;
  z-index: 9999;
  min-width: 16rem;
  max-width: calc(100vw - 1rem);
  background: white;
  border: 1px solid theme('colors.nature.sandy-gray.200');
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 0.25rem;
}

.ai-format-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  transition: background-color 0.12s ease;
}

.ai-format-menu__item:hover,
.ai-format-menu__item:focus-visible {
  background: rgba(107, 142, 91, 0.12); /* nature-green-light @ 12% */
  outline: none;
}

.ai-format-menu__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: theme('colors.nature.sandy-gray.800');
}

.ai-format-menu__caption {
  display: block;
  font-size: 0.75rem;
  color: theme('colors.nature.sandy-gray.500');
  margin-top: 0.0625rem;
}

/* Undo banner shown above the editor after a format. */
.ai-undo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  background: rgba(107, 142, 91, 0.12); /* nature-green-light @ 12% */
  border: 1px solid rgba(75, 101, 66, 0.25); /* nature-green @ 25% */
  border-radius: 0.375rem;
  color: theme('colors.nature.green.dark');
}

.ai-undo-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
}

.ai-undo-banner__label svg {
  width: 0.9rem;
  height: 0.9rem;
}

.ai-undo-banner__undo {
  font-weight: 600;
  color: theme('colors.nature.green.DEFAULT');
  text-decoration: underline;
}

.ai-undo-banner__undo:hover {
  color: theme('colors.nature.green.dark');
}

/* Lightweight toast for errors / access prompts. */
.ai-format-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.625rem 1rem;
  background: theme('colors.nature.sandy-gray.800');
  color: white;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ai-format-toast--hide {
  opacity: 0;
  transform: translateX(-50%) translateY(0.5rem);
}

.ai-format-toast__action {
  flex-shrink: 0;
  font-weight: 600;
  color: theme('colors.nature.green.light');
  text-decoration: underline;
  white-space: nowrap;
}

/* === Template Editor Trix Overrides === */

/* Hide heading, quote, and strike in notification template editors */
.template-trix-editor .trix-button--icon-heading-1,
.template-trix-editor .trix-button--icon-quote,
.template-trix-editor .trix-button--icon-strike {
  display: none !important;
}

/* Always show toolbar in template editors (no collapse) */
.template-trix-editor trix-toolbar {
  max-height: 3rem;
  opacity: 1;
  overflow: visible;
}

.template-trix-editor trix-toolbar + trix-editor {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Placeholder chip styling inside Trix attachment figures */
.trix-placeholder-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  margin: 0 0.125rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: rgba(75, 101, 66, 0.15);
  color: theme('colors.nature.green.dark');
  border: 1px solid rgba(75, 101, 66, 0.25);
  user-select: none;
  cursor: default;
  vertical-align: middle;
}

/* Inline attachment figures for placeholder chips (no block display) */
.template-trix-editor figure[data-trix-attachment] {
  display: inline;
  margin: 0;
  padding: 0;
}

.template-trix-editor figure[data-trix-attachment] figcaption {
  display: none;
}

/* Compact prose for side panel rich text */
.prose-compact h1 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.25rem !important;
}

.prose-compact h2 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.prose-compact p {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.prose-compact ul, .prose-compact ol {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  padding-left: 1.25rem !important;
}

.prose-compact blockquote {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  padding-left: 0.75rem !important;
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  /* Dashed right border for calendar practitioner separators */
  .border-r-dashed {
    border-right-style: dashed !important;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


@layer components {
  /* Hide default details marker for custom-styled summaries */
  summary::-webkit-details-marker {
    display: none;
  }
  summary::marker {
    display: none;
    content: '';
  }

  /* Override @tailwindcss/forms default blue focus ring on select elements */
  select:focus {
    --tw-ring-color: theme('colors.nature.green.DEFAULT');
    border-color: theme('colors.nature.green.DEFAULT');
  }

  select option:checked,
  select option:hover {
    background-color: theme('colors.nature.beige.DEFAULT') !important;
    color: theme('colors.nature.green.dark') !important;
  }
  
  .prose-nature {
    @apply prose prose-lg prose-zinc;
    
    & h1, & h2, & h3, & h4, & h5, & h6 {
      @apply text-nature-green font-semibold;
    }
    
    & a {
      @apply text-nature-green hover:text-nature-green-dark no-underline hover:underline;
    }
    
    & ul {
      @apply list-disc list-outside pl-5 space-y-1;
    }
    
    & p {
      @apply text-nature-sandy-gray-600 mb-4;
    }
    
    & .lead {
      @apply text-lg font-normal text-nature-sandy-gray-600 mb-6;
    }
  }
  
  /* Tooltip styles */
  .tooltip-popup {
    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white bg-nature-sandy-gray-800 rounded shadow-md pointer-events-none opacity-0 transition-opacity duration-200;
    max-width: 200px;
  }
  
  .tooltip-popup.visible {
    @apply opacity-100;
  }
  
  /* Custom slider styles for pricing calculator */
  .slider-thumb-green {
    @apply cursor-pointer;
    -webkit-appearance: none;
    appearance: none;
    background: theme('colors.nature.sandy-gray.500');
    height: 12px;
    width: 100%;
    border-radius: 6px;
  }
  
  /* Webkit browsers (Chrome, Safari, Edge) */
  .slider-thumb-green::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: theme('colors.nature.green.DEFAULT');
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    border: none;
    outline: none;
    margin-top: -6px;
  }
  
  .slider-thumb-green::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: theme('colors.nature.green.DEFAULT');
  }
  
  .slider-thumb-green::-webkit-slider-runnable-track {
    background: theme('colors.nature.sandy-gray.300');
    height: 12px;
    width: 100%;
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
  }
  
  /* Firefox */
  .slider-thumb-green::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: theme('colors.nature.green.DEFAULT');
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    border: none;
    outline: none;
    margin-top: -6px;
    -moz-appearance: none;
    appearance: none;
  }
  
  .slider-thumb-green::-moz-range-thumb:hover {
    transform: scale(1.1);
  }
  
  .slider-thumb-green::-moz-range-track {
    background: theme('colors.nature.sandy-gray.300');
    height: 12px;
    width: 100%;
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
  }
  
  /* Edge/IE specific */
  .slider-thumb-green::-ms-thumb {
    width: 24px;
    height: 24px;
    background: theme('colors.nature.green.DEFAULT');
    border-radius: 50%;
    cursor: pointer;
    border: none;
    outline: none;
  }
  
  .slider-thumb-green::-ms-track {
    background: theme('colors.nature.sandy-gray.300');
    height: 12px;
    width: 100%;
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
  }
  
  /* Remove focus outline and any default browser styling */
  .slider-thumb-green:focus {
    outline: none;
  }
  
  .slider-thumb-green:focus::-webkit-slider-thumb {
    outline: none;
    box-shadow: 0 0 0 3px rgba(75, 101, 66, 0.2);
    background: theme('colors.nature.green.DEFAULT');
  }
  
  .slider-thumb-green:focus::-moz-range-thumb {
    outline: none;
    box-shadow: 0 0 0 3px rgba(75, 101, 66, 0.2);
    background: theme('colors.nature.green.DEFAULT');
  }

  /* Flatpickr nature-green theme customization */

  /* Selected date - nature green background */
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.startRange:focus,
  .flatpickr-day.endRange:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover,
  .flatpickr-day.selected.prevMonthDay,
  .flatpickr-day.startRange.prevMonthDay,
  .flatpickr-day.endRange.prevMonthDay,
  .flatpickr-day.selected.nextMonthDay,
  .flatpickr-day.startRange.nextMonthDay,
  .flatpickr-day.endRange.nextMonthDay {
    background: theme('colors.nature.green.DEFAULT') !important;
    border-color: theme('colors.nature.green.DEFAULT') !important;
    color: #fff !important;
  }

  /* Today's date - nature green border */
  .flatpickr-day.today {
    border-color: theme('colors.nature.green.light') !important;
  }

  .flatpickr-day.today:hover,
  .flatpickr-day.today:focus {
    border-color: theme('colors.nature.green.DEFAULT') !important;
    background: theme('colors.nature.green.light') !important;
    color: #fff !important;
  }

  /* Hover states - nature beige */
  .flatpickr-day.inRange,
  .flatpickr-day.prevMonthDay.inRange,
  .flatpickr-day.nextMonthDay.inRange,
  .flatpickr-day.today.inRange,
  .flatpickr-day.prevMonthDay.today.inRange,
  .flatpickr-day.nextMonthDay.today.inRange,
  .flatpickr-day:hover,
  .flatpickr-day.prevMonthDay:hover,
  .flatpickr-day.nextMonthDay:hover,
  .flatpickr-day:focus,
  .flatpickr-day.prevMonthDay:focus,
  .flatpickr-day.nextMonthDay:focus {
    background: theme('colors.nature.beige.DEFAULT') !important;
    border-color: theme('colors.nature.beige.dark') !important;
    color: theme('colors.nature.sandy-gray.800') !important;
  }

  /* Month/year navigation arrows - nature green on hover */
  .flatpickr-months .flatpickr-prev-month:hover,
  .flatpickr-months .flatpickr-next-month:hover {
    color: theme('colors.nature.green.DEFAULT') !important;
  }

  .flatpickr-months .flatpickr-prev-month:hover svg,
  .flatpickr-months .flatpickr-next-month:hover svg {
    fill: theme('colors.nature.green.DEFAULT') !important;
  }

  /* Month dropdown hover */
  .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: theme('colors.nature.beige.light') !important;
  }

  /* Focus ring for year input */
  .flatpickr-current-month input.cur-year:focus {
    background: theme('colors.nature.beige.light') !important;
    outline: none !important;
    box-shadow: 0 0 0 2px theme('colors.nature.green.DEFAULT') !important;
  }

  /* Document preview styles for DOCX rendering */
  .docx-preview {
    font-family: inherit;
    line-height: 1.6;
    color: theme('colors.nature.sandy-gray.800');
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .docx-preview section.docx-wrapper {
    background: white;
    padding: 1rem;
    width: 100% !important;
    max-width: 100% !important;
  }

  .docx-preview article.docx {
    background: white;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .docx-preview table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
  }

  .docx-preview td,
  .docx-preview th {
    border: 1px solid theme('colors.nature.sandy-gray.300');
    padding: 0.5rem;
  }

  .docx-preview th {
    background-color: theme('colors.nature.sandy-gray.100');
    font-weight: 600;
  }

  .docx-preview p {
    margin-bottom: 0.75rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Ensure all docx content respects container width */
  .docx-preview * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .docx-preview h1,
  .docx-preview h2,
  .docx-preview h3,
  .docx-preview h4,
  .docx-preview h5,
  .docx-preview h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: theme('colors.nature.sandy-gray.900');
  }

  .docx-preview ul,
  .docx-preview ol {
    margin: 0.5rem 0 0.5rem 1.5rem;
  }

  .docx-preview li {
    margin-bottom: 0.25rem;
  }

  .docx-preview img {
    max-width: 100%;
    height: auto;
  }

  /* === Mobile Responsiveness Overrides === */

  /* Full-width content on mobile — remove max-width constraints */
  @media (max-width: 767px) {
    .max-w-5xl,
    .max-w-screen-xl,
    .max-w-4xl,
    .max-w-6xl,
    .max-w-7xl {
      max-width: 100% !important;
    }

    .px-6 {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    .px-4 {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    /* Minimum 44px touch targets for interactive elements */
    button,
    select,
    a.btn,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
      min-height: 44px;
    }

    /* Hide drag resize handles on mobile */
    [data-appointment-drag-target="appointment"]::after,
    [data-appointment-drag-target="unavailableBlock"]::after {
      display: none !important;
    }

    /* Ensure appointment blocks allow vertical scrolling on mobile */
    [data-controller*="appointment-context-menu"] {
      touch-action: pan-y;
    }

    /* Narrower time column on mobile (still legible) */
    :root {
      --time-col-width: 50px;
    }
  }

  /* Turbo Frame loading states for calendar skeleton */
  turbo-frame[busy] .calendar-content {
    display: none;
  }

  turbo-frame[busy] .calendar-skeleton {
    display: block;
  }

  turbo-frame:not([busy]) .calendar-skeleton {
    display: none;
  }

  /* Appointment resize cursor and visual feedback */
  /* Resize cursor zone on appointment bottom edge - only for non-completed, non-paid appointments */
  /* Note: Appointments use position: absolute from Tailwind class for calendar layout.
     The ::after pseudo-element still works because absolute also establishes a positioning context. */
  [data-appointment-drag-target="appointment"]:not([data-appointment-status="completed"]):not([data-payment-status="paid"])::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize;
    z-index: 1;
  }

  /* Visual feedback during resize */
  [data-appointment-drag-target="appointment"].resizing {
    border: 2px solid theme('colors.nature.green.DEFAULT') !important;
    z-index: 50 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* Unavailable block resize cursor and visual feedback */
  /* Note: Unavailable blocks use position: absolute from Tailwind class for calendar layout.
     The ::after pseudo-element still works because absolute also establishes a positioning context. */
  [data-appointment-drag-target="unavailableBlock"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize;
    z-index: 1;
  }

  /* Visual feedback during resize - includes solid background to cover calendar lines */
  [data-appointment-drag-target="unavailableBlock"].resizing {
    border: 2px solid theme('colors.nature.sandy-gray.500') !important;
    z-index: 50 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: theme('colors.nature.sandy-gray.300') !important;
  }

  /* Touch hold gesture (board #356): holding a block for 500ms arms drag /
     the status menu, so the OS must not answer the same hold with its
     text-selection callout. Server-rendered blocks also set this inline via
     the context-menu controller; client-engine blocks rely on this rule. */
  [data-controller~="appointment-drag"] [data-block-kind] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Live overlap layout: smooth width/left changes only while a drag is active.
     The drag controller adds .drag-active to the grid root on drag start and
     removes it on every termination path. */
  .drag-active [data-block-kind] {
    transition: left 120ms ease-out, width 120ms ease-out;
  }

  /* The block being dragged itself — translate is handled inline by JS, so
     transform is kept un-transitioned (cursor follows instantly). Width
     transitions smoothly so the block morphs to the target lane width as the
     overlap layout reshuffles. JS can override `transition` inline (snap-back
     on cancel sets both transform + width to ease over 200ms).
     z-index 40: above sibling appointment blocks (which use position-based
     low z-indices) and the calendar's sticky headers (z-10/z-20), but BELOW
     Tailwind's modal layer (z-50) so confirmation dialogs render on top. */
  [data-block-kind].appointment-block-dragging {
    z-index: 40 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.12) !important;
    cursor: grabbing !important;
    transition: width 120ms ease-out;
  }

  /* Suppress stuck hover shading on the origin slot during drag. The dragged
     block follows the cursor via CSS transform, so the cursor's :hover chain
     keeps firing on the block's ancestor .time-slot for the whole drag —
     leaving its hover bg stuck on the original slot. Re-assert the base bg
     for non-working/break slots (which start at sandy-gray-150), and clear
     it for working-hour slots (which start transparent). */
  .drag-active .time-slot:hover {
    background-color: transparent !important;
  }
  .drag-active .time-slot.bg-nature-sandy-gray-150:hover {
    background-color: theme('colors.nature.sandy-gray.150') !important;
  }

  /* Hands-on active window on appointment blocks: deepen the block's OWN hue
     (richer, not the muddy grey a black wash gives pastels). No drawn boundary
     line — a full-width rule mid-block reads as a block border, making one
     appointment look like two stacked ones; the crisp edge where the deepening
     stops is itself the steps-away moment. The overlay inherits the block's
     background and filters its own pixels — same output as a backdrop-filter
     over that background, but rasterised once instead of re-sampling the
     backdrop every frame (dozens of live backdrop-filters glitched Chrome's
     compositor on macOS). Block text is unaffected either way: it sits in a
     `relative` wrapper that paints above this overlay. */
  .hands-on-active {
    background-color: inherit;
    filter: brightness(0.85) saturate(1.15);
  }

  /* Calendar privacy mode (#400): while the body class is on
     (calendar_privacy_controller, Alt+P or the calendar menus), client names
     blur but keep their box, so lanes and truncation are unchanged and the
     day's shape stays readable. A browser-rendered blur survives a Zoom
     screen share — a physical privacy filter does not. The matching native
     title tooltips are stripped by the controller: they render outside the
     DOM where no CSS can reach them. */
  .calendar-privacy [data-calendar-privacy-target~="conceal"] {
    filter: blur(4px);
  }

  /* "Openings" previews: clean rounded cards with a transparent-border GAP
     (background-clip: padding-box) so tiled openings sit
     apart instead of running their outlines together, and a soft lift on hover.
     A pale-green fill + green text (vs a real booking's saturated fill + white
     text) reads as "available slot, not a booking". Above lane greys (z 5),
     below modals; sized/positioned inline like appointment blocks. */
  .ghost-appointment {
    position: absolute;
    z-index: 5;
    border-radius: 4px;
    border: solid transparent;
    border-width: var(--block-gap-y, 1.5px) 1.5px;
    background-clip: padding-box;
    background-color: rgba(75, 101, 66, 0.16);
    box-shadow: inset 0 0 0 1px rgba(75, 101, 66, 0.45);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: theme('colors.nature.green.dark');
    transition: box-shadow 0.16s ease, background-color 0.16s ease;
  }
  .ghost-appointment:hover {
    background-color: rgba(75, 101, 66, 0.26);
    box-shadow:
      inset 0 0 0 1px rgba(75, 101, 66, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.10);
  }

  /* Slot-band hover: with 15-minute snapping the three 5-minute cells that make
     up one band light up together (added by slot_band_hover_controller) so the
     tap target the click will snap to is visible. The band shade mirrors each
     cell's own per-cell hover so the whole band reads as one uniform block:
       - working-hour (white) cells hover to sandy-gray-125;
       - non-working / break / closed (grey, .slot-inactive) cells hover to the
         darker sandy-gray-200.
     The grey rule keys off a plain .slot-inactive marker rather than the
     Tailwind colour class so Tailwind doesn't synthesise a higher-specificity
     hover variant that would paint a darker 5-minute strip inside the band. */
  .time-slot.slot-band-hover {
    background-color: theme('colors.nature.sandy-gray.125');
  }
  .time-slot.slot-inactive.slot-band-hover {
    background-color: theme('colors.nature.sandy-gray.200');
  }
  /* Don't fight the drag-active hover-suppression rules above: clear the band
     shade on working cells, and restore the grey base on non-working cells. */
  .drag-active .time-slot.slot-band-hover {
    background-color: transparent !important;
  }
  .drag-active .time-slot.slot-inactive.slot-band-hover {
    background-color: theme('colors.nature.sandy-gray.150') !important;
  }

  /* Multi-room days paint their shading through per-lane overlay divs
     (.slot-lane), so the band highlight lands on the hovered room's lane div
     in each cell (slot_band_hover_controller) — keeping the shade inside one
     room column instead of spanning the full-width slot. Same colour pairing
     as the slot rules above: open lanes to -125, closed (.slot-inactive)
     lanes to the darker -200. */
  .slot-lane.slot-band-hover {
    background-color: theme('colors.nature.sandy-gray.125');
  }
  .slot-lane.slot-inactive.slot-band-hover {
    background-color: theme('colors.nature.sandy-gray.200');
  }
  /* Same drag-active suppression as the slot rules: clear open lanes, restore
     the grey base on closed lanes — for both the band shade and the lane's
     own per-cell hover (which would otherwise stick during a drag). */
  .drag-active .slot-lane:hover,
  .drag-active .slot-lane.slot-band-hover {
    background-color: transparent !important;
  }
  .drag-active .slot-lane.slot-inactive:hover,
  .drag-active .slot-lane.slot-inactive.slot-band-hover {
    background-color: theme('colors.nature.sandy-gray.150') !important;
  }

  /* Elevation treatment for appointment blocks — square, edge-to-edge cards.
     Two-layer outer shadow (sharp close drop + softer wider drop) gives depth
     on the white calendar background. The zero-offset 1px white ring is the
     seam between abutting blocks: invisible against the white canvas, but
     where two same-coloured blocks touch (back-to-back in time, or side-by-side
     room lanes) the later-painted block draws a hairline of canvas over the
     shared edge so they read as separate cards rather than one slab. */
  .shadow-block-lift {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.9),
      0 1px 2px rgba(0, 0, 0, 0.06),
      0 1px 3px rgba(0, 0, 0, 0.12);
  }
  .shadow-block-lift:hover {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.9),
      0 2px 4px rgba(0, 0, 0, 0.08),
      0 4px 8px rgba(0, 0, 0, 0.14);
  }

  /* Blocked / unavailable time is recessive — it belongs to the background,
     not the foreground of bookings. A muted grey wash + faint diagonal hatch,
     a hairline inset edge and no drop-shadow set it clearly apart from a
     saturated appointment card. Square and edge-to-edge like the bookings; the
     inset ring is its own "border-look" separation. Styled on the same class
     the click handler already keys off (appointment_modal_controller.js). */
  .unavailable-block-item {
    background-color: theme('colors.nature.sandy-gray.200');
    background-image: repeating-linear-gradient(
      45deg,
      transparent 0, transparent 5px,
      rgba(120, 113, 108, 0.15) 5px, rgba(120, 113, 108, 0.15) 6px);
    color: theme('colors.nature.sandy-gray.600');
    box-shadow: inset 0 0 0 1px theme('colors.nature.sandy-gray.300');
  }
  .unavailable-block-item:hover {
    box-shadow: inset 0 0 0 1px theme('colors.nature.sandy-gray.400');
  }

  /* Cancelled appointment "ghost" (#396). The appointment stays on the grid
     so staff can see who cancelled and follow up, but it is a record, not a
     booking: the type colour drains out, leaving a white card with a hairline
     ring, grey text, the name struck through and a single terracotta ✕. No
     drop-shadow — it belongs to the recessive layer with openings (pale green)
     and blocked time (grey hatch), not the lifted foreground of bookings. It
     takes no lane and paints beneath every live block (z-index 1 vs ≥ 2), so a
     rebooked slot covers it and only the uncovered remainder peeks out. Hover
     deepens the ring; hover:z-10 on the block lifts it for a full read. */
  .appointment-cancelled {
    background-color: #ffffff;
    color: theme('colors.nature.sandy-gray.500');
    box-shadow: inset 0 0 0 1px theme('colors.nature.sandy-gray.300');
  }
  .appointment-cancelled:hover {
    box-shadow: inset 0 0 0 1px theme('colors.nature.sandy-gray.400');
  }

  /* When a day column is split into side-by-side columns — room lanes on
     multi-room days, or overlapping (double-booked) blocks on any day — the
     blocks butt edge-to-edge and read as if they overlap. A tiny transparent
     horizontal inset opens a hairline channel between them. It's a border
     (box-sizing:border-box is the Tailwind default) with background-clip:
     padding-box, so the positioned box — and the lane/overlap maths and drag —
     are unchanged; only the paint insets. Horizontal only: back-to-back stacked
     (non-overlapping) blocks are untouched and keep their white-ring seam. */
  .block-laned {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    background-clip: padding-box;
  }
}
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Support Panel Animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

.animate-slide-out-right {
  animation: slideOutRight 0.3s ease-in forwards;
}

/* Support Panel Styling */
#support-panel {
  max-width: 100vw;
}

@media (max-width: 768px) {
  #support-panel {
    width: 100vw;
    left: 0;
    right: 0;
  }
}

/* Clean chat interface styles */
#support-panel .message-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#support-panel .message-content a {
  color: #4B6542;
  text-decoration: underline;
}

#support-panel .message-content a:hover {
  color: #3A4F33;
}

/* Simplified animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}


/* Video Consultation Resize Handle Styles */
.resize-handle {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 6px !important;
  background-color: #E7E5E4 !important; /* nature-sandy-gray-200 */
  cursor: col-resize !important;
  transition: all 0.2s ease;
  z-index: 30 !important;
  border-left: 1px solid #D6D3D1; /* nature-sandy-gray-300 */
}

.resize-handle:hover {
  width: 8px !important;
  background-color: #D6D3D1 !important; /* nature-sandy-gray-300 */
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);
}

.resize-handle:hover .resize-handle-grip {
  opacity: 1 !important;
}

.resize-handle .resize-handle-grip {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.resize-handle:active {
  background-color: #B8C4A6 !important; /* nature-sage-light */
  width: 8px !important;
}

/* Prevent selection during resize */
body.resizing-consultation {
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

body.resizing-consultation * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Consultation Container Transition */
.video-with-consultation {
  transition: width 0.3s ease-out;
}

/* Ensure the resize handle is always visible and properly positioned */
[data-video-consultation-notes-target="consultationContainer"]:not(.hidden) {
  display: flex;
  flex-direction: column;
}

/* Responsive adjustments for mobile */
@media (max-width: 1024px) {
  .resize-handle {
    display: none; /* Hide resize handle on mobile/tablet */
  }
  
  [data-video-consultation-notes-target="consultationContainer"] {
    width: 100% !important; /* Full width on mobile */
  }
}

/* Video Consultation - Proper Video Display */
[data-twilio-video-target="remoteVideos"] video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background-color: #000;
}

/* Local video should be smaller and contained */
[data-twilio-video-target="localVideo"] video,
[data-twilio-video-target="localVideoMobile"] video {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

/* Center video elements in their containers */
.remote-participant {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  width: 100%;
  height: 100%;
}

/* Consultation prescription grid: each Turbo Frame is a grid cell. When a card
   is being edited its frame contains the builder <form>, so it spans the full
   row (the read-only card body has no <form>). Keyed off content via :has() so
   it survives Turbo Frame navigation, which swaps frame contents not classes. */
#consultation_prescription_list > turbo-frame {
  display: block;
  height: 100%;
}
#consultation_prescription_list > turbo-frame:has(form) {
  grid-column: 1 / -1;
}

/* === Calendar gridlines ===
   Weight and contrast come from the viewer's Hour lines preference
   (Practitioner#calendar_hour_lines), published as data-hour-lines on the grid
   root; the custom properties inherit down to every cell. Lines are drawn as
   inset box-shadows rather than borders so they cost no layout and don't
   shrink the cell box (which would throw off appointment block %-heights).

   The -off variants are for recessed cells — outside working hours, breaks,
   closed lanes. Those sit on the sandy-gray-150 (#EEECEB) wash, so each step
   is darkened to hold the same hierarchy against it.

   Every var() carries a fallback matching the 'standard' values, so any grid
   that hasn't declared data-hour-lines still draws its lines. */
/* Standard separates the hour mostly by letting the quarters recede rather
   than by darkening the hour: three of the four lines per hour got lighter and
   only one got darker, so the grid carries LESS ink than before while the
   hour/quarter gap roughly doubled (17 -> 39 on the red channel, against 71
   for 'defined'). Darkening alone would have bought the same separation at the
   cost of a heavier page. */
[data-hour-lines="standard"] {
  --gl-hour-w: 1px;
  --gl-hour: #C8C4C1;      /* a half-step past sandy-gray-300, well short of 400 */
  --gl-half: #EFEDEC;      /* no distinct half-hour at this setting, as before */
  --gl-quarter: #EFEDEC;
  /* Recessed steps are matched to the active ones by DELTA against their own
     background (the #EEECEB wash, not white) — otherwise the fainter active
     quarters would read weaker than the grey ones, inverting the hierarchy. */
  --gl-hour-off: #C0BCB9;
  --gl-half-off: #DDD9D6;
  --gl-quarter-off: #DDD9D6;
}

[data-hour-lines="defined"] {
  --gl-hour-w: 1px;
  --gl-hour: #A8A29E;      /* sandy-gray-400 */
  --gl-half: #D6D3D1;      /* sandy-gray-300 */
  --gl-quarter: #EFEDEC;   /* lighter than before: the hierarchy needs the
                              quarters to recede as the hour steps forward */
  --gl-hour-off: #A8A29E;
  --gl-half-off: #C0BCB9;
  --gl-quarter-off: #DDD9D6;
}

[data-hour-lines="strong"] {
  --gl-hour-w: 2px;
  --gl-hour: #A8A29E;
  --gl-half: #C0BCB9;
  --gl-quarter: #EFEDEC;
  --gl-hour-off: #A8A29E;
  --gl-half-off: #B0ABA7;
  --gl-quarter-off: #DDD9D6;
}

.gl-hour        { box-shadow: inset 0 var(--gl-hour-w, 1px) 0 var(--gl-hour, #C8C4C1); }
.gl-half        { box-shadow: inset 0 1px 0 var(--gl-half, #EFEDEC); }
.gl-quarter     { box-shadow: inset 0 1px 0 var(--gl-quarter, #EFEDEC); }
.gl-hour-off    { box-shadow: inset 0 var(--gl-hour-w, 1px) 0 var(--gl-hour-off, #C0BCB9); }
.gl-half-off    { box-shadow: inset 0 1px 0 var(--gl-half-off, #DDD9D6); }
.gl-quarter-off { box-shadow: inset 0 1px 0 var(--gl-quarter-off, #DDD9D6); }

/* The grid's closing rule at the foot of each column — a real border, since it
   sits on a zero-height element with no box to cast an inset shadow into. */
.gl-hour-rule { border-top: var(--gl-hour-w, 1px) solid var(--gl-hour, #D6D3D1); }