/*
 * G&M Facility Services — Employee Portal
 * Modernize Integration Layer v0.3
 *
 * IMPORTANT:
 * - Modernize is the infrastructure/base.
 * - This file is loaded AFTER Modernize.
 * - G&M corporate colors and Employee UX are applied here.
 * - No global Administration stylesheet is modified.
 */

:root,
[data-bs-theme="light"][data-color-theme="Blue_Theme"] {
  --gm-blue: #002D5A;
  --gm-dark: #011638;
  --gm-green: #3A9A35;
  --gm-silver: #C0C0C0;
  --gm-light: #F0F2F5;
  --gm-white: #FFFFFF;

  --bs-primary: #002D5A;
  --bs-primary-rgb: 0, 45, 90;
  --bs-light-primary: rgba(0,45,90,.09);
  --bs-primary-bg-subtle: rgba(0,45,90,.09);
  --bs-link-color: #40536A;
  --bs-link-hover-color: #002D5A;

  --bs-success: #3A9A35;
  --bs-success-rgb: 58, 154, 53;
  --bs-success-bg-subtle: rgba(58,154,53,.10);

  --bs-body-bg: #F7F9FC;
  --bs-body-color: #17243A;
  --bs-border-color: #E5EBF1;

  --gm-shadow-soft: 0 10px 30px rgba(1,22,56,.055);
  --gm-shadow-premium: 0 20px 55px rgba(1,22,56,.10);
}

.btn-primary {
  --bs-btn-bg: #002D5A;
  --bs-btn-border-color: #002D5A;
  --bs-btn-hover-bg: #011F40;
  --bs-btn-hover-border-color: #011F40;
  --bs-btn-active-bg: #011638;
  --bs-btn-active-border-color: #011638;
}

.btn-success {
  --bs-btn-bg: #3A9A35;
  --bs-btn-border-color: #3A9A35;
  --bs-btn-hover-bg: #31872D;
  --bs-btn-hover-border-color: #31872D;
  --bs-btn-active-bg: #2B7B27;
  --bs-btn-active-border-color: #2B7B27;
}

body.gm-employee-body,
body.gm-login-body {
  background: #F7F9FC;
}

.gm-preloader {
  background: var(--gm-dark);
}

.gm-brand {
  text-decoration: none;
  min-width: 0;
}

.gm-brand:hover * {
  color: inherit !important;
}

.gm-brand-symbol {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
  background: linear-gradient(145deg, var(--gm-blue), var(--gm-dark));
  color: #fff;
  font-weight: 800;
  letter-spacing: -.04em;
  box-shadow: 0 10px 24px rgba(0,45,90,.18);
}

.gm-brand-symbol b {
  color: var(--gm-green);
  font-weight: 900;
}

.gm-brand-symbol-loader {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  animation: gmPulse 1.1s ease-in-out infinite alternate;
}

.gm-brand-copy {
  display: grid;
  line-height: 1.1;
  min-width: 0;
}

.gm-brand-copy strong {
  color: var(--gm-dark);
  font-size: .75rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

.gm-brand-copy small {
  color: #64748B;
  font-size: .66rem;
  margin-top: 4px;
}

.gm-sidebar {
  border-right: 1px solid rgba(0,45,90,.07);
  box-shadow: 12px 0 40px rgba(1,22,56,.025);
}

.gm-sidebar .brand-logo {
  padding-left: 20px;
  padding-right: 20px;
}

.gm-sidebar .sidebar-nav ul .sidebar-item .sidebar-link {
  border-radius: 11px;
  min-height: 44px;
  font-weight: 600;
  color: #53647A;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.gm-sidebar .sidebar-nav ul .sidebar-item .sidebar-link iconify-icon {
  font-size: 22px;
}

.gm-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: rgba(0,45,90,.055);
  color: var(--gm-blue);
  transform: translateX(2px);
}

.gm-sidebar .sidebar-nav ul .sidebar-item .sidebar-link.active,
.gm-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link {
  background: linear-gradient(135deg, var(--gm-blue), var(--gm-dark));
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,45,90,.14);
}

.gm-sidebar .nav-small-cap {
  color: #8A99AB;
  letter-spacing: .08em;
  font-size: .65rem;
  margin-top: 22px;
}

.gm-fixed-profile {
  background: linear-gradient(145deg, #F4F7FA, #EDF3F7);
  border: 1px solid rgba(0,45,90,.07);
}


.gm-sidebar-employee-meta {
  min-width: 0;
}

.gm-sidebar-employee-meta h6 {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gm-dark);
}

.gm-sidebar-local-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: #66788D;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.gm-sidebar-local-time iconify-icon {
  color: var(--gm-blue);
  flex: 0 0 auto;
}

.gm-topbar {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,45,90,.065);
}

.gm-topbar .navbar {
  min-height: 70px;
}

.gm-topbar .nav-link {
  color: #53647A !important;
}

.gm-topbar .nav-link:hover {
  color: var(--gm-blue) !important;
}

.gm-header-context {
  display: grid;
  text-align: right;
  line-height: 1.15;
  padding-right: 12px;
  margin-right: 4px;
  border-right: 1px solid #E7ECF1;
}

.gm-header-context span {
  font-size: .77rem;
  font-weight: 700;
  color: var(--gm-dark);
}

.gm-header-context small {
  font-size: .65rem;
  color: #7A899C;
  margin-top: 3px;
}

.gm-header-icon {
  width: 42px;
  height: 42px !important;
  min-height: 42px;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
}

.gm-header-icon iconify-icon {
  font-size: 22px;
}

.gm-notification-dot {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 50%;
  background: var(--gm-green);
  border: 2px solid white;
}

.gm-notification-menu,
.gm-profile-dropdown {
  width: min(360px, calc(100vw - 24px));
  border: 1px solid rgba(0,45,90,.08);
  box-shadow: 0 20px 50px rgba(1,22,56,.12);
  border-radius: 16px;
  overflow: hidden;
}

.gm-notification-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.gm-notification-item div {
  display: grid;
  gap: 3px;
}

.gm-notification-item small {
  color: #728197;
  font-size: .74rem;
}

.gm-profile-trigger {
  padding: 5px 6px 5px 8px;
  border-radius: 14px;
  transition: background .16s ease;
}

.gm-profile-trigger:hover {
  background: rgba(0,45,90,.045) !important;
}

.gm-profile-trigger > span:nth-child(2) {
  line-height: 1.1;
}

.gm-profile-trigger strong {
  font-size: .78rem;
  color: var(--gm-dark);
}

.gm-profile-trigger small {
  font-size: .66rem;
  color: #7A899C;
  margin-top: 3px;
}

.gm-profile-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(58,154,53,.34), transparent 28%),
    linear-gradient(135deg, var(--gm-blue), var(--gm-dark));
}

.gm-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gm-blue), var(--gm-dark));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0,45,90,.15);
}

.gm-avatar-sm {
  width: 40px;
  height: 40px;
  font-size: .7rem;
}

.gm-avatar-header {
  width: 38px;
  height: 38px;
  font-size: .68rem;
  border: 2px solid rgba(58,154,53,.25);
}

.gm-avatar-lg {
  width: 58px;
  height: 58px;
  font-size: .9rem;
  border: 2px solid rgba(255,255,255,.18);
}

.gm-body-wrapper {
  padding-top: 94px;
  padding-bottom: 86px;
}

.gm-body-wrapper > .container-fluid {
  max-width: 1440px;
  margin: 0 auto;
}

.gm-hero {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border-radius: 22px;
  padding: 28px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  background:
    radial-gradient(circle at 88% 14%, rgba(58,154,53,.36), transparent 22%),
    radial-gradient(circle at 66% 128%, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(135deg, var(--gm-blue) 0%, var(--gm-dark) 78%);
  box-shadow: 0 18px 45px rgba(1,22,56,.15);
  border: 1px solid rgba(255,255,255,.08);
}

.gm-hero::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: -110px;
  bottom: -155px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}

.gm-hero-content,
.gm-hero-meta {
  position: relative;
  z-index: 2;
}

.gm-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.gm-hero p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.74);
}

.gm-kicker {
  display: block;
  margin-bottom: 8px;
  color: #B7E0B5;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.gm-kicker-blue {
  color: var(--gm-blue);
}

.gm-hero-meta {
  display: grid;
  justify-items: end;
  gap: 9px;
}

.gm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  font-size: .72rem;
  font-weight: 700;
}

.gm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7BE473;
  box-shadow: 0 0 0 4px rgba(123,228,115,.12);
}

.gm-employee-id {
  font-size: .68rem;
  color: rgba(255,255,255,.55);
}

.gm-hero-compact {
  min-height: 156px;
  align-items: center;
}

.gm-hero-page-icon {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 31px;
}

.gm-card,
.gm-stat-card,
.gm-announcement-card {
  border: 1px solid rgba(0,45,90,.075);
  box-shadow: var(--gm-shadow-soft);
  border-radius: 18px;
  overflow: hidden;
}

.gm-card {
  position: relative;
}

.gm-card-accent-blue {
  border-top: 3px solid var(--gm-blue);
}

.gm-card-accent-green {
  border-top: 3px solid var(--gm-green);
}

.gm-soft-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--gm-blue);
  background: rgba(0,45,90,.07);
  border: 1px solid rgba(0,45,90,.055);
  font-size: 23px;
}

.gm-soft-icon-green {
  color: var(--gm-green);
  background: rgba(58,154,53,.09);
  border-color: rgba(58,154,53,.075);
}

.gm-soft-icon-warn {
  color: #A56A00;
  background: #FFF7E5;
  border-color: #F5E2B5;
}

.gm-soft-icon-sm {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 20px;
}

.gm-soft-icon-xl {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  font-size: 32px;
}

.gm-info-block {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.gm-info-block > iconify-icon {
  color: var(--gm-blue);
  font-size: 21px;
  flex: 0 0 auto;
}

.gm-info-block > div {
  min-width: 0;
  display: grid;
}

.gm-info-block strong {
  font-size: .84rem;
}

.gm-info-block small {
  color: #7A899C;
  font-size: .68rem;
}

.gm-address-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 13px;
  background: linear-gradient(145deg, #F8FAFC, #F2F6FA);
  border: 1px solid rgba(0,45,90,.055);
}

.gm-address-panel > div {
  display: grid;
}

.gm-address-panel strong {
  font-size: .83rem;
}

.gm-address-panel small {
  color: #77879B;
  font-size: .68rem;
  margin-top: 2px;
}

.gm-square-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  padding: 0;
  color: var(--gm-blue);
}

.gm-btn-primary,
.gm-btn-success {
  border-radius: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 9px 20px rgba(0,45,90,.13);
}

.gm-btn-success {
  box-shadow: 0 9px 20px rgba(58,154,53,.14);
}

.gm-clock-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 14px;
  background: linear-gradient(145deg, #FAFBFC, #F4F7FA);
  border: 1px solid rgba(0,45,90,.05);
}

.gm-clock-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #D58C13;
  box-shadow: 0 0 0 5px rgba(213,140,19,.10);
}

.gm-clock-state > div {
  display: grid;
  min-width: 0;
}

.gm-clock-state strong {
  font-size: .84rem;
}

.gm-clock-state small {
  color: #77879B;
  font-size: .7rem;
  margin-top: 2px;
}

.gm-privacy-note {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  color: #77879B;
  font-size: .68rem;
  line-height: 1.45;
}

.gm-privacy-note iconify-icon {
  color: var(--gm-green);
  font-size: 16px;
  flex: 0 0 auto;
}

.gm-stat-card {
  min-height: 132px;
}

.gm-stat-card h3 {
  margin: 0 0 3px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--gm-dark);
}

.gm-stat-card span:not(.gm-soft-icon) {
  color: #7A899C;
  font-size: .69rem;
}

.gm-schedule-list {
  display: grid;
  gap: 2px;
}

.gm-schedule-row {
  min-height: 66px;
  display: grid;
  grid-template-columns: 44px 11px 1fr auto;
  align-items: center;
  gap: 10px;
}

.gm-time {
  color: #758499;
  font-size: .72rem;
  font-weight: 700;
}

.gm-schedule-marker {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C3CCD6;
}

.gm-schedule-marker.active {
  background: var(--gm-green);
  box-shadow: 0 0 0 4px rgba(58,154,53,.10);
}

.gm-schedule-copy {
  display: grid;
  min-width: 0;
}

.gm-schedule-copy strong {
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-schedule-copy small {
  color: #7A899C;
  font-size: .68rem;
}

.gm-quick-action {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 14px;
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF, #FBFCFD);
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.gm-quick-action:hover {
  color: inherit;
  transform: translateY(-2px);
  border-color: rgba(0,45,90,.13);
  box-shadow: 0 10px 24px rgba(1,22,56,.06);
}

.gm-quick-action strong {
  margin-top: 10px;
  color: var(--gm-dark);
  font-size: .8rem;
}

.gm-quick-action small {
  color: #7A899C;
  font-size: .65rem;
  line-height: 1.35;
  margin-top: 2px;
}

.gm-announcement-card {
  background: linear-gradient(145deg, #FFFFFF, #FBFCFD);
}

.gm-preview-note {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 11px 13px;
  border-radius: 12px;
  background: #FFF9E9;
  border: 1px solid #F0DEA5;
  color: #7B5B00;
  font-size: .68rem;
}

.gm-preview-note iconify-icon {
  font-size: 17px;
}

.gm-coming-soon {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.gm-coming-soon h2 {
  margin: 7px 0 8px;
  color: var(--gm-dark);
}

.gm-coming-soon p {
  max-width: 560px;
}

/* Mobile bottom navigation retained intentionally for cleaner workflow. */
.gm-mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  padding: 7px 7px env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,45,90,.07);
  backdrop-filter: blur(18px);
  box-shadow: 0 -8px 24px rgba(1,22,56,.05);
}

.gm-mobile-bottom-nav a {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 12px;
  color: #758499;
  font-size: .62rem;
  font-weight: 650;
}

.gm-mobile-bottom-nav a iconify-icon {
  font-size: 21px;
}

.gm-mobile-bottom-nav a.active {
  color: var(--gm-blue);
  background: rgba(0,45,90,.05);
}

.gm-mobile-bottom-nav a.active::before {
  content: "";
  position: absolute;
  top: 3px;
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: var(--gm-green);
}

/* Login using Modernize authentication layout */
.gm-login-shell {
  background:
    radial-gradient(circle at 12% 10%, rgba(58,154,53,.16), transparent 22%),
    linear-gradient(145deg, var(--gm-dark), var(--gm-blue));
}

.gm-login-brand-panel {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: none;
  flex-direction: column;
  color: white;
  background:
    radial-gradient(circle at 78% 12%, rgba(58,154,53,.30), transparent 23%),
    radial-gradient(circle at 45% 110%, rgba(255,255,255,.07), transparent 36%),
    linear-gradient(145deg, var(--gm-blue), var(--gm-dark));
}

.gm-login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .6;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 95%);
}

.gm-login-brand-panel .gm-brand,
.gm-login-brand-content,
.gm-login-brand-footer {
  position: relative;
  z-index: 2;
}

.gm-login-brand-panel .gm-brand-symbol {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
}

.gm-login-brand-panel .gm-brand-copy strong {
  color: white;
}

.gm-login-brand-panel .gm-brand-copy small {
  color: rgba(255,255,255,.60);
}

.gm-login-brand-content {
  max-width: 650px;
  margin: auto 0;
}

.gm-login-brand-content h1 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 800;
}

.gm-login-brand-content h1 span {
  color: #8BD285;
}

.gm-login-brand-content p {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 1rem;
  line-height: 1.7;
}

.gm-login-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.gm-login-features span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.08);
  font-size: .72rem;
}

.gm-login-brand-footer {
  display: grid;
  gap: 2px;
  color: rgba(255,255,255,.50);
}

.gm-login-brand-footer span {
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .65rem;
}

.gm-login-brand-footer small {
  font-size: .66rem;
}

.gm-login-heading h2 {
  color: var(--gm-dark);
  font-size: 2rem;
  letter-spacing: -.035em;
}

.gm-modernize-input {
  position: relative;
  display: flex;
  align-items: center;
}

.gm-modernize-input > iconify-icon,
.gm-modernize-input > .gm-input-icon {
  position: absolute;
  left: 14px;
  z-index: 2;
  color: #78879A;
  font-size: 20px;
}

.gm-modernize-input .form-control {
  min-height: 52px;
  padding-left: 44px;
  padding-right: 68px;
  border-radius: 12px;
  background: #FCFDFE;
  border-color: rgba(0,45,90,.10);
}

.gm-modernize-input .form-control:focus {
  border-color: rgba(0,45,90,.45);
  box-shadow: 0 0 0 .22rem rgba(0,45,90,.08);
}

