.page-title-box .page-title {
    line-height: 50px;
}

/* .card-hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0px;
    margin: 0px 0px 0px 0px;
} */

.card-p {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #e9e8e8;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 5px 0px;
}


.card-np {
    /* border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #d8d8d8; */
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 5px 0px;
}

.container-fluid {
    padding: 0px;
}

.content-page {
    /* NOTE: the previous value was `5px 10px 65 10px` — the unitless `65`
       made the whole shorthand invalid, so the browser dropped it and the
       theme's default padding (70px top) took over. Now that we override
       with `!important`, we MUST keep the 70px top because the topbar
       (`.navbar-custom`) is `position: fixed; min-height: 70px` — anything
       less and the page-title hero gets clipped underneath the topbar.
       Added a few extra pixels so the hero's box-shadow has room too. */
    padding: 78px 10px 65px 10px !important;
}

/* .table-hover tbody tr:hover td {
    background: #e3dff3;
    color: white;
} */







/* field hightlight
*/
@-webkit-keyframes highlight-fade {
    0% {
        background: #FFF0C4;
    }
    100% {
        background: white;
    }
}
@-moz-keyframes highlight-fade {
    0% {
        background: #FFF0C4;
    }
    100% {
        background: white;
    }
}
@-ms-keyframes highlight-fade {
    0% {
        background: #FFF0C4;
    }
    100% {
        background: white;
    }
}
@keyframes highlight-fade {
    0% {
        background: #FFF0C4;
    }
    100% {
        background: white;
    }
}

.highlight {
    -webkit-animation: highlight-fade 2s ease-out;
    -moz-animation: highlight-fade 2s ease-out;
    -o-animation: highlight-fade 2s ease-out;
    animation: highlight-fade 2s ease-out;
}




.invalid-border {
    border: 1px solid #fa5c7c !important; position:relative !important; border-radius: 0.25rem !important;
}
.valid-border {
    border: 1px solid #0acf97 !important; position:relative !important; border-radius: 0.25rem !important;
}



.ui-datepicker {
    position: absolute !important;
    z-index:10000 !important;
}


@media print {
    .hide_on_print {
      display: none;
    }
  }

.cursor-pointer {
  cursor:pointer !important;
}

.cursor-grab {
    cursor:grab !important;
}
  




/* Tooltip Style */

.tooltip {
  display: block !important;
  z-index: 10000;
}

.tooltip .tooltip-inner {
  background: black;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
}

.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
}

.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}

.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="right"] {
  margin-left: 5px;
}

.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[x-placement^="left"] {
  margin-right: 5px;
}

.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[aria-hidden='true'] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.tooltip[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}


/* End of Tooltip Style */





code, tt {
    margin: 0 2px;
    padding: 0 5px;
    border: 1px solid #eaeaea;
    background-color: #f8f8f8;
    border-radius: 3px;
    color: #555;
    font-family: "Courier New", Courier, monospace, sans-serif;
}
    

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #3d73dd;
    color: #666;
    page-break-inside: avoid;
    font-family: "Courier New", Courier, monospace, sans-serif;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

pre code {
    color: black;
    border: 0px;
    background-color: transparent;
}




.vuedraggable-ghost {
    opacity: 0.5 !important;
    background: #73bdea !important;
}




.capitalize {
    text-transform: capitalize;
}




.dashed-border {
    border-style: dashed !important;
}


.display-inline {
    display: inline;
}



.auth-brand {
  position: inherit !important;
}


/* ============================================================
   Login page — dark glassmorphism card, shifted to the right.
   Pairs with .ims-auth / .ims-login-card in Views/inc/authTemplate.php
   and sits over ims-login-bg-animated.svg, whose "COMPASS" branding
   lives on the left half of the viewport.
   ============================================================ */

.auth-fluid.ims-auth {
    justify-content: flex-end;
    padding: 2rem clamp(1rem, 6vw, 7rem) 2rem 1rem;
}

.ims-login-card {
    max-width: 460px !important;
    width: 100%;
    margin: auto 0 !important;
    padding: 2.25rem 2rem !important;
    background: rgba(23, 29, 49, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    color: #e6e9fb;
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.55),
        0 2px 0 0 rgba(255, 255, 255, 0.04) inset,
        0 0 0 1px rgba(114, 124, 245, 0.08);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    overflow: hidden;
    position: relative;
}

/* A quiet indigo glow at the top of the card so it looks lit from above
   and does not read as a flat rectangle on the busy background. */
.ims-login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background: radial-gradient(600px 180px at 50% -40px, rgba(114, 124, 245, 0.22), transparent 70%);
    pointer-events: none;
}

.ims-login-card .ims-login-body { position: relative; width: 100%; padding: 0; }

/* Brand lock-up */
.ims-login-brand { margin-bottom: 1.5rem; }

.ims-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 10px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}
.ims-brand-badge img { max-width: 100%; max-height: 100%; display: block; }

/* COMPASS logo on the login card (the logo for dark backgrounds, no badge) */
.compass-login-logo { display: block; width: 250px; max-width: 80%; height: auto; margin: 0 auto 14px; }
.ims-brand-meaning { margin: 0 0 6px; color: #c7cdee; font-size: 0.82rem; font-weight: 500; line-height: 1.35; }
.ims-brand-title {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.25;
}
.ims-brand-sub {
    margin: 0;
    color: #8891bb;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Headings and copy inside the card */
.ims-login-card #vue-cont h4 {
    margin: 0 0 2px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}
.ims-login-card #vue-cont p.text-muted {
    color: #8891bb !important;
    font-size: 0.84rem;
    margin-bottom: 1.25rem !important;
}
.ims-login-card #vue-cont p.text-muted strong { color: #c7cdee; font-weight: 600; }

