/* ============================================================
   THE SEALED VAULT — Commercial Build
   vault-buckets.css — Emergency, Legacy & Password Vaults
   © 2026 The Sealed Vault LLC
   ============================================================ */

/* ── Colour Tokens per Bucket ──────────────────────────────── */
:root {
  --tb-emr:     #c0392b;   --tb-emr-l: #f1948a;   --tb-emr-bg: rgba(192,57,43,0.08);
  --tb-leg:     #1a7a4a;   --tb-leg-l: #58d5a8;   --tb-leg-bg: rgba(26,122,74,0.08);
  --tb-pwd:     #1a4a8a;   --tb-pwd-l: #00b4d8;   --tb-pwd-bg: rgba(26,74,138,0.08);
  --tb-gold:    #d4a843;
  --tb-surface: rgba(11,20,42,0.6);
  --tb-faint:   rgba(5,13,26,0.6);
  --tb-border:  #1e3a6e;
  --tb-text:    #e8eef8;
  --tb-muted:   #8fa8cc;
  --tb-rs:      6px;
}

/* ── Bucket & Subsection Visibility ───────────────────────── */
.tb-bucket          { display:none; }
.tb-bucket.active   { display:block; }
.tb-subsec          { display:none; }
.tb-subsec.active   { display:block; }


/* ── Upgrade Banner ────────────────────────────────────────── */
.tb-upgrade {
  text-align:center; padding:var(--space-2xl);
  background:rgba(11,20,42,0.6); border:1px solid var(--gold-border);
  border-radius:var(--radius-md);
}
.tb-upgrade-icon { font-size:3rem; margin-bottom:var(--space-md); display:block; }
.tb-upgrade-title { font-family:var(--font-display); font-size:var(--fs-xl); color:var(--gold-lt); margin-bottom:var(--space-sm); }
.tb-upgrade-desc { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); line-height:1.7; margin-bottom:var(--space-lg); }

/* ── Action Bar ────────────────────────────────────────────── */
.tb-action-bar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  padding:14px 18px; background:rgba(11,20,42,0.6);
  border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:var(--space-lg);
}
.tb-action-title { font-family:var(--font-display); font-size:var(--fs-md); color:var(--gold-lt); letter-spacing:0.08em; }
.tb-action-desc  { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.tb-action-btns  { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }

/* ── Bucket Selector Tabs ──────────────────────────────────── */
.tb-bucket-tabs {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-bottom:var(--space-lg);
}
.tb-bucket-tab {
  padding:12px 10px; border-radius:var(--radius-md);
  border:1px solid var(--tb-border); background:transparent;
  cursor:pointer; transition:all var(--transition);
  font-family:var(--font-body); font-size:var(--fs-xs);
  font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--tb-muted); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.tb-bucket-tab:hover { background:rgba(255,255,255,0.04); }
.tb-bucket-tab.emr.active { background:var(--tb-emr-bg); border-color:rgba(192,57,43,0.5); color:var(--tb-emr-l); }
.tb-bucket-tab.leg.active { background:var(--tb-leg-bg); border-color:rgba(26,122,74,0.5); color:var(--tb-leg-l); }
.tb-bucket-tab.pwd.active { background:var(--tb-pwd-bg); border-color:rgba(0,180,216,0.4); color:var(--tb-pwd-l); }
.tb-bucket-tab.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; }
.tb-bucket-tab.emr.active::after { background:var(--tb-emr-l); }
.tb-bucket-tab.leg.active::after { background:var(--tb-leg-l); }
.tb-bucket-tab.pwd.active::after { background:var(--tb-pwd-l); }

/* ── Bucket Shell ──────────────────────────────────────────── */
.tb-shell {
  display:grid; grid-template-columns:180px 1fr;
  border:1px solid var(--tb-border); border-radius:var(--radius-md);
  overflow:hidden; min-height:500px; background:rgba(5,13,26,0.6);
}