.gm-password-toggle {
  position: absolute;
  right: 11px;
  border: 0;
  background: transparent;
  color: var(--gm-blue);
  font-size: .69rem;
  font-weight: 700;
}

.gm-security-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #F5F8FB;
  border: 1px solid rgba(0,45,90,.06);
  color: #68788D;
}

.gm-security-note > iconify-icon,
.gm-security-note > .ti {
  color: var(--gm-green);
  font-size: 19px;
  flex: 0 0 auto;
}

.gm-security-note > div {
  display: grid;
}

.gm-security-note strong {
  color: var(--gm-dark);
  font-size: .73rem;
}

.gm-security-note span {
  font-size: .67rem;
  margin-top: 2px;
}

/* Modernize moves to mini sidebar before xl; hide brand copy gracefully. */
body[data-sidebartype="mini-sidebar"] .gm-sidebar .gm-brand-copy {
  display: none;
}

body[data-sidebartype="mini-sidebar"] .gm-sidebar:hover .gm-brand-copy {
  display: grid;
}

@media (max-width: 575.98px) {
  .gm-topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .gm-topbar .gm-brand-copy {
    display: none;
  }

  .gm-hero {
    min-height: 176px;
    padding: 22px 20px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
  }

  .gm-hero-meta {
    justify-items: start;
  }

  .gm-employee-id {
    display: none;
  }

  .gm-stat-card {
    min-height: 118px;
  }

  .gm-schedule-row {
    grid-template-columns: 40px 10px 1fr;
  }

  .gm-schedule-row .badge {
    grid-column: 3;
    justify-self: start;
    margin-top: -8px;
  }
}

@media (min-width: 768px) {
  .gm-body-wrapper {
    padding-bottom: 40px;
  }
}

@media (min-width: 1200px) {
  .gm-login-brand-panel {
    display: flex;
  }

  .gm-body-wrapper {
    padding-top: 100px;
  }

  .gm-mobile-bottom-nav {
    display: none !important;
  }
}

@media (hover: hover) {
  .gm-card,
  .gm-stat-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }

  .gm-card:hover,
  .gm-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--gm-shadow-premium);
    border-color: rgba(0,45,90,.11);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@keyframes gmPulse {
  from { transform: scale(.96); opacity: .72; }
  to { transform: scale(1.02); opacity: 1; }
}


/* ============================================================
   G&M VISUAL HOTFIX v0.3.1
   Contrast + header hierarchy + corporate button enforcement
   ============================================================ */

/* HERO: Modernize heading variables must never darken text over the corporate banner. */
.gm-hero .gm-hero-content,
.gm-hero .gm-hero-content h1,
.gm-hero .gm-hero-content h2,
.gm-hero .gm-hero-content h3 {
  color: #FFFFFF !important;
}

.gm-hero .gm-hero-content p {
  color: rgba(255,255,255,.88) !important;
}

.gm-hero .gm-hero-content .gm-kicker {
  color: #A6E2A1 !important;
}

/* HEADER: keep Portal del Empleado and Área privada G&M on separate lines. */
.gm-header-context {
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}

.gm-header-context span,
.gm-header-context small {
  display: block !important;
  width: 100%;
}

.gm-header-context span {
  color: #011638 !important;
  font-weight: 800 !important;
}

.gm-header-context small {
  color: #6F8096 !important;
}

/* LOGIN BRAND PANEL: force high contrast on the dark corporate surface. */
.gm-login-brand-content,
.gm-login-brand-content h1,
.gm-login-brand-content h2,
.gm-login-brand-content h3 {
  color: #FFFFFF !important;
}

.gm-login-brand-content h1 span {
  color: #8BD285 !important;
}

.gm-login-brand-content p {
  color: rgba(255,255,255,.86) !important;
}

.gm-login-brand-footer {
  color: rgba(255,255,255,.72) !important;
}

.gm-login-brand-footer small {
  color: rgba(255,255,255,.62) !important;
}

/* LOGIN RIGHT PANEL: increase text contrast without making it visually heavy. */
.gm-login-heading h2 {
  color: #011638 !important;
}

.gm-login-heading p,
.gm-login-body .text-body-secondary {
  color: #697A90 !important;
}

.gm-login-body .form-label {
  color: #17243A !important;
}

.gm-login-body a.text-primary,
.gm-login-body .text-primary,
.gm-login-body .gm-password-toggle {
  color: #002D5A !important;
}

/* CORPORATE BUTTON STANDARD.
   Prevent Modernize Blue_Theme (#5d87ff) from leaking into Employee Portal controls. */
.gm-login-body .btn-primary,
.gm-employee-body .btn-primary,
.gm-btn-primary {
  --bs-btn-bg: #002D5A !important;
  --bs-btn-border-color: #002D5A !important;
  --bs-btn-hover-bg: #011F40 !important;
  --bs-btn-hover-border-color: #011F40 !important;
  --bs-btn-active-bg: #011638 !important;
  --bs-btn-active-border-color: #011638 !important;
  --bs-btn-disabled-bg: #002D5A !important;
  --bs-btn-disabled-border-color: #002D5A !important;
  background-color: #002D5A !important;
  border-color: #002D5A !important;
  color: #FFFFFF !important;
}

.gm-login-body .btn-primary:hover,
.gm-employee-body .btn-primary:hover,
.gm-btn-primary:hover {
  background-color: #011F40 !important;
  border-color: #011F40 !important;
  color: #FFFFFF !important;
}

.gm-login-body .btn-primary:active,
.gm-employee-body .btn-primary:active,
.gm-btn-primary:active {
  background-color: #011638 !important;
  border-color: #011638 !important;
}

/* Disabled still looks G&M, but remains visibly unavailable. */
.gm-login-body .btn-primary:disabled,
.gm-login-body .btn-primary.disabled,
.gm-btn-primary:disabled,
.gm-btn-primary.disabled {
  background: #002D5A !important;
  border-color: #002D5A !important;
  color: #FFFFFF !important;
  opacity: .62 !important;
  box-shadow: none !important;
}

/* Corporate outline buttons. */
.gm-login-body .btn-outline-primary,
.gm-employee-body .btn-outline-primary {
  --bs-btn-color: #002D5A !important;
  --bs-btn-border-color: #002D5A !important;
  --bs-btn-hover-color: #FFFFFF !important;
  --bs-btn-hover-bg: #002D5A !important;
  --bs-btn-hover-border-color: #002D5A !important;
  --bs-btn-active-color: #FFFFFF !important;
  --bs-btn-active-bg: #011638 !important;
  --bs-btn-active-border-color: #011638 !important;
  color: #002D5A !important;
  border-color: #002D5A !important;
}

.gm-login-body .btn-outline-primary:hover,
.gm-employee-body .btn-outline-primary:hover {
  color: #FFFFFF !important;
  background-color: #002D5A !important;
  border-color: #002D5A !important;
}

/* Keep semantic green exactly for positive action/state. */
.gm-login-body .btn-success,
.gm-employee-body .btn-success,
.gm-btn-success {
  --bs-btn-bg: #3A9A35 !important;
  --bs-btn-border-color: #3A9A35 !important;
  --bs-btn-hover-bg: #31872D !important;
  --bs-btn-hover-border-color: #31872D !important;
  background-color: #3A9A35 !important;
  border-color: #3A9A35 !important;
  color: #FFFFFF !important;
}

/* Make topbar hierarchy breathe at desktop sizes. */
@media (min-width: 768px) {
  .gm-header-context {
    min-width: 178px;
  }
}


/* ============================================================
   AUTH & IDENTITY v0.4
   ============================================================ */

.gm-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gm-identity-grid > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 13px;
  background: linear-gradient(145deg, #F8FAFC, #F2F6FA);
  border: 1px solid rgba(0,45,90,.055);
}

.gm-identity-grid small {
  color: #77879B;
  font-size: .67rem;
}

.gm-identity-grid strong {
  color: #011638;
  font-size: .83rem;
  overflow-wrap: anywhere;
}

.gm-password-setup-bg {
  background:
    radial-gradient(circle at 12% 10%, rgba(58,154,53,.10), transparent 24%),
    linear-gradient(145deg, #F8FAFD, #EEF3F7);
}

.gm-password-setup-card {
  max-width: 560px;
}

.gm-password-setup-card h1 {
  color: #011638;
}

@media (max-width: 575.98px) {
  .gm-identity-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Dashboard Welcome Hero · Weather Widget
   Additive only: does not replace existing hero content.
   ========================================================= */

.gm-weather-widget {
  width: min(235px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 17px;
  background: rgba(255,255,255,.105);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.gm-weather-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.11);
  color: #fff;
}

.gm-weather-icon iconify-icon {
  font-size: 1.75rem;
}

.gm-weather-main {
  min-width: 0;
  flex: 1;
}

.gm-weather-location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.62);
  font-size: .63rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.gm-weather-location iconify-icon {
  font-size: .8rem;
}

.gm-weather-reading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.gm-weather-reading strong {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.gm-weather-reading span {
  color: rgba(255,255,255,.88);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-weather-main small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.52);
  font-size: .59rem;
  line-height: 1.25;
}

.gm-weather-widget.is-loading .gm-weather-icon {
  animation: gmWeatherPulse 1.4s ease-in-out infinite;
}

.gm-weather-widget.is-error {
  opacity: .78;
}

@keyframes gmWeatherPulse {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}

@media (max-width: 575.98px) {
  .gm-weather-widget {
    width: 100%;
    max-width: 280px;
  }

  .gm-hero-meta {
    width: 100%;
  }
}


/* =========================================================
   Sidebar Employee Block · Strict G&M Corporate Palette
   Prevent Modernize primary/violet from leaking into icons.
   ========================================================= */

.gm-fixed-profile {
  background: linear-gradient(145deg, #F4F7FA, #EDF3F7);
  border-color: rgba(0,45,90,.10);
}

.gm-fixed-profile .gm-avatar {
  background: linear-gradient(145deg, #002D5A, #011638);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(0,45,90,.15);
}

.gm-fixed-profile .gm-sidebar-employee-meta h6 {
  color: #011638 !important;
}

.gm-fixed-profile .gm-sidebar-local-time {
  color: #66788D !important;
}

.gm-fixed-profile .gm-sidebar-local-time iconify-icon {
  color: #002D5A !important;
}

.gm-sidebar-logout {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  color: #002D5A !important;
  transition:
    color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.gm-sidebar-logout iconify-icon {
  color: #002D5A !important;
}

.gm-sidebar-logout:hover {
  color: #011638 !important;
  background: rgba(0,45,90,.08) !important;
  transform: translateY(-1px);
}

.gm-sidebar-logout:hover iconify-icon {
  color: #011638 !important;
}

.gm-sidebar-logout:focus-visible {
  outline: 2px solid rgba(58,154,53,.55);
  outline-offset: 3px;
}

.gm-sidebar-logout:active {
  transform: translateY(0);
  background: rgba(0,45,90,.12) !important;
}


/* =========================================================
   Employee Operations v0.6 · Schedule / Next Service
   Strict G&M corporate palette.
   ========================================================= */

.gm-page-hero {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 30px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 18%, rgba(58,154,53,.19), transparent 26%),
    linear-gradient(135deg, #002D5A, #011638);
  box-shadow: 0 18px 42px rgba(1,22,56,.14);
}

.gm-page-hero h1 {
  color: #FFFFFF !important;
  margin: 4px 0 5px;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 800;
}

.gm-page-hero p {
  color: rgba(255,255,255,.78);
  margin: 0;
}

.gm-page-hero .gm-kicker {
  color: #9DDE98 !important;
}

.gm-page-hero-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.09);
  color: #FFFFFF;
}

.gm-page-hero-icon iconify-icon {
  font-size: 2rem;
}

.gm-schedule-metric {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(1,22,56,.055);
}

.gm-schedule-metric .card-body {
  display: grid;
  gap: 8px;
}

.gm-schedule-metric-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-schedule-metric-icon-green {
  background: rgba(58,154,53,.10);
  color: #3A9A35;
}

.gm-schedule-metric small {
  color: #718197;
  font-size: .72rem;
  font-weight: 700;
}

.gm-schedule-metric strong {
  color: #011638;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.gm-next-service-card {
  overflow: hidden;
  border: 1px solid rgba(0,45,90,.08);
  border-left: 4px solid #002D5A;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(1,22,56,.065);
}

.gm-next-service-layout {
  display: grid;
  grid-template-columns: minmax(170px,.72fr) minmax(260px,1.45fr) auto;
  align-items: center;
  gap: 24px;
}

.gm-next-service-date {
  display: flex;
  align-items: center;
  gap: 13px;
}

.gm-next-service-calendar-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(0,45,90,.10), rgba(0,45,90,.055));
  color: #002D5A;
}

.gm-next-service-calendar-icon iconify-icon {
  font-size: 1.5rem;
}

.gm-next-service-date small {
  display: block;
  color: #6D7E93;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.gm-next-service-date strong {
  display: block;
  margin-top: 2px;
  color: #011638;
  font-size: .94rem;
}

.gm-next-service-date span:not(.gm-next-service-calendar-icon) {
  display: block;
  margin-top: 2px;
  color: #64758B;
  font-size: .75rem;
  font-weight: 650;
}

.gm-next-service-main {
  min-width: 0;
}

.gm-next-service-main h2 {
  margin: 0 0 6px;
  color: #011638;
  font-size: 1.06rem;
  font-weight: 800;
}

.gm-next-service-main p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: #697A8F;
  font-size: .78rem;
}

.gm-next-service-main p iconify-icon {
  margin-top: 1px;
  color: #002D5A;
  flex: 0 0 auto;
}

.gm-next-service-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.gm-next-service-actions .btn {
  white-space: nowrap;
}

.gm-next-service-empty {
  border-left-color: #C0C0C0;
}

.gm-schedule-timeline {
  display: grid;
  gap: 26px;
}

.gm-schedule-day {
  display: grid;
  gap: 13px;
}

.gm-schedule-day-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 3px;
}

.gm-schedule-day-heading > div {
  display: grid;
  gap: 1px;
}

.gm-schedule-day-heading span:first-child {
  color: #011638;
  font-size: .98rem;
  font-weight: 800;
}

.gm-schedule-day-heading small {
  color: #7A899B;
  font-size: .68rem;
}

.gm-schedule-day-count {
  color: #002D5A !important;
  font-size: .67rem !important;
  font-weight: 800 !important;
}

.gm-schedule-card {
  border: 1px solid rgba(0,45,90,.075);
  border-radius: 19px;
  box-shadow: 0 10px 28px rgba(1,22,56,.055);
}

.gm-schedule-time {
  display: grid;
  gap: 1px;
}

.gm-schedule-time > span {
  color: #011638;
  font-size: .96rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gm-schedule-time small {
  color: #7B899A;
  font-size: .65rem;
}

.gm-schedule-service h2 {
  margin: 4px 0 3px;
  color: #011638;
  font-size: 1.02rem;
  font-weight: 800;
}

.gm-schedule-service p {
  color: #728196;
  font-size: .72rem;
}

.gm-service-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
}

.gm-service-status-primary {
  color: #002D5A;
  background: rgba(0,45,90,.085);
}

.gm-service-status-success {
  color: #2C8128;
  background: rgba(58,154,53,.11);
}

.gm-service-status-warning {
  color: #7B5B00;
  background: rgba(218,162,0,.12);
}

.gm-service-status-danger {
  color: #A52B2B;
  background: rgba(183,52,52,.10);
}

