/* The app's shared look (Joshua, 9 Oct 2026: "more appealing"). Loaded last, after each tab's own CSS.
   Tabs are icon tiles, each in its own colour; counts are badges on the icon; the "Add a to-do" style bars get a
   round + button. Colours stay soft so the app still sits comfortably inside Shopify admin. */

/* Anything marked hidden stays hidden, even where a rule gives it display: grid/flex (e.g. the Paste SKUs box,
   whose Close button didn't work before 9 Oct 2026). */
[hidden] { display: none !important; }

/* ---------- tabs ---------- */
/* A grid, so on a narrow screen the tiles wrap onto a second row instead of hiding off the side */
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; padding: 2px 2px 12px; margin-bottom: 4px; border-bottom: 1px solid #ebebeb; }
.tab {
  --tint: #f1f1f1; --ink: #4a4a4a;
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 9px; border: 1px solid transparent; border-radius: 12px; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 550; line-height: 1.25; color: #4a4a4a; text-align: center;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.tab:hover { background: #f7f7f7; }
a.tab-link { text-decoration: none; }
.tab:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.tab-ic { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink); transition: background .15s, color .15s, transform .15s; }
.tab-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab:hover .tab-ic { transform: translateY(-1px); }
.tab-label { text-wrap: balance; }
.tab[aria-selected="true"] { background: var(--tint); border-color: color-mix(in srgb, var(--ink) 18%, transparent); color: #1a1a1a; font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tab[aria-selected="true"] .tab-ic { background: var(--ink); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 35%, transparent); }

/* Each tab's colour */
#tab-stock   { --tint: #e3f0ff; --ink: #0b5cad; }
#tab-ship    { --tint: #dcf5ef; --ink: #0d6b5c; }
#tab-press   { --tint: #efe8ff; --ink: #6b3fd1; }
#tab-checks  { --tint: #dff6e6; --ink: #1f7a3d; }
#tab-emails  { --tint: #e7ecf3; --ink: #3d5170; }
#tab-todo    { --tint: #ffebdd; --ink: #b4520f; }
#tab-improve { --tint: #fff2c2; --ink: #8a6500; }
#tab-systems { --tint: #ffe5e8; --ink: #b42339; }
#tab-guide   { --tint: #e6f0ea; --ink: #426856; } /* AMP3 sage: the staff guide link */

/* Count badges on the icon: red = waiting for someone to act, dark = how many are open */
.tab-n { position: absolute; top: -7px; left: 26px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; border: 2px solid #fff; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: #c4320a; }
.tab-n:empty { display: none; }
#presscount, #checkscount, #todocount, #improvecount { color: #fff; } /* the old red/grey count text (press.css, checks.css) */
#todocount, #improvecount { background: #4a4a4a; }
#systemscount { background: #fff; color: #303030; border-color: #e3e3e3; }
#systemscount .y-dot { width: 7px; height: 7px; margin: 0; }
@media (max-width: 760px) { .tabs { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); } .tab-label { font-size: 12px; } }

/* ---------- "Add a to-do" / "Suggest an improvement" bars: a round + button ---------- */
.t-add > summary { display: flex; align-items: center; gap: 10px; list-style: none; font-size: 13.5px; }
.t-add > summary::-webkit-details-marker { display: none; }
.t-add > summary::before { content: '+'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #303030; color: #fff; font-size: 17px; font-weight: 600; line-height: 1; flex: none; transition: transform .15s; }
.t-add[open] > summary::before { content: '−'; }
.t-add > summary:hover::before { transform: scale(1.08); }
.t-add { transition: box-shadow .15s; }
.t-add:hover { box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* ---------- filters and inputs: one height, softer borders, clear focus ---------- */
.t-filters select, .t-filters input { min-height: 34px; border-color: #c9c9c9; }
.t-filters select:focus, .t-filters input:focus, .t-form input:focus, .t-form select:focus, .t-form textarea:focus, .q-form textarea:focus { outline: 2px solid #005bd3; outline-offset: 0; border-color: #005bd3; }

/* ---------- intro text under a tab: a light lead-in rather than a block of grey ---------- */
.i-intro, .c-intro, .y-intro { color: #4a4a4a; }