/* ── Sidebar ───────────────────────────────────────────────── */
.tb-aside {
  background:rgba(2,8,16,0.8); border-right:1px solid var(--tb-border);
  padding:var(--space-md) 0; overflow-y:auto;
}
.tb-aside-label {
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--tb-muted); padding:0 var(--space-md) var(--space-sm);
  border-bottom:1px solid rgba(30,58,110,0.5); margin-bottom:var(--space-sm);
}
.tb-nav-item {
  display:flex; align-items:center; gap:8px;
  padding:9px var(--space-md); font-family:var(--font-mono);
  font-size:var(--fs-xs); color:var(--tb-muted);
  cursor:pointer; transition:all var(--transition);
  border-left:2px solid transparent; line-height:1.3;
}
.tb-nav-item:hover { background:rgba(255,255,255,0.03); color:var(--tb-text); }
.tb-nav-emr  { border-left-color:var(--tb-emr-l) !important; background:var(--tb-emr-bg); color:var(--tb-emr-l) !important; }
.tb-nav-leg  { border-left-color:var(--tb-leg-l) !important; background:var(--tb-leg-bg); color:var(--tb-leg-l) !important; }
.tb-nav-pwd  { border-left-color:var(--tb-pwd-l) !important; background:var(--tb-pwd-bg); color:var(--tb-pwd-l) !important; }
.tb-nav-done { color:rgba(88,213,168,0.6) !important; }
.tb-nav-num {
  width:18px; height:18px; border-radius:50%;
  background:rgba(143,168,204,0.1); border:1px solid var(--tb-border);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; flex-shrink:0; transition:all var(--transition);
}

/* ── Main Area ─────────────────────────────────────────────── */
.tb-main { overflow-y:auto; padding:var(--space-xl); max-height:620px; flex:1; }

/* ── Hero Banner ───────────────────────────────────────────── */
.tb-hero {
  padding:18px 22px; border-radius:var(--radius-md);
  margin-bottom:var(--space-lg); border:1px solid;
}
.tb-hero-emr { background:var(--tb-emr-bg); border-color:rgba(192,57,43,0.3); }
.tb-hero-leg { background:var(--tb-leg-bg); border-color:rgba(26,122,74,0.3); }
.tb-hero-pwd { background:var(--tb-pwd-bg); border-color:rgba(0,180,216,0.25); }
.tb-hero-tag {
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; margin-bottom:5px;
}
.tb-hero-emr .tb-hero-tag { color:var(--tb-emr-l); }
.tb-hero-leg .tb-hero-tag { color:var(--tb-leg-l); }
.tb-hero-pwd .tb-hero-tag { color:var(--tb-pwd-l); }
.tb-hero-title { font-family:var(--font-display); font-size:20px; color:var(--tb-text); margin-bottom:6px; font-weight:600; }
.tb-hero-desc  { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--tb-muted); line-height:1.6; }

/* ── Section Header ────────────────────────────────────────── */
.tb-subsec { display:none; animation:fadeUp 0.2s ease both; }
.tb-subsec.active { display:block; }
.tb-sec-hdr { margin-bottom:var(--space-md); }
.tb-sec-num   { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--tb-muted); margin-bottom:3px; }
.tb-sec-title { font-family:var(--font-display); font-size:var(--fs-xl); color:var(--tb-text); font-weight:600; }
.tb-sec-line  { height:2px; margin-top:8px; border-radius:var(--radius-full); }
.tb-line-emr { background:linear-gradient(90deg,var(--tb-emr-l),transparent); }
.tb-line-leg { background:linear-gradient(90deg,var(--tb-leg-l),transparent); }
.tb-line-pwd { background:linear-gradient(90deg,var(--tb-pwd-l),transparent); }

/* ── Cards ─────────────────────────────────────────────────── */
.tb-card { background:var(--tb-surface); border:1px solid var(--tb-border); border-radius:var(--radius-md); padding:var(--space-md) var(--space-lg); margin-bottom:var(--space-md); }
.tb-card-title { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--tb-muted); margin-bottom:var(--space-md); padding-bottom:6px; border-bottom:1px solid rgba(30,58,110,0.5); }

