/* src/css/home/layout.css */
/* কাজ: অ্যাপের মূল কাঠামো, হেডার, স্টিকি পজিশন এবং লেয়ারিং স্টাইল */

/* ======================================================== */
/* =============== Z-INDEX HIERARCHY GUIDE ================ */
/* ======================================================== */
/*
   Level 1: Background Layers (1 - 10)
   Level 2: Sticky Headers (Home/Cashbox) (100 - 105)
   Level 3: Floating Buttons (FAB) (900)
   Level 4: Standard Modals (1000 - 1005)
   Level 5: Bottom Navigation (10006) 
*/

:root {
    /* ডিফল্ট হেডার হাইট (JS লোড হওয়ার আগে) */
    --header-height: 180px;
}

/* ========================================= */
/* ========= MAIN PAGE CONTAINERS ========== */
/* ========================================= */

.main-container {
  display: none; /* ডিফল্টভাবে লুকানো, JS দিয়ে ওপেন হবে */
  max-width: 420px;
  margin: 0 auto;
  background-color: #ffffff;
  height: 100vh;
  /* iPhone Safari এর জন্য ডাইনামিক হাইট ফিক্স */
  height: 100dvh; 
  overflow-y: auto;
  position: relative;
  /* প্যাডিং বটম থাক, কিন্তু কিবোর্ড ওপেন হলে আমরা এটি হাইড করব */
  padding-bottom: calc(90px + env(safe-area-inset-bottom)); 
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.main-container::-webkit-scrollbar { display: none; }

/* অন্যান্য পেজের কন্টেইনার (ক্যাশবক্স, স্টক, নোটস, ইনবক্স) */
#cashbox-container, 
#stock-container, 
.notes-container, 
.inbox-container, 
.recycle-bin-container {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto; 
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
    display: none; /* শুরুতে লুকানো */
}

/* কিবোর্ড ওপেন থাকলে কন্টেইনারের প্যাডিং কমানো */
body.keyboard-active .main-container {
    padding-bottom: 0 !important;
}

/* ================================================= */
/* ========= LAYER 1: FIXED HEADER SYSTEM ========== */
/* ================================================= */

/* এটি স্ক্রল করলেও সবার উপরে ফিক্সড থাকবে */
.sticky-header-container {
  position: sticky;
  top: 0;
  z-index: 100; 
  background-color: #F8F9FA;
  width: 100%;
  /* নচ বা স্ট্যাটাস বারের জন্য প্যাডিং */
  padding-top: env(safe-area-inset-top, 0px);
}

/* মেইন অ্যাপ হেডার (লাল অংশ - ডিফল্ট) */
.app-header {
  background-color: #B91C1C; 
  padding: 10px 15px 20px 15px; 
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: none;
  border-radius: 0; 
  position: relative;
  z-index: 102;
  min-height: 80px; 
  box-sizing: border-box;
}

/* ডার্ক মোড হেডার */
body.dark-mode .app-header {
    background-color: #1f1f1f !important;
    border-bottom: none;
}

/* === হেডারের নিচের কার্ভ বা বাঁকানো ইফেক্ট === */
.app-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px; /* কার্ভের উচ্চতা */
    background-color: #F8F9FA; /* বডির ব্যাকগ্রাউন্ড কালারের সাথে মিল */
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    z-index: 103;
}

body.dark-mode .app-header::after {
    background-color: #121212 !important;
}

/* ========================================================= */
/* === [UPDATED] SHOP INFO & DROPDOWN STYLING START === */
/* ========================================================= */

.shop-info-container { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
}

.app-header .shop-name-dropdown { 
    background-color: #ffffff; /* সাদা ব্যাকগ্রাউন্ড */
    border-radius: 25px; /* গোল শেপ (Rounded) */
    padding: 6px 15px; /* ভেতরে জায়গা */
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 3px;
}

/* দোকানের নাম (কালো কালার) */
.app-header .shop-name-dropdown h1 { 
    font-size: 16px; 
    margin: 0 8px 0 0; 
    font-weight: bold; 
    color: #333 !important; /* কালো টেক্সট */
}

/* অ্যারো আইকন (কালো কালার) */
.app-header .shop-name-dropdown i { 
    color: #333 !important; /* কালো আইকন */
    font-size: 14px; 
}

/* ট্রায়াল/প্রিমিয়াম স্ট্যাটাস (ব্যাকগ্রাউন্ড রিমুভ করা হয়েছে) */
.trial-status { 
    font-size: 12px; 
    margin-top: 2px;
    margin-left: 5px; /* একটু ডানে সরানো হলো */
    background: transparent !important; /* ব্যাকগ্রাউন্ড মুছে ফেলা হয়েছে */
    padding: 0; 
    color: rgba(255, 255, 255, 0.9); /* হালকা সাদা টেক্সট */
    font-weight: 500;
}

/* ডার্ক মোডে ড্রপডাউন ফিক্স */
body.dark-mode .app-header .shop-name-dropdown {
    background-color: #333; /* ডার্ক ব্যাকগ্রাউন্ড */
    box-shadow: none;
}

body.dark-mode .app-header .shop-name-dropdown h1,
body.dark-mode .app-header .shop-name-dropdown i {
    color: #fff !important; /* সাদা টেক্সট */
}

