/* İzleme Ayarları. Renk ve yazı tipi tokenları sql-dashboard.css'teki .sqd-root kümesinden gelir (.mss-root oraya eklendi). */
.mss-root { container: mss-root / inline-size; display: flex; flex-direction: column; min-height: 100%; border: 1px solid var(--sqd-line); border-radius: 14px; overflow: hidden;
            background: var(--sqd-page); font-size: 13px; }

/* ---------- Üst bant ---------- */
.mss-top { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--sqd-navy); color: #fff; }
.mss-top-icon { font-size: 20px; color: var(--sqd-accent); }
.mss-top-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; }
.mss-top-sub { font-size: 11.5px; font-weight: 400; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mss-dirty { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #f5d9a8; white-space: nowrap; }
.mss-dirty i { font-size: 7px; }
.mss-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(46, 125, 79, .3);
              color: #9fe1b8; font-size: 12px; font-weight: 500; white-space: nowrap; }
.mss-status-off { background: rgba(192, 57, 43, .35); color: #f5b7b1; }

/* ---------- Sol sekme rayı + içerik ---------- */
.mss-body { flex: 1 1 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.mss-rail { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--sqd-line); background: #fff; }
.mss-tab { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
           color: var(--sqd-navy); font: 500 13px var(--sqd-font); text-align: left; cursor: pointer; transition: background-color .15s; }
.mss-tab > i { width: 16px; text-align: center; color: var(--sqd-accent); }
.mss-tab > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mss-tab:hover { background: var(--sqd-accent-tint); }
.mss-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.mss-tab-on { background: var(--sqd-head-bg); font-weight: 600; }
.mss-tab em { font-style: normal; font-size: 10.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--sqd-accent-tint);
              color: var(--sqd-accent-text); white-space: nowrap; }
.mss-tab em.mss-badge-off { background: var(--sqd-danger-tint); color: var(--sqd-danger); }
.mss-main { container: mss-main / inline-size; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 24px; min-width: 0; }

.mss-banner { font-size: 12.5px; line-height: 1.5; color: var(--sqd-muted); }
.mss-banner > i { align-self: flex-start; margin-top: 2px; }

/* ---------- Bölüm kartları ---------- */
.mss-card { container: mss-card / inline-size; min-width: 0; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; overflow: hidden; }
.mss-card-head { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--sqd-line-soft);
                 font-size: 13px; font-weight: 600; }
.mss-card-head i { width: 14px; text-align: center; color: var(--sqd-accent); }
.mss-card-note { padding: 10px 16px 0; font-size: 12px; line-height: 1.5; color: var(--sqd-muted); }
.mss-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }

.mss-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: center; padding: 11px 16px;
           border-bottom: 1px solid var(--sqd-line-soft); }
.mss-row:last-child { border-bottom: 0; }
.mss-row-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.mss-row > .mss-switch { justify-self: end; }
.mss-label { min-width: 0; }
.mss-name { font-size: 13px; font-weight: 600; }
.mss-help { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--sqd-muted); }
.mss-block { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sqd-line-soft); }
.mss-block:last-child { border-bottom: 0; }
.mss-block > .mss-help { margin-top: 0; }
.mss-mono { font-family: var(--sqd-mono) !important; font-size: 12.5px !important; }
.mss-danger { color: var(--sqd-danger) !important; }

/* ---------- Birimli alan ---------- */
.mss-input { display: flex; align-items: center; height: 32px; margin: 0; border: 1px solid var(--sqd-line); border-radius: 12px; background: #fff;
             overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.mss-input:focus-within { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.mss-input input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: 0; background: transparent;
                   color: var(--sqd-navy); font: 13px var(--sqd-font); }
.mss-input input::placeholder { color: rgba(27, 40, 56, .4); font-family: var(--sqd-font); }
.mss-input > span { display: flex; align-items: center; height: 100%; padding: 0 11px; background: var(--sqd-head-bg); color: var(--sqd-accent-text);
                    font-size: 11.5px; font-weight: 500; }
.mss-cron { display: flex; gap: 8px; min-width: 0; }
.mss-cron .mss-input { flex: 1 1 auto; min-width: 0; }

/* ---------- Anahtar ---------- */
.mss-switch { position: relative; flex: 0 0 auto; width: 40px; height: 23px; padding: 0; border: 0; border-radius: 999px; background: rgba(27, 40, 56, .22);
              cursor: pointer; transition: background-color .15s; }
.mss-switch > span { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff;
                     box-shadow: 0 1px 2px rgba(27, 40, 56, .25); transition: left .15s; }
.mss-switch-on { background: var(--sqd-success); }
.mss-switch-on > span { left: 20px; }
.mss-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sqd-accent-ring); }

/* ---------- Genel sekmesi ---------- */
.mss-master { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(46, 125, 79, .35); border-radius: 14px; background: #fff; }
.mss-master > i { font-size: 20px; color: var(--sqd-success); }
.mss-master > .mss-label { flex: 1 1 auto; }
.mss-master-off { border-color: rgba(192, 57, 43, .35); }
.mss-master-off > i { color: var(--sqd-danger); }
.mss-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transition: opacity .15s; }
.mss-dim { opacity: .5; }
.mss-tile { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
.mss-tile > i { width: 18px; margin-top: 2px; font-size: 16px; text-align: center; color: var(--sqd-accent); }
.mss-tile > .mss-label { flex: 1 1 auto; }
.mss-tile-off > i { color: rgba(27, 40, 56, .35); }

/* ---------- Etiket girişi ---------- */
.mss-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 6px; border: 1px solid var(--sqd-line);
             border-radius: 12px; background: #fff; }
.mss-chips:focus-within { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.mss-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--sqd-accent-tint);
            color: var(--sqd-navy); font-size: 12px; }
