/* ================================================================
   COMPONENTS.CSS — Buttons, cards, modals, toasts, tabs, badges
   Part of the RustyBlade BootCamp stylesheet, split for maintainability.
   Load AFTER layout.css.
   ================================================================ */

/* ================================================================
   SECTION 4: CARDS & CONTAINERS
   ================================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.card-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
}


/* ================================================================
   SECTION 5: BUTTONS
   ================================================================ */

.btn {
  background: var(--accent);
  color: var(--nav-text);
  border: none;
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  min-height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font);
  white-space: nowrap;
}
.btn:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}
.btn:active {
  transform: scale(0.98);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

.btn-danger {
  background: var(--red);
  color: var(--nav-text);
}
.btn-danger:hover {
  background: #b91c1c;
}

.btn-cancel {
  background: var(--surface-variant);
  color: var(--text-secondary);
}
.btn-cancel:hover {
  background: var(--border);
  color: var(--text);
}

.btn-success {
  background: var(--green);
  color: #fff;
}
.btn-success:hover {
  background: #0f766e;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  padding: 4px 10px;
  min-height: 30px;
}
.btn-ghost:hover {
  background: var(--surface-raised);
  color: var(--text);
}

.btn-sm {
  padding: 3px 10px;
  min-height: 30px;
  font-size: 0.7rem;
}
.btn-xs {
  padding: 2px 6px;
  min-height: 24px;
  font-size: 0.6rem;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 0.875rem;
}

.btn-icon {
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-variant);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}
.btn-icon:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

/* ── Fix icon sizes in buttons ── */
.btn .icon-xs,
.btn .icon-sm,
.btn i[data-lucide],
.btn svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  min-height: 12px;
  flex-shrink: 0;
}
.btn-sm .icon-xs,
.btn-sm i[data-lucide],
.btn-sm svg {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px;
  min-height: 10px;
}
.btn .icon-sm {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
}


/* ================================================================
   SECTION 12: NOTES & STICKY NOTES
   ================================================================ */

.notes-section {
  background: var(--surface-variant);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: 2px;
}
.notes-section .notes-toggle-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font);
  transition: background 0.2s;
  text-align: left;
  gap: 8px;
}
.notes-section .notes-toggle-btn:hover {
  background: var(--accent-soft);
}
.notes-section .notes-toggle-btn .chevron {
  font-size: 0.875rem;
  transition: transform 0.25s;
}
.notes-section .notes-toggle-btn.open .chevron {
  transform: rotate(180deg);
}
.notes-section .notes-body {
  display: none;
  padding: 0 14px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.notes-section .notes-body.open {
  display: block;
}
.notes-section .notes-body .note-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.notes-section .notes-body .note-item:last-child {
  border-bottom: none;
}
.notes-section .notes-body .note-item .note-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text);
  min-width: 80px;
  flex-shrink: 0;
  font-family: var(--font);
}
.notes-section .notes-body .note-item input {
  flex: 1;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.6875rem;
  font-family: var(--font);
  transition: border-color 0.2s;
}
.notes-section .notes-body .note-item input:focus {
  outline: none;
  border-color: var(--accent);
}
.notes-section .notes-body .empty-notes {
  padding: 12px 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-style: italic;
  font-family: var(--font);
}

.sticky-note {
  background: var(--surface-variant);
  padding: 6px 10px;
  margin: 6px 0;
  border-radius: 8px;
  font-size: 0.6875rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font);
}
.sticky-note-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sticky-note-icon i,
.sticky-note-icon svg {
  width: 10px !important;
  height: 10px !important;
}
.sticky-note .note-text {
  flex: 1;
}
.sticky-note .delete-note-btn {
  background: none;
  border: none;
  color: var(--red);
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: var(--font);
}
.sticky-note .delete-note-btn:hover {
  background: var(--red);
  color: white;
}
.sticky-note .note-mode-badge {
  font-size: 0.5rem;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-family: var(--font);
}

.note-editor-area {
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.note-editor-area textarea {
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.6875rem;
  resize: vertical;
  font-family: var(--font);
}
.note-editor-area .note-options {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.note-editor-area .note-options button {
  padding: 2px 8px;
  font-size: 0.5625rem;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: 0.2s;
  color: var(--text);
  font-family: var(--font);
}
.note-editor-area .note-options button.active-note-option {
  background: var(--accent);
  color: var(--nav-text);
  border-color: var(--accent);
}


/* ================================================================
   SECTION 14: EMPTY & LOADING STATES
   ================================================================ */

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.6;
}
.empty-state h3 {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
  margin-bottom: 4px;
  font-family: var(--font);
}
.empty-state p {
  font-size: 0.8125rem;
  max-width: 360px;
  margin: 0 auto 12px;
  color: var(--text-muted);
  font-family: var(--font);
}

.loading-state {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-secondary);
}
.loading-state .spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 10px;
}
.spin {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ================================================================
   SECTION 15: MODALS
   ================================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fadeIn 0.2s ease;
  padding: 16px;
}

