:root {
    /* Paleta extraida de _docs/logos/Office Hair Home.png — ver _docs/paleta-e-fontes.md */
    --oh-brown-espresso: #3B2A22;
    --oh-brown-dark: #2A1D17;
    --oh-cream: #FBF7F2;
    --oh-cream-soft: #F3ECE2;
    --oh-champagne: #E4D3B8;
    --oh-rose: #C97D8B;
    --oh-white: #FFFFFF;

    /* Command-center — sidebar/topbar escuros do painel do tenant (redesign, ver CLAUDE.md) */
    --oh-ink: #17110D;
    --oh-ink-soft: #221A13;
    --oh-ink-border: rgba(251, 247, 242, .08);
    --oh-ink-text: #EDE3D7;
    --oh-ink-text-muted: rgba(237, 227, 215, .56);
    --oh-success: #4C9A6A;
    --oh-warning: #D6A343;
    --oh-danger: #C25454;
    --oh-info: #6C8FBF;

    --bs-primary: var(--oh-brown-espresso);
    --bs-primary-rgb: 59, 42, 34;
    --bs-body-bg: var(--oh-cream);
    --bs-body-font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--oh-cream);
    color: var(--oh-brown-dark);
}

h1, h2, h3 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    color: var(--oh-brown-espresso);
}

.navbar,
.sidebar {
    background-color: var(--oh-white) !important;
    border-color: var(--oh-cream-soft) !important;
}

.brand-title {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    color: var(--oh-brown-espresso);
}

.brand-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--oh-brown-dark);
}

.btn-primary {
    background-color: var(--oh-brown-espresso);
    border-color: var(--oh-brown-espresso);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--oh-brown-dark);
    border-color: var(--oh-brown-dark);
}

.btn-accent {
    background-color: var(--oh-rose);
    border-color: var(--oh-rose);
    color: var(--oh-white);
}

.card {
    background-color: var(--oh-white);
    border-color: var(--oh-cream-soft);
}

.badge-champagne {
    background-color: var(--oh-champagne);
    color: var(--oh-brown-dark);
}

/*
 * Checkbox/switch — reset do posicionamento float+margin-negativo padrao do Bootstrap (fragil:
 * qualquer classe extra no mesmo elemento, ou combinar com coluna de grid, desalinha o input em
 * relacao ao texto do label — foi a causa de 2 bugs visuais seguidos nesta tela). Flexbox com
 * gap garante input e label sempre centralizados na mesma linha, em qualquer combinacao de
 * classes/wrapper — corrige de vez, nao so o sintoma pontual.
 */
.form-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-left: 0;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

.form-check .form-check-label {
    margin-bottom: 0;
}

/* Switches (toggles on/off) usam o rosé como acento — diferencia de checkbox de selecao (espresso) */
.form-switch .form-check-input {
    width: 2.5em;
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--oh-rose);
    border-color: var(--oh-rose);
}

.form-switch .form-check-input:focus {
    border-color: var(--oh-rose);
    box-shadow: 0 0 0 .2rem rgba(201, 125, 139, .25);
}

.form-check-input {
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
}