.gm-schedule-location {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-schedule-location > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-schedule-location div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gm-schedule-location small {
  color: #8090A3;
  font-size: .62rem;
  font-weight: 700;
}

.gm-schedule-location strong {
  color: #26374B;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
}

.gm-schedule-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gm-service-number {
  color: #8A98A8;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.gm-schedule-empty {
  border: 1px dashed rgba(0,45,90,.16);
  border-radius: 20px;
  background: linear-gradient(145deg,#FFFFFF,#F8FAFC);
}

.gm-schedule-empty-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: #002D5A;
  background: rgba(0,45,90,.075);
}

.gm-schedule-empty-icon iconify-icon {
  font-size: 1.75rem;
}

@media (max-width: 991.98px) {
  .gm-next-service-layout {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .gm-next-service-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .gm-page-hero {
    min-height: 132px;
    padding: 22px 20px;
  }

  .gm-page-hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }

  .gm-next-service-card .card-body,
  .gm-schedule-card .card-body {
    padding: 18px !important;
  }

  .gm-next-service-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gm-next-service-actions .btn {
    width: 100%;
  }
}


.gm-next-service-card .text-primary,
.gm-schedule-card .text-primary,
.gm-page-hero .text-primary {
  color: #002D5A !important;
}


/* =========================================================
   Employee Portal Notifications v0.6.1
   Strict G&M corporate palette.
   ========================================================= */

.gm-header-icon {
  color: #002D5A !important;
}

.gm-header-icon iconify-icon {
  color: #002D5A !important;
}

.gm-header-icon-unread {
  background: rgba(0,45,90,.065) !important;
  color: #002D5A !important;
}

.gm-header-icon-unread iconify-icon {
  color: #002D5A !important;
  animation: gmBellAttention 2.4s ease-in-out 1;
  transform-origin: 50% 10%;
}

.gm-notification-count {
  position: absolute;
  top: 2px;
  right: -1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #3A9A35;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-size: .56rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(58,154,53,.24);
  font-variant-numeric: tabular-nums;
}

.gm-notification-header {
  min-height: 67px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(180deg,#FFFFFF,#FBFCFE);
}

.gm-notification-header h6 {
  color: #011638;
}

.gm-notification-read-all {
  border: 0;
  padding: 0;
  background: transparent;
  color: #002D5A;
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
}

.gm-notification-read-all:hover {
  color: #011638;
  text-decoration: underline;
}

.gm-notification-list {
  max-height: 365px;
  overflow-y: auto;
}

.gm-notification-entry {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 8px;
  gap: 11px;
  align-items: start;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid rgba(0,45,90,.055);
  background: #FFFFFF;
  text-align: left;
  transition:
    background .16s ease,
    transform .16s ease;
}

.gm-notification-entry:hover {
  background: #F7FAFC;
}

.gm-notification-entry.is-unread {
  background:
    linear-gradient(
      90deg,
      rgba(0,45,90,.055),
      rgba(255,255,255,0) 52%
    ),
    #FFFFFF;
}

.gm-notification-entry-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-notification-entry-icon iconify-icon {
  color: #002D5A !important;
  font-size: 1.1rem;
}

.gm-notification-entry-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gm-notification-entry-copy strong {
  color: #011638;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.25;
}

.gm-notification-entry-copy > span {
  color: #65758A;
  font-size: .68rem;
  line-height: 1.35;
}

.gm-notification-entry-copy small {
  color: #8A98A8;
  font-size: .59rem;
  font-weight: 650;
}

.gm-notification-unread-dot {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: #3A9A35;
  box-shadow: 0 0 0 4px rgba(58,154,53,.09);
}

@keyframes gmBellAttention {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(12deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  75% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-header-icon-unread iconify-icon {
    animation: none;
  }
}


/* =========================================================
   Employee Portal v0.7.0 · Mis Servicios / Job Execution
   Strict G&M corporate palette.
   ========================================================= */

.gm-alert-success,
.gm-alert-danger {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  padding: 12px 15px;
  font-size: .76rem;
  font-weight: 700;
}

.gm-alert-success {
  color: #2C8128;
  background: rgba(58,154,53,.10);
  border: 1px solid rgba(58,154,53,.16);
}

.gm-alert-danger {
  color: #9D2C2C;
  background: rgba(183,52,52,.08);
  border: 1px solid rgba(183,52,52,.14);
}

.gm-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.gm-section-heading h2 {
  margin: 3px 0 0;
  color: #011638;
  font-size: 1.12rem;
  font-weight: 800;
}

.gm-section-count {
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
  font-size: .67rem;
  font-weight: 800;
}

.gm-job-card {
  border: 1px solid rgba(0,45,90,.075);
  border-radius: 20px;
  box-shadow: 0 11px 30px rgba(1,22,56,.055);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.gm-job-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,45,90,.14);
  box-shadow: 0 16px 38px rgba(1,22,56,.08);
}

.gm-job-card-completed {
  background: linear-gradient(145deg,#FFFFFF,#FAFCFD);
}

.gm-job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.gm-job-order-number {
  display: block;
  margin-bottom: 3px;
  color: #79899C;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.gm-job-card h3 {
  margin: 0;
  color: #011638;
  font-size: 1.02rem;
  font-weight: 800;
}

.gm-job-card-top p {
  margin-top: 4px;
  color: #77879A;
  font-size: .68rem;
}

.gm-job-card-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 15px;
}

.gm-job-card-schedule span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #586A80;
  font-size: .72rem;
  font-weight: 700;
}

.gm-job-card-schedule iconify-icon {
  color: #002D5A !important;
}

.gm-job-card-address {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 11px;
  color: #728196;
  font-size: .7rem;
  line-height: 1.4;
}

.gm-job-card-address iconify-icon {
  margin-top: 1px;
  color: #002D5A !important;
  flex: 0 0 auto;
}

.gm-job-progress {
  padding: 12px 13px;
  border-radius: 14px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-job-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.gm-job-progress-head span {
  color: #718197;
  font-size: .66rem;
  font-weight: 750;
}

.gm-job-progress-head strong {
  color: #011638;
  font-size: .68rem;
  font-weight: 800;
}

.gm-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,45,90,.08);
}

.gm-progress .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg,#002D5A,#3A9A35);
}

.gm-job-issue-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #9B3131;
  font-size: .62rem;
  font-weight: 750;
}

.gm-job-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gm-role-chip,
.gm-quantity-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,45,90,.07);
  color: #002D5A;
  font-size: .61rem;
  font-weight: 800;
}

.gm-back-row {
  display: flex;
}

.gm-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #002D5A;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
}

.gm-back-link:hover {
  color: #011638;
}

.gm-job-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) 225px;
  align-items: center;
  gap: 30px;
  padding: 28px 30px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 18%, rgba(58,154,53,.20), transparent 26%),
    linear-gradient(135deg,#002D5A,#011638);
  box-shadow: 0 18px 42px rgba(1,22,56,.14);
}

.gm-job-hero .gm-kicker {
  color: rgba(255,255,255,.70) !important;
}

.gm-job-hero h1 {
  margin: 0 0 6px;
  color: #FFFFFF !important;
  font-size: clamp(1.55rem,3vw,2.15rem);
  font-weight: 800;
}

.gm-job-hero p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .77rem;
}

.gm-job-hero-status {
  color: #FFFFFF;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
}

.gm-job-hero-progress {
  min-width: 0;
  padding: 15px 16px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.09);
}

.gm-job-hero-progress > span,
.gm-job-hero-progress small {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: .62rem;
  font-weight: 700;
}

.gm-job-hero-progress strong {
  display: block;
  margin: 3px 0 8px;
  color: #FFFFFF;
  font-size: 1.25rem;
  font-weight: 800;
}

.gm-progress-light {
  background: rgba(255,255,255,.12);
}

.gm-progress-light .progress-bar {
  background: linear-gradient(90deg,#FFFFFF,#9DDE98);
}

.gm-job-hero-progress small {
  margin-top: 7px;
}

.gm-job-section-card {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.05);
}

.gm-job-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gm-job-section-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-job-section-icon iconify-icon {
  color: #002D5A !important;
  font-size: 1.2rem;
}

.gm-job-section-icon-green {
  background: rgba(58,154,53,.10);
  color: #3A9A35;
}

.gm-job-section-icon-green iconify-icon {
  color: #3A9A35 !important;
}

.gm-job-section-heading h2 {
  margin: 2px 0 0;
  color: #011638;
  font-size: 1rem;
  font-weight: 800;
}

.gm-job-location-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 15px;
  border-radius: 15px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.055);
}

.gm-job-location-panel > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gm-job-location-panel strong {
  color: #011638;
  font-size: .75rem;
}

.gm-job-location-panel span {
  color: #65758A;
  font-size: .7rem;
  line-height: 1.4;
}

.gm-property-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gm-property-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #5E7085;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
  font-size: .61rem;
  font-weight: 700;
}

.gm-property-facts iconify-icon {
  color: #002D5A !important;
}

.gm-instruction-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.gm-instruction-item {
  display: grid;
  grid-template-columns: 37px minmax(0,1fr);
  gap: 11px;
  align-items: start;
  padding: 12px 13px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-instruction-item > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(0,45,90,.075);
  color: #002D5A;
}

.gm-instruction-item iconify-icon {
  color: #002D5A !important;
}

.gm-instruction-item div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gm-instruction-item small {
  color: #7D8C9E;
  font-size: .61rem;
  font-weight: 800;
}

.gm-instruction-item strong {
  color: #26374B;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.45;
}

.gm-info-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 14px;
  border-radius: 14px;
  background: #F8FAFC;
  color: #718197;
  font-size: .7rem;
}

.gm-info-empty iconify-icon {
  color: #002D5A !important;
}

.gm-service-scope {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.gm-service-scope-group h3 {
  margin: 0 0 8px;
  color: #002D5A;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.gm-service-scope-group > div {
  display: grid;
  gap: 7px;
}

.gm-service-scope-item {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 10px 11px;
  border-radius: 12px;
  background: #FBFCFE;
  border: 1px solid rgba(0,45,90,.045);
}

.gm-scope-check {
  color: #3A9A35;
  line-height: 1;
}

.gm-scope-check iconify-icon {
  color: #3A9A35 !important;
  font-size: 1rem;
}

.gm-service-scope-item strong {
  display: block;
  color: #26374B;
  font-size: .71rem;
  font-weight: 750;
}

.gm-service-scope-item p {
  margin: 3px 0 0;
  color: #7A899B;
  font-size: .65rem;
  line-height: 1.4;
}

.gm-checklist-card {
  position: sticky;
  top: 98px;
}

.gm-checklist-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 16px;
}

.gm-checklist-summary > div {
  display: grid;
  gap: 1px;
  padding: 11px 12px;
  border-radius: 13px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-checklist-summary strong {
  color: #011638;
  font-size: 1rem;
  font-weight: 800;
}

.gm-checklist-summary span {
  color: #78889A;
  font-size: .61rem;
  font-weight: 700;
}

.gm-readonly-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  color: #5F7084;
  background: #F7F9FC;
  font-size: .66rem;
  line-height: 1.4;
}

.gm-readonly-notice iconify-icon {
  color: #002D5A !important;
  flex: 0 0 auto;
}

.gm-checklist-list {
  display: grid;
  gap: 12px;
}

.gm-checklist-item {
  padding: 13px;
  border-radius: 15px;
  border: 1px solid rgba(0,45,90,.07);
  background: #FFFFFF;
}

.gm-checklist-item-success {
  border-color: rgba(58,154,53,.18);
  background: linear-gradient(145deg,#FFFFFF,rgba(58,154,53,.025));
}

.gm-checklist-item-danger {
  border-color: rgba(183,52,52,.16);
  background: linear-gradient(145deg,#FFFFFF,rgba(183,52,52,.025));
}

.gm-checklist-item-neutral {
  border-color: rgba(122,137,155,.18);
}

.gm-checklist-item-head {
  display: grid;
  grid-template-columns: 31px minmax(0,1fr) auto;
  gap: 9px;
  align-items: start;
}

.gm-checklist-status-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(0,45,90,.07);
  color: #002D5A;
}

.gm-checklist-item-success .gm-checklist-status-icon {
  background: rgba(58,154,53,.10);
  color: #3A9A35;
}

.gm-checklist-item-danger .gm-checklist-status-icon {
  background: rgba(183,52,52,.09);
  color: #A03030;
}

.gm-checklist-status-icon iconify-icon {
  color: currentColor !important;
}

.gm-checklist-item-head small {
  display: block;
  margin-bottom: 2px;
  color: #8291A2;
  font-size: .57rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gm-checklist-item-head h3 {
  margin: 0;
  color: #26374B;
  font-size: .76rem;
  font-weight: 800;
}

.gm-checklist-item-head p {
  margin: 3px 0 0;
  color: #7A899B;
  font-size: .63rem;
  line-height: 1.4;
}

.gm-checklist-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .55rem;
  font-weight: 800;
  white-space: nowrap;
}

.gm-checklist-badge-pending {
  color: #002D5A;
  background: rgba(0,45,90,.075);
}

.gm-checklist-badge-success {
  color: #2C8128;
  background: rgba(58,154,53,.10);
}

.gm-checklist-badge-neutral {
  color: #68798D;
  background: rgba(104,121,141,.09);
}

.gm-checklist-badge-danger {
  color: #A03030;
  background: rgba(183,52,52,.09);
}

.gm-checklist-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,45,90,.055);
}

.gm-checklist-status-options {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}

.gm-checklist-option {
  cursor: pointer;
  margin: 0;
}

.gm-checklist-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gm-checklist-option > span {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,45,90,.08);
  background: #FFFFFF;
  color: #5F7084;
  font-size: .61rem;
  font-weight: 750;
  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease;
}

.gm-checklist-option input:checked + span {
  color: #002D5A;
  border-color: rgba(0,45,90,.28);
  background: rgba(0,45,90,.065);
}

.gm-checklist-option-success input:checked + span {
  color: #2C8128;
  border-color: rgba(58,154,53,.28);
  background: rgba(58,154,53,.08);
}

.gm-checklist-option-danger input:checked + span {
  color: #A03030;
  border-color: rgba(183,52,52,.24);
  background: rgba(183,52,52,.07);
}

.gm-checklist-option-neutral input:checked + span {
  color: #5F7084;
  border-color: rgba(104,121,141,.22);
  background: rgba(104,121,141,.07);
}

.gm-checklist-option iconify-icon {
  color: currentColor !important;
}

.gm-checklist-notes {
  display: grid;
  gap: 5px;
}

.gm-checklist-notes > span {
  color: #748497;
  font-size: .6rem;
  font-weight: 750;
}

.gm-checklist-notes textarea {
  width: 100%;
  resize: vertical;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(0,45,90,.11);
  border-radius: 10px;
  background: #FFFFFF;
  color: #26374B;
  font-size: .68rem;
  line-height: 1.4;
  outline: none;
}

.gm-checklist-notes textarea:focus {
  border-color: rgba(0,45,90,.34);
  box-shadow: 0 0 0 3px rgba(0,45,90,.07);
}

.gm-checklist-saved-note {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #F8FAFC;
}

.gm-checklist-saved-note small {
  color: #8291A2;
  font-size: .57rem;
  font-weight: 800;
}

.gm-checklist-saved-note span {
  color: #65758A;
  font-size: .65rem;
  line-height: 1.4;
}

.gm-schedule-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.gm-job-access-denied {
  max-width: 620px;
  margin: 35px auto;
}

@media (max-width: 1199.98px) {
  .gm-checklist-card {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .gm-job-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }

  .gm-job-hero-progress {
    width: 100%;
  }

  .gm-job-location-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .gm-job-location-panel .btn {
    width: 100%;
  }

  .gm-job-card-footer,
  .gm-schedule-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .gm-job-card-footer .btn {
    width: 100%;
  }

  .gm-schedule-footer-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .gm-schedule-footer-actions .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .gm-checklist-item-head {
    grid-template-columns: 30px minmax(0,1fr);
  }

  .gm-checklist-badge {
    grid-column: 2;
    justify-self: start;
  }

  .gm-checklist-status-options {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Employee Portal v0.7.1 · Jobs Visual Normalization
   Restores corporate visual uniformity for Mis Servicios.
   ========================================================= */

.gm-page-hero-services {
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 18%, rgba(58,154,53,.13), transparent 24%),
    linear-gradient(135deg, #FFFFFF, #F6FAFC);
  border: 1px solid rgba(0,45,90,.07);
  box-shadow: 0 14px 36px rgba(1,22,56,.05);
}

.gm-job-list-stack {
  display: grid;
  gap: 16px;
}

.gm-job-card-wide {
  width: 100%;
}

.gm-job-card-wide-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 18px;
  align-items: stretch;
}

.gm-job-card-main,
.gm-job-card-side {
  min-width: 0;
}

.gm-job-card-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gm-job-card-side-completed {
  align-items: flex-end;
}

.gm-job-card-actions {
  display: grid;
  gap: 8px;
}

.gm-job-chip-row,
.gm-job-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gm-job-chip,
.gm-job-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
  color: #5F7084;
  font-size: .66rem;
  font-weight: 750;
}

.gm-job-chip iconify-icon,
.gm-job-detail-chip iconify-icon {
  color: #002D5A !important;
}

.gm-job-progress-tight {
  height: 100%;
}

.gm-job-progress-label {
  display: block;
  margin-top: 7px;
  color: #7A899B;
  font-size: .61rem;
  font-weight: 750;
}

.gm-job-detail-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 20px;
  padding: 28px 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 14%, rgba(58,154,53,.18), transparent 26%),
    linear-gradient(135deg,#002D5A,#011638);
  box-shadow: 0 18px 42px rgba(1,22,56,.14);
}

.gm-job-detail-hero .gm-kicker {
  color: #A6E2A1 !important;
}

