/* =============================================
   D1FFERENCE Panel - Shared Styles v6.0.0
   ============================================= */

/* Base */
body {
    font-family: 'Inter', sans-serif;
}

/* Product UI v1 — stok sayfasını temel alan ortak sayfa kabuğu */
.ui-page-shell {
    background: rgb(255 255 255 / .95) !important;
    border-bottom: 1px solid rgb(226 232 240) !important;
    box-shadow: 0 1px 3px rgb(15 23 42 / .06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dark .ui-page-shell { background: rgb(31 41 55 / .95) !important; border-color: rgb(71 85 105) !important; }

.ui-page-header { min-height: 4.25rem !important; height: auto !important; background: transparent; }
.ui-page-header-inner { min-height: 4.25rem; }
.ui-page-heading { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.ui-page-icon { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: rgb(239 246 255); color: rgb(37 99 235); }
.ui-page-icon.is-rose { background: rgb(255 241 242); color: rgb(225 29 72); }
.ui-page-icon.is-amber { background: rgb(255 251 235); color: rgb(217 119 6); }
.ui-page-icon.is-indigo { background: rgb(238 242 255); color: rgb(79 70 229); }
.ui-page-title { color: rgb(17 24 39); font-size: 1rem !important; font-weight: 800 !important; line-height: 1.25rem; letter-spacing: -.015em; }
.dark .ui-page-title { color: white; }
.ui-page-subtitle { margin-top: .1rem; color: rgb(107 114 128); font-size: .6875rem; line-height: 1rem; }
.ui-page-actions { display: flex; align-items: center; gap: .5rem; }
.ui-page-icon-button { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .65rem; color: rgb(107 114 128); transition: background-color .15s ease, color .15s ease; }
.ui-page-icon-button:hover { background: rgb(243 244 246); color: rgb(37 99 235); }
.ui-page-toolbar { padding-top: .7rem !important; padding-bottom: .7rem !important; background: rgb(248 250 252 / .86) !important; }
.dark .ui-page-toolbar { background: rgb(15 23 42 / .28) !important; }
.ui-stat-chip { display: inline-flex; min-height: 2.4rem; align-items: center; gap: .35rem; border: 1px solid rgb(226 232 240) !important; border-radius: .7rem !important; padding: .45rem .7rem !important; background: white !important; box-shadow: 0 1px 2px rgb(15 23 42 / .03); }
.dark .ui-stat-chip { border-color: rgb(71 85 105) !important; background: rgb(31 41 55) !important; }
.ui-page-toolbar :is(input[type="text"], input[type="date"], select) { min-height: 2.4rem; border-color: rgb(203 213 225) !important; border-radius: .7rem !important; font-size: .75rem; }
.ui-page-toolbar :is(input[type="text"], input[type="date"], select):focus { border-color: rgb(59 130 246) !important; outline: none; box-shadow: 0 0 0 3px rgb(147 197 253 / .25); }
.ui-content-card { overflow: hidden; border: 1px solid rgb(226 232 240) !important; border-radius: .9rem !important; background: white; box-shadow: 0 1px 3px rgb(15 23 42 / .05) !important; }
.dark .ui-content-card { border-color: rgb(71 85 105) !important; background: rgb(31 41 55); }

@media (max-width: 640px) {
    .ui-page-header { min-height: 3.75rem !important; }
    .ui-page-header-inner { min-height: 3.75rem; padding-left: 3.25rem !important; padding-right: .75rem !important; }
    .ui-page-icon { width: 2rem; height: 2rem; }
    .ui-page-subtitle { display: none; }
    .ui-page-toolbar { padding: .55rem .65rem !important; }
    .ui-page-toolbar > div { gap: .45rem !important; }
    .ui-stat-chip { min-height: 2.1rem; padding: .35rem .55rem !important; }
}

/* Sayfa taban rengi — Tailwind CDN async yüklenir; bu olmadan her sayfa
   geçişinde beyaz flash görünür. Tailwind'in bg-gray-50 / dark:bg-gray-900
   renkleriyle eşleşir, böylece geçiş düz olur. */
html { background: #f9fafb; }
html.dark { background: #111827; }

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

/* No Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Sidebar alanını ÖNCEDEN rezerve et — shared.js sidebar'ı body sonunda enjekte
   ediyor; boş #sidebar-container 0 genişlikteydi, dolunca içerik yatay kayıyordu
   (layout shift). Head'deki bu kuralla genişlik ilk boyamadan itibaren ayrılır.
   Collapsed durumda :has() ile daralır → boşluk kalmaz. */
#sidebar-container {
    flex-shrink: 0;
    width: 16rem;
    transition: width 0.3s ease;
}
#sidebar-container:has(aside.sidebar-collapsed) {
    width: 4.5rem;
}
@media (max-width: 768px) {
    #live-ticker-bar,
    .live-ticker-bar {
        display: none !important;
    }

    body.has-live-ticker {
        padding-bottom: 0 !important;
    }

    #mobile-menu-btn {
        top: max(0.5rem, env(safe-area-inset-top));
        left: max(0.5rem, env(safe-area-inset-left));
        transition: left 0.3s ease, transform 0.15s ease;
    }

    #mobile-menu-btn.is-open {
        left: calc(16rem - 2.75rem);
    }

    #sidebar-container .sidebar-header > button {
        display: none !important;
    }

    #sidebar-container aside {
        height: 100dvh !important;
        max-height: 100dvh;
        min-height: 0;
    }

    #sidebar-container aside > nav {
        min-height: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #sidebar-user-info {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
        background: white;
    }

    #sidebar-user-info > div {
        padding-bottom: max(.85rem, env(safe-area-inset-bottom)) !important;
    }

    .dark #sidebar-user-info { background: #1f2937; }

    #mobile-menu-btn .menu-icon {
        position: relative;
        display: block;
        width: 1.35rem;
        height: 1rem;
    }

    #mobile-menu-btn .menu-icon span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition: top .25s ease, transform .25s ease, opacity .18s ease, width .25s ease;
    }

    #mobile-menu-btn .menu-icon span:nth-child(1) { top: 0; }
    #mobile-menu-btn .menu-icon span:nth-child(2) { top: 7px; width: 78%; }
    #mobile-menu-btn .menu-icon span:nth-child(3) { top: 14px; width: 55%; }
    #mobile-menu-btn.is-open .menu-icon span:nth-child(1) { top: 7px; width: 100%; transform: rotate(45deg); }
    #mobile-menu-btn.is-open .menu-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    #mobile-menu-btn.is-open .menu-icon span:nth-child(3) { top: 7px; width: 100%; transform: rotate(-45deg); }

    @media (prefers-reduced-motion: reduce) {
        #mobile-menu-btn,
        #mobile-menu-btn .menu-icon span { transition: none; }
    }

    /* Mobilde sidebar off-canvas (position:fixed) → yer kaplamamalı */
    #sidebar-container { width: 0; }
}

