/* =====================================================
   COMPONENTS.CSS — Buttons, Inputs, Cards, Modals, Toasts
   ===================================================== */

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.65rem 1.25rem;
  font-family:var(--font); font-weight:800; font-size:0.85rem;
  border:var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  transition:transform 0.14s var(--ease-bounce), box-shadow 0.14s var(--ease-bounce);
  white-space:nowrap; user-select:none; cursor:pointer;
}
.btn:hover  { transform:translate(-2px,-2px); box-shadow:var(--shadow-md); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.btn-primary  { background:var(--yellow); color:var(--ink); }
.btn-cyan     { background:var(--cyan); color:var(--ink); }
.btn-coral    { background:var(--coral); color:#fff; }
.btn-lime     { background:var(--lime); color:var(--ink); }
.btn-ghost    { background:var(--surface); color:var(--ink); }
.btn-dark     { background:var(--surface-deep); color:var(--txt-inverse); border-color:var(--surface-deep); }
.btn-danger   { background:var(--coral); color:#fff; }

.btn-sm  { padding:0.4rem 0.85rem; font-size:0.78rem; }
.btn-xs  { padding:0.25rem 0.65rem; font-size:0.72rem; }
.btn-icon { padding:0.5rem; width:38px; height:38px; }

/* ---- Inputs ---- */
.inp {
  width:100%; padding:0.65rem 0.9rem;
  background:var(--surface);
  border:var(--border); border-radius:var(--radius-sm);
  font-size:0.88rem; font-weight:600; color:var(--txt-primary);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.15s, transform 0.15s;
}
.inp:focus { outline:none; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.inp::placeholder { color:var(--txt-muted); font-weight:500; }

.inp-label {
  display:block; font-size:0.78rem; font-weight:800;
  color:var(--txt-secondary); margin-bottom:0.35rem; text-transform:uppercase; letter-spacing:0.03em;
}

.inp-group { display:flex; flex-direction:column; gap:0; }
.inp-group .inp { margin-bottom:0.85rem; }
.inp-group .inp:last-child { margin-bottom:0; }

/* ---- Panels / Cards ---- */
.card {
  background:var(--surface);
  border:var(--border-thick);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.card-header {
  padding:0.9rem 1.15rem;
  border-bottom:var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
}
.card-title { font-size:0.95rem; font-weight:800; color:var(--ink); }
.card-body  { padding:1.15rem; }

/* ---- Badge / Chip ---- */
.badge {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.2rem 0.6rem; border-radius:4px;
  font-family:var(--mono); font-size:0.7rem; font-weight:800;
  border:1px solid var(--ink); letter-spacing:0.03em;
}
.badge-yellow  { background:var(--yellow-lt); }
.badge-cyan    { background:var(--cyan-lt); }
.badge-coral   { background:var(--coral-lt); }
.badge-lime    { background:var(--lime-lt); }
.badge-purple  { background:var(--purple-lt); }
.badge-orange  { background:var(--orange-lt); }
.badge-dark    { background:var(--surface-deep); color:var(--txt-inverse); border-color:var(--surface-deep); }

/* ---- Modal System ---- */
.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(10,10,20,0.65); backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center;
  z-index:500; padding:1rem;
}
.modal-backdrop[style*="flex"] { display:flex !important; animation:modalIn 0.25s var(--ease-out); }

.modal {
  background:var(--surface);
  border:var(--border-thick);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto;
  animation:popIn 0.25s var(--ease-out);
}
.modal-wide { max-width:800px; }

.modal-head {
  padding:1rem 1.25rem;
  border-bottom:var(--border-thick);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-head-title { font-size:1rem; font-weight:900; color:var(--ink); display:flex; align-items:center; gap:0.5rem; }
.modal-body  { padding:1.5rem; }
.modal-footer {
  padding:1rem 1.5rem; border-top:var(--border);
  display:flex; gap:0.75rem; justify-content:flex-end;
}

.modal-close-btn {
  width:30px; height:30px;
  background:var(--surface-alt); border:var(--border); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:2px 2px 0 var(--ink); cursor:pointer;
}
.modal-close-btn:hover { background:var(--coral-lt); }

/* Coloured modal heads */
.modal-head-yellow { background:var(--yellow); }
.modal-head-cyan   { background:var(--cyan-lt); }
.modal-head-coral  { background:var(--coral-lt); }

/* Context Menu */
.ctx-menu {
  position:fixed; z-index:600;
  background:var(--surface); border:var(--border-thick); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); min-width:180px; overflow:hidden;
  display:none;
}
.ctx-menu.active { display:block; animation:popIn 0.18s var(--ease-out); }
.ctx-item {
  display:flex; align-items:center; gap:0.65rem;
  padding:0.65rem 1rem; cursor:pointer; font-size:0.88rem; font-weight:700;
  border-bottom:1px solid rgba(0,0,0,0.07);
  transition:background 0.1s;
}
.ctx-item:last-child { border-bottom:none; }
.ctx-item:hover { background:var(--yellow-lt); }
.ctx-item i { width:16px; }
.ctx-danger:hover { background:var(--coral-lt); color:var(--coral); }

/* ---- Toast System ---- */
#toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem;
  display:flex; flex-direction:column; gap:0.6rem; z-index:700;
  pointer-events:none;
}
.toast {
  pointer-events:auto;
  display:flex; align-items:center; gap:0.7rem;
  padding:0.8rem 1.1rem;
  background:var(--surface); border:var(--border-thick); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); font-weight:700; font-size:0.88rem;
  max-width:360px; animation:toastIn 0.3s var(--ease-out);
}
.toast i { width:18px; height:18px; flex-shrink:0; }
.toast-success { border-left:5px solid var(--lime); }
.toast-error   { border-left:5px solid var(--coral); }
.toast-info    { border-left:5px solid var(--blue); }
.toast-warning { border-left:5px solid var(--yellow); }

/* ---- Info Side Panel ---- */
.fm-info-panel {
  position:fixed; top:calc(28px + var(--topbar-h)); right:0; bottom:0;
  width:300px; background:var(--surface);
  border-left:var(--border-thick);
  box-shadow:var(--shadow-lg);
  z-index:195; transform:translateX(100%);
  transition:transform 0.28s var(--ease-out);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.fm-info-panel.active { transform:translateX(0); }
.fm-info-header {
  padding:1rem 1.15rem; border-bottom:var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:0.95rem;
}
.info-header { display:flex; align-items:center; gap:0.75rem; padding:1rem; }
.info-rows { padding:0 1rem; }
.info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.55rem 0; border-bottom:1px solid rgba(0,0,0,0.06);
  font-size:0.85rem;
}
.info-row span:first-child { color:var(--txt-secondary); font-weight:600; }
.info-row span:last-child  { font-family:var(--mono); font-size:0.8rem; font-weight:700; text-align:right; max-width:160px; word-break:break-all; }

/* ---- Skeleton Loader ---- */
.skeleton {
  background:linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size:200% 100%;
  animation:skeletonSlide 1.4s infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeletonSlide {
  from { background-position:200% 0; }
  to   { background-position:-200% 0; }
}