/* =====================================================================
   THEME (company-wise)
   ---------------------------------------------------------------------
   - Application na badha theme colours FAKT aa file ma che. _card.css ma ane views ma
     koi theme colour nathi (fakt var(--theme-...) ke class).
   - Dareke theme = niche na variables no ek set.
       1) Default theme  : :root                    (teal)
       2) Biji theme     : :root[data-theme="xxx"]  (fakt variables override kare)
   - Company-wise: Company master ma theme select kare to layout ma <html data-theme="xxx">
     aave etle akhi application ma te theme apply thay. Navi theme add karva mate fakt ek
     navo  :root[data-theme="navu-naam"] { ... }  block aa file ma umero (bijo koi file nahi).
   ===================================================================== */

/* ---------- 1) DEFAULT THEME: "teal" ---------- */
:root {
    /* font: poori application ma ek j (barcode IDAutomation ane icon fonts sivay) */
    --theme-font: Verdana, Roboto, Arial, sans-serif;
    /* brand */
    --theme-primary:       #4199A2;   /* button, card border, active tab, icons */
    --theme-primary-dark:  #37828A;   /* hover / active */
    --theme-primary-light: #E3F1F3;   /* light background / hover */
    --theme-primary-rgb:   65, 153, 162;   /* --theme-primary no RGB (glow / shadow mate) */
    --theme-heading:       #2A5F71;   /* section heading, card title text */
    --theme-border-soft:   #CFE3E6;   /* halki border (card header niche ni line) */
    --theme-surface:       #FFFFFF;   /* card / bar background */
    --theme-on-primary:    #FFFFFF;   /* primary colour upar nu text */
    /* tabs (jQuery UI tabs: Parameters, Role, Company ... ) */
    --theme-tab-bg:          #F3F8F9;   /* inactive tab background */
    --theme-tab-text:        #2A5F71;   /* inactive tab text (JS pan aa variable vape che) */
    --theme-tab-active-bg:   #4199A2;   /* active tab background */
    --theme-tab-active-text: #FFFFFF;   /* active tab text (JS pan aa variable vape che) */
    /* footer */
    --theme-dark:        #2A5F71;
    /* header (top bar + menu) */
    --theme-header-from:   #4199A2;   /* gradient start */
    --theme-header-to:     #2A5F71;   /* gradient end */
    --theme-header-text:   #FFFFFF;   /* menu / company name text */
    --theme-header-hover:  rgba(255,255,255,0.18);
    --theme-logo-plate:    #FFFFFF;   /* company logo ni pachad (dark header par vanchay te mate) */
    /* PNG icons (dark blue #104070) mate CSS filter */
    --theme-icon-filter:        hue-rotate(-32deg) brightness(2.3) saturate(0.5);  /* halka background par: teal */
    --theme-header-icon-filter: brightness(0) invert(1);                            /* dark header par: safed */
    --theme-funnel-filter:      invert(40%) sepia(94%) saturate(1060%) hue-rotate(153deg) brightness(102%) contrast(49%); /* black funnel icon -> primary #4199A2 */
    --theme-help-filter:        hue-rotate(329deg) saturate(53%) brightness(155%);   /* blue (?) help icon -> primary */
    /* More Menu strip (header ni niche ni single row) */
    --theme-more-from:      #F3FAFB;
    --theme-more-to:        #E4F1F3;
    --theme-more-text:      #2A5F71;
    --theme-more-hover-bg:  #FFFFFF;
    --theme-more-hover-text:#1F4E5A;
    --theme-more-underline: #4199A2;
    /* Grid (jTable) + filter panel */
    --theme-grid-head-from: #E6F2F4;
    --theme-grid-head-to:   #D5E8EB;
    --theme-grid-head-text: #1F4E5A;
    --theme-grid-head-line: #4199A2;
    --theme-grid-line:      #E1EEF0;
    --theme-grid-zebra:     #F6FBFC;
    --theme-grid-hover:     #DDEFF2;
    --theme-grid-selected:  #C9E5EA;
}

/* ---------- 2) THEME: "blue" (juno look, example). Company master ma "blue" select kare to aa lage ---------- */
:root[data-theme="blue"] {
    --theme-primary:       #2E679F;
    --theme-primary-dark:  #1F4C78;
    --theme-primary-light: #EEF5FF;
    --theme-primary-rgb:   46, 103, 159;
    --theme-heading:       #123C77;
    --theme-border-soft:   #D5DEE7;
    --theme-tab-bg:          #F2F6FB;
    --theme-tab-text:        #2E6E9E;   /* juno inactive tab blue */
    --theme-tab-active-bg:   #FFFFFF;
    --theme-tab-active-text: #E17009;   /* juno active tab orange */
    --theme-dark:        #013B75;
    --theme-header-from:   #D5DEE7;   /* juno halko grey-blue header */
    --theme-header-to:     #E2E7ED;
    --theme-header-text:   #123C77;
    --theme-header-hover:  #BFD9FF;
    --theme-logo-plate:    transparent;
    --theme-icon-filter:        none;   /* icons pehla thi j blue che */
    --theme-header-icon-filter: none;
    --theme-funnel-filter:      none;
    --theme-help-filter:        none;
    --theme-more-from:      #D5DEE7;
    --theme-more-to:        #E2E7ED;
    --theme-more-text:      #123C77;
    --theme-more-hover-bg:  #BFD9FF;
    --theme-more-hover-text:#123C77;
    --theme-more-underline: transparent;
    --theme-grid-head-from: #E6ECF3;
    --theme-grid-head-to:   #D5DEE7;
    --theme-grid-head-text: #123C77;
    --theme-grid-head-line: #A6C9E2;
    --theme-grid-line:      #E3E8EE;
    --theme-grid-zebra:     #F0F0F0;
    --theme-grid-hover:     #E8EAEF;
    --theme-grid-selected:  #BFD9FF;
}

/* ---------- 3) THEME: "orange" (example / test: Company master ma "orange" select kare to aa lage) ---------- */
:root[data-theme="orange"] {
    --theme-primary:       #E67E22;
    --theme-primary-dark:  #CF6D17;
    --theme-primary-light: #FDEBD8;
    --theme-primary-rgb:   230, 126, 34;
    --theme-heading:       #8A4B0F;
    --theme-border-soft:   #F0D3B3;
    --theme-tab-bg:          #FFF6EC;
    --theme-tab-text:        #8A4B0F;
    --theme-tab-active-bg:   #E67E22;
    --theme-tab-active-text: #FFFFFF;
    --theme-dark:        #8A4B0F;
    --theme-header-from:   #E67E22;
    --theme-header-to:     #B85C0E;
    --theme-header-text:   #FFFFFF;
    --theme-header-hover:  rgba(255,255,255,0.18);
    --theme-logo-plate:    #FFFFFF;
    --theme-icon-filter:        hue-rotate(150deg) brightness(2.2) saturate(0.9);
    --theme-header-icon-filter: brightness(0) invert(1);
    --theme-funnel-filter:      invert(52%) sepia(78%) saturate(1500%) hue-rotate(354deg) brightness(95%) contrast(90%);
    --theme-help-filter:        hue-rotate(177deg) saturate(94%) brightness(162%);
    --theme-more-from:      #FFF8F0;
    --theme-more-to:        #FBE9D6;
    --theme-more-text:      #8A4B0F;
    --theme-more-hover-bg:  #FFFFFF;
    --theme-more-hover-text:#6B3A0B;
    --theme-more-underline: #E67E22;
    --theme-grid-head-from: #FCEBDB;
    --theme-grid-head-to:   #F6D9BC;
    --theme-grid-head-text: #6B3A0B;
    --theme-grid-head-line: #E67E22;
    --theme-grid-line:      #F5E6D6;
    --theme-grid-zebra:     #FFF9F3;
    --theme-grid-hover:     #FBE6D0;
    --theme-grid-selected:  #F7D3AE;
}
/* ---- Footer ---- */
.footer {
    background: linear-gradient(90deg, var(--theme-header-from) 0%, var(--theme-header-to) 100%) !important;
    background-image: linear-gradient(90deg, var(--theme-header-from) 0%, var(--theme-header-to) 100%) !important;
    border: 0 !important;
}

