/* --- Base Variables & Styles --- */
:root {
    --navy-blue: #1e3a8a;
    --light-blue: #3b82f6;
    --white: #ffffff;
    --gray: #6b7280;
    --green: #10b981;
    --red: #ef4444;
    --yellow: #f59e0b;
    --purple: #8b5cf6;
}

body {
    background-color: #f8f9fa;
    font-family: 'Open Sans', sans-serif;
}

/* --- Utility Classes --- */
.gradient-bg {
    background: linear-gradient(135deg, var(--navy-blue) 0%, var(--light-blue) 100%);
}

.card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.card-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.chart-container {
    position: relative;
    height: 300px;
}

.page-container {
    display: none; /* All pages hidden by default */
}

.page-container.active {
    display: block; /* Active page is shown */
}

/* --- Roster Specific Styles --- */
.officer-button.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.drop-zone.drag-over {
    background-color: #e2e8f0;
    border-style: solid;
}
.officer-mobile-item.selected {
    --tw-ring-color: var(--light-blue);
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}
.shift-column {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
}
.shift-header {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: var(--white);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shift-header-day { background-color: var(--light-blue); }
.shift-header-swing { background-color: var(--yellow); }
.shift-header-mid { background-color: var(--purple); }

/* --- Heatmap Calendar Styles --- */
.heatmap-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.heatmap-day {
    width: 100%;
    padding-bottom: 100%; 
    position: relative;
    background-color: #ebedf0;
    border-radius: 3px;
}
.heatmap-day-content {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--gray);
}
.heatmap-day[data-level='1'] { background-color: #9be9a8; }
.heatmap-day[data-level='2'] { background-color: #40c463; }
.heatmap-day[data-level='3'] { background-color: #30a14e; }
.heatmap-day[data-level='4'] { background-color: #216e39; }
.heatmap-day[data-level='3'] .heatmap-day-content,
.heatmap-day[data-level='4'] .heatmap-day-content {
    color: var(--white);
    font-weight: bold;
}
.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--gray);
}
.legend-box {
    width: 15px;
    height: 15px;
    border-radius: 3px;
}

/* --- Tooltip Styles --- */
.has-tooltip {
    position: relative;
    cursor: help;
}
.has-tooltip .info-icon {
    font-size: 0.8em;
    margin-left: 8px;
    color: var(--gray);
}
.has-tooltip:hover .info-icon {
    color: var(--light-blue);
}
.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #374151; /* gray-700 */
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    width: 280px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.has-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* --- Heatmap Tap Tooltip --- */
.heatmap-tap-tooltip {
    position: absolute;
    background-color: #1f2937; /* gray-800 */
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    max-width: 260px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    pointer-events: none;
}
.heatmap-tap-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
.heatmap-tap-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #1f2937;
}
.heatmap-tap-tooltip .tooltip-status {
    font-weight: 700;
    margin-bottom: 2px;
}
.heatmap-tap-tooltip .tooltip-names {
    font-weight: 400;
    opacity: 0.9;
}
.heatmap-tap-tooltip.arrow-up::after {
    top: -6px;
    bottom: auto;
    border-top: none;
    border-bottom: 7px solid #1f2937;
}

/* --- Print Specific Styles --- */
.print-only { display: none; }

@media print {
    body { background-color: #fff; font-size: 12pt; }
    .print-hide { display: none !important; }
    .print-only { display: block !important; }

    body * { visibility: hidden; }
    #print-roster-container, #print-roster-container * {
        visibility: visible;
    }
    #print-roster-container {
        position: absolute;
        left: 20px;
        top: 20px;
        right: 20px;
        width: auto;
    }
    .print-header-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #000;
        padding-bottom: 1rem;
    }
    .print-shift-wrapper {
        page-break-inside: avoid;
        break-before: page;
    }
    .print-shift-wrapper:first-child {
        break-before: auto;
    }
    .print-shift-title {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-size: 16pt;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.5rem;
    }
    .print-officer-list {
        list-style: none;
        padding: 0;
        margin: 0;
        column-count: 3;
        column-gap: 2rem;
    }
    .print-officer-list li {
        padding-bottom: 8px;
    }
    .print-footer {
        position: fixed;
        bottom: 20px;
        width: calc(100% - 40px);
        text-align: center;
        font-size: 10pt;
        color: var(--gray);
    }
}