/* Fire Department Custom Color Palette - CSS Override */
/* This file applies the Slate Blue, Crimson, and Gold color scheme without modifying JavaScript */

/* ========================================
   PRIMARY COLOR: Slate Blue (#455A64)
   ======================================== */

/* Main Navigation Bar */
nav.bg-red-600 {
    background-color: #455A64 !important;
}

/* Active navigation items - darker slate blue */
nav .bg-red-700 {
    background-color: #3A4A54 !important;
}

/* Calendar view active tab background - light slate blue */
.bg-red-100 {
    background-color: #EEF1F3 !important;
}

/* Calendar view active tab text - slate blue */
.text-red-700 {
    color: #455A64 !important;
}

/* Chrome blues -> slate. Day view date header, primary fills, and anything else that
   asks for a solid blue.

   INC-2026-08-31-3150 / INC-2026-09-04-3800: the base classes are listed explicitly and the
   variants deliberately are NOT. This used to be `[class*="bg-blue"]`, a substring match on
   the whole class ATTRIBUTE -- so it also matched Tailwind's escaped variant classes
   (hover:bg-blue-50, focus:bg-blue-100, disabled:bg-blue-300, peer-checked:bg-blue-600) and
   painted them permanently. An element whose only blue was a hover tint got a dark fill it
   never asked for, and never got to be a hover state. `.bg-blue-600` does not match
   class="hover:bg-blue-600"; enumerating the base classes is what excludes the variants.

   Measured over netdutylite/*.js + *.html (119 files, dist/ and node_modules excluded):
   362 pale base tokens (bg-blue-50/100/200/300) + 359 variant-only tokens = 721 call sites
   were repainted that never asked for a background, against 410 chrome tokens (400-900)
   the rule is actually for.

   Same treatment the shiftcalendar theme was given on 2026-08-05 -- see the note at
   assets/shiftcalendar/shiftcalendar.css:164, which is where the boundary at 400 comes from.
   Reported by Allen twice on unrelated screens: 2026-08-31 "on the schedule grid, remove the
   background color", 2026-09-04 "the edit bid button and Bid on button should have clear
   backgrounds". */
.bg-blue-400,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.bg-blue-900,
div.bg-blue-600,
div.bg-blue-700,
.bg-blue-600.text-white {
    background-color: #455A64 !important;
}

/* Chrome blues deepen on hover, including a rest-state chrome blue that names a darker
   hover -- `bg-blue-600 hover:bg-blue-700` is the commonest pairing in this UI (270 call
   sites carry hover:bg-blue-700). The light hover tints are deliberately absent: a control
   that is transparent at rest has to be allowed to show its pale tint under the cursor. */
.bg-blue-400:hover,
.bg-blue-500:hover,
.bg-blue-600:hover,
.bg-blue-700:hover,
.bg-blue-800:hover,
.bg-blue-900:hover,
.bg-blue-700.text-white:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover,
.hover\:bg-blue-900:hover {
    background-color: #3A4A54 !important;
}

/* Events and Admin Notes headers - indigo to slate blue */
.bg-indigo-700,
div.bg-indigo-700,
.bg-indigo-600 {
    background-color: #455A64 !important;
}

.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
    background-color: #3A4A54 !important;
}

/* ========================================
   SECONDARY COLOR: Crimson (#DC143C)
   ======================================== */

/* Primary action buttons - crimson */
.bg-red-600:not(nav) {
    background-color: #DC143C !important;
}

/* Button hover states - darker crimson */
.bg-red-700:not(nav *),
.hover\:bg-red-700:hover:not(nav *) {
    background-color: #B0102F !important;
}

/* Alert and warning text - crimson */
.text-red-600 {
    color: #DC143C !important;
}

/* Alert borders and backgrounds */
.border-red-300 {
    border-color: #DC143C !important;
}

.bg-red-50 {
    background-color: #FEE2E2 !important;
}

/* ========================================
   ACCENT COLOR: Gold (#FFB300)
   ======================================== */

/* Special feature buttons - gold background, dark text */
button.bg-blue-600,
button.bg-cyan-500 {
    background-color: #FFB300 !important;
    color: #000000 !important;
}

button.bg-blue-600:hover,
button.bg-cyan-500:hover,
button.bg-cyan-600:hover {
    background-color: #E0A000 !important;
}

/* Gold accent links - but NOT when on blue backgrounds.
   INC-716: bright gold #FFB300 on white = 1.72:1 (fails WCAG AA). This rule repaints
   every .text-blue-600 element -- including the active tab label, clock times and hours
   across payroll -- so it was the single biggest contrast failure. Darkened to amber-700
   #B45309 (~4.9:1): readable, still gold family. Button-bg gold (above) keeps black text
   (~10:1) and is unchanged. */