.gm-job-detail-hero-main h1 {
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(1.7rem,3vw,2.35rem);
  font-weight: 800;
}

.gm-job-detail-hero-main p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.84);
  font-size: .82rem;
}

.gm-job-detail-headline {
  margin-bottom: 14px;
}

.gm-job-order-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: #FFFFFF;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.gm-job-detail-status {
  border-color: rgba(255,255,255,.14);
}

.gm-job-detail-chip {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
}

.gm-job-detail-chip iconify-icon {
  color: #A6E2A1 !important;
}

.gm-job-detail-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gm-job-detail-progress-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.09);
}

.gm-job-detail-progress-card small,
.gm-job-detail-progress-card span {
  color: rgba(255,255,255,.72);
  font-size: .63rem;
  font-weight: 700;
}

.gm-job-detail-progress-card strong {
  color: #FFFFFF;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.gm-job-progress-problem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FFD5D5 !important;
}

.gm-job-progress-problem iconify-icon {
  color: #FFD5D5 !important;
}

.gm-job-detail-hero-actions {
  display: grid;
  gap: 9px;
}

.gm-job-detail-hero-actions .btn-outline-primary {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.26) !important;
  background: transparent !important;
}

.gm-job-detail-hero-actions .btn-outline-primary:hover {
  color: #011638 !important;
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

.gm-checklist-option {
  position: relative;
}

.gm-checklist-radio,
.gm-checklist-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.gm-checklist-option > span {
  min-height: 40px;
  justify-content: flex-start;
  padding: 9px 11px;
}

.gm-checklist-textarea,
.gm-checklist-notes textarea {
  min-height: 76px;
  border-radius: 12px;
  background: #FBFCFE;
}

.gm-checklist-textarea::placeholder,
.gm-checklist-notes textarea::placeholder {
  color: #8A98A8;
}

.gm-checklist-item {
  box-shadow: 0 7px 20px rgba(1,22,56,.035);
}

.gm-checklist-item-head {
  margin-bottom: 2px;
}

.gm-checklist-item-head h3 {
  font-size: .8rem;
}

.gm-job-section-card {
  overflow: hidden;
}

@media (max-width: 1199.98px) {
  .gm-job-card-wide-layout,
  .gm-job-detail-hero {
    grid-template-columns: 1fr;
  }

  .gm-job-card-side-completed {
    align-items: flex-start;
  }
}

@media (max-width: 767.98px) {
  .gm-job-detail-hero {
    padding: 22px 20px;
  }

  .gm-job-card-actions,
  .gm-job-detail-hero-actions {
    grid-template-columns: 1fr;
  }

  .gm-job-card-actions .btn,
  .gm-job-detail-hero-actions .btn {
    width: 100%;
  }

  .gm-job-chip-row,
  .gm-job-detail-chip-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Employee Portal v0.7.2 · Corporate Jobs Visual Lock
   Approved G&M visual language + anti-stale visual hardening.
   ========================================================= */

/* Main page header: same corporate dark hero used across Portal. */
.gm-page-hero-services {
  position: relative !important;
  overflow: hidden !important;
  min-height: 154px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 28px 30px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(58,154,53,.18), transparent 26%),
    linear-gradient(135deg,#002D5A,#011638) !important;
  border: 0 !important;
  box-shadow: 0 18px 42px rgba(1,22,56,.14) !important;
}

.gm-page-hero-services .gm-kicker {
  color: #A6E2A1 !important;
}

.gm-page-hero-services h1 {
  color: #FFFFFF !important;
}

.gm-page-hero-services p {
  color: rgba(255,255,255,.82) !important;
  max-width: 720px;
}

.gm-page-hero-services .gm-page-hero-icon {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #FFFFFF !important;
}

/* Metrics must read as Modernize cards, not loose numbers. */
.gm-schedule-metric {
  overflow: hidden;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,45,90,.07) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(1,22,56,.05) !important;
}

.gm-schedule-metric .card-body {
  min-height: 116px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 7px !important;
}

.gm-schedule-metric small {
  display: block !important;
  color: #718197 !important;
  font-size: .70rem !important;
  font-weight: 750 !important;
}

.gm-schedule-metric strong {
  color: #011638 !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Services listing: one clean full-width operational card per order. */
.gm-job-list-stack {
  display: grid !important;
  gap: 16px !important;
}

.gm-job-card-wide {
  width: 100% !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,45,90,.075) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(1,22,56,.05) !important;
}

.gm-job-card-wide-layout {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(245px,290px) !important;
  align-items: stretch !important;
  gap: 22px !important;
}

.gm-job-card-main {
  min-width: 0 !important;
  padding-right: 4px !important;
}

.gm-job-card-side {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-left: 20px !important;
  border-left: 1px solid rgba(0,45,90,.065) !important;
}

.gm-job-card-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.gm-job-card-top h3,
.gm-job-card h3 {
  margin: 2px 0 0 !important;
  color: #011638 !important;
  font-size: 1.10rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.gm-job-order-number {
  color: #708197 !important;
  font-size: .63rem !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}

.gm-job-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.gm-job-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 31px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #F6F8FB !important;
  border: 1px solid rgba(0,45,90,.055) !important;
  color: #5F7084 !important;
  font-size: .66rem !important;
  font-weight: 750 !important;
}

.gm-job-chip iconify-icon {
  color: #002D5A !important;
}

.gm-job-card-address {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  color: #65758A !important;
  font-size: .70rem !important;
  line-height: 1.45 !important;
}

.gm-job-card-address iconify-icon {
  color: #002D5A !important;
  flex: 0 0 auto !important;
  margin-top: 1px !important;
}

.gm-job-progress-tight {
  min-height: 108px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 14px !important;
  border-radius: 15px !important;
  background: #F7F9FC !important;
  border: 1px solid rgba(0,45,90,.055) !important;
}

.gm-job-card-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.gm-job-card-actions .btn {
  width: 100% !important;
}

/* Detail page hero: unmistakably corporate and visually separated. */
.gm-job-detail-hero {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(270px,330px) !important;
  gap: 24px !important;
  align-items: stretch !important;
  padding: 30px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(58,154,53,.19), transparent 27%),
    linear-gradient(135deg,#002D5A,#011638) !important;
  box-shadow: 0 18px 42px rgba(1,22,56,.15) !important;
}

.gm-job-detail-hero-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.gm-job-detail-hero .gm-kicker {
  color: #A6E2A1 !important;
}

.gm-job-detail-hero-main h1 {
  margin: 2px 0 8px !important;
  color: #FFFFFF !important;
  font-size: clamp(1.75rem,3vw,2.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

.gm-job-detail-hero-main p {
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: .80rem !important;
}

.gm-job-order-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 27px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #FFFFFF !important;
  font-size: .60rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

.gm-job-detail-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

.gm-job-detail-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 31px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
}

.gm-job-detail-chip iconify-icon {
  color: #A6E2A1 !important;
}

.gm-job-detail-hero-side {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
}

.gm-job-detail-progress-card {
  display: grid !important;
  gap: 8px !important;
  padding: 16px !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.gm-job-detail-progress-card small,
.gm-job-detail-progress-card span {
  color: rgba(255,255,255,.70) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
}

.gm-job-detail-progress-card strong {
  color: #FFFFFF !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.gm-job-detail-hero-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.gm-job-detail-hero-actions .btn {
  min-height: 39px !important;
}

.gm-job-detail-hero-actions .btn-primary {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #002D5A !important;
}

.gm-job-detail-hero-actions .btn-primary:hover {
  background: #F0F2F5 !important;
  border-color: #F0F2F5 !important;
  color: #011638 !important;
}

.gm-job-detail-hero-actions .btn-outline-primary {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.32) !important;
  background: transparent !important;
}

.gm-job-detail-hero-actions .btn-outline-primary:hover {
  color: #011638 !important;
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Content cards: same rhythm as Dashboard/Agenda. */
.gm-job-section-card {
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,45,90,.07) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(1,22,56,.05) !important;
}

.gm-job-section-heading {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.gm-job-section-heading h2 {
  margin: 2px 0 0 !important;
  color: #011638 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

.gm-job-section-icon {
  width: 43px !important;
  height: 43px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 13px !important;
  background: rgba(0,45,90,.08) !important;
  color: #002D5A !important;
}

.gm-job-section-icon iconify-icon {
  color: #002D5A !important;
  font-size: 1.18rem !important;
}

.gm-job-section-icon-green,
.gm-job-section-icon-green iconify-icon {
  color: #3A9A35 !important;
}

.gm-job-section-icon-green {
  background: rgba(58,154,53,.10) !important;
}

.gm-job-location-panel,
.gm-instruction-item,
.gm-info-empty,
.gm-service-scope-item {
  background: #F8FAFC !important;
  border-color: rgba(0,45,90,.055) !important;
}

/* Checklist: no native radio leakage; each state is a clean tile. */
.gm-checklist-card {
  position: sticky !important;
  top: 96px !important;
}

.gm-checklist-list {
  display: grid !important;
  gap: 13px !important;
}

.gm-checklist-item {
  padding: 15px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,45,90,.075) !important;
  box-shadow: 0 8px 22px rgba(1,22,56,.035) !important;
}

.gm-checklist-item-head {
  display: grid !important;
  grid-template-columns: 32px minmax(0,1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

.gm-checklist-item-head h3 {
  margin: 0 !important;
  color: #26374B !important;
  font-size: .80rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.gm-checklist-item-head p {
  margin: 4px 0 0 !important;
  color: #7A899B !important;
  font-size: .64rem !important;
  line-height: 1.45 !important;
}

.gm-checklist-form {
  display: grid !important;
  gap: 11px !important;
  margin-top: 13px !important;
  padding-top: 13px !important;
  border-top: 1px solid rgba(0,45,90,.055) !important;
}

.gm-checklist-status-options {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 7px !important;
}

.gm-checklist-option {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.gm-checklist-radio,
.gm-checklist-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.gm-checklist-option > span {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(0,45,90,.09) !important;
  background: #FFFFFF !important;
  color: #5F7084 !important;
  font-size: .62rem !important;
  font-weight: 750 !important;
}

.gm-checklist-option input:checked + span {
  color: #002D5A !important;
  border-color: rgba(0,45,90,.28) !important;
  background: rgba(0,45,90,.065) !important;
  box-shadow: 0 0 0 2px rgba(0,45,90,.035) !important;
}

.gm-checklist-option-success input:checked + span {
  color: #2C8128 !important;
  border-color: rgba(58,154,53,.28) !important;
  background: rgba(58,154,53,.08) !important;
}

.gm-checklist-option-danger input:checked + span {
  color: #A03030 !important;
  border-color: rgba(183,52,52,.24) !important;
  background: rgba(183,52,52,.07) !important;
}

.gm-checklist-textarea,
.gm-checklist-notes textarea {
  width: 100% !important;
  min-height: 82px !important;
  resize: vertical !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(0,45,90,.11) !important;
  border-radius: 11px !important;
  background: #FBFCFE !important;
  color: #26374B !important;
  font-size: .68rem !important;
  line-height: 1.45 !important;
}

.gm-checklist-textarea:focus,
.gm-checklist-notes textarea:focus {
  border-color: rgba(0,45,90,.34) !important;
  box-shadow: 0 0 0 3px rgba(0,45,90,.07) !important;
  outline: 0 !important;
}

@media (max-width: 1199.98px) {
  .gm-job-card-wide-layout,
  .gm-job-detail-hero {
    grid-template-columns: 1fr !important;
  }

  .gm-job-card-side {
    padding-left: 0 !important;
    padding-top: 16px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(0,45,90,.065) !important;
  }

  .gm-checklist-card {
    position: static !important;
  }
}

@media (max-width: 767.98px) {
  .gm-page-hero-services,
  .gm-job-detail-hero {
    padding: 22px 20px !important;
  }

  .gm-job-card-wide .card-body {
    padding: 18px !important;
  }

  .gm-job-detail-hero-actions,
  .gm-checklist-status-options {
    grid-template-columns: 1fr !important;
  }

  .gm-job-detail-chip-row,
  .gm-job-chip-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .gm-job-detail-chip,
  .gm-job-chip {
    border-radius: 11px !important;
  }
}


/* =========================================================
   Employee Portal v0.8.0 · Time Clock
   Strict G&M corporate palette.
   ========================================================= */

.gm-time-metric {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(1,22,56,.05);
}

.gm-time-metric .card-body {
  display: grid;
  gap: 8px;
}

.gm-time-metric-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-time-metric-icon iconify-icon {
  color: #002D5A !important;
  font-size: 1.1rem;
}

.gm-time-metric-icon-green {
  background: rgba(58,154,53,.11);
  color: #3A9A35;
}

.gm-time-metric-icon-green iconify-icon {
  color: #3A9A35 !important;
}

.gm-time-metric small {
  color: #718197;
  font-size: .7rem;
  font-weight: 700;
}

.gm-time-metric strong {
  color: #011638;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.gm-time-state-text.is-active {
  color: #2C8128;
}

.gm-active-clock-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 24px 26px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 83% 20%, rgba(58,154,53,.22), transparent 27%),
    linear-gradient(135deg,#002D5A,#011638);
  box-shadow: 0 18px 42px rgba(1,22,56,.14);
}

.gm-active-clock-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #A6E2A1;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.gm-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3A9A35;
  box-shadow: 0 0 0 5px rgba(58,154,53,.14);
  animation: gmLivePulse 1.8s ease-in-out infinite;
}

.gm-active-clock-copy h2 {
  margin: 7px 0 4px;
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: 800;
}

.gm-active-clock-copy p,
.gm-active-clock-start {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .7rem;
}

.gm-active-clock-start {
  display: block;
  margin-top: 6px;
}

.gm-active-clock-timer {
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 17px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
}

.gm-active-clock-timer small {
  display: block;
  color: rgba(255,255,255,.60);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.gm-active-clock-timer strong {
  display: block;
  margin-top: 4px;
  color: #FFFFFF;
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.gm-active-clock-actions {
  display: grid;
  gap: 8px;
}

.gm-active-clock-actions form {
  margin: 0;
}

.gm-active-clock-actions .btn {
  width: 100%;
  white-space: nowrap;
}

.gm-btn-clock-in {
  background: #3A9A35 !important;
  border: 1px solid #3A9A35 !important;
  color: #FFFFFF !important;
  font-weight: 750;
}

.gm-btn-clock-in:hover {
  background: #31872D !important;
  border-color: #31872D !important;
  color: #FFFFFF !important;
}

.gm-btn-clock-out {
  background: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  color: #011638 !important;
  font-weight: 800;
}

.gm-btn-clock-out:hover {
  background: #F0F2F5 !important;
  border-color: #F0F2F5 !important;
  color: #002D5A !important;
}

.gm-time-ready-card,
.gm-job-time-clock-card {
  border: 1px solid rgba(0,45,90,.07);
  border-left: 4px solid #002D5A;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.05);
}

.gm-time-job-list {
  display: grid;
  gap: 14px;
}

.gm-time-job-card {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.045);
}

.gm-time-job-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 250px;
  gap: 20px;
  align-items: center;
}

.gm-time-job-main h3 {
  margin: 0;
  color: #011638;
  font-size: 1.05rem;
  font-weight: 800;
}

.gm-time-job-side {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.gm-time-worked {
  padding: 12px 13px;
  border-radius: 14px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-time-worked small {
  display: block;
  color: #7A899B;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .05em;
}

.gm-time-worked strong {
  display: block;
  margin-top: 3px;
  color: #011638;
  font-size: 1rem;
  font-weight: 800;
}

.gm-time-job-actions {
  display: grid;
  gap: 8px;
}

.gm-time-job-actions form {
  margin: 0;
}

.gm-time-history-card {
  overflow: hidden;
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.04);
}

.gm-time-history-list {
  display: grid;
}

.gm-time-history-row {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,45,90,.055);
}

.gm-time-history-row:last-child {
  border-bottom: 0;
}

.gm-time-history-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,45,90,.075);
  color: #002D5A;
}

.gm-time-history-icon iconify-icon {
  color: #002D5A !important;
}

.gm-time-history-icon.is-active {
  background: rgba(58,154,53,.10);
  color: #3A9A35;
}

.gm-time-history-icon.is-active iconify-icon {
  color: #3A9A35 !important;
}

.gm-time-history-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gm-time-history-main strong {
  color: #26374B;
  font-size: .72rem;
  font-weight: 800;
}

.gm-time-history-main span {
  color: #7A899B;
  font-size: .62rem;
}

.gm-time-history-duration {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.gm-time-history-duration strong {
  color: #011638;
  font-size: .72rem;
  font-weight: 800;
}

.gm-time-history-duration small {
  color: #8492A3;
  font-size: .58rem;
}

.gm-job-clock-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 18px;
  align-items: center;
}

.gm-job-clock-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gm-job-clock-copy h2 {
  margin: 2px 0 2px;
  color: #011638;
  font-size: 1rem;
  font-weight: 800;
}

.gm-job-clock-copy p {
  margin: 0;
  color: #718197;
  font-size: .67rem;
  line-height: 1.4;
}

.gm-job-clock-live {
  min-width: 130px;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(58,154,53,.075);
  border: 1px solid rgba(58,154,53,.12);
}

.gm-job-clock-live small {
  display: block;
  color: #668064;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .05em;
}

.gm-job-clock-live strong {
  display: block;
  margin-top: 3px;
  color: #2C8128;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gm-job-clock-action form {
  margin: 0;
}

@keyframes gmLivePulse {
  0%,100% {
    box-shadow: 0 0 0 4px rgba(58,154,53,.10);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(58,154,53,.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-live-dot {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .gm-active-clock-card,
  .gm-time-job-layout,
  .gm-job-clock-layout {
    grid-template-columns: 1fr;
  }

  .gm-active-clock-actions,
  .gm-time-job-actions {
    grid-template-columns: 1fr;
  }

  .gm-job-clock-action .btn,
  .gm-job-clock-action form,
  .gm-job-clock-action button {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .gm-active-clock-card {
    padding: 20px;
  }

  .gm-time-history-row {
    grid-template-columns: 36px minmax(0,1fr);
  }

  .gm-time-history-duration {
    grid-column: 2;
    justify-items: start;
  }
}


/* =========================================================
   Employee Portal v0.9.0 · Evidence / Incidents / Completion
   Strict G&M corporate palette.
   ========================================================= */

.gm-form-label,
.gm-form-field > span {
  display: block;
  margin-bottom: 5px;
  color: #65758A;
  font-size: .62rem;
  font-weight: 800;
}

.gm-form-field {
  display: grid;
  gap: 0;
}

.gm-form-field + .gm-form-field {
  margin-top: 10px;
}

.gm-evidence-stage-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}

.gm-evidence-stage-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.055);
}

.gm-evidence-stage-card > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-evidence-stage-card iconify-icon {
  color: #002D5A !important;
}

.gm-evidence-stage-card > div {
  display: grid;
  gap: 1px;
}

.gm-evidence-stage-card small {
  color: #7B8A9C;
  font-size: .58rem;
  font-weight: 750;
}

.gm-evidence-stage-card strong {
  color: #011638;
  font-size: .95rem;
  font-weight: 800;
}

.gm-evidence-upload-form {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,45,90,.07);
  background: linear-gradient(145deg,#FBFCFE,#F7FAFC);
}

.gm-photo-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 13px 14px;
  border-radius: 15px;
  border: 1px dashed rgba(0,45,90,.22);
  background: #FFFFFF;
  cursor: pointer;
}

.gm-photo-picker:hover {
  border-color: rgba(0,45,90,.42);
  background: #F9FBFD;
}

.gm-photo-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gm-photo-picker-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-photo-picker-icon iconify-icon {
  color: #002D5A !important;
  font-size: 1.2rem;
}

.gm-photo-picker > span:last-child {
  display: grid;
  gap: 2px;
}

.gm-photo-picker strong {
  color: #26374B;
  font-size: .7rem;
  font-weight: 800;
}

.gm-photo-picker small {
  color: #8492A3;
  font-size: .6rem;
}

.gm-photo-picker-compact {
  min-height: 62px;
}

.gm-evidence-gallery {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.gm-evidence-photo {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(0,45,90,.07);
  background: #FFFFFF;
}

.gm-evidence-photo > a {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #F0F2F5;
}

.gm-evidence-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gm-evidence-photo figcaption {
  display: grid;
  gap: 4px;
  padding: 9px 10px 10px;
}

.gm-evidence-stage-badge {
  justify-self: start;
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,45,90,.075);
  color: #002D5A;
  font-size: .54rem;
  font-weight: 800;
}

.gm-evidence-photo figcaption strong {
  color: #26374B;
  font-size: .64rem;
  line-height: 1.35;
}

.gm-evidence-photo figcaption small {
  color: #8A98A8;
  font-size: .55rem;
}

.gm-incident-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gm-incident-summary > div {
  display: grid;
  gap: 1px;
  padding: 10px 11px;
  border-radius: 13px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-incident-summary strong {
  color: #011638;
  font-size: .95rem;
  font-weight: 800;
}

.gm-incident-summary span {
  color: #7B8A9C;
  font-size: .58rem;
  font-weight: 700;
}

.gm-incident-report {
  border: 1px solid rgba(0,45,90,.075);
  border-radius: 14px;
  background: #FBFCFE;
}

.gm-incident-report summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 13px;
  color: #002D5A;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.gm-incident-report summary::-webkit-details-marker {
  display: none;
}

.gm-incident-report summary iconify-icon {
  color: #002D5A !important;
}

.gm-incident-form {
  display: grid;
  gap: 10px;
  padding: 0 13px 13px;
}

.gm-incident-list {
  display: grid;
  gap: 9px;
}

.gm-incident-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 9px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid rgba(0,45,90,.055);
  background: #FFFFFF;
}

.gm-incident-severity {
  min-width: 50px;
  display: inline-flex;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .53rem;
  font-weight: 800;
}

.gm-incident-severity-low {
  color: #5F7084;
  background: rgba(95,112,132,.09);
}

.gm-incident-severity-medium {
  color: #765800;
  background: rgba(218,162,0,.12);
}

.gm-incident-severity-high,
.gm-incident-severity-critical {
  color: #A03030;
  background: rgba(183,52,52,.09);
}

.gm-incident-severity-critical {
  box-shadow: inset 0 0 0 1px rgba(183,52,52,.18);
}

.gm-incident-item > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gm-incident-item small,
.gm-incident-item > div > span {
  color: #8492A3;
  font-size: .56rem;
  font-weight: 700;
}

.gm-incident-item strong {
  color: #26374B;
  font-size: .69rem;
  font-weight: 800;
}

.gm-incident-item p {
  margin: 0;
  color: #68798D;
  font-size: .63rem;
  line-height: 1.42;
}

.gm-completion-card {
  border: 1px solid rgba(0,45,90,.07);
  border-top: 4px solid #002D5A;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.05);
}

.gm-completion-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(58,154,53,.09);
  border: 1px solid rgba(58,154,53,.14);
}

.gm-completion-success > iconify-icon {
  color: #3A9A35 !important;
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.gm-completion-success > div {
  display: grid;
  gap: 2px;
}

.gm-completion-success strong {
  color: #2C8128;
  font-size: .7rem;
  font-weight: 800;
}

.gm-completion-success span {
  color: #668064;
  font-size: .62rem;
  line-height: 1.4;
}

.gm-completion-progress {
  padding: 12px 13px;
  border-radius: 14px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-completion-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.gm-completion-progress span {
  color: #718197;
  font-size: .63rem;
  font-weight: 750;
}

.gm-completion-progress strong {
  color: #011638;
  font-size: .7rem;
  font-weight: 800;
}

.gm-completion-requirements {
  display: grid;
  gap: 7px;
}

.gm-completion-requirement {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: #FBFCFE;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-completion-requirement > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}

.gm-completion-requirement.is-ready > span {
  background: rgba(58,154,53,.10);
  color: #3A9A35;
}

.gm-completion-requirement.is-blocked > span {
  background: rgba(183,52,52,.08);
  color: #A03030;
}

.gm-completion-requirement iconify-icon {
  color: currentColor !important;
}

.gm-completion-requirement > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.gm-completion-requirement strong {
  color: #26374B;
  font-size: .65rem;
  font-weight: 800;
}

.gm-completion-requirement small {
  color: #8492A3;
  font-size: .56rem;
}

.gm-completion-blockers {
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(183,52,52,.055);
  border: 1px solid rgba(183,52,52,.09);
}

.gm-completion-blockers > strong {
  color: #8E3030;
  font-size: .63rem;
  font-weight: 800;
}

.gm-completion-blockers ul {
  margin: 6px 0 0;
  padding-left: 17px;
  color: #7C4A4A;
  font-size: .59rem;
  line-height: 1.45;
}

.gm-completion-form {
  display: grid;
  gap: 10px;
}

.gm-btn-complete-service {
  background: #3A9A35 !important;
  border-color: #3A9A35 !important;
  color: #FFFFFF !important;
  font-weight: 800;
}

.gm-btn-complete-service:hover {
  background: #31872D !important;
  border-color: #31872D !important;
  color: #FFFFFF !important;
}

@media (max-width: 767.98px) {
  .gm-evidence-gallery {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 480px) {
  .gm-evidence-stage-grid,
  .gm-evidence-gallery {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Employee Portal v0.10.0 · Payroll / Issued Paystubs
   Strict G&M corporate palette.
   ========================================================= */

.gm-payroll-metric {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(1,22,56,.05);
}

.gm-payroll-metric .card-body {
  display: grid;
  gap: 8px;
}

.gm-payroll-metric-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-payroll-metric-icon iconify-icon {
  color: #002D5A !important;
}

.gm-payroll-metric-icon-green {
  background: rgba(58,154,53,.10);
  color: #3A9A35;
}

.gm-payroll-metric-icon-green iconify-icon {
  color: #3A9A35 !important;
}

.gm-payroll-metric small {
  color: #718197;
  font-size: .68rem;
  font-weight: 700;
}

.gm-payroll-metric strong {
  color: #011638;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.gm-payroll-date-value {
  font-size: .92rem !important;
  line-height: 1.18 !important;
}

.gm-latest-pay-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: 24px;
  align-items: center;
  padding: 25px 27px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 18%, rgba(58,154,53,.19), transparent 27%),
    linear-gradient(135deg,#002D5A,#011638);
  box-shadow: 0 18px 42px rgba(1,22,56,.14);
}

.gm-latest-pay-card .gm-kicker {
  color: #A6E2A1 !important;
}

.gm-latest-pay-copy h2 {
  margin: 5px 0 3px;
  color: #FFFFFF;
  font-size: 2rem;
  font-weight: 800;
}

.gm-latest-pay-copy p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: .72rem;
}

.gm-latest-pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.gm-latest-pay-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  color: rgba(255,255,255,.83);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .6rem;
  font-weight: 700;
}

.gm-latest-pay-chips iconify-icon {
  color: #A6E2A1 !important;
}

.gm-latest-pay-side {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.gm-latest-pay-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gm-latest-pay-breakdown > span {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
}

.gm-latest-pay-breakdown small {
  color: rgba(255,255,255,.60);
  font-size: .57rem;
  font-weight: 750;
}

.gm-latest-pay-breakdown strong {
  color: #FFFFFF;
  font-size: .85rem;
  font-weight: 800;
}

.gm-paystub-list {
  display: grid;
  gap: 14px;
}

.gm-paystub-card {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.045);
}

.gm-paystub-card-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.85fr) auto;
  gap: 22px;
  align-items: center;
}

.gm-paystub-number {
  color: #002D5A;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.gm-paystub-issued {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  color: #2C8128;
  background: rgba(58,154,53,.10);
  font-size: .54rem;
  font-weight: 800;
}

.gm-paystub-card-main h3 {
  margin: 6px 0 3px;
  color: #011638;
  font-size: 1rem;
  font-weight: 800;
}

.gm-paystub-card-main p {
  margin: 0;
  color: #718197;
  font-size: .67rem;
}

.gm-paystub-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.gm-paystub-chip-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.05);
  color: #65758A;
  font-size: .59rem;
  font-weight: 700;
}

