/* Albright Labs Accounts — public auth + dashboard styles.
   Mirrors the visual system used by saasbase's branded login pages in the
   four product apps so the suite feels coherent. */

:root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;
    --abl-primary: #007bff;
    --abl-primary-hover: #0069d9;
    --abl-primary-active: #0062cc;
    --abl-text: #212529;
    --abl-muted: #6c757d;
    --abl-bg: #f5f5f5;
    --abl-border: #ced4da;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--abl-text);
}

/* Loader (used on auth pages only) */
#loader {
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    position: fixed;
    width: 48px;
    height: 48px;
    z-index: 9999;
    animation: rotate 750ms linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Auth shell — two-column hero + form, full viewport */
#login {
    background-color: var(--abl-bg);
    height: 100vh;
    width: 100%;
    opacity: 0;
}

#login .container {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

/* Brand lockup top-left */
.brand-lockup {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-lockup:hover { text-decoration: none; }

.brand-lockup #logo {
    max-width: 52px;
}

.brand-lockup .brand-text {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
}

#login .brand-lockup .brand-name {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    line-height: 1.1;
    text-decoration: none;
}

#login .brand-lockup .brand-name:hover { color: #fff; text-decoration: none; }

#login .brand-attribution {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: 2px;
}

#login .brand-attribution:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

/* Left side hero image + overlay + welcome message */
#login .bg-white:nth-of-type(1) .overlay {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

#login .bg-white .welcome-message {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

#login .bg-white .welcome-message h2 {
    transform: translateY(-50%);
    position: absolute;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0;
}

/* Right side form area */
#login-form-form {
    padding: 40px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
}

/* Buttons - flat / no border radius */
#login .btn { border-radius: 0; }

#login .btn-primary {
    background-color: var(--abl-primary);
    border-color: var(--abl-primary);
}

#login .btn-primary:hover {
    background-color: var(--abl-primary-hover);
    border-color: var(--abl-primary-active);
}

#login .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

/* Floating-label form fields */
#login .form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

#login .form-label-group input {
    height: auto;
    border-radius: 0;
    border-width: 1px;
}

#login .form-label-group input:focus {
    box-shadow: none;
    border-color: var(--abl-primary);
}

#login .form-label-group > input,
#login .form-label-group > label {
    padding: var(--input-padding-y) var(--input-padding-x);
}

#login .form-label-group > label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0;
    line-height: 1.5;
    color: #495057;
    border: 1px solid transparent;
    transition: all .1s ease-in-out;
    pointer-events: none;
}

#login .form-label-group input::-webkit-input-placeholder { color: transparent; }
#login .form-label-group input:-ms-input-placeholder { color: transparent; }
#login .form-label-group input::-ms-input-placeholder { color: transparent; }
#login .form-label-group input::-moz-placeholder { color: transparent; }
#login .form-label-group input::placeholder { color: transparent; }

#login .form-label-group input:not(:placeholder-shown) {
    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
    padding-bottom: calc(var(--input-padding-y) / 3);
}

#login .form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: calc(var(--input-padding-y) / 3);
    padding-bottom: calc(var(--input-padding-y) / 3);
    font-size: 12px;
    color: #777;
}

.alert { border-radius: 0; }

#login a { color: var(--abl-primary); }
#login a:hover { color: #0056b3; }

/* Auth-page footer */
footer.text-muted {
    background-color: #fff;
    border-top: 1px solid #f3f4f6;
}

footer.text-muted p,
footer.text-muted small {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    color: var(--abl-muted) !important;
    font-size: 14px;
}

/* Mobile responsive — collapse the two-column layout */
@media (max-width: 767px) {
    #login {
        height: auto;
        min-height: 100vh;
    }

    #login .container,
    #login-form-form {
        position: relative;
        transform: none;
        left: 0;
        top: 0;
    }

    #login .container {
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .brand-lockup {
        position: relative;
        left: 0;
        top: 0;
        margin: 20px;
    }

    #login .brand-lockup .brand-name {
        color: var(--abl-text);
        text-shadow: none;
    }

    #login .brand-lockup .brand-name:hover { color: var(--abl-text); }

    #login .brand-attribution { color: #999; }
    #login .brand-attribution:hover { color: var(--abl-primary); }
}

