.bd-placeholder-img {font-size: 1.125rem;text-anchor: middle;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
@media (min-width: 768px){ .bd-placeholder-img-lg {font-size: 3.5rem;} }
.icon-list {padding-left: 0;list-style: none;}
.icon-list li {display: flex;align-items: flex-start;margin-bottom: .25rem;}
.icon-list li::before {display: block;flex-shrink: 0;width: 1.5em;height: 1.5em;margin-right: .5rem;content: "";background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;}
.text-gray-400{color:#b5b5c3!important}.text-hover-gray-400{transition:color .2s ease,background-color .2s ease}.text-hover-gray-400 i{transition:color .2s ease,background-color .2s ease}.text-hover-gray-400:hover{transition:color .2s ease,background-color .2s ease;color:#b5b5c3!important}.text-hover-gray-400:hover i{transition:color .2s ease,background-color .2s ease;color:#b5b5c3!important}.text-hover-gray-400:hover .svg-icon svg [fill]:not(.permanent):not(g){transition:fill .3s ease;fill:#b5b5c3}.text-hover-gray-400:hover .svg-icon svg:hover [fill]:not(.permanent):not(g){transition:fill .3s ease}.text-active-gray-400{transition:color .2s ease,background-color .2s ease}.text-active-gray-400 i{transition:color .2s ease,background-color .2s ease}.text-active-gray-400.active{transition:color .2s ease,background-color .2s ease;color:#b5b5c3!important}.text-active-gray-400.active i{transition:color .2s ease,background-color .2s ease;color:#b5b5c3!important}.text-active-gray-400.active .svg-icon svg [fill]:not(.permanent):not(g){transition:fill .3s ease;fill:#b5b5c3}.text-active-gray-400.active .svg-icon svg:hover [fill]:not(.permanent):not(g){transition:fill .3s ease}
.dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dt-container .dt-length, .dt-container .dt-info{font-size:80%}
.dataTables_processing{background-color:#e1e1e1;opacity:0.75;border-radius:6px;left:30%!important;width:40%!important;}
.fs-7{font-size:.95rem!important}.fs-8{font-size:.85rem!important}.fs-9{font-size:.75rem!important}.fs-10{font-size:.5rem!important}.fs-print{font-size:.6rem!important}.ls-lg{letter-spacing:0.2em}
@media( max-width: 991.98px ){ .navbar-nav .nav-link, .navbar-nav .dropdown-item { font-size: 1.25rem; /* ~fs-4 size */ } } /* Increase nav link font size on screens smaller than 768px (Bootstrap md) */
.tom-select.form-select + label {opacity:1;transform:scale(.85) translateY(-1.75rem) translateX(0.15rem)} .ts-dropdown-content{max-height:280px!important} @media(min-width:992px){.ts-dropdown-content{max-height:400px!important;overflow-y:auto!important}}
button.btn-xs,a.btn-xs{padding:.25rem .5rem;font-size:.675rem;}.z-10{z-index:10;}.bg-opacity-95{--bs-bg-opacity:0.95;}.bg-none{background:none}.vh{display:none}

/* Print specific styles*/
@media print{.print-page-break{page-break-before:always}}

/* Weekly Schedule collapse toggle */
button.collapseScheduleClick[aria-expanded=true] .bi-plus-lg {display:none;}button.collapseScheduleClick[aria-expanded=false] .bi-dash-lg {display:none;}
.ws_1{min-width:240px}.ws_2{min-width:150px}table#dataTable_weekly_schedule_employees tbody td,table#dataTable_weekly_schedule_employees tfoot th{padding:2px 10px}

/* Google Maps */
.mapouter{position:relative;text-align:right;height:250px;width:400px;}.gmap_canvas {overflow:hidden;background:none!important;height:250px;width:400px;}

/* Quotes */
#qb1_fo1rm input[type='number']{width:80px}
.in-2{width:50px!important;padding:.25em .25em .25em .5em}.in-3{width:58px!important;padding:.25em}.in-4{width:64px!important;padding:.25em}.in-5{width:70px!important;padding:.25em}.in-6{width:77px!important;padding:.25em}.in-7{width:86px!important;padding:.25em}.in-8{width:95px!important;padding:.25em}

/* Spinning icon */
.spin-icon {
  display: inline-block; /* required for transform animations on inline elements like <i> */
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ============================= */
/* Custom SSOB Styles for Bootstrap 5 (Dark Mode Compatible) */
/* ============================= */

/* --- Solid Button --- */
.btn-ssob {
	color: #fff;
	background-color: #6366f1;
	border-color: #6366f1;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-ssob:hover,
.btn-ssob:focus {
	color: #fff;
	background-color: #4f52d8;
	border-color: #4f52d8;
}

.btn-ssob:active {
	color: #fff;
	background-color: #3738b8;
	border-color: #3738b8;
}

/* --- Outline Button --- */
.btn-outline-ssob {
	color: #6366f1;
	background-color: transparent;
	border: 1px solid #6366f1;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-outline-ssob:hover,
.btn-outline-ssob:focus {
	color: #fff;
	background-color: #6366f1;
	border-color: #6366f1;
}

.btn-outline-ssob:active {
	color: #fff;
	background-color: #4f52d8;
	border-color: #4f52d8;
}

/* --- Soft Button --- */
.btn-soft-ssob {
	color: #6366f1;
	background-color: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.1);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-soft-ssob:hover,
.btn-soft-ssob:focus {
	color: #fff;
	background-color: #6366f1;
	border-color: #6366f1;
}

.btn-soft-ssob:active {
	color: #fff;
	background-color: #4f52d8;
	border-color: #4f52d8;
}

/* --- Subtle Button --- */
.btn-subtle-ssob {
	color: #6366f1;
	background-color: transparent;
	border-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-subtle-ssob:hover,
.btn-subtle-ssob:focus {
	color: #fff;
	background-color: rgba(99, 102, 241, 0.2);
}

.btn-subtle-ssob:active {
	color: #fff;
	background-color: rgba(99, 102, 241, 0.3);
}

/* --- Text --- */
.text-ssob {
	color: #6366f1 !important;
}

/* --- Links --- */
/* Shared base link styles */
.link-ssob,
.text-ssob a,
.link-underline-ssob {
	color: #6366f1;
	transition: color 0.2s ease, text-decoration 0.2s ease;
	text-decoration: none;
}

/* Shared hover/focus states */
.link-ssob:hover,
.link-ssob:focus,
.text-ssob a:hover,
.text-ssob a:focus,
.link-underline-ssob:hover,
.link-underline-ssob:focus {
	color: #4f52d8;
	text-decoration: underline;
}

/* Shared active state */
.link-ssob:active,
.text-ssob a:active,
.link-underline-ssob:active {
	color: #3738b8;
}

/* Only the ALWAYS-underlined version */
.link-underline-ssob {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}


/* --- Dark Mode Support --- * /
@media (prefers-color-scheme: dark) {
	/* Solid Button * /
	.btn-ssob {
		color: #fff;
		background-color: #818cf8;
		border-color: #818cf8;
	}
	.btn-ssob:hover, .btn-ssob:focus {
		background-color: #6366f1;
		border-color: #6366f1;
	}
	.btn-ssob:active {
		background-color: #4f52d8;
		border-color: #4f52d8;
	}

	/* Outline Button * /
	.btn-outline-ssob {
		color: #818cf8;
		border-color: #818cf8;
		background-color: transparent;
	}
	.btn-outline-ssob:hover, .btn-outline-ssob:focus {
		color: #fff;
		background-color: #818cf8;
		border-color: #818cf8;
	}
	.btn-outline-ssob:active {
		color: #fff;
		background-color: #6366f1;
		border-color: #6366f1;
	}

	/* Soft Button * /
	.btn-soft-ssob {
		color: #818cf8;
		background-color: rgba(129, 140, 248, 0.1);
		border-color: rgba(129, 140, 248, 0.1);
	}
	.btn-soft-ssob:hover, .btn-soft-ssob:focus {
		color: #fff;
		background-color: #818cf8;
		border-color: #818cf8;
	}
	.btn-soft-ssob:active {
		color: #fff;
		background-color: #6366f1;
		border-color: #6366f1;
	}

	/* Subtle Button * /
	.btn-subtle-ssob {
		color: #818cf8;
		background-color: transparent;
		border-color: transparent;
	}
	.btn-subtle-ssob:hover, .btn-subtle-ssob:focus {
		color: #fff;
		background-color: rgba(129, 140, 248, 0.2);
	}
	.btn-subtle-ssob:active {
		color: #fff;
		background-color: rgba(129, 140, 248, 0.3);
	}

	/* Text & Links * /
	.text-ssob, .link-ssob, .text-ssob a {
		color: #818cf8;
	}
	.link-ssob:hover, .link-ssob:focus, .text-ssob a:hover, .text-ssob a:focus {
		color: #6366f1;
	}
	.link-ssob:active, .text-ssob a:active {
		color: #4f52d8;
	}
}
*/


/* Our Best Friend told me to Drop this in here */

/* ================================
   SSoB Global Polish (Bootstrap 5.3+)
   Drop this AFTER all other CSS
   ================================ */

/* 1) Tokens — follow your Bootstrap theme colors */
:root,
[data-bs-theme="light"] {
  /* pull from Bootstrap tokens so we inherit your palette */
  --ssob-bg: var(--bs-body-bg);
  --ssob-ink: var(--bs-body-color);
  --ssob-border: var(--bs-border-color);
  --ssob-card-bg: var(--bs-body-bg);         /* cards are surfaced with shadow */
  --ssob-muted: var(--bs-secondary-color);
  --ssob-shadow: 0 .5rem 2rem rgba(0,0,0,.08);

  /* Subtle backgrounds use BS 5.3 “subtle” tokens if available */
  --ssob-warning-subtle-bg: var(--bs-warning-bg-subtle, rgba(255,193,7,.12));
  --ssob-warning-subtle-fg: var(--bs-warning-text-emphasis, #9a6b00);
  --ssob-info-subtle-bg: var(--bs-info-bg-subtle, rgba(13,202,240,.12));
  --ssob-info-subtle-fg: var(--bs-info-text-emphasis, #0a6c7a);
  --ssob-success-subtle-bg: var(--bs-success-bg-subtle, rgba(25,135,84,.12));
  --ssob-success-subtle-fg: var(--bs-success-text-emphasis, #146C43);
  --ssob-secondary-subtle-bg: var(--bs-secondary-bg-subtle, rgba(108,117,125,.12));
  --ssob-secondary-subtle-fg: var(--bs-secondary-text-emphasis, #495057);
}

[data-bs-theme="dark"] {
  /* darker border & shadow tuning */
  --ssob-border: var(--bs-border-color-translucent, rgba(255,255,255,.15));
  --ssob-shadow: 0 .5rem 2rem rgba(0,0,0,.45);
}

/* 2) Global surfaces and density */
body {
  background: var(--ssob-bg);
}

/* Roundness: nudge Bootstrap defaults globally */
.card { border-radius: 1rem; box-shadow: var(--ssob-shadow); }
.btn  { border-radius: .9rem; }

/* Optional: make modals/offcanvas a bit rounder */
.offcanvas-bottom { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.modal-content   { border-radius: 1rem; }

/* 3) Chips & Pills — reusable utility components */
.chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  border: 1px solid var(--ssob-border);
  border-radius: 999px;
  padding: .35rem .6rem;
  background: var(--bs-body-bg);
  color: var(--ssob-ink);
}
.pill { padding: .15rem .5rem; font-size: .75rem; }

/* Contextual chip accents via existing utilities */
.chip.bg-warning-subtle { background: var(--ssob-warning-subtle-bg); color: var(--ssob-warning-subtle-fg); border-color: transparent; }
.chip.bg-info-subtle    { background: var(--ssob-info-subtle-bg);    color: var(--ssob-info-subtle-fg);    border-color: transparent; }
.chip.bg-success-subtle { background: var(--ssob-success-subtle-bg); color: var(--ssob-success-subtle-fg); border-color: transparent; }

/* 4) Subtle “status” badges that read your theme colors */
.badge-status {
  border: 1px solid var(--ssob-border);
  background: var(--bs-body-bg);
  color: var(--ssob-ink);
}
.badge-unsigned { /* warning-ish */
  background: var(--ssob-warning-subtle-bg);
  color: var(--ssob-warning-subtle-fg);
  border: 1px solid transparent;
}
.badge-draft {
  background: var(--bs-secondary-bg-subtle, rgba(108,117,125,.12));
  color: var(--bs-secondary-text-emphasis, #495057);
  border: 1px solid transparent;
}

/* 5) Listbox (selectable list rows) */
.listbox {
  border: 1px solid var(--ssob-border);
  border-radius: .75rem;
  overflow: hidden;
  background: var(--bs-body-bg);
}
.listbox .item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--ssob-border);
}
.listbox .item:last-child { border-bottom: 0; }
.listbox .item:nth-child(odd) { background: color-mix(in srgb, var(--bs-body-bg), var(--ssob-border) 6%); }
/* Checkbox spacing in Bootstrap */
.listbox .form-check-input { margin-top: 0; }

/* 6) Sticky action bar (used for “Sign All” etc.) */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 1rem; padding: 0 1rem; z-index: 1030;
}
.stickybar .inner {
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  background: var(--bs-body-bg);
  border: 1px solid var(--ssob-border);
  border-radius: 1rem;
  box-shadow: var(--ssob-shadow);
  padding: .5rem .75rem;
  display: flex; align-items: center; justify-content: space-between;
}

/* 7) Minor polish: tables & toolbars */
.table.card-table {
  background: var(--bs-body-bg);
  border: 1px solid var(--ssob-border);
  border-radius: .75rem;
  overflow: hidden;
}
.toolbar-soft {
  background: color-mix(in srgb, var(--bs-body-bg), var(--ssob-border) 10%);
  border: 1px solid var(--ssob-border);
  border-radius: .75rem;
  padding: .5rem;
}

/* 8) Optional: nicer focus rings that respect your primary color */
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary), transparent 70%);
  border-radius: .5rem;
}

/* 9) Responsive grid helper for “day cards” (reusable) */
.ssob-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* Clip anything inside rounded cards (e.g., .bg-primary sections, images) */
.card {
  border-radius: 1rem;
  overflow: hidden;              /* <-- key fix */
  background-clip: padding-box;  /* improve anti-aliasing on borders */
}

/* Ensure headers/footers conform to the card radius when they’re first/last */
.card > .card-header:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-clip: padding-box;
}
.card > .card-footer:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  background-clip: padding-box;
}

/* Accordion inside cards: keep top/bottom corners clean when it’s at the edges */
.card .accordion .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  background-clip: padding-box;
}
.card .accordion .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  background-clip: padding-box;
}

/* If you use list-groups flush with cards, avoid square edges showing through */
.card .list-group-flush > .list-group-item {
  border-left: 0;
  border-right: 0;
}
.card .list-group-flush > .list-group-item:first-child {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.card .list-group-flush > .list-group-item:last-child {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* Button focus rings INSIDE cards: use inset ring so it doesn’t bleed past radius */
.card .btn:focus,
.card .btn:focus-visible {
  outline: 0;
  /* inset ring tinted by your primary color */
  box-shadow: inset 0 0 0 .2rem color-mix(in srgb, var(--bs-primary), transparent 70%);
}

/* Optional: if you style .card bg contextually (e.g., .card.bg-primary), clip it clean */
.card.bg-primary,
.card[class*="bg-"] {
  background-clip: padding-box;
  /* keep inner sections from showing square corners against rounded card */
  overflow: hidden;
}

/* Offcanvas bottom sheet rounding: prevent border/background bleed on top corners */
.offcanvas-bottom {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-clip: padding-box;
}


@media (min-width: 992px) { .ssob-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px){ .ssob-grid { grid-template-columns: repeat(3, 1fr); } }