/* Sidebar Text (for collapse animation) */
.sidebar-collapsed .sidebar-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Sidebar collapsed state */
.sidebar-collapsed {
    width: 4.5rem !important;
    /* aside'ta inline style="min-width:16rem" var → collapse'i kilitliyordu.
       !important ile ezilmezse genişlik 16rem'de takılı kalır, aside taşar. */
    min-width: 4.5rem !important;
}

.sidebar-collapsed .sidebar-nav-text {
    display: none;
}

.sidebar-collapsed .sidebar-logo-text {
    display: none;
}

.sidebar-collapsed .sidebar-user-info {
    display: none;
}

.sidebar-collapsed .sidebar-submenu {
    display: none !important;
}

/* Daraltılınca logo gizlenir → daralt/genişlet butonu tek başına ortalansın */
.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Toast Notification */
.toast-enter {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Connection Status Dot */
.ws-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
}

.ws-status-dot.connected {
    background-color: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    animation: pulse-green 2s ease-in-out infinite;
}

.ws-status-dot.disconnected {
    background-color: #ef4444;
}

.ws-status-dot.connecting {
    background-color: #f59e0b;
    animation: pulse-amber 1s ease-in-out infinite;
}

@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(34, 197, 94, 0.3);
    }

    50% {
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
    }
}

