/* ========================== */
/* CUSTOM BUTTONS */
/* ========================== */
.btn-app-primary{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}
.btn-app-primary:hover{
    background-color: var(--color-accent)!important;
    color: #FFFFFF !important;
}
.btn-app-primary:focus{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}
.btn-check:checked + .btn-app-primary{
    background-color: var(--color-brand-navy) !important;
    color: #FFFFFF !important;
}

.btn-app-secondary{
    background-color: var(--color-brand-navy) !important;
    color: #FFFFFF !important;
}
.btn-app-secondary:hover{
    background-color: var(--color-brand-navy)!important;
    color: #FFFFFF !important;
}
.btn-app-secondary:focus{
    background-color: var(--color-brand-navy) !important;
    color: #FFFFFF !important;
}

.btn-app-red{
    background-color: var(--color-danger) !important;
    color: #FFFFFF !important;
}
.btn-app-red:hover{
    background-color: var(--color-danger)!important;
    color: #FFFFFF !important;
}
.btn-app-red:focus{
    background-color: var(--color-danger) !important;
    color: #FFFFFF !important;
}

.btn-app-success{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}
.btn-app-success:hover{
    background-color: var(--color-success)!important;
    color: #FFFFFF !important;
}
.btn-app-success:focus{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}

.btn-app-yellow{
    background-color: var(--color-warning) !important;
    color: #FFFFFF !important;
}
.btn-app-yellow:hover{
    background-color: var(--color-warning)!important;
    color: #FFFFFF !important;
}
.btn-app-yellow:focus{
    background-color: var(--color-warning) !important;
    color: #FFFFFF !important;
}

.btn-purple{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}
.btn-purple:hover{
    background-color: var(--background-dark-purple) !important;
    color: #FFFFFF !important;
}
.btn-purple:focus{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}

.btn-light-green{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}
.btn-light-green:hover{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}
.btn-light-green:focus{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}

.btn-app-primary-white{
    background-color: #ffffff !important;
    color: var(--color-accent) !important;
}
.btn-app-primary-white:hover{
    background-color: #ffffff !important;
    color: var(--color-accent) !important;
}
.btn-app-primary-white:focus{
    background-color: #ffffff  !important;
    color: var(--color-accent)!important;
}

.btn-app-outline-primary{
    background-color: transparent !important;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-accent-dark) !important;
    box-shadow: none !important;
}
.btn-app-outline-primary:hover{
    background-color: var(--color-accent-light) !important;
    color: var(--color-accent-dark) !important;
}
.btn-app-outline-primary:focus{
    background-color: var(--color-accent-light) !important;
    color: var(--color-accent-dark) !important;
}
/* ========================== */
/* CUSTOM BACKGROUNDS */
/* ========================== */
.app-bg-gray{
    background-color: var(--color-text-muted) !important;
}
.app-bg-light-gray{
    background-color: var(--color-bg-surface-alt) !important;
}
.app-bg-primary{
    background-color: var(--color-accent) !important;
}
.app-bg-secondary{
    background-color: var(--color-brand-navy) !important;
}
.app-bg-purple{
    background-color: var(--color-accent) !important;
}
.app-bg-red{
    background-color: var(--color-danger) !important;
}
.app-bg-light-green{
    background-color: var(--color-success) !important;
}
.app-bg-orange{
    background-color: var(--color-warning) !important;
}
.app-bg-yellow{
    background-color: var(--color-warning) !important;
}
.app-bg-blue{
    background-color: var(--color-info) !important;
}
.app-bg-pink{
    background-color: var(--color-accent) !important;
}
.app-bg-dark-pink{
    background-color: var(--color-accent-dark) !important;
}
/* ========================== */
/* CUSTOM TEXT COLORS */
/* ========================== */
.app-text-primary{ 
    color: var(--color-accent) !important;
}
.app-text-secondary{ 
    color: var(--color-brand-navy) !important;
}
.app-text-tertiary{ 
    color: var(--color-accent-dark) !important;
}
.app-text-light-green{
    color: var(--color-success) !important;
}
.app-text-dark-green{
    color: var(--color-success) !important;
}
.app-text-yellow{
    color: var(--color-warning) !important;
}
.app-text-blue{
    color: var(--color-info) !important;
}
.app-text-purple{
    color: var(--color-accent) !important;
}
.app-text-orange{
    color: var(--color-warning) !important;
}
.app-text-red{
    color: var(--color-danger) !important;
}
/* ========================== */
/* CUSTOM TEXT FONT SIZES */
/* ========================== */
.app-fs-1{
    font-size: 1.2rem !important;
}
.app-fs-2{
    font-size: 1.1rem !important;
}
.app-fs-3{
    font-size: 1rem !important;
}
.app-fs-4{
    font-size: 0.9rem !important;
}
.app-fs-5{
    font-size: 0.8rem !important;
}
.app-fs-6{
    font-size: 0.7rem !important;
}
.app-fs-7{
    font-size: 0.6rem !important;
}
.app-fs-8{
    font-size: 0.5rem !important;
}
/* ========================== */
/* CUSTOM TEXT FORMATS */
/* ========================== */
.app-text-uppercase{
    text-transform: uppercase !important;
}
.app-text-lowercase{
    text-transform: lowercase !important;
}
.app-text-capitalize{
    text-transform: capitalize !important;
}
/* ========================== */
/* CUSTOM BORDERS */
/* ========================== */
.app-border-orange{
    border: 2px solid var(--color-warning) !important;
}
.app-border-primary{
    border: 2px solid var(--color-accent) !important;
}
/* ========================== */
/* CUSTOM BADGES */
/* ========================== */
.app-badge-primary{
    background-color: var(--color-accent) !important;
    color: white !important;
}
.app-badge-secondary{
    background-color: var(--color-brand-navy) !important;
    color: white !important;
}
.app-badge-tertiary{
    background-color: var(--color-accent-dark) !important;
    color: white !important;
}
.app-badge-yellow{
    background-color: var(--color-warning) !important;
    color: white !important;
}
.app-badge-blue{
    background-color: var(--color-info) !important;
    color: white !important;
}
.app-badge-light-green{
    background-color: var(--color-success) !important;
    color: white !important;
}
.app-badge-red{
    background-color: var(--color-danger) !important;
    color: white !important;
}

