/* Vardiya Takvimi (NPOScheduleCalendar) */
.sc-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 210px);
    min-height: 520px;
}

.sc-scheduler {
    flex: 1 1 auto;
    min-height: 0;
}

.sc-message {
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.sc-message-error {
    background: #fdecea;
    color: #b71c1c;
}

.sc-message-warning {
    background: #fff8e1;
    color: #7a5b00;
}

.sc-tip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
}

.sc-tip-title {
    font-weight: 600;
}

.sc-tip-label {
    display: inline-block;
    min-width: 7.5em;
    color: #666;
}

.sc-tip-paused {
    margin-top: 4px;
    color: #9e9e9e;
    font-style: italic;
}

.sc-toolbar-label {
    color: #666;
}

.sc-toolbar-combo {
    width: 96px;
}

/* Sessiz keşif notu: ölçek zoom'u ve yoğunluk gruplaması için tek ortak stil. */
.sc-note {
    color: #999;
}

.sc-tip-drill {
    align-self: flex-start;
    margin-top: 6px;
    padding: 3px 10px;
    border: 1px solid #546e7a;
    border-radius: 3px;
    background: #fff;
    color: #546e7a;
    font-size: 0.85rem;
    cursor: pointer;
}

.sc-tip-drill:hover {
    background: #546e7a;
    color: #fff;
}

.sc-status {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #666;
}

/*
 * Vardiya kabuğu (ScheduleCalendarShell): şerit üstte, takvim altta. .sc-container'ın kendi kuralı
 * (yukarıda, height: calc(100vh - 210px)) değiştirilmez — o hâlâ "tek başına tüm bütçeyi alır" diye
 * tanımlı. Kabuk aynı bütçeyi kendisi alıp flex ile paylaştırır: şerit gövdesi en çok 34vh (25 satır bunu
 * aşabilir, gövdesini kendi içinde kaydırır), takvim ise kabuk İÇİNDEYKEN daha özgül
 * ".sc-shell .sc-container" seçicisiyle kalan alanı doldurur. Böylece sayfa değil, yalnız şeridin
 * satır gövdesi kendi içinde kaydırılır; zaman ekseni her zaman görünür kalır.
 */
.sc-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 210px);
    min-height: 520px;
}

.sc-shell .sc-container {
    flex: 1 1 auto;
    height: auto;
    /* I3 tur 2: 320px yerine 200px — kabuk İÇİNDEYKEN ezilen kural bu (dosyadaki genel
       .sc-container min-height: 320px kuralı DEĞİŞMEDİ). Esneyen taraf şerit değil takvim
       olmalı: canlı ölçüm, 0 1 auto ile şeridin ilk büzülen taraf olduğunu ve buna rağmen
       sayfanın yine de kaydığını gösterdi (kök sebep takvimin küçülememesiydi). */
    min-height: 200px;
}

/* Vardiya şeridi (ScheduleStripComponent) */
.sc-strip {
    /* Ad sütunu genişliği tek yerde: eksen, satırlar ve ayraç katmanı aynı değeri kullanır. */
    --sc-name: 220px;
    --sc-gap: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Kaydırma artık .sc-strip-body'de: eksen satırı kaymadan üstte kalır. Şerit kendi doğal
       yüksekliğini alır (Ruling 8/9), büzülmesi gereken taraf takvimdir. */
    flex: 0 0 auto;
}

.sc-strip-busy {
    opacity: 0.6;
    pointer-events: none;
}

.sc-strip-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}

.sc-strip-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

.sc-strip-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

/* Zaman ekseni: satırlarla birebir aynı ızgara, bu yüzden etiketler kutularla hizalı. */
.sc-strip-axis {
    display: flex;
    align-items: flex-end;
    gap: var(--sc-gap);
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 2px;
    font-size: 0.7rem;
    color: #999;
}

.sc-strip-axis-name {
    flex: 0 0 var(--sc-name);
    width: var(--sc-name);
    text-align: right;
    padding-right: 4px;
}

.sc-strip-tick {
    overflow: hidden;
    white-space: nowrap;
    padding-left: 3px;
    border-left: 1px solid #e0e0e0;
}

