/* ═══════════════════════════════════════════════════════════════
   Rota — Lojistik Operasyon Sistemi
   Primary: #14375F (Sefer Laciverti) · Accent: #F59E0B (Sinyal Amberi)
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}

/* ── Responsive spacing ───────────────────────────────────────── */
/* Mobilde MudContainer'ın varsayılan yan boşluğu (24px) ekranı gereksiz sıkıştırıyor. */
@media (max-width: 599.98px) {
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* İki kurtarma kodu sütunu yalnızca yeterli genişlik olduğunda; mobilde tek sütuna düşer. */
.grid-2-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 480px) {
    .grid-2-columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Custom Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 110, 86, 0.18);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 110, 86, 0.38);
}

/* ── Typography ───────────────────────────────────────────────── */
.mud-chip {
    font-size: var(--mud-typography-default-size);
}

.mud-chip.mud-chip-size-small {
    font-size: var(--mud-typography-body1-size);
}

.mud-typography-subtitle2 {
    font-size: var(--mud-typography-subtitle2-size);
    color: var(--mud-palette-text-secondary);
}

.mud-typography-body1 {
    font-size: var(--mud-typography-body1-size);
}

.mud-typography-body2 {
    font-size: var(--mud-typography-body2-size);
}

/* ── Input & Form ─────────────────────────────────────────────── */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-subtitle1-size);
}

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-input > textarea.mud-input-root {
    font-size: var(--mud-typography-default-size) !important;
}

/* ── Table ────────────────────────────────────────────────────── */
.mud-simple-table table * tr > td,
.mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
}

/* ── Panels ───────────────────────────────────────────────────── */
.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.mud-tabs {
    background-color: var(--mud-palette-surface);
}

/* ── Button sizing ────────────────────────────────────────────── */
.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

/* ── Read-only grid ───────────────────────────────────────────── */
.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom: 2px;
}

/* ── Navigation ───────────────────────────────────────────────── */
.mud-nav-link {
    white-space: normal !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-radius: 6px;
    margin: 1px 4px;
}

.mud-nav-link.active {
    background: rgba(15, 110, 86, 0.10) !important;
    color: #14375F !important;
    font-weight: 500;
}

.mud-nav-link:not(.active):hover {
    background: rgba(15, 110, 86, 0.06) !important;
}

/* ── AppBar ───────────────────────────────────────────────────── */
.mud-appbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15, 110, 86, 0.08) !important;
}

/* ── Cards ────────────────────────────────────────────────────── */
.mud-card {
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-card:hover {
    box-shadow: 0 8px 24px -4px rgba(15, 110, 86, 0.14),
                0 2px 8px -2px rgba(6, 18, 16, 0.10) !important;
}

/* ── User Button ──────────────────────────────────────────────── */
.user-button {
    text-transform: none;
    background: rgba(15, 110, 86, 0.08);
    transition: background 0.15s ease;
}

.user-button:hover {
    background: rgba(15, 110, 86, 0.14);
}

/* ── Side Menu ────────────────────────────────────────────────── */
.mud-list-item-icon {
    min-width: none !important;
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

/* ── App-bar Special Menu ─────────────────────────────────────── */
.appbar-special-menu .mud-list-item {
    border-radius: 8px;
    margin: 2px 0;
    transition: background-color 0.12s ease;
}

.appbar-special-menu .mud-list-subheader {
    font-weight: 700;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7BA898;
}

.appbar-special-menu .mud-typography-body1 {
    font-weight: 500;
}

.appbar-special-menu .mud-typography-body2 {
    font-weight: 400;
    color: #7BA898;
}

.appbar-special-menu .mud-list-item-disabled .mud-typography-body2 {
    font-weight: 400;
    color: rgba(123, 168, 152, 0.5);
}

/* ── Layout Menu Shadow ───────────────────────────────────────── */
.layout-menu-shadow {
    box-shadow: 0 24px 48px -8px rgba(15, 110, 86, 0.16),
                0 8px 16px -4px rgba(6, 18, 16, 0.10) !important;
}

/* ── Data Grid ────────────────────────────────────────────────── */
.mud-table.mud-data-grid.mud-xs-table.mud-table-dense.mud-table-hover.mud-elevation-1 .mud-toolbar {
    height: auto !important;
    padding: 1rem;
}

.mud-table.mud-data-grid.mud-xs-table.mud-table-dense.mud-table-hover.mud-elevation-1 .mud-toolbar-gutters {
    height: auto !important;
    padding: 1rem;
}

.mud-table.mud-data-grid.mud-xs-table.mud-table-dense.mud-table-hover.mud-elevation-1 .mud-table-toolbar {
    height: auto !important;
    padding: 1rem;
}

.mud-table.mud-data-grid.mud-xs-table.mud-table-dense.mud-table-hover.mud-elevation-1 .mud-table-pagination-toolbar {
    height: auto !important;
    padding: 0 !important;
}

/* ── Network Status ───────────────────────────────────────────── */
.network-status-indicator {
    width: 43px;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
}

.avatar-container {
    position: relative;
    width: 35px;
    height: 35px;
}

/* Offline: rotating red border */
.rotating-border {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 43px;
    height: 43px;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    z-index: 1;
    box-sizing: border-box;
}

.rotating-border.dark-mode {
    border-top: 3px solid rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.5), 0 0 16px rgba(220, 38, 38, 0.3);
}

.rotating-border.light-mode {
    border-top: 3px solid rgba(220, 38, 38, 0.80);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.4), 0 0 12px rgba(185, 28, 28, 0.25);
}

