/*
 * dashboard.css — uRADMonitor dashboard panel styles
 *
 * Design system d10: dark/light theme via data-d10-theme attribute,
 * set by uradmonitor-navbar on #uram-navbar and mirrored to each
 * .urm-wrap container via the per-panel theme sync snippet.
 *
 * Loaded globally via wp_enqueue_scripts in functions.php.
 * No panel-specific overrides belong here; this file covers every
 * shared primitive: tokens, layout, cards, badges, buttons, inputs,
 * tables, toasts. Each panel uses only these classes.
 *
 * (C) 2015 - 2026 Magnasci SRL, www.magnasci.com
 * Radu Motisan, radu.motisan@magnasci.com
 * Global Environmental Monitoring Network
 */

/* ── d10 design tokens ──────────────────────────────────────────── */
.urm-wrap {
    --d10-bg:       #0e1116;
    --d10-bg-alt:   #161b22;
    --d10-card:     #1a2029;
    --d10-card-2:   #232a36;
    --d10-border:   #2a3340;
    --d10-text:     #e6edf3;
    --d10-text-dim: #8590a3;
    --d10-text-mu:  #5b6677;
    --d10-accent:   #3aa0ff;
    --d10-shadow:   0 4px 20px rgba(0,0,0,0.45);
    --d10-r:        8px;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: var(--d10-text);

    /* fill the panel background */
    background-color: var(--d10-bg);
    /* do NOT set width:100% — as a block element it fills its parent
       naturally. Explicit 100% on a child of a .row with negative margins
       causes the 30px overflow we see on the right side.              */
    box-sizing: border-box;
    padding: 8px 15px 16px;
    margin: 0;
    /* prevent any child from bleeding out */
    overflow-x: hidden;
}

/* Light theme */
.urm-wrap[data-d10-theme="light"] {
    --d10-bg:       #f3f5f9;
    --d10-bg-alt:   #fff;
    --d10-card:     #fff;
    --d10-card-2:   #eef1f6;
    --d10-border:   #d4dae6;
    --d10-text:     #1c2430;
    --d10-text-dim: #4e5a6e;
    --d10-text-mu:  #8a96aa;
    --d10-accent:   #1a73e8;
    --d10-shadow:   0 4px 16px rgba(20,30,50,.10);
}

/* Alpine cloak */
[x-cloak] { display: none !important; }

/* ── Dashboard Bootstrap tab overrides ─────────────────────────────
   Template structure: .container.dashboard > .row > .tab-content > .tab-pane
   .row has Bootstrap margin: 0 -15px which causes horizontal overflow.
   Fix: give .tab-pane padding 15px on both sides (cancels the -15px margin),
   and set background on both .tab-content and .tab-pane so there are no
   white gaps regardless of spacing.                                */
/* Layout fix for the dashboard page.
   The WordPress theme shows dashboard content in a centred column
   that is narrower than the Bootstrap .container (1170px on wide
   screens). The column width is defined by the content area between
   the two grey side panels, roughly 600px. We cap the container
   width to match and prevent the panels from bleeding to the right. */