@keyframes pulse-amber {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Order Detail Modal Overlay */
.modal-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Product UI v1 — sayfalar arasında tekrar kullanılabilir pencere dili */
.ui-modal {
    padding: 1rem;
    background: rgb(15 23 42 / 0.48) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: ui-modal-fade-in .16s ease-out;
}

.ui-modal > .ui-modal-panel {
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-radius: 1rem !important;
    background: #fff;
    box-shadow: 0 24px 70px rgb(15 23 42 / .25) !important;
    animation: ui-modal-rise-in .2s ease-out;
}

.dark .ui-modal > .ui-modal-panel {
    border-color: rgb(71 85 105);
    background: rgb(31 41 55);
}

.ui-modal-header {
    min-height: 4.5rem;
    padding: 1rem 1.25rem !important;
    background: linear-gradient(180deg, rgb(248 250 252), rgb(255 255 255));
}

.dark .ui-modal-header {
    background: linear-gradient(180deg, rgb(51 65 85 / .72), rgb(31 41 55));
}

.ui-modal-header h3 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
}

.ui-modal-header h3 > i:first-child {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    margin-right: .35rem;
    place-items: center;
    border-radius: .65rem;
    background: rgb(239 246 255);
    color: rgb(37 99 235) !important;
    vertical-align: middle;
}

.dark .ui-modal-header h3 > i:first-child {
    background: rgb(30 58 138 / .35);
    color: rgb(147 197 253) !important;
}

.ui-modal-toolbar {
    gap: .65rem !important;
    padding: .75rem 1.25rem !important;
    background: rgb(248 250 252 / .82);
}

.dark .ui-modal-toolbar { background: rgb(15 23 42 / .25); }