/* ---- Buttons ---- */
.btn-primary,
.btn-primary:focus,
.custom-btn,
.file-upload .file-select .file-select-button,
.file-upload.active .file-select .file-select-button,
.file-upload .file-select.file-select-disabled:hover .file-select-button {
    background: var(--theme-primary) !important;
    background-image: none !important;
    border-color: var(--theme-primary) !important;
}
.btn-primary:hover,
.btn-primary:active,
.custom-btn:hover {
    background: var(--theme-primary-dark) !important;
    background-image: none !important;
    border-color: var(--theme-primary-dark) !important;
}

/* File-upload button: hover ma dark teal */
.file-upload .file-select:hover .file-select-button {
    background: var(--theme-primary-dark) !important;
    background-image: none !important;
}

/* ---- Title bar + bottom button bar (New Multi Day design):
        safed background, teal border, teal title text ---- */
.cardBackGroundDark {
    background-color: var(--theme-surface) !important;
    border: 1px solid var(--theme-primary) !important;
}
.cardBackGroundDark .card-title,
.cardBackGroundDark .card-title h4,
.cardBackGroundDark .color-white {
    color: var(--theme-primary) !important;
}
/* Buttons inside that bar (Save / Save and Print / Back): teal background, safed text */
.cardBackGroundDark .btn,
.cardBackGroundDark .btn.bg-light,
.cardBackGroundDark .btn.text-Main-Header {
    background-color: var(--theme-primary) !important;
    background-image: none !important;   /* bootstrap .btn-default ni safed gradient teal ne dhaki de che */
    border-color: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
}
.cardBackGroundDark .btn:hover {
    background-color: var(--theme-primary-dark) !important;
    background-image: none !important;
    border-color: var(--theme-primary-dark) !important;
}

/* ---- Popup bottom bar (VisitorCompany popup .popup-footer): same design as .cardBackGroundDark ---- */
.popup-footer {
    background-color: var(--theme-surface) !important;
    border: 1px solid var(--theme-primary) !important;
}
.popup-footer .btn {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
    border: 1px solid var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
}
.popup-footer .btn:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
}

/* ---- Card / panel borders ---- */
.border-card-MainColor,
.file-upload.active .file-select {
    border-color: var(--theme-primary) !important;
}
.border-left-MainColor  { border-left-color:  var(--theme-primary) !important; }
/* _card.css (partial ma, theme.css pachhi load thay) ma .border-left-2 { border-left: Npx solid !important } colour ne black (currentColor) kari nakhe che.
   2 class vali selector thi load order ni asar vagar theme colour j rahe. */
.border-left-2.border-left-MainColor,
.border-left-MainColor.border-left-2,
.border-left-3.border-left-MainColor,
.border-left-MainColor.border-left-3 { border-left-color: var(--theme-primary) !important; }
/* _card.css: .border-card-2 { border: 1px solid !important } colour kalo kari nakhe che (same bug, 2 class thi theme colour) */
.border-card-2.border-card-MainColor,
.border-card-MainColor.border-card-2 { border-color: var(--theme-primary) !important; }
.bordered               { border-top-color:   var(--theme-primary) !important; }

/* ---- Header bars (table header, popup title, modal, panel heading) ---- */
.tableScrollableColor {
    border-top: 1px solid var(--theme-primary) !important;
}
.tableScrollableColor,
.tableScrollableColor th {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
    border-top-color: var(--theme-primary) !important;
}
.ui-dialog .ui-dialog-titlebar,
.modal-header,
.panel-primary > .panel-heading,
.accordion .panel.open.panel-default > .panel-heading,
.ui-datepicker .ui-widget-header,
.bg-pill {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
    border-color: var(--theme-primary) !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::before {
    color: var(--theme-primary);
}

/* ---- jQuery UI TABS (Parameters, inner tabs, Role, Company ...): tab strip + underline, light tabs, active = theme ---- */
.ui-tabs .ui-tabs-nav {
    background: var(--theme-surface) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 3px solid var(--theme-primary) !important;
    border-radius: 0 !important;
    padding: 6px 6px 0 !important;
}
.ui-tabs .ui-tabs-nav li {
    background: var(--theme-tab-bg) !important;
    background-image: none !important;
    border: 1px solid var(--theme-border-soft) !important;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
}
.ui-tabs .ui-tabs-nav li a {
    color: var(--theme-tab-text);
    font-weight: 700;
}
.ui-tabs .ui-tabs-nav li:hover {
    background: var(--theme-primary-light) !important;
    border-color: var(--theme-primary) !important;
}
.ui-tabs .ui-tabs-nav li a:focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(var(--theme-primary-rgb), 0.45);
}
/* (a) Normal jQuery UI tabs: jQuery UI je tab ne active kare te (ui-tabs-active) */
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
    background: var(--theme-tab-active-bg) !important;
    border-color: var(--theme-primary) !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: var(--theme-tab-active-text);
}
/* (b) Parameters / Role / Company ... jya page nu JS (ChangeAciveTab...) tab ne inline colour thi "selected" banave che
       (jQuery UI no ui-tabs-active pehla tab par j atakelo rahe che):
       - JS e inactive kari didho (inline var(--theme-tab-text)) to ui-tabs-active hova chhata inactive jevo dekhay
       - JS e selected karyo (inline var(--theme-tab-active-text)) to te tab ne active background male
       Hover par pan white text na rahe: selected tab hover ma pan active bg j rahe. */