.container.dashboard {
    overflow-x: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.container.dashboard > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.dashboard .tab-content {
    background-color: #0e1116;
    border-radius: 0 0 6px 6px;
    border: 1px solid #2a3340;
    border-top: none;
    margin-top: -1px;
    /* no overflow:hidden here — it clipped tall panels and stopped the
       page height from growing with the content */
    overflow: visible;
}
/* Bootstrap fade panes keep height 0 until shown; make sure the active
   one contributes its full height to the page */
.dashboard .tab-pane { display: none; }
.dashboard .tab-pane.active { display: block; height: auto; }
.dashboard .tab-pane {
    background-color: #0e1116;
    padding: 4px 0 0;
}
.dashboard .tab-pane.active {
    display: block;
}

/* ── Dashboard page background ─────────────────────────────────────
   The body/container background is white from Bootstrap/theme CSS.
   We target the dashboard page specifically. The JS theme sync in
   the template also updates these via style attribute.            */
body.page-template-page-templates-dashboard-php {
    background-color: #0e1116 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
body.page-template-page-templates-dashboard-php .subhead {
    background-color: #161b22 !important;
    border-bottom: 1px solid #2a3340 !important;
}
body.page-template-page-templates-dashboard-php .subhead h3 {
    color: #e6edf3 !important;
}
/* Bootstrap nav tabs on dark background */
.dashboard .nav-tabs {
    border-bottom-color: #2a3340 !important;
    background-color: transparent !important;
}
.dashboard .nav-tabs > li > a {
    color: #8590a3 !important;
    border-color: transparent !important;
    background-color: transparent !important;
}
.dashboard .nav-tabs > li > a:hover {
    color: #e6edf3 !important;
    background-color: #232a36 !important;
    border-color: #2a3340 #2a3340 transparent !important;
}
.dashboard .nav-tabs > li.active > a,
.dashboard .nav-tabs > li.active > a:hover,
.dashboard .nav-tabs > li.active > a:focus {
    color: #e6edf3 !important;
    background-color: #0e1116 !important;
    border-color: #2a3340 #2a3340 #0e1116 !important;
}

/* Light overrides for page and tabs */
body.page-template-page-templates-dashboard-php.urm-page-light {
    background-color: #f3f5f9 !important;
}
body.page-template-page-templates-dashboard-php.urm-page-light .subhead {
    background-color: #fff !important;
    border-bottom-color: #d4dae6 !important;
}
body.page-template-page-templates-dashboard-php.urm-page-light .subhead h3 {
    color: #1c2430 !important;
}
.urm-page-light .dashboard .nav-tabs > li > a {
    color: #4e5a6e !important;
}
.urm-page-light .dashboard .nav-tabs > li > a:hover {
    color: #1c2430 !important;
    background-color: #eef1f6 !important;
    border-color: #d4dae6 #d4dae6 transparent !important;
}
.urm-page-light .dashboard .nav-tabs > li.active > a,
.urm-page-light .dashboard .nav-tabs > li.active > a:hover {
    color: #1c2430 !important;
    background-color: #f3f5f9 !important;
    border-color: #d4dae6 #d4dae6 #f3f5f9 !important;
}
.urm-page-light .dashboard .tab-content {
    background-color: #f3f5f9 !important;
    border-color: #d4dae6 !important;
}
.urm-page-light .dashboard .tab-pane {
    background-color: #f3f5f9 !important;
}

/* ── Section heading ────────────────────────────────────────────── */
.urm-sh {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--d10-text-dim);
    border-bottom: 1px solid var(--d10-border);
    margin-bottom: 12px;
}

.urm-cnt {
    background: var(--d10-card-2);
    color: var(--d10-text-dim);
    border: 1px solid var(--d10-border);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
}

/* ── Grid: 1 col mobile, 2 col tablet, 3 col wide ──────────────── */
.urm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 4px;
    /* ensure grid never exceeds its container */
    min-width: 0;
    max-width: 100%;
}
@media (min-width: 700px)  { .urm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .urm-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Generic card ────────────────────────────────────────────────── */
.urm-card {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
}
.urm-card:hover {
    border-color: var(--d10-accent);
    box-shadow: 0 0 0 1px rgba(58,160,255,.13);
}
/* span full width when expanded in a grid */
.urm-card-open { grid-column: 1 / -1; }

/* info / description card */
.urm-info {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--d10-text-dim);
}
.urm-info a { color: var(--d10-accent); }

/* ── Card head row (clickable) ───────────────────────────────────── */
.urm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    flex: 1;
}

