@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
  --cd-ink:#0a1729;
  --cd-muted:#65748b;
  --cd-line:#dfe6ef;
  --cd-canvas:#f3f6fa;
  --cd-card:#fff;
  --cd-navy:#071426;
  --cd-navy-2:#0c2b3f;
  --cd-green:#0a8f68;
  --cd-brand:var(--company-primary,#0a8f68);
  --cd-brand-soft:var(--company-secondary,#d9eaf7);
  --cd-danger:#c43d4b;
  --cd-warning:#c17a13;
  --cd-radius:16px;
  --cd-shadow:0 10px 32px rgba(7,20,38,.08);
  --cd-sidebar:260px;
  --cd-topbar:68px;
}

*{box-sizing:border-box}

html{
  background:var(--cd-canvas);
}

body{
  margin:0;
  background:var(--cd-canvas);
  color:var(--cd-ink);
  font-family:"DM Sans",sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

body,.wrapper{
  min-height:100vh;
}

a{
  color:var(--cd-brand);
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

a:hover,
a:focus{
  color:var(--cd-ink);
  text-decoration:none;
}

h1,h2,h3,h4,h5,h6,.panel-title{
  color:var(--cd-ink);
  font-family:"Manrope",sans-serif;
  font-weight:800;
  letter-spacing:-.025em;
}

h1{font-size:32px}
h2{font-size:25px}
h3{font-size:22px}

small,
.text-muted{
  color:var(--cd-muted)!important;
}

/* Consistent, accessible JobCue checkboxes. This retains the native input so
   forms, labels, keyboard control and existing JavaScript continue to work. */
input[type="checkbox"]:not([role="switch"]){
  -webkit-appearance:none;
  appearance:none;
  display:inline-grid;
  place-content:center;
  width:20px;
  min-width:20px;
  height:20px;
  margin:0 7px 0 0;
  padding:0;
  vertical-align:-4px;
  border:1.5px solid #a8b5c6;
  border-radius:6px;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(7,20,38,.04);
  color:#fff;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease;
}

input[type="checkbox"]:not([role="switch"]):hover{
  border-color:var(--cd-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cd-brand) 11%,transparent);
}

input[type="checkbox"]:not([role="switch"]):checked{
  border-color:var(--cd-brand);
  background-color:var(--cd-brand);
}

input[type="checkbox"]:not([role="switch"]):checked::before{
  width:10px;
  height:6px;
  margin-top:-2px;
  border:solid currentColor;
  border-width:0 0 2px 2px;
  content:"";
  transform:rotate(-45deg);
}

input[type="checkbox"]:not([role="switch"]):indeterminate{
  border-color:var(--cd-brand);
  background:var(--cd-brand);
}

input[type="checkbox"]:not([role="switch"]):indeterminate::before{
  width:10px;
  height:2px;
  border-radius:2px;
  background:#fff;
  content:"";
}

input[type="checkbox"]:not([role="switch"]):focus{
  outline:none;
}

input[type="checkbox"]:not([role="switch"]):focus-visible{
  border-color:var(--cd-brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cd-brand) 20%,transparent);
}

input[type="checkbox"]:not([role="switch"]):active:not(:disabled){
  transform:scale(.92);
}

input[type="checkbox"]:not([role="switch"]):disabled{
  border-color:#cfd7e2;
  background:#edf1f5;
  box-shadow:none;
  cursor:not-allowed;
  opacity:.7;
}

input[type="checkbox"]:not([role="switch"]):checked:disabled{
  border-color:#8c99aa;
  background:#8c99aa;
}

/* Native file selection, presented consistently without replacing the
   accessible browser file picker or changing multi-file behaviour. */
input[type="file"]{
  min-height:44px;
  padding:4px 10px 4px 4px;
  border:1px solid var(--cd-line);
  border-radius:10px;
  background:#fff;
  color:var(--cd-muted);
  font:inherit;
  line-height:34px;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}

input[type="file"]::file-selector-button{
  min-height:34px;
  margin:0 10px 0 0;
  padding:7px 13px;
  border:1px solid color-mix(in srgb,var(--cd-brand) 28%,var(--cd-line));
  border-radius:8px;
  background:color-mix(in srgb,var(--cd-brand) 10%,#fff);
  color:var(--cd-brand);
  font:inherit;
  font-size:12px;
  font-weight:800;
  line-height:18px;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}

input[type="file"]:hover{
  border-color:color-mix(in srgb,var(--cd-brand) 55%,var(--cd-line));
  background:color-mix(in srgb,var(--cd-brand) 2%,#fff);
}

input[type="file"]:hover::file-selector-button{
  border-color:var(--cd-brand);
  background:var(--cd-brand);
  color:#fff;
}

input[type="file"]:focus{outline:none}
input[type="file"]:focus-visible{
  border-color:var(--cd-brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cd-brand) 18%,transparent);
}

input[type="file"]:disabled{
  background:#edf1f5;
  cursor:not-allowed;
  opacity:.7;
}

input[type="file"]:disabled::file-selector-button{cursor:not-allowed}


/* ==========================================================================
   SUPPORT FILTERS
   ========================================================================== */

.support-filter-status{
  flex:2 1 360px;
}

.support-status-options{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  min-height:34px;
}

.support-status-option{
  position:relative;
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  margin:0!important;

  background:#fff;
  border:1px solid #d1d5db;
  border-radius:20px;

  color:#4b5563!important;
  font-size:12px!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:0!important;

  cursor:pointer;
  user-select:none;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.support-status-option:hover{
  background:#f8fafc;
  border-color:#9ca3af;
}

.support-status-option input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.support-status-check{
  position:relative;
  display:inline-block;

  width:17px;
  height:17px;
  flex:0 0 17px;

  background:#fff;
  border:1.5px solid #cbd5e1;
  border-radius:5px;

  transition:
    background .15s ease,
    border-color .15s ease;
}

.support-status-option input:checked + .support-status-check{
  background:#2563eb;
  border-color:#2563eb;
}

.support-status-option input:checked + .support-status-check::after{
  content:"";

  position:absolute;
  left:5px;
  top:2px;

  width:5px;
  height:9px;

  border:solid #fff;
  border-width:0 2px 2px 0;

  transform:rotate(45deg);
}

.support-status-option:has(input:checked){
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1d4ed8!important;
}

.support-status-option:has(input:focus-visible){
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

@media(max-width:767px){
  .support-search,
  .support-filter,
  .support-filter-client,
  .support-filter-status{
    margin-bottom:12px;
  }
}


/* ==========================================================================
   APP TOP BAR
   ========================================================================== */
/* Brand area */


.navbar-top{
  height:var(--cd-topbar);
  min-height:var(--cd-topbar);
  margin:0;
  border:0!important;
  background:var(--cd-navy)!important;
  box-shadow:0 8px 26px rgba(7,20,38,.2);
}


.navbar-top .navbar-header{
  position:relative;

  width:var(--cd-sidebar);
  height:var(--cd-topbar);

  background:transparent!important;
}


/*
 * Explicitly position the brand inside the header rather than
 * relying on Bootstrap's navbar-brand float/line-height rules.
 */
.navbar-top .navbar-brand{
  position:absolute;

  top:0;
  right:0;
  bottom:0;
  left:0;

  width:100%!important;
  height:var(--cd-topbar)!important;

  margin:0!important;
  padding:8px 18px!important;

  float:none!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}


/*
 * Keep both the JobCue wordmark and customer logos perfectly
 * centred inside the brand area.
 */
.navbar-top .brand-logo{
  width:100%;
  height:100%;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}


/* Customer supplied logo */
.navbar-top .brand-logo img{
  display:block;

  width:auto!important;
  height:auto!important;
  max-width:190px;
  max-height:44px;
  object-fit:contain!important;
  aspect-ratio:auto!important;

  margin:0 auto;

  padding:5px 9px;

  border-radius:9px;

  background:#fff;
}


/* Collapsed desktop logo */
.navbar-top .brand-logo-collapsed{
  display:none;
}


/* Default JobCue wordmark */
.cuedesk-default-logo{
  display:block;

  margin:0!important;
  padding:0!important;

  color:#fff;

  font-size:19px;
  font-weight:800;
  line-height:1;

  letter-spacing:-.5px;
 
  white-space:nowrap;
}

.cuedesk-default-logo span,
.cuedesk-default-logo-small span{
  color:#34d399;
}


.cuedesk-default-logo-small{
  display:block;

  margin:0;
  padding:0;

  color:#fff;

  font:800 20px/1 "Manrope",sans-serif;
}

/* Main navbar area */

.navbar-top .nav-wrapper{
  height:var(--cd-topbar);
  margin-left:var(--cd-sidebar);

  display:flex;
  align-items:stretch;

  background:transparent!important;
}

.navbar-top .navbar-nav{
  margin-top:0;
  margin-bottom:0;
}

.navbar-top .navbar-nav>li>a{
  height:var(--cd-topbar);

  display:flex;
  align-items:center;

  padding:0 16px;

  color:#d7e3eb!important;
}

.navbar-top .navbar-nav>li>a:hover,
.navbar-top .navbar-nav>li>a:focus,
.navbar-top .navbar-nav>.open>a,
.navbar-top .navbar-nav>.open>a:hover,
.navbar-top .navbar-nav>.open>a:focus{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}


/* Left sidebar toggle */

.cuedesk-navbar-left{
  flex:0 0 auto;
  height:var(--cd-topbar);
}

.cuedesk-sidebar-collapse{
  width:54px;

  display:flex!important;
  align-items:center;
  justify-content:center;

  font-size:17px;
}


/* Right side */

.navbar-top .navbar-right,
.cuedesk-navbar-right{
  float:none!important;

  display:flex!important;
  align-items:stretch;

  height:var(--cd-topbar);

  margin:0 14px 0 auto!important;
}


/* ==========================================================================
   HEADER CLOCK
   ========================================================================== */

.cuedesk-clock-container{
  height:var(--cd-topbar);

  display:flex!important;
  align-items:center;

  gap:12px;

  padding:0 14px;

  color:#d7e3eb;
}

.cuedesk-timezone-select{
  width:185px!important;
  height:40px!important;

  padding:8px 36px 8px 12px!important;

  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:10px!important;

  background:rgba(255,255,255,.09)!important;
  color:#fff!important;

  box-shadow:none!important;
}

.cuedesk-timezone-select:hover,
.cuedesk-timezone-select:focus{
  border-color:rgba(255,255,255,.3)!important;
  background:rgba(255,255,255,.13)!important;
}

.cuedesk-timezone-select option{
  background:#fff;
  color:var(--cd-ink);
}

.cuedesk-clock{
  display:block;

  min-width:78px;

  color:#fff;

  font-size:17px;
  font-weight:700;
  font-variant-numeric:tabular-nums;

  text-align:center;
  white-space:nowrap;
}


/* ==========================================================================
   ACCOUNT / ORGANISATION MENU
   ========================================================================== */

.cuedesk-account-menu{
  display:flex!important;
  align-items:stretch;
}

.navbar-top
.navbar-nav>
.cuedesk-account-menu>
.cuedesk-account-toggle{
  height:var(--cd-topbar);

  display:flex;
  align-items:center;

  gap:10px;

  padding:6px 10px 6px 15px!important;
}

.cuedesk-account-details{
  min-width:100px;

  display:flex;
  flex-direction:column;

  align-items:flex-end;
  justify-content:center;

  line-height:1.18;
}

.cuedesk-account-company{
  display:block;

  max-width:175px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#92aabb;

  font-size:10px;
  font-weight:700;
}

.cuedesk-account-name{
  display:block;

  max-width:175px;

  margin-top:3px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#fff;

  font-size:14px;
  font-weight:700;
}

.cuedesk-avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.17);
  border-radius:11px;

  background:rgba(52,211,153,.14);

  color:#67e0b5;

  font:800 14px "Manrope",sans-serif;
}

.cuedesk-account-arrow{
  margin-left:0;

  color:#91a8b8;

  font-size:13px;

  transition:transform .18s ease;
}

.cuedesk-account-menu.open .cuedesk-account-arrow{
  transform:rotate(180deg);
}


/* ==========================================================================
   ACCOUNT DROPDOWN
   ========================================================================== */

.navbar-top .dropdown-menu{
  margin-top:0;
  padding:8px;

  border:1px solid #e6ebf0!important;
  border-radius:12px!important;

  background:#fff;

  box-shadow:
    0 16px 42px rgba(7,20,38,.16)!important;
}

.cuedesk-account-dropdown{
  right:0;
  left:auto;

  width:330px;
}

.cuedesk-dropdown-title{
  padding:8px 10px 7px;

  color:#8a97a7;

  font-size:10px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}


/* Current organisation */

.cuedesk-current-organisation{
  display:flex;
  align-items:center;

  gap:11px;

  padding:9px 10px 12px;
}

.cuedesk-current-org-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#edf2f6;

  color:#52677a;

  font:800 14px "Manrope",sans-serif;
}

.cuedesk-current-org-details{
  min-width:0;
}

.cuedesk-current-org-details strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--cd-ink);

  font-size:13px;
}

.cuedesk-current-org-details small{
  display:block;

  margin-top:2px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#8593a3!important;

  font-size:10px;
}


/* Organisation switching */

.cuedesk-tenant-switcher{
  padding:5px 10px 12px;
}

.cuedesk-tenant-switcher form{
  margin:0;
}

.cuedesk-tenant-switcher label{
  display:block;

  margin:0 0 5px;

  color:#768596;

  font-size:10px;
  font-weight:800;

  letter-spacing:.045em;
  text-transform:uppercase;
}

.cuedesk-tenant-switcher .form-control{
  width:100%!important;
  height:39px!important;

  padding:8px 12px!important;

  border:1px solid #d8e0e8!important;
  border-radius:9px!important;

  background:#fff!important;
  color:var(--cd-ink)!important;

  font-size:12px;

  box-shadow:none!important;
}


/* Dropdown links */

.cuedesk-account-dropdown .divider{
  margin:6px 0;

  background:#edf1f5;
}

.navbar-top
.cuedesk-account-dropdown>
li>
a.cuedesk-dropdown-link{
  height:auto;

  display:flex;
  align-items:center;

  gap:11px;

  padding:10px!important;

  border-radius:9px;

  color:#34465a!important;

  white-space:normal;
}

.navbar-top
.cuedesk-account-dropdown>
li>
a.cuedesk-dropdown-link:hover{
  background:#f5f8fa!important;
  color:var(--cd-ink)!important;
}

.cuedesk-dropdown-link-icon{
  width:31px;
  height:31px;
  flex:0 0 31px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:#f0f3f6;

  color:#65798c;
}

.cuedesk-dropdown-link strong{
  display:block;

  color:#34465a;

  font-size:12px;
}

.cuedesk-dropdown-link small{
  display:block;

  margin-top:2px;

  color:#8995a4!important;

  font-size:9px;
}

.cuedesk-logout-link .cuedesk-dropdown-link-icon{
  background:#fff0f1;
  color:#b93643;
}


/* ==========================================================================
   MOBILE MENU BUTTON
   ========================================================================== */

.cuedesk-mobile-menu-toggle{
  display:none;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.aside{
  top:var(--cd-topbar)!important;
  margin-top:0!important;
  width:var(--cd-sidebar)!important;

  background:var(--cd-navy)!important;

  border:0!important;
}

.aside .sidebar{
  height:calc(100vh - var(--cd-topbar));

  padding:18px 12px 28px;

  overflow-y:auto;

  background:
    linear-gradient(
      180deg,
      var(--cd-navy),
      #091d30
    )!important;
}

.sidebar>.nav>li{
  margin:3px 0;
}

.sidebar>.nav>li>a{
  min-height:48px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:11px 14px!important;

  border:1px solid transparent!important;
  border-radius:11px;

  color:#b8c8d5!important;

  font-weight:600;
}

.sidebar>.nav>li>a em{
  width:20px;

  color:#8da4b5;

  font-size:16px;

  text-align:center;
}

.sidebar>.nav>li>a:hover,
.sidebar>.nav>li.active>a{
  border-color:rgba(255,255,255,.07)!important;

  background:rgba(255,255,255,.09)!important;

  color:#fff!important;
}

.sidebar>.nav>li.active>a em{
  color:#34d399;
}

.sidebar .nav.collapse{
  margin:4px 0 8px 24px;
  padding:4px 0 4px 14px;

  border-left:1px solid rgba(255,255,255,.11);
}

.sidebar .nav.collapse>li>a{
  padding:9px 12px;

  border-radius:8px;

  color:#91a8b8;

  font-size:13px;
}

.sidebar .nav.collapse>li>a:hover,
.sidebar .nav.collapse>li.active>a{
  background:rgba(255,255,255,.07);
  color:#fff;
}

.sidebar::-webkit-scrollbar{
  width:5px;
}

.sidebar::-webkit-scrollbar-thumb{
  border-radius:5px;
  background:rgba(255,255,255,.16);
}


/* ==========================================================================
   APP CONTENT FRAME
   ========================================================================== */

.wrapper>section{
  min-height:100vh!important;

  display:flex;
  flex-direction:column;

  margin-left:var(--cd-sidebar)!important;
  padding-top:var(--cd-topbar)!important;

  background:var(--cd-canvas)!important;
}

.main-content{
  width:100%;
  max-width:1600px;

  min-height:calc(100vh - var(--cd-topbar) - 94px);

  margin:0 auto;
  padding:34px 36px 48px!important;
}

.main-content>h1:first-child,
.main-content>h3:first-child{
  margin:0 0 28px;
  padding:0;
}

.main-content>h3:first-child small{
  display:block;

  margin-top:7px;

  font:500 14px "DM Sans",sans-serif;

  letter-spacing:0;
}

.page-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:24px;
}