/* ── Field Rows ────────────────────────────────────────────── */
.tb-row { display:grid; gap:var(--space-md); margin-bottom:var(--space-md); }
.tb-row.c1 { grid-template-columns:1fr; }
.tb-row.c2 { grid-template-columns:1fr 1fr; }
.tb-row.c3 { grid-template-columns:1fr 1fr 1fr; }
.tb-field label { display:block; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--tb-muted); margin-bottom:5px; }
.tb-field input, .tb-field select, .tb-field textarea {
  width:100%; background:var(--tb-faint); border:1px solid var(--tb-border);
  border-radius:var(--tb-rs); padding:9px 11px;
  font-family:var(--font-mono); font-size:13px; color:var(--tb-text);
  outline:none; transition:border-color var(--transition);
}
.tb-field input:focus, .tb-field select:focus, .tb-field textarea:focus { border-color:var(--cyan); }
.tb-field textarea { resize:vertical; min-height:70px; line-height:1.6; }
.tb-field select { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238fa8cc' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.tb-field input::placeholder, .tb-field textarea::placeholder { color:rgba(143,168,204,0.3); }

/* ── Tables ────────────────────────────────────────────────── */
.tb-tbl-wrap { overflow-x:auto; margin-bottom:8px; }
.tb-tbl { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12px; }
.tb-tbl thead tr { background:rgba(30,58,110,0.4); }
.tb-tbl th { padding:8px 10px; text-align:left; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:10px; color:var(--tb-muted); border-bottom:1px solid var(--tb-border); white-space:nowrap; }
.tb-tbl tbody tr:nth-child(even) { background:rgba(5,13,26,0.3); }
.tb-tbl td { padding:0; border-bottom:1px solid rgba(30,58,110,0.3); }
.tb-tbl td input { width:100%; background:transparent; border:none; padding:8px 10px; font-family:var(--font-mono); font-size:12px; color:var(--tb-text); outline:none; }
.tb-tbl td input:focus { background:rgba(0,180,216,0.04); }
.tb-tbl td input::placeholder { color:rgba(143,168,204,0.25); }
.tb-tbl-add { background:none; border:1px dashed var(--tb-border); border-radius:var(--tb-rs); color:var(--tb-muted); font-family:var(--font-mono); font-size:var(--fs-xs); padding:6px 14px; cursor:pointer; width:100%; transition:all var(--transition); margin-top:4px; }
.tb-tbl-add:hover { border-color:var(--gold); color:var(--gold-lt); }

/* ── Info Banner ───────────────────────────────────────────── */
.tb-info-banner { padding:10px 14px; background:rgba(212,168,67,0.05); border:1px solid var(--gold-border); border-left:3px solid var(--gold); border-radius:var(--radius-md); font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--gold-lt); line-height:1.6; margin-bottom:var(--space-md); }

/* ── Password Entry Rows ───────────────────────────────────── */
.pwd-entry {
  background:var(--tb-faint); border:1px solid var(--tb-border);
  border-radius:var(--radius-md); padding:var(--space-md);
  margin-bottom:8px; position:relative;
}
.pwd-entry-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pwd-entry-title { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; color:var(--tb-pwd-l); }
.pwd-entry-remove { background:none; border:none; color:rgba(241,148,138,0.4); cursor:pointer; font-size:var(--fs-sm); padding:2px 6px; transition:color var(--transition); }
.pwd-entry-remove:hover { color:#f1948a; }
.pwd-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pwd-field label { display:block; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--tb-muted); margin-bottom:4px; }
.pwd-field input { width:100%; background:rgba(2,8,16,0.5); border:1px solid var(--tb-border); border-radius:4px; padding:7px 10px; font-family:var(--font-mono); font-size:12px; color:var(--tb-text); outline:none; }
.pwd-field input:focus { border-color:var(--tb-pwd-l); }
.pwd-field input::placeholder { color:rgba(143,168,204,0.3); }
.pwd-add-btn { background:none; border:1px dashed var(--tb-border); border-radius:var(--radius-md); color:var(--tb-muted); font-family:var(--font-mono); font-size:var(--fs-xs); padding:10px; cursor:pointer; width:100%; transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; }
.pwd-add-btn:hover { border-color:var(--tb-pwd-l); color:var(--tb-pwd-l); }

