:root {
  --primary-blue: #2B3B8F;
  --accent-orange: #F7941D;
  --bg-light: #F4F6F9;
  --dark-text: #1E293B;
}
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-light); color: var(--dark-text); }

#login-page { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--primary-blue); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.login-card { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); width: 100%; max-width: 420px; text-align: center; }
.dna-brand-icon { font-size: 34px; color: var(--accent-orange); margin-bottom: 10px; }

#app-container { display: flex; height: 100vh; width: 100vw; overflow: hidden; }
.sidebar { width: 260px; background-color: var(--primary-blue); color: white; display: flex; flex-direction: column; flex-shrink: 0; box-shadow: 4px 0 10px rgba(0,0,0,0.1); }
.sidebar-header { padding: 25px 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.brand-title { font-weight: 800; font-size: 14px; color: white; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.brand-subtitle { font-size: 11px; color: #94A3B8; font-weight: 600; margin-top: 3px; }
.brand-tagline { font-size: 9px; color: var(--accent-orange); text-transform: uppercase; font-weight: 700; margin-top: 8px; letter-spacing: 1px; }

.sidebar-menu { list-style: none; padding: 10px 0; margin: 0; flex-grow: 1; overflow-y: auto; }
.sidebar-menu li { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; font-size: 14px; color: rgba(255,255,255,0.8); border-left: 4px solid transparent; transition: all 0.2s ease; }
.sidebar-menu li i { margin-right: 12px; width: 20px; text-align: center; font-size: 16px; }
.sidebar-menu li:hover { background-color: rgba(255,255,255,0.05); color: white; }
.sidebar-menu li.active { background-color: rgba(255,255,255,0.1); border-left-color: var(--accent-orange); color: white; font-weight: 600; }

.main-viewport { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.top-navbar { height: 70px; background-color: white; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; flex-wrap: wrap; gap: 8px; }
.workspace-content { flex-grow: 1; padding: 30px; overflow-y: auto; }

.top-bar-title { font-size: 20px; font-weight: 700; color: var(--primary-blue); margin: 0; }
.card { border: none; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; }

.badge-status { padding: 5px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; display: inline-block; text-align: center; }
.status-green { background-color: #DEF7EC; color: #03543F; }
.status-yellow { background-color: #FEF08A; color: #713F12; }
.status-red { background-color: #FDE8E8; color: #9B1C1C; }

.menu-section { display: none; }
.menu-section.active { display: block; }
.text-xs { font-size: 12px; }

@media (max-width: 768px) {
  #app-container { flex-direction: column; height: auto; overflow-y: auto; }
  .sidebar { width: 100%; height: auto; }
  .sidebar-menu { display: flex; overflow-x: auto; white-space: nowrap; padding: 0; }
  .sidebar-menu li { padding: 10px 15px; border-left: none; border-bottom: 3px solid transparent; font-size: 13px; }
  .sidebar-menu li.active { border-left: none; border-bottom-color: var(--accent-orange); }
  .top-navbar { padding: 10px 15px; height: auto; flex-direction: column; align-items: flex-start; }
  .workspace-content { padding: 15px; }
  .table-responsive { overflow-x: auto; }
}

@media print {
  .no-print { display: none !important; }
}