/* ── Card expand body ────────────────────────────────────────────── */
.urm-body {
    border-top: 1px solid var(--d10-border);
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Status dot ─────────────────────────────────────────────────── */
.urm-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #555;
    flex-shrink: 0;
}
.urm-dot-on  { background: #4caf50; box-shadow: 0 0 6px rgba(76,175,80,.4); }
.urm-dot-off { background: #f44336; }

/* ── Monospace device ID ─────────────────────────────────────────── */
.urm-id, .urm-mid-id {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--d10-text);
    flex-shrink: 0;
}
a.urm-id:hover, a.urm-mid-id:hover { color: var(--d10-accent); }

/* ── Chevron ─────────────────────────────────────────────────────── */
.urm-chev {
    color: var(--d10-text-mu);
    font-size: 9px;
    flex-shrink: 0;
    transition: transform .2s;
}
.urm-chev-up { transform: rotate(180deg); }

/* ── Dim location text ───────────────────────────────────────────── */
.urm-loc {
    font-size: 11px;
    color: var(--d10-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.urm-badges { display: flex; gap: 3px; flex-shrink: 0; }

.urm-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.urm-badge-on  { background: #1b3a25; color: #7be094; }
.urm-badge-off { background: #3a1b1b; color: #ee8a8a; }
.urm-badge-own { background: #1b2c3a; color: #7bc3e0; }
.urm-badge-sh  { background: #2d2a1b; color: #d4b06a; }

.urm-wrap[data-d10-theme="light"] .urm-badge-on  { background: #d6f3dd; color: #1c6431; }
.urm-wrap[data-d10-theme="light"] .urm-badge-off { background: #f7d7d7; color: #8a1f1f; }
.urm-wrap[data-d10-theme="light"] .urm-badge-own { background: #d4ebf6; color: #18526f; }
.urm-wrap[data-d10-theme="light"] .urm-badge-sh  { background: #fdf3d6; color: #7a5a00; }

/* ── Form field ──────────────────────────────────────────────────── */
.urm-field { display: flex; flex-direction: column; gap: 3px; }

.urm-lbl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--d10-text-dim);
}

.urm-inp, .urm-sel, .urm-textarea {
    background: var(--d10-bg);
    color: var(--d10-text);
    border: 1px solid var(--d10-border);
    border-radius: 5px;
    padding: 0 8px;
    font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: border-color .12s;
    box-sizing: border-box;
}
.urm-inp, .urm-sel { height: 28px; }
.urm-textarea { padding: 8px 10px; resize: vertical; line-height: 1.5; }

.urm-inp:focus, .urm-sel:focus, .urm-textarea:focus {
    outline: none;
    border-color: var(--d10-accent);
}
.urm-inp-err { border-color: #f44336 !important; }
.urm-inp-ro  { opacity: .5; cursor: not-allowed; }
.urm-sel option { background: var(--d10-card); }

.urm-wrap[data-d10-theme="light"] .urm-inp,
.urm-wrap[data-d10-theme="light"] .urm-sel,
.urm-wrap[data-d10-theme="light"] .urm-textarea {
    background: #f0f4fa;
    color: #1c2430;
    border-color: #d4dae6;
}

/* ── Edit grid ───────────────────────────────────────────────────── */
.urm-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

/* ── Checkbox row ────────────────────────────────────────────────── */
.urm-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.urm-chk-row { display: flex; flex-direction: column; gap: 8px; }

.urm-chk-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    color: var(--d10-text);
}
.urm-chk-lbl input { accent-color: var(--d10-accent); }
.urm-chk-lbl.urm-disabled { opacity: .6; cursor: not-allowed; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.urm-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 5px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: none;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: opacity .12s, background .12s;
    vertical-align: middle;
}
.urm-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; }
.urm-btn:focus { outline: none !important; box-shadow: none !important; }

.urm-btn-acc {
    background: var(--d10-accent) !important;
    color: #fff !important;
}
.urm-btn-acc:hover:not(:disabled) { opacity: .85; }

.urm-btn-ghost {
    background: var(--d10-card-2) !important;
    color: var(--d10-text) !important;
    border: 1px solid var(--d10-border) !important;
}
.urm-btn-ghost:hover:not(:disabled) {
    background: var(--d10-border) !important;
    color: var(--d10-text) !important;
}

.urm-btn-del {
    background: transparent !important;
    color: #ee8a8a !important;
    border: 1px solid #3a1b1b !important;
}
.urm-btn-del:hover:not(:disabled) { background: #3a1b1b !important; }

.urm-wrap[data-d10-theme="light"] .urm-btn-del {
    color: #c0392b !important;
    border-color: #f7d7d7 !important;
}
.urm-wrap[data-d10-theme="light"] .urm-btn-del:hover:not(:disabled) {
    background: #fde8e8 !important;
}

/* small variant */
.urm-btn-sm {
    height: 24px;
    padding: 0 10px;
    font-size: 10px;
}

/* ── Quick action row ────────────────────────────────────────────── */
.urm-quick {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Inline feedback ─────────────────────────────────────────────── */
.urm-fb     { font-size: 11px; min-height: 16px; }
.urm-fb-ok  { color: #7be094; }
.urm-fb-err { color: #ee8a8a; }

.urm-ro-note {
    font-size: 11px;
    color: var(--d10-text-dim);
    font-style: italic;
}

/* ── Toast ───────────────────────────────────────────────────────── */
.urm-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    white-space: nowrap;
    color: #fff;
}
.urm-toast-ok  { background: rgba(30,180,100,.95); }
.urm-toast-err { background: rgba(220,50,50,.95);  }

/* ── Table ───────────────────────────────────────────────────────── */
.urm-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }

.urm-tbl th {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--d10-text-dim);
    padding: 6px 10px;
    text-align: left;
    border-bottom: 2px solid var(--d10-border);
}
.urm-tbl td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--d10-border);
    vertical-align: middle;
}
.urm-tbl tr:last-child td { border-bottom: none; }
.urm-tbl tr:hover td     { background: var(--d10-card-2); }

/* ── Code block ──────────────────────────────────────────────────── */
.urm-code {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px;
    background: var(--d10-bg);
    border: 1px solid var(--d10-border);
    border-radius: 5px;
    padding: 7px 10px;
    color: var(--d10-accent);
    word-break: break-all;
    line-height: 1.5;
    display: block;
}
.urm-wrap[data-d10-theme="light"] .urm-code {
    background: #f0f4fa;
    color: #1a73e8;
}

/* ── Credential cards ─────────────────────────────────────────────── */
.urm-cred-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
.urm-cred-card {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    padding: 12px 14px;
    overflow-y: auto;
}
.urm-cred-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--d10-text-dim);
    margin-bottom: 5px;
}
.urm-cred-val {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--d10-accent);
    word-break: break-all;
    /* the global-access list can hold dozens of device ids, so cap the
       height and scroll instead of letting one card stretch the grid */
    max-height: 96px;
    overflow-y: auto;
    line-height: 1.5;
    padding-right: 4px;
}
.urm-cred-val::-webkit-scrollbar { width: 6px; }
.urm-cred-val::-webkit-scrollbar-track { background: transparent; }
.urm-cred-val::-webkit-scrollbar-thumb {
    background: var(--d10-border);
    border-radius: 3px;
}
.urm-cred-plain {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--d10-text);
}
.urm-copy {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 12px;
    margin-top: 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--d10-border) !important;
    background: var(--d10-card-2) !important;
    color: var(--d10-text) !important;
    text-decoration: none;
    transition: background .12s, color .12s;
    line-height: 1;
}
.urm-copy:hover {
    background: var(--d10-border) !important;
    color: var(--d10-text) !important;
}

/* ── Docs two-column layout ──────────────────────────────────────── */
.urm-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 6px;
}
@media (max-width: 700px) { .urm-doc-grid { grid-template-columns: 1fr; } }

.urm-doc-section { display: flex; flex-direction: column; gap: 10px; }
.urm-doc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--d10-text);
    border-bottom: 1px solid var(--d10-border);
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.urm-doc-block { display: flex; flex-direction: column; gap: 4px; }
.urm-doc-step {
    font-size: 11px;
    font-weight: 700;
    color: var(--d10-text-dim);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.urm-doc-text { font-size: 12px; color: var(--d10-text-dim); line-height: 1.6; }
.urm-doc-text a { color: var(--d10-accent); }

/* ── Export controls (data panel) ────────────────────────────────── */
.urm-export-controls {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.urm-lbl-block { display: flex; flex-direction: column; gap: 4px; }

.urm-fmt-row  { display: flex; gap: 16px; align-items: center; }
.urm-fmt-lbl  {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; cursor: pointer; user-select: none;
    color: var(--d10-text);
}
.urm-fmt-lbl input { accent-color: var(--d10-accent); }

.urm-inp-wide { min-width: 220px; }

.urm-formula {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--d10-text-dim);
    line-height: 1.6;
}

.urm-yt {
    background: var(--d10-card-2);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--d10-text-dim);
}
.urm-yt a { color: var(--d10-accent); }

