:root {
    /* Brand colors */
    --depot-navy: #2f3947;
    --depot-blue: #3274d6;
    --depot-blue-dark: #2868c7;
    --depot-gold: #fdb614;

    /* Page backgrounds */
    --bg-login: #435165;
    --bg-page: #dde1e8;

    /* Neutral palette */
    --gray-100: #f3f4f7;
    --gray-200: #eaebed;
    --gray-300: #e6e6e6;
    --gray-400: #dddddd;
    --gray-500: #c1c4c8;
    --gray-600: #888888;
    --gray-700: #5b6574;
    --gray-800: #4a536e;

    /* Table row alternation */
    --row-alt: #e5e4e1;

    /* Semantic colors */
    --color-success: #6bcf7f;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-error: red;

    /* Status indicators */
    --status-green: #6bcf7f;
    --status-yellow: #ffc107;
    --status-orange: #fd7e14;
    --status-red: #dc3545;
    --status-blue: #4a90d9;

    /* Row action buttons */
    --btn-checkin: #6bcf7f;
    --btn-route: #f08080;
    --btn-backup: #9bb8d3;
    --btn-notice: #f5e6a0;

    /* Form colors */
    --form-border: #dee0e4;

    /* Highlight colors */
    --highlight-absent: lightpink;

    /* Common neutrals */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Navigation tab colors */
    --nav-tab-bg: #44525c;
    --nav-link-text: #f2f2f2;

    /* Table row alternation */
    --table-header-bg: #e9ecef;
    --table-row-odd-bg: #ffffff;
    --table-row-even-bg: #f2f4f6;

    /* Gradient */
    --gradient-start: #94a3b8;
}

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    margin-left: .4rem;
}

/* Override Bootstrap 5 fluid heading typography */
h1 { font-size: 1.1rem; }
h2 { font-size: 1.05rem; }
h3, h4, h5, h6 { font-size: 1rem; }

/* Section page title */
#page_container > h1:not(:empty) {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--depot-navy);
    padding: .5rem 0 .5rem 0;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--depot-gold);
}


body {
  	background-color: var(--bg-login);
  	margin: 0;
}

/* ****************** Nav Bar Style ******************* */
#navBlock{
  padding: 0px;
  border-bottom: 3px solid var(--depot-gold);
}
#navHeader{
  padding: 0px;
  border-spacing: 10px 2px;
}
.topnav {
    overflow: hidden;
    background-color: var(--depot-navy);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.topnav a {
    float: left;
    display: block;
    color: var(--nav-link-text);
    text-align: center;
    padding: 2px 10px;
    text-decoration: none;
    font-size: 17px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: var(--nav-tab-bg);
    border-top: .05em solid var(--table-header-bg);
    border-left: .05em solid var(--table-header-bg);
}
.topnav a:hover {
    background-color: var(--gray-400);
    color: var(--color-black);
}
#nav_search_results a {
    float: none;
    display: block;
    color: #333;
    text-align: left;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    background-color: white;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: 1px solid #eee;
}
#nav_search_results a:hover {
    background-color: var(--gray-100);
    color: #333;
}
.topnav a.active {
    background-color: var(--color-white);
    color: var(--color-black);
}
.topnav .icon {
    display: none;
}
#navTitle{
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight:bolder;
}
#navLogo {
    border-radius: 2px;
}
.logo-bg-dark  { display:inline-block; background:#2f3947; padding:4px 8px; border-radius:4px; }
.logo-bg-light { display:inline-block; background:#ffffff; padding:4px 8px; border-radius:4px; }
#ApplicationOverlay{
    display:none;
}

@media screen and (max-width: 900px) {
    .topnav a:not(:first-child){
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        border-bottom: .1px solid #566573a1;
    }
    #navTitle{
        color: var(--color-white);
        font-weight:bolder;
        font-size:larger;
    }
}

@media screen and (max-width: 600px) {
    #ApplicationOverlay {
        display:block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index:99;
        background-color: var(--color-white);
    }
}

.login_img {
	background-color: var(--color-white);
}

.login {
  	max-width: 400px;
	width: calc(100% - 32px);
  	background-color: var(--color-white);
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
	  text-align: center;
}
.login h1 {
  	text-align: center;
  	color: var(--gray-700);
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid var(--form-border);
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: var(--depot-blue);
  	color: var(--color-white);
}
.login form input[type="password"], .login form input[type="text"] {
  	max-width: 310px;
	width: 100%;
  	height: 50px;
  	border: 1px solid var(--form-border);
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: var(--depot-blue);
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: var(--color-white);
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: var(--depot-blue-dark);
  	transition: background-color 0.2s;
}




