/* Base (Material Admin flavor) */
body{
  font-family:'Segoe UI',sans-serif;
  background:#f3f4f6;
}

/* overlay for mobile sidebar */
.overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.4);display:none;z-index:997;
}

/* Sidebar */
.sidebar{
  background:#1a237e;          /* Indigo 900 */
  color:#e8eaf6;               /* Indigo 50 */
  width:260px;
  position:fixed;top:0;left:0;
  height:100vh;
  overflow-y:auto;
  transition:transform .3s ease;
  z-index:999;
  box-shadow:2px 0 14px rgba(0,0,0,.15);
}
.sidebar .brand{
  font-size:22px;
  padding:20px;
  font-weight:600;
  border-bottom:1px solid #283593; /* Indigo 800 */
  display:flex;justify-content:space-between;align-items:center;
}
.sidebar .brand button{
  display:none;background:none;border:none;color:#fff;font-size:24px;
}
.sidebar ul{padding:0;margin:0;list-style:none;}
.sidebar .menu-title{
  font-size:11px;
  padding:15px 20px 5px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#c5cae9;
}
.sidebar a{
  color:#c5cae9;
  text-decoration:none;
  padding:12px 20px;
  display:block;
  font-size:15px;
  border-left:3px solid transparent;
}
.sidebar a:hover{
  background:#303f9f;          /* Indigo 700 */
  color:#fff;
  border-left-color:#90caf9;   /* Light accent */
}

/* Dropdown (accordion style with smooth slide) */
.submenu{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
  background:#283593;          /* Indigo 800 */
  margin-left:10px;border-left:2px solid #3949ab;
}
.has-submenu.open .submenu{max-height:500px;}
.submenu a{padding-left:40px;font-size:14px;}
.submenu-toggle i.bi-chevron-down{transition:transform .3s;}
.has-submenu.open .submenu-toggle i.bi-chevron-down{transform:rotate(180deg);}

/* Main */
.main{
  margin-left:260px;
  padding:25px;
  min-height:100vh;
  transition:margin-left .3s ease;
}

/* Top header bar */
.topbar{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 18px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  margin-bottom:16px;
}
.topbar .left{font-weight:600;color:#111827;}
.topbar .center{font-weight:600;color:#111827;}
.topbar .right{display:flex;align-items:center;gap:12px;color:#111827;}
.badge-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#eef2ff;color:#1e3a8a;border:1px solid #c7d2fe;
  padding:6px 10px;border-radius:999px;font-weight:600;font-size:13px;
}

/* Marquee notice */
.notice{
  background:#ffffff;border:1px solid #e5e7eb;border-radius:10px;padding:6px 12px;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  margin-bottom:18px;
}
.notice marquee{font-weight:600;color:#1f2937;}

/* Cards */
.card{
  border:1px solid #e5e7eb!important;border-radius:12px!important;
  box-shadow:0 8px 24px rgba(0,0,0,.05)!important;
}

/* Mobile */
.hamburger{display:none;}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.active{transform:translateX(0);}
  .main{margin-left:0!important;padding:18px;}
  .hamburger{
    display:block;position:fixed;top:15px;left:15px;font-size:28px;color:#1a237e;background:#fff;
    border:1px solid #e5e7eb;border-radius:6px;z-index:1000;padding:2px 8px;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
  }
  .sidebar .brand button{display:block;}
  .topbar{flex-direction:column;align-items:flex-start;gap:8px;}
  .topbar .right{flex-wrap:wrap;}
}