@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"); /* Font Awesome Icons */
:root {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.9);
    --primary-blue: #005A9C;
    --vista-green: #4C9900;
}
html {
    /*background: linear-gradient(180deg, #3B8DBD 0%, #82C3EA 25%, #85C769 75%, #4FA320 100%) fixed no-repeat;*/
    background: linear-gradient(180deg, #82C3EA 0%, #3B8DBD 25%, #012858 75%, #00082a 100%) fixed no-repeat;
    width: 100%;
    min-height: 100%;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    margin: 0;
    padding: 40px 0;
}
.aero-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 25px;
    border-radius: 15px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    border: 1px solid var(--glass-border);
}
h1, h2, h3, h4 { color: #003366; margin-top: 0; margin-bottom: 10px; }
h2:has(i.fa-arrow-up-right-from-square):not(:hover) > i { display: none; }

/* Layout */
.flex-row { display: flex; gap: 20px; flex-wrap: wrap; }
.col-3 { flex: 1; min-width: 280px; }
.col-full { width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* Cards & Boxes */
.user-controls {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
/* Dynamic Grid for Comparison */
.compare-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Tag Input System */
#compare-wrapper { width: 100%; padding-right: 5px; }
#compareForm { display: flex; }
#compareInput { height: 37px; }
.tag-input-container {
    background: #fff; border: 1px solid #ccc; border-radius: 20px;
    padding: 5px; display: inline-block; position: relative; 
    min-height: 38px; box-sizing: border-box;
}
.tag-input-container.search-bar {
    width: 100%;
    padding: 4px;
    margin-bottom: 0;
}
.tag {
    background: #005A9C; color: white; padding: 2px 8px; border-radius: 12px;
    font-size: 0.85em; top: 1px; position: relative;
}
.tag:first-of-type { background: var(--vista-green); }
.tag:nth-of-type(2) { background: #e05a00; }
.tag:nth-of-type(3) { background: #6600cc; }
.tag-remove { cursor: pointer; font-weight: bold; }
.tag-input-container input {
    border: none;
    outline: none;
    font-size: 0.95em;
    background: none;
    position: relative;
    top: 2px;
}
.suggestions-list {
    position: absolute; top: 55%; left: 0; right: 0;
    background: white; border: 1px solid #ccc; border-radius: 20px;
    /*max-height: 200px;*/ overflow-y: auto; z-index: 100; display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%;
}
.suggestion-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; }
.suggestion-item:hover, .suggestion-item.active { background: #f0f8ff; color: #005A9C; }
.suggestion-msg {
    padding: 12px 15px;
    color: #888;
    font-size: 1em;
    cursor: default;
    background: #f9f9f9;
}
.card {
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    height: 100%;
    box-sizing: border-box;
}
/* Dashboard Top Cards: Force content to fill height */
.grid-3 .card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure card fills the grid cell */
}

.grid-3 .card .table-responsive {
    flex-grow: 1; /* Pushes the table to fill remaining space */
}

.grid-3 .card table {
    height: 100%; /* Forces rows to distribute the height evenly */
}
.card.user-not-found {
    color: darkred;
    font-size: 1.2em;
    font-weight: bold;
    align-content: center;
    text-align: center;
}
.card-header { font-weight: bold; border-bottom: 2px solid #fff; margin-bottom: 10px; padding-bottom: 5px; color: #004080; }

/* Stats Widget */
.stat-box {
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0,0,0,0.05);
}
.stat-val { font-size: 1.4em; font-weight: bold; color: #005A9C; display: block; word-wrap: break-word; }
.stat-val a { font-weight: bold; }
.stat-label { font-size: 0.85em; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }

/* Buttons & Inputs */
.btn-aero {
    background: linear-gradient(180deg, #e6f5ff 0%, #b3d9ff 49%, #80bfff 50%, #b3d9ff 100%);
    border: 1px solid #66a3ff;
    border-radius: 20px;
    padding: 6px 15px;
    color: #003366;
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none !important;
    display: inline-block;
    transition: transform 0.1s;
    text-align: center;
    align-content: center;
    cursor: pointer;
}
.btn-aero:hover, .btn-aero.active { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 0 5px #66a3ff; }
.btn-aero.active { background: linear-gradient(180deg, #b3d9ff 0%, #80bfff 100%); color: #002244; }
.compare-button { height: 37px; padding: 7px; border-radius: 50%; }

.search-bar {
    width: 100%; padding: 12px; border-radius: 25px;
    border: 2px solid #fff; background: rgba(255,255,255,0.8);
    font-size: 1.1em; outline: none; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box; margin-bottom: 0.5em;
}

/* Global Search Dropdown Styles */
.category-header {
    background: #f0f0f0;
    color: #666;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 10px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #ddd;
    cursor: default; /* Not clickable */
}

.search-all-option {
    text-align: center;
    font-weight: bold;
    color: #005A9C;
    background: #e6f5ff;
    border-top: 1px solid #b3d9ff;
}

.page-input {
    width: 60px; padding: 5px; border-radius: 10px; border: 1px solid #ccc; text-align: center;
}

label {
    color: #036;
    font-weight: bold;
    align-content: center;
}

/* Tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 300px; }
.ordinal { max-width: fit-content !important; width: 3.05em; text-align: right; }
tr:first-of-type .ordinal:not(.suppress-ordinal) { font-size: 1.2em; color: goldenrod; font-weight: bold; }
tr:nth-of-type(2) .ordinal:not(.suppress-ordinal) { font-size: 1.2em; color:#838996; font-weight: bold; }
tr:nth-of-type(3) .ordinal:not(.suppress-ordinal) { font-size: 1.2em; color: #CD7F32; font-weight: bold; }
tr:first-of-type .ordinal:not(.suppress-ordinal):not(.suppress-ordinal-star)::before { content: "★ "; color: goldenrod; font-size: 1.2em; }
th { background: rgba(0, 90, 156, 0.1); padding: 8px; text-align: left; border-bottom: 2px solid #fff; white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.5); vertical-align: middle; }
tr:hover td { background: rgba(255,255,255,0.5); }

.badge { background: #4C9900; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; float: right; }

/* Links */
a { color: #005A9C; text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

/* Advanced Search Panel */
/* --- ADVANCED SEARCH PANEL (Aero Style) --- */
.adv-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider columns */
    gap: 20px;
    margin-bottom: 25px;
}

.form-group { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.form-group label { 
    font-size: 0.85em; 
    font-weight: bold; 
    color: #004080; /* Darker blue for contrast */
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    margin-left: 5px; /* Slight indent */
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.form-input {
    padding: 10px 12px;
    border: 1px solid #aaccff; /* Soft blue border */
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95em;
    color: #333;
    
    /* The Aero Glass Look */
    background: rgba(255, 255, 255, 0.6); 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    background: #fff;
    border-color: #005A9C;
    box-shadow: 0 0 8px rgba(102, 175, 255, 0.6); /* Blue Glow */
}

/* Customizing the Date Inputs specifically */
input[type="datetime-local"] {
    color: #555;
    font-family: 'Segoe UI', sans-serif; /* Ensures better rendering on Windows */
}

.adv-footer {
    background: rgba(0, 90, 156, 0.05); /* Very faint blue background */
    border-top: 1px solid #b3d9ff; 
    padding: 15px; 
    margin: 10px -15px -15px -15px; /* Negative margin to flush with card edges */
    border-radius: 0 0 10px 10px; /* Round bottom corners only */
    
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.time-footer {
    margin-top: 10px;
    display: grid;
    grid-auto-flow: column;
    padding: 0 10px;
}

.time-footer-form {
    text-align: right;
}

.no-data-msg {
    color: #666;
    text-align: center;
    padding: 40px;
}

/* Mobile Tweak: Stack footer on small screens */
@media (max-width: 600px) {
    .adv-footer { flex-direction: column; text-align: center; }
    .adv-footer > span { margin-bottom: 10px; }
    .adv-footer > div { width: 100%; display: flex; gap: 10px; }
    .adv-footer .btn-aero { flex: 1; }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .aero-container { margin: 10px; padding: 15px; }
    .search-bar { font-size: 1em; }
    .suggestions-list { top: 54%; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .flex-row { flex-direction: column; }
    .nav-actions { display: flex; flex-direction: column; gap: 10px; }
    .nav-actions .btn-aero { width: 100%; box-sizing: border-box; }
    .next-prev-text { display: none; }
    .user-controls { flex-direction: column; align-items: stretch !important; }
    .sort-buttons { display: flex; gap: 5px; justify-content: space-between; margin-bottom: 10px; }
    .sort-buttons .btn-aero { flex: 1; padding: 6px 5px; font-size: 0.8em; }
    #compareForm { display: flex; width: 100%; }
    #compareForm input { flex-grow: 1; }
    .tag { top: 2px; }
    .compare-button { position: unset; }
    .time-footer { text-align: center; grid-auto-flow: row; }
    .time-footer-form { text-align: center; }
}
@media (max-width: 900px) {
    .grid-3 { grid-template-columns: 1fr; }
    .ordinal { width: 3.2em; }
}