.ui-tabs .ui-tabs-nav li.ui-tabs-active:has(> a[style*="var(--theme-tab-text)"]),
.ui-tabs .ui-tabs-nav li.ui-state-active:has(> a[style*="var(--theme-tab-text)"]) {
    background: var(--theme-tab-bg) !important;
    border-color: var(--theme-border-soft) !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active:has(> a[style*="var(--theme-tab-text)"]):hover,
.ui-tabs .ui-tabs-nav li.ui-state-active:has(> a[style*="var(--theme-tab-text)"]):hover {
    background: var(--theme-primary-light) !important;
    border-color: var(--theme-primary) !important;
}
.ui-tabs .ui-tabs-nav li:has(> a[style*="var(--theme-tab-active-text)"]),
.ui-tabs .ui-tabs-nav li:has(> a[style*="var(--theme-tab-active-text)"]):hover {
    background: var(--theme-tab-active-bg) !important;
    border-color: var(--theme-primary) !important;
}

/* ---- jQuery UI ACCORDION header (Parameters ma "Parameters" title bar): card header style ---- */
.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-header.ui-state-active,
.ui-accordion .ui-accordion-header.ui-state-default {
    background: var(--theme-surface) !important;
    background-image: none !important;
    border: 1px solid var(--theme-border-soft) !important;
    border-left: 5px solid var(--theme-primary) !important;
    color: var(--theme-heading) !important;
    font-weight: 700;
}
.ui-accordion .ui-accordion-header a {
    color: var(--theme-heading);
}

/* ---- Active states (tab, pagination, datepicker, list, progress) ---- */
ul.pagination li.active a,
ul.pagination li.active a:hover,
.ui-datepicker td .ui-state-active,
.list-group-item.active:focus,
.progress-bar,
.progress-bar-primary {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
    border-color: var(--theme-primary) !important;
}
.nav-tabs > li.active > a:focus { border-top-color: var(--theme-primary) !important; }

/* ---- HEADER (top bar): theme gradient ---- */
.navbar.navbar-inverse {
    background: linear-gradient(90deg, var(--theme-header-from) 0%, var(--theme-header-to) 100%) !important;
    background-image: linear-gradient(90deg, var(--theme-header-from) 0%, var(--theme-header-to) 100%) !important;
    border: 0 !important;
}
.ax-nav {
    background: transparent !important;       /* menu list ni potani grey gradient kadhi, header gradient dekhay */
}
/* Top-level menu text (Dashboard, Visitors ...) + company name: header text colour */
.ax-nav-list > .ax-nav-item > a,
.ax-nav-list > li > a,
.CompanyNameWithSiteName {
    color: var(--theme-header-text) !important;
}
.ax-nav-list > .ax-nav-item:hover,
.ax-nav-list > li:hover {
    background: var(--theme-header-hover) !important;
    color: var(--theme-header-text) !important;
}
/* Header na right na icons ane menu icons (PNG): header icon filter */
.ax-nav-list > .ax-nav-item > a > img,
.ax-nav-list > li > a > img,
.NavBarMenuPopup > a > img:not(#GreenbellIcon) {
    filter: var(--theme-header-icon-filter);
}
/* Company logo: header na rang par vanchay te mate plate */
#imgCompanyLogo {
    background: var(--theme-logo-plate);
    border-radius: 6px;
    padding: 2px 6px;
}

/* ---- Dropdown / sub menu / popups (halka background): primary text, icons teal ---- */
.ax-submenu li > a,
.NavBarMenuPopup,
.showPendingRequestAlert li a {
    color: var(--theme-primary) !important;
}
.ax-submenu li > a:hover,
.showPendingRequestAlert li a:hover {
    background: var(--theme-primary-light) !important;
    color: var(--theme-primary-dark) !important;
}
.NavBarMenuPopup:hover {
    background: var(--theme-header-hover) !important;
}
/* Header icons (Release Note / SMS / bell ...): hover par safed/blue box na thay, icon dekhay */
.NavBarMenuPopup :hover,
.NavBarMenuPopup a:hover,
.NavBarMenuPopup a:focus,
.NavBarMenuPopup a:active {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}
.NavBarMenuPopup:hover > a > img:not(#GreenbellIcon),
.NavBarMenuPopup a:hover > img:not(#GreenbellIcon) {
    filter: var(--theme-header-icon-filter);
    opacity: 1 !important;
}
/* ---- More Menu strip: single row, light tint, hover = white tab + underline ---- */
#ax-more-menu {
    background: linear-gradient(180deg, var(--theme-more-from), var(--theme-more-to)) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--theme-border-soft) !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 3px 8px rgba(var(--theme-primary-rgb), 0.18);
    padding: 0 !important;
}
/* li (.ax-nav-item) hover nu juno #BFD9FF background kadhi nakhyu: fakt <a> hover highlight thay */
.ax-submenu .ax-nav-item,
.ax-submenu .ax-nav-item:hover,
#ax-more-menu > li,
#ax-more-menu > li:hover {
    background: transparent !important;
}
#ax-more-menu > li {
    display: flex;
    align-items: stretch;
}
#ax-more-menu > li > a.ax-toggle {
    flex: 1 1 auto;
}#ax-more-menu > li > a,
#ax-more-menu > li > a.ax-toggle {
    color: var(--theme-more-text) !important;
    background: transparent !important;
    padding: 12px 10px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
#ax-more-menu > li > a:hover,
#ax-more-menu > li > a.ax-toggle:hover,
#ax-more-menu > li > a:focus {
    background: var(--theme-more-hover-bg) !important;
    color: var(--theme-more-hover-text) !important;
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--theme-more-underline);
}/* ---- Icons (PNG) halka background par: CSS filter (menu dropdown, manage profile) ---- */
.ax-submenu img,
#ax-more-menu img,
.UserProfilePopupbtn-link img[src*="ManageProfile"] {
    filter: var(--theme-icon-filter);
}
/* Font icons (+ add, camera, edit) */
.icon-plus-sign,
.icon-camera,
.icon-edit-sign {
    color: var(--theme-primary) !important;
}

/* ---- Floating QR / scan tab (right edge, #mySidenav) ---- */
#mySidenav div {
    background-color: var(--theme-primary) !important;
}

/* ---- VIRA chatbot (Content/ai-copilot.css) ---- */
.ai-avatar {
    border-color: var(--theme-primary) !important;
}
.ai-tooltip,
.agp-header,
.user-message,
#btnAISend,
.voice-start {
    background: var(--theme-primary) !important;
}
.ai-tooltip:after {
    border-left-color: var(--theme-primary) !important;
}
#btnAISend:hover {
    background: var(--theme-primary-dark) !important;
}
.agp-status {
    color: var(--theme-primary-light) !important;
}
/* pulse (listening) glow: teal */
@keyframes avatarListening {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb), .45), 0 8px 20px rgba(0,0,0,.25); }
    70%  { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(var(--theme-primary-rgb), 0), 0 10px 25px rgba(0,0,0,.30); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb), 0), 0 8px 20px rgba(0,0,0,.25); }
}

/* ---- Input focus (textbox / textarea / select): bootstrap ni blue border + glow ne teal ---- */
.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-primary) !important;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(var(--theme-primary-rgb), 0.6) !important;
}

/* ---- Bootstrap blue (#428bca): dropdown-menu, nav-pills, pagination, list-group active/hover/focus ---- */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
a.thumbnail:hover,
a.thumbnail:focus {
    border-color: var(--theme-primary) !important;
}

/* ---- Dropdowns: select2 (css/select/select2.min.css) ---- */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
}
.select2-container--focus:not(.select2-container--disabled) .select2-selection--single,
.select2-container--focus:not(.select2-container--disabled) .select2-selection--multiple,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple,
.select2-container--classic .select2-selection--single:focus,
.select2-container--classic .select2-selection--multiple:focus,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic.select2-container--open .select2-selection--multiple {
    border-color: var(--theme-primary) !important;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(var(--theme-primary-rgb), 0.6) !important;
}
.select2-container--open .select2-dropdown,
.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: var(--theme-primary) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--classic .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--theme-primary) !important;
    outline: 0;
}

/* ---- Dropdowns / menus: jQuery UI (autocomplete, menu, selectmenu) active / hover ---- */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
}
.ui-widget-header {
    border-color: var(--theme-primary);
    background: var(--theme-primary);
}

/* ---- Common utility classes: hard-coded colour badle aa class lagavo ---- */
.theme-text   { color: var(--theme-primary) !important; }
.theme-border { border: 1px solid var(--theme-primary) !important; }

/* text colour */
.theme-text-dark    { color: var(--theme-dark)  !important; }   /* juno #013b75 (dark navy) */
.theme-text-heading { color: var(--theme-heading) !important; }   /* juno #1f4c78 / #123c77 */
/* background colour */
.theme-bg-dark      {                                                       /* page header bars / modal headers / table header rows: app header jevo gradient */
    background: linear-gradient(90deg, var(--theme-header-from) 0%, var(--theme-header-to) 100%) !important;
}
/* border colour (border width/style view ma j rahe che) */
.theme-bc-soft      { border-color: var(--theme-border-soft) !important; }   /* juno #a6c9e2 (halki blue border) */
/* SVG icons */
.theme-stroke       { stroke: var(--theme-dark); }
.theme-fill         { fill:   var(--theme-dark); }

