/* public/css/style.css */

/* Define new primary color and other theme colors as CSS variables */
:root {
    --app-primary-color: #316087; /* Your new blue */
    --app-primary-color-rgb: 49, 96, 135; /* RGB version for Bootstrap opacity utilities */
    
    /* Light grey gradient - adjust shades and direction as needed */
    --light-grey-gradient-start: #f4f6f9; /* A slightly off-white, very light grey */
    --light-grey-gradient-end: #eaeaed;   /* A slightly darker, but still very light grey */
    --light-grey-gradient: linear-gradient(135deg, var(--light-grey-gradient-start) 0%, var(--light-grey-gradient-end) 100%);
}

body {
    padding-top: 5rem; /* Adjusted for potentially taller navbar with Bootstrap 5.3 styles */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fff; /* Default body background for main content pages */
}

/* --- Navbar Styling --- */
/* Override Bootstrap's default primary background with your new color */
.navbar.bg-primary {
    background-color: var(--app-primary-color) !important;
}

/* Ensure good contrast for navbar text if Bootstrap defaults aren't enough */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.85);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
}
.navbar-dark .navbar-brand {
    color: #fff;
}
/* Dropdown menu under dark navbar */
.navbar-dark .dropdown-menu {
    background-color: var(--app-primary-color); 
    border-color: rgba(255,255,255,0.2);
}
.navbar-dark .dropdown-item {
    color: rgba(255,255,255,.85);
}
.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus {
    color: #fff;
    background-color: rgba(255,255,255,.15);
}
.navbar-dark .dropdown-divider {
    border-top-color: rgba(255,255,255,0.2);
}


/* --- Button Styling --- */
/* Override Bootstrap primary buttons */
.btn-primary {
    background-color: var(--app-primary-color);
    border-color: var(--app-primary-color);
    /* Let Bootstrap handle text color, or set --bs-btn-color: #fff; */
}
/* Hover and active states for primary buttons */
.btn-primary:hover {
    /* You can define a darker shade of your primary color for hover */
    background-color: #285071; /* Example darker shade */
    border-color: #254a68;   /* Example darker shade */
}
.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-color-rgb), 0.5);
}
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background-color: #254a68; /* Example darker shade for active */
    border-color: #22425e;   /* Example darker shade for active */
}


/* Outline primary buttons */
.btn-outline-primary {
    --bs-btn-color: var(--app-primary-color);
    --bs-btn-border-color: var(--app-primary-color);
    --bs-btn-hover-bg: var(--app-primary-color);
    --bs-btn-hover-border-color: var(--app-primary-color);
    --bs-btn-active-bg: var(--app-primary-color);
    --bs-btn-active-border-color: var(--app-primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--app-primary-color-rgb); /* For focus ring */
}


/* --- Main Content Area --- */
main.container {
    flex: 1;
}

/* --- Footer Styling --- */
.footer {
    background: var(--light-grey-gradient);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid #dee2e6; 
    color: #495057; 
}
.footer a {
    color: var(--app-primary-color); 
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}


/* --- Auth Page Specific Styling --- */
body.auth-page-background {
    padding-top: 0; 
    background: var(--light-grey-gradient); 
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.auth-card { 
    width: 100%;
    max-width: 420px;
    padding: 30px; 
    margin: auto; 
    background-color: #fff; 
    border-radius: 0.375rem; 
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.075); 
    border: 1px solid #dee2e6; 
}
.auth-card .bi-journal-richtext { /* For the icon on auth pages */
    font-size: 3rem;
    color: var(--app-primary-color);
}


/* --- Utility Classes --- */
.hidden-fields {
    display: none !important;
}

/* Responsive iframe for maps */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    margin-top: 10px;
}
.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* Attachment item styling */
.attachment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}
.attachment-item a {
    text-decoration: none;
}
.attachment-item .bi {
    margin-right: 0.5rem;
}

/* Specific text color for links if Bootstrap's default link color is overridden by a global style */
a {
    /* color: var(--app-primary-color); */ /* Uncomment if you want ALL links to be your primary color by default */
}