/* ================================================================
   Header "sticky" was broken everywhere (desktop included) — its parent
   (.flex-1.flex.flex-col.bg-zinc-900.overflow-hidden.relative, the app
   shell wrapper around <header>+<main>) has overflow:hidden, and per the
   CSS spec that alone makes it the sticky containing block regardless of
   whether it actually scrolls. It never does here (its height just grows
   to fit content — confirmed empty visually, nothing was ever clipped by
   it), so the header's "stick to top" had nothing to stick to and scrolled
   away with the page instead. The sidebar looked fine only because on
   mobile it's `position:fixed` while the drawer is open (escapes ancestor
   overflow entirely) — on desktop it's equally broken, just not reported.
   Fixing the wrapper (not the header) since overflow:hidden is provably
   inert here; verified no visual regression on both breakpoints before
   deploying. (Re-applied 2026-09-15 late evening — this exact rule was
   live once already and got rolled back only because its deploy happened
   to land seconds before an unrelated incident wiped index.html; the CSS
   itself was never the cause, see [[octadeploy-dashboard-mystery-overwrite]].)
================================================================ */
.flex-1.flex.flex-col.bg-zinc-900.overflow-hidden.relative {
  overflow: visible;
}

/* ================================================================
   OctaDeploy · Mobile redesign layer
   Sits on top of mobile-optimize.css (which only fixed overflow bugs).
   This actually restyles the phone experience to match the reference
   mockup — apps list as cards, visible search, app-detail action
   buttons stacked full-width. Pure CSS re-layout of the existing
   Tailwind markup (no source access — dashboard bundle has none),
   scoped tightly with :has()/nth-child so nothing here can bleed
   into desktop (>=768px) or into unrelated tables/rows elsewhere.
================================================================ */

/* ---------- Apps list: table -> card list ---------- */
@media (max-width: 767px) {
  main table:has(thead th):has(td a[href^="/apps/"]) {
    min-width: 0 !important;
    width: 100% !important;
    border-spacing: 0 10px;
    border-collapse: separate;
  }
  main table:has(thead th):has(td a[href^="/apps/"]) thead {
    display: none;
  }
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td {
    display: block;
    padding: 0 !important;
    border: none !important;
  }
  /* name (col1 row1) */
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(1) a {
    font-size: 15px;
  }
  /* repo (hidden on mobile — shown as part of name context isn't needed at a glance) */
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(2) {
    display: none;
  }
  /* status pill (col2 row1) */
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(3) {
    justify-self: end;
  }
  /* framework (col1 row2) */
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(4) {
    opacity: 0.8;
  }
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(4) span {
    font-size: 11px;
  }
  /* port (col2 row2) */
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(5) {
    justify-self: end;
    text-align: right;
    opacity: 0.8;
  }
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(5) span {
    font-size: 11px;
  }
  /* RAM bar, created date, action links — not needed on the compact card */
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(6),
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(7),
  main table:has(thead th):has(td a[href^="/apps/"]) tbody tr td:nth-child(8) {
    display: none;
  }
}

/* ---------- Apps list: search bar — show on mobile instead of hiding ----------
   Scoped to body.octa-route-apps-list (set by JS) rather than "any header with
   this input", because the SAME search input sits in the header on every route
   under /apps — on /apps/:id it shares the row with a "Postavi aplikaciju"
   shortcut that has nowhere to wrap to, which is exactly the clipped-button bug
   mobile-optimize.css already fixed once, site-wide, for that other page. */
@media (max-width: 1023px) {
  body.octa-route-apps-list header .relative.mr-4:has(input.w-64) {
    display: flex !important;
    margin: 0 !important;
    width: 100% !important;
  }
  body.octa-route-apps-list header .relative.mr-4:has(input.w-64) input.w-64 {
    width: 100% !important;
  }
  body.octa-route-apps-list header:has(.relative.mr-4 input.w-64) {
    flex-wrap: wrap;
    height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    row-gap: 0.6rem;
  }
  body.octa-route-apps-list header:has(.relative.mr-4 input.w-64) > div:has(input.w-64) {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }
}

/* ---------- Header "Postavi aplikaciju" shortcut — icon-only on mobile ----------
   Global header button/link (rocket icon + text), shown on every page except
   the Apps list (which already has its own full-width hero CTA in the body).
   At 375px the text wrapped to 2 lines and crowded the breadcrumb/hamburger —
   collapsing to just the icon via font-size:0 (can't remove a bare text node
   with CSS otherwise; the icon's own size is set separately so it stays crisp). */