/* ---- Juna blue (views na <style> blocks / css files mathi ahi moved) ---- */
.Amtdisplay,                                   /* BillCreate: Create / Edit / BillRegenerate */
.txtColor,
.txtCurrentColor,                              /* Vehicle/VAHANDetailsEdit */
.divCalander .calendar .weeks li {             /* MeetingRoomBooking calendar */
    color: var(--theme-primary);
}
.sliderApproveReject.twitter,
.slider.twitter {                              /* MeetingRoomBooking approve/reject slider */
    background: var(--theme-primary);
}
.file-uploader .input-group-btn .btn {         /* SafetyTraining/Create (text colour #fff view ma j che) */
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/* ---- DASHBOARD (Home/Index, AdminDashboard-1.min.css na .box classes) ----
   Card = safed + header par teal LEFT accent bar; section heading (MY DASHBOARD / VISITORS) = heading colour */
.box {
    border-top: 1px solid var(--theme-border-soft);
    background: var(--theme-surface);
}
.box .box-header {
    background: var(--theme-surface);
    border-left: 5px solid var(--theme-primary);
    border-bottom: 1px solid var(--theme-border-soft);
}
.box-header .box-title {
    color: var(--theme-heading);
}
/* AdminLTE ni blue colour classes -> theme primary */
.box.box-primary,
.box.box-info {
    border-top-color: var(--theme-primary) !important;
}
.box.box-solid.box-primary,
.box.box-solid.box-info {
    border-color: var(--theme-primary) !important;
}
.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info > .box-header,
.bg-blue,
.label-primary,
.label-info {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
}
.text-blue {
    color: var(--theme-primary) !important;
}

/* ---- Moved from _card.css (demo / special classes), ab colour theme thi ---- */
ul.experiences li:after {
    background: var(--theme-primary-dark);
    color: var(--theme-primary-dark);
}
ul.experiences li:before {
    border-left-color: var(--theme-primary-dark);
}
.file-upload .file-select,
.file-upload .file-select.file-select-disabled:hover {
    color: var(--theme-heading);
}
.card-category-5 .per-card-1 {
    background-image: linear-gradient(var(--theme-primary-dark), var(--theme-surface));
}
.card-category-5 .per-card-1 .card-content .per-position {
    color: var(--theme-heading);
}

/* ---- Blue text ---- */
.text-Main-Header,
.card-header,
.lableBlueColor,
.pillTest:before {
    color: var(--theme-primary) !important;
}

/* ---- Filter panel funnel icon (expand.ico / collapse.ico = black, funnel.gif = navy) ---- */
img#funnel,
img[src*="Content/images/expand.ico"],
img[src*="Content/images/collapse.ico"] {
    filter: var(--theme-funnel-filter);
}
img[src*="DashboardIcon/funnel.gif"] {
    filter: var(--theme-icon-filter);
}

/* ---- Checkbox / radio / range / progress: browser default blue -> theme colour ---- */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--theme-primary);
}

/* ---- Native <select> popup (option highlight): browser default blue -> theme ----
   Chrome/Edge (base-select) ma theme colour; juna browser ma native look j rahe (graceful fallback). */
@supports (appearance: base-select) {
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }
    /* bootstrap .form-control = display:block; base-select ma arrow niche jata roka (flex row, arrow jamne) */
    select.form-control:not([multiple]):not([size]),
    select[style*="display: block"]:not([multiple]):not([size]) {
        display: flex;
        align-items: center;
    }
    select:not([multiple]):not([size])::picker-icon {
        margin-left: auto;
        flex: none;
    }
    select:not([multiple]):not([size])::picker(select) {
        border: 1px solid var(--theme-primary);
        border-radius: 4px;
        background: #fff;
        padding: 0;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    }
    select:not([multiple]):not([size]) option {
        padding: 5px 8px;
        background: #fff;
        color: #222;
    }
    select:not([multiple]):not([size]) option:hover,
    select:not([multiple]):not([size]) option:focus {
        background: var(--theme-primary-light);
        color: var(--theme-heading);
    }
    select:not([multiple]):not([size]) option:checked {
        background: var(--theme-primary);
        color: var(--theme-on-primary);
    }
    select:not([multiple]):not([size]) option::checkmark {
        display: none;
    }
}

/* class="tooltip" vali img/input bootstrap thi position:absolute thay che -> normal flow ma rakhya */
#divEntryExit img.tooltip {
    position: static !important;
    opacity: 1;
    vertical-align: middle;
}
/* Audio player: native grey (colour CSS thi badli shakato nathi) -> round pill + theme ring */
#divEntryExit audio {
    height: 38px;
    border-radius: 19px;
    box-shadow: 0 0 0 1px var(--theme-border-soft);
}

/* ---- Help (?) icon (blue PNG) -> theme colour, application ma badhi jagya e ---- */
img[src*="Content/images/help.png"] {
    filter: var(--theme-help-filter);
}

/* ---- List pages: toolbar (New / Inactive / funnel), filter panel and jTable grid (Option A) ---- */
/* Toolbar: safed bar + jadi teal accent bar left ma */
#accordion > h3.clsAccordion,
#accordion > h3.ui-accordion-header,
:not(.widget-header) > h3.clsAccordion {
    background: var(--theme-surface) !important;
    background-image: none !important;
    border: 1px solid var(--theme-border-soft) !important;
    border-left: 5px solid var(--theme-primary) !important;
    color: var(--theme-heading) !important;
}
/* Filter panel (Go / Clear / Excel / PDF vali) */
#accordion > form > .form-horizontal,
#accordion > .form-horizontal {
    background: var(--theme-surface);
    padding-top: 8px;
    padding-bottom: 8px;
}
#accordion .form-horizontal input.form-control,
#accordion .form-horizontal select.form-control,
#accordion .form-horizontal .select2-container--default .select2-selection--single {
    border-color: var(--theme-border-soft);
}
/* jTable grid */
div.jtable-main-container table.jtable thead th,
div.jtable-main-container table.jtable thead th.ui-widget-header {
    background: linear-gradient(180deg, var(--theme-grid-head-from), var(--theme-grid-head-to)) !important;
    background-image: linear-gradient(180deg, var(--theme-grid-head-from), var(--theme-grid-head-to)) !important;
    color: var(--theme-grid-head-text) !important;
    border-bottom: 2px solid var(--theme-grid-head-line) !important;
    border-right: 1px solid var(--theme-border-soft) !important;
    text-shadow: none !important;
}
div.jtable-main-container table.jtable thead th span,
div.jtable-main-container table.jtable thead th .jtable-column-header-text {
    color: var(--theme-grid-head-text) !important;
}
div.jtable-main-container table.jtable tbody > tr > td {
    border-bottom: 1px solid var(--theme-grid-line);
}
div.jtable-main-container table.jtable tbody > tr {
    background: #fff;
}
div.jtable-main-container table.jtable tbody > tr.jtable-row-even {
    background: var(--theme-grid-zebra) !important;
}
div.jtable-main-container table.jtable tbody > tr:hover {
    background: var(--theme-grid-hover) !important;
}
div.jtable-main-container table.jtable tbody > tr.jtable-row-selected,
div.jtable-main-container table.jtable tbody > tr.jtable-row-selected:hover {
    background: var(--theme-grid-selected) !important;
    color: inherit !important;
    text-shadow: none !important;
}
div.jtable-main-container table.jtable tbody > tr.jtable-row-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--theme-primary);
}
/* jTable pagination */
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next {
    background: #fff;
    border-color: var(--theme-border-soft);
    color: var(--theme-heading);
}
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next:hover {
    background: var(--theme-primary-light);
}
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
    text-shadow: none;
}