.gm-paystub-chip-row iconify-icon {
  color: #002D5A !important;
}

.gm-paystub-card-financials {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
}

.gm-paystub-card-financials > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #F7F9FC;
  border: 1px solid rgba(0,45,90,.045);
}

.gm-paystub-card-financials small {
  color: #8190A1;
  font-size: .54rem;
  font-weight: 700;
}

.gm-paystub-card-financials strong {
  color: #26374B;
  font-size: .68rem;
  font-weight: 800;
}

.gm-paystub-card-financials .gm-paystub-net {
  background: rgba(58,154,53,.075);
  border-color: rgba(58,154,53,.10);
}

.gm-paystub-card-financials .gm-paystub-net strong {
  color: #2C8128;
}

.gm-paystub-card-action .btn {
  white-space: nowrap;
}

.gm-paystub-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.gm-paystub-document {
  max-width: 1120px;
  margin: 0 auto 30px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0,45,90,.08);
  background: #FFFFFF;
  box-shadow: 0 15px 40px rgba(1,22,56,.07);
}

.gm-paystub-document-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 28px;
  background:
    radial-gradient(circle at 88% 20%, rgba(58,154,53,.18), transparent 25%),
    linear-gradient(135deg,#002D5A,#011638);
}

.gm-paystub-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.gm-paystub-brand-mark {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #FFFFFF;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: -.04em;
}

.gm-paystub-brand-mark span {
  color: #A6E2A1;
}

.gm-paystub-brand > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gm-paystub-brand strong {
  color: #FFFFFF;
  font-size: .86rem;
  font-weight: 800;
}

.gm-paystub-brand > div > span {
  color: rgba(255,255,255,.66);
  font-size: .6rem;
  line-height: 1.4;
}

.gm-paystub-document-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.gm-paystub-document-meta > span {
  color: #A6E2A1;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .10em;
}

.gm-paystub-document-meta strong {
  color: #FFFFFF;
  font-size: .85rem;
  font-weight: 800;
}

.gm-paystub-document-meta small {
  color: rgba(255,255,255,.60);
  font-size: .56rem;
}

.gm-paystub-identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(0,45,90,.06);
}

.gm-paystub-identity > div {
  display: grid;
  gap: 3px;
}

.gm-paystub-identity small {
  color: #7F8E9F;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.gm-paystub-identity strong {
  color: #011638;
  font-size: .82rem;
  font-weight: 800;
}

.gm-paystub-identity span {
  color: #65758A;
  font-size: .61rem;
}

.gm-paystub-net-banner {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: 20px;
  align-items: center;
  margin: 22px 28px 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(145deg,#F6FAFC,#F0F6F9);
  border: 1px solid rgba(0,45,90,.07);
}

.gm-paystub-net-banner > div:first-child {
  display: grid;
  gap: 2px;
}

.gm-paystub-net-banner > div:first-child small {
  color: #65758A;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.gm-paystub-net-banner > div:first-child strong {
  color: #002D5A;
  font-size: 1.75rem;
  font-weight: 850;
}

.gm-paystub-net-banner-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}

.gm-paystub-net-banner-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-paystub-net-banner-stats small {
  color: #8492A3;
  font-size: .53rem;
  font-weight: 700;
}

.gm-paystub-net-banner-stats strong {
  color: #26374B;
  font-size: .68rem;
  font-weight: 800;
}

.gm-paystub-hours {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 9px;
  padding: 18px 28px 0;
}

.gm-paystub-hours > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 13px;
  background: #FBFCFE;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-paystub-section-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(0,45,90,.075);
  color: #002D5A;
}

.gm-paystub-section-icon iconify-icon {
  color: #002D5A !important;
}

.gm-paystub-hours > div > div {
  display: grid;
  gap: 1px;
}

.gm-paystub-hours small {
  color: #8492A3;
  font-size: .51rem;
  font-weight: 750;
}

.gm-paystub-hours strong {
  color: #011638;
  font-size: .73rem;
  font-weight: 800;
}

.gm-paystub-section {
  margin: 20px 28px 0;
  padding: 17px 18px;
  border-radius: 17px;
  background: #FFFFFF;
  border: 1px solid rgba(0,45,90,.07);
}

.gm-paystub-section-heading h2 {
  margin: 2px 0 0;
  color: #011638;
  font-size: .9rem;
  font-weight: 800;
}

.gm-paystub-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}

.gm-paystub-table {
  width: 100%;
  border-collapse: collapse;
}

.gm-paystub-table th,
.gm-paystub-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(0,45,90,.055);
  color: #596B80;
  font-size: .61rem;
  text-align: left;
  white-space: nowrap;
}

.gm-paystub-table th {
  color: #7B8A9C;
  background: #F8FAFC;
  font-size: .53rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gm-paystub-table tbody tr:last-child td {
  border-bottom: 0;
}

.gm-paystub-breakdown-row {
  margin: 0 16px;
}

.gm-paystub-line-list {
  display: grid;
  margin-top: 11px;
}

.gm-paystub-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,45,90,.055);
}

.gm-paystub-line:last-child {
  border-bottom: 0;
}

.gm-paystub-line span {
  color: #65758A;
  font-size: .62rem;
}

