/* Define Root Variables */
:root {
    --primary-color: #0b1120;
    --secondary-color: #3b82f6;
    --on-primary-color: #f1f5f9;
    --on-secondary-color: #e2e8f0;
}

/* Ensure the body takes full height */
html, body {
    height: 100%;
    margin: 0;
}

/* Define a consistent, dark-mode style consistent with the original banner imagery */
body {
    /*background-color: var(--primary-color); !* Deep dark blue background *!*/
    /*color: var(--on-primary-color); !* Light gray text *!*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Use Primary and Secondary Colors in Custom Styles */
body {
    color: var(--on-primary-color);
    background-color: var(--primary-color);
}

/* Optional: for footer if it's sticky at the bottom */
footer {
    background-color: #f8f9fa;
    padding: 10px;
    margin-top: auto;
}

.nav-link {
    color: white;
}

.rounded {
    border-radius: 1.25rem !important;
}

.card {
    border-radius: 24px;
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-color);
}

.card-header {
    border-radius: 24px 24px 0 0 !important;
    background-color: var(--secondary-color) !important;
    color: var(--on-secondary-color) !important;
}

.card-title-main {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.card-subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Floating Label Positioning */
.form-floating {
    position: relative;
    margin-bottom: 1.25rem;
}

.form-floating label {
    position: absolute;
    top: -2px;
    left: 0;
    transition: all 0.2s ease-in-out;
    color: var(--on-primary-color);
    padding-left: 1.25rem;
    padding-right: .75rem;
    pointer-events: none;
}

.form-control, .form-select {
    border-radius: 8px;
    padding-left: 20px !important;
    color: var(--on-primary-color);
    background-color: var(--primary-color);
}

.form-floating .form-control:focus,
.form-floating .form-select:focus {
    border-color: var(--secondary-color); /* Customize with the color you want */
    background-color: var(--primary-color);
    color: var(--on-primary-color);
    box-shadow: 0 0 0 0.2rem var(--secondary-color);
}

.form-floating .form-control:focus ~ label,
.form-floating .form-select:focus ~ label {
    color: var(--secondary-color) !important;
}

.form-floating .form-control:not(:placeholder-shown) ~ label,
.form-floating .form-control:focus ~ label,
.form-floating .form-select:not(:placeholder-shown) ~ label,
.form-floating .form-select:focus ~ label {
    top: -8px;
    color: var(--on-primary-color);
    background-color: var(--primary-color);
    opacity: 1;
    padding: 4px 4px 0px 4px;
    height: fit-content;
    margin-left: 15px;
    font-weight: 500;
}

.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-select:focus, .form-floating > .form-select:not(:placeholder-shown) {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.form-floating > .form-control.sm:focus, .form-floating > .form-control.sm:not(:placeholder-shown),
.form-floating > .form-select.sm:focus, .form-floating > .form-select.sm:not(:placeholder-shown) {
    height: 36px !important;

}
input[type="number"] {
    -moz-appearance: textfield; /* Hides it in Firefox */
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Hides it in Chrome/Safari */
    margin: 0;
}

/* Targets the calendar icon in Chrome, Edge, and Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
    /* Step 1: Invert to make it white/light */
    filter: invert(1);

    /* Step 2: Use sepia and hue-rotate to match your secondary cyan (#00f2ff) */
    /* These values are a close match for a bright cyan glow */
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(150deg) brightness(118%) contrast(119%);

    cursor: pointer;
    border-radius: 3px;
    padding: 2px;
}

/* Optional: Add a hover effect to make it feel interactive */
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(0, 242, 255, 0.1);
    transform: scale(1.1);
}

/* Styling the drag-and-drop container */
#file-drop-area {
    border: 3px dashed var(--primary-color); /* Purple dashed border */
    cursor: pointer;
    transition: all 0.3s ease;
}

#file-drop-area:hover {
    border-color: var(--primary-color);
}

#file-drop-area.border-primary {
    border-color: var(--primary-color) !important; /* Blue color when dragging over */
}

#file-info {
    font-size: 14px;
    padding: 10px;
}

#file-upload-link {
    cursor: pointer;
    text-decoration: underline;
}

.btn {
    border-radius: 1.25rem !important;
    height: 58px;
}

.divider {
    display: flex; /* Use Flexbox for alignment */
    align-items: center; /* Vertically centers the text and lines */
    text-align: center; /* Ensures text within is centered if needed */
    font-size: 1.25rem; /* Adjust text size as needed */
    font-weight: bold;
    color: var(--secondary-color); /* Adjust text color as needed */
}

.divider::before,
.divider::after {
    content: ''; /* Required for pseudo-elements to work */
    flex: 1; /* Allows lines to grow and fill available space */
    border-top: 1px solid var(--secondary-color); /* Defines the line style, color, and thickness */
    margin: 0 10px; /* Adds horizontal space between line and text */
}

/* Update these specific classes in your stylesheet */

.card-grid {
	display: grid;
	/* Forces exactly 2 columns on desktop */
	grid-template-columns: 1fr 1fr;
	gap: 40px; /* Increased gap for a cleaner look */
	margin-top: 20px;
}

.menu-card {
	background-color: #161e2e;
	border-radius: 20px; /* Rounder corners for larger cards */
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.3s ease;
}

/* Make the banner a bit taller since the card is wider */
.card-banner {
	height: 250px;
	background-size: cover;
	background-position: center;
	position: relative;
	border-radius: 20px 20px 0 0;
}

/* Adjust the icon to look more prominent */
.card-icon {
	position: absolute;
	bottom: -30px;
	left: 30px;
	width: 80px;
	height: 80px;
	background: #161e2e;
	border-radius: 15px;
	border: 2px solid #00f2ff; /* Added a thin cyan border to the icon frame */
	box-shadow: 0 8px 15px rgba(0,0,0,0.4);
}
.card-icon img {
	width: 100%;
	height: 100%;
	border-radius: 15px;
}

.card-content {
	padding: 45px 30px 30px 30px; /* More padding for a premium feel */
}

.card-title {
	font-size: 1.5rem; /* Larger title for wider cards */
	color: #ffffff;
	margin-bottom: 8px;
}

.card-desc {
	color: #94a3b8;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 8px;
}

.sidebar .nav-link .card-icon {
    position: static;
}

.sidebar .nav-link img {
    width: 36px;
    height: 36px;
    border-radius: 50%!important;
    margin-right: 8px;
}


/* Mobile Responsiveness: Stack to 1 column on small screens */
@media (max-width: 850px) {
	.card-grid {
		grid-template-columns: 1fr;
	}
}