/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #f5f5f3; color: #2c2c2a; line-height: 1.6; }
a { color: #185FA5; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout: sidebar + main ── */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px;
    background: #1a1a18; color: #c8c6bc;
    display: flex; flex-direction: column; z-index: 100;
    padding: 0;
}
.main-content { margin-left: 220px; min-height: 100vh; }
.topbar {
    background: #fff; border-bottom: 1px solid #e8e6de;
    padding: 14px 28px; display: flex; align-items: center;
    justify-content: space-between; position: sticky; top: 0; z-index: 50;
}
.page-title { font-size: 17px; font-weight: 600; color: #1a1a18; }
.page-body  { padding: 24px 28px; }

/* ── Sidebar internals ── */
.sidebar-logo {
    padding: 20px 20px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid #2e2e2b;
}
.logo-icon { font-size: 22px; }
.logo-text  { font-size: 15px; font-weight: 600; color: #fff; }
.nav-links  { list-style: none; padding: 10px 0; flex: 1; }
.nav-links li a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px; color: #a8a69c; font-size: 13.5px;
    transition: background 0.15s, color 0.15s;
}
.nav-links li a:hover, .nav-links li a.active {
    background: #2a2a28; color: #fff; text-decoration: none;
}
.nav-icon { font-size: 15px; width: 18px; text-align: center; }
.sidebar-footer {
    padding: 14px 20px; border-top: 1px solid #2e2e2b;
    font-size: 12px; color: #6e6c64;
}
.user-email { display: block; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-link { color: #7a9fc0; font-size: 12px; }

/* ── Marketplace switcher ── */
.marketplace-switcher { padding: 12px 16px; border-bottom: 1px solid #2e2e2b; position: relative; }
.mp-current {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px; background: #2a2a28; border-radius: 6px;
    font-size: 13px; color: #fff; cursor: pointer; user-select: none;
}
.mp-current:hover { background: #333331; }
.mp-caret { font-size: 10px; color: #888; }
.mp-menu {
    position: absolute; top: 100%; left: 16px; right: 16px;
    background: #2a2a28; border-radius: 6px; z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4); overflow: hidden;
}
.mp-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; font-size: 12.5px; color: #c8c6bc;
}
.mp-item:hover { background: #3a3a38; color: #fff; text-decoration: none; }
.mp-item.active { color: #6db3f2; }
.mp-currency { font-size: 11px; color: #666; }
.mp-pill {
    font-size: 12px; background: #f0efe8; color: #5a5850;
    padding: 4px 10px; border-radius: 20px; border: 1px solid #e0ded6;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* ── Auth pages ── */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f0efe8; margin-left: 0; }
.auth-card { background: #fff; border-radius: 12px; padding: 40px 36px; width: 360px; border: 1px solid #e0ded6; }
.auth-logo { font-size: 32px; text-align: center; margin-bottom: 8px; }
.auth-title { font-size: 20px; font-weight: 600; text-align: center; color: #1a1a18; margin-bottom: 4px; }
.auth-sub { font-size: 12px; color: #888; text-align: center; margin-bottom: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #555; font-weight: 500; }
.auth-form input { border: 1px solid #ddd; border-radius: 6px; padding: 9px 11px; font-size: 14px; }
.auth-form input:focus { outline: none; border-color: #185FA5; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px; font-size: 13.5px;
    border: 1px solid #ddd; background: #fff; color: #333;
    cursor: pointer; transition: background 0.12s;
}
.btn:hover { background: #f5f5f3; text-decoration: none; }
.btn-primary { background: #185FA5; color: #fff; border-color: #185FA5; }
.btn-primary:hover { background: #1452910; }
.btn-danger { color: #A32D2D; border-color: #f0c8c8; }
.btn-danger:hover { background: #fcebeb; }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.inline-form { display: inline-block; margin-left: 6px; }

/* ── Alerts ── */
.alert { padding: 10px 14px; border-radius: 6px; font-size: 13.5px; margin-bottom: 16px; }
.alert-success { background: #eaf3de; color: #27500A; border: 1px solid #c0dd97; }
.alert-error   { background: #fcebeb; color: #791F1F; border: 1px solid #f7c1c1; }
.alert-info    { background: #e6f1fb; color: #0C447C; border: 1px solid #b5d4f4; }

/* ── Row highlight (used by categories.php for needs-review rows) ── */
.warn-row { background: #fff9ec; }

/* ── Positive/negative deltas (used by sales-analysis.php) ── */
.text-positive { color: #3B6D11; font-weight: 600; }
.text-negative { color: #A32D2D; font-weight: 600; }

/* ── Badges ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge-red    { background: #fcebeb; color: #A32D2D; }
.badge-orange { background: #faeeda; color: #854F0B; }
.badge-amber  { background: #faeeda; color: #854F0B; }
.badge-green  { background: #eaf3de; color: #3B6D11; }
.badge-blue   { background: #e6f1fb; color: #0C447C; }
.badge-gray   { background: #f1efe8; color: #5F5E5A; }

/* ── Pills ── */
.stat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.pill-red    { background: #fcebeb; color: #A32D2D; }
.pill-orange { background: #faeeda; color: #854F0B; }
.pill-amber  { background: #faeeda; color: #854F0B; }
.pill-green  { background: #eaf3de; color: #3B6D11; }
.pill-blue   { background: #e6f1fb; color: #0C447C; }
.pill-gray   { background: #f1efe8; color: #5F5E5A; }

/* ── KPI Grid ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi-card { background: #fff; border: 1px solid #e8e6de; border-radius: 10px; padding: 18px 20px; }
.kpi-label { font-size: 12px; color: #888; font-weight: 500; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 26px; font-weight: 700; color: #1a1a18; margin-bottom: 2px; }
.kpi-green { color: #3B6D11; }
.kpi-amber { color: #854F0B; }
.kpi-red   { color: #A32D2D; }
.kpi-sub   { font-size: 12px; color: #888; }
.kpi-empty { grid-column: 1 / -1; text-align: center; color: #888; padding: 28px; }
.change { font-size: 12px; font-weight: 600; }
.change.pos { color: #3B6D11; }
.change.neg { color: #A32D2D; }

/* ── Charts ── */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.chart-card { background: #fff; border: 1px solid #e8e6de; border-radius: 10px; padding: 18px 20px; }
.chart-card h3 { font-size: 13.5px; font-weight: 600; color: #444; margin-bottom: 14px; }

/* ── Tables ── */
/* overflow:hidden used to sit here to clip the header background to the
   table's rounded corners — but overflow != visible on any ancestor of a
   sticky element makes THAT ancestor the sticky containing block instead
   of the page, which silently breaks position:sticky on thead th (the
   table's own box never scrolls, so nothing ever looked "stuck"). Rounded
   corners are recreated below on the actual corner cells instead, so
   sticky headers work without giving that up. */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e8e6de; border-radius: 10px; font-size: 13px; }
.data-table thead tr { background: #f5f5f3; }
.data-table th { padding: 10px 13px; text-align: left; font-size: 12px; font-weight: 600; color: #666; border-bottom: 1px solid #e8e6de; white-space: nowrap; }
.data-table td { padding: 9px 13px; border-bottom: 1px solid #f0efe8; vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafaf8; }
.data-table thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.data-table thead tr:first-child th:last-child  { border-top-right-radius: 10px; }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.data-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 10px; }

/* Sticky header on every table, page-wide — stays visible just below the
   topbar as you scroll down, on every page (Campaigns, Incubator,
   Placements, Dashboard, Reports history, etc.), not just tables wrapped
   in .table-scroll. --topbar-h is set from the topbar's real rendered
   height by the script in includes/header.php; 54px is a sane fallback if
   that hasn't run yet (e.g. no-JS). */
.data-table thead th {
    position: sticky; top: var(--topbar-h, 54px); z-index: 5;
    background: #f5f5f3; box-shadow: 0 1px 0 #e8e6de;
}

/* ── Campaign ad-group drill-down ── */
.expand-toggle { cursor: pointer; user-select: none; }
.expand-toggle:hover { color: #185FA5; }
.expand-caret { display: inline-block; width: 10px; font-size: 10px; color: #888; }
.ad-group-row td { background: #fafaf8; padding: 10px 13px 14px 30px; border-bottom: 1px solid #f0efe8; }
.ad-group-subtable { font-size: 12.5px; box-shadow: none; }
.ad-group-subtable th { background: #f0efe8; padding: 7px 12px; }
.ad-group-subtable td { padding: 7px 12px; }
/* This is a nested table inside an already-sticky parent row — making its
   own header sticky too would fight the main table's header for the same
   spot on screen and overlap it, so it stays in normal flow. */
.ad-group-subtable thead th { position: static; box-shadow: none; }

/* ── Table scroll container (compact tables + sticky header) ── */
.table-scroll { overflow: auto; max-height: 68vh; border: 1px solid #e8e6de; border-radius: 10px; }
.table-scroll .data-table { border: none; border-radius: 0; }
.table-scroll thead th {
    position: sticky; top: 0; z-index: 5;
    background: #f5f5f3; box-shadow: 0 1px 0 #e8e6de;
}

/* ── Actions table ── */
.actions-table th, .actions-table td { padding: 6px 10px; font-size: 12.5px; }
.actions-table .term-cell { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions-table .note-cell {
    max-width: 190px; font-size: 12px; color: #666;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.actions-table .remark-cell { padding: 4px 6px; }
.remark-input {
    width: 130px; border: 1px solid transparent; border-radius: 4px;
    padding: 4px 6px; font-size: 12.5px; background: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.remark-input:hover  { border-color: #ddd; }
.remark-input:focus  { outline: none; border-color: #185FA5; background: #fff; }
.remark-input.remark-saved { background: #eaf3de; border-color: #c0dd97; }
.remark-ts { display: block; font-size: 10.5px; color: #999; padding: 1px 6px; }
.actions-table th.col-draggable { cursor: grab; user-select: none; }
.actions-table th.col-draggable:active { cursor: grabbing; }
.actions-table th.col-dragging { opacity: 0.4; }
.actions-table th.col-drop-target { background: #dfeaf7 !important; box-shadow: inset 0 0 0 2px #185FA5; }
.btn-reset-columns {
    font-size: 11.5px; padding: 3px 9px; border-radius: 12px; border: 1px solid #ccc;
    background: #fff; color: #666; cursor: pointer; margin-left: auto;
}
.btn-reset-columns:hover { border-color: #185FA5; color: #185FA5; }
.actions-table .ai-cell { min-width: 160px; max-width: 220px; }
.ai-note {
    font-size: 11.5px; color: #444; background: #f4f2ff; border: 1px solid #ddd6fb;
    border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; line-height: 1.4;
}
.ai-note .ai-bid { margin-top: 4px; color: #185FA5; }
.ai-error { font-size: 11.5px; color: #b23b3a; margin-bottom: 4px; }
.btn-ai-ask {
    font-size: 11.5px; padding: 3px 9px; border-radius: 5px; border: 1px solid #185FA5;
    background: #fff; color: #185FA5; cursor: pointer; transition: background 0.15s;
}
.btn-ai-ask:hover:not(:disabled) { background: #eaf1fb; }
.btn-ai-ask:disabled { opacity: 0.6; cursor: default; }
.section-row td { background: #f0efe8 !important; font-weight: 600; font-size: 12.5px; color: #444; padding: 8px 13px; }
.action-row.completed-row td { opacity: 0.45; }
.action-row.completed-row .term-cell { text-decoration: line-through; }
.action-row.superseded-row td { opacity: 0.6; }
.history-link { margin-left: 6px; text-decoration: none; opacity: 0.55; font-size: 13px; }
.history-link:hover { opacity: 1; }
.copy-term-btn { margin-left: 2px; border: none; background: none; cursor: pointer; opacity: 0.45; font-size: 12px; padding: 0 2px; vertical-align: middle; }
.copy-term-btn:hover { opacity: 1; }
.copy-term-btn.copied { opacity: 1; }
/* .term-cell truncates its whole content with ellipsis (see rule above) —
   fine for plain text cells, but it would clip the copy button along with
   a long search term. display:flex on the <td> itself would fix that but
   breaks out of the table's row layout (the cell stops stretching to the
   row's height and can drift out of column alignment with its header) —
   so instead only the inner text span truncates, sized to leave room for
   the button, and both stay inline so the <td> keeps behaving like a
   normal table cell. */
.actions-table .search-term-cell .term-text { display: inline-block; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.action-check { width: 16px; height: 16px; cursor: pointer; accent-color: #185FA5; }

/* Row accent by type */
.action-negate       { border-left: 3px solid #E24B4A; }
.action-reduce_bid   { border-left: 3px solid #EF9F27; }
.action-increase_bid { border-left: 3px solid #185FA5; }
.action-watch        { border-left: 3px solid #BA7517; }
.action-incubator    { border-left: 3px solid #639922; }

/* ── Progress bar ── */
.progress-bar-wrap { background: #e8e6de; border-radius: 20px; height: 8px; margin-bottom: 16px; position: relative; overflow: hidden; }
.progress-bar { background: #185FA5; height: 100%; border-radius: 20px; transition: width 0.4s; }
.progress-label { font-size: 11px; color: #888; position: absolute; right: 0; top: 11px; }

/* ── Filter bar ── */
.filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-form select, .filter-form input { border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; font-size: 13px; background: #fff; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* ── Report type toggle ── */
.report-type-toggle { display: flex; gap: 18px; margin-bottom: 14px; }
.radio-label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #444; cursor: pointer; }
.radio-label input { accent-color: #185FA5; }

/* ── Upload zone ── */
.upload-zone {
    border: 2px dashed #d0cec6; border-radius: 10px;
    padding: 36px 24px; text-align: center; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fafaf8;
}
.upload-zone.drag-over { border-color: #185FA5; background: #e6f1fb; }
.upload-icon { font-size: 28px; margin-bottom: 8px; color: #888; }
.upload-browse { color: #185FA5; cursor: pointer; text-decoration: underline; }
.upload-actions { margin-top: 14px; }

/* ── Section ── */
.section { margin-bottom: 28px; }
.section h2 { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; }

/* ── Incubator ── */
.incubator-table .acos-sparkline { display: flex; gap: 5px; align-items: center; }
.spark-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; cursor: help; }

/* ── Tabs ── */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid #e8e6de; margin-bottom: 20px; }
.tab { padding: 10px 18px; font-size: 13.5px; color: #666; border-bottom: 2px solid transparent; transition: all 0.12s; }
.tab:hover { color: #333; text-decoration: none; }
.tab.active { color: #185FA5; border-bottom-color: #185FA5; font-weight: 600; }
.tab-count { display: inline-block; background: #e8e6de; color: #666; font-size: 11px; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }

/* ── Settings ── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.settings-card { background: #fff; border: 1px solid #e8e6de; border-radius: 10px; padding: 18px 20px; }
.settings-card h3 { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; }
.settings-card .text-muted { display: block; font-size: 12px; margin-bottom: 14px; }
.settings-card label { display: block; font-size: 13px; color: #444; margin-bottom: 12px; }
.settings-card label:last-child { margin-bottom: 0; }
.input-prefix {
    display: inline-flex; align-items: center; gap: 6px; margin: 6px 0;
    border: 1px solid #ddd; border-radius: 6px; padding: 0 10px; background: #fff;
}
.input-prefix span { font-size: 13px; color: #888; }
.input-prefix input {
    border: none; padding: 7px 0; font-size: 13.5px; width: 90px;
    background: transparent;
}
.input-prefix input:focus { outline: none; }
.input-prefix.input-suffix { flex-direction: row; }
.settings-actions { display: flex; gap: 10px; margin-top: 4px; }
.backup-codes-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-top: 12px; max-width: 460px;
}
.backup-codes-grid code {
    background: #fff; border: 1px solid #d8d5cc; border-radius: 6px;
    padding: 6px 8px; text-align: center; font-size: 13.5px; letter-spacing: 0.5px;
}

.share-bar-wrap { position: relative; width: 100px; height: 18px; background: #f0efe8; border-radius: 4px; overflow: hidden; }
.share-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #185FA5; opacity: 0.25; }
.share-label { position: relative; z-index: 1; font-size: 12px; color: #444; display: block; text-align: center; line-height: 18px; }

/* ── Misc ── */
.text-muted { color: #888; }
.empty-state { text-align: center; padding: 40px; color: #888; }