:root {
    --font-sans: 'Lato', sans-serif;
    --font-body: 'Lato', sans-serif;

    --color-green-50:  #f3f5f4;
    --color-green-100: #e2e7e3;
    --color-green-200: #c8d4ce;
    --color-green-300: #a6bab2;
    --color-green-400: #88a296;
    --color-green-500: #6d8a7c;
    --color-green-600: #5a7768; /* your base */
    --color-green-700: #495e54;
    --color-green-800: #3a4a43;
    --color-green-900: #2d3934;

    --color-yellow-50: #f7fdea;
    --color-yellow-100: #ecf9c8;
    --color-yellow-200: #dcf497;
    --color-yellow-300: #cdee6d;
    --color-yellow-400: #bfe651;
    --color-yellow-500: #b7dc54; /* base */
    --color-yellow-600: #9cc13b;
    --color-yellow-700: #7b9e2f;
    --color-yellow-800: #5c7825;
    --color-yellow-900: #3e5118;

    --color-blue-50:  #f2fbfa;
    --color-blue-100: #d8f4f3;
    --color-blue-200: #bdebea;
    --color-blue-300: #a5e2e0;
    --color-blue-400: #92dad9;
    --color-blue-500: #A0D9D7; /* base */
    --color-blue-600: #76b9b7;
    --color-blue-700: #579c9a;
    --color-blue-800: #407b7a;
    --color-blue-900: #2d5a59;

    --color-red-50:  #f9efee;
    --color-red-100: #f0d7d5;
    --color-red-200: #e4b1ae;
    --color-red-300: #d5857d;
    --color-red-400: #c86459;
    --color-red-500: #bd524b; /* your base */
    --color-red-600: #9b433e;
    --color-red-700: #7a3632;
    --color-red-800: #5d2926;
    --color-red-900: #451e1c;
}

table.sortable th {
    /* position: relative; */
    cursor: pointer;
}

table.sortable th:empty::after,
table.sortable th[data-sort-method="none"]::after {
    content: none;
}

table thead i[class^="fa"] {
    font-size: 14px;
}
/* table.sortable th {
    padding-right: 1.75rem;
} */

table.sortable th::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: inherit;
    pointer-events: none;
    transition: transform 0.2s ease;
}
table.sortable th[aria-sort="ascending"]::after{
    content: "\f077"; 
}

table.sortable th[aria-sort="descending"]::after {
    content: "\f078"; 
}
/* table.sortable th[width="75px"]:not([data-sort-method="none"]) {
    position: relative;
} */

table.sortable th[width="75px"]:not([data-sort-method="none"])::after {
    position: absolute;
    right: 8px;
}

.ml-4{
    margin-left: 1rem;
}

.min-h-0 { 
    min-height: 0  
}

.hover\:bg-green-50:hover{
    background-color: var(--color-green-50);
}

.dark\:bg-gray-700{
    background-color: var(--color-white);
}

.datepicker-cell{
    color: var(--color-gray-900);
}

.datepicker-cell.disabled{
    color: var(--color-gray-300);
}

.datepicker-cell:hover{
    background-color: var(--color-gray-100);
}

.datepicker-cell:hover{
    background-color: var(--color-gray-100);
}

.datepicker-cell.focused{
    background-color: var(--color-green-500);
    color: #ffffff;
}

.dark\:text-white{
    color: var(--color-gray-900);
}

.peer-checked\:bg-green-500{
    background-color: var(--color-green-500);
}

.pr-15{
    padding-right: 3.75rem;
}

.pl-24{
    padding-left: 6rem;
}

.bg-opacity-50{
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-body iframe[name^="__privateStripeFrame"] {
    margin: 0 !important;
}

div#customContentArea:has(iframe){
    padding: 0 !important;
}

p:empty{display: none;}
.topic-head .text-site-green{
    color: #6AA84F;
}
.topics-section {
    background-color: #f5f5f5;
}
.topic:not(:last-child) {
    border-bottom: 1px solid #cecbcb;
}
.editor-wrap .mce-tinymce{
    border-radius: 16px;
    overflow: hidden;
}
.editor-wrap .tox-tinymce{
    height: 220px !important;
}

#edit-asset-modal >div,
#new-asset-modal >div,
#registration-edit-modal >div {
    max-width: 100%;
}
.custom-datepicker-wrap>div.absolute+input {
    padding-inline-start: 35px;
}