/* Form fields: translucent dark pills that match the glass card */
.ims-login-card .form-label {
    color: #c7cdee;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.ims-login-card .form-control {
    height: 44px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ims-login-card .form-control::placeholder { color: #6c7190; }
.ims-login-card .form-control:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    border-color: #727cf5;
    box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.28);
}
/* Covers the browser's light-blue autofill background. Needs !important:
   the theme sets box-shadow:none!important on every focused :valid/:invalid
   control, which stripped this cover while the field had focus and left
   white text on light blue. */
.ims-login-card .form-control:-webkit-autofill,
.ims-login-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px rgba(23, 29, 49, 0.92) inset !important;
    caret-color: #ffffff;
}

.ims-login-card .input-group-merge .input-group-text {
    color: #8891bb;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.ims-login-card .input-group-merge .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.ims-login-card .input-group-merge .form-control:focus + .input-group-text { border-color: #727cf5; }

/* "Forgot your password?" small link that floats right of the password label */
.ims-login-card a.text-muted,
.ims-login-card a.text-muted small {
    color: #a9b1d6 !important;
    text-decoration: none;
}
.ims-login-card a.text-muted:hover { color: #ffffff !important; }

/* Buttons */
.ims-login-card .btn {
    height: 46px;
    padding: 0 20px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 10px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.ims-login-card .btn-primary {
    background: linear-gradient(135deg, #727cf5 0%, #5a65e8 100%) !important;
    border: 0 !important;
    color: #ffffff;
    box-shadow: 0 14px 28px -12px rgba(114, 124, 245, 0.6);
}
.ims-login-card .btn-primary:hover,
.ims-login-card .btn-primary:focus {
    background: linear-gradient(135deg, #818afa 0%, #6971ea 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 18px 32px -12px rgba(114, 124, 245, 0.7);
}
.ims-login-card .btn-primary:disabled { opacity: 0.65; transform: none; }

.ims-login-card .btn-success {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #e6e9fb !important;
    box-shadow: none;
}
.ims-login-card .btn-success:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.ims-login-card .btn-link,
.ims-login-card .btn-link:focus {
    color: #a9b1d6;
    text-decoration: none;
    height: auto;
    padding: 0;
    font-weight: 500;
}
.ims-login-card .btn-link:hover { color: #ffffff; }

/* Alerts (flash messages) blend with the dark card */
.ims-login-card .alert {
    border: 0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.86rem;
}
.ims-login-card .alert-success { background: rgba(10, 183, 143, 0.14); color: #4ad7b2; }
.ims-login-card .alert-warning { background: rgba(255, 193, 7, 0.14); color: #ffd368; }
.ims-login-card .alert-danger  { background: rgba(255, 92, 123, 0.14); color: #ff9eb0; }
.ims-login-card .text-danger  { color: #ff9eb0 !important; }

/* Footer copyright line, barely-there under the form */
.ims-login-foot {
    margin: 1.5rem 0 0;
    text-align: center;
    color: #6c7190;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* The theme pins .auth-brand to the top-left on ≥992px, which would float
   our IOM badge out of the card — keep it in flow. */
@media (min-width: 992px) {
    .ims-login-card .auth-brand { position: static !important; top: auto !important; }
}

/* Phones: let the card take the width and sit centered. The dark navy bg
   + card then stack neatly on one screen. */
@media (max-width: 991.98px) {
    .auth-fluid.ims-auth {
        display: block;
        padding: 1.5rem 1rem;
    }
    .ims-login-card {
        max-width: 420px !important;
        margin: 0 auto !important;
        min-height: auto !important;
    }
}




.text-normal {
    color: #6c757d !important;
}

/* vue-multiselect dropdowns inside scrollable modals (e.g. field-collection
   "Add Record" popups) were being clipped/overlaid by the modal's overflow,
   especially when the modal is short. While a multiselect is open
   (.multiselect--active), let the modal show overflow so the option list is
   fully visible, and lift its stacking context above the modal footer. */
.modal-dialog-scrollable .modal-content:has(.multiselect--active),
.modal-dialog-scrollable .modal-body:has(.multiselect--active) {
    overflow: visible;
}

.modal .multiselect--active {
    z-index: 1056;
}

.modal .multiselect--active .multiselect__content-wrapper {
    z-index: 1056;
}

/* ============================================================
   Global UI fixes
   ============================================================ */

/* Main content must fill the viewport on large screens. High specificity so it
   overrides per-page `<style>` blocks that force `.content-page{min-height:auto}`. */
html body .content-page {
    min-height: 100vh !important;
}

/* Searchable single dropdowns (select2 + allowClear): keep the clear "×" to the
   LEFT of the dropdown arrow and clickable (it used to sit under the arrow). */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 22px;
    z-index: 1;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 44px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 0;
    right: 26px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 4px;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: #9aa0aa;
    z-index: 3;
}
.select2-container--default .select2-selection--single .select2-selection__clear > span {
    line-height: 1;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #f5365c;
}

/* ============================================================
   Left sidebar
   Markup: Views/inc/LeftSideBar.php + generateMenuLeft() in
   Helpers/menu_helper.php. Theme: Hyper; this file loads after
   app.min.css so these win. Inline-start/end properties keep
   the layout right under the RTL theme too.
   ============================================================ */

.leftside-menu {
    --sb-row-h: 40px;
    --sb-search-h: 60px;
    --sb-footer-h: 57px;
    --sb-text: #a9b1d6;
    --sb-text-strong: #e6e9fb;
    --sb-muted: #8790bd;
    --sb-line: rgba(255, 255, 255, 0.1);
    --sb-hover: rgba(255, 255, 255, 0.06);
    --sb-accent: #727cf5;
    --sb-flyout: #2b3050;
}

/* Sidebar surface: layered gradient that blends with the navy logo header
   and the app's primary (#727cf5) accent, plus a soft depth shadow. */
.leftside-menu,
body[data-leftbar-theme="dark"] .leftside-menu,
body[data-leftbar-theme="light"] .leftside-menu {
    background:
        radial-gradient(900px 220px at -5% 0%, rgba(114, 124, 245, 0.22), transparent 60%),
        linear-gradient(180deg, #2a2f4c 0%, #21243a 52%, #191b2b 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 4px 0 26px rgba(16, 18, 31, 0.45) !important;
}

/* Logo header: soften the seam into the menu body */
.leftside-menu .logo {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

/* Brand lockup: the IOM/OIM mark with the app name and mission caption.
   The theme shows .logo-lg / .logo-sm by sidebar mode; only their layout is
   set here, so the collapsed rail still swaps to the badge alone. */
.leftside-menu .logo span.logo-lg {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 70px;
    padding: 0 14px;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .logo span.logo-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
}

/* IOM/OIM dark emblem sits on a white rounded badge so it reads on the
   navy sidebar header. Same approach as the login card. */
.leftside-menu .sb-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 5px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.leftside-menu .sb-brand-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.leftside-menu .logo span.logo-sm .sb-brand-badge {
    width: 42px;
    height: 42px;
    padding: 4px;
}

.leftside-menu .sb-brand {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

/* COMPASS logo (brand kit): the horizontal logo for dark backgrounds, and the mark alone in the collapsed rail */
.leftside-menu .sb-compass-logo { display: block; height: 34px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 3px; }
.leftside-menu .sb-compass-icon { display: block; width: 40px; height: 40px; object-fit: contain; }
.leftside-menu .sb-brand-name {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.leftside-menu .sb-brand-sub {
    color: #aab2dd;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- "Find a module" search --- */
.leftside-menu .sb-search {
    position: relative;
    height: var(--sb-search-h);
    padding: 12px;
}

.leftside-menu .sb-search > i {
    position: absolute;
    top: 50%;
    inset-inline-start: 24px;
    transform: translateY(-50%);
    color: var(--sb-muted);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

.leftside-menu .sb-search input {
    width: 100%;
    height: 36px;
    padding: 0;
    padding-inline: 36px 34px;
    color: #ffffff;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    outline: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.leftside-menu .sb-search input::placeholder {
    color: var(--sb-muted);
}

.leftside-menu .sb-search input:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.25);
}

.leftside-menu .sb-search-clear {
    position: absolute;
    top: 50%;
    inset-inline-end: 18px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--sb-muted);
    font-size: 0.875rem;
    line-height: 24px;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.leftside-menu .sb-search-clear:hover {
    color: #ffffff;
    background: var(--sb-hover);
}

.leftside-menu .sb-empty {
    padding: 24px 16px;
    color: var(--sb-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* While a search is typed every group is opened and the rows that do not
   match are hidden; the groups' own open / closed state is left untouched. */
.side-nav.sb-filtering .collapse,
.side-nav.sb-filtering .collapsing {
    display: block !important;
    height: auto !important;
}

.side-nav.sb-filtering .menu-arrow {
    transform: rotate(90deg) !important;
}

.side-nav .sb-hide {
    display: none !important;
}

/* --- Scrolling list, between the search box and the footer --- */
#leftside-menu-container {
    height: calc(100% - var(--sb-search-h) - var(--sb-footer-h));
}

#leftside-menu-container .side-nav {
    margin: 0;
    padding: 0 12px 16px;
}

/* Section titles */
.side-nav .side-nav-title {
    padding: 18px 12px 6px;
    color: var(--sb-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.side-nav .side-nav-title:first-child {
    padding-top: 2px;
}

/* --- Rows: one line each, all the same height, at every level --- */
.side-nav .side-nav-link,
.side-nav .side-nav-second-level li a {
    display: block;
    height: var(--sb-row-h);
    margin: 2px 0;
    padding: 0 12px;
    overflow: hidden;
    color: var(--sb-text);
    line-height: var(--sb-row-h);
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.side-nav .side-nav-link {
    font-size: 0.9rem;
}

.side-nav .side-nav-second-level li a {
    font-size: 0.86rem;
}

/* Rows that open a group keep their label clear of the arrow */
.side-nav .side-nav-item > a[data-bs-toggle="collapse"] {
    padding-inline-end: 32px;
}

/* One line icon per top-level row, in the row's own colour */
.side-nav .side-nav-link > i {
    width: 20px;
    margin: 0;
    margin-inline-end: 8px;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
}

.side-nav li > a > .menu-arrow {
    top: 0;
    color: var(--sb-muted);
    font-size: 1rem;
    line-height: var(--sb-row-h);
}

.side-nav .side-nav-link:hover,
.side-nav .side-nav-second-level li a:hover {
    color: #ffffff;
    background: var(--sb-hover);
}

/* Groups on the way to the current page, and groups opened by hand, only
   turn a little brighter. The theme JS marks them `menuitem-active`. */
.side-nav .menuitem-active > a,
.side-nav a[aria-expanded="true"] {
    color: var(--sb-text-strong) !important;
}

/* The current page is the one highlighted row: the theme JS puts `active`
   on its link only. Kept after (and as specific as) the hover rule above. */
.side-nav li.menuitem-active > a.active,
.side-nav li.menuitem-active > a.active:hover {
    color: #ffffff !important;
    font-weight: 600;
    background: var(--sb-accent);
    box-shadow: 0 4px 14px rgba(114, 124, 245, 0.35);
}

/* --- Second level: no icons, hanging off a thin guide line that drops
       from the middle of the parent's icon --- */
.side-nav .side-nav-second-level {
    margin: 2px 0 6px;
    margin-inline-start: 21px;
    padding: 0;
    padding-inline-start: 9px;
    border-inline-start: 1px solid var(--sb-line);
}

/* --- Third level and deeper: small dots. The dot already sets the level
       apart, so the indent stays small and leaves the width to the label. --- */
.side-nav .side-nav-third-level,
.side-nav .side-nav-fourth-level {
    margin: 0;
    padding: 0;
    padding-inline-start: 6px;
}

.side-nav .side-nav-fourth-level {
    padding-inline-start: 14px;
}

.side-nav .side-nav-third-level li a::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-inline-end: 8px;
    vertical-align: middle;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.6;
}

.side-nav .side-nav-third-level li a.active::before {
    opacity: 1;
}

/* --- Footer: Help Center + collapse button --- */
.leftside-menu .sb-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--sb-footer-h);
    padding: 0 12px;
    background: #191b2b;
    border-top: 1px solid var(--sb-line);
}

.leftside-menu .sb-footer-link,
.leftside-menu .sb-collapse-btn {
    display: flex;
    align-items: center;
    height: var(--sb-row-h);
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.leftside-menu .sb-footer-link {
    flex: 1 1 auto;
    gap: 12px;
    min-width: 0;
    padding: 0 12px;
    color: var(--sb-text);
    font-size: 0.9rem;
    white-space: nowrap;
}

.leftside-menu .sb-collapse-btn {
    flex: none;
    justify-content: center;
    width: var(--sb-row-h);
    padding: 0;
    color: var(--sb-muted);
    background: transparent;
    border: 0;
}

.leftside-menu .sb-footer-link i,
.leftside-menu .sb-collapse-btn i {
    display: block;
    font-size: 1.25rem;
    line-height: 1;
}

.leftside-menu .sb-footer-link:hover,
.leftside-menu .sb-collapse-btn:hover {
    color: #ffffff;
    background: var(--sb-hover);
}

.leftside-menu .sb-footer-link.active {
    color: #ffffff;
    font-weight: 600;
    background: var(--sb-accent);
}

/* SimpleBar scrollbar: primary-tinted, less obtrusive */
.leftside-menu .simplebar-scrollbar:before {
    background: rgba(114, 124, 245, 0.55);
}

/* --- Collapsed to icons ---
   This is the theme's "condensed" mode, switched by the footer button and by
   the topbar menu button. The 70px rail scrolls with the page and a hovered
   row unfolds its label, with the group's items in a panel underneath; that
   mechanism is the theme's own. The selectors below repeat the theme's so the
   sizes and colours above carry over to it. */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .sb-search,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .sb-empty {
    display: none;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) #leftside-menu-container {
    height: 100%;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) #leftside-menu-container .side-nav {
    padding-top: 12px;
}

/* The row spacing moves from the link's margin to the item's padding: a
   margin under the link would be a gap between the unfolded label and its
   panel, and crossing it would drop the hover. */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav > .side-nav-item {
    padding: 1px 0;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link {
    min-height: 0;
    margin: 0;
    padding: 0 13px;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link i {
    margin: 0;
    margin-inline-end: 13px;
    font-size: 1.25rem;
}

/* The label lines up with the items of the panel underneath */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item .side-nav-link span {
    padding: 0;
    padding-inline-start: 24px;
}

/* The module of the current page stays marked on the rail */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav > .menuitem-active > .side-nav-link {
    color: #ffffff !important;
    background: rgba(114, 124, 245, 0.3);
}

/* A thin rule stands in for the hidden section titles */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-title ~ .side-nav-title + .side-nav-item {
    margin-top: 13px;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-title ~ .side-nav-title + .side-nav-item::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 8px;
    left: 8px;
    border-top: 1px solid var(--sb-line);
}

/* Hovered row: 46px rail row + 12px rail padding + 220px panel */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover .side-nav-link {
    width: 278px;
    color: #ffffff !important;
    background: var(--sb-flyout);
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > a[data-bs-toggle="collapse"].side-nav-link {
    border-end-end-radius: 0;
}

/* The panel of a hovered group */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul {
    inset-inline-start: 58px;
    width: 220px;
    margin: 0;
    padding: 6px;
    background: var(--sb-flyout);
    border: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 28px rgba(10, 12, 24, 0.3);
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul a {
    width: auto;
    padding: 0 10px;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a[data-bs-toggle="collapse"],
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul a[data-bs-toggle="collapse"] {
    padding-inline-end: 32px;
}

/* Inside a panel the arrow is kept: it tells which rows open a further panel */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-second-level .menu-arrow {
    display: inline-block !important;
    transform: none !important;
}

/* A group inside a panel opens its own panel beside it, level with its row */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li:hover > .collapse > ul,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul li:hover > .collapse > ul {
    top: -6px;
    inset-inline-start: 100%;
    width: 220px;
    border-radius: 8px;
}

/* The footer stays in the bottom corner of the window while the rail scrolls */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .sb-footer {
    position: fixed;
    inset-inline: 0 auto;
    flex-direction: column;
    gap: 2px;
    width: 70px;
    height: auto;
    padding: 8px 12px;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .sb-footer-link {
    flex: none;
    justify-content: center;
    width: 46px;
    padding: 0;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .sb-footer-link span {
    display: none;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .sb-collapse-btn {
    width: 46px;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .leftside-menu .sb-collapse-btn i {
    transform: rotate(180deg);
}

/* ============================================================
   Generic list viewer — UI/UX polish (CSS only, no logic).
   Every rule is anchored to selectors that only exist on the
   generic list pages (#basic-datatable, #btnAdd, .btnMainApply,
   #dropdownMenuButton, .pagination-rounded) so forms, dashboards
   and other pages are NOT affected.
   ============================================================ */

/* --- Data table: clearer header, comfortable rows, smooth hover --- */
#basic-datatable thead th {
    background: #f5f6fb;
    color: #6c757d;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    font-weight: 700;
    white-space: nowrap;
    padding: 11px 12px !important;
    border-top: 0 !important;
    border-bottom: 2px solid #e6e8f0 !important;
    vertical-align: middle !important;
}

#basic-datatable tbody td {
    padding: 9px 12px !important;
    border-top: 1px solid #f1f2f7;
    vertical-align: middle !important;
}

#basic-datatable tbody tr {
    transition: background-color 0.15s ease;
}

#basic-datatable tbody tr:hover {
    background-color: rgba(114, 124, 245, 0.06) !important;
}

/* Row "Options" action button: subtle hover affordance */
#basic-datatable td.table-action .btn {
    border-radius: 6px;
    transition: background-color 0.15s ease;
}
#basic-datatable td.table-action .btn:hover {
    background: rgba(114, 124, 245, 0.10);
}

/* --- Primary call-to-action: "Add New Record" --- */
#btnAdd {
    background: linear-gradient(135deg, #727cf5, #5b66e0);
    border-color: #5b66e0;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(114, 124, 245, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#btnAdd:hover,
#btnAdd:focus {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(114, 124, 245, 0.45);
}

/* --- Toolbar buttons: gentle rounding + hover lift --- */
.btnMainApply,
#dropdownMenuButton {
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btnMainApply:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(114, 124, 245, 0.35);
}

/* --- Generic-list toolbar: consistent rounding + spacing for every
       action button (Apply, Clear Filters, Advanced Filter, Export) so
       they all match the rounded look of #btnAdd / .btnMainApply --- */
.gv-toolbar > .btn,
.gv-toolbar > .dropdown {
    margin-bottom: 0.5rem;          /* aligns vertically with #btnAdd (mb-2) */
    margin-left: 0.4rem;            /* even gap between toolbar buttons */
    vertical-align: middle;         /* keep every button on the same line */
}
.gv-toolbar > .btn,
.gv-toolbar > .dropdown > .btn {
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gv-toolbar > .btn:hover,
.gv-toolbar > .dropdown > .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* --- Generic-list cards: soft elevation + rounded corners so the
       "controls" card and the "data" card read as two distinct panels --- */
.gv-controls-card,
.gv-table-card {
    border: 1px solid #e6e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: box-shadow 0.2s ease;
}
.gv-table-card {
    margin-top: 0.25rem;
    overflow: hidden;            /* clip the table to the rounded corners */
}
.gv-table-card:hover {
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.10);
}

/* --- Quick Filters: collapsible accordion --- */
.gv-quickfilter-accordion {
    border-top: 1px dashed #e6e8f0;
    padding-top: 0.5rem;
}
.gv-quickfilter-accordion .accordion-item {
    border: 1px solid #e9ebf5;
    border-radius: 10px !important;
    /* overflow: visible — do NOT clip. Filter dropdowns (Select2, autocompletes,
       date pickers) that open upward would otherwise get chopped by the
       accordion boundary. Rounded corners are preserved by border-radius on
       the header/body themselves below. */
    overflow: visible;
    background: #fbfbfe;
}
.gv-quickfilter-accordion .accordion-header,
.gv-quickfilter-accordion .accordion-button {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.gv-quickfilter-accordion .accordion-button {
    background: linear-gradient(135deg, rgba(114, 124, 245, 0.10), rgba(91, 102, 224, 0.06));
    color: #4a52b3;
    font-size: 0.9rem;
    box-shadow: none;
}
.gv-quickfilter-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(114, 124, 245, 0.16), rgba(91, 102, 224, 0.10));
    color: #4a52b3;
    /* Collapsed body is below, so keep only the top corners rounded when open. */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.gv-quickfilter-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(114, 124, 245, 0.20);
}
.gv-quickfilter-accordion .accordion-button i {
    font-size: 1.05rem;
}
.gv-quickfilter-accordion .accordion-collapse,
.gv-quickfilter-accordion .accordion-body {
    /* Ensure descendants can escape the panel bounds too — otherwise a
       Bootstrap collapse or accordion-body with its own scroll context would
       still crop upward-opening dropdowns. */
    overflow: visible;
}
.gv-quickfilter-accordion .accordion-body {
    background: #ffffff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* --- Pagination: cleaner buttons, primary active state --- */
.pagination-rounded .page-link {
    border: 0;
    color: #6c757d;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.pagination-rounded .page-item .page-link:hover {
    background: rgba(114, 124, 245, 0.12);
    color: #727cf5;
}
.pagination-rounded .page-item.active .page-link {
    background: #727cf5;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(114, 124, 245, 0.40);
}

/* --- Row actions: one-click Show / Edit icons + a "more" menu ---
       (.gv-row-* hooks are emitted by MainTableComponent and
       MainContentBasedOnCtypeComponent) */
.gv-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
#basic-datatable td.table-action .gv-row-btn {
    padding: 3px 6px;
    border: 0;
    font-size: 17px;
    line-height: 1;
    color: #6c757d;
    box-shadow: none;
}
#basic-datatable td.table-action .gv-row-btn:hover,
#basic-datatable td.table-action .gv-row-btn.show {
    color: #4a52b3;
}
/* Named row buttons added per list by gview_extends/<ctype_id>_row_actions.html.php
   (the Menu list offers "Builder" and "Legacy editor"). */
#basic-datatable td.table-action .gv-row-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px 2px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #5b6078;
    background: #f1f3f8;
    border-radius: 999px;
}
#basic-datatable td.table-action .gv-row-pill i { font-size: 14px; }
#basic-datatable td.table-action .gv-row-pill:hover { color: #2a2f4c; background: #e4e7f0; }
#basic-datatable td.table-action .gv-row-pill-main {
    color: #ffffff;
    background: linear-gradient(135deg, #727cf5 0%, #5a65e8 100%);
    box-shadow: 0 4px 10px -4px rgba(114, 124, 245, 0.7);
}
#basic-datatable td.table-action .gv-row-pill-main:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #818afa 0%, #6971ea 100%);
}
/* A row that names its legacy editor does not need the generic pencil too */
.gv-row-actions:has(.gv-row-legacy) > .gv-row-edit { display: none; }

/* The row menu is capped at 100px inline because the table wrapper clips
   it. RowMenuComponent marks it .gv-menu-free once the menu is positioned
   against the viewport instead, and only then is the cap lifted. */
#basic-datatable .dropdown-menu.gv-menu-free {
    max-height: min(60vh, 420px) !important;
    overflow-y: auto;
}

/* --- Ticked rows stay highlighted so a selection is visible at a glance --- */
#basic-datatable tbody tr.gv-row-selected,
#basic-datatable tbody tr.gv-row-selected:hover {
    background-color: rgba(114, 124, 245, 0.12) !important;
}

/* --- Loading / empty states inside the data card --- */
.gv-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    color: #6c757d;
    font-size: 0.92rem;
}
.gv-state-loading .spinner-border {
    color: #727cf5;
}
.gv-state-empty {
    flex-direction: column;
    gap: 4px;
    padding: 40px 16px;
    text-align: center;
}
.gv-state-empty > i {
    font-size: 40px;
    line-height: 1;
    color: #b9c0d4;
    margin-bottom: 6px;
}
.gv-state-empty .gv-state-title {
    font-size: 1rem;
    font-weight: 700;
    color: #313a46;
}
.gv-state-empty .gv-state-sub {
    font-size: 0.85rem;
    color: #8a94a6;
}

/* --- Pager: count on the leading side, pages centred, rows-per-page at the
       end; the three parts stack on narrow screens --- */
.gv-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 6px 10px 8px;
}
.gv-pager .gv-pager-info,
.gv-pager .gv-pager-size {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 6px 12px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #6c757d;
}
.gv-pager .gv-pager-size {
    justify-content: flex-end;
}
.gv-pager .gv-pager-size label {
    margin: 0;
    white-space: nowrap;
}
.gv-pager .gv-pager-size .form-select {
    width: auto;
    border-radius: 8px;
}
.gv-pager .gv-pager-selected {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(114, 124, 245, 0.12);
    color: #4a52b3;
    font-weight: 600;
}
.gv-pager .pagination {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 767.98px) {
    .gv-pager {
        justify-content: center;
    }
    .gv-pager .gv-pager-info,
    .gv-pager .gv-pager-size {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Page title → IOM-blue hero banner (matches the HCM/PCM
   ".fum-hero .int-hero" style). CSS only. NOTE: .page-title-box
   is shared by every page header (lists, dashboards, show pages,
   admin), so this restyles ALL page headers app-wide.
   ============================================================ */
.page-title-box {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    background: linear-gradient(135deg, #0033A0 0%, #1565c0 55%, #4fc3f7 100%);
    border-radius: 12px;
    color: #ffffff;
    padding: 8px 16px;
    margin: 14px 0 10px;
    box-shadow: 0 4px 16px rgba(0, 51, 160, 0.22);
}

/* Hero icon bubble (mdi-format-list-bulleted) */
.page-title-box::before {
    content: "\f0279";
    font-family: "Material Design Icons";
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    order: 1;
}

.page-title-box .page-title {
    order: 2;
    margin: 0 !important;
    line-height: 1.2 !important;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #ffffff !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.page-title-box .page-title-right {
    order: 3;
    margin: 0 0 0 auto !important;
    position: static !important;
    float: none !important;
}

.page-title-box .breadcrumb {
    background: transparent !important;
    margin: 0 !important;
    padding: 0;
}
.page-title-box .breadcrumb .breadcrumb-item,
.page-title-box .breadcrumb .breadcrumb-item a,
.page-title-box .breadcrumb .breadcrumb-item span,
.page-title-box .breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.92) !important;
}
.page-title-box .breadcrumb .breadcrumb-item a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}
.page-title-box .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   Generic add / edit form (/[ctype]/add, /[ctype]/edit/[id],
   surveys) — UI/UX polish. CSS only, no logic.
   Every rule is scoped to .ge-page (the root AddEditGen renders)
   and to ge-* hook classes the generator puts on its own markup,
   so list pages, dashboards, show pages and the hand-built cards
   inside custom *_extends components are NOT affected.
   Look follows the HCM/PCM section cards: white card, soft
   shadow, light header strip, IOM-blue accents.
   ============================================================ */

/* --- Sticky needs a viewport-relative scroll context ---------------
   The theme clips .wrapper / .content-page with overflow:hidden, which
   makes them scroll containers and pins position:sticky to them instead
   of the viewport. overflow:clip clips the same way without that side
   effect. Applied only on pages that contain the generic form; browsers
   without :has()/clip simply get a non-sticky action bar. */
body:has(.ge-page) .wrapper,
body:has(.ge-page) .content-page {
    overflow: clip;
}

/* --- Page hero: the same banner the show page has (.gshow-hero in
       views/node/newShow.php) — breadcrumb line, then icon, a small
       "kicker" line, the title, meta chips, the status pill on the far
       side and an action strip along the bottom.
       Shared by the generic edit / add form (Gctypes PageHeaderComponent +
       TopActionsComponent::generateHeroActions()), the generic list
       (Gviews PageHeaderComponent) and the delete confirmation
       (views/node/delete.php), so these rules are NOT scoped to .ge-page.
       The hero must NOT clip its overflow (the Actions menu opens out of
       it), so the decorative glow is a background layer rather than the
       overflow-hidden pseudo-element the show page uses. --- */
.ge-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 14px 0 10px;
    font-size: 0.83rem;
    color: #6b7a90;
}
.ge-crumb a {
    color: #6b7a90;
    text-decoration: none;
}
.ge-crumb a:hover {
    color: #0033A0;
}
.ge-crumb .ge-crumb-sep {
    opacity: 0.5;
}
.ge-crumb .ge-crumb-current {
    color: #1f2d3d;
    font-weight: 600;
}
.ge-hero {
    position: relative;
    margin-bottom: 14px;
    padding: 1.4rem 1.6rem;
    border-radius: 14px;
    color: #ffffff;
    background:
        radial-gradient(circle at calc(100% - 50px) 50px, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0) 90px),
        linear-gradient(135deg, #0033A0 0%, #1565c0 55%, #4fc3f7 100%);
    box-shadow: 0 8px 24px -12px rgba(0, 51, 160, 0.55);
}
.ge-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}
.ge-hero-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    font-size: 1.6rem;
    line-height: 1;
}
.ge-hero-main {
    flex: 1 1 260px;
    min-width: 0;
}
.ge-hero-sub {
    font-size: 0.85rem;
    opacity: 0.85;
}
.ge-hero-title {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.25;
    word-break: break-word;
}
.ge-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0.35rem 0 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 0.78rem;
}
.ge-hero-chip i {
    font-size: 0.95rem;
    opacity: 0.9;
}
.ge-hero-chip a {
    color: #ffffff;
    text-decoration: none;
}
.ge-hero-chip a:hover {
    text-decoration: underline;
}
.ge-hero-side {
    flex: 0 0 auto;
    margin-left: auto;
}
[dir="rtl"] .ge-hero-side {
    margin-left: 0;
    margin-right: auto;
}
.ge-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ge-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.85rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ge-hero-btn:hover,
.ge-hero-btn.show {
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}
.ge-hero-btn i {
    font-size: 1rem;
    line-height: 1;
}
@media (max-width: 640px) {
    .ge-hero {
        padding: 1.15rem;
        border-radius: 10px;
    }
    .ge-hero-title {
        font-size: 1.15rem;
    }
    .ge-hero-side {
        margin-left: 0;
        margin-right: 0;
    }
}

/* --- Stand-alone "Actions" row above the form (public surveys only;
       elsewhere the hero hosts the actions) --- */
.ge-page .ge-topbar {
    align-items: center;
}
.ge-page .ge-topbar .btn-group > .btn {
    border: 1px solid #e6e8f0;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 600;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ge-page .ge-topbar .btn-group > .btn:hover,
.ge-page .ge-topbar .btn-group > .btn.show {
    border-color: #c9d3ea;
    box-shadow: 0 3px 10px rgba(16, 24, 40, 0.10);
}

/* --- Record status: the same pill the show page puts in its hero
       (.gshow-status in views/node/newShow.php). It sits on the far side
       of the hero; `order` only matters on public surveys, where it
       follows the title inside the plain .page-title-box banner.
       The Bootstrap bg-* / text-* classes stored in status_list.style
       paint it; the colours below only apply when a status has none.
       Dot and "Change" link use currentColor so they contrast with
       whatever text colour the status class picked. --- */
.ge-status {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: #e6ecf7;
    color: #0033A0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.ge-status .ge-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.ge-status .ge-status-change {
    margin-left: 0.35rem;
    color: inherit;
    font-weight: 500;
    opacity: 0.8;
    text-decoration: none;
}
.ge-status .ge-status-change:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- Tabs: names always visible; the strip scrolls sideways when the
       tabs do not fit instead of squeezing them --- */
.ge-page .ge-tabs {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f1f4fa;
    border: 1px solid #e6e8f0;
    border-radius: 12px;
    scrollbar-width: thin;
}
.ge-page .ge-tabs .nav-item {
    flex: 1 0 auto;              /* share the row when they fit, keep their width when they don't */
}
.ge-page .ge-tabs .nav-link {
    padding: 8px 16px;
    border-radius: 9px !important;   /* markup carries .rounded-0 */
    white-space: nowrap;
    font-weight: 600;
    color: #5a6473;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ge-page .ge-tabs .nav-link:hover {
    background: rgba(0, 51, 160, 0.07);
    color: #0033A0;
}
.ge-page .ge-tabs .nav-link.active {
    background: linear-gradient(135deg, #0033A0 0%, #1565c0 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 51, 160, 0.25);
}

/* --- Field groups (and the Log panel): the ribbon tag becomes a full-width
       section header with a collapse chevron --- */
.ge-page .ge-group {
    border: 1px solid #eef0f6;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(20, 30, 60, 0.05);
    margin-bottom: 16px;
}
.ge-page .ge-group > .card-body {
    padding: 0 1.25rem 0.5rem;
}
.ge-page .ge-group > .card-body > .ribbon {
    float: none !important;          /* markup carries .float-start */
    display: block;
    margin: 0 -1.25rem !important;   /* stretch to the card edges */
    padding: 0;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border-bottom: 1px solid #eef0f6;
    border-radius: 13px 13px 0 0;
    box-shadow: none;
}
.ge-page .ge-group > .card-body > .ribbon::before {
    display: none;                   /* the folded-corner triangle */
}
.ge-page .ge-group > .card-body > .ribbon > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px !important;   /* markup carries .p-0 */
    color: #313a46 !important;       /* markup carries .text-white */
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1px;
}
.ge-page .ge-group > .card-body > .ribbon > a::before {
    content: "";
    flex: 0 0 4px;
    height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg, #0033A0 0%, #1565c0 100%);
}
.ge-page .ge-group > .card-body > .ribbon > a::after {
    content: "\f0140";               /* mdi-chevron-down */
    font-family: "Material Design Icons";
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin-left: auto;
    color: #98a6ad;
    transition: transform 0.15s ease;
}
[dir="rtl"] .ge-page .ge-group > .card-body > .ribbon > a::after {
    margin-left: 0;
    margin-right: auto;
}
.ge-page .ge-group > .card-body > .ribbon > a.collapsed::after {
    transform: rotate(-90deg);
}
.ge-page .ge-group > .card-body > .ribbon > a:hover::after {
    color: #0033A0;
}
/* Collapsed: header only, no empty strip underneath */
.ge-page .ge-group > .card-body:has(> .ribbon > a.collapsed) {
    padding-bottom: 0;
}
.ge-page .ge-group > .card-body > .ribbon:has(> a.collapsed) {
    border-bottom: 0;
    border-radius: 13px;
}

/* --- Fields: quieter labels and help text. Inputs keep the theme's own
       borders, validation colours and focus rings. --- */
.ge-page .ge-group .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
}
.ge-page .ge-group .pb-2 > i.mdi-information {
    font-style: normal;
    font-size: 0.78rem;
    color: #8a94a6;
}

/* --- Action bar: Save and friends stay in reach while scrolling ---
   z-index stays low on purpose: dropdown lists, date pickers and the
   sidebar must open ABOVE the bar, not behind it. */
.ge-page .ge-actionbar {
    position: sticky;
    bottom: 12px;
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 24px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e6e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.14);
}
.ge-page .ge-actionbar .ge-actionbar-spacer {
    flex: 1 1 auto;
}
.ge-page .ge-actionbar .btn {
    font-weight: 600;
}
.ge-page .ge-actionbar .ge-save {
    min-width: 108px;
}

@media (max-width: 575.98px) {
    .ge-page .ge-actionbar {
        bottom: 6px;
        padding: 8px 10px;
    }
    .ge-page .ge-tabs .nav-link {
        padding: 7px 12px;
    }
}

/* Printing a form: the bar is page furniture, not content */
@media print {
    .ge-page .ge-actionbar {
        display: none;
    }
}

/* COMPASS animated icon on the page loading screen (dark tile so it reads on light and dark themes) */
#preloader #status { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
#preloader .compass-preloader { display: block; width: 96px; height: 96px; padding: 14px; box-sizing: border-box; border-radius: 22px; background: #282a43; box-shadow: 0 6px 24px rgba(40, 42, 67, .28); }

/* COMPASS icon as the Log In button spinner */
.compass-btn-spinner { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; animation: compass-spin 1.2s linear infinite; }
@keyframes compass-spin { to { transform: rotate(360deg); } }