/* SQL Panoları. Renkler/yazı tipi yalnız pano ve kart editörü köklerinde tanımlanır; panelin öteki ekranlarına sızmaz. */
.sqd-root,
.sqe-backdrop,
.mss-root,
.cb-root,
.pf-root,
.alr-root,
.amb-root,
.sb-root,
.sc-shell {
    --sqd-navy: #1b2838;
    --sqd-accent: #a68657;
    --sqd-accent-hover: #947549;
    --sqd-accent-tint: rgba(166, 134, 87, .10);
    --sqd-accent-soft: #ecdec5;
    --sqd-accent-ring: rgba(166, 134, 87, .18);
    --sqd-accent-text: #6e5530;
    --sqd-head-bg: #f5ede0;
    --sqd-line: rgba(27, 40, 56, .14);
    --sqd-line-soft: rgba(27, 40, 56, .08);
    --sqd-muted: rgba(27, 40, 56, .62);
    --sqd-page: #fbfaf7;
    --sqd-danger: #c0392b;
    --sqd-danger-tint: #fdecec;
    --sqd-success: #2e7d4f;
    --sqd-font: var(--typography-font-family-font-base, Inter), sans-serif;
    --sqd-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
    --sqd-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231b2838' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    font-family: var(--sqd-font);
    color: var(--sqd-navy);
}

/* Ölçüler (32 px alanlar, min-height'lar) kenarlık dahil hesaplanır; panelin genel kuralına bağımlı kalınmaz. */
:where(.sqd-root, .sqe-backdrop, .mss-root, .cb-root, .pf-root, .alr-root, .amb-root, .sb-root),
:where(.sqd-root, .sqe-backdrop, .mss-root, .cb-root, .pf-root, .alr-root, .amb-root, .sb-root) :where(*, *::before, *::after) { box-sizing: border-box; }

.sqd-root { display: flex; flex-direction: column; gap: 12px; padding: 4px; }
/* "Pano bulunamadı." .sqd-root dışında çizilir; tema değişkeni çözülmezse yedek renk. */
.sqd-empty { padding: 24px; text-align: center; color: var(--sqd-muted, rgba(27, 40, 56, .62)); }

/* ---------- Araç çubuğu ---------- */
.sqd-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.sqd-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; flex: 1 1 auto; min-width: 0; }
.sqd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sqd-divider { width: 1px; height: 22px; margin: 0 2px; background: var(--sqd-line); }

/* ---------- Düğmeler ---------- */
.sqd-button { height: 32px; min-width: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
              border: 1px solid var(--sqd-line); border-radius: 12px; background: #fff; color: var(--sqd-navy); font: 500 13px var(--sqd-font);
              cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.sqd-button i { font-size: 13px; color: var(--sqd-accent); }
.sqd-button:hover:not(:disabled) { background: var(--sqd-accent-tint); border-color: rgba(166, 134, 87, .45); }
.sqd-button:focus-visible { outline: none; border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-button:disabled { opacity: .55; cursor: default; }
.sqd-icon-only { width: 32px; padding: 0; }
.sqd-primary { background: var(--sqd-accent); border-color: var(--sqd-accent); color: #fff; }
.sqd-primary i { color: #fff; }
.sqd-primary:hover:not(:disabled) { background: var(--sqd-accent-hover); border-color: var(--sqd-accent-hover); }
.sqd-ghost { background: transparent; border-color: transparent; }
.sqd-ghost:hover:not(:disabled) { background: var(--sqd-accent-tint); border-color: transparent; }

/* ---------- Filtre alanları (pano araç çubuğu + editördeki "Test değerleri" + ayar alanları) ---------- */
.sqd-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; }
.sqd-filter > span:first-child { font-size: 11.5px; font-weight: 600; color: var(--sqd-muted); letter-spacing: .01em; }
.sqd-filter-row { display: flex; align-items: center; gap: 4px; }
.sqd-filter input:not([type=checkbox], [type=color]),
.sqd-filter select { height: 32px; padding: 0 12px; border: 1px solid var(--sqd-line); border-radius: 12px; background-color: #fff;
                     color: var(--sqd-navy); font: 400 13px var(--sqd-font); outline: none; transition: border-color .15s, box-shadow .15s; }
.sqd-filter select { min-width: 150px; padding-right: 32px; appearance: none; -webkit-appearance: none; cursor: pointer;
                     background-image: var(--sqd-chevron); background-repeat: no-repeat; background-position: right 11px center; background-size: 12px; }
.sqd-filter input[type=text],
.sqd-filter input[type=number] { width: 150px; }
.sqd-filter input:not([type=checkbox], [type=color]):focus,
.sqd-filter select:focus { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-filter input::placeholder { color: var(--sqd-muted); }
.sqd-filter input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* Tarih aralığı: iki tarih tek bir hap içinde */
.sqd-filter .sqd-filter-row { height: 32px; padding: 0 4px; gap: 0; border: 1px solid var(--sqd-line); border-radius: 12px; background: #fff;
                              transition: border-color .15s, box-shadow .15s; }
.sqd-filter .sqd-filter-row:focus-within { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-filter-row > span { padding: 0 2px; color: var(--sqd-muted); }
.sqd-filter-row input[type=date] { height: 30px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; }
.sqd-filter-row input[type=date]:focus { box-shadow: none; }

/* Pano araç çubuğunda: liste filtresinde huni, tarih aralığında takvim ikonu (yalnız CSS) */
.sqd-toolbar .sqd-filter select { padding-left: 30px;
                                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 2h9L7.2 6.2V10L4.8 8.8V6.2z' fill='%23a68657'/%3E%3C/svg%3E"), var(--sqd-chevron);
                                  background-position: left 12px center, right 11px center; background-size: 11px, 12px; }
.sqd-toolbar .sqd-filter-row::before { content: "\f133"; padding: 0 2px 0 8px; font-family: "Font Awesome 6 Free"; font-weight: 400; font-size: 12px; color: var(--sqd-accent); }

/* ---------- Bilgi bandı ve ipuçları ---------- */
.sqd-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-left: 3px solid var(--sqd-accent); border-radius: 0 10px 10px 0;
              background: var(--sqd-accent-tint); color: var(--sqd-navy); font-size: 12.5px; line-height: 1.45; }
.sqd-banner > i { color: var(--sqd-accent); }
.sqd-banner.sqd-error { border-left-color: var(--sqd-danger); background: var(--sqd-danger-tint); color: var(--sqd-danger); }
.sqd-hint { font-size: 12px; color: var(--sqd-muted); }
.sqd-edit-hint { display: flex; align-items: center; gap: 6px; }

/* ---------- Kartlar ---------- */
.sqd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 80px; gap: 12px; }
.sqd-card { position: relative; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
            border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(27, 40, 56, .04); }
.sqd-card:focus { outline: none; }
.sqd-card.sqd-menu-open { overflow: visible; }
.sqd-card-title { min-height: 44px; padding: 8px 10px 4px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
                  font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqd-card-caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sqd-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 12px; }
.sqd-chart { flex: 1; min-height: 0; }
.sqd-number { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: -.01em; }
.sqd-message { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; color: var(--sqd-muted); font-size: 13px; }
.sqd-error { color: var(--sqd-danger); }
.sqd-message.sqd-error { color: var(--sqd-danger); }
.sqd-action-error { padding: 0 16px 6px; font-size: 12px; }

.sqd-spinner { width: 12px; height: 12px; flex: 0 0 12px; border: 2px solid var(--sqd-accent); border-right-color: transparent; border-radius: 50%;
               animation: sqd-spin .8s linear infinite; }
@keyframes sqd-spin { to { transform: rotate(360deg); } }

/* Kart menüsü */
.sqd-menu-button { width: 28px; height: 28px; flex: 0 0 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
                   border: 0; border-radius: 50%; background: transparent; color: var(--sqd-muted); font-size: 14px; line-height: 1; cursor: pointer;
                   transition: background-color .15s, color .15s; }
.sqd-menu-button:hover { background: var(--sqd-accent-tint); color: var(--sqd-navy); }
.sqd-menu-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-menu { position: absolute; top: 44px; right: 12px; z-index: 20; min-width: 190px; padding: 6px; background: #fff;
            border: 1px solid var(--sqd-line-soft); border-radius: 12px; box-shadow: 0 12px 28px rgba(27, 40, 56, .16), 0 2px 6px rgba(27, 40, 56, .08); }
.sqd-menu button { width: 100%; height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px;
                   background: transparent; color: var(--sqd-navy); font: 400 13px var(--sqd-font); text-align: left; cursor: pointer; }
.sqd-menu button i { width: 14px; text-align: center; color: var(--sqd-accent); }
.sqd-menu button:hover:not(:disabled) { background: var(--sqd-accent-tint); }
.sqd-menu button:disabled { opacity: .5; cursor: default; }
.sqd-menu hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--sqd-line-soft); opacity: 1; }
.sqd-menu-group { height: 22px; padding: 0 10px; display: flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--sqd-muted); }
.sqd-menu-backdrop { position: fixed; inset: 0; z-index: 19; }
.sqd-fullscreen-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(27, 40, 56, .55); }
.sqd-fullscreen { position: fixed !important; inset: 24px; z-index: 1041; height: auto !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }

