/* ======================================================
   .react — compact layout for all React screens
   Applied via #react-root.react in the screen template
   ====================================================== */

/* ---- Page wrapper ---- */
.react {
    font-size: 13px;
}

/* ---- Two-column grid for integration section panels ---- */
.react #integration-content-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    align-items: start;
}

@media (max-width: 1024px) {
    .react #integration-content-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ---- Section cards ---- */
.react .content-box {
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin-bottom: 10px;
    overflow: hidden;
}

/* ---- Section header ---- */
.react .content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: #f5f7fa;
    border-bottom: 1px solid #dde1e7;
    min-height: unset;
}

.react .content-header h1 {
    font-size: 13px !important;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    color: #333;
}

.react .content-header-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-left: 8px;
}

.react .content-header-btn a {
    color: #666;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.react .content-header-btn a:hover {
    color: #333;
}

/* ---- Section body ---- */
.react .box-body,
.react .content.box-body {
    padding: 12px !important;
}

/* ---- Forms ---- */
.react .form-group {
    margin-bottom: 8px;
}

.react label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
    display: block;
    color: #444;
}

.react .form-control {
    height: 30px;
    padding: 0px 8px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #ccd0d8;
    box-shadow: none;
    transition: border-color .15s;
}

/* Restore a visible dropdown indicator for compact React selects. */
.react select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
    background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.react .form-control:focus {
    border-color: #5b9bd5;
    box-shadow: 0 0 0 2px rgba(91,155,213,.18);
    outline: none;
}

.react textarea.form-control {
    height: auto;
    min-height: 60px;
    resize: vertical;
}

/* Don't stretch buttons that also have form-control class */
.react button.form-control,
.react .btn.form-control {
    height: 30px;
    width: auto;
    max-width: 300px;
}

/* ---- Buttons ---- */
.react .btn {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 3px;
    height: auto;
}

.react .btn.btn-sm {
    padding: 2px 8px;
    font-size: 11px;
}

/* ---- Tables ---- */
.react .table {
    font-size: 12px;
    margin-bottom: 0;
}

.react .table > thead > tr > th,
.react .table > thead > tr > td {
    padding: 6px 8px;
    font-size: 12px;
    vertical-align: middle;
    background: #f5f7fa;
    border-bottom: 2px solid #dde1e7;
}

.react .table > tbody > tr > td {
    padding: 5px 8px;
    font-size: 12px;
    vertical-align: middle;
}

.react .table-condensed > thead > tr > th,
.react .table-condensed > thead > tr > td,
.react .table-condensed > tbody > tr > td {
    padding: 4px 6px;
    font-size: 12px;
}

/* ---- Misc ---- */
.react hr {
    margin: 10px 0;
    border-color: #e8eaed;
}

/* ---- Inline level badges (e.g. log level) ---- */
.react .alert.alert-info,
.react .alert.alert-warning,
.react .alert.alert-danger {
    padding: 2px 7px;
    margin-bottom: 0;
    border-radius: 3px;
    font-size: 11px;
    display: inline-block;
    line-height: 1.5;
}

/* ---- Toast notifications (AlertBox popups, top-right of the viewport) ---- */
/* Container is appended to <body> by utils/AlertBox.js, outside the .react wrapper. */
#skumine-toast-container {
    position: fixed;
    top: 60px;
    right: 15px;
    z-index: 10500; /* above AdminLTE header and Bootstrap modals (1050) */
    width: 320px;
    max-width: calc(100vw - 30px);
}

#skumine-toast-container .skumine-toast {
    position: relative;
    margin-bottom: 10px;
    padding: 10px 30px 10px 12px;
    border-radius: 3px;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    word-wrap: break-word;
    animation: skumine-toast-in 0.25s ease-out;
}

#skumine-toast-container .skumine-toast-hide {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

#skumine-toast-container .skumine-toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
}

@keyframes skumine-toast-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Checkbox rows ---- */
.react .checkbox {
    margin: 3px 0;
}

.react .checkbox label {
    font-weight: normal;
    font-size: 13px;
    color: #333;
    padding-left: 20px;
    cursor: pointer;
}

/* Match the Bootstrap checkbox layout the React sections expect: the label reserves left space
   and the native checkbox is pulled back into that gutter so it doesn't sit on top of the text. */
/* ---- Input groups ---- */
.react .input-group .form-control {
    height: 28px;
}

.react .input-group-btn .btn {
    height: 28px;
    padding: 3px 10px;
}

.react .input-group-addon {
    padding: 0 8px;
    font-size: 13px;
    line-height: 28px;
    height: 28px;
}

/* ---- text-right spacing for action buttons below tables ---- */
.react .text-right .btn {
    margin-top: 8px;
}

.content_body_wrapper .text-muted {
    color: black;
    background: #ededed;
    padding: 5px;
    margin-bottom: 10px;
    margin-top: 1px;
    border-radius: 5px;
    font-size: 11px;
    display: block;
}

/* React screens want the tighter, marginless box; the legacy pages above keep their spacing. */
.content_body_wrapper .react .text-muted {
    margin: 0;
}

input[type=checkbox], input[type=radio] {
    margin: 0 5px 0px 0 !important;
}