.navtop {
	background-color: var(--depot-navy);
	height: 60px;
	width: 100%;
	border: 0;
}
.navtop div {
	display: flex;
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
	height: 100%;
}
.navtop div h1, .navtop div a {
	display: inline-flex;
	align-items: center;
}
.navtop div h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: var(--gray-200);
	font-weight: normal;

}
.navtop div a {
	padding: 0 20px;
	text-decoration: none;
	color: var(--gray-500);
	font-weight: bold;
}
.navtop div a i {
	padding: 2px 8px 0 0;
}
.navtop div a:hover {
	color: var(--gray-200);
}


body.loggedin {
	background-color: var(--bg-page);
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}
.content {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid var(--gray-300);
	color: var(--gray-800);
}
.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: var(--color-white);
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: var(--gray-800);
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

.profile_photo{
	max-width:100px;
	max-height:100px;
}

.error{
	color: var(--color-error);
}










/* =====================================================
   Global form element styling
   Applies a Bootstrap 5 form-control aesthetic to all
   plain inputs/selects/textareas without needing
   class="form-control" on every element in every section.
   Login form inputs are excluded via higher-specificity
   .login form input rules below.
   ===================================================== */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    padding: .375rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1.5px solid #adb5bd;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    vertical-align: middle;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

input[type="submit"] {
    display: inline-block;
    padding: .375rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-white);
    background-color: var(--depot-navy);
    border: 1px solid var(--depot-navy);
    border-radius: .375rem;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

input[type="submit"]:hover {
    background-color: var(--depot-blue-dark);
    border-color: var(--depot-blue-dark);
}

/* Wire Bootstrap 5 primary color to depot brand */
:root {
    --bs-primary: var(--depot-navy);
    --bs-primary-rgb: 47, 57, 71;
    --bs-link-color: var(--depot-blue);
    --bs-link-hover-color: var(--depot-blue-dark);
}

/* Override Bootstrap 5 primary button to use depot navy */
.btn-primary {
    --bs-btn-bg: var(--depot-navy);
    --bs-btn-border-color: var(--depot-navy);
    --bs-btn-hover-bg: var(--depot-blue-dark);
    --bs-btn-hover-border-color: var(--depot-blue-dark);
    --bs-btn-active-bg: var(--depot-blue-dark);
    --bs-btn-active-border-color: var(--depot-blue-dark);
    --bs-btn-disabled-bg: var(--depot-navy);
    --bs-btn-disabled-border-color: var(--depot-navy);
}
/* Override Bootstrap 5 secondary button to use a slate that harmonizes with navy */
.btn-secondary {
    --bs-btn-bg: #546273;
    --bs-btn-border-color: #546273;
    --bs-btn-hover-bg: #43505f;
    --bs-btn-hover-border-color: #43505f;
    --bs-btn-active-bg: #43505f;
    --bs-btn-active-border-color: #43505f;
    --bs-btn-disabled-bg: #546273;
    --bs-btn-disabled-border-color: #546273;
    background-color: #546273 !important;
    border-color: #546273 !important;
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: #43505f !important;
    border-color: #43505f !important;
}

/* Navigation page links */
.menu_link {
    display: block;
    text-decoration: none;
    color: var(--depot-navy);
    font-weight: 500;
    padding: .65rem .75rem .65rem .85rem;
    margin-bottom: 0;
    border-radius: 0;
    border-left: 4px solid rgba(253,182,20,.35);
    border-bottom: 1px solid rgba(0,0,0,.15);
    background-color: rgba(47,57,71,.03);
    transition: background-color .15s, color .15s, border-left-color .15s;
}

.menu_link:last-of-type {
    border-bottom: none;
}

.menu_link:hover {
    background-color: var(--depot-navy);
    color: var(--color-white);
    border-left-color: var(--depot-gold);
}

/* Suppress <br> spacers that follow nav links */
a.menu_link + br,
a.menu_link + br + br {
    display: none;
}

/* Group title inside a nav-card — navy header band */
.nav-card-title {
    background: var(--depot-navy);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    padding: .45rem .75rem;
    margin: 0 0 .25rem;
    border-radius: .5rem .5rem 0 0;
    border-bottom: 3px solid var(--depot-gold);
}

/* Card container for nav page link lists */
.nav-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