.page-heading h1{
  margin:0;
}

.page-heading p{
  margin:6px 0 0;

  color:var(--cd-muted);
}

.empty-state{
  padding:54px 24px;

  color:var(--cd-muted);

  text-align:center;
}

.empty-state em{
  display:block;

  margin-bottom:12px;

  color:#afbcc9;

  font-size:34px;
}

.empty-state strong{
  display:block;

  margin-bottom:5px;

  color:var(--cd-ink);

  font:800 17px "Manrope",sans-serif;
}


/* ==========================================================================
   SIDEBAR LEGACY OVERRIDES
   ========================================================================== */

.sidebar>.nav>li,
.sidebar>.nav>li.active,
.sidebar>.nav>li.open,
.sidebar .nav.collapse,
.sidebar .nav.collapse.in{
  background:transparent!important;
}

.sidebar .nav.collapse>li{
  background:transparent!important;
}

.sidebar .nav.collapse>li>a:before{
  display:none!important;
}

.sidebar .nav.collapse>li>a{
  display:block!important;
  border:0!important;
}


/* Sidebar hierarchy */

.wrapper>.aside .sidebar>.nav{
  margin:0!important;
  padding:0!important;

  background:transparent!important;
}

.wrapper>.aside .sidebar>.nav>li,
.wrapper>.aside .sidebar>.nav>li:hover,
.wrapper>.aside .sidebar>.nav>li.active,
.wrapper>.aside .sidebar>.nav>li.open{
  margin:3px 0!important;

  border:0!important;

  background:transparent!important;
}

.wrapper>.aside .sidebar>.nav>li>a,
.wrapper>.aside .sidebar>.nav>li:hover>a,
.wrapper>.aside .sidebar>.nav>li.active>a,
.wrapper>.aside .sidebar>.nav>li.open>a{
  position:relative;

  min-height:46px;

  padding:10px 13px!important;

  border:0!important;
  border-radius:10px!important;

  background:transparent!important;

  color:#afc0cd!important;

  text-decoration:none!important;

  box-shadow:none!important;
}

.wrapper>.aside .sidebar>.nav>li>a:hover{
  background:rgba(255,255,255,.07)!important;
  color:#fff!important;
}

.wrapper>.aside .sidebar>.nav>li.active>a,
.wrapper>.aside .sidebar>.nav>li.open>a{
  background:rgba(52,211,153,.1)!important;

  color:#fff!important;

  box-shadow:
    inset 3px 0 0 var(--cd-brand)!important;
}

.wrapper>.aside .sidebar>.nav>li>a>em{
  width:22px!important;
  flex:0 0 22px;

  margin:0!important;

  color:#829aac!important;

  font-size:16px;
}

.wrapper>.aside .sidebar>.nav>li.active>a>em,
.wrapper>.aside .sidebar>.nav>li.open>a>em{
  color:#43d7a5!important;
}

.wrapper>.aside .sidebar>.nav>li>a.has-submenu:after{
  position:absolute;

  top:50%;
  right:13px;

  color:#657f91;

  content:"›";

  font-family:inherit;
  font-size:13px;

  transform:translateY(-50%);

  transition:transform .18s ease;
}

.wrapper>.aside .sidebar>.nav>li.active>a.has-submenu:after,
.wrapper>.aside .sidebar>.nav>li.open>a.has-submenu:after{
  color:#93aab9;

  transform:
    translateY(-50%)
    rotate(90deg);
}

.wrapper>.aside .sidebar>.nav>li>.nav,
.wrapper>.aside .sidebar>.nav>li:hover>.nav,
.wrapper>.aside .sidebar>.nav>li.active>.nav,
.wrapper>.aside .sidebar>.nav>li.open>.nav,
.wrapper>.aside .sidebar>.nav>li>.nav.in{
  height:auto;

  padding:5px 5px 6px 45px!important;
  margin:0!important;

  border:0!important;
  border-left:0!important;

  background:transparent!important;

  box-shadow:none!important;
}

.wrapper>.aside .sidebar>.nav>li>.nav:not(.in){
  display:none;
}

.wrapper>.aside .sidebar>.nav>li>.nav>li,
.wrapper>.aside .sidebar>.nav>li>.nav>li:hover,
.wrapper>.aside .sidebar>.nav>li>.nav>li.active{
  margin:1px 0!important;

  border:0!important;

  background:transparent!important;
}

.wrapper>.aside .sidebar>.nav>li>.nav>li>a,
.wrapper>.aside .sidebar>.nav>li>.nav>li:hover>a,
.wrapper>.aside .sidebar>.nav>li>.nav>li.active>a{
  min-height:35px;

  padding:8px 10px!important;

  border:0!important;
  border-radius:8px!important;

  background:transparent!important;

  color:#8299aa!important;

  font-size:12px;
  font-weight:600;
  line-height:19px;

  text-decoration:none!important;
}

.wrapper>.aside .sidebar>.nav>li>.nav>li>a:hover{
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
}

.wrapper>.aside .sidebar>.nav>li>.nav>li.active>a{
  background:rgba(52,211,153,.1)!important;

  color:#6ee3ba!important;

  font-weight:800;
}

.wrapper>.aside .sidebar>.nav>li>.nav>li>a:after,
.wrapper>.aside .sidebar>.nav>li>.nav>li>a:before{
  display:none!important;

  content:none!important;
}

.wrapper>.aside .sidebar .item-text{
  background:transparent!important;
}


/* ==========================================================================
   CARDS AND CONTENT
   ========================================================================== */

.panel{
  margin-bottom:22px;

  overflow:hidden;

  border:1px solid rgba(16,43,67,.09)!important;
  border-radius:var(--cd-radius)!important;

  background:var(--cd-card);

  box-shadow:var(--cd-shadow)!important;
}

.panel-heading{
  min-height:54px;

  display:flex;
  align-items:center;

  padding:15px 20px!important;

  border:0!important;
  border-bottom:1px solid var(--cd-line)!important;

  background:#fff!important;

  color:var(--cd-ink)!important;

  font-family:"Manrope",sans-serif;
  font-size:15px;
  font-weight:800;
}

.panel-body{
  padding:22px!important;
}

.panel-footer{
  padding:15px 20px;

  border-top:1px solid var(--cd-line);

  background:#fafbfd;
}

.well{
  border:1px solid var(--cd-line);
  border-radius:13px;

  background:#f8fafc;

  box-shadow:none;
}

.row>[class*="col-"]>.panel:last-child{
  margin-bottom:22px;
}

.dashboard-calendar-heading{
  justify-content:space-between;
  gap:18px;
}

.dashboard-calendar-heading h3,
.upcoming-jobs-panel .panel-heading h3{
  margin:0;
  font-size:16px;
}

.calendar-filters{
  display:flex;
  align-items:center;
  gap:16px;

  font-family:"DM Sans",sans-serif;
}

.calendar-filters label{
  display:inline-flex;
  align-items:center;

  gap:6px;

  margin:0;

  color:var(--cd-muted);

  font-size:12px;

  cursor:pointer;
}

.calendar-filters input{
  margin:0;
  accent-color:var(--cd-brand);
}

.calendar-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#16a34a;
}

.calendar-dot.is-schedule{
  background:#2563eb;
}

.calendar-dot.is-leave{
  background:#dc2626;
}

.calendar-dot.is-jobs{
  background:
    linear-gradient(
      135deg,
      #d97706 0 33%,
      #16a34a 33% 66%,
      #7c3aed 66%
    );
}

.upcoming-jobs-panel .panel-heading{
  justify-content:space-between;
}

.upcoming-jobs-panel .panel-heading>a{
  font-family:"DM Sans",sans-serif;
  font-size:12px;
}

.upcoming-jobs-list{
  margin:0;
}

.upcoming-jobs-list .list-group-item{
  min-height:75px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:12px 16px;

  border-width:0 0 1px;
}

.upcoming-jobs-list .list-group-item:last-child{
  border-bottom:0;
}

.upcoming-jobs-list time{
  width:45px;
  height:48px;
  flex:0 0 45px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#edf3f8;

  color:var(--cd-ink);

  line-height:1;
}

.upcoming-jobs-list time strong{
  font:800 18px "Manrope",sans-serif;
}

.upcoming-jobs-list time span{
  color:var(--cd-muted);

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
}

.upcoming-job-copy{
  min-width:0;
  flex:1;
}

.upcoming-job-copy>strong,
.upcoming-job-copy>small{
  display:block;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.upcoming-job-copy>strong{
  color:var(--cd-ink);

  font:800 13px "Manrope",sans-serif;
}

.upcoming-job-copy>small{
  margin-top:4px;

  color:var(--cd-muted);

  font-size:11px;
}

.upcoming-jobs-list .jc-icon{
  color:#9aa7b5;
  font-size:11px;
}

.upcoming-empty{
  padding:42px 20px;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

label,
.control-label{
  margin-bottom:7px;

  color:#24354a;

  font-weight:700;
}

.form-control{
  height:44px;

  padding:9px 13px;

  border:1px solid #d6e0ea;
  border-radius:10px;

  background:#fff;

  color:var(--cd-ink);

  font:500 14px "DM Sans",sans-serif;

  box-shadow:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

textarea.form-control{
  height:auto;
  min-height:100px;

  line-height:1.55;
}

.form-control:focus{
  border-color:var(--cd-brand);

  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--cd-brand) 12%,
      transparent
    );
}

.form-control[disabled],
.form-control[readonly]{
  background:#f2f5f8;
  color:#77869a;
}

.form-group{
  margin-bottom:19px;
}

input[type="file"].form-control{
  height:auto;
  min-height:44px;
  padding:4px 10px 4px 4px;
}

input[type="color"].form-control{
  padding:5px;
  cursor:pointer;
}

/*
 * Legacy Bootstrap uses a 30/31px height for .input-sm controls.
 * That is too short for JobCue's current DM Sans form typography and can
 * visibly clip native select/date controls. Keep compact controls compact,
 * but give them enough vertical room throughout the application.
 */
.form-control.input-sm{
  height:38px;
  min-height:38px;
  padding:7px 10px;
  border-radius:8px;
  font-size:13px;
  line-height:1.4;
}

select.form-control.input-sm{
  height:38px;
  min-height:38px;
  padding-top:6px;
  padding-bottom:6px;
  line-height:normal;
}

input[type="date"].form-control.input-sm,
input[type="time"].form-control.input-sm,
input[type="datetime-local"].form-control.input-sm,
input[type="month"].form-control.input-sm{
  line-height:1.4;
}

textarea.form-control.input-sm,
select[multiple].form-control.input-sm{
  height:auto;
  min-height:38px;
}

.chosen-container .chosen-single{
  height:44px!important;

  padding:10px 13px!important;

  border:1px solid #d6e0ea!important;
  border-radius:10px!important;

  background:#fff!important;

  box-shadow:none!important;
}

.input-group-addon{
  border-color:#d6e0ea;

  background:#f7f9fb;

  color:var(--cd-muted);
}

td.inline-block{
  position:relative;
}

.ajax-save-status{
  position:absolute;
  z-index:3;

  top:50%;
  right:24px;

  min-height:26px;

  display:inline-flex;
  align-items:center;

  gap:6px;

  margin:0;
  padding:3px 9px;

  border-radius:999px;

  font-size:12px;
  font-weight:800;

  transform:translateY(-50%);

  transition:opacity .25s ease;
}

.ajax-save-status.is-saving{
  background:#edf4fa;
  color:#526a80;
}

.ajax-save-status.is-saved{
  width:28px;
  height:28px;

  justify-content:center;

  padding:0;

  background:#e7f8f1;

  color:#087455;

  font-size:14px;
}

.ajax-save-status.is-error{
  background:#fff0f1;
  color:#aa2d3a;
}

.ajax-save-status.is-fading{
  opacity:.45;
}

.jc-autosave-status{display:inline-flex;align-items:center;gap:5px;min-height:20px;margin:5px 0 0 8px;color:var(--cd-muted);font-size:11px;font-weight:700;vertical-align:middle;transition:opacity .25s ease,transform .25s ease}.jc-autosave-status.is-saving{color:var(--cd-muted)}.jc-autosave-status.is-saved{color:var(--cd-green)}.jc-autosave-status.is-error{color:var(--cd-danger)}.jc-autosave-status.is-fading{opacity:0;transform:translateY(-2px)}.jc-autosave-error{border-color:var(--cd-danger)!important;box-shadow:0 0 0 3px rgba(196,61,75,.1)!important}

.form-control.ajax-save-error{
  border-color:var(--cd-danger);

  box-shadow:
    0 0 0 3px rgba(196,61,75,.1);
}

.ajaxconfirm{
  display:none!important;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  min-height:40px;

  padding:9px 15px;

  border-width:1px;
  border-radius:10px;

  font-family:"DM Sans",sans-serif;
  font-weight:700;
  line-height:20px;

  box-shadow:none;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary,
.btn-success{
  border-color:transparent!important;

  background:
    linear-gradient(
      135deg,
      var(--cd-brand),
      color-mix(
        in srgb,
        var(--cd-brand) 72%,
        #071426
      )
    )!important;

  color:#fff!important;

  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--cd-brand) 20%,
      transparent
    )!important;
}

.btn-default{
  border-color:#d6e0ea;

  background:#fff;

  color:#23364a;
}

.btn-default:hover{
  border-color:#b9c7d5;
  background:#f8fafc;
}

.btn-info{
  border-color:#c9deeb;
  background:#eaf5fb;
  color:#175c7a;
}

.btn-warning{
  border-color:#f1d5a3;
  background:#fff7e7;
  color:#8a5708;
}

.btn-danger{
  border-color:#f0c5ca;
  background:#fff0f1;
  color:#a72e3a;
}

.btn-link{
  box-shadow:none;
}

.btn-lg{
  min-height:48px;

  padding:13px 20px;

  border-radius:12px;
}

.btn-xs{
  min-height:28px;

  padding:3px 8px;

  border-radius:7px;

  font-size:12px;
}


/* ==========================================================================
   TABLES
   ========================================================================== */

.table-responsive{
  border:0;
}

.table{
  margin-bottom:0;
  background:#fff;
}

.table>thead>tr>th{
  padding:12px 14px;

  border:0;
  border-bottom:1px solid var(--cd-line);

  background:#f6f8fb;

  color:#5c6d81;

  font-size:11px;
  font-weight:800;

  letter-spacing:.055em;
  text-transform:uppercase;

  vertical-align:middle;
}

.table>tbody>tr>td{
  padding:13px 14px;

  border-top:1px solid #edf1f5;

  color:#24354a;

  vertical-align:middle;
}

.table-hover>tbody>tr:hover{
  background:#f7fafc;
}

.table>tbody>tr.success>td{
  background:#ecfaf5;
}

.table>tbody>tr.danger>td{
  background:#fff2f3;
}


/* ==========================================================================
   RECORD PAGES
   ========================================================================== */

.record-heading{
  align-items:center;
}

.record-kicker{
  margin:0 0 5px!important;

  color:var(--cd-brand)!important;

  font-size:12px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}

.record-heading h1{
  font-size:34px;
}

.record-panel-body{
  padding:0!important;
}

.record-fields{
  table-layout:fixed;
}

.record-fields>tbody>tr>td{
  height:76px;

  padding:14px 18px;

  border-color:#edf1f5;

  vertical-align:middle;
}

.record-fields>tbody>tr>td:first-child{
  width:38%;

  color:#314157;
}

.record-fields>tbody>tr>td:last-child{
  width:62%;
}

.record-fields .form-control{
  width:100%;
  max-width:none;
}

.record-fields br{
  display:none;
}

.record-panel+.panel{
  margin-top:0;
}

.tab-content>.tab-pane>.row{
  margin-left:-10px;
  margin-right:-10px;
}

.tab-content>.tab-pane>.row>[class*="col-"]{
  padding-left:10px;
  padding-right:10px;
}