.active-custom-tab,
.box-linear-gradient{
    background-image: linear-gradient(to right, #5A7768, #729C86) !important;
}
button {
    white-space: nowrap;
}

:is(
button.py-2,
button.py-1,
input[type='button'].py-2,
input[type='button'].py-1,
button[type="submit"]
) {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  input[class^='py-'],
  input[class*=' py-'],
  button:not([aria-expanded])[class^='py-'],
  button:not([aria-expanded])[class*=' py-'],
  button[type="submit"]
) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

:is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select
) {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* The container */
.custom-checkbox-wrap {
  display: block;
  position: relative;
  padding-left: 55px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.custom-checkbox-wrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  height: 23px;
  width: 23px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid #949494;
}

/* When the radio button is checked, add a blue background */
.custom-checkbox-wrap input:checked ~ .checkmark {
  background-color: #5A7768;
  border-color: #ffffff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.custom-checkbox-wrap input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.custom-checkbox-wrap .checkmark:after {
 	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: white;
}

:is(
  .main-content-body:not(:has(> :is(form[name="theForm"], .theForm))),
  .main-content-body > :is(form[name="theForm"], .theForm)
) {
  display: flex;
  flex-direction: column;
}

.main-content-body:not(:has(> :is(form[name="theForm"], .theForm))) {
  height: 100dvh;
}

/* Opt out of the full-viewport height by adding .no-full-height to any element on the page. */
.main-content-body:has(.no-full-height) {
  height: auto !important;
}

.main-content-body > :is(form[name="theForm"], .theForm) {
  height: calc(100dvh - 32px);
}

.main-content-body > nav ~ :is(form[name="theForm"], .theForm) {
  height: calc(100dvh - 94px);
}

:is(
.has-modal-body.main-content-body:not(:has(> :is(form[name="theForm"], .theForm))),
.has-modal-body.main-content-body > :is(form[name="theForm"], .theForm),
.has-modal-body.main-content-body > nav ~ :is(form[name="theForm"], .theForm) 
) {
    height: auto !important;
}

:is(
.has-modal-body > div.overflow-auto,
.has-modal-body .theForm,
.has-modal-body .tab-content,
.has-modal-body form[name='theForm']
) {
    overflow: unset !important;
}

select:not([size]){
    padding-right: 2rem !important;
    min-width: 100px;
}

input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
/* Workflow ticket lists: ellipsis menus without clipping the Actions column */
.main-content-body:has(.workflow-ticket-list),
form[name="theForm"]:has(.workflow-ticket-list) {
  overflow-x: hidden;
  max-width: 100%;
}

.tab-content.workflow-ticket-list,
form[name="theForm"]:has(.workflow-ticket-list) > div.overflow-auto {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100%;
  box-sizing: border-box;
}

.tab-content.workflow-ticket-list table.sortable {
  width: 100%;
  max-width: 100%;
}

.tab-content.workflow-ticket-list th:nth-child(7),
.tab-content.workflow-ticket-list td:nth-child(7) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

.tab-content.workflow-ticket-list .workflow-actions-col {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 5.5rem;
  overflow: visible;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

.workflow-ticket-list .workflow-actions-col .relative.inline-block {
  margin-left: 0;
}

/* Other ticket/workflow tables with row action menus */
form[name="theForm"]:has(.flowbiteDropdown):not(:has(.workflow-ticket-list)) .tab-content,
form[name="theForm"]:has(.flowbiteDropdown):not(:has(.workflow-ticket-list)) > div.overflow-auto {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100%;
}

.flowbiteDropdown.se-dropdown-open {
  position: fixed !important;
  right: auto !important;
  margin-top: 0 !important;
}
/* Fix: Flowbite's compiled CSS sets select padding-right to 1.5rem, which is too small for the dropdown arrow icon. */
select:not([size]){
    padding-right: 2rem !important;
    min-width: 100px;
}

input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
}

/* Fix: Flowbite's compiled CSS sets select padding-right to 1.5rem, which is too small for the dropdown arrow icon. */
select:not([size]){
    padding-right: 2rem !important;
    min-width: 100px;
}

input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
}