/* IE / EdgeHTML legacy support — drop the floating label trick */
@supports (-ms-ime-align: auto) {
    #login .form-label-group > label { display: none; }
    #login .form-label-group input::-ms-input-placeholder { color: #777; }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #login .form-label-group > label { display: none; }
    #login .form-label-group input:-ms-input-placeholder { color: #777; }
}

/* === Dark-mode overrides for the auth shell (login / signup / forgot /
   verify / logout). Hero image stays intact; the form column, body, footer,
   inputs, and alerts flip to a dark surface. Overrides Bootstrap 4 utility
   classes (.bg-white, .text-muted, .form-control) since the CDN baseline
   is hardcoded to light values. === */

@media (prefers-color-scheme: dark) {
    :root {
        --abl-primary: #60a5fa;
        --abl-primary-hover: #93c5fd;
        --abl-primary-active: #3b82f6;
        --abl-text: #fafafa;
        --abl-muted: #a1a1aa;
        --abl-bg: #0f0f10;
        --abl-border: #3f3f46;
    }

    html { color-scheme: dark; }
    body { color: var(--abl-text); background: var(--abl-bg); }

    /* Bootstrap 4 utility classes are hardcoded from the CDN — promote
       specificity and use !important to win the cascade. */
    #login .bg-white { background-color: #18181b !important; }
    #login { background-color: var(--abl-bg); }

    /* Brand lockup wordmark — already light on the desktop overlay; keep
       it light on the mobile (collapsed) layout where it would otherwise
       fall back to --abl-text. */
    @media (max-width: 767px) {
        #login .brand-lockup .brand-name { color: var(--abl-text); }
        #login .brand-lockup .brand-name:hover { color: var(--abl-text); }
        #login .brand-attribution { color: var(--abl-muted); }
    }

    /* Form fields */
    #login .form-control {
        background-color: #1f1f23;
        border-color: var(--abl-border);
        color: var(--abl-text);
    }
    #login .form-control:focus {
        background-color: #1f1f23;
        color: var(--abl-text);
        border-color: var(--abl-primary);
    }
    #login .form-label-group > label { color: #a1a1aa; }
    #login .form-label-group input:not(:placeholder-shown) ~ label { color: #a1a1aa; }

    /* Custom checkbox (remember me, ToS) */
    #login .custom-control-label { color: var(--abl-text); }
    #login .custom-control-label::before {
        background-color: #1f1f23;
        border-color: var(--abl-border);
    }

    /* Form headings + paragraph muted text inside the form column */
    #login p, #login .h5, #login h1, #login h2, #login h3, #login h4, #login h5 {
        color: var(--abl-text);
    }
    #login .text-muted { color: var(--abl-muted) !important; }

    /* Buttons — keep the primary CTA bright; secondary links use the
       primary token already. */
    #login .btn-primary {
        background-color: var(--abl-primary);
        border-color: var(--abl-primary);
        color: #0f0f10;
    }
    #login .btn-primary:hover,
    #login .btn-primary:focus {
        background-color: var(--abl-primary-hover);
        border-color: var(--abl-primary-hover);
        color: #0f0f10;
    }

    /* Alerts (top-of-form flash slot) — soften Bootstrap's near-white
       backgrounds to fit the dark shell. */
    #login .alert-success {
        background-color: rgba(2, 122, 72, 0.18);
        border-color: rgba(2, 122, 72, 0.4);
        color: #6ce9a6;
    }
    #login .alert-danger {
        background-color: rgba(180, 35, 24, 0.18);
        border-color: rgba(180, 35, 24, 0.4);
        color: #f97066;
    }

    /* Footer */
    footer.text-muted {
        background-color: var(--abl-bg);
        border-top-color: var(--abl-border);
    }
    footer.text-muted p,
    footer.text-muted small { color: var(--abl-muted) !important; }

    /* Loader spinner — bump contrast against the dark backdrop */
    #loader circle { stroke: var(--abl-primary); }
}

/* === App-shell layout (post-login dashboard / account / org)
   Temporary — these pages will move to the October backend. === */

.abl-app {
    min-height: 100vh;
    background: var(--abl-bg);
}

