/* ─── WH mode flash animations ────────────────────────────── */
@keyframes wh-flash-call {
    0%,49%  { background:#15803d!important;color:#fff!important;border-color:#15803d!important;box-shadow:0 0 8px #15803d88 }
    50%,100%{ background:var(--surface2)!important;color:var(--muted)!important;border-color:var(--border)!important;box-shadow:none }
}
@keyframes wh-flash-put {
    0%,49%  { background:var(--surface2)!important;color:var(--muted)!important;border-color:var(--border)!important;box-shadow:none }
    50%,100%{ background:#b45309!important;color:#fff!important;border-color:#b45309!important;box-shadow:0 0 8px #b4530988 }
}
.wh-flash-call { animation: wh-flash-call 1s infinite; }
.wh-flash-put  { animation: wh-flash-put  1s infinite; }

/* ─── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #f0f4f8;
    --surface:   #ffffff;
    --surface2:  #f5f7fa;
    --border:    #dde3ec;
    --accent:    #2563eb;
    --accent2:   #6c63ff;
    --green:     #16a34a;
    --red:       #dc2626;
    --yellow:    #b45309;
    --text:      #1e2535;
    --muted:     #6b7280;
    --radius:    10px;
    --shadow:    0 2px 12px rgba(0,0,0,0.08);
    color-scheme: light;
}

html[data-theme="dark"] {
    --bg:        #0f1419;
    --surface:   #1a2028;
    --surface2:  #232b36;
    --border:    #2d3744;
    --accent:    #60a5fa;
    --accent2:   #a78bfa;
    --green:     #4ade80;
    --red:       #f87171;
    --yellow:    #fbbf24;
    --text:      #e5e7eb;
    --muted:     #94a3b8;
    --shadow:    0 2px 12px rgba(0,0,0,0.4);
    color-scheme: dark;
}

/* Tone down bright hover backgrounds in dark mode */
html[data-theme="dark"] .nav-links a.active { background: rgba(96,165,250,0.15); }

/* Group badges — dashboard + rule cards */
.group-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.group-badge.g-A { background: #3b82f6; color: #fff; }
.group-badge.g-B { background: #10b981; color: #fff; }
.group-badge.g-C { background: #f59e0b; color: #fff; }
.group-badge.g-D { background: #a855f7; color: #fff; }
.group-badge.g-E { background: #ec4899; color: #fff; }
.group-badge.g-F { background: #14b8a6; color: #fff; }
html[data-theme="dark"] .group-badge.g-A { background: #2563eb; }
html[data-theme="dark"] .group-badge.g-B { background: #059669; }
html[data-theme="dark"] .group-badge.g-C { background: #d97706; }
html[data-theme="dark"] .group-badge.g-D { background: #9333ea; }
html[data-theme="dark"] .group-badge.g-E { background: #db2777; }
html[data-theme="dark"] .group-badge.g-F { background: #0d9488; }

/* Theme toggle button */
.theme-toggle {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--border); }

html { font-size: 17px; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.45;
    min-height: 100vh;
}

/* ─── Navbar ──────────────────────────────────────────────── */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    padding: 0 32px;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 12px;
}
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.nav-brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    font-size: 0.9rem;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    padding: 3px 7px;
}

/* Market Status */
.nav-market-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    white-space: nowrap;
}
.market-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.market-dot.market-open {
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22,163,74,0.5);
    animation: market-pulse 2s ease-in-out infinite;
}
.market-dot.market-closed { background: #dc2626; }
.market-label { font-weight: 600; color: var(--text); }
.market-detail { color: var(--muted); font-size: 0.72rem; }
@keyframes market-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 4px;
}

.nav-links a {
    display: block;
    padding: 6px 16px;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.18s, background 0.18s;
}

.nav-links a:hover { color: var(--text); background: var(--surface2); }
.nav-links a.active { color: var(--accent); background: rgba(79,142,247,0.1); }

/* ─── Layout ──────────────────────────────────────────────── */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 18px 40px;
}

.page-header {
    margin-bottom: 42px;
}
.page-header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.page-header p {
    color: var(--muted);
    margin-top: 10px;
    font-size: 0.96rem;
    line-height: 1.6;
    max-width: 600px;
}
.page-header code {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.83rem;
    background: var(--surface2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--accent);
}

/* ─── Cards Grid ──────────────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 6px;
}
.card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.card-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 4px;
}

/* ─── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
}
.badge.red   { background: rgba(239,68,68,0.15); color: var(--red); }
.badge.green { background: rgba(34,197,94,0.15);  color: var(--green); }

/* ─── Status pills ────────────────────────────────────────── */
.status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.status.on  { background: rgba(34,197,94,0.12);  color: var(--green); }
.status.off { background: rgba(239,68,68,0.1);   color: var(--red); }

/* ─── Section grid (2-col) ────────────────────────────────── */
.section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 640px) { .section-grid { grid-template-columns: 1fr; } }

.info-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.info-box h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text);
}

.info-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

/* Trigger Settings table headers — only for rule rows (tbody) */
#triggerSettingsTable .ts-thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 4px;
    border-bottom: 2px solid var(--border);
    text-align: left;
    background: var(--surface2);
}
/* Global control rows (Beep, Global Demo, FIRE Button master) sit below
   the rules tbody, separated visually with a gap */
#triggerSettingsTable .ts-tfoot .ts-global-row > td:nth-child(2) {
    font-weight: 600;
    color: var(--text);
    padding-top: 10px;
}
#triggerSettingsTable .ts-tfoot .ts-global-row:first-child td {
    border-top: 2px solid var(--border);
}
.info-table tr { border-bottom: 1px solid var(--border); }
.info-table tr:last-child { border-bottom: none; }
.info-table td { padding: 9px 0; vertical-align: middle; white-space: nowrap; }
.info-table td:first-child { color: var(--muted); width: auto; }
#triggerSettingsTable td:nth-child(2) { width: 30%; min-width: 260px; }
.info-table td.mono {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.78rem;
    word-break: break-all;
}

/* ─── Alerts ──────────────────────────────────────────────── */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    font-size: 0.92rem;
    line-height: 1.5;
}
.alert.success {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.3);
    color: var(--green);
}
.alert.error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.3);
    color: #b91c1c;
}
.alert a { color: inherit; font-weight: 600; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { opacity: 0.88; }
.btn.secondary {
    background: var(--surface2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.btn.secondary:hover { color: var(--text); }
.btn:not(.primary):not(.secondary) {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn:not(.primary):not(.secondary):hover { border-color: var(--accent); }

/* ─── Step Size Selector ──────────────────────────────────── */
.step-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
}
.step-btn {
    background: var(--surface2);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 13px;
    transition: background 0.15s, color 0.15s;
}
.step-btn:last-child { border-right: none; }
.step-btn:hover { background: var(--surface); color: var(--text); }
.step-btn.active { background: var(--accent); color: #fff; }
.trend-btn.trend-up.active       { background: var(--green);  color: #fff; border-color: var(--green); }
.trend-btn.trend-sideways.active { background: var(--yellow); color: #fff; border-color: var(--yellow); }
.trend-btn.trend-down.active     { background: var(--red);    color: #fff; border-color: var(--red); }

/* ─── Form Sections ───────────────────────────────────────── */
.form-section {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 32px 28px;
    margin-bottom: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-section:hover {
    border-color: rgba(79,142,247,0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.form-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.section-icon { font-size: 1.3rem; }
.section-desc {
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 26px;
    line-height: 1.5;
}

/* ─── Form Rows & Groups ──────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.form-row:last-child { margin-bottom: 0; }

.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full-width { grid-column: 1 / -1; }

label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

input[type="text"],
input[type="password"],
input[type="number"],
select {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    width: 100%;
    font-family: inherit;
    font-weight: 500;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
select:hover {
    border-color: rgba(79,142,247,0.5);
    background: var(--surface);
}

input:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(79,142,247,0.2);
    background: var(--surface);
    color: var(--text);
}

input::placeholder { color: var(--muted); opacity: 0.5; }

select option { background: var(--surface2); color: var(--text); }

.hint {
    font-size: 0.80rem;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 2px;
}

/* ─── Password eye toggle ─────────────────────────────────── */
.input-eye-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-eye-wrapper input { padding-right: 40px; }
.eye-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--muted);
    opacity: 0.5;
    padding: 0;
    line-height: 1;
    transition: opacity 0.15s;
}
.eye-btn:hover { opacity: 0.9; }

/* ─── Toggle checkbox ─────────────────────────────────────── */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
.toggle-label input[type="checkbox"] { display: none; }
.toggle-box {
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #c5ccd8;
    border-radius: 11px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}
.toggle-box::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s, background 0.2s;
}
.toggle-label input:checked + .toggle-box {
    background: var(--green);
}
.toggle-label input:checked + .toggle-box::after {
    left: 21px;
    background: #fff;
}

/* ─── Rule Builder ────────────────────────────────────────── */
.rule-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.rule-builder-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.rules-empty {
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    padding: 36px 0;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.rule-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rule-card:hover {
    border-color: rgba(79,142,247,0.5);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.rule-card.rule-triggered {
    border-color: rgba(234,179,8,0.6);
    background: rgba(234,179,8,0.02);
}
.rule-card.rule-disabled  { opacity: 0.6; }

.rule-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--surface2), var(--surface));
    border-bottom: 2px solid var(--border);
}

/* After-Hours toggle in the navbar */
.ah-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 8px; padding: 4px 12px;
    background: var(--surface2);
    border: 1px solid var(--border); border-radius: 14px;
    cursor: pointer; user-select: none;
    font-size: 0.78rem; color: var(--text); font-weight: 600;
}
.ah-toggle input { display: none; }
.ah-toggle-pill {
    width: 30px; height: 16px; background: #94a3b8;
    border-radius: 8px; position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ah-toggle-pill::after {
    content: ''; position: absolute;
    top: 2px; left: 2px; width: 12px; height: 12px;
    background: #fff; border-radius: 50%;
    transition: left 0.15s;
}
.ah-toggle input:checked + .ah-toggle-pill { background: #f59e0b; }
.ah-toggle input:checked + .ah-toggle-pill::after { left: 16px; }
.ah-toggle-text { letter-spacing: 0.02em; }

/* AH nav links — only visible when AH toggle is on */
.nav-ah-links {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 4px;
}
.ah-nav-link {
    font-size: 0.76rem; font-weight: 700;
    color: #f59e0b; text-decoration: none;
    padding: 4px 10px; border-radius: 12px;
    border: 1px solid rgba(245,158,11,0.4);
    background: rgba(245,158,11,0.08);
    white-space: nowrap;
}
.ah-nav-link:hover {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.7);
}

/* API call rate chip in the navbar */
.nav-api-stats {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.76rem; color: var(--muted);
    padding: 4px 12px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 14px;
    margin: 0 12px;
    white-space: nowrap;
}
.nav-api-stats .api-label { font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.nav-api-stats .api-val-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: baseline;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.nav-api-stats .api-val-link:hover { background: var(--surface2); cursor: pointer; }
.nav-api-stats .api-val {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: var(--text); font-weight: 700;
}
.nav-api-stats .api-win { font-size: 0.65rem; color: var(--muted); margin-left: 2px; }
.nav-api-stats .api-sep { color: var(--border); }

.r-name {
    flex: 1;
    min-width: 0;
    /* Distinct background + accent text + bolder weight + left-side bar
       so the rule name stands out as you scroll a long list of rules. */
    background: linear-gradient(90deg, rgba(255,107,53,0.10), rgba(255,107,53,0.03) 60%, transparent);
    border: 1.5px solid var(--border);
    border-left: 4px solid #ff6b35;
    border-radius: 6px;
    color: #ff6b35;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    font-family: inherit;
    outline: none;
    padding: 6px 12px;
    transition: all 0.15s;
}
.r-name:focus {
    background: var(--surface2);
    border-color: var(--accent);
    color: var(--text);
}
.r-name::placeholder { color: var(--muted); font-weight: 400; }
/* Dark-mode tweak — keep the accent visible against dark backgrounds */
html[data-theme="dark"] .r-name {
    background: linear-gradient(90deg, rgba(255,140,80,0.18), rgba(255,140,80,0.05) 60%, transparent);
    color: #ffaa6e;
    border-left-color: #ff8c50;
}

.rule-badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}
.rule-badge.badge-active     { background: rgba(34,197,94,0.12);  color: var(--green); }
.rule-badge.badge-triggered  { background: rgba(234,179,8,0.12);  color: var(--yellow); }
.rule-badge.badge-disabled   { background: rgba(136,146,164,0.1); color: var(--muted); }

.rule-card-body {
    padding: 22px 22px 20px;
    background: var(--surface);
}

.rule-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.rule-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.rule-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rule-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rule-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.rule-triggered-info {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--yellow);
}

.btn-icon {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 9px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-icon:hover         { color: var(--red);   background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }

/* Demo mode toggle */
.demo-toggle-label { cursor: pointer; user-select: none; }
.demo-toggle-box {
    width: 32px !important;
    height: 18px !important;
    background: #c5ccd8;
}
.demo-toggle-box::after {
    width: 12px !important;
    height: 12px !important;
    top: 3px !important;
    left: 3px !important;
}
.demo-toggle-label input:checked + .demo-toggle-box {
    background: var(--yellow);
}
.demo-toggle-label input:checked + .demo-toggle-box::after {
    left: 17px !important;
}
.demo-toggle-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
}
.demo-toggle-label:has(input:checked) .demo-toggle-text {
    color: var(--yellow);
}

.rules-save-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 16px;
}
.rules-msg {
    font-size: 0.85rem;
    flex: 1;
}
.rules-msg.ok  { color: var(--green); }
.rules-msg.err { color: var(--red); }

/* ─── Settings Tabs ───────────────────────────────────────── */
.tab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 9px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); background: var(--surface2); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(79,142,247,0.06); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Form actions ────────────────────────────────────────── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* ─── Footer ──────────────────────────────────────────────── */
footer {
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    padding: 24px;
    border-top: 1px solid var(--border);
}

/* ─── Dashboard two-column layout ────────────────────────── */
body.has-dash-layout {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dash-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 6px 580px;
    overflow: hidden;
    min-height: 0;
}
.dash-layout > .dash-side        { order: 1; }
.dash-layout > .log-resize-handle { order: 2; }
.dash-layout > .log-panel         { order: 3; }

.log-resize-handle {
    width: 6px;
    cursor: col-resize;
    background: var(--border);
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.log-resize-handle::after {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    border-radius: 2px;
    background: var(--muted);
    opacity: 0.5;
}
.log-resize-handle:hover,
.log-resize-handle.dragging { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.log-resize-handle:hover::after,
.log-resize-handle.dragging::after { background: var(--accent); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   FULL-SCREEN MODE — maximise content, zero whitespace
   — Hides navbar/log-panel/headers, scales every visible element
     with viewport units so everything fits on screen with the
     largest readable fonts + controls.
   ═══════════════════════════════════════════════════════════════ */
body.dash-fullscreen {
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.dash-fullscreen .navbar { display: none !important; }
body.dash-fullscreen .container { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
body.dash-fullscreen .dash-layout { grid-template-columns: 1fr !important; height: 100vh !important; overflow: hidden !important; }
body.dash-fullscreen .log-resize-handle { display: none !important; }
body.dash-fullscreen .log-panel { display: none !important; }
body.dash-fullscreen .dash-side { height: 100vh !important; overflow: hidden !important; }
body.dash-fullscreen .dash-inner { padding: 0.4vw 0.6vw 0.4vw !important; max-width: none; width: 100%; height: 100vh; overflow: hidden; box-sizing: border-box; }
body.dash-fullscreen .page-header { display: none !important; }

/* All info boxes: kill borders/padding so every pixel is content */
body.dash-fullscreen .info-box {
    padding: 0.6vw 0.8vw !important;
    margin: 0 0 0.4vw 0 !important;
    border-radius: 0.4vw;
}
body.dash-fullscreen .info-box h2 { font-size: 1.6vw !important; margin: 0 0 0.3vw 0 !important; }
body.dash-fullscreen .info-box h2 .section-toggle { font-size: 1.4vw; }

/* Active Positions chips */
body.dash-fullscreen #posCountBadge { font-size: 1.1vw; padding: 0.2vw 0.8vw; }
body.dash-fullscreen #posLastRefresh { font-size: 0.9vw !important; margin-bottom: 0.3vw !important; }
body.dash-fullscreen .pos-chip-dash { font-size: 1.4vw !important; padding: 0.4vw 1vw !important; }
body.dash-fullscreen #posRefreshBtn { font-size: 1vw !important; padding: 0.4vw 1vw !important; }
body.dash-fullscreen #positionsToggle { width: 1.6vw; height: 1.6vw; }
body.dash-fullscreen #positionsBox h2 span { font-size: 1.6vw; }

/* Trigger Settings table — biggest, most-interactive block */
body.dash-fullscreen #triggerSettingsBox { padding: 0.6vw 0.8vw !important; }
body.dash-fullscreen #triggerSettingsBox h2 { font-size: 1.8vw !important; margin-bottom: 0.4vw !important; }
body.dash-fullscreen #tsFullscreenBtn { font-size: 1vw !important; padding: 0.4vw 1vw !important; }
body.dash-fullscreen #tsSortBy { font-size: 1.1vw !important; padding: 0.3vw 0.8vw !important; }

body.dash-fullscreen #triggerSettingsBox .info-table { font-size: 1.6vw; width: 100%; }
body.dash-fullscreen #triggerSettingsBox .info-table td { padding: 0.45vw 0.35vw; white-space: nowrap; }
body.dash-fullscreen #triggerSettingsBox .info-table td:first-child { width: auto; }
body.dash-fullscreen #triggerSettingsBox .group-badge { font-size: 1.1vw; padding: 0.15vw 0.55vw; }

body.dash-fullscreen #triggerSettingsBox .ts-level-input {
    width: 10vw !important; font-size: 1.5vw; padding: 0.5vw 0.6vw;
    height: auto; min-height: 0 !important; box-sizing: border-box;
}
body.dash-fullscreen #triggerSettingsBox .ts-group-select {
    font-size: 1.5vw !important; padding: 0.5vw 0.8vw !important;
    height: auto; min-height: 0 !important; box-sizing: border-box;
}
body.dash-fullscreen #triggerSettingsBox .ts-level-save {
    font-size: 1.3vw; padding: 0.5vw 1vw; height: auto; min-height: 0 !important; box-sizing: border-box;
}
body.dash-fullscreen #triggerSettingsBox button.btn-toggle-dash,
body.dash-fullscreen #triggerSettingsBox .btn-alarm-dash {
    font-size: 1.4vw; padding: 0.5vw 1vw; min-height: 0 !important; line-height: 1.1;
}
body.dash-fullscreen #triggerSettingsBox button[onclick^="fireRule"] {
    font-size: 1.5vw !important; padding: 0.5vw 1.2vw !important; min-height: 0 !important;
}

/* LTP header inside the page (shown when navbar is hidden) */
body.dash-fullscreen #ltpDisplay { font-size: 2.6vw !important; }
body.dash-fullscreen #ltpSymbol, body.dash-fullscreen #ltpTime { font-size: 1.1vw !important; }

/* Auto-fit: shrink per-row vertical spacing when many rules are present */
body.dash-fullscreen #triggerSettingsTable tr { line-height: 1.15; }
body.dash-fullscreen #triggerSettingsTable td button,
body.dash-fullscreen #triggerSettingsTable td input,
body.dash-fullscreen #triggerSettingsTable td select { vertical-align: middle; }

/* If there are too many rules to fit, allow internal scroll inside Trigger Settings */
body.dash-fullscreen #triggerContent {
    max-height: calc(100vh - 14vw);
    overflow-y: auto;
}
/* Active Positions height capped at ~1/4 of the screen so Trigger Settings gets most space */
body.dash-fullscreen #positionsContent {
    max-height: 22vh;
    overflow-y: auto;
}

/* ─── Log panel (left) ────────────────────────────────────── */
.log-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
    min-height: 0;
}

