/* ══════════════════════════════════════════
   GROUP PANEL — shared styles
   css/group-panel.css
   ══════════════════════════════════════════ */

/* ── CONTAINER ── */
.main-container { max-width: 1100px; margin: 0 auto; padding: 24px 24px 60px; }

/* ── STATUS ── */
.status          { padding: 10px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }
.status.ok       { background: #0d2a14; color: #4caf7d; border: 1px solid #1a4a28; }
.status.err      { background: #2a0d0d; color: #e06c6c; border: 1px solid #4a1a1a; }
.status.hidden   { display: none; }

/* ── CARD ── */
.card { background: #141415; border: 1px solid #1e1e1e; border-radius: 8px; padding: 20px; margin-bottom: 20px; }

/* ── GROUP SELECTOR (multiple groups dropdown) ── */
.group-selector        { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.group-selector label  { font-size: 13px; color: #888780; text-transform: uppercase; letter-spacing: .04em; }
.group-selector select { background: #0e0e0f; border: 1px solid #2a2a2a; color: #c8c4bc; font-size: 14px; padding: 7px 12px; border-radius: 5px; cursor: pointer; }
.group-selector select:focus { outline: none; border-color: #c4882a; }

/* ── PANEL HEADER ── */
.panel-header          { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.panel-header h1       { font-family: 'Oswald', system-ui, sans-serif; font-size: 24px; font-weight: 500; color: #e8e4dc; letter-spacing: .04em; text-transform: uppercase; }
.panel-header .type-badge { font-size: 12px; background: #1e1e1e; color: #888780; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* ── TAB NAV ── */
.tab-nav          { display: flex; gap: 4px; border-bottom: 1px solid #1e1e1e; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn          { background: none; border: none; color: #5f5e5a; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.tab-btn:hover    { color: #c8c4bc; }
.tab-btn.active   { color: #c4882a; border-bottom-color: #c4882a; }

/* ── PANEL SECTIONS ── */
.tab-panel        { }
.tab-panel.hidden { display: none; }

/* ── TABLES ── */
.table-wrap { overflow-x: auto; }
table       { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th    { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #5f5e5a; font-weight: 500; padding: 8px 12px; border-bottom: 1px solid #1e1e1e; white-space: nowrap; }
tbody td    { padding: 10px 12px; border-bottom: 1px solid #141415; color: #c8c4bc; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #1a1a1b; }
td.muted    { color: #5f5e5a; font-size: 13px; }
td.empty    { color: #5f5e5a; font-style: italic; padding: 20px 12px; }

/* ── FORMS ── */
.form-section      { margin-bottom: 24px; }
.form-section h3   { font-size: 14px; font-weight: 600; color: #e8e4dc; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em; }
.form-grid         { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.field             { display: flex; flex-direction: column; gap: 5px; }
.label             { font-size: 12px; color: #888780; text-transform: uppercase; letter-spacing: .04em; }
.label-optional    { font-size: 11px; color: #5f5e5a; text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 400; }
.input             { background: #0e0e0f; border: 1px solid #2a2a2a; color: #c8c4bc; font-size: 14px; padding: 8px 12px; border-radius: 5px; width: 100%; }
.input:focus       { outline: none; border-color: #c4882a; }
select.input       { cursor: pointer; }

/* ── BUTTONS ── */
.btn          { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 5px; cursor: pointer; border: none; transition: background .15s, color .15s; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary  { background: #c4882a; color: #100c04; }
.btn-primary:hover:not(:disabled) { background: #d4952e; }
.btn-danger   { background: transparent; border: 1px solid #4a1a1a; color: #e06c6c; }
.btn-danger:hover:not(:disabled) { background: #2a0d0d; }
.btn-sm       { padding: 4px 10px; font-size: 12px; }
.actions      { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* ── VAULT ACCESS MATRIX ── */
.va-table          { width: 100%; border-collapse: collapse; font-size: 13px; }
.va-table th       { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #5f5e5a; padding: 8px 10px; border-bottom: 1px solid #1e1e1e; text-align: center; white-space: nowrap; }
.va-table th:first-child { text-align: left; }
.va-table td       { padding: 9px 10px; border-bottom: 1px solid #141415; text-align: center; }
.va-table td:first-child { text-align: left; color: #c8c4bc; }
.va-table input[type=checkbox] { width: 15px; height: 15px; accent-color: #c4882a; cursor: pointer; }
.va-save-row       { padding: 12px 0 0; }

/* ── SUB-TAB NAV (inside armory / vault panels) ── */
.subtab-nav          { display: flex; gap: 2px; border-bottom: 1px solid #1e1e1e; margin-bottom: 16px; }
.subtab-btn          { background: none; border: none; color: #5f5e5a; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: 7px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.subtab-btn:hover    { color: #c8c4bc; }
.subtab-btn.active   { color: #c4882a; border-bottom-color: #c4882a; }
.subtab-panel.hidden { display: none; }

/* ── ARMORY / VAULT INVENTORY TABLE ── */
.inv-table th { font-size: 11px; }
.inv-table td { font-size: 13px; }

/* ── LOG PAGER ── */
.log-pager         { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: #5f5e5a; }
.log-pager button  { background: #1e1e1e; border: 1px solid #2a2a2a; color: #c8c4bc; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.log-pager button:disabled { opacity: .35; cursor: not-allowed; }

/* ── ADD FORM ── */
.add-form          { background: #0e0e0f; border: 1px solid #1e1e1e; border-radius: 6px; padding: 16px; margin-bottom: 20px; }
.add-form h3       { font-size: 13px; font-weight: 600; color: #888780; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.edit-only         { }
.edit-only.hidden  { display: none; }

/* ── INLINE CHIP (role/rank) ── */
.chip        { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 3px; background: #1e1e1e; color: #888780; text-transform: uppercase; letter-spacing: .04em; }
.chip.owner  { background: #2a1e0a; color: #c4882a; }