/*!
* Version: 1.2.0
* Template: Example Project
* Author: iqonic.design
* Design and Developed by: iqonic.design
* NOTE: This file contains the styling for Template.
*
*/
:focus {
  outline: none;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

.sign-bg {
  position: absolute;
  left: 0;
  top: 0;
}
.sign-bg.sign-bg-right {
  left: auto;
  right: 0;
}

.gradient-main {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.login-bottom {
  margin-top: -12.5rem;
}
.close{
    float:right;
    color:red !important;
    padding-top:0;
}
form label{
    color:black;
    margin-bottom:5px;
}
.float-right{
    float:right;
}
.text-right{
    text-align:right;
}
.node-treeview{
    background: none !important;
    border: 0.5px solid #cfcfcf !important;
}
.node-treeview.node-selected{
    background: blue !important;
}
@media (min-width: 1400px) {
  .auth-card {
    padding: 0 6.25rem;
  }
}
@media (max-width: 575.98px) {
  .login-header {
    height: 12.5rem !important;
  }
  .login-bottom {
    margin-top: -6.25rem;
  }
}
.card .iq-dashed-border {
  padding: 1.5rem;
  -webkit-border-radius: 0.5rem;
          border-radius: 0.5rem;
  border: 1px dashed #ced4da;
}
.card .card-body .grid-flow-col {
  grid-auto-flow: column;
}
.card .card-body .iq-icon-box-2 {
  height: 36px;
  width: 36px;
  min-width: 36px;
  line-height: 36px;
  background: #F5F6FA;
  text-align: center;
  font-size: 1rem;
  text-decoration: none;
  -webkit-border-radius: 0.5rem;
          border-radius: 0.5rem;
}
.card .card-body .iq-media-group-1 .iq-media-1 {
  margin-left: -1.25rem;
  position: relative;
  z-index: 0;
}
.card .card-body .iq-media-group-1 .iq-media-1:hover {
  z-index: 9;
}
.card .card-body .iq-media-group-1 .iq-media-1 img {
  border: 2px solid #eee;
}
.card .card-body .iq-media-group-1 .iq-media-1:first-child {
  margin-left: 0;
}
.card .card-body .iq-media-group-1 .iq-media.border {
  border: 2px solid #eee;
}
.card .card-body .iq-media-1 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
          background-size: cover;
  -webkit-border-radius: 0.25rem;
          border-radius: 0.25rem;
}
.card .card-body .iq-media-1:hover {
  text-decoration: none;
}


.list_Btns{
    display: flex;
    align-items: center;
    margin-bottom: 0;
    gap: 5px;
}
.butns_row {
  display: flex;
  gap: 5px;
}

.pricing .table thead tr {
  background-color: unset;
}
.pricing .table th {
  border-top: none;
  border-bottom: 1px solid #eee;
}
.pricing .table td {
  border-top: none !important;
}
.pricing .table tr {
  border-bottom: 1px solid #eee;
}

.prc-box {
  background: #d8ddfa;
  padding: 15px;
  position: relative;
  -webkit-border-radius: 0.5rem;
          border-radius: 0.5rem;
  cursor: pointer;
}

.type {
  position: absolute;
  background: #3a57e8;
  padding: 9px 25px;
  color: #ffffff;
  top: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  font-weight: 500;
}
.type:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  right: -15px;
  top: 0px;
  border-left: 15px solid #0c112e;
  border-top: 15px solid transparent;
}
.type:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: -15px;
  top: 0px;
  border-right: 15px solid #0c112e;
  border-top: 15px solid transparent;
}

.prc-box.active {
  background: #3a57e8;
}
.prc-box.active .h3 {
  color: #ffffff;
}
.prc-box.active .type {
  background: #d8ddfa;
  color: #212529;
}
.prc-box.active .type:before {
  border-left: 16px solid #0c112e;
  right: -16px;
}
.prc-box.active .type:after {
  border-right: 16px solid #0c112e;
  left: -16px;
}

.prc-wrap {
  border-bottom: none !important;
}

.child-cell.active {
  color: #3a57e8;
  stroke: #3a57e8;
}

.line-around {
  border-bottom: 1px solid #eee;
  line-height: 0.1em;
  margin: 10px 0 20px;
}
.line-around .line-around-1 {
  text-transform: uppercase;
  background: #ffffff;
  padding: 0 10px 0 0;
}

.iq-single-card {
  -webkit-border-radius: 0 0.5rem 0.5rem 0;
          border-radius: 0 0.5rem 0.5rem 0;
}

@media (max-width: 767.98px) {
  .iq-single-card {
    -webkit-border-radius: 0 0 0.5rem 0.5rem;
            border-radius: 0 0 0.5rem 0.5rem;
  }
}
.iq-star-inserted .iq-star-inserted-1.col {
  padding-right: unset;
}
.iq-star-inserted .iq-star-inserted-2 {
  z-index: 2;
}
.iq-star-inserted .iq-star-inserted-2.col {
  padding: unset;
}
.iq-star-inserted .iq-star-inserted-2.col .card {
  height: 100%;
}
.iq-star-inserted .iq-star-inserted-3.col {
  padding-left: unset;
}

@media (max-width: 991.98px) {
  .iq-star-inserted .card.my-5 {
    margin: unset !important;
    margin-bottom: 2rem !important;
  }
  .iq-star-inserted .iq-star-inserted-1.col {
    padding-right: -webkit-calc(var(--bs-gutter-x) / 2);
    padding-right: calc(var(--bs-gutter-x) / 2);
  }
  .iq-star-inserted .iq-star-inserted-2.col {
    padding-right: -webkit-calc(var(--bs-gutter-x) / 2);
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: -webkit-calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
  }
  .iq-star-inserted .iq-star-inserted-2.col .card {
    height: unset;
    margin-bottom: 2rem !important;
  }
  .iq-star-inserted .iq-star-inserted-3.col {
    padding-left: -webkit-calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
  }
}
.body-class-1 {
  scroll-behavior: smooth;
}

.main-img .container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
.main-img .container h1 {
  margin: 0;
  font-size: 4.375rem;
  color: #ffffff;
}
.main-img .container h1 span {
  padding: 0.375rem 0.875rem;
  display: inline-block;
}

.bd-heading-1 .bd-example {
  margin-top: 1rem;
}
.bd-heading-1 .bd-example:first-child {
  margin-top: 0rem;
}

.bd-cheatsheet {
  margin-top: -2rem;
}
.bd-cheatsheet section article .card.iq-document-card {
  padding: 1.5rem;
}
.bd-cheatsheet section article .card.iq-document-card .tab-content pre.language-markup {
  margin: unset;
}

.bd-aside.card.iq-document-card {
  padding: 1.5rem;
  margin-top: -2rem;
}

