body {
  min-height: 100vh;
  background-color: var(--sand-light);
  color: #2d241b;
}

/* Hide elements with x-cloak until Alpine initialises them */
[x-cloak] {
  display: none !important;
}

:root {
  --bg-white: #ffffff;
  --sand: #f4ead6;
  --sand-dark: #e1d2b8;
  --sand-light: #fff7ea;
  --accent: #4e3f31;
  --accent-dark: #3a2f25;
  --muted: #6c6c6c;
  --modal-bg: #fffdf6;
  --hero-bg: #ead8c3;
}

.modal-backdrop {
  /* kept for backward compat where used as a full-screen wrapper */
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1040;
}

.modal-dialog {
  max-width: 420px;
  width: 100%;
  padding: 1rem;
}

/* New modal window layout to ensure inputs receive focus */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal-window {
  position: relative;
  z-index: 1060;
  max-width: 520px;
  width: 100%;
  overflow-y: auto;
  max-height: 90vh;
}

/* Theme tweaks */

main .card {
  box-shadow: 0 8px 25px rgba(78, 63, 49, 0.08);
}

.navbar {
  background: var(--accent);
}

.navbar-brand {
  color: var(--bg-white);
  font-weight: 700;
}

.navbar-brand-img {
  height: 36px;
  width: auto;
  display: inline-block;
  margin-right: 8px;
}

.navbar .navbar-brand span {
  color: var(--bg-white);
}

.navbar .btn-sm.btn-primary.rounded-circle {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--bg-white) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 700;
}

.navbar .card {
  border-color: rgba(0, 0, 0, 0.08);
}

/* Account popover */
.btn-avatar {
  width: 36px;
  height: 36px;
}

.badge-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-dropdown {
  min-width: 290px;
  max-width: calc(100vw - 1rem);
  z-index: 1060;
}

.expiry-unit-select {
  width: auto;
  min-width: 110px;
  max-width: 180px;
}

/* Device list */
.device-name {
  max-width: 160px;
}

.badge-xs {
  font-size: 0.6rem;
  padding: 2px 5px;
}

.icon-sm {
  font-size: 0.85rem;
}

.icon-xs {
  font-size: 0.75rem;
}

.card {
  background: var(--bg-white);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.card .card-title {
  color: var(--accent);
}

.hero-card {
  background: var(--hero-bg);
  color: var(--accent);
  border: none;
  box-shadow: 0 25px 45px rgba(78, 63, 49, 0.35);
}

.hero-card p {
  color: rgba(58, 47, 37, 0.8);
}

.hero-card .btn-outline-success {
  border-color: var(--accent);
  color: var(--accent);
}

.hero-card .btn-outline-success:hover {
  background: var(--accent);
  color: var(--bg-white);
}

.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-primary:hover {
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--accent);
  color: var(--bg-white);
}

.text-muted {
  color: var(--muted) !important;
}

/* account avatar */
.list-group-item {
  border-color: rgba(78, 63, 49, 0.1);
}

.list-group-item strong {
  color: var(--accent);
}

.modal-window .card {
  background: var(--modal-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
}


#alerts .alert {
  margin-top: 0.5rem;
}

.secret-payload {
  background: var(--sand-light);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9rem;
  max-height: 320px;
  overflow-y: auto;
}

.secret-meta-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.secret-meta-value {
  font-weight: 600;
}


/* Mobile create FAB (shown under sm via Bootstrap .d-sm-none) */
.fab-new {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
  z-index: 1030;
}

@media (max-width: 575.98px) {
  .modal-window {
    padding: 0 0.5rem;
  }

  .btn-sm:not(.btn-link) {
    min-height: 40px;
    min-width: 40px;
  }

  /* Keep the last list row clear of the FAB */
  main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}