/* Row of nav-cards — Admin/Dispatch multi-group layout */
.nav-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.nav-cards-row .nav-card {
    flex: 1;
    min-width: 200px;
    width: auto;
}

@media (max-width: 768px) {
    .nav-card { min-width: 100%; width: 100%; }
    .nav-cards-row { flex-direction: column; }
}

/* Nav page grouped list — replaces nav-cards-row on zone pages */
.nav-menu {
    padding: 1.5rem;
    columns: 2;
    column-gap: 3rem;
}
.nav-menu-group {
    break-inside: avoid;
    margin-bottom: 2px;
}
.nav-menu-heading {
    background: var(--depot-navy);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem .75rem;
}
.nav-menu-heading .fas,
.nav-menu-heading .far,
.nav-menu-heading .fab {
    color: var(--depot-gold);
    margin-right: .4rem;
}
.nav-menu .menu_link {
    background: #fff;
    display: block;
    padding: .35rem .75rem;
}
.nav-menu .menu_link:hover {
    background-color: var(--row-alt);
    color: inherit;
}
@media (max-width: 768px) {
    .nav-menu { columns: 1; }
}

.linkBtn{
    display:inline-block;
    background-color: var(--depot-navy);
    text-decoration:none;
    width:fit-content;
    color: var(--color-white);
    text-align:center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    border: 2px solid var(--color-white);
    border-radius:10px;
    outline: 1px solid var(--color-black);
}

.widget_link,.widget_link:hover,a.widget_link:visited{
    color: var(--color-black);
    text-decoration: none!important;
    font-weight: normal;
}
.widget-card-body summary,
.widget-card-body .widget-row-summary,
.widget-card-body .widget-row-summary * {
    font-weight: 600;
    color: var(--color-black);
}





/* from div_table_style */

            /* param tables */
            .param_table { 
                display: table; 
                border-collapse: separate;
                border-spacing: 10px;
            }
            .param_header {
                display: table-cell;
                font-weight: bold;
                vertical-align: top;
            }
            .param_row { 
                display: table-row; 
            }
            .param_cell { 
                display: table-cell; 
                vertical-align: top;
            }
            .param_label{
                font-weight: 600;
                display: block;
                float: right;
            }

            /* search form tables */
            .search_table { 
                display: table; 
                border-collapse: separate;
                border-spacing: 10px;
              }
            .search_header {
                display: table-cell;
                font-weight: 600;
              }
            .search_row { 
                display: table-row; 
              }
            .search_cell { 
                display: table-cell; 
              }
            .search_label{
                text-decoration:underline; 
                font-weight: bold;
                display: block;
                float: right;
              }

            /* query results tables */
            .results_table { 
                display: table; 
                border-collapse: separate;
            }
            .results_header {
                display: table-cell;
                font-weight: bold;
                text-decoration:underline;
                background-color: var(--table-header-bg);
                vertical-align: top;
                padding-left: 5px;
                padding-top:2px;
                padding-bottom:2px;
                padding-right: 5px;
            }
            .results_header_row {
                display: table-row;
                background-color: var(--table-header-bg);
            }

            .results_row {
                display: table-row;
            }

            .results_row1 {
                display: table-row;
                background-color: var(--table-row-odd-bg);
            }
            .results_row2 {
                display: table-row;
                background-color: var(--table-row-even-bg);
            }
            .results_cell { 
                display: table-cell; 
                vertical-align: top;
                padding-left: 5px;
                padding-top:2px;
                padding-bottom:2px;
                padding-right: 5px;
            }
            .results_label{
                text-decoration:underline; 
                font-weight: bold;
                display: block;
                float: right;
            }
            
            .results_group {
                    display: table-row-group; 
                }

            .results_caption {
                /*border:1px solid grey;*/ 
                caption-side: bottom; 
                display: table-caption; 
                text-align: left; 
            }


            /* query profile tables */
            .profile_table { 
                display: table; 
                border-collapse: separate;
            }
            .profile_header {
                display: table-cell;
                font-weight: bold;
                text-decoration:underline;
                background-color: var(--table-header-bg);
                vertical-align: top;
                padding-left: 5px;
                padding-top:2px;
                padding-bottom:2px;
                padding-right: 5px;
            }
            .profile_header_row {
                display: table-row;
                background-color: var(--table-header-bg);
            }

            .profile_row {
                display: table-row;
            }

            .profile_row1 {
                display: table-row;
                background-color: var(--table-row-odd-bg);
            }
            .profile_row2 {
                display: table-row;
                background-color: var(--table-row-even-bg);
            }
            .profile_cell { 
                display: table-cell; 
                vertical-align: top;
                padding-left: 5px;
                padding-top:2px;
                padding-bottom:2px;
                padding-right: 5px;
            }
            .profile_label{
                text-decoration:underline; 
                font-weight: bold;
                display: block;
                float: right;
            }
            
            .profile_group {
                    display: table-row-group; 
                }

            .profile_caption {
                /*border:1px solid grey;*/ 
                caption-side: bottom; 
                display: table-caption; 
                text-align: left; 
            }


        /* standad div table */
        .table{ 
            display: table; 
            padding: 1vw;
            vertical-align: top;
        }
        .th { 
            display: table-cell; 
            font-weight: bold; 
            text-decoration:underline; 
            vertical-align: top;
        }
        .tr{ 
            display: table-row; 
            padding: 1vw;
            vertical-align: top;
        }
        .td{ 
            display: table-cell; 
            padding: 1vw;
            margin: 1vw;
            vertical-align: top;
        }

/* from pages/Dispatch.php */
/* div table */

	.menuTable{
		display:  table;
		width:auto;
	}

	.menuRow{
		display:table-row;
		width:auto;
		}

	.menuCell{
			float:left;/*fix for  buggy browsers*/
			display:table-column;
			width:25vw;
			/* width:22vw;*/
			/*margin-right: 4vw;*/
		}
	
/* small screen size */
@media only screen and (max-width: 600px) {		
		.menuTable{
			display:  table;
			width:auto;
		}

		.menuRow{
			display:table-row;
			width:auto;
			}

		.menuCell{
				float:left;/*fix for  buggy browsers*/
				display:table-column;
				width:auto;
				/* width:22vw;*/
				/*margin-right: 4vw;*/
			}
		}
        
        

        .ui-jqgrid .ui-jqgrid-titlebar {
            background: var(--depot-navy);
            color: var(--color-white);
            font-weight:bold;
            border-radius: 10px 10px 0px 0px;
            border-bottom: 3px solid var(--depot-gold);
        }      
        
        .ui-jqgrid{
            border-radius: 10px 10px 0px 0px;
        } 
        
        #phpGrid_div{
          padding-top:.5vh;
        }

        .ui-jqgrid .ui-jqgrid-toppager {
            background: var(--table-header-bg);
            border-bottom: .1vh solid gray;
        }

        .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr, .ui-th-ltr {
            background: var(--table-row-even-bg);
        }

        .ui-jqgrid .ui-jqgrid-toppager .ui-pg-button {
            cursor: pointer;
            
        }

        .ui-jqgrid .ui-jqgrid-hdiv {
            background: var(--table-row-even-bg);
        }

        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
            background: var(--table-row-even-bg);
        }

        #page_container{
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            margin-left:1vw;
            margin-right:1vw;
            padding: 1rem 0 0;
        }

#page_container .param_table,
#page_container .search_table {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Standardize widget card borders on Home page to match form card style */
#first > div {
    border: 1px solid #dee2e6 !important;
    border-radius: .5rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

#first > div > a > h1,
#first > div > h1 {
    border-radius: .5rem .5rem 0 0 !important;
}

#first > div > div {
    border-radius: 0 0 .5rem .5rem !important;
}

