@import url("/static/home/css/font-awesome.min.css");

@font-face {
    font-family: Lato;
    src: url('/static/fontawesome/fonts/Lato-Regular.ttf') format('truetype')
}

/* ---------------------------------------------------------------------
   Modern design tokens
   Scoped overrides of Bootstrap 5.3 CSS variables - no markup changes,
   respects the existing data-bs-theme light/dark toggle.
--------------------------------------------------------------------- */
:root {
    --pwod-radius: 0.65rem;
    --pwod-radius-sm: 0.5rem;
    --pwod-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.06);
    --pwod-shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.10);
    --pwod-border: rgba(15, 23, 42, 0.09);
    --bs-border-radius: var(--pwod-radius);
    --bs-border-radius-sm: var(--pwod-radius-sm);
    --bs-border-radius-lg: 0.85rem;
    --bs-card-border-radius: var(--pwod-radius);
    --bs-box-shadow: var(--pwod-shadow);
}
[data-bs-theme="dark"] {
    --pwod-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.30);
    --pwod-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.32);
    --pwod-border: rgba(255, 255, 255, 0.09);
}

/* Light-mode link color matches the teal navbar for visual cohesion */
:root:not([data-bs-theme="dark"]) {
    --bs-link-color: #0e7490;
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color: #0a5b70;
    --bs-link-hover-color-rgb: 10, 91, 112;
}

/* Light-mode primary buttons match the teal navbar too */
:root:not([data-bs-theme="dark"]) .btn-primary {
    --bs-btn-bg: #0e7490;
    --bs-btn-border-color: #0e7490;
    --bs-btn-hover-bg: #0c6379;
    --bs-btn-hover-border-color: #0b5c70;
    --bs-btn-active-bg: #0b5c70;
    --bs-btn-active-border-color: #0a5468;
    --bs-btn-disabled-bg: #0e7490;
    --bs-btn-disabled-border-color: #0e7490;
    --bs-btn-focus-shadow-rgb: 14, 116, 144;
}

/* Dark-mode primary action buttons go gray, matching badges and the Save button */
[data-bs-theme="dark"] .btn-muted-primary.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

h1 {
    font-family: Lato, 'Calibri', sans-serif;
    font-size:24px;
    font-weight:normal;
}
body, p, a, div, th, td {
    font-family: Lato, 'Calibri', sans-serif;
}
body {
    letter-spacing: 0.1px;
    background-color: #f4f6f9;
}
[data-bs-theme="dark"] body {
    background-color: #14171c;
}
.scroll {
    max-height: 480px;
    overflow-y: auto;
}
.scroll-tall {
    max-height: 640px;
    overflow-y: auto;
}
.list-group-item {
    padding: 5px 10px
}
.is-disabled {
  color: #111;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}
.logo-img {
    max-height: 64px;
}
input, select {
    max-width: 180px;
}
.nav-link {
    font-family: Lato, sans-serif;
    font-size: 20px;
}
.toggle-mode {
    width:48px;
}
.trash {
    color: #ff3d00;
}

.logo {
    height:64px;
}
#bdsEnable {
    font-size: 24px;
}
.home-nav {
    font-size:18px;
}
.badge {
    font-family: Lato, 'Calibri', sans-serif;
    font-size:12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ---------------------------------------------------------------------
   Navbar
--------------------------------------------------------------------- */
#my-navbar {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.14);
    backdrop-filter: saturate(180%) blur(6px);
}
#my-navbar.bg-primary {
    background-color: #0e7490 !important;
    box-shadow: 0 2px 16px rgba(14, 116, 144, 0.35);
}
#my-navbar .navbar-brand {
    transition: opacity 0.15s ease;
}
#my-navbar .navbar-brand:hover {
    opacity: 0.85;
}
#my-navbar .nav-link {
    border-radius: var(--pwod-radius-sm);
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
#my-navbar .nav-link:hover,
#my-navbar .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.12);
}
#my-navbar .dropdown-menu {
    border: 1px solid var(--pwod-border);
    border-radius: var(--pwod-radius);
    box-shadow: var(--pwod-shadow-hover);
    overflow: hidden;
    padding: 0.4rem;
    margin-top: 0.4rem;
}
#my-navbar .dropdown-item {
    border-radius: var(--pwod-radius-sm);
    padding: 0.45rem 0.75rem;
    transition: background-color 0.15s ease;
}

/* ---------------------------------------------------------------------
   Cards
--------------------------------------------------------------------- */
.card {
    border: 1px solid var(--pwod-border);
    box-shadow: var(--pwod-shadow);
    transition: box-shadow 0.2s ease;
}
.card:hover {
    box-shadow: var(--pwod-shadow-hover);
}
.card-header {
    font-weight: 600;
    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.035);
    border-bottom: 1px solid var(--pwod-border);
}

/* ---------------------------------------------------------------------
   Buttons, badges, inputs, alerts - subtle modern polish only
--------------------------------------------------------------------- */
.btn {
    font-weight: 500;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.btn:active {
    transform: translateY(1px);
}
.form-control, .form-select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.alert {
    border: 1px solid var(--pwod-border);
    box-shadow: var(--pwod-shadow);
}
hr {
    opacity: 0.12;
}