/* Extended styles for v3 sub-pages, login, breadcrumb */

.breadcrumb {
  display: flex; align-items: center; gap: 14px;
  padding: 0 4px 14px; margin-bottom: 2px;
}
.bc-back {
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.bc-back:hover { background: var(--surface-muted); }
.bc-trail { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bc-item { color: var(--muted); }
.bc-sep { color: var(--muted-2); }
.bc-current { color: var(--ink); font-weight: 700; }

/* Login */
.login-screen {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%);
  padding: 40px;
}
.login-card {
  width: 900px; background: var(--surface);
  border-radius: 24px; box-shadow: 0 30px 60px rgba(15,23,42,.15);
  padding: 40px; border: 1px solid var(--border);
}
.login-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.mark-lg {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; font-size: 32px; font-weight: 900;
}
.login-brand h1 { margin: 0; font-size: 24px; font-weight: 800; }
.login-brand .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.login-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.user-list { display: grid; gap: 8px; }
.user-pick {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface-muted);
  cursor: pointer; border: 2px solid transparent;
  transition: all .12s;
}
.user-pick:hover { background: var(--surface-alt); }
.user-pick.active { background: var(--primary-soft); border-color: var(--primary); }
.user-pick .av { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; font-size: 22px; }
.user-pick .nm { font-weight: 700; font-size: 13px; }
.user-pick .rl { font-size: 11px; color: var(--muted); margin-top: 2px; }
.user-pick .chk { margin-left: auto; color: var(--primary); font-weight: 800; }
.pin-display { display: flex; gap: 10px; margin: 12px 0; }
.pin-dot {
  width: 46px; height: 56px; border-radius: 10px;
  background: var(--surface-muted); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 20px; color: var(--primary);
}
.pin-dot.filled { background: var(--primary-soft); border-color: var(--primary); }
.pin-err { color: var(--danger); font-size: 12px; font-weight: 700; margin: 4px 0; }
.pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pin-keypad .key {
  padding: 18px 0; font-size: 20px; font-weight: 700;
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer;
}
.pin-keypad .key:hover { background: var(--primary-soft); border-color: var(--primary); }
.login-foot { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; }
.lbl-small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: .04em; }

/* Chip (multi-select pill) */
.chip {
  padding: 8px 14px; border-radius: 20px;
  background: var(--surface-muted); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Simple table */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th { text-align: left; padding: 10px 12px; font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 800; border-bottom: 1px solid var(--border); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--border); }
.tbl tr:hover td { background: var(--surface-muted); }

.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }