html {
    scroll-behavior: smooth;
}

/*Login screens and auth related*/

.login-card-header {
    background-color: var(--login-card-header-bg);
}

#login-form input[type="checkbox"] {
    accent-color: #1C4E80;
}

#login-form input:not([type="checkbox"]),
#register-form input:not([type="checkbox"]) {
    border: 1px solid #003745;
    padding: 5px;
    color: #0a4e5f !important;
    background-color: #f5f5f5;
    border-radius: 5px;
}

#login-form input[type="checkbox"],
#register-form input[type="checkbox"] {
    accent-color: #1C4E80;
    padding: 2px; /* adjust padding for visibility */
}

#topNavbar, #sidebar {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text-color) !important;
}

/*Corner Radius of Nav Items*/
.selected-menu-item,
a.submenu-item:hover {
    border-radius: 5px;
}

.submenu-item {
    text-align: right;
    background-color: var(--sidenav-submenu-item);
    color: var(--sidenav-submenu-item-text-color);
    border-radius: 5px;
}

/* Ensure both logos stay in place without affecting layout */
.logo-light, .logo-dark {
    position: absolute; /* Prevents layout shifting */
    top: 0;
    left: 0;
    width: 100%; /* Ensures they take up the same space */
    height: auto; /* Keeps aspect ratio */
}

/*Top Bar Notifcations badge*/
@keyframes pulse-badge {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.notification-badge-wrapper {
    position: absolute;
    top: -6px; /* Adjust to visually tuck over avatar edge */
    left: -6px;
    width: 32px; /* Tap zone width */
    height: 32px; /* Tap zone height */
    padding: 0;
    background: transparent;
    border: none;
    z-index: 10;
}

.badge-content {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #dc3545;
    color: white;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    animation: pulse-badge 1.5s infinite;
    line-height: 1;
}

/* ============ Notifications List Cleanup ============ */
.notifications-list {
    border-radius: 0.375rem;
    overflow: hidden;
}

/* Each row in the notification list */
.notification-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.3rem 1rem !important;
    border-top: 1px solid var(--notif-border-color);
    border-bottom: 1px solid var(--notif-border-color);
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* Subtle hover like Gmail */
.notification-row:hover {
    background-color: var(--notif-hover-bg);
    cursor: pointer;
}

.notification-striped {
    background-color: var(--notif-stripe-bg);
}

/*============================================================
 Mobile-specific overrides for cards and related containers
LOTS OF ADJUSTMENTS TO STRIP ALL THE CARDS OFF OF THEIR BORDERS
AND ALSO TO MAKE SURE THE PADDING AND MARGINS ARE MINIMAL IN ORDER
TO MAXIMIZE THE REAL ESTATE ON THE MOBILE DEVICES
==============================================================*/
@media (max-width: 576px) {
    .py-4 {
        padding: 0 !important;
    }

    .div#container {
        padding: 0 !important;
    }

    .team-header {
        margin: 0 !important;
    }

    .rounded {
        margin: 0 !important;
    }

    .g3 {
        padding: 0 !important;
    }

    .row-cols-md-3 {
        padding: 0 !important;
    }

    .col-md-6 {
        padding: 0 !important;
    }

    .p-3 {
        padding: 0 !important;
    }

    .border {
        border-collapse: collapse !important;
        border-style: none !important;
    }

    /* Force the layout wrapper to use the full width */
    #layoutWrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Remove default browser padding/margin from body if needed */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove borders and extra spacing from cards */
    #swipeBooksCard, #swipeDailyLog,
    #swipeWorkCard, #swipeCalendar {
        padding: 0.2rem 1rem !important;
    }

    #daily-log-content {
        padding: 0.2rem 1rem !important;
    }

    #daily-log-managers-notes {
        padding: 0.2rem 1rem !important;
    }

    #daily-log-adjustments {
        padding-top: 3rem !important;
    }

    /* Full width for card elements if they are inside any grid or flex containers */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        border: none !important;
        margin: 0 !important;
        padding: 2px !important;
        box-shadow: none !important;

    }

    .card .card-header {
        padding: 0.5rem 0.2rem !important;
    }


#topNavbar {
    padding: 0rem 0.5rem;
}

/* Optionally adjust internal card spacing if you still want a little breathing room */

