/* Custom Brand Styling for Thư Viện */

/* Import Open Sans Font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* Override root font variables */
:root {
    /* Brand Colors */
    --brand-primary: #0082c6;
    --brand-primary-light: #00afef;
    --brand-primary-dark: #006699;
    --brand-primary-hover: #006699;

    /* Override Bootstrap primary colors */
    --bs-primary: #0082c6;
    --bs-primary-rgb: 0, 130, 198;

    /* Override font family */
    --bs-font-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --bs-body-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Ensure Open Sans is applied globally */
body,
.layout-wrapper,
.layout-container,
.content-wrapper,
.menu,
.navbar,
.card,
.btn,
input,
textarea,
select,
.form-control,
.form-select {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Brand color overrides for consistency */
.text-primary,
.link-primary {
    color: var(--brand-primary);
}

.text-primary:hover,
.link-primary:hover {
    color: var(--brand-primary-hover);
}

/* Keep article text and general links black */
.card-body p,
.card-text,
.article-content,
.content-text,
.description,
.post-content,
.blog-content,
.news-content {
    color: #000;
}

/* Keep general links in content areas black */
.card-body a:not(.btn):not(.link-primary),
.article-content a:not(.btn):not(.link-primary),
.content-text a:not(.btn):not(.link-primary),
.post-content a:not(.btn):not(.link-primary) {
    color: #000;
    text-decoration: none;
}

.card-body a:not(.btn):not(.link-primary):hover,
.article-content a:not(.btn):not(.link-primary):hover,
.content-text a:not(.btn):not(.link-primary):hover,
.post-content a:not(.btn):not(.link-primary):hover {
    color: #333;
    text-decoration: none;
}

.bg-primary {
    background-color: var(--brand-primary);
}

.border-primary {
    border-color: var(--brand-primary);
}

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* Navigation and menu styling with brand colors */
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
    background-color: var(--brand-primary);
}

.bg-menu-theme .menu-inner .menu-item .menu-link.active {
    color: var(--brand-primary);
}

.bg-menu-theme .menu-inner .menu-item .menu-link:hover {
    color: var(--brand-primary);
}

/* Form elements with brand colors */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 198, 0.25);
}

/* Progress bars */
.progress-bar {
    background-color: var(--brand-primary);
}

/* Badge and labels */
.badge.bg-primary {
    background-color: var(--brand-primary);
}

/* Custom utilities for brand colors */
.text-brand-primary {
    color: var(--brand-primary);
}

.text-brand-light {
    color: var(--brand-primary-light);
}

.bg-brand-primary {
    background-color: var(--brand-primary);
}

.bg-brand-light {
    background-color: var(--brand-primary-light);
}

.border-brand-primary {
    border-color: var(--brand-primary);
}

/* Logo and branding specific styling */
.logo-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--brand-primary);
}

/* Additional hover effects */
.btn-outline-primary {
    color: #000;
    border-color: var(--brand-primary);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #fff;
}

/* Ensure consistent font weights for Open Sans */
.fw-light {
    font-weight: 300;
}
.fw-normal {
    font-weight: 400;
}
.fw-medium {
    font-weight: 500;
}
.fw-semibold {
    font-weight: 600;
}
.fw-bold {
    font-weight: 700;
}
.fw-bolder {
    font-weight: 800;
}

/* Keep text content black for readability */
.card-title,
.card-subtitle,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #000;
}

/* Keep paragraph text black */
p:not(.text-primary):not(.text-brand-primary) {
    color: #000;
}

/* Keep list text black */
/* ul li:not(.text-primary),
ol li:not(.text-primary) {
    color: #000;
} */

/* Keep table text black */
.table td,
.table th {
    color: #000;
}

/* Override any global link color for content areas */
.card:not(.bg-primary) a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #000;
    text-decoration: none;
}

.card:not(.bg-primary) a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
.content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-link):hover {
    color: #333;
    text-decoration: none;
}