/* ═══════════════════════════════════════════════════════════
   BİMS ERP — Modern UI katmanı
   app.css (temel tasarım sistemi) üzerine biner.
   ═══════════════════════════════════════════════════════════ */

:root {
    --br-50: #EFF6FF;
    --br-100: #DBEAFE;
    --br-200: #BFDBFE;
    --br-400: #60A5FA;
    --br-500: #3B82F6;
    --br-600: #2563EB;
    --br-700: #1D4ED8;
    --br-900: #1E3A8A;
    --glow: rgba(37, 99, 235, .12);
}

/* ── Kart / tablo ── */
.card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .7);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.card-hover { transition: box-shadow .2s, transform .2s; }
.card-hover:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, .09); transform: translateY(-2px); }

.tbl { width: 100%; border-collapse: collapse; text-align: left; }
.tbl thead tr {
    font-size: 10.5px; font-weight: 600; color: #94A3B8;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid #F1F5F9; background: rgba(248, 250, 252, .8);
}
.tbl thead th { padding: 10px 14px; white-space: nowrap; }
.tbl tbody tr { border-bottom: 1px solid #F8FAFC; transition: background .15s; }
.tbl tbody tr:hover { background: rgba(239, 246, 255, .6); }
.tbl tbody td { padding: 10px 14px; font-size: 12.5px; color: #64748B; }
.tbl tfoot tr { border-top: 2px solid #E2E8F0; background: #F8FAFC; }
.tbl tfoot td { padding: 10px 14px; font-size: 12.5px; font-weight: 800; color: #334155; }

/* ── Form bileşenleri ── */
.inp {
    width: 100%; padding: 10px 12px; font-size: 13px;
    border: 1px solid #E2E8F0; border-radius: 12px; outline: none;
    background: #fff; color: #334155; transition: border-color .15s, box-shadow .15s;
}
.inp:focus { border-color: var(--br-400); box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); }
.inp:disabled { background: #F8FAFC; color: #94A3B8; cursor: not-allowed; }
.inp.err { border-color: #FCA5A5; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.lbl { display: block; font-size: 11.5px; font-weight: 600; color: #64748B; margin-bottom: 4px; }
.hint { font-size: 10.5px; color: #94A3B8; margin-top: 4px; }
.err-msg { font-size: 10.5px; color: #DC2626; font-weight: 600; margin-top: 4px; display: none; }
.inp.err ~ .err-msg { display: block; }

/* önek/sonek kutusu (₺, kg, %) */
.inp-group { position: relative; }
.inp-group .inp { padding-right: 46px; }
.inp-group .suffix {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 11.5px; font-weight: 700; color: #94A3B8; pointer-events: none;
}

/* form bölüm başlığı */
.form-sec {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; color: #2563EB;
    text-transform: uppercase; letter-spacing: .06em;
    margin: 6px 0 2px;
}
.form-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #DBEAFE, transparent); }

/* segment seçici (radyo yerine) */
.seg { display: inline-flex; background: #F1F5F9; border-radius: 11px; padding: 3px; gap: 3px; }
.seg button {
    padding: 6px 14px; border: 0; background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 700; color: #64748B; border-radius: 8px; transition: all .15s;
}
.seg button.on { background: #fff; color: var(--br-700); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }

/* ── Butonlar ── */
.btn-main {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, #2563EB, #1D4ED8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .26); transition: all .15s; border: 0; cursor: pointer;
}
.btn-main:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, .36); }
.btn-main:active { transform: scale(.97); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
    color: #64748B; background: #fff; border: 1px solid #E2E8F0; cursor: pointer; transition: all .15s;
}
.btn-ghost:hover { background: #F8FAFC; color: #334155; border-color: #CBD5E1; }

.btn-soft {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 11px; font-size: 12.5px; font-weight: 700;
    color: var(--br-700); background: var(--br-50); border: 1px solid var(--br-100);
    cursor: pointer; transition: all .15s;
}
.btn-soft:hover { background: var(--br-100); }

.icon-btn {
    width: 28px; height: 28px; border-radius: 8px; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn.edit { background: #EFF6FF; color: #2563EB; }
.icon-btn.edit:hover { background: #DBEAFE; }
.icon-btn.del { background: #FEF2F2; color: #DC2626; }
.icon-btn.del:hover { background: #FEE2E2; }
.icon-btn.view { background: #EEF2FF; color: #4F46E5; }
.icon-btn.view:hover { background: #E0E7FF; }

.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
}

/* ── Modal ── */
.modal-wrap {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .45); backdrop-filter: blur(4px);
}
.modal-wrap.open { display: flex; animation: mFade .18s ease; }
.modal-box {
    background: #fff; border-radius: 20px; width: 100%; margin: 0 16px;
    padding: 26px; box-shadow: 0 25px 60px rgba(15, 23, 42, .3);
    max-height: 90vh; overflow-y: auto; animation: mUp .22s cubic-bezier(.2, .9, .3, 1);
}
@keyframes mFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mUp { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }

/* ── Yan panel (detay) ── */
.side-panel {
    position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 440px;
    background: #fff; z-index: 210; transform: translateX(102%);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1);
    box-shadow: -20px 0 50px rgba(15, 23, 42, .18); display: flex; flex-direction: column;
}
.side-panel.open { transform: none; }
.side-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 205; opacity: 0; pointer-events: none; transition: opacity .25s; }
.side-back.open { opacity: 1; pointer-events: auto; }

/* ── Sürükle-bırak ── */
.drag-item { cursor: grab; user-select: none; transition: box-shadow .15s, transform .15s, opacity .15s; }
.drag-item:active { cursor: grabbing; }
.drag-item.dragging { opacity: .38; transform: rotate(-1.5deg) scale(.98); }
.drop-zone { transition: background .18s, border-color .18s; }
.drop-zone.drag-over {
    background: var(--glow) !important;
    border-color: var(--br-400) !important;
    box-shadow: inset 0 0 0 2px rgba(96, 165, 250, .38);
}
.drag-handle { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; cursor: grab; flex-shrink: 0; }
.drag-handle span { display: block; width: 12px; height: 2px; border-radius: 2px; background: #CBD5E1; }
.drag-item:hover .drag-handle span { background: var(--br-400); }

.kanban-col { min-height: 220px; border-radius: 16px; border: 1.5px dashed #E2E8F0; background: rgba(248, 250, 252, .6); padding: 10px; }
.kanban-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 11px 12px; margin-bottom: 9px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.kanban-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .1); transform: translateY(-2px); }

/* ── Grafik yardımcıları ── */
.spark-bar { border-radius: 3px 3px 0 0; transition: height .6s cubic-bezier(.2, .9, .3, 1); }
.ring-track { stroke: #F1F5F9; }
.ring-val { transition: stroke-dashoffset 1s cubic-bezier(.2, .9, .3, 1); }

/* gösterge şeridi (tolerans bandı) */
.gauge { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #EF4444, #F59E0B, #10B981, #F59E0B, #EF4444); }
.gauge-marker { position: absolute; top: -4px; width: 3px; height: 16px; border-radius: 2px; background: #0F172A; box-shadow: 0 0 0 2px #fff; }

/* zaman çizelgesi */
.trace-node { position: relative; padding-left: 30px; padding-bottom: 20px; }
.trace-node::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--br-400), #E2E8F0); }
.trace-node:last-child::before { display: none; }
.trace-dot {
    position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 10px; background: var(--br-50); border: 2px solid var(--br-400);
}

/* depo gözü */
.slot-cell {
    aspect-ratio: 1/1; border-radius: 10px; border: 1.5px solid #E2E8F0;
    background: #F8FAFC; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    font-size: 9.5px; font-weight: 700; color: #94A3B8;
    transition: all .15s; cursor: pointer; position: relative; overflow: hidden;
}
.slot-cell:hover { border-color: var(--br-400); transform: translateY(-2px); }
.slot-cell.filled { border-color: transparent; color: #fff; }

/* ── Toast ── */
#toastHost { position: fixed; right: 20px; bottom: 20px; z-index: 400; display: flex; flex-direction: column; gap: 10px; }
.toast {
    min-width: 250px; max-width: 360px; padding: 12px 16px; border-radius: 14px;
    background: #0F172A; color: #fff; font-size: 12.5px; font-weight: 600;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .28);
    display: flex; align-items: center; gap: 10px;
    animation: tIn .25s cubic-bezier(.2, .9, .3, 1);
}
.toast.out { animation: tOut .25s forwards; }
.toast.ok { background: linear-gradient(135deg, #059669, #047857); }
.toast.err { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.toast.info { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.toast.warn { background: linear-gradient(135deg, #D97706, #B45309); }
@keyframes tIn { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: none } }
@keyframes tOut { to { opacity: 0; transform: translateX(40px) } }

/* ── SweetAlert2 Minimalist Theme ── */
.swal2-container { backdrop-filter: blur(4px); background: rgba(15, 23, 42, .4) !important; }
.swal2-popup.bims-swal-popup {
    width: 340px !important;
    max-width: 90vw !important;
    padding: 20px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .2) !important;
    border: 1px solid rgba(226, 232, 240, .8) !important;
}
.swal2-icon.bims-swal-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 4px auto 10px !important;
    border-width: 2.5px !important;
    scale: 0.9;
}
.swal2-icon .swal2-icon-content { font-size: 24px !important; }
.swal2-title.bims-swal-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}
.swal2-html-container.bims-swal-body {
    font-size: 12.5px !important;
    color: #64748B !important;
    margin: 0 0 14px !important;
    line-height: 1.45 !important;
}
.swal2-actions.bims-swal-actions {
    margin-top: 10px !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-end !important;
}
.bims-swal-confirm {
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .25) !important;
    border: none !important;
    cursor: pointer !important;
}
.bims-swal-confirm-danger {
    background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
    box-shadow: 0 3px 10px rgba(220, 38, 38, .25) !important;
}
.bims-swal-cancel {
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    border: 1px solid #E2E8F0 !important;
    cursor: pointer !important;
}
    background: #0F172A; color: #fff; font-size: 12.5px; font-weight: 600;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .28);
    display: flex; align-items: center; gap: 10px;
    animation: tIn .25s cubic-bezier(.2, .9, .3, 1);
}
.toast.out { animation: tOut .25s forwards; }
.toast.ok { background: linear-gradient(135deg, #059669, #047857); }
.toast.err { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.toast.info { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.toast.warn { background: linear-gradient(135deg, #D97706, #B45309); }
@keyframes tIn { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: none } }
@keyframes tOut { to { opacity: 0; transform: translateX(40px) } }

/* ── Sekmeler ── */
.tab-btn { padding: 8px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #64748B; background: transparent; border: 0; cursor: pointer; transition: all .15s; }
.tab-btn:hover { background: #F1F5F9; color: #334155; }
.tab-btn.active { background: var(--br-600); color: #fff; box-shadow: 0 3px 10px rgba(37, 99, 235, .3); }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 0; }

/* ── AI sohbet ── */
.ai-cursor { display: inline-block; width: 2px; height: 13px; vertical-align: -2px; background: var(--br-600); margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
.ai-body strong { color: #0F172A; font-weight: 700; }
.ai-body em { color: var(--br-700); font-style: normal; font-weight: 600; }

/* ── Hero aksanı ── */
.hero-glow::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% 12%, rgba(96, 165, 250, .24), transparent 55%);
}

/* ── Çimento/BİMS'e özel ── */
.silo-shell { position: relative; width: 62px; height: 122px; border-radius: 16px 16px 8px 8px; border: 2px solid #E2E8F0; background: #F8FAFC; overflow: hidden; display: flex; align-items: flex-end; }
.silo-liquid { width: 100%; transition: height 1s cubic-bezier(.2, .9, .3, 1); }

/* OEE üçlü şerit */
.oee-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: #F1F5F9; }
.oee-bar i { display: block; height: 100%; }

/* durum noktası */
.st-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.st-dot.run { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
.st-dot.idle { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.st-dot.stop { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }

/* mini istatistik satırı */
.mini-kv { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed #F1F5F9; }
.mini-kv:last-child { border-bottom: 0; }