.card .card-body,
.card .card-footer {
    padding: 0.2rem !important; /* adjust this value as needed */
    margin: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-style: none !important;
}
}

/* If your card containers or grid system elements have extra gutter paddings, you might override them as well */
.container-fluid,
.row,
.col,
.noYGutter {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

main#mainContent {
    padding-top: 1rem;
    padding-left: 0; /*COMMENTED OUT TO FIX SIDE NAV OFFSET*/
    padding-right: 0 !important;
    /* margin: 0;      COMMENTED OUT TO FIX SIDE NAV OFFSET*/
}

/* Ensure the layout container stacks its children vertically */
#layoutWrapper {
    flex-direction: column !important;
    /*width: 100% !important;*/
    padding: 0 !important;
    margin: 0 !important;
}

/* Only target the manager notes rows using the custom class */
.manager-notes-row {
    /* Stack the children vertically instead of side by side */
    flex-direction: column !important;
    align-items: flex-start !important;
}

.manager-notes-row > span {
    /* Each span should take the full available width */
    width: 100%;
}

/* Optionally add spacing between the category and the note */
.manager-notes-row > span:first-child {
    margin-bottom: 0.5rem;
}

/* Remove extra left padding on the note if required */
.manager-notes-row > span:last-child {
    padding-left: 0 !important;
}

/* subbtle line separator   */
.mobile-hr {
    border: none;
    border-top: 1px dashed var(--hr-color);
    margin: 1.5rem 0;
}

/* tighter spacing subbtle line separator  */
.mobile-hr-sm {
    border: none;
    border-top: 1px dashed var(--hr-color);
    margin: 0.1rem 0;
}

.modal {
    padding: 0 !important;
    margin: 0 !important;
}

.modal-content {
    padding: 0 !important;
    margin: 0 !important;
}

.sticky-top {
    padding: 0 !important;
    margin: 0 !important;
}

/*VARIOUS LAYOUT SWAPS FOR MOBILE AND DESKTOP*/
/* Default: show desktop version, hide mobile version */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/*MOBILE NOTIFICATIONS CARD TWEAKS*/
#card-notifications, #card-header-notifications {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Media Query for Mobile (screens less than 768px wide) */
@media (max-width: 767.98px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }
}

@media (min-width: 768px) {
    .notification-row {
        flex-direction: row;
        align-items: center;
    }
}


/*=============================================================
Floating Action Button FAB -  related styles
===============================================================*/
/* Radial Menu Container:
      - Fixed position container for the FAB and menu items
      - Positioned 20px from the bottom and right of the viewport
      - Size is set to 56px by 56px, matching the FAB dimensions
   */
.radial-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    z-index: 1100;
}

/* Floating Action Button (FAB):
   - A circular button with a diameter of 56px
   - Centered icon, blue background with white color, and a box-shadow for depth
   - Uses relative positioning and a higher z-index to appear above the menu items
*/
.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1300 !important;
}

/* Menu Items:
   - The individual navigation items that appear when the FAB is activated
   - Slightly smaller than the FAB (48px size), circular, and white background
   - Uses absolute positioning for placement relative to the FAB
   - Initially hidden (opacity: 0) and positioned at (0,0) relative to the FAB
   - Transition with an elastic cubic-bezier for transform and smooth opacity change
*/
.fab-menu-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    transform: translate(0, 0);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
    z-index: 1200 !important;
}

/* Open state for menu items in a radial arc (from left to top):
   - When the radial menu has the "open" class, each menu-item moves to its designated position along the arc
   - Each item uses a CSS transform to translate from the FAB's position and becomes visible (opacity: 1)
*/
.radial-menu.open .fab-menu-item.item1 {
    transform: translate(-80px, 0);
    opacity: 1;
}

.radial-menu.open .fab-menu-item.item2 {
    transform: translate(-70px, -40px);
    opacity: 1;
}

.radial-menu.open .fab-menu-item.item3 {
    transform: translate(-40px, -70px);
    opacity: 1;
}

.radial-menu.open .fab-menu-item.item4 {
    transform: translate(0, -80px);
    opacity: 1;
}

/* ============ Notifications List Cleanup ============ */
.notifications-list {
    border-radius: 0 !important;
    overflow: hidden;
}

/* Each row in the notification list */
.notification-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--notif-border-color);
    border-bottom: 1px solid var(--notif-border-color);
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* Subtle hover like Gmail */
.notification-row:hover {
    background-color: var(--notif-hover-bg);
    cursor: pointer;
}

