/* This CSS file is used to style the EnView application. It includes styles for the main layout, navigation, and various components. */
/**{
    color:azure;
    background-color:transparent;
}
*/
/*.control-label, .headerText {
    color: GrayText;
}
*/
/* Basic theme tokens + component overrides for demo-like look */

/* Optional: import a web font (move to _Layout head if you prefer) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
    /* colors */
    --primary: #1b6ec2;
    --primary-700: #155aa0;
    --accent: #ff7a45;
    --muted: #6c757d;
    --bg: #f6f8fb;
    --card-bg: #ffffff;
    /* spacing / radii */
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --radius: 0.5rem;
    --shadow-soft: 0 6px 18px rgba(0,0,0,0.08);
    /* typography */
    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --base-font-size: 14px;
}
/* Normalize various hard-coded blues to the theme */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 80%, black 20%) !important;
    color: #fff !important;
}
    /* Normalize various hard-coded blues to the theme */
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--primary) !important;
        border-color: color-mix(in srgb, var(--primary) 80%, black 20%) !important;
        color: #fff !important;
    }
/* Tabs / custom tab buttons that used #0d6efd */
.tab-btn.active,
.tab-btn.active a,
.tab-buttons .tab-btn.active {
    background-color: rgba(27,110,194,0.08) !important;
    border-bottom: 3px solid var(--primary) !important;
}

/* Image checked border */
.image-item input[type="checkbox"]:checked + img,
.image-item input[type="checkbox"]:checked ~ img {
    border-color: var(--primary) !important;
}

/* fallback for any selector using old bootstrap primary hex */
*[style*="#0d6efd"],
*[style*="#007bff"],
*[style*="#1b6ec2"] {
    /* no-op selector to make it easier to find remaining inline styles in devtools */
}
/* Base */
html, body {
    font-family: var(--font-sans);
    font-size: var(--base-font-size);
    background: var(--bg);
    color: #222;
    /* background image covers entire viewport */
    background-color: var(--bg); /* fallback color */
    background-image: url('/en-ground.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* remove if you don't want the parallax/stable effect */
}

/* Navbar style */
.navbar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-bottom: 1px solid rgba(27,110,194,0.06);
    box-shadow: var(--shadow-soft);
}

.navbar .nav-link {
    color: #123a6b;
    font-weight: 600;
    white-space: nowrap;
}

.navbar .nav-link:hover {
    color: var(--primary-700);
}
/* Constrain navbar logo so it doesn't change navbar height */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 4px; /* optional spacing if you add text next to the logo */
}

.navbar-logo {
    max-height: 32px; /* adjust this to match your navbar height (increase/decrease as needed) */
    height: auto;
    width: auto;
    display: block;
    object-fit: contain;
    align-self: center;
}

/* Slightly larger logo on wider screens if desired */
@media (min-width: 992px) {
    .navbar-logo {
        max-height: 40px;
    }
}
/* Cards */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(16,24,40,0.04);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: rgba(27,110,194,0.18);
}

/* Tab buttons — keep your custom look consistent */
.tab-btn {
    background: transparent;
    border-radius: calc(var(--radius) / 2);
    padding: 0.5rem 0.75rem;
}

    .tab-btn.active {
        background: rgba(27,110,194,0.08);
        border-bottom: 3px solid var(--primary);
    }

/* Modal theme */
.modal, .edit {
    background: rgba(10,20,40,0.45);
}
.modal, .delete {
    background: rgba(10,20,40,0.45);
}
.modal, .sort {
    background: rgba(10,20,40,0.45);
}
.edit-content, .modal-content {
    border-radius: 0.5rem;
    overflow: hidden;
}

.edit-content .modal-header {
    background: var(--primary);
    color: #fff;
}
.delete-content .modal-header {
    background: var(--primary);
    color: #fff;
}
.sort-content .modal-header {
    background: var(--primary);
    color: #fff;
}
.edit-content .modal-footer {
    background: #fff;
}

/* Dropzone preview tweaks */
.dropzone {
    background: rgba(255,255,255,0.9);
    border-radius: 0.5rem;
    border: 1px dashed rgba(0,0,0,0.08) !important;
}

/* Table headers */
.table thead th {
    background: #fff;
    font-weight: 600;
}

/* Utility small adjustments */
.text-muted {
    color: var(--muted) !important;
}

.small-gap {
    gap: var(--gap-sm);
}
/* Powered-by footer */
.powered-footer {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.92);
    padding: 0.25rem 0.5rem;
    border-radius: 0.3125rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    z-index: 1200;
    font-size: 0.85rem;
    color: #333;
    text-decoration: none;
}

.powered-footer img {
    height: 20px;
    width: auto;
    display: block;
}
a {
    color: var(--primary);
}