/* src/css/home/navigation.css */
/* কাজ: নিচের নেভিগেশন বার, সাইডবার মেনু এবং ফ্লোটিং অ্যাকশন বাটন (FAB) */

/* ================================================================ */
/* ========= BOTTOM NAV (FIXED Z-INDEX) =========================== */
/* ================================================================ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* ব্যাকগ্রাউন্ড কালার সাদা (সামান্য ট্রান্সপারেন্ট) */
  background-color: rgba(255, 255, 255, 0.95); 
  
  /* ব্লার ইফেক্ট */
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); /* সাফারি ও আইওএস এর জন্য */
  
  /* শ্যাডো */
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  
  display: flex;
  justify-content: space-around;
  
  /* === Immersive Mode Padding Fix === */
  /* উপরে ১০px, নিচে ১৫px + জেসচার বারের উচ্চতা */
  padding: 10px 0 calc(15px + env(safe-area-inset-bottom)) 0;
  
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px; 
  
  z-index: 10006 !important; 
  
  box-sizing: border-box; 
  transition: transform 0.2s ease-out; 
}

/* নেভিগেশন আইটেম (ডিফল্ট কালার - ধূসর) */
.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    color: #999999; /* ধূসর কালার */
    font-size: 11px; 
    text-decoration: none; 
    cursor: pointer; 
    width: 20%; 
    padding: 5px 0; 
}

.nav-item i { 
    font-size: 20px; 
    margin-bottom: 4px; 
    transition: color 0.2s; 
}

/* অ্যাক্টিভ আইটেম (ডিফল্ট লাল কালার) */
.nav-item.active i, 
.nav-item.active span { 
    color: #B91C1C; /* থিম কালার সরে যাওয়ায় এখন ফিক্সড লাল */
    font-weight: 600; 
}

/* =================================================================== */
/* ========= KEYBOARD FIX (SEARCH FOCUS) ============================= */
/* =================================================================== */

/* কিবোর্ড ওপেন থাকলে নেভিগেশন এবং FAB হাইড করা */
body.keyboard-active .bottom-nav,
body.keyboard-active .add-customer-fab {
    display: none !important; 
}

/* ========================================= */
/* ========= FAB (Add Customer Button) ===== */
/* ========================================= */

.add-customer-fab {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom)); /* নেভিগেশনের উপরে */
  right: 20px;
  background-color: #dc3545;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900; 
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s;
}

.add-customer-fab.hidden { 
    transform: scale(0.8) translateY(100px); 
    opacity: 0; 
    pointer-events: none; 
}

/* ========================================= */
/* ========= SIDEBAR STYLES ================ */
/* ========================================= */

.sidebar { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 0; /* খোলার সময় JS দিয়ে width সেট হবে */
    z-index: 20000 !important; /* টোস্টের নিচে কিন্তু সব মডালের উপরে */
    background-color: #fff; 
    overflow-x: hidden; 
    overflow-y: auto; 
    transition: 0.3s; 
    padding-top: env(safe-area-inset-top, 0px); 
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2); 
    display: flex; 
    flex-direction: column; 
    border-radius: 0;
}

.sidebar-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.5); 
    z-index: 14999 !important; /* সাইডবারের ঠিক নিচে */
    display: none; 
    opacity: 0; 
    transition: opacity 0.3s; 
}

.sidebar-overlay.show { display: block; opacity: 1; }

.sidebar-user-section { padding: 20px; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; background-color: #fff; cursor: pointer; }
.sidebar-avatar { width: 60px; height: 60px; border-radius: 50%; background-color: #FFD60A; color: #333; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; margin-right: 15px; background-size: cover; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.sidebar-user-info { flex-grow: 1; }
.sidebar-user-info h3 { font-size: 18px; margin: 0 0 5px 0; color: #333; }
.sidebar-user-info p { font-size: 14px; color: #666; margin: 0; }
.sidebar-user-section .fa-chevron-right { color: #ccc; }

.sidebar-gold-banner { background: linear-gradient(90deg, #FFF8E1 0%, #FFECB3 100%); border: 1px solid #FFD64F; margin: 15px; border-radius: 8px; padding: 12px 15px; display: flex; align-items: center; cursor: pointer; }
.sidebar-gold-banner .gold-icon { width: 30px; height: 30px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #F57C00; margin-right: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sidebar-gold-banner span { flex-grow: 1; font-weight: 600; color: #333; font-size: 15px; }

.sidebar-menu-content { flex-grow: 1; overflow-y: auto; padding: 0 0 20px 0; }
.menu-section-label { padding: 15px 20px 10px 20px; font-size: 14px; color: #dc3545; font-weight: 600; }
.sidebar-item { display: flex; align-items: center; padding: 12px 20px; text-decoration: none; color: #333; font-size: 16px; }
.sidebar-item:hover { background-color: #f9f9f9; }
.sidebar-item i { width: 25px; font-size: 18px; color: #6c757d; margin-right: 15px; text-align: center; }

.sidebar-footer { padding: 15px; border-top: 1px solid #eee; text-align: center; background-color: #fff; padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
.sidebar-footer .footer-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 5px; }
.sidebar-footer .version-text { font-size: 12px; color: #999; }

/* ========================================= */
/* ========= WALLET GRID (SMART TOOLS) ===== */
/* ========================================= */

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px;
    padding: 15px;
}

.wallet-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.wallet-action-item:active { transform: scale(0.95); }

.wallet-action-item .icon-box {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent !important;
    margin-bottom: 8px;
    display: block;
}

.wallet-action-item .icon-box i { font-size: 26px; }
.wallet-action-item span { font-size: 12px; font-weight: 500; color: #333; margin-top: 5px; }

/* ========================================= */
/* ========= DARK MODE (NAVIGATION) ======== */
/* ========================================= */

body.dark-mode .bottom-nav {
    background-color: rgba(30, 30, 30, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.5);
}

body.dark-mode .nav-item { color: #aaaaaa !important; }
body.dark-mode .nav-item.active i,
body.dark-mode .nav-item.active span { color: #ffffff !important; }

body.dark-mode .sidebar { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .sidebar-user-section { background-color: #1e1e1e; border-bottom-color: #333; }
body.dark-mode .sidebar-user-info h3 { color: #e0e0e0; }
body.dark-mode .sidebar-item { color: #e0e0e0; }
body.dark-mode .sidebar-item:hover { background-color: #2c2c2c; }
body.dark-mode .sidebar-footer { background-color: #1e1e1e; border-top-color: #333; }
body.dark-mode .sidebar-gold-banner { background: #333; border-color: #FFD60A; }
body.dark-mode .sidebar-gold-banner span { color: #FFD60A; }

body.dark-mode .wallet-action-item span { color: #ccc; }
body.dark-mode .wallet-action-item .icon-box i { color: #e0e0e0; }