.gm-paystub-line strong {
  color: #26374B;
  font-size: .65rem;
  font-weight: 800;
}

.gm-paystub-line-positive strong {
  color: #2C8128;
}

.gm-paystub-ytd {
  margin-top: 22px;
  padding: 20px 28px;
  background:
    radial-gradient(circle at 88% 18%, rgba(58,154,53,.16), transparent 25%),
    linear-gradient(135deg,#002D5A,#011638);
}

.gm-paystub-ytd .gm-kicker,
.gm-paystub-ytd h2 {
  color: #FFFFFF !important;
}

.gm-paystub-ytd-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 8px;
  margin-top: 13px;
}

.gm-paystub-ytd-grid > div {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
}

.gm-paystub-ytd-grid small {
  color: rgba(255,255,255,.58);
  font-size: .51rem;
  font-weight: 700;
}

.gm-paystub-ytd-grid strong {
  color: #FFFFFF;
  font-size: .68rem;
  font-weight: 800;
}

.gm-paystub-ytd-grid .gm-paystub-ytd-net {
  background: rgba(58,154,53,.18);
}

.gm-paystub-document-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 28px;
  background: #F8FAFC;
  color: #8492A3;
  font-size: .52rem;
}

@media (max-width: 1199.98px) {
  .gm-paystub-card-layout {
    grid-template-columns: 1fr;
  }

  .gm-paystub-card-action .btn {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .gm-latest-pay-card,
  .gm-paystub-net-banner {
    grid-template-columns: 1fr;
  }

  .gm-paystub-hours,
  .gm-paystub-ytd-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 767.98px) {
  .gm-paystub-card-financials {
    grid-template-columns: repeat(2,1fr);
  }

  .gm-paystub-document-header,
  .gm-paystub-document-footer {
    flex-direction: column;
  }

  .gm-paystub-document-meta {
    justify-items: start;
    text-align: left;
  }

  .gm-paystub-identity {
    grid-template-columns: 1fr;
  }

  .gm-paystub-net-banner-stats {
    grid-template-columns: 1fr;
  }

  .gm-paystub-hours {
    grid-template-columns: 1fr 1fr;
  }

  .gm-paystub-ytd-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .gm-paystub-hours,
  .gm-paystub-ytd-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    size: letter;
    margin: 0.35in;
  }

  html,
  body {
    background: #FFFFFF !important;
  }

  .gm-print-hide,
  .gm-mobile-bottom-nav,
  .preloader {
    display: none !important;
  }

  #main-wrapper,
  .page-wrapper,
  .body-wrapper,
  .gm-body-wrapper,
  .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .gm-paystub-document {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .gm-paystub-document-header,
  .gm-paystub-ytd {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .gm-paystub-section,
  .gm-paystub-net-banner,
  .gm-paystub-hours > div {
    break-inside: avoid;
  }

  .gm-paystub-table th,
  .gm-paystub-table td {
    font-size: 8pt;
  }
}


/* =========================================================
   Employee Portal v0.11.0 · HR Documents
   Strict G&M corporate palette.
   ========================================================= */

.gm-document-metric {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(1,22,56,.05);
}

.gm-document-metric .card-body {
  display: grid;
  gap: 8px;
}

.gm-document-metric-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-document-metric-icon iconify-icon {
  color: currentColor !important;
}

.gm-document-metric-icon-green {
  color: #3A9A35;
  background: rgba(58,154,53,.10);
}

.gm-document-metric-icon-warning {
  color: #9B7400;
  background: rgba(218,162,0,.11);
}

.gm-document-metric-icon-danger {
  color: #A03030;
  background: rgba(183,52,52,.08);
}

.gm-document-metric small {
  color: #718197;
  font-size: .68rem;
  font-weight: 700;
}

.gm-document-metric strong {
  color: #011638;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.gm-document-list {
  display: grid;
  gap: 14px;
}

.gm-document-card {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.045);
}

.gm-document-card-layout {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
}

.gm-document-file-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(0,45,90,.08);
  color: #002D5A;
}

.gm-document-file-icon iconify-icon {
  color: #002D5A !important;
  font-size: 1.35rem;
}

.gm-document-file-icon.is-image {
  background: rgba(58,154,53,.09);
  color: #3A9A35;
}

.gm-document-file-icon.is-image iconify-icon {
  color: #3A9A35 !important;
}

.gm-document-main {
  min-width: 0;
}

.gm-document-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.gm-document-category,
.gm-document-compliance,
.gm-document-expiry {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .53rem;
  font-weight: 800;
}

.gm-document-category {
  color: #002D5A;
  background: rgba(0,45,90,.075);
}

.gm-document-compliance-success,
.gm-document-expiry-current,
.gm-document-expiry-none {
  color: #2C8128;
  background: rgba(58,154,53,.10);
}

.gm-document-compliance-warning,
.gm-document-expiry-expiring {
  color: #765800;
  background: rgba(218,162,0,.12);
}

.gm-document-compliance-danger,
.gm-document-expiry-expired {
  color: #A03030;
  background: rgba(183,52,52,.09);
}

.gm-document-compliance-neutral {
  color: #64758A;
  background: rgba(100,117,138,.09);
}

.gm-document-main h3 {
  margin: 0;
  color: #011638;
  font-size: .92rem;
  font-weight: 800;
}

.gm-document-filename {
  margin: 3px 0 0;
  color: #718197;
  font-size: .65rem;
  overflow-wrap: anywhere;
}

.gm-document-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 10px;
}

.gm-document-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #758599;
  font-size: .58rem;
  font-weight: 700;
}

.gm-document-meta-row iconify-icon {
  color: #002D5A !important;
}

.gm-document-actions {
  min-width: 126px;
  display: grid;
  gap: 8px;
}

.gm-document-privacy-card {
  border: 1px solid rgba(0,45,90,.07);
  border-left: 4px solid #002D5A;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.04);
}

@media (max-width: 767.98px) {
  .gm-document-card-layout {
    grid-template-columns: 48px minmax(0,1fr);
  }

  .gm-document-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .gm-document-actions {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Employee Portal v0.11.1 · Profile Compliance Expiration
   Corporate G&M visual language.
   ========================================================= */

.gm-profile-compliance-alert {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0,45,90,.08);
  background: #FFFFFF;
  box-shadow: 0 14px 36px rgba(1,22,56,.055);
}

.gm-profile-compliance-alert-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 88% 10%, rgba(58,154,53,.12), transparent 24%),
    linear-gradient(135deg,#002D5A,#011638);
}

.gm-profile-alert-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.gm-profile-alert-icon iconify-icon {
  color: #A6E2A1 !important;
  font-size: 1.25rem;
}

.gm-profile-compliance-alert-head .gm-kicker {
  color: #A6E2A1 !important;
}

.gm-profile-compliance-alert-head h2 {
  margin: 3px 0 4px;
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 800;
}

.gm-profile-compliance-alert-head p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .68rem;
  line-height: 1.45;
}

.gm-profile-compliance-alert-list {
  display: grid;
}

.gm-profile-compliance-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 17px;
  border-bottom: 1px solid rgba(0,45,90,.055);
}

.gm-profile-compliance-item:last-child {
  border-bottom: 0;
}

.gm-profile-compliance-state-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.gm-profile-compliance-item-warning .gm-profile-compliance-state-icon {
  background: rgba(218,162,0,.11);
  color: #8B6800;
}

.gm-profile-compliance-item-urgent .gm-profile-compliance-state-icon,
.gm-profile-compliance-item-expired .gm-profile-compliance-state-icon {
  background: rgba(183,52,52,.09);
  color: #A03030;
}

.gm-profile-compliance-state-icon iconify-icon {
  color: currentColor !important;
}

.gm-profile-compliance-copy {
  min-width: 0;
}

.gm-profile-compliance-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.gm-profile-compliance-meta > span:first-child {
  color: #6F8093;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.gm-profile-expiry-pill {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .55rem;
  font-weight: 800;
}

.gm-profile-expiry-pill-warning {
  color: #765800;
  background: rgba(218,162,0,.12);
}

.gm-profile-expiry-pill-urgent,
.gm-profile-expiry-pill-expired {
  color: #A03030;
  background: rgba(183,52,52,.09);
}

.gm-profile-compliance-copy h3 {
  margin: 4px 0 2px;
  color: #011638;
  font-size: .77rem;
  font-weight: 800;
}

.gm-profile-compliance-copy p {
  margin: 0;
  color: #718197;
  font-size: .62rem;
}

.gm-profile-compliance-action {
  display: flex;
  justify-content: flex-end;
}

.gm-profile-hr-private {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #65758A;
  font-size: .57rem;
  font-weight: 700;
}

.gm-profile-hr-private iconify-icon {
  color: #002D5A !important;
}

.gm-profile-compliance-ok {
  border: 1px solid rgba(58,154,53,.11);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.04);
}

.gm-profile-compliance-ok h2 {
  margin: 2px 0;
  color: #011638;
  font-size: 1rem;
  font-weight: 800;
}

.gm-profile-compliance-ok p {
  margin: 0;
  color: #718197;
  font-size: .67rem;
}

.gm-profile-identity-card {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.045);
}

.gm-profile-avatar {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg,#002D5A,#011638);
  border: 5px solid #FFFFFF;
  box-shadow: 0 10px 26px rgba(1,22,56,.14);
  color: #FFFFFF;
  font-size: 1.35rem;
  font-weight: 850;
}

.gm-profile-identity-card h2 {
  margin: 14px 0 3px;
  color: #011638;
  font-size: 1.15rem;
  font-weight: 800;
}

.gm-profile-identity-card p {
  margin: 0;
  color: #718197;
  font-size: .7rem;
}

.gm-profile-employee-chip {
  display: inline-flex;
  margin-top: 12px;
  min-height: 26px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  color: #002D5A;
  background: rgba(0,45,90,.075);
  font-size: .61rem;
  font-weight: 800;
}

.gm-profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.gm-profile-info-grid > div {
  display: grid;
  gap: 3px;
  padding: 12px 13px;
  border-radius: 13px;
  background: #F8FAFC;
  border: 1px solid rgba(0,45,90,.05);
}

.gm-profile-info-grid small {
  color: #8190A1;
  font-size: .56rem;
  font-weight: 750;
}

.gm-profile-info-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #26374B;
  font-size: .68rem;
  font-weight: 800;
}

@media (max-width: 767.98px) {
  .gm-profile-compliance-item {
    grid-template-columns: 36px minmax(0,1fr);
  }

  .gm-profile-compliance-action {
    grid-column: 2;
    justify-content: flex-start;
  }

  .gm-profile-info-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Employee Portal v0.12.0 · Compliance Self-Service
   Strict G&M corporate palette.
   ========================================================= */

.gm-compliance-metrics-row .gm-document-metric strong {
  font-variant-numeric: tabular-nums;
}

.gm-compliance-document-list {
  display: grid;
  gap: 14px;
}

.gm-compliance-document-card {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1,22,56,.045);
  scroll-margin-top: 100px;
}

.gm-compliance-document-card.is-attention {
  border-left: 4px solid #002D5A;
}

.gm-compliance-document-layout {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 230px;
  gap: 15px;
  align-items: start;
}

.gm-compliance-document-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.gm-compliance-document-icon.is-ready {
  color: #3A9A35;
  background: rgba(58,154,53,.10);
}

.gm-compliance-document-icon.is-attention {
  color: #002D5A;
  background: rgba(0,45,90,.08);
}

.gm-compliance-document-icon iconify-icon {
  color: currentColor !important;
  font-size: 1.25rem;
}

.gm-compliance-document-main {
  min-width: 0;
}

.gm-compliance-document-main h3 {
  margin: 6px 0 7px;
  color: #011638;
  font-size: .94rem;
  font-weight: 800;
}

.gm-compliance-expiry-pill,
.gm-submission-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .54rem;
  font-weight: 800;
}

.gm-compliance-expiry-pill-success,
.gm-submission-status-success {
  color: #2C8128;
  background: rgba(58,154,53,.10);
}

.gm-compliance-expiry-pill-warning,
.gm-submission-status-warning {
  color: #765800;
  background: rgba(218,162,0,.12);
}

.gm-compliance-expiry-pill-danger,
.gm-submission-status-danger {
  color: #A03030;
  background: rgba(183,52,52,.09);
}

.gm-compliance-expiry-pill-neutral,
.gm-submission-status-neutral {
  color: #65758A;
  background: rgba(101,117,138,.09);
}

.gm-compliance-document-action {
  min-width: 0;
  display: grid;
  align-content: start;
}

.gm-compliance-document-action > .btn {
  width: 100%;
}

.gm-document-self-service {
  position: relative;
}

.gm-document-self-service > summary {
  width: 100%;
  list-style: none;
  cursor: pointer;
}

.gm-document-self-service > summary::-webkit-details-marker {
  display: none;
}

.gm-document-self-service-form {
  width: min(460px, calc(100vw - 50px));
  position: absolute;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 11px;
  margin-top: 8px;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid rgba(0,45,90,.10);
  background: #FFFFFF;
  box-shadow: 0 20px 46px rgba(1,22,56,.15);
}

.gm-self-service-info {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(0,45,90,.055);
  color: #65758A;
  font-size: .61rem;
  line-height: 1.42;
}

.gm-self-service-info iconify-icon {
  color: #002D5A !important;
  flex: 0 0 auto;
}

.gm-submission-panel {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 13px;
}

.gm-submission-panel-warning {
  background: rgba(218,162,0,.075);
  border: 1px solid rgba(218,162,0,.12);
}

.gm-submission-panel-danger {
  background: rgba(183,52,52,.055);
  border: 1px solid rgba(183,52,52,.10);
}

.gm-submission-panel-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #002D5A;
  background: rgba(255,255,255,.70);
}

.gm-submission-panel-icon iconify-icon {
  color: currentColor !important;
}

.gm-submission-panel > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gm-submission-panel strong {
  color: #26374B;
  font-size: .66rem;
  font-weight: 800;
}

.gm-submission-panel p,
.gm-submission-panel > div:nth-child(2) > span {
  margin: 0;
  color: #718197;
  font-size: .57rem;
  line-height: 1.4;
}

.gm-submission-panel-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.gm-submission-panel-actions form {
  margin: 0;
}

.gm-documents-published-empty {
  border: 1px solid rgba(0,45,90,.07);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(1,22,56,.04);
}

@media (max-width: 1199.98px) {
  .gm-compliance-document-layout {
    grid-template-columns: 46px minmax(0,1fr);
  }

  .gm-compliance-document-action {
    grid-column: 2;
  }

  .gm-document-self-service-form {
    left: 0;
    right: auto;
  }
}

@media (max-width: 767.98px) {
  .gm-compliance-document-layout {
    grid-template-columns: 40px minmax(0,1fr);
  }

  .gm-submission-panel {
    grid-template-columns: 32px minmax(0,1fr);
  }

  .gm-submission-panel-actions {
    grid-column: 2;
    flex-wrap: wrap;
  }

  .gm-document-self-service-form {
    position: static;
    width: 100%;
    box-shadow: none;
    border-radius: 14px;
  }
}


/* =========================================================
   Employee Portal v0.13.0 · Training Self-Service
   ========================================================= */