/* ---------- Düzenleme ızgarası ---------- */
.grid-stack-item-content { position: relative; }
.grid-stack-item-content .sqd-card { outline: 1px dashed rgba(166, 134, 87, .55); outline-offset: -1px; }
.grid-stack-item-content .sqd-card-title { cursor: move; padding-right: 80px; }
.grid-stack-item-content .sqd-card-caption::before { content: "\f58e"; margin-right: 8px; font-family: "Font Awesome 6 Free"; font-weight: 900;
                                                     font-size: 12px; color: rgba(27, 40, 56, .3); }
/* Düzenleme ızgarasında sağ üstteki Düzenle/Sil düğmeleri menü düğmesinin yerini kaplar; menü yalnız görünüm modunda. */
.grid-stack-item-content .sqd-menu-button { display: none; }
.sqd-edit-tools { position: absolute; top: 8px; right: 10px; z-index: 2; display: flex; gap: 4px; }
.sqd-edit-tools .sqd-button { width: 28px; height: 28px; min-width: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sqd-muted); }
.sqd-edit-tools .sqd-button i { font-size: 12.5px; color: inherit; }
.sqd-edit-tools .sqd-button:hover:not(:disabled) { background: var(--sqd-accent-tint); color: var(--sqd-navy); }
.sqd-edit-tools .sqd-tool-danger:hover:not(:disabled) { background: var(--sqd-danger-tint); color: var(--sqd-danger); }

/* ---------- Tablo ve pivot ---------- */
.sqd-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.sqd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.sqd-table th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; background: var(--sqd-head-bg); color: var(--sqd-navy); font-weight: 600;
                text-align: left; white-space: nowrap; user-select: none; cursor: pointer; }
.sqd-table thead th:first-child { border-radius: 10px 0 0 10px; }
.sqd-table thead th:last-child { border-radius: 0 10px 10px 0; }
.sqd-table thead th:only-child { border-radius: 10px; }
.sqd-table th i { margin-left: 4px; font-size: 11px; color: var(--sqd-accent); }
.sqd-table td { padding: 8px 10px; border-bottom: 1px solid var(--sqd-line-soft); white-space: nowrap; }
.sqd-num { text-align: right; font-variant-numeric: tabular-nums; }
.sqd-table th.sqd-num { text-align: right; }
.sqd-pivot th { cursor: default; }
.sqd-pivot tbody th { top: auto; padding: 8px 10px; background: #fff; font-weight: 400; border-bottom: 1px solid var(--sqd-line-soft); }
.sqd-pivot th:first-child { position: sticky; left: 0; z-index: 1; }
.sqd-pivot thead th:first-child { z-index: 2; }
.sqd-pivot .sqd-total { font-weight: 600; }

/* Alt çubuk: solda satır bilgisi, sağda sayfalayıcı + "Satır" seçici */
.sqd-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 10px;
             border-top: 1px solid var(--sqd-line-soft); font-size: 12px; color: var(--sqd-muted); }
.sqd-pager-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sqd-pagesize { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sqd-muted); }
.sqd-pagesize select { height: 30px; min-width: 72px; padding: 0 30px 0 12px; border: 1px solid var(--sqd-line); border-radius: 12px; background-color: #fff;
                       color: var(--sqd-navy); font: 400 12.5px var(--sqd-font); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
                       background-image: var(--sqd-chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.sqd-pagesize select:focus { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-pager .dxbl-pager { --dxbl-pager-btn-spacing: 4px;
                         --dxbl-pager-btn-bg: #fff; --dxbl-pager-btn-color: var(--sqd-navy); --dxbl-pager-btn-border-color: var(--sqd-line);
                         --dxbl-pager-btn-hover-bg: var(--sqd-accent-tint); --dxbl-pager-btn-hover-color: var(--sqd-navy); --dxbl-pager-btn-hover-border-color: rgba(166, 134, 87, .45);
                         --dxbl-pager-btn-active-bg: var(--sqd-accent-tint); --dxbl-pager-btn-active-color: var(--sqd-navy); --dxbl-pager-btn-active-border-color: var(--sqd-accent);
                         --dxbl-pager-page-btn-bg: #fff; --dxbl-pager-page-btn-color: var(--sqd-navy); --dxbl-pager-page-btn-border-color: var(--sqd-line);
                         --dxbl-pager-page-btn-hover-bg: var(--sqd-accent-tint); --dxbl-pager-page-btn-hover-color: var(--sqd-navy); --dxbl-pager-page-btn-hover-border-color: rgba(166, 134, 87, .45);
                         --dxbl-pager-page-btn-active-bg: var(--sqd-accent-tint); --dxbl-pager-page-btn-active-color: var(--sqd-navy); --dxbl-pager-page-btn-active-border-color: var(--sqd-accent);
                         --dxbl-pager-active-page-btn-bg: var(--sqd-accent-soft); --dxbl-pager-active-page-btn-color: var(--sqd-navy); --dxbl-pager-active-page-btn-border-color: var(--sqd-accent-soft);
                         --dxbl-pager-btn-focus-outline-color: var(--sqd-accent-ring);
                         font-family: var(--sqd-font); font-size: 12.5px; }
.sqd-pager .dxbl-pager > .dxbl-btn { --dxbl-btn-border-radius: 10px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 10px; font-size: 12.5px; }
.sqd-pager .dxbl-pager > .dxbl-pager-active-page-btn { font-weight: 600; }

/* ---------- Kart editörü ---------- */
.sqe-backdrop { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; background: rgba(27, 40, 56, .55); }
.sqe-dialog { width: min(1280px, 96vw); height: 92vh; display: flex; flex-direction: column; overflow: hidden; background: var(--sqd-page); color: var(--sqd-navy);
              border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }

/* Lacivert başlık bandı */
.sqe-header { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--sqd-navy); color: #fff; }
.sqe-type-chip { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 12px;
                 background: rgba(166, 134, 87, .25); color: #e6cfa6; font-size: 17px; }
.sqe-heading { min-width: 0; display: flex; flex-direction: column; }
.sqe-heading-title { font-size: 15.5px; font-weight: 600; }
.sqe-heading-sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqe-header .sqe-close { margin-left: auto; width: 32px; padding: 0; border-radius: 10px; border-color: rgba(255, 255, 255, .18); background: transparent; color: rgba(255, 255, 255, .8); }
.sqe-header .sqe-close i { color: inherit; }
.sqe-header .sqe-close:hover:not(:disabled) { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; }

/* Gövde: iki sütun, kendi içinde kayar; önizleme sağ sütunun üstünde sabit kalır */
.sqe-body { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; padding: 18px 20px; }
.sqe-left,
.sqe-right { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sqe-row { display: flex; align-items: flex-end; gap: 10px; }
.sqe-row > .sqd-filter { flex: 1; }
.sqe-row > .sqe-type-field { flex: 0 0 210px; }
.sqd-filter input.sqe-title { width: 100%; }
.sqe-type-select { position: relative; display: block; }
.sqe-type-select > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--sqd-accent); pointer-events: none; }
.sqd-filter .sqe-type-select select { width: 100%; min-width: 0; padding-left: 34px; }

/* Paneller */
.sqe-panel { min-width: 0; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
.sqe-panel-head { min-height: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 14px; border-bottom: 1px solid var(--sqd-line-soft); }
.sqe-panel-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sqe-panel-title i { color: var(--sqd-accent); }
.sqe-panel-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sqe-panel-body { padding: 12px 14px; }
.sqe-chip { height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--sqd-accent-tint);
            color: var(--sqd-accent-text); font: 400 11.5px var(--sqd-mono); white-space: nowrap; }
.sqe-kbd { font-weight: 400; opacity: .75; }
.sqe-editor { height: 260px; overflow: hidden; }
.sqe-sql .sqe-editor { border-radius: 0 0 14px 14px; }
.sqe-undefined { padding: 8px 12px; border: 1px solid rgba(192, 57, 43, .25); border-radius: 10px; background: var(--sqd-danger-tint); font-size: 12px; }

.sqe-info { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--sqd-line-soft); border-radius: 12px; background: #fff;
            color: var(--sqd-muted); font-size: 12px; line-height: 1.6; }
.sqe-info > i { margin-top: 3px; color: var(--sqd-accent); }
.sqe-info .sqd-hint { display: inline; }
.sqe-info .sqd-hint + .sqd-hint::before { content: " "; }
.sqe-info code { padding: 1px 5px; border-radius: 5px; background: var(--sqd-accent-tint); color: var(--sqd-accent-text); font: 400 11.5px var(--sqd-mono); }

.sqe-test .sqe-panel-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sqe-test .sqd-filter input[type=number] { width: 120px; }

/* Sonuç */
.sqe-status { font-size: 12px; font-weight: 400; color: var(--sqd-muted); gap: 12px; }
.sqe-status-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--sqd-success); font-weight: 600; }
.sqe-status-error { display: inline-flex; align-items: center; gap: 5px; color: var(--sqd-danger); font-weight: 600; }
.sqe-result { min-height: 0; display: flex; flex-direction: column; padding: 8px 14px 12px; }
.sqe-result .sqd-table-wrap { max-height: 340px; }
.sqe-result .sqd-message.sqd-error { justify-content: flex-start; padding: 10px 12px; border: 1px solid rgba(192, 57, 43, .25); border-radius: 10px;
                                     background: var(--sqd-danger-tint); text-align: left; white-space: pre-wrap; font-size: 12.5px; }
.sqe-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px; text-align: center; color: var(--sqd-muted); font-size: 12.5px; }
.sqe-empty > i { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 14px;
                 background: var(--sqd-accent-tint); color: var(--sqd-accent); font-size: 20px; }
.sqe-empty > b { color: var(--sqd-navy); font-weight: 600; }
.sqe-empty > .sqd-spinner { width: 18px; height: 18px; flex-basis: 18px; }

/* Önizleme */
/* top: gövde dolgusunun eksisi; önizleme kaydırma alanının üst kenarına yapışır, üstünde içerik görünmez. */
.sqe-preview-panel { position: sticky; top: -18px; z-index: 3; box-shadow: 0 6px 18px rgba(27, 40, 56, .06); }
.sqe-preview { height: 290px; min-height: 0; display: flex; flex-direction: column; }
/* Tam ekran önizleme yapışkan panelin yığın bağlamında (z-index 3) hapsolmasın, Monaco katmanları üstüne çizilmesin:
   tam ekrandayken panel yapışkanlığı ve z-index'i bırakır, kart diyalog kökünün bağlamında z 1041 ile en üste çıkar. */
.sqe-preview-panel:has(.sqd-fullscreen) { position: static; z-index: auto; }
.sqe-preview .sqd-card:not(.sqd-fullscreen) { border: 0; border-radius: 0 0 14px 14px; box-shadow: none; }
.sqe-preview .sqe-empty { flex: 1; }

/* Ayar bölümleri (Veri / Görünüm / Renkler / Renk kuralları): açılır-kapanır paneller */
.sqe-settings { display: flex; flex-direction: column; gap: 14px; }
.sqe-section { min-width: 0; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
.sqe-section-head { width: 100%; padding: 11px 14px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 14px; background: transparent;
                    color: var(--sqd-navy); font: 600 13px var(--sqd-font); text-align: left; cursor: pointer; }
.sqe-section-head:hover { background: rgba(166, 134, 87, .05); }
.sqe-section-head:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqe-section-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.sqe-section-title i { width: 14px; text-align: center; color: var(--sqd-accent); }
.sqe-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--sqd-accent-soft); color: var(--sqd-accent-text); font-size: 11px; font-weight: 600; }
.sqe-caret { margin-left: auto; font-size: 11px; color: var(--sqd-muted); transition: transform .15s; }
.sqe-badge + .sqe-caret { margin-left: 8px; }
.sqe-collapsed .sqe-caret { transform: rotate(180deg); }
.sqe-section-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 2px 14px 14px; }
.sqe-section-body[hidden] { display: none; }
.sqe-section-body > .sqd-hint,
.sqe-section-body > .sqe-color-row,
.sqe-section-body > .sqe-rules,
.sqe-section-body > .sqe-full { grid-column: 1 / -1; }
.sqe-section-body .sqd-filter select,
.sqe-section-body .sqd-filter input:not([type=checkbox], [type=color]) { width: 100%; min-width: 0; }

.sqe-check { min-height: 32px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.sqe-check input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--sqd-accent); cursor: pointer; }
.sqe-check input[type=checkbox]:disabled { cursor: default; }
.sqe-check:has(input:disabled) { color: var(--sqd-muted); cursor: default; }

/* "Değer kolonları" / "Süre kolonları": gerçek onay kutuları, hap görünümünde */
.sqe-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sqe-check.sqe-pill { min-height: 0; height: 28px; padding: 0 10px; gap: 6px; border: 1px solid var(--sqd-line); border-radius: 999px; background: #fff; font-size: 12px;
                      transition: background-color .15s, border-color .15s; }
.sqe-check.sqe-pill:hover { border-color: rgba(166, 134, 87, .45); }
.sqe-check.sqe-pill:has(input:checked) { border-color: var(--sqd-accent); background: var(--sqd-accent-tint); }
.sqe-check.sqe-pill:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqe-pill input[type=checkbox] { width: 12px; height: 12px; flex: 0 0 12px; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--sqd-line);
                                 border-radius: 50%; background: transparent no-repeat center / 12px 12px; outline: none; }
.sqe-pill input[type=checkbox]:checked { border: 0; border-radius: 0;
                                         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3.2' fill='none' stroke='%23a68657' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Renk satırları */
.sqe-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
.sqe-color-row > span { flex: 0 0 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqe-color-row > .sqd-colors { flex: 1; min-width: 0; }

/* Renk kuralları */
.sqe-rules { display: flex; flex-direction: column; gap: 8px; }
.sqe-rule { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--sqd-line-soft); border-radius: 12px; background: #fdfcfa; }
.sqe-rule-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sqe-rule-fields select,
.sqe-rule-fields input[type=text] { height: 30px; padding: 0 10px; border: 1px solid var(--sqd-line); border-radius: 10px; background-color: #fff; color: var(--sqd-navy);
                                    font: 400 12px var(--sqd-font); outline: none; transition: border-color .15s, box-shadow .15s; }
.sqe-rule-fields select { flex: 1 1 110px; min-width: 0; padding-right: 28px; appearance: none; -webkit-appearance: none; cursor: pointer;
                          background-image: var(--sqd-chevron); background-repeat: no-repeat; background-position: right 9px center; background-size: 11px; }
.sqe-rule-fields input[type=text] { flex: 0 1 7em; width: 7em; min-width: 0; }
.sqe-rule-fields select:focus,
.sqe-rule-fields input[type=text]:focus { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqe-rule-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sqe-rule-foot > .sqd-colors { flex: 1; min-width: 0; }
.sqe-rule-tools { margin-left: auto; display: flex; gap: 2px; }
.sqe-icon-btn { width: 28px; height: 28px; min-width: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sqd-muted); }
.sqe-icon-btn i { font-size: 12px; color: inherit; }
.sqe-icon-btn:hover:not(:disabled) { background: var(--sqd-accent-tint); color: var(--sqd-navy); }
.sqe-icon-danger:hover:not(:disabled) { background: var(--sqd-danger-tint); color: var(--sqd-danger); }

/* Renk seçici */
.sqd-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sqd-color { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); cursor: pointer;
             transition: transform .1s; }
.sqd-color:hover { transform: scale(1.12); }
.sqd-color.selected { outline: 2px solid var(--sqd-navy); outline-offset: 1px; }
.sqd-colors input[type=color] { width: 26px; height: 26px; padding: 2px; border: 1px solid var(--sqd-line); border-radius: 8px; background: #fff; cursor: pointer; }
.sqd-colors input.sqd-color-hex { width: 84px; height: 26px; padding: 0 8px; border: 1px solid var(--sqd-line); border-radius: 8px; background: #fff;
                                  color: var(--sqd-navy); font: 400 11.5px var(--sqd-mono); outline: none; }
.sqd-colors input.sqd-color-hex:focus { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-colors input.sqd-color-hex.sqd-invalid { border-color: #dc3545; }
.sqd-colors .sqd-color-clear { height: 26px; min-width: 0; padding: 0 10px; border-radius: 8px; font-size: 12px; }

/* Alt çubuk */
.sqe-footer { flex: 0 0 auto; min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px;
              border-top: 1px solid var(--sqd-line-soft); background: #fff; }
.sqe-footer-actions { margin-left: auto; display: flex; gap: 8px; }
.sqe-dirty { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sqd-muted); }
.sqe-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--sqd-accent); }
.sqe-save-error { font-size: 12.5px; }
.sqe-confirming { background: #fffaf2; }
.sqe-confirm-text { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sqe-confirm-text i { color: var(--sqd-accent); }

/* ---------- JSON'dan içe aktarma diyaloğu (XAF popup'ı içinde) ---------- */
.sqd-import { width: min(560px, 100%); padding: 4px 2px; }
.sqd-import-title { margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--sqd-navy); }
.sqd-import-file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sqd-import-pick { position: relative; margin: 0; cursor: pointer; font-size: 13px; font-weight: 600; }
.sqd-import-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.sqd-import-pick:focus-within { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-import-pick.sqd-disabled { opacity: .55; cursor: default; pointer-events: none; }
.sqd-import-file-name { min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; overflow-wrap: anywhere; }
.sqd-import-file-name > i { color: var(--sqd-accent); }
.sqd-import-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--sqd-line-soft); border-radius: 12px;
                      background: #fff; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.sqd-import-summary > i { color: var(--sqd-accent); }
.sqd-import .sqd-banner > span { min-width: 0; overflow-wrap: anywhere; }
.sqd-import-choices { display: flex; flex-direction: column; gap: 8px; }
.sqd-import-choice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border: 1px solid var(--sqd-line); border-radius: 12px;
                     background: #fff; font-size: 13px; cursor: pointer; }
.sqd-import-choice:hover { background: var(--sqd-accent-tint); }
.sqd-import-choice.sqd-selected { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqd-import-choice input[type=radio] { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--sqd-accent); }
.sqd-import-choice-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sqd-import code { padding: 1px 5px; border-radius: 5px; background: var(--sqd-accent-tint); color: var(--sqd-accent-text); font: 400 11.5px var(--sqd-mono); }

/* ---------- Dar ekran ---------- */
@media (max-width: 960px) {
    .sqe-body { display: flex; flex-direction: column; }
    .sqe-right { display: contents; }
    .sqe-preview-panel { order: -1; position: static; box-shadow: none; }
    .sqe-sticky-tag { display: none; }
    .sqe-settings { order: 1; }
}

@media (max-width: 767px) {
    /* minmax(0, 1fr): geniş tablo kartı sütunu kendi içerik genişliğine zorlayıp ekrandan taşırmasın */
    .sqd-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .sqd-cell { grid-column: 1 !important; grid-row: auto !important; height: var(--sqd-h); min-width: 0; }
    .sqd-filter-row input[type=date] { min-width: 0; width: 8.5em; }
    .sqe-dialog { width: 100vw; height: 100vh; border-radius: 0; }
    .sqe-body { padding: 14px; }
    .sqe-row { flex-wrap: wrap; }
    .sqe-row > .sqe-type-field { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .sqe-section-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Rapor zamanlamaları: sekme listesi ---------- */
.sqr-intro { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; }
.sqr-intro > i { color: var(--sqd-accent); }
.sqr-empty { border: 1px dashed var(--sqd-line); border-radius: 14px; background: #fff; }
.sqr-empty > i { font-size: 18px; }
.sqr-table-wrap { padding: 6px 8px; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
.sqr-table td { vertical-align: middle; }
.sqr-table tbody tr:last-child td { border-bottom: 0; }
.sqr-table tbody tr:hover td { background: rgba(166, 134, 87, .05); }
.sqr-name { font-weight: 600; }
.sqr-recipients { max-width: 280px; overflow: hidden; text-overflow: ellipsis; color: var(--sqd-muted); }
.sqr-actions-col { width: 1%; text-align: right; }
.sqr-row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.sqr-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.sqr-on { background: rgba(46, 125, 79, .10); color: var(--sqd-success); }
.sqr-off { background: var(--sqd-line-soft); color: var(--sqd-muted); }
.sqr-last { display: inline-flex; align-items: center; gap: 8px; }
.sqr-status { font-size: 11.5px; font-weight: 600; color: var(--sqd-muted); }
.sqr-status-ok { color: var(--sqd-success); }
.sqr-status-error { color: var(--sqd-danger); }

/* ---------- Rapor zamanlamaları: popup (kart editörünün iskeleti) ---------- */
.sqe-dialog.sqr-dialog { width: min(1080px, 96vw); height: auto; max-height: 92vh; }
.sqe-body.sqr-body-single { display: flex; flex-direction: column; }
.sqr-errors { grid-column: 1 / -1; align-items: flex-start; }
.sqr-errors > i { margin-top: 3px; }
.sqr-errors ul { margin: 0; padding-left: 16px; }
.sqr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; }
.sqr-full { grid-column: 1 / -1; }
.sqr-fields .sqd-filter input:not([type=checkbox], [type=color]),
.sqr-fields .sqd-filter select,
.sqr-filter .sqd-filter input:not([type=checkbox], [type=color]),
.sqr-filter .sqd-filter select { width: 100%; min-width: 0; }
.sqr-fields .sqd-filter textarea { width: 100%; min-height: 58px; padding: 8px 12px; border: 1px solid var(--sqd-line); border-radius: 12px; background: #fff;
    color: var(--sqd-navy); font: inherit; font-size: 13px; resize: vertical; outline: none; }
.sqr-fields .sqd-filter textarea:focus { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqr-time { display: flex; align-items: center; gap: 4px; }
.sqr-time > span { color: var(--sqd-muted); }
.sqr-fields .sqr-time select { width: auto; flex: 1 1 0; min-width: 0; }
.sqr-fields .sqd-filter input.sqr-mono { font-family: var(--sqd-mono); font-size: 12.5px; }
.sqr-fields code { padding: 1px 5px; border-radius: 5px; background: var(--sqd-accent-tint); color: var(--sqd-accent-text); font: 400 11.5px var(--sqd-mono); }
.sqr-describe { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--sqd-accent-tint);
    color: var(--sqd-accent-text); font-size: 12.5px; font-weight: 600; }
.sqr-invalid { font-size: 12px; overflow-wrap: anywhere; }
.sqr-filters { display: flex; flex-direction: column; gap: 12px; }
.sqr-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; padding-bottom: 12px;
    border-bottom: 1px solid var(--sqd-line-soft); }
.sqr-filter:last-child { padding-bottom: 0; border-bottom: 0; }
.sqr-filter .sqd-filter-row input[type=date] { flex: 1 1 0; min-width: 0; }
.sqr-footer-tools { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 767px) {
    .sqr-fields,
    .sqr-filter { grid-template-columns: minmax(0, 1fr); }
    .sqe-dialog.sqr-dialog { width: 100vw; height: 100vh; max-height: none; }
}

/* ---------- Mobil Görünüm sekmesi (pano tanımı) ---------- */
.sqv-root { gap: 14px; }
.sqv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 10px 14px;
               border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
.sqv-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* Anahtar: krem dolgulu toggle */
.sqv-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
.sqv-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sqv-switch-track { position: relative; width: 36px; height: 20px; flex: 0 0 36px; border-radius: 999px; background: rgba(27, 40, 56, .18); transition: background-color .15s; }
.sqv-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
                           box-shadow: 0 1px 2px rgba(27, 40, 56, .25); transition: transform .15s; }
.sqv-switch input:checked + .sqv-switch-track { background: var(--sqd-accent); }
.sqv-switch input:checked + .sqv-switch-track::after { transform: translateX(16px); }
.sqv-switch input:focus-visible + .sqv-switch-track { box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqv-switch:has(input:disabled) { color: var(--sqd-muted); cursor: default; }
.sqv-switch input:disabled + .sqv-switch-track { opacity: .6; }

/* Önizleme genişliği: 360 / 390 / 430 */
.sqv-segment { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--sqd-line); border-radius: 12px; background: #fff; }
.sqv-segment button { height: 24px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--sqd-muted); font: 500 12.5px var(--sqd-font); cursor: pointer; }
.sqv-segment button:hover { color: var(--sqd-navy); }
.sqv-segment button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqv-segment button.sqv-active { background: var(--sqd-accent-soft); color: var(--sqd-accent-text); font-weight: 600; }

/* Sol liste */
.sqv-body { display: flex; align-items: flex-start; gap: 20px; }
.sqv-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.sqv-item { position: relative; border: 1px solid var(--sqd-line-soft); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s, opacity .15s; }
/* Sürükle-bırak (sql-mobile-preview.js): yalnız tutamaç başlatır; bırakma yeri hedef satırın üstünde ya da altında krem çizgiyle gösterilir
   (satırlar arası 8 px boşluğun ortası). */
.sqv-list[data-can-write=true] .sqv-grip { cursor: grab; touch-action: none; }
.sqv-item.sqv-dragging { opacity: .45; }
.sqv-item.sqv-drop-before::before,
.sqv-item.sqv-drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--sqd-accent); pointer-events: none; }
.sqv-item.sqv-drop-before::before { top: -6px; }
.sqv-item.sqv-drop-after::after { bottom: -6px; }
/* Satır: tutamaç | ad ve tip | kontroller. Ad sütunu 140 px'in altına inmez; yer yetmezse kontroller alta sarar. */
.sqv-row { min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px 8px 6px; }
.sqv-grip { width: 20px; flex: 0 0 20px; display: flex; justify-content: center; color: var(--sqd-muted); font-size: 13px; }
.sqv-name { flex: 1 1 140px; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.sqv-controls { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.sqv-name b { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sqv-name span { font-size: 11.5px; color: var(--sqd-muted); }
.sqv-hidden .sqv-grip,
.sqv-hidden .sqv-name { opacity: .5; }
.sqv-select { width: 92px; height: 30px; flex: 0 0 92px; padding: 0 26px 0 10px; border: 1px solid var(--sqd-line); border-radius: 10px;
              background: #fff var(--sqd-chevron) no-repeat right 9px center / 11px; color: var(--sqd-navy); font: 400 12.5px var(--sqd-font);
              appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s; }
.sqv-select:focus { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.sqv-select:disabled { opacity: .55; cursor: default; }
.sqv-row .sqe-icon-btn.sqv-on { background: var(--sqd-accent-tint); color: var(--sqd-accent-text); }
.sqv-move { display: flex; flex-direction: column; }
.sqv-move .sqe-icon-btn { width: 22px; height: 16px; min-width: 22px; border-radius: 6px; }
.sqv-move .sqe-icon-btn i { font-size: 9px; }
.sqv-settings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 0 10px 10px 32px; padding: 10px 12px; border-radius: 10px; background: var(--sqd-page); }
.sqv-settings .sqd-filter select { min-width: 130px; }

/* Dar liste (ör. 1100–1300 px sayfada yan menü açık ve önizleme sağda): iki satır. Üstte tutamaç, ad ve tip; altta
   kontroller adın hizasından (tutamaç 20 + boşluk 8 px) başlar. Eşik, tek satırın ad için 140 px bıraktığı en dar
   genişliğin (≈ 488 px: çerçeve 2 + dolgu 16 + tutamaç 20 + 2 × 8 boşluk + 140 ad + 294 kontrol) biraz üstündedir;
   böylece kendiliğinden sarma ile bu kural arasında hizasız bir ara durum kalmaz. */
@container (max-width: 500px) {
    .sqv-controls { flex-basis: 100%; margin-left: 0; padding-left: 28px; }
}

/* Telefon çerçevesi: lacivert 8 px çerçeve, 38 px köşe; yükseklik gerçek telefon oranında (9:19), ekrana sığacak kadar
   sınırlı; ekran kendi içinde kayar.
   Genişlik Razor'da önizleme genişliği + 2 × 8 px olarak verilir (kenarlık dahil). */
.sqv-preview { position: sticky; top: 8px; flex: 0 0 auto; }
.sqv-phone { aspect-ratio: 9 / 19; max-height: calc(100vh - 24px); overflow: hidden; border: 8px solid var(--sqd-navy); border-radius: 38px; background: var(--sqd-navy); box-shadow: 0 12px 32px rgba(27, 40, 56, .18); }
.sqv-screen { height: 100%; overflow-x: hidden; overflow-y: auto; border-radius: 30px; background: var(--sqd-page); scrollbar-width: none; }
.sqv-screen::-webkit-scrollbar { display: none; }
.sqv-phone-bar { position: sticky; top: 0; z-index: 2; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--sqd-navy); color: #fff; }
.sqv-phone-bar i { font-size: 13px; color: rgba(255, 255, 255, .8); }
.sqv-phone-title { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sqv-phone-bar .sqv-phone-refresh { margin-left: auto; }
.sqv-phone-filters { padding: 10px 12px 2px; }
.sqv-chip { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--sqd-line); border-radius: 999px; background: #fff;
            font-size: 12.5px; font-weight: 500; }
.sqv-chip i { font-size: 11px; color: var(--sqd-accent); }

/* Önizleme ile WebView eşitliği. WebView sayfası tarayıcı varsayılanlarıyla çalışır (content-box, line-height normal,
   16 px); panel ise genel border-box (Bootstrap ve .sqd-root) ve 1.5 satır yüksekliği uygular. Fark burada geri alınır:
   ör. dönen halka WebView'daki gibi 22 px (18 + çerçeve), "Tümünü gör" 34 px, tablo satırları normal satır yüksekliğiyle
   çizilir. :where ile özgüllük tek sınıfta kalır; sql-mobile.css'teki açık kurallar her zaman kazanır. */
:where(.sqv-phone) .sqm-root { font-size: 16px; line-height: normal; }
:where(.sqv-phone) .sqm-root *,
:where(.sqv-phone) .sqm-root *::before,
:where(.sqv-phone) .sqm-root *::after { box-sizing: content-box; }
/* "Tümünü gör" önizlemede işlevsiz: sql-mobile-preview.js pasif yapar ve "Önizlemede kullanılamaz." ipucunu ekler. */
.sqv-phone .sqm-root .sqm-show-all:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 1100px) {
    .sqv-body { flex-direction: column; align-items: stretch; }
    .sqv-preview { position: static; align-self: center; }
}

/* ---------- Alarm editörleri (.alr-root: mail listesi ve bildirim şablonu editörü) ----------
   Tokenlar yukarıdaki .sqd-root kümesinden gelir (.alr-root oraya eklendi). Etiket girişi .mss-chips kurallarını kullanır. */
.alr-root { min-width: 0; font-size: 13px; }
.alr-label { margin: 10px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--sqd-muted); letter-spacing: .01em; }
.alr-label:first-child { margin-top: 0; }
.alr-hint { font-weight: 400; color: var(--sqd-muted); }
.alr-readonly { padding: 6px 2px; overflow-wrap: anywhere; }

/* Şablon editörü: sol düzenleme, sağ önizleme; dar ekranda tek sütun. */
.alr-tpl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.alr-tpl-col { display: flex; flex-direction: column; min-width: 0; }
.alr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.alr-chip { height: 26px; padding: 0 10px; border: 1px solid var(--sqd-line); border-radius: 999px; background: var(--sqd-accent-tint); color: var(--sqd-navy);
            font: 500 12px var(--sqd-mono); cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.alr-chip:hover:not(:disabled) { border-color: rgba(166, 134, 87, .45); background: var(--sqd-accent-soft); }
.alr-chip:focus-visible { outline: none; border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.alr-chip:disabled { opacity: .55; cursor: default; }
.alr-chip-required { background: var(--sqd-accent); border-color: var(--sqd-accent); color: #fff; }
.alr-chip-required:hover:not(:disabled) { background: var(--sqd-accent-hover); border-color: var(--sqd-accent-hover); }
.alr-input, .alr-textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--sqd-line); border-radius: 12px; background: #fff; color: var(--sqd-navy); font: 13px var(--sqd-font); }
.alr-textarea { font-family: var(--sqd-mono); font-size: 12.5px; line-height: 1.5; resize: vertical; }
.alr-input:focus, .alr-textarea:focus { outline: none; border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.alr-subject { min-height: 30px; margin-bottom: 8px; padding: 6px 10px; border: 1px solid var(--sqd-line-soft); border-radius: 12px; background: #fff; font-weight: 600; overflow-wrap: anywhere; }
.alr-frame { flex: 1 1 auto; width: 100%; min-height: 640px; border: 1px solid var(--sqd-line); border-radius: 14px; background: #fff; }
/* Telegram balonu: kısa gövde, sol alt köşesi sivri. */
.alr-frame-bubble { min-height: 200px; border-radius: 14px 14px 14px 4px; background: var(--sqd-head-bg); }
.alr-errors { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--sqd-danger); border-radius: 0 10px 10px 0; background: var(--sqd-danger-tint); color: var(--sqd-danger); }
.alr-error-line + .alr-error-line { margin-top: 4px; }

@media (max-width: 900px) {
    .alr-tpl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Alarm Kuralları (.alr-): kural listesi ve şema güdümlü düzenleyici ----------
   Tokenlar yukarıdaki .sqd-root kümesinden gelir (.alr-root ve .sqe-backdrop orada). Liste kökü .sqd-root.alr-root,
   düzenleyici .sqe-backdrop içindedir; düğme, alan ve altbilgi sınıfları (sqd-*, sqe-*, sqr-*) yeniden kullanılır. */
.alr-rules { gap: 14px; }
.alr-intro { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; }
.alr-intro > i { color: var(--sqd-accent); }
.alr-empty { border: 1px dashed var(--sqd-line); border-radius: 14px; background: #fff; }
.alr-empty > i { font-size: 18px; }

/* Tür başına kart: lacivert değil krem başlık, içinde kural tablosu */
.alr-kind { border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; overflow: hidden; }
.alr-kind-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sqd-head-bg); font-size: 13px; }
.alr-kind-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .7); font-size: 15px; }
.alr-count { margin-left: auto; font-size: 12px; color: var(--sqd-muted); }
.alr-kind .sqr-table-wrap { border: 0; border-radius: 0; }
.alr-table td { white-space: normal; }
.alr-summary-cell { max-width: 420px; color: var(--sqd-muted); overflow-wrap: anywhere; }
.alr-lock { margin-right: 6px; font-size: 11px; color: var(--sqd-accent); }
.alr-tag { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(27, 40, 56, .07); color: var(--sqd-muted); font-size: 10.5px; font-weight: 600; }
.alr-sev { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.alr-sev-info { background: rgba(79, 124, 172, .12); color: #4f7cac; }
.alr-sev-warning { background: var(--sqd-accent-tint); color: var(--sqd-accent-text); }
.alr-sev-critical { background: rgba(192, 57, 43, .12); color: var(--sqd-danger); }

.alr-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--sqd-accent-tint); color: var(--sqd-accent-text); font-size: 10.5px; font-weight: 600; }
.alr-pill-one { background: rgba(27, 40, 56, .07); color: var(--sqd-muted); }
.alr-pill-warn { background: var(--sqd-danger-tint); color: var(--sqd-danger); }
.alr-pill-mode { background: rgba(27, 40, 56, .07); color: var(--sqd-muted); }
.alr-mode-shadow { background: rgba(79, 124, 172, .12); color: #4f7cac; }
.alr-mode-new { background: rgba(46, 125, 79, .10); color: var(--sqd-success); }

/* Düzenleme penceresi */
.sqe-dialog.alr-dialog { width: min(1080px, 96vw); height: auto; max-height: 94vh; }
.alr-icon { font-size: 18px; }
.alr-steps { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--sqd-line-soft); background: #fff; }
.alr-step { padding: 5px 12px; border: 1px solid var(--sqd-line); border-radius: 999px; font-size: 12px; color: var(--sqd-muted); }
.alr-step.on { border-color: var(--sqd-accent); background: var(--sqd-accent-tint); color: var(--sqd-navy); font-weight: 600; }
.alr-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; }
.alr-errors { align-items: flex-start; }
.alr-errors > i { margin-top: 3px; }
.alr-errors ul { margin: 0; padding-left: 16px; }

/* 1 · Tür seçimi */
.alr-group h3 { margin: 4px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sqd-muted); }
.alr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.alr-card { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--sqd-line); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
            transition: border-color .15s, box-shadow .15s; }
.alr-card:hover { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.alr-card:focus-visible { outline: none; border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.alr-card-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: var(--sqd-accent-tint); font-size: 18px; }
.alr-card-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.alr-card-text b { font-size: 13px; font-weight: 600; }
.alr-card-text > span:not(.alr-pill) { color: var(--sqd-muted); font-size: 12px; line-height: 1.35; }
.alr-card-text .alr-pill { margin-top: 4px; }

/* 2 · Kural ayarları */
.alr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 16px; }
.alr-main,
.alr-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.alr-section { min-width: 0; padding: 14px 16px; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
.alr-section h4 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.alr-section h4 i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--sqd-accent-tint); color: var(--sqd-accent); font-size: 12px; }
.alr-side .alr-section { position: sticky; top: 0; }
.alr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 14px; }
.alr-full { grid-column: 1 / -1; }
.alr-f { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.alr-f > label:not(.alr-switch) { font-size: 12px; font-weight: 500; }
.alr-f > input[type=text],
.alr-f > input[type=time],
.alr-f > select,
.alr-unit > input { width: 100%; min-width: 0; height: 32px; padding: 0 12px; border: 1px solid var(--sqd-line); border-radius: 12px; background-color: #fff; color: var(--sqd-navy);
                    font: 400 13px var(--sqd-font); outline: none; transition: border-color .15s, box-shadow .15s; }
.alr-f > select { padding-right: 32px; appearance: none; -webkit-appearance: none; cursor: pointer;
                  background-image: var(--sqd-chevron); background-repeat: no-repeat; background-position: right 11px center; background-size: 12px; }
.alr-f > input:focus,
.alr-f > select:focus,
.alr-unit > input:focus { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.alr-f > input:disabled,
.alr-f > select:disabled,
.alr-unit > input:disabled { background-color: var(--sqd-page); color: var(--sqd-muted); }
.alr-invalid > input,
.alr-invalid > select,
.alr-invalid .alr-unit > input,
.alr-invalid .alr-chipbox,
.alr-invalid .mss-chips { border-color: var(--sqd-danger); }
.alr-error-text { font-size: 11.5px; color: var(--sqd-danger); }
.alr-hint { font-size: 11.5px; font-weight: 400; color: var(--sqd-muted); }
.alr-mono { font-family: var(--sqd-mono) !important; font-size: 12.5px !important; }
.alr-readonly { padding: 6px 2px; overflow-wrap: anywhere; }
.alr-unit { display: flex; align-items: center; gap: 6px; }
.alr-unit > em { min-width: 28px; font-style: normal; color: var(--sqd-muted); }
.alr-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--sqd-accent-tint); color: var(--sqd-accent-text);
            font-size: 12px; line-height: 1.45; }
.alr-note > i { margin-top: 2px; color: var(--sqd-accent); }

.alr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.alr-seg button { padding: 5px 11px; border: 1px solid var(--sqd-line); border-radius: 999px; background: #fff; color: var(--sqd-navy); font: 400 12px var(--sqd-font); cursor: pointer;
                  transition: background-color .15s, border-color .15s, color .15s; }
.alr-seg button:hover:not(:disabled):not(.on) { border-color: rgba(166, 134, 87, .55); background: var(--sqd-accent-tint); }
.alr-seg button.on { border-color: var(--sqd-accent); background: var(--sqd-accent); color: #fff; }
.alr-seg button:disabled { opacity: .6; cursor: default; }
.alr-days { display: flex; flex-wrap: wrap; gap: 5px; }
.alr-days button { width: 38px; height: 30px; border: 1px solid var(--sqd-line); border-radius: 10px; background: #fff; color: var(--sqd-navy); font: 400 12px var(--sqd-font); cursor: pointer; }
.alr-days button.on { border-color: var(--sqd-navy); background: var(--sqd-navy); color: #fff; }
.alr-days button:disabled { opacity: .6; cursor: default; }

/* Anahtar: krem dolgulu toggle (sqv-switch ile aynı görünüm) */
.alr-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
.alr-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.alr-switch-track { position: relative; width: 36px; height: 20px; flex: 0 0 36px; border-radius: 999px; background: rgba(27, 40, 56, .18); transition: background-color .15s; }
.alr-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(27, 40, 56, .25);
                           transition: transform .15s; }
.alr-switch input:checked + .alr-switch-track { background: var(--sqd-accent); }
.alr-switch input:checked + .alr-switch-track::after { transform: translateX(16px); }
.alr-switch input:focus-visible + .alr-switch-track { box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.alr-switch:has(input:disabled) { color: var(--sqd-muted); cursor: default; }
.alr-switch input:disabled + .alr-switch-track { opacity: .6; }

/* Kapsam seçicisi */
.alr-targets { display: flex; flex-direction: column; gap: 8px; }
.alr-chipbox { min-height: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--sqd-line); border-radius: 12px; background: #fff;
               transition: border-color .15s, box-shadow .15s; }
.alr-chipbox:focus-within { border-color: var(--sqd-accent); box-shadow: 0 0 0 3px var(--sqd-accent-ring); }
.alr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--sqd-accent-tint); font-size: 12px; }
.alr-chip b { cursor: pointer; font-weight: 600; color: var(--sqd-muted); }
.alr-chip b:hover { color: var(--sqd-danger); }
.alr-chip-input { flex: 1 1 140px; min-width: 120px; height: 24px; padding: 0 6px; border: 0; outline: 0; background: transparent; color: var(--sqd-navy); font: 400 12.5px var(--sqd-font); }
.alr-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-height: 150px; overflow: auto; }
.alr-opt { padding: 3px 9px; border: 1px dashed var(--sqd-line); border-radius: 999px; color: var(--sqd-muted); font-size: 12px; cursor: pointer; }
.alr-opt:hover { border-color: var(--sqd-accent); color: var(--sqd-navy); }
.alr-opt-more { padding: 3px 4px; font-size: 11.5px; color: var(--sqd-muted); }

/* Sağ panel: özet ve mesaj önizlemesi */
.alr-summary { font-size: 13px; line-height: 1.55; }
.alr-summary .alr-k { margin-top: 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sqd-muted); }
.alr-off { color: var(--sqd-danger); }
.alr-preview { margin: 12px 0 8px; padding: 12px; border-radius: 12px; background: #16202c; color: #fff; font-size: 12px; line-height: 1.5; }
.alr-eb { font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px; color: var(--sqd-accent); }
.alr-test { margin-top: 4px; }
.alr-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 860px) {
    .alr-layout { grid-template-columns: minmax(0, 1fr); }
    .alr-grid { grid-template-columns: minmax(0, 1fr); }
    .alr-side .alr-section { position: static; }
}

@media (max-width: 767px) {
    .sqe-dialog.alr-dialog { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
    .alr-body { padding: 14px; }
}

/* ---------- Alarm Takvimi (.alr-cal) ---------- */
.alr-cal { gap: 14px; }
.alr-cal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 16px; border: 1px solid var(--sqd-line-soft);
               border-radius: 14px; background: #fff; }
.alr-cal-title h1 { margin: 0; font-size: 18px; font-weight: 600; }
.alr-cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alr-viewseg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--sqd-accent-tint); }
.alr-viewseg button { padding: 5px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--sqd-navy); font: 400 12px var(--sqd-font); cursor: pointer; }
.alr-viewseg button.on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-weight: 600; }
.alr-nav { display: flex; align-items: center; gap: 6px; }
.alr-nav-label { min-width: 120px; text-align: center; font-size: 13px; text-transform: capitalize; }