.abl-app-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.abl-app-header .abl-brand {
    font-weight: 700;
    color: var(--abl-text);
    text-decoration: none;
    font-size: 16px;
}

.abl-app-header nav a {
    color: var(--abl-muted);
    margin-left: 16px;
    text-decoration: none;
    font-size: 14px;
}

.abl-app-header nav a:hover { color: var(--abl-text); }

.abl-app-main {
    padding: 32px 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.abl-launcher h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.abl-launcher .abl-section-sub { color: var(--abl-muted); margin: 0 0 22px; font-size: 14px; }

.abl-launcher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.abl-launcher-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 18px;
    text-decoration: none;
    color: var(--abl-text);
    display: block;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.abl-launcher-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(17, 24, 39, 0.07);
    text-decoration: none;
    color: var(--abl-text);
}

.abl-launcher-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.abl-launcher-name { font-weight: 600; font-size: 15px; }

.abl-launcher-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
}

.abl-launcher-card.is-active .abl-launcher-badge { background: #d1fae5; color: #047857; }
.abl-launcher-card.is-trial  .abl-launcher-badge { background: #fef3c7; color: #92400e; }

.abl-launcher-meta { color: var(--abl-muted); font-size: 12px; margin: 0; }

/* === Settings pages (account, org, mfa) === */

.abl-settings-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }

.abl-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 22px;
    margin-bottom: 18px;
}
.abl-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.abl-card h4 { margin: 18px 0 6px; font-size: 14px; font-weight: 700; }
.abl-card-sub { color: var(--abl-muted); font-size: 14px; margin: 0 0 14px; }
.abl-card-callout { border-left: 3px solid var(--abl-primary); background: #f0f7ff; }

.abl-card form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--abl-text);
}
.abl-card form input[type=text],
.abl-card form input[type=email],
.abl-card form input[type=tel],
.abl-card form input[type=password] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    border: 1px solid var(--abl-border);
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    background: #fff;
}
.abl-card form input:focus {
    outline: none;
    border-color: var(--abl-primary);
}
.abl-card form input:disabled {
    background: #f9fafb;
    color: var(--abl-muted);
}

.abl-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.abl-checkbox { display: flex; align-items: center; gap: 6px; padding-top: 18px; }
.abl-checkbox input { width: auto !important; margin: 0; }

.abl-card .btn { border-radius: 0; }
.abl-card .btn-primary {
    background: var(--abl-primary);
    border-color: var(--abl-primary);
    color: #fff;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 14px;
}
.abl-card .btn-primary:hover { background: var(--abl-primary-hover); }
.abl-card .btn-secondary {
    background: #fff;
    border: 1px solid var(--abl-border);
    color: var(--abl-text);
    padding: 8px 18px;
    font-size: 14px;
}
.abl-card .btn-danger {
    background: #fff;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
}
.abl-card .btn-danger:hover { background: #dc3545; color: #fff; }
.abl-card .btn-link {
    background: transparent;
    border: none;
    color: var(--abl-primary);
    padding: 0 6px;
    font-size: 13px;
}
.abl-card .btn-link.text-danger { color: #dc3545; }

.abl-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    margin-left: 6px;
}
.abl-pill-ok   { background: #d1fae5; color: #047857; }
.abl-pill-warn { background: #fef3c7; color: #92400e; }

.abl-help { color: var(--abl-muted); font-size: 12px; margin: 8px 0 0; }

.abl-meta-list { list-style: none; padding: 0; margin: 0; }
.abl-meta-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}
.abl-meta-list li:last-child { border-bottom: 0; }
.abl-meta-list span { color: var(--abl-muted); }

.abl-mfa-qr {
    text-align: center;
    margin: 16px 0;
    background: #fff;
    padding: 14px;
    border: 1px solid #e5e7eb;
    display: inline-block;
}
.abl-mfa-qr svg { display: block; max-width: 220px; height: auto; }

.abl-recovery-codes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
}
.abl-recovery-codes code {
    display: block;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-family: SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    text-align: center;
}

.abl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.abl-table th, .abl-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}
.abl-table th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--abl-muted);
}
.abl-actions { white-space: nowrap; }
.abl-actions .btn-sm { font-size: 12px; }