/* Active tab -- gold FILL, black text (INC-716 follow-up, Allen 2026-07-31).
   The active tab was gold TEXT on white. #FFB300 is a light colour (relative
   luminance ~0.55), so against white its ceiling is 1.79:1 -- no shade of the brand
   gold can reach AA as text on white, which is why the first fix had to darken it to
   #B45309 and lost the gold look. Inverted instead: brand gold as the fill with black
   text = 11.70:1, the same treatment the feature buttons above already use.
   border-color is set so the underline matches the fill rather than staying blue. */
.tab-active-gold {
    background-color: #FFB300 !important;
    color: #000000 !important;
    border-color: #FFB300 !important;
    border-radius: 0.25rem 0.25rem 0 0;
}
/* INC-3800: the exclusions used to name the pale tints, because the rule above painted them
   dark slate. They are pale again, and amber-700 on a pale blue tint is both correct for the
   brand and higher contrast than Tailwind's blue would be -- so only the chrome fills, whose
   text is whitened further down, still need excluding. */
.text-blue-600:not(.bg-blue-400 *):not(.bg-blue-500 *):not(.bg-blue-600 *):not(.bg-blue-700 *):not(.bg-blue-800 *):not(.bg-blue-900 *) {
    color: #B45309 !important;
}

/* ========================================
   NEUTRAL COLORS
   ======================================== */

/* Off-white background */
.bg-gray-100 {
    background-color: #FAFAFA !important;
}

/* ========================================
   STATUS INDICATORS (keep green/orange)
   ======================================== */

/* Success/Meeting minimum - keep green */
.border-green-300 {
    border-color: #10B981 !important;
}

.bg-green-50 {
    background-color: #D1FAE5 !important;
}

/* ========================================
   RING COLORS (for today's date)
   ======================================== */

.ring-blue-500 {
    --tw-ring-color: #455A64 !important;
}

/* ========================================
   HOVER STATES
   ======================================== */

/* Navigation hover states */
nav .hover\:bg-red-500:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   TRANSITIONS (ensure smooth color changes)
   ======================================== */

button,
.transition-colors {
    transition: all 0.2s ease !important;
}

/* ========================================
   LAYOUT ADJUSTMENTS
   ======================================== */
.shift-table,
table.shift-table,
.shift-table > *,
.shift-table * {
  box-sizing: border-box !important;
}