.alr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.alr-kpi { padding: 12px 14px; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
.alr-kpi-crit { border-left: 3px solid var(--sqd-danger); }
.alr-kpi-warn { border-left: 3px solid var(--sqd-accent); }
.alr-kpi-ok { border-left: 3px solid var(--sqd-success); }
.alr-kpi-l { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--sqd-muted); }
.alr-kpi-v { margin-top: 4px; font-size: 22px; font-weight: 700; }
.alr-crit { color: var(--sqd-danger); }

.alr-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 14px; }
.alr-panel { min-width: 0; overflow: hidden; border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; }
/* Gün görünümü: ayrıntı balonu panelin kenarına taşabilir; overflow:hidden balonun ilk satırlarını kesiyordu. İçerikte köşeye değen arka plan yok. */
.alr-panel.alr-panel-day { overflow: visible; }
.alr-panel > h3 { margin: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sqd-line-soft); font-size: 13px; font-weight: 600; }
.alr-panel > h3 i { color: var(--sqd-accent); }
.alr-panel > h3 .sqd-hint { font-weight: 400; }

.alr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.alr-dow { padding: 8px 10px; background: var(--sqd-head-bg); font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--sqd-muted); }
.alr-day { position: relative; min-width: 0; min-height: 96px; padding: 6px 8px; border-top: 1px solid var(--sqd-line); border-right: 1px solid var(--sqd-line); cursor: pointer; transition: box-shadow .12s; }
.alr-day:nth-child(7n) { border-right: 0; }
.alr-day:hover { box-shadow: inset 0 0 0 2px var(--sqd-accent); }
.alr-day.sel { box-shadow: inset 0 0 0 2px var(--sqd-navy); }
.alr-day.out { background: #faf9f6; color: rgba(27, 40, 56, .3); cursor: default; }
.alr-day.out:hover { box-shadow: none; }
.alr-day-n { position: relative; font-size: 12px; font-weight: 600; }
.alr-day.today .alr-day-n { padding: 1px 7px; border-radius: 999px; background: var(--sqd-navy); color: #fff; }
.alr-heat { position: absolute; inset: 0; pointer-events: none; }
.alr-tags { position: relative; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.alr-tag-row { display: flex; justify-content: space-between; gap: 6px; padding: 2px 6px; overflow: hidden; border-radius: 6px; font-size: 10.5px; white-space: nowrap; }
.alr-tag-row span { overflow: hidden; text-overflow: ellipsis; }
.alr-s-crit { background: rgba(192, 57, 43, .12); color: var(--sqd-danger); }
.alr-s-warn { background: var(--sqd-accent-tint); color: var(--sqd-accent-text); }
.alr-s-info { background: rgba(79, 124, 172, .12); color: #4f7cac; }
.alr-more { font-size: 10.5px; color: var(--sqd-muted); }
.alr-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--sqd-line-soft); font-size: 11.5px; color: var(--sqd-muted); }
.alr-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.alr-lg-heat { background: rgba(166, 134, 87, .28); }
.alr-lg-crit-heat { background: rgba(192, 57, 43, .28); }
.alr-bg-crit { background: var(--sqd-danger); }
.alr-bg-warn { background: var(--sqd-accent); }
.alr-bg-info { background: #4f7cac; }

/* Gün görünümü: hedef başına zaman şeridi */
.alr-tl { padding: 10px 14px 14px; }
.alr-tl-hours { display: grid; grid-template-columns: 130px minmax(0, 1fr); font-size: 10.5px; color: var(--sqd-muted); }
.alr-tl-scale { display: flex; justify-content: space-between; padding: 0 2px; }
.alr-lane { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; min-height: 40px; border-top: 1px dashed var(--sqd-line); }
.alr-who { padding: 4px 6px 4px 0; overflow: hidden; font-size: 12px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.alr-who small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 1.3; color: var(--sqd-muted); }
/* Şerit satırın tüm yüksekliğine uzanır; çubuk ve nokta satırın ortasına konumlanır (sabit px yok). */
.alr-track { position: relative; align-self: stretch; }
.alr-bar { position: absolute; top: calc(50% - 8px); height: 16px; min-width: 4px; border-radius: 6px; cursor: pointer; }
.alr-bar.open { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px); }
.alr-dot { position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--sqd-line); cursor: pointer; transform: translateX(-6px); }
.alr-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sqd-navy); opacity: .5; pointer-events: none; }
/* Ayrıntı balonu: yalnız CSS (üzerine gelince), sunucuya gidiş yok */
.alr-tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 10; min-width: 190px; max-width: 280px; padding: 8px 10px; display: none; flex-direction: column; gap: 2px;
           border-radius: 10px; background: var(--sqd-navy); color: #fff; font-size: 12px; line-height: 1.45; font-weight: 400; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
           pointer-events: none; white-space: normal; }