/* ========================================================= */
/* === [UPDATED] SHOP INFO & DROPDOWN STYLING END === */
/* ========================================================= */


/* ডান পাশের আইকন */
.header-icons { display: flex; align-items: center; }

.header-icons .icon-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-left: 20px; 
    position: relative; 
    cursor: pointer; 
    color: #fff; 
}

.header-icons .icon-wrapper i { font-size: 22px; }
.header-icons .icon-wrapper span { font-size: 11px; margin-top: 4px; }

.header-icons .icon-wrapper .badge { 
    position: absolute; 
    top: -8px; 
    right: -10px; 
    background-color: #fff; 
    color: #dc3545; 
    border-radius: 10px; 
    padding: 0 5px; 
    font-size: 11px; 
    font-weight: bold; 
    min-width: 18px; 
    height: 18px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 2; 
}

/* বিজ্ঞাপন কন্টেইনারের লেআউট */
.ad-container-fixed {
    padding: 0px 15px;
    background-color: #F8F9FA;
    position: relative;
    z-index: 101;
}

body.dark-mode .ad-container-fixed {
    background-color: #121212 !important;
}

/* ================================================= */
/* ========= LAYER 2: BACKGROUND (FIXED/STICKY) ==== */
/* ================================================= */

.layer-2-background {
    position: sticky;
    top: var(--header-height, 180px); 
    z-index: 1; /* সবার নিচে */
    padding-bottom: 20px;
    background-color: #F8F9FA;
    transition: opacity 0.1s linear;
    will-change: opacity, visibility;
}

body.dark-mode .layer-2-background {
    background-color: #121212 !important;
}

/* ================================================= */
/* ========= LAYER 3: SCROLLING OVERLAY ============ */
/* ================================================= */

.layer-3-overlay {
    position: relative;
    z-index: 10; /* লেয়ার ২ এর উপরে */
    background-color: #fff;
    min-height: 100vh;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    margin-top: -15px;
    padding-bottom: 150px; 
}

body.dark-mode .layer-3-overlay {
    background-color: #1e1e1e;
    box-shadow: 0 -5px 15px rgba(255,255,255,0.05);
}

/* ================================================= */
/* ========= SPECIFIC PAGE HEADER OVERRIDES ======== */
/* ================================================= */

/* Cashbox Header */
#cashbox-container .app-header {
    padding: 10px 15px 20px 15px !important; 
    border-radius: 0;
    width: 100%;
    min-height: 80px;
    background-color: #B91C1C;
}
#cashbox-container .sticky-header-container::after {
    background-color: #F8F9FA;
}
body.dark-mode #cashbox-container .sticky-header-container::after {
    background-color: #121212;
    border-top: 1px solid #333;
}

/* Stock Header */
#stock-container .app-header {
    background-color: #B91C1C !important;
    padding: 10px 15px 20px 15px !important; 
    border-radius: 0 !important; 
}

body.dark-mode #stock-container .app-header {
    background-color: #1e1e1e !important;
}

/* Notes Header */
.notes-container .app-header {
    background-color: #B91C1C !important;
    padding: 15px 15px 45px 15px !important; 
    justify-content: flex-start;
}
.notes-container .app-header h1 {
    font-size: 20px; color: #fff; margin-left: 15px; font-weight: bold;
}
.notes-container .app-header .back-arrow {
    color: #fff; font-size: 22px; cursor: pointer;
}
.notes-container .sticky-header-container::after {
    height: 30px;
    background-color: #F8F9FA; 
    margin-top: -30px; 
}
body.dark-mode .notes-container .sticky-header-container::after {
    background-color: #121212;
    border-top: 1px solid #333;
}

/* Recycle Bin Header */
.recycle-bin-container .app-header {
    background-color: #B91C1C !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    padding: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.recycle-bin-container .app-header .back-arrow {
    font-size: 20px;
    cursor: pointer;
    margin-right: 20px;
    color: #fff !important;
}

.recycle-bin-container .app-header h1 {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    flex-grow: 1;
    text-align: center;
    color: #fff !important;
}

/* Common Content Body Style */
.content-body {
    background-color: #F8F9FA;
    margin-top: 0; 
    padding-top: 10px;
    position: relative;
    z-index: 1;
}
body.dark-mode .content-body {
    background-color: #121212;
}


/* ১. সব মডাল হেডারের জন্য নচ স্পেস এবং সাদা ব্যাকগ্রাউন্ড নিশ্চিত করা */
.details-header, .add-cs-header, .pin-modal-header, .modal-curved-header {
    padding-top: env(safe-area-inset-top, 20px) !important;
    background-color: #ffffff !important; /* মডাল হেডার সবসময় পিওর সাদা */
    border-bottom: 1px solid #eee !important;
    z-index: 1001;
}

/* ২. স্ট্যাটাস বার এরিয়া যাতে মডালের সাথে মিশে যায় */
body.hide-nav {
    background-color: #ffffff !important;
}

/* ৩. হোম পেজের হেডার ফিক্স */
.app-header {
    padding-top: env(safe-area-inset-top, 10px) !important;
    background-color: #B91C1C !important; /* হোম পেজে লাল */
}

/* ডার্ক মোডে মডাল হেডার */
body.dark-mode .details-header, 
body.dark-mode .add-cs-header {
    background-color: #1e1e1e !important;
    color: #fff !important;
}