/* Base Styles */
body {
    background-color: #f4f7fa;
    color: #002855;
}

header {
    background-color: #002855;
    color: #ffffff;
}

h2, h3 {
    color: #002855;
}

/* Unified Hover Color */
:root {
  --hover-color: rgba(255, 255, 255, 0.49);
}

/* Button Styles */
.btn-primary:active, .btn-primary:focus, .btn-primary {
    outline: none;
    box-shadow: none;
    background-color: #002855;
    border-color: #002855;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #001e3d;
    border-color: #001e3d;
    box-shadow: 0 4px 8px rgba(0, 40, 85, 0.2);
}

/* Table Styles */
.table-striped tbody tr:nth-of-type(odd, even) {
    background-color: #e7f1f8;
}

.table-bordered th, .table-bordered td {
    border-color: #002855;
}

/* Navigation Styles */
.navbar-nav .nav-link {
    color: #ffffff;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 4px;
}

.navbar-nav .nav-link:hover {
    background-color: var(--hover-color);
    color: #ffffff;
}

.btn-outline-light {
    color: #ffffff;
    border-color: #ffffff;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: var(--hover-color);
    border-color: #ffffff;
    color: #ffffff;
}

.btn-light {
    background-color: #ffd700;
    color: #002855;
    transition: all 0.3s ease;
}

.btn-light:hover {
    background-color: #002855;
    color: #ffd700;
}

/* Color Definitions */
:root {
  --primary-dark: #002855;
  --primary-accent: #FB4F14;
  --primary-accent-light: #E66C37;
  --error-light: #FFEAEA;
  --error-dark: #D80000;
  --success-light: #F0FFF0;
  --success-dark: #008000;
  --warning-light: #FFF8E6;
  --warning-dark: #E66C37;
}

/* Table Highlighting Styles */
.late-start {
    background-color: var(--warning-light) !important;
    color: var(--warning-dark) !important;
    border-left: 3px solid var(--primary-accent-light);
}

.late-end {
    background-color: var(--warning-light) !important;
    color: var(--warning-dark) !important;
    border-left: 3px solid var(--primary-accent-light);
}

.short-work {
    background-color: var(--warning-light) !important;
    color: var(--warning-dark) !important;
    border-left: 3px solid var(--primary-accent-light);
}

.long-work {
    background-color: var(--warning-light) !important;
    color: var(--warning-dark) !important;
    border-left: 3px solid var(--primary-accent-light);
}

.long-lunch {
    background-color: var(--warning-light) !important;
    color: var(--warning-dark) !important;
    border-left: 3px solid var(--primary-accent-light);
}

/* Unified Hover Effect */
tr:hover td {
    background-color: var(--hover-color) !important;
}

/* Table Header */
.table thead th  {
    background-color: var(--primary-dark);
    color: white;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 10;
}
.table thead th.clickable , th.color {
     background-color: var(--primary-dark);
}
.table thead th.color {
     background-color: var(--primary-dark);
}

/* Smooth transitions for all interactive elements */
a, button, .nav-link, tr, .btn {
    transition: all 0.3s ease;
}