/* ===================================================================
   FeedHero MCP Reports
   Layout and components, following the FeedHero QA Manager design.
   Self contained - the Minovate theme is no longer loaded, only its
   Font Awesome and jQuery files are referenced in place.
   =================================================================== */

:root {
    --brand-dark: #371e42;
    --rail-bg: #4b2a5e;
    --rail-active: #6d4285;
    --rail-text: #cdbcd9;
    --accent: #f0a12d;

    --page-bg: #eceef1;
    --card-bg: #fff;
    --line: #e0e0e0;
    --line-soft: #eee;
    --line-mid: #ddd;
    --line-faint: #e8e8e8;
    --thead-bg: #f5f6f8;
    --row-hover: #f6f9fb;

    --text: #555;
    --heading: #4a4a4a;
    --muted: #888;
    --muted-light: #999;
    --label: #777;

    --link: #3b7bbf;
    --link-hover: #2a5f96;
    --blue: #4272a8;
    --green: #4c9e5f;
    --slate: #3d5666;
    --teal: #3e8e9e;
    --plum: #8a6da3;

    --ok: #3c763d;
    --bad: #a94442;
    --warn: #8a6d3b;
}

*, *:before, *:after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    font-size: 14px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

::selection { background: rgba(92, 51, 121, .25); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.hidden { display: none !important; }
.text-muted { color: var(--muted-light); }
.text-center { text-align: center; }
.pull-right { float: right; }
.clearfix:after { content: ''; display: table; clear: both; }

/* ------------------------------------------------------------- shell */

.app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
    background: var(--brand-dark);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 54px;
    gap: 16px;
    flex: none;
}

.topbar .brand {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
}

.topbar .brand:hover { text-decoration: none; color: #fff; }
.topbar .brand span { color: var(--accent); }

.topbar-user {
    margin-left: auto;
    position: relative;
}

.topbar-user > .topbar-user-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 6px 2px;
}