.ui-modal :is(input[type="text"], input[type="number"], input[type="date"], select) {
    min-height: 2.4rem;
    border-color: rgb(203 213 225) !important;
    border-radius: .7rem !important;
    padding: .45rem .7rem !important;
    font-size: .75rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ui-modal :is(input[type="text"], input[type="number"], input[type="date"], select):focus {
    border-color: rgb(59 130 246) !important;
    box-shadow: 0 0 0 3px rgb(147 197 253 / .28);
}

.ui-modal input[type="checkbox"],
.ui-modal input[type="radio"] {
    accent-color: rgb(37 99 235);
}

.ui-modal-footer {
    min-height: 4rem;
    gap: .5rem !important;
    padding: .75rem 1.25rem !important;
    background: rgb(248 250 252 / .86);
}

.dark .ui-modal-footer { background: rgb(15 23 42 / .25); }

.ui-modal button[class*="px-"] {
    min-height: 2.4rem;
    border-radius: .7rem !important;
    font-size: .75rem;
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ui-modal button[class*="px-"]:active { transform: translateY(1px); }
.ui-modal button:focus-visible { outline: 3px solid rgb(147 197 253 / .52); outline-offset: 2px; }

@keyframes ui-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-modal-rise-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 640px) {
    .ui-modal { align-items: flex-end !important; padding: .5rem !important; }
    .ui-modal > .ui-modal-panel {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - .5rem) !important;
        margin: 0 !important;
        border-radius: 1rem 1rem .5rem .5rem !important;
    }
    .ui-modal-header { min-height: 4rem; padding: .85rem 1rem !important; }
    .ui-modal-toolbar { align-items: stretch !important; padding: .65rem 1rem !important; }
    .ui-modal-toolbar > :is(input[type="text"], select) { width: 100% !important; margin-left: 0 !important; }
    .ui-modal-footer { padding: .65rem 1rem max(.65rem, env(safe-area-inset-bottom)) !important; }
    .ui-modal-footer button[class*="px-"] { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-modal,
    .ui-modal > .ui-modal-panel { animation: none; }
}

/* Sağdan açılan detay panelleri */
.ui-drawer .modal-overlay {
    background: rgb(15 23 42 / .46);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ui-drawer-panel {
    border-left: 1px solid rgb(226 232 240);
    background: white;
    box-shadow: -24px 0 70px rgb(15 23 42 / .2) !important;
}

.dark .ui-drawer-panel { border-color: rgb(71 85 105); background: rgb(31 41 55); }

.ui-drawer-header {
    min-height: 4.5rem;
    background: rgb(255 255 255 / .94) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .ui-drawer-header { background: rgb(31 41 55 / .94) !important; }

.ui-drawer-header h2 { font-size: 1rem !important; font-weight: 800 !important; letter-spacing: -.015em; }
.ui-drawer-header h2 > i:first-child { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; background: rgb(238 242 255); }

@media (max-width: 640px) {
    .ui-drawer-panel { width: 100% !important; border-left: 0; }
    .ui-drawer-header { min-height: 4rem; padding: .75rem 1rem !important; }
}

/* Timeline Component */
.timeline-step {
    position: relative;
    padding-left: 2rem;
}

.timeline-step::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 1.5rem;
    bottom: -0.5rem;
    width: 2px;
    background: #e2e8f0;
}

.timeline-step:last-child::before {
    display: none;
}

.dark .timeline-step::before {
    background: #475569;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: white;
    z-index: 1;
}

.dark .timeline-dot {
    border-color: #475569;
    background: #1f2937;
}

.timeline-dot.active {
    border-color: #6366f1;
    background: #6366f1;
}

.timeline-dot.completed {
    border-color: #22c55e;
    background: #22c55e;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
    #sidebar-container aside {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        z-index: 50;
        width: 16rem !important;
        /* w-64 */
        transition: left 0.3s ease-in-out;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    #sidebar-container aside.mobile-open {
        left: 0;
    }

    /* Overlay */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 45;
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hide desktop collapse logic on mobile */
    .sidebar-collapsed {
        width: 16rem !important;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
    }
}

/* =========================================================
   LIVE TICKER BAR — alt sabit canlı sipariş şeridi
   Tüm sayfalarda görünür (login/setup haric). WebSocket
   "order_received" event'inden besleniyor.
   ========================================================= */
.live-ticker-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(to right, #0f172a, #1e293b);
    color: #fff;
    display: flex;
    align-items: center;
    z-index: 40;
    font-size: 12px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.live-ticker-bar.collapsed { transform: translateY(28px); }
.live-ticker-label {
    background: #dc2626;
    color: #fff;
    padding: 0 12px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    flex-shrink: 0;
}
.live-ticker-dot {
    width: 7px; height: 7px;
    background: #fff;
    border-radius: 50%;
    animation: live-ticker-blink 1s infinite;
}
@keyframes live-ticker-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
.live-ticker-track-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
    position: relative;
}
.live-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    height: 100%;
    padding-left: 100%;
    animation: live-ticker-scroll 50s linear infinite;
    will-change: transform;
}
.live-ticker-track:hover { animation-play-state: paused; }
@keyframes live-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.live-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    border-radius: 4px;
}
.live-ticker-item-new { animation: live-ticker-flash 2.5s ease-out; }
@keyframes live-ticker-flash {
    0% { background: rgba(34, 197, 94, 0.45); box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); }
    100% { background: transparent; box-shadow: none; }
}
.live-ticker-pulse {
    width: 6px; height: 6px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 6px #22c55e;
    flex-shrink: 0;
}
.live-ticker-time { color: #94a3b8; font-family: ui-monospace, monospace; }
.live-ticker-platform {
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.live-ticker-platform-ty,
.live-ticker-platform-trendyol { background: #f97316; color: #fff; }
.live-ticker-platform-ty2 { background: #3b82f6; color: #fff; }
.live-ticker-platform-hepsiburada,
.live-ticker-platform-hb { background: #ea580c; color: #fff; }
.live-ticker-platform-n11 { background: #9333ea; color: #fff; }
.live-ticker-platform-flo { background: #ec4899; color: #fff; }
.live-ticker-platform-amazon { background: #f59e0b; color: #000; }
.live-ticker-text { color: #f1f5f9; font-weight: 600; }
.live-ticker-qty { color: #fca5a5; font-weight: 700; }
.live-ticker-placeholder { color: #64748b; font-style: italic; }
.live-ticker-close {
    background: transparent;
    color: #94a3b8;
    border: none;
    padding: 0 14px;
    cursor: pointer;
    height: 100%;
    font-size: 13px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.live-ticker-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
body.has-live-ticker { padding-bottom: 40px !important; }

/* Ortak pazaryeri renk standardı */
.platform-badge { display:inline-flex; align-items:center; justify-content:center; padding:.18rem .48rem; border:1px solid transparent; border-radius:.42rem; font-size:.625rem; font-weight:800; line-height:1.1; white-space:nowrap; }
.platform-ty { background:#fff7ed; border-color:#fed7aa; color:#c2410c; }
.platform-ty2 { background:#eff6ff; border-color:#bfdbfe; color:#2563eb; }
.platform-hb { background:#fff1f2; border-color:#fecdd3; color:#e11d48; }
.platform-flo { background:#fdf2f8; border-color:#fbcfe8; color:#db2777; }
.platform-amazon { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.platform-n11 { background:#f5f3ff; border-color:#ddd6fe; color:#7c3aed; }
.platform-other { background:#f8fafc; border-color:#e2e8f0; color:#64748b; }