.log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.log-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
}

.bot-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    transition: background 0.3s;
}
.bot-dot.stopped    { background: var(--muted); }
.bot-dot.restarting { background: var(--yellow); animation: botPulse 0.6s ease-in-out infinite; }
.bot-dot.running {
    background: var(--green);
    box-shadow: 0 0 7px rgba(34,197,94,0.7);
    animation: botPulse 1.8s ease-in-out infinite;
}
@keyframes botPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.bot-status-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
}

#viewRuleLogs,
#viewFireLogs,
#viewPyLogs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.log-body {
    flex: 1;
    overflow-y: scroll;
    padding: 14px 18px;
    margin: 0;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.77rem;
    line-height: 1.65;
    color: #4b5563;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 0;
    background: var(--bg);
}

.log-empty {
    color: var(--muted);
    font-style: italic;
}

/* ─── Dashboard side (right) ──────────────────────────────── */
.dash-side {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.dash-inner {
    flex: 1;
    padding: 24px 20px 20px;
}

/* ─── Inline Option Chain Panel ──────────────────────────── */
.r-chain-panel {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.r-chain-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.r-chain-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: 4px;
}

.r-chain-expiry {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    font-size: 0.84rem;
    padding: 5px 10px;
}

.r-chain-placeholder,
.r-chain-loading,
.r-chain-error {
    padding: 18px 16px;
    font-size: 0.83rem;
    text-align: center;
    color: var(--muted);
}
.r-chain-error { color: var(--red); }

.chain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
}