/* ── Sanity / health panels ──────────────────────────────────────── */
.urm-allclear {
    background: var(--d10-card);
    border: 1px solid #1b3a25;
    border-radius: var(--d10-r);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.urm-wrap[data-d10-theme="light"] .urm-allclear { border-color: #a8ddb5; }
.urm-allclear-icon { font-size: 22px; }
.urm-allclear-text { font-size: 13px; color: #7be094; font-weight: 600; }
.urm-allclear-sub  { font-size: 11px; color: var(--d10-text-dim); margin-top: 2px; }

.urm-issue-card {
    background: var(--d10-card);
    border: 1px solid #3a1b1b;
    border-radius: var(--d10-r);
    padding: 12px 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.urm-wrap[data-d10-theme="light"] .urm-issue-card { border-color: #f7d7d7; }
.urm-issue-left  { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.urm-issue-meta  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.urm-issue-links { display: flex; gap: 6px; flex-shrink: 0; }
.urm-errcnt      { font-size: 11px; color: #ee8a8a; }
.urm-faulty      { font-size: 11px; color: var(--d10-text-dim); }

/* ── Map panel ───────────────────────────────────────────────────── */
.urm-embed-card {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.urm-embed-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--d10-text-dim);
    margin-bottom: 8px;
}
.urm-copy-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.urm-copy-ok  { font-size: 11px; color: #7be094; }

.urm-map-wrap {
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    overflow: hidden;
    background: var(--d10-card);
}
.urm-map-wrap iframe { display: block; border: none; width: 100%; height: 500px; }

/* ── Claim card (units at location) ──────────────────────────────── */
.urm-claim {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    margin-bottom: 6px;
}
.urm-claim-meta { flex: 1; min-width: 0; }
.urm-claim-id  { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--d10-text); }
.urm-claim-sub { font-size: 10px; color: var(--d10-text-dim); }

/* ── Add-rule card (notifications panel) ─────────────────────────── */
.urm-add-card {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    margin-bottom: 0;          /* spacing comes from .urm-grid gap */
    overflow: hidden;
    transition: border-color .15s;
    display: flex;
    flex-direction: column;
}
.urm-add-card:hover { border-color: var(--d10-accent); }
/* when the add-alert form is open it needs the full row, like .urm-card-open */
.urm-add-card.urm-card-open { grid-column: 1 / -1; }
.urm-add-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    user-select: none;
}
.urm-add-body {
    border-top: 1px solid var(--d10-border);
    padding: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.urm-empty { color: var(--d10-text-dim); font-size: 12px; padding: 10px 0; line-height: 1.6; }
.urm-empty a { color: var(--d10-accent); }

/* ── Data panel device row ───────────────────────────────────────── */
.urm-data-card {
    background: var(--d10-card);
    border: 1px solid var(--d10-border);
    border-radius: var(--d10-r);
    padding: 10px 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.urm-data-card:hover { border-color: rgba(58,160,255,.2); }
.urm-data-fw   { font-size: 11px; color: var(--d10-text-dim); flex-shrink: 0; }
.urm-data-city { font-size: 11px; color: var(--d10-text-dim); flex: 1; min-width: 60px; }
.urm-data-status     { font-size: 10px; }
.urm-data-status-ok  { color: #7be094; }
.urm-data-status-err { color: #ee8a8a; }


/* ── Bootstrap override insurance — appended last to win the cascade ──
   Bootstrap 3.3.7 sets .btn color/bg/border at high specificity.
   These rules use attribute selectors to beat it without !important
   on every property, and are placed at end of file to win on position. */
.urm-wrap button.urm-btn[class*="urm-btn-acc"],
.urm-wrap a.urm-btn[class*="urm-btn-acc"] {
    background-color: #3aa0ff !important;
    color: #ffffff !important;
    border-color: #3aa0ff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.urm-wrap[data-d10-theme="light"] button.urm-btn[class*="urm-btn-acc"],
.urm-wrap[data-d10-theme="light"] a.urm-btn[class*="urm-btn-acc"] {
    background-color: #1a73e8 !important;
    border-color: #1a73e8 !important;
}
.urm-wrap button.urm-btn[class*="urm-btn-ghost"],
.urm-wrap a.urm-btn[class*="urm-btn-ghost"] {
    background-color: #232a36 !important;
    color: #e6edf3 !important;
    border-color: #2a3340 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.urm-wrap[data-d10-theme="light"] button.urm-btn[class*="urm-btn-ghost"],
.urm-wrap[data-d10-theme="light"] a.urm-btn[class*="urm-btn-ghost"] {
    background-color: #eef1f6 !important;
    color: #1c2430 !important;
    border-color: #d4dae6 !important;
}
.urm-wrap button.urm-btn[class*="urm-btn-del"] {
    background-color: transparent !important;
    color: #ee8a8a !important;
    border-color: #3a1b1b !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.urm-wrap button.urm-btn[class*="urm-btn-del"]:hover {
    background-color: #3a1b1b !important;
}
.urm-wrap[data-d10-theme="light"] button.urm-btn[class*="urm-btn-del"] {
    color: #c0392b !important;
    border-color: #f7d7d7 !important;
}
/* copy button specifically */
.urm-wrap button.urm-copy,
.urm-embed-card button.urm-copy {
    background-color: #232a36 !important;
    color: #e6edf3 !important;
    border: 1px solid #2a3340 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}
.urm-wrap[data-d10-theme="light"] button.urm-copy,
.urm-wrap[data-d10-theme="light"] .urm-embed-card button.urm-copy {
    background-color: #eef1f6 !important;
    color: #1c2430 !important;
    border-color: #d4dae6 !important;
}