:root {
  --oman-red: #DB161B;
  --oman-white: #FFFFFF;
  --oman-green: #007A3D;
}
body { background-color: #f4f6f9; }
.sidebar {
  width: 240px;
  min-height: 100vh;
  background: linear-gradient(180deg, #1b2430, #101720);
}
.sidebar .nav-link { color: #cfd8e3; border-radius: .5rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active, .content .active { background: var(--oman-green); color: #fff; }
.content { max-width: 1400px; }
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: .75rem; }
.stat-card { border-left: 4px solid var(--oman-green); }
.table thead { background: #eef1f5; }
.brand-strip { height: 6px; background: linear-gradient(90deg, var(--oman-red) 33%, var(--oman-white) 33%, var(--oman-white) 66%, var(--oman-green) 66%); }

.mobile-topbar { display: none; }

@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform .25s ease-in-out;
  }
  .sidebar.show { transform: translateX(0); }
  .content { padding: 1rem !important; margin-top: 56px; }
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #101720;
    color: #fff;
    padding: .75rem 1rem;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
  }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035;
  }
  .sidebar-backdrop.show { display: block; }
}