/*
 * Custom skin on top of stock Bootstrap 5.3 — overrides Bootstrap's own
 * CSS custom properties so every page (already-written templates
 * included) picks up the new palette/shape without per-page markup
 * changes.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/inter/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/inter/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/inter/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/inter/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/fonts/inter/inter-latin-800-normal.woff2") format("woff2");
}

:root {
    --dt-radius: 0.85rem;
    --dt-radius-sm: 0.55rem;
    --dt-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.05);
    --dt-shadow-hover: 0 10px 28px rgba(79, 70, 229, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);

    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-link-hover-color-rgb: 67, 56, 202;

    --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-body-color: #1f2430;
    --bs-body-bg: #f4f5f9;
    --bs-secondary-color: #6b7280;

    --bs-border-radius: var(--dt-radius-sm);
    --bs-border-radius-lg: var(--dt-radius);
    --bs-border-radius-sm: 0.4rem;
    --bs-border-color: #e6e8f0;
}

body {
    background-color: var(--bs-body-bg);
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
}

/* Buttons */
.btn {
    font-weight: 600;
    border-radius: var(--dt-radius-sm);
    letter-spacing: -0.01em;
}

.btn-primary {
    --bs-btn-bg: #4f46e5;
    --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.btn-outline-secondary {
    --bs-btn-color: #4b5563;
    --bs-btn-border-color: #d7dae3;
    --bs-btn-hover-bg: #f3f4f8;
    --bs-btn-hover-border-color: #d7dae3;
    --bs-btn-hover-color: #1f2430;
}

.btn-link {
    font-weight: 500;
}

/* Navbar */
.navbar.bg-dark {
    --bs-bg-opacity: 1;
    background: linear-gradient(135deg, #1e1b3a 0%, #191830 100%) !important;
}

.navbar {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    box-shadow: 0 2px 10px rgba(15, 12, 41, 0.15);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.2rem;
}

.navbar-dark .navbar-nav .nav-link {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    border-radius: var(--dt-radius-sm);
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-dark .navbar-nav .dropdown-menu {
    border: none;
    border-radius: var(--dt-radius-sm);
    box-shadow: var(--dt-shadow-hover);
    padding: 0.4rem;
}

.navbar-dark .navbar-nav .dropdown-item {
    border-radius: 0.4rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

.navbar-dark .navbar-nav .dropdown-item:hover {
    background-color: #f3f4f8;
}

/* Cards */
.card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a .card:hover,
.card-link:hover {
    box-shadow: var(--dt-shadow-hover);
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, 0.25);
}

.card-body h1, .card-body h2, .card-body h3 {
    font-weight: 700;
}

/* Nav pills (project sub-nav) */
.nav-pills {
    background-color: #fff;
    padding: 0.35rem;
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow);
    border: 1px solid var(--bs-border-color);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.nav-pills .nav-link {
    border-radius: var(--dt-radius-sm);
    font-weight: 600;
    color: #565d6e;
    font-size: 0.92rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-pills .nav-link:hover {
    background-color: #f3f4f8;
    color: #1f2430;
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Tables */
.table {
    background-color: #fff;
    border-radius: var(--dt-radius);
    overflow: hidden;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #8890a0;
    border-bottom-width: 1px;
    background-color: #fafbfd;
}

.table > :not(caption) > * > * {
    padding: 0.7rem 0.85rem;
}

/* Badges — softer, tinted look instead of solid saturated pills */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 0.4rem;
    padding: 0.4em 0.65em;
}

.badge.bg-primary { background-color: #eef0fe !important; color: #4338ca !important; }
.badge.bg-success { background-color: #e8f8ef !important; color: #157347 !important; }
.badge.bg-danger { background-color: #fdeceb !important; color: #b02a37 !important; }
.badge.bg-warning { background-color: #fff6e0 !important; color: #a15c00 !important; }
.badge.bg-info { background-color: #e7f6fb !important; color: #0a6a86 !important; }
.badge.bg-secondary { background-color: #eef0f3 !important; color: #565d6e !important; }

/* Alerts — soft, left-accent style */
.alert {
    border: none;
    border-left: 4px solid transparent;
    border-radius: var(--dt-radius-sm);
}

.alert-success { background-color: #e8f8ef; color: #146c43; border-left-color: #146c43; }
.alert-danger { background-color: #fdeceb; color: #b02a37; border-left-color: #b02a37; }
.alert-warning { background-color: #fff6e0; color: #a15c00; border-left-color: #a15c00; }
.alert-info { background-color: #e7f6fb; color: #0a6a86; border-left-color: #0a6a86; }

/* Forms */
.form-control, .form-select {
    border-radius: var(--dt-radius-sm);
    border-color: var(--bs-border-color);
}

.form-control:focus, .form-select:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

.form-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: #4b5563;
}

/* Footer */
footer {
    color: #9aa0ad;
    border-top: 1px solid var(--bs-border-color) !important;
}

.min-vh-100 {
    min-height: 100vh;
}