.gm-training-metric,
.gm-training-card,
.gm-training-completed-card,
.gm-training-readiness{
  border:1px solid rgba(0,45,90,.07);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(1,22,56,.05);
}
.gm-training-metric .card-body{display:grid;gap:8px}
.gm-training-metric-icon{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:12px;background:rgba(0,45,90,.08);color:#002D5A
}
.gm-training-metric-icon iconify-icon{color:#002D5A!important}
.gm-training-metric-icon-green{background:rgba(58,154,53,.10);color:#3A9A35}
.gm-training-metric-icon-green iconify-icon{color:#3A9A35!important}
.gm-training-metric-icon-warning{background:rgba(255,176,32,.12);color:#806000}
.gm-training-metric-icon-warning iconify-icon{color:#806000!important}
.gm-training-metric small{color:#718197;font-size:.67rem;font-weight:700}
.gm-training-metric strong{color:#011638;font-size:1.35rem;font-weight:800}

.gm-training-readiness{border-left:4px solid #002D5A}
.gm-training-readiness.is-ready{border-left-color:#3A9A35}
.gm-training-readiness.is-blocked{border-left-color:#FFB020}
.gm-training-readiness-layout{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  gap:13px;align-items:center
}
.gm-training-readiness-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:13px;background:rgba(0,45,90,.08);color:#002D5A
}
.gm-training-readiness.is-ready .gm-training-readiness-icon{
  background:rgba(58,154,53,.10);color:#3A9A35
}
.gm-training-readiness.is-blocked .gm-training-readiness-icon{
  background:rgba(255,176,32,.12);color:#806000
}
.gm-training-readiness-icon iconify-icon{color:currentColor!important}
.gm-training-readiness h2{margin:2px 0;color:#011638;font-size:1rem;font-weight:800}
.gm-training-readiness p{margin:0;color:#718197;font-size:.66rem}
.gm-training-readiness-badge{
  display:inline-flex;min-height:28px;align-items:center;padding:4px 10px;
  border-radius:999px;color:#002D5A;background:rgba(0,45,90,.08);
  font-size:.6rem;font-weight:800
}
.gm-training-readiness.is-ready .gm-training-readiness-badge{
  color:#2C8128;background:rgba(58,154,53,.10)
}
.gm-training-readiness.is-blocked .gm-training-readiness-badge{
  color:#765800;background:rgba(255,176,32,.13)
}
.gm-training-blocking-list{display:grid;gap:7px}
.gm-training-blocking-list a{
  display:flex;justify-content:space-between;gap:12px;padding:9px 10px;
  border-radius:12px;background:#F8FAFC;border:1px solid rgba(0,45,90,.05);
  text-decoration:none
}
.gm-training-blocking-list strong{color:#26374B;font-size:.63rem}
.gm-training-blocking-list span{color:#765800;font-size:.58rem;font-weight:700}

.gm-training-list,.gm-training-completed-list{display:grid;gap:14px}
.gm-training-card{scroll-margin-top:110px}
.gm-training-card:target{
  border-color:#FFB020;
  box-shadow:0 0 0 3px rgba(255,176,32,.12),0 12px 32px rgba(1,22,56,.08)
}
.gm-training-card-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start
}
.gm-training-code{color:#002D5A;font-size:.58rem;font-weight:800;letter-spacing:.04em}
.gm-training-status,.gm-training-required,.gm-training-blocking{
  display:inline-flex;min-height:22px;align-items:center;padding:3px 8px;
  border-radius:999px;font-size:.53rem;font-weight:800
}
.gm-training-status-primary{color:#002D5A;background:rgba(0,45,90,.08)}
.gm-training-status-success{color:#2C8128;background:rgba(58,154,53,.10)}
.gm-training-status-warning{color:#765800;background:rgba(255,176,32,.13)}
.gm-training-status-danger{color:#A03030;background:rgba(183,52,52,.09)}
.gm-training-status-secondary{color:#66778A;background:rgba(102,119,138,.09)}
.gm-training-required{color:#002D5A;background:#F0F4F8}
.gm-training-blocking{color:#765800;background:rgba(255,176,32,.11)}
.gm-training-card h3{margin:0;color:#011638;font-size:1.05rem;font-weight:800}
.gm-training-description{margin:6px 0 0;color:#718197;font-size:.66rem;line-height:1.48}
.gm-training-chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.gm-training-chip-row>span{
  display:inline-flex;align-items:center;gap:5px;min-height:27px;padding:4px 9px;
  border-radius:999px;background:#F7F9FC;border:1px solid rgba(0,45,90,.05);
  color:#65758A;font-size:.58rem;font-weight:700
}
.gm-training-chip-row iconify-icon{color:#002D5A!important}
.gm-training-due-warning{color:#765800!important;background:rgba(255,176,32,.10)!important}
.gm-training-due-urgent{color:#A03030!important;background:rgba(183,52,52,.08)!important}

.gm-training-submission{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 13px;border-radius:14px;background:#F8FAFC;border:1px solid rgba(0,45,90,.06)
}
.gm-training-submission-pending_review{background:rgba(255,176,32,.055);border-color:rgba(255,176,32,.14)}
.gm-training-submission-approved{background:rgba(58,154,53,.06);border-color:rgba(58,154,53,.12)}
.gm-training-submission-rejected{background:rgba(183,52,52,.05);border-color:rgba(183,52,52,.10)}
.gm-training-submission-head{display:flex;align-items:center;gap:8px}
.gm-training-submission-head>span{
  width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
  background:rgba(0,45,90,.08);color:#002D5A
}
.gm-training-submission-pending_review .gm-training-submission-head>span{background:rgba(255,176,32,.12);color:#806000}
.gm-training-submission-approved .gm-training-submission-head>span{background:rgba(58,154,53,.10);color:#3A9A35}
.gm-training-submission-rejected .gm-training-submission-head>span{background:rgba(183,52,52,.08);color:#A03030}
.gm-training-submission-head iconify-icon{color:currentColor!important}
.gm-training-submission-head>div,.gm-training-submission-body{display:grid;gap:2px;min-width:0}
.gm-training-submission-head small{color:#8795A6;font-size:.51rem;font-weight:800}
.gm-training-submission-head strong{color:#26374B;font-size:.62rem;font-weight:800}
.gm-training-submission-body>span{overflow-wrap:anywhere;color:#26374B;font-size:.64rem;font-weight:750}
.gm-training-submission-body small{color:#8492A3;font-size:.55rem}
.gm-training-submission-body p{margin:4px 0 0;color:#7B4A4A;font-size:.59rem;line-height:1.4}
.gm-training-submission-actions{display:flex;gap:6px;align-items:center}
.gm-training-submission-actions form{margin:0}

.gm-training-evidence{
  overflow:hidden;border:1px solid rgba(0,45,90,.07);
  border-radius:15px;background:#FBFCFE
}
.gm-training-evidence summary{
  display:flex;align-items:center;gap:7px;padding:12px 13px;
  color:#002D5A;font-size:.66rem;font-weight:800;cursor:pointer;list-style:none
}
.gm-training-evidence summary::-webkit-details-marker{display:none}
.gm-training-evidence summary iconify-icon{color:#002D5A!important}
.gm-training-evidence-form{display:grid;gap:8px;padding:0 13px 13px}
.gm-training-admin-verification{
  display:flex;align-items:flex-start;gap:8px;padding:11px 12px;border-radius:13px;
  background:#F7F9FC;border:1px solid rgba(0,45,90,.05);
  color:#65758A;font-size:.61rem
}
.gm-training-admin-verification iconify-icon{color:#002D5A!important;flex:0 0 auto;margin-top:2px}

.gm-training-completed-layout{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center
}
.gm-training-completed-icon{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:rgba(58,154,53,.10);color:#3A9A35
}
.gm-training-completed-icon iconify-icon{color:#3A9A35!important}
.gm-training-completed-card h3{margin:3px 0;color:#011638;font-size:.82rem;font-weight:800}
.gm-training-completed-meta{display:flex;flex-wrap:wrap;gap:8px;color:#718197;font-size:.57rem}
.gm-training-completed-expiry{min-width:120px;display:grid;justify-items:end;gap:2px}
.gm-training-completed-expiry small{color:#8492A3;font-size:.5rem;font-weight:800}
.gm-training-completed-expiry strong{color:#26374B;font-size:.67rem;font-weight:800}
.gm-training-completed-expiry strong.is-warning,.gm-training-completed-expiry>span{color:#765800}
.gm-training-completed-expiry>span{font-size:.54rem;font-weight:700}
.gm-training-no-expiry{color:#718197!important}

@media(max-width:991.98px){
  .gm-training-card-head,.gm-training-submission{grid-template-columns:1fr}
  .gm-training-card-actions .btn,.gm-training-card-actions form{width:100%}
  .gm-training-submission-actions{justify-content:flex-start}
}
@media(max-width:767.98px){
  .gm-training-readiness-layout,.gm-training-completed-layout{grid-template-columns:42px minmax(0,1fr)}
  .gm-training-readiness-badge,.gm-training-completed-expiry{grid-column:2;justify-items:start}
}


/* =========================================================
   Employee Portal v0.14.0 · Time Off Self-Service
   Strict G&M corporate palette.
   ========================================================= */

.gm-timeoff-metric{
  border:1px solid rgba(0,45,90,.07);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(1,22,56,.05);
}
.gm-timeoff-metric .card-body{
  display:grid;
  gap:8px;
}
.gm-timeoff-metric-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(0,45,90,.08);
  color:#002D5A;
}
.gm-timeoff-metric-icon iconify-icon{
  color:currentColor !important;
}
.gm-timeoff-metric-icon-green{
  color:#3A9A35;
  background:rgba(58,154,53,.10);
}
.gm-timeoff-metric-icon-warning{
  color:#806000;
  background:rgba(255,176,32,.12);
}
.gm-timeoff-metric-icon-danger{
  color:#A03030;
  background:rgba(183,52,52,.09);
}
.gm-timeoff-metric small{
  color:#718197;
  font-size:.67rem;
  font-weight:700;
}
.gm-timeoff-metric strong{
  color:#011638;
  font-size:1.35rem;
  font-weight:800;
}

.gm-timeoff-request-card{
  border:1px solid rgba(0,45,90,.07);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(1,22,56,.045);
}
.gm-timeoff-policy-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:11px 12px;
  border-radius:13px;
  background:#F7F9FC;
  border:1px solid rgba(0,45,90,.05);
  color:#65758A;
  font-size:.61rem;
}
.gm-timeoff-policy-note iconify-icon{
  color:#002D5A !important;
  flex:0 0 auto;
}
.gm-timeoff-form{
  display:grid;
  gap:10px;
}

.gm-timeoff-week{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.gm-timeoff-day{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-radius:13px;
  border:1px solid rgba(0,45,90,.05);
  background:#F8FAFC;
}
.gm-timeoff-day > div{
  display:grid;
  gap:1px;
}
.gm-timeoff-day strong{
  color:#26374B;
  font-size:.65rem;
  font-weight:800;
}
.gm-timeoff-day small{
  color:#8492A3;
  font-size:.54rem;
}
.gm-timeoff-day > span{
  color:#65758A;
  font-size:.59rem;
  font-weight:750;
}
.gm-timeoff-day.is-available{
  border-left:3px solid #3A9A35;
}
.gm-timeoff-day.is-available > span{
  color:#2C8128;
}
.gm-timeoff-day.is-unavailable{
  opacity:.78;
}

.gm-timeoff-active-list,
.gm-timeoff-request-list{
  display:grid;
  gap:12px;
}
.gm-timeoff-active-card,
.gm-timeoff-request-item{
  scroll-margin-top:110px;
  border:1px solid rgba(0,45,90,.07);
  border-radius:18px;
  box-shadow:0 9px 28px rgba(1,22,56,.04);
}
.gm-timeoff-request-item:target{
  border-color:#FFB020;
  box-shadow:
    0 0 0 3px rgba(255,176,32,.13),
    0 12px 32px rgba(1,22,56,.08);
}
.gm-timeoff-active-layout{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.gm-timeoff-active-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#3A9A35;
  background:rgba(58,154,53,.10);
}
.gm-timeoff-active-icon iconify-icon{
  color:#3A9A35 !important;
}
.gm-timeoff-type{
  color:#002D5A;
  font-size:.57rem;
  font-weight:800;
  letter-spacing:.03em;
}
.gm-timeoff-active-card h3,
.gm-timeoff-request-item h3{
  margin:3px 0;
  color:#011638;
  font-size:.75rem;
  font-weight:800;
}
.gm-timeoff-active-card p,
.gm-timeoff-request-item p{
  margin:4px 0 0;
  color:#718197;
  font-size:.61rem;
}
.gm-timeoff-approved-badge{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  color:#2C8128;
  background:rgba(58,154,53,.10);
  font-size:.56rem;
  font-weight:800;
}

.gm-timeoff-request-layout{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.gm-timeoff-request-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#002D5A;
  background:rgba(0,45,90,.08);
}
.gm-timeoff-request-icon iconify-icon{
  color:currentColor !important;
}
.gm-timeoff-request-icon-warning{
  color:#806000;
  background:rgba(255,176,32,.12);
}
.gm-timeoff-request-icon-success{
  color:#3A9A35;
  background:rgba(58,154,53,.10);
}
.gm-timeoff-request-icon-danger{
  color:#A03030;
  background:rgba(183,52,52,.09);
}
.gm-timeoff-request-icon-secondary{
  color:#66778A;
  background:rgba(102,119,138,.09);
}
.gm-timeoff-status{
  display:inline-flex;
  min-height:22px;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:.53rem;
  font-weight:800;
}
.gm-timeoff-status-warning{
  color:#765800;
  background:rgba(255,176,32,.13);
}
.gm-timeoff-status-success{
  color:#2C8128;
  background:rgba(58,154,53,.10);
}
.gm-timeoff-status-danger{
  color:#A03030;
  background:rgba(183,52,52,.09);
}
.gm-timeoff-status-secondary{
  color:#66778A;
  background:rgba(102,119,138,.09);
}
.gm-timeoff-hr-note{
  margin-top:7px;
  padding:8px 9px;
  border-radius:10px;
  color:#7B4A4A;
  background:rgba(183,52,52,.05);
  font-size:.58rem;
}
.gm-timeoff-request-actions form{
  margin:0;
}

@media (max-width:991.98px){
  .gm-timeoff-request-layout,
  .gm-timeoff-active-layout{
    grid-template-columns:42px minmax(0,1fr);
  }
  .gm-timeoff-request-actions,
  .gm-timeoff-approved-badge{
    grid-column:2;
    justify-self:start;
  }
}
@media (max-width:600px){
  .gm-timeoff-week{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Employee Portal v0.15.0 · Incident Center
   Strict G&M corporate palette.
   ========================================================= */

.gm-incident-center-metric{
  border:1px solid rgba(0,45,90,.07);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(1,22,56,.05);
}
.gm-incident-center-metric .card-body{
  display:grid;
  gap:8px;
}
.gm-incident-center-metric-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#002D5A;
  background:rgba(0,45,90,.08);
}
.gm-incident-center-metric-icon iconify-icon{
  color:currentColor !important;
}
.gm-incident-center-metric-icon.is-warning{
  color:#806000;
  background:rgba(255,176,32,.12);
}
.gm-incident-center-metric-icon.is-green{
  color:#3A9A35;
  background:rgba(58,154,53,.10);
}
.gm-incident-center-metric-icon.is-danger{
  color:#A03030;
  background:rgba(183,52,52,.09);
}
.gm-incident-center-metric small{
  color:#718197;
  font-size:.67rem;
  font-weight:700;
}
.gm-incident-center-metric strong{
  color:#011638;
  font-size:1.35rem;
  font-weight:800;
}

.gm-incident-report-card{
  border:1px solid rgba(0,45,90,.07);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(1,22,56,.045);
}
.gm-incident-center-form{
  display:grid;
  gap:10px;
}
.gm-incident-no-service{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px 13px;
  border-radius:13px;
  color:#65758A;
  background:#F7F9FC;
  border:1px solid rgba(0,45,90,.05);
}
.gm-incident-no-service iconify-icon{
  color:#002D5A !important;
  flex:0 0 auto;
  margin-top:2px;
}
.gm-incident-no-service > div{
  display:grid;
  gap:2px;
}
.gm-incident-no-service strong{
  color:#26374B;
  font-size:.66rem;
}
.gm-incident-no-service span{
  font-size:.59rem;
}

.gm-incident-safety-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:11px 12px;
  border-radius:13px;
  color:#765800;
  background:rgba(255,176,32,.075);
  border:1px solid rgba(255,176,32,.16);
  font-size:.59rem;
  line-height:1.45;
}
.gm-incident-safety-note iconify-icon{
  color:#806000 !important;
  flex:0 0 auto;
  margin-top:2px;
}

.gm-incident-flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.gm-incident-flow > div{
  display:grid;
  gap:4px;
  padding:12px;
  border-radius:14px;
  background:#F8FAFC;
  border:1px solid rgba(0,45,90,.05);
}
.gm-incident-flow > div > span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#FFFFFF;
  background:#002D5A;
  font-size:.58rem;
  font-weight:850;
}
.gm-incident-flow strong{
  color:#011638;
  font-size:.65rem;
  font-weight:800;
}
.gm-incident-flow small{
  color:#718197;
  font-size:.55rem;
  line-height:1.4;
}

.gm-incident-center-list{
  display:grid;
  gap:13px;
}
.gm-incident-center-item{
  scroll-margin-top:110px;
  border:1px solid rgba(0,45,90,.07);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(1,22,56,.045);
}
.gm-incident-center-item:target{
  border-color:#FFB020;
  box-shadow:
    0 0 0 3px rgba(255,176,32,.13),
    0 12px 32px rgba(1,22,56,.08);
}
.gm-incident-center-layout{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:13px;
  align-items:start;
}
.gm-incident-center-severity{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#002D5A;
  background:rgba(0,45,90,.08);
}
.gm-incident-center-severity iconify-icon{
  color:currentColor !important;
}
.gm-incident-center-severity.is-medium{
  color:#806000;
  background:rgba(255,176,32,.10);
}
.gm-incident-center-severity.is-high,
.gm-incident-center-severity.is-critical{
  color:#A03030;
  background:rgba(183,52,52,.09);
}
.gm-incident-center-severity.is-critical{
  box-shadow:0 0 0 3px rgba(183,52,52,.05);
}
.gm-incident-center-type,
.gm-incident-center-status,
.gm-incident-center-level{
  display:inline-flex;
  min-height:22px;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:.53rem;
  font-weight:800;
}
.gm-incident-center-type{
  color:#002D5A;
  background:rgba(0,45,90,.08);
}
.gm-incident-center-level{
  color:#65758A;
  background:#F0F4F8;
}
.gm-incident-center-status.is-open{
  color:#765800;
  background:rgba(255,176,32,.12);
}
.gm-incident-center-status.is-in_review{
  color:#002D5A;
  background:rgba(0,45,90,.08);
}
.gm-incident-center-status.is-resolved,
.gm-incident-center-status.is-closed{
  color:#2C8128;
  background:rgba(58,154,53,.10);
}
.gm-incident-center-main h3{
  margin:0;
  color:#011638;
  font-size:.9rem;
  font-weight:800;
}
.gm-incident-center-main > p{
  margin:7px 0 0;
  color:#596B80;
  font-size:.64rem;
  line-height:1.5;
}
.gm-incident-center-service{
  display:flex;
  flex-wrap:wrap;
  gap:7px 12px;
  margin-top:12px;
}
.gm-incident-center-service > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#718197;
  font-size:.56rem;
}
.gm-incident-center-service iconify-icon{
  color:#002D5A !important;
}
.gm-incident-resolution{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px 12px;
  border-radius:13px;
  background:rgba(58,154,53,.06);
  border:1px solid rgba(58,154,53,.11);
}
.gm-incident-resolution > span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:10px;
  color:#3A9A35;
  background:rgba(58,154,53,.10);
}
.gm-incident-resolution > span iconify-icon{
  color:#3A9A35 !important;
}
.gm-incident-resolution > div{
  display:grid;
  gap:2px;
}
.gm-incident-resolution small{
  color:#2C8128;
  font-size:.5rem;
  font-weight:800;
}
.gm-incident-resolution p{
  margin:0;
  color:#496349;
  font-size:.6rem;
}
.gm-incident-resolution em{
  color:#718197;
  font-size:.52rem;
  font-style:normal;
}
.gm-incident-center-action .btn{
  white-space:nowrap;
}

@media (max-width:991.98px){
  .gm-incident-center-layout{
    grid-template-columns:42px minmax(0,1fr);
  }
  .gm-incident-center-action{
    grid-column:2;
  }
}
@media (max-width:767.98px){
  .gm-incident-flow{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Employee Portal v0.16.0 · Profile Self-Service
   ========================================================= */

.gm-profile-controlled{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px 12px;
  text-align:left;
  border-radius:13px;
  background:#F7F9FC;
  border:1px solid rgba(0,45,90,.05);
}
.gm-profile-controlled > span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:10px;
  color:#002D5A;
  background:rgba(0,45,90,.08);
}
.gm-profile-controlled iconify-icon{
  color:#002D5A !important;
}
.gm-profile-controlled > div{
  display:grid;
  gap:2px;
}
.gm-profile-controlled strong{
  color:#26374B;
  font-size:.61rem;
}
.gm-profile-controlled small{
  color:#718197;
  font-size:.54rem;
  line-height:1.42;
}

.gm-profile-self-service{
  scroll-margin-top:110px;
  overflow:hidden;
  border:1px solid rgba(0,45,90,.07);
  border-radius:21px;
  box-shadow:0 12px 34px rgba(1,22,56,.05);
}
.gm-profile-self-service-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  background:
    radial-gradient(circle at 86% 18%,rgba(58,154,53,.12),transparent 24%),
    linear-gradient(135deg,#002D5A,#011638);
}
.gm-profile-self-service-head .gm-kicker{
  color:#A6E2A1 !important;
}
.gm-profile-self-service-head h2{
  margin:3px 0 4px;
  color:#FFFFFF;
  font-size:1.08rem;
  font-weight:800;
}
.gm-profile-self-service-head p{
  max-width:760px;
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:.65rem;
  line-height:1.5;
}
.gm-profile-self-service-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:14px;
  color:#FFFFFF;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
.gm-profile-self-service-icon iconify-icon{
  color:#FFFFFF !important;
  font-size:1.3rem;
}

.gm-profile-self-service-form{
  display:grid;
  gap:16px;
}
.gm-profile-form-section{
  display:grid;
  gap:12px;
  padding:15px;
  border-radius:16px;
  background:#FBFCFE;
  border:1px solid rgba(0,45,90,.055);
}
.gm-profile-form-section-title{
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.gm-profile-form-section-title > span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:11px;
  color:#002D5A;
  background:rgba(0,45,90,.08);
}
.gm-profile-form-section-title iconify-icon{
  color:#002D5A !important;
}
.gm-profile-form-section-title > div{
  display:grid;
  gap:1px;
}
.gm-profile-form-section-title strong{
  color:#011638;
  font-size:.68rem;
  font-weight:800;
}
.gm-profile-form-section-title small{
  color:#718197;
  font-size:.55rem;
}

.gm-profile-submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-top:2px;
}
.gm-profile-submit-row > div{
  display:flex;
  align-items:center;
  gap:7px;
  color:#65758A;
  font-size:.58rem;
}
.gm-profile-submit-row > div iconify-icon{
  color:#3A9A35 !important;
}

.gm-profile-pending-request{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:15px;
  border-radius:16px;
  color:#26374B;
  background:rgba(255,176,32,.055);
  border:1px solid rgba(255,176,32,.16);
}
.gm-profile-pending-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#806000;
  background:rgba(255,176,32,.12);
}
.gm-profile-pending-icon iconify-icon{
  color:#806000 !important;
}
.gm-profile-pending-request small{
  color:#806000;
  font-size:.51rem;
  font-weight:850;
}
.gm-profile-pending-request h3{
  margin:2px 0;
  color:#011638;
  font-size:.78rem;
  font-weight:800;
}
.gm-profile-pending-request p{
  margin:0;
  color:#718197;
  font-size:.58rem;
}
.gm-profile-change-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.gm-profile-change-grid > div{
  display:grid;
  gap:4px;
  padding:9px 10px;
  border-radius:11px;
  background:#FFFFFF;
  border:1px solid rgba(0,45,90,.055);
}
.gm-profile-change-grid > div > small{
  color:#718197;
  font-size:.5rem;
}
.gm-profile-change-grid > div > span{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  font-size:.57rem;
}
.gm-profile-change-grid del{
  color:#8B96A4;
}
.gm-profile-change-grid strong{
  color:#011638;
}
.gm-profile-change-grid iconify-icon{
  color:#002D5A !important;
}

.gm-profile-review-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px 12px;
  border-radius:13px;
}
.gm-profile-review-note > span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:10px;
}
.gm-profile-review-note > div{
  display:grid;
  gap:2px;
}
.gm-profile-review-note strong{
  font-size:.62rem;
}
.gm-profile-review-note p{
  margin:0;
  font-size:.56rem;
}
.gm-profile-review-note.is-approved{
  color:#2C8128;
  background:rgba(58,154,53,.06);
  border:1px solid rgba(58,154,53,.11);
}
.gm-profile-review-note.is-approved > span{
  background:rgba(58,154,53,.10);
}
.gm-profile-review-note.is-approved iconify-icon{
  color:#3A9A35 !important;
}
.gm-profile-review-note.is-rejected{
  color:#8D3D3D;
  background:rgba(183,52,52,.05);
  border:1px solid rgba(183,52,52,.10);
}
.gm-profile-review-note.is-rejected > span{
  background:rgba(183,52,52,.08);
}
.gm-profile-review-note.is-rejected iconify-icon{
  color:#A03030 !important;
}

.gm-profile-request-history{
  display:grid;
  gap:8px;
}
.gm-profile-history-item{
  scroll-margin-top:115px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border-radius:13px;
  background:#F8FAFC;
  border:1px solid rgba(0,45,90,.05);
}
.gm-profile-history-item:target{
  border-color:#FFB020;
  box-shadow:0 0 0 3px rgba(255,176,32,.12);
}
.gm-profile-history-item > div{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.gm-profile-history-item strong{
  color:#26374B;
  font-size:.6rem;
}
.gm-profile-history-item small{
  color:#8492A3;
  font-size:.53rem;
}
.gm-profile-history-status{
  display:inline-flex;
  min-height:22px;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  color:#002D5A;
  background:rgba(0,45,90,.08);
  font-size:.51rem;
  font-weight:800;
}
.gm-profile-history-item.is-pending_review .gm-profile-history-status{
  color:#765800;
  background:rgba(255,176,32,.12);
}
.gm-profile-history-item.is-approved .gm-profile-history-status{
  color:#2C8128;
  background:rgba(58,154,53,.10);
}
.gm-profile-history-item.is-rejected .gm-profile-history-status{
  color:#A03030;
  background:rgba(183,52,52,.09);
}
.gm-profile-history-item p{
  margin:0;
  color:#718197;
  font-size:.56rem;
}

@media(max-width:767.98px){
  .gm-profile-self-service-head{
    align-items:center;
  }
  .gm-profile-submit-row{
    align-items:stretch;
    flex-direction:column;
  }
  .gm-profile-submit-row .btn{
    width:100%;
  }
  .gm-profile-pending-request{
    grid-template-columns:40px minmax(0,1fr);
  }
  .gm-profile-pending-request form{
    grid-column:2;
  }
  .gm-profile-change-grid{
    grid-template-columns:1fr;
  }
  .gm-profile-history-item{
    grid-template-columns:1fr;
  }
}

/* ==========================================================
   v0.17.11 · SERVICE DETAIL CHECKLIST FLOW HOTFIX
   ----------------------------------------------------------
   The complete checklist card must NEVER be sticky.
   A dynamic checklist can exceed the viewport height; keeping
   that whole card sticky makes following sibling cards such as
   Incidencias appear to overlap the checklist while scrolling
   or when opening a deep-link anchor (#checklist-item-*).
   ========================================================== */

.gm-checklist-card {
  position: static !important;
  top: auto !important;
  inset: auto !important;
  transform: none !important;
}

/* Keep all right-column service cards in normal document flow. */
.gm-checklist-card + .gm-job-section-card,
#incidents,
#completion {
  position: relative !important;
  top: auto !important;
  clear: both !important;
}

/* Deep links such as #checklist-item-21 must stop below the
   fixed Portal header instead of hiding the selected task. */
.gm-checklist-item[id^="checklist-item-"] {
  scroll-margin-top: 118px !important;
}

/* The main section anchors receive the same safe offset. */
#checklist,
#incidents,
#completion,
#evidence,
#time-clock {
  scroll-margin-top: 118px !important;
}

/* Defensive stacking: cards should never visually paint over
   the next operational block. */
.gm-checklist-card,
#incidents,
#completion {
  z-index: auto !important;
  isolation: isolate;
}

@media (max-width: 1199.98px) {
  .gm-checklist-item[id^="checklist-item-"],
  #checklist,
  #incidents,
  #completion,
  #evidence,
  #time-clock {
    scroll-margin-top: 96px !important;
  }
}



/* ===== Employee Portal R1 · Login icon hardening ===== */
.gm-login-body .gm-modernize-input {
  position: relative;
  display: flex;
  align-items: center;
}
.gm-login-body .gm-modernize-input > .gm-input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #68788D;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.gm-login-body .gm-modernize-input .form-control {
  width: 100%;
  min-height: 52px;
  padding-left: 48px;
}
.gm-login-body .gm-modernize-input:focus-within > .gm-input-icon {
  color: var(--gm-blue);
}
.gm-login-body .gm-login-features .ti,
.gm-login-body .gm-security-note .ti,
.gm-login-body .alert .ti,
.gm-login-body .gm-btn-primary .ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}
.gm-login-body .gm-login-features .ti {
  font-size: 16px;
}
.gm-login-body .alert .ti,
.gm-login-body .gm-btn-primary .ti {
  font-size: 20px;
}
.gm-login-body .gm-security-note .ti {
  color: var(--gm-green);
  font-size: 19px;
}


/* ===== Employee Portal R1 · Authenticated horizontal credential ===== */
.gm-portal-credential-wrap {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,45,90,.08);
}
.gm-portal-credential-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gm-portal-credential-head > div {
  min-width: 0;
}
.gm-portal-credential-head small {
  display: block;
  color: #718096;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .10em;
}
.gm-portal-credential-head strong {
  display: block;
  margin-top: 2px;
  color: #011638;
  font-size: .83rem;
}
.gm-portal-credential-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #2C8128;
  background: rgba(58,154,53,.10);
  font-size: .66rem;
  font-weight: 800;
}
.gm-portal-credential-status .ti {
  font-size: 15px;
  line-height: 1;
}
.gm-portal-badge-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(0,45,90,.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 10%, rgba(58,154,53,.08), transparent 25%),
    linear-gradient(180deg,#f8fafc,#eef2f6);
  overflow: hidden;
}
.gm-portal-badge-horizontal {
  --badge-side: 31.9%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--badge-side) 1fr;
  width: min(100%, 486px);
  aspect-ratio: 85.6 / 53.98;
  overflow: hidden;
  border: 1px solid rgba(1,22,56,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(1,22,56,.17);
  color: #011638;
}
.gm-portal-badge-horizontal > * {
  position: relative;
  z-index: 2;
}
.gm-portal-badge-watermark {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gm-portal-badge-watermark img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  opacity: .032;
}
.gm-portal-badge-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5.7% 4.5%;
  background: linear-gradient(135deg,#0e3575,#303d3f);
}
.gm-portal-badge-logo {
  width: 84%;
  height: 19%;
  object-fit: contain;
}
.gm-portal-badge-photo {
  width: 66%;
  aspect-ratio: .856;
  margin-top: 12%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  border-radius: 13%;
  background: linear-gradient(145deg,#e9edf1,#fff);
  box-shadow: 0 8px 18px rgba(1,22,56,.20);
  color: #002D5A;
  font-size: clamp(1rem, 5vw, 2rem);
  font-weight: 800;
}
.gm-portal-badge-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.gm-portal-badge-copy {
  position: relative;
  min-width: 0;
  padding: 9% 6% 18%;
}
.gm-portal-badge-name {
  display: block;
  max-width: 100%;
  color: #011638;
  font-size: clamp(.76rem, 2.25vw, 1.25rem);
  line-height: 1.03;
  font-weight: 850;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.gm-portal-badge-label,
.gm-portal-badge-file small {
  display: block;
  color: #718096;
  font-size: clamp(.34rem, .82vw, .5rem);
  letter-spacing: .12em;
  font-weight: 800;
}
.gm-portal-badge-label {
  margin-top: 4.5%;
}
.gm-portal-badge-role {
  display: block;
  margin-top: 1%;
  color: #3A9A35;
  font-size: clamp(.52rem, 1.25vw, .82rem);
  line-height: 1.15;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.gm-portal-badge-file {
  margin-top: 4%;
  padding-top: 3.5%;
  border-top: 1px solid #dde3ea;
}
.gm-portal-badge-file b {
  display: block;
  margin-top: 1%;
  color: #002D5A;
  font-size: clamp(.48rem, 1.15vw, .75rem);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.gm-portal-badge-barcode {
  position: absolute;
  left: 6%;
  right: 5%;
  bottom: 9%;
  height: 14%;
  padding: 1% 2% 3%;
  border-radius: 6px;
  background: rgba(255,255,255,.96);
}
.gm-portal-code128-svg {
  display: block;
  width: 100%;
  height: 82%;
}
.gm-portal-badge-barcode em {
  display: block;
  margin-top: 1px;
  color: #011638;
  font-size: clamp(.27rem, .62vw, .4rem);
  line-height: 1;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
}
.gm-portal-badge-green-line {
  position: absolute !important;
  z-index: 5 !important;
  width: 1.2%;
  top: 4.5%;
  bottom: 4.5%;
  left: var(--badge-side);
  border-radius: 4px;
  background: linear-gradient(180deg,#3A9A35,#62bc5c);
}
.gm-portal-badge-foot {
  position: absolute !important;
  z-index: 5 !important;
  right: 4%;
  bottom: 1.4%;
  color: #718096;
  font-size: clamp(.27rem, .58vw, .4rem);
  font-weight: 800;
  letter-spacing: .10em;
  text-align: right;
}
@media (max-width: 575.98px) {
  .gm-portal-credential-head {
    align-items: flex-start;
  }
  .gm-portal-badge-stage {
    padding: 8px;
  }
  .gm-portal-badge-horizontal {
    border-radius: 13px;
  }
}