/* CSS-only tooltip for table row icons — zero JS, zero Popper instances */
.se-tt {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.se-tt::after {
  content: attr(data-tt);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #111827;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 0.375rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 50;
}
.se-tt-top::after    { bottom: calc(100% + 6px); }
.se-tt-bottom::after { top: calc(100% + 6px); }
.se-tt-left::after   { right: calc(100% + 6px); left: auto; top: 50%; transform: translateY(-50%); }
.se-tt:hover::after  { opacity: 1; }

/* Arrow */
.se-tt::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 50;
}
.se-tt-top::before    { bottom: calc(100% + 0px); border-top-color: #111827; border-bottom: none; }
.se-tt-bottom::before { top: calc(100% + 0px);    border-bottom-color: #111827; border-top: none; }
.se-tt-left::before   { right: calc(100% - -1px); left: auto; top: 50%; transform: translateY(-50%); border-left-color: #111827; border-right: none; }
.se-tt:hover::before  { opacity: 1; }

/* .nav-tabs li a {
    padding-top: 0 !important;
} */

@media print {
    .se-no-print {
        display: none !important;
    }
    .se-height-print {
        height: auto !important;
    }

    /* A fixed-height box does not fragment across printed pages: Chrome prints the
       part that fits in the first page box and leaves the rest blank. The app layout
       pins body/theForm to the viewport (100dvh, see the rules above this block), so any
       list taller than one screen loses its tail. These resets mirror popprint.css, which the
       popPrint() popup pipeline already relies on, and are deliberately unscoped:
       body carries different classes depending on how the page was opened.
       !important on overflow is load-bearing -- tabFlowbite.inc sets
       body.style.overflow = 'hidden' inline, and only !important outranks that. */
    html,
    body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    form,
    div, section, main, article, aside, nav, header, footer,
    table, thead, tbody, tfoot, tr, td, th {
        overflow: visible !important;
        max-height: none !important;
    }

    /* .tab-content and friends carry an inline pixel height computed from the
       browser viewport ($MainHeight), which only !important can outrank. */
    form[name="theForm"],
    .theForm,
    .tab-content,
    [style*="height"],
    .h-full, .max-h-full, .h-screen, .h-dvh, .min-h-0 {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .grow {
        flex-grow: 0 !important;
    }

    .sticky, .fixed {
        position: static !important;
        top: auto !important;
    }
}
/* Fix: the compiled flowbite.min.css maps .max-w-2xl to var(--spacing-2xl) (16rem)
   instead of the Tailwind container scale var(--container-2xl) (42rem), because a
   custom spacing token named "2xl" hijacked the utility at build time. Without this
   override, any max-w-2xl element (e.g. modals) collapses to 256px wide. */
.max-w-2xl { max-width: var(--container-2xl, 42rem); }

.news-editor-wrapper .tox-tinymce{
    border: none !important;
}
.se-tt:hover::before  { opacity: 1; }

 .news-body img { max-width: 100%; height: auto; }
/* Fix: aspect-square was never generated into the compiled flowbite.min.css
   (no aspect-ratio utilities exist in that bundle at all), so it currently has
   zero effect — elements relying on it for a square box (e.g. photo
   thumbnails) collapse to just their border/content height instead. */
.aspect-square { aspect-ratio: 1 / 1; }

.news-editor-wrapper .tox-tinymce{
    border: none !important;
}

 .news-body img { max-width: 100%; height: auto; }
 
/* Tailwind's preflight zeroes margin/padding on every element, strips list
    markers, and flattens heading font-size/font-weight to "inherit" — so the
    saved TinyMCE HTML (headings, lists, blockquotes, links, code) renders as
    plain unstyled text here even though it looked normal in the editor.
    Restore the same rendering the editor's own content stylesheet gives it. */
.news-body p { margin: 1em 0; }
.news-body h1, .news-body h2, .news-body h3,
.news-body h4, .news-body h5, .news-body h6 { font-weight: bold !important; }
.news-body h1 { font-size: 2em; margin: .67em 0; }
.news-body h2 { font-size: 1.5em; margin: .83em 0; }
.news-body h3 { font-size: 1.17em; margin: 1em 0; }
.news-body h4 { font-size: 1em; margin: 1.33em 0; }
.news-body h5 { font-size: .83em; margin: 1.67em 0; }
.news-body h6 { font-size: .67em; margin: 2.33em 0; }
.news-body ul { list-style: disc; margin: 1em 0; padding-left: 40px; }
.news-body ol { list-style: decimal; margin: 1em 0; padding-left: 40px; }
.news-body li { display: list-item; }
.news-body a { color: #2563eb; text-decoration: underline; }
.news-body hr { border: 0; border-top: 1px solid #ccc; margin: 1em 0; }
.news-body code { background-color: #e8e8e8; border-radius: 3px; padding: .1rem .2rem; }
.news-body pre { margin: 1em 0; white-space: pre-wrap; }
.news-body blockquote { border-left: 2px solid #ccc; margin: 1em 0 1em 1.5rem; padding-left: 1rem; }
.news-body table { border-collapse: collapse; margin: 1em 0; }
.news-body table td, .news-body table th { padding: .4rem; }