body {
  font-family: Arial;
  margin: 20px;
  background: #f8f9fa;
}

.logo img {
  height: 100px;
}

/*
.layout {
  display: flex;
  min-height: calc(100vh - 60px); /* adjust if navbar height differs
}
*/

.layout {
  display: flex;
  min-height: calc(100vh - 60px);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/*
.sidebar {
    width: 240px;
    min-height: 100vh;
    background: #1f2937;
    padding: 20px;
}
*/

.sidebar {
  width: 240px;
  flex: 0 0 240px;
  min-height: 100vh;
  background: #1f2937;
  padding: 20px;
}

.sidebar a {
    display: block;
    padding: 10px 12px;
    color: #d1d5db;
    border-radius: 6px;
    text-decoration: none;
}

.sidebar a:hover {
    background: #374151;
    color: white;
}

.main-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 5px;
  justify-content: center;
  overflow-x: hidden;
}

/*
.main-content {
  flex: 1;
  padding: 5px;
  justify-content: center;
  /*display: flex;
}
*/

.footer p {
  text-align: center;
}

.navbar{
    height:55px;
    background:#ffffff;
    border-bottom:1px solid #e5e5e5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
}

.user-info{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
}

/* left side */

.system-title{
    font-weight:600;
    font-size: 2rem;
    color:#333;
}

/* right side */

.nav-right{
    display:flex;
    align-items:center;
}

/* user display */

.user-dropdown{
    position:relative;
    cursor:pointer;
}

.user-display{
    display:flex;
    align-items:center;
    gap:10px;
}

/* role badge */

.role-badge{
    background:#0d6efd;
    color:white;
    font-size:11px;
    padding:4px 8px;
    border-radius:6px;
}

/* username */

.username{
    font-size:14px;
    color:#333;
}

/* dropdown */

.dropdown-menu{
    position:absolute;
    right:0;
    top:40px;
    background:white;
    border:1px solid #e5e5e5;
    border-radius:6px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    display:none;
    min-width:120px;
}

.dropdown-menu.show{
    display:block;
    text-align: center;
}

.page-alert-area {
  margin-bottom: 1rem;
}

.page-alert-area .alert {
  max-width: 100%;
}

.js-auto-dismiss {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.js-auto-dismiss.alert-hiding {
  opacity: 0;
  transform: translateY(-8px);
}