/* ---- Buttons: 2 type (markup ma class lagavi): btnWithFill = background colour valu, btnWithoutFill = background vagar (outlined) ---- */
.btnWithFill,
.btnWithoutFill {
    font-weight: 400 !important;
    text-shadow: none !important;
    border-radius: 4px;
}
.btn.btnWithFill {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
    color: var(--theme-on-primary) !important;
    border: 1px solid var(--theme-primary) !important;
}
.btn.btnWithFill:hover,
.btn.btnWithFill:focus {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: var(--theme-on-primary) !important;
}
.btn.btnWithoutFill {
    background-color: #fff !important;
    background-image: none !important;
    color: var(--theme-primary) !important;
    border: 1.5px solid var(--theme-primary) !important;
}
.btn.btnWithoutFill:hover,
.btn.btnWithoutFill:focus {
    background-color: var(--theme-primary-light) !important;
    color: var(--theme-primary-dark) !important;
}
/* Button icons: badha buttons ma icon no box ek j size (14x14), text sathe vertically center; limitless icon-font ni offset kadhi */
.btnWithFill > i,
.btnWithoutFill > i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: none;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    vertical-align: middle;
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;      /* button text colour j icon ni */
}

/* Baki primary / default buttons: bold nahi (bootstrap .btn text-shadow safed text ne bold jevo banave che) */
.btn.btn-primary,
.cardBackGroundDark .btn,
.btn.text-Main-Header,
.popup-footer .btn,
.btn.btn-default.bg-light {
    font-weight: 400 !important;
    text-shadow: none !important;
}

/* ---- Grid / form icons (FontAwesome <i>): edit = theme colour, delete = red ---- */
i.icon-edit,
i.icon-trash {
    font-size: 16px;
    font-style: normal;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}
i.icon-edit            { color: var(--theme-primary); }
i.icon-edit:hover      { color: var(--theme-primary-dark); }
i.icon-trash           { color: #E0524F; }
i.icon-trash:hover     { color: #C0392B; }
/* class="tooltip" vali <i> / img / button bootstrap thi position:absolute thay che -> normal flow ma */
i.tooltip,
div.jtable-main-container table.jtable td img.tooltip,
div.jtable-main-container table.jtable td img.tooltip1,
#divEntryExit button.tooltip {
    position: static !important;
    opacity: 1;
    vertical-align: middle;
}
/* jTable: icon vala cell center + padding 0 (narrow fixed columns ma icon clip na thay) */
div.jtable-main-container table.jtable td:has(> i.tooltip),
div.jtable-main-container table.jtable td:has(> a > i.tooltip),
div.jtable-main-container table.jtable td:has(> img.tooltip),
div.jtable-main-container table.jtable td:has(> img.tooltip1),
div.jtable-main-container table.jtable td:has(> a > img.tooltip),
div.jtable-main-container table.jtable td:has(> a > img.tooltip1) {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* jTable ma haju PNG icons (renew / print ...): ek j size 16px; status dot ("small") potani size */
div.jtable-main-container table.jtable td img.tooltip:not([src*="small" i]),
div.jtable-main-container table.jtable td img.tooltip1:not([src*="small" i]) {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
}

/* ---- List page toolbar (New / Delete / Active / Inactive / Print ...): boxed buttons, icon + text ---- */
.btnToolbar {
    display: inline-block;
    vertical-align: middle;
    min-width: 84px;
    padding: 7px 18px !important;
    margin: 0 8px 0 0;            /* buttons vachche ek j gap (container flex chhe, whitespace nathi) */
    border: 1px solid var(--theme-heading);
    border-radius: 4px;
    background: #fff;
    color: var(--theme-heading) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
}
.btnToolbar:hover,
.btnToolbar:focus {
    background: var(--theme-primary-light);
    text-decoration: none !important;
}
.btnToolbar > i {
    margin-right: 8px;
    font-size: 14px;
    color: inherit !important;       /* icon button text jevo j colour */
}
.btnToolbar > img {
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}
.btnToolbar.btnToolbarNew {
    border-color: var(--theme-primary);
    color: var(--theme-primary) !important;
}
.btnToolbar.btnToolbarDelete {
    border-color: #E0524F;
    color: #E0524F !important;
}
.btnToolbar.btnToolbarDelete:hover,
.btnToolbar.btnToolbarDelete:focus {
    background: #FBECEB;
}

/* Toolbar bar: buttons ni aaju-baaju jagya (panel ni border sathe na chipke) */
/* NOTE: kyarek <div id="accordion" class="clsAccordion"> akhu container j hoy (report pages) -> te ma flex/padding na lagvu joie */
:not(.widget-header) > h3.clsAccordion,
div.clsAccordion:not(#accordion) {
    display: flex !important;            /* buttons upar-niche barabar center, vachche exact gap (jquery-ui .ui-accordion-header display:block ne override) */
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 16px 8px 14px !important;
    min-height: 52px;
    box-sizing: border-box;
}
:is(:not(.widget-header) > h3.clsAccordion, div.clsAccordion:not(#accordion)) .listheader {
    float: none !important;              /* flex ma jamni bajue (margin-left:auto) */
    margin-left: auto !important;
    line-height: normal;
}

/* ---- jQuery UI dialog header close button: badha dialog ma ek j (safed box + X), _card.css na par aadhar vagar ---- */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 0;
    padding: 0 !important;
    background: #fafafa !important;
    background-image: none !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    filter: none;
    font-size: 0;                  /* "Close" text label chhupavo (X glyph ::before ma) */
    overflow: hidden;
    text-indent: 0;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
    background: #e6e6e6 !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;                 /* juno dark circle sprite icon chhupavo */
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::before {
    content: "\f00d";              /* FontAwesome times */
    font-family: FontAwesome;
    font-size: 13px;
    line-height: 22px;
    display: block;
    text-align: center;
}
/* Dialog buttons ni andar na FontAwesome icon */
.ui-dialog .ui-dialog-buttonpane .btn > i {
    margin-right: 6px;
    color: inherit !important;
}

/* ---- Vendor blue overrides (bootstrap / jQuery UI / DataTables ni default blue): theme colour ---- */
a {
    color: var(--theme-primary);
}
a:hover,
a:focus {
    color: var(--theme-primary-dark);
}
.text-primary,
.btn-link {
    color: var(--theme-primary);
}
.btn-link:hover,
.btn-link:focus {
    color: var(--theme-primary-dark);
}
.text-info {
    color: var(--theme-primary-dark);
}
/* jQuery UI dialog buttons (jya class "btn" nathi, jquery-ui.css no #2B7CC0 blue) */
.ui-dialog .ui-dialog-buttonpane button {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-on-primary);
}
/* DataTables selected row (--dt-row-selected = rgb triplet) */
:root {
    --dt-row-selected: var(--theme-primary-rgb);
}
table.dataTable.hover > tbody > tr.selected:hover > *,
table.dataTable.display > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px var(--theme-primary) !important;
}

/* ---- Grid icons (FontAwesome <i>): View / Print / Renew (cell ma) = edit jetla j size ane theme colour ---- */
:is(td > i, td > a > i).icon-eye-open,
:is(td > i, td > a > i).icon-print,
:is(td > i, td > a > i).icon-refresh {
    font-size: 16px;
    font-style: normal;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}
:is(td > i, td > a > i).icon-eye-open,
:is(td > i, td > a > i).icon-refresh   { color: var(--theme-primary); }
:is(td > i, td > a > i).icon-print     { color: var(--theme-heading); }
:is(td > i, td > a > i).icon-eye-open:hover,
:is(td > i, td > a > i).icon-refresh:hover { color: var(--theme-primary-dark); }
:is(td > i, td > a > i).icon-print:hover   { color: var(--theme-primary-dark); }

/* ---- Status dot (Active / Inactive), Add (+) / Remove (-) / Download icons: FontAwesome <i> ---- */
i.iconStatusActive,
i.iconStatusInactive {
    font-size: 10px;
    font-style: normal;
    vertical-align: middle;
    line-height: 1;
}
i.iconStatusActive {
    color: #4caf50
}
i.iconStatusInactive { color: #CC2026; }
i.icon-plus-sign[onclick],
i.icon-minus-sign[onclick] {
    font-size: 20px;
    font-style: normal;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}
i.icon-minus-sign[onclick] { color: var(--theme-heading); }
i.icon-minus-sign[onclick]:hover { color: var(--theme-primary-dark); }
:is(td > i, td > a > i).icon-download-alt {
    font-size: 16px;
    font-style: normal;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    color: var(--theme-primary);
}
:is(td > i, td > a > i).icon-download-alt:hover { color: var(--theme-primary-dark); }

/* ---- Visitor wizard pages (/V/... : AppointmentCreationByVisitor + VisitorSelfRegistration): header, steps, buttons.
        Fakt design (CSS); JS / ids / controls same. Colours badha theme variables mathi. ---- */
/* Header: company name ane subtitle motha ane vaanchva laayak */
body:has(.wizard-form) .header_resize .navbar .CompanyNameWithSiteName {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .2px;
}
body:has(.wizard-form) .header_resize .navbar .CompanyNameWithSiteName[style*="68%"] {
    font-size: 13px !important;
    font-weight: 400;
    opacity: .92;
}
/* Steps */
.wizard-form .steps .step .step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 2px solid var(--theme-border-soft);
    background-color: #fff;
    color: var(--theme-heading);
    font-size: 19px;
    line-height: 1;
}
.wizard-form .steps .step .step-icon i {
    font-size: 19px !important;
    line-height: 1 !important;
}
.wizard-form .steps .step:not(.completed) .step-icon i {
    opacity: .6;
}
.wizard-form .steps .step .step-icon-wrap::before,
.wizard-form .steps .step .step-icon-wrap::after {
    height: 3px;
    margin-top: -1.5px;
    background-color: var(--theme-border-soft);
    border-radius: 2px;
}
.wizard-form .steps .step.completed .step-icon-wrap::before,
.wizard-form .steps .step.completed .step-icon-wrap::after {
    background-color: var(--theme-primary);
}
.wizard-form .steps .step .step-title {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--theme-heading);
    opacity: .75;
}
/* Pura thayela step (pachhi na step pan completed) = halko theme + tick icon */
.wizard-form .steps .step.completed:has(~ .step.completed) .step-icon {
    background-color: var(--theme-primary-light);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}