.fa-exclamation-triangle {
    color: red !important;
    margin-left: 0 !important;
}

/* ---- Source Price / Display Price switch (order details popup) ---- */
/* Same class names and look as the DMC order-edit switch, so the two products read the same.
   The real checkbox is hidden and the rounded span is what the reader sees and clicks; the span
   must stay the NEXT sibling of the input, because the checked state is styled through `+`. */
.order-price-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 24px;
    vertical-align: middle;
    margin-bottom: 0;
}

.order-price-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.order-price-switch .slider-round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.order-price-switch .slider-round:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
}

.order-price-switch input:checked + .slider-round {
    background-color: #008d4c;
}

.order-price-switch input:focus + .slider-round {
    box-shadow: 0 0 1px #ccc;
}

.order-price-switch input:checked + .slider-round:before {
    transform: translateX(36px);
}
/* Google reCAPTCHA badge, shown on the pre-session pages when the check is switched on. Collapsed to the
   logo and widened on hover or keyboard focus. Google's own floating badge is hidden because this stands
   in its place — their terms allow that as long as the Privacy and Terms links are shown, which they are. */
.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-branding {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 40px;
    padding: 8px;
    overflow: hidden;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    color: #555;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    transition: max-width 0.3s ease;
}

.recaptcha-branding:hover,
.recaptcha-branding:focus-within {
    max-width: 340px;
}

.recaptcha-branding img {
    flex: none;
}

.recaptcha-branding a {
    color: #555;
    text-decoration: underline;
}

/* ======================================================
   Sign-in screen (LoginScreen) — DMC-style split layout
   ====================================================== */
body.skumine-preauth {
    margin: 0;
}

.skumine-login-split {
    display: flex;
    min-height: 100vh;
}

/* Left promo panel: a cover photo, hidden on small screens where the form stacks alone. */
.skumine-login-promo {
    flex: 1 1 45%;
    background-color: #f5f7fa;
    background-size: cover;
    background-position: center;
}

/* Right column holds the centred form. */
.skumine-login-form-col {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
}

.skumine-login-form {
    width: 100%;
    max-width: 380px;
}

.skumine-login-logo {
    display: block;
    margin: 0 auto 28px;
    max-width: 200px;
}

.skumine-login-form h1 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 18px;
    text-align: center;
}

.skumine-login-form .lead-text {
    font-size: 13px;
    color: #555;
    margin-bottom: 16px;
    text-align: center;
}

/* Floating-style label sitting inside the top of the input. */
.skumine-login .form-label-group {
    position: relative;
    margin-bottom: 14px;
}

.skumine-login .form-label-group > label {
    position: absolute;
    top: 6px;
    left: 12px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    pointer-events: none;
}

.skumine-login .form-label-group > input.form-control {
    height: 50px;
    padding: 20px 12px 6px;
    font-size: 14px;
}

.skumine-login .btn-primary {
    width: 100%;
    background: #337ab7;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 11px 20px;
}

.skumine-login .btn-primary:hover,
.skumine-login .btn-primary:focus {
    background: #2b689c;
    color: #fff;
}

.skumine-login .btn-primary[disabled] {
    opacity: .65;
}

.skumine-login .btn-resend {
    width: 100%;
    margin-top: 10px;
    background: #fff;
    border: 1px solid #ccd0d8;
    border-radius: 3px;
    color: #337ab7;
    font-weight: 600;
    padding: 9px 20px;
}

.skumine-login .btn-resend[disabled] {
    color: #999;
    cursor: not-allowed;
}

.skumine-login .login-links {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
}

.skumine-login .login-links a {
    color: #337ab7;
    font-weight: 600;
}

.skumine-login .login-links p {
    margin: 6px 0 0;
    color: #555;
}

/* Trust-device checkbox: the native input is made invisible and a blue tick box is drawn on the label,
   matching the DMC look. The box sits in a fixed left gutter and the label text starts after it, so the
   two never overlap — unlike the shared .checkbox rows, whose gutter the global input margin defeats. */
.skumine-login .login-check {
    position: relative;
    padding-left: 26px;
    margin: 10px 0 16px;
    min-height: 18px;
}

.skumine-login .login-check input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.skumine-login .login-check label {
    display: inline-block;
    margin: 0;
    font-size: 13px;
    font-weight: normal;
    color: #333;
    line-height: 18px;
    cursor: pointer;
}

.skumine-login .login-check label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.skumine-login .login-check input[type=checkbox]:checked + label::before {
    background: #337ab7;
    border-color: #337ab7;
}

.skumine-login .login-check input[type=checkbox]:checked + label::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    font-size: 11px;
    color: #fff;
    position: absolute;
    left: 3px;
    top: 0;
    line-height: 18px;
}

.skumine-login .login-check input[type=checkbox]:focus + label::before {
    box-shadow: 0 0 0 2px rgba(51,122,183,.25);
}

.skumine-login .login-footer {
    margin-top: 26px;
    text-align: center;
    font-size: 11px;
    color: #999;
}

@media (max-width: 767px) {
    .skumine-login-promo {
        display: none;
    }

    .skumine-login-split {
        min-height: auto;
    }
}