/* ── Designee Grid ─────────────────────────────────────────── */
.tb-desig-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.tb-desig-card { background:var(--tb-faint); border:1px solid var(--tb-border); border-radius:var(--radius-md); padding:var(--space-md); }
.tb-d-role { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--tb-emr-l); margin-bottom:var(--space-sm); }

/* ── Navigation Buttons ────────────────────────────────────── */
.tb-nav-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-md) var(--space-xl);
  background:rgba(2,8,16,0.6); border-top:1px solid var(--tb-border);
}
.tb-btn { padding:10px 22px; border-radius:var(--radius-md); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.08em; cursor:pointer; border:1px solid var(--tb-border); background:rgba(11,20,42,0.5); color:var(--tb-muted); transition:all var(--transition); }
.tb-btn:hover { color:var(--tb-text); background:rgba(11,20,42,0.9); }
.tb-btn-primary { background:linear-gradient(135deg,var(--gold),var(--gold-dim)); color:var(--navy-deep); border-color:var(--gold); font-weight:700; box-shadow:0 4px 14px rgba(212,168,67,0.3); }
.tb-btn-primary:hover { box-shadow:0 6px 20px rgba(212,168,67,0.45); transform:translateY(-1px); }
.tb-sec-counter { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--tb-muted); letter-spacing:0.08em; }

/* ── Completion Card ───────────────────────────────────────── */
.tb-complete { display:none; text-align:center; padding:var(--space-2xl) var(--space-lg); animation:fadeUp 0.4s ease both; }
.tb-complete.show { display:block; }
.tb-complete-icon { width:72px; height:72px; border-radius:50%; background:rgba(30,126,94,0.15); border:2px solid #1e7e5e; display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-lg); font-size:2rem; }
.tb-complete-title { font-family:var(--font-display); font-size:var(--fs-2xl); color:var(--tb-text); font-weight:600; margin-bottom:6px; }
.tb-complete-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(30,126,94,0.1); border:1px solid rgba(30,126,94,0.3); border-radius:var(--radius-full); padding:5px 16px; font-family:var(--font-mono); font-size:var(--fs-xs); color:#58d5a8; margin-bottom:var(--space-lg); }
.tb-complete-sub { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--tb-muted); line-height:1.7; margin-bottom:var(--space-xl); }
.tb-complete-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tb-complete-btn { padding:12px 22px; border-radius:var(--radius-md); font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; font-family:var(--font-body); letter-spacing:0.06em; text-transform:uppercase; }
.tb-complete-btn-seal { background:linear-gradient(135deg,var(--gold),var(--gold-dim)); color:var(--navy-deep); box-shadow:0 4px 14px rgba(212,168,67,0.35); }
.tb-complete-btn-seal:hover { box-shadow:0 6px 20px rgba(212,168,67,0.5); transform:translateY(-1px); }
.tb-complete-btn-export { background:rgba(11,20,42,0.8); color:var(--tb-text); border:1px solid var(--tb-border); }
.tb-complete-edit { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--tb-muted); cursor:pointer; background:none; border:none; text-decoration:underline; margin-top:var(--space-md); display:block; width:100%; text-align:center; }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:640px) {
  .tb-shell { grid-template-columns:1fr; }
  .tb-aside { display:none; }
  .tb-row.c2,.tb-row.c3 { grid-template-columns:1fr; }
  .tb-desig-grid,.pwd-grid { grid-template-columns:1fr; }
  .tb-bucket-tabs { grid-template-columns:1fr; }
  .tb-main { max-height:none; }
}