/* Filter ********************************************************************/

#d-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;    /* no border - white panels on the grey page, like the info and clicks cards */
    margin-bottom: 10px;
}
/* table tools (ListTable): ⋯ button in the top-right corner of the filter bar, takes no space
   (may cover the end of the last filter label) -> Clear filters, Columns & filters, Export to CSV */
.t-filter-bar {
    position: relative;
}
/* filter bar + table as one card (ListTable adds t-joined when the table directly follows the bar):
   bar rounded on top, table rounded at the bottom, no gap - the blue header row divides the two */
#d-filter.t-joined,
.t-filter-bar.t-joined {
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
}
table.at-list.t-joined {
    border-radius: 0 0 10px 10px;
}
/* bar hidden (nothing to show - every ListTable has Export today, so not in use) - table keeps all 4 corners */
.t-filter-bar.t-joined.hide + table.at-list.t-joined {
    border-radius: 10px;
}
/* no filter shown - nothing else gives the bar height */
.t-filter-bar.t-tools-only {
    min-height: 24px;
}
/* row count (ListTable) - the bar's title row: top-left, small; the ⋯ is top-right on the same row.
   "12 shops", or "3 of 12 shops [Show all]" while a filter hides some */
.t-count {
    position: absolute;
    top: 4px;
    left: 10px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}
.t-count a.b {
    margin-left: 8px;
    font-weight: normal;
}
#d-filter.t-has-count,
.t-filter-bar.t-has-count {
    padding-top: 28px;
}
/* no filter shown - the bar is just the title row */
#d-filter.t-tools-only.t-has-count,
.t-filter-bar.t-tools-only.t-has-count {
    padding: 0;
    min-height: 28px;
}
a.t-more {
    position: absolute;
    top: 0px;
    right: 0px;
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    border-radius: 0 10px 0 5px;
}
a.t-more.open {
    color: #17f;
    border-color: #17f;
}
.f-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 1 160px;
}
.f-group.f-search {
    flex: 1 1 220px;
}
.f-group label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.f-group input[type=search],
.f-group select {
    width: 100%;
    box-sizing: border-box;
}
.f-group.f-clear {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}



/* Form ******************************************************/

.form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.form-field.grow { flex: 1; }
.form-field label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    box-sizing: border-box;
}
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: auto;
}



/* DropList ******************************************************************/

.dl-wrap {
    position: relative;
    display: inline-block;
}
.droplist {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    display: none;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 1000;
    width: max-content;
    min-width: 200px;
    max-width: 600px;
    padding: 8px 0 4px;
}
.droplist.show { display: block; }
.dl-wrap.right .droplist { left: auto; right: 0; }
.droplist .dl-search {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.droplist .dl-list {
    max-height: 240px;
    overflow-y: auto;
}
.droplist .dl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-top: 1px solid #eee;
    cursor: pointer;
    font-size: 13px;
}
.droplist .dl-item .dl-label {
    flex: 1;
    white-space: normal;
    word-break: break-word;
}
.droplist .dl-item:hover { background-color: #e8f0fe; }
/* keepOpen: picked while the list is open - ✓ + count */
.droplist .dl-item.dl-added::after {
    content: '\2713 ' attr(data-n);
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #1a7f37;
}
.droplist .dl-item .dl-icon { font-size: 16px; flex-shrink: 0; }
.droplist .dl-item img {
    width: 50px;
    height: 30px;
    object-fit: contain;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    flex-shrink: 0;
}


/* Panel **********************************************************************/

.d-panel {
    border-radius: 10px;
    background-color: #fff;     /* no border - like the other panels */
    position: relative;
    padding: 10px;
}
/* inside a dialog (white, e.g. Planner campaign) - the border keeps the panel visible */
.dialog .d-panel {
    border: 1px solid #ccc;
}

.d-panel h4 {
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}



/* Campaign pill **************************************************************/

.d-campaign-pill {
    display: inline-block;
    border-radius: 10px;
    padding: 6px 15px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 2px;
}
.d-campaign-pill:hover { border-color: #17f; }



/* DevFilter ******************************************************************/

.d-device-filters .d-filter {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    width: 100%;
}
.d-device-filters .d-filter:last-child {
    margin-bottom: 0;
}
.d-device-filters .d-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #aaa;
}
.d-device-filters [data-filter] {
    position: relative;
    flex: 1;
}
.df-btn {
    width: 100%;
    text-align: left;
}
.df-btn.active {
    background-color: #cdf;
    border-color: #17f;
}
.df-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 300;
    padding: 4px 0;
}
.df-dropdown label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
.df-dropdown label:hover { background: #f0f4ff; }

.df-active-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.df-active-row > button { margin-left: auto; flex-shrink: 0; }
.df-active {
    flex: 1;
    min-height: 26px;
    font-size: 12px;
    color: #666;
    background-color: #f4f4f4;
    border-radius: 5px;
    padding: 4px 10px;
}

.df-filters-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.df-filters-wrap .d-filter {
    margin-bottom: 0;
}



/* Simulator ******************************************************************/

#dialog-simulator .dialog {
    width: 80vw;
    height: 80vh;
    display: inline-flex;
    flex-direction: column;
}
#sim-res {
    float: right;
    font-size: 13px;
    font-weight: normal;
    margin-top: 2px;
}
#sim-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
#sim-iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 30px solid #444;
    border-radius: 50px;
    background-color: #444;
    outline: none;
}