.wizard-form .steps .step.completed:has(~ .step.completed) .step-icon i {
    display: none;
}
.wizard-form .steps .step.completed:has(~ .step.completed) .step-icon::before {
    content: "\f00c";              /* FontAwesome check */
    font-family: FontAwesome;
    font-size: 17px;
}
.wizard-form .steps .step.completed:has(~ .step.completed) .step-title {
    opacity: 1;
}
/* Chalu step (chhello completed) = bharelo theme + glow + bold title */
.wizard-form .steps .step.completed:not(:has(~ .step.completed)) .step-icon {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-on-primary);
    box-shadow: 0 0 0 5px rgba(var(--theme-primary-rgb), 0.2);
}
.wizard-form .steps .step.completed:not(:has(~ .step.completed)) .step-title {
    opacity: 1;
    font-weight: 700;
}
/* Meeting Info step icon: FA3 .icon-calendar ni glyph code ane limitless icon font ni takrav -> khali circle; FontAwesome font vaparo */
.wizard-form .steps .step .step-icon i.icon-calendar {
    font-family: FontAwesome !important;
}

/* ---- Standalone confirm pages (AppointmentConfirmByHost, Authorization ... link pages): header + card ---- */
.navbar.header-elements-inline.theme-bg-dark {
    min-height: 76px;
    display: flex;
    align-items: center;
    padding: 0 24px !important;
    border-radius: 0;
    margin-bottom: 0;
}
.navbar.header-elements-inline.theme-bg-dark .card-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.navbar.header-elements-inline.theme-bg-dark #imgCompanyLogo {
    float: none !important;
    max-height: 46px;
    margin: 0 !important;
    padding: 3px 8px;
    background: #fff;
    border-radius: 6px;
}
.navbar.header-elements-inline.theme-bg-dark .card-title .mr-auto {
    float: none !important;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.25 !important;
}
.navbar.header-elements-inline.theme-bg-dark .card-title .float-center {
    float: none !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    opacity: .92;
}
.page-content .content.card.border-left-MainColor {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.12);
}

/* Button ma pehla thi icon hoy ane (mara) leading icon pan hoy to pachhal no duplicate icon chhupavo (control j rahe chhe, fakt 2jo icon) */
.btnWithFill > i ~ i,
.btnWithoutFill > i ~ i {
    display: none !important;
}

/* FontAwesome icons (<i class="icon-xxx"> jena par bija koi class nathi) limitless/icomoon icon font vali pages ma pan dekhay: font-family FontAwesome */
i[class="icon-save"],
i[class="icon-arrow-left"],
i[class="icon-arrow-right"],
i[class="icon-remove"],
i[class="icon-remove-circle"],
i[class="icon-ok"],
i[class="icon-ok-circle"],
i[class="icon-print"],
i[class="icon-table"],
i[class="icon-file-alt"],
i[class="icon-file-pdf"],
i[class="icon-trash"],
i[class="icon-plus"],
i[class="icon-search"],
i[class="icon-envelope-alt"],
i[class="icon-upload-alt"],
i[class="icon-download-alt"],
i[class="icon-folder-open"],
i[class="icon-camera"],
i[class="icon-refresh"],
i[class="icon-eye-open"],
i[class="icon-edit"],
i[class="icon-copy"],
i[class="icon-link"],
i[class="icon-signin"],
i[class="icon-signout"],
i[class="icon-share-alt"],
i[class="icon-magic"],
i[class="icon-list-alt"],
i[class="icon-time"],
i[class="icon-book"],
i[class="icon-ban-circle"],
i[class="icon-minus-sign"],
i[class="icon-plus-sign"],
i[class="icon-circle"],
i[class="icon-resize-small"] {
    font-family: FontAwesome !important;
}

/* ---- Wizard photo control (Visitor photo / ID proof photo): overlay bar photo ni bahar na nikle, photo box ni andar j ---- */
body:has(.wizard-form) div.imgPraposnate {
    position: relative;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--theme-border-soft);
    border-radius: 6px;
    background: #fff;
}
body:has(.wizard-form) img.imgPraposnate {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
}
body:has(.wizard-form) .imgPraposnate .overlay {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 14px;
    background: var(--theme-primary);
}
body:has(.wizard-form) .imgPraposnate .overlay a,
body:has(.wizard-form) .imgPraposnate .overlay i {
    color: var(--theme-on-primary) !important;
}

/* ---- Big icon-only button (theme colour, no box), e.g. Entry-Exit "Clear" (refresh) next to the scan box.
        .btn-primary / .btnWithFill pan jo script add kare (addClass) to pan aa j look rahe ---- */
