/* Thin bridge over the WordPress FBN Indica design library.
   Most styling comes from main.css; this file only adds:
   - Auth pages (login/register) shell
   - Flash alert
   - Dashboard 2-column grid (not in main.css)
   - Kanban empty-state visual
   - Standalone-form bridges for the views not yet refactored
     (profile, notifications, materials)
*/

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===== Auth shell (login/register) ===== */
.fbn-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #2056df 0%, #12255f 100%);
}

.fbn-auth-card {
    width: min(430px, 100%);
    background: #fff;
    border-radius: 18px;
    padding: 34px;
    box-shadow: 0 28px 70px rgba(18, 37, 95, .24);
}

.fbn-auth-card .auth-logo {
    display: block;
    max-width: 190px;
    margin: 0 auto 22px;
}

.fbn-auth-card h1 {
    margin: 0 0 8px;
    color: #12255f;
    text-align: center;
}

.fbn-auth-card p {
    color: #697272;
    text-align: center;
    margin: 0 0 22px;
}

.fbn-auth-card form {
    display: grid;
    gap: 16px;
}

.fbn-auth-card label {
    display: grid;
    gap: 6px;
    font-weight: 600;
    color: #343838;
}

.fbn-auth-card input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    color: #343838;
}

.fbn-auth-card .muted {
    font-size: 13px;
    color: #697272;
    margin-top: 16px;
}

.fbn-auth-card code {
    background: #eff4fe;
    color: #2056df;
    padding: 2px 5px;
    border-radius: 4px;
}

/* ===== Flash alerts ===== */
.fbn-standalone-alert {
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--bg-card, #fff);
    box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, .08));
    border-left: 4px solid var(--primary-color, #2056df);
    margin-bottom: 18px;
}

.fbn-standalone-alert.success { border-left-color: #28a745; }
.fbn-standalone-alert.error { border-left-color: #dc3545; }
.fbn-standalone-alert.info { border-left-color: #1e40af; }
.fbn-standalone-alert.dev {
    border-left-color: #ca8a04;
    background: #fef9c3;
    color: #713f12;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
}
.fbn-standalone-alert.dev a {
    color: #1e40af;
    text-decoration: underline;
}

/* ===== Dashboard 2-column grid ===== */
.dashboard-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    margin-top: 24px;
}

.dashboard-block {
    min-width: 0;
}

.dashboard-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-block-header h2 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-block-header h2 i {
    color: var(--primary-color, #2056df);
}

@media (max-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* ===== Promotor balance breakdown (modal de detalhes) ===== */
.balance-breakdown {
    margin-top: 16px;
    background: var(--bg-hover, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 0;
}
.balance-breakdown summary {
    cursor: pointer;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, #334155);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.balance-breakdown summary::-webkit-details-marker { display: none; }
.balance-breakdown summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    transition: transform 0.2s ease;
}
.balance-breakdown[open] summary::after { transform: rotate(180deg); }
.balance-breakdown summary i { color: var(--primary-color, #2056df); }

.balance-breakdown-body {
    padding: 4px 16px 14px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}
.bb-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
}
.bb-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color, #334155);
}
.bb-meta {
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    text-align: left;
}
.bb-value {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bb-pos { color: #16a34a; }
.bb-neg { color: #dc2626; }
.bb-row-sum {
    border-top: 1px dashed var(--border-color, #cbd5e1);
    padding-top: 12px;
    margin-top: 4px;
}
.bb-row-final {
    border-top: 2px solid var(--primary-color, #2056df);
    padding-top: 12px;
    margin-top: 4px;
}

/* ===== Kanban empty state (per column) ===== */
.kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 12px;
    color: var(--text-muted, #8A9393);
    opacity: 0.7;
}

.kanban-empty i {
    font-size: 26px;
    margin-bottom: 8px;
}

.kanban-empty p {
    margin: 0;
    font-size: 13px;
}

/* ===== Filter form layout (matches WP filters-bar children behavior) ===== */
.filters-bar { gap: 12px; }

/* ===== Bridge for views not yet refactored (profile, notifications, materials) ===== */
.standalone-card {
    background: var(--bg-card, #fff);
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, .08));
    padding: 24px;
    margin-bottom: 24px;
}

.standalone-card h2,
.standalone-card h3 { margin-top: 0; color: var(--text-primary, #343838); }

.standalone-grid {
    display: grid;
    gap: 20px;
}

.standalone-grid.cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.standalone-form {
    display: grid;
    gap: 16px;
}

.standalone-form.grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: end;
}

.standalone-form .full { grid-column: 1 / -1; }

.standalone-form label {
    display: grid;
    gap: 6px;
    font-weight: 600;
    color: var(--text-primary, #343838);
}

.standalone-form input,
.standalone-form select,
.standalone-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #343838);
}

.standalone-form .check { display: flex; align-items: center; gap: 8px; }
.standalone-form .check input { width: auto; min-height: auto; }

.material-card { display: grid; gap: 12px; }

.feed-list { display: grid; gap: 12px; }

.feed-item {
    background: var(--bg-card, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, .08));
    padding: 16px;
    border-left: 4px solid transparent;
}

.feed-item.unread { border-left-color: var(--primary-color, #2056df); }

.copy-field {
    width: 100%;
    border: 1px solid var(--border-color, #e5e7eb);
    min-height: 44px;
    background: #eff4fe;
    color: var(--primary-color, #2056df);
    border-radius: 6px;
    padding: 4px 7px;
}