.topbar-user > .topbar-user-toggle:hover { text-decoration: none; color: #fff; }

.topbar-user .initials {
    background: #fff;
    color: var(--brand-dark);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: .04em;
}

.topbar-menu {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 170px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 0;
    z-index: 40;
}

.topbar-menu li a {
    display: block;
    padding: 8px 16px;
    color: var(--text);
    font-size: 14px;
}

.topbar-menu li a:hover { background: var(--thead-bg); text-decoration: none; }
.topbar-menu li a .fa { width: 16px; margin-right: 8px; color: var(--muted-light); }
.topbar-menu .divider { height: 1px; background: var(--line-soft); margin: 4px 0; }

.app-body { display: flex; flex: 1; align-items: stretch; }

/* --------------------------------------------------------------- rail */

.rail {
    width: 102px;
    background: var(--rail-bg);
    flex: none;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.rail a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 13px 6px;
    color: var(--rail-text);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}

.rail a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.rail a.active { background: var(--rail-active); color: #fff; }
.rail a .fa { font-size: 20px; }

/* ------------------------------------------------------------ content */

.content { flex: 1; min-width: 0; padding: 22px 28px 48px; }

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-head h1 {
    font-weight: 300;
    font-size: 36px;
    color: var(--heading);
    margin: 0 0 14px;
}

.page-head h1 small {
    font-size: 18px;
    color: var(--muted-light);
    font-weight: 300;
}

.page-actions { display: flex; gap: 8px; flex: none; padding-top: 6px; }

.crumbs {
    background: var(--card-bg);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.crumbs .crumb-home {
    background: #3d3d3d;
    color: #fff;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.crumbs .crumb-home:hover { color: #fff; text-decoration: none; }
.crumbs .sep { color: #bbb; padding: 0 12px; }
.crumbs a { color: var(--plum); }
.crumbs .current { color: var(--label); }

.notice {
    background: var(--card-bg);
    border: 1px solid var(--line);
    padding: 14px 18px;
    font-size: 14.5px;
    color: #8a8f98;
    margin-bottom: 18px;
}

.notice b { color: #6b7078; }

.alert {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-left: 4px solid var(--bad);
    padding: 14px 18px;
    font-size: 14px;
    color: var(--bad);
    margin-bottom: 18px;
}

.alert .fa { margin-right: 6px; }

/* -------------------------------------------------------------- tiles */

.tiles { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

.tile {
    flex: 1;
    min-width: 170px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-top: 3px solid var(--line-mid);
    padding: 12px 16px;
}

.tile .figure { font-size: 27px; font-weight: 300; color: var(--heading); }
.tile .caption,
.report-card .caption {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-light);
}

/* ------------------------------------------------------------- cards */

.card { background: var(--card-bg); border: 1px solid var(--line); margin-bottom: 18px; }
.card-pad { padding: 16px 18px; }

.card-bar {
    padding: 12px 18px;
    font-size: 13px;
    color: var(--muted);
    border-bottom: 1px solid var(--line-faint);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.card-bar .hint { color: #aaa; }

.card-foot {
    padding: 12px 18px;
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--line-faint);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; }

.field label,
label.field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--label);
    margin-bottom: 5px;
}

.input, select.input, textarea.input {
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}

select.input { padding: 7px 8px; }

.btn {
    border: none;
    font: inherit;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: var(--slate);
    text-decoration: none;
}

.btn:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }

/* A button laid out as a flex box would otherwise ignore its hidden flag */
.btn[hidden] { display: none; }
.btn-blue { background: var(--blue); }
.btn-green { background: var(--green); }
.btn-slate { background: var(--slate); }
.btn-plain { background: #fff; color: var(--text); border: 1px solid #ccc; }
.btn-plain:hover { color: var(--text); background: var(--thead-bg); filter: none; }
.btn-sm { font-size: 13px; padding: 8px 14px; }

/* ------------------------------------------------------------- table */

.grid { width: 100%; border-collapse: collapse; font-size: 14px; }

.grid > thead > tr > th {
    text-align: left;
    background: var(--thead-bg);
    border-bottom: 1px solid var(--line-mid);
    padding: 9px 12px;
    font-size: 12.5px;
    color: #666;
    font-weight: 700;
    /* Stays put while the rows scroll under it. A collapsed border does not
       paint on a sticky cell, so the rule beneath is drawn as a shadow. */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--line-mid);
}

.grid > thead > tr > th a { color: #666; }
.grid > thead > tr > th a:hover { color: var(--link); text-decoration: none; }
.grid > thead > tr > th .fa { margin-left: 4px; color: var(--link); }

.grid > tbody > tr > td {
    border-bottom: 1px solid var(--line-soft);
    padding: 9px 12px;
    vertical-align: middle;
}

/* Every cell stays on one line - the grid scrolls sideways instead of a value
   folding onto a second row and making the rows uneven. */
.grid > thead > tr > th,
.grid > tbody > tr > td { white-space: nowrap; }

.grid > tbody > tr:hover { background: var(--row-hover); }
.grid .empty { padding: 34px 12px; text-align: center; color: var(--muted-light); }

/* The grid scrolls in both directions inside its own box, which is what lets
   the header stay put - a sticky header needs the scrolling ancestor to be the
   one it sticks to. */
.table-scroll {
    width: 100%;
    max-height: calc(100vh - 190px);
    min-height: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Report grids are wider than their card and scroll sideways, so the cells
   stay on one line unless the column is marked as prose. */

/* While an ajax redraw is in flight the old grid stays put, dimmed. */
.report-grid { position: relative; min-height: 120px; }
.report-grid.grid-loading { opacity: .4; pointer-events: none; }

.report-grid.grid-loading:after {
    content: '';
    position: absolute;
    top: 60px;
    left: 50%;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: rgba(0, 0, 0, .55);
    border-radius: 50%;
    -webkit-animation: report-grid-spin .7s linear infinite;
    animation: report-grid-spin .7s linear infinite;
}

@-webkit-keyframes report-grid-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes report-grid-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------- column header menus */

/* Each header holds its own sort and filter, the way a spreadsheet does. */
.grid > thead > tr > th .th-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}

.grid > thead > tr > th .th-label { overflow: hidden; text-overflow: ellipsis; }

.grid > thead > tr > th .th-menu-btn {
    flex: none;
    border: 1px solid transparent;
    background: none;
    color: #9aa1a9;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
}

.grid > thead > tr > th .th-menu-btn .fa { margin: 0; color: inherit; }
.grid > thead > tr > th .th-menu-btn:hover { background: #fff; border-color: var(--line); color: var(--link); }

.grid > thead > tr > th.th-sorted,
.grid > thead > tr > th.th-filtered { color: var(--heading); }

.grid > thead > tr > th.th-sorted .th-menu-btn,
.grid > thead > tr > th.th-filtered .th-menu-btn { color: var(--link); }

.grid > thead > tr > th.th-filtered { background: #eef4fb; }
.grid > thead > tr > th.th-open .th-menu-btn { background: #fff; border-color: var(--line); color: var(--link); }

/* Grouped headers: the group names sit in a short row of their own, and the
   columns under them stick just below it. The row is given a fixed height so
   the second row knows where to stop. */
.grid > thead > tr.th-group-row > th.th-group {
    height: 30px;
    padding: 5px 12px;
    line-height: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    border-left: 1px solid var(--line-mid);
    box-shadow: inset 0 -1px 0 var(--line-mid);
}

/* Each group takes the next colour in turn, the four the main application's
   search term report gives its product fields */
.grid > thead > tr.th-group-row > th.th-group-tone-1 { background: #add8e6; }
.grid > thead > tr.th-group-row > th.th-group-tone-2 { background: #ffe4c4; }
.grid > thead > tr.th-group-row > th.th-group-tone-3 { background: #d3d3d3; }
.grid > thead > tr.th-group-row > th.th-group-tone-4 { background: #5f9ea0; }

.grid > thead > tr.th-sub-row > th { top: 30px; }

/* The first column of each group draws the rule the group header starts on */
.grid > thead > tr > th.th-group-start,
.grid > tbody > tr > td.group-start { border-left: 1px solid var(--line-mid); }

/* The menu is moved here while it is open, clear of the grid's own scrolling
   box, which would otherwise cut it off at its edge. */
#th-menu-host { position: absolute; top: 0; left: 0; }

.th-menu {
    position: absolute;
    z-index: 1200;
    width: 230px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line-mid);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    font-size: 13px;
    font-weight: 400;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.th-menu .th-sort {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font: inherit;
    color: var(--text);
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.th-menu .th-sort:hover { background: var(--thead-bg); }
.th-menu .th-sort.is-on { color: var(--link); font-weight: 700; }
.th-menu .th-sort .fa { width: 14px; margin-right: 6px; color: var(--muted-light); }
.th-menu .th-sort.is-on .fa { color: var(--link); }

.th-menu-sep { height: 1px; background: var(--line-faint); margin: 7px 0; }

.th-menu .th-filter {
    width: 100%;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}

.th-menu-foot { display: flex; gap: 6px; margin-top: 8px; }
.th-menu-foot .btn { flex: 1; justify-content: center; padding: 6px 10px; font-size: 13px; }

/* Rows per page sits with the pager, above the grid. */
.card-bar .bar-tools { display: flex; align-items: center; gap: 16px; }
.rows-per-page { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--muted); }

.bar-user-filter select { width: 240px; }

.rows-per-page select {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}

/* A link cell copies its url instead of opening it. */
.copy-link { white-space: nowrap; cursor: pointer; }
.copy-link .fa { margin-right: 5px; color: var(--muted-light); }
.copy-link:hover .fa { color: var(--link-hover); }

/* ------------------------------------------------------------- toasts */

/* Top right, clear of the 54px top bar so it never covers the account menu. */
#toast-stack {
    position: fixed;
    right: 18px;
    top: 68px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 3px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
    cursor: pointer;
    max-width: 320px;
}

.toast.toast-in { opacity: 1; transform: none; }
.toast.toast-error { background: var(--bad); }

/* The login screen has no top bar to clear. */
.login-page #toast-stack { top: 18px; }

/* --------------------------------------------------------- pagination */

.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* The same links again in the bar above the grid, so a long report can be
   paged without scrolling to the bottom of it first. */
.pager-top { margin-left: auto; }
.pager .count { margin-right: auto; }

.pager a, .pager span.page {
    border: 1px solid var(--line-mid);
    padding: 4px 10px;
    border-radius: 3px;
    color: var(--text);
    cursor: pointer;
}

.pager a:hover { background: var(--thead-bg); text-decoration: none; }
/* span.page as well, or .pager span.page above keeps the number dark */
.pager .active, .pager span.page.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.pager .disabled { color: #ccc; border-color: var(--line-soft); cursor: default; }

/* ------------------------------------------------------------- lists */

.report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.report-card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-top: 3px solid var(--plum);
    padding: 16px 18px;
    display: block;
    color: var(--text);
}

a.report-card:hover { background: #fafbfc; text-decoration: none; color: var(--text); }
.report-card .name { font-size: 18px; font-weight: 300; color: var(--heading); margin-bottom: 4px; }
.report-card .name .fa { color: var(--plum); margin-right: 8px; }
.report-card .desc { font-size: 13px; color: var(--muted-light); }

/* A report card holding a count reads as a caption with its figure under it. */
.report-card .figure { font-size: 27px; font-weight: 300; color: var(--heading); line-height: 1.2; }
.report-summary .report-card .caption { margin-bottom: 2px; }
.report-card .caption {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-light);
}

/* Summary counts sit above the grid and follow the filters as they change.
   They share one row and shrink to fit, rather than inheriting the wide
   minimum the dashboard's report cards want, which left a ragged second row. */
.report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.report-summary .report-card {
    flex: 1 1 140px;
    min-width: 0;
    padding: 12px 14px;
}

.report-summary .report-card .figure {
    font-size: 24px;
    line-height: 1.15;
    overflow-wrap: break-word;
}

.report-summary .report-card .caption { overflow-wrap: break-word; }

/* A box that applies a filter behaves like one, and stays lit while it holds. */
.report-summary a.report-card { cursor: pointer; }
.report-summary a.report-card:hover { background: #fafbfc; }
.report-summary a.report-card.card-active {
    background: #faf7fc;
    box-shadow: inset 0 0 0 1px var(--rail-active);
}
.report-summary .report-card { border-top-color: var(--teal); }
.report-summary .report-card.accent-blue { border-top-color: var(--blue); }
.report-summary .report-card.accent-plum { border-top-color: var(--plum); }
.report-summary .report-card.accent-green { border-top-color: var(--green); }

/* ------------------------------------------------------------- login */

.login-page {
    min-height: 100vh;
    background: var(--brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-box { width: 100%; max-width: 380px; }

.login-box .brand {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
    text-align: center;
    margin-bottom: 18px;
}

.login-box .brand span { color: var(--accent); }
.login-box .card { margin-bottom: 0; }
.login-box .field { margin-bottom: 14px; }
.login-box .btn { width: 100%; justify-content: center; }

.login-box .remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 16px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.login-box .remember-me input { margin: 0; width: 15px; height: 15px; cursor: pointer; }
.login-box .foot { text-align: center; color: #8d7c99; font-size: 12px; margin-top: 16px; }

/* ------------------------------------------------------- small screens */

@media (max-width: 900px) {

    .rail { width: 68px; }
    .rail a { font-size: 10px; padding: 11px 4px; }
    .content { padding: 18px 14px 40px; }
    .page-head { flex-direction: column; }
    .page-head h1 { font-size: 28px; }

    .card-bar { flex-wrap: wrap; gap: 10px; }
    .report-summary .report-card { flex-basis: 120px; padding: 10px 12px; }
    .report-summary .report-card .figure { font-size: 20px; }
}

@media (max-width: 560px) {

    .report-summary .report-card { flex-basis: 100%; }
}