/* Alternating stripes using :nth-child in light theme */
.notifications-list .notification-row:nth-child(odd) {
    background-color: var(--notif-stripe-bg);
}


/* ===================================================
   Light Theme Defaults (Variables and Styles)
   =================================================== */

/* Light Theme Variables */
:root {
    --bs-body-bg: #e8e8e8 !important; /* Light background */
    --bs-body-color: #212529 !important; /* Text color */
    --bs-card-cap-bg: #afafaf !important; /* Card cap background */
    --login-card-header-bg: #005f7d;
    --hr-color: #007bff; /* HR separator for mobile only orange/red for light theme */

    /*Sticky header for cards (Light Theme)*/
    --sticky-bg: var(--bs-body-bg) !important;
    --sticky-shadow: rgba(0, 0, 0, 0.05); /*Not currently in use*/

    /*FAB - Floating Action Button*/
    --fab-bg-color: #1C4E80;
    --fab-text-color: #fff;
    --fab-menu-item-bg-color: #1C4E80;
    --fab-menu-item-text-color: #fff;

    /*Notifications Theme Variables Light Theme*/
    --notif-border-color: rgba(0, 0, 0, 0.05) !important;
    --notif-hover-bg: rgba(0, 0, 0, 0.025) !important;
    --notif-stripe-bg: rgba(0, 0, 0, 0.01) !important;

    /* Module button color variables (light theme) */
    --modules-button-bg: #1C4E80;
    --modules-button-bg-hover: #496e98;
    --modules-button-color: #fff;

    /*DL Color Variables (Light Theme) */
    --team-header-color: #a5c6ea;
    --team-header-text-color: #3d628a;
    --team-header-amount-text-color: #000000;

    /*Form control color variables (light theme) */
    --form-control-color: #d1d1d1;
    --form-control-border-color: #999;

    /*General Text variables (light theme) */
    --profile-container: #3d628a;
    --profile-name: #3d628a;

    /*General drop down Login/Account Settings menu variables (light theme) */
    --dropdown-bg: #e8e8e8; /* Dropdown background (light mode) */
    --dropdown-text-color: #3d628a; /* Dropdown text color (light mode) */
    --dropdown-hover-bg: #1C4E80; /* Dropdown hover background (light mode) */
    --dropdown-hover-text-color: #e8e8e8; /* Dropdown hover text color (light mode) */
    --dropdown-border-color: #1C4E80; /* Dropdown border color (light mode) */

    /*General side Nav Menu Variables (light Theme) */
    --sidenav-menu-item-selected: #1C4E80;
    --sidenav-menu-item-selected-text-color: #ffffff;
    --sidenav-submenu-item: #a5c6ea;
    --sidenav-submenu-item-text-color: #3d628a;
    --sidenav-submenu-item-hover: #1C4E80;
    --sidenav-submenu-item-hover-text-color: #ffffff;

    --navbar-bg: #e8e8e8;
    --navbar-text-color: #999;
    --card-header-bg: #bfbfbf;
}

/* === Light Mode Scrollbar Styling === */
/* Global scrollbar styling for Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 #e8e8e8;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

/* For WebKit Browsers */
::-webkit-scrollbar {
    width: 10px; /* Thin scrollbar */
}

::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 5px;
}

/*FAB - FLoating Action Button light theme Styles*/
.fab {
    background: var(--fab-bg-color);
    color: var(--fab-text-color);
}

.fab-menu-item {
    background: var(--fab-menu-item-bg-color);
    color: var(--fab-menu-item-text-color);
}

/* Light Theme Button Styles */
.modules_button {
    background-color: var(--modules-button-bg) !important;
    color: var(--modules-button-color) !important;
}

.modules_button:hover {
    background-color: var(--modules-button-bg-hover) !important;
}

/* Other light theme styles */
.text-primary {
    color: #3d628a !important;
}

.selected-menu-item {
    background-color: var(--sidenav-menu-item-selected) !important;
    color: var(--sidenav-menu-item-selected-text-color) !important;
    border-radius: 5px;
}

a.submenu-item:hover {
    background-color: var(--sidenav-submenu-item-hover);
    color: var(--sidenav-submenu-item-hover-text-color) !important;
}

