* { margin:0; padding:0; box-sizing:border-box; }

html { height: 100%; }

body {
    font-family: 'Poppins', sans-serif;
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Mobile browser toolbar fix */
    overflow: hidden;
}

/* HEADER */
.header {
    background: white;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    flex-shrink: 0;
    border-bottom: 3px solid #CE2634;
}
.header-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.header-left img { height:42px; width:42px; flex-shrink:0; border-radius:50%; border:2px solid #CE2634; object-fit:contain; background:white; }
.header-title h1 { color:#CE2634; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-title p { color:#F2B00F; font-size:10px; font-weight:600; }
.header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.user-badge { display:flex; align-items:center; gap:6px; background:#f5f5f5; border-radius:20px; padding:4px 12px 4px 6px; border:1px solid #e0e0e0; }
.user-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; line-height:1; }
.user-name { color:#1a1a1a; font-size:12px; font-weight:700; white-space:nowrap; }
.logout-btn { background:#CE2634; color:white; border:none; padding:5px 11px; border-radius:12px; font-size:10px; font-weight:600; cursor:pointer; text-decoration:none; font-family:'Poppins',sans-serif; }
.hamburger { width:34px; height:34px; background:#CE2634; border:none; border-radius:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px; flex-shrink:0; }
.hamburger span { display:block; width:18px; height:2px; background:white; border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* OVERLAY */
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9998; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.sidebar-overlay.active { opacity:1; pointer-events:all; }

/* SIDEBAR */
.sidebar { position:fixed; top:0; right:-280px; width:260px; height:100vh; height:100dvh; background:#1a1a1a; z-index:9999; display:flex; flex-direction:column; transition:right 0.3s ease; overflow:hidden; }
.sidebar.open { right:0; }
.sidebar-head { background:linear-gradient(135deg,#CE2634,#a01e29); padding:10px 14px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sidebar-head img { height:34px; width:34px; flex-shrink:0; border-radius:50%; background:white; padding:2px; object-fit:contain; }
.sb-title { color:white; font-size:11px; font-weight:700; }
.sb-sub { color:#F2B00F; font-size:9px; }
.sb-close { margin-left:auto; background:rgba(255,255,255,0.2); border:none; color:white; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }

/* SIDEBAR NAV - evenly spaced, no scroll */
.sidebar-nav { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.sidebar-nav a { flex:1; display:flex; align-items:center; gap:10px; padding:0 16px; color:#ccc; text-decoration:none; font-size:12px; font-weight:500; transition:all 0.15s; border-left:3px solid transparent; min-height:0; }
.sidebar-nav a:hover { background:rgba(242,176,15,0.1); color:#F2B00F; border-left-color:#F2B00F; }
.nav-icon { font-size:14px; width:20px; text-align:center; flex-shrink:0; }

/* MAIN */
main { flex:1; display:flex; align-items:center; justify-content:center; padding:16px; overflow:hidden; min-height:0; }

/* FOOTER */
footer { background:#1a1a1a; color:#888; text-align:center; padding:8px; font-size:11px; flex-shrink:0; }
footer span { color:#F2B00F; }

/* MOBILE */
@media (max-width:768px) {
    .header-left img { height:36px; width:36px; }
    .header-title h1 { font-size:11px; }
    .header-title p { font-size:9px; }
    .logout-btn { font-size:9px; padding:4px 8px; }
    .hamburger { width:30px; height:30px; }
    .hamburger span { width:15px; }
    footer { padding:5px; font-size:9px; }
    .sidebar-nav a { font-size:11px; }
    main { padding:10px 12px; }
    .user-name { font-size:11px; font-weight:700; }
    .user-badge { padding:3px 10px 3px 5px; gap:5px; }
    .header-right { gap:5px; }
}

@media (max-width:380px) {
    .header { padding:6px 8px; }
    .header-left { gap:6px; }
    .header-left img { height:36px; width:36px; }
    .header-title h1 { font-size:10px; }
    .header-title p { font-size:8px; }
    .user-name { font-size:10px; }
    .user-avatar { width:24px; height:24px; font-size:16px; }
    .logout-btn { font-size:8px; padding:4px 6px; }
    .hamburger { width:26px; height:26px; }
    .hamburger span { width:13px; }
}