/* Table of contents */
.bd-aside a {
  padding: 0.25rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 0.25rem;
  color: rgba(138, 146, 166, 0.95);
  text-decoration: none;
}
.bd-aside a:hover, .bd-aside a:focus {
  background-color: rgba(58, 87, 232, 0.1);
}
.bd-aside .active {
  font-weight: 600;
  background-color: rgba(58, 87, 232, 0.1);
  color: #3a57e8;
}
.bd-aside .btn {
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: #8A92A6;
  border: 0;
}
.bd-aside .btn .right-icon {
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: -webkit-transform 0.35s ease;
  -o-transition: transform 0.35s ease;
  transition: transform 0.35s ease;
  transition: transform 0.35s ease, -webkit-transform 0.35s ease;
}
.bd-aside .btn:hover, .bd-aside .btn:focus {
  background-color: rgba(58, 87, 232, 0.1);
  color: #3a57e8;
}
.bd-aside .btn:focus {
  -webkit-box-shadow: 0 0 0 0.063rem rgba(58, 87, 232, 0.7);
          box-shadow: 0 0 0 0.063rem rgba(58, 87, 232, 0.7);
}
.bd-aside .btn[aria-expanded=true] .right-icon {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.scrollspy-example {
  position: relative;
  height: 12.5rem;
  margin-top: 0.5rem;
  overflow: auto;
}

[id=modal] .bd-example .btn,
[id=buttons] .bd-example .btn,
[id=tooltips] .bd-example .btn,
[id=popovers] .bd-example .btn,
[id=dropdowns] .bd-example .btn-group,
[id=dropdowns] .bd-example .dropdown,
[id=dropdowns] .bd-example .dropup,
[id=dropdowns] .bd-example .dropend,
[id=dropdowns] .bd-example .dropstart {
  margin-top: 0.5rem;
}

/* Layout */
@media (min-width: 1200px) {
  .body-class-1 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto;
  }
  .bd-aside.sticky-xl-top {
    top: 2rem !important;
  }
  .bd-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    grid-column: 1/span 3;
  }
  .sticky-xl-top {
    z-index: 2;
  }
  .bd-cheatsheet, .bd-cheatsheet section, .bd-cheatsheet article {
    display: grid;
    gap: 2rem;
    grid-template-columns: 3fr 1fr;
    grid-column: span 2/span 2;
    grid-template-rows: auto;
  }
  .bd-aside {
    grid-area: 1/1;
    scroll-margin-top: 4rem;
  }
  .bd-cheatsheet section, .bd-cheatsheet section > .iq-side-content {
    top: 2rem;
    scroll-margin-top: 0;
  }
  .bd-cheatsheet article, .bd-cheatsheet .bd-heading {
    top: -webkit-calc(7.2rem + 2rem);
    top: calc(7.2rem + 2rem);
    scroll-margin-top: -webkit-calc(7.8rem + 2rem);
    scroll-margin-top: calc(7.8rem + 2rem);
  }
  .bd-cheatsheet .bd-heading {
    z-index: 1;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  .bd-cheatsheet .bd-heading .card {
    margin-bottom: 0;
  }
  .bd-cheatsheet article .iq-document-card {
    margin-bottom: unset;
  }
  .bd-cheatsheet article .iq-document-card.iq-doc-head {
    margin-top: -6.8rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .mobile-offcanvas {
    width: 40% !important;
  }
}
@media (max-width: 767.98px) {
  .main-img .container h1 {
    font-size: 3.125rem;
  }
}
@media (max-width: 1199.98px) {
  .header .container {
    max-width: unset !important;
  }
  aside.mobile-offcanvas {
    margin-top: unset !important;
  }
  aside.mobile-offcanvas .offcanvas-header {
    display: block;
  }
  .body-class-1 {
    padding: unset;
  }
  .body-class-1.container {
    max-width: unset;
  }
  #content .iq-side-content .card {
    margin-top: 1.25rem;
  }
  .mobile-offcanvas {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-border-radius: 0;
            border-radius: 0;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1200;
    width: 75%;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-transition: visibility 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: visibility 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -o-transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    background: rgba(255, 255, 255, 0.8392156863);
    -webkit-backdrop-filter: blur(0.5rem);
            backdrop-filter: blur(0.5rem);
  }
  .mobile-offcanvas.show {
    visibility: visible;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .mobile-offcanvas .container, .mobile-offcanvas .container-fluid {
    display: block;
  }
}
@media (min-width: 1200px) {
  .bd-aside.card.iq-document-card, .bd-cheatsheet {
    margin-top: -3rem;
  }
  aside.mobile-offcanvas .offcanvas-header {
    display: none;
  }
  .bd-cheatsheet section .iq-side-content {
    grid-column-end: 3;
  }
  .bd-cheatsheet section .iq-side-content .card {
    margin-bottom: 0;
  }
}
body.offcanvas-active {
  overflow: hidden;
}

body.uikit .btn-download {
  display: none;
}

.uisheet.screen-darken {
  height: 100%;
  width: 0%;
  z-index: 30;
  position: fixed;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(33, 37, 41, 0.6);
  -webkit-transition: opacity 0.2s linear, visibility 0.2s, width 2s ease-in;
  -o-transition: opacity 0.2s linear, visibility 0.2s, width 2s ease-in;
  transition: opacity 0.2s linear, visibility 0.2s, width 2s ease-in;
}
.uisheet.screen-darken.active {
  z-index: 10;
  -webkit-transition: opacity 0.3s ease, width 0s;
  -o-transition: opacity 0.3s ease, width 0s;
  transition: opacity 0.3s ease, width 0s;
  opacity: 1;
  width: 100%;
  visibility: visible;
}

#back-to-top {
  display: inline !important;
}
#back-to-top .top {
  bottom: 1.563rem;
  right: 1.563rem;
  z-index: 999;
}

.middle {
  display: inline !important;
}
.middle .mid-menu {
  position: fixed;
  top: 9.375rem;
  left: 0rem;
  z-index: 999;
  text-align: center;
  cursor: pointer;
  background: #3a57e8;
  color: #ffffff;
  padding: 0.2rem;
  -webkit-border-radius: 0 1rem 1rem 0;
          border-radius: 0 1rem 1rem 0;
}

.top-1 {
  top: 1rem;
}
/* ==========================================================================
   FIELD4CE SHARED UI  (design refresh)
   --------------------------------------------------------------------------
   All page styling lives here - views should NOT contain <style> blocks.
   These rules target the markup the whole app already uses
   (.card.card-body, .custom-form-control, .table, .modal, nav.first
   breadcrumbs), so every page picks up the new design automatically.
   ========================================================================== */

:root {
  --f4-primary: #01243B;
  --f4-primary-2: #0190CB;
  --f4-primary-3: #6fb1ff;
  --f4-primary-soft: #eaf2ff;
  --f4-ink: #3b4252;
  --f4-ink-strong: #23294b;
  --f4-muted: #8a94a6;
  --f4-line: #eef0f3;
  --f4-line-2: #e1e5eb;
  --f4-surface: #fbfcfe;
  --f4-success: #17a673;
  --f4-success-soft: #eafaf1;
  --f4-warning: #ffc107;
  --f4-warning-soft: #fff7e6;
  --f4-danger: #dc3545;
  --f4-danger-soft: #fdecec;
  --f4-radius: 16px;
  --f4-radius-sm: 8px;
  --f4-shadow: 0 10px 40px rgba(17, 24, 39, .09);
}

/* --------------------------------------------------------------------------
   1. Breadcrumb bar (nav.first - used on every module page)
   -------------------------------------------------------------------------- */
nav.first .breadcrumb {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 18px rgba(17, 24, 39, .05);
}

nav.first .breadcrumb-item a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--f4-muted);
  text-decoration: none;
}

nav.first .breadcrumb-item a.active-1 {
  color: var(--f4-primary);
}

nav.first .breadcrumb-item + .breadcrumb-item::before {
  color: #c8cede;
}

/* --------------------------------------------------------------------------
   2. Cards
   -------------------------------------------------------------------------- */
.card {
  border: none;
  border-radius: var(--f4-radius);
  box-shadow: var(--f4-shadow);
}

.card.card-body {
  padding: 24px 26px;
}

/* cards that carry their own gradient page header sit flush */
.page-card.card.card-body,
.company-form-card.card.card-body,
.company-list-card.card.card-body,
.compare-card.card.card-body,
.hier-card.card.card-body {
  padding: 0;
}

.page-card,
.company-form-card,
.company-list-card,
.compare-card,
.hier-card {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Gradient page header (inside a card)
      generic: .page-header - legacy per-page aliases kept so existing
      views keep working without markup changes
   -------------------------------------------------------------------------- */
.page-header,
.cf-header,
.cl-header,
.cmp-header,
.hier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 26px 28px;
  background: linear-gradient(135deg, var(--f4-primary) 0%, var(--f4-primary-2) 100%);
  position: relative;
  overflow: hidden;
}

.page-header::after,
.cf-header::after,
.cl-header::after,
.cmp-header::after,
.hier-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .35), transparent 55%);
  pointer-events: none;
}

.page-header .page-title,
.page-banner .page-title,
.cf-header .cf-title,
.cl-header .cl-title,
.cmp-header .cmp-title,
.hier-header .hier-title {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.page-header-icon,
.cf-header .cf-icon,
.cl-header .cl-icon,
.cmp-header .cmp-icon,
.hier-header .hier-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.page-header h5,
.cf-header h5,
.cl-header h5,
.cmp-header h5,
.hier-header h5 {
  margin: 0;
  font-weight: 700;
  color: #ffffff;
}

.page-header p,
.cf-header p,
.cl-header p,
.cmp-header p,
.hier-header p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
}

.page-header-actions,
.cl-header .cl-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* buttons and links placed on the gradient header */
.page-header .btn,
.page-header .cmp-link,
.cf-header .btn,
.cl-header .btn,
.cmp-header .cmp-link,
.hier-header .btn {
  position: relative;
  z-index: 1;
  border-radius: var(--f4-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #ffffff;
  transition: .15s ease;
}

.page-header .btn:hover,
.page-header .cmp-link:hover,
.cf-header .btn:hover,
.cl-header .btn:hover,
.cmp-header .cmp-link:hover,
.hier-header .btn:hover {
  background: rgba(255, 255, 255, .28);
  color: #ffffff;
  text-decoration: none;
}

.page-header .btn-solid-white,
.cl-header .btn-solid-white {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--f4-primary);
}