.sc-strip-tick-major {
    color: #666;
    border-left-color: #bdbdbd;
}

/* Satırlar burada kaydırılır; ayraç katmanı bu kutuya göre konumlanır. */
.sc-strip-body {
    position: relative;
    max-height: 34vh;
    overflow-y: auto;
}

.sc-strip-lines {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sc-name) + var(--sc-gap));
    right: 0;
    pointer-events: none;
}

.sc-strip-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #f0f0f0;
}

.sc-strip-line-major {
    background: #dcdcdc;
}

/* "Şimdi": geçmiş ile planlının sınırı; şeridin tek mutlak zaman işareti. */
.sc-strip-now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed #e53935;
}

.sc-strip-row {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--sc-gap);
    padding: 1px 0;
}

.sc-strip-row:hover {
    background: #fafafa;
}

/* Seçili satır: soldaki kalın çubuk beş şeridin hangileri olduğunu tek bakışta verir. */
.sc-strip-selected {
    background: #eef4fb;
    box-shadow: inset 3px 0 0 0 #1e88e5;
}

/* Duraklatılmış/pasif satır soluk çizilir (spec §4.3). */
.sc-strip-row-inactive {
    opacity: 0.55;
}

.sc-strip-name {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 var(--sc-name);
    width: var(--sc-name);
    text-align: left;
    background: none;
    border: none;
    padding: 0 4px 0 6px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
}

.sc-strip-name-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Görünen aralığın özeti (geçmiş / planlı): satırın ne anlattığını sayıyla söyler. */
.sc-strip-name-stat {
    flex: 0 0 auto;
    color: #9e9e9e;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.sc-strip-badge {
    padding: 1px 5px;
    border-radius: 3px;
    background: #fff8e1;
    color: #7a5b00;
    font-size: 0.75rem;
}

/*
 * Kutular bitişik: aralarında boşluk bırakıldığında satır sürekli bir band değil, her yerde aynı
 * görünen bir barkod oluyordu ve yoğunluk farkı okunmuyordu.
 */
.sc-strip-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--sc-strip-buckets), 1fr);
    gap: 0;
}

.sc-strip-cell {
    height: 18px;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    background: var(--sc-cell);
    opacity: var(--sc-alpha);
}

.sc-strip-cell:hover {
    opacity: 1;
}

/*
 * Geçmiş ve planlı aynı renk kaynağını kullanır, ayrımı doygunluk yapar (bkz. Alpha): planlı
 * silik bir zemin, geçmiş ise onun üstünde okunan dolu bir iz. Geçmiş kutu ayrıca alttan
 * çizgilenir; renk körlüğünde bile "burada gerçekten bir çalışma oldu" işareti kalır.
 */
.sc-strip-cell-past {
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.35);
}

/* Tema (2026-10): SQL Panoları dili. Yukarıdaki kurallar yerinde bırakılır, buradakiler sona eklenir ve
   özgüllük eşitliğinde sırayla kazanır. Renkler --sqd-* (sql-dashboard.css) ve --so-* (palet) değişkenlerinden. */
.sc-strip,
.sc-bar-panel {
    border: 1px solid var(--sqd-line);
    border-radius: 14px;
    background: #fff;
}

.sc-strip {
    gap: 0;
    overflow: hidden;
}

.sc-strip-head {
    padding: 8px 14px;
    border-bottom: 1px solid var(--sqd-line);
}

.sc-strip-toggle,
.sc-strip-pager {
    color: var(--sqd-muted);
}

.sc-strip-axis {
    padding-bottom: 0;
    border-bottom: 1px solid var(--sqd-line);
    background: var(--sqd-head-bg);
    color: var(--sqd-muted);
}

