.error-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.error-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    color: #dc3545;
}
.btn-home {
    margin-top: 20px;
    padding: 10px 25px;
}

/* Sidebar brand colour — scoped so non-sidebar bg-gradient-primary elements are untouched */
.sidebar.bg-gradient-primary {
    background-color: #8a56c2 !important;
    background-image: linear-gradient(180deg, #8a56c2 10%, #6a3ea0 100%) !important;
}

/* Login screen background — scoped to body so buttons or other elements using
   .bg-gradient-primary aren't affected. Matches the sidebar gradient so the
   login transitions cleanly into the app shell once the user signs in. */
body.bg-gradient-primary {
    background-color: #8a56c2 !important;
    background-image: linear-gradient(180deg, #8a56c2 10%, #6a3ea0 100%) !important;
}

/* Widen the sidebar to accommodate the wordmark logo */
.sidebar {
    width: 16rem !important;
}

/* Taller brand area + white pill behind the wordmark logo */
.sidebar .sidebar-brand {
    height: auto !important;
    padding: 16px 8px !important;
}
.sidebar .sidebar-brand .brand-logo-box {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar .sidebar-brand .brand-logo-box img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Push the first nav item down a little so it doesn't crowd the logo */
.sidebar .sidebar-divider:first-of-type {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Caret arrows on expandable sidebar items — SB Admin 2's built-in caret rule
   (styles2.css:10549) uses Bootstrap 4's `data-toggle` attribute, but our sidebar
   markup uses Bootstrap 5's `data-bs-toggle`, so the built-in rule never matches
   and the carets disappear. Re-declare it for the BS5 selector. */
@media (min-width: 768px) {
    .sidebar .nav-item .nav-link[data-bs-toggle="collapse"]::after {
        width: 1rem;
        text-align: center;
        float: right;
        vertical-align: 0;
        border: 0;
        font-weight: 900;
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        color: rgba(255, 255, 255, 0.75);
    }
    .sidebar .nav-item .nav-link[data-bs-toggle="collapse"].collapsed::after {
        content: '\f105';
    }
}

/* Submenu items (inside the light-background dropdown panels) — use brand purple
   for hover and active state instead of SB Admin 2's default blue (#4e73df).
   The dropdown panel background is white so purple text is readable. */
.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
    color: #8a56c2 !important;
}

/* Restore native HH:MM picker on time inputs. SB Admin 2's styles2.css zeroes
   out -webkit/-moz/appearance on input[type="time"].form-control, which also
   suppresses the browser's clock icon and up/down steppers. The Daily Work
   Rule form (and other rule/filter pages) rely on the HTML5 native time
   picker, so restore its default UI chrome. Scoped to time only — date /
   datetime-local / month keep the vendor's plain appearance. */
input[type="time"].form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}