.app-badge-offer-1{
    background-color: #E53935 !important;
    color: white !important;
}
.app-badge-offer-2{
    background-color: #6A1B9A !important;
    color: white !important;
}
.app-badge-offer-3{
    background-color: #1565C0 !important;
    color: white !important;
}
.app-badge-offer-4{
    background-color: #FB8C00 !important;
    color: white !important;
}
.app-badge-offer-5{
    background-color: #43A047 !important;
    color: white !important;
}
.app-badge-offer-6{
    background-color: #00ACC1 !important;
    color: white !important;
}
.app-badge-offer-7{
    background-color: #546E7A !important;
    color: white !important;
}
/* ========================== */
/* CUSTOM Z-INDEX */
/* ========================== */
.app-z-top{
    z-index: 5555 !important;
}
/* ========================== */
/* CUSTOM PADDING */
/* ========================== */
.app-p-0{
    padding: 0 !important;
}
/* ========================== */
/* CUSTOM IMAGE CLASS */
/* ========================== */
.app-img-fluid{
    width: 100% !important;
    height: -webkit-fill-available !important;
}
/* ========================== */
/* CUSTOM WIDTH CLASS */
/* ========================== */
.app-w-100{
    width: 100% !important;
}
.app-w-90{
    width: 90% !important;
}
.app-w-80{
    width: 80% !important;
}
.app-w-70{
    width: 70% !important;
}
.app-w-60{
    width: 60% !important;
}
.app-w-50{
    width: 50% !important;
}
.app-w-40{
    width: 40% !important;
}
.app-w-30{
    width: 30% !important;
}
.app-w-20{
    width: 20% !important;
}
.app-w-10{
    width: 10% !important;
}
/* ========================== */
/* CUSTOM INPUT */
/* ========================== */
.app-label{
    font-size: 0.92rem !important;
    margin-bottom: 0.2rem !important;
}
.app-input{
    font-size: 0.90rem !important;
}

/* ==========================================================================
   TOOLTIPS DE CÁLCULO
   Cartão branco no padrão do protótipo: título, descrição, linhas
   "rótulo | valor" e quadro de fórmula, montados pela classe CalcTooltip. Fica
   aqui, e não em view_offer.css, porque a dica serve a qualquer tela: a
   precificação, os relatórios dela e a ficha do cliente. O MDB anexa o balão
   ao body, por isso os seletores do balão não dependem da tela.
   ========================================================================== */
.app-calc-info {
    margin-left: 0.25rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    cursor: help;
    transition: color var(--t-fast);
}
.app-calc-info:hover,
.app-calc-info:focus-visible {
    color: var(--color-accent);
    outline: none;
}
.app-calc-tooltip {
    --mdb-tooltip-bg: var(--color-bg-surface);
    --mdb-tooltip-color: var(--color-text-secondary);
    --mdb-tooltip-opacity: 1;
    --mdb-tooltip-font-size: var(--font-xs);
    --mdb-tooltip-max-width: 360px;
}
/* O cartão tem borda, e a seta do MDB, sem borda, ficaria solta. O protótipo não tem seta */
.app-calc-tooltip .tooltip-arrow {
    display: none;
}
.app-calc-tooltip .tooltip-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px;
    text-align: left;
    line-height: 1.45;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.app-calc-tip-title {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}
.app-calc-tip-desc {
    margin-bottom: 4px;
    line-height: 1.5;
}
.app-calc-tip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 2px 0;
}
.app-calc-tip-value {
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Tipos de linha, os mesmos do protótipo */
.app-calc-tip-row.is-total,
.app-calc-tip-row.is-highlight,
.app-calc-tip-row.is-negative {
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px solid var(--color-border);
    font-weight: 700;
}
.app-calc-tip-row.is-total {
    color: var(--color-text-primary);
}
.app-calc-tip-row.is-highlight {
    color: var(--color-accent-dark);
}
.app-calc-tip-row.is-negative {
    color: var(--color-danger);
}
.app-calc-tip-row.is-base {
    margin: 4px -6px 0;
    padding: 3px 6px;
    border-radius: var(--radius-xs);
    background-color: var(--color-accent-light);
    color: var(--color-accent-dark);
    font-weight: 700;
}
.app-calc-tip-row.is-off {
    color: var(--color-text-muted);
    text-decoration: line-through;
}
.app-calc-tip-gap {
    height: 6px;
}
.app-calc-tip-formula {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: var(--radius-xs);
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}