.page-header .btn-solid-white:hover,
.cl-header .btn-solid-white:hover {
  background: #eef5ff;
  color: var(--f4-primary);
}

/* body area under a gradient header */
.page-body,
.cf-body,
.cl-body,
.cmp-body,
.hier-body {
  padding: 26px 28px 30px;
}

.cl-body {
  padding-top: 22px;
}

.footer-body{
  border-top: 1px solid #e9e3e3;
}

/* --------------------------------------------------------------------------
   4. Section headings inside forms
   -------------------------------------------------------------------------- */
.form-section,
.cf-section {
  margin-bottom: 30px;
}

.form-section-title,
.cf-section-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--f4-muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-section-title::after,
.cf-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--f4-line);
}

.form-section-icon,
.cf-section-title .cf-section-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hier-side-title,
.hier-panel-head {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--f4-muted);
}

.hier-side-title {
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   5. Forms (legacy .custom-form-control markup used across the app)
   -------------------------------------------------------------------------- */
.card .form-group > label,
.f4-label,
.cf-label,
.hier-label,
.cmp-label-text {
  font-weight: 600;
  font-size: 13px;
  color: var(--f4-ink);
  margin-bottom: 6px;
  display: block;
}

/* the legacy markup (label on top of the control) is given the same surface
   as the floating-label .f4-field used on the form pages, so filter bars and
   import screens match the forms without having their markup re-ordered. */
.form-control.custom-form-control,
select.custom-form-control,
textarea.custom-form-control {
  height: auto;
  min-height: 44px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 10px;
  background-color: #f8fbfd;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--f4-ink-strong);
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

textarea.custom-form-control {
  min-height: 92px;
  line-height: 1.5;
}

.form-control.custom-form-control::-webkit-input-placeholder { color: #a9b6c4; font-weight: 400; }
.form-control.custom-form-control::-moz-placeholder { color: #a9b6c4; font-weight: 400; }
.form-control.custom-form-control:-ms-input-placeholder { color: #a9b6c4; font-weight: 400; }
.form-control.custom-form-control::placeholder { color: #a9b6c4; font-weight: 400; }

.form-control.custom-form-control:focus,
select.custom-form-control:focus,
textarea.custom-form-control:focus {
  border-color: var(--f4-primary-2);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(1, 144, 203, .12);
}

.form-control.custom-form-control[readonly],
.form-control.custom-form-control:disabled,
select.custom-form-control:disabled,
textarea.custom-form-control[readonly] {
  background-color: #f1f3f7;
  color: var(--f4-muted);
  cursor: not-allowed;
}

/* selects get the same chevron the floating-label fields use */
select.custom-form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239db3c6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* multi-selects and size>1 selects must not get the chevron or fixed height */
select.custom-form-control[multiple],
select.custom-form-control[size]:not([size="1"]) {
  background-image: none;
  padding-right: 14px;
  height: auto;
}

/* file inputs styled to match: the browse button reads as a soft chip */
.form-control.custom-form-control[type="file"] {
  padding: 8px 12px;
  font-weight: 500;
  cursor: pointer;
}

.form-control.custom-form-control[type="file"]::-webkit-file-upload-button {
  border: 0;
  border-radius: 7px;
  margin-right: 12px;
  padding: 6px 14px;
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.form-control.custom-form-control[type="file"]:hover::-webkit-file-upload-button {
  background: #dfeaff;
}

/* bootstrap's own file widget, used on the import screens */
.custom-file .custom-file-label,
.custom-file .custom-file-input {
  height: 44px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 10px;
  background-color: #f8fbfd;
  font-size: 14px;
  font-weight: 500;
  color: var(--f4-ink-strong);
  padding: 10px 14px;
  cursor: pointer;
}

.custom-file .custom-file-label::after {
  height: calc(44px - 3px);
  border: 0;
  border-radius: 0 9px 9px 0;
  padding: 10px 16px;
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
  font-weight: 600;
}

.custom-file .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--f4-primary-2);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(1, 144, 203, .12);
}

/* inline inputs the app renders without .custom-form-control (search boxes,
   date pickers in filter bars) get the same treatment so nothing looks odd
   sitting next to a restyled control */
.card .form-group > .form-control:not(.custom-form-control):not(.f4-input),
.card .input-group > .form-control:not(.custom-form-control):not(.f4-input) {
  border: 1.5px solid var(--f4-line-2);
  border-radius: 10px;
  background-color: #f8fbfd;
  min-height: 44px;
  font-size: 14px;
  color: var(--f4-ink-strong);
}

.card .form-group > .form-control:not(.custom-form-control):not(.f4-input):focus,
.card .input-group > .form-control:not(.custom-form-control):not(.f4-input):focus {
  border-color: var(--f4-primary-2);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(1, 144, 203, .12);
}

/* an input joined to a prepend/append must keep its inner corners square,
   otherwise the new 10px radius breaks the group apart */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-text {
  border: 1.5px solid var(--f4-line-2);
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
  font-weight: 600;
  font-size: 13.5px;
}

.input-group > .input-group-prepend > .input-group-text {
  border-radius: 10px 0 0 10px;
  border-right: 0;
}

.input-group > .input-group-append > .input-group-text {
  border-radius: 0 10px 10px 0;
  border-left: 0;
}

/* pill style radio / checkbox groups */
.choice-group,
.biz-mode-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.choice-pill,
.biz-mode-option {
  position: relative;
}

.choice-pill input,
.biz-mode-option input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.choice-pill span,
.biz-mode-option span {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 24px;
  font-size: 14px;
  color: #495566;
  cursor: pointer;
  transition: .15s ease;
}

.choice-pill input:checked + span,
.biz-mode-option input:checked + span {
  border-color: var(--f4-primary);
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
  font-weight: 600;
}

/* file upload drop zone */
.file-drop,
.cf-file-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px dashed #d3d8e0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #fafbfc;
  position: relative;
  cursor: pointer;
  transition: .15s ease;
}

.file-drop:hover,
.cf-file-drop:hover {
  border-color: var(--f4-primary);
}

.file-drop > svg,
.cf-file-drop > svg {
  flex: 0 0 auto;
  color: var(--f4-muted);
}

.file-drop input[type="file"],
.cf-file-drop input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.file-drop-preview,
.cf-logo-preview {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--f4-radius-sm);
  background-color: #eef1f5;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--f4-muted);
  overflow: hidden;
}

.file-drop-text,
.cf-file-drop-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.file-drop-title,
.cf-file-drop-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--f4-ink);
}

.file-drop-sub,
.cf-file-drop-sub {
  font-size: 12px;
  color: var(--f4-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* form action bar */
.form-actions,
.cf-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--f4-line);
}

/* --------------------------------------------------------------------------
   6. Buttons (site wide)
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--f4-radius-sm);
}

.form-actions .btn,
.cf-actions .btn,
.hier-actions .btn,
.hier-add-box .btn,
.modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-actions .btn,
.cf-actions .btn {
  padding: 8px 20px;
}

/* --------------------------------------------------------------------------
   7. Tables (site wide list pages)
   -------------------------------------------------------------------------- */
.card .table {
  margin-bottom: 0;
}

.card .table thead th {
  border-top: none;
  border-bottom: 1px solid var(--f4-line);
  background: transparent;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--f4-muted);
  font-weight: 700;
  padding: 10px 14px;
  white-space: nowrap;
}

.card .table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 1px solid #f3f4f7;
  font-size: 13.8px;
  color: var(--f4-ink);
}

.card .table tbody tr:hover > td {
  background: #f8fafd;
}

.card .table tbody tr:last-child > td {
  border-bottom: none;
}
.badge-pill-soft.status-completed {
  background: var(--f4-success-soft);
  color: var(--f4-success);
}

.badge-pill-soft.status-pending {
  background: var(--f4-warning-soft);
  color: #b07d00;
}

.badge-pill-soft.status-cancelled {
  background: var(--f4-danger-soft);
  color: var(--f4-danger);
}

.badge-pill-soft.status-unknown {
  background: #f1f2f7;
  color: var(--f4-muted);
}
/* first-letter avatar used in list pages */
.company-cell,
.table-cell-with-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.action-v{
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  gap: 13px;
}

