/* Reset + app layout shell. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }

.app { position: relative; display: flex; height: 100vh; overflow: hidden; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; padding: 18px; overflow: auto; }

/* Project loader — branded logo GIF, the default spinner everywhere. The GIF
   animates itself, so no CSS animation is needed. */
.spinner {
  width: 48px; height: 48px;
  background: url("../img/logoLoader.gif") center / contain no-repeat;
}

/* Generic loading overlay — covers its (position:relative) panel, centred. */
.loading-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(1px);
  font-size: 12.5px; color: var(--muted);
}
.loading-overlay[hidden] { display: none; }

/* Global app loader — fixed, screen-centred, blocks all interaction. Driven by
   window.SetuLoader (loader.js). z-index outranks rail/topbar/drawers/modal. */
.app-loader {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.60); backdrop-filter: blur(1.5px);
  cursor: progress;
}
.app-loader[hidden] { display: none; }
/* The centered app loader uses a larger spinner than the in-panel skeletons. */
.app-loader .spinner { width: 140px; height: 140px; }

/* Reusable centred confirm modal — driven by window.Modal.confirm (shell.js). */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(28, 43, 58, 0.38);
  opacity: 0; transition: opacity .18s ease;
}
.modal-backdrop.open { opacity: 1; }
.modal-backdrop[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 2001;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.modal.open { opacity: 1; }
.modal.open .modal-card { transform: translateY(0) scale(1); }
.modal[hidden] { display: none; }
.modal-card {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 0.5px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(28, 43, 58, 0.22);
  transform: translateY(8px) scale(.98); transition: transform .18s ease;
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
  background: var(--page); color: var(--muted); font-size: 18px;
}
.modal-icon-danger { background: #fbeae9; color: #b4231b; }
.modal-icon-success { background: #e7f4ec; color: #1f8f4e; }
.modal-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.modal-body { padding: 4px 20px 0 62px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px; padding: 18px 20px;
}
.btn-danger { background: #b4231b; color: #fff; }
.btn-danger:hover { background: #9a1d16; }