/* Status ********************************************************************/

/* .status-loading - small inline spinner, for any "loading" state next to a title, buttons or text
 *   page title or ListTable filter bar: <span id="d-status" class="hide"><span class="status-loading"></span><span id="d-status-text"></span></span>
 *   clicks:     <span id="load-clicks" class="status-loading hide fr"></span>  - after #bg-time (left of the period buttons)
 * self-contained (own image) - so the .load overlay rules (e.g. div.click-charts .load) do not apply */
.status-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 6px;
    vertical-align: -2px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" fill="%230a78ff"><path opacity=".5" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/><path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" /></path></svg>');
}

/* spinner + text inline after the page title - see Status in base2.js */
#d-status {
    margin-left: 10px;
    font-size: 14px;
    font-weight: normal;
    color: #666;
}
/* in the filter bar (ListTable pages) - first item, vertically centred */
#d-filter > #d-status {
    margin-left: 0;
    align-self: center;
}



/* Info card ******************************************************************/

/* label + value pairs on one line, in columns, a light line under each - plus an optional right part
 * (.stats: big numbers, or e.g. a screenshot). Shop page, device page.
 *   <div class='div-data info-card'>
 *       <div class="info">
 *           <div class="kv"><label>City</label><span>Zurich</span></div>
 *           <div class="kv wide"><label>Description</label><span>...</span></div>      - full width
 *       </div>
 *       <div class="stats"><div class="stat on"><b>12</b><span>Online</span></div> ...</div>
 *   </div>
 * label width: --kv-label on .info-card (default 85px) */
