/* --- Font Face Declarations --- */
@font-face {
    font-family: 'Big Text';
    src: url('/assets/fonts/bigText.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Long Text';
    src: url('/assets/fonts/longText.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Normal Text';
    src: url('/assets/fonts/normalText.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- Keyframe Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}


/* --- Color Scheme & Root Variables --- */
:root {
    /* Fonts */
    --font-main: 'Normal Text', sans-serif;
    --font-big: 'Big Text', sans-serif;
    --font-long: 'Long Text', sans-serif;

    /* Primary Palette (Indigo) */
    --primary: #4f46e5;
    --primary-light: #818cf8;
    --primary-dark: #3730a3;

    /* Grayscale */
    --background-light: #f1f5f9;
    --background-dark: #e2e8f0;
    --card-bg: #ffffff;
    --border-color: #e2e8f0; /* Softer border */
    
    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-on-primary: #ffffff;

    /* Action & Status Colors */
    --green: #22c55e; --green-dark: #15803d;
    --red: #ef4444;   --red-dark: #b91c1c;
    --blue: #3b82f6;  --blue-dark: #2563eb;
    --gold: #f59e0b;
    --pink: #ec4899;
    --gray: #6b7280;

    /* Shadows */
    --shadow-color: 220deg 40% 22%;
    --shadow-elevation-low: 0.2px 0.4px 0.5px hsl(var(--shadow-color) / 0.2), 0.4px 0.8px 1px -0.8px hsl(var(--shadow-color) / 0.2), 1.1px 2.1px 2.6px -1.7px hsl(var(--shadow-color) / 0.2);
    --shadow-elevation-medium: 0.2px 0.4px 0.5px hsl(var(--shadow-color) / 0.2), 0.9px 1.8px 2.2px -0.6px hsl(var(--shadow-color) / 0.2), 2.2px 4.4px 5.5px -1.1px hsl(var(--shadow-color) / 0.2), 5.4px 10.7px 13.4px -1.7px hsl(var(--shadow-color) / 0.2);
}

/* --- General & Layout --- */
body { font-family: var(--font-main); background-color: var(--background-light); color: var(--text-primary); }
.font-big-text { font-family: var(--font-big); }
.font-long-text { font-family: var(--font-long); }
.premium-card { background-color: var(--card-bg); border-radius: 0.75rem; border: 1px solid var(--border-color); box-shadow: var(--shadow-elevation-medium); animation: fadeIn 0.5s ease-out; }

/* --- Form Elements --- */
.premium-input, .premium-select { background-color: #f8fafc; border: 1px solid var(--border-color); border-radius: 0.375rem; padding: 0.5rem 0.75rem; transition: all 0.2s ease-in-out; }
.premium-input:focus, .premium-select:focus { background-color: var(--card-bg); border-color: var(--primary); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1); outline: none; }

#filter-form label {
    font-family: var(--font-big);
}

/* --- Buttons --- */
.btn {font-family: 'Big Text'; border-radius: 0.375rem; padding: 0.6rem 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border: none; box-shadow: var(--shadow-elevation-medium); transition: all 0.2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevation-high); }
.btn-primary { background: linear-gradient(to right, var(--primary), var(--primary-light)); color: var(--text-on-primary); }
.btn-secondary { background: linear-gradient(to right, #e2e8f0, #f1f5f9); color: var(--text-secondary); }
.btn-green { background: linear-gradient(to right, #10b981, #34d399); color: white; }
.btn-red { background: linear-gradient(to right, #ef4444, #f87171); color: white; }
.btn-blue { background: linear-gradient(to right, var(--blue), #60a5fa); color: white; }
.btn-gold { background: linear-gradient(to right, var(--gold), #fcd34d); color: white; }

/* --- Table --- */
.premium-table thead { background-color: #f8fafc; }
.premium-table tbody tr { transition: background-color: 0.15s ease-in-out; }
.premium-table tbody tr:hover { background-color: #eef2ff; /* Lighter Indigo */ }

/* --- Modal --- */
.premium-modal-backdrop { background-color: rgba(15, 23, 42, 0.85); animation: fadeIn 0.3s ease; }
.premium-modal { animation: fadeIn 0.3s ease; border: 1px solid var(--border-color); background-color: var(--card-bg); /* Ensure modal itself has a background */}
.premium-modal-body { background-color: var(--card-bg); /* Explicitly set body background */ }
.premium-modal-header { background-color: var(--background-dark); border-bottom: 2px solid var(--primary); }
.premium-modal-footer { background-color: #f8fafc; border-top: 1px solid var(--border-color); }

/* --- User Details Grid (Modal Content) --- */
.user-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.5rem 1.5rem; /* Vertical | Horizontal */ }
.user-details-item { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--border-color); background-color: var(--card-bg); /* NO TRANSPARENCY */}
.user-details-label { display: flex; align-items: center; font-weight: 500; color: var(--text-secondary); font-size: 0.9rem; }
.user-details-label i { margin-right: 0.85rem; color: var(--primary); width: 20px; text-align: center; }
.user-details-value { font-weight: 600; color: var(--text-primary); font-family: var(--font-long); text-align: right; }

/* --- Specific Icon Colors --- */
.icon-male { color: var(--blue) !important; }
.icon-female { color: var(--pink) !important; }
.icon-other { color: var(--gray) !important; }

/* --- Statistics Page --- */
.region-link { 
    display: block; /* Make the link a block to fill the space */
    padding: 0.75rem 1rem; /* Adjust padding as needed */
    color: var(--text-secondary); 
}
.region-link:hover { 
    background-color: #f4f4f5; /* Zinc 100 */ 
    color: var(--text-primary); 
}
.region-link.active {
    background-color: var(--primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-elevation-low);
    font-weight: 700;
}

.stat-summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #f8fafc;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.stat-summary-item i { font-size: 1.25rem; }

.th-cell, .td-cell {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.th-cell {
    font-family: var(--font-big);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Georgia Map SVG --- */
#georgia-map-container svg path {
    fill: #e2e8f0; /* Light Gray */
    stroke: #ffffff; /* White borders */
    stroke-width: 2;
    transition: fill 0.3s ease;
    cursor: pointer;
}

#georgia-map-container svg path:hover {
    fill: var(--primary-light);
}

#georgia-map-container svg path.active {
    fill: var(--primary);
}

#map-tooltip {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    min-width: 150px;
}