.chain-table thead th {
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
.chain-ce-head  { text-align: right; color: var(--green); width: 42%; }
.chain-strike-head { text-align: center; color: var(--muted);  width: 16%; }
.chain-pe-head  { text-align: left;  color: var(--red);   width: 42%; }

.chain-table tbody tr { border-bottom: 1px solid var(--border); }
.chain-table tbody tr:last-child { border-bottom: none; }
.chain-table tbody tr:hover td { background: rgba(37,99,235,0.04); }

.chain-atm-row td { background: rgba(37,99,235,0.06) !important; }

.chain-ce-td  { text-align: right;  padding: 5px 10px; }
.chain-pe-td  { text-align: left;   padding: 5px 10px; }
.chain-strike-td {
    text-align: center;
    padding: 5px 6px;
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--text);
    white-space: nowrap;
}
.chain-atm-badge {
    font-size: 0.7rem;
    font-weight: 800;
    background: #facc15;            /* yellow */
    color: #000;
    border-radius: 3px;
    padding: 2px 6px;
    margin-left: 4px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.chain-level-badge {
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--yellow);
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
}
.chain-empty { color: var(--muted); }
.chain-last {
    font-size: 0.78rem;
    color: var(--text);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    white-space: nowrap;
    font-weight: 600;
}
.chain-cell-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
/* CE (left column, right-aligned): render [button] then [last] so Last sits near Strike */
.chain-ce-wrap { flex-direction: row; }
/* PE (right column, left-aligned): render [last] then [button] so Last sits near Strike */
.chain-pe-wrap { flex-direction: row; }
.chain-head-sub {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 500;
    opacity: 0.8;
    margin-left: 4px;
}
/* Pulse animation for the "Apply to Rules" button when changes are pending */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,107,53,0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(255,107,53,0.18); }
}