.btn.btn-icon-big,
.btn.btn-icon-big.btn-primary,
.btn.btn-icon-big.btnWithFill {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--theme-primary) !important;
    padding: 0 6px;
    font-size: 56px;
    line-height: 1;
}
.btn.btn-icon-big:hover,
.btn.btn-icon-big:focus,
.btn.btn-icon-big.btn-primary:hover,
.btn.btn-icon-big.btn-primary:focus {
    background: transparent !important;
    color: var(--theme-primary-dark) !important;
}
.btn.btn-icon-big > i {
    font-size: 56px !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
}

/* ---- Page body that holds cards (.card-page): no outer panel (border / white box) around the cards,
        so cards sit directly on the page like the Appointment form (no "card inside a card") ---- */
.ui-accordion-content.card-page,
.card-page {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 10px 0 0 0 !important; /* space between the page header and the first row (e.g. scan box) */
}

/* ---- Flowing card grid (.card-flow on the row, .card-flow-col on its columns):
        column na div "vanchay nahi" (display: contents), etle andar na cards sidha grid ma aave.
        Je card hide hoy (script: style="display: none") te jagya na le ane baki na cards upar/side ma khasi jay.
        3 per row (laptop/desktop), 2 (tablet), 1 (mobile); same row na cards ni height ek sarkhi ---- */
.card-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    grid-auto-flow: row dense;
    align-items: stretch;
    margin: 0 !important;
}
.card-flow::before,
.card-flow::after {
    display: none !important;      /* bootstrap .row clearfix pseudo elements would take a grid cell */
}
.card-flow > .card-flow-col,
.card-flow > .card-flow-col > fieldset {
    display: contents;             /* inline style="display: none" (script) still wins and hides the whole column */
}
/* script shows a column with .css('display','block') -> keep it "contents", else the column becomes one narrow grid cell */
.card-flow > .card-flow-col:not([style*="display: none"]):not([style*="display:none"]) {
    display: contents !important;
}
.card-flow > .card-flow-col > *,
.card-flow > .card-flow-col > fieldset > * {
    margin-top: 0 !important;      /* old per-section top margins (2%, 5% ...) not needed in the grid */
}
.card-flow .basic-card.card {
    margin: 0 !important;
    height: 100%;
}
/* order in the flow: main cards first (default), then .card-flow-late (e.g. Material), then .card-flow-last (e.g. Other Details) */
.card-flow .card-flow-late { order: 1; }
.card-flow .card-flow-last { order: 2; }
@media (max-width: 1199px) {
    .card-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .card-flow { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Documents card (.doc-card): jTable list ma ek pan document (tr.jtable-data-row) hoy to j card dekhay ---- */
.doc-card:not(:has(.jtable-data-row)) {
    display: none;
}

/* ---- Card whose fields are all shown/hidden by script (.auto-hide-card), e.g. Parking Slot + Passport/Visa:
        koi .item dekhatu na hoy (badha ni style ma "display: none") to khali card na dekhay ---- */
.auto-hide-card:not(:has(.card-body > .item:not([style*="display: none"]):not([style*="display:none"]))) {
    display: none;
}

/* ---- Button bars (.cardBackGroundDark): float karelu button group (dd. #divSavePanel.pull-left: Save Print Entry + dropdown)
        pachhi pan baki na buttons jetli j jagya (5px, buttons vachhe ni normal space) rahe ---- */
.cardBackGroundDark .card-content > .pull-left,
.cardBackGroundDark .card-content > [style*="float: left"],
.cardBackGroundDark .card-content > [style*="float:left"] {
    margin-right: 5px;   /* button wrapped in a floated div (e.g. #divSavePanel) keeps the common 5px gap to the next button */
}

/* ---- Button / photo preview shown under an input (in .item-info, e.g. SARATHI button, photo preview):
        keep a small gap from the input above and the next field below ---- */
.item-info > .btn {
    margin-top: 5px;
    margin-bottom: 5px;
}
.item-info > div > img:first-child {
    margin-top: 5px;
}

/* ---- ID photo box (.imgPraposnate 150x150 with the same-size img inside): the inner img must not
        get extra margins (mb-2 / ml-1 / page margin-top), else it spills out of the box over the buttons below ---- */
.imgPraposnate > img.imgPraposnate {
    margin: 0 !important;
}
.item-content > .imgPraposnate {
    margin-bottom: 5px;
}

/* ---- Buttons row inside a card (e.g. document Add / Clear): side by side with the common 5px gap,
        even when a button has inline display:flex ---- */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

/* ---- Button bar card (.action-card): jyare andar kai j dekhatu na hoy (script e badha buttons hide karya hoy, error pan na hoy) tyare khali bar na dekhay.
        Same idea as .confirm-meeting-card rule: visible = koi child jeni style ma "display: none" nathi ---- */
.action-card:not(:has(.ErrorDiv, .flex-row > :not([style*="display: none"]):not([style*="display:none"]))) {
    display: none;
}

/* ---- Pass print page (GatepassPrint, Layout = null, bootstrap nathi): Print / Back buttons ne application na common button size (bootstrap .btn) ---- */
#trPrintBtn .btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    cursor: pointer;
}

/* ---- btnWithFill / btnWithoutFill: icon + text ek j line ma vertically center (icon-font ni baseline pe aadhar nahi) ---- */
.btn.btnWithFill:not(.btn-block),
.btn.btnWithoutFill:not(.btn-block) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    vertical-align: middle;
}

/* ---- Bootstrap/limitless custom checkbox + radio (wizard pages, Confirm-by-host material table, Questionnaire): theme colour ---- */
.custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    border-color: var(--theme-primary);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    content: "\f00c";                       /* FontAwesome check */
    font-family: FontAwesome;
    background-image: none !important;
    color: var(--theme-primary);
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: radial-gradient(circle, var(--theme-primary) 0 38%, transparent 42%) !important;
    background-size: 100% 100% !important;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--theme-primary);
}
/* Questionnaire: radio/checkbox options ek-bija par na chadhe */
#tblQuestionnaire .custom-control {
    padding-left: 1.5rem !important;
}
#tblQuestionnaire .custom-control-inline {
    margin-right: 14px !important;
}

/* ---- Wizard steps: icon circle ni vachche (limitless icon ni top:8px offset kadhi) ---- */
.wizard-form .steps .step .step-icon i {
    position: static !important;
    top: 0 !important;
    display: block;
    margin: 0;
}

/* ---- Wizard photo overlay icons: camera / cross FontAwesome ma (icomoon ma glyph nathi) + file input hamesha hidden ---- */
.imgPraposnate .overlay i.icon-camera,
.imgPraposnate .overlay i.icon-cross2 {
    font-family: FontAwesome !important;
}
.imgPraposnate .overlay input[type="file"] {
    display: none !important;
}
.imgPraposnate .overlay i {
    position: static !important;
    top: auto !important;
    margin: 0 4px;
    padding: 0 !important;
    vertical-align: middle;
}

/* ---- Wizard Previous / Next / Cancel: buttons vachche ek j gap ---- */
.actions > .btn + .btn,
.actions > .btnWithFill + .btnWithoutFill,
.actions > .btnWithoutFill + .btnWithFill {
    margin-left: 10px !important;
}
/* ---- Wizard / confirm pages: button bar ni upar-niche jagya (panel ni border sathe na chipke). display ne chhedyu nathi (JS show/hide kare chhe) ---- */
.actions.clearfix {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

/* ---- Company page: VAPT Report button tab bar ni right end par (banne tab ma dekhay, kemke #tabs ni andar chhe) ---- */
#tabs {
    position: relative;
}
#tabs .vaptBar {
    position: absolute;
    top: 6px;
    right: 10px;
    margin: 0;
    z-index: 2;
}