/* Status circle indicators */
.status-circle {
    display: inline-block;
    width: 2vh;
    height: 2vh;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
    vertical-align: middle;
}
.status-circle-sm {
    display: inline-block;
    width: 1.5vh;
    height: 1.5vh;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
    vertical-align: middle;
}
.status-circle-lg {
    display: inline-block;
    width: 3vh;
    height: 3vh;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
    vertical-align: middle;
}
.status-green { background-color: var(--status-green); }
.status-yellow { background-color: var(--status-yellow); }
.status-orange { background-color: var(--status-orange); }
.status-red { background-color: var(--status-red); }
.status-blue { background-color: var(--status-blue); }
.status-white { background-color: var(--color-white); border: 1px solid #ccc; }

/* BigBoard check-in status icons */
.bb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    font-size: 0.75em;
    color: #fff;
    vertical-align: middle;
}
.bb-icon-green { background-color: var(--status-green); }
.bb-icon-orange { background-color: var(--status-orange); }
.bb-icon-red { background-color: var(--status-red); }
.bb-icon-gray { background-color: #adb5bd; }
.bb-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; align-items: center; }
.bb-legend-item { display: inline-flex; align-items: center; gap: 5px; color: #333; }
.bb-legend-item .bb-icon { width: 18px; height: 18px; font-size: 10px; }
.bb-legend-item i:not(.bb-icon) { font-size: 18px !important; line-height: 1; vertical-align: middle; }

/* Status messages (shared across sections) */
.error_display { color: var(--color-error); }
.success_display { color: var(--color-success); }

@media print {
    .noprint { display: none !important; }
}

/* Section navigation buttons (pill-shaped, replaces image buttons) */
.nav-btn {
    display: inline-block;
    background-color: var(--depot-navy);
    color: var(--color-white);
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 14px;
    border: 2px solid var(--depot-navy);
    border-radius: 20px;
    outline: 1px solid var(--gray-600);
    cursor: pointer;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
}
.nav-btn:hover {
    background-color: var(--depot-blue);
    border-color: var(--depot-blue);
    color: var(--color-white);
    text-decoration: none;
}
.nav-btn i { margin-right: 4px; }

/* Prev/Next circular navigation buttons */
.nav-btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: var(--depot-navy);
    color: var(--color-white);
    border: 2px solid #555;
    border-radius: 50%;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    vertical-align: middle;
}
.nav-btn-circle:hover {
    background-color: var(--depot-blue);
    border-color: var(--depot-blue);
    color: var(--color-white);
}

/* Inline row action buttons (square, single-letter, for BigBoard tables) */
a.row-btn, span.row-btn, .row-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.2vh;
    height: 2.2vh;
    font-size: 1.4vh !important;
    font-weight: bold;
    color: var(--color-black) !important;
    background-color: var(--gray-400);
    border: 1px solid rgba(0,0,0,0.35);
    border-radius: 3px;
    text-decoration: none !important;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}
a.row-btn:hover, span.row-btn:hover, .row-btn:hover { opacity: 0.8; }
a.row-btn-actions {
    background-color: #2f3947;
    border-color: #2f3947;
    border-radius: 50%;
    color: #fff !important;
    font-size: 1.1vh !important;
}
a.row-btn-actions:hover { opacity: 1; background-color: #1e2730; border-color: #1e2730; }
.row-btn-group {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
#routes_table td a.row-btn {
    font-size: 1.4vh !important;
    padding: 0;
    margin: 0;
}
#routes_table td:last-child, #routes_table th:last-child { width: 1%; padding-left: 4px; padding-right: 0.8vh; text-align: right; white-space: nowrap; }
.row-btn-checkin  { background-color: var(--btn-checkin) !important; }
.row-btn-route    { background-color: var(--btn-route) !important; }
.row-btn-backup   { background-color: var(--btn-backup) !important; }
.row-btn-notice   { background-color: var(--btn-notice) !important; }

/* ****************** BigBoard Styles ******************* */

.bbrow1 { background-color: var(--color-white); }
.bbrow2 { background-color: var(--row-alt); }
.bbrow1:hover, .bbrow2:hover { background-color: lightblue; }
a.sortLink, a.sortLink:visited { color: var(--color-black); text-decoration: none; }
a.sortLink:hover { color: red; text-decoration: none; }
.alignBottom { vertical-align: bottom; }
table.print-friendly tr td, table.print-friendly tr th { page-break-inside: avoid; }
.shrinkTD { width: 0.1%; }
TD STRONG { font-size: 1.5vh; font-weight: bold; }
.row_button { max-height: 150%; vertical-align: middle; }
.noshow { display: none; }
#routes_table { padding: 0px; border-radius: .5rem .5rem 0 0; background-color: var(--depot-navy); }
#routes_table TD, #routes_table TH {
    padding-left: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 12px;
    border-top: 1px solid var(--table-row-even-bg);
    font-size: 1.5vw;
}
#routes_table TD A { font-size: 1.5vw; }
#routes_table TH A { font-size: 3vh; }
#routes_table TR {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 12px;
}
#routes_table_wrap { overflow-y: auto; max-height: calc(100vh - 200px); }
#routes_table TH { text-align: left; font-size: 3vh; color: var(--color-white); background-color: var(--depot-navy); border-top: none; border-bottom: 3px solid var(--depot-gold); position: sticky; top: 0; z-index: 2; }
#routes_table TH:first-child { border-radius: .5rem 0 0 0; }
#routes_table TH:last-child { border-radius: 0 .5rem 0 0; }
#routes_table TH a.sortLink, #routes_table TH a.sortLink:visited { color: var(--color-white); }
#routes_table TH a.sortLink:hover { color: var(--depot-gold); }
.results_link {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: none;
    color: var(--color-black);
}
.warningLabel {
    font-size: 1.5vh !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: none;
    color: var(--color-black);
}
.paraLabel { font-weight: 400; font-size: 1.5vw !important; }
.highlight_yellow { background-color: orange; }
.highlight_red { background-color: red; }
.highlight_orange { background-color: orange; }
.highlight_lightgreen { background-color: lightgreen; }
.highlight_white { background-color: var(--color-white); }
.BBlist { vertical-align: top; }