/* Stale Trade Symbol / Token highlight — applied when a rule's saved
   value doesn't match the live Global CE or PE selection. */
select.r-stale-symbol,
input.r-stale-symbol {
    background: rgba(220, 38, 38, 0.18) !important;
    border-color: #dc2626 !important;
    color: #b91c1c !important;
    font-weight: 700 !important;
}
html[data-theme="dark"] select.r-stale-symbol,
html[data-theme="dark"] input.r-stale-symbol {
    background: rgba(239, 68, 68, 0.28) !important;
    color: #fecaca !important;
}

.chain-fund-head {
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    padding: 6px 4px;
    width: 12%;
}
.chain-fund-td {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    padding: 6px 4px;
    white-space: nowrap;
}
.chain-ce-fund { text-align: right; padding-right: 8px; }
.chain-pe-fund { text-align: left; padding-left: 8px; }

/* ─── Rules view mode: Option Chain Only ────────────────── */
/* Show ONLY the option chain section. Hide everything else inside the
   rule card body (conditions, action selector, symbol/token/qty/exchange
   fields, labels, and the "ALSO" divider). Keep rule card header
   visible so user still sees the rule name. */
#rulesContainer.view-chain-only .rule-section-when { display: none !important; }
#rulesContainer.view-chain-only .rule-section > .rule-section-label { display: none !important; }
/* Hide all form-rows and labels everywhere inside the card body except within chain panels */
#rulesContainer.view-chain-only .rule-card-body .form-row { display: none !important; }
/* Hide the "ALSO" divider row between action 1 and action 2 blocks */
#rulesContainer.view-chain-only .r-action2-block > div:first-child { display: none !important; }
/* Chain panel styling — visibility is controlled by JS based on whether
   the rule's action / action2 is actually buy/sell. */