.note-form{
  display:grid;
  grid-template-columns:1fr auto;

  gap:10px 12px;

  align-items:end;
}

.note-form label{
  grid-column:1/-1;
}

.note-form textarea{
  min-height:92px;
  resize:vertical;
}

.note-form .btn{
  min-width:100px;
}

.messagebubble{
  border-radius:12px!important;
}

.messagebubble .panel-heading{
  min-height:42px;

  padding:10px 14px!important;

  font-size:12px;
}

.messagebubble .panel-heading .text-muted{
  margin-left:4px;

  font-family:"DM Sans",sans-serif;
}

.messagebubble .panel-body{
  padding:14px!important;
}


/* ==========================================================================
   TABS, ALERTS AND SUPPORTING UI
   ========================================================================== */

.nav-tabs{
  margin-bottom:22px;

  border:0;
  border-bottom:1px solid var(--cd-line);
}

.nav-tabs>li{
  margin:0 4px -1px 0;
}

.nav-tabs>li>a{
  padding:12px 15px;

  border:0!important;
  border-bottom:3px solid transparent!important;
  border-radius:0;

  color:var(--cd-muted);

  font-weight:700;
}

.nav-tabs>li>a:hover{
  background:transparent;
  color:var(--cd-ink);
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover{
  border-bottom-color:var(--cd-brand)!important;

  background:transparent!important;

  color:var(--cd-ink)!important;
}

.tab-content{
  padding-top:2px;

  border:0!important;
}

.alert{
  padding:14px 16px;

  border:1px solid transparent;
  border-radius:11px;

  box-shadow:none;
}

.alert-success{
  border-color:#c4efdf;

  background:#ebfaf4;

  color:#11644e;
}

.alert-danger,
.alert-error{
  border-color:#ffd2d7;

  background:#fff0f1;

  color:#a92332;
}

.alert-warning{
  border-color:#f3dfb8;

  background:#fff8e9;

  color:#82540d;
}

.alert-info{
  border-color:#cce4f1;

  background:#edf8fd;

  color:#235e7b;
}

.badge,
.label{
  padding:5px 8px;

  border-radius:999px;

  font-weight:700;
}

.pagination>li>a,
.pagination>li>span{
  margin:0 3px;

  border:1px solid var(--cd-line);
  border-radius:8px!important;

  color:var(--cd-ink);
}

.pagination>.active>a{
  border-color:var(--cd-brand);
  background:var(--cd-brand);
}

hr{
  border-color:var(--cd-line);
}

.messagebubble{
  box-shadow:none!important;
}

.messagebubble.mymessage{
  border-left:4px solid var(--cd-brand)!important;
}


/* ==========================================================================
   JOBS WORKSPACE
   ========================================================================== */

.wrapper>.aside .sidebar>.nav>li.active,
.wrapper>.aside .sidebar>.nav>li.open,
.wrapper>.aside .sidebar>.nav>li.active>.nav,
.wrapper>.aside .sidebar>.nav>li>.nav.in{
  background:transparent!important;
  background-color:transparent!important;
}

.jobs-heading{
  margin-bottom:22px;
}

.jobs-heading-actions{
  display:flex;
  gap:10px;
}

.jobs-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:14px;

  margin-bottom:20px;
}

.job-stat{
  min-height:88px;

  display:flex;
  align-items:center;

  gap:13px;

  padding:15px 17px;

  border:1px solid var(--cd-line);
  border-radius:14px;

  background:#fff;

  color:var(--cd-ink);

  text-align:left;

  box-shadow:0 5px 18px rgba(7,20,38,.045);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.job-stat:hover,
.job-stat.is-active{
  border-color:
    color-mix(
      in srgb,
      var(--cd-brand) 45%,
      var(--cd-line)
    );

  box-shadow:
    0 9px 24px
    color-mix(
      in srgb,
      var(--cd-brand) 10%,
      transparent
    );

  transform:translateY(-1px);
}

.job-stat-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:#eaf1f6;

  color:#35536a;

  font-size:17px;
}

.job-stat-icon.is-quote{
  background:#fff5dd;
  color:#9b690d;
}

.job-stat-icon.is-live{
  background:#e4f8ef;
  color:#087455;
}

.job-stat-icon.is-upcoming{
  background:#eaf1ff;
  color:#315da8;
}

.job-stat small{
  display:block;

  margin-bottom:2px;

  color:var(--cd-muted)!important;

  font-size:11px;
  font-weight:800;

  letter-spacing:.045em;
  text-transform:uppercase;
}

.job-stat strong{
  font:800 24px "Manrope",sans-serif;
}

.jobs-workspace{
  overflow:visible;
}

.jobs-toolbar{
  display:flex;
  align-items:center;

  gap:14px;

  padding:16px 18px;

  border-bottom:1px solid var(--cd-line);
}

.jobs-search{
  position:relative;

  max-width:520px;
  flex:1;
}

.jobs-search>em{
  position:absolute;
  z-index:2;

  top:50%;
  left:14px;

  color:#8291a4;

  transform:translateY(-50%);
}

.jobs-search .form-control{
  padding-left:40px;
  background:#f8fafc;
}

.jobs-filter-group{
  display:flex;

  gap:4px;

  padding:4px;

  border-radius:10px;

  background:#f1f4f7;
}

.jobs-filter{
  min-height:32px;

  padding:6px 11px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#65748b;

  font-size:12px;
  font-weight:800;
}

.jobs-filter:hover,
.jobs-filter.is-active{
  background:#fff;

  color:var(--cd-ink);

  box-shadow:0 2px 7px rgba(7,20,38,.08);
}

.jobs-result-count{
  align-self:center;

  margin-left:auto;

  color:var(--cd-muted);

  font-size:12px;
  font-weight:800;

  white-space:nowrap;
}

.jobs-table>thead>tr>th{
  height:46px;
  padding:11px 16px;
}

.jobs-table>tbody>tr{
  cursor:pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}

.jobs-table>tbody>tr>td{
  height:74px;
  padding:12px 16px;
}

.jobs-table>tbody>tr:hover{
  background:
    color-mix(
      in srgb,
      var(--cd-brand) 4%,
      #fff
    );
}

.job-primary{
  display:flex;
  align-items:center;

  gap:11px;
}

.job-primary>a{
  color:var(--cd-ink);

  font:800 14px "Manrope",sans-serif;
}

.job-primary>a:hover{
  color:var(--cd-brand);
}

.job-number{
  min-width:43px;
  height:31px;

  display:grid;
  place-items:center;

  padding:0 8px;

  border-radius:8px;

  background:#eef2f6;

  color:#617186;

  font-size:11px;
  font-weight:800;
}

.job-status{
  display:inline-flex;
  align-items:center;

  gap:7px;

  padding:6px 9px;

  border-radius:999px;

  font-size:11px;
  font-weight:800;
}

.job-status i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:currentColor;
}

.job-status.is-quote{
  background:#fff5dd;
  color:#94640b;
}

.job-status.is-live{
  background:#e4f8ef;
  color:#087455;
}

.job-status.is-lost,
.job-status.is-cancelled{
  background:#f3f4f6;
  color:#778292;
}

.job-status.is-neutral{
  background:#edf3f7;
  color:#536c80;
}

.job-dates{
  display:flex;
  flex-direction:column;

  gap:3px;
}

.job-dates strong{
  font-size:13px;
}

.job-dates span,
.job-muted{
  color:#8794a5;
  font-size:12px;
}

.job-open{
  text-align:right;
}

.job-open>a{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  margin-left:auto;

  border:1px solid var(--cd-line);
  border-radius:9px;

  color:#586b7f;
}

.job-open>a:hover{
  border-color:var(--cd-brand);

  background:var(--cd-brand);

  color:#fff;
}

.jobs-no-results[hidden]{
  display:none!important;
}


/* ==========================================================================
   DASHBOARD TILES
   ========================================================================== */

.widget{
  min-height:112px;
}

.widget .row-table>[class*="col-"]{
  vertical-align:middle;
}

.widget [class*="bg-"]{
  background:
    linear-gradient(
      145deg,
      var(--cd-brand),
      color-mix(
        in srgb,
        var(--cd-brand) 68%,
        #071426
      )
    )!important;
}

.widget .panel-body{
  padding:20px!important;
}

.widget .jc-icon,
.widget .jc-icon,
.widget .jc-icon{
  color:#fff;
}

.widget .text-muted{
  font-weight:700!important;

  letter-spacing:.03em;

  text-transform:uppercase;
}


/* ==========================================================================
   JOB COMMAND CENTRE
   ========================================================================== */

.job-detail-page{
  max-width:1720px;
}

.job-detail-page>.alert{
  margin-bottom:18px;
}

.job-hero{
  position:relative;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:28px;

  margin-bottom:18px;
  padding:28px 30px;

  overflow:hidden;

  border-radius:20px;

  background:
    linear-gradient(
      125deg,
      #071426 0%,
      #0d3045 64%,
      color-mix(
        in srgb,
        var(--cd-brand) 52%,
        #0d3045
      ) 130%
    );

  box-shadow:0 18px 42px rgba(7,20,38,.19);
}

.job-hero:after{
  position:absolute;

  right:-80px;
  bottom:-145px;

  width:330px;
  height:330px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;

  content:"";
}

.job-hero-main,
.job-hero-actions{
  position:relative;
  z-index:1;
}

.job-back-link{
  display:inline-flex;
  align-items:center;

  gap:7px;

  margin-bottom:21px;

  color:#9eb5c5;

  font-size:12px;
  font-weight:800;
}

.job-back-link:hover{
  color:#fff;
}

.job-hero-title-row{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:7px;
}

.job-reference{
  display:inline-flex;

  padding:5px 9px;

  border-radius:7px;

  background:rgba(255,255,255,.1);

  color:#d7e6ef;

  font-size:11px;
  font-weight:800;

  letter-spacing:.06em;
}

.job-hero .job-status{
  padding:5px 9px;
}

.job-hero h1{
  max-width:850px;

  margin:0;

  color:#fff;

  font-size:36px;
  line-height:1.14;
}

.job-hero-meta{
  display:flex;
  flex-wrap:wrap;

  gap:8px 22px;

  margin-top:15px;

  color:#b6c8d4;

  font-size:13px;
}

.job-hero-meta span{
  display:inline-flex;
  align-items:center;

  gap:7px;
}

.job-hero-meta .jc-icon{
  color:#74d8b6;
}

.job-hero-actions{
  display:flex;

  gap:9px;

  flex:0 0 auto;
}

.job-hero-actions .btn-default{
  border-color:rgba(255,255,255,.16);

  background:rgba(255,255,255,.08);

  color:#fff;
}

.job-hero-actions .btn-default:hover{
  background:rgba(255,255,255,.15);
}

.job-overview-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));

  gap:10px;

  margin-bottom:20px;
}

.job-phase{
  position:relative;

  min-height:91px;

  padding:15px 17px;

  border:1px solid var(--cd-line);
  border-radius:14px;

  background:#fff;

  color:var(--cd-ink);

  text-align:left;

  box-shadow:0 5px 18px rgba(7,20,38,.04);

  transition:
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.job-phase:before{
  position:absolute;

  top:17px;
  right:17px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#c7d1dc;

  content:"";
}

.job-phase:hover{
  border-color:var(--cd-brand);

  transform:translateY(-1px);

  box-shadow:0 9px 22px rgba(7,20,38,.07);
}

.job-phase-label{
  display:block;

  margin-bottom:6px;

  color:#78879a;

  font-size:10px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}

.job-phase strong{
  display:block;

  padding-right:15px;

  font:800 15px "Manrope",sans-serif;
}

.job-phase small{
  display:block;

  margin-top:4px;

  color:#8492a3!important;

  font-size:11px;
}

.job-phase-commercial{
  border-color:#b9dfd3;

  background:#f3fbf8;
}

.job-phase-commercial:before{
  background:var(--cd-brand);
}

.job-performance{
  grid-column:span 3;

  min-width:560px;

  padding:15px 17px;

  border:1px solid #183a50;
  border-radius:16px;

  background:
    radial-gradient(
      circle at 92% -20%,
      rgba(52,211,153,.2),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #071426,
      #102d40
    );

  color:#fff;

  box-shadow:0 10px 28px rgba(7,20,38,.14);
}

.job-performance-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:12px;
}

.job-performance-head>div>strong{
  display:block;

  font:800 15px "Manrope",sans-serif;
}

.job-performance-head>.jc-icon{
  color:#58d4aa;

  font-size:20px;
}

.job-performance-scope{
  display:flex;
  margin-left:auto;
  margin-right:12px;
  padding:2px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(0,0,0,.16);
}

.job-performance-scope button{
  padding:4px 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#9fb5c3;
  font-size:10px;
  font-weight:700;
}

.job-performance-scope button.is-active{
  background:#fff;
  color:#102d40;
}

.job-performance-metric[hidden]{display:none!important;}

.job-performance-kicker{
  display:block;

  margin-bottom:2px;

  color:#71ddba;

  font-size:9px;
  font-weight:800;

  letter-spacing:.1em;
  text-transform:uppercase;
}

.job-performance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:9px;
}

.job-performance-metric{
  min-width:0;

  display:flex;
  align-items:center;

  gap:10px;

  padding:10px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;

  background:rgba(255,255,255,.055);
}

.job-performance-gauge{
  width:52px;
  height:52px;
  flex:0 0 52px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    conic-gradient(
      #4ba9ed calc(var(--gauge)*1%),
      rgba(255,255,255,.1) 0
    );
}

.job-performance-gauge>div{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#10283a;

  line-height:1;
}

.job-performance-gauge .jc-icon{
  color:#83c8f7;

  font-size:11px;
}

.job-performance-gauge b{
  font-size:10px;
}

.job-performance-metric.is-amber .job-performance-gauge{
  background:
    conic-gradient(
      #f3b74e calc(var(--gauge)*1%),
      rgba(255,255,255,.1) 0
    );
}

.job-performance-metric.is-amber .job-performance-gauge .jc-icon{
  color:#ffd988;
}

.job-performance-metric.is-green .job-performance-gauge{
  background:
    conic-gradient(
      #49cf9f calc(var(--gauge)*1%),
      rgba(255,255,255,.1) 0
    );
}

.job-performance-metric.is-green .job-performance-gauge .jc-icon{
  color:#72e1b9;
}

.job-performance-metric.is-over{
  border-color:rgba(255,104,104,.42);
  background:rgba(181,45,55,.16);
}

.job-performance-metric.is-over .job-performance-gauge{
  background:
    conic-gradient(
      #ff6b6b calc(var(--gauge)*1%),
      rgba(255,255,255,.1) 0
    );
}

.job-performance-metric.is-over .job-performance-gauge .jc-icon{
  color:#ff9a9a;
}

.job-performance-copy{
  min-width:0;
}

.job-performance-copy span,
.job-performance-copy strong,
.job-performance-copy small{
  display:block;
}

.job-performance-copy span{
  color:#a9bcc9;

  font-size:9px;
  font-weight:800;

  letter-spacing:.05em;
  text-transform:uppercase;
}

