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%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* ── APPEX360 Global Density System ── Release 19.1
 *
 * Controls spacing, padding, and sizing across the entire platform.
 * Applied via density-{compact,comfortable,spacious} class on <body>.
 *
 * Compact:   Smaller padding, tighter gaps, denser grids
 * Comfortable: Current default (24px card padding, 16px gaps)
 * Spacious:   Larger padding, bigger gaps, executive presentation mode
 */

/* ═══ Default (Comfortable) ═══ */
:root {
  --density-card-padding: 24px;
  --density-card-gap: 16px;
  --density-section-gap: 32px;
  --density-table-cell: 12px 16px;
  --density-table-cell-compact: 8px 12px;
  --density-kpi-min-width: 200px;
  --density-grid-gap: 16px;
  --density-sidebar-padding: 16px;
  --density-form-spacing: 16px;
  --density-section-padding: 24px;
}

/* ═══ Compact ═══ */
body.density-compact {
  --density-card-padding: 16px;
  --density-card-gap: 10px;
  --density-section-gap: 20px;
  --density-table-cell: 8px 12px;
  --density-table-cell-compact: 6px 8px;
  --density-kpi-min-width: 160px;
  --density-grid-gap: 10px;
  --density-sidebar-padding: 10px;
  --density-form-spacing: 10px;
  --density-section-padding: 16px;
}

/* ═══ Spacious ═══ */
body.density-spacious {
  --density-card-padding: 32px;
  --density-card-gap: 24px;
  --density-section-gap: 48px;
  --density-table-cell: 16px 24px;
  --density-table-cell-compact: 12px 16px;
  --density-kpi-min-width: 260px;
  --density-grid-gap: 24px;
  --density-sidebar-padding: 24px;
  --density-form-spacing: 24px;
  --density-section-padding: 32px;
}

/* ═══ Density-Aware Component Consumers ═══ */

/* Cards */
.exec-card, .apex-card, .ds-card, .kpi-card,
[class*="card"]:not(.no-density) {
  padding: var(--density-card-padding) !important;
}

/* Card grids */
.exec-grid, .card-grid, .kpi-grid,
[class*="grid"]:not(.no-density) {
  gap: var(--density-grid-gap) !important;
}

/* KPI cards minimum width */
.kpi-card, .ds-kpi-card, [class*="kpi-card"] {
  min-width: var(--density-kpi-min-width);
}

/* Tables */
table.data-table th,
table.data-table td,
.table-row, [class*="table"]:not(.no-density) td,
[class*="table"]:not(.no-density) th {
  padding: var(--density-table-cell) !important;
}

/* Sections */
.section-group, .boardroom-section, .dashboard-section,
[class*="section"]:not(.no-density) {
  gap: var(--density-section-gap);
  padding: var(--density-section-padding);
}

/* Sidebar */
.sidebar, [class*="sidebar"]:not(.no-density) {
  padding: var(--density-sidebar-padding) !important;
}

/* Forms */
.form-group, .form-field, [class*="form"]:not(.no-density) {
  gap: var(--density-form-spacing);
  margin-bottom: var(--density-form-spacing);
}

/* Boardroom specific */
.boardroom-section {
  padding: var(--density-card-padding) !important;
  margin-bottom: var(--density-card-gap);
}

/* Homepage sections */
.homepage-section {
  padding: var(--density-section-padding) !important;
  margin-bottom: var(--density-section-gap);
}
/* APEX360 Motion & Interaction Engine — Release 17.0 Commercial Launch Polish */
/* =================================================== */

/* ─── 1. MOTION TOKENS ─── */
:root {
  --motion-duration-short: 150ms;
  --motion-duration-medium: 300ms;
  --motion-duration-long: 500ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-spring-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-stagger: 60ms;
  --motion-scale-hover: 1.03;
  --motion-scale-active: 0.97;
  --motion-lift: -3px;
}

/* ─── 2. STYLE-AWARE OVERRIDES ─── */
[data-style="apple_minimal"] {
  --motion-duration-short: 200ms;
  --motion-duration-medium: 400ms;
  --motion-duration-long: 700ms;
  --motion-ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-spring-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-stagger: 80ms;
  --motion-scale-hover: 1.02;
  --motion-lift: -2px;
}
[data-style="modern_saas"] {
  --motion-duration-short: 100ms;
  --motion-duration-medium: 200ms;
  --motion-duration-long: 350ms;
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-spring-soft: cubic-bezier(0, 0, 0.2, 1);
  --motion-stagger: 40ms;
  --motion-scale-hover: 1.02;
  --motion-lift: -2px;
}
[data-style="microsoft_fluent"] {
  --motion-duration-short: 150ms;
  --motion-duration-medium: 250ms;
  --motion-duration-long: 400ms;
  --motion-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-stagger: 50ms;
}
[data-style="bold_colourful"] {
  --motion-duration-short: 200ms;
  --motion-duration-medium: 350ms;
  --motion-duration-long: 600ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-spring-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-stagger: 100ms;
  --motion-scale-hover: 1.05;
  --motion-lift: -6px;
}

/* ─── 3. DS BUTTON MICRO-INTERACTIONS ─── */
.ds-btn, .apex-btn, [class*="btn"] {
  transition: opacity var(--motion-duration-medium) var(--motion-ease-out),
              transform var(--motion-duration-short) var(--motion-ease-out),
              background-color var(--motion-duration-short) ease,
              box-shadow var(--motion-duration-short) ease,
              border-color var(--motion-duration-short) ease;
}
.apex-stagger-grid .ds-btn,
.apex-stagger-grid .apex-btn {
  opacity: 0;
  transform: scale(0.95);
}
.apex-stagger-grid.apex-visible .ds-btn,
.apex-stagger-grid.apex-visible .apex-btn {
  opacity: 1;
  transform: scale(1);
}
.ds-btn:hover, .apex-btn:hover {
  transform: translateY(-1px);
}
.ds-btn:active, .apex-btn:active {
  transform: scale(var(--motion-scale-active));
}

/* ─── 4. DS CARD MICRO-INTERACTIONS ─── */
.exec-card, .ds-kpi-card, .ds-glass, .apex-card {
  transition: opacity var(--motion-duration-long) var(--motion-ease-out),
              transform var(--motion-duration-long) var(--motion-ease-out),
              box-shadow var(--motion-duration-medium) ease,
              border-color var(--motion-duration-medium) ease;
}
.exec-card:hover, .ds-kpi-card:hover, .ds-glass:hover {
  transform: translateY(var(--motion-lift));
}
.exec-card:active, .ds-kpi-card:active {
  transform: translateY(-1px) scale(0.98);
}

/* ─── 5. ICON MICRO-INTERACTIONS ─── */
.ds-btn i, .exec-card i, .ds-kpi-card i, [class*="badge"] i, a i {
  transition: transform var(--motion-duration-short) var(--motion-ease-out);
}
.ds-btn:hover i {
  transform: scale(1.15);
}
.exec-card:hover i.fa-arrow-right,
.ds-btn:hover i.fa-arrow-right,
a:hover i.fa-arrow-right {
  transform: translateX(3px);
}
.exec-card:hover i.fa-external-link-alt,
a:hover i.fa-external-link {
  transform: translate(2px, -2px);
}

/* ─── 6. KPI COUNT-UP ─── */
.apex-count, .ds-kpi-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-duration-medium) ease;
}

/* ─── 7. PROGRESS BARS ─── */
.apex-progress-track {
  overflow: hidden;
}
.apex-progress-fill {
  width: 0%;
  transition: width 0.8s var(--motion-ease-out);
}

/* ─── 8. TOOLTIP ─── */
.apex-tooltip {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--motion-duration-short) var(--motion-ease-out),
              transform var(--motion-duration-short) var(--motion-ease-out);
  pointer-events: none;
}
.apex-tooltip.apex-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 9. MODAL ─── */
.apex-modal-overlay {
  opacity: 0;
  transition: opacity var(--motion-duration-medium) ease;
}
.apex-modal-overlay.apex-visible {
  opacity: 1;
}
.apex-modal-content {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity var(--motion-duration-medium) var(--motion-ease-out),
              transform var(--motion-duration-medium) var(--motion-spring-soft);
}
.apex-modal-overlay.apex-visible .apex-modal-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ─── 10. NOTIFICATION SLIDE ─── */
.apex-notification {
  transform: translateX(120%);
  transition: transform var(--motion-duration-medium) var(--motion-spring-soft),
              opacity var(--motion-duration-medium) ease;
  opacity: 0;
}
.apex-notification.apex-visible {
  transform: translateX(0);
  opacity: 1;
}
.apex-notification.apex-dismissing {
  transform: translateX(120%);
  opacity: 0;
}

/* ─── 11. DROPDOWN FADE + SCALE ─── */
.apex-dropdown {
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transition: opacity var(--motion-duration-short) var(--motion-ease-out),
              transform var(--motion-duration-short) var(--motion-ease-out);
  pointer-events: none;
}
.apex-dropdown.apex-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* ─── 12. TABLE ROW HIGHLIGHT ─── */
tr[onmouseover] {
  transition: background-color var(--motion-duration-short) ease;
}

/* ─── 13. STAGGER ENTRY SYSTEM ─── */
.apex-stagger-fade > * {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity var(--motion-duration-long) var(--motion-ease-out),
              transform var(--motion-duration-long) var(--motion-ease-out);
}
.apex-stagger-fade.apex-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 14. SKELETON LOADING ─── */
.apex-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, 6px);
}
body.theme-ai-futuristic .apex-skeleton {
  background: linear-gradient(
    90deg,
    rgba(79,124,255,0.04) 25%,
    rgba(79,124,255,0.08) 50%,
    rgba(79,124,255,0.04) 75%
  );
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 15. SUCCESS/ERROR FLASH ─── */
.apex-flash {
  animation: flash-slide-in 0.3s var(--motion-ease-out) forwards;
}
@keyframes flash-slide-in {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.apex-flash.apex-dismissing {
  animation: flash-slide-out 0.2s var(--motion-ease-in) forwards;
}
@keyframes flash-slide-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-10px); opacity: 0; }
}

/* ─── 16. EMPTY STATE ─── */
.apex-empty-state {
  opacity: 0;
  transform: translateY(20px);
  animation: empty-state-enter 0.4s var(--motion-ease-out) 0.1s forwards;
}
@keyframes empty-state-enter {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 17. SUCCESS INDICATOR ─── */
.apex-success-check {
  animation: success-pop 0.4s var(--motion-spring-soft) forwards;
}
@keyframes success-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ─── 18. FLOATING HELP ─── */
.apex-help-btn {
  animation: help-pulse 2.5s ease-in-out infinite;
}
@keyframes help-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
}
.apex-help-panel {
  transform: translateY(100%);
  transition: transform var(--motion-duration-medium) var(--motion-ease-out);
}
.apex-help-panel.apex-visible {
  transform: translateY(0);
}

/* ─── 19. REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    --motion-duration-short: 0ms !important;
    --motion-duration-medium: 0ms !important;
    --motion-duration-long: 0ms !important;
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .exec-card:hover,
  .ds-kpi-card:hover,
  .ds-glass:hover,
  .ds-btn:hover,
  .apex-btn:hover {
    transform: none !important;
  }
  .apex-skeleton {
    animation: none !important;
    background: rgba(255,255,255,0.04) !important;
  }
}
/* ═══════════════════════════════════════════════════
   APPEXi — Enterprise Intelligence Assistant Styles
   Release 18.1 — Foundation
   ═══════════════════════════════════════════════════ */

/* ── Panel Container ─────────────────────────────── */

.appexi-panel {
  width: 400px;
  max-width: 92vw;
  max-height: 75vh;
  background: rgba(10, 14, 28, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: appexi-panel-enter 0.25s ease-out;
}

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

/* ── Header ───────────────────────────────────────── */

.appexi-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 8px;
}

.appexi-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.appexi-header-icon {
  font-size: 20px;
  line-height: 1;
}

.appexi-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.appexi-header-subtitle {
  font-size: 10px;
  color: rgba(129, 140, 248, 0.5);
  font-weight: 500;
  line-height: 1.2;
}

.appexi-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Tone Selector ────────────────────────────────── */

.appexi-tone-select {
  padding: 4px 24px 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: all 0.15s;
}

