/* RTB SMS UI Rendering V4.1 — layout-preserving visual polish */
:root{
  --rtb-app-bg:#eef2f6;--rtb-workspace:#f6f8fb;--rtb-section:#ffffff;--rtb-interactive:#f8fafc;
  --rtb-selected:#edf4ff;--rtb-border-subtle:#e8ecf1;--rtb-border-default:#d7dee8;--rtb-border-strong:#b9c4d2;
  --rtb-ink:#142033;--rtb-ink-secondary:#536176;--rtb-ink-muted:#8290a2;--rtb-ink-disabled:#a5aeba;
  --rtb-elevation-popover:0 12px 32px rgba(18,30,48,.14);--rtb-elevation-modal:0 24px 64px rgba(12,22,38,.24);
}
html{background:var(--rtb-app-bg)}
body{background:var(--rtb-app-bg);color:var(--rtb-ink)}
.workspace{background:var(--rtb-workspace);min-height:100vh}
.content{background:var(--rtb-workspace)}
.header{border-bottom-color:var(--rtb-border-default);box-shadow:0 1px 0 rgba(20,32,51,.02)}
.header h1{color:var(--rtb-ink);font-weight:720}
.page-actions{padding:3px 0 4px;margin-bottom:20px}
.page-actions h2,.title-row h2{font-size:22px;font-weight:760;letter-spacing:-.018em;color:#101b2c}
.page-actions .muted{color:var(--rtb-ink-secondary)}

/* Surfaces */
.card{border-color:var(--rtb-border-subtle);background:var(--rtb-section)}
.card-title{padding-bottom:13px;border-bottom:1px solid var(--rtb-border-subtle)}
.card-title h3,.card>h3{color:var(--rtb-ink);font-weight:720}
.table-wrap{border-color:var(--rtb-border-subtle);background:var(--rtb-section)}
th{background:#eef2f6;color:#435169;border-bottom-color:var(--rtb-border-default);font-weight:720;letter-spacing:.02em}
td{border-bottom-color:var(--rtb-border-subtle)}
tbody tr{transition:background-color .14s ease}tbody tr:hover{background:#f6f9fc}

/* Controls */
input,select,textarea{border-color:var(--rtb-border-default);background:#fff;color:var(--rtb-ink);box-shadow:inset 0 1px 1px rgba(18,32,51,.025)}
input:hover,select:hover,textarea:hover{border-color:var(--rtb-border-strong)}
select{padding-right:32px;background-color:#fff}
input[type="date"]{padding-right:9px}
input::placeholder,textarea::placeholder{color:#98a3b2}
.btn{letter-spacing:.005em}.btn.secondary{border-color:var(--rtb-border-default);background:#fff}.btn.secondary:hover{border-color:#aeb9c8;background:#f7f9fc}
.link-button{color:var(--rtb-ink-secondary)}.link-button:hover{color:var(--rtb-primary)}
.danger-link{color:#a7372e}.danger-link:hover{color:#c0261b}

/* Tabs */
.tabs{gap:8px}.tabs a{position:relative;padding:10px 4px 11px;margin-right:12px;border:0;color:var(--rtb-ink-muted);font-weight:570}
.tabs a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.tabs a:hover{border:0;color:var(--rtb-ink);background:transparent}
.tabs a.active{border:0;color:var(--rtb-primary);font-weight:720}.tabs a.active:after{background:var(--rtb-primary)}

/* Unified metric system */
.metrics{border-color:var(--rtb-border-subtle);background:transparent;gap:1px;box-shadow:0 0 0 1px var(--rtb-border-subtle)}
.metric{position:relative;border:0!important;background:#fff;padding:17px 18px}
.metric:after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;background:var(--rtb-border-subtle)}
.metric:last-child:after{display:none}.metric:hover{background:#f8fafc}
.metric span{color:var(--rtb-ink-secondary);font-size:12px;font-weight:620}
.metric strong{font-size:27px;font-weight:720;letter-spacing:-.025em;color:#152238;font-variant-numeric:tabular-nums}
.analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;border:0;border-radius:9px}
.analytics-kpis .metric{min-height:96px;text-decoration:none;box-shadow:0 1px 0 var(--rtb-border-subtle)}
.analytics-kpis .metric:nth-child(4n):after{display:none}

/* Statistics filter toolbar, existing order/layout preserved */
.page-actions>.filters{flex:1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;padding:11px;border:1px solid var(--rtb-border-subtle);border-radius:8px;background:#fff}
.page-actions>.filters input,.page-actions>.filters select{width:auto;min-width:132px;height:38px;margin:0}
.page-actions>.filters input[type="date"]{min-width:148px}
.page-actions>.filters .filter-error{flex-basis:100%;font-size:12px;color:var(--rtb-danger)}
.page-actions>.filters+.btn{align-self:center;min-height:38px;background:#fff;border:1px solid #aebcd0;color:#234e82}
.page-actions>.filters+.btn:hover{background:#f2f6fb;border-color:#8197b4}

/* Template content table */
.template-list-card{padding:20px}.template-table{min-width:840px;table-layout:fixed}
.template-table .template-col-name{width:13%}.template-table .template-col-use{width:9%}.template-table .template-col-content{width:32%}
.template-table .template-col-count{width:6%}.template-table .template-col-segments{width:6%}.template-table .template-col-status{width:8%}
.template-table .template-col-time{width:11%}.template-table .template-col-actions{width:15%}
.template-table th:last-child,.template-table td:last-child{width:auto}
.template-table td{padding-top:13px;padding-bottom:13px;vertical-align:top}
.template-name-cell{overflow-wrap:anywhere;word-break:break-word}.template-name-cell strong{font-weight:730;color:#17243a}
.template-numeric{text-align:right;font-variant-numeric:tabular-nums;color:#35445a}.template-time{color:var(--rtb-ink-muted);font-size:12px;font-variant-numeric:tabular-nums}
.template-table .template-actions{display:grid;grid-template-columns:1fr;gap:4px;align-items:start;white-space:normal;font-size:12px}.template-actions form{margin:0}.template-action-edit{font-weight:680}.template-action-muted{color:var(--rtb-ink-muted)}


/* Dense modules polish without layout changes */
.task-filter-toolbar,.user-filters{padding:10px;border:1px solid var(--rtb-border-subtle);border-radius:8px;background:#f8fafc}
.task-table thead th{background:#eef2f6}.task-table tbody tr.is-selected{background:#edf4ff}
.conversation.selected{background:#eaf2ff}.conversation:not(.selected):hover{background:#f7f9fc}.conversation strong{color:#17243a}
.conversation-head.v3{background:#17243a}.timeline-v4{background:#f5f7fa}.timeline-v4 .message p{box-shadow:0 1px 0 rgba(18,32,51,.035)}
.rule-group{border-color:var(--rtb-border-subtle)}.keyword-chip{border-color:#dce2e9;background:#f4f6f8;color:#465468;font-weight:580}
.blacklist-summary>div{border-color:var(--rtb-border-subtle);background:#fafbfd}.blacklist-summary strong{font-variant-numeric:tabular-nums}
.settings-grid .card{border-top:2px solid #dce4ee}.live-gate-control{background:#fffaf0;border-radius:0 6px 6px 0;padding:10px 12px}
.dropzone{background:#f6f8fb;border-color:#aeb9c8}.mapping-table thead th,.paste-review-table thead th{background:#e9eef4;color:#34445a}

@media(max-width:1199px){.analytics-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.page-actions>.filters{width:100%}.template-table{min-width:820px}}
@media(max-width:1024px){.page-actions>.filters input,.page-actions>.filters select{flex:1 1 150px}.analytics-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.template-table{min-width:800px}}
@media(max-width:780px){.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-kpis .metric:nth-child(2n):after{display:none}.page-actions>.filters{display:grid;grid-template-columns:1fr 1fr}.page-actions>.filters input,.page-actions>.filters select{width:100%;min-width:0}}

/* UI Rendering V4.2 — alignment and blue active-system correction */
:root{
  --rtb-blue-50:#eef5ff;--rtb-blue-100:#dceaff;--rtb-blue-200:#b8d4ff;
  --rtb-blue-500:#2878d0;--rtb-blue-600:#1767bd;--rtb-blue-700:#11569f;--rtb-blue-800:#164779;
  --rtb-selected:var(--rtb-blue-50);
}

/* Full template content is directly visible; rows grow naturally. */
.template-table{min-width:960px;table-layout:fixed}
.template-table .template-col-name{width:14%}.template-table .template-col-use{width:9%}.template-table .template-col-content{width:36%}
.template-table .template-col-count{width:6%}.template-table .template-col-segments{width:6%}.template-table .template-col-status{width:8%}
.template-table .template-col-time{width:11%}.template-table .template-col-actions{width:13%}
.template-table th,.template-table td{height:auto;padding-top:15px;padding-bottom:15px;vertical-align:top;line-height:1.5}
.template-preview{display:block;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;color:var(--rtb-ink-secondary);line-height:1.55}
.template-table .template-actions{display:flex;align-items:flex-start;gap:9px;white-space:nowrap;font-size:12px}
.template-table .template-actions form{display:inline-block;margin:0}

/* Stable shared table alignment. Template content tables intentionally top-align. */
table:not(.template-table) td{vertical-align:middle}
table:not(.template-table) th{vertical-align:middle}

/* Unified deep-blue metric values and one correctly positioned row divider. */
.metric strong,.analytics-kpis .metric strong{color:var(--rtb-blue-800)}
.analytics-kpis .metric:nth-child(4),.analytics-kpis .metric:nth-child(5),.analytics-kpis .metric:nth-child(6),.analytics-kpis .metric:nth-child(7){box-shadow:0 1px 0 var(--rtb-border-subtle)}
.analytics-kpis .metric:nth-child(n+5){border-top:2px solid var(--rtb-blue-600)!important}

/* Blue active system: navigation, tabs, steps, filters and selected records. */
.tabs a.active{color:var(--rtb-blue-700);font-weight:700}.tabs a.active:after{height:2px;background:var(--rtb-blue-600)}
.tabs a:hover{color:var(--rtb-blue-600)}
.sidebar nav a.active,.sidebar nav a[aria-current="page"]{color:#fff;background:var(--rtb-blue-700);border-left-color:var(--rtb-blue-500)}
.sidebar nav a:hover{color:#fff;background:rgba(40,120,208,.22)}
.step.active,.steps .active,.campaign-steps .active{color:#fff;background:var(--rtb-blue-700);border-color:var(--rtb-blue-700)}
.filter-chip.active,.segmented .active,.conversation-filter.active{color:var(--rtb-blue-700);background:var(--rtb-blue-50);border-color:var(--rtb-blue-600)}
.task-table tbody tr.is-selected,.conversation.selected,tr.selected{background:var(--rtb-blue-50);box-shadow:inset 3px 0 0 var(--rtb-blue-600)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--rtb-blue-500);outline-offset:2px;border-color:var(--rtb-blue-600)}

@media(max-width:1199px){.template-table{min-width:940px}.template-table .template-actions{gap:7px}}
@media(max-width:1024px){.template-table{min-width:940px}.template-table .template-actions{flex-wrap:nowrap}}