/* Çevrimiçi: marka rengiyle nabız */
.online-border {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    animation: green-pulse 2.4s ease-in-out infinite;
    z-index: 1;
    box-sizing: border-box;
}

.online-border.dark-mode {
    border: 3px solid rgba(45, 212, 170, 0.90);
    box-shadow: 0 0 8px rgba(45, 212, 170, 0.50), 0 0 16px rgba(45, 212, 170, 0.25);
}

.online-border.light-mode {
    border: 3px solid rgba(15, 110, 86, 0.85);
    box-shadow: 0 0 6px rgba(15, 110, 86, 0.40), 0 0 12px rgba(15, 110, 86, 0.20);
}

@keyframes green-pulse {
    0% {
        box-shadow: 0 0 6px rgba(15, 110, 86, 0.40), 0 0 12px rgba(15, 110, 86, 0.20);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 10px rgba(15, 110, 86, 0.60), 0 0 20px rgba(15, 110, 86, 0.30);
        transform: scale(1.04);
    }
    100% {
        box-shadow: 0 0 6px rgba(15, 110, 86, 0.40), 0 0 12px rgba(15, 110, 86, 0.20);
        transform: scale(1);
    }
}

MudAvatar {
    position: relative;
    z-index: 2;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Yük planı 3B görünümü: tuval üstündeki araç çubuğu ────────── */
/*
   3B tuval her iki temada da siyah kalıyor (sahnenin arka planı sabit), ama
   üstündeki düğmeler renklerini uygulama temasından alıyordu. Açık temada
   Primary #14375F ve TextPrimary #0F1E33 — ikisi de neredeyse siyah, dolayısıyla
   düğmeler tuvale karışıp okunmaz oluyordu.

   Çözüm, çubuğun kendi paletini sabitlemesi. MudBlazor düğme renklerini CSS
   değişkenlerinden okuduğu ve değişkenler miras alındığı için, kapsayıcıya
   yazmak içindeki bütün düğmeleri kapsıyor — düğmeleri tek tek ezmeye gerek yok.
   Değerler Themes/Theme.cs'teki koyu paletten alındı: çubuk zaten hep koyu bir
   zeminin üstünde, ikisi ayrışırsa açık temada aynı sorun geri döner.
*/
.loadplan-overlay-toolbar {
    --mud-palette-primary: #6BA5E7;
    --mud-palette-primary-rgb: 107, 165, 231;
    --mud-palette-primary-text: #06111F;
    --mud-palette-text-primary: #E8EFF8;
    --mud-palette-text-primary-rgb: 232, 239, 248;
    --mud-palette-action-default-hover: rgba(232, 239, 248, 0.30);
    --mud-palette-border-opacity: 0.6;
}

/*
   Etkin "Etiket" düğmesi dolu ama Color.Default, yani zemini yarı saydam gri —
   siyah tuvalin üstünde nerede bittiği belirsiz kalıyordu. Dolguyu daha da açmak
   üstündeki metnin kontrastını düşürürdü; sınırı çerçeveden vermek ikisini de
   korur. Primary dolgu (etkin görünüm düğmesi) zaten tuvalden ayrıştığı için
   dışarıda tutuluyor.
*/
.loadplan-overlay-toolbar .mud-button-filled:not(.mud-button-filled-primary) {
    border: 1px solid rgba(232, 239, 248, 0.45);
}


/* ── Tablo çerçevesi ──────────────────────────────────────────────── */
/*
   Dar ekranda taşan tabloyu kendi içine hapseder. Bu olmadan taşan şey sayfanın
   kendisi oluyor: bütün ekran yana kayıyor, üst menü ve başlık da kayıyordu.

   -webkit-overflow-scrolling dokunmatik cihazlarda ivmeli kaydırma için; kaydırma
   çubuğu ince tutuluyor çünkü çerçeve içerikten daha fazla dikkat çekmemeli.
*/
.app-table-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.app-table-frame > * {
    /* İçerideki tablo daralmak yerine doğal genişliğinde kalsın; daralırsa
       sütunlar okunmaz hâle geliyor ve kaydırmanın amacı kalmıyor. */
    min-width: max-content;
}

/* ── Hareketi azalt ───────────────────────────────────────────────── */
/*
   İşletim sisteminde "hareketi azalt" seçiliyse iskelet dalgası ve geçişler durur.
   Vestibüler duyarlılığı olan kullanıcılar için sürekli hareket eden bir yüzey
   rahatsız edici; bilgi kaybı da olmuyor, iskelet yine yer tutuyor.
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── Kenar çubuğu ─────────────────────────────────────────────────── */
/*
   Grup başlıkları küçük ve sessiz; asıl dikkat sayfa adlarında olmalı. Çubuk
   66 hedef taşıyor, her satır aynı ağırlıkta olsaydı taranamazdı.
*/
.app-sidebar .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Grup içindeki sayfalar ikon taşımıyor; girinti hiyerarşiyi taşıyor. */
.app-sidebar .mud-nav-group .mud-nav-link {
    padding-left: 2.75rem;
}

/* ── Arama girişi (⌘K) ────────────────────────────────────────────── */
.app-search-trigger {
    text-transform: none;
    justify-content: flex-start;
    min-width: 220px;
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
}

/*
   Kısayol rozeti fiziksel tuş gibi görünüyor: kullanıcı bunun tıklanacak bir şey
   değil, basılacak bir tuş olduğunu biçimden anlamalı.
*/
.app-kbd {
    font-family: var(--mud-typography-default-family);
    font-size: 0.6875rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Palette seçili satır: klavyeyle gezinirken nerede olunduğu belli olmalı. */
.mud-selected-item {
    background: var(--mud-palette-action-default-hover);
}

/* ── Odak halkası ─────────────────────────────────────────────────
   Klavyeyle gezinen kişinin "şu an neredeyim" sorusunun tek yanıtı bu halka.

   Eskiden rgba(15,110,86,.45) idi: şablondan kalma bir yeşil, üstelik %45 saydam.
   Renk hiçbir temaya ait değildi (gündüz #14375F lacivert, gece #6BA5E7 mavi) ve
   gece modunda koyu yeşil koyu zeminde neredeyse kayboluyordu. Artık temanın kendi
   birincil rengi, tam opaklıkta — iki temada da okunuyor.

   Kapsam da dardı: yalnızca düğme ve girdi vardı. Kenar çubuğu bağlantıları, metin
   bağlantıları, sekmeler, onay kutuları ve liste satırları halkasızdı; klavye kullanıcısı
   menüde gezerken imlecin nerede olduğunu göremiyordu. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-link:focus-visible,
.mud-tab:focus-visible,
.mud-chip:focus-visible,
.mud-list-item:focus-visible,
.mud-expand-panel-header:focus-visible,
.mud-table-row:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.mud-input:focus-within,
.mud-checkbox:focus-within,
.mud-switch:focus-within,
.mud-radio:focus-within {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    /* Halkanın dışına ince bir zemin: birincil renge yakın bir arka planın
       üstünde (seçili menü satırı gibi) halka zemine karışmasın. */
    box-shadow: 0 0 0 4px var(--mud-palette-surface);
    border-radius: 4px;
}

/* Tarayıcının kendi mavi halkası temanınkiyle üst üste binmesin. */
.mud-input:focus-within :is(input, textarea, select) {
    outline: none;
}

/* ── İçeriğe geç ──────────────────────────────────────────────────
   Kenar çubuğunda 66 hedef var. Bu bağlantı olmadan klavyeyle gelen kullanıcı
   sayfanın içeriğine ulaşmak için her seferinde menünün tamamını geçmek zorundaydı.
   Yalnızca odaklanınca görünüyor; fare kullanıcısı hiç karşılaşmıyor. */
.app-skip-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-150%);
    z-index: 2000;
    padding: .625rem 1.25rem;
    border-radius: 0 0 8px 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: .875rem;
    text-decoration: none;
    transition: transform .15s ease-out;
}

.app-skip-link:focus {
    transform: translateX(-50%) translateY(0);
}

/* ── Blazor Error Boundary ────────────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc9ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b91c1c;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Beklenmeyen bir hata oluştu."
}

/* Kurulum kartı — tamamlanan adım.
   Geri çekiliyor ama silinmiyor: bitmiş adımı listede tutmak "ne kaldı" kadar
   "ne bitti" bilgisini de veriyor, soluklaştırmak ise gözü kalanlara yönlendiriyor. */
.setup-step-done {
    opacity: .62;
}

.setup-step-done:hover {
    opacity: 1;
}

/* Yük planlayıcı — düzenlenebilir kalem satırı.
   Satırın tıklanabilir olduğunu göstermek gerekiyor: aksi hâlde kullanıcı düzenlemek
   için üstteki ekleme formunu kullanmayı deniyor ve orada yaptığı değişiklik satıra
   yansımıyor. */
.loadplan-item-row {
    cursor: pointer;
}

.loadplan-item-row:hover {
    background: var(--mud-palette-action-default-hover);
}