/* FIX (confirm modal behind details modal): every modal — the static
   #customModal from app.html and every dynamically-created
   .modal-backdrop appended to document.body (details modal, pause
   modal, view-logs modal, MFA enrollment, etc.) — shared z-index: 999.
   When two were open at once, DOM order decided the winner. Since
   #customModal ships in app.html and every dynamic modal is appended
   AFTER it, the confirm dialog (which triggers from inside the details
   modal) always ended up behind whichever modal opened it.
   Bumping #customModal specifically above the base backdrop fixes it
   without touching how individual modals stack against each other.
   The confirm/alert dialog is by definition the most recent
   interaction in any multi-modal flow, so it should always win. */
#customModal.modal-backdrop {
  z-index: 1001;
}
.modal-backdrop.active {
  display: flex;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
  from { transform: scale(0.95) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal .modal-title {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 12px;
  color: var(--text);
  font-family: var(--font);
}
.modal .modal-icon {
  font-size: 2rem;
  display: block;
  text-align: center;
  margin-bottom: 8px;
}
.modal .modal-message {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.modal.confirm-modal .modal-title,
.modal.confirm-modal .modal-message {
  text-align: center;
}
.modal .prompt-input {
  width: 100%;
  margin: 16px 0;
}
.modal .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.modal .modal-actions .btn {
  min-width: 80px;
}


/* ================================================================
   SECTION 16: TOAST NOTIFICATIONS
   ================================================================ */

.toast-container {
  position: fixed;
  /* Was `bottom: 24px` — the bottom nav sits at
     bottom: calc(10px + env(safe-area-inset-bottom)) and is ~56px
     tall including its shadow, so toasts were rendering directly on
     top of it. 80px clears the nav on every page that shows one
     (Track, Logbook, Settings, Admin). Pages without the nav (login,
     onboarding) get the extra clearance harmlessly — no toast is
     meaningful enough to need to sit low. */
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  /* Was `right: 24px` + `width: 100%` — at 340px max-width on a
     360px-wide phone, that combination pushed the container's left
     edge to x = -4, off-screen. Using left + right + margin-left:auto
     keeps it right-aligned on wide viewports and centered/inset on
     mobile without the overflow. */
  left: 16px;
  right: 16px;
  margin-left: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* Was 8px — one fewer pixel of visual gap between stacked toasts,
     which matters when three land at once. */
  gap: 6px;
  max-width: 340px;
  pointer-events: none;
}
.toast {
  background: var(--surface);
  border-radius: 10px;
  /* Was 10px 14px — tightened. A toast carries one line of text and
     an icon; every pixel of padding is screen the user isn't seeing
     through. Same content, ~15% shorter card. */
  padding: 8px 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  /* Was 10px — matches the tighter padding. */
  gap: 8px;
  animation: slideIn 0.3s ease;
  pointer-events: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-family: var(--font);
  width: 100%;
  box-sizing: border-box;
}
.toast.hide {
  opacity: 0;
  transform: translateX(20px);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
/* FIX (design request): replaced the flat left-border color-coding
   with a circular icon badge that carries the color instead — the
   badge, not an edge stripe, is what tells you the toast's type. */
.toast .toast-icon {
  font-size: 0.75rem;
  flex-shrink: 0;
  /* Was 26px — the icon badge was the tallest element in the toast,
     forcing the whole card's height even when the text was short.
     22px is proportionally the same on a 0.8rem font. */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-variant);
  color: var(--text-secondary);
}
.toast .toast-content {
  flex: 1;
  color: var(--text);
  line-height: 1.3;
}
.toast .toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  /* Was 4px — matches the tighter icon and padding scale. */
  padding: 0 2px;
  transition: color var(--transition);
  font-family: var(--font);
}
.toast .toast-close:hover {
  color: var(--text);
}
.toast.success {
  border-color: var(--green-soft);
}
.toast.success .toast-icon {
  background: var(--green-soft);
  color: var(--green);
}
.toast.error {
  border-color: var(--red-soft);
}
.toast.error .toast-icon {
  background: var(--red-soft);
  color: var(--red);
}
.toast.info {
  border-color: var(--accent-soft);
}
.toast.info .toast-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.toast.warning {
  border-color: var(--amber-soft);
}
.toast.warning .toast-icon {
  background: var(--amber-soft);
  color: var(--amber);
}