.shift-table {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.shift-table thead,
.shift-table > thead {
  display: table-header-group !important;
}

.shift-table tbody,
.shift-table > tbody {
  display: table-row-group !important;
}

.shift-table tfoot,
.shift-table > tfoot {
  display: table-footer-group !important;
}

.shift-table tr,
.shift-table thead tr,
.shift-table tbody tr,
.shift-table > thead > tr,
.shift-table > tbody > tr {
  display: table-row !important;
  flex-direction: row !important;
}

.shift-table th,
.shift-table td,
.shift-table thead th,
.shift-table tbody td,
.shift-table > thead > tr > th,
.shift-table > tbody > tr > td {
  display: table-cell !important;
  vertical-align: middle !important;
  white-space: nowrap;
  flex-direction: row !important;
}
/* Constrain main content width and center it - desktop only */
@media (min-width: 1024px) {
    .min-h-screen > .p-6 {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Sidebar layout: offset main content on tablet+ only.
   Width follows the rail's expanded/collapsed state via --sidebar-w (set in app.js). */
.sidebar-main {
    margin-left: var(--sidebar-w, 70px);
    transition: margin-left 0.15s ease;
}
@media (max-width: 767px) {
    .sidebar-main {
        margin-left: 0;
    }
}

/* Personnel name and time - stack vertically (scoped to avoid breaking table headers) */
div.text-xs.text-gray-500,
span.text-xs.text-gray-500 {
    display: block !important;
    margin-top: 0.25rem !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
}

/* Name styling */
div.text-xs.text-gray-500 .text-sm,
span.text-xs.text-gray-500 .text-sm {
    display: block !important;
    font-size: 1rem !important;
    color: #000000 !important;
    font-weight: 500 !important;
    margin-bottom: 0.25rem !important;
}

/* ========================================
   CONTRAST FIXES FOR DARK BACKGROUNDS
   ======================================== */

/* CRITICAL FIX: The color overrides above change bg-blue-100 to dark slate blue #455A64 */
/* This means isToday dates (which use bg-blue-100) become dark and need white text */

/* Fix for elements with inline dark background styles */
[style*="background-color: #455A64"] *,
[style*="background-color:#455A64"] *,
[style*="background-color: rgb(69, 90, 100)"] *,
[style*="background-color:rgb(69, 90, 100)"] * {
    color: #FFFFFF !important;
}

/* Chrome blue fills are dark slate, so their contents go white.
   INC-3800: .bg-blue-50 and .bg-blue-100 were in this list and have been removed. They are
   pale blue again, and white text on #EFF6FF is about 1.1:1 -- invisible. This is the half
   of the fix that is easy to miss: narrowing the background rule above WITHOUT withdrawing
   these compensations makes the affected screens worse, not better. */
.bg-blue-400 *:not(input):not(select):not(textarea):not(option):not(button),
.bg-blue-500 *:not(input):not(select):not(textarea):not(option):not(button),
.bg-blue-600 *:not(input):not(select):not(textarea):not(option):not(button),
.bg-blue-700 *:not(input):not(select):not(textarea):not(option):not(button),
.bg-indigo-600 *:not(input):not(select):not(textarea):not(option):not(button),
.bg-indigo-700 *:not(input):not(select):not(textarea):not(option):not(button) {
    color: #FFFFFF !important;
}

/* Ensure form inputs inside blue backgrounds have dark text */
.bg-blue-50 input,
.bg-blue-50 select,
.bg-blue-50 textarea,
.bg-blue-100 input,
.bg-blue-100 select,
.bg-blue-100 textarea,
.bg-blue-600 input,
.bg-blue-600 select,
.bg-blue-600 textarea,
.bg-blue-700 input,
.bg-blue-700 select,
.bg-blue-700 textarea {
    color: #212836 !important;
    background-color: #ffffff !important;
}

/* Specific fix for calendar date buttons with any blue background */
/* INC-3800: button.bg-blue-50 / .bg-blue-100 removed -- pale fill, so a white label is
   invisible. Tailwind's own text colour on those tints is readable. */
button.bg-blue-400,
button.bg-blue-500,
button.bg-blue-600,
button.bg-blue-700,
button.bg-indigo-600,
button.bg-indigo-700,
button[style*="background-color: #455A64"],
button[style*="background-color: rgb(69, 90, 100)"] {
    color: #FFFFFF !important;
}

/* INC-3800: the rule that lived here forced white on .text-blue-600/700 inside .bg-blue-50
   and .bg-blue-100 -- correct only while those tints were painted dark slate. They are pale
   again (#EFF6FF / #DBEAFE), so it has been removed; Tailwind blue-700 on blue-100 is about
   8.6:1 on its own. The isToday date cell it was written for is a .bg-blue-100 chip.

   The archiver badge below was added to escape that rule. It is now redundant, and kept
   because it states the intended colour rather than relying on a default. */
.bg-blue-50 .archiver-status-log {
    color: #166534 !important; /* text-green-800 */
}

/* Fix for grid calendar specifically */
.grid button,
div[class*="grid-cols"] button {
    /* All calendar grid buttons with blue backgrounds need white text */
}

/* INC-3800: base classes, not [class*="bg-blue"]. `.grid` is a generic Tailwind layout
   class, so the substring form forced a white label on any CSS-Grid screen whose button
   merely named a blue hover -- including this file's own pale tints and, under the
   shiftcalendar theme, that theme's pale green (coder INC-901, Phil 2026-08-21).
   `div[class*="grid-cols"]` stays: grid-cols-7 etc. genuinely need a substring. */
.grid button.bg-blue-400,
.grid button.bg-blue-500,
.grid button.bg-blue-600,
.grid button.bg-blue-700,
.grid button.bg-blue-800,
.grid button.bg-blue-900,
.grid button.bg-indigo-500,
.grid button.bg-indigo-600,
.grid button.bg-indigo-700,
div[class*="grid-cols"] button.bg-blue-400,
div[class*="grid-cols"] button.bg-blue-500,
div[class*="grid-cols"] button.bg-blue-600,
div[class*="grid-cols"] button.bg-blue-700,
div[class*="grid-cols"] button.bg-blue-800,
div[class*="grid-cols"] button.bg-blue-900,
div[class*="grid-cols"] button.bg-indigo-500,
div[class*="grid-cols"] button.bg-indigo-600,
div[class*="grid-cols"] button.bg-indigo-700 {
    color: #FFFFFF !important;
}

/* Force white for a text-blue class sitting on a CHROME blue fill.

   INC-3800: this was `button[class*="bg-blue"].text-blue-600`, and it is the reason the fix
   above could not be applied on its own. The controls Allen reported are
   `text-blue-600 hover:bg-blue-50` with no resting background of their own -- the substring
   matched their hover variant, so narrowing only the background rule would have left them
   white text on a transparent (white) page. Base classes only. */
.bg-blue-400 .text-blue-600,
.bg-blue-500 .text-blue-600,
.bg-blue-600 .text-blue-600,
.bg-blue-700 .text-blue-600,
.bg-blue-800 .text-blue-600,
.bg-blue-900 .text-blue-600,
.bg-blue-400 .text-blue-700,
.bg-blue-500 .text-blue-700,
.bg-blue-600 .text-blue-700,
.bg-blue-700 .text-blue-700,
.bg-blue-800 .text-blue-700,
.bg-blue-900 .text-blue-700,
button.bg-blue-400.text-blue-600,
button.bg-blue-500.text-blue-600,
button.bg-blue-600.text-blue-600,
button.bg-blue-700.text-blue-600,
button.bg-blue-400.text-blue-700,
button.bg-blue-500.text-blue-700,
button.bg-blue-600.text-blue-700,
button.bg-blue-700.text-blue-700 {
    color: #FFFFFF !important;
}

/* INC-3800: a block of chip rules lived here forcing white on span[class*="bg-blue-100"].
   The chips are `bg-blue-100 text-blue-800`; that fill is pale again, so their own
   Tailwind colour reads at about 8.6:1 and the override is not needed. Removed rather
   than re-enumerated -- there is no chrome-blue chip for it to apply to. */

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tutorial mode - pulsing ring to draw attention */
@keyframes tutorial-ring-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.tutorial-pulse {
    animation: tutorial-ring-pulse 2s ease-in-out infinite;
    border-radius: 9999px;
}

/* Tutorial tooltip - appears on hover */
.tutorial-tip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 8px 12px;
    background: #1F2937;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 50;
    max-width: 220px;
    white-space: normal;
    text-align: center;
}

.tutorial-tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1F2937;
}

.tutorial-wrap:hover .tutorial-tip {
    opacity: 1;
}

/* For items at right edge, shift tooltip left */
.tutorial-tip-left {
    left: auto;
    right: 0;
    transform: none;
}
.tutorial-tip-left::before {
    left: auto;
    right: 12px;
    transform: none;
}

/* ========================================
   UTILITIES
   ======================================== */

/* Hide scrollbar but keep scrolling functionality */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* Responsive logo sizing */
nav img[alt*="Fire"] {
    height: 44px !important;
}

@media (min-width: 1024px) {
    nav img[alt*="Fire"] {
        height: 88px !important;
    }
}

/* Responsive navigation - force hide/show at 1024px breakpoint */
/* Hide desktop navigation on mobile */
nav div[class*="hidden"][class*="lg:flex"] {
    display: none !important;
}

/* Show desktop navigation on desktop */
@media (min-width: 1024px) {
    nav div[class*="hidden"][class*="lg:flex"] {
        display: flex !important;
    }
}

/* Show burger button on mobile */
nav button[class*="lg:hidden"] {
    display: block !important;
}

/* Hide burger button on desktop */
@media (min-width: 1024px) {
    nav button[class*="lg:hidden"] {
        display: none !important;
    }
}

/* Mobile dropdown menu - hide on desktop */
@media (min-width: 1024px) {
    nav div[class*="lg:hidden"][class*="absolute"] {
        display: none !important;
    }
}

/* ========================================
   TAILWIND TABLE RESET OVERRIDE
   Maximum specificity to override Tailwind Preflight
   ======================================== */

table.shift-table,
table.shift-table[class],
table[class*="shift-table"] {
    display: table !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table.shift-table thead,
table.shift-table[class] thead,
table[class*="shift-table"] thead {
    display: table-header-group !important;
}

table.shift-table tbody,
table.shift-table[class] tbody,
table[class*="shift-table"] tbody {
    display: table-row-group !important;
}

table.shift-table tr,
table.shift-table[class] tr,
table[class*="shift-table"] tr,
table.shift-table thead tr,
table.shift-table tbody tr {
    display: table-row !important;
}

table.shift-table th,
table.shift-table[class] th,
table[class*="shift-table"] th,
table.shift-table thead tr th {
    display: table-cell !important;
    padding: 0.75rem 1.5rem !important;
}

table.shift-table td,
table.shift-table[class] td,
table[class*="shift-table"] td,
table.shift-table tbody tr td {
    display: table-cell !important;
    padding: 1rem 1.5rem !important;
}
/* ========================================
   ACCESSIBILITY � Skip Link
   ======================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 100000;
    font-size: 14px;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}