.company-avatar,
.table-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
}

.company-name,
.table-primary-text {
  font-weight: 600;
  color: var(--f4-ink-strong);
}

/* row action icons - works with the plain <i class="fa fa-edit"> markup
   already used in every list page, so no HTML change is needed */
.card .table td > a > .fa,
.card .table td > a > i.fa {
  width: 30px;
  height: 30px;
  border-radius: var(--f4-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f7;
  transition: .15s ease;
}

.card .table td > a > .fa-edit,
.card .table td > a > .fa-pencil,
.card .table td > a > .fa-pencil-square-o {
  background: var(--f4-warning-soft);
}

.card .table td > a > .fa-trash,
.card .table td > a > .fa-trash-o {
  background: var(--f4-danger-soft);
}

.card .table td > a > .fa-eye,
.card .table td > a > .fa-sitemap,
.card .table td > a > .fa-users,
.card .table td > a > .fa-download,
.card .table td > a > .fa-list {
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
}

.card .table td > a:hover > .fa-edit,
.card .table td > a:hover > .fa-pencil,
.card .table td > a:hover > .fa-pencil-square-o {
  background: #ffe9b0;
}

.card .table td > a:hover > .fa-trash,
.card .table td > a:hover > .fa-trash-o {
  background: #f8c9cd;
}

.card .table td > a:hover > .fa-eye,
.card .table td > a:hover > .fa-sitemap,
.card .table td > a:hover > .fa-users,
.card .table td > a:hover > .fa-download,
.card .table td > a:hover > .fa-list {
  background: #d6e6ff;
}

.row-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--f4-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: .15s ease;
}

.action-btn.edit {
  background: var(--f4-warning-soft);
  color: var(--f4-warning);
}

.action-btn.edit:hover {
  background: #ffe9b0;
  color: #b98500;
}

.action-btn.delete {
  background: var(--f4-danger-soft);
  color: var(--f4-danger);
}

.action-btn.delete:hover {
  background: #f8c9cd;
  color: #a71d2a;
}

.action-btn.send {
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
}

.action-btn.send:hover {
  background: #d6e6ff;
  color: #0a58ca;
}

/* .action-btn used on a <button> (eg. the invoice send-email submit) */
button.action-btn {
  border: none;
  padding: 0;
  cursor: pointer;
}

/* icons already wrapped in .action-btn keep their plain look */
.card .table td .action-btn > .fa {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

/* empty state */
.empty-state,
.cl-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--f4-muted);
}

.empty-state svg,
.cl-empty svg {
  color: #c8cede;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   8. Soft badges (status / type pills)
   -------------------------------------------------------------------------- */
.badge-pill-soft {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
}

.badge-pill-soft.status-active,
.badge-pill-soft.mode-distributor {
  background: var(--f4-success-soft);
  color: var(--f4-success);
}

.badge-pill-soft.status-inactive,
.badge-pill-soft.mode-default {
  background: #f1f2f7;
  color: var(--f4-muted);
}

.badge-pill-soft.mode-marketing {
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
}

.badge-pill-soft.mode-trading {
  background: #fdeee5;
  color: #fd7e14;
}

/* --------------------------------------------------------------------------
   9. Panels used for side content / trees / comparison tables
   -------------------------------------------------------------------------- */
.f4-panel,
.hier-panel,
.cmp-table-wrap {
  border: 1px solid var(--f4-line);
  border-radius: 14px;
  overflow: hidden;
}

.hier-panel {
  height: 100%;
}

.f4-panel-head,
.hier-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--f4-surface);
  border-bottom: 1px solid var(--f4-line);
}

.f4-panel-body,
.hier-panel-body {
  padding: 10px 8px;
}

.f4-hint,
.hier-hint {
  font-size: 12px;
  color: var(--f4-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.f4-soft-box,
.hier-add-box {
  border: 1px solid var(--f4-line);
  border-radius: 14px;
  padding: 18px;
  background: var(--f4-surface);
}

.hier-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--f4-line-2);
}

/* bootstrap-treeview */
#treeview {
  min-height: 220px;
}

#treeview .fa {
  font-size: 12px !important;
}

#treeview .list-group-item {
  border: none;
  border-radius: var(--f4-radius-sm);
  padding: 8px 12px;
  font-size: 13.8px;
  color: var(--f4-ink);
  margin-bottom: 2px;
}

#treeview .list-group-item .icon {
  color: var(--f4-muted);
}

#treeview .node-treeview.node-selected,
#treeview .list-group-item.node-selected .icon {
  color: #ffffff !important;
}

/* overrides the older `.node-treeview.node-selected { background: blue }`
   rule earlier in this file so the tree matches the theme colour */
#treeview .node-treeview.node-selected {
  background: var(--f4-primary) !important;
  border-color: var(--f4-primary) !important;
}

/* comparison matrix (products) */
.cmp-table thead th {
  border: none;
  border-bottom: 1px solid var(--f4-line);
  background: var(--f4-surface);
  padding: 14px 16px;
}

.cmp-table thead th.cmp-col-mine {
  color: var(--f4-primary);
  background: #f2f7ff;
}

.cmp-table tbody td {
  border: none;
  border-bottom: 1px solid #f3f4f7;
  padding: 12px 16px;
}

.cmp-table td.cmp-label {
  text-align: left;
  background: var(--f4-surface);
  color: #6c757d;
  font-size: 12.5px;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  width: 190px;
}

.cmp-table td.cmp-val-mine {
  background: #f7fbff;
  font-weight: 600;
  color: var(--f4-ink-strong);
}

.cmp-table tbody tr.valueTr:hover > td.cmp-val-mine {
  background: var(--f4-primary-soft);
}

.cmp-table .cmp-select-row > td {
  background: #ffffff;
  padding: 16px;
}

.cmp-table img {
  border-radius: 10px;
  border: 1px solid var(--f4-line);
  background: #ffffff;
  padding: 4px;
}

.cmp-empty {
  color: #c8cede;
}

/* --------------------------------------------------------------------------
   10. Modals (site wide)
   -------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(17, 24, 39, .18);
}

.modal-header {
  border-bottom: none;
  align-items: center;
  background: var(--f4-surface);
}

.modal-header .modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
}

.modal-body {
  padding: 20px;
}

.modal-body h6 {
  color: var(--f4-ink);
  font-weight: 500;
  font-size: 14px;
}

.modal-footer {
  border-top: none;
  padding: 14px 20px 20px;
}

/* action coloured modal headers - opt in per modal with a modifier class
   (.modal-danger / .modal-success / .modal-info) because the modal id
   numbering is not consistent across modules */
.modal.modal-danger .modal-header {
  background: var(--f4-danger-soft);
}

.modal.modal-danger .modal-header .modal-title {
  color: var(--f4-danger);
}

.modal.modal-success .modal-header {
  background: var(--f4-success-soft);
}

.modal.modal-success .modal-header .modal-title {
  color: var(--f4-success);
}

.modal.modal-info .modal-header {
  background: var(--f4-primary-soft);
}

.modal.modal-info .modal-header .modal-title {
  color: var(--f4-primary);
}

.modal.modal-info .modal-body h4 {
  font-size: 15px;
  color: var(--f4-ink);
  margin: 0;
}

/* password field with the inline eye toggle used by the delete modals */
.modal .form-group > .input-group {
  border: 1.5px solid var(--f4-line-2);
  border-radius: var(--f4-radius-sm);
  overflow: hidden;
  align-items: center;
}

.modal .input-group > #deletePassword {
  border: none;
  padding: 8px 12px;
  outline: none;
  box-shadow: none;
}

.modal .input-group > #togglePassword {
  padding: 8px 12px;
  color: var(--f4-muted);
}

/* alias: list-page table class used by company_view */
.company-table {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Auto page banner (module pages)
   --------------------------------------------------------------------------
   .page-banner is INSERTED at the top of an existing .card.card-body and
   cancels that card's padding with negative margins, so no page markup had
   to be re-wrapped when rolling the design out across the app.
   -------------------------------------------------------------------------- */
.page-card-inset {
  overflow: hidden;
}

.page-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: -24px -26px 24px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--f4-primary) 0%, var(--f4-primary-2) 100%);
  border-radius: var(--f4-radius) var(--f4-radius) 0 0;
  position: relative;
  overflow: hidden;
}

.page-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .35), transparent 55%);
  pointer-events: none;
}