.job-performance-copy strong{
  margin-top:2px;

  overflow:hidden;

  font:800 14px "Manrope",sans-serif;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.job-performance-copy small{
  margin-top:2px;

  overflow:hidden;

  color:#8399a8!important;

  font-size:9px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.job-performance-metric.is-over small{
  color:#ffadad!important;
}

.job-command-layout{
  display:grid;
  grid-template-columns:245px minmax(0,1fr);

  gap:20px;

  align-items:start;
}

.job-section-sidebar{
  position:sticky;

  top:calc(var(--cd-topbar) + 18px);

  padding:10px;

  border:1px solid var(--cd-line);
  border-radius:16px;

  background:#fff;

  box-shadow:var(--cd-shadow);
}

.job-section-sidebar-title{
  margin:4px 9px 9px;

  color:#8995a5;

  font-size:10px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.job-section-nav{
  display:block;

  margin:0;

  border:0;
}

.job-section-nav>li{
  float:none;

  margin:2px 0;
}

.job-section-nav>li>a{
  min-height:54px;

  display:flex;
  align-items:center;

  gap:11px;

  padding:9px 10px;

  border:0!important;
  border-radius:10px!important;

  color:#5f7083;
}

.job-section-nav>li>a>.jc-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#f0f3f6;

  color:#708195;

  font-size:14px;
}

.job-section-nav>li>a>span:last-child{
  min-width:0;
}

.job-section-nav>li>a strong{
  display:block;

  color:#34465a;

  font-size:12px;
  line-height:1.25;
}

.job-section-nav>li>a small{
  display:block;

  margin-top:2px;

  overflow:hidden;

  color:#8a97a6!important;

  font-size:10px;
  font-weight:500;
  line-height:1.25;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.job-section-nav>li>a:hover{
  background:#f5f8fa;
}

.job-section-nav>li.active>a,
.job-section-nav>li.active>a:hover{
  background:#eef9f5!important;

  color:var(--cd-brand)!important;
}

.job-section-nav>li.active>a>.jc-icon{
  background:var(--cd-brand);

  color:#fff;
}

.job-section-nav>li.active>a strong{
  color:var(--cd-ink);
}

.job-section-content{
  min-width:0;
}

.job-section-content>.tab-content{
  padding:4px 0 0;
}

.job-section-content .tab-pane>.job-pane-title{
  margin:0;

  color:var(--cd-ink);

  font-size:25px;
}

.job-pane-intro{
  max-width:760px;

  margin:6px 0 21px;

  color:var(--cd-muted);

  font-size:14px;
}

.job-section-content .panel{
  box-shadow:0 7px 25px rgba(7,20,38,.055)!important;
}

.job-section-content .panel-heading{
  min-height:58px;
}

.job-section-content .panel-heading>.pull-right{
  margin-left:auto;
}

.job-section-content .table-responsive{
  overflow-x:auto;

  border:1px solid var(--cd-line);
  border-radius:11px;
}

.job-section-content .panel-body>.table-responsive .table,
.job-section-content form>.table-responsive .table{
  border:0;
}

.job-section-content .tab-pane>.table-responsive{
  margin-bottom:22px;

  border:1px solid var(--cd-line);
  border-radius:13px;

  background:#fff;

  box-shadow:0 7px 25px rgba(7,20,38,.05);
}

.job-section-content .tab-pane>form>.row{
  margin-top:20px;
}

.job-section-content .alert{
  margin-bottom:18px;
}

.job-section-content hr{
  margin:22px 0;
}

.job-section-content input[type=checkbox]{
  accent-color:var(--cd-brand);
}

.job-po-create-form{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  max-width:100%;
  margin:0 0 5px;
  vertical-align:middle;
}

.job-po-create-form .form-control{
  width:auto;
  max-width:100%;
  margin:0;
}

.job-po-create-form select[name="vat_code_id"]{
  min-width:145px;
}

.job-po-create-form select[name="payment_route"]{
  min-width:235px;
}

.job-po-create-form .btn{
  flex:0 0 auto;
  margin:0;
}

.job-section-content .checkbox-inline{
  margin:4px 18px 8px 0;
}

.job-section-content .label-info{
  background:#e9f3f7;
  color:#35657a;
}

.job-section-content .label-warning{
  background:#fff1ce;
  color:#88600f;
}

.job-section-content .panel-heading .btn{
  margin-top:-3px;
  margin-bottom:-3px;
}

.job-section-content .form-inline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;
}

.job-section-content .form-inline input[type=file]{
  max-width:230px;
}

.job-section-content #quote-section-order{
  max-width:none!important;

  display:grid;

  gap:7px;
}

.job-section-content #quote-section-order .list-group-item{
  margin:0;

  border:1px solid var(--cd-line);
  border-radius:9px;

  background:#f8fafc;
}

.job-section-content #quote-section-order .jc-icon{
  margin-right:8px;
  color:#8b98a7;
}

.job-section-content #financial>form>.table-responsive{
  border:1px solid var(--cd-line);
  border-radius:13px;

  background:#fff;

  box-shadow:0 7px 25px rgba(7,20,38,.05);
}

.job-section-content #financial h3{
  margin:0;

  color:var(--cd-brand);
}

.job-section-content #eventdetails>.row>.col-md-6:first-child>.table{
  overflow:hidden;

  border:1px solid var(--cd-line);
  border-radius:14px;

  border-collapse:separate;

  box-shadow:0 7px 25px rgba(7,20,38,.05);
}

.job-section-content #eventdetails>.row>.col-md-6:first-child>.table td:first-child{
  width:34%;
  background:#fafbfd;
}

.job-section-content #eventdetails>.row>.col-md-6:first-child>.table tr:first-child td{
  border-top:0;
}

.job-section-content .messagebubble{
  margin:10px 0;
}

.job-section-content .messagebubble.mymessage{
  margin-left:24px;

  background:#f7fdfb;
}

.job-section-content .messagebubble:not(.mymessage){
  margin-right:24px;
}

.job-status-new{
  background:#fff1ce;
  color:#8b610c;
}

.job-status-live{
  background:#e3f8ef;
  color:#087455;
}

.job-status-lost,
.job-status-cancelled{
  background:#edf1f4;
  color:#677487;
}


/* ==========================================================================
   ARCHIVED QUOTES
   ========================================================================== */

.archived-quotes-panel{
  margin:18px 0 22px;

  overflow:hidden;

  border:1px solid var(--cd-line);
  border-radius:13px;

  background:#f8fafc;
}

.archived-quotes-panel>summary{
  display:flex;
  align-items:center;

  gap:9px;

  padding:14px 17px;

  color:#586b7f;

  font-weight:800;

  cursor:pointer;

  list-style:none;
}

.archived-quotes-panel>summary::-webkit-details-marker{
  display:none;
}

.archived-quotes-panel>summary:after{
  margin-left:auto;

  color:#8b98a8;

  content:"⌄";

  font-family:inherit;

  transition:transform .18s ease;
}

.archived-quotes-panel[open]>summary:after{
  transform:rotate(180deg);
}

.archived-quotes-panel .badge{
  background:#e6ebf0;
  color:#5d6c7c;
}

.archived-quotes-list{
  border-top:1px solid var(--cd-line);

  background:#fff;
}

.archived-quote{
  display:grid;
  grid-template-columns:
    minmax(180px,1fr)
    130px
    minmax(120px,.7fr)
    auto;

  gap:16px;

  align-items:center;

  padding:14px 17px;

  border-bottom:1px solid #edf1f5;
}

.archived-quote:last-child{
  border-bottom:0;
}

.archived-quote p{
  margin:3px 0;

  color:var(--cd-muted);

  font-size:12px;
}

.archived-quote small{
  display:block;

  color:#8795a5!important;

  font-size:11px;
}

.archived-quote-value{
  text-align:right;
}

.archived-quote-files{
  display:flex;
  flex-direction:column;

  gap:4px;

  font-size:12px;
}


/* ==========================================================================
   EMAIL SETTINGS
   ========================================================================== */

.email-enable{
  display:flex;
  align-items:flex-start;

  gap:12px;

  padding:14px;

  border:1px solid var(--cd-line);
  border-radius:12px;

  background:#f8fafc;

  cursor:pointer;
}

.email-enable input{
  margin-top:4px;

  accent-color:var(--cd-brand);
}

.email-enable strong,
.email-enable small{
  display:block;
}

.email-enable small{
  margin-top:3px;
  font-weight:500;
}

.email-provider-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:9px;
}

.email-provider-grid>label{
  margin:0;

  cursor:pointer;
}

.email-provider-grid input{
  position:absolute;

  opacity:0;

  pointer-events:none;
}