@media screen {
    .queryArgs { display: none; }
}
@media screen and (max-width: 660px) {
    .time { font-size: 14px; }
}
@media (max-width: 700px) {
    .mobile_noshow { display: none; }
    .BBlist { font-size: 1.25vh !important; }
    #routes_table TD A, #routes_table TH A { font-size: 1.25vh !important; }
    .results_link { font-size: 1.25vh !important; }
    a.sortLink { font-size: 1.25vh !important; }
    #routes_table TH { font-size: 1.25vh !important; }
    .paraLabel { font-weight: 400; font-size: 1.25vw !important; }
    #routes_table TD, #routes_table TH { padding-left: 1vw; }
    .row_button { max-height: 75% !important; vertical-align: middle; }
}

/* ********* Mobile Responsiveness ********* */
@media (max-width: 768px) {
    #page_container {
        overflow-x: auto;
    }
    .param_table, .search_table, .profile_table {
        display: block;
        width: 100%;
    }
    .param_row, .search_row,
    .profile_row, .profile_row1, .profile_row2, .profile_header_row {
        display: block;
        width: 100%;
    }
    .param_cell, .search_cell, .profile_cell, .profile_header {
        display: block;
        width: 100%;
    }
    .param_label, .search_label, .profile_label {
        float: none;
    }
}


/* ********* Footer ********* */
footer.depot-footer {
    background: var(--depot-navy);
    color: #fff;
    text-align: center;
    padding: .4rem 1rem;
    font-size: .8rem;
    flex-shrink: 0;
}

