/* Must be first: brings in the shared Steam layout primitives — .pkg-page,
   .pkg-hero*, .pkg-subnav*, .pkg-content, .pkg-section*, .pkg-empty, .pkg-modal*.
   Those live in packages.css, and a converted page needs them or the pkg-* markup
   renders completely unstyled. Importing rather than copying keeps one definition
   of each, so the converted pages can't drift from packages.php. */
@import url("packages.css");

/* ============================================================
   Steam theme — opt-in palette remap
   ============================================================

   Set  $extra_css = 'steam';  on any page you want converted.

   This only re-values the design tokens cloude.css already defines, so every
   shared component on that page (cards, buttons, modals, inputs, hero, tables)
   picks up the Steam look with no markup or class changes.

   Deliberately opt-in per page rather than changed globally in cloude.css, so
   pages can be converted and reviewed one at a time.

   Values mirror the --pkg-* set in packages.css. Keep the two in sync — if you
   change a colour here, change it there too, or the converted pages will drift
   from packages.php.

   Original cloude.css values, for reference / reverting:
     --bg-card #13131f  --bg-elevated #1a1a2e  --accent #a78bfa
     --accent-dim rgba(167,139,250,0.13)  --border rgba(167,139,250,0.11)
     --border-hover rgba(167,139,250,0.3) --text-faint rgba(255,255,255,0.7)
     --radius-sm 6px  --radius 10px  --radius-card 14px
   ============================================================ */

:root {
  --bg:            #1b2838;
  --bg-card:       #1e2a3a;
  --bg-elevated:   #253545;
  --bg-darker:     #171d25;
  --border:        #2a475e;
  --border-hover:  #3a5a7a;
  --text-primary:  #ffffff;
  --text-muted:    #8b98a5;
  --text-faint:    #6b7a89;
  --accent:        #66c0f4;
  --accent-dim:    rgba(102, 192, 244, 0.14);
  --radius:        4px;
  --radius-sm:     3px;
  --radius-card:   4px;
  --radius-pill:   999px;
}

body { background: var(--bg); }

/* The navbar is shared across every page, converted or not. Without this it
   would recolour only on themed pages and look different page to page — pin it
   to the original palette so the chrome stays identical everywhere. */
.topnav {
  --bg-card:      #13131f;
  --bg-elevated:  #1a1a2e;
  --accent:       #a78bfa;
  --accent-dim:   rgba(167, 139, 250, 0.13);
  --text-primary: #ffffff;
  --text-muted:   #ffffff;
  --text-faint:   rgba(255, 255, 255, 0.7);
  --border:       rgba(167, 139, 250, 0.11);
  --border-hover: rgba(167, 139, 250, 0.3);
  --radius-sm:    6px;
  --radius:       10px;
  --radius-card:  14px;
}

/* ── Shared component tweaks ─────────────────────────────
   Shape/weight changes the palette alone can't express. */

/* Steam's flatter modal frame */
.modal-box     { border-radius: var(--radius-card); border: 1px solid var(--border); }
.modal-header  { border-bottom: 1px solid var(--border); }
.modal-footer  { border-top: 1px solid var(--border); }

/* Sort/tab buttons read as underlined tabs, not pills */
.sort-btn        { border-radius: 2px; font-size: 0.8rem; }
.sort-btn.active { background: var(--accent-dim); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

/* Ghost variant of the hero button. Lived in files.css until gallery.php needed
   it too — a shared Steam primitive belongs here, not in one page's stylesheet. */
.pkg-hero-btn--ghost {
  background: transparent !important;
  border: 1px solid var(--pkg-border, #2a475e) !important;
  color: #c7d5e0 !important;
}
.pkg-hero-btn--ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* Destructive variant. Same reasoning as the ghost above: several detail pages
   carry a Delete in the hero, so it belongs to the shared system. */
.pkg-hero-btn--danger {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: #f87171 !important;
}
.pkg-hero-btn--danger:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

/* Button row in a hero. Each converted page had been defining its own
   <page>-hero-actions; detail pages all want the same thing. */
.pkg-hero-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Breadcrumb trail inside a hero, for detail pages that sit under a list page. */
.pkg-hero-crumbs {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.pkg-hero-crumbs a { color: var(--text-muted); text-decoration: none; }
.pkg-hero-crumbs a:hover { color: var(--accent); }
.pkg-hero-crumbs .sep { opacity: .5; }

/* Dropzones pick up the Steam blue */
.drop-zone.dragover,
.drop-zone:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   Small screens
   ══════════════════════════════════════════════════════════

   Lives here rather than in each page's stylesheet because every converted
   page loads steam.css, and all of them share the same hero/subnav shell.
   packages.css already stacks .pkg-hero-content at 900px; these are the parts
   that still overflowed or were too small to hit on a phone.

   The site is also loaded inside the Capacitor Android wrapper, where there is
   no cursor at all — so touch target size matters as much as layout. */

@media (max-width: 900px) {
  /* Three stats with long values ("1920×1080", "1 234,56 SEK") were laid out
     in a nowrap flex row and simply ran off the side of the screen. */
  .pkg-hero-stats {
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
  }

  /* The actions row on every converted page. Targeted structurally because
     each page names its own (.files-hero-actions, .gallery-hero-actions, …) —
     it is whichever child of the hero is neither the title block nor the
     stats. Full width so the buttons have somewhere to wrap to. */
  .pkg-hero-content > div:not(.pkg-hero-info):not(.pkg-hero-stats) {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Category/type tabs (glucose, trash) were a nowrap flex row with no
     overflow rule, so on a narrow screen the later tabs were off-screen and
     unreachable. Scroll them instead. */
  .pkg-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pkg-subnav::-webkit-scrollbar { display: none; }
  .pkg-subnav-item { flex-shrink: 0; }
}

@media (max-width: 600px) {
  .pkg-hero-stats { gap: 0.85rem; }
  .pkg-hero-stat-num { font-size: 1.15rem; }

  /* ~34px was below a comfortable touch target. Buttons also grow to share the
     row rather than each sitting at its own text width. */
  .pkg-hero-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }

  /* Modals were sized for a desktop dialog and left almost no margin */
  .modal-box,
  .pkg-modal {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }

  /* Two-up hero rows on the picker/tool modals stack rather than squeeze */
  .pkg-sync-dirs { flex-wrap: wrap; }
  .pkg-sync-dir  { flex: 1 1 100%; }
}

/* Pointer-less devices: the Android wrapper and any tablet. Hover-reveal
   controls never appear there, so anything that only shows on :hover has to be
   visible by default or it may as well not exist. */
@media (hover: none) {
  .gi-actions            { opacity: 1; background: rgba(0,0,0,0.35); }
  .gi-btn                { width: 30px; height: 30px; }
  .code-file-item .code-file-del,
  .cat-item-wrap .cat-edit-btn,
  .cg-save-item .cg-save-del { display: flex; opacity: 1; }
}