.mss-chip button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sqd-accent-text);
                   font-size: 10px; cursor: pointer; }
.mss-chip button:hover { background: rgba(166, 134, 87, .25); }
.mss-chips input { flex: 1 1 140px; min-width: 120px; height: 26px; padding: 0 6px; border: 0; outline: 0; background: transparent;
                   color: var(--sqd-navy); font: 13px var(--sqd-font); }
.mss-chips.mss-mono .mss-chip, .mss-chips.mss-mono input { font-family: var(--sqd-mono); }

/* ---------- Klasör tablosu ---------- */
.mss-table-wrap { border: 1px solid var(--sqd-line-soft); border-radius: 12px; overflow: hidden; }
.mss-table { width: 100%; border-collapse: collapse; }
.mss-table th { padding: 8px 10px; background: var(--sqd-head-bg); font-size: 11.5px; font-weight: 600; text-align: left; }
.mss-table td { padding: 5px 10px; border-top: 1px solid var(--sqd-line-soft); }
.mss-cell { width: 100%; height: 30px; padding: 0 10px; border: 1px solid var(--sqd-line); border-radius: 10px; background: #fff; color: var(--sqd-navy);
            font: 13px var(--sqd-font); }
.mss-cell:focus { outline: none; border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.mss-row-actions { text-align: right; }
.mss-table-empty { padding: 10px 12px; font-size: 12px; color: var(--sqd-muted); }
.mss-table-foot { padding: 8px 10px; border-top: 1px solid var(--sqd-line-soft); }

/* ---------- Kural ızgaraları (RuleGridComponent) bu ekranın diline uyarlanır ---------- */
.mss-grid { padding: 12px 16px 14px; }
.mss-root .rg-container { font-size: 13px; }
.mss-root .rg-grid { max-height: 26rem; padding: 0; gap: 0; border: 1px solid var(--sqd-line-soft); border-radius: 12px; }
.mss-root .rg-head { position: sticky; top: 0; z-index: 1; padding: 8px 10px; border-bottom: 0; background: var(--sqd-head-bg); color: var(--sqd-navy);
                     font-size: 11.5px; font-weight: 600; align-self: stretch; display: flex; align-items: center; }
.mss-root .rg-index, .mss-root .rg-cell { padding: 5px 10px; border-top: 1px solid var(--sqd-line-soft); }
.mss-root .rg-index { align-self: stretch; display: flex; align-items: center; }
.mss-root .rg-input { height: 30px; padding: 0 10px; border-radius: 10px; }
.mss-root .rg-input:focus { box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.mss-root .rg-add, .mss-root .rg-delete, .mss-root .rg-pick { height: 30px; padding: 0 12px; border: 1px solid var(--sqd-line); border-radius: 12px;
                                                           background: #fff; color: var(--sqd-navy); font: 500 12.5px var(--sqd-font); }
.mss-root .rg-add:hover, .mss-root .rg-pick:hover { background: var(--sqd-accent-tint); border-color: rgba(166, 134, 87, .45); color: var(--sqd-navy); filter: none; }
.mss-root .rg-delete { border-color: transparent; background: transparent; color: var(--sqd-danger); }
.mss-root .rg-delete:hover { background: var(--sqd-danger-tint); color: var(--sqd-danger); }
.mss-root .rg-pick { padding: 0 10px; }
/* Cihaz kuralları 10 sütun: eşit bölünce cron ve adres hücreleri okunmaz; ızgara yatay kayar. */
.mss-grid-wide .rg-grid { grid-template-columns: 34px 170px 90px 70px 210px 90px 80px 210px 76px 60px minmax(200px, 1fr) 56px !important; }

/* Ekran dar bir sekmede ya da yan panelde açılabilir; kırılımlar viewport'a değil ekranın kendi genişliğine bakar. */
@container mss-root (max-width: 820px) {
    .mss-body { grid-template-columns: 1fr; }
    .mss-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--sqd-line); }
    .mss-tab { width: auto; white-space: nowrap; }
    .mss-top-sub { display: none; }
}

/* Yan yana iki kartta satır dar kalır; alan sütunu daralır, etiket nefes alır. */
@container mss-card (max-width: 560px) {
    .mss-row { grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
}

@container mss-main (max-width: 640px) {
    .mss-row, .mss-row-wide { grid-template-columns: 1fr; gap: 8px; }
    .mss-row > .mss-switch { justify-self: start; }
    .mss-tiles { grid-template-columns: 1fr; }
}

/* ---------- Alarm Kuralları'na taşınmış (salt okunur) alanlar ---------- */
.mss-lock { margin-left: 6px; font-size: 11px; color: var(--sqd-accent); }
.mss-row-locked { background: rgba(27, 40, 56, .03); }
.mss-row-locked .mss-input { background: rgba(27, 40, 56, .04); border-color: var(--sqd-line-soft); }
.mss-input input:disabled { color: var(--sqd-muted); cursor: not-allowed; }
.mss-chips-locked { background: rgba(27, 40, 56, .04); border-color: var(--sqd-line-soft); }
.mss-chips-locked input:disabled, .mss-chips-locked button:disabled { cursor: not-allowed; }