/*
 * finobe-custom.css — our own styles layered on top of finobe's app.css.
 *
 * Loaded on every full page by the InjectCustomCss middleware, injected right
 * AFTER the shell's own /css/app.css and BEFORE the dark.css that ApplyTheme
 * injects at </head>, so finobe's dark-mode rules still win over these.
 *
 * Rule of thumb: reach for a real finobe class first (e.g. .forum-alert, the
 * .search-input input-group). Only genuinely-new, reusable bits belong here —
 * keep them OUT of inline style="" attributes. Truly one-off values may stay
 * inline, but anything reused or worth theming goes here as a class.
 */

/* Forum — angry blob in the "virus" warning modal (new post / reply) */
.virus-blob { width: 104px; height: 104px; margin-bottom: 10px; }

/* Forum — new-post content box: flush inside its card, tall while empty */
.forum-content-box { border: 0; border-radius: 0; min-height: 320px; }

/* Forum — .forum-alert sidebar body (Stickied Posts / Reminders): small + tight */
.forum-alert-body { font-size: .78rem; margin-bottom: 0; padding-left: 1.1rem; }
.forum-alert-body--flush { padding-left: 0; } /* the "No stickied posts." line */

/* Character — per-tab item search: compact, aligned to the top-right */
.tab-search-wrap { max-width: 250px; }

/* Studio Toolbox (ToolboxController): the 2016-Studio layout -- category dropdown
   beside the search box, three tiles per row -- sized for the ~285px panel.
   app.css is a purged Bootstrap subset (no col-5/col-7, no form-row), so the
   header row and the tile grid are laid out here with flexbox. */
.toolbox-head { margin-bottom: 8px; }
.toolbox-head .toolbox-bar { display: flex; align-items: stretch; }
.toolbox-head .toolbox-cat { flex: 0 0 42%; max-width: 42%; padding-right: 3px; }
.toolbox-head .toolbox-q { flex: 1 1 auto; min-width: 0; padding-left: 3px; }
.toolbox-head .form-control { font-size: 13px; height: calc(1.5em + .5rem + 2px); }
.toolbox-grid { display: flex; flex-wrap: wrap; margin-left: -4px; margin-right: -4px; }
.toolbox-grid .toolbox-empty { flex: 0 0 100%; }
.toolbox-card { flex: 0 0 33.3333%; max-width: 33.3333%; padding-left: 4px; padding-right: 4px; margin-bottom: 8px; min-width: 0; }
/* The whole card is the click target and the drag source: no text selection, so a
   press on the name starts the card drag rather than a text drag. */
.toolbox-card .card { margin-bottom: 0; height: 100%; cursor: pointer; transition: box-shadow .2s ease;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: element; }
.toolbox-card .card-body { padding: .3rem; }
.toolbox-thumb { position: relative; height: 72px; display: flex; align-items: center; justify-content: center; }
.toolbox-thumb img { max-height: 72px; max-width: 100%; object-fit: contain; pointer-events: none; }
.toolbox-thumb .toolbox-spinner { display: none; width: 40px; height: 40px; }
.toolbox-thumb.pending .toolbox-render { display: none; }
.toolbox-thumb.pending .toolbox-spinner { display: block; }
.toolbox-thumb .toolbox-play { position: absolute; right: 2px; bottom: 2px; padding: 0 5px; font-size: 10px; line-height: 18px; }
.toolbox-card .name { display: block; font-size: 12px; line-height: 1.2; margin-top: 4px; }
.toolbox-card .creator { font-size: 11px; margin: 0; }

/* finobe AJAX action toast: a compact, centered, floating popup at the top
   (finobe.net uses a BootstrapVue b-toast for these, e.g. purchase). Distinct
   from the full-width nav flash banner used for redirect actions (login). */
.finobe-toast{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:2147483000;
  padding:13px 24px;background:#38a169;color:#fff;text-align:center;font-size:.95rem;
  box-shadow:0 4px 14px rgba(0,0,0,.3);pointer-events:none;max-width:92vw;transition:opacity .3s ease;}
.finobe-toast.finobe-toast-error{background:#e3342f;}

/* Inbox — the message row is an <a>, so the global `a:not(.btn){text-decoration:
   underline}` (in app.css AND dark.css) underlined the whole card on hover. The
   real finobe rows don't underline; kill it with a selector specific enough
   (0,2,1) to beat that rule (0,1,1) in both stylesheets without !important. */
.finobe__message-listing a.finobe__message-item,
.finobe__message-listing a.finobe__message-item:hover,
.finobe__message-listing a.finobe__message-item:focus{text-decoration:none;}

/* Inbox "Sections" header: bold + very slightly bigger, and pulled a little
   closer to the tab buttons underneath (but not flush). */
.msg-sections-head{font-weight:700;font-size:1.1rem;margin-bottom:.4rem;}

/* Inbox section tabs (only the full-width sidebar buttons, not the pager arrows
   which also carry data-msg-section): a hair taller than a default .btn, and a
   smaller right-aligned message count (smaller only -- NOT greyed/dimmed, it
   keeps the button's own text colour). */
a[data-msg-section].full-width{padding-top:.5rem;padding-bottom:.5rem;}
a[data-msg-section].full-width .finobe-msg-count{font-size:.72rem;line-height:1.75;}

/* The owner config (cog) / delete (trash) icon buttons on the game + item
   pages. finobe's are very slightly thinner than a default .btn with a very
   slightly larger glyph inside -- the base .btn is .375rem/.75rem padding and
   a .875rem icon, so trim the padding a hair and bump the icon. */
/* .btn.n-icon-btn (two classes) so it beats the plain .btn padding/line-height
   that app.css AND dark.css both define -- dark.css is injected last, so an
   equal-specificity .n-icon-btn lost to it and the button stayed wide. */
.btn.n-icon-btn{padding:.5rem .55rem;line-height:1;}
.btn.n-icon-btn>i{font-size:.95rem;}

/* The game-page Statistics/Badges tab strip: in the 2021 archive the UNSELECTED
   tab also carries a bottom border so the baseline runs the full width (the
   selected tab is the thick blue indicator, the rest a subtle grey line). Our
   app.css only bordered the active + hover states, leaving the unselected side
   open. Match the active's 4px so they align, padding-bottom:0 to keep height. */
.finobe-tabs>.tab:not(.active){border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:3px;}
/* 2021 finobe thinned the tab indicator from 4px to 2px (active + hover). The
   .finobe-tabs-card ancestor lifts specificity above the 4px rule that app.css
   AND dark.css both carry. padding-bottom is set so every state keeps the same
   content box (border-box: 40 - border - padding), so the label never shifts. */
.finobe-tabs-card .finobe-tabs>.tab.active{border-bottom:3px solid #039be5;padding-bottom:1px;}
.finobe-tabs-card .finobe-tabs>.tab:not(.active):hover{border-bottom:3px solid #ccc;padding-bottom:1px;}

/* Games listing (/games): a fixed 7-across grid, 3 rows per page (21/page),
   instead of app.css's responsive small-card wrap. The cards keep their 150px
   finobe look, centered in each column; gap replaces the card-div's own margin.
   minmax(0,1fr) lets the tracks shrink so the grid never forces page overflow. */
#games{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center;gap:12px 6px;}
#games>.game-card-div{margin:0;}