/* ==========================================================================
   VMS Custom Utility Classes
   Created to replace inline style= attributes for CSP compliance.
   ========================================================================== */

/* --- Text Color Utilities --- */
.text-red { color: red; }
.text-crimson { color: crimson; }
.text-teal { color: #02a499; }
.text-pink { color: #ec4561; }
.text-light-gray { color: #e9ecef; }
.text-light-gray-imp { color: #e9ecef !important; }
.text-purple { color: #626ed4; }
.text-sky { color: #38a4f8; }
.text-off-white { color: #eff2f7; }
.text-amber { color: #f8b425; }
.text-blue-brand { color: #006CEB; }
.text-gray-700 { color: #737C87; }
.text-dark-char { color: #3A3A3A; }
.text-error-red { color: #DE2F1B; }
.text-gray-666 { color: #666666; }
.text-purple-imp { color: #626ed4 !important; }
.text-dropzone-upload-icon { color: #84bcff !important; }
.text-dark-slate-gray { color: darkslategray; }

/* --- Background Utilities --- */
.bg-topbar { background-color: #2a3142; }
.bg-dark-body { background-color: #333547; }
.bg-dark-body-imp { background-color: #333547 !important; }
.bg-purple { background-color: #626ed4; }
.bg-purple-imp { background-color: #626ed4 !important; }
.bg-pink-imp { background-color: #ec4561 !important; }
.bg-blue-brand { background: #006CEB; }
.bg-cover { background-size: cover; background-position: center; }

/* Account auth pages full-bleed background (pages-*-2.cshtml) */
.accountbg-bgjpg {
    background-image: url('/assets/images/bg.jpg');
}
.accountbg-login-new1 {
    background-image: url('/assets/images/VMSLoginNew1.png');
}

/* --- Width Utilities (percentage) --- */
.w-5  { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }

/* --- Width Utilities (pixel) --- */
.w-px-16 { width: 16px; }
.w-px-20 { width: 20px; }
.w-px-78  { width: 78px; }
.w-px-90  { width: 90px; }
.w-px-110 { width: 110px; }
.w-px-220 { width: 220px; }
.w-px-250 { width: 250px; }
.w-px-750 { width: 750px; }
.w-px-218 { width: 218px; }

/* --- Height Utilities (pixel) --- */
.h-px-30  { height: 30px; }
.h-px-38  { height: 38px; }
.h-px-40  { height: 40px; }
.h-px-44  { height: 44px; }
.h-px-45  { height: 45px; }
.h-px-84  { height: 84px; }
.h-px-28  { height: 28px; }
.h-px-48 { height: 48px; }
.h-px-145-imp { height: 145px !important; }
.h-px-380 { height: 380px; }

/* --- Font Size Utilities --- */
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-17 { font-size: 17px; }
.fs-20 { font-size: 20px; }
.fs-25 { font-size: 25px; }
.fs-xlarge { font-size: x-large; }

/* --- Font Weight Utilities --- */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-800 { font-weight: 800; }
.fw-600 { font-weight: 600; }
.fw-normal { font-weight: normal; }

/* --- Misc Utilities --- */
.pe-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }

/* Kiosk modal status switch label (top offset differs from gender switch) */
.switch-kiosk-status-label {
    top: 10px;
    width: 70px !important;
}

/* Bootstrap toggle switch label — wider track (Visitor Type modal) */
.switch-toggle-label-83 {
    top: 10px;
    width: 83px !important;
}

/* Gender switch label (PreApprvVisitor) */
.switch-gender-label {
    top: 16px;
    left: 40px;
    width: 70px !important;
}

.visibility-visible {
    visibility: visible;
}
.clear-both { clear: both; }
.rounded-0 { border-radius: 0px; }
.h-auto { height: auto; }
.lh-20 { line-height: 20px; }
.lh-40 { line-height: 40px; }
.ls-neg02 { letter-spacing: -0.2px; }
.ls-neg05 { letter-spacing: -0.5px; }

/* --- Table Utilities --- */
.table-collapse {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* --- Component: Modal Close Button --- */
.modal-close-icon {
    color: #ec4561;
    font-size: x-large;
}
.modal-close-icon-crimson {
    color: crimson;
    font-size: x-large;
}

/* --- Component: Row Action Icons (view/edit/delete) --- */
.action-icon {
    color: #e9ecef;
    padding-right: 20px;
}

/* --- Component: Table Header Row --- */
.table-header-row {
    color: #eff2f7;
    text-align: center;
}

/* Modal header without bottom border (bulk import modals) */
.modal-header-border-0-imp {
    border-bottom: 0 !important;
}

/* Calendar / list view toggle (PreApprvVisitor List).
   Must use `input[switch] + label...` so height/width beat app-dark `input[switch] + label`
   (height: 24px; width: 56px). A lone class lost to that selector after CSP moved inline styles here. */
input[switch] + label.switch-calendar-list-label {
    height: 40px;
    width: 110px !important;
}

/* Finish button label (checking excel modal) */
.btn-finish-inner {
    font-size: 17px;
    line-height: 20px;
    font-weight: 600;
    color: #ffffff;
}

/* Bootstrap toggle switch companion label (gender, etc.) */
.bootstrap-toggle-switch-label {
    top: 16px;
    left: 40px;
    width: 70px !important;
}

/* Bootstrap toggle label offset (left: 30px / 112px — ApplicationUsers, FreqVisitor, SystemConfig) */
.bootstrap-toggle-switch-label-left30 {
    top: 16px;
    left: 30px;
    width: 70px !important;
}
.bootstrap-toggle-switch-label-left112 {
    top: 16px;
    left: 112px;
    width: 70px !important;
}

/* --- Component: Password Toggle Eye Icon --- */
.password-toggle {
    margin-top: -26px;
    cursor: pointer;
    position: absolute;
}
.password-toggle.toggle-sm { margin-left: 401px; }
.password-toggle.toggle-md { margin-left: 467px; }
.password-toggle.toggle-lg { margin-left: 540px; }

/* --- Component: Dropzone File Upload --- */
.dropzone-upload {
    background: #F2F8FF;
    border: 2px dashed #006CEB;
}

/* --- Component: Import Modal --- */
.import-modal-title {
    font-weight: 500;
    font-size: 25px;
    line-height: 40px;
    letter-spacing: -0.5px;
    color: #e9ecef;
}
.import-modal-desc {
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #e9ecef;
}
.import-check-title {
    font-weight: 500;
    font-size: 25px;
    line-height: 40px;
    letter-spacing: -0.5px;
    /* Dark theme modals use #32394e — light title matches Import modal (.import-modal-title). */
    color: #e9ecef;
}
.import-stat-blue {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #006CEB;
}
.import-stat-detail {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #737C87;
}
.import-stat-error {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #DE2F1B;
}
.import-label {
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: -0.2px;
    color: #666666;
}

/* Commented template in List.cshtml (error row hint) */
.import-error-row-hint {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.2px;
    color: #006ceb;
}

/* --- Component: Visitor Status Badge (List.cshtml) --- */
.visitor-status-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #adb5bd;
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* Excel check result modal — dark card/modal body (bootstrap-dark) */
#checkingExcelModal .modal-body a {
    color: #85b8ff;
    text-decoration: underline;
}
#checkingExcelModal .modal-body a:hover {
    color: #b6d4fe;
}
#checkingExcelModal .import-label {
    color: #ced4da;
}
#checkingExcelModal .import-error-row-hint {
    color: #85b8ff;
}

/* --- Progress Bar Variants --- */
.progress-bar-blue-imp { background-color: #5DA7FE !important; }
.progress-bar-red-imp { background-color: #FFAFAF !important; }

/* --- Login Page Specific --- */
.login-input-icon {
    margin-left: 1200px;
    width: 33px;
    height: 30px;
    background-color: #626ed4 !important;
    border-radius: 0px;
}
/* User icon strip — 15px top offset (Logins/Index) */
.login-input-icon-mt15 {
    margin-left: 1200px;
    margin-top: 15px;
    width: 33px;
    height: 30px;
    background-color: #626ed4 !important;
    border-radius: 0px;
}
.login-input-icon-user {
    background-color: #626ed4 !important;
    width: 23px;
    height: 28px;
    border-radius: 0px;
    margin-left: 5px;
}
.login-input-icon-key {
    background-color: #626ed4 !important;
    width: 29px;
    height: 25px;
    border-radius: 0px;
    margin-left: 5px;
    margin-top: 3px;
}
.login-group7 {
    margin-left: -80px;
    margin-top: 15px;
}
.login-logo {
    margin-top: 155px;
    margin-left: 1027px;
}
.login-email-section {
    margin-top: -100px;
    margin-left: 19px;
}
.login-password-section {
    margin-top: -123px;
    margin-left: 19px;
}
.login-forgot-link {
    margin-left: 72px;
}
.login-input-icon-mt20 {
    margin-left: 1200px;
    margin-top: 20px;
    width: 33px;
    height: 30px;
    background-color: #626ed4 !important;
    border-radius: 0px;
}
/* Email row icon strip: matches legacy margin-top: 15px */
.login-input-icon-mt15 {
    margin-left: 1200px;
    margin-top: 15px;
    width: 33px;
    height: 30px;
    background-color: #626ed4 !important;
    border-radius: 0px;
}
.login-bottom-group {
    margin-top: 50px;
    margin-left: -275px;
}

/* Sign In button (Logins/Index.cshtml) */
.login-btn-signin {
    position: absolute;
    left: 1020px;
    top: -159px;
    width: 120px;
    height: 36px;
    margin-top: 540px;
    text-align: center;
    font-family: "MS Sans Serif", sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    overflow: visible;
    color: #fff;
    border-radius: 8px;
    border-color: #626ed4 !important;
    transition: all 0.3s ease-out;
    cursor: pointer;
    background-color: #626ed4 !important;
}

/* --- Pages/Index.cshtml (Public Login) Specific --- */
.pages-login-card {
    padding-top: 73px;
    padding-bottom: 20px;
}
.pages-login-logo {
    background-color: #333547 !important;
    width: 90px;
    height: 84px;
}
.pages-login-card-bg {
    background-color: #333547;
    padding-top: 78px;
}

/* --- Btn/Button Overrides --- */
.btn-pink-imp {
    margin-right: 10px;
    background-color: #ec4561 !important;
}
.btn-blue-brand {
    background: #006CEB;
    color: #FFFFFF;
}
.btn-finish {
    width: 78px;
    height: 44px;
    background: #006CEB;
}

/* --- Font Family --- */
.font-sans-serif { font-family: "MS Sans Serif"; }

/* --- Max Height --- */
.max-h-230 { max-height: 230px; }

/* --- Bottom --- */
.bottom-10-imp { bottom: 10px !important; }

/* --- Spacing Overrides (not in BS4) --- */
.mt-neg14 { margin-top: -14px; }
.pr-20 { padding-right: 20px; }
.pt-73 { padding-top: 73px; }
.pb-20 { padding-bottom: 20px; }
.pt-78 { padding-top: 78px; }
.mt-px-10 { margin-top: 10px; }

/* Demo wizard: gender switch label (smaller top offset than PreApprvVisitor) */
.switch-gender-label-demo {
    top: 7px;
    width: 70px !important;
}

/* Legacy commented template — Pages/Index.cshtml */
.pages-login-legacy-accountbg {
    background: url('/assets/images/VMSLoginNew1.png');
    background-size: cover;
    background-position: center;
    height: 603px;
    left: 420px;
    width: 929px;
}