/* used on pages built with the older template, where the banner is not
   inside a padded card and therefore needs its own box */
.page-banner.standalone {
  margin: 0 0 18px;
  border-radius: var(--f4-radius);
  box-shadow: var(--f4-shadow);
}

.page-banner h5 {
  margin: 0;
  font-weight: 700;
  color: #ffffff;
}

.page-banner p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
}

.page-banner .btn {
  position: relative;
  z-index: 1;
  border-radius: var(--f4-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #ffffff;
  transition: .15s ease;
}

.page-banner .btn:hover {
  background: rgba(255, 255, 255, .28);
  color: #ffffff;
}

/* the toolbar row that sits directly under a banner (Add New / Export /
   filter buttons that pages already had) gets breathing room */
.page-banner + .row {
  margin-bottom: 4px;
}

@media (max-width: 767px) {
  .page-banner {
    padding: 20px;
  }
}

@media print {
  .page-banner {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. Floating-label form fields
   --------------------------------------------------------------------------
   The same input design used on the sign-in / forgot-password screens, made
   reusable for module pages. Markup (order matters - the label MUST come
   straight after the control so the :placeholder-shown rules can reach it):

     <div class="f4-field">
       <input class="f4-input" placeholder=" ">
       <label>Name</label>
       <i class="fa fa-user f4-ico"></i>
     </div>

   Modifiers:  .is-select  keeps the label raised (a select always shows a value)
               .is-area    textarea sizing, icon pinned near the top
               .no-icon    drops the left icon gutter
   -------------------------------------------------------------------------- */
.f4-field {
  position: relative;
}

.f4-field .f4-input {
  width: 100%;
  height: 56px;
  padding: 21px 14px 7px 44px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 12px;
  background: #f8fbfd;
  font-size: 14px;
  font-weight: 500;
  color: var(--f4-ink-strong);
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.f4-field .f4-input:focus {
  border-color: var(--f4-primary-2);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(1, 144, 203, .12);
}

.f4-field .f4-input::-webkit-input-placeholder { color: transparent; }
.f4-field .f4-input::-moz-placeholder { color: transparent; }
.f4-field .f4-input:-ms-input-placeholder { color: transparent; }
.f4-field .f4-input::placeholder { color: transparent; }

.f4-field > label {
  position: absolute;
  left: 44px;
  top: 18px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--f4-muted);
  pointer-events: none;
  transition: all .18s ease;
}

.f4-field .f4-input:focus + label,
.f4-field .f4-input:not(:placeholder-shown) + label,
.f4-field.is-select > label {
  top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--f4-primary-2);
}

/* the required asterisk keeps its colour while the label floats */
.f4-field > label i {
  font-style: normal;
}

.f4-field .f4-ico {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #9db3c6;
  font-size: 14px;
  pointer-events: none;
  transition: color .2s ease;
}

.f4-field .f4-input:focus ~ .f4-ico {
  color: var(--f4-primary-2);
}

/* --- select ------------------------------------------------------------- */
.f4-field select.f4-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239db3c6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* --- textarea ----------------------------------------------------------- */
.f4-field textarea.f4-input {
  height: auto;
  min-height: 104px;
  padding-top: 26px;
  line-height: 1.5;
  resize: vertical;
}

.f4-field.is-area .f4-ico {
  top: 26px;
  transform: none;
}

/* --- no left icon ------------------------------------------------------- */
.f4-field.no-icon .f4-input { padding-left: 14px; }
.f4-field.no-icon > label { left: 14px; }

/* --- states ------------------------------------------------------------- */
.f4-field .f4-input[readonly],
.f4-field .f4-input:disabled {
  background: #f1f3f7;
  color: var(--f4-muted);
  cursor: not-allowed;
}

.f4-error {
  display: block;
  margin: 6px 2px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--f4-danger);
}

/* a small link under a field - "view current file", "download template" */
.f4-hint-link {
  display: inline-block;
  margin: 6px 2px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--f4-primary-2);
}

.f4-hint-link:hover {
  color: var(--f4-primary);
  text-decoration: underline;
}

/* keeps the grid gutters even when fields sit in .form-group columns */
.f4-field-row > [class*="col-"] {
  margin-bottom: 18px;
}

.f4-field-row > [class*="col-"]:last-child {
  margin-bottom: 18px;
}

/* --- file upload styled as a field ------------------------------------- */
.f4-field.is-file .cf-file-drop {
  height: 56px;
  padding: 22px 14px 6px 44px;
  border-radius: 12px;
  border: 1.5px dashed var(--f4-line-2);
  background: #f8fbfd;
  gap: 8px;
  transition: border-color .2s ease, background .2s ease;
}

.f4-field.is-file:hover .cf-file-drop {
  border-color: var(--f4-primary-2);
  background: #ffffff;
}

.f4-field.is-file .cf-logo-preview {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.f4-field.is-file > label {
  position: absolute;
  left: 44px;
  top: 8px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--f4-primary-2);
  pointer-events: none;
}

.f4-field.is-file .cf-file-drop-sub {
  font-size: 12.5px;
  color: var(--f4-ink);
}

/* --- a plain box that matches a field -----------------------------------
   for widgets that cannot be an <input>: the hierarchy tree, the multi-select
   dropdowns on the client forms, map pickers. Pair it with a .f4-label above. */
.f4-box {
  border: 1.5px solid var(--f4-line-2);
  border-radius: 12px;
  background: #f8fbfd;
  padding: 10px 12px;
}

.f4-box.is-scroll {
  max-height: 320px;
  overflow: auto;
}

/* --- spacing: absorb the trailing column gutter of the last field row --- */
.cf-section > .f4-field-row:last-child,
.form-section > .f4-field-row:last-child {
  margin-bottom: -18px;
}

/* --------------------------------------------------------------------------
   13. Form action buttons - brand styling
   -------------------------------------------------------------------------- */
.cf-actions .btn-primary,
.form-actions .btn-primary {
  border: 0;
  background: linear-gradient(120deg, var(--f4-primary) 0%, #02507f 50%, var(--f4-primary-2) 100%);
  background-size: 200% auto;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(1, 36, 59, .65);
  transition: background-position .5s ease, transform .18s ease, box-shadow .25s ease;
}

.cf-actions .btn-primary:hover,
.form-actions .btn-primary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(1, 144, 203, .7);
  color: #ffffff;
}

.cf-actions .btn-danger,
.form-actions .btn-danger {
  background: #ffffff;
  border: 1.5px solid var(--f4-line-2);
  color: var(--f4-muted);
  font-weight: 600;
  box-shadow: none;
}

.cf-actions .btn-danger:hover,
.form-actions .btn-danger:hover {
  background: #f8fbfd;
  border-color: #cbd9e5;
  color: var(--f4-primary);
}

/* --------------------------------------------------------------------------
   14. Sidebar
   --------------------------------------------------------------------------
   Overrides the Hope UI sidebar. Loaded after hope-ui.css, so the selectors
   here only need to match the theme's specificity, not beat it with !important.

   Structure the design leans on:
     .sidebar-header      brand + collapse toggle
     .nav-item.static-item    group heading ("Home")
     .navbar-nav > .nav-item > .nav-link   a top level row
     .sub-nav .nav-link   a child row
   -------------------------------------------------------------------------- */
.sidebar.sidebar-default {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 55%, #f5f9fd 100%);
  border-right: 1px solid #e8eef5;
  box-shadow: 0 0 40px rgba(1, 36, 59, .05);
}

/* --- brand header ------------------------------------------------------- */
.sidebar .sidebar-header {
  border-bottom: 1px solid #e8eef5;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, rgba(1, 144, 203, .07) 0%, rgba(1, 36, 59, .04) 100%);
}

.sidebar .navbar-brand {
  padding: 1.05rem 1rem;
}

/* the collapse arrow reads as a soft round chip */
.sidebar .sidebar-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e1eaf3;
  color: var(--f4-primary-2);
  box-shadow: 0 2px 6px rgba(1, 36, 59, .07);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar .sidebar-toggle:hover {
  background: var(--f4-primary-2);
  border-color: var(--f4-primary-2);
  color: #ffffff;
  transform: scale(1.06);
}

.sidebar .sidebar-toggle .icon svg {
  width: 16px;
  height: 16px;
}

/* --- group heading ------------------------------------------------------ */
.sidebar-base .nav-item.static-item .nav-link.static-item {
  padding: 0.25rem 0.55rem 0.15rem;
  margin: 0.15rem 0.85rem 0.15rem;
  background: none;
  box-shadow: none;
}