.sc-strip-axis-name {
    padding: 7px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.sc-strip-tick {
    border-left-color: var(--sqd-line-soft);
}

.sc-strip-tick-major {
    border-left-color: var(--sqd-line);
    color: var(--sqd-navy);
    font-weight: 600;
}

.sc-strip-line {
    background: var(--sqd-line-soft);
}

.sc-strip-line-major {
    background: var(--sqd-line);
}

.sc-strip-now {
    border-left: 2px solid var(--sqd-danger);
    opacity: .7;
}

.sc-strip-row {
    border-top: 1px solid var(--sqd-line-soft);
}

.sc-strip-row:hover {
    background: color-mix(in srgb, var(--sqd-accent) 5%, transparent);
}

.sc-strip-selected,
.sc-strip-selected:hover {
    background: color-mix(in srgb, var(--sqd-accent) 9%, transparent);
    box-shadow: inset 3px 0 0 var(--sqd-accent);
}

.sc-strip-name {
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
}

.sc-strip-name-stat {
    color: var(--sqd-muted);
}

.sc-strip-badge {
    background: color-mix(in srgb, var(--sqd-danger) 12%, transparent);
    color: var(--sqd-danger);
    font-size: 0.7rem;
    font-weight: 600;
}

.sc-strip-grid {
    gap: 2px;
    padding: 5px 4px;
}

.sc-strip-cell {
    border-radius: 4px;
}

/* Planlı hücre: açık lacivert tint + 1 px iç kenar; --sc-cell kullanmaz. */
.sc-strip-cell-planned {
    background: color-mix(in srgb, var(--so-0) 9%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--so-0) 28%, #fff);
}

/* Duraklatılmış/pasif satırın planlısı: gri tarama + iç kenar. */
.sc-strip-cell-paused {
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--so-paused) 25%, transparent) 0 3px, transparent 3px 6px);
    box-shadow: inset 0 0 0 1px var(--so-paused);
}

.sc-message {
    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;
}

.sc-message-error {
    border-left-color: var(--sqd-danger);
    background: var(--sqd-danger-tint);
    color: var(--sqd-danger);
}

.sc-message-warning {
    background: var(--sqd-accent-tint);
    color: var(--sqd-navy);
}

.sc-toolbar-label,
.sc-note {
    color: var(--sqd-muted);
}

.sc-status {
    margin-top: 0;
    color: var(--sqd-muted);
}

.sc-legend {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--sqd-line);
    color: var(--sqd-muted);
    font-size: 0.72rem;
}

.sc-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: -1px;
}

.sc-lg-o0 {
    border: 1px dashed var(--so-0);
    background: color-mix(in srgb, var(--so-0) 8%, #fff);
}

.sc-lg-o1 { background: var(--so-1); }
.sc-lg-o2 { background: var(--so-2); }
.sc-lg-o3 { background: var(--so-3); }
.sc-lg-o5 { background: var(--so-5); }
.sc-lg-o6 { background: var(--so-6); }

.sc-lg-o4 {
    border: 1.5px solid var(--so-4);
    background: #fff;
}

.sc-lg-paused {
    border: 1px solid var(--so-paused);
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--so-paused) 40%, transparent) 0 2px, transparent 2px 4px);
}

/* DxScheduler etiket sınıfları. BackgroundCssClass yalnız yaprak zemin öğesine (.dxbl-apt-bg) uygulanır; etiketin
   satır içi Color'ını ezmek için zemin kuralları !important taşır (tarayıcıda ölçüldü, gerekli). Yazı ise kardeş
   öğede (.dxbl-apt-content) durur: rengi TextCssClass ile verilir, zemin sınıfına bağlı alt seçici işe yaramaz. */