@media (max-width: 767px) {
  header button:has(svg.lucide-rocket),
  header a:has(svg.lucide-rocket) {
    font-size: 0 !important;
    padding: 10px !important;
    gap: 0 !important;
  }
  header button:has(svg.lucide-rocket) svg,
  header a:has(svg.lucide-rocket) svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ---------- App-detail: primary actions stacked full-width ----------
   Row count varies: git-backed apps get an extra "Redeploy" button before
   "Ponovo pokreni" that upload-only apps don't have. A fixed 3-slot layout
   (link / button / more) broke as soon as a 4th item showed up — "Redeploy"
   rendered full-width while "Ponovo pokreni" got squeezed next to "..."
   instead of the two sharing evenly. Flexbox instead of grid, so it scales
   to any button count: every item defaults to its own full-width row
   (flex-basis 100% forces a wrap), except the LAST two — whichever button
   ends up right before the "..." wrapper — which share the final row. */
@media (max-width: 767px) {
  main div.flex.items-center.gap-2.shrink-0.flex-wrap:has(> a[target="_blank"]) {
    width: 100%;
  }
  main div.flex.items-center.gap-2.shrink-0.flex-wrap:has(> a[target="_blank"]) > a,
  main div.flex.items-center.gap-2.shrink-0.flex-wrap:has(> a[target="_blank"]) > button {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }
  main div.flex.items-center.gap-2.shrink-0.flex-wrap:has(> a[target="_blank"]):has(> div.relative:last-child) > *:nth-last-child(2) {
    flex: 1 1 0%;
    width: auto;
  }
  main div.flex.items-center.gap-2.shrink-0.flex-wrap:has(> a[target="_blank"]) > div.relative {
    flex: 0 0 auto;
  }
}

/* ---------- Octa-injected mobile elements (search filter chips, meta line, tabs overflow) ---------- */
.octa-status-chips {
  display: none;
}
@media (max-width: 767px) {
  .octa-status-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    margin: -4px -2px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .octa-status-chips::-webkit-scrollbar {
    display: none;
  }
}
.octa-status-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #a1a1aa;
  cursor: pointer;
  white-space: nowrap;
}
.octa-status-chip[data-active="1"] {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
.octa-status-chip .n {
  opacity: 0.75;
  font-weight: 600;
}

.octa-app-meta {
  display: none;
}
@media (max-width: 767px) {
  .octa-app-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #a1a1aa;
    font-family: ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    margin-top: -6px;
  }
  .octa-app-meta img {
    width: 14px;
    height: 14px;
    opacity: 0.8;
  }
}

@media (max-width: 767px) {
  main nav.-mb-px.flex {
    flex-wrap: nowrap !important;
    position: relative;
  }
  main nav.-mb-px.flex > button:not(.octa-more-tab) {
    flex: none;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  main nav.-mb-px.flex > button:not(.octa-more-tab):nth-child(n + 4) {
    display: none !important;
  }
  .octa-more-tab {
    flex: none;
    padding: 12px 14px 12px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #71717a;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  .octa-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 20;
    min-width: 180px;
    overflow: hidden;
  }
  .octa-more-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    color: #e4e4e7;
    background: none;
    border: none;
  }
  .octa-more-menu button:hover,
  .octa-more-menu button[data-active="1"] {
    background: rgba(79, 70, 229, 0.15);
    color: #fff;
  }
}

/* ---------- Users list (Tim/Korisnici): table -> card list ----------
   Plan/Apps/Created columns already collapse via Tailwind's own hidden
   md:/lg:/sm: classes, but the 3 that stay (User, Role, Actions) still add
   up wider than a phone (~403px in a 375px viewport) because a browser's
   default table layout sizes columns to content, not to the w-full class.
   mobile-optimize.css's earlier overflow-x:auto fix (site-wide, for any
   overflow-hidden card wrapping a table) turned that overflow into a
   sideways drag instead of a clip — which is the "page shifts left-right"
   Halil felt. Same fix as the apps list: CSS Grid per row sidesteps table
   layout instead of fighting it. */