.sidebar-base .nav-item.static-item .default-icon {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a7b4c4;
}

/* --- top level rows ----------------------------------------------------- */
.sidebar-base .nav-item {
  margin-top: 0;
}

.sidebar.navs-pill .sidebar-body .nav-item .nav-link,
.sidebar-base .nav-item .nav-link {
  border-radius: 12px !important;
  margin: 1px 0.85rem;
  padding: 0.5rem 0.7rem;
  font-size: 13.8px;
  font-weight: 500;
  color: #64748b;
  position: relative;
  overflow: hidden;
}

.sidebar .sidebar-body .navbar-nav > .nav-item > .nav-link:not(.static-item) {
  font-weight: 600;
}

/* the leading icon sits in its own tinted chip */
.sidebar-base .navbar-nav > .nav-item > .nav-link > .icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: #e6f1fa;
  color: var(--f4-primary-2);
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}

.sidebar-base .navbar-nav > .nav-item > .nav-link > .icon svg {
  width: 17px;
  height: 17px;
}

.sidebar-base .nav-item .nav-link .item-name {
  margin-left: 0.7rem;
}

/* hover: brand tint and a small nudge to the right */
.sidebar.sidebar-default .nav-link:not(.static-item):hover:not(.active):not([aria-expanded=true]) {
  background: #eef6fc;
  color: var(--f4-primary);
  transform: translateX(2px);
}

.sidebar.sidebar-default .navbar-nav > .nav-item > .nav-link:hover:not(.active):not([aria-expanded=true]) > .icon {
  background: #dcebf7;
  color: var(--f4-primary);
}

/* active / open: the brand gradient, matching the page banners */
.sidebar.sidebar-default .nav-link:not(.static-item).active,
.sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded=true] {
  background: linear-gradient(120deg, var(--f4-primary) 0%, #02507f 55%, var(--f4-primary-2) 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(1, 36, 59, .55);
}

.sidebar.sidebar-default .navbar-nav > .nav-item > .nav-link.active > .icon,
.sidebar.sidebar-default .navbar-nav > .nav-item > .nav-link[aria-expanded=true] > .icon {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}

/* a soft glow behind the active row, so it lifts off the panel */
.sidebar.sidebar-default .navbar-nav > .nav-item > .nav-link.active::after,
.sidebar.sidebar-default .navbar-nav > .nav-item > .nav-link[aria-expanded=true]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 88% -30%, rgba(255, 255, 255, .28), transparent 60%);
  pointer-events: none;
}

/* the expand chevron is quieter than the label */
.sidebar-base .nav-item .nav-link:not(.disabled) .right-icon svg {
  width: 15px;
  height: 15px;
  opacity: .55;
}

.sidebar-base .nav-item .nav-link:not(.disabled)[aria-expanded=true] .right-icon svg {
  opacity: .9;
}

/* --- submenu ------------------------------------------------------------ */
/* the theme clips .sub-nav with overflow:hidden for its collapse animation,
   so the rail is drawn inside the padding box rather than as a left border -
   otherwise the nodes sitting on it get cut in half. */
.sidebar .sidebar-body .sub-nav {
  position: relative;
  margin: 0.35rem 0 0.6rem 2.2rem;
  padding-left: 1.4rem;
  border-left: 0;
}

.sidebar .sidebar-body .sub-nav::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 2px;
  border-radius: 2px;
  background: #dbe6f1;
}

.sidebar .sidebar-body .sub-nav .nav-item .nav-link {
  position: relative;
  /* the top level rows clip their gradient with overflow:hidden; a child row
     must not, or its node - which sits outside the row - gets clipped away */
  overflow: visible;
  padding: 0.36rem 0.7rem;
  margin: 1px 0.6rem 1px 0;
  font-size: 13px;
  font-weight: 500;
  color: #75849a;
  border-radius: 9px !important;
}

.sidebar .sidebar-body .sub-nav .nav-item .nav-link .item-name {
  margin-left: 0;
}

/* child bullet: a node sitting on the guide line, filled when active */
.sidebar .sidebar-body .sub-nav .nav-item .nav-link .icon {
  position: absolute;
  left: -1.11rem;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #b9c9da;
  transition: background .18s ease, border-color .18s ease, width .18s ease, height .18s ease;
}

.sidebar .sidebar-body .sub-nav .nav-item .nav-link .icon svg {
  display: none;
}

.sidebar.sidebar-default .sub-nav .nav-item .nav-link:hover:not(.active) {
  background: #f1f7fc;
  color: var(--f4-primary);
  transform: none;
}

.sidebar .sidebar-body .sub-nav .nav-item .nav-link:hover .icon {
  border-color: var(--f4-primary-2);
  background: var(--f4-primary-2);
}

/* an active child stays flat and tinted, so the parent row keeps the emphasis */
.sidebar.sidebar-default .sub-nav .nav-item .nav-link.active {
  background: var(--f4-primary-soft);
  color: var(--f4-primary);
  font-weight: 700;
  box-shadow: none;
}

.sidebar .sidebar-body .sub-nav .nav-item .nav-link.active .icon {
  border-color: var(--f4-primary);
  background: var(--f4-primary);
  width: 9px;
  height: 9px;
  left: -1.17rem;
  box-shadow: 0 0 0 3px rgba(1, 144, 203, .16);
}

.sidebar.sidebar-default .sub-nav .nav-item .nav-link.active::before {
  display: none;
}

/* --- scrollbar ---------------------------------------------------------- */
.sidebar .sidebar-body {
  scrollbar-width: thin;
  scrollbar-color: #cfdcea transparent;
}

.sidebar .sidebar-body::-webkit-scrollbar {
  width: 5px;
}

.sidebar .sidebar-body::-webkit-scrollbar-thumb {
  background: #cfdcea;
  border-radius: 4px;
}

.sidebar .sidebar-body::-webkit-scrollbar-thumb:hover {
  background: #adc2d6;
}

.sidebar .sidebar-body::-webkit-scrollbar-track {
  background: transparent;
}

/* --- collapsed (mini) sidebar ------------------------------------------- */
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .sidebar-body .sub-nav {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.sidebar.sidebar-mini:not(.sidebar-hover:hover) .sidebar-body .sub-nav::before {
  display: none;
}

.sidebar.sidebar-mini:not(.sidebar-hover:hover) .sidebar-body .sub-nav .nav-item .nav-link {
  font-size: inherit;
  justify-content: center;
}

.sidebar.sidebar-mini:not(.sidebar-hover:hover) .sidebar-body .nav-item .nav-link {
  justify-content: center;
  margin-left: 0.55rem;
  margin-right: 0.55rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

/* the theme only scales the label to zero, so it still claims flex width and
   pushes the icon chip off the rail - take it out of the layout instead */
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item) .item-name,
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .nav-item .nav-link .right-icon {
  display: none;
}

.sidebar.sidebar-mini:not(.sidebar-hover:hover) .nav-item.static-item .default-icon {
  display: none;
}

/* the body reserves a 1rem right gutter for the scrollbar; on the narrow rail
   that gutter throws the icon chips off centre */
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .sidebar-body {
  padding-right: 0;
}

/* the group heading collapses to a bare "-" placeholder - drop it */
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link.static-item .mini-icon {
  display: none;
}

/* on the rail the theme swaps child labels for two letter initials, so the
   node is left hidden (as the theme has it) rather than doubled up */
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .nav-item .sub-nav .nav-link .item-name {
  display: none;
}

/* --- dark theme --------------------------------------------------------- */
.dark .sidebar.sidebar-default {
  background: linear-gradient(180deg, #222738 0%, #1f2433 100%);
  border-right-color: rgba(255, 255, 255, .06);
}

.dark .sidebar .sidebar-header {
  background: rgba(255, 255, 255, .03);
  border-bottom-color: rgba(255, 255, 255, .07);
}

.dark .sidebar .sidebar-toggle {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #cfe6f5;
}

.dark .sidebar-base .navbar-nav > .nav-item > .nav-link > .icon {
  background: rgba(255, 255, 255, .07);
  color: #9ed3ee;
}

.dark .sidebar .sidebar-body .sub-nav {
  border-left-color: rgba(255, 255, 255, .1);
}

.dark .sidebar.sidebar-default .nav-link:not(.static-item):hover:not(.active):not([aria-expanded=true]) {
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
}

.dark .sidebar.sidebar-default .sub-nav .nav-item .nav-link.active {
  background: rgba(1, 144, 203, .2);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   15. Company hierarchy tree (company_hierarchy.php)
   -------------------------------------------------------------------------- */
.ht-panel,
.ht-side {
  border: 1px solid var(--f4-line-2);
  border-radius: 14px;
  background: #ffffff;
}

.ht-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ht-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: var(--f4-surface);
  border-bottom: 1px solid var(--f4-line);
}

.ht-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--f4-ink-strong);
}