.appexi-tone-select:hover {
  border-color: rgba(99, 102, 241, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

.appexi-tone-select:focus {
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
}

.appexi-tone-select option {
  background: #0a0e1c;
  color: #fff;
}

/* ── Header Buttons ───────────────────────────────── */

.appexi-header-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.appexi-header-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ── Messages ─────────────────────────────────────── */

.appexi-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  max-height: 360px;
}

.appexi-messages::-webkit-scrollbar {
  width: 4px;
}

.appexi-messages::-webkit-scrollbar-track {
  background: transparent;
}

.appexi-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

/* ── Message Wrappers ─────────────────────────────── */

.appexi-message-wrapper {
  animation: appexi-fade-in 0.2s ease-out;
}

.appexi-user-message-wrapper {
  display: flex;
  justify-content: flex-end;
}

.appexi-assistant-message-wrapper {
  display: flex;
  flex-direction: column;
}

/* ── Messages ─────────────────────────────────────── */

.appexi-message {
  max-width: 88%;
}

.appexi-user-message {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 12px 12px 4px 12px;
  padding: 10px 14px;
}

.appexi-assistant-message {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.08);
  border-radius: 12px 12px 12px 4px;
  padding: 12px 16px;
}

.appexi-message-content {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

.appexi-message-content p {
  margin: 0 0 8px;
}

.appexi-message-content p:last-child {
  margin-bottom: 0;
}

.appexi-message-content strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.appexi-message-content h4 {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 6px;
}

.appexi-message-content ul {
  margin: 4px 0;
  padding-left: 16px;
  list-style: none;
}

.appexi-message-content li {
  margin-bottom: 3px;
  position: relative;
}

.appexi-message-content li::before {
  content: "•";
  position: absolute;
  left: -12px;
  color: rgba(99, 102, 241, 0.4);
}

/* ── Evidence Badges ──────────────────────────────── */

.appexi-evidence-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.appexi-evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.appexi-evidence-live_company_data {
  background: rgba(16, 185, 129, 0.1);
  color: rgba(16, 185, 129, 0.8);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.appexi-evidence-enterprise_knowledge {
  background: rgba(59, 130, 246, 0.1);
  color: rgba(96, 165, 250, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.appexi-evidence-external_intelligence {
  background: rgba(168, 85, 247, 0.1);
  color: rgba(192, 132, 252, 0.8);
  border: 1px solid rgba(168, 85, 247, 0.15);
}

.appexi-evidence-user_input {
  background: rgba(234, 179, 8, 0.1);
  color: rgba(250, 204, 21, 0.8);
  border: 1px solid rgba(234, 179, 8, 0.15);
}

.appexi-evidence-inference {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Confidence Score ─────────────────────────────── */

.appexi-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.appexi-confidence-icon {
  font-size: 11px;
  flex-shrink: 0;
}

.appexi-confidence-label {
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.appexi-confidence-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  max-width: 80px;
}

.appexi-confidence-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.appexi-confidence-score {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}

/* ── Explainability Panel ─────────────────────────── */

.appexi-explain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 0;
  flex-shrink: 0;
}

.appexi-explain-toggle {
  background: none;
  border: none;
  color: rgba(129, 140, 248, 0.4);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}

.appexi-explain-toggle:hover {
  color: rgba(129, 140, 248, 0.7);
}

.appexi-tone-indicator {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  font-weight: 500;
}

.appexi-explain-panel {
  margin: 0 16px 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  animation: appexi-fade-in 0.2s ease-out;
}

.appexi-explain-panel.hidden {
  display: none !important;
}

.appexi-explain-section {
  margin-bottom: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}

.appexi-explain-section:last-child {
  margin-bottom: 0;
}

.appexi-explain-section strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.appexi-explain-section ul {
  margin: 0;
  padding-left: 14px;
  list-style: none;
}

.appexi-explain-section li {
  margin-bottom: 3px;
  position: relative;
  color: rgba(255, 255, 255, 0.35);
}

.appexi-explain-section li::before {
  content: "–";
  position: absolute;
  left: -12px;
  color: rgba(255, 255, 255, 0.15);
}

.appexi-explain-section p {
  margin: 0;
  color: rgba(255, 255, 255, 0.35);
}

.appexi-evidence-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.appexi-explain-missing {
  border-left: 2px solid rgba(234, 179, 8, 0.3);
  padding-left: 10px;
}

.appexi-explain-limitations {
  border-left: 2px solid rgba(239, 68, 68, 0.3);
  padding-left: 10px;
}

/* ── Suggestions ──────────────────────────────────── */

.appexi-suggestions {
  padding: 6px 16px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.appexi-suggestions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.appexi-suggestion-btn {
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.12);
  background: rgba(99, 102, 241, 0.04);
  color: rgba(129, 140, 248, 0.5);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appexi-suggestion-btn:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.08);
  color: #818cf8;
}

.appexi-suggestion-btn:active {
  transform: scale(0.97);
}

/* ── Input Area ───────────────────────────────────── */

.appexi-input-area {
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.appexi-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.appexi-input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all 0.15s;
  resize: none;
  line-height: 1.5;
}

.appexi-input:focus {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.appexi-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.appexi-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  font-size: 13px;
}

.appexi-send-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.appexi-send-btn:active {
  transform: scale(0.95);
}

/* ── Floating Action Button ───────────────────────── */

.appexi-fab {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.appexi-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
}

.appexi-fab:active {
  transform: scale(0.96);
}

.appexi-fab-icon {
  font-size: 24px;
  line-height: 1;
}

.appexi-fab.hidden {
  display: none !important;
}

/* ── Conversation History Panel ───────────────────── */

.appexi-history-panel {
  max-height: 180px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 8px 12px;
  animation: appexi-fade-in 0.15s ease-out;
}

.appexi-history-panel.hidden {
  display: none !important;
}

.appexi-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.appexi-history-clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  transition: color 0.15s;
}

.appexi-history-clear:hover {
  color: rgba(239, 68, 68, 0.6);
}

.appexi-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.appexi-history-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}

.appexi-history-item i {
  font-size: 10px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.appexi-history-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appexi-history-empty {
  padding: 12px 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
}

/* ── Typing Indicator ─────────────────────────────── */

.appexi-typing {
  display: flex;
  gap: 10px;
  align-items: center;
  animation: appexi-fade-in 0.15s ease-out;
  padding: 4px 0;
}

.appexi-typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  animation: appexi-dot 1.2s ease-in-out infinite;
}

.appexi-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.appexi-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

/* ── Animations ───────────────────────────────────── */

@keyframes appexi-panel-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes appexi-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes appexi-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── AI Futuristic Theme Overrides ────────────────── */

body.theme-ai-futuristic .appexi-panel {
  background: rgba(5, 8, 22, 0.94) !important;
  border-color: rgba(79, 124, 255, 0.15) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(79, 124, 255, 0.08) !important;
}

body.theme-ai-futuristic .appexi-fab {
  background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important;
  box-shadow: 0 4px 20px rgba(79, 124, 255, 0.35) !important;
}

body.theme-ai-futuristic .appexi-fab:hover {
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.5) !important;
}

body.theme-ai-futuristic .appexi-input:focus {
  border-color: rgba(79, 124, 255, 0.4) !important;
  box-shadow: 0 0 15px rgba(79, 124, 255, 0.08) !important;
}

body.theme-ai-futuristic .appexi-evidence-enterprise_knowledge {
  background: rgba(79, 124, 255, 0.1) !important;
  color: rgba(110, 168, 254, 0.9) !important;
  border-color: rgba(79, 124, 255, 0.2) !important;
}

/* ── Reduced Motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .appexi-panel { animation: none !important; }
  .appexi-typing span { animation: none !important; opacity: 0.5 !important; }
}

/* ── Mobile Responsive ────────────────────────────── */

@media (max-width: 480px) {
  .appexi-panel {
    width: calc(100vw - 24px);
    max-height: 80vh;
    bottom: 80px;
    right: 12px;
    border-radius: 16px;
  }

  .appexi-header-title {
    font-size: 14px;
  }

  .appexi-tone-select {
    font-size: 10px;
    padding: 3px 20px 3px 6px;
  }

  .appexi-fab {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .appexi-fab-icon {
    font-size: 20px;
  }
}
/* ══════════════════════════════════════════════════════════════
   APEX360 DESIGN TOKENS
   Central source of truth for all visual properties.
   
   Usage: 
   background: var(--surface-1);
   color: var(--text-primary);
   padding: var(--spacing-md);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   box-shadow: var(--shadow-sm);
   
   Theme: page body gets .style-apex-dark or .style-colorblind
   Palette: page body gets .palette-emerald / .palette-amber / etc.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colours ── */
  --color-primary: #6c5ce7;
  --color-primary-hover: #5a4bd1;
  --color-primary-light: rgba(108, 92, 231, 0.15);
  --color-primary-subtle: rgba(108, 92, 231, 0.06);
  --color-secondary: #818cf8;
  --color-success: #059669;
  --color-success-hover: #047857;
  --color-success-light: rgba(5, 150, 105, 0.15);
  --color-success-subtle: rgba(5, 150, 105, 0.06);
  --color-warning: #d97706;
  --color-warning-hover: #b45309;
  --color-warning-light: rgba(217, 119, 6, 0.15);
  --color-warning-subtle: rgba(217, 119, 6, 0.06);
  --color-danger: #e11d48;
  --color-danger-hover: #be123c;
  --color-danger-light: rgba(225, 29, 72, 0.15);
  --color-danger-subtle: rgba(225, 29, 72, 0.06);
  --color-info: #0891b2;
  --color-info-light: rgba(8, 145, 178, 0.15);

  /* ── Surfaces ── */
  --surface-page: #f8f9fc;
  --surface-card: #ffffff;
  --surface-card-hover: #f8f9fc;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.06);
  --surface-border: #e8ecf4;
  --surface-border-hover: #d0d5e0;

  /* ── Text ── */
  --text-primary: #1a1a2e;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;
  --text-link: #6c5ce7;

  /* ── Spacing ── */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* ── Design System Typography Scale (Release 16.6) ── */
  --font-display-kpi: 48px;
  --font-page-title: 40px;
  --font-section-title: 32px;
  --font-card-title: 22px;
  --font-subheading: 18px;
  --font-body: 16px;
  --font-supporting: 15px;
  --font-caption: 13px;
  --font-micro: 11px;

  /* Component Sizing */
  --btn-height: 44px;
  --input-height: 48px;
  --card-padding: 28px;
  --card-padding-lg: 36px;
  --section-spacing: 64px;
  --section-spacing-lg: 96px;

  /* ── Legacy Aliases ── */
  --font-size-micro: 11px;
  --font-size-caption: 13px;
  --font-size-body: var(--font-body);
  --font-size-supporting: var(--font-supporting);
  --font-size-h3: var(--font-card-title);
  --font-size-h2: var(--font-section-title);
  --font-size-h1: var(--font-page-title);
  --font-size-display: var(--font-display-kpi);

  --font-size-xs: var(--font-caption);
  --font-size-sm: var(--font-supporting);
  --font-size-md: var(--font-body);

  /* ── Weights ── */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── Letter Spacing ── */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.5px;

  /* ── Line Height ── */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ── Transitions ── */
  --transition-fast: 0.15s;
  --transition-normal: 0.25s;
  --transition-slow: 0.35s;
}
  --line-height-relaxed: 1.7;

  /* ── Shadows (premium) ── */
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-display: 42px;
  --font-weight-normal: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.5px;
  --line-height-tight: 1.1;
  --line-height-normal: 1.6;

  /* ── Transitions ── */
  --transition-fast: 0.15s;
  --transition-normal: 0.2s;
}

/* ══════════════════════════════════════════════════════════════
   APEX DARK THEME
   ══════════════════════════════════════════════════════════════ */