/* ViewEmployeeProfile */
.profile-photo-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.profile-photo-wrap::after {
    content: '\f030';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    background: rgba(0,0,0,.4);
    border-radius: .25rem;
    opacity: 0;
    transition: opacity .2s;
}
.profile-photo-wrap:hover::after {
    opacity: 1;
}
.profile-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
.profile-card {
    background-color: #f4f6f8;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}
.profile-sections {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.profile-section-card {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}
.profile-section-card .widget-card-body {
    flex: 1;
}

/* Profile header — name + circular photo + quick actions */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}
.profile-header-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.profile-header .profile-photo-wrap {
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.profile-header .profile_photo_disp {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.profile-header .profile-photo-wrap::after {
    border-radius: 50%;
}
.profile-name-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.profile-name {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1e2b3c;
    line-height: 1.2;
}
.profile-status-badge {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    margin-left: 6px;
}
.profile-status-badge.badge-inactive {
    background: #fee2e2;
    color: #b91c1c;
}
.profile-name-sub {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Gold icons inside widget-card-header */
.widget-card-header .card-icon {
    color: var(--depot-gold);
    margin-right: 5px;
}

/* Expired certification dates */
.date-expired {
    color: #b91c1c;
    font-weight: 600;
}

/* Widget cards (Home.php dashboard) */
.widget-card {
    border-radius: .5rem;
    border: 1px solid #dee2e6;
    margin-bottom: .375rem;
    background-color: var(--bg-page);
}
.widget-card-header {
    font-size: inherit;
    font-weight: 600;
    background-color: var(--depot-navy);
    color: var(--color-white);
    border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0;
    padding: 3px .5rem;
    margin: 0;
    border-bottom: 3px solid var(--depot-gold);
}
.widget-card-body,
.widget-card-body * {
    font-size: 0.875rem;
    font-weight: normal;
}
.widget-card-body {
    border-radius: 0 0 calc(.5rem - 1px) calc(.5rem - 1px);
    background-color: var(--color-white);
    padding: 0 .5rem .5rem;
}
.widget-card-body .fas,
.widget-card-body .fab {
    font-weight: 900;
}
.widget-card-body .far {
    font-weight: 400;
}
.widget-row {
    padding: 3px 8px;
}
.widget-row + .widget-row {
    border-top: 1px solid var(--table-header-bg);
}
.training-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
@media (max-width: 768px) {
    .training-fields > div {
        width: 100%;
    }
}

/* Inspection Form */
.inspection-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1rem;
}
.inspection-row:nth-child(even) {
    background-color: var(--table-row-even-bg);
}
.inspection-row:nth-child(odd) {
    background-color: var(--color-white);
}
.inspection-label {
    font-weight: 600;
    min-width: 10rem;
    width: 10rem;
    flex-shrink: 0;
}
.inspection-controls {
    flex: 1;
}
@media (max-width: 768px) {
    .inspection-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
    .inspection-label {
        width: auto;
        min-width: unset;
    }
    .inspection-controls .btn-group {
        width: 100%;
    }
    .inspection-controls .btn-group .btn {
        flex: 1;
    }
}

/* FullCalendar — shared styles for TrainingCalendar and DispatchCalendar */
.depot-calendar-container {
    width: 100%;
    height: calc(100vh - 100px);
    padding-top: .75rem;
}
.fc a {
    color: inherit;
    text-decoration: none;
}
.fc a:hover {
    color: inherit;
    text-decoration: none;
}
.fc-theme-standard td,
.fc-theme-standard th {
    border: 1px solid #dee2e6;
}
.fc-theme-standard .fc-scrollgrid {
    border: 1px solid #dee2e6;
}
.fc .fc-daygrid-day {
    background-color: #fff;
}
.fc .fc-day-other {
    background-color: var(--table-row-even-bg);
}
.fc .fc-daygrid-day.fc-day-today {
    background-color: #fff !important;
}
.fc .fc-day-today .fc-daygrid-day-number {
    background-color: var(--depot-gold);
    color: var(--color-black);
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.fc .fc-col-header-cell {
    background-color: var(--depot-navy);
    color: var(--color-white);
    font-weight: 600;
    padding: .3rem 0;
    border-radius: .375rem .375rem 0 0;
}
.fc .fc-col-header-cell a {
    color: var(--color-white);
}

.fc-timeGridWeek-view .fc-col-header-cell.fc-day-today,
.fc-timeGridDay-view .fc-col-header-cell.fc-day-today {
    background-color: var(--depot-gold);
    color: var(--color-black);
}
.fc-timeGridWeek-view .fc-col-header-cell.fc-day-today a,
.fc-timeGridDay-view .fc-col-header-cell.fc-day-today a {
    color: var(--color-black);
}
.fc .fc-button {
    background-color: var(--depot-navy);
    border-color: var(--depot-navy);
    font-size: .85rem;
    text-transform: capitalize;
}
.fc .fc-button:hover {
    background-color: var(--depot-gold);
    border-color: var(--depot-gold);
    color: var(--color-black);
}
.fc .fc-button-active,
.fc .fc-button:not(:disabled).fc-button-active {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-black);
}
.fc .fc-timegrid-col {
    background-color: #fff;
}
.fc .fc-timegrid-col.fc-day-today {
    background-color: #fff !important;
}
.fc .fc-showPending-button {
    width: 9vw;
}
.fc .fc-list-day-cushion {
    background-color: var(--depot-navy);
    color: var(--color-white);
    border-radius: .375rem .375rem 0 0;
}
.fc .fc-list-day-cushion a {
    color: var(--color-white);
}
.fc .fc-list-event td {
    background-color: #fff;
}

/* =====================================================
   Bootstrap 5 Modal — app theme
   ===================================================== */
.modal-header {
    background-color: var(--depot-navy);
    color: #fff;
    border-bottom: 3px solid var(--depot-gold);
}
.modal-header .modal-title {
    font-weight: 600;
}
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-footer {
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

/* Shared form card style — matches shop ticket look */
.ticket_title {
    font-size: 1.25rem;
    font-weight: 600;
    background-color: var(--depot-navy);
    color: var(--color-white);
    border-bottom: 3px solid var(--depot-gold);
    border-radius: .5rem .5rem 0 0;
    padding: .6rem .75rem;
}
.ticket_body {
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 .5rem .5rem;
    padding: 1rem 1rem .75rem;
}

/* Themed Bootstrap nav-tabs — navy/gold */
.nav-tabs {
    border-bottom: 3px solid var(--depot-gold);
}
.nav-tabs .nav-link {
    color: var(--depot-navy);
    border-radius: .375rem .375rem 0 0;
    border: 1px solid transparent;
}
.nav-tabs .nav-link:hover {
    border-color: #dee2e6 #dee2e6 transparent;
    background-color: #f0f2f4;
}
.nav-tabs .nav-link.active {
    background-color: var(--depot-navy);
    color: var(--color-white);
    border-color: var(--depot-navy) var(--depot-navy) var(--depot-navy);
    font-weight: 600;
}

/* Checklist group header divider (onboarding, offboarding, manage checklists) */
.cl-group-header {
    margin: 1rem 0 .25rem;
    padding: .25rem .5rem;
    background: var(--depot-navy);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}


/* ===== Section: Pro3Training ===== */

[data-slots] { font-family: monospace }

label {
	cursor: pointer;
}

input[type="checkbox"] {
	cursor: pointer;
}

#empidForm {
	border-radius: 10px;
	border:.08vw black solid;
	margin-top:3vw;
	margin-bottom:1vw;
	background-color:var(--color-white);
}

#empidForm H1 {
	border-radius: 10px 10px 0px 0px;
	border:.08vw black solid;
	background-color:var(--depot-navy);
	color: var(--color-white);
	padding:3px;
	margin: 0px;
}

#empidForm DIV {
	border-radius: 10px;
	background-color:var(--color-white);
	padding:0px 5px 5px 5px;
	margin:2vw;
}

#statusForm {
	border-radius: 10px;
	border:.08vw black solid;
	margin-top:3vw;
	margin-bottom:1vw;
	background-color:var(--color-white);
}