.email-provider-grid label>span{
  min-height:105px;

  display:flex;
  align-items:center;
  flex-direction:column;

  padding:16px 10px;

  border:1px solid var(--cd-line);
  border-radius:12px;

  background:#fff;

  text-align:center;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.email-provider-grid i{
  margin-bottom:8px;

  color:#718398;

  font-size:21px;
}

.email-provider-grid strong{
  font-size:13px;
}

.email-provider-grid small{
  margin-top:3px;

  font-size:10px;
  font-weight:500;
}

.email-provider-grid input:checked+span{
  border-color:var(--cd-brand);

  background:#f0faf6;

  box-shadow:0 0 0 3px rgba(10,143,104,.09);
}

.email-provider-grid input:checked+span i{
  color:var(--cd-brand);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{
  position:static!important;

  left:auto!important;
  right:auto!important;

  width:auto!important;

  margin:0;
  padding:20px 36px;

  border-top:1px solid var(--cd-line);

  box-sizing:border-box;

  color:var(--cd-muted);
}

footer>.row{
  margin-left:0;
  margin-right:0;
}

footer a{
  font-weight:700;
}


/* ==========================================================================
   COLLAPSED DESKTOP SIDEBAR
   ========================================================================== */

.aside-collapsed .aside{
  width:70px!important;
}

.aside-collapsed .wrapper>section{
  margin-left:70px!important;
}

.aside-collapsed .navbar-top .navbar-header{
  width:70px;
}

.aside-collapsed .navbar-top .nav-wrapper{
  margin-left:70px;
}

.aside-collapsed .navbar-top .navbar-brand{
  justify-content:center;
  padding-left:8px;
  padding-right:8px;
}

.aside-collapsed .navbar-top .brand-logo{
  display:none!important;
}

.aside-collapsed .navbar-top .brand-logo-collapsed{
  width:100%;
  height:var(--cd-topbar);

  display:flex!important;
  align-items:center;
  justify-content:center;

  color:#fff;
}

.aside-collapsed .sidebar>.nav>li>a{
  justify-content:center;

  padding-left:10px!important;
  padding-right:10px!important;
}

.aside-collapsed .sidebar>.nav>li>a em{
  margin:0;
}

.aside-collapsed .sidebar>.nav>li>a>span,
.aside-collapsed .sidebar>.nav>li>a>.item-text{
  display:none;
}

@media(min-width:768px){
  .aside-collapsed .aside .sidebar{
    height:calc(100vh - var(--cd-topbar))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
  }

  .aside-collapsed .aside .sidebar>.nav{
    min-height:max-content;
    padding-bottom:22px;
  }

  .aside-collapsed .aside .sidebar>.nav>li>a{
    position:relative;
  }

  .jc-sidebar-tooltip{
    position:fixed;
    z-index:10050;
    max-width:260px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:#10283d;
    box-shadow:0 8px 24px rgba(4,18,31,.28);
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1.25;
    pointer-events:none;
    white-space:nowrap;
  }

  .jc-sidebar-tooltip[hidden]{display:none!important}
}


/* ==========================================================================
   GENERAL RESPONSIVE
   ========================================================================== */

@media(max-width:1200px){

  .jobs-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .jobs-toolbar{
    align-items:stretch;
    flex-wrap:wrap;
  }

  .jobs-search{
    max-width:none;
    flex-basis:100%;
  }

  .jobs-result-count{
    align-self:center;
  }

  .cuedesk-timezone-select{
    width:155px!important;
  }

  .cuedesk-account-company,
  .cuedesk-account-name{
    max-width:135px;
  }
}

@media(max-width:1024px){

  :root{
    --cd-sidebar:225px;
  }

  .main-content{
    padding:28px 24px 42px!important;
  }

  .cuedesk-timezone-select{
    display:none;
  }

  .jobs-table>thead>tr>th:nth-child(6),
  .jobs-table>tbody>tr>td:nth-child(6){
    display:none;
  }
}

@media(max-width:900px){

  .jobs-table-wrap{
    overflow:visible;
  }

  .jobs-table,
  .jobs-table>tbody{
    display:block;
  }

  .jobs-table>thead{
    display:none;
  }

  .jobs-table>tbody{
    padding:10px;
  }

  .jobs-table>tbody>tr{
    position:relative;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px 18px;

    margin-bottom:10px;
    padding:16px;

    border:1px solid var(--cd-line);
    border-radius:13px;

    background:#fff;
  }

  .jobs-table>tbody>tr>td{
    display:block!important;

    height:auto;

    padding:0;

    border:0;
  }

  .jobs-table>tbody>tr>td:before{
    display:block;

    margin-bottom:4px;

    color:#8794a5;

    content:attr(data-label);

    font-size:10px;
    font-weight:800;

    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .jobs-table>tbody>tr>td:first-child{
    grid-column:1/-1;
  }

  .jobs-table>tbody>tr>td:first-child:before,
  .jobs-table>tbody>tr>td.job-open:before{
    display:none;
  }

  .jobs-table>tbody>tr>td.job-open{
    position:absolute;

    top:15px;
    right:15px;
  }

  .job-primary{
    padding-right:48px;
  }
}


/* ==========================================================================
   MOBILE APP SHELL
   ========================================================================== */

@media(max-width:767px){

  :root{
    --cd-safe-top:env(safe-area-inset-top,0px);
    --cd-topbar:calc(108px + var(--cd-safe-top));
  }

  /* iOS Safari zooms the entire viewport when a focused control has computed
     text below 16px. Keep form entry readable without disabling user zoom. */
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-control,
  .chosen-container .chosen-single,
  .chosen-container .chosen-drop,
  .chosen-container .chosen-search input{
    font-size:16px!important;
  }

  /* --------------------------------------------------------------------------
     Top bar
     -------------------------------------------------------------------------- */

  .navbar-top{
    position:fixed;
    top:0;
    right:0;
    left:0;

    z-index:1050;

    height:var(--cd-topbar)!important;
    min-height:var(--cd-topbar)!important;

    margin:0!important;

    overflow:visible;
  }

  /*
   * On mobile the header owns the full width. The brand and hamburger are
   * positioned independently so Bootstrap's navbar floats cannot push either
   * control onto a second line.
   */
  .navbar-top .navbar-header,
  .aside-collapsed .navbar-top .navbar-header{
    position:relative;

    width:100%!important;
    height:calc(58px + var(--cd-safe-top))!important;
    min-height:calc(58px + var(--cd-safe-top))!important;

    margin:0!important;
    padding:0!important;

    float:none!important;

    display:block!important;

    background:transparent!important;
  }


  /* --------------------------------------------------------------------------
     Brand
     -------------------------------------------------------------------------- */

  .navbar-top .navbar-brand,
  .aside-collapsed .navbar-top .navbar-brand{
    position:absolute;

    top:calc(var(--cd-safe-top) + 29px);
    left:16px;

    width:auto!important;
    max-width:calc(100vw - 82px);

    height:auto!important;

    margin:0!important;
    padding:0!important;

    display:block!important;

    transform:translateY(-50%);
  }

  .navbar-top .brand-logo,
  .aside-collapsed .navbar-top .brand-logo{
    width:fit-content!important;
    height:44px!important;
    max-width:100%;

    display:flex!important;
    align-items:center;
    box-sizing:border-box;
  }

  .navbar-top .brand-logo-tenant,
  .aside-collapsed .navbar-top .brand-logo-tenant{
    padding:5px 8px;
    border-radius:10px;
    background:#fff;
  }

  /*
   * When a customer logo exists, keep it compact enough to share the mobile
   * header with the account controls.
   */
  .navbar-top .brand-logo img{
    display:block;

    width:auto!important;
    height:auto!important;

    max-width:100%;
    max-height:34px;

    padding:0;
    object-fit:contain;
    object-position:left center;
  }

  /*
   * Default JobCue wordmark.
   */
  .cuedesk-default-logo{
    display:block;

    padding:0!important;

    color:#fff;

    font-size:19px;
    font-weight:800;
    line-height:1;

    letter-spacing:-.5px;
    white-space:nowrap;
  }

  /*
   * Do not use the collapsed desktop logo treatment on mobile.
   */
  .aside-collapsed .navbar-top .brand-logo-collapsed{
    display:none!important;
  }


  /* --------------------------------------------------------------------------
     Hamburger
     -------------------------------------------------------------------------- */

  .cuedesk-mobile-menu-toggle{
    position:absolute!important;

    top:calc(var(--cd-safe-top) + 29px)!important;
    right:10px!important;
    left:auto!important;

    z-index:10;

    width:42px!important;
    height:42px!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center;
    justify-content:center;

    border:0!important;
    border-radius:9px;

    background:transparent!important;

    color:#d7e3eb!important;

    font-size:21px;

    transform:translateY(-50%);

    touch-action:manipulation;
  }

  .cuedesk-mobile-menu-toggle:hover,
  .cuedesk-mobile-menu-toggle:focus{
    background:rgba(255,255,255,.08)!important;

    color:#fff!important;

    outline:none!important;
  }


  /* --------------------------------------------------------------------------
     Right-hand navbar controls
     -------------------------------------------------------------------------- */

  /*
   * Reserve the far-right 54px for the hamburger.
   */
  .navbar-top .nav-wrapper,
  .aside-collapsed .navbar-top .nav-wrapper{
    position:absolute!important;

    z-index:6;

    top:calc(var(--cd-safe-top) + 58px)!important;
    right:0!important;
    left:0!important;

    width:100%!important;
    height:50px!important;

    margin:0!important;

    display:flex!important;
    align-items:center;

    background:transparent!important;
  }

  .navbar-top .navbar-nav{
    margin:0!important;
  }

  .cuedesk-navbar-left{
    display:none!important;
  }

  .navbar-top .navbar-right,
  .cuedesk-navbar-right{
    width:100%;
    height:50px!important;

    display:flex!important;
    align-items:stretch;

    margin:0!important;

    float:none!important;
  }


  /* --------------------------------------------------------------------------
     Clock
     -------------------------------------------------------------------------- */

  .cuedesk-clock-container{
    height:var(--cd-topbar)!important;

    display:none!important;
    align-items:center;

    gap:0;

    padding:0 5px;

    color:#d7e3eb;
  }

  .cuedesk-timezone-select{
    display:none!important;
  }

  .cuedesk-clock{
    min-width:46px;

    color:#d7e3eb;

    font-size:12px;
  }


  /* --------------------------------------------------------------------------
     Account
     -------------------------------------------------------------------------- */

  .navbar-top
  .navbar-nav>
  .cuedesk-account-menu>
  .cuedesk-account-toggle{
    width:100%;
    height:50px!important;

    display:flex!important;
    align-items:center;

    gap:2px;

    padding:3px!important;
    flex-direction:column;
    justify-content:center;
  }

  .cuedesk-account-details,
  .cuedesk-account-arrow{
    display:none!important;
  }

  .cuedesk-avatar{
    width:25px;
    height:25px;
    flex:0 0 25px;

    border-radius:7px;

    font-size:11px;
  }


  /* --------------------------------------------------------------------------
     Account dropdown
     -------------------------------------------------------------------------- */

  .navbar-top
  .navbar-nav
  .open
  .cuedesk-account-dropdown{
    position:fixed!important;

    z-index:99999;

    top:var(--cd-topbar)!important;
    right:8px!important;
    left:auto!important;

    width:calc(100vw - 16px);
    max-width:355px;

    margin:0!important;
    padding:8px!important;

    float:none!important;

    border:1px solid #e5e7eb!important;
    border-radius:12px!important;

    background:#fff!important;

    box-shadow:0 18px 42px rgba(7,20,38,.2)!important;
  }

  .navbar-top
  .navbar-nav
  .open
  .cuedesk-account-dropdown>
  li>
  a{
    color:#34465a!important;
  }


  /* --------------------------------------------------------------------------
     Sidebar drawer
     -------------------------------------------------------------------------- */

  .aside{
    position:fixed!important;

    z-index:1045;

    top:var(--cd-topbar)!important;
    bottom:0;
    left:0;

    width:min(86vw,300px)!important;

    visibility:hidden;

    pointer-events:none;

    transform:translate3d(-105%,0,0)!important;

    transition:
      transform .22s ease,
      visibility .22s;
  }

  .aside .sidebar{
    height:calc(100vh - var(--cd-topbar));
    height:calc(100dvh - var(--cd-topbar));

    padding-bottom:max(28px,env(safe-area-inset-bottom));

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;
  }

  .cuedesk-mobile-account{
    margin:18px 4px 0!important;
    padding:14px!important;
    border-top:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(255,255,255,.055);
  }

  .cuedesk-mobile-account-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:13px;
    color:#fff;
  }

  .cuedesk-mobile-account-head strong,
  .cuedesk-mobile-account-head small{
    display:block;
  }

  .cuedesk-mobile-account-head small{
    margin-top:2px;
    color:#92aabb!important;
    font-size:10px;
  }

  .cuedesk-mobile-account-avatar{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(52,211,153,.14);
    color:#67e0b5;
    font-weight:800;
  }

  .cuedesk-mobile-tenant-form{
    margin:0 0 12px;
  }

  .cuedesk-mobile-tenant-form label{
    display:block;
    margin:0 0 5px;
    color:#a9bac7;
    font-size:10px;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  .cuedesk-mobile-tenant-form .form-control{
    width:100%!important;
    height:42px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#17293a!important;
  }

  .aside .sidebar .nav>li.cuedesk-mobile-account>a.cuedesk-mobile-logout{
    min-height:42px;
    display:flex!important;
    align-items:center;
    gap:10px;
    padding:10px 12px!important;
    border-radius:9px;
    background:rgba(255,99,110,.1)!important;
    color:#ffb0b6!important;
  }

  .aside-toggled .aside{
    visibility:visible;

    pointer-events:auto;

    transform:translate3d(0,0,0)!important;
  }

  .cuedesk-sidebar-backdrop{
    position:fixed;

    z-index:1040;

    inset:var(--cd-topbar) 0 0;

    border:0;

    background:rgba(3,12,23,.58);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
      opacity .22s ease,
      visibility .22s ease;
  }

  .aside-toggled .cuedesk-sidebar-backdrop{
    opacity:1;
    visibility:visible;

    pointer-events:auto;
  }

  body.aside-toggled{
    height:auto!important;
    overflow-y:auto!important;
  }

  .wrapper>section,
  .csstransforms3d .aside-toggled .wrapper>section,
  .csstransforms3d .aside-toggled .wrapper>footer{
    margin-left:0!important;
    padding-top:var(--cd-topbar)!important;

    transform:none!important;
  }


  /* --------------------------------------------------------------------------
     Main content
     -------------------------------------------------------------------------- */

  .main-content{
    min-height:calc(100vh - var(--cd-topbar) - 110px);

    padding:22px 15px 36px!important;

    overflow:visible;
  }

  .page-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .page-heading .btn{
    width:100%;
  }

  .panel{
    border-radius:13px!important;
  }

  .panel-heading{
    padding:13px 16px!important;
  }

  .panel-body{
    padding:17px!important;
  }

  .table-responsive{
    border:0;

    -webkit-overflow-scrolling:touch;
  }

  .table>thead>tr>th,
  .table>tbody>tr>td{
    padding:10px;
  }

  .nav-tabs{
    display:flex;

    overflow-x:auto;

    white-space:nowrap;

    -webkit-overflow-scrolling:touch;
  }

  h1{
    font-size:27px;
  }

  h2{
    font-size:23px;
  }

  footer{
    margin:0 15px;
  }

  .btn{
    white-space:normal;
  }
}


/*
 * Very narrow phones: retain the account avatar and hamburger, but remove the
 * clock so the JobCue wordmark always has enough room.
 */
@media(max-width:390px){

  .cuedesk-clock-container{
    display:none!important;
  }
}


/* ==========================================================================
   MOBILE CONTENT COMPONENTS
   ========================================================================== */

@media(max-width:767px){

  .dashboard-calendar-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .calendar-filters{
    width:100%;

    gap:11px;

    overflow-x:auto;
  }

  .calendar-filters label{
    flex:0 0 auto;
  }

  .upcoming-jobs-list .list-group-item{
    padding-left:12px;
    padding-right:12px;
  }
}

@media(max-width:767px){

  .record-fields>tbody>tr>td{
    width:100%!important;
    height:auto;

    display:block;

    padding:9px 15px;

    border:0;
  }

  .record-fields>tbody>tr{
    display:block;

    padding:7px 0;

    border-bottom:1px solid var(--cd-line);
  }

  .note-form{
    grid-template-columns:1fr;
  }

  .note-form label{
    grid-column:auto;
  }

  .note-form .btn{
    width:100%;
  }
}

@media(max-width:767px){

  .jobs-heading-actions{
    width:100%;

    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .jobs-summary{
    grid-template-columns:1fr 1fr;

    gap:9px;
  }

  .job-stat{
    min-height:74px;

    padding:11px;
  }

  .job-stat-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .job-stat strong{
    font-size:20px;
  }

  .jobs-toolbar{
    padding:12px;
  }

  .jobs-filter-group{
    width:100%;

    overflow-x:auto;
  }

  .jobs-filter{
    flex:0 0 auto;
  }

  .jobs-result-count{
    margin-left:0;
  }

  .jobs-table>tbody>tr{
    grid-template-columns:1fr;
  }

  .jobs-table>tbody>tr>td:first-child{
    grid-column:auto;
  }
}


/* ==========================================================================
   JOB COMMAND CENTRE RESPONSIVE
   ========================================================================== */

@media(max-width:1200px){

  .job-command-layout{
    grid-template-columns:
      218px
      minmax(0,1fr);
  }

  .job-section-nav>li>a{
    padding-left:8px;
    padding-right:8px;
  }
}

@media(max-width:1099px){

  .job-command-layout{
    display:block;
  }

  .job-section-sidebar{
    position:static;

    margin-bottom:18px;
    padding:8px;
  }

  .job-section-sidebar-title{
    display:none;
  }

  .job-section-nav{
    display:flex;

    gap:5px;

    overflow-x:auto;

    padding-bottom:2px;
  }

  .job-section-nav>li{
    flex:0 0 auto;
  }

  .job-section-nav>li>a{
    min-height:46px;

    padding:7px 11px;
  }

  .job-section-nav>li>a>.jc-icon{
    width:30px;
    height:30px;
    flex-basis:30px;
  }

  .job-section-nav>li>a small{
    display:none;
  }

  .job-section-nav>li>a strong{
    white-space:nowrap;
  }

  .job-section-content{
    scroll-margin-top:90px;
  }
}

@media(max-width:767px){

  .job-hero{
    align-items:flex-start;
    flex-direction:column;

    padding:22px 20px;

    border-radius:16px;
  }

  .job-hero h1{
    font-size:28px;
  }

  .job-back-link{
    margin-bottom:16px;
  }

  .job-hero-meta{
    display:grid;

    gap:7px;
  }

  .job-hero-actions{
    width:100%;

    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .job-overview-strip{
    grid-template-columns:1fr 1fr;

    gap:8px;
  }

  .job-performance{
    grid-column:1/-1;

    min-width:0;
  }

  .job-performance-grid{
    grid-template-columns:1fr;
  }

  .job-performance-metric{
    padding:9px 11px;
  }

  .job-performance-copy strong{
    font-size:15px;
  }

  .job-phase{
    min-height:82px;

    padding:13px;
  }

  .job-command-layout{
    margin-top:4px;
  }

  .job-section-sidebar{
    margin-left:-15px;
    margin-right:-15px;

    border-left:0;
    border-right:0;
    border-radius:0;
  }

  .job-section-content .tab-pane>.job-pane-title{
    font-size:22px;
  }

  .job-pane-intro{
    font-size:13px;
  }

  .job-section-content .panel-heading{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .job-section-content .panel-heading .pull-right{
    width:100%;

    margin:9px 0 0;
  }

  .job-section-content .panel-heading .pull-right .btn{
    margin-bottom:5px;
  }

  .job-section-content #eventdetails>.row>.col-md-6:first-child>.table td{
    display:block;

    width:100%!important;
  }

  .job-section-content #eventdetails>.row>.col-md-6:first-child>.table td:first-child{
    padding-bottom:5px;

    border:0;
  }

  .job-section-content #eventdetails>.row>.col-md-6:first-child>.table td:last-child{
    padding-top:5px;
  }

  .job-section-content .messagebubble.mymessage,
  .job-section-content .messagebubble:not(.mymessage){
    margin-left:0;
    margin-right:0;
  }
}


/* ==========================================================================
   ARCHIVED QUOTE MOBILE
   ========================================================================== */

@media(max-width:767px){

  .archived-quote{
    grid-template-columns:1fr auto;
  }

  .archived-quote-value{
    grid-column:2;
    grid-row:1;

    text-align:right;
  }

  .archived-quote-files{
    grid-column:1/-1;
  }

  .archived-quote form{
    grid-column:1/-1;
  }

  .archived-quote .btn{
    width:100%;
  }
}


/* ==========================================================================
   EMAIL SETTINGS MOBILE
   ========================================================================== */

@media(max-width:767px){

  .email-provider-grid{
    grid-template-columns:1fr;
  }

  .email-provider-grid label>span{
    min-height:66px;

    align-items:center;
    flex-direction:row;

    gap:12px;

    text-align:left;
  }

  .email-provider-grid i{
    width:24px;

    margin:0;

    text-align:center;
  }

  .email-provider-grid small{
    margin-left:auto;
  }
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{

  .navbar-top,
  .aside,
  footer{
    display:none!important;
  }

  .wrapper>section{
    margin:0!important;
    padding:0!important;
  }

  .main-content{
    max-width:none;

    padding:0!important;
  }

  .panel{
    box-shadow:none!important;
  }
}


/* ==========================================================================
   MOBILE DRAWER LAYER
   ========================================================================== */

@media(max-width:767px){

  .wrapper>.aside{
    z-index:1045!important;
  }
}


/* ==========================================================================
   MOBILE DOCUMENT SCROLLING
   ========================================================================== */

@media(max-width:767px){

  html,
  body{
    height:auto!important;
    min-height:100%;

    overflow-x:hidden!important;
    overflow-y:auto!important;

    overscroll-behavior-y:auto;

    -webkit-overflow-scrolling:touch;
  }

  body{
    position:static!important;

    touch-action:auto;
  }

  .wrapper{
    height:auto!important;
    min-height:100vh!important;

    overflow:visible!important;
  }

  .wrapper>section{
    min-height:100vh!important;

    overflow:visible!important;
  }

  .main-content,
  .panel,
  .panel-heading,
  .panel-body,
  .panel-footer{
    touch-action:auto;
  }

  .panel{
    overflow:visible;
  }

  .table-responsive,
  .nav-tabs{
    max-width:100%;

    overflow-x:auto!important;
    overflow-y:visible!important;

    touch-action:pan-x pan-y;

    overscroll-behavior:auto;

    -webkit-overflow-scrolling:touch;
  }

  .aside .sidebar,
  .crew-popover,
  .crew-manage-panel,
  .crew-activity-form.is-modal-open{
    overscroll-behavior:contain;

    touch-action:pan-y;

    -webkit-overflow-scrolling:touch;
  }
}


/* ==========================================================================
   EQUIPMENT LAYOUT
   ========================================================================== */

.equipment-section-card{
  border-radius:16px;

  overflow:hidden;
}

.equipment-section-card>.panel-heading{
  cursor:grab;

  background:#f7f9fc;
}

.equipment-item-list{
  min-height:58px;

  margin:0;
  padding:8px;
}

.equipment-layout-item{
  display:flex;
  align-items:center;

  gap:12px;

  margin:5px 0;

  border-radius:10px!important;

  cursor:grab;
}

.equipment-layout-item.is-subitem{
  margin-left:38px;

  border-left:3px solid var(--company-primary,#17365d);
}

.equipment-layout-copy{
  min-width:0;
  flex:1;
}

.equipment-layout-copy small{
  display:block;

  margin-top:4px;
}

.equipment-parent-select{
  min-width:210px;

  display:block;

  margin:0;

  font-size:11px;
  font-weight:700;
  line-height:1.35;
}

.equipment-parent-select select.form-control{
  width:100%;

  display:block;

  height:42px!important;
  min-height:42px;

  margin-top:6px;
  padding:8px 38px 8px 12px!important;

  font-size:14px!important;
  font-weight:500;
  line-height:24px!important;
}

.equipment-drag-handle{
  color:#96a3b5;
}

.equipment-empty{
  padding:15px;

  border:1px dashed #ccd5e1;
  border-radius:10px;

  text-align:center;
}

.equipment-layout-item.is-dragging,
.equipment-section-card.is-dragging{
  opacity:.45;
}

@media(max-width:767px){

  .equipment-layout-item{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .equipment-parent-select{
    width:100%;
  }

  .equipment-layout-item.is-subitem{
    margin-left:16px;
  }
}


/* ==========================================================================
   CREW ACTIVITY SCHEDULER
   ========================================================================== */

.crew-scheduler{
  --crew-border:#dfe7ef;
  --crew-muted:#64748b;
  --crew-soft:#f7f9fc;
}

.crew-scheduler-heading,
.crew-group-header,
.crew-role-bar,
.crew-activity-toolbar,
.crew-activity-card{
  display:flex;
  align-items:center;
}

.crew-scheduler-heading{
  justify-content:space-between;

  margin:0 0 20px;
}

.crew-scheduler-heading h2{
  margin:0;
}

.crew-scheduler-heading p,
.crew-group-header p{
  margin:4px 0 0;

  color:var(--crew-muted);
}

.crew-scheduler details{
  position:relative;
}

.crew-scheduler summary{
  cursor:pointer;

  list-style:none;
}

.crew-scheduler summary::-webkit-details-marker{
  display:none;
}

.crew-popover{
  position:absolute;

  z-index:20;

  top:calc(100% + 8px);
  right:0;

  width:340px;

  padding:18px;

  border:1px solid var(--crew-border);
  border-radius:10px;

  background:#fff;

  box-shadow:0 14px 34px rgba(15,23,42,.14);
}

.crew-popover label{
  display:block;

  margin-top:10px;
}

.crew-popover .btn{
  width:100%;

  margin-top:14px;
}

.crew-group-card{
  margin-bottom:24px;

  overflow:visible;

  border:1px solid var(--crew-border);
  border-radius:12px;

  background:#fff;

  box-shadow:0 3px 12px rgba(15,23,42,.04);
}

.crew-group-header{
  justify-content:space-between;

  padding:20px 22px;

  border-bottom:1px solid var(--crew-border);
}

.crew-group-header h3{
  margin:0;
}

.crew-group-actions{
  display:flex;
  align-items:center;

  gap:6px;
}

.crew-group-actions form{
  display:inline;
}

.crew-role-bar{
  justify-content:space-between;

  padding:12px 22px;

  border-bottom:1px solid var(--crew-border);

  background:var(--crew-soft);
}

.crew-role-list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;
}

.crew-role-label{
  color:var(--crew-muted);

  font-size:12px;
  font-weight:700;

  text-transform:uppercase;
}

.crew-role-chip,
.crew-person-chip,
.crew-type-pill{
  display:inline-flex;
  align-items:center;

  gap:5px;

  border-radius:999px;
}

.crew-role-chip{
  padding:5px 10px;

  border:1px solid var(--crew-border);

  background:#fff;
}

.crew-activity-toolbar{
  justify-content:space-between;

  padding:18px 22px;
}

.crew-activity-toolbar h4{
  margin:0;
}

.crew-add-activity{
  position:static!important;
}

.crew-activity-form{
  position:absolute;

  z-index:15;

  right:22px;
  left:22px;

  margin-top:10px;
  padding:20px;

  border:1px solid var(--crew-border);
  border-radius:10px;

  background:#fff;

  box-shadow:0 16px 36px rgba(15,23,42,.14);
}

.crew-form-section{
  margin-bottom:16px;
  padding-bottom:16px;

  border-bottom:1px solid var(--crew-border);
}

.crew-form-section h5{
  margin:0 0 10px;

  font-weight:700;
}

.crew-form-section h5 small{
  color:var(--crew-muted);

  font-weight:400;
}

.crew-charge-section{
  padding:14px;

  border:1px solid var(--crew-border);
  border-radius:8px;

  background:#f8fafc;
}

.crew-activity-list{
  border-top:1px solid var(--crew-border);
}

.crew-empty-activities{
  padding:28px;

  color:var(--crew-muted);

  text-align:center;
}

.crew-activity-card{
  display:grid;
  grid-template-columns:
    minmax(280px,1.5fr)
    minmax(240px,1fr)
    minmax(220px,1fr)
    auto;

  gap:20px;

  padding:18px 22px;

  border-bottom:1px solid var(--crew-border);
}

.crew-activity-card:last-child{
  border-bottom:0;
}

.crew-activity-main{
  display:flex;

  gap:12px;
}

.crew-activity-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:#eef7fb;

  color:#1792b5;
}

.crew-activity-title h5{
  margin:5px 0;

  font-size:16px;
}

.crew-activity-title p{
  margin:2px 0;

  color:var(--crew-muted);
}

.crew-type-pill{
  padding:3px 8px;

  background:#e8f7fb;

  color:#147e9a;

  font-size:11px;
  font-weight:700;

  text-transform:uppercase;
}

.crew-activity-commercial{
  display:flex;
  flex-direction:column;
}

.crew-charge-total{
  font-size:20px;
  font-weight:700;
}

.crew-activity-commercial small,
.crew-charge-breakdown{
  color:var(--crew-muted);
}

.crew-charge-breakdown{
  margin-top:5px;

  font-size:12px;
  line-height:1.45;
}

.crew-assignee-summary{
  display:flex;
  align-items:flex-start;
  flex-direction:column;

  gap:5px;
}

.crew-person-chip{
  padding:4px 8px;

  background:#eef6ef;

  color:#287a38;
}

.crew-person-chip small{
  opacity:.75;
}

.crew-activity-actions{
  justify-self:end;
}

.crew-manage-panel{
  position:absolute;

  z-index:20;

  top:calc(100% + 8px);
  right:0;

  width:min(900px,80vw);

  padding:18px;

  border:1px solid var(--crew-border);
  border-radius:10px;

  background:#fff;

  box-shadow:0 16px 36px rgba(15,23,42,.16);
}

.crew-edit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:8px;
}

.crew-assign-form{
  display:grid;
  grid-template-columns:
    1.2fr
    70px
    1.2fr
    1.5fr
    auto;

  gap:8px;
}

.crew-manage-panel hr{
  margin:16px 0;
}

@media(max-width:1100px){

  .crew-activity-card{
    grid-template-columns:1fr 1fr;
  }

  .crew-activity-actions{
    justify-self:start;
  }

  .crew-edit-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .crew-assign-form{
    grid-template-columns:1fr 70px 1fr;
  }
}

@media(max-width:767px){

  .crew-scheduler-heading,
  .crew-group-header,
  .crew-role-bar,
  .crew-activity-toolbar{
    align-items:flex-start;
    flex-direction:column;

    gap:12px;
  }

  .crew-activity-card{
    grid-template-columns:1fr;
  }

  .crew-activity-form{
    right:10px;
    left:10px;
  }

  .crew-popover,
  .crew-manage-panel{
    position:fixed;

    top:80px;
    right:15px;
    left:15px;

    width:auto;
    max-height:80vh;

    overflow:auto;
  }

  .crew-edit-grid,
  .crew-assign-form{
    grid-template-columns:1fr;
  }
}


/* ==========================================================================
   CONTENT MANAGEMENT
   ========================================================================== */

.content-dashboard{
  margin-bottom:18px;
  padding:18px;

  border:1px solid #dce5ea;
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #f5f8ff,
      #eef8f6
    );
}

.content-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:12px;
}

.content-metrics>div{
  padding:14px;

  border:1px solid #e3e8ec;
  border-radius:9px;

  background:#fff;
}

.content-metrics strong{
  display:block;

  color:#17324d;

  font-size:24px;
}

.content-metrics span{
  color:#667784;

  font-size:12px;
}

.content-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:12px;

  margin-top:15px;
}

