/* এই ফাইলটি আপনার অ্যাডমিন প্যানেলের মেইন কালার এবং সাইডবার ডিজাইন কন্ট্রোল করবে।
   ফাইলটি assets/css/ ফোল্ডারের ভেতর global.css নামে সেভ করবেন।
*/

:root {
    --bg-color: #F4F7F6; 
    --card-bg: #FFFFFF;
    --primary: #007AFF; 
    --primary-light: #E5F1FF;
    --success: #34C759; 
    --danger: #FF3B30; 
    --warning: #FF9500;
    --text-main: #1C1C1E; 
    --text-muted: #8E8E93; 
    --border: #E5E5EA;
    --sidebar-width: 250px;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: var(--bg-color); 
    color: var(--text-main); 
    margin: 0; 
    padding: 0; 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
}

/* Utilities */
.muted-text { color: var(--text-muted); font-size: 14px; }
.error-msg { color: var(--danger); font-size: 13px; margin-top: 10px; display: none; }
.new-badge { background: var(--danger); color: white; font-size: 10px; padding: 2px 6px; border-radius: 6px; font-weight: bold; margin-left: auto; }

/* Login Screen */
#loginScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; }
.login-box { background: var(--card-bg); padding: 40px 30px; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); text-align: center; width: 100%; max-width: 350px; }
.pin-input { font-size: 28px; letter-spacing: 12px; text-align: center; width: 100%; padding: 15px; border: 2px solid var(--border); border-radius: 12px; margin: 20px 0; outline: none; box-sizing: border-box; font-weight:bold; transition: 0.3s;}
.pin-input:focus { border-color: var(--primary); }
.login-btn { background: var(--text-main); color: white; border: none; padding: 16px; width: 100%; font-size: 16px; font-weight: bold; border-radius: 12px; cursor: pointer; transition: 0.2s; }
.login-btn:active { transform: scale(0.96); }

/* Sidebar */
#sidebar { width: var(--sidebar-width); background: var(--card-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; z-index: 100; transition: transform 0.3s ease;}
.brand { padding: 25px 20px; font-size: 20px; font-weight: 800; color: var(--text-main); border-bottom: 1px solid var(--border); }
.nav-menu { flex: 1; padding: 20px 10px; overflow-y: auto; }
.nav-item { padding: 14px 15px; margin-bottom: 8px; border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--text-muted); transition: 0.2s; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.nav-item:hover { background: #F9F9F9; color: var(--text-main); }
.nav-item.active { background: var(--primary-light); color: var(--primary); }
.nav-footer { padding: 20px; border-top: 1px solid var(--border); }
.logout-btn { width: 100%; padding: 12px; background: #FFEBEA; color: var(--danger); border: none; border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.2s;}
.logout-btn:hover { background: var(--danger); color: white; }

/* Main Content Area */
#mainContent { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg-color); }
.topbar { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: var(--card-bg); z-index: 10; }

/* Iframe (Loads the features) */
#appFrame { flex: 1; width: 100%; height: 100%; background: transparent; }

/* Mobile Responsive */
.mobile-toggle { display: none; font-size: 24px; cursor: pointer; border:none; background:none; }
@media (max-width: 768px) {
    #sidebar { position: fixed; transform: translateX(-100%); }
    #sidebar.open { transform: translateX(0); box-shadow: 5px 0 20px rgba(0,0,0,0.1); }
    .mobile-toggle { display: block; }
    .topbar { padding: 15px; }
}