/* Theme tokens mapped to Bootstrap color mode (data-bs-theme) */
:root,
[data-bs-theme=light] {
  --color-primary: #30AD37;
  --color-text: #0f172a;
  --color-muted: #6c757d;
  --ok-body-bg: #fff;
  --ok-body-color: #0f172a;
  --ok-sidebar-bg: #f8f9fa;
  --ok-sidebar-fg: #212529;
  --ok-sidebar-link: #495057;
  --ok-sidebar-link-hover-bg: #e9ecef;
  --ok-sidebar-link-active-bg: rgba(48, 173, 55, .15);
  /* App brand tokens */
  --ok-primary: #30AD37;
  --ok-primary-rgb: 48, 173, 55;
  --ok-primary-hover: rgb(39.1384615385, 141.0615384615, 44.8461538462);
  --ok-primary-active: rgb(30.2769230769, 109.1230769231, 34.6923076923);
  /* Bootstrap color variables override */
  --bs-primary: var(--ok-primary);
  --bs-primary-rgb: var(--ok-primary-rgb);
  --bs-link-color: var(--ok-primary);
  --bs-link-hover-color: var(--ok-primary-hover);
  /* Ensure Bootstrap "dark" token matches design preference */
  --bs-dark: #151515;
  --bs-dark-rgb: 21, 21, 21;
}

[data-bs-theme=dark] {
  --color-primary: #30AD37;
  --color-text: #e5e7eb;
  --color-muted: #94a3b8;
  --ok-body-bg: #151515;
  --ok-body-color: #e5e7eb;
  --ok-sidebar-bg: #1B1B1F;
  --ok-sidebar-fg: #e5e7eb;
  --ok-sidebar-link: #cbd5e1;
  --ok-sidebar-link-hover-bg: rgba(255,255,255,.08);
  --ok-sidebar-link-active-bg: rgba(48, 173, 55, .25);
  /* App brand tokens */
  --ok-primary: #30AD37;
  --ok-primary-rgb: 48, 173, 55;
  --ok-primary-hover: rgb(60.7076923077, 201.0923076923, 68.5692307692);
  --ok-primary-active: rgb(92.6461538462, 209.9538461538, 99.2153846154);
  /* Bootstrap color variables override */
  --bs-primary: var(--ok-primary);
  --bs-primary-rgb: var(--ok-primary-rgb);
  --bs-link-color: var(--ok-primary);
  --bs-link-hover-color: var(--ok-primary-hover);
  /* Ensure Bootstrap "dark" token matches design preference in dark mode too */
  --bs-dark: #151515;
  --bs-dark-rgb: 21, 21, 21;
}

/* Spacing scale */
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
}

/* Border radius and shadow tokens for a smoother, modern look */
:root,
[data-bs-theme=light] {
  --radius-sm: .25rem; /* subtle */
  --radius-md: .5rem; /* default */
  --radius-lg: .75rem; /* generous */
  --box-shadow-soft: 0 8px 20px rgba(16,24,40,0.06); /* light, soft shadow */
  /* Surface-specific shadow and border tokens for cards and panels */
  --box-shadow-surface: 0 6px 14px rgba(16,24,40,0.04);
  --box-shadow-surface-hover: 0 12px 28px rgba(16,24,40,0.06);
  --ok-surface-border: rgba(15,23,42,0.06);
  --ok-surface-border-hover: rgba(15,23,42,0.10);
  /* Map into Bootstrap variables for consistent component rounding */
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
}

[data-bs-theme=dark] {
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --box-shadow-soft: 0 8px 20px rgba(2,6,23,0.6); /* darker soft shadow for dark theme */
  --box-shadow-surface: 0 8px 22px rgba(2,6,23,0.45);
  --box-shadow-surface-hover: 0 14px 36px rgba(2,6,23,0.6);
  --ok-surface-border: rgba(255,255,255,0.06);
  --ok-surface-border-hover: rgba(255,255,255,0.10);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
}

/* Noto Sans (self-hosted) - selected weights and subsets */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-latin-400-normal.woff2") format("woff2"), url("/assets/fonts/noto-sans-latin-ext-400-normal.woff2") format("woff2"), url("/assets/fonts/noto-sans-vietnamese-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-latin-600-normal.woff2") format("woff2"), url("/assets/fonts/noto-sans-latin-ext-600-normal.woff2") format("woff2"), url("/assets/fonts/noto-sans-vietnamese-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-latin-700-normal.woff2") format("woff2"), url("/assets/fonts/noto-sans-latin-ext-700-normal.woff2") format("woff2"), url("/assets/fonts/noto-sans-vietnamese-700-normal.woff2") format("woff2");
}
:focus-visible {
  outline: 2px solid var(--ok-primary);
  outline-offset: 2px;
}

