/* Sign-in page. Brand colours, font and corners come from tokens.css / the customer's theme.css. */
* { box-sizing: border-box; }

body {
    background: var(--dash-ground);
    font-family: var(--dash-font);
    color: var(--dash-ink);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* -- Header --------------------------------------------------- */
.dash-header {
    background: var(--dash-header-bg);
    border-bottom: var(--dash-header-border);
}
.dash-header-inner {
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
}
.dash-header img.logo {
    height: calc(var(--dash-logo-height) * .86);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: var(--dash-logo-filter);
    display: block;
}

/* -- Page ------------------------------------------------------ */
.page-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.login-outer { width: 100%; max-width: 460px; }

/* -- Card ------------------------------------------------------ */
.dash-card {
    background: var(--dash-surface);
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    border-radius: var(--dash-radius);
    overflow: hidden;
}
.dash-card-header {
    background: var(--dash-primary);
    color: #fff;
    padding: 1.25rem 1.75rem 1.1rem;
}
.dash-card-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .2rem;
}
.dash-card-header p {
    margin: 0;
    font-size: .83rem;
    color: rgba(255,255,255,.75);
}
.dash-rule { width: 36px; height: 3px; background: var(--dash-rule); margin-bottom: .65rem; }
.dash-card-body { padding: 1.75rem; }

/* -- Form ------------------------------------------------------ */
.form-label {
    font-weight: 700;
    font-size: .85rem;
    color: var(--dash-ink);
    margin-bottom: .3rem;
}
.form-control, .form-select {
    border: 2px solid var(--dash-field);
    font-size: .9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 3px rgba(var(--dash-accent-rgb), .18);
}
.input-group-text {
    border: 2px solid var(--dash-field);
    border-right: none;
    background: var(--dash-panel);
    color: var(--dash-primary);
}
.input-group .form-control { border-left: none; }
.form-select:disabled, .form-control:disabled {
    background-color: #e9ecef; color: #495057; opacity: 1; cursor: wait;
}
.form-check-input:checked { background-color: var(--dash-accent); border-color: var(--dash-accent); }
.form-check-input:focus { border-color: var(--dash-accent); box-shadow: 0 0 0 3px rgba(var(--dash-accent-rgb), .18); }

/* -- Primary button -------------------------------------------- */
.btn-dash-solid {
    background: var(--dash-primary);
    color: #fff;
    border: none;
    border-radius: var(--dash-radius);
    font-weight: 700;
    font-size: .95rem;
    padding: .65rem 1.5rem;
    transition: background .15s;
}
.btn-dash-solid:hover, .btn-dash-solid:active, .btn-dash-solid:focus-visible { background: var(--dash-primary-hover); color: #fff; }
.btn-dash-solid:focus-visible { outline: 3px solid var(--dash-accent); outline-offset: 3px; }
.btn-dash-solid:disabled { background: #495057; color: #fff; opacity: 1; cursor: wait; }

/* -- Footer ---------------------------------------------------- */
.dash-footer {
    background: var(--dash-header-bg);
    color: var(--dash-header-fg);
    font-size: .78rem;
    padding: .9rem 1.5rem;
    text-align: center;
    border-top: 4px solid var(--dash-rule);
}
.dash-footer a { color: inherit; text-decoration: underline; }
.dash-footer a:focus-visible { outline: 2px solid var(--dash-rule); outline-offset: 3px; }