.ht-total {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--f4-primary-soft);
  color: var(--f4-primary-2);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.ht-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ht-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ht-search svg {
  position: absolute;
  left: 11px;
  color: var(--f4-muted);
  pointer-events: none;
}

.ht-search input {
  width: 210px;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 8px;
  font-size: 13px;
  background: #ffffff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ht-search input:focus {
  border-color: var(--f4-primary-2);
  box-shadow: 0 0 0 3px rgba(1, 144, 203, .12);
}

.ht-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 8px;
  background: #ffffff;
  color: var(--f4-ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s ease;
}

.ht-tool-btn:hover {
  border-color: var(--f4-primary-2);
  color: var(--f4-primary-2);
}

.ht-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--f4-line);
  font-size: 11.5px;
  color: var(--f4-muted);
}

.ht-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* level colours: the icon tile, legend dot and meta chip all share these */
.ht-lvl-1 { --ht-c: #01243B; --ht-bg: #e6edf2; }
.ht-lvl-2 { --ht-c: #0190CB; --ht-bg: #e3f4fb; }
.ht-lvl-3 { --ht-c: #17a673; --ht-bg: #e5f7ef; }
.ht-lvl-4 { --ht-c: #e08a00; --ht-bg: #fff3df; }
.ht-lvl-5 { --ht-c: #8b5cf6; --ht-bg: #f1ebfe; }

.ht-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ht-c);
}

.ht-panel-body {
  flex: 1;
  padding: 10px 10px 14px;
  min-height: 360px;
  max-height: 620px;
  overflow: auto;
}

/* tree */
.ht-tree .ht-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ht-tree .ht-list .ht-list {
  margin-left: 21px;
  padding-left: 12px;
  border-left: 1.5px dashed var(--f4-line-2);
}

.ht-node:not(.is-open) > .ht-list {
  display: none;
}

.ht-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 8px 4px 4px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease;
}

/* short connector from the guide line to the row */
.ht-list .ht-list > .ht-node > .ht-row::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 10px;
  border-top: 1.5px dashed var(--f4-line-2);
}

.ht-row:hover {
  background: #f4f8fc;
}

.ht-row.is-selected {
  background: var(--f4-primary-soft);
  border-color: rgba(1, 144, 203, .35);
}

.ht-row.is-selected .ht-name {
  color: var(--f4-primary);
  font-weight: 700;
}

.ht-toggle,
.ht-toggle-space {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.ht-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--f4-muted);
  cursor: pointer;
}

.ht-toggle:hover {
  background: rgba(1, 36, 59, .07);
  color: var(--f4-ink-strong);
}

.ht-toggle svg {
  transition: transform .15s ease;
}

.ht-node.is-open > .ht-row .ht-toggle svg {
  transform: rotate(90deg);
}

.ht-ico {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ht-bg);
  color: var(--ht-c);
}

.ht-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--f4-ink);
}

.ht-name mark {
  padding: 0 1px;
  border-radius: 3px;
  background: #fff1b8;
  color: inherit;
}

.ht-count {
  padding: 1px 8px;
  border-radius: 20px;
  background: #f0f2f5;
  color: var(--f4-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.ht-tools {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s ease;
}

.ht-row:hover .ht-tools,
.ht-row.is-selected .ht-tools {
  opacity: 1;
}

.ht-tool {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--f4-muted);
  cursor: pointer;
}

.ht-tool:hover {
  background: #ffffff;
  color: var(--f4-primary-2);
  box-shadow: 0 1px 4px rgba(17, 24, 39, .12);
}

.ht-tool-danger:hover {
  color: var(--f4-danger);
}

/* touch screens have no hover, keep the row tools visible */
@media (hover: none) {
  .ht-tools { opacity: 1; }
}

.ht-empty,
.ht-side-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--f4-muted);
}

.ht-empty-icon,
.ht-side-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--f4-primary-soft);
  color: var(--f4-primary-2);
}

.ht-empty-icon svg {
  width: 24px;
}

.ht-empty h6,
.ht-side-empty h6 {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--f4-ink-strong);
}

.ht-empty p,
.ht-side-empty p {
  margin: 0;
  font-size: 13px;
}

.ht-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--f4-muted);
  font-size: 13.5px;
}

/* selected node side panel */
.ht-side {
  padding: 20px;
  position: sticky;
  top: 90px;
}

.ht-side-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--f4-muted);
  margin-bottom: 10px;
}

.ht-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--f4-muted);
}

.ht-path i {
  font-style: normal;
  opacity: .6;
}

.ht-selected-name {
  margin: 4px 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--f4-ink-strong);
  word-break: break-word;
}

.ht-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ht-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f0f2f5;
  color: var(--f4-ink);
  font-size: 12px;
  font-weight: 600;
}

.ht-side-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--f4-line-2);
}

.ht-add-row {
  display: flex;
  gap: 8px;
}

.ht-add-row .form-control {
  flex: 1;
  min-width: 0;
}

.ht-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 0 16px;
  white-space: nowrap;
}

.ht-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--f4-muted);
}

.ht-side-actions {
  display: flex;
  gap: 8px;
}

.ht-side-actions .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border-radius: 10px;
  font-weight: 600;
}

.ht-btn-outline {
  border: 1.5px solid var(--f4-line-2);
  background: #ffffff;
  color: var(--f4-ink);
}

.ht-btn-outline:hover:not(:disabled) {
  border-color: var(--f4-primary-2);
  color: var(--f4-primary-2);
}

.ht-btn-danger {
  border: 1.5px solid #f5c2c7;
  background: var(--f4-danger-soft);
  color: var(--f4-danger);
}

.ht-btn-danger:hover:not(:disabled) {
  background: var(--f4-danger);
  border-color: var(--f4-danger);
  color: #ffffff;
}

.ht-side-actions .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ht-password {
  position: relative;
}

.ht-password .form-control {
  padding-right: 40px;
}

.ht-password .fa {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f4-muted);
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .ht-toolbar,
  .ht-search,
  .ht-search input {
    width: 100%;
  }

  .ht-tool-btn span {
    display: none;
  }

  .ht-tree .ht-list .ht-list {
    margin-left: 12px;
    padding-left: 8px;
  }
}

/* --------------------------------------------------------------------------
   16. Roles & Permissions (roles/role_view.php, roles/role_form.php)
   -------------------------------------------------------------------------- */
.rp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.rp-search {
  position: relative;
  width: 280px;
  max-width: 100%;
}

.rp-search .fa {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f4-muted);
  font-size: 13px;
}

.rp-search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 36px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 10px;
  background: #f8fbfd;
  font-size: 13.5px;
  color: var(--f4-ink-strong);
  outline: none;
  transition: .15s ease;
}

.rp-search input:focus {
  border-color: var(--f4-primary-2);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(1, 144, 203, .12);
}

.rp-legend {
  font-size: 12.5px;
  color: var(--f4-muted);
}

.rp-legend .badge-pill-soft {
  margin-right: 6px;
}

.badge-pill-soft.rp-type-system {
  background: #f1ecfd;
  color: #6f42c1;
}

.rp-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rp-copy {
  width: auto;
  min-width: 200px;
  height: 36px;
  border-radius: var(--f4-radius-sm);
  font-size: 13px;
}

.rp-tool.btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid var(--f4-line-2);
  color: var(--f4-ink);
}

.rp-tool.btn:hover {
  background: var(--f4-primary-soft);
  border-color: #cfe0f7;
  color: var(--f4-primary);
}

.rp-counter {
  font-size: 12.5px;
  color: var(--f4-muted);
  background: var(--f4-surface);
  border: 1px solid var(--f4-line);
  border-radius: 20px;
  padding: 6px 12px;
  white-space: nowrap;
}

.rp-counter b {
  color: var(--f4-primary);
}

/* role list */
.rp-role-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rp-role-name small {
  color: var(--f4-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.rp-count {
  display: inline-flex;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--f4-surface);
  border: 1px solid var(--f4-line);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--f4-ink-strong);
}

.rp-access {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-meter {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--f4-line);
  overflow: hidden;
}