body.style-apex-dark {
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-light: rgba(99, 102, 241, 0.15);
  --color-primary-subtle: rgba(99, 102, 241, 0.06);
  --color-secondary: #818cf8;
  --color-success-light: rgba(5, 150, 105, 0.15);
  --color-success-subtle: rgba(5, 150, 105, 0.06);
  --color-warning-light: rgba(217, 119, 6, 0.15);
  --color-danger-light: rgba(225, 29, 72, 0.15);
  --color-info-light: rgba(8, 145, 178, 0.15);

  --surface-page: #0b1120;
  --surface-card: rgba(255, 255, 255, 0.03);
  --surface-card-hover: rgba(255, 255, 255, 0.06);
  --surface-elevated: rgba(255, 255, 255, 0.06);
  --surface-overlay: rgba(255, 255, 255, 0.04);
  --surface-border: rgba(255, 255, 255, 0.06);
  --surface-border-hover: rgba(255, 255, 255, 0.1);

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-link: #818cf8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════════════════════
   COLOR BLIND SAFE THEME
   ══════════════════════════════════════════════════════════════ */
body.style-colorblind {
  --color-primary: #004e98;
  --color-primary-hover: #003d7a;
  --color-primary-light: rgba(0, 78, 152, 0.1);
  --color-primary-subtle: rgba(0, 78, 152, 0.05);
  --color-secondary: #004e98;
  --color-success: #000000;
  --color-success-hover: #333333;
  --color-success-light: rgba(0, 0, 0, 0.1);
  --color-success-subtle: rgba(0, 0, 0, 0.05);
  --color-warning: #ff6b35;
  --color-warning-hover: #e55a2b;
  --color-warning-light: rgba(255, 107, 53, 0.15);
  --color-warning-subtle: rgba(255, 107, 53, 0.06);
  --color-danger: #000000;
  --color-danger-hover: #333333;
  --color-danger-light: rgba(0, 0, 0, 0.1);
  --color-danger-subtle: rgba(0, 0, 0, 0.05);
  --color-info: #004e98;

  --surface-page: #ffffff;
  --surface-card: #ffffff;
  --surface-card-hover: #f0f0f0;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.08);
  --surface-border: #000000;
  --surface-border-hover: #ff6b35;

  --text-primary: #000000;
  --text-secondary: #333333;
  --text-muted: #555555;
  --text-link: #004e98;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --border-width: 2px;
}

/* ══════════════════════════════════════════════════════════════
   PALETTES — override --color-primary only
   (all other tokens cascade from the active theme)
   ══════════════════════════════════════════════════════════════ */
body.palette-green {
  --color-primary: #10b981;
  --color-primary-hover: #059669;
  --color-primary-light: rgba(16, 185, 129, 0.15);
  --accent: #10b981;
  --accent-hover: #059669;
  --accent-soft: rgba(16, 185, 129, 0.1);
  --color-secondary: #34d399;
  --text-link: #10b981;
}

body.palette-amber {
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
  --color-primary-light: rgba(217, 119, 6, 0.15);
  --accent: #d97706;
  --accent-hover: #b45309;
  --accent-soft: rgba(217, 119, 6, 0.1);
  --color-secondary: #fbbf24;
  --text-link: #d97706;
}

body.palette-red {
  --color-primary: #ef4444;
  --color-primary-hover: #dc2626;
  --color-primary-light: rgba(239, 68, 68, 0.15);
  --accent: #ef4444;
  --accent-hover: #dc2626;
  --accent-soft: rgba(239, 68, 68, 0.1);
  --color-secondary: #f87171;
  --text-link: #ef4444;
}

body.palette-cyan {
  --color-primary: #06b6d4;
  --color-primary-hover: #0891b2;
  --color-primary-light: rgba(6, 182, 212, 0.15);
  --accent: #06b6d4;
  --accent-hover: #0891b2;
  --accent-soft: rgba(6, 182, 212, 0.1);
  --color-secondary: #22d3ee;
  --text-link: #06b6d4;
}

body.palette-purple {
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-primary-light: rgba(139, 92, 246, 0.15);
  --accent: #8b5cf6;
  --accent-hover: #7c3aed;
  --accent-soft: rgba(139, 92, 246, 0.1);
  --color-secondary: #a78bfa;
  --text-link: #8b5cf6;
}
/* ══════════════════════════════════════════════════════════════
   EXECUTIVE CARD SYSTEM — Shared Component Styles (Release 16.6)
   Theme-aware · Token-driven · Palette-aware · Responsive
   Design System: Microsoft/Atlassian/Monday.com-grade consistency
   
   Usage: var(--exec-card-bg), var(--exec-kpi-color), etc.
   ══════════════════════════════════════════════════════════════ */

/* ── Card Shell ── */
.exec-card {
  border-radius: var(--radius-lg, 16px);
  padding: var(--card-padding, 28px);
  transition: all var(--transition-normal, 0.25s) ease;
  background: var(--exec-card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--exec-card-border, rgba(255,255,255,0.06));
}
.exec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.4));
}
body.style-colorblind .exec-card {
  border-width: 2px;
  border-radius: 8px;
}

/* ── Card Size Variants ── */
.exec-card-sm {
  padding: var(--spacing-lg, 24px);
}
.exec-card-lg {
  padding: var(--card-padding-lg, 36px);
}

/* ── KPI Value ── */
.exec-kpi {
  font-size: var(--font-display-kpi, 48px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: var(--line-height-tight, 1);
  letter-spacing: var(--letter-spacing-tight, -0.03em);
}
.exec-kpi-medium {
  font-size: var(--font-page-title, 40px);
}
.exec-kpi-small {
  font-size: var(--font-section-title, 32px);
}

/* ── Card Icon Container ── */
.exec-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
body.style-colorblind .exec-icon {
  border: 2px solid;
}

/* ── Card Title / Label ── */
.exec-label {
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, rgba(255,255,255,0.35));
}
.exec-title {
  font-size: var(--font-card-title, 22px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #ffffff);
}
.exec-subtitle {
  font-size: var(--font-body, 16px);
  color: var(--text-muted, rgba(255,255,255,0.35));
}

/* ── Card Body ── */
.exec-body {
  font-size: var(--font-body, 16px);
  color: var(--text-secondary, rgba(255,255,255,0.55));
  line-height: var(--line-height-relaxed, 1.7);
}
.exec-metric-label {
  font-size: var(--font-supporting, 15px);
  color: var(--text-muted, rgba(255,255,255,0.3));
  margin-bottom: 4px;
}
.exec-metric-value {
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #ffffff);
}

/* ── Section Cell (inside cards) ── */
.exec-cell {
  padding: var(--spacing-md, 16px);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-overlay, rgba(255,255,255,0.03));
}

/* ── Progress Bars ── */
.exec-bar {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-overlay, rgba(255,255,255,0.05));
}
.exec-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
}

/* ── Grid Layouts ── */
.exec-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg, 24px);
}
.exec-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md, 16px);
}
@media (max-width: 768px) {
  .exec-grid-2, .exec-grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .exec-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ── Trend Indicators ── */
.exec-trend-up { color: var(--color-success, #34d399); }
.exec-trend-down { color: var(--color-danger, #f87171); }
.exec-trend-flat { color: var(--text-muted, #94a3b8); }

/* ── Status Badges ── */
.exec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-semibold, 600);
}
body.style-colorblind .exec-badge {
  border: 2px solid;
}

/* ── Priority Badges ── */
.exec-priority-p1 { background: rgba(248,113,113,0.15); color: #f87171; }
.exec-priority-p2 { background: rgba(251,191,36,0.15); color: #fbbf24; }
.exec-priority-p3 { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* ── Decision Section ── */
.exec-decision-cost { background: rgba(248,113,113,0.04); border: 1px solid rgba(248,113,113,0.1); }
.exec-decision-benefit { background: rgba(52,211,153,0.04); border: 1px solid rgba(52,211,153,0.1); }

/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM COMPONENTS (Release 16.6)
   ══════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height, 44px);
  padding: 8px 22px;
  border-radius: var(--radius-md, 12px);
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast, 0.15s) ease;
}
.ds-btn:hover {
  transform: translateY(-1px);
}
.ds-btn:active {
  transform: translateY(0);
}

.ds-btn-primary {
  background: var(--color-primary, #6366f1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
.ds-btn-primary:hover {
  background: var(--color-primary-hover, #4f46e5);
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}

.ds-btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  color: var(--text-primary, #fff);
}
.ds-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--surface-border-hover, rgba(255,255,255,0.12));
}

.ds-btn-ghost {
  background: transparent;
  color: var(--text-secondary, rgba(255,255,255,0.5));
}
.ds-btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary, #fff);
}

.ds-btn-success {
  background: var(--color-success, #059669);
  color: #fff;
}
.ds-btn-success:hover {
  background: var(--color-success-hover, #047857);
}

.ds-btn-danger {
  background: var(--color-danger, #e11d48);
  color: #fff;
}
.ds-btn-danger:hover {
  background: var(--color-danger-hover, #be123c);
}

/* ── Button Size Variants ── */
.ds-btn-sm {
  min-height: 36px;
  padding: 6px 16px;
  font-size: var(--font-supporting, 15px);
}
.ds-btn-lg {
  min-height: 52px;
  padding: 12px 28px;
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-bold, 700);
}

/* ── Inputs ── */
.ds-input {
  min-height: var(--input-height, 48px);
  padding: 10px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  background: var(--surface-card, rgba(255,255,255,0.02));
  color: var(--text-primary, #fff);
  font-size: var(--font-body, 16px);
  outline: none;
  transition: all var(--transition-fast, 0.15s) ease;
}
.ds-input:focus {
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.ds-input::placeholder {
  color: var(--text-muted, rgba(255,255,255,0.25));
}

.ds-select {
  min-height: var(--input-height, 48px);
  padding: 10px 40px 10px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  background: var(--surface-card, rgba(255,255,255,0.02));
  color: var(--text-primary, #fff);
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-semibold, 600);
  outline: none;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s) ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.ds-select:focus {
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* ── Section Spacing ── */
.ds-section {
  margin-bottom: var(--section-spacing, 64px);
}
.ds-section-lg {
  margin-bottom: var(--section-spacing-lg, 96px);
}

/* ── Typography Classes ── */
.ds-display-kpi {
  font-size: var(--font-display-kpi, 48px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: var(--line-height-tight, 1);
  letter-spacing: var(--letter-spacing-tight, -0.03em);
}
.ds-page-title {
  font-size: var(--font-page-title, 40px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: var(--line-height-tight, 1.1);
  letter-spacing: var(--letter-spacing-tight, -0.02em);
}
.ds-section-title {
  font-size: var(--font-section-title, 32px);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.15);
  letter-spacing: var(--letter-spacing-tight, -0.015em);
}
.ds-card-title {
  font-size: var(--font-card-title, 22px);
  font-weight: var(--font-weight-bold, 700);
}
.ds-subheading {
  font-size: var(--font-subheading, 18px);
  font-weight: var(--font-weight-semibold, 600);
}
.ds-body {
  font-size: var(--font-body, 16px);
  line-height: var(--line-height-relaxed, 1.7);
  color: var(--text-secondary, rgba(255,255,255,0.55));
}
.ds-supporting {
  font-size: var(--font-supporting, 15px);
  color: var(--text-muted, rgba(255,255,255,0.3));
}
.ds-caption {
  font-size: var(--font-caption, 13px);
  color: var(--text-muted, rgba(255,255,255,0.25));
}

/* ── Glassmorphism Card ── */
.ds-glass {
  background: rgba(15, 20, 40, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--radius-lg, 16px) !important;
}
body.theme-ai-futuristic .ds-glass {
  background: rgba(10, 14, 30, 0.7) !important;
  border-color: rgba(79, 124, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(79, 124, 255, 0.06) !important;
}
body.theme-ai-futuristic .ds-glass:hover {
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12), 0 0 20px rgba(79, 124, 255, 0.1) !important;
}

/* ── KPI Card (standard pattern) ── */
.ds-kpi-card {
  border-radius: var(--radius-lg, 16px);
  padding: var(--card-padding, 28px);
  text-align: center;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  background: var(--surface-card, rgba(255,255,255,0.02));
  transition: all var(--transition-normal, 0.25s) ease;
}
.ds-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--surface-border-hover, rgba(255,255,255,0.12));
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.3));
}
.ds-kpi-value {
  font-size: var(--font-display-kpi, 48px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ds-kpi-label {
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ds-kpi-subtext {
  font-size: var(--font-supporting, 15px);
  color: var(--text-muted, rgba(255,255,255,0.25));
  margin-top: 4px;
}

/* ── Small Badge (for validation / trust badges) ── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 18px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-semibold, 600);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  transition: all var(--transition-fast, 0.15s) ease;
}
.ds-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.2);
  background: rgba(99,102,241,0.04);
  color: #818cf8;
  box-shadow: 0 0 12px rgba(99,102,241,0.08);
}
.ds-badge i {
  font-size: 14px;
}

body.theme-ai-futuristic .ds-badge {
  background: rgba(79, 124, 255, 0.06) !important;
  border-color: rgba(79, 124, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
}
body.theme-ai-futuristic .ds-badge:hover {
  background: rgba(79, 124, 255, 0.1) !important;
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 0 16px rgba(79, 124, 255, 0.15) !important;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .exec-card { padding: var(--spacing-lg, 24px); }
  .ds-kpi-card { padding: var(--spacing-lg, 24px); }
  .ds-display-kpi, .exec-kpi { font-size: 36px; }
  .ds-page-title { font-size: 28px; }
  .ds-section-title { font-size: 24px; }
  .ds-card-title { font-size: 18px; }
}
/* ══════════════════════════════════════════════════════════════
   PORTFOLIO — Shared Component Styles
   Now consumes DESIGN TOKENS (design_tokens.css)
   ══════════════════════════════════════════════════════════════ */

/* ── Portfolio Page Shell ── */
.portfolio-shell {
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text-primary);
}

/* ── Portfolio Cards ── */
.portfolio-card {
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-md);
  transition: border-color var(--transition-normal);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
}
body.style-apex-dark .portfolio-card {
  backdrop-filter: blur(12px);
}
body.style-colorblind .portfolio-card {
  border-width: var(--border-width, 2px);
  border-radius: var(--radius-sm);
}

/* ── Portfolio KPI Values ── */
.portfolio-kpi {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}
.portfolio-kpi-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

/* ── Portfolio Table ── */
.portfolio-table {
  width: 100%;
  border-collapse: collapse;
}
.portfolio-table th {
  padding: var(--spacing-sm) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  text-align: left;
  border-bottom: 1px solid;
  color: var(--text-muted);
  border-color: var(--surface-border);
}
body.style-colorblind .portfolio-table th {
  border-width: 2px;
  border-color: var(--surface-border);
}
.portfolio-table td {
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid;
  color: var(--text-primary);
  border-color: var(--surface-overlay);
}
.portfolio-table tr:hover td {
  background: var(--surface-overlay);
}

/* ── Portfolio Badges ── */
.portfolio-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.portfolio-badge-green { background: var(--color-success-light); color: var(--color-success); }
.portfolio-badge-amber { background: var(--color-warning-light); color: var(--color-warning); }
.portfolio-badge-red   { background: var(--color-danger-light); color: var(--color-danger); }
.portfolio-badge-blue  { background: var(--color-primary-light); color: var(--color-secondary); }
.portfolio-badge-gray  { background: var(--surface-overlay); color: var(--text-secondary); }
body.style-colorblind .portfolio-badge { border: var(--border-width, 2px) solid; }
body.style-colorblind .portfolio-badge-green,
body.style-colorblind .portfolio-badge-amber,
body.style-colorblind .portfolio-badge-red { background: var(--surface-card); color: var(--text-primary); border-color: var(--text-primary); }
body.style-colorblind .portfolio-badge-blue { background: var(--surface-card); color: var(--color-primary); border-color: var(--color-primary); }

/* ── Portfolio Progress Bars ── */
.portfolio-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-overlay);
}
body.style-colorblind .portfolio-bar {
  background: var(--surface-page);
  border: 1px solid var(--text-primary);
}
.portfolio-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s;
}

/* ── Portfolio Stat Cards ── */
.portfolio-stat {
  text-align: center;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
}
body.style-colorblind .portfolio-stat {
  border-width: var(--border-width, 2px);
}

/* ── Portfolio Section Title ── */
.portfolio-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-md);
  color: var(--color-secondary);
}
body.style-colorblind .portfolio-section-title {
  letter-spacing: 0.12em;
}

/* ── Portfolio Empty State ── */
.portfolio-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
  background: var(--color-primary-subtle);
}
body.style-colorblind .portfolio-empty-icon {
  background: var(--surface-card);
  border: var(--border-width, 2px) solid var(--text-primary);
}

/* ── Portfolio Form Inputs ── */
.portfolio-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  color: var(--text-primary);
}
.portfolio-input:focus {
  border-color: var(--color-primary);
}
body.style-colorblind .portfolio-input {
  border-width: var(--border-width, 2px);
}

.portfolio-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--spacing-xs);
  display: block;
  color: var(--text-secondary);
}