@media (max-width: 767px) {
  body.octa-route-users main table {
    width: 100% !important;
    border-spacing: 0 10px;
    border-collapse: separate;
  }
  body.octa-route-users main table thead {
    display: none;
  }
  body.octa-route-users main table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
  }
  body.octa-route-users main table tbody tr td {
    display: block;
    padding: 0 !important;
  }
  body.octa-route-users main table tbody tr td:first-child {
    grid-column: 1 / -1;
  }
  body.octa-route-users main table tbody tr td:last-child {
    justify-self: end;
  }
}

/* ---------- Home screen (Nadzorna ploča) rebuild + bottom tab bar ----------
   Real page has 6 stat cards (2 with no data — CPU/prihod show "—") and a
   "Nedavni deployevi" list; mockup wants a tighter 4-card grid fed by real
   admin/overview numbers plus a "Nedavne aplikacije" list. No source, so the
   native content is hidden (route-scoped, not touched elsewhere) and
   mobile-redesign.js injects a fresh screen built from the same API data
   the native page already uses. Bottom tab bar is new — the app has none —
   added globally on mobile since it's meant to replace reaching for the
   hamburger for the 5 most common destinations. */
@media (max-width: 767px) {
  body.octa-route-home main > div:first-child {
    display: none;
  }
  body.octa-mobile-nav-active main {
    padding-bottom: 78px;
  }

  .octa-home { padding: 4px 0 8px; }
  .octa-home-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  .octa-home h1 { font-size: 24px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
  .octa-home-sub { color: #a1a1aa; font-size: 14px; margin: 6px 0 20px; }

  .octa-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
  .octa-stat-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; text-decoration: none; display: block; }
  .octa-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
  .octa-stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
  .octa-stat-icon svg { width: 18px; height: 18px; }
  .octa-stat-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #a1a1aa; font-weight: 700; }
  .octa-stat-value { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
  .octa-stat-chev { color: #52525b; }

  .octa-cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #4f46e5; color: #fff; font-weight: 700; font-size: 14.5px; padding: 15px; border-radius: 14px; margin-bottom: 16px; text-decoration: none; box-shadow: 0 8px 20px rgba(79,70,229,.25); }
  .octa-cta-btn svg { width: 17px; height: 17px; }

  .octa-search-row { display: flex; gap: 10px; margin-bottom: 26px; }
  .octa-search-row .octa-search-wrap { position: relative; flex: 1; }
  .octa-search-row .octa-search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #71717a; }
  .octa-search-row input { width: 100%; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px 12px 38px; color: #fff; font-size: 14px; }
  .octa-search-row input::placeholder { color: #71717a; }
  .octa-filter-btn { width: 46px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #a1a1aa; }
  .octa-filter-btn svg { width: 17px; height: 17px; }

  .octa-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .octa-recent-head h2 { font-size: 17px; font-weight: 800; color: #fff; margin: 0; white-space: nowrap; }
  .octa-recent-head a { color: #818cf8; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; flex: none; }
  .octa-recent-head a svg { width: 14px; height: 14px; }
  .octa-recent-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); text-decoration: none; }
  .octa-recent-item:last-child { border-bottom: none; }
  .octa-recent-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
  .octa-recent-icon img { width: 20px; height: 20px; object-fit: contain; }
  .octa-recent-body { flex: 1; min-width: 0; }
  .octa-recent-name { color: #fff; font-weight: 700; font-size: 14.5px; }
  .octa-recent-date { color: #71717a; font-size: 12px; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
  .octa-recent-date svg { width: 11px; height: 11px; }
  .octa-recent-actions { display: flex; align-items: center; gap: 10px; flex: none; }
  .octa-recent-actions svg { width: 16px; height: 16px; color: #71717a; }

  .octa-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .octa-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
  .octa-pill.ok { color: #6ee7b7; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); }
  .octa-pill.ok .dot { background: #34d399; }
}

/* Bottom tab bar: present on every mobile page once injected, not just home */
@media (max-width: 767px) {
  .octa-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; background: rgba(9,9,11,.92); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 7px 2px calc(7px + env(safe-area-inset-bottom));
  }
  .octa-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: #71717a; text-decoration: none; font-size: 9.5px; font-weight: 700;
    padding: 4px 1px; white-space: nowrap;
  }
  .octa-bottom-nav a svg { width: 20px; height: 20px; }
  .octa-bottom-nav a.active { color: #818cf8; }
  .octa-bottom-nav a .bar { width: 18px; height: 2px; border-radius: 2px; background: transparent; margin-bottom: 1px; }
  .octa-bottom-nav a.active .bar { background: #818cf8; }
}