div.div-data.info-card {
    align-items: stretch;
    padding: 14px 16px;
    gap: 16px;
}
.info-card .info {
    flex: 1;
    display: grid;
    /* at most 2 columns (1 when narrow) - 3 get hard to read on wide screens */
    grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 28px) / 2)), 1fr));
    gap: 0 28px;
    align-content: start;
}
/* label + value on one line - reads as information, not as a form */
.info-card .kv {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.info-card .kv:last-child {
    border-bottom: none;
}
.info-card .kv.wide {
    grid-column: 1 / -1;
}
.info-card .kv > label {
    flex: 0 0 var(--kv-label, 85px);
    width: auto;
    font-size: 13px;
    color: #999;
}
.info-card .kv > span {
    color: #333;
    min-width: 0;
    overflow-wrap: anywhere;
}
.info-card .kv input[readonly] {
    border: none;
    padding: 0;
    background: none;
    color: #333;
    width: auto;
}
.info-card .stats {
    display: flex;
    border-left: 1px solid #eee;
    padding-left: 16px;
}
.info-card .stat {
    min-width: 110px;
    padding: 0 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.info-card .stat b {
    font-size: 36px;
    line-height: 1.1;
    font-weight: 600;
    color: #333;
}
.info-card .stat span {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.info-card .stat.on b  { color: #1a9e1a; }
.info-card .stat.off b { color: #c00; }
.info-card .stat.off.zero b { color: #bbb; }   /* nothing offline - no alarm colour */

@media (max-width: 900px) {
    div.div-data.info-card { flex-direction: column; }
    .info-card .stats { border-left: none; border-top: 1px solid #eee; padding: 12px 0 0; justify-content: space-around; }
}

/* Table - configurable columns / filters ************************************/

.t-cfg-menu {
    position: fixed;
    z-index: 300;
    min-width: 220px;
    max-width: 90vw;
    display: flex;              /* head / options / foot fixed, .t-cfg-body scrolls - max-height set by _placeMenu */
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 6px 0;
    font-size: 13px;
    color: #333;
}
.t-cfg-menu .t-cfg-body {
    flex: 1 1 auto;
    min-height: 60px;
    overflow-y: auto;
}
.t-cfg-menu .t-cfg-head,
.t-cfg-menu .t-cfg-opts,
.t-cfg-menu .t-cfg-foot {
    flex: none;
}
.t-cfg-menu table { width: 100%; border-collapse: collapse; }
.t-cfg-menu th,
.t-cfg-menu td {
    background: none !important;
    padding: 4px 12px;
    text-align: left;
    white-space: nowrap;
}
.t-cfg-menu th {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.t-cfg-menu th:not(:first-child),
.t-cfg-menu td:not(:first-child) { text-align: center; }
.t-cfg-menu tbody tr:hover td { background: #f0f4ff !important; }
/* the small ⋯ dropdown */
.t-cfg-menu.t-act-menu {
    min-width: 160px;
    padding: 4px 0;
}
.t-act-menu a {
    display: block;
    padding: 6px 14px;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}
.t-act-menu a:hover { background: #f0f4ff; color: #17f; }
.t-act-menu .t-cfg-opts { padding: 6px 14px 2px; }     /* table options under the actions - lined up with the links */
/* views (ListTable cfg.views): small heading, the active view ticked */
.t-act-menu .t-act-head {
    border-top: 1px solid #eee;
    margin-top: 4px;
    padding: 8px 14px 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.t-act-menu a.t-act-view.cur { color: #17f; }
.t-act-menu a.t-act-view.cur::after { content: ' \2713'; }

/* active view - full row at the top of the filter bar (like the app page's Group / Detail View row), a chip with × */
.t-view-row {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.t-view-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.t-view-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 6px 0 10px;
    border-radius: 14px;
    background-color: #e8f0fb;
    color: #1d5fb8;
    font-size: 13px;
    white-space: nowrap;
}
.t-view-chip a {
    color: #1d5fb8;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    padding: 0 2px;
}
.t-view-chip a:hover { color: #000; }

.t-cfg-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 8px 6px 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
    font-weight: 600;
}
.t-cfg-head a {
    color: #999;
    font-size: 16px;
    padding: 0 4px;
}
.t-cfg-head a:hover { color: #17f; }
.t-cfg-opts {
    border-top: 1px solid #eee;
    margin-top: 4px;
    padding: 6px 12px 2px;
}
label.t-cfg-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #333;
    padding: 2px 0;
}
label.t-cfg-opt input[type=number] {
    width: 80px;
}
.t-cfg-foot {
    border-top: 1px solid #eee;
    margin-top: 4px;
    padding: 6px 12px 2px;
    font-size: 12px;
}

/* Key + copy button (app key, shop key) ************************************/

.key-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.key-copy code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}
button.copy-btn {
    padding: 1px 8px;
    font-size: 11px;
    line-height: 16px;
    color: #555;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}
button.copy-btn:hover { border-color: #17f; color: #17f; }
button.copy-btn.copied { border-color: #2a2; color: #2a2; }

/* ClickCard - foldable clicks section (app, shop, device) *******************/

.click-charts.cc-card {
    position: relative;
}
.cc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 24px;
    padding-right: 28px;            /* room for the ⋯ in the corner */
    cursor: pointer;                /* the whole line opens / closes the card */
}
.cc-card:not(.cc-folded) .cc-head {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
}
button.cc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
button.cc-toggle:hover { color: #17f; }
.cc-arrow {
    display: inline-block;
    width: 16px;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    color: #888;
    transition: transform .15s;
}
.cc-card:not(.cc-folded) .cc-arrow { transform: rotate(90deg); }
.cc-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #888;
}
.cc-preview b {
    color: #333;
    font-variant-numeric: tabular-nums;
}
.cc-spark svg { display: block; margin-left: 4px; }
.cc-spark rect { fill: #17f; opacity: .75; }
.cc-folded .cc-body { display: none; }
.cc-head a.t-more {
    border-radius: 0 10px 0 5px;
}
.cc-menu { min-width: 220px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.cc-menu input[type=number] { width: 60px; }
/* actions (e.g. Download clicks…) - last, links like the table ⋯ menu; a line above them when settings are shown */
.cc-menu .cc-acts { margin: 0 -12px; border-top: 1px solid #eee; padding-top: 4px; }
.cc-menu .cc-acts:first-child { border-top: 0; padding-top: 0; }
.cc-menu .cc-acts a { display: block; padding: 5px 12px; color: #333; text-decoration: none; font-size: 13px; white-space: nowrap; }
.cc-menu .cc-acts a:hover { background: #f0f4ff; color: #17f; }

/* Button group, faint (like button.gray2) - row actions, e.g. Playlist Schedule ✎ 🗑 *********/
span.button-group.gray2 b {
    background-color: #f3f3f3;
    color: #888;
    border-color: #ddd;
}
span.button-group.gray2 b:hover { color: #17f; }
/* selected: blue text + border only (stays faint) - the next button's left border is this one's right edge */
span.button-group.gray2 b.sel {
    color: #17f;
    border-color: #17f;
}
span.button-group.gray2 b.sel + b {
    border-left-color: #17f;
}

/* Status chips in tables (e.g. device content: Up to date / Outdated / Unknown) *********/

.chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    color: #555;
    background: #eef0f4;
}
.chip.ok   { color: #1a7f37; background: #e6f4ea; }
.chip.warn { color: #9a5b00; background: #fdf1e2; font-weight: 600; }
.chip.err  { color: #b42318; background: #fdeceb; font-weight: 600; }
.chip.none { color: #888;    background: #f1f1f1; }
.chip.zero { color: #aaa;    background: transparent; }   /* a 0 in a chip column - same padding / font, lines up with the chips */

/* a stats number that filters the table */
.info-card .stat.clickable { cursor: pointer; }
.info-card .stat.clickable:hover span { text-decoration: underline; }
.info-card .stat.warn b { color: #d97706; }
.info-card .stat.warn.zero b { color: #bbb; }

/* status dot: app without devices yet - neutral, not an alarm */
b.con.none {
    background-color: #c8ccd4;
}

/* clicks section before ClickCard.init (page still loading) - looks like the folded card:
   template class 'cc-pending', removed by ClickCard.init - no flash of the open chart */
.click-charts.cc-pending > * {
    display: none;
}
.click-charts.cc-pending::before {
    content: '\25B8\00a0\00a0Clicks';
    display: block;
    min-height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* ListTable empty states (base2.15.js _showEmpty): no data at all -> centred block with one next step;
   data but nothing passing the filters -> one quiet line */
.t-empty {
    max-width: 520px;
    margin: 40px auto;
    padding: 0 16px;
    text-align: center;
    color: #555;
}
.t-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.t-empty-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.t-empty.t-nomatch {
    max-width: none;
    margin: 12px 0;
    text-align: left;
    font-size: 14px;
    color: #888;
}