#statusForm H1 {
	border-radius: 10px 10px 0px 0px;
	border:.08vw black solid;
	background-color:var(--depot-navy);
	color: var(--color-white);
	padding:3px;
	margin: 0px;
}

#statusForm DIV {
	border-radius: 10px;
	background-color:var(--color-white);
	padding:0px 5px 5px 5px;
	margin:2vw;
}

#rolesForm {
	border-radius: 10px;
	border:.08vw black solid;
	margin-bottom:1vw;
	background-color:var(--color-white);
}

#rolesForm H1 {
	border-radius: 10px 10px 0px 0px;
	border:.08vw black solid;
	background-color:var(--depot-navy);
	color: var(--color-white);
	padding:3px;
	margin: 0px;
}

#rolesForm DIV {
	border-radius: 10px;
	background-color:var(--color-white);
	padding:0px 5px 5px 5px;
	margin:2vw;
}

fieldset {
	margin: 8px;
	border: 1px solid var(--table-header-bg);
	padding: 8px;
	border-radius: 4px;
}

legend {
	padding: 2px;
}

.subscript {
	font-size:smaller;
	margin-left:2vw;
}

#restrictedName {
	font-size: xx-large;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bolder;
	border-bottom: 1px solid var(--table-header-bg);
	margin-bottom:2vh
}

@media screen {
	#pro3_training_screen{display:block;}
	#pro3_training_print{display: none;}
	#restrictedName_print{display: none;}
	.signoffItem{display:none}
	.signatures{display:none;}
}

@media print {
	input[type=submit], div#navBlock, div#myTopnav.topnav, div#restricteds_link, #hide_pref, #other_forms { display:none; }
	fieldset{font-size:xx-small}

	#pro3_training_screen{display:none;}
	#pro3_training_print{display:block; font-size:medium}

	#closeRow {
		display: none;
	}

	#print_space{height:1vh}

	#header {
		display:none;
	}

	#restrictedName_print {
		font-size: larger;
		font-weight: bold;
		position: fixed;
		top: 0;
	}

	#restrictedName {display: none;}

	#breakDiv{page-break-before: always;}

	#safety_comp_fs{margin-top:20px}

	.signoffItem{float:right; display:block}
	.signatures{display:block;}
}

/* ── Depot alert styles ─────────────────────────────────────────────────── */
.depot-alert {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 12px;
	font-size: 0.9rem;
	line-height: 1.4;
}
.depot-alert i { margin-top: 2px; flex-shrink: 0; }
.depot-alert a { font-weight: 600; }
.depot-alert-error {
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-left: 4px solid #ffc107;
	color: #856404;
}
.depot-alert-error a { color: #856404; }
.depot-alert-unexpected {
	background: #f8d7da;
	border: 1px solid #f5c2c7;
	border-left: 4px solid #dc3545;
	color: #842029;
}
.depot-alert-unexpected a { color: #842029; }
.depot-alert-success {
	background: #d1e7dd;
	border: 1px solid #badbcc;
	border-left: 4px solid #198754;
	color: #0f5132;
}