/* ---- Company > Licence Update tab: card, file row, Get License File (id / markup same) ---- */
#divLicenceUpdate .widget {
    margin: 0 6px 16px;
    background: #fff;
    border: 1px solid var(--theme-border-soft);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.1);
    overflow: hidden;
}
#divLicenceUpdate .widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 12px 20px;
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-left: 5px solid var(--theme-primary) !important;
    border-bottom: 1px solid var(--theme-border-soft) !important;
}
#divLicenceUpdate .widget-header > [class^="icon-"] {
    position: static;
    margin: 0;
    color: var(--theme-primary);
    font-size: 16px;
}
#divLicenceUpdate .widget-header h3 {
    position: static;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-heading);
}
#divLicenceUpdate .widget-content {
    padding: 16px 20px;
    background: #fff;
}
#divLicenceUpdate .widget-content fieldset .form-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 14px 16px;
    background: #FAFDFD;
    border: 1px solid var(--theme-border-soft);
    border-left: 5px solid var(--theme-primary);
    border-radius: 4px;
}
#divLicenceUpdate .widget-content fieldset .form-group:before,
#divLicenceUpdate .widget-content fieldset .form-group:after {
    display: none;
}
#divLicenceUpdate .widget-content fieldset .form-group > [class*="col-md-"] {
    float: none;
    width: auto;
    padding: 0;
}
#divLicenceUpdate .widget-content fieldset .form-group > label {
    flex: 0 0 170px;
    margin: 0;
    font-weight: 700;
}
#divLicenceUpdate .widget-content fieldset .form-group > .col-md-3 {
    flex: 0 0 420px;
}
#divLicenceUpdate input[type="file"].form-control {
    height: 40px;
    padding: 4px 6px;
}
#divLicenceUpdate input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 5px 12px;
    background: var(--theme-primary-light);
    color: var(--theme-heading);
    border: 1px solid var(--theme-primary);
    border-radius: 3px;
    cursor: pointer;
}
#divLicenceUpdate .widget-content hr {
    margin: 14px 0 12px;
    border-top: 1px solid var(--theme-border-soft);
}
#divLicenceUpdate #GetLicenseFile {
    text-decoration: none !important;
}
/* Licence tab: card tab bar jetli j width ma (ander na bootstrap wrappers ni left/right padding kadhi) ane khali message ni jagya kadhi */
#divLicenceUpdate,
#divLicenceUpdate > .row,
#divLicenceUpdate .main,
#divLicenceUpdate .main > .container,
#divLicenceUpdate .main > .container > .row,
#divLicenceUpdate .main > .container > .row > .col-md-12,
#divLicenceUpdate > .row > form > .form-horizontal {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
#divLicenceUpdate .widget {
    margin: 0 0 12px;
}
#divLicenceUpdate #SMessage {
    margin: 0;
    line-height: normal;
}
#divLicenceUpdate #SMessage br {
    display: none;
}
#divLicenceUpdate .widget-content > .row {
    margin-left: 0;
    margin-right: 0;
}

/* ---- FONT: poori application ma ek j font (variable upar :root ma). Barcode (IDAutomation) ane icon fonts alag rahe chhe.
        Icon wala elements (class ma icon- / fa- / glyphicon) ne :where() thi bahar rakhya chhe (specificity vadhata nathi). ---- */
:is(html, body, input, select, textarea, button, optgroup, table,
    .btn, .form-control, .tooltip, .popover, .modal, .dropdown-menu,
    .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button,
    .ui-dialog, .ui-tooltip, .ui-autocomplete, .ui-menu, .ui-datepicker,
    div.jtable-main-container, div.jtable-main-container *,
    .select2-container, .select2-dropdown, .select2-results,
    table.dataTable, .dataTables_wrapper,
    .navbar, .ax-nav, .ax-submenu, .wizard-form, .card, .card-header, .widget,
    h1, h2, h3, h4, h5, h6, label, p, span, a, i:not([class])):where(:not([class*="icon-"]):not([class^="fa"]):not([class*=" fa-"]):not([class*="glyphicon"])) {
    font-family: var(--theme-font);
}

/* ---- Confirm-by-host / link pages: appointment info strip, label-value items, visitor photo, action bar ---- */
.confirm-summary {
    display: flex !important; /* JS .show() inline display:block lagave chhe */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    background: linear-gradient(90deg, var(--theme-primary-light), var(--theme-surface));
    border: 1px solid var(--theme-border-soft);
    border-left: 3px solid var(--theme-primary);
    border-radius: 6px;
    padding: 12px 18px;
    margin-bottom: 10px;
}
.confirm-summary:empty {
    display: none !important;
}
.info-strip {
    display: flex;
    align-items: center;
    gap: 14px;
}
.info-strip > i {
    font-size: 26px;
    color: var(--theme-primary);
}
.info-strip small {
    display: block;
    font-size: 12px;
    color: #6f858b;
}
.info-strip b {
    display: block;
    font-size: 20px;
    color: var(--theme-heading);
}
.info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.info-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border-soft);
    border-radius: 20px;
    padding: 6px 14px;
}
.info-chip > i {
    color: var(--theme-primary);
}
.info-chip small {
    color: #6f858b;
    font-size: 12px;
}
.info-chip b {
    color: var(--theme-heading);
    font-size: 14px;
}
.confirm-page-body {
    padding: 0 !important;
}
.confirm-row > .card {
    margin: 0 !important;
}
.confirm-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 10px;
    margin-bottom: 10px;
    align-items: stretch;
}
.confirm-meeting-card .card-body > .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 0;
    margin: 0;
}
.confirm-meeting-card .confirm-meeting-field {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}
.confirm-meeting-card .confirm-meeting-field .form-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 0;
}
.confirm-meeting-card .confirm-meeting-field .form-group > label {
    flex: 0 0 180px;
    margin: 0;
    white-space: nowrap;
}
.confirm-meeting-card .confirm-meeting-field .form-group > div {
    flex: 1 1 160px;
    min-width: 0;
}
.confirm-meeting-card .confirm-meeting-field .select2-container {
    width: 100% !important;
}.confirm-card {
    border-left-width: 3px !important;
}
.confirm-host-card:has(.host-details:empty) {
    display: none;
}
.confirm-meeting-card:not(:has(.confirm-meeting-field:not([style*="display: none"]))) {
    display: none;
}
@media (max-width: 900px) {
    .confirm-row {
        grid-template-columns: 1fr;
    }
}
.visitor-photo {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--theme-border-soft);
}
.visitor-info i,
.host-info i {
    color: var(--theme-primary);
}
.card > .actions.clearfix {
    margin: 0 !important;
}
.confirm-card > .card-header .card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-primary) !important;
}
.confirm-card > .card-header {
    border-bottom: 1px solid var(--theme-border-soft);
    background: var(--theme-surface);
}
/* ---- Buttons ma text wrap na thay (jemke "Resend OTP") ---- */
.btn.btnWithFill,
.btn.btnWithoutFill {
    white-space: nowrap;
}

/* ---- OTP: Email OTP row (input + Confirm + Resend) ane Resend OTP button barabar height, ek line ma ---- */
.otp-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.otp-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.otp-row > div {
    flex: 0 0 auto;
}
.otp-row > div:first-child {
    flex: 1 1 auto;
    min-width: 80px;
}
.otp-row .form-control {
    width: 100%;
}
.otp-row .btn,
.btn.btnOtp {
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
}