.alr-bar:hover .alr-tip,
.alr-dot:hover .alr-tip { display: flex; }
.alr-dot .alr-tip { left: -6px; }
/* Üst yarıdaki şeritler: balon işaretin ALTINA açılır (üstte kartın başlığına/kenarına taşırdı). Alt yarıdakiler yukarı açılır. */
.alr-lane-down .alr-tip { bottom: auto; top: calc(100% + 6px); }
/* Günün ikinci yarısı: balon işaretin sağ ucuna hizalanır. Şerit (.alr-track) kasıtlı olarak overflow:hidden DEĞİLDİR: balon
   şeridin üstüne taşar ve kesilirdi. Nokta gece yarısı uçlarında etiket sütununa taşmasın diye konumu razor'da clamp ile
   şeridin içine kenetlenir (sol ≥ 6px, sağ ≤ 100% − 6px; nokta translateX(-6px) ile ortalanır). */
.alr-tip.alr-tip-end { left: auto; right: 0; }
.alr-dot .alr-tip.alr-tip-end { left: auto; right: -6px; }
.alr-tip-eb { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; color: var(--sqd-accent); }

/* Sağ panel: seçili günün olayları */
.alr-evlist { max-height: 640px; overflow: auto; }
.alr-ev { display: flex; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--sqd-line-soft); cursor: pointer; }
.alr-evlist .alr-ev:first-child { border-top: 0; }
.alr-ev:hover { background: var(--sqd-accent-tint); }
.alr-ev-bar { width: 8px; flex: 0 0 8px; border-radius: 4px; }
.alr-ev b { display: block; font-size: 12.5px; }
.alr-ev > div:last-child { min-width: 0; }
.alr-ev span:not(.alr-badge) { display: block; margin-top: 2px; font-size: 11.5px; color: var(--sqd-muted); }
.alr-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; vertical-align: 1px; }
.alr-badge.open { background: rgba(192, 57, 43, .12); color: var(--sqd-danger); }
.alr-badge.closed { background: rgba(46, 125, 79, .12); color: var(--sqd-success); }
.alr-badge.one { background: rgba(27, 40, 56, .08); color: var(--sqd-muted); }
.alr-badge.shadow { background: rgba(79, 124, 172, .12); color: #4f7cac; }

/* ---------- Alarm Geçişi (.alr-mig) ---------- */
.alr-mig { gap: 14px; }
.alr-mode-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.alr-mode-help > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sqd-line-soft); border-radius: 12px; background: #fff; font-size: 12px; color: var(--sqd-muted); }
.alr-mig-rows { display: flex; flex-direction: column; }
.alr-mig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-top: 1px solid var(--sqd-line-soft); }
.alr-mig-row:first-child { border-top: 0; }
.alr-mig-name { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alr-mig-name b { font-size: 13px; font-weight: 600; }
.alr-mig-name span { font-size: 12px; color: var(--sqd-muted); }
.alr-mig-name .alr-mig-warn { display: flex; align-items: center; gap: 6px; color: var(--sqd-danger); }
.alr-mig-seg { flex: 0 0 auto; }
.alr-selftest { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.alr-selftest-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.alr-selftest-msg { flex: 1 1 320px; }
.alr-selftest-msg input { width: 100%; }
.sqe-dialog.alr-summary-dialog { width: min(760px, 96vw); }
.alr-unit .alr-off-hint { color: var(--sqd-danger); font-style: normal; font-weight: 600; }
.alr-kind-head-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; }
.alr-kind-head-actions .sqd-button { padding: 4px 10px; font-size: 12px; }
.alr-mig-conv { display: flex; flex-wrap: wrap; gap: 6px; }
.alr-mig-name .alr-pill { font-size: 10.5px; }
.alr-mig-name .alr-pill-warn { color: var(--sqd-danger); }
/* Dönüştürme özeti: tür başına blok, sonuç hapları (güncellendi / pasifleştirildi), uyarı ve bilgi notları */
.alr-sum-kind { display: flex; flex-direction: column; gap: 8px; }
.alr-sum-kind + .alr-sum-kind { border-top: 1px solid var(--sqd-line-soft); padding-top: 12px; }
.alr-sum-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.alr-sum-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--sqd-muted); overflow-wrap: anywhere; }
.alr-sum-note > i { margin-top: 2px; }
.alr-sum-warn { color: var(--sqd-danger); }
.sqr-upd { background: rgba(79, 124, 172, .12); color: #4f7cac; }
.sqr-deact { background: var(--sqd-danger-tint); color: var(--sqd-danger); }

@media (max-width: 1100px) {
    .alr-cal-wrap { grid-template-columns: minmax(0, 1fr); }
    .alr-mode-help { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
    .alr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Onay penceresi (AlertConfirmDialog): yerel window.confirm yerine; .sqe-backdrop/.sqe-dialog kalıbı ---------- */
.sqe-dialog.alr-confirm-dialog { width: min(520px, 96vw); height: auto; max-height: 90vh; }
.alr-confirm-text { font-size: 13.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.sqd-button.alr-btn-danger { border-color: var(--sqd-danger); background: var(--sqd-danger); color: #fff; }
.sqd-button.alr-btn-danger:hover:not(:disabled) { border-color: #a93226; background: #a93226; }

@media (max-width: 767px) {
    .sqe-dialog.alr-confirm-dialog { width: 100vw; height: auto; max-height: 100vh; border-radius: 0; }
}

/* ---------- Eski ekranlarda "Alarm Kuralları'ndan yönetiliyor" bandı (.amb-) ----------
   Tokenlar .sqd-root kümesinden gelir (.amb-root orada). Banner iskeleti .sqd-banner'dır; burada yalnız düzey rengi ve bağlantı düğmesi var. */
.amb-banner > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.amb-shadow { border-left-color: var(--sqd-line); background: rgba(27, 40, 56, .05); }
.amb-shadow > i { color: var(--sqd-muted); }
.amb-link { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--sqd-accent-text); font: 600 12.5px var(--sqd-font); cursor: pointer; white-space: nowrap; }
.amb-link:hover { text-decoration: underline; }
.amb-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sqd-accent-ring); border-radius: 4px; }
/* Bant yokken (Eski mod) bileşen hiçbir şey çizmez; boş layout öğesi de yer kaplamasın. */
.amb-layout-item:not(:has(.amb-root)) { display: none; }

/* Sayı kartı: yazı boyutu kart gövdesine göre (container query); sql-chart-core numberFontSize ve C# NumberFontPx ile aynı kural. */
.sqd-number { container-type: size; min-height: 0; overflow: hidden; }
.sqd-number > span { font-size: var(--sqd-number-size, clamp(16px, min(50cqh, 90cqw / (var(--sqd-number-len) * 0.6), 160px), 160px));
                     line-height: 1.1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
                     padding: .06em 0; }   /* taşan metin "…" ile kesilir; dikey pay, overflow'un ş ğ gibi harflerin altını kırpmaması için */
.sqd-number.sqd-number-left { justify-content: flex-start; }

/* Editör: Görünüm kaydırıcıları */
.sqe-range { height: 32px; display: flex; align-items: center; gap: 10px; }
.sqe-section-body .sqd-filter input[type=range] { flex: 1; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent;
                                                   box-shadow: none; accent-color: var(--sqd-accent); cursor: pointer; }
.sqe-range output { min-width: 46px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--sqd-navy); }
.sqe-reset { grid-column: 1 / -1; justify-self: start; padding: 0; border: 0; background: none; color: var(--sqd-accent); font: 500 12px var(--sqd-font); cursor: pointer; }
.sqe-reset:hover { text-decoration: underline; }

/* ---------- Alarm Kuralları listesi (.alr-rl-): kategori sekmeleri + hizalı kompakt satırlar ----------
   Tek kurallı tür tek satırdır; çok kurallı tür başlık satırına tıklanınca kuralları girintili açılır. Sütunlar tüm
   bölümlerde aynı ızgara şablonunu paylaşır, böylece hizalı kalır. */
.alr-rl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.alr-rl-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--sqd-line); border-radius: 999px;
              background: #fff; color: var(--sqd-navy); font: 500 12.5px var(--sqd-font); cursor: pointer; }
.alr-rl-tab > i { color: var(--sqd-accent); font-size: 11px; }
.alr-rl-tab > span { color: var(--sqd-muted); font-weight: 400; }
.alr-rl-tab:hover { background: var(--sqd-accent-tint); }
.alr-rl-tab.on { border-color: var(--sqd-accent); background: var(--sqd-accent); color: #fff; }
.alr-rl-tab.on > i, .alr-rl-tab.on > span { color: rgba(255, 255, 255, .85); }
.alr-rl-section { display: flex; flex-direction: column; gap: 6px; }
.alr-rl-section-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 2px; color: var(--sqd-navy); font: 600 13.5px var(--sqd-font); }
.alr-rl-section-head > i { color: var(--sqd-accent); font-size: 12px; }
.alr-rl-section-head > span { color: var(--sqd-muted); font-size: 12px; font-weight: 400; }
.alr-rl-list { border: 1px solid var(--sqd-line-soft); border-radius: 14px; background: #fff; overflow: hidden; }
.alr-rl-list { container-type: inline-size; }
.alr-rl-row { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 2fr) 84px 120px 86px 64px; align-items: center; gap: 10px;
              min-height: 42px; padding: 6px 14px; border-top: 1px solid var(--sqd-line-soft); font-size: 13px; color: var(--sqd-navy); }
.alr-rl-row:first-child { border-top: 0; }
.alr-rl-row:not(.alr-rl-colhead):hover { background: rgba(166, 134, 87, .05); }
.alr-rl-colhead { min-height: 0; padding-top: 7px; padding-bottom: 7px; background: var(--sqd-head-bg); color: var(--sqd-muted); font-size: 11.5px; font-weight: 600; }
.alr-rl-kindrow { cursor: pointer; }
.alr-rl-sub { padding-left: 52px; background: #fdfbf7; }
.alr-rl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.alr-rl-name > * { flex: none; white-space: nowrap; }
.alr-rl-name > .alr-rl-ellipsis { flex: 0 1 auto; }
.alr-rl-name .alr-lock { margin-right: 0; }
.alr-rl-name .alr-tag { margin-left: 0; flex: none; }
.alr-rl-name .alr-pill { flex: none; }
.alr-rl-icon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--sqd-head-bg); font-size: 14px; }
.alr-rl-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alr-rl-muted { color: var(--sqd-muted); font-size: 12px; }
.alr-rl-chevron { flex: none; color: var(--sqd-muted); font-size: 10px; }

@container (max-width: 760px) {
    .alr-rl-row { grid-template-columns: minmax(0, 1fr) 84px 86px 64px; }
    .alr-rl-row > :nth-child(2), .alr-rl-row > :nth-child(4) { display: none; }
    .alr-rl-sub { padding-left: 30px; }
}

/* Kural düzenleyicide Cron alanı + "Zamanlayıcı oluştur" (Dijital Vardiya'daki CronBuilderComponent kendi katmanında) */
.alr-cron-row { display: flex; align-items: center; gap: 8px; }
.alr-cron-row > input { flex: 1 1 auto; min-width: 0; }
.alr-cron-row > .sqd-button { flex: none; white-space: nowrap; }
.sqe-backdrop.alr-cron-backdrop { z-index: 1060; }
.sqe-dialog.alr-cron-dialog { width: min(980px, 96vw); height: auto; max-height: 94vh; }
.alr-cron-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Bileşenin kapat düğmesi XAF popup'ına tıklar; burada popup yok, kapatma alt çubuktaki İptal'dir. */
.alr-cron-dialog .cb-close { display: none; }