/* =====================================================================
   LoadMaster - Security UI Brand Overrides
   ---------------------------------------------------------------------
   Layered ON TOP OF the centralized framework Security CSS package
   (MeyerTechnologies.Security Web.Views assets: login.css / admin.css /
   passwordStrength.css). The package ships the shared RMG baseline; this
   file contains ONLY LoadMaster's brand deltas and MUST be loaded AFTER
   the package CSS so these rules win.

   Brand deltas:
     - LoadMaster primary accent #143d58 (package baseline is #102D6F)
     - Branded login header banner (.login-header) not present in package
   ===================================================================== */

/* Branded login header banner -- LoadMaster-specific element rendered
   above the login card; carries the brand color and sizes its logo. */
.login-header {
    background-color: #143d58;
    padding: 15px 0;
}

.login-header img {
    height: 45px;
}

/* Primary brand accent -- card border, primary button / checked control,
   and link color on the login / account cards. */
.account-card-box .card {
    border: 4px solid #143d58;
}

.account-card-box .btn-primary,
.account-card-box .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #143d58;
    border-color: #143d58;
}

.account-card-box a {
    color: #143d58;
}

/* Password-strength meter placement fix.
   The framework's passwordStrength.css floats the meter left (.PasswordStrengthContainer
   { float:left }), which was authored for a stacked label/input layout. Inside this
   portal's floating-label fields the floated 120px meter lands on top of the absolutely
   positioned floating label and pushes the input down (it renders between the label and
   the field). Take it out of flow and pin it to the top-right of the field so the label
   (top-left) and meter (top-right) share the row and the input keeps its position. */
.floating-labels .field-input-wrapper > .PasswordStrengthContainer {
    float: none;
    position: absolute;
    top: 6px;
    right: 8px;
    margin-top: 0;
    z-index: 4; /* sit above the floating label */
    pointer-events: none; /* purely decorative — never intercept clicks on the field */
}

/* Import Users button — the framework renders #btnImportUsers as .btn-dark
   (#343a40), which reads as nearly the same near-black as the primary brand
   accent (#143d58) sitting right next to it. Recolor it to the theme's secondary
   grey so the two toolbar buttons are clearly distinct. The id outranks the
   .btn-dark class, so no !important is needed; hover / focus / active mirror the
   Bootstrap .btn-secondary states. */
#btnImportUsers,
#btnImportUsers.btn-dark {
    background-color: #6c757d;
    border-color: #6c757d;
}

#btnImportUsers:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

#btnImportUsers:focus,
#btnImportUsers.focus {
    box-shadow: 0 0 0 0.15rem rgba(130, 138, 145, 0.5);
}

#btnImportUsers:not(:disabled):not(.disabled):active,
#btnImportUsers:not(:disabled):not(.disabled).active {
    background-color: #545b62;
    border-color: #4e555b;
}

/* The role/portal mini-grids inside the New/Edit User dialog sit in a narrow body
   (< 600px), which trips the grid's responsive card layout — a CSS *container*
   query (`@container (max-width: 600px)`), not a viewport one — and collapses the
   compact 3-column table into stacked cards. That wraps the Allow-Assign toggle
   and forces a scrollbar. These admin grids should stay tabular, so opt them out
   of the container query (the id selector outranks `.mt-grid-responsive`). */
#UserRoleList.mt-grid-responsive,
#UserPortalList.mt-grid-responsive {
    container-type: normal;
}