/* =============================================================
   BNI Member Portal — Frontend Styles
   [bni_portal]
============================================================= */
:root {
    --bnip-red:    #c8102e;
    --bnip-dark:   #1a1a2e;
    --bnip-mid:    #444;
    --bnip-muted:  #888;
    --bnip-border: #e0e0e0;
    --bnip-bg:     #f5f6f8;
    --bnip-white:  #fff;
    --bnip-green:  #1a7f4e;
    --bnip-radius: 8px;
    --bnip-shadow: 0 2px 16px rgba(0,0,0,.08);
}

/* ---- Outer wrap ---- */
.bnip-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--bnip-dark); }

/* ============================================================
   LOGIN / RESET CARD
============================================================ */
.bnip-login-wrap { display:flex; justify-content:center; padding:40px 16px; background:var(--bnip-bg); min-height:70vh; align-items:center; }
.bnip-login-card { background:var(--bnip-white); border-radius:12px; box-shadow:var(--bnip-shadow); padding:36px 32px; width:100%; max-width:420px; }
.bnip-login-header { text-align:center; margin-bottom:28px; }
.bnip-logo-mark { display:inline-block; background:var(--bnip-red); color:#fff; font-weight:900; font-size:20px; letter-spacing:1px; padding:6px 14px; border-radius:6px; margin-bottom:10px; }
.bnip-login-header h2 { margin:0 0 4px; font-size:20px; font-weight:800; }
.bnip-login-header p  { margin:0; color:var(--bnip-muted); font-size:13px; }

/* ============================================================
   DASHBOARD LAYOUT
============================================================ */
.bnip-dashboard { background:var(--bnip-bg); min-height:80vh; }

/* Top bar */
.bnip-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--bnip-dark); color:#fff; padding:10px 20px; }
.bnip-topbar-left  { display:flex; align-items:center; gap:10px; }
.bnip-topbar-right { display:flex; align-items:center; gap:12px; }
.bnip-logo-sm { background:var(--bnip-red); color:#fff; font-weight:900; font-size:13px; padding:3px 8px; border-radius:4px; letter-spacing:.5px; }
.bnip-chapter-name { font-weight:700; font-size:15px; }
.bnip-welcome { font-size:13px; color:rgba(255,255,255,.75); }

/* Tabs */
.bnip-tabs { display:flex; gap:0; background:#fff; border-bottom:2px solid var(--bnip-border); overflow-x:auto; }
.bnip-tab  { display:flex; align-items:center; gap:6px; padding:12px 18px; font-size:13px; font-weight:600; color:var(--bnip-muted); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.bnip-tab:hover { color:var(--bnip-dark); }
.bnip-tab.active { color:var(--bnip-red); border-bottom-color:var(--bnip-red); }

/* Tab content area */
.bnip-tab-content { padding:20px; }
.bnip-section-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.bnip-section-header h3 { margin:0; font-size:16px; font-weight:700; }

/* ============================================================
   FORMS
============================================================ */
.bnip-form { display:flex; flex-direction:column; gap:14px; }
.bnip-field { display:flex; flex-direction:column; gap:5px; }
.bnip-field label { font-size:13px; font-weight:600; color:var(--bnip-dark); }
.bnip-field input[type="text"],
.bnip-field input[type="email"],
.bnip-field input[type="password"],
.bnip-field select,
.bnip-field textarea {
    width:100%; box-sizing:border-box; padding:8px 11px;
    border:1.5px solid var(--bnip-border); border-radius:6px;
    font-size:14px; color:var(--bnip-dark); background:#fff;
    transition:border-color .15s;
}
.bnip-field input:focus, .bnip-field select:focus { border-color:var(--bnip-red); outline:none; }
.bnip-form-footer { display:flex; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--bnip-border); margin-top:4px; }
.bnip-inline-form { display:flex; align-items:center; gap:8px; }
.bnip-inline-form input[type="date"] { padding:6px 10px; border:1.5px solid var(--bnip-border); border-radius:6px; font-size:13px; }
.bnip-note { font-size:12px; color:var(--bnip-muted); }

/* ============================================================
   BUTTONS
============================================================ */
.bnip-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 18px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; border:none; transition:all .15s; white-space:nowrap; }
.bnip-btn-primary  { background:var(--bnip-red); color:#fff; }
.bnip-btn-primary:hover { background:#a50d26; color:#fff; }
.bnip-btn-secondary{ background:#f0f4ff; color:#3355aa; border:1px solid #c0d0f0; }
.bnip-btn-secondary:hover { background:#dde8ff; }
.bnip-btn-ghost    { background:transparent; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.3); }
.bnip-btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }
.bnip-btn-danger   { background:#fde; color:#a00; border:1px solid #f0b; }
.bnip-btn-danger:hover { background:#fcc; }
.bnip-btn-block    { width:100%; }
.bnip-btn-sm  { padding:6px 14px; font-size:12px; }
.bnip-btn-xs  { padding:3px 9px; font-size:11px; }
.bnip-del-btn { background:none; border:none; color:#d00; cursor:pointer; font-size:16px; padding:0 4px; }
.bnip-link    { color:var(--bnip-red); text-decoration:none; font-size:13px; }
.bnip-link:hover { text-decoration:underline; }

/* ============================================================
   NOTICES
============================================================ */
.bnip-notice { padding:10px 16px; border-radius:6px; font-size:13px; margin-bottom:16px; }
.bnip-notice-ok  { background:#e8f8f0; color:#1a5c36; border-left:4px solid var(--bnip-green); }
.bnip-notice-err { background:#fde8ec; color:#7a0b1e; border-left:4px solid var(--bnip-red); }

/* ============================================================
   ROSTER TABLE
============================================================ */
.bnip-table-scroll { overflow-x:auto; border-radius:var(--bnip-radius); box-shadow:var(--bnip-shadow); }
.bnip-roster-table { min-width:1100px; }
.bnip-table { width:100%; border-collapse:collapse; background:#fff; font-size:13px; }
.bnip-table th { background:rgba(255,220,0,.07); font-weight:700; color:var(--bnip-dark); padding:9px 8px; text-align:left; border-bottom:2px solid rgba(255,220,0,.2); white-space:nowrap; }
.bnip-table td { padding:6px 8px; border-bottom:1px solid #f0f0f0; vertical-align:middle; }
.bnip-table tr:last-child td { border-bottom:none; }
.bnip-table tr:hover td { background:#fafafa; }
.bnip-row.is-past td { color:#aaa; }
.bnip-row.is-past .bnip-select,
.bnip-row.is-past input { opacity:.6; }

.bnip-date-cell strong { font-size:13px; }
.bnip-past-tag { font-size:10px; background:#eee; color:#999; padding:1px 5px; border-radius:3px; }
.bnip-select   { width:100%; min-width:110px; font-size:12px; padding:4px 5px; border:1.5px solid var(--bnip-border); border-radius:4px; background:#fff; }
.bnip-input-sm { width:100px; font-size:12px; padding:4px 6px; border:1.5px solid var(--bnip-border); border-radius:4px; }
.bnip-select:focus, .bnip-input-sm:focus { border-color:var(--bnip-red); outline:none; }

/* Filter tabs */
.bnip-filter-tabs { display:flex; gap:6px; margin-bottom:14px; }
.bnip-ftab { padding:5px 14px; border-radius:20px; border:1px solid var(--bnip-border); background:#fff; font-size:12px; font-weight:600; color:var(--bnip-muted); cursor:pointer; transition:all .15s; }
.bnip-ftab.active { background:var(--bnip-red); color:#fff; border-color:var(--bnip-red); }

/* Autosave status */
.bnip-save-status { position:fixed; bottom:24px; right:24px; padding:8px 18px; border-radius:20px; font-size:13px; font-weight:600; z-index:9999; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.bnip-save-status.ok  { background:#1a7f4e; color:#fff; }
.bnip-save-status.err { background:var(--bnip-red); color:#fff; }

/* ============================================================
   TWO-COL MEMBERS LAYOUT
============================================================ */
.bnip-two-col { display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
.bnip-form-panel  { background:#fff; border-radius:var(--bnip-radius); box-shadow:var(--bnip-shadow); padding:20px; }
.bnip-form-panel h3, .bnip-list-panel h3 { margin:0 0 16px; font-size:15px; font-weight:700; }
.bnip-list-panel  { background:#fff; border-radius:var(--bnip-radius); box-shadow:var(--bnip-shadow); overflow:hidden; }
.bnip-list-panel  h3 { padding:16px 16px 0; }
.bnip-list-panel .bnip-table { margin-top:12px; }
.bnip-inactive td { opacity:.5; }

/* ============================================================
   BADGES / MISC
============================================================ */
.bnip-badge-yes { background:#e8f8f0; color:#1a5c36; font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px; }
.bnip-badge-no  { background:#f5f5f5; color:#aaa; font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px; }
.bnip-timing    { background:#f0f4ff; color:#3355aa; font-size:11px; padding:2px 8px; border-radius:4px; font-family:monospace; }
.bnip-group-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--bnip-red); margin:20px 0 6px; padding-bottom:4px; border-bottom:2px solid rgba(200,16,46,.1); }
.bnip-status-sent   { color:var(--bnip-green); font-weight:700; font-size:12px; }
.bnip-status-failed { color:var(--bnip-red);   font-weight:700; font-size:12px; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:768px) {
    .bnip-two-col { grid-template-columns:1fr; }
    .bnip-tab { padding:10px 12px; font-size:12px; }
    .bnip-login-card { padding:28px 20px; }
}

/* Currently-editing row highlight */
.bnip-row-editing td { background: #fff8e8 !important; }