.rp-meter span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

.rp-meter-high { background: var(--f4-success); }
.rp-meter-mid  { background: var(--f4-primary-2); }
.rp-meter-low  { background: var(--f4-warning); }
.rp-meter-none { background: transparent; }

.rp-access-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--f4-muted);
  white-space: nowrap;
}

/* role form */
.rp-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 12px;
}

.rp-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--f4-muted);
}

.rp-status {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  border: 1.5px solid var(--f4-line-2);
  border-radius: 12px;
  background: #f8fbfd;
  cursor: pointer;
  margin: 0;
  width: 100%;
}

.rp-status b {
  display: block;
  font-size: 14px;
  color: var(--f4-ink-strong);
}

.rp-status small {
  display: block;
  font-size: 11.5px;
  color: var(--f4-muted);
}

.rp-status .form-check-input,
.rp-matrix .form-switch .form-check-input {
  cursor: pointer;
}

/* permission matrix */
.rp-matrix-wrap {
  border: 1px solid var(--f4-line);
  border-radius: 12px;
  max-height: 620px;
  overflow: auto;
}

.card .table.rp-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  box-shadow: inset 0 -1px 0 var(--f4-line);
  padding: 12px 14px;
}

.rp-matrix th:first-child,
.rp-matrix td:first-child {
  width: 34%;
  min-width: 200px;
}

.rp-col-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.card .table.rp-matrix tbody tr.rp-group > td {
  background: var(--f4-surface);
  border-top: 1px solid var(--f4-line);
  border-bottom: 1px solid var(--f4-line);
  padding: 9px 14px;
}

.card .table.rp-matrix tbody tr.rp-group:first-child > td {
  border-top: none;
}

.rp-group-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--f4-ink-strong);
  cursor: pointer;
}

.rp-group-label small {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--f4-muted);
}

.rp-module-name {
  padding-left: 30px;
  font-weight: 600;
  color: var(--f4-ink-strong);
}

.rp-na {
  color: #c8cede;
}

/* custom checkbox: <label class="rp-check rp-create"><input type="checkbox"><span></span></label> */
.rp-check {
  --rp-c: var(--f4-primary);
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}

.rp-check.rp-create { --rp-c: var(--f4-success); }
.rp-check.rp-read   { --rp-c: var(--f4-primary-2); }
.rp-check.rp-update { --rp-c: #e0a800; }
.rp-check.rp-delete { --rp-c: var(--f4-danger); }

.rp-check input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.rp-check > span {
  width: 20px;
  height: 20px;
  border: 1.5px solid #cfd5df;
  border-radius: 6px;
  background: #ffffff;
  transition: .15s ease;
  position: relative;
}

.rp-check:hover > span {
  border-color: var(--rp-c);
}

.rp-check input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(1, 144, 203, .2);
}

.rp-check input:checked + span,
.rp-check input:indeterminate + span {
  background: var(--rp-c);
  border-color: var(--rp-c);
}

.rp-check input:checked + span::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rp-check input:indeterminate + span::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 8px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
}

.rp-check input:disabled + span {
  opacity: .4;
  cursor: not-allowed;
}

@media (max-width: 767.98px) {
  .rp-search,
  .rp-copy {
    width: 100%;
  }

  .rp-toolbar-actions {
    width: 100%;
  }

  .rp-module-name {
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   17. Permission driven controls
   --------------------------------------------------------------------------
   <body> carries perm-no-create / perm-no-update / perm-no-delete for the
   module of the page being shown (permission_body_classes() in role_helper).
   The server refuses those actions anyway (hooks/Permission_guard.php) - this
   only stops the page from offering them. Scoped to .content-inner so the
   sidebar is never touched.
   -------------------------------------------------------------------------- */
.perm-no-create .content-inner a[href$="/add"],
.perm-no-create .content-inner a[href$="/add/"],
.perm-no-create .content-inner a[href$="_form"],
.perm-no-create .content-inner a[href$="_form/"],
.perm-no-create .content-inner a[href$="/form"],
.perm-no-create .content-inner a[href$="/form/"],
.perm-no-create .content-inner a[href*="/import"],
.perm-no-create .content-inner .perm-create {
  display: none !important;
}

.perm-no-update .content-inner .fa-pencil,
.perm-no-update .content-inner .fa-edit,
.perm-no-update .content-inner a:has(> .fa-pencil),
.perm-no-update .content-inner a:has(> .fa-edit),
.perm-no-update .content-inner button:has(> .fa-pencil),
.perm-no-update .content-inner button:has(> .fa-edit),
.perm-no-update .content-inner .action-btn.edit,
.perm-no-update .content-inner .perm-update {
  display: none !important;
}

.perm-no-delete .content-inner .fa-trash,
.perm-no-delete .content-inner a:has(> .fa-trash),
.perm-no-delete .content-inner button:has(> .fa-trash),
.perm-no-delete .content-inner .action-btn.delete,
.perm-no-delete .content-inner .perm-delete {
  display: none !important;
}

/* access denied page (views/errors/access_denied.php) */
.rp-denied {
  text-align: center;
  padding: 70px 20px;
}

.rp-denied-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: var(--f4-danger-soft);
  color: var(--f4-danger);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-denied h4 {
  font-weight: 700;
  color: var(--f4-ink-strong);
  margin-bottom: 6px;
}

.rp-denied p {
  color: var(--f4-muted);
  margin-bottom: 22px;
}

.rp-denied .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#table_visit_planner_report_wrapper select{
  width: 70px !important;
}
.cp-wrap{position:relative;}
select.cp-native{position:absolute !important;left:0;top:0;width:100% !important;height:100% !important;opacity:0;pointer-events:none;}
.cp-btn{display:flex !important;align-items:center;gap:8px;width:100%;text-align:left;font-weight:700 !important;cursor:pointer;padding-right:38px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239db3c6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;}
.cp-btn .cp-logo{flex-basis:22px;width:22px;height:22px;font-size:10px;}
.cp-btn > span:not(.cp-logo):not(.cp-stack):not(.cp-more){min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cp-unclipped{overflow:visible !important;}
.cp-list{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1060;max-height:300px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #e1e5eb;border-radius:12px;box-shadow:0 12px 28px rgba(16,42,67,.14);}
.cp-list.open{display:block;}
.cp-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;font-weight:700;color:#23294b;cursor:pointer;}
.cp-list li:hover{background:#f1f6fa;}
.cp-list li.selected{background:#e8f4fa;color:#0190CB;}
.cp-list li.cp-sub{padding:6px 10px 6px 48px;font-weight:500;color:#4a5866;}
.cp-list li.cp-sub.selected{color:#0190CB;}
.cp-logo{flex:0 0 28px;width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;background:#0190CB;}
img.cp-logo{object-fit:contain;background:#fff;border:1px solid #e1e5eb;}

.cp-cell{display:inline-flex;align-items:center;gap:10px;font-weight:600;}
/* multiple picks: the first faces stacked, the first name and "+n"; a check per item */
.cp-btn .cp-placeholder{font-weight:500;color:var(--f4-muted);}
.cp-stack{display:inline-flex;flex:0 0 auto;}
.cp-stack .cp-logo{box-shadow:0 0 0 2px #fff;}
.cp-stack .cp-logo + .cp-logo{margin-left:-8px;}
.cp-more{flex:0 0 auto;padding:1px 8px;border-radius:10px;background:#e8f4fa;color:#0190CB;font-size:12px;font-weight:700;}
.cp-check{flex:0 0 18px;width:18px;height:18px;border:1.5px solid #c9d3de;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:transparent;background:#fff;}
.cp-list li.selected .cp-check{background:#0190CB;border-color:#0190CB;color:#fff;}
.cp-list.is-multiple li.selected{background:transparent;color:#23294b;}
.cp-list.is-multiple li.selected:hover{background:#f1f6fa;}
.cp-list li.cp-search{position:sticky;top:-6px;z-index:1;margin:-6px -6px 6px;padding:10px 12px;border-bottom:1px solid #e1e5eb;border-radius:12px 12px 0 0;background:#fff;color:#9db3c6;cursor:default;}
.cp-list li.cp-search:hover{background:#fff;}
.cp-search input{flex:1;min-width:0;border:0;outline:0;font-size:14px;font-weight:500;color:#23294b;background:transparent;}
.cp-list li.cp-empty{color:var(--f4-muted);font-weight:500;cursor:default;}
.cp-list li.cp-empty:hover{background:transparent;}