#rulesContainer.view-chain-only .r-chain-panel {
    margin-top: 6px !important;
}
/* Kill extra spacing left behind from hidden sections */
#rulesContainer.view-chain-only .rule-section { padding: 0 !important; margin: 0 !important; }
#rulesContainer.view-chain-only .r-order-fields,
#rulesContainer.view-chain-only .r-order2-fields {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* View toggle radio labels — more button-like */
.view-toggle-option {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.view-toggle-option:hover { background: var(--surface); }
.view-toggle-option input[type="radio"]:checked + span {
    font-weight: 700;
    color: var(--accent);
}

.chain-pick-btn {
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.74rem;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    white-space: nowrap;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.chain-ce-btn:hover,
.chain-ce-btn.chain-selected {
    background: rgba(22,163,74,0.12);
    color: var(--green);
    border-color: rgba(22,163,74,0.4);
}
.chain-pe-btn:hover,
.chain-pe-btn.chain-selected {
    background: rgba(220,38,38,0.1);
    color: var(--red);
    border-color: rgba(220,38,38,0.35);
}

.chain-ltp-note {
    padding: 6px 14px;
    font-size: 0.75rem;
    color: var(--muted);
    background: var(--surface2);
    border-top: 1px solid var(--border);
    text-align: right;
}
.chain-ltp-note strong { color: var(--text); }

/* ─── Start / Stop buttons ────────────────────────────────── */
.btn-start {
    background: rgba(34,197,94,0.12);
    color: var(--green);
    border: 1px solid rgba(34,197,94,0.28);
    padding: 6px 14px;
    font-size: 0.83rem;
}
.btn-start:hover:not(:disabled) { background: rgba(34,197,94,0.22); }

.btn-stop {
    background: rgba(239,68,68,0.1);
    color: var(--red);
    border: 1px solid rgba(239,68,68,0.25);
    padding: 6px 14px;
    font-size: 0.83rem;
}
.btn-stop:hover:not(:disabled) { background: rgba(239,68,68,0.18); }

.btn-start:disabled,
.btn-stop:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@keyframes flash-start {
    0%, 100% { background: rgba(34,197,94,0.15); box-shadow: none;                                                        color: #16a34a; border-color: rgba(34,197,94,0.4); }
    50%       { background: rgba(34,197,94,0.85); box-shadow: 0 0 18px rgba(34,197,94,0.85), 0 0 5px rgba(34,197,94,1);  color: #fff;    border-color: #16a34a; }
}
.btn-start.flashing {
    animation: flash-start 1s ease-in-out infinite;
}

/* ─── PIN (fire-arm) button ───────────────────────────────── */
@keyframes flash-fire {
    0%, 100% { background: #7c3aed; box-shadow: none;                                                               color: #fff; }
    50%       { background: #a855f7; box-shadow: 0 0 14px rgba(168,85,247,0.9), 0 0 4px rgba(168,85,247,1);         color: #fff; }
}
.fire-btn-flashing { animation: flash-fire 0.7s ease-in-out infinite !important; }

.btn-fire-arm {
    padding: 3px 6px;
    font-size: 1.64rem;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    opacity: 0.3;
    filter: grayscale(0.4);
    transition: opacity 0.15s, filter 0.15s;
}
.btn-fire-arm.armed {
    background: transparent;
    border-color: transparent;
    opacity: 1;
    filter: sepia(1) saturate(4) hue-rotate(90deg) brightness(0.95);
}

/* ─── Rules Monitor (dashboard) ───────────────────────────── */
.rs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1.5;
}
.rs-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 6px 8px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.rs-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.rs-table tr:last-child td { border-bottom: none; }

.rs-name  { font-weight: 600; white-space: nowrap; }
.rs-status { white-space: nowrap; font-weight: 600; }
.rs-action { font-size: 0.75rem; color: var(--muted); max-width: 200px; word-break: break-word; }

/* status row colours */
.rs-watching .rs-status  { color: var(--accent); }
.rs-fired .rs-status     { color: var(--green); }
.rs-demo .rs-status      { color: var(--yellow); }
.rs-disabled             { opacity: 0.45; }
.rs-disabled .rs-status  { color: var(--muted); }
.rs-triggered .rs-status { color: #8b5cf6; }
.rs-error .rs-status     { color: var(--red); }

/* condition met / not met */
.rs-met    { color: var(--green); font-weight: 600; }
.rs-notmet { color: var(--muted); }

/* demo badge */
.rs-demo-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: rgba(180,83,9,0.12);
    color: var(--yellow);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}

/* fired-row highlight */
.rs-fired td, .rs-demo td {
    background: rgba(34,197,94,0.04);
}

/* dashboard level editor in trigger settings */
.ts-level-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.ts-level-input {
    width: 110px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 0.78rem;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    background: var(--surface2);
    color: var(--text);
    outline: none;
}
.ts-level-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
button.ts-level-save {
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    appearance: none;
    background: #1e40af;
    color: #bfdbfe;
    font-family: inherit;
    white-space: nowrap;
}
button.ts-level-save:hover:not(:disabled) { opacity: 0.8; }
button.ts-level-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* dashboard toggle button (enabled/disabled) */
button.btn-toggle-dash {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    line-height: 1.5;
}
button.btn-toggle-dash.is-on   { background: #166534; color: #bbf7d0; }
button.btn-toggle-dash.is-off  { background: #991b1b; color: #fecaca; }
button.btn-toggle-dash.is-live { background: #1e40af; color: #bfdbfe; }
button.btn-toggle-dash.is-demo { background: #92400e; color: #fde68a; }
button.btn-toggle-dash:hover:not(:disabled) { opacity: 0.75; }
button.btn-toggle-dash:disabled { opacity: 0.5; cursor: not-allowed; }

/* per-rule alarm bell toggle (dashboard) */
button.btn-alarm-dash {
    display: inline-block;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
    white-space: nowrap;
}
button.btn-alarm-dash.is-on {
    background: #92400e; color: #fde68a;
    box-shadow: 0 0 6px rgba(234,179,8,0.35);
}
button.btn-alarm-dash.is-off { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
button.btn-alarm-dash:hover:not(:disabled) { filter: brightness(1.15); }



/* ═══════════════════════════════════════════════════════════════
   DENSITY + LARGER CONTENT (desktop default)
   — Maximizes screen real estate: larger fonts, tighter margins,
     bigger controls, no wasted whitespace.
   ═══════════════════════════════════════════════════════════════ */

/* Navbar — tighter but taller touch target */
.navbar { padding: 0 18px; height: 52px; }
.nav-brand { font-size: 1.15rem; font-weight: 700; }
.nav-links { gap: 4px !important; }
.nav-links a, .nav-links button { font-size: 0.95rem; padding: 6px 12px; }

/* Page header — kill big top margin */
.page-header { margin-bottom: 10px !important; }
.page-header h1 { font-size: 1.6rem; margin: 0; }

/* Info boxes — tighter padding, bigger title */
.info-box { padding: 12px 14px !important; margin-bottom: 10px !important; border-radius: 8px; }
.info-box h2 { font-size: 1.05rem; margin-bottom: 8px; }

/* Tables — a touch larger text, tighter vertical rhythm */
.info-table { font-size: 0.98rem; }
.info-table td { padding: 6px 4px; }

/* Buttons — bigger but not bulky */
.btn { font-size: 0.95rem; padding: 7px 14px; }
.btn-start, .btn-stop { font-size: 1rem; padding: 8px 18px; }
.btn-toggle-dash, .btn-alarm-dash { font-size: 0.72rem; padding: 3px 8px; min-width: 34px; }

/* Trigger settings table — rows tighter, fonts bigger */
#triggerSettingsTable { font-size: 0.95rem; }
#triggerSettingsTable td { padding: 5px 4px; }
#triggerSettingsTable td:nth-child(2) { width: 26%; min-width: 240px; }
.ts-level-input { font-size: 0.95rem; padding: 5px 8px; }
.ts-group-select { font-size: 0.9rem !important; }

/* Rule cards (rules.php) — less padding, larger inputs */
.rule-card { padding: 12px 14px !important; margin-bottom: 10px !important; }
.rule-card-header { gap: 8px; }
.rule-card-header .r-name { font-size: 1.02rem; padding: 5px 10px; }
.rule-card-body { padding: 8px 0; gap: 10px; }

/* Option chain — bigger text, tighter rows */
.chain-table { font-size: 0.92rem; }
.chain-table th { font-size: 0.9rem; padding: 6px 8px; }
.chain-table td { padding: 4px 8px; }
.chain-pick-btn { font-size: 0.88rem; padding: 5px 10px; }

/* Log panel — more readable log text */
.log-toolbar { padding: 8px 12px; }
.log-title { font-size: 1rem; }
.log-body { font-size: 0.88rem; line-height: 1.4; padding: 8px 12px; }
.log-filter-toolbar { padding: 6px 10px !important; font-size: 0.82rem !important; }
.log-filter-toolbar label { font-size: 0.82rem; }

/* LTP / market status — bigger and more prominent */
#ltpDisplay { font-size: 1.6rem !important; font-weight: 700; }
.nav-market-status { font-size: 0.92rem; }

/* Active positions chips — no font-size override; use base 1.5rem */
.pos-chip-dash { padding: 5px 12px !important; }

/* Dashboard layout gets more room */
.dash-inner { padding: 10px 12px 12px !important; }

/* Inputs/selects uniformly bigger */
input[type="number"], input[type="text"], select, textarea {
    font-size: 0.95rem;
    padding: 6px 10px;
}

/* Remove excess gap in section grid */
.section-grid { gap: 10px !important; }

/* ── Active position chip (dashboard) ── */
.pos-chip-dash {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 18px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 1.5rem;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}
.pos-chip-dash .pc-row1 { display: flex; align-items: center; gap: 10px; line-height: 1; }
.pos-chip-dash .pc-row2 { display: flex; align-items: center; gap: 8px; line-height: 1; }
.pos-chip-dash .pc-sym  { font-weight: 700; }
.pos-chip-dash .pc-conid { color: var(--muted); font-size: 0.65em; }
.pos-chip-dash .pc-qty  { font-weight: 700; }
.pos-chip-dash .pc-pnl  { font-weight: 700; font-size: 3em; line-height: 1; }
.pos-chip-dash .pc-pct  { font-size: 1.8em; opacity: 0.85; }
.pos-chip-dash .pc-theta { color: #a78bfa; font-size: 1.6em; opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════ */

/* Tablets & small laptops (≤ 1024px) — still one column but narrower log */
@media (max-width: 1024px) {
    html { font-size: 16px; }
    .container { max-width: 100%; padding: 10px 12px 30px; }
    .dash-layout { grid-template-columns: 1fr 380px; }
    .page-header h1 { font-size: 1.5rem; }
}

/* Tablets & large phones (≤ 768px) — stack dashboard and log panel */
@media (max-width: 768px) {
    html { font-size: 16px; }   /* keep full readability on touch */
    body { line-height: 1.4; }
    .container { padding: 8px 10px 24px; }

    /* iOS Safari fix — don't lock to 100vh (address bar makes it shift),
       and allow natural page scrolling when content stacks */
    body.has-dash-layout {
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        display: block !important;
    }
    .navbar { position: static !important; }  /* stop sticky overlap on iOS */

    /* Navbar — allow natural wrap/height so items don't overlap on iOS */
    .navbar {
        height: auto;
        min-height: 48px;
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 6px;
        row-gap: 6px;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-brand { font-size: 1.05rem; flex: 0 0 auto; }
    .nav-market-status { font-size: 0.78rem; padding: 3px 10px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .nav-api-stats { font-size: 0.72rem; flex: 0 0 auto; }
    .nav-links {
        flex: 1 1 100%;   /* drop to its own full-width row on mobile */
        margin: 0 !important;
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding: 0;
    }

    /* Make sure page content starts below navbar (no sticky on mobile — pure flow) */
    .dash-layout { padding-top: 0; margin-top: 0; }

    /* Page header kept small */
    .page-header { margin-bottom: 8px !important; }
    .page-header h1 { font-size: 1.3rem; }

    /* Stack dashboard + log panel vertically — dashboard first */
    .dash-layout {
        display: flex;
        flex-direction: column;
        overflow: visible;
        height: auto;
    }
    .dash-layout > .dash-side { order: 1; }
    .dash-layout > .log-panel { order: 2; border-left: none; border-top: 1px solid var(--border); }

    .dash-side { overflow-y: visible; max-height: none; }
    .dash-inner { padding: 8px 8px 8px !important; }
    /* Use fixed pixels on mobile — vh units are unreliable on iOS Safari */
    .log-panel { max-height: none; overflow: visible; }
    .log-body { font-size: 0.88rem; line-height: 1.35; max-height: 360px; padding: 6px 8px; }

    /* Nav — horizontal scroll instead of wrap to save vertical space */
    nav ul { flex-wrap: nowrap; overflow-x: auto; gap: 4px !important; padding: 6px 8px !important; }
    nav ul li { flex-shrink: 0; }
    nav ul li a { font-size: 0.95rem; padding: 6px 12px; white-space: nowrap; }

    /* Info boxes — tighter */
    .info-box { padding: 10px !important; margin-bottom: 8px !important; }
    .info-box h2 { font-size: 1rem; margin-bottom: 6px; }

    /* Trigger settings — horizontal scroll so rows stay on one line, readable font */
    #triggerSettingsTable { display: block; overflow-x: auto; white-space: nowrap; font-size: 0.92rem; }
    .info-table td { padding: 6px 4px; white-space: nowrap; }
    #triggerSettingsTable td:nth-child(2) { width: auto; min-width: 180px; }
    .ts-level-input { width: 90px !important; }
    .btn-toggle-dash, .btn-alarm-dash { padding: 6px 10px; font-size: 0.82rem; }

    /* Rule cards — single-column body on narrow screens */
    .rule-card { padding: 10px !important; margin-bottom: 8px !important; }
    .rule-card-header { flex-wrap: wrap; gap: 6px; }
    .rule-card-header .r-name { font-size: 0.98rem; min-width: 160px; }
    .rule-card-body { padding: 6px 0; gap: 8px; }

    /* Option chain table — use fixed layout so columns don't collide */
    .r-chain-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .chain-table {
        table-layout: fixed;
        width: 100%;
        font-size: 0.85rem;
    }
    .chain-ce-head  { width: 40%; }
    .chain-strike-head { width: 20%; min-width: 72px; }
    .chain-pe-head  { width: 40%; }
    .chain-table td, .chain-table th { padding: 5px 4px; }
    .chain-ce-td  { padding: 5px 4px; }
    .chain-pe-td  { padding: 5px 4px; }
    .chain-strike-td { padding: 5px 4px; font-size: 0.88rem; min-width: 72px; }
    .chain-pick-btn {
        font-size: 0.72rem;
        padding: 6px 6px;
        max-width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Position chips — horizontal scroll, no wrapping, keep font sizes */
    #posList { gap: 6px !important; flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 4px !important; }
    .pos-chip-dash {
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
    .pos-chip-dash .pc-conid { display: none; }

    /* Modals — full width */
    .modal-content, [style*="max-width: 700px"], [style*="max-width: 600px"] {
        max-width: 95vw !important;
        padding: 12px !important;
    }

    /* Touch targets — 40px minimum, 16px input font prevents iOS zoom-on-focus */
    button, .btn, input[type="checkbox"], input[type="radio"] { min-height: 40px; }
    input[type="number"], input[type="text"], textarea { min-height: 40px; font-size: 16px; }
    select { min-height: 40px; font-size: 16px; }

    /* LTP — prominent */
    #ltpDisplay { font-size: 1.4rem !important; }
}

/* Phones (≤ 480px) — further compression but keep touch targets */
@media (max-width: 480px) {
    html { font-size: 15.5px; }
    .container { padding: 6px 8px 20px; }
    .page-header h1 { font-size: 1.15rem; }

    /* Hide low-priority navbar items on small phones to prevent overlap */
    .market-detail { display: none; }
    .nav-api-stats { display: none; }
    .nav-market-status { font-size: 0.72rem; padding: 2px 8px; }
    .nav-brand { font-size: 0.95rem; }
    .brand-icon { font-size: 0.75rem; padding: 2px 5px; }

    /* LTP a bit smaller on phones */
    #ltpDisplay { font-size: 1.25rem !important; }

    /* Filter toolbar wraps to save width */
    .log-filter-toolbar { flex-wrap: wrap; gap: 4px; padding: 6px !important; font-size: 0.78rem !important; }
    .log-filter-toolbar label { font-size: 0.78rem; }

    /* Trigger settings — narrower input */
    #triggerSettingsTable .ts-level-cell input { width: 80px !important; }

    /* Info box headers */
    .info-box h2 { font-size: 0.95rem; flex-wrap: wrap; }

    /* Rule card body stacks */
    .rule-card-body { display: block; }

    /* Chain table: fixed layout, smaller buttons so CALL/Strike/PUT don't overlap */
    .chain-table { table-layout: fixed; font-size: 0.78rem; }
    .chain-ce-head, .chain-pe-head { width: 40%; }
    .chain-strike-head, .chain-strike-td { width: 20%; min-width: 64px; }
    .chain-pick-btn {
        font-size: 0.68rem;
        padding: 5px 4px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        box-sizing: border-box;
    }
    .chain-strike-td { font-size: 0.82rem; padding: 4px 2px; }
    .chain-atm-badge, .chain-level-badge { font-size: 0.55rem; padding: 1px 3px; }

    /* Nav */
    nav ul li a { font-size: 0.88rem; padding: 5px 10px; }

    /* Position chips — keep font size, no wrapping */
    .pos-chip-dash { flex-shrink: 0 !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
}

/* Landscape phones — cap log panel height to give more room to dashboard */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .log-panel { max-height: 42vh; }
    .log-body { max-height: 28vh; }
}


/* Leg toggle (CE / PE / —) inside each rule's Action section. Picking CE
   or PE binds the rule to the live Global Option Chain selection so the
   user no longer has to manually pick a symbol per rule. */
.leg-toggle {
    display: inline-flex;
    gap: 0;
    border: 2px solid #6366f1;
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface2);
    height: 36px;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}
.leg-toggle .leg-btn {
    padding: 0 14px;
    background: transparent;
    color: var(--text);
    border: none;
    border-right: 1px solid var(--border);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 44px;
    transition: background 0.12s, color 0.12s;
}
.leg-toggle .leg-btn:last-child { border-right: none; }
.leg-toggle .leg-btn:hover { background: var(--surface); }
.leg-toggle .leg-btn.leg-ce.active   { background: #16a34a; color: #fff; }
.leg-toggle .leg-btn.leg-pe.active   { background: #dc2626; color: #fff; }
.leg-toggle .leg-btn.leg-none.active { background: var(--border); color: var(--muted); }
html[data-theme="dark"] .leg-toggle .leg-btn.leg-ce.active   { background: #15803d; }
html[data-theme="dark"] .leg-toggle .leg-btn.leg-pe.active   { background: #b91c1c; }

/* Toast notifications (assets/notify.js). Non-blocking, top-right stack. */
.notify-container {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 28px));
}
.notify-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08);
    font-size: 0.88rem;
    line-height: 1.4;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.22s ease-out, opacity 0.22s ease-out;
    word-break: break-word;
}
.notify-toast.notify-show { transform: translateX(0); opacity: 1; }
.notify-toast.notify-hide { transform: translateX(20%); opacity: 0; }
.notify-toast.notify-success { border-left-color: #16a34a; }
.notify-toast.notify-warn    { border-left-color: #ea580c; }
.notify-toast.notify-error   { border-left-color: #dc2626; }
.notify-toast .notify-body { flex: 1; min-width: 0; }
.notify-toast .notify-title { font-weight: 700; margin-bottom: 3px; font-size: 0.92rem; }
.notify-toast .notify-msg   { white-space: pre-wrap; }
.notify-toast .notify-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 2px;
    margin-left: 4px;
}
.notify-toast .notify-close:hover { color: var(--text); }

/* ── BUY / SELL trade-type toggle (rules page card header) ──────────────── */
.trade-type-toggle {
    display: inline-flex;
    gap: 0;
    border: 2px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface2);
    height: 28px;
    flex-shrink: 0;
}
.trade-type-toggle .trade-type-btn {
    padding: 0 12px;
    background: transparent;
    color: var(--text);
    border: none;
    border-right: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 48px;
    transition: background 0.12s, color 0.12s;
}
.trade-type-toggle .trade-type-btn:last-child { border-right: none; }
.trade-type-toggle .trade-type-btn:hover { background: var(--surface); }
.trade-type-toggle .trade-type-btn.active { border-color: transparent; }
/* BUY active — blue */
.trade-type-toggle .trade-type-btn.trade-buy.active  { background: #2563eb; color: #fff; }
/* SELL active — red */
.trade-type-toggle .trade-type-btn.trade-sell.active { background: #dc2626; color: #fff; }
/* Shrink border when something is active */
.trade-type-toggle:has(.trade-type-btn.active) { border-color: var(--border); }
/* Dark mode */
html[data-theme="dark"] .trade-type-toggle .trade-type-btn.trade-buy.active  { background: #1d4ed8; }
html[data-theme="dark"] .trade-type-toggle .trade-type-btn.trade-sell.active { background: #b91c1c; }

/* ── trade_type badge in dashboard Trigger Settings table ───────────────── */
.ts-call-type-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.ts-call-type-badge.ct-buy  { background: #dbeafe; color: #1d4ed8; }
.ts-call-type-badge.ct-sell { background: #fee2e2; color: #b91c1c; }
html[data-theme="dark"] .ts-call-type-badge.ct-buy  { background: #1e3a5f; color: #93c5fd; }
html[data-theme="dark"] .ts-call-type-badge.ct-sell { background: #4c1818; color: #fca5a5; }