/* Deal Hunter console - page chrome. Colors come exclusively from the
 * sc-extension-theme.css variables so both themes work; no hex literals. */

/* ---------- Header ---------- */
.dh-header .webix_template { overflow: hidden; }
.dh-brand-box { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 12px; height: 100%; }
.dh-brand-box img { height: 32px; width: 32px; }
.dh-brand-title { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.dh-brand-sub { font-size: 11px; color: var(--text-muted); }

.dh-status-cell .webix_template,
.dh-user-cell .webix_template { display: flex; align-items: center; justify-content: flex-end; height: 100%; }
.dh-status-pill {
    font-size: 12px; padding: 4px 10px; border-radius: 12px; white-space: nowrap;
    border: 1px solid var(--border-color); color: var(--text-secondary); background: var(--bg-secondary);
}
.dh-status-ok  { border-color: var(--accent-success); }
.dh-status-bad { border-color: var(--accent-danger); color: var(--accent-danger); }

.dh-user-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px;
    cursor: pointer; border: 1px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 13px;
}
.dh-user-btn:hover { background: var(--hover-bg); }
.dh-user-name { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.dh-role {
    font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 9px;
    letter-spacing: .04em; border: 1px solid var(--border-color); color: var(--text-secondary);
}
.dh-role-admin { border-color: var(--sc-accent-dark); color: var(--sc-accent-dark); }
.dh-user-menu-head { padding: 8px 12px; font-size: 13px; color: var(--text-primary); }

/* ---------- Locked view / login ---------- */
.dh-locked .webix_template {
    display: flex; align-items: center; justify-content: center; height: 100%; background: var(--bg-primary);
}
.dh-locked-box { text-align: center; color: var(--text-secondary); max-width: 420px; }
.dh-locked-box .sci { font-size: 44px; color: var(--text-muted); }
.dh-locked-box h2 { margin: 12px 0 6px; color: var(--text-primary); }
.dh-locked-box .dh-user-btn .sci { font-size: inherit; }
.dh-login-head { display: flex; align-items: center; height: 100%; }
.dh-login-head img { height: 24px; margin-right: 10px; }
.dh-login-head span { font-size: 16px; font-weight: 600; }
.dh-error { color: var(--accent-danger); font-size: 13px; }
.dh-dim   { color: var(--text-muted); font-size: 13px; }

/* ---------- Page head ---------- */
.dh-page-headbar .webix_template { padding: 0 8px; background: var(--bg-primary); }
.dh-page-head h2 { margin: 8px 0 2px; font-size: 20px; color: var(--text-primary); }
.dh-page-head .dh-lead { color: var(--text-secondary); font-size: 13px; margin: 0 0 6px;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pills in grids and cards ---------- */
.dh-pill {
    display: inline-block; font-size: 11px; line-height: 16px; padding: 1px 8px; border-radius: 9px;
    border: 1px solid var(--border-color); color: var(--text-secondary); background: var(--bg-secondary);
}
.dh-pill-ok   { border-color: var(--accent-success); color: var(--accent-success); }
.dh-pill-info { border-color: var(--accent-info); color: var(--accent-info); }
.dh-pill-warn { border-color: var(--accent-warning); color: var(--accent-warning); }
.dh-pill-bad  { border-color: var(--accent-danger); color: var(--accent-danger); }
.dh-pill-muted { opacity: .7; }

.dh-link { color: var(--accent-info); text-decoration: none; }
.dh-link:hover { text-decoration: underline; }
.dh-num { font-variant-numeric: tabular-nums; }
.dh-row-deal { font-weight: 600; }
/* New within 24 h: bold red text. The theme forces cell and selected-row text
   colors with !important, so these selectors outrank it and stay red when
   the row is selected. */
.dh-new,
.webix_dtable .webix_column .webix_cell span.dh-new,
.webix_dtable .webix_column > div.webix_cell.dh-row-new { color: var(--accent-danger) !important; font-weight: 700; }

/* ---------- Dashboard ---------- */
.dh-dash .webix_template { background: var(--bg-primary); }
.dh-dash-pad { padding: 12px 16px 32px; max-width: 1280px; }
.dh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dh-tile {
    border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px;
    background: var(--bg-secondary);
}
.dh-tile-value { font-size: 26px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dh-tile-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.dh-tile-note  { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.dh-tile-link { cursor: pointer; }
.dh-tile-link:hover { background: var(--hover-bg); }

.dh-section { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 12px; }
.dh-section h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
.dh-section .dh-open { font-size: 12px; color: var(--accent-info); cursor: pointer; }

.dh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dh-table th { text-align: left; font-weight: 600; color: var(--text-secondary);
               border-bottom: 1px solid var(--border-color); padding: 6px 8px; }
.dh-table td { border-bottom: 1px solid var(--border-color); padding: 6px 8px; color: var(--text-primary); }
.dh-table td.dh-num, .dh-table th.dh-num { text-align: right; }
.dh-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.dh-region { color: var(--text-secondary); font-size: 13px; margin-bottom: 12px; }

/* ---------- Detail panels (read-only records) ---------- */
.dh-detail .webix_template { background: var(--bg-primary); }
.dh-detail-pad { padding: 10px 14px 24px; font-size: 13px; color: var(--text-primary); }
.dh-detail-title { font-size: 16px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; }
/* Picture on the left, the facts beside it; the facts wrap under it on a narrow panel. */
.dh-detail-row { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: flex-start; }
.dh-detail-img { flex: 0 0 auto; max-width: 100%; max-height: 260px; border-radius: 6px; border: 1px solid var(--border-color);
                 margin: 4px 0 10px; }
.dh-detail-kv { flex: 1 1 320px; width: auto; margin-top: 4px; }
.dh-kv { border-collapse: collapse; width: 100%; }
.dh-kv th { text-align: left; font-weight: 600; color: var(--text-secondary); width: 150px;
            padding: 4px 8px 4px 0; vertical-align: top; }
.dh-kv td { padding: 4px 0; vertical-align: top; word-break: break-word; }
.dh-pre { white-space: pre-wrap; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px;
          background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px;
          padding: 8px 10px; margin: 6px 0; }
.dh-empty-detail { color: var(--text-muted); padding: 24px 14px; font-size: 13px; }

/* Grid: numbers sit on the right edge of their column. */
.webix_dtable .webix_column.dh-cell-right .webix_cell, .webix_dtable .webix_hcell.dh-cell-right { text-align: right; padding-right: 14px; }

/* Hunt form: the source is shown, not chosen - it follows the search URL. The
 * row mimics a Webix form row: label column = labelWidth 100, then the value. */
.dh-source-row .webix_template { display: flex !important; align-items: center; padding: 0 0 0 2px !important; height: 100%; }
.dh-source-label { flex: 0 0 100px; color: var(--text-primary); font-size: 14px; }
.dh-source-value { display: inline-flex; align-items: center; padding-left: 8px; font-size: 14px; }
.dh-source-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* Hunt form: what the saved search URL asks for, under the Source row. */
.dh-criteria .webix_template { padding: 0 0 0 2px !important; }
.dh-criteria-body { padding: 0 0 6px 100px; }
.dh-criteria-text { font-size: 13px; line-height: 18px; color: var(--text-primary); padding: 0 12px 0 10px; }
.dh-criteria-tail { margin: 4px 0 0 8px; }