.sc-apt-planned {
    border: 1px dashed color-mix(in srgb, var(--so-0) 40%, #fff) !important;
    border-left: 3px solid color-mix(in srgb, var(--so-0) 60%, #fff) !important;
    background: color-mix(in srgb, var(--so-0) 8%, #fff) !important;
}

.sc-apt-missed {
    border: 1.5px solid var(--so-4) !important;
    border-left: 3px solid var(--so-4) !important;
    background: #fff !important;
}

.sc-apt-paused {
    border: 1px dashed var(--so-paused) !important;
    border-left: 3px solid var(--so-paused) !important;
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--so-paused) 20%, transparent) 0 4px, #fff 4px 8px) !important;
}

/* "Geçmiş yok": Kuyrukta mavisinin %12 tint'i + kesik mavi kenar + lacivert yazı (yeni renk değil, türev). */
.sc-apt-nohistory {
    border: 1px dashed var(--so-5) !important;
    background: color-mix(in srgb, var(--so-5) 12%, #fff) !important;
}

/* Yazı renkleri (TextCssClass): koyu zeminde beyaz, açık zeminde lacivert, Kaçırıldı turuncu, Duraklatılmış soluk. */
.sc-apt-light,
.sc-apt-light * {
    color: #fff !important;
}

.sc-apt-dark,
.sc-apt-dark * {
    color: var(--sqd-navy) !important;
}

.sc-apt-missed-text,
.sc-apt-missed-text * {
    color: var(--so-4) !important;
}

.sc-apt-muted,
.sc-apt-muted * {
    color: var(--sqd-muted) !important;
}

.sc-lg-nohistory {
    border: 1px dashed var(--so-5);
    background: color-mix(in srgb, var(--so-5) 12%, #fff);
}

/* Takvim kabuğu (2026-10, kompakt düzen): üstte tek çubuk (Vardiya seç + çipler + ölçek) ve lejant, ortada
   DxScheduler (dokunulmaz), altta durum satırı. Şerit "Vardiya seç" ile açılan kutunun içindedir. */
.sc-container {
    gap: 8px;
}

.sc-bar-panel {
    flex: none;
}

.sc-bar {
    /* Kutu (sc-pick-pop) düğmeye değil çubuğa yaslanır: çubuk genişliğinde açılır, dar ekranda taşmaz. */
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
}

.sc-spacer {
    flex: 1 1 auto;
}

.sc-btn {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--sqd-line);
    border-radius: 10px;
    background: #fff;
    color: var(--sqd-navy);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.sc-btn:hover {
    background: var(--sqd-accent-tint);
}

.sc-btn:focus-visible,
.sc-pick-button:focus-visible,
.sc-chip-remove:focus-visible,
.sc-strip-search:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--sqd-accent-ring);
}

.sc-btn-sm {
    height: 24px;
    padding: 0 8px;
    border-radius: 9px;
}

.sc-pick-button {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--sqd-accent);
    border-radius: 12px;
    background: var(--sqd-accent);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.sc-pick-button:hover {
    background: var(--sqd-accent-hover);
}

/* Kutunun dışına tıklamayı yakalayan şeffaf örtü; kutu bunun üstünde durur. */
.sc-pick-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.sc-pick-pop {
    position: absolute;
    top: calc(100% + 2px);
    left: 8px;
    right: 8px;
    z-index: 1001;
    box-shadow: 0 14px 40px rgba(27, 40, 56, .18);
}

.sc-pick-pop[hidden] {
    display: none;
}

.sc-pick-pop:focus {
    outline: 0;
}

.sc-pick-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--sqd-line);
    color: var(--sqd-muted);
    font-size: 12px;
}

.sc-count {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--sqd-accent-tint);
    color: var(--sqd-accent-text);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.sc-count-full {
    background: var(--sqd-danger-tint);
    color: var(--sqd-danger);
}

.sc-strip-search {
    width: 200px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--sqd-line);
    border-radius: 10px;
    background: #fff;
    color: var(--sqd-navy);
    font: inherit;
    font-size: 12px;
}

/* Takvimdeki sütun numarası: seçili satırda ve çipte lacivert daire. */
.sc-lane {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--sqd-line);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.sc-lane-on {
    border-color: var(--sqd-navy);
    background: var(--sqd-navy);
}

.sc-strip-name {
    gap: 8px;
}

.sc-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sc-chips-empty {
    color: var(--sqd-muted);
    font-size: 12px;
}

.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 3px 4px 3px 4px;
    border: 1px solid var(--sqd-line);
    border-radius: 999px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 600;
}

.sc-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-chip-remove {
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sqd-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.sc-chip-remove:hover {
    color: var(--sqd-danger);
}

.sc-foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 0 4px;
    font-size: 0.72rem;
}