.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 {
    padding: 5px 10px 65 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;
}




.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 — UI/UX redesign (visual only, no markup changes)
   Theme: Hyper. Custom file loads after app.min.css so these win.
   ============================================================ */

/* 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);
}

/* Breathing room around the nav list */
#leftside-menu-container .side-nav {
    padding: 8px 12px 28px;
}

/* Section titles */
.side-nav .side-nav-title {
    color: #8a93c2 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.09em !important;
    padding: 18px 14px 8px !important;
}

/* Top-level menu links → rounded "pill" rows */
.side-nav .side-nav-link {
    color: #c5cbe9 !important;
    border-radius: 10px;
    margin: 2px 0;
    padding: 10px 12px !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.side-nav .side-nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}

/* Active / expanded parent item: primary-tinted gradient + accent bar */
.side-nav .menuitem-active > .side-nav-link,
.side-nav .side-nav-link[aria-expanded="true"] {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(114, 124, 245, 0.34), rgba(114, 124, 245, 0.12)) !important;
    box-shadow: inset 3px 0 0 0 #727cf5;
}

/* Avatar / icon bubbles: round the corners to match the pills */
.side-nav .side-nav-link img[avatar] {
    border-radius: 8px;
}

/* Sub-levels: indentation guide line + muted text */
.side-nav .side-nav-second-level,
.side-nav .side-nav-third-level {
    margin-left: 12px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.side-nav .side-nav-second-level li a,
.side-nav .side-nav-third-level li a {
    color: #aab2dd !important;
    border-radius: 8px;
    padding: 8px 12px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.side-nav .side-nav-second-level li a:hover,
.side-nav .side-nav-third-level li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05);
}

/* Active nested item AND active nested parent.
   The theme JS marks the <li> with `menuitem-active` (and the leaf <a> with
   `active`), NOT `active` on the <li>. These selectors are kept more specific
   than the muted `... li a` rules above so the highlight is not overridden. */
.side-nav .side-nav-second-level li.menuitem-active > a,
.side-nav .side-nav-third-level li.menuitem-active > a,
.side-nav .side-nav-second-level li a.active,
.side-nav .side-nav-third-level li a.active {
    color: #ffffff !important;
    background: rgba(114, 124, 245, 0.18);
}

/* Collapse arrow tint */
.side-nav .menu-arrow {
    color: #8a93c2;
}
.side-nav .side-nav-link:hover .menu-arrow,
.side-nav .menuitem-active > .side-nav-link .menu-arrow,
.side-nav .menuitem-active > a .menu-arrow {
    color: #ffffff;
}

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

/* ============================================================
   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: hidden;
    background: #fbfbfe;
}
.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;
}
.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-body {
    background: #ffffff;
}

/* --- 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);
}

/* ============================================================
   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;
}