/* Passbox-specific styles.
   The shared BRAWLBOX design system (tokens, components, theme toggle) lives in
   Suitebox.Theme → _content/Suitebox.Theme/css/brawlbox-theme.css.
   Only the password-tool layout specifics remain below. */

/* Centre the tool card on the page */
.pw-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.pw-card {
    width: 100%;
    max-width: 560px;
}

.control-group {
    margin-bottom: 1.5rem;
}

.control-group > label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.requirements-group h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.req-inputs {
    display: flex;
    gap: 1rem;
}

.req-inputs > div {
    flex: 1;
}

.req-inputs label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Monospace for the character pool / output so passwords are legible */
#charPool,
#output {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

textarea.form-control {
    resize: vertical;
}

.error-text {
    color: var(--brand-coral);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Floating theme toggle (top-right) */
.theme-toggle {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    z-index: 1000;
}