.logo-light {
    opacity: 1;
}

.logo-dark {
    opacity: 0;
    pointer-events: none;
}

/*Light Theme Profile Container*/
#profileContainer {
    color: var(--profile-container) !important;
}

.profile-name {
    color: var(--profile-name) !important;
}

.dropdown-menu {
    background-color: var(--dropdown-bg) !important;
}

.dropdown-item {
    color: var(--dropdown-text-color) !important;
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text-color) !important;
}

.card-header {
    background-color: var(--card-header-bg) !important;
}

.form-control-sm,
.form-control,
.form-select,
.form-select-sm {
    background-color: var(--form-control-color);
    border-color: var(--form-control-border-color);
}

/*Light Theme DL Styles*/
.team-header {
    background-color: var(--team-header-color);
    color: var(--team-header-text-color);
    cursor: pointer;
}

.team-header-amount {
    color: var(--team-header-amount-text-color);
}

/* Sticky header for cards (Light Theme) */
.sticky-themed-header {
    background-color: var(--sticky-bg) !important;
    /*box-shadow: 0 2px 4px var(--sticky-shadow);*/
}


/* ===================================================
   Dark Theme Overrides
   =================================================== */
[data-bs-theme="dark"] {
    /* Dark Theme Variables */
    --bs-primary: #C38F5D !important;
    --bs-body-bg: var(--navbar-bg) !important;
    --bs-body-color: #e0e0e0 !important;
    --bs-card-cap-bg: var(--card-header-bg) !important;
    --login-card-header-bg: #0a4d5f;
    --navbar-bg: #003745;
    --navbar-text-color: #f8f9fa;
    --card-header-bg: #04262e;
    --hr-color: #C38F5D; /* HR separator for mobile only orange/red for light theme */


    /*FAB - Floating Action Button*/
    --fab-bg-color: #0a4d5f;
    --fab-text-color: #d1935e;
    --fab-menu-item-bg-color: #0a4d5f;
    --fab-menu-item-text-color: #d1935e;

    /*Notifications Theme Variables Dark Theme*/
    --notif-border-color: rgba(255, 255, 255, 0.08) !important;
    --notif-hover-bg: rgba(255, 255, 255, 0.05) !important;
    --notif-stripe-bg: rgba(255, 255, 255, 0.02) !important;

    /* Dark Theme Button Variables */
    --modules-button-bg: rgb(195, 143, 93);
    --modules-button-bg-hover: #d1935e;
    --modules-button-color: #183e43;

    /*DL Color Variables (Light Theme) */
    --team-header-color: #04262e;
    --team-header-text-color: #C38F5D;
    --team-header-amount-text-color: #ffffff;

    /*Dark Theme Form control color variable */
    --form-control-color: #003745;
    --form-control-border-color: #26647a;

    /*Dark Theme General Text variable (light theme) */
    --profile-container: #d1935e;
    --profile-name: #d1935e;

    /*General drop down menu variables (light theme) */
    --dropdown-bg: #003745; /* Dropdown background*/
    --dropdown-text-color: #d1935e; /* Dropdown text color*/
    --dropdown-hover-bg: #C38F5D; /* Dropdown hover background*/
    --dropdown-hover-text-color: #003745; /* Dropdown hover text color (light mode) */
    --dropdown-border-color: #ddd; /* Dropdown border color */

    /*General side Nav Menu Variables (Dark Theme) */
    --sidenav-menu-item-selected: #C38F5D;
    --sidenav-menu-item-selected-text-color: #003745;
    --sidenav-submenu-item: #04262e;
    --sidenav-submenu-item-text-color: #C38F5D;
    --sidenav-submenu-item-hover: #C38F5D;
    --sidenav-submenu-item-hover-text-color: #003745;
}

/* === Dark Mode Scrollbar Styling === */