/* ── Portfolio KPI Grid ── */
.portfolio-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-sm);
}

/* ── Rank Badge ── */
.portfolio-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-extrabold);
}
.portfolio-rank-gold   { background: rgba(205,127,50,0.2); color: #cd7f32; }
.portfolio-rank-silver { background: rgba(148,163,184,0.2); color: #94a3b8; }
.portfolio-rank-bronze { background: rgba(205,127,50,0.1); color: #cd7f32; }
@media print {
  /* Keep background colors and graphics - don't force everything black */
  body { 
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Keep score badges, KPIs, and charts with their colors */
  .kpi-value, .stat-value, [class*="score"], [class*="badge"],
  [class*="ring"], [class*="gauge"], .apex-count {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Preserve gradient backgrounds on cards */
  .card, [class*="kpi-card"], [class*="glass-card"], [class*="exec-card"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  /* Keep colored text for scores and status */
  [class*="text-emerald"], [class*="text-amber"], [class*="text-red"],
  [class*="text-blue"], [class*="text-purple"], [class*="text-indigo"] {
    color: inherit !important;
  }
  
  /* Only hide UI chrome */
  nav, .navbar, button, input, select, textarea,
  .fixed, .sticky, .screenshot-deterrent,
  #pageLoader, #helpDrawer, #help-overlay,
  .dropdown, .btn {
    display: none !important;
  }
  
  /* But keep the Print button visible? No - hide it too */
  button.btn { display: none !important; }

  /* Show all content */
  * { overflow: visible !important; }
  
  /* Cards with proper print borders */
  .card, .apex-card, .exec-card {
    border: 1px solid #ccc !important;
    padding: 10pt;
    margin-bottom: 10pt;
    border-radius: 8pt;
    box-shadow: none !important;
    background: white !important;
  }

  /* Ensure charts render */
  canvas { 
    max-width: 100% !important; 
    page-break-inside: avoid;
  }
  
  /* SVG graphics */
  svg {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Page breaks */
  .page-break { page-break-before: always; }

  /* Typography for print */
  body { font-size: 11pt; line-height: 1.4; }
  h1 { font-size: 18pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }

  /* Tables */
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 6pt 8pt; border: 1px solid #ddd; }
}
/* APEX360 UI Style Engine — 4 Themes */
/* Override Tailwind utility classes per theme */
/* ============================================ */

/* ===== APPLE MINIMAL ===== */
[data-style="apple_minimal"] {
  --bg: #1c1c1e;
  --bg-2: #2c2c2e;
  --text: #f5f5f7;
  --text-2: #aeaeb2;
  --accent: #0071e3;
  --border: rgba(255,255,255,0.08);
}

[data-style="apple_minimal"] .bg-gray-900,
[data-style="apple_minimal"] .bg-gray-950 { background-color: #1c1c1e !important; }
[data-style="apple_minimal"] .bg-gray-800 { background-color: #2c2c2e !important; }
[data-style="apple_minimal"] .bg-gray-700 { background-color: #3a3a3c !important; }
[data-style="apple_minimal"] .text-gray-100,
[data-style="apple_minimal"] .text-white { color: #f5f5f7 !important; }
[data-style="apple_minimal"] .text-gray-400,
[data-style="apple_minimal"] .text-gray-500 { color: #aeaeb2 !important; }
[data-style="apple_minimal"] .text-indigo-400 { color: #0071e3 !important; }
[data-style="apple_minimal"] .border-gray-700 { border-color: rgba(255,255,255,0.08) !important; }
[data-style="apple_minimal"] .card,
[data-style="apple_minimal"] [class*="bg-gray-8"] { background-color: #2c2c2e !important; }
[data-style="apple_minimal"] .navbar { background-color: #1c1c1e !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
[data-style="apple_minimal"] .btn-ghost:hover { background-color: rgba(255,255,255,0.05) !important; }

/* ===== MODERN SAAS ===== */
[data-style="modern_saas"] {
  --bg: #f8f9fa;
  --bg-2: #ffffff;
  --text: #212529;
  --text-2: #6c757d;
  --accent: #4361ee;
  --border: #dee2e6;
}

[data-style="modern_saas"] .bg-gray-900,
[data-style="modern_saas"] .bg-gray-950 { background-color: #f8f9fa !important; }
[data-style="modern_saas"] .bg-gray-800 { background-color: #ffffff !important; }
[data-style="modern_saas"] .bg-gray-700 { background-color: #e9ecef !important; }
[data-style="modern_saas"] .text-gray-100,
[data-style="modern_saas"] .text-white { color: #212529 !important; }
[data-style="modern_saas"] .text-gray-400,
[data-style="modern_saas"] .text-gray-500 { color: #6c757d !important; }
[data-style="modern_saas"] .text-indigo-400 { color: #4361ee !important; }
[data-style="modern_saas"] .border-gray-700,
[data-style="modern_saas"] .border-gray-800 { border-color: #dee2e6 !important; }
[data-style="modern_saas"] .card,
[data-style="modern_saas"] [class*="bg-gray-8"] { background-color: #ffffff !important; }
[data-style="modern_saas"] .navbar { background-color: #212529 !important; }
[data-style="modern_saas"] .navbar .text-white,
[data-style="modern_saas"] .navbar .text-gray-100 { color: #ffffff !important; }
[data-style="modern_saas"] .navbar .text-gray-400 { color: #adb5bd !important; }
[data-style="modern_saas"] .navbar .btn-ghost:hover { background-color: rgba(255,255,255,0.1) !important; }
[data-style="modern_saas"] .rounded-xl { border-radius: 0px !important; }
[data-style="modern_saas"] .rounded-lg { border-radius: 0px !important; }

/* ===== MICROSOFT FLUENT ===== */
[data-style="microsoft_fluent"] {
  --bg: #f0f0f0;
  --bg-2: #ffffff;
  --text: #1a1a1a;
  --text-2: #555555;
  --accent: #0078d4;
  --border: #d1d1d1;
}

[data-style="microsoft_fluent"] .bg-gray-900,
[data-style="microsoft_fluent"] .bg-gray-950 { background-color: #f0f0f0 !important; }
[data-style="microsoft_fluent"] .bg-gray-800 { background-color: #ffffff !important; }
[data-style="microsoft_fluent"] .bg-gray-700 { background-color: #e1e1e1 !important; }
[data-style="microsoft_fluent"] .text-gray-100,
[data-style="microsoft_fluent"] .text-white { color: #1a1a1a !important; }
[data-style="microsoft_fluent"] .text-gray-400,
[data-style="microsoft_fluent"] .text-gray-500 { color: #555555 !important; }
[data-style="microsoft_fluent"] .text-indigo-400 { color: #0078d4 !important; }
[data-style="microsoft_fluent"] .border-gray-700,
[data-style="microsoft_fluent"] .border-gray-800 { border-color: #d1d1d1 !important; }
[data-style="microsoft_fluent"] .card,
[data-style="microsoft_fluent"] [class*="bg-gray-8"] { background-color: #ffffff !important; }
[data-style="microsoft_fluent"] .navbar { background-color: #0078d4 !important; }
[data-style="microsoft_fluent"] .navbar .text-white,
[data-style="microsoft_fluent"] .navbar .text-gray-100 { color: #ffffff !important; }
[data-style="microsoft_fluent"] .navbar .text-indigo-400 { color: #ffffff !important; }
[data-style="microsoft_fluent"] .rounded-xl { border-radius: 4px !important; }
[data-style="microsoft_fluent"] .rounded-lg { border-radius: 4px !important; }
[data-style="microsoft_fluent"] [class*="shadow"] { box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important; }

/* ===== BOLD COLOURFUL ===== */
[data-style="bold_colourful"] {
  --bg: #0f0f1a;
  --bg-2: #1a1a2e;
  --text: #ffffff;
  --text-2: #c4c4d4;
  --accent: #f72585;
  --border: rgba(255,255,255,0.1);
}

[data-style="bold_colourful"] .bg-gray-900 { background-color: #0f0f1a !important; }
[data-style="bold_colourful"] .bg-gray-950 { background-color: #0a0a14 !important; }
[data-style="bold_colourful"] .bg-gray-800 { background-color: #1a1a2e !important; }
[data-style="bold_colourful"] .bg-gray-700 { background-color: #16213e !important; }
[data-style="bold_colourful"] .bg-indigo-900\/40,
[data-style="bold_colourful"] .bg-indigo-900\/30,
[data-style="bold_colourful"] .bg-indigo-900\/20 { 
  background: linear-gradient(135deg, rgba(102,126,234,0.2), rgba(118,75,162,0.2)) !important; 
}
[data-style="bold_colourful"] .bg-emerald-600\/20 { 
  background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(52,211,153,0.15)) !important; 
}
[data-style="bold_colourful"] .text-indigo-400 { color: #667eea !important; }
[data-style="bold_colourful"] .text-emerald-400 { color: #34d399 !important; }
[data-style="bold_colourful"] .text-amber-400 { color: #fbbf24 !important; }
[data-style="bold_colourful"] .text-red-400 { color: #f72585 !important; }
[data-style="bold_colourful"] .border-gray-700,
[data-style="bold_colourful"] .border-gray-800 { border-color: rgba(255,255,255,0.1) !important; }
[data-style="bold_colourful"] .border-indigo-800\/30 { border-color: rgba(102,126,234,0.3) !important; }
[data-style="bold_colourful"] .border-emerald-700\/50 { border-color: rgba(16,185,129,0.3) !important; }
[data-style="bold_colourful"] .card,
[data-style="bold_colourful"] [class*="bg-gray-8"] { background-color: #1a1a2e !important; }
[data-style="bold_colourful"] .navbar { 
  background: linear-gradient(135deg, #667eea, #764ba2) !important; 
  border-bottom: none !important;
}
[data-style="bold_colourful"] .navbar .text-indigo-400 { color: #ffffff !important; }
[data-style="bold_colourful"] [class*="shadow"] { 
  box-shadow: 0 4px 16px rgba(247,37,133,0.2) !important; 
}
[data-style="bold_colourful"] .rounded-xl { border-radius: 16px !important; }
[data-style="bold_colourful"] .rounded-lg { border-radius: 16px !important; }
[data-style="bold_colourful"] .rounded-2xl { border-radius: 24px !important; }
/* ══════════════════════════════════════════════════════════════
   Theme Utility Classes (Release 17.5)
   
   Drop-in replacements for common inline style patterns.
   Every class uses CSS variables — works in ALL themes.
   
   Usage: class="theme-text-primary theme-bg-card theme-border"
   ══════════════════════════════════════════════════════════════ */

/* ── Theme-aware Text Colors ── */
.theme-text-primary { color: var(--text-primary, #e2e8f0) !important; }
.theme-text-secondary { color: var(--text-secondary, #94a3b8) !important; }
.theme-text-muted { color: var(--text-muted, #64748b) !important; }
.theme-text-inverse { color: var(--text-inverse, #0b1120) !important; }
.theme-text-link { color: var(--text-link, #818cf8) !important; }
.theme-text-success { color: var(--color-success, #059669) !important; }
.theme-text-warning { color: var(--color-warning, #d97706) !important; }
.theme-text-danger { color: var(--color-danger, #e11d48) !important; }
.theme-text-info { color: var(--color-info, #0891b2) !important; }

/* ── Theme-aware Backgrounds ── */
.theme-bg-page { background: var(--surface-page, #0b1120) !important; }
.theme-bg-card { background: var(--surface-card, rgba(255,255,255,0.03)) !important; }
.theme-bg-elevated { background: var(--surface-elevated, rgba(255,255,255,0.06)) !important; }
.theme-bg-overlay { background: var(--surface-overlay, rgba(255,255,255,0.04)) !important; }

/* ── Theme-aware Borders ── */
.theme-border { border: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important; }
.theme-border-bottom { border-bottom: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important; }
.theme-border-top { border-top: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important; }

/* ── Theme-aware Cards ── */
.theme-card {
  border-radius: var(--radius-md, 12px) !important;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important;
  background: var(--surface-card, rgba(255,255,255,0.03)) !important;
  transition: all 0.2s ease !important;
}

/* ── Theme-aware Buttons ── */
.theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: var(--btn-height, 44px) !important;
  padding: 10px 22px !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-size: var(--font-supporting, 15px) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast, 0.15s) ease !important;
  text-decoration: none !important;
}
.theme-btn-primary {
  background: var(--color-primary, #6366f1) !important;
  color: #fff !important;
  border: none !important;
}
.theme-btn-primary:hover {
  background: var(--color-primary-hover, #4f46e5) !important;
  box-shadow: var(--shadow-glow-primary, none) !important;
  transform: translateY(-1px) !important;
}
.theme-btn-secondary {
  background: var(--color-primary-subtle, rgba(99,102,241,0.06)) !important;
  color: var(--color-secondary, #818cf8) !important;
  border: 1px solid var(--color-primary-light, rgba(99,102,241,0.15)) !important;
}
.theme-btn-ghost {
  background: transparent !important;
  color: var(--text-secondary, #94a3b8) !important;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important;
}

/* ── Theme-aware Badges ── */
.theme-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-size: var(--font-caption, 13px) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  border: 1px solid !important;
}
.theme-badge-success {
  background: var(--color-success-subtle, rgba(5,150,105,0.06)) !important;
  color: var(--color-success, #059669) !important;
  border-color: var(--color-success-light, rgba(5,150,105,0.15)) !important;
}
.theme-badge-warning {
  background: var(--color-warning-subtle, rgba(217,119,6,0.06)) !important;
  color: var(--color-warning, #d97706) !important;
  border-color: var(--color-warning-light, rgba(217,119,6,0.15)) !important;
}
.theme-badge-danger {
  background: var(--color-danger-subtle, rgba(225,29,72,0.06)) !important;
  color: var(--color-danger, #e11d48) !important;
  border-color: var(--color-danger-light, rgba(225,29,72,0.15)) !important;
}
.theme-badge-info {
  background: var(--color-info-light, rgba(8,145,178,0.15)) !important;
  color: var(--color-info, #0891b2) !important;
  border-color: var(--color-info-light, rgba(8,145,178,0.15)) !important;
}

/* ── Theme-aware Typography Scale ── */
.theme-font-kpi { font-size: var(--font-display-kpi, 48px) !important; font-weight: var(--font-weight-extrabold, 800) !important; line-height: 1 !important; letter-spacing: var(--letter-spacing-tight, -0.03em) !important; }
.theme-font-page-title { font-size: var(--font-page-title, 40px) !important; font-weight: var(--font-weight-extrabold, 800) !important; letter-spacing: var(--letter-spacing-tight, -0.03em) !important; }
.theme-font-section-title { font-size: var(--font-section-title, 32px) !important; font-weight: var(--font-weight-extrabold, 800) !important; letter-spacing: -0.02em !important; }
.theme-font-card-title { font-size: var(--font-card-title, 22px) !important; font-weight: var(--font-weight-bold, 700) !important; }
.theme-font-subheading { font-size: var(--font-subheading, 18px) !important; font-weight: var(--font-weight-semibold, 600) !important; }
.theme-font-body { font-size: var(--font-body, 16px) !important; font-weight: var(--font-weight-normal, 400) !important; line-height: var(--line-height-relaxed, 1.7) !important; }
.theme-font-supporting { font-size: var(--font-supporting, 15px) !important; }
.theme-font-caption { font-size: var(--font-caption, 13px) !important; }
.theme-font-micro { font-size: var(--font-micro, 11px) !important; }

/* ── Layout Utilities ── */
.theme-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.theme-flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.theme-flex-gap-sm { gap: 8px !important; }
.theme-flex-gap-md { gap: 16px !important; }
.theme-flex-gap-lg { gap: 24px !important; }
.theme-container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 24px !important; }
.theme-section-padding { padding: 24px 28px !important; }
.theme-section-spacing { margin-bottom: 40px !important; }
/* ══════════════════════════════════════════════════════════════
   APPEX360 — AI Futuristic Theme
   Premium dark AI platform with electric blue neon, glassmorphism
   and subtle animated background effects.
   
   Apply: <body class="theme-ai-futuristic">
   ══════════════════════════════════════════════════════════════ */

/* ── CSS Variable Overrides ── */
body.theme-ai-futuristic {
  /* ── Core Colors ── */
  --color-primary: #4F7CFF;
  --color-primary-hover: #3D6BEE;
  --color-primary-light: rgba(79, 124, 255, 0.15);
  --color-primary-subtle: rgba(79, 124, 255, 0.06);
  --color-secondary: #7C5CFF;
  --color-secondary-light: rgba(124, 92, 255, 0.15);
  --color-accent: #21D4FD;
  --color-accent-light: rgba(33, 212, 253, 0.15);
  --color-highlight: #B15EFF;
  --color-highlight-light: rgba(177, 94, 255, 0.15);
  
  --color-success: #32D583;
  --color-success-hover: #28C076;
  --color-success-light: rgba(50, 213, 131, 0.15);
  --color-success-subtle: rgba(50, 213, 131, 0.06);
  --color-warning: #FBBF24;
  --color-warning-hover: #F59E0B;
  --color-warning-light: rgba(251, 191, 36, 0.15);
  --color-warning-subtle: rgba(251, 191, 36, 0.06);
  --color-danger: #F04438;
  --color-danger-hover: #D92D20;
  --color-danger-light: rgba(240, 68, 56, 0.15);
  --color-danger-subtle: rgba(240, 68, 56, 0.06);
  --color-info: #21D4FD;
  --color-info-light: rgba(33, 212, 253, 0.15);

  /* ── Surfaces ── */
  --surface-page: #050816;
  --surface-card: rgba(15, 20, 40, 0.85);
  --surface-card-hover: rgba(20, 28, 56, 0.9);
  --surface-elevated: rgba(20, 28, 56, 0.92);
  --surface-overlay: rgba(0, 0, 0, 0.5);
  --surface-border: rgba(79, 124, 255, 0.15);
  --surface-border-hover: rgba(79, 124, 255, 0.3);

  /* ── Text ── */
  --text-primary: #F0F4FF;
  --text-secondary: #8899CC;
  --text-muted: #5A6B99;
  --text-inverse: #050816;
  --text-link: #4F7CFF;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(79, 124, 255, 0.08);
  --shadow-md: 0 4px 12px rgba(79, 124, 255, 0.12);
  --shadow-lg: 0 10px 30px rgba(79, 124, 255, 0.15);
  --shadow-glow-primary: 0 0 20px rgba(79, 124, 255, 0.3);
  --shadow-glow-secondary: 0 0 20px rgba(124, 92, 255, 0.3);
  --shadow-glow-accent: 0 0 20px rgba(33, 212, 253, 0.3);
}

/* ── Body Background with Animated Effects ── */
body.theme-ai-futuristic {
  background: #050816;
  position: relative;
}

body.theme-ai-futuristic::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(79, 124, 255, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 500px 500px at 80% 20%, rgba(124, 92, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 400px 300px at 60% 70%, rgba(33, 212, 253, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: theme-bg-drift 30s ease-in-out infinite alternate;
}

@keyframes theme-bg-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(1%, 1%) rotate(0.5deg); }
  100% { transform: translate(-1%, -0.5%) rotate(-0.5deg); }
}

/* ── Glassmorphism Base ── */
body.theme-ai-futuristic .glass,
body.theme-ai-futuristic [class*="apex-card"],
body.theme-ai-futuristic .card {
  background: rgba(15, 20, 40, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(79, 124, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(79, 124, 255, 0.06) !important;
  transition: all 0.2s ease !important;
}

body.theme-ai-futuristic [class*="apex-card"]:hover,
body.theme-ai-futuristic .card:hover {
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12), var(--shadow-glow-primary) !important;
  transform: translateY(-1px);
}

/* ── Global Navigation ── */
body.theme-ai-futuristic .apex-global-nav {
  background: rgba(5, 8, 22, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(79, 124, 255, 0.12) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(79, 124, 255, 0.06) !important;
}

body.theme-ai-futuristic .apex-nav-link:hover {
  background: rgba(79, 124, 255, 0.08) !important;
  color: #4F7CFF !important;
}

body.theme-ai-futuristic .apex-nav-active {
  color: #4F7CFF !important;
  background: rgba(79, 124, 255, 0.1) !important;
  box-shadow: inset 0 -2px 0 #4F7CFF !important;
}

body.theme-ai-futuristic .apex-nav-avatar:hover {
  border-color: rgba(79, 124, 255, 0.3) !important;
  background: rgba(79, 124, 255, 0.06) !important;
}

body.theme-ai-futuristic #apex-search-wrapper:focus-within {
  border-color: rgba(79, 124, 255, 0.5) !important;
  box-shadow: 0 0 15px rgba(79, 124, 255, 0.15) !important;
}

body.theme-ai-futuristic #apex-notif-bell:hover {
  color: #4F7CFF !important;
  background: rgba(79, 124, 255, 0.08) !important;
}

body.theme-ai-futuristic #apex-notif-badge {
  background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important;
  box-shadow: 0 0 8px rgba(79, 124, 255, 0.5) !important;
}

body.theme-ai-futuristic #apex-status-indicator span:first-child {
  box-shadow: 0 0 8px currentColor !important;
}

/* ── Dropdowns & Modals ── */
body.theme-ai-futuristic .dropdown-content,
body.theme-ai-futuristic [class*="dropdown-content"],
body.theme-ai-futuristic #apex-search-dropdown,
body.theme-ai-futuristic #apex-quick-actions-menu,
body.theme-ai-futuristic #apex-feedback-panel,
body.theme-ai-futuristic #apex-command-palette > div {
  background: rgba(10, 14, 30, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(79, 124, 255, 0.12) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), var(--shadow-glow-primary) !important;
}

body.theme-ai-futuristic .dropdown-content li a:hover {
  background: rgba(79, 124, 255, 0.08) !important;
  color: #4F7CFF !important;
}

/* ── Buttons ── */
body.theme-ai-futuristic .btn-primary,
body.theme-ai-futuristic [class*="btn-primary"],
body.theme-ai-futuristic .apex-btn-primary {
  background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(79, 124, 255, 0.25) !important;
  transition: all 0.2s ease !important;
}

body.theme-ai-futuristic .btn-primary:hover,
body.theme-ai-futuristic .apex-btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 25px rgba(79, 124, 255, 0.35), var(--shadow-glow-primary) !important;
}

body.theme-ai-futuristic .btn-secondary,
body.theme-ai-futuristic .apex-btn-secondary {
  background: rgba(124, 92, 255, 0.08) !important;
  border: 1px solid rgba(124, 92, 255, 0.2) !important;
  color: #B597FF !important;
}

body.theme-ai-futuristic .btn-secondary:hover,
body.theme-ai-futuristic .apex-btn-secondary:hover {
  background: rgba(124, 92, 255, 0.15) !important;
  border-color: rgba(124, 92, 255, 0.35) !important;
  box-shadow: 0 0 15px rgba(124, 92, 255, 0.2) !important;
}

body.theme-ai-futuristic .btn-ghost,
body.theme-ai-futuristic .apex-btn-outline {
  background: rgba(15, 20, 40, 0.5) !important;
  border: 1px solid rgba(79, 124, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  color: #8899CC !important;
}

body.theme-ai-futuristic .btn-ghost:hover,
body.theme-ai-futuristic .apex-btn-outline:hover {
  border-color: rgba(79, 124, 255, 0.35) !important;
  color: #4F7CFF !important;
  background: rgba(79, 124, 255, 0.06) !important;
}

body.theme-ai-futuristic .btn-danger,
body.theme-ai-futuristic .apex-btn-danger {
  background: linear-gradient(135deg, #F04438, #D92D20) !important;
  box-shadow: 0 4px 15px rgba(240, 68, 56, 0.25) !important;
}

body.theme-ai-futuristic .btn-danger:hover {
  box-shadow: 0 8px 25px rgba(240, 68, 56, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.theme-ai-futuristic .btn-success,
body.theme-ai-futuristic .apex-btn-success {
  background: linear-gradient(135deg, #32D583, #28C076) !important;
  box-shadow: 0 4px 15px rgba(50, 213, 131, 0.25) !important;
}

body.theme-ai-futuristic .btn-success:hover {
  box-shadow: 0 8px 25px rgba(50, 213, 131, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ── Forms ── */
body.theme-ai-futuristic input[type="text"],
body.theme-ai-futuristic input[type="email"],
body.theme-ai-futuristic input[type="password"],
body.theme-ai-futuristic input[type="search"],
body.theme-ai-futuristic input[type="number"],
body.theme-ai-futuristic input[type="tel"],
body.theme-ai-futuristic textarea,
body.theme-ai-futuristic select {
  background: rgba(15, 20, 40, 0.6) !important;
  border: 1px solid rgba(79, 124, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #F0F4FF !important;
  transition: all 0.2s ease !important;
}

body.theme-ai-futuristic input:focus,
body.theme-ai-futuristic textarea:focus,
body.theme-ai-futuristic select:focus {
  border-color: #4F7CFF !important;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15), 0 0 15px rgba(79, 124, 255, 0.1) !important;
  outline: none !important;
}

body.theme-ai-futuristic label {
  color: #8899CC !important;
  font-weight: 500 !important;
}

body.theme-ai-futuristic input::placeholder,
body.theme-ai-futuristic textarea::placeholder {
  color: #5A6B99 !important;
}

body.theme-ai-futuristic select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238899CC' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ── Tables ── */
body.theme-ai-futuristic table,
body.theme-ai-futuristic .table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.theme-ai-futuristic table th,
body.theme-ai-futuristic .table th {
  background: rgba(79, 124, 255, 0.06) !important;
  color: #8899CC !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(79, 124, 255, 0.1) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

body.theme-ai-futuristic table td,
body.theme-ai-futuristic .table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(79, 124, 255, 0.06) !important;
  color: #CCD6F0 !important;
  font-size: 13px !important;
}

body.theme-ai-futuristic table tr:nth-child(even) td,
body.theme-ai-futuristic .table tr:nth-child(even) td {
  background: rgba(79, 124, 255, 0.02) !important;
}

body.theme-ai-futuristic table tr:hover td,
body.theme-ai-futuristic .table tr:hover td {
  background: rgba(79, 124, 255, 0.04) !important;
}

body.theme-ai-futuristic table tr.selected td,
body.theme-ai-futuristic .table tr.selected td {
  background: rgba(79, 124, 255, 0.08) !important;
  box-shadow: inset 3px 0 0 #4F7CFF !important;
}

/* ── Badges & Tags ── */
body.theme-ai-futuristic .badge,
body.theme-ai-futuristic .apex-tag {
  background: rgba(79, 124, 255, 0.08) !important;
  border: 1px solid rgba(79, 124, 255, 0.15) !important;
  color: #4F7CFF !important;
  border-radius: 6px !important;
}

body.theme-ai-futuristic .badge-success {
  background: rgba(50, 213, 131, 0.1) !important;
  border-color: rgba(50, 213, 131, 0.2) !important;
  color: #32D583 !important;
}

body.theme-ai-futuristic .badge-warning {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
  color: #FBBF24 !important;
}

body.theme-ai-futuristic .badge-error,
body.theme-ai-futuristic .badge-danger {
  background: rgba(240, 68, 56, 0.1) !important;
  border-color: rgba(240, 68, 56, 0.2) !important;
  color: #F04438 !important;
}

/* ── Progress Bars ── */
body.theme-ai-futuristic progress,
body.theme-ai-futuristic .progress-bar,
body.theme-ai-futuristic .apex-progress-fill {
  background: rgba(79, 124, 255, 0.08) !important;
  border-radius: 4px !important;
}

body.theme-ai-futuristic .apex-progress-fill,
body.theme-ai-futuristic .progress-bar-fill {
  background: linear-gradient(90deg, #4F7CFF, #7C5CFF) !important;
  box-shadow: 0 0 8px rgba(79, 124, 255, 0.3) !important;
}

/* ── Data Source Labels ── */
body.theme-ai-futuristic [class*="source-label"] {
  font-size: 9px !important;
  border-radius: 4px !important;
}

body.theme-ai-futuristic .source-live {
  background: rgba(50, 213, 131, 0.12) !important;
  color: #32D583 !important;
}

body.theme-ai-futuristic .source-calculated {
  background: rgba(79, 124, 255, 0.12) !important;
  color: #4F7CFF !important;
}

body.theme-ai-futuristic .source-benchmark {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #FBBF24 !important;
}

body.theme-ai-futuristic .source-demo {
  background: rgba(124, 92, 255, 0.12) !important;
  color: #B597FF !important;
}

/* ── Alerts & Notifications ── */
body.theme-ai-futuristic .alert,
body.theme-ai-futuristic [class*="alert-"] {
  border-radius: 10px !important;
  border-width: 1px !important;
}

body.theme-ai-futuristic .alert-success {
  background: rgba(50, 213, 131, 0.08) !important;
  border-color: rgba(50, 213, 131, 0.2) !important;
  color: #32D583 !important;
}

body.theme-ai-futuristic .alert-warning {
  background: rgba(251, 191, 36, 0.08) !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
  color: #FBBF24 !important;
}

body.theme-ai-futuristic .alert-error,
body.theme-ai-futuristic .alert-danger {
  background: rgba(240, 68, 56, 0.08) !important;
  border-color: rgba(240, 68, 56, 0.2) !important;
  color: #F04438 !important;
}

body.theme-ai-futuristic .alert-info {
  background: rgba(33, 212, 253, 0.08) !important;
  border-color: rgba(33, 212, 253, 0.2) !important;
  color: #21D4FD !important;
}

/* ── KPI Cards ── */
body.theme-ai-futuristic [class*="kpi-"],
body.theme-ai-futuristic .stat-card {
  background: rgba(15, 20, 40, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(79, 124, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

body.theme-ai-futuristic [class*="kpi-"]:hover,
body.theme-ai-futuristic .stat-card:hover {
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: var(--shadow-glow-primary) !important;
  transform: translateY(-1px) !important;
}

/* ── Charts ── */
body.theme-ai-futuristic .apex-chart-grid line,
body.theme-ai-futuristic [class*="chart-grid"] line {
  stroke: rgba(79, 124, 255, 0.06) !important;
}

body.theme-ai-futuristic .apex-chart-line {
  filter: drop-shadow(0 0 6px rgba(79, 124, 255, 0.3)) !important;
}

body.theme-ai-futuristic .apex-chart-point {
  filter: drop-shadow(0 0 8px rgba(79, 124, 255, 0.5)) !important;
}

/* ── Intelligence Wheel ── */
body.theme-ai-futuristic .donut-segment:hover {
  filter: drop-shadow(0 0 10px rgba(79, 124, 255, 0.3)) !important;
}

body.theme-ai-futuristic .donut-center-text {
  filter: drop-shadow(0 0 20px rgba(79, 124, 255, 0.2)) !important;
}

/* ── Quick Actions FAB ── */
body.theme-ai-futuristic #apex-quick-actions-fab {
  background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important;
  box-shadow: 0 4px 20px rgba(79, 124, 255, 0.35) !important;
}

body.theme-ai-futuristic #apex-quick-actions-fab:hover {
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.5) !important;
}

/* ── Design System Components (Release 16.6) ── */
body.theme-ai-futuristic .ds-btn-primary {
  background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important;
  box-shadow: 0 4px 15px rgba(79, 124, 255, 0.25) !important;
}
body.theme-ai-futuristic .ds-btn-primary:hover {
  box-shadow: 0 8px 25px rgba(79, 124, 255, 0.35), 0 0 20px rgba(79, 124, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

body.theme-ai-futuristic .ds-btn-secondary {
  background: rgba(15, 20, 40, 0.6) !important;
  border-color: rgba(79, 124, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
}
body.theme-ai-futuristic .ds-btn-secondary:hover {
  border-color: rgba(79, 124, 255, 0.35) !important;
  background: rgba(79, 124, 255, 0.08) !important;
  box-shadow: 0 0 15px rgba(79, 124, 255, 0.1) !important;
}

body.theme-ai-futuristic .ds-kpi-card {
  background: rgba(15, 20, 40, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  border-color: rgba(79, 124, 255, 0.1) !important;
}
body.theme-ai-futuristic .ds-kpi-card:hover {
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12), 0 0 20px rgba(79, 124, 255, 0.08) !important;
}

body.theme-ai-futuristic .exec-card {
  background: rgba(15, 20, 40, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  border-color: rgba(79, 124, 255, 0.1) !important;
}
body.theme-ai-futuristic .exec-card:hover {
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12) !important;
}

body.theme-ai-futuristic .ds-select,
body.theme-ai-futuristic .ds-input {
  background: rgba(15, 20, 40, 0.6) !important;
  border-color: rgba(79, 124, 255, 0.12) !important;
}
body.theme-ai-futuristic .ds-select:focus,
body.theme-ai-futuristic .ds-input:focus {
  border-color: #4F7CFF !important;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15), 0 0 15px rgba(79, 124, 255, 0.1) !important;
}

body.theme-ai-futuristic .ds-section-title,
body.theme-ai-futuristic .ds-page-title {
  color: #F0F4FF !important;
}

/* ── Footer ── */
body.theme-ai-futuristic .apex-footer,
body.theme-ai-futuristic .apex-global-footer,
body.theme-ai-futuristic [class*="footer"] {
  background: rgba(5, 8, 22, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(79, 124, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(79, 124, 255, 0.04) !important;
}

body.theme-ai-futuristic .apex-global-footer a.footer-link {
  transition: all 0.2s ease !important;
  position: relative !important;
}

body.theme-ai-futuristic .apex-global-footer a.footer-link:hover {
  color: #4F7CFF !important;
  text-shadow: 0 0 20px rgba(79, 124, 255, 0.3) !important;
}

body.theme-ai-futuristic .apex-global-footer h4 {
  color: rgba(79, 124, 255, 0.5) !important;
  letter-spacing: 0.12em !important;
}

body.theme-ai-futuristic .apex-global-footer [style*="border-top"] {
  border-top-color: rgba(79, 124, 255, 0.06) !important;
}

/* ── Pagination ── */
body.theme-ai-futuristic .pagination a,
body.theme-ai-futuristic .pagination span {
  background: rgba(15, 20, 40, 0.5) !important;
  border: 1px solid rgba(79, 124, 255, 0.1) !important;
  color: #8899CC !important;
  border-radius: 6px !important;
}

body.theme-ai-futuristic .pagination .current {
  background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ── Tooltips ── */
body.theme-ai-futuristic [class*="tooltip"] {
  background: rgba(10, 14, 30, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(79, 124, 255, 0.15) !important;
  color: #F0F4FF !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

/* ── Role Cards (Onboarding) ── */
body.theme-ai-futuristic .role-card {
  background: rgba(15, 20, 40, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(79, 124, 255, 0.1) !important;
  border-radius: 12px !important;
}

body.theme-ai-futuristic .role-card:hover {
  border-color: rgba(79, 124, 255, 0.3) !important;
  box-shadow: 0 4px 20px rgba(79, 124, 255, 0.15), var(--shadow-glow-primary) !important;
}

body.theme-ai-futuristic .role-card input:checked + *,
body.theme-ai-futuristic .role-card:has(input:checked) {
  border-color: #4F7CFF !important;
  background: rgba(79, 124, 255, 0.08) !important;
  box-shadow: 0 0 20px rgba(79, 124, 255, 0.2), inset 0 0 20px rgba(79, 124, 255, 0.04) !important;
}

/* ── Floating Dock ── */
body.theme-ai-futuristic .floating-dock-btn {
  background: rgba(15, 20, 40, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(79, 124, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.theme-ai-futuristic .floating-dock-btn:hover {
  border-color: rgba(79, 124, 255, 0.3) !important;
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.2), var(--shadow-glow-primary) !important;
}

body.theme-ai-futuristic .did-you-know-card {
  background: rgba(15, 20, 40, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(79, 124, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ── Motion & Animation Reduction ── */
@media (prefers-reduced-motion: reduce) {
  body.theme-ai-futuristic,
  body.theme-ai-futuristic *,
  body.theme-ai-futuristic *::before,
  body.theme-ai-futuristic *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  
  body.theme-ai-futuristic::before {
    animation: none !important;
  }
}
/* ════════════════════════════════════════════
   base.css — Shared Component Stylesheet
   APPEX360 Global Theme Engine — Release 18.0
   
   Every component consumes ONLY semantic tokens.
   No hardcoded colours anywhere.
   
   Token files define the variables.
   This file defines the components.
   ════════════════════════════════════════════ */

/* ── Base Document ── */
body {
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}
p, li, .text-secondary {
  color: var(--text-secondary);
}
.text-muted, small, .caption {
  color: var(--text-muted);
}
a, .link {
  color: var(--text-link);
}

/* ── Cards ── */
.card, .vis-card, .exec-card, .ds-card, [class*="card"]:not(.no-theme) {
  background: var(--surface-card);
  border: var(--border-width) solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card:hover, .vis-card:hover, .exec-card:hover {
  border-color: var(--surface-border-hover);
  box-shadow: var(--shadow-md);
}

/* ── KPI Cards ── */
.kpi-card, .ds-kpi-card, .stat-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--surface-border);
  border-radius: var(--radius-md);
}
.kpi-card .kpi-label, .ds-kpi-label {
  color: var(--text-secondary);
}
.kpi-card .kpi-value, .ds-kpi-value {
  color: var(--text-primary);
}

/* ── Buttons ── */
.btn-primary, .ds-btn-primary, button.primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
  height: var(--btn-height);
  border: none;
}
.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary, .ds-btn-secondary {
  background: transparent;
  color: var(--accent);
  border: var(--border-width) solid var(--surface-border);
  border-radius: var(--btn-radius);
  height: var(--btn-height);
}
.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Navigation Bar ── */
.nav, .apex-global-nav, .top-nav, [class*="navbar"] {
  background: var(--nav-bg);
  border-bottom: var(--border-width) solid var(--nav-border);
}
.nav a, .nav-link, .apex-nav-link {
  color: var(--nav-text);
}
.nav a:hover, .nav-link:hover, .apex-nav-link:hover {
  color: var(--nav-text-hover);
}
.nav a.active, .nav-link.active, .apex-nav-link.active, .apex-nav-active {
  background: var(--nav-active-bg);
  color: var(--nav-text-hover);
}

/* ── Sidebar ── */
.sidebar, [class*="sidebar"] {
  background: var(--sidebar-bg);
  border-right: var(--border-width) solid var(--sidebar-border);
}
.sidebar a, .sidebar-link {
  color: var(--sidebar-text);
}
.sidebar a:hover, .sidebar-link:hover {
  color: var(--text-primary);
}
.sidebar a.active, .sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--text-primary);
}

/* ── Tables ── */
table, .table, [class*="table"] {
  border-collapse: separate;
  border-spacing: 0;
}
table th, .table th, [class*="table"] th {
  background: var(--table-header-bg, var(--surface-inset));
  color: var(--text-secondary);
  border-bottom: var(--border-width) solid var(--table-border, var(--surface-border));
}
table td, .table td, [class*="table"] td {
  border-bottom: var(--border-width) solid var(--table-border, var(--surface-border));
  color: var(--text-primary);
}
table tr:hover, .table tr:hover, [class*="table"] tr:hover {
  background: var(--table-row-hover, var(--surface-card-hover));
}

/* ── Inputs ── */
input, textarea, select, .input, .ds-input {
  background: var(--input-bg);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--input-radius, var(--radius-md));
  color: var(--text-primary);
  height: var(--input-height);
}
input:focus, textarea:focus, select:focus, .input:focus, .ds-input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

/* ── Badges ── */
.badge, .ds-badge, [class*="badge"] {
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size, 11px);
  padding: var(--badge-padding, 2px 10px);
  font-weight: var(--badge-font-weight, 600);
}
.badge-success {
  background: var(--success-light);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-light);
  color: var(--warning);
}
.badge-danger {
  background: var(--danger-light);
  color: var(--danger);
}
.badge-info {
  background: var(--info-light);
  color: var(--info);
}

/* ── Dividers ── */
hr, .divider, .section-divider {
  border: none;
  height: var(--border-width);
  background: var(--surface-border);
}

/* ── Modals / Dialogs ── */
.modal-overlay, [class*="overlay"] {
  background: var(--modal-overlay, var(--surface-overlay));
}
.modal, .modal-content, [class*="dialog"] {
  background: var(--modal-bg, var(--surface-elevated));
  border: var(--border-width) solid var(--modal-border, var(--surface-border));
  border-radius: var(--modal-radius, var(--radius-xl));
  box-shadow: var(--shadow-xl);
}

/* ── Tooltips ── */
.tooltip, [class*="tooltip"], .tip-popup, .gloss-popup {
  background: var(--surface-elevated);
  border: var(--border-width) solid var(--surface-border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ── Charts ── */
.chart-grid, [class*="chart-grid"] {
  stroke: var(--chart-grid);
  color: var(--chart-grid);
}
.chart-axis, [class*="chart-axis"] {
  color: var(--chart-axis);
  fill: var(--chart-axis);
}

/* ── Selection ── */
::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* ── Progress Bars ── */
.progress, [class*="progress"] {
  background: var(--surface-inset);
  border-radius: var(--radius-full);
}
.progress-fill, [class*="progress-fill"] {
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* ── Category Accents ── */
.category-financial { color: var(--category-financial); }
.category-risk { color: var(--category-risk); }
.category-governance { color: var(--category-governance); }
.category-intelligence { color: var(--category-intelligence); }
.category-operations { color: var(--category-operations); }
.category-executive { color: var(--category-executive); }
/* ════════════════════════════════════════════
   AI Futuristic — Token File
   Deep navy · Glassmorphism · Electric blue
   Cyan glow · Purple accents
   APPEX360 Global Theme Engine — Release 18.0
   ════════════════════════════════════════════ */

body.theme-ai-futuristic {
  --surface-page: #08111f;
  --surface-card: #121d33;
  --surface-card-hover: #1b2742;
  --surface-elevated: #1b2742;
  --surface-inset: #0a1424;
  --surface-overlay: rgba(0, 0, 0, 0.7);
  --surface-border: #2b3f69;
  --surface-border-hover: #4f7cff;

  --text-primary: #f5f7ff;
  --text-secondary: #a8b7d8;
  --text-muted: #6b83b0;
  --text-link: #4f7cff;
  --text-on-primary: #ffffff;

  --color-primary: #4f7cff;
  --color-primary-hover: #3b6bfa;
  --color-primary-light: rgba(79, 124, 255, 0.15);

  --accent: #4f7cff;
  --accent-hover: #3b6bfa;
  --accent-soft: rgba(79, 124, 255, 0.12);
  --accent-secondary: #18d6ff;

  --success: #2fd48c;
  --success-light: rgba(47, 212, 140, 0.15);
  --warning: #ffb545;
  --warning-light: rgba(255, 181, 69, 0.15);
  --danger: #ff5f73;
  --danger-light: rgba(255, 95, 115, 0.15);
  --info: #4f7cff;
  --info-light: rgba(79, 124, 255, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(79, 124, 255, 0.3);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --nav-bg: rgba(8, 17, 31, 0.92);
  --nav-border: rgba(79, 124, 255, 0.1);
  --nav-text: rgba(255, 255, 255, 0.55);
  --nav-text-hover: #f5f7ff;
  --nav-active-bg: rgba(79, 124, 255, 0.15);

  --sidebar-bg: rgba(8, 17, 31, 0.95);
  --sidebar-border: rgba(79, 124, 255, 0.1);
  --sidebar-text: rgba(255, 255, 255, 0.5);
  --sidebar-active-bg: rgba(79, 124, 255, 0.15);

  --btn-bg: linear-gradient(135deg, #4f7cff, #7c5cff);
  --btn-text: #ffffff;
  --btn-radius: 8px;
  --btn-height: 44px;

  --input-bg: rgba(18, 29, 51, 0.6);
  --input-border: rgba(79, 124, 255, 0.2);
  --input-focus: #4f7cff;

  --badge-radius: 20px;

  --chart-grid: rgba(79, 124, 255, 0.12);
  --chart-axis: #a8b7d8;

  --category-financial: #f59e0b;
  --category-risk: #ef4444;
  --category-governance: #3b82f6;
  --category-intelligence: #8b5cf6;
  --category-operations: #18d6ff;
  --category-executive: #818cf8;
}
/* ════════════════════════════════════════════
   Classic Enterprise — Token File
   Grey · Navy · Professional · Conservative
   APPEX360 Global Theme Engine — Release 18.0
   ════════════════════════════════════════════ */

body.theme-classic {
  --surface-page: #f0f2f5;
  --surface-card: #ffffff;
  --surface-card-hover: #f8f9fb;
  --surface-elevated: #ffffff;
  --surface-inset: #e8eaed;
  --surface-overlay: rgba(0, 0, 0, 0.4);
  --surface-border: #d1d5db;
  --surface-border-hover: #9ca3af;

  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-link: #6c5ce7;
  --text-on-primary: #ffffff;

  --color-primary: #6c5ce7;
  --color-primary-hover: #5a4bd1;
  --color-primary-light: rgba(108, 92, 231, 0.12);

  --accent: #6c5ce7;
  --accent-hover: #5a4bd1;
  --accent-soft: rgba(108, 92, 231, 0.1);
  --accent-secondary: #818cf8;

  --success: #10b981;
  --success-light: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;
  --info-light: rgba(59, 130, 246, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow: none;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-border: rgba(0, 0, 0, 0.06);
  --nav-text: #4b5563;
  --nav-text-hover: #1f2937;
  --nav-active-bg: rgba(108, 92, 231, 0.08);

  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;
  --sidebar-text: #4b5563;
  --sidebar-active-bg: rgba(108, 92, 231, 0.08);

  --btn-bg: var(--accent);
  --btn-text: #ffffff;
  --btn-radius: 8px;
  --btn-height: 44px;

  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-focus: var(--accent);

  --badge-radius: 20px;

  --chart-grid: #e5e7eb;
  --chart-axis: #6b7280;

  --category-financial: #f59e0b;
  --category-risk: #ef4444;
  --category-governance: #3b82f6;
  --category-intelligence: #8b5cf6;
  --category-operations: #14b8a6;
  --category-executive: #6366f1;
}
/* ════════════════════════════════════════════
   Corporate Blue — Token File
   White · Steel blue · Corporate · Deloitte/IBM
   APPEX360 Global Theme Engine — Release 18.0
   ════════════════════════════════════════════ */

body.theme-corporate-blue {
  --surface-page: #f4f6f9;
  --surface-card: #ffffff;
  --surface-card-hover: #f0f4ff;
  --surface-elevated: #ffffff;
  --surface-inset: #e8ecf4;
  --surface-overlay: rgba(0, 0, 0, 0.3);
  --surface-border: #d0d8e5;
  --surface-border-hover: #2563eb;

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-link: #2563eb;
  --text-on-primary: #ffffff;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: rgba(37, 99, 235, 0.1);

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --accent-secondary: #3b82f6;

  --success: #059669;
  --success-light: rgba(5, 150, 105, 0.1);
  --warning: #d97706;
  --warning-light: rgba(217, 119, 6, 0.1);
  --danger: #dc2626;
  --danger-light: rgba(220, 38, 38, 0.1);
  --info: #2563eb;
  --info-light: rgba(37, 99, 235, 0.1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.1);
  --shadow-glow: none;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(0, 0, 0, 0.06);
  --nav-text: #475569;
  --nav-text-hover: #1e293b;
  --nav-active-bg: rgba(37, 99, 235, 0.08);

  --sidebar-bg: #ffffff;
  --sidebar-border: #d0d8e5;
  --sidebar-text: #475569;
  --sidebar-active-bg: rgba(37, 99, 235, 0.08);

  --btn-bg: var(--accent);
  --btn-text: #ffffff;
  --btn-radius: 6px;
  --btn-height: 44px;

  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-focus: #2563eb;

  --badge-radius: 4px;

  --chart-grid: #d0d8e5;
  --chart-axis: #475569;

  --category-financial: #f59e0b;
  --category-risk: #dc2626;
  --category-governance: #2563eb;
  --category-intelligence: #7c3aed;
  --category-operations: #0891b2;
  --category-executive: #4f46e5;
}
/* ════════════════════════════════════════════
   Custom Brand — Token File
   Uses tenant branding colours from database
   APPEX360 Global Theme Engine — Release 18.0
   ════════════════════════════════════════════ */

body.theme-custom-brand {
  --surface-page: #0b1120;
  --surface-card: rgba(255, 255, 255, 0.03);
  --surface-card-hover: rgba(255, 255, 255, 0.06);
  --surface-elevated: rgba(255, 255, 255, 0.06);
  --surface-inset: rgba(0, 0, 0, 0.3);
  --surface-overlay: rgba(0, 0, 0, 0.6);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-border-hover: rgba(255, 255, 255, 0.15);

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-link: var(--accent);
  --text-on-primary: #ffffff;

  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-primary-light: var(--accent-soft);

  --accent: #7C5CFF;
  --accent-hover: #6B4DE8;
  --accent-soft: rgba(124, 92, 255, 0.12);
  --accent-secondary: #a78bfa;

  --success: #10b981;
  --success-light: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.12);
  --info: #60a5fa;
  --info-light: rgba(96, 165, 250, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(124, 92, 255, 0.2);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --nav-bg: rgba(11, 17, 32, 0.95);
  --nav-border: rgba(255, 255, 255, 0.06);
  --nav-text: rgba(255, 255, 255, 0.5);
  --nav-text-hover: #e2e8f0;
  --nav-active-bg: var(--accent-soft);

  --sidebar-bg: rgba(11, 17, 32, 0.98);
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-text: rgba(255, 255, 255, 0.5);
  --sidebar-active-bg: var(--accent-soft);

  --btn-bg: var(--accent);
  --btn-text: #ffffff;
  --btn-radius: 8px;
  --btn-height: 44px;

  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus: var(--accent);

  --badge-radius: 20px;

  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-axis: #94a3b8;

  --category-financial: #f59e0b;
  --category-risk: #ef4444;
  --category-governance: #3b82f6;
  --category-intelligence: #8b5cf6;
  --category-operations: #14b8a6;
  --category-executive: #818cf8;
}
/* ════════════════════════════════════════════
   Executive Dark — Token File
   Charcoal · Graphite · Gold accents · Minimal
   APPEX360 Global Theme Engine — Release 18.0
   ════════════════════════════════════════════ */

body.theme-executive-dark {
  --surface-page: #0a0a12;
  --surface-card: #14141f;
  --surface-card-hover: #1c1c2e;
  --surface-elevated: #1c1c2e;
  --surface-inset: #05050a;
  --surface-overlay: rgba(0, 0, 0, 0.8);
  --surface-border: #2a2a3e;
  --surface-border-hover: #d4a853;

  --text-primary: #e8e6e0;
  --text-secondary: #909090;
  --text-muted: #606060;
  --text-link: #d4a853;
  --text-on-primary: #0a0a12;

  --color-primary: #d4a853;
  --color-primary-hover: #c49a42;
  --color-primary-light: rgba(212, 168, 83, 0.12);

  --accent: #d4a853;
  --accent-hover: #c49a42;
  --accent-soft: rgba(212, 168, 83, 0.1);
  --accent-secondary: #e8c66a;

  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.12);
  --warning: #d4a853;
  --warning-light: rgba(212, 168, 83, 0.12);
  --danger: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.12);
  --info: #60a5fa;
  --info-light: rgba(96, 165, 250, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 20px rgba(212, 168, 83, 0.1);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --nav-bg: rgba(10, 10, 18, 0.95);
  --nav-border: rgba(255, 255, 255, 0.06);
  --nav-text: rgba(255, 255, 255, 0.5);
  --nav-text-hover: #e8e6e0;
  --nav-active-bg: rgba(212, 168, 83, 0.1);

  --sidebar-bg: rgba(10, 10, 18, 0.98);
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-text: rgba(255, 255, 255, 0.5);
  --sidebar-active-bg: rgba(212, 168, 83, 0.1);

  --btn-bg: var(--accent);
  --btn-text: #0a0a12;
  --btn-radius: 6px;
  --btn-height: 44px;

  --input-bg: rgba(20, 20, 31, 0.6);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus: #d4a853;

  --badge-radius: 4px;

  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-axis: #909090;

  --category-financial: #d4a853;
  --category-risk: #ef4444;
  --category-governance: #3b82f6;
  --category-intelligence: #8b5cf6;
  --category-operations: #14b8a6;
  --category-executive: #d4a853;
}
/* ════════════════════════════════════════════
   High Contrast — Token File
   Black · White · Yellow focus · WCAG AAA
   APPEX360 Global Theme Engine — Release 18.0
   ════════════════════════════════════════════ */

body.theme-high-contrast {
  --surface-page: #000000;
  --surface-card: #1a1a1a;
  --surface-card-hover: #2a2a2a;
  --surface-elevated: #2a2a2a;
  --surface-inset: #0d0d0d;
  --surface-overlay: rgba(0, 0, 0, 0.9);
  --surface-border: #ffffff;
  --surface-border-hover: #ffd700;

  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #b0b0b0;
  --text-link: #ffd700;
  --text-on-primary: #000000;

  --color-primary: #ffd700;
  --color-primary-hover: #ffed4a;
  --color-primary-light: rgba(255, 215, 0, 0.2);

  --accent: #ffd700;
  --accent-hover: #ffed4a;
  --accent-soft: rgba(255, 215, 0, 0.15);
  --accent-secondary: #60a5fa;

  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.2);
  --warning: #ffd700;
  --warning-light: rgba(255, 215, 0, 0.2);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.2);
  --info: #60a5fa;
  --info-light: rgba(96, 165, 250, 0.2);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-glow: none;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --nav-bg: #000000;
  --nav-border: #ffffff;
  --nav-text: #ffffff;
  --nav-text-hover: #ffffff;
  --nav-active-bg: rgba(255, 215, 0, 0.25);

  --sidebar-bg: #000000;
  --sidebar-border: #ffffff;
  --sidebar-text: #ffffff;
  --sidebar-active-bg: rgba(255, 215, 0, 0.25);

  --btn-bg: #ffd700;
  --btn-text: #000000;
  --btn-radius: 6px;
  --btn-height: 48px;

  --input-bg: #000000;
  --input-border: #ffffff;
  --input-focus: #ffd700;

  --badge-radius: 4px;

  --chart-grid: #ffffff;
  --chart-axis: #ffffff;

  --category-financial: #ffd700;
  --category-risk: #f87171;
  --category-governance: #60a5fa;
  --category-intelligence: #c084fc;
  --category-operations: #34d399;
  --category-executive: #818cf8;
}
/* ════════════════════════════════════════════
   Light — Token File
   White · Light grey · Soft shadows · Clean cards
   APPEX360 Global Theme Engine — Release 18.0
   ════════════════════════════════════════════ */

body.theme-light {
  --surface-page: #f8f9fa;
  --surface-card: #ffffff;
  --surface-card-hover: #f3f4f6;
  --surface-elevated: #ffffff;
  --surface-inset: #e5e7eb;
  --surface-overlay: rgba(0, 0, 0, 0.2);
  --surface-border: #e5e7eb;
  --surface-border-hover: #9ca3af;

  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-link: #6366f1;
  --text-on-primary: #ffffff;

  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-light: rgba(99, 102, 241, 0.1);

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.08);
  --accent-secondary: #818cf8;

  --success: #10b981;
  --success-light: rgba(16, 185, 129, 0.1);
  --warning: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.1);
  --danger: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.1);
  --info: #3b82f6;
  --info-light: rgba(59, 130, 246, 0.1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.07);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.09);
  --shadow-glow: none;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(0, 0, 0, 0.05);
  --nav-text: #6b7280;
  --nav-text-hover: #111827;
  --nav-active-bg: rgba(99, 102, 241, 0.08);

  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;
  --sidebar-text: #6b7280;
  --sidebar-active-bg: rgba(99, 102, 241, 0.08);

  --btn-bg: var(--accent);
  --btn-text: #ffffff;
  --btn-radius: 8px;
  --btn-height: 44px;

  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-focus: #6366f1;

  --badge-radius: 20px;

  --chart-grid: #e5e7eb;
  --chart-axis: #6b7280;

  --category-financial: #f59e0b;
  --category-risk: #ef4444;
  --category-governance: #3b82f6;
  --category-intelligence: #8b5cf6;
  --category-operations: #14b8a6;
  --category-executive: #6366f1;
}
/*
 * 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.
 *



 */

/* Custom styles */
#mobile-menu {
  display: none;
}

#mobile-menu.show {
  display: block;
}

/* Form styles - only keeping non-conflicting custom styles */
.form-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}