/* ============================================================
   STYLE.CSS
   Flipkart Return Management System — Global Styles
   Theme: Soft Blue / White / Light Gray, Glassmorphism, Rounded
   ============================================================ */

:root {
    --fk-blue: #2563eb;
    --fk-blue-dark: #1d4ed8;
    --fk-blue-light: #eaf1ff;
    --fk-accent: #7c3aed;
    --fk-success: #16a34a;
    --fk-warning: #f59e0b;
    --fk-danger: #dc2626;
    --fk-bg: #f4f7fb;
    --fk-card-bg: rgba(255, 255, 255, 0.75);
    --fk-border: rgba(37, 99, 235, 0.12);
    --fk-text: #1e2939;
    --fk-text-muted: #64748b;
    --sidebar-width: 264px;
    --topbar-height: 72px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-soft: 0 8px 30px rgba(37, 99, 235, 0.08);
    --shadow-hover: 0 14px 40px rgba(37, 99, 235, 0.16);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--fk-bg);
    color: var(--fk-text);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

a { text-decoration: none; }

/* ---------------- LOADING SCREEN ---------------- */
.app-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: linear-gradient(135deg, #eaf1ff 0%, #f4f7fb 60%, #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    transition: opacity .5s ease, visibility .5s ease;
}
.app-loading-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loading-screen .brand-logo {
    width: 74px; height: 74px; border-radius: 20px;
    background: linear-gradient(135deg, var(--fk-blue), var(--fk-accent));
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-hover);
    animation: pulseLogo 1.4s ease-in-out infinite;
}
.app-loading-screen .brand-logo i { color: #fff; font-size: 34px; }
@keyframes pulseLogo { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.app-loading-screen .loading-text { font-weight: 600; color: var(--fk-text-muted); letter-spacing: .5px; }
.loading-bar { width: 200px; height: 5px; border-radius: 6px; background: #dbeafe; overflow: hidden; }
.loading-bar span { display:block; height:100%; width:40%; background: linear-gradient(90deg, var(--fk-blue), var(--fk-accent)); border-radius:6px; animation: loadBar 1.1s ease-in-out infinite; }
@keyframes loadBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ---------------- GLOBAL SPINNER OVERLAY ---------------- */
.global-spinner-overlay {
    position: fixed; inset: 0; background: rgba(244,247,251,0.72);
    backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; z-index: 2500;
}
.global-spinner-overlay.active { display: flex; }
.spinner-ring { display: inline-block; position: relative; width: 64px; height: 64px; }
.spinner-ring div { position: absolute; width: 46px; height: 46px; border: 5px solid var(--fk-blue); border-radius: 50%; animation: spinnerRing 1.2s cubic-bezier(0.5,0,0.5,1) infinite; border-color: var(--fk-blue) transparent transparent transparent; top:9px; left:9px; }
.spinner-ring div:nth-child(2) { animation-delay: -0.45s; border-color: var(--fk-accent) transparent transparent transparent; }
.spinner-ring div:nth-child(3) { animation-delay: -0.3s; border-color: var(--fk-success) transparent transparent transparent; }
.spinner-ring div:nth-child(4) { animation-delay: -0.15s; }
@keyframes spinnerRing { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ---------------- LOGIN PAGE ---------------- */
.login-page-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 15% 20%, #dbeafe 0%, transparent 45%),
                radial-gradient(circle at 85% 80%, #ede9fe 0%, transparent 45%),
                var(--fk-bg);
    padding: 20px;
}
.login-card {
    width: 100%; max-width: 960px; display: grid; grid-template-columns: 1.1fr 1fr;
    background: rgba(255,255,255,0.7); border-radius: 28px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(37,99,235,0.18); border: 1px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(18px); animation: fadeUp .6s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.login-hero { background: linear-gradient(150deg, var(--fk-blue) 0%, var(--fk-accent) 100%); color: #fff; padding: 56px 44px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login-hero::before { content:''; position:absolute; width:300px; height:300px; background: rgba(255,255,255,0.08); border-radius:50%; top:-100px; right:-100px; }
.login-hero::after { content:''; position:absolute; width:220px; height:220px; background: rgba(255,255,255,0.08); border-radius:50%; bottom:-80px; left:-60px; }
.login-hero .hero-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; margin-bottom: 24px; }
.login-hero .hero-icon i { font-size: 30px; }
.login-hero h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: 10px; }
.login-hero p { opacity: 0.92; line-height: 1.6; }
.login-hero .hero-stats { display:flex; gap: 22px; margin-top: 34px; position: relative; z-index: 1; }
.login-hero .hero-stats div { background: rgba(255,255,255,0.14); padding: 12px 16px; border-radius: 14px; }
.login-hero .hero-stats strong { display:block; font-size: 1.3rem; }
.login-form-side { padding: 56px 46px; display:flex; flex-direction:column; justify-content:center; }
.login-form-side h2 { font-weight: 800; margin-bottom: 4px; }
.login-form-side .subtitle { color: var(--fk-text-muted); margin-bottom: 28px; }
.form-floating > .form-control { border-radius: var(--radius-md); border: 1.5px solid #e2e8f0; }
.form-floating > .form-control:focus { border-color: var(--fk-blue); box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
.btn-fk-primary { background: linear-gradient(135deg, var(--fk-blue), var(--fk-blue-dark)); border: none; color: #fff; font-weight: 600; border-radius: var(--radius-md); padding: 12px; transition: all .25s ease; }
.btn-fk-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color:#fff; }
.login-demo-hint { background: var(--fk-blue-light); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .82rem; color: var(--fk-blue-dark); margin-top: 18px; }

/* ---------------- APP SHELL: SIDEBAR ---------------- */
.app-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-width);
    background: rgba(255,255,255,0.85); backdrop-filter: blur(20px);
    border-right: 1px solid var(--fk-border); z-index: 1040;
    display: flex; flex-direction: column; transition: transform .3s ease, width .3s ease;
}
.sidebar-brand { display:flex; align-items:center; gap:12px; padding: 22px 22px; border-bottom: 1px solid var(--fk-border); }
.sidebar-brand .brand-icon { width: 42px; height:42px; border-radius: 12px; background: linear-gradient(135deg, var(--fk-blue), var(--fk-accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; }
.sidebar-brand .brand-text { line-height: 1.15; }
.sidebar-brand .brand-text strong { display:block; font-size: .95rem; font-weight: 800; }
.sidebar-brand .brand-text span { font-size: .72rem; color: var(--fk-text-muted); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 14px; }
.sidebar-nav .nav-section-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fk-text-muted); padding: 12px 12px 6px; font-weight: 700; }
.sidebar-nav a.nav-link-item {
    display:flex; align-items:center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm);
    color: var(--fk-text); font-weight: 500; font-size: .92rem; margin-bottom: 4px; transition: all .2s ease; position: relative;
}
.sidebar-nav a.nav-link-item i { font-size: 1.05rem; width: 22px; text-align:center; color: var(--fk-text-muted); transition: color .2s ease; }
.sidebar-nav a.nav-link-item:hover { background: var(--fk-blue-light); color: var(--fk-blue-dark); transform: translateX(2px); }
.sidebar-nav a.nav-link-item:hover i { color: var(--fk-blue-dark); }
.sidebar-nav a.nav-link-item.active { background: linear-gradient(135deg, var(--fk-blue), var(--fk-blue-dark)); color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,0.28); }
.sidebar-nav a.nav-link-item.active i { color: #fff; }
.sidebar-nav a.nav-link-item .badge-pill { margin-left: auto; font-size: .68rem; }
.sidebar-footer { padding: 16px 18px; border-top: 1px solid var(--fk-border); }
.sidebar-user-mini { display:flex; align-items:center; gap:10px; }
.sidebar-user-mini .avatar-circle { width: 38px; height:38px; border-radius:50%; background: var(--fk-blue-light); color: var(--fk-blue-dark); display:flex; align-items:center; justify-content:center; font-weight:700; }
.sidebar-user-mini .u-info { line-height:1.1; overflow:hidden; }
.sidebar-user-mini .u-info strong { font-size:.84rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-mini .u-info span { font-size:.7rem; color: var(--fk-text-muted); }

.sidebar-toggle-btn { display:none; }
.sidebar-backdrop { display:none; position: fixed; inset:0; background: rgba(15,23,42,0.4); z-index:1035; }

/* ---------------- APP SHELL: TOPBAR ---------------- */
.app-topbar {
    position: fixed; top: 0; left: var(--sidebar-width); right: 0; height: var(--topbar-height);
    background: rgba(255,255,255,0.7); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--fk-border); z-index: 1030;
    display:flex; align-items:center; justify-content: space-between; padding: 0 26px; transition: left .3s ease;
}
.topbar-search { position: relative; width: 340px; }
.topbar-search input { border-radius: 999px; border: 1.5px solid #e2e8f0; padding: 10px 16px 10px 40px; background: #fff; font-size:.88rem; }
.topbar-search input:focus { border-color: var(--fk-blue); box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }
.topbar-search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--fk-text-muted); }
.topbar-search .search-results { position:absolute; top: 46px; left:0; right:0; background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-hover); max-height: 360px; overflow-y:auto; z-index: 1050; display:none; }
.topbar-search .search-results.show { display:block; }
.topbar-search .search-results a { display:block; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; color: var(--fk-text); font-size: .85rem; }
.topbar-search .search-results a:hover { background: var(--fk-blue-light); }
.topbar-actions { display:flex; align-items:center; gap: 14px; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--fk-border); display:flex; align-items:center; justify-content:center; color: var(--fk-text); position: relative; transition: all .2s ease; cursor:pointer; }
.icon-btn:hover { background: var(--fk-blue-light); color: var(--fk-blue-dark); transform: translateY(-2px); }
.icon-btn .notif-dot { position:absolute; top:6px; right:7px; width:9px; height:9px; border-radius:50%; background: var(--fk-danger); border: 2px solid #fff; }
.notif-dropdown { width: 340px; max-height: 400px; overflow-y:auto; border-radius: var(--radius-md); border:none; box-shadow: var(--shadow-hover); padding: 10px; }
.notif-dropdown .notif-item { display:flex; gap:10px; padding: 10px; border-radius: var(--radius-sm); }
.notif-dropdown .notif-item:hover { background: var(--fk-blue-light); }
.notif-dropdown .notif-icon { width:34px; height:34px; border-radius:10px; background: var(--fk-blue-light); color: var(--fk-blue-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.topbar-user-menu img, .topbar-user-menu .avatar-circle { width: 40px; height:40px; border-radius:50%; }

/* ---------------- MAIN CONTENT ---------------- */
.app-main-content {
    margin-left: var(--sidebar-width); padding: calc(var(--topbar-height) + 24px) 28px 40px; transition: margin-left .3s ease;
    min-height: 100vh;
}
.page-header { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap: 12px; margin-bottom: 22px; }
.page-header h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.page-header p { color: var(--fk-text-muted); margin: 2px 0 0; font-size: .88rem; }
.breadcrumb-mini { font-size: .78rem; color: var(--fk-text-muted); }

/* ---------------- GLASSMORPHIC CARDS ---------------- */
.glass-card {
    background: var(--fk-card-bg); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); transition: transform .25s ease, box-shadow .25s ease;
}
.glass-card:hover { box-shadow: var(--shadow-hover); }
.hover-lift:hover { transform: translateY(-4px); }

.stat-card { padding: 22px; position: relative; overflow: hidden; }
.stat-card .stat-icon { width: 52px; height:52px; border-radius: 15px; display:flex; align-items:center; justify-content:center; font-size: 22px; color:#fff; margin-bottom: 14px; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 800; line-height:1; }
.stat-card .stat-label { color: var(--fk-text-muted); font-size: .84rem; font-weight: 600; margin-top: 4px; }
.stat-card .stat-trend { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; display:inline-flex; align-items:center; gap:4px; margin-top:10px; }
.stat-card .stat-glow { position:absolute; width: 130px; height:130px; border-radius:50%; opacity:.15; top:-40px; right:-40px; }

.bg-icon-blue { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.bg-icon-orange { background: linear-gradient(135deg,#fb923c,#f59e0b); }
.bg-icon-green { background: linear-gradient(135deg,#4ade80,#16a34a); }
.bg-icon-purple { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.bg-icon-red { background: linear-gradient(135deg,#f87171,#dc2626); }
.bg-icon-teal { background: linear-gradient(135deg,#2dd4bf,#0d9488); }

.section-card { padding: 22px; margin-bottom: 22px; }
.section-card .section-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 2px; }
.section-card .section-subtitle { font-size: .8rem; color: var(--fk-text-muted); margin-bottom: 16px; }

/* ---------------- BUTTONS ---------------- */
.btn-fk { border-radius: var(--radius-sm); font-weight: 600; padding: 9px 18px; transition: all .2s ease; border:none; }
.btn-fk-blue { background: linear-gradient(135deg, var(--fk-blue), var(--fk-blue-dark)); color:#fff; }
.btn-fk-blue:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,99,235,0.28); }
.btn-fk-green { background: linear-gradient(135deg,#22c55e,#16a34a); color:#fff; }
.btn-fk-green:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,163,74,0.28); }
.btn-fk-outline { background: #fff; border: 1.5px solid var(--fk-border); color: var(--fk-text); }
.btn-fk-outline:hover { background: var(--fk-blue-light); border-color: var(--fk-blue); }
.btn-fk-danger { background: linear-gradient(135deg,#f87171,#dc2626); color:#fff; }
.btn-fk-danger:hover { color:#fff; transform: translateY(-2px); }

/* ---------------- BADGES ---------------- */
.badge-status { padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.badge-pending { background: #fff7ed; color: #c2410c; border:1px solid #fed7aa; }
.badge-received { background: #f0fdf4; color: #15803d; border:1px solid #bbf7d0; }

/* ---------------- TABLES ---------------- */
.table-fk thead th { background: var(--fk-blue-light); color: var(--fk-blue-dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border: none; padding: 12px 14px; }
.table-fk tbody td { padding: 12px 14px; vertical-align: middle; font-size: .88rem; border-color: #eef2f7; }
.table-fk tbody tr { transition: background .15s ease; }
.table-fk tbody tr:hover { background: #f8fafc; }
.dt-buttons { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: var(--radius-sm); border: 1.5px solid #e2e8f0; padding: 6px 10px; }

/* ---------------- FORMS ---------------- */
.form-label { font-weight: 600; font-size: .85rem; }
.form-control, .form-select { border-radius: var(--radius-sm); border: 1.5px solid #e2e8f0; padding: 10px 14px; }
.form-control:focus, .form-select:focus { border-color: var(--fk-blue); box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }

/* ---------------- SCAN MODULE ---------------- */
.scan-panel { border-radius: var(--radius-lg); padding: 26px; text-align:center; transition: all .3s ease; }
#scan-result-area { min-height: 260px; }
.result-card-success { background: linear-gradient(135deg,#dcfce7,#bbf7d0); border: 2px solid #22c55e; animation: popIn .4s ease; }
.result-card-warning { background: linear-gradient(135deg,#ffedd5,#fed7aa); border: 2px solid #f59e0b; animation: popIn .4s ease; }
.result-card-danger { background: linear-gradient(135deg,#fee2e2,#fecaca); border: 2px solid #ef4444; animation: shake .5s ease; }
@keyframes popIn { 0% { transform: scale(.85); opacity:0;} 100% { transform: scale(1); opacity:1;} }
@keyframes shake { 0%,100% { transform: translateX(0);} 20% { transform: translateX(-10px);} 40% { transform: translateX(10px);} 60% { transform: translateX(-6px);} 80% { transform: translateX(6px);} }
.scan-status-icon { font-size: 4.5rem; margin-bottom: 8px; }
#qr-reader { border-radius: var(--radius-md); overflow: hidden; border: 2px dashed var(--fk-blue); }
.scan-input-wrap { position: relative; }
.scan-input-wrap input { font-size: 1.15rem; text-align:center; letter-spacing: 1px; font-weight: 700; padding: 16px; }
.mark-received-btn { font-size: 1.15rem; padding: 16px; width: 100%; border-radius: var(--radius-md); }

/* ---------------- ACTIVITY FEED ---------------- */
.activity-feed-item { display:flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eef2f7; }
.activity-feed-item:last-child { border-bottom:none; }
.activity-feed-item .act-icon { width:38px; height:38px; border-radius:10px; background: var(--fk-blue-light); color: var(--fk-blue-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.activity-feed-item .act-text { font-size: .85rem; }
.activity-feed-item .act-time { font-size: .72rem; color: var(--fk-text-muted); }

/* ---------------- DROP ZONE (IMPORT) ---------------- */
.dropzone { border: 2.5px dashed #c7d6f5; border-radius: var(--radius-lg); padding: 44px 20px; text-align:center; background: rgba(255,255,255,0.5); transition: all .2s ease; cursor:pointer; }
.dropzone.dragover { border-color: var(--fk-blue); background: var(--fk-blue-light); }
.dropzone i { font-size: 3rem; color: var(--fk-blue); }

/* ---------------- TOASTS ---------------- */
.toast-custom { border-radius: var(--radius-md); background: #fff; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 991px) {
    .app-sidebar { transform: translateX(-100%); width: 264px; }
    .app-sidebar.show { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.25); }
    .app-topbar { left: 0; }
    .app-main-content { margin-left: 0; padding-left: 16px; padding-right: 16px; }
    .sidebar-toggle-btn { display:flex; }
    .sidebar-backdrop.show { display:block; }
    .topbar-search { width: 200px; }
    .login-card { grid-template-columns: 1fr; }
    .login-hero { display:none; }
}
@media (max-width: 576px) {
    .topbar-search { display:none; }
    .app-topbar { padding: 0 14px; }
    .page-header h1 { font-size: 1.2rem; }
}

/* ---------------- SCROLLBAR ---------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c7d6f5; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- MISC ANIMATIONS ---------------- */
.fade-in-up { animation: fadeUp .5s ease both; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background: var(--fk-success); display:inline-block; animation: pulseDot 1.5s infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5);} 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0);} 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0);} }