/* ============================================================
   IGNITE NATIONS ADMIN DESIGN
   Edit this file for dashboard colors, panels, buttons and spacing.
   ============================================================ */

body{margin:0;background:#140d26;color:#f7f3ea;font-family:Inter,sans-serif}.font-display{font-family:'Playfair Display',serif}.hide{display:none!important}.field{background:rgba(247,243,234,.06);border:1px solid rgba(247,243,234,.16);border-radius:.75rem;padding:.78rem .95rem;width:100%;color:#f7f3ea}.field:focus{outline:none;border-color:#e9b435}.panel{background:linear-gradient(145deg,rgba(33,21,67,.95),rgba(20,13,38,.84));border:1px solid rgba(247,243,234,.1);border-radius:1.4rem;padding:1.5rem}.panel h3{font-family:'Playfair Display',serif;font-weight:800;font-size:1.3rem}.kicker{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:#e9b435;font-weight:800}.btn{border-radius:999px;padding:.7rem 1.1rem;font-size:.8rem;font-weight:800;transition:.2s}.btn-gold{background:#e9b435;color:#140d26}.btn-line{border:1px solid rgba(247,243,234,.24)}.btn-danger{border:1px solid rgba(248,113,113,.45);color:#fca5a5}.btn:hover{transform:translateY(-1px)}.navbtn{width:100%;text-align:left;padding:.75rem 1rem;border-radius:.8rem;font-size:.82rem;font-weight:700;color:rgba(247,243,234,.72)}.navbtn:hover,.navbtn.on{background:rgba(233,180,53,.12);color:#e9b435}.row{background:rgba(20,13,38,.55);border:1px solid rgba(247,243,234,.1);border-radius:.85rem;padding:.8rem 1rem}.status{font-size:.6rem;font-weight:900;padding:.25rem .55rem;border-radius:999px;white-space:nowrap}.awaiting_payment{background:rgba(247,243,234,.12);color:#ddd6ce}.paid{background:#e9b435;color:#140d26}.fulfilled{background:#2f6b3d;color:#e8f7ec}.cancelled{background:#5a1f1f;color:#ffd9d9}.chat{height:360px;overflow-y:auto;padding:1rem;border-radius:1rem;background:rgba(20,13,38,.55);border:1px solid rgba(247,243,234,.1)}#toast{position:fixed;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:120}pre{background:#0d0819;border:1px solid rgba(247,243,234,.12);border-radius:.8rem;padding:1rem;font-size:.7rem;line-height:1.5;overflow:auto;max-height:28rem;color:#c9c2b8}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #e9b435;outline-offset:2px}@media(max-width:1023px){#side{position:fixed;inset:0 auto 0 0;width:290px;z-index:80;transform:translateX(-105%);transition:transform .25s}#side.open{transform:none}}

/* ------------------------------------------------------------------
   THE DESKS ON A PHONE

   Every desk is a list beside a thread. Below 1024px there is no room
   for both side by side, and stacking them buries the reply box under
   the whole conversation list - with thirty conversations the reply
   box is thousands of pixels down the page.

   So on a phone the two take turns: the list fills the screen, tapping
   a conversation swaps to that thread, and a back button returns to
   the list. Above 1024px nothing here applies and the desks stay
   side by side exactly as before.

   This lives in CSS rather than Tailwind classes because
   css/tailwind.css is a PREBUILT SUBSET with no max-width variants -
   "only on phones" cannot be expressed as a class in this project.
   ------------------------------------------------------------------ */

.desk-back { display: none; }

@media (max-width: 1023px) {
  .desk .desk-thread            { display: none; }
  .desk.thread-open .desk-list  { display: none; }
  .desk.thread-open .desk-thread{ display: flex; }

  .desk-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
  }

  /* The list owns the whole screen now, so let the page scroll it
     rather than trapping it in a short inner scroller. */
  .desk-scroll { max-height: none !important; overflow: visible !important; }

  /* A pane sized for a desktop column leaves a phone scrolling through
     empty space to reach the reply box. */
  .desk-thread { min-height: 0 !important; }

  /* Filter pairs that sit comfortably side by side on a laptop become
     two cramped half-width fields on a phone. */
  .phone-stack { grid-template-columns: 1fr; }
}

/* Comfortable tap targets. Anything a thumb has to hit on a phone
   should be at least 44px tall. */
@media (max-width: 1023px) {
  .btn, .navbtn, .field, select.field, input.field { min-height: 44px; }
  .btn { padding: .8rem 1.15rem; }
}

/* Stat tiles are a short label and a big number, so two fit across a
   phone comfortably. Stacked one per row they push the actual work
   most of a screen down the page. */
@media (max-width: 639px) {
  .phone-2up { grid-template-columns: 1fr 1fr; }
}

/* A column of six filter fields is fine beside a list on a laptop. On a
   phone it is most of a screen standing between you and the records, so
   it folds away behind a button. Above 1024px the button disappears and
   the filters are simply always there. */
.phone-only { display: none; }

@media (max-width: 1023px) {
  .phone-only { display: inline-flex; align-items: center; justify-content: center; }
  .phone-collapse { display: none; }
  .phone-collapse.open { display: block; }
}

/* On these pages the list is what you came to look at; the form is what
   you use occasionally. Side by side the order does not matter, but
   stacked on a phone a long form standing in front of the list means
   scrolling past eighteen tick boxes to see a single position. */
@media (max-width: 1023px) {
  .phone-last { order: 9; }
}