.content-create{
  position:relative;
}

.content-create[open]>summary{
  margin-bottom:12px;
}

.content-create summary,
.content-item summary{
  cursor:pointer;
  list-style:none;
}

.content-create summary::-webkit-details-marker,
.content-item summary::-webkit-details-marker{
  display:none;
}

.content-form-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));

  gap:12px;

  padding:16px;

  border:1px solid #dce5ea;
  border-radius:9px;

  background:#fff;
}

.content-form-grid label,
.content-inline-form label{
  color:#506170;

  font-size:12px;
}

.content-form-grid .wide{
  grid-column:span 2;
}

.content-empty{
  padding:42px 20px;

  border:1px dashed #c8d2d9;
  border-radius:12px;

  color:#687985;

  text-align:center;
}

.content-empty .jc-icon{
  font-size:32px;
}

.content-item{
  margin-bottom:16px;

  overflow:hidden;

  border:1px solid #dce3e8;
  border-radius:12px;

  background:#fff;

  box-shadow:0 2px 8px rgba(29,54,74,.05);
}

.content-item.is-overdue{
  border-left:4px solid #d9534f;
}

.content-item-header{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:15px;

  padding:17px 19px;
}

.content-item-title{
  display:flex;
  align-items:center;

  gap:12px;
}

.content-item-title h3{
  margin:0 0 3px;

  font-size:18px;
}

.content-item-title p{
  margin:0;

  color:#71808c;

  font-size:12px;
}

.content-type-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#edf4fa;

  color:#2f668a;

  font-size:18px;
}

.content-item-state{
  text-align:right;
}

.content-item-state small{
  display:block;

  margin-top:5px;

  color:#71808c;
}

.content-status{
  display:inline-block;

  padding:5px 9px;

  border-radius:999px;

  background:#edf1f4;

  color:#415463;

  font-size:11px;
  font-weight:700;

  letter-spacing:.03em;
  text-transform:uppercase;
}

.content-status-approved,
.content-status-released{
  background:#dff2e7;

  color:#247044;
}

.content-status-test_failed,
.content-status-changes_required{
  background:#fae2e0;

  color:#a73732;
}

.content-status-testing,
.content-status-ready_for_test,
.content-status-ready_for_approval{
  background:#fff0d5;

  color:#8a5b0a;
}

.content-brief{
  padding:0 19px 12px;

  color:#425563;
}

.content-stage-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  border-top:1px solid #e4e8eb;
  border-bottom:1px solid #e4e8eb;

  background:#f5f7f9;
}

.content-stage-strip span{
  padding:9px;

  color:#87949d;

  font-size:11px;

  text-align:center;
}

.content-stage-strip span.done{
  background:#e7f4ed;

  color:#267349;

  font-weight:700;
}

.content-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.content-columns>section{
  padding:17px 19px;

  border-right:1px solid #e5e9ec;
}

.content-columns>section:last-child{
  border-right:0;
}

.content-columns h4,
.content-manage h4{
  margin:0 0 12px;

  color:#506170;

  font-size:13px;

  letter-spacing:.04em;
  text-transform:uppercase;
}

.current-revision strong,
.current-revision small{
  display:block;
}

.current-revision small{
  margin:4px 0 9px;

  color:#71808c;
}

.content-inline-form{
  display:grid;

  gap:9px;

  margin-top:10px;
  padding:12px;

  border:1px solid #dfe5e9;
  border-radius:8px;

  background:#f7f9fa;
}

.content-inline-form small{
  color:#71808c;
}

.content-result-list{
  margin:0 0 10px;
  padding:0;

  list-style:none;
}

.content-result-list li{
  display:flex;

  gap:9px;

  padding:8px 0;

  border-bottom:1px solid #edf0f2;
}

.content-result-list li div{
  min-width:0;
}

.content-result-list strong,
.content-result-list small,
.content-result-list a{
  display:block;
}

.content-result-list small{
  color:#71808c;
}

.content-result{
  align-self:flex-start;

  padding:3px 6px;

  border-radius:4px;

  font-size:9px;
  font-weight:700;

  text-transform:uppercase;
}

.content-result-pass{
  background:#dff2e7;
  color:#247044;
}

.content-result-fail{
  background:#fae2e0;
  color:#a73732;
}

.content-result-blocked{
  background:#fff0d5;
  color:#8a5b0a;
}

.content-result-not_applicable{
  background:#edf1f4;
  color:#596b78;
}

.content-approval{
  margin-bottom:10px;
  padding-left:10px;

  border-left:3px solid #3c9d68;
}

.content-approval strong,
.content-approval small{
  display:block;
}

.content-approval small{
  color:#71808c;
}

.content-release-form{
  margin-top:10px;
}

.content-manage{
  padding:13px 19px;

  border-top:1px solid #e5e9ec;
}

.content-manage>summary{
  color:#326c92;

  font-weight:600;
}

.content-manage[open]>summary{
  margin-bottom:15px;
}

.content-date-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;
}

.content-audit{
  padding:14px;

  border:1px solid #dfe5e9;
  border-radius:10px;

  background:#f7f9fa;
}

.content-audit summary{
  cursor:pointer;

  font-weight:600;
}

.content-audit ul{
  margin:0;
  padding:10px 0 0;

  list-style:none;
}

.content-audit li{
  padding:7px 0;

  border-bottom:1px solid #e5e9ec;
}

.content-audit small{
  float:right;

  color:#71808c;
}

@media(max-width:1050px){

  .content-form-grid{
    grid-template-columns:1fr 1fr;
  }

  .content-columns{
    grid-template-columns:1fr;
  }

  .content-columns>section{
    border-right:0;
    border-bottom:1px solid #e5e9ec;
  }

  .content-metrics{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){

  .content-form-grid,
  .content-metrics,
  .content-date-grid{
    grid-template-columns:1fr;
  }

  .content-form-grid .wide{
    grid-column:auto;
  }

  .content-toolbar,
  .content-item-header{
    align-items:stretch;
    flex-direction:column;
  }

  .content-item-state{
    text-align:left;
  }

  .content-audit small{
    float:none;

    display:block;
  }
}


/* ==========================================================================
   CLIENT PORTAL
   ========================================================================== */

body:has(> .navbar.navbar-default){
  min-height:100vh;

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(10,143,104,.07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #f7f9fc 0,
      #f2f5f9 420px,
      #f3f6fa 100%
    );
}

body > .navbar.navbar-default{
  min-height:76px;

  margin:0;

  border:0;
  border-radius:0;

  background:
    linear-gradient(
      135deg,
      var(--cd-navy),
      var(--cd-navy-2)
    );

  box-shadow:0 8px 28px rgba(7,20,38,.16);
}

body > .navbar.navbar-default > .container{
  width:calc(100% - 48px);
  max-width:1280px;
  min-height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding:0;
}

body > .navbar.navbar-default .navbar-brand{
  float:none;

  height:auto;

  margin:0!important;
  padding:0;

  color:#fff;

  font:800 17px/1.25 "Manrope",sans-serif;

  letter-spacing:-.02em;
}

body > .navbar.navbar-default .navbar-brand:before{
  width:9px;
  height:9px;

  display:inline-block;

  margin:0 11px 1px 0;

  border-radius:50%;

  background:var(--cd-brand);

  box-shadow:
    0 0 0 5px
    color-mix(
      in srgb,
      var(--cd-brand) 18%,
      transparent
    );

  content:"";
}

body > .navbar.navbar-default .navbar-form{
  float:none!important;

  display:flex;
  align-items:center;

  margin:0 0 0 auto;
  padding:0;

  border:0;

  box-shadow:none;
}

body > .navbar.navbar-default .navbar-form .form-control{
  width:auto;
  min-width:240px;
  max-width:360px;
  height:42px;

  padding:9px 42px 9px 14px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;

  background:rgba(255,255,255,.09);

  color:#fff;

  font-weight:700;

  box-shadow:none;

  cursor:pointer;
}

body > .navbar.navbar-default .navbar-form .form-control:hover,
body > .navbar.navbar-default .navbar-form .form-control:focus{
  border-color:rgba(255,255,255,.32);

  background:rgba(255,255,255,.13);

  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

body > .navbar.navbar-default .navbar-form .form-control option{
  background:#fff;

  color:var(--cd-ink);
}

body > .navbar.navbar-default + .container{
  width:calc(100% - 48px);
  max-width:1280px;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;

  column-gap:24px;
  row-gap:0;

  margin:0 auto;
  padding:42px 0 68px;
}

body > .navbar.navbar-default + .container > h1{
  grid-column:1;
  align-self:center;

  margin:0;

  font-size:34px;
  line-height:1.15;

  letter-spacing:-.045em;
}

body > .navbar.navbar-default + .container > p{
  grid-column:2;
  align-self:center;

  margin:0;
}

body > .navbar.navbar-default + .container > p .btn{
  min-height:44px;

  padding:11px 17px;

  border-radius:11px;
}

body > .navbar.navbar-default + .container > .row{
  grid-column:1/-1;

  width:auto;

  margin:28px -11px 0;
}

body > .navbar.navbar-default + .container > .row > [class*="col-"]{
  padding-left:11px;
  padding-right:11px;
}

body > .navbar.navbar-default + .container .panel{
  margin-bottom:22px;

  border:1px solid rgba(16,43,67,.08)!important;
  border-radius:18px!important;

  background:#fff;

  box-shadow:0 12px 38px rgba(7,20,38,.07)!important;
}

body > .navbar.navbar-default + .container .panel-heading{
  min-height:58px;

  padding:17px 20px!important;

  border-bottom:1px solid #e8edf3!important;

  background:#fff!important;

  font-size:14px;

  letter-spacing:-.01em;
}

body > .navbar.navbar-default + .container .list-group{
  margin:0;
}

body > .navbar.navbar-default + .container .list-group-item{
  padding:15px 20px;

  border-width:0 0 1px;
  border-color:#edf1f5;

  background:#fff;

  color:#304155;

  transition:
    background .16s ease,
    color .16s ease;
}

body > .navbar.navbar-default + .container .list-group-item:last-child{
  border-bottom:0;
}

body > .navbar.navbar-default + .container a.list-group-item:hover,
body > .navbar.navbar-default + .container a.list-group-item:focus{
  background:#f7fafc;

  color:var(--cd-ink);
}

body > .navbar.navbar-default + .container .col-md-7 .list-group-item > strong{
  display:inline-block;

  max-width:calc(100% - 92px);

  color:var(--cd-ink);

  font:800 14px/1.35 "Manrope",sans-serif;
}

body > .navbar.navbar-default + .container .label-default{
  border:1px solid #dfe6ec;

  background:#f5f7f9;

  color:#647487;

  font-size:10px;

  letter-spacing:.055em;
  text-transform:uppercase;
}

body > .navbar.navbar-default + .container .progress{
  height:9px!important;

  margin:12px 0 7px!important;

  overflow:hidden;

  border-radius:999px;

  background:#e9eef3;

  box-shadow:none;
}

body > .navbar.navbar-default + .container .progress-bar{
  min-width:3px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--cd-brand),
      color-mix(
        in srgb,
        var(--cd-brand) 72%,
        #0c2b3f
      )
    );

  box-shadow:none;
}