/* Tune Bootstrap primary button hover/active using brand tokens */
.btn-primary {
  --bs-btn-hover-bg: var(--ok-primary-hover);
  --bs-btn-hover-border-color: var(--ok-primary-hover);
  --bs-btn-active-bg: var(--ok-primary-active);
  --bs-btn-active-border-color: var(--ok-primary-active);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/* Apply smoother radius, soft shadows and subtle borders to common surfaces */
.card,
.dropdown-menu,
.modal-content,
.offcanvas,
.popover {
  border-radius: var(--bs-border-radius);
  /* use surface-specific shadow for a cleaner look */
  box-shadow: var(--box-shadow-surface);
  border: 1px solid var(--ok-surface-border);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Slight lift on hover/focus for interactive surfaces */
.card:hover,
.card:focus-within {
  box-shadow: var(--box-shadow-surface-hover);
  border-color: var(--ok-surface-border-hover);
}

:focus-visible {
  box-shadow: 0 0 0 4px rgba(var(--ok-primary-rgb), 0.12);
}

/* Base */
body {
  background-color: var(--ok-body-bg);
  color: var(--ok-body-color);
}

/* Noto Sans with system fallbacks */
:root {
  --bs-font-sans-serif: "Noto Sans",
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Layout */
.ok-layout-auth {
  background-color: #1b1b1f;
  background-image: url("../images/bg-grid-pattern.png");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
}
.ok-layout__body {
  display: flex;
  gap: 0.5rem;
  min-height: 100vh;
}
.ok-layout__content {
  width: 100%;
}

@media (max-width: 991.98px) {
  .ok-layout__body {
    flex-direction: column;
  }
}
.ok-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: -1px;
  z-index: 1030;
}
.ok-header .ok-header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  list-style-type: none;
  margin-bottom: 0;
}

.navbar-brand img {
  height: 32px;
  width: auto;
}

/* Brand the sidebar toggler icon and border */
.navbar-dark .navbar-toggler {
  border-color: var(--ok-primary);
}

.navbar-dark .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-r, 48), var(--brand-primary-g, 173), var(--brand-primary-b, 55), 0.25);
}

.navbar-dark .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2330AD37' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Ensure theme toggle is visible in light mode (brand outline) and in dark mode (light outline) */
#themeToggle {
  border-width: 1px;
}

/* Brand hover/active for navbar links */
.navbar-dark .navbar-nav .nav-link {
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--ok-primary);
  border-bottom-color: var(--ok-primary);
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link[aria-current=page] {
  color: var(--ok-primary);
  border-bottom-color: var(--ok-primary);
}

.sidebar {
  background: var(--ok-sidebar-bg);
  color: var(--ok-sidebar-fg);
  position: sticky;
  top: 56px;
  overflow: auto;
  min-width: 260px;
}

.sidebar .nav-item {
  margin-top: 0.25rem;
}

.sidebar .nav-link {
  color: var(--ok-sidebar-link);
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar .nav-link .fa, .sidebar .nav-link .fas, .sidebar .nav-link .far, .sidebar .nav-link .fal, .sidebar .nav-link .fab {
  width: 1.25rem;
  text-align: center;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  color: inherit;
  background: var(--ok-sidebar-link-hover-bg);
}

.sidebar .nav-link.active {
  background: var(--ok-sidebar-link-active-bg);
  color: inherit;
  font-weight: bold;
}

/* Mobile: sidebar becomes off-canvas overlay */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    height: auto;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1040;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
}
.sidebar .nav-item:has(> ul.sidebar__submenu) > .nav-link {
  position: relative;
  padding-right: 1.75rem;
}

.sidebar .nav-item:has(> ul.sidebar__submenu) > .nav-link::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transition: transform 0.2s ease-in-out;
  transform: translateY(-50%);
}
.sidebar .nav-item:has(> ul.sidebar__submenu.collapsing) > .nav-link::after {
  transform: translateY(-50%) rotate(180deg);
}

.sidebar .nav-item:has(> ul.sidebar__submenu.show) > .nav-link::after {
  transform: translateY(-50%) rotate(180deg);
}

.sidebar .sidebar__submenu {
  padding-left: 2.2rem;
}

.breadcrumb {
  --bs-breadcrumb-divider: '>';
}

.site-footer {
  color: #6c757d;
  font-size: 0.875rem;
  padding: 1rem;
}

.table thead th {
  white-space: nowrap;
}

.badge {
  font-weight: 600;
}

.invalid-feedback {
  display: block;
}

.modal-title {
  font-weight: 600;
}

.card-stat__icon {
  width: 60px;
  height: 60px;
  background-color: var(--bs-primary);
  border-radius: var(--bs-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
}
/*# sourceMappingURL=styles.css.map */