[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body {
    scrollbar-width: thin;
    scrollbar-color: #005f7d #003745 !important;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #003745 !important;
    border-radius: 5px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #005f7d !important;
    border-radius: 5px;
}

/*FAB - Floating Action Icon Dark Theme Styles*/

[data-bs-theme="dark"] .fab {
    background: var(--fab-bg-color);
    color: var(--fab-text-color);
}

[data-bs-theme="dark"] .fab-menu-item {
    background: var(--fab-menu-item-bg-color);
    color: var(--fab-menu-item-text-color);
}

/* Dark Theme Button Overrides */
[data-bs-theme="dark"] .modules_button {
    background-color: var(--modules-button-bg) !important;
    color: var(--modules-button-color) !important;
}

[data-bs-theme="dark"] .modules_button:hover {
    background-color: var(--modules-button-bg-hover) !important;
}

/* Other dark theme overrides */
[data-bs-theme="dark"] .text-primary {
    color: #C38F5D !important;
}

[data-bs-theme="dark"] .submenu-item {
    background-color: var(--sidenav-submenu-item) !important;
    border-radius: 5px;
}

[data-bs-theme="dark"] .selected-menu-item {
    background-color: var(--sidenav-menu-item-selected) !important;
    color: var(--sidenav-menu-item-selected-text-color) !important;
}

[data-bs-theme="dark"] a.submenu-item:hover {
    background-color: var(--sidenav-submenu-item-hover) !important;
    color: var(--sidenav-submenu-item-hover-text-color) !important;
}

[data-bs-theme="dark"] .login-card-header {
    background-color: var(--login-card-header-bg);
}

[data-bs-theme="dark"] #topNavbar,
[data-bs-theme="dark"] #sidebar {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text-color) !important;
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--card-header-bg) !important;
}

/*Dark Theme Profile Container*/
[data-bs-theme="dark"] #profileContainer {
    color: var(--profile-container) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--dropdown-text-color) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover {
    color: var(--dropdown-hover-text-color) !important;
}

[data-bs-theme="dark"] .profile-name {
    color: var(--profile-name) !important;
}

[data-bs-theme="dark"] #topNavbar,
[data-bs-theme="dark"] #sidebar {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text-color) !important;
}

[data-bs-theme="dark"] .logo-light {
    opacity: 0;
    pointer-events: none;
}

[data-bs-theme="dark"] .logo-dark {
    opacity: 1;
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--card-header-bg) !important;
}

[data-bs-theme="dark"] .form-control-sm,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-select-sm {
    background-color: var(--form-control-color);
    border-color: var(--form-control-border-color);
}

/*Dark Theme DL Styles*/
[data-bs-theme="dark"] .team-header {
    background-color: var(--team-header-color);
    color: var(--team-header-text-color);
    cursor: pointer;
}

[data-bs-theme="dark"] .team-header-amount {
    color: var(--team-header-amount-text-color);
}


/* Sticky header for cards dark theme */

[data-bs-theme="dark"] .sticky-themed-header {
    background-color: var(--bs-body-bg) !important;
    box-shadow: 0 2px 4px var(--sticky-shadow);
}

/*Notifications Styles Dark Theme*/
[data-bs-theme="dark"] .notification-row {
    border-top: 1px solid var(--notif-border-color);
    border-bottom: 1px solid var(--notif-border-color);
}

[data-bs-theme="dark"] .notification-row:hover {
    background-color: var(--notif-hover-bg);
}

[data-bs-theme="dark"] .notifications-list .notification-row:nth-child(odd) {
    background-color: var(--notif-stripe-bg);
}
/* beg cort - daily log - custom css for tip sheet when displayed landscape on mobile on bigger phones*/
   /* make DL take full width on bigger phones */
@media (orientation: landscape) and (min-width: 840px) and (max-width: 1000px) {
    .landscape-narrow {
        max-width: 100%;
        margin: 0 auto;  /* center it */
    }
}
    /* make TIP sheet take most of width and height in landscape on bigger phones */
@media (max-width: 967.98px) and (orientation: landscape) {
    .modal-dialog.modal-lg.modal-fullscreen-landscape {
        /* ditch Bootstrap’s fixed max-width */
        max-width: none;

        /* size to 90% of viewport */
        width: 90vw;
        height: 90vh;

        /* center vertically (5vh top & bottom) and horizontally (auto left & right) */
        margin: 5vh auto;

        /* no extra padding around the dialog itself */
        padding: 0;
    }

    .modal-fullscreen-landscape .modal-content {
        /* fill the dialog box */
        height: 100%;

        /* optional: preserve your normal border-radius or tweak as you like */
        border-radius: 0.5rem;
    }

    .modal-fullscreen-landscape .modal-body {
        max-height: 95vh;
        /* allow scrolling if content overflows */
        overflow-y: auto;
    }
}
/* end cort */