body > .navbar.navbar-default + .container .col-md-7 .list-group-item small{
  display:block;

  color:#78879a!important;

  font-size:12px;
  font-weight:600;
}

body > .navbar.navbar-default + .container a.list-group-item > span.pull-right{
  max-width:145px;

  margin-left:12px;
  padding:5px 9px;

  border-radius:999px;

  background:#f1f4f7;

  color:#657487;

  font-size:10px;
  font-weight:800;
  line-height:1.25;

  letter-spacing:.035em;
  text-align:center;
  text-transform:uppercase;
}

body > .navbar.navbar-default + .container .col-md-5 .panel:last-child .list-group-item > strong{
  color:var(--cd-ink);

  font-weight:800;
}

body > .navbar.navbar-default + .container .col-md-5 .panel:last-child .list-group-item > span.pull-right{
  color:var(--cd-ink);

  font-weight:800;
}

body > .navbar.navbar-default + .container .list-group-item.text-muted{
  padding-top:18px;
  padding-bottom:18px;

  background:#fbfcfd;
}

@media(max-width:991px){

  body > .navbar.navbar-default + .container > .row > [class*="col-"]{
    float:none;

    width:100%;
  }
}

@media(max-width:767px){

  body > .navbar.navbar-default > .container{
    width:calc(100% - 30px);
    min-height:0;

    flex-direction:column;
    align-items:stretch;

    gap:13px;

    padding:18px 0;
  }

  body > .navbar.navbar-default .navbar-brand{
    font-size:16px;
  }

  body > .navbar.navbar-default .navbar-form{
    width:100%;

    margin:0;
  }

  body > .navbar.navbar-default .navbar-form .form-control{
    width:100%;
    min-width:0;
    max-width:none;
  }

  body > .navbar.navbar-default + .container{
    width:calc(100% - 30px);

    grid-template-columns:1fr;

    padding:30px 0 50px;
  }

  body > .navbar.navbar-default + .container > h1,
  body > .navbar.navbar-default + .container > p{
    grid-column:1;
  }

  body > .navbar.navbar-default + .container > h1{
    font-size:28px;
  }

  body > .navbar.navbar-default + .container > p{
    margin-top:16px;
  }

  body > .navbar.navbar-default + .container > p .btn{
    width:100%;
  }

  body > .navbar.navbar-default + .container > .row{
    margin-top:22px;
  }

  body > .navbar.navbar-default + .container .panel{
    border-radius:15px!important;
  }

  body > .navbar.navbar-default + .container .list-group-item{
    padding:14px 16px;
  }

  body > .navbar.navbar-default + .container a.list-group-item > span.pull-right{
    float:none!important;

    display:inline-block;

    margin:8px 0 0;
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){

  .aside,
  .cuedesk-sidebar-backdrop{
    transition:none!important;
  }
}
.fl-hero h1, .fl-hero h2, .fl-hero h3 {
    color: white;
}
/* JobCue Stage 2D: completed Job status */
.job-status.is-complete,
.job-status-complete{
  background:#e9f2ff;
  color:#315f9a;
}

/* ========================================================================== 
   JOBCUE STATUS LABELS / BADGES — readability pass 2026-08-19
   Bootstrap's legacy outline labels were too low contrast on white panels.
   Keep semantic meaning while using soft filled backgrounds site-wide.
   ========================================================================== */
.label.label-default,
.label.label-primary,
.label.label-success,
.label.label-info,
.label.label-warning,
.label.label-danger{
  display:inline-block;
  padding:5px 9px;
  border-width:1px;
  border-style:solid;
  border-radius:999px;
  background-image:none;
  box-shadow:none;
  text-shadow:none;
  font-weight:750;
  line-height:1.15;
  vertical-align:middle;
}

.label.label-default{
  border-color:#cfd8e2;
  background:#eef2f6;
  color:#425466;
}

.label.label-primary{
  border-color:#acd7df;
  background:#e5f3f6;
  color:#07677a;
}

.label.label-success{
  border-color:#b9dfcf;
  background:#e7f5ef;
  color:#176a50;
}

.label.label-info{
  border-color:#bfd9eb;
  background:#e8f3fa;
  color:#285f7d;
}

.label.label-warning{
  border-color:#ead19b;
  background:#fff4dc;
  color:#79520e;
}

.label.label-danger{
  border-color:#e9bdb5;
  background:#fff0ed;
  color:#963927;
}

.label.label-default[href]:hover,
.label.label-default[href]:focus{background:#e3e9ef;color:#334353;border-color:#bcc8d4;}
.label.label-primary[href]:hover,
.label.label-primary[href]:focus{background:#d7edf1;color:#055768;border-color:#91c9d3;}
.label.label-success[href]:hover,
.label.label-success[href]:focus{background:#d9eee5;color:#115943;border-color:#9fd2bc;}
.label.label-info[href]:hover,
.label.label-info[href]:focus{background:#daebf6;color:#214f68;border-color:#a6cae1;}
.label.label-warning[href]:hover,
.label.label-warning[href]:focus{background:#fceac5;color:#654309;border-color:#dfbf79;}
.label.label-danger[href]:hover,
.label.label-danger[href]:focus{background:#f9e2de;color:#7e2e20;border-color:#dfa69c;}

/* ========================================================================== 
   JOBCUE BOOLEAN TOGGLES + CLIENT PORTAL PUBLISHING — 2026-08-19
   ========================================================================== */
.jc-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  cursor:pointer;
  font-weight:500;
  line-height:1.25;
  user-select:none;
}
.jc-toggle input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none;
}
.jc-toggle-track{
  position:relative;
  flex:0 0 42px;
  width:42px;
  height:24px;
  border:1px solid #c9d4df;
  border-radius:999px;
  background:#e5ebf1;
  box-shadow:inset 0 1px 2px rgba(7,20,38,.05);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.jc-toggle-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(7,20,38,.28);
  transition:transform .18s ease;
}
.jc-toggle input:checked + .jc-toggle-track{
  border-color:var(--cd-brand);
  background:var(--cd-brand);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.jc-toggle input:checked + .jc-toggle-track .jc-toggle-thumb{transform:translateX(18px)}
.jc-toggle input:focus + .jc-toggle-track{outline:3px solid rgba(10,143,104,.16);outline-offset:2px}
.jc-toggle input:disabled + .jc-toggle-track{opacity:.55;cursor:not-allowed}
.jc-toggle input:disabled ~ .jc-toggle-copy{opacity:.62}
.jc-toggle-copy{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--cd-ink)}
.jc-toggle-copy strong{font-weight:700}
.jc-toggle-copy small{display:block;color:var(--cd-muted);font-weight:400;line-height:1.35}
.jc-toggle-block{display:flex;width:100%;padding:9px 0}
.jc-toggle-inline{vertical-align:middle;margin:4px 0}
.jc-toggle-compact{gap:0;flex:0 0 auto}
.jc-toggle-compact .jc-toggle-track{width:38px;flex-basis:38px;height:22px}
.jc-toggle-compact .jc-toggle-thumb{width:14px;height:14px}
.jc-toggle-compact input:checked + .jc-toggle-track .jc-toggle-thumb{transform:translateX(16px)}

.portal-config-shell{max-width:1180px}
.portal-config-intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px;
  margin-bottom:16px;
  border:1px solid var(--cd-line);
  border-radius:15px;
  background:linear-gradient(135deg,#fff,#f7fafc);
}
.portal-config-intro h4{margin:3px 0 7px;font-size:20px}
.portal-config-intro p{max-width:780px;margin:0;color:var(--cd-muted);line-height:1.55}
.portal-config-kicker{
  display:block;
  color:var(--cd-brand);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.portal-settings-form fieldset{min-width:0;padding:0;margin:0;border:0}
.portal-settings-form fieldset[disabled]{opacity:.72}
.portal-config-grid,.portal-granular-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}
.portal-config-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--cd-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(7,20,38,.035);
}
.portal-config-card h5{margin:0 0 5px;font-size:15px}
.portal-config-card>p{margin:0 0 8px;line-height:1.45}
.portal-master-card{margin-bottom:14px;border-color:#cbdbe3;background:#fbfdfd}
.portal-master-card>.jc-toggle .jc-toggle-copy strong{font-size:16px}
.portal-summary-field{margin:15px 0 0;padding-top:15px;border-top:1px solid #e5ebf0}
.portal-settings-save{display:flex;justify-content:flex-end;margin:0 0 22px}
.portal-granular-heading{display:flex;justify-content:space-between;gap:15px;align-items:end;margin:18px 0 10px}
.portal-granular-heading h4{margin:0 0 4px;font-size:18px}
.portal-granular-heading p{margin:0;color:var(--cd-muted)}
.portal-config-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.portal-config-card-head h5{margin:0 0 2px}
.portal-config-card-head small{display:block;color:var(--cd-muted);line-height:1.35}
.portal-config-card-wide{grid-column:1/-1}
.portal-item-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:52px;
  margin:0;
  padding:10px 0;
  border-top:1px solid #edf1f5;
}
.portal-item-row:first-of-type{border-top:0}
.portal-item-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.portal-item-copy strong{overflow-wrap:anywhere;font-size:13px;color:var(--cd-ink)}
.portal-item-copy small{overflow-wrap:anywhere;color:var(--cd-muted);line-height:1.3}
.portal-security-note{margin-top:4px}
.supplier-quote-itemiser>.jc-toggle{padding:8px 10px;border:1px solid #dce5ed;border-radius:10px;background:#f8fafc}

@media(max-width:780px){
  .portal-config-grid,.portal-granular-grid{grid-template-columns:1fr}
  .portal-config-card-wide{grid-column:auto}
  .portal-config-intro{align-items:flex-start;flex-direction:column}
  .portal-settings-save .btn{width:100%}
}

/* JobCue 036 — Universal Review & Approvals */
.content-columns-review{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(320px,1.2fr)}
.review-readiness{padding:10px 12px;border-radius:10px;margin-bottom:10px;border:1px solid #dce5ed;background:#f8fafc}
.review-readiness strong,.review-readiness small{display:block}.review-readiness small{margin-top:2px;color:var(--cd-muted)}
.review-readiness.is-ready{border-color:#cfe6d4;background:#f4fbf6}.review-readiness.is-blocked{border-color:#ecd9b5;background:#fffaf1}
.content-preflight-form{margin-top:10px}.content-preflight-row{display:grid;grid-template-columns:minmax(170px,1fr) 145px minmax(170px,1fr);gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #e8edf1}.content-preflight-row:last-of-type{border-bottom:0}.content-preflight-row small{display:block;color:var(--cd-muted);font-weight:400;margin-top:2px}
.review-client-card{padding:11px 12px;border:1px solid #dce5ed;border-radius:11px;background:#f8fafc;margin:8px 0 10px}.review-client-card.is-open{border-color:#e4c66f;background:#fffdf5}
.review-client-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.review-client-card p{margin:8px 0}.review-instructions{padding:8px 10px;border-left:3px solid #d5dfe7;background:#fff;white-space:pre-line}
.review-inline-alert{padding:9px 10px;margin:9px 0 0;font-size:12px;line-height:1.4}
.review-thread{margin:11px 0;padding-top:9px;border-top:1px solid #e4eaf0}.review-comment{padding:8px 0;border-bottom:1px solid #edf1f4}.review-comment:last-child{border-bottom:0}.review-comment>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.review-comment small{color:var(--cd-muted)}.review-comment p{margin:4px 0 0;white-space:pre-line}.review-comment.is-internal{padding-left:9px;border-left:3px solid #d5dfe7}
.review-approval-section details{margin:7px 0}.review-approval-section .content-release-form{margin-top:9px}
@media(max-width:1180px){.content-columns-review{grid-template-columns:1fr 1fr}.content-columns-review>.review-approval-section{grid-column:1/-1;border-top:1px solid #e8edf1}}
@media(max-width:760px){.content-columns-review{grid-template-columns:1fr}.content-columns-review>.review-approval-section{grid-column:auto}.content-preflight-row{grid-template-columns:1fr}.content-preflight-row .form-control{width:100%}}

/* JobCue master brand — 044 */
.navbar-top .brand-logo img.jobcue-master-wordmark{
  width:auto;
  max-width:176px;
  max-height:46px;
  margin:0 auto;
  padding:0;
  border-radius:0;
  background:transparent;
}
.navbar-top .brand-logo-collapsed img.jobcue-master-mark{
  display:block;
  width:42px;
  height:42px;
  object-fit:contain;
  padding:0;
  border-radius:11px;
  background:transparent;
}
@media(max-width:767px){
  .navbar-top .brand-logo img.jobcue-master-wordmark{max-width:148px;max-height:38px}
}
@media(max-width:420px){
  .navbar-top .brand-logo img.jobcue-master-wordmark{max-width:128px}
}

/* ========================================================================== 
   Mobile page scrolling

   Once a responsive table has become a stack of cards it must no longer keep
   Bootstrap's horizontal scroll viewport. Mobile Safari otherwise assigns a
   drag that starts on a card to that dormant inner scroller, making the page
   feel as though it sticks beneath the user's thumb.
   ========================================================================== */
@media(max-width:767px){
  .jobs-workspace,
  .jobs-workspace .panel-body,
  .jobs-table,
  .jobs-table>tbody,
  .jobs-table>tbody>tr,
  .jobs-table>tbody>tr>td{
    touch-action:pan-y pinch-zoom!important;
    overscroll-behavior-y:auto!important;
  }

  .jobs-table-wrap.table-responsive{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:auto!important;
  }

  /* Controls may still move sideways, but a predominantly vertical gesture
     must continue scrolling the document. */
  .jobs-filter-group,
  .nav-tabs,
  .calendar-filters{
    touch-action:auto!important;
    overscroll-behavior:auto!important;
  }

  .panel,
  .well,
  .list-group,
  .list-group-item,
  .job-card,
  .dashboard-card,
  .jc-widget,
  .jc-dashboard-list{
    -webkit-user-drag:none;
    touch-action:pan-y pinch-zoom!important;
  }
}

/* ========================================================================== 
   JobCue 060 — Mobile navigation, containment and touch scrolling
   ========================================================================== */
@media(max-width:767px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto;touch-action:pan-y pinch-zoom}
  .wrapper,.wrapper>section,.main-content{min-width:0;max-width:100%;overflow-x:hidden}
  .cuedesk-navbar-header{pointer-events:none!important}
  .cuedesk-navbar-brand,.cuedesk-mobile-menu-toggle{pointer-events:auto!important}
  .navbar-top .nav-wrapper,.aside-collapsed .navbar-top .nav-wrapper{z-index:20!important;pointer-events:auto!important}
  .cuedesk-navbar-right,.cuedesk-navbar-right>li,.cuedesk-navbar-right>li>a,.cuedesk-navbar-right>li>button{pointer-events:auto!important}
  .cuedesk-navbar-right>li{position:relative;z-index:21}

  /* A phone header should not be a miniature desktop toolbar. Keep the brand,
     Action Centre and menu button; move the rest into the drawer. */
  .cuedesk-clock-container,
  .jc-product-tool-search{display:none!important}
  .cuedesk-account-menu,.jc-product-tool-help{display:flex!important}
  .navbar-top .nav-wrapper,.aside-collapsed .navbar-top .nav-wrapper{right:54px!important}
  .navbar-top .navbar-right,.cuedesk-navbar-right{gap:0}
  .jc-product-tool-actions{display:flex!important;height:var(--cd-topbar)!important}
  .cuedesk-topbar .jc-product-tool-actions>.jc-top-tool{height:var(--cd-topbar)!important;padding:0 12px!important}
  .jc-product-tool-actions .jc-action-badge{top:10px}
  .navbar-top .navbar-brand,.aside-collapsed .navbar-top .navbar-brand{left:12px!important;max-width:calc(100vw - 218px)!important}
  .navbar-top .brand-logo,.aside-collapsed .navbar-top .brand-logo{width:auto!important;height:auto!important;display:flex!important;justify-content:flex-start!important}
  .navbar-top .brand-logo img{width:auto!important;height:auto!important;max-width:100%!important;max-height:38px!important;object-fit:contain!important;object-position:left center!important;aspect-ratio:auto!important}

  /* The drawer owns navigation/account/timezone controls and scrolls by itself
     only while open. Do not lock the document when the drawer is closed. */
  .aside{width:min(88vw,330px)!important}
  .aside .sidebar{overscroll-behavior:contain;touch-action:pan-y}
  .cuedesk-mobile-account{margin-bottom:12px!important}
  .cuedesk-mobile-timezone{margin:0 0 12px}
  .cuedesk-mobile-timezone label{display:block;margin:0 0 5px;color:#a9bac7;font-size:10px;letter-spacing:.05em;text-transform:uppercase}
  .cuedesk-mobile-timezone .form-control{width:100%!important;height:42px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:9px!important;background:#fff!important;color:#17293a!important}
  .cuedesk-mobile-timezone small{display:block;margin-top:5px;color:#8fa7b8!important;font-size:9px;line-height:1.35}
  .cuedesk-mobile-account-links{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:12px}
  .aside .sidebar .cuedesk-mobile-account-links>a{min-height:42px!important;display:flex!important;align-items:center;gap:10px;padding:10px 12px!important;border-radius:9px!important;background:rgba(255,255,255,.055)!important;color:#c3d1db!important;text-decoration:none!important}

  /* General width containment. Long titles, controls and grids must shrink
     inside their cards instead of widening the page. */
  .panel,.panel-body,.panel-heading,.well,.list-group,.list-group-item,
  .row,[class*="col-"],.form-group,.page-heading,.page-heading>*,
  .jobs-toolbar,.jobs-table,.jobs-table>tbody,.jobs-table>tbody>tr,
  .rp-card,.metric-card,.jc-config-card,.content-card,
  .dashboard-card,.job-card{min-width:0;max-width:100%}
  h1,h2,h3,h4,h5,h6,p,strong,small,.item-text,.job-primary,.job-primary *{overflow-wrap:anywhere;word-break:normal}
  input,select,textarea,.form-control{max-width:100%}
  img,svg,canvas,video{max-width:100%;height:auto}

  /* Horizontal controls stay inside their parent and permit normal vertical
     page scrolling when a thumb lands on them. */
  .nav-tabs,.jobs-filter-group,.calendar-filters,.table-responsive,.fc-scroller{
    max-width:100%;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    touch-action:pan-x pan-y;
  }
  .nav-tabs,.jobs-filter-group,.calendar-filters{-webkit-overflow-scrolling:auto}
  .jobs-toolbar{overflow:hidden}
  .jobs-filter-group{padding-bottom:2px}

  /* Job cards: reserve action-button space without forcing the title outside
     the card; stack metadata on narrow screens. */
  .jobs-table>tbody>tr{position:relative;overflow:hidden!important}
  .jobs-table>tbody>tr>td{min-width:0!important;max-width:100%!important}
  .job-primary{min-width:0;padding-right:52px!important}
  .job-primary a,.job-primary strong{display:block;max-width:100%;white-space:normal!important;overflow-wrap:anywhere}
  .jobs-table>tbody>tr>td.job-open{top:14px;right:14px;max-width:42px!important}

  /* FullCalendar can be wider than a phone. Keep its own horizontal canvas
     contained so it cannot widen the JobCue page. */
  .fc,.fc-view-harness,.fc-view,.fc-scrollgrid{max-width:100%!important;min-width:0!important}
  .fc-toolbar{gap:8px}
  .fc-toolbar-chunk{max-width:100%}
  .fc-toolbar-title{font-size:17px!important;overflow-wrap:anywhere}

  /* Avoid interactive panels becoming accidental vertical scroll containers. */
  .panel,.panel-body,.panel-heading,.panel-footer,.well,.rp-card,.dashboard-card,.job-card,
  .jc-widget,.jc-widget-grid,.jc-dashboard-list,.list-group,.list-group-item{
    touch-action:pan-y pinch-zoom!important;
    overscroll-behavior-y:auto;
  }
  .panel :where(div,span,a,p,strong,small,article,section,header,footer),
  .well :where(div,span,a,p,strong,small,article,section),
  .rp-card :where(div,span,a,p,strong,small),
  .dashboard-card :where(div,span,a,p,strong,small),
  .job-card :where(div,span,a,p,strong,small),
  .jc-widget :where(span,strong,small,em),
  .jc-dashboard-list :where(div,span,a,p,strong,small,article,section,header){
    touch-action:pan-y pinch-zoom;
  }
  .panel-body,.well,.rp-card{overflow-y:visible}
}

@media(max-width:420px){
  .navbar-top .navbar-brand,.aside-collapsed .navbar-top .navbar-brand{left:10px!important;max-width:calc(100vw - 214px)!important}
  .navbar-top .brand-logo img{max-width:100%!important}
  .jobs-summary{grid-template-columns:1fr 1fr!important}
  .job-stat{gap:9px!important;padding:10px!important}
  .job-stat-copy{min-width:0}
  .job-stat .job-stat-label{font-size:10px}
}
/* Tenant chat */
.jc-chat-nav{display:flex!important;align-items:center}.jc-chat-open{position:relative;display:flex;align-items:center;gap:7px;height:40px;padding:0 11px;border:0;border-radius:11px;background:transparent;color:#dce8f1}.jc-chat-open:hover,.jc-chat-open:focus{background:rgba(255,255,255,.1);color:#fff}.jc-chat-open b{position:absolute;top:-2px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ec5b2a;color:#fff;font-size:10px;line-height:18px}.jc-chat-label{font-size:12px;font-weight:700}.jc-chat-backdrop{position:fixed;z-index:1090;inset:0;background:rgba(4,17,31,.42);backdrop-filter:blur(2px)}.jc-chat-drawer{position:fixed;z-index:1091;top:0;right:0;width:min(760px,100vw);height:100dvh;background:#f4f7f9;box-shadow:-24px 0 55px rgba(4,17,31,.25);color:#102139}.jc-chat-drawer>header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:linear-gradient(135deg,#10233d,#116f7c);color:#fff}.jc-chat-drawer header small{color:#97d9d4;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.jc-chat-drawer header h2{margin:2px 0 0;color:#fff;font-size:24px}.jc-chat-drawer header button{border:0;background:transparent;color:#fff;font-size:32px}.jc-chat-tools{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #dce5eb;background:#fff}.jc-chat-tools button,.jc-chat-start button,.jc-chat-thread form button{border:0;border-radius:9px;background:#087c88;color:#fff;padding:9px 13px;font-weight:700}.jc-chat-tools span{color:#718295;font-size:12px}.jc-chat-start{padding:14px 16px;border-bottom:1px solid #d8e3e9;background:#eaf5f5}.jc-chat-start label{display:block;margin-bottom:9px;font-size:12px}.jc-chat-start input,.jc-chat-start select{width:100%;margin-top:4px;padding:8px;border:1px solid #c9d8e1;border-radius:8px;background:#fff}.jc-chat-start>div{display:flex;justify-content:flex-end;gap:8px}.jc-chat-layout{display:grid;grid-template-columns:270px 1fr;height:calc(100dvh - 137px)}#jcChatList{overflow:auto;border-right:1px solid #dce5eb;background:#fff}#jcChatList>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px;border:0;border-bottom:1px solid #edf1f4;background:#fff;text-align:left}#jcChatList>button:hover,#jcChatList>button.is-active{background:#e7f4f4}#jcChatList strong,#jcChatList small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#jcChatList span{min-width:0}#jcChatList small{margin-top:4px;color:#78889a}#jcChatList b{min-width:21px;padding:3px;border-radius:12px;background:#ec5b2a;color:#fff;text-align:center}.jc-chat-none{padding:20px;color:#718295}.jc-chat-thread{min-width:0;display:flex;flex-direction:column}#jcChatEmpty{margin:auto;display:flex;flex-direction:column;align-items:center;color:#718295}#jcChatMessages{flex:1;overflow:auto;padding:18px}#jcChatMessages article{max-width:78%;margin:0 0 12px}#jcChatMessages article.is-mine{margin-left:auto;text-align:right}#jcChatMessages article small,#jcChatMessages article time{color:#75869a;font-size:10px}#jcChatMessages article p{margin:3px 0;padding:10px 12px;border-radius:4px 15px 15px;background:#fff;box-shadow:0 3px 12px rgba(16,33,57,.07);text-align:left;overflow-wrap:anywhere}#jcChatMessages article.is-mine p{border-radius:15px 4px 15px;background:#087c88;color:#fff}.jc-chat-thread form{display:flex;gap:9px;padding:12px;border-top:1px solid #dce5eb;background:#fff}.jc-chat-thread textarea{flex:1;resize:none;border:1px solid #cbd9e2;border-radius:10px;padding:10px}
@media(max-width:767px){.jc-chat-open{width:100%;height:50px;padding:4px 2px 3px;flex-direction:column;justify-content:center;gap:2px;border-radius:0}.jc-chat-open>.jc-icon{font-size:17px}.jc-chat-label{display:block;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.03em}.jc-chat-open b{top:3px;right:calc(50% - 18px)}.jc-chat-drawer{width:100%}.jc-chat-layout{grid-template-columns:120px 1fr}#jcChatList>button{padding:10px}#jcChatMessages{padding:10px}#jcChatMessages article{max-width:92%}.jc-chat-tools span{display:none}}
.jc-chat-compose-box{position:relative;display:flex;flex:1;min-width:0}.jc-chat-thread .jc-chat-compose-box textarea{width:100%;padding-right:46px}.jc-chat-thread form .jc-chat-emoji-toggle{position:absolute;right:7px;bottom:7px;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:#edf3f6;color:#23384a;font-size:19px;line-height:34px}.jc-chat-thread form .jc-chat-emoji-toggle:hover,.jc-chat-thread form .jc-chat-emoji-toggle:focus{background:#dcebea}.jc-chat-emoji-picker{position:absolute;z-index:4;right:0;bottom:48px;width:250px;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:8px;border:1px solid #d7e2e8;border-radius:13px;background:#fff;box-shadow:0 14px 38px rgba(10,31,49,.2)}.jc-chat-emoji-picker[hidden]{display:none}.jc-chat-thread form .jc-chat-emoji-picker button{display:grid;place-items:center;width:35px;height:35px;padding:0;border:0;border-radius:8px;background:transparent;color:inherit;font-size:20px}.jc-chat-thread form .jc-chat-emoji-picker button:hover,.jc-chat-thread form .jc-chat-emoji-picker button:focus{background:#e7f4f4}.jc-chat-thread form>button[type=submit]{align-self:stretch}@media(max-width:480px){.jc-chat-emoji-picker{right:-2px;width:224px;grid-template-columns:repeat(5,1fr)}}
.jc-chat-thread-head{display:none}

/* Keep the composer inside the viewport. Only the conversation list and
   message history scroll; the drawer chrome and composer remain available. */
.jc-chat-drawer:not([hidden]){display:flex!important;flex-direction:column}
.jc-chat-drawer>header,.jc-chat-tools,.jc-chat-start{flex:0 0 auto}
.jc-chat-layout{flex:1 1 auto;height:auto;min-height:0;overflow:hidden}
#jcChatList,.jc-chat-thread,#jcChatMessages{min-height:0}
.jc-chat-thread{overflow:hidden}
.jc-chat-thread form{flex:0 0 auto}

/* Mobile chat is a full-screen messenger, not a compressed desktop split view. */
@media(max-width:767px){
  body.jc-chat-visible{overflow:hidden!important;touch-action:none!important}
  .jc-chat-drawer{
    position:fixed!important;
    left:0!important;
    width:100vw!important;
    max-width:100vw!important;
    overflow:hidden!important;
    isolation:isolate;
    background:#f4f7f9!important;
  }
  .jc-chat-drawer>header{flex:0 0 auto;height:72px;padding:12px 18px}
  .jc-chat-drawer>header h2{font-size:24px}
  .jc-chat-drawer>header button{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:12px;font-size:34px}
  .jc-chat-tools{flex:0 0 auto;padding:10px 14px}
  .jc-chat-tools button{width:100%;min-height:46px}
  .jc-chat-start{position:absolute;z-index:5;top:128px;right:10px;left:10px;max-height:calc(100% - 138px);overflow-y:auto;border:1px solid #cddce4;border-radius:14px;box-shadow:0 18px 45px rgba(10,31,49,.22)}
  .jc-chat-layout{position:relative!important;display:block!important;min-height:0!important;overflow:hidden!important;background:#fff}
  #jcChatList{width:100%;height:100%;overflow-y:auto;border:0;background:#fff;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  #jcChatList>button{min-height:72px;padding:13px 16px!important}
  #jcChatList strong{font-size:15px;color:#172a3d}
  #jcChatList small{font-size:13px}
  .jc-chat-thread{display:none!important;position:absolute;inset:0;min-width:0;background:#f4f7f9}
  .jc-chat-drawer.is-thread-open #jcChatList{display:none}
  .jc-chat-drawer.is-thread-open .jc-chat-thread{display:flex!important}
  .jc-chat-thread-head{display:flex;flex:0 0 auto;min-height:48px;align-items:center;padding:6px 10px;border-bottom:1px solid #dce5eb;background:#fff}
  .jc-chat-thread-head button{min-height:36px;padding:6px 9px;border:0;border-radius:9px;background:transparent;color:#087c88;font-weight:800}
  #jcChatEmpty{padding:24px;text-align:center}
  #jcChatMessages{min-height:0;padding:12px 11px!important;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  #jcChatMessages article{max-width:86%!important}
  .jc-chat-thread form{flex:0 0 auto;align-items:flex-end;gap:7px;padding:9px max(9px,env(safe-area-inset-right,0px)) max(9px,env(safe-area-inset-bottom,0px)) max(9px,env(safe-area-inset-left,0px))}
  .jc-chat-thread .jc-chat-compose-box textarea{min-height:48px;max-height:112px;padding:11px 45px 11px 12px;font-size:16px!important}
  .jc-chat-thread form>button[type=submit]{min-width:66px;min-height:48px;padding:9px 12px}
}
/* Keep tenant artwork clear of mobile actions regardless of whether the uploaded
   logo is square, portrait or a wide wordmark. */
@media (max-width:767px){
  .navbar-top .brand-logo img{max-width:calc(100vw - 128px)!important;width:auto!important;height:auto!important;object-fit:contain!important}
}

/* Shared keyboard navigation and landmark affordance. */
.jc-skip-link{
  position:fixed;
  z-index:20000;
  top:10px;
  left:12px;
  padding:10px 14px;
  border-radius:9px;
  background:#fff;
  color:#071426;
  font-weight:800;
  box-shadow:0 8px 24px rgba(7,20,38,.25);
  transform:translateY(-150%);
}
.jc-skip-link:focus{color:#071426;transform:translateY(0)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--cd-brand) 58%,#fff)!important;
  outline-offset:3px!important;
}

/* Form rhythm and readable interactive surfaces across legacy and modern
   screens. These rules deliberately enhance Bootstrap markup without changing
   its grid or any business workflow. */
.main-content label,.content-wrapper label{color:#25384b;font-weight:700}
.main-content .help-block,.content-wrapper .help-block{line-height:1.5}
.main-content .form-control,.content-wrapper .form-control{border-color:#cfd9e4;box-shadow:inset 0 1px 2px rgba(7,20,38,.025)}
.main-content .form-control:hover,.content-wrapper .form-control:hover{border-color:#aebdca}
.main-content .panel,.content-wrapper .panel{transition:border-color .18s ease,box-shadow .18s ease}
.main-content .panel:hover,.content-wrapper .panel:hover{border-color:#d2dde7}
.table-responsive{scrollbar-color:#aebdca #eef3f7;scrollbar-width:thin}

@media(max-width:767px){
  .main-content .form-control,.content-wrapper .form-control,
  .main-content .btn:not(.btn-xs),.content-wrapper .btn:not(.btn-xs),
  .main-content button:not(.btn-xs),.content-wrapper button:not(.btn-xs){min-height:44px}
  .main-content .btn-xs,.content-wrapper .btn-xs{min-height:34px;padding:7px 10px}
  .main-content .form-inline .form-group,.content-wrapper .form-inline .form-group{display:block;width:100%;margin-bottom:10px}
  .main-content .form-inline .form-control,.content-wrapper .form-inline .form-control{width:100%}
  .page-heading{gap:14px}
  .page-heading>div:first-child{min-width:0}
}

/* Client records become self-contained cards on phones instead of an
   unlabelled sideways table with its action hidden beyond the viewport. */
@media(max-width:767px){
  .client-list-wrap.table-responsive{overflow:visible!important;border:0!important}
  .client-list-table,.client-list-table>tbody{display:block;width:100%}
  .client-list-table>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .client-list-table>tbody>tr{display:block;margin:0 12px 12px;padding:14px;border:1px solid var(--cd-line);border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(7,20,38,.05)}
  .client-list-table>tbody>tr>td{display:grid!important;grid-template-columns:78px minmax(0,1fr);gap:10px;width:100%!important;padding:6px 0!important;border:0!important;text-align:left!important;overflow-wrap:anywhere}
  .client-list-table>tbody>tr>td::before{content:attr(data-label);color:var(--cd-muted);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .client-list-table>tbody>tr>td:empty{display:none!important}
  .client-list-table>tbody>tr>td[data-label="Action"]{display:block!important;padding-top:10px!important}
  .client-list-table>tbody>tr>td[data-label="Action"]::before{display:none}
  .client-list-table>tbody>tr>td[data-label="Action"] .btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center}
}