/* O&E palette from https://www.oetech.my/home and /data/layout/oneforall.css.
   White surfaces, corporate-blue navigation, green/lime brand accents.
   Darker green is used for small text to preserve readable contrast. */
:root {
  --oe-blue: #17408f;
  --oe-blue-dark: #10295f;
  --oe-green: #05ad01;
  --oe-lime: #acee21;
  --oe-green-medium: #1e9d1c;
  --oe-link-green: #187618;
  --oe-button-ink: #06132e;
  --oe-sidebar-ink: #eef5ff;
  --oe-surface: #ffffff;
  --oe-brand-gradient: linear-gradient(135deg, var(--oe-green), var(--oe-lime));
  --accent: var(--oe-green-medium);
  --accent-2: var(--oe-blue);
  --page-bg: #fff;
  --card-bg: #fff;
  --sb-fg: var(--oe-sidebar-ink);
  --sb-fg-dim: #d8e5ff;
  --border: #dfe3e7;
  --border-strong: #b8c1ca;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .12);
  --shadow-glow-blue: none;
  --shadow-glow-green: none;
}
body, .sidebar, .main, .content, .topbar, .card, .card-header, .card-footer,
.kpi, .table-wrap, .toolbar, .section-block, .line-block, .modal-content,
.modal-header, .modal-footer, .sidebar-footer {
  background: #fff !important;
  background-image: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
}
.sidebar { background: var(--oe-blue) !important; border-right: 1px solid var(--oe-blue-dark); }
.topbar::after, .page-title::before, .kpi::after { display: none; }
.sidebar::before { display: block; background: var(--oe-brand-gradient); height: 4px; }
.brand { display: block; border-color: rgba(255, 255, 255, .24); }
.brand-logo { display: none; }
.brand-title { color: #fff; font-size: .96rem; line-height: 1.35; overflow-wrap: anywhere; }
.brand-sub { color: #d8f7c2; text-transform: none; letter-spacing: 0; font-size: .73rem; line-height: 1.5; margin-top: .35rem; }
.brand-system { color: var(--oe-lime); font-weight: 700; font-size: .84rem; margin-top: .45rem; overflow-wrap: anywhere; }
.brand-title span { color: inherit; background: none; }
.nav-section { color: #d8e5ff; }
.nav-section::after { background: rgba(255, 255, 255, .24); }
.nav-list a { color: var(--oe-sidebar-ink); }
.nav-list a:hover, .nav-list a:focus-visible, .nav-list a.active {
  background: var(--oe-lime);
  color: var(--oe-blue-dark);
  border-color: var(--oe-lime);
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.nav-list a.active { border-left: 3px solid #fff; }
.nav-list a.active::before { display: none; }
.nav-list a.active i { color: var(--oe-blue-dark); }
.sb-tools .btn { border-color: var(--border-strong) !important; }
#sbLoadSample { background: var(--oe-brand-gradient) !important; color: var(--oe-button-ink) !important; box-shadow: none; }
#sbClearSample, #sbClearSample:hover { background: #fff !important; color: var(--oe-blue) !important; }
.sidebar-footer { background: var(--oe-blue-dark) !important; color: #d8e5ff; border-color: rgba(255, 255, 255, .24); }
.sidebar-footer strong { color: #fff; }
.topbar { flex-wrap: wrap; border-bottom: 3px solid var(--oe-green-medium); }
#syncStatus { font-size: .72rem; max-width: 230px; }
.page-title { color: var(--oe-blue); }
.card-header { background: #f1f6ff !important; color: var(--oe-blue) !important; }
.kpi::before { display: block; background: var(--oe-brand-gradient); }
.kpi .kpi-value { color: var(--oe-blue); }
.kpi:hover { transform: none; }
.kpi i { background: #fff; color: #17408f !important; box-shadow: none; border: 1px solid var(--border); }
.table thead th {
  background: var(--oe-blue) !important;
  color: #fff !important;
  border-bottom: 2px solid var(--oe-green-medium) !important;
}
.table tbody tr:hover td { background: #fff !important; }
.table td { border-color: var(--border) !important; }
.row-overdue td { background: #fff !important; border-left-color: #dc3545 !important; }
.row-overdue td:first-child { border-left: 3px solid #dc3545; }
.btn { box-shadow: none !important; }
.btn:hover, .btn:active { transform: none; }
.btn-primary, .btn-outline-primary:hover { background: var(--oe-blue) !important; color: #fff !important; border-color: var(--oe-blue) !important; }
.btn-primary:hover { background: var(--oe-blue-dark) !important; }
.btn-success, .btn-outline-success:hover { background: var(--oe-brand-gradient) !important; color: var(--oe-button-ink) !important; border-color: var(--oe-green-medium) !important; }
.btn-success:hover { background: var(--oe-lime) !important; }
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-light { background: #fff !important; }
.btn-outline-primary { color: var(--oe-blue) !important; border-color: var(--oe-blue) !important; }
.btn-outline-success { color: var(--oe-link-green) !important; border-color: var(--oe-link-green) !important; }
.btn-outline-secondary:hover { background: #495057 !important; color: #fff !important; }
.form-control, .form-select { background-color: #fff !important; box-shadow: none; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(23, 64, 143, .15) !important; }
.section-block h6 { background: none; color: var(--oe-blue); -webkit-text-fill-color: currentColor; }
.line-block { padding-right: 2.5rem; }
.st-notstarted { background: #e9ecef !important; color: #495057 !important; }
.st-ontrack { background: #d1e7dd !important; color: #0f5132 !important; box-shadow: none; }
.st-onhold { background: #fff3cd !important; color: #664d03 !important; }
.st-delayed { background: #f8d7da !important; color: #842029 !important; }
.st-completed { background: var(--oe-blue) !important; color: #fff !important; box-shadow: none; }
.progress { background: #e9ecef !important; box-shadow: none; }
.progress-bar { background: var(--oe-green-medium) !important; }
.empty i { background: #fff; color: #64748b; border: 1px solid var(--border); }
.modal-header { background: var(--oe-blue) !important; color: #fff !important; border-bottom: 3px solid var(--oe-green-medium) !important; }
.modal-header .btn-close { filter: invert(1); }
.notif-item, .notif-item:hover, .notif-item.unread { background: #fff; }
.notif-item.unread { border-left: 3px solid var(--oe-green-medium); }
#toastBox .toast { background: #fff !important; color: #263238 !important; border: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-lg) !important; backdrop-filter: none; }
#toastBox .toast.text-bg-danger { border-left: 4px solid #dc3545 !important; }
#toastBox .toast.text-bg-warning { border-left: 4px solid #ffc107 !important; }
#toastBox .toast.text-bg-success { border-left: 4px solid var(--oe-green-medium) !important; }
#toastBox .btn-close-white { filter: none; }
.sample-tag { background: #fff3cd; color: #664d03; }
.content a:not(.btn):not(.nav-link), #authScreen .btn-link { color: var(--oe-link-green); }
.content a:not(.btn):not(.nav-link):hover, #authScreen .btn-link:hover { color: var(--oe-blue); text-decoration: underline; }
.nav-tabs .nav-link.active { color: var(--oe-blue) !important; box-shadow: inset 0 3px 0 var(--oe-green-medium); }
.form-check-input:checked { background-color: var(--oe-blue); border-color: var(--oe-blue); }
.btn:focus-visible, .nav-list a:focus-visible { outline: 3px solid var(--oe-blue); outline-offset: 3px; }
.sidebar .btn:focus-visible, .sidebar .nav-list a:focus-visible { outline-color: #fff; }
#authScreen { text-align: center; }
#loginForm { text-align: left; }
@media (max-width: 575.98px) {
  .topbar-right { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
  .login-as { flex-wrap: wrap; }
  .login-as select { max-width: 200px; }
}