/* [project]/src/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --app-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--app-font);
  color: #17191c;
  background: #f6f7f9;
  font-size: 11px;
}

* {
  box-sizing: border-box;
}

body {
  color: #17191c;
  background: #f6f7f9;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

input, select, textarea, button {
  font: inherit;
}

input, select, textarea {
  background: #fff;
  border: 1px solid #d7dbe0;
  border-radius: 8px;
  width: 100%;
  padding: 10px 12px;
}

button {
  cursor: pointer;
}

.shell {
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  display: grid;
}

.sidebar {
  color: #fff;
  background: #14171a;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  padding: 20px 14px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.brand {
  flex: none;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 700;
}

.nav {
  gap: 6px;
  display: grid;
}

.nav-grouped {
  scrollbar-width: thin;
  scrollbar-color: #394049 transparent;
  min-height: 0;
  padding-right: 4px;
  overflow: hidden auto;
}

.nav-grouped::-webkit-scrollbar {
  width: 6px;
}

.nav-grouped::-webkit-scrollbar-thumb {
  background: #394049;
  border-radius: 999px;
}

.nav-primary {
  border-bottom: 1px solid #2a2f35;
  gap: 4px;
  padding-bottom: 10px;
  display: grid;
}

.nav a {
  color: #d9dde2;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  display: block;
}

.nav a:hover {
  color: #fff;
  background: #24282d;
}

.nav-groups {
  gap: 5px;
  padding-top: 9px;
  display: grid;
}

.nav-group {
  border-radius: 10px;
}

.nav-group summary {
  cursor: pointer;
  color: #f3f4f6;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 9px;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  display: grid;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary:hover, .nav-group[open] > summary {
  background: #202428;
}

.nav-group-icon {
  color: #aeb6c0;
  background: #2b3036;
  border-radius: 6px;
  place-items: center;
  width: 28px;
  height: 24px;
  display: grid;
}

.nav-group-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.nav-chevron {
  color: #8f98a3;
  text-align: center;
  transition: transform .16s;
}

.nav-group[open] .nav-chevron {
  transform: rotate(180deg);
}

.nav-group-items {
  gap: 2px;
  padding: 4px 0 5px 36px;
  display: grid;
}

.nav-group-items a {
  color: #c9d0d8;
  border-left: 1px solid #30363d;
  border-radius: 0 7px 7px 0;
  padding: 7px 9px;
  font-size: 13px;
}

.nav-group-items a:hover {
  border-left-color: #7c8794;
}

.content {
  padding: 32px;
}

.page-header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.page-header h1 {
  margin: 0;
  font-size: 28px;
}

.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px #00000008;
}

.grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  display: grid;
}

.metric {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
}

.muted {
  color: #6b7280;
}

.button {
  color: #fff;
  background: #17191c;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  font-weight: 700;
  display: inline-flex;
}

.button.secondary {
  color: #17191c;
  background: #fff;
  border: 1px solid #d7dbe0;
}

.table-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #edf0f2;
  padding: 12px 14px;
}

th {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  background: #fafafa;
  font-size: 12px;
}

.form-grid {
  gap: 16px;
  max-width: 720px;
  display: grid;
}

.form-grid label {
  gap: 7px;
  font-weight: 700;
  display: grid;
}

.auth-page {
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  display: grid;
}

.auth-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  width: min(440px, 100%);
  padding: 28px;
}

.auth-card form {
  gap: 14px;
  display: grid;
}

.auth-card h1 {
  margin-top: 0;
}

.actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

@media (max-width: 800px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .content {
    padding: 20px;
  }
}

.stack {
  gap: 12px;
  display: grid;
}

.two-col {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.list {
  gap: 8px;
  margin-top: 16px;
  display: grid;
}

.list-row {
  border-bottom: 1px solid #edf0f2;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.link-button {
  color: #6b7280;
  background: none;
  border: 0;
  padding: 4px;
}

h2 {
  margin-top: 0;
  font-size: 18px;
}

.content > h2 {
  margin-top: 28px;
}

@media (max-width: 640px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.form-inline {
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  display: flex;
}

.form-inline > input {
  width: auto;
  min-width: 220px;
}

.form-inline label {
  gap: 6px;
  display: grid;
}

.checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px !important;
  display: flex !important;
}

.checkbox input {
  width: auto;
}

.section-gap {
  margin-top: 24px;
}

.workspace {
  min-width: 0;
}

.brand {
  align-items: center;
  gap: 10px;
  display: flex;
}

.brand-mark {
  color: #111827;
  background: #fff;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 700;
  display: grid;
}

.brand small {
  color: #8f98a3;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  display: block;
}

.sidebar {
  flex-direction: column;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.sidebar-footer {
  color: #9ca3af;
  border-top: 1px solid #2a2f35;
  flex: none;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  font-size: 12px;
  display: grid;
  overflow: hidden;
}

.sidebar-footer a {
  color: #fff;
  font-weight: 700;
}

.topbar {
  z-index: 20;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #f6f7f9f0;
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding: 12px 28px;
  display: flex;
  position: sticky;
  top: 0;
}

.global-search {
  align-items: center;
  gap: 8px;
  width: min(620px, 65vw);
  display: flex;
}

.global-search input {
  background: #fff;
  border-radius: 12px;
}

.topbar-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.topbar-link {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

.button.compact {
  padding: 8px 10px;
  font-size: 13px;
}

.mobile-nav {
  display: none;
}

.auth-badge {
  letter-spacing: .09em;
  color: #4b5563;
  background: #f3f4f6;
  border-radius: 999px;
  margin-bottom: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

.auth-card label {
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.auth-help {
  color: #6b7280;
  margin-bottom: 0;
  font-size: 12px;
}

.alert {
  border-radius: 10px;
  margin: 12px 0;
  padding: 11px 12px;
  font-size: 14px;
}

.alert.error {
  color: #9f1239;
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.form-card {
  max-width: 760px;
}

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

.result-list {
  gap: 0;
  display: grid;
}

.result-list a {
  border-bottom: 1px solid #edf0f2;
  gap: 3px;
  padding: 11px 0;
  display: grid;
}

.result-list span {
  color: #6b7280;
  font-size: 13px;
}

.result-list a:last-child {
  border-bottom: 0;
}

@media (max-width: 980px) {
  .topbar {
    height: auto;
    padding: 10px 16px;
  }

  .global-search {
    width: 100%;
  }

  .content {
    padding: 20px;
  }
}

@media (max-width: 800px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar, .topbar-link {
    display: none;
  }

  .mobile-nav {
    z-index: 15;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    gap: 6px;
    padding: 8px 14px;
    display: flex;
    position: sticky;
    top: 61px;
    overflow: auto;
  }

  .mobile-nav a {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    flex: none;
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .search-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    display: none;
  }
}

.mobile-app {
  background: #f5f6f8;
  max-width: 640px;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: 82px;
  box-shadow: 0 0 0 1px #eceff2;
}

.m-header {
  z-index: 30;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff5;
  border-bottom: 1px solid #e8ebef;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 10px 16px;
  display: flex;
  position: sticky;
  top: 0;
}

.m-header > div {
  display: grid;
}

.m-header span {
  color: #7b8490;
  font-size: 11px;
}

.m-header > a {
  background: #fff;
  border: 1px solid #e2e5e9;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
}

.m-content {
  padding: 18px 14px 28px;
}

.m-bottom {
  z-index: 40;
  width: min(640px, 100%);
  height: 68px;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fffffff7;
  border-top: 1px solid #e2e5e9;
  grid-template-columns: repeat(5, 1fr);
  display: grid;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.m-bottom a {
  color: #4b5563;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 19px;
  display: flex;
}

.m-bottom span {
  font-size: 10px;
}

.m-hero {
  padding: 8px 4px 20px;
}

.m-hero p, .m-hero h1 {
  margin: 0;
}

.m-hero p {
  color: #777f89;
  font-size: 13px;
}

.m-hero h1 {
  letter-spacing: -.03em;
  margin: 3px 0;
  font-size: 30px;
}

.m-hero span {
  color: #8b929b;
  font-size: 12px;
}

.m-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.m-card {
  background: #fff;
  border: 1px solid #e7eaee;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 8px #11182709;
}

.metric-card {
  flex-direction: column;
  justify-content: space-between;
  min-height: 112px;
  display: flex;
}

.metric-card small {
  color: #7a828c;
}

.metric-card strong {
  font-size: 17px;
  line-height: 1.2;
}

.m-section {
  margin-top: 22px;
}

.m-section h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.m-list {
  background: #fff;
  border: 1px solid #e7eaee;
  border-radius: 16px;
  display: grid;
  overflow: hidden;
}

.m-list > a, .m-list > div {
  border-bottom: 1px solid #eef0f2;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 14px;
  display: flex;
}

.m-list > :last-child {
  border-bottom: 0;
}

.m-page-title {
  margin: 4px 2px 18px;
}

.m-page-title h1 {
  margin: 0;
  font-size: 27px;
}

.m-page-title p {
  color: #747d88;
  margin: 4px 0 0;
  font-size: 13px;
}

.m-center {
  text-align: center;
}

.m-clock {
  letter-spacing: -.05em;
  margin: 10px 0;
  font-size: 44px;
  font-weight: 700;
}

.m-primary, .m-danger {
  color: #fff;
  background: #111827;
  border: 0;
  border-radius: 14px;
  width: 100%;
  padding: 14px 18px;
  font-weight: 700;
}

.m-danger {
  background: #dc2626;
}

.m-form {
  gap: 11px;
  display: grid;
}

.m-form input, .m-form select, .m-form textarea {
  background: #fbfcfd;
  border-radius: 12px;
  padding: 12px;
}

.m-two {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.m-history {
  border-bottom: 1px solid #e8ebee;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  display: flex;
}

.m-history > div {
  gap: 2px;
  display: grid;
}

.m-history span {
  color: #7b8490;
  font-size: 11px;
}

.m-request {
  margin-bottom: 9px;
}

.m-request > div, .m-project {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.m-request p, .m-task p {
  color: #737b86;
  margin: 8px 0 0;
  font-size: 12px;
}

.m-status {
  background: #eef0f2;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
}

.m-status.approved, .m-status.paid {
  color: #166534;
  background: #dcfce7;
}

.m-status.pending {
  color: #92400e;
  background: #fef3c7;
}

.m-status.rejected {
  color: #991b1b;
  background: #fee2e2;
}

.m-project {
  margin-bottom: 9px;
}

.m-project > div {
  display: grid;
}

.m-project span {
  color: #7c8590;
  margin-top: 3px;
  font-size: 10px;
}

.m-project > b {
  font-size: 10px;
}

.m-task {
  margin-bottom: 9px;
}

.m-live {
  color: #16a34a;
  letter-spacing: .07em;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

.payslip {
  margin-bottom: 10px;
}

.payslip-head {
  justify-content: space-between;
  align-items: start;
  margin-bottom: 14px;
  display: flex;
}

.payslip-head > div {
  gap: 4px;
  display: grid;
}

.payslip-head strong {
  font-size: 23px;
}

.payslip-row {
  border-top: 1px solid #eff1f3;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  display: flex;
}

.m-profile-head {
  text-align: center;
  padding: 14px 0 22px;
}

.m-profile-head h1 {
  margin: 10px 0 3px;
  font-size: 24px;
}

.m-profile-head p {
  color: #7a828c;
  margin: 0;
  font-size: 12px;
}

.m-avatar {
  color: #fff;
  background: #111827;
  border-radius: 24px;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: auto;
  font-size: 28px;
  font-weight: 700;
  display: grid;
}

.profile-list {
  margin-bottom: 14px;
}

.profile-list div {
  align-items: start;
  gap: 3px;
  display: grid;
}

.profile-list span {
  color: #7a828c;
  font-size: 11px;
}

.profile-list b {
  font-size: 13px;
}

@media (min-width: 641px) {
  .mobile-app {
    border-radius: 24px;
    min-height: calc(100vh - 24px);
    margin-top: 12px;
    overflow: hidden;
  }

  .m-bottom {
    border-radius: 0 0 24px 24px;
    bottom: 12px;
  }
}

.m-actions {
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.m-actions form {
  flex: 1;
}

.m-actions button, .m-actions a {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  justify-content: center;
  width: 100%;
  padding: 9px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.m-actions input {
  width: 100%;
  margin-bottom: 6px;
}

.m-unread {
  border-left: 4px solid #111827;
}

.m-error {
  color: #b91c1c;
  font-size: 12px;
}

.m-card small + small {
  margin-top: 6px;
  display: block;
}

.m-avatar-img {
  object-fit: cover;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  width: 72px;
  height: 72px;
  margin: auto;
}

.m-check {
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  display: flex;
}

.m-check input {
  width: auto;
}

.qr-stage {
  place-items: center;
  min-height: 360px;
  display: grid;
}

.qr-stage canvas {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.training-list > a {
  gap: 12px;
}

.training-list > a > div:first-child {
  gap: 4px;
  display: grid;
}

.training-list span {
  color: #7b8490;
  font-size: 11px;
}

.training-score-mini {
  justify-items: end;
  gap: 2px;
  display: grid !important;
}

.training-score-mini b {
  font-size: 20px;
}

.training-score-mini small {
  color: #6b7280;
  font-size: 9px;
}

.training-metrics .metric-card {
  min-height: 92px;
}

.training-material {
  margin-bottom: 12px;
  padding: 12px;
}

.training-material-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.training-material-head > div {
  gap: 2px;
  display: grid;
}

.training-material-head small {
  color: #7b8490;
  font-size: 10px;
}

.training-player video {
  background: #0b0b0c;
  border-radius: 12px;
  width: 100%;
}

.training-player iframe {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  height: 520px;
}

.training-progress-line {
  color: #6b7280;
  justify-content: space-between;
  gap: 8px;
  padding-top: 7px;
  font-size: 11px;
  display: flex;
}

.pdf-controls {
  text-align: center;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  display: grid;
}

.pdf-controls button {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 7px;
}

.quiz-question {
  border-top: 1px solid #eef0f2;
  gap: 9px;
  padding: 14px 0;
  display: grid;
}

.quiz-question:first-of-type {
  border-top: 0;
}

.quiz-question label {
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.quiz-question input {
  width: auto;
  margin-top: 3px;
}

.m-note {
  color: #4b5563;
  font-size: 12px;
}

.compliance-good {
  color: #166534;
  font-weight: 700;
}

.compliance-risk {
  color: #991b1b;
  font-weight: 700;
}

@media (max-width: 640px) {
  .training-player iframe {
    height: 64vh;
  }
}

.certificate {
  text-align: center;
  background: #fff;
  border: 8px double #111827;
  border-radius: 8px;
  max-width: 820px;
  margin: 30px auto;
  padding: 54px;
}

.certificate h1 {
  letter-spacing: .12em;
  font-size: 28px;
}

.certificate h2 {
  margin: 18px 0;
  font-size: 30px;
}

.public-verify {
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  max-width: 680px;
  margin: 80px auto;
  padding: 32px;
}

.metric-big {
  margin-top: 10px;
  font-size: 34px;
  display: block;
}

.check {
  align-items: center;
  gap: 8px;
  display: flex !important;
}

.check input {
  width: auto;
}

@media print {
  .certificate {
    box-shadow: none;
    border: 8px double #111827;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    min-height: 90vh;
    margin: 0;
    display: flex;
  }

  .m-header, .m-bottom {
    display: none !important;
  }
}

.print-report {
  background: #fff;
  max-width: 1100px;
  margin: 30px auto;
  padding: 28px;
}

.print-report table {
  border-collapse: collapse;
  width: 100%;
}

.print-report th, .print-report td {
  text-align: left;
  border: 1px solid #d1d5db;
  padding: 7px;
  font-size: 12px;
}

.print-report section {
  page-break-inside: avoid;
  margin: 24px 0;
}

@media print {
  .print-report {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .print-report .muted {
    display: none;
  }
}

.edit-popover {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  min-width: min(420px, 80vw);
  margin-top: 8px;
  padding: 14px;
  box-shadow: 0 12px 30px #00000014;
}

details > summary {
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.notice-success {
  background: #f0fff3;
  border: 1px solid #b7dfbd;
  border-radius: 10px;
  padding: 10px 12px;
}

.notice-error {
  background: #fff4f4;
  border: 1px solid #efb1b1;
  border-radius: 10px;
  padding: 10px 12px;
}

.m-attendance-action {
  width: 100%;
}

.m-attendance-diagnostic {
  text-align: center;
  color: #667085;
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.4;
}

.m-attendance-status {
  text-align: center;
  color: #166534;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
}

.m-error {
  text-align: center;
  white-space: pre-wrap;
  color: #b42318;
  margin: 10px 0 0;
  font-size: 13px;
}

.m-primary:disabled, .m-danger:disabled {
  opacity: .65;
  cursor: wait;
}

.lifecycle-badge {
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.lifecycle-badge.onboarding {
  color: #17653a;
  background: #e8f5ee;
}

.lifecycle-badge.offboarding {
  color: #9b3828;
  background: #fff0ec;
}

.lifecycle-progress {
  background: #edf0f2;
  border-radius: 999px;
  height: 7px;
  margin: 10px 0 14px;
  overflow: hidden;
}

.lifecycle-progress > span {
  background: #20252a;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.lifecycle-card-head {
  align-items: flex-start;
}

.lifecycle-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.lifecycle-cancel {
  position: relative;
}

.lifecycle-cancel > summary {
  cursor: pointer;
  list-style: none;
}

.lifecycle-cancel > summary::-webkit-details-marker {
  display: none;
}

.lifecycle-cancel-form {
  z-index: 30;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: min(420px, 80vw);
  padding: 14px;
  position: absolute;
  top: 40px;
  right: 0;
  box-shadow: 0 16px 40px #00000024;
}

.lifecycle-cancel-form textarea {
  min-height: 90px;
}

@media (max-width: 700px) {
  .lifecycle-head-actions {
    justify-content: flex-start;
  }

  .lifecycle-cancel-form {
    width: auto;
    position: fixed;
    top: 90px;
    left: 14px;
    right: 14px;
  }
}

.hr-expiry-panel {
  background: #fffdf7;
  border-color: #ead9a6;
  margin-bottom: 18px;
}

.hr-expiry-panel .page-header {
  margin-bottom: 10px;
}

.hr-expiry-list {
  gap: 6px;
  display: grid;
}

.hr-expiry-row {
  color: inherit;
  background: #fff;
  border: 1px solid #ece7da;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px 12px;
  display: flex;
}

.hr-expiry-row:hover {
  border-color: #c9b87f;
}

.hr-expiry-row.warning {
  background: #fff9e8;
  border-color: #efd88a;
}

.hr-expiry-row.urgent {
  background: #fff1ef;
  border-color: #efb0a8;
}

.hr-expiry-row span {
  color: #6b7280;
  font-size: 13px;
}

.hr-expiry-date {
  text-align: right;
  white-space: nowrap;
  gap: 2px;
  display: grid;
}

.hr-expiry-date small {
  color: #9b5a22;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .hr-expiry-row {
    align-items: flex-start;
  }

  .hr-expiry-date {
    font-size: 12px;
  }
}

.access-actions {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  display: flex;
}

.access-role-form {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.access-role-form select {
  min-width: 180px;
}

.access-role-form input {
  min-width: 210px;
}

.access-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.access-status.active {
  color: #17653a;
  background: #e9f7ee;
}

.access-status.inactive {
  color: #68707a;
  background: #f2f3f5;
}

.signature-box {
  gap: 10px;
  display: grid;
}

.signature-canvas {
  touch-action: none;
  background: #fff;
  border: 2px dashed #c8ced6;
  border-radius: 12px;
  width: 100%;
  height: 220px;
}

.contract-document pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
  line-height: 1.7;
}

.contract-signature-image {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}

.m-contract-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

.contract-admin-signature {
  border-top: 1px solid #dfe3e7;
  margin-top: 36px;
  padding-top: 18px;
}

@media print {
  .sidebar, .topbar, .mobile-nav, .page-header .form-inline {
    display: none !important;
  }

  .shell, .workspace {
    display: block !important;
  }

  .content {
    padding: 0 !important;
  }

  .contract-print {
    box-shadow: none !important;
    border: 0 !important;
  }
}

.signature-consent {
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
}

.signature-consent input {
  margin-top: 3px;
}

.qr-display-panel {
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 430px;
  padding: 26px 16px;
  display: grid;
}

.qr-canvas {
  background: #fff;
  border-radius: 12px;
  max-width: 100%;
  width: min(360px, 78vw) !important;
  height: auto !important;
}

.qr-canvas-error {
  display: none;
}

.qr-countdown {
  text-align: center;
  margin: 8px 0 0;
  font-size: 16px;
}

.qr-status, .qr-meta {
  text-align: center;
  margin: 0;
}

.qr-error {
  text-align: center;
  background: #fff4f4;
  border: 1px solid #efb1b1;
  border-radius: 12px;
  max-width: 520px;
  padding: 18px;
}

.qr-error p {
  margin: 8px 0 12px;
}

.module-access-legend {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  display: grid;
}

.module-access-legend > div {
  background: #fafbfc;
  border: 1px solid #e3e7eb;
  border-radius: 10px;
  gap: 4px;
  padding: 10px 12px;
  display: grid;
}

.module-access-legend span {
  color: #6b7280;
  font-size: 12px;
}

.module-access-note {
  background: #f6f8fa;
  border-radius: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .module-access-legend {
    grid-template-columns: 1fr;
  }
}

.form-error {
  color: #8f1d1d;
  background: #fff1f1;
  border: 1px solid #f3b4b4;
  border-radius: 10px;
  margin: 10px 0 14px;
  padding: 12px 14px;
}

.form-success {
  color: #21643a;
  background: #effaf3;
  border: 1px solid #b9dfc7;
  border-radius: 10px;
  margin: 10px 0 14px;
  padding: 12px 14px;
}

.mobile-app {
  --u-bg: #f5f6f8;
  --u-surface: #fff;
  --u-text: #17191c;
  --u-muted: #7a828c;
  --u-border: #e7eaee;
  --u-primary: #111827;
  --u-radius: 18px;
  --u-shadow: 0 2px 8px #11182709;
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --u-bg: #fbfaff;
  --u-surface: #ffffffeb;
  --u-text: #292640;
  --u-muted: #7d7895;
  --u-border: #ece7f8;
  --u-primary: #7165e8;
  --u-radius: 22px;
  --u-shadow: 0 10px 32px #6858b414;
  color: var(--u-text);
  background: radial-gradient(circle at 84% 6%, #ddd6feb8, #0000 24%), radial-gradient(circle at 12% 16%, #fce7f3b3, #0000 21%), #fbfaff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
  background: #ffffffd6;
  border-color: #eee9f7;
  box-shadow: 0 8px 28px #5b4b960e;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header strong {
  color: #51498b;
  font-weight: 700;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header span {
  color: #8d86a8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header .actions a {
  color: #6e61d8;
  background: #fff;
  border: 1px solid #ece6fa;
  box-shadow: 0 4px 14px #705ec414;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
  background: none;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-card, .mobile-app[data-theme="YOUTH_PASTEL"] .m-list {
  background: var(--u-surface);
  border-color: var(--u-border);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-list > a, .mobile-app[data-theme="YOUTH_PASTEL"] .m-list > div {
  border-color: #f0ecf8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-list > a:hover {
  background: #faf8ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-primary {
  background: linear-gradient(135deg, #7868ee, #a777eb);
  border-radius: 16px;
  box-shadow: 0 8px 20px #705cdc33;
}

.mobile-app[data-theme="YOUTH_PASTEL"] input, .mobile-app[data-theme="YOUTH_PASTEL"] select, .mobile-app[data-theme="YOUTH_PASTEL"] textarea {
  background: #fffdfa;
  border-color: #e6e0f3;
  border-radius: 14px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-avatar {
  background: linear-gradient(145deg, #7768ea, #f09bc4);
  border-radius: 50%;
  box-shadow: 0 8px 24px #8263d338;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-avatar-img {
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px #8263d329;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
  color: #6f61df;
  background: #f8f5ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom b {
  font-size: 20px;
  line-height: 1;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom span {
  font-weight: 700;
}

.m-section-title {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.m-section-title h2 {
  margin: 0;
}

.m-section-title a {
  color: #7467d8;
  font-size: 12px;
  font-weight: 700;
}

.youth-hero {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.youth-sun {
  display: none;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero {
  min-height: 132px;
  box-shadow: var(--u-shadow);
  background: linear-gradient(125deg, #fffffff0, #eff6ffe6);
  border: 1px solid #eae5f5;
  border-radius: 24px;
  margin: 0 0 6px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero:after {
  content: "";
  opacity: .72;
  background: linear-gradient(130deg, #c7f3d7, #9be6c0);
  border-radius: 50% 50% 0 0;
  width: 210px;
  height: 125px;
  position: absolute;
  bottom: -48px;
  right: -38px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero h1 {
  color: #28243d;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-sun {
  z-index: 2;
  color: #f3bd35;
  background: #fff7ba;
  border-radius: 50%;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 38px;
  display: grid;
  position: relative;
  box-shadow: 0 8px 24px #f4be342e;
}

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

.m-app-tile {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 17px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  display: flex;
}

.m-app-icon {
  background: #f3f4f6;
  border-radius: 14px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-weight: 700;
  display: grid;
}

.m-app-tile > span:last-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.m-app-tile strong {
  font-size: 13px;
}

.m-app-tile small {
  color: #7c8490;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  overflow: hidden;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
  gap: 12px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
  background: #ffffffe0;
  border-color: #ece7f7;
  border-radius: 19px;
  transition: transform .16s, box-shadow .16s;
  box-shadow: 0 6px 19px #55468f0d;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 26px #55468f1a;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-icon {
  border-radius: 15px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:first-child {
  background: linear-gradient(145deg, #fff, #f1fff8);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:nth-child(2) {
  background: linear-gradient(145deg, #fff, #f5f1ff);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:nth-child(3) {
  background: linear-gradient(145deg, #fff, #fff8ed);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:nth-child(4) {
  background: linear-gradient(145deg, #fff, #fff0f6);
}

.theme-option-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.theme-option {
  cursor: pointer;
  background: #fff;
  border: 2px solid #eceef1;
  border-radius: 18px;
  padding: 13px;
  position: relative;
  gap: 5px !important;
  display: grid !important;
}

.theme-option input {
  width: auto;
  position: absolute;
  top: 12px;
  right: 12px;
}

.theme-option:has(input:checked) {
  border-color: #8b7ae6;
  box-shadow: 0 0 0 3px #8b7ae61a;
}

.theme-option small {
  color: #7c8490;
  font-size: 11px;
}

.theme-swatch {
  align-items: center;
  gap: 5px;
  height: 34px;
  display: flex;
}

.theme-swatch i {
  border-radius: 8px;
  width: 24px;
  height: 24px;
  display: block;
}

.classic-preview .theme-swatch i:first-child {
  background: #17191c;
}

.classic-preview .theme-swatch i:nth-child(2) {
  background: #f5f6f8;
}

.classic-preview .theme-swatch i:nth-child(3) {
  background: #fff;
  border: 1px solid #ddd;
}

.youth-preview .theme-swatch i:first-child {
  background: #dcd3ff;
}

.youth-preview .theme-swatch i:nth-child(2) {
  background: #d9f5e6;
}

.youth-preview .theme-swatch i:nth-child(3) {
  background: #ffe1ee;
}

.m-theme-picker {
  margin-bottom: 14px;
}

.m-theme-picker > div > p {
  color: #7a828c;
  margin: 4px 0 14px;
  font-size: 12px;
}

.m-theme-success {
  color: #34734b;
  background: #f0fbf4;
  border: 1px solid #d7efdf;
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 11px 13px;
  font-size: 13px;
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] {
    max-width: 1440px;
    box-shadow: none;
    border-radius: 0;
    grid-template-rows: 76px minmax(calc(100vh - 76px), auto);
    grid-template-columns: 210px minmax(0, 1fr);
    margin: 0 auto;
    padding-bottom: 0;
    display: grid;
    overflow: visible;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
    border-left: 1px solid #f0ecf8;
    grid-area: 1 / 2;
    height: 76px;
    padding: 14px 28px;
    position: sticky;
    top: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
    grid-area: 2 / 2;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px 30px 42px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
    width: 210px;
    height: 100vh;
    box-shadow: none;
    background: #ffffffd1;
    border: 0;
    border-right: 1px solid #eee9f7;
    border-radius: 0;
    flex-direction: column;
    grid-area: 1 / 1 / 3;
    justify-content: flex-start;
    gap: 8px;
    padding: 28px 16px;
    display: flex;
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom:before {
    content: "♥  M-Corp";
    color: #6558c8;
    padding: 6px 12px 22px;
    font-size: 16px;
    font-weight: 700;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a {
    border-radius: 14px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    font-size: 17px;
    display: flex;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom span {
    font-size: 13px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
    min-height: 86px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head {
    text-align: left;
    grid-template-rows: auto auto;
    grid-template-columns: 88px 1fr;
    align-items: center;
    column-gap: 18px;
    display: grid;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head .m-avatar, .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head .m-avatar-img {
    grid-row: 1 / 3;
    margin: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head h1 {
    align-self: end;
    margin: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head p {
    align-self: start;
  }
}

@media (max-width: 560px) {
  .theme-option-grid {
    grid-template-columns: 1fr;
  }

  .m-app-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero {
    padding: 18px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-sun {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --y-purple: #6f63e8;
  --y-purple-2: #9c7bea;
  --y-pink: #f08bb9;
  --y-mint: #73d7ae;
  --y-peach: #f5b36b;
  --y-sky: #79b8ee;
  color: #2d2940;
  background: linear-gradient(145deg, #fbfaff 0%, #f7fbff 42%, #fffaf6 100%);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
  background: #ffffffe0;
  border-color: #eee9f8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-brand-user {
  gap: 1px;
  position: relative;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-brand-user strong {
  color: #5f54bd;
  font-size: 16px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-theme-badge {
  color: #7a69d7;
  letter-spacing: .04em;
  background: #f0ebff;
  border-radius: 999px;
  width: max-content;
  margin-top: 3px;
  padding: 2px 7px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  display: inline-flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
  padding-top: 20px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-dashboard {
  gap: 18px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome {
  background: linear-gradient(125deg, #fff 0%, #f5f1ff 53%, #eefaff 100%);
  border: 1px solid #e9e3f5;
  border-radius: 27px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 170px;
  padding: 24px 26px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 38px #5d4c9a14;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome:before {
  content: "";
  opacity: .75;
  background: #f9e7f2;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  position: absolute;
  top: -82px;
  right: -45px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
  z-index: 2;
  max-width: 68%;
  position: relative;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-kicker {
  color: #a56e19;
  background: #fff4dc;
  border-radius: 999px;
  margin-bottom: 8px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome h1 {
  letter-spacing: -.04em;
  color: #28243d;
  margin: 0 0 8px;
  font-size: clamp(25px, 4vw, 38px);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome p {
  color: #6f6981;
  margin: 0 0 8px;
  font-size: 14px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome small {
  color: #9992aa;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene {
  z-index: 2;
  flex: 0 0 180px;
  width: 180px;
  height: 120px;
  position: relative;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene .youth-sun {
  color: #f5bd32;
  background: #fff3a8;
  border-radius: 50%;
  place-items: center;
  width: 60px;
  height: 60px;
  font-size: 34px;
  display: grid;
  position: absolute;
  top: 4px;
  right: 38px;
  box-shadow: 0 10px 25px #f1ba3233;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud {
  color: #fff;
  text-shadow: 0 5px 15px #67719d17;
  font-size: 40px;
  position: absolute;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud.c1 {
  top: 45px;
  left: 6px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud.c2 {
  font-size: 30px;
  top: 64px;
  right: 0;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hill {
  color: #5fc08c;
  letter-spacing: -10px;
  background: linear-gradient(120deg, #c4f0d2, #8fe0bd);
  border-radius: 55% 55% 0 0;
  height: 45px;
  padding: 8px 14px;
  font-size: 38px;
  position: absolute;
  bottom: -8px;
  left: 10px;
  right: 0;
  overflow: hidden;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel {
  background: #ffffffe6;
  border: 1px solid #ebe6f4;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 30px #57468b0f;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head small, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini small {
  color: #786bd3;
  letter-spacing: .07em;
  font-size: 10px;
  font-weight: 700;
  display: block;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head h2, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini h2 {
  color: #2e2a40;
  margin: 3px 0 0;
  font-size: 18px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head > a {
  color: #7665d9;
  font-size: 12px;
  font-weight: 700;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
  background: #fff;
  border: 1px solid #eee9f7;
  border-radius: 19px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 13px;
  display: flex;
  box-shadow: 0 7px 18px #5947930b;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile > span:last-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile strong {
  color: #312d43;
  font-size: 13px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile small {
  color: #8c859d;
  white-space: normal;
  font-size: 10px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-icon {
  border-radius: 15px;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 22px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .lavender .m-app-icon {
  color: #7665db;
  background: #eee9ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .mint .m-app-icon {
  color: #43b982;
  background: #e1f8ed;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .peach .m-app-icon {
  color: #eb9b47;
  background: #fff0df;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .rose .m-app-icon {
  color: #db6b9d;
  background: #ffe5f0;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .sky .m-app-icon {
  color: #65a5e7;
  background: #e5f2ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .blue .m-app-icon {
  color: #6382df;
  background: #e5ecff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .violet .m-app-icon {
  color: #906adf;
  background: #eee7ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .yellow .m-app-icon {
  color: #dca83e;
  background: #fff5d8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-columns {
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .75fr);
  gap: 18px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-pill {
  color: #d66d9b;
  background: #fff0f5;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-today-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status {
  min-height: 76px;
  color: inherit;
  background: #fff;
  border: 1px solid #f0ecf7;
  border-radius: 17px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status > span {
  color: #7667d8;
  background: #f4f1ff;
  border-radius: 13px;
  place-items: center;
  width: 39px;
  height: 39px;
  font-size: 18px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status.mint > span {
  color: #49b888;
  background: #e5f8ef;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status.peach > span {
  color: #df9546;
  background: #fff0df;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status.rose > span {
  color: #d96f9c;
  background: #ffe7f1;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status div {
  gap: 3px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status small {
  color: #8e879d;
  font-size: 10px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status strong {
  color: #343044;
  font-size: 12px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini {
  background: linear-gradient(145deg, #fff, #f5f0ff);
  align-items: center;
  gap: 15px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-avatar {
  color: #fff;
  background: linear-gradient(145deg, #8a78ef, #ef99bf);
  border: 5px solid #fff;
  border-radius: 50%;
  flex: 0 0 68px;
  place-items: center;
  width: 68px;
  height: 68px;
  font-size: 26px;
  font-weight: 700;
  display: grid;
  box-shadow: 0 9px 24px #755bc72e;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini p {
  color: #81798f;
  margin: 5px 0 9px;
  font-size: 11px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini a {
  color: #7463d8;
  font-size: 11px;
  font-weight: 700;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid > a {
  background: #fff;
  border: 1px solid #eee9f7;
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: 20px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid span {
  gap: 2px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid b {
  color: #342f46;
  font-size: 12px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid small {
  color: #938b9f;
  font-size: 9px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
  background: #fffffff0;
  border-color: #ece7f7;
  box-shadow: 0 -8px 28px #5b4a9714;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a {
  color: #817998;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom b {
  color: #6f61dc;
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] {
    max-width: 1500px;
    box-shadow: none;
    grid-template-rows: 78px minmax(calc(100vh - 78px), auto);
    grid-template-columns: 220px minmax(0, 1fr);
    margin: 0 auto;
    padding-bottom: 0;
    display: grid;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
    border-left: 1px solid #f0ecf8;
    grid-area: 1 / 2;
    height: 78px;
    padding: 14px 30px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
    grid-area: 2 / 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 30px 48px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
    width: 220px;
    height: 100vh;
    box-shadow: none;
    background: #ffffffdb;
    border: 0;
    border-right: 1px solid #eee9f7;
    border-radius: 0;
    flex-direction: column;
    grid-area: 1 / 1 / 3;
    justify-content: flex-start;
    gap: 7px;
    padding: 28px 15px;
    display: flex;
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom:before {
    content: "♥  M-Corp";
    color: #6558c8;
    padding: 5px 12px 22px;
    font-size: 16px;
    font-weight: 700;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a {
    border-radius: 14px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    font-size: 17px;
    display: flex;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
    color: #6658ca;
    background: #f3efff;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom span {
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome {
    min-height: 145px;
    padding: 20px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
    max-width: 78%;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene {
    flex-basis: 90px;
    width: 90px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene .youth-sun {
    width: 48px;
    height: 48px;
    font-size: 27px;
    right: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-hill {
    display: none;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-columns {
    grid-template-columns: 1fr;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini {
    display: none;
  }
}

@media (max-width: 440px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-today-grid, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
    gap: 9px;
    min-height: 74px;
    padding: 10px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile strong {
    font-size: 11px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile small {
    font-size: 8px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid > a {
    padding: 11px;
    font-size: 17px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid b {
    font-size: 10px;
  }
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --y-primary: #7566df;
  --y-primary-2: #a478e8;
  --y-soft: #f0ecff;
  --y-soft-2: #fbf9ff;
  --y-ink: #51498b;
  --y-ring: #7566df2e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="PINK"] {
  --y-primary: #df6f9f;
  --y-primary-2: #f39aba;
  --y-soft: #ffe8f1;
  --y-soft-2: #fff8fb;
  --y-ink: #a64b73;
  --y-ring: #df6f9f2e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="MINT"] {
  --y-primary: #42b985;
  --y-primary-2: #79d6ae;
  --y-soft: #e4f9ef;
  --y-soft-2: #f7fefa;
  --y-ink: #2d8a64;
  --y-ring: #42b9852e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="SKY"] {
  --y-primary: #5c9fe6;
  --y-primary-2: #8bc5f2;
  --y-soft: #e7f3ff;
  --y-soft-2: #f8fcff;
  --y-ink: #3978bd;
  --y-ring: #5c9fe62e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="PEACH"] {
  --y-primary: #e9994b;
  --y-primary-2: #f5bf82;
  --y-soft: #fff0df;
  --y-soft-2: #fffaf4;
  --y-ink: #b56f2f;
  --y-ring: #e9994b2e;
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --u-primary: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header strong, .mobile-app[data-theme="YOUTH_PASTEL"] .m-section-title a, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head small, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head > a, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini small, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini a, .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom b {
  color: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header .actions a {
  color: var(--y-primary);
  border-color: color-mix(in srgb,var(--y-primary) 18%,white);
  background: var(--y-soft-2);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-primary {
  background: linear-gradient(135deg,var(--y-primary),var(--y-primary-2));
  box-shadow: 0 8px 20px var(--y-ring);
  color: #fff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-theme-badge {
  background: var(--y-soft);
  color: var(--y-ink);
  border-color: color-mix(in srgb,var(--y-primary) 20%,white);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel {
  border-color: color-mix(in srgb,var(--y-primary) 13%,#eee);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head h2, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini h2, .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile strong, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-status strong, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid b {
  color: var(--y-ink);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-avatar, .mobile-app[data-theme="YOUTH_PASTEL"] .m-avatar {
  background: linear-gradient(145deg,var(--y-primary),var(--y-primary-2));
  box-shadow: 0 9px 24px var(--y-ring);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status > span {
  background: var(--y-soft);
  color: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] input:focus, .mobile-app[data-theme="YOUTH_PASTEL"] select:focus, .mobile-app[data-theme="YOUTH_PASTEL"] textarea:focus {
  outline: 2px solid var(--y-ring);
  border-color: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
  background: var(--y-soft);
  color: var(--y-primary);
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom:before {
    color: var(--y-primary);
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
    background: var(--y-soft);
    color: var(--y-primary);
  }
}

.accent-picker {
  border-top: 1px solid #eceef1;
  margin-top: 16px;
  padding-top: 14px;
}

.accent-picker > strong {
  font-size: 13px;
}

.accent-picker > p {
  color: #7c8490;
  margin: 4px 0 10px;
  font-size: 11px;
}

.accent-option-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.accent-option {
  cursor: pointer;
  background: #fff;
  border: 2px solid #eceef1;
  border-radius: 15px;
  justify-items: center;
  padding: 10px 6px;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  gap: 6px !important;
  display: grid !important;
}

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

.accent-option i {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: block;
  box-shadow: inset 0 0 0 4px #ffffffa6;
}

.accent-option:has(input:checked) {
  border-color: #a99de9;
  box-shadow: 0 0 0 3px #8b7ae617;
}

.accent-option.lavender i {
  background: #7566df;
}

.accent-option.pink i {
  background: #df6f9f;
}

.accent-option.mint i {
  background: #42b985;
}

.accent-option.sky i {
  background: #5c9fe6;
}

.accent-option.peach i {
  background: #e9994b;
}

@media (max-width: 480px) {
  .accent-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.accent-button-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  display: grid;
}

.accent-button-grid form {
  margin: 0;
}

.accent-button {
  color: #555;
  cursor: pointer;
  width: 100%;
  min-height: 74px;
  font: inherit;
  background: #fff;
  border: 2px solid #eceef1;
  border-radius: 16px;
  place-items: center;
  gap: 5px;
  padding: 9px 5px;
  display: grid;
  position: relative;
}

.accent-button i {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: block;
  box-shadow: inset 0 0 0 4px #ffffffad;
}

.accent-button span {
  font-size: 10px;
  font-weight: 700;
}

.accent-button b {
  font-size: 11px;
  position: absolute;
  top: 5px;
  right: 7px;
}

.accent-button.lavender i {
  background: #7566df;
}

.accent-button.pink i {
  background: #df6f9f;
}

.accent-button.mint i {
  background: #42b985;
}

.accent-button.sky i {
  background: #5c9fe6;
}

.accent-button.peach i {
  background: #e9994b;
}

.accent-button.lavender.active {
  color: #51498b;
  background: #f7f5ff;
  border-color: #7566df;
}

.accent-button.pink.active {
  color: #a64b73;
  background: #fff7fa;
  border-color: #df6f9f;
}

.accent-button.mint.active {
  color: #2d8a64;
  background: #f3fcf8;
  border-color: #42b985;
}

.accent-button.sky.active {
  color: #3978bd;
  background: #f4faff;
  border-color: #5c9fe6;
}

.accent-button.peach.active {
  color: #b56f2f;
  background: #fff8f1;
  border-color: #e9994b;
}

@media (max-width: 480px) {
  .accent-button-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome {
  border-color: color-mix(in srgb,var(--y-primary) 16%,white);
  background: linear-gradient(125deg,#fff 0%,var(--y-soft-2) 54%,color-mix(in srgb,var(--y-soft) 55%,#eefaff) 100%);
  box-shadow: 0 16px 38px var(--y-ring);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome:before {
  background: color-mix(in srgb,var(--y-primary-2) 18%,#fff);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome h1 {
  color: color-mix(in srgb,var(--y-ink) 82%,#242132);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-kicker, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-pill {
  background: var(--y-soft);
  color: var(--y-ink);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini {
  background: linear-gradient(145deg,#fff,var(--y-soft-2));
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
  border-color: color-mix(in srgb,var(--y-primary) 13%,white);
  box-shadow: 0 -8px 28px var(--y-ring);
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
    border-right-color: color-mix(in srgb,var(--y-primary) 13%,white);
    background: color-mix(in srgb,var(--y-soft-2) 72%,white);
  }
}

.m-header-logout {
  margin: 0;
}

.m-header-logout button {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text, #111827);
  min-width: 36px;
  height: 36px;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  padding: 0 10px;
  font-weight: 700;
}

.m-header-logout button:hover {
  filter: brightness(.98);
}

.m-logout-card {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.m-logout-card h2 {
  margin: 0 0 4px;
}

.m-logout-card p {
  color: var(--muted, #6b7280);
  margin: 0;
  font-size: 13px;
}

.m-logout-button {
  color: #b91c1c;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ef4444;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
}

.m-logout-button:hover {
  background: #fff1f2;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header-logout button {
  border-color: var(--youth-border);
  background: var(--youth-soft);
  color: var(--youth-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-logout-card {
  border-color: color-mix(in srgb,var(--youth-primary) 22%,#fff);
  background: linear-gradient(135deg,#fff 0%,var(--youth-soft) 100%);
}

@media (max-width: 560px) {
  .m-logout-card {
    flex-direction: column;
    align-items: stretch;
  }

  .m-logout-button {
    width: 100%;
  }
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  display: grid;
}

.stats-grid > div {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  display: flex;
}

@media (max-width: 760px) {
  .three-col {
    grid-template-columns: 1fr;
  }
}

.m-header .actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.m-approval-badge, .m-notification-badge {
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  height: 36px;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.m-approval-badge span, .m-notification-badge span {
  color: #fff;
  text-align: center;
  background: #dc2626;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  position: absolute;
  top: -7px;
  right: -5px;
}

.m-approval-alert {
  margin: 10px 16px 0;
}

.m-approval-alert a {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13px;
  text-decoration: none;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-approval-alert a, .mobile-app[data-theme="YOUTH_PASTEL"] .m-approval-badge {
  background: var(--youth-soft, #f5f3ff);
  border-color: var(--youth-border, #ddd6fe);
  color: var(--youth-primary, #7c3aed);
}

.m-actions.m-approval-actions {
  align-items: stretch;
  gap: 12px;
}

.m-actions.m-approval-actions form {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.m-actions.m-approval-actions .m-primary {
  background: var(--youth-accent, #111827) !important;
  color: #fff !important;
  border-color: #0000 !important;
}

.m-actions.m-approval-actions .m-danger:hover {
  background: #b91c1c !important;
}

.m-reject-form input {
  min-height: 42px;
}

.m-email-state {
  color: #64748b;
  margin-top: 9px;
  display: block;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-email-state {
  color: var(--youth-accent-strong, #7c3aed);
}

@media (max-width: 640px) {
  .m-actions.m-approval-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .m-actions.m-approval-actions form {
    width: 100%;
  }
}

.admin-theme-picker {
  max-width: 980px;
}

.admin-theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.admin-theme-option {
  cursor: pointer;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
  gap: 9px;
  padding: 18px;
  transition: all .18s;
  display: grid;
  position: relative;
}

.admin-theme-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px #0f172a14;
}

.admin-theme-option:has(input:checked) {
  border-color: #22b8b5;
  box-shadow: 0 0 0 4px #22b8b51a;
}

.admin-theme-option > input {
  width: auto;
  position: absolute;
  top: 16px;
  right: 16px;
}

.admin-theme-option strong {
  font-size: 18px;
}

.admin-theme-option small {
  color: #6b7280;
  line-height: 1.5;
}

.admin-theme-preview {
  background: #f7f8fa;
  border: 1px solid #dfe4e8;
  border-radius: 15px;
  grid-template-columns: 72px 1fr;
  height: 190px;
  display: grid;
  overflow: hidden;
}

.admin-theme-preview > i {
  display: block;
}

.admin-theme-preview > span {
  align-content: start;
  gap: 10px;
  padding: 22px 18px;
  display: grid;
}

.admin-theme-preview b {
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 7px;
  height: 24px;
  display: block;
}

.classic-admin-preview > i {
  background: #17191c;
}

.classic-admin-preview b:first-child {
  background: #f3f4f6;
  height: 34px;
}

.modern-admin-preview {
  background: #f6fbfb;
}

.modern-admin-preview > i {
  background: #fff;
  border-right: 1px solid #dce9e8;
}

.modern-admin-preview b {
  border-color: #d8e7e6;
  box-shadow: 0 3px 10px #127d7a0d;
}

.modern-admin-preview b:first-child {
  background: #dff5f3;
  border-color: #c8ece9;
  height: 34px;
}

.admin-theme-actions {
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  display: flex;
}

.admin-theme-actions-inline-note {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .admin-theme-grid {
    grid-template-columns: 1fr;
  }

  .admin-theme-preview {
    height: 145px;
  }
}

.shell[data-admin-theme="MODERN"] {
  --a-bg: #f5f8f9;
  --a-surface: #fff;
  --a-line: #dfe8ea;
  --a-soft: #e7f6f5;
  --a-soft2: #f4fbfa;
  --a-primary: #25b7b3;
  --a-primary-dark: #128b88;
  --a-ink: #152126;
  --a-muted: #708087;
  background: var(--a-bg);
  color: var(--a-ink);
  grid-template-columns: 260px minmax(0, 1fr);
}

.shell[data-admin-theme="MODERN"] .sidebar {
  color: var(--a-ink);
  border-right: 1px solid var(--a-line);
  background: #fff;
  padding: 22px 16px;
  box-shadow: 8px 0 28px #1f56580a;
}

.shell[data-admin-theme="MODERN"] .brand {
  color: #1b3135;
  align-items: center;
  gap: 11px;
  margin: 0 8px 22px;
  display: flex;
}

.shell[data-admin-theme="MODERN"] .brand > div {
  gap: 2px;
  display: grid;
}

.shell[data-admin-theme="MODERN"] .brand small {
  color: #839297;
  font-size: 10px;
  font-weight: 700;
  display: block;
}

.shell[data-admin-theme="MODERN"] .brand-mark {
  color: #fff;
  background: linear-gradient(145deg, #42c9c5, #18a7a4);
  border-radius: 13px;
  box-shadow: 0 7px 18px #25b7b33d;
}

.shell[data-admin-theme="MODERN"] .nav-grouped {
  scrollbar-color: #c7dddc transparent;
}

.shell[data-admin-theme="MODERN"] .nav-primary {
  border-bottom-color: #e8eeee;
}

.shell[data-admin-theme="MODERN"] .nav a {
  color: #314146;
  border: 1px solid #0000;
  font-weight: 700;
}

.shell[data-admin-theme="MODERN"] .nav a:hover {
  background: var(--a-soft2);
  color: var(--a-primary-dark);
  border-color: #d8efed;
}

.shell[data-admin-theme="MODERN"] .nav-group summary {
  color: #26383d;
  border: 1px solid #0000;
}

.shell[data-admin-theme="MODERN"] .nav-group summary:hover, .shell[data-admin-theme="MODERN"] .nav-group[open] > summary {
  background: var(--a-soft);
  color: #166d6b;
  border-color: #d6efed;
}

.shell[data-admin-theme="MODERN"] .nav-group-icon {
  color: #229995;
  background: #eef8f7;
  border: 1px solid #d8efed;
}

.shell[data-admin-theme="MODERN"] .nav-chevron {
  color: #7b9293;
}

.shell[data-admin-theme="MODERN"] .nav-group-items {
  padding-left: 38px;
}

.shell[data-admin-theme="MODERN"] .nav-group-items a {
  color: #53666b;
  border-left-color: #dce8e8;
}

.shell[data-admin-theme="MODERN"] .nav-group-items a:hover {
  border-left-color: var(--a-primary);
  color: #137b78;
  background: #f4fbfa;
}

.shell[data-admin-theme="MODERN"] .sidebar-footer {
  color: #708087;
  border-top-color: #e7eeee;
}

.shell[data-admin-theme="MODERN"] .sidebar-footer a {
  color: #31585b;
}

.shell[data-admin-theme="MODERN"] .workspace {
  background: linear-gradient(#fbfdfd 0, #f4f8f9 210px);
}

.shell[data-admin-theme="MODERN"] .topbar {
  border-bottom: 1px solid var(--a-line);
  background: #ffffffeb;
  height: 76px;
  padding: 14px 30px;
  box-shadow: 0 4px 18px #2d5c5e09;
}

.shell[data-admin-theme="MODERN"] .global-search {
  background: #fff;
  border: 1px solid #d9e5e6;
  border-radius: 12px;
  max-width: 600px;
  box-shadow: 0 3px 12px #22636509;
}

.shell[data-admin-theme="MODERN"] .global-search:focus-within {
  border-color: #8bd8d5;
  box-shadow: 0 0 0 3px #25b7b31a;
}

.shell[data-admin-theme="MODERN"] .global-search input {
  background: none;
}

.shell[data-admin-theme="MODERN"] .topbar-link {
  color: #486267;
  border-radius: 10px;
  padding: 8px 10px;
}

.shell[data-admin-theme="MODERN"] .topbar-link:hover {
  background: var(--a-soft);
  color: var(--a-primary-dark);
}

.shell[data-admin-theme="MODERN"] .content {
  padding: 30px 34px 46px;
}

.shell[data-admin-theme="MODERN"] .page-header {
  margin-bottom: 22px;
}

.shell[data-admin-theme="MODERN"] .page-header h1 {
  color: #183137;
  font-size: 27px;
}

.shell[data-admin-theme="MODERN"] .muted {
  color: var(--a-muted);
}

.shell[data-admin-theme="MODERN"] .card {
  border-color: var(--a-line);
  border-radius: 16px;
  box-shadow: 0 6px 22px #1f53550b;
}

.shell[data-admin-theme="MODERN"] .admin-module-card {
  transition: all .18s;
}

.shell[data-admin-theme="MODERN"] .admin-module-card:hover {
  border-color: #bfe3e1;
  transform: translateY(-2px);
  box-shadow: 0 13px 30px #1f666717;
}

.shell[data-admin-theme="MODERN"] .admin-module-card span {
  color: var(--a-primary-dark);
  font-weight: 700;
}

.shell[data-admin-theme="MODERN"] .table-wrap {
  border-color: var(--a-line);
  border-radius: 15px;
  box-shadow: 0 5px 18px #1f535509;
}

.shell[data-admin-theme="MODERN"] th {
  color: #607176;
  background: #f2f7f7;
  border-bottom-color: #dfe8e9;
}

.shell[data-admin-theme="MODERN"] td {
  border-bottom-color: #eaf0f0;
}

.shell[data-admin-theme="MODERN"] tbody tr:hover {
  background: #f8fcfc;
}

.shell[data-admin-theme="MODERN"] input, .shell[data-admin-theme="MODERN"] select, .shell[data-admin-theme="MODERN"] textarea {
  background: #fff;
  border-color: #d5e1e2;
  border-radius: 10px;
}

.shell[data-admin-theme="MODERN"] input:focus, .shell[data-admin-theme="MODERN"] select:focus, .shell[data-admin-theme="MODERN"] textarea:focus {
  border-color: #70cfcc;
  outline: none;
  box-shadow: 0 0 0 3px #25b7b31a;
}

.shell[data-admin-theme="MODERN"] .button {
  background: linear-gradient(135deg, #25b7b3, #179c99);
  border-radius: 10px;
  box-shadow: 0 6px 15px #25b7b32e;
}

.shell[data-admin-theme="MODERN"] .button:hover {
  filter: brightness(.98);
}

.shell[data-admin-theme="MODERN"] .button.secondary {
  color: #27585a;
  box-shadow: none;
  background: #fff;
  border-color: #cfe0e1;
}

.shell[data-admin-theme="MODERN"] .button.secondary:hover {
  background: #f1faf9;
  border-color: #a9d8d6;
}

.shell[data-admin-theme="MODERN"] .notice-success {
  color: #216e5c;
  background: #effbf8;
  border-color: #bce8dc;
}

.shell[data-admin-theme="MODERN"] .notice-error {
  background: #fff5f4;
}

.shell[data-admin-theme="MODERN"] .metric {
  color: #174f50;
}

.shell[data-admin-theme="MODERN"] details.edit-popover, .shell[data-admin-theme="MODERN"] .edit-popover {
  border-color: var(--a-line);
  border-radius: 14px;
  box-shadow: 0 15px 36px #184e501a;
}

@media (max-width: 800px) {
  .shell[data-admin-theme="MODERN"] {
    grid-template-columns: 1fr;
  }

  .shell[data-admin-theme="MODERN"] .content {
    padding: 20px;
  }

  .shell[data-admin-theme="MODERN"] .mobile-nav {
    background: #fff;
    border-bottom-color: #dce8e8;
  }

  .shell[data-admin-theme="MODERN"] .mobile-nav a {
    background: #f8fcfc;
    border-color: #d4e5e5;
  }
}

.money-input-wrap {
  width: 100%;
  display: block;
  position: relative;
}

.money-input-wrap > input[type="text"] {
  width: 100%;
  padding-right: 46px;
}

.money-input-currency {
  opacity: .55;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
}

.project-members-section {
  overflow: hidden;
}

.project-members-title {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  display: flex;
}

.project-members-title h2 {
  margin-bottom: 4px;
}

.project-members-title p {
  margin: 0;
}

.project-member-list {
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.project-member-head, .project-member-row {
  grid-template-columns: minmax(190px, .8fr) minmax(480px, 2fr) minmax(210px, .9fr) minmax(120px, .55fr) minmax(170px, .75fr) minmax(150px, .65fr);
  align-items: stretch;
  display: grid;
}

.project-member-list.without-cost .project-member-head, .project-member-list.without-cost .project-member-row {
  grid-template-columns: minmax(190px, .85fr) minmax(520px, 2.2fr) minmax(220px, 1fr) minmax(130px, .6fr) minmax(150px, .7fr);
}

.project-member-head {
  border-bottom: 1px solid var(--border, #e5e7eb);
  letter-spacing: .035em;
  text-transform: uppercase;
  color: #64748b;
  background: #f7f9fa;
  font-size: 11px;
  font-weight: 700;
}

.project-member-head > span {
  padding: 13px 16px;
}

.project-member-row {
  border-bottom: 1px solid #edf1f2;
  min-height: 220px;
}

.project-member-row:last-child {
  border-bottom: 0;
}

.project-member-row > div {
  border-right: 1px solid #edf1f2;
  padding: 18px 16px;
}

.project-member-row > div:last-child {
  border-right: 0;
}

.project-member-person {
  align-items: center;
  gap: 13px;
  display: flex;
}

.project-member-person > div:last-child {
  gap: 4px;
  display: grid;
}

.project-member-person small {
  display: block;
}

.project-member-avatar {
  color: #1d4ed8;
  letter-spacing: .02em;
  background: #e7efff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  display: grid;
}

.project-member-editor {
  align-items: center;
  display: flex;
}

.project-member-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 14px;
  width: 100%;
  display: grid;
}

.project-member-form label {
  color: #64748b;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.project-member-form input, .project-member-form select {
  min-height: 42px;
}

.project-member-form .project-member-cost-input {
  grid-column: 1 / -1;
}

.project-member-readonly {
  align-content: center;
  gap: 7px;
  display: grid;
}

.project-member-summary {
  align-content: center;
  gap: 8px;
  display: grid;
}

.project-member-summary small {
  color: #64748b;
}

.project-member-summary strong {
  font-size: 14px;
  line-height: 1.45;
}

.project-member-actions {
  align-content: center;
  gap: 10px;
  display: grid;
}

.project-member-actions form {
  margin: 0;
}

.project-member-actions .button {
  justify-content: center;
  width: 100%;
}

.button.danger-outline {
  color: #c2412d;
  box-shadow: none;
  background: #fff;
  border: 1px solid #f08a72;
}

.button.danger-outline:hover {
  background: #fff7f5;
  border-color: #ea6548;
}

.empty-state {
  text-align: center;
  color: #64748b;
  background: #fafcfc;
  border: 1px dashed #d7e0e2;
  border-radius: 14px;
  padding: 30px;
}

.shell[data-admin-theme="MODERN"] .project-member-list {
  border-color: #dbe7e8;
  box-shadow: 0 7px 22px #1f535509;
}

.shell[data-admin-theme="MODERN"] .project-member-head {
  color: #5c7175;
  background: #f2f7f7;
}

.shell[data-admin-theme="MODERN"] .project-member-row > div {
  border-right-color: #e6eeee;
}

.shell[data-admin-theme="MODERN"] .project-member-row {
  border-bottom-color: #e8efef;
}

.shell[data-admin-theme="MODERN"] .project-member-avatar {
  color: #147d7a;
  background: #ddf5f3;
}

.shell[data-admin-theme="MODERN"] .button.danger-outline {
  color: #c44b36;
  background: #fff;
  border-color: #f0a08e;
}

.shell[data-admin-theme="MODERN"] .button.danger-outline:hover {
  background: #fff7f4;
}

@media (max-width: 1250px) {
  .project-member-head {
    display: none;
  }

  .project-member-list, .project-member-list.with-cost, .project-member-list.without-cost {
    background: none;
    border: 0;
    gap: 14px;
    display: grid;
    overflow: visible;
  }

  .project-member-row, .project-member-list.with-cost .project-member-row, .project-member-list.without-cost .project-member-row {
    border: 1px solid var(--border, #e5e7eb);
    background: #fff;
    border-radius: 14px;
    grid-template-columns: minmax(180px, .75fr) minmax(420px, 1.75fr) repeat(2, minmax(130px, .55fr));
    overflow: hidden;
  }

  .project-member-row > div {
    border-bottom: 1px solid #edf1f2;
  }

  .project-member-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    display: flex;
  }

  .project-member-actions .button {
    width: auto;
    min-width: 145px;
  }

  .project-member-list.with-cost .project-member-summary:nth-last-of-type(2), .project-member-row > .project-member-summary:nth-of-type(5) {
    grid-column: auto;
  }
}

@media (max-width: 850px) {
  .project-members-title {
    align-items: center;
  }

  .project-member-row, .project-member-list.with-cost .project-member-row, .project-member-list.without-cost .project-member-row {
    display: block;
  }

  .project-member-row > div {
    padding: 14px 16px;
    border-right: 0 !important;
  }

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

  .project-member-form .project-member-cost-input {
    grid-column: auto;
  }

  .project-member-summary {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .project-member-summary strong {
    text-align: right;
  }

  .project-member-actions {
    display: grid;
  }

  .project-member-actions .button {
    width: 100%;
  }
}

.eyebrow {
  letter-spacing: .12em;
  color: #6b7f84;
  font-size: 10px;
  font-weight: 700;
  display: block;
}

.status-pill {
  letter-spacing: .04em;
  background: #eef3f4;
  border-radius: 999px;
  align-items: center;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.status-pill.ok {
  color: #18745d;
  background: #e9f8f2;
}

.muted-pill {
  color: #76858a;
  background: #f2f4f5;
}

.ok-text {
  color: #18745d;
}

.span-2 {
  grid-column: 1 / -1;
}

.workflow-dashboard {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.workflow-sidebar {
  padding: 0;
  position: sticky;
  top: 96px;
  overflow: hidden;
}

.workflow-sidebar-head {
  border-bottom: 1px solid #e8edef;
  justify-content: space-between;
  align-items: center;
  padding: 18px 18px 14px;
  display: flex;
}

.workflow-sidebar-head h2 {
  margin: 3px 0 0;
}

.workflow-list {
  max-height: 62vh;
  display: grid;
  overflow: auto;
}

.workflow-list-item {
  color: inherit;
  border-bottom: 1px solid #edf1f2;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 14px 16px;
  text-decoration: none;
  display: grid;
}

.workflow-list-item > div:first-child {
  gap: 3px;
  display: grid;
}

.workflow-list-item small {
  color: #748287;
}

.workflow-list-item > small {
  grid-column: 1 / -1;
}

.workflow-list-item:hover, .workflow-list-item.active {
  background: #f3faf9;
}

.workflow-list-item.active {
  box-shadow: inset 3px 0 #23aaa6;
}

.workflow-list-meta {
  color: #66777c;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  display: flex;
}

.status-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.status-dot.on {
  background: #24aa75;
}

.status-dot.off {
  background: #a3adb1;
}

.workflow-create {
  padding: 14px 16px;
}

.workflow-create > summary {
  text-align: center;
  list-style: none;
}

.workflow-editor-panel {
  background: #fff;
  border: 1px solid #e1e8e9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px #1942460d;
}

.workflow-editor-title {
  background: linear-gradient(#fbfdfd, #f8fbfb);
  border-bottom: 1px solid #e8edef;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  display: flex;
}

.workflow-editor-title h2 {
  margin: 4px 0;
}

.workflow-editor-title p {
  color: #76858a;
  margin: 0;
}

.workflow-core-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px 24px;
  display: grid;
}

.workflow-core-form label {
  gap: 6px;
  display: grid;
}

.workflow-steps-head {
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 10px;
  display: flex;
}

.workflow-steps-head h3 {
  margin: 3px 0;
}

.workflow-step-list {
  gap: 14px;
  padding: 0 24px 22px;
  display: grid;
}

.workflow-step-card {
  background: #fbfcfc;
  border: 1px solid #e4eaec;
  border-radius: 15px;
  grid-template-columns: 46px minmax(0, 1fr) 140px;
  gap: 16px;
  padding: 18px;
  display: grid;
}

.workflow-step-number {
  color: #187f7b;
  background: #e4f5f3;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 700;
  display: grid;
}

.workflow-step-content {
  gap: 12px;
  display: grid;
}

.workflow-step-content > label {
  gap: 6px;
  display: grid;
}

.workflow-step-action {
  align-items: flex-end;
  display: flex;
}

.workflow-step-action .button {
  width: 100%;
}

.workflow-approver-box {
  gap: 12px;
  display: grid;
}

.workflow-resolve-preview {
  background: #f7fafb;
  border: 1px solid #dfe8e9;
  border-radius: 12px;
  padding: 12px 14px;
}

.workflow-resolve-preview p {
  color: #718187;
  margin: 5px 0 0;
  font-size: 12px;
}

.workflow-new-step {
  background: #fbfdfd;
  border: 1px dashed #cbdadd;
  border-radius: 15px;
  margin: 0 24px 24px;
  padding: 18px;
}

.workflow-toggle-row {
  justify-content: flex-end;
  margin-top: 12px;
  display: flex;
}

.forms-admin-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.form-template-create {
  padding: 22px;
}

.form-builder {
  gap: 12px;
  display: grid;
}

.form-builder-head {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.form-builder-head p {
  margin: 3px 0 0;
}

.form-builder-list {
  gap: 10px;
  display: grid;
}

.form-builder-row {
  background: #fbfcfc;
  border: 1px solid #e4eaec;
  border-radius: 12px;
  grid-template-columns: 32px minmax(150px, 1fr) 150px 110px minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.form-builder-row label {
  gap: 5px;
  display: grid;
}

.form-builder-index {
  color: #167d79;
  background: #e8f5f4;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  display: grid;
}

.form-builder-required {
  align-items: center;
  padding-bottom: 10px;
  gap: 6px !important;
  display: flex !important;
}

.form-builder-required input {
  width: auto;
}

.form-builder-wide {
  min-width: 0;
}

.form-template-list {
  gap: 12px;
  display: grid;
}

.form-template-card {
  border: 1px solid #e4eaec;
  border-radius: 13px;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  display: flex;
}

.form-template-card h3 {
  margin: 8px 0 4px;
}

.form-template-card p {
  color: #718187;
  margin: 0 0 7px;
}

.form-template-card > div:last-child {
  align-content: start;
  justify-items: end;
  gap: 10px;
  display: grid;
}

.shell[data-admin-theme="MODERN"] .workflow-editor-panel, .shell[data-admin-theme="MODERN"] .workflow-sidebar {
  border-color: #dbe8e8;
}

.shell[data-admin-theme="MODERN"] .workflow-step-card, .shell[data-admin-theme="MODERN"] .form-builder-row {
  background: #fbfefe;
  border-color: #dce8e8;
}

.shell[data-admin-theme="MODERN"] .workflow-list-item.active {
  background: #eaf8f6;
}

.shell[data-admin-theme="MODERN"] .workflow-step-number, .shell[data-admin-theme="MODERN"] .form-builder-index {
  color: #137b78;
  background: #ddf5f3;
}

@media (max-width: 1100px) {
  .workflow-dashboard, .forms-admin-layout {
    grid-template-columns: 1fr;
  }

  .workflow-sidebar {
    position: static;
  }

  .workflow-list {
    max-height: none;
  }

  .workflow-step-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .workflow-step-action {
    grid-column: 2;
  }

  .form-builder-row {
    grid-template-columns: 32px 1fr 150px;
  }

  .form-builder-wide {
    grid-column: 2 / -1;
  }
}

@media (max-width: 700px) {
  .workflow-core-form {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .workflow-step-card {
    display: block;
  }

  .workflow-step-number {
    margin-bottom: 10px;
  }

  .workflow-step-action {
    margin-top: 12px;
  }

  .form-builder-row {
    display: block;
  }

  .form-builder-row > * {
    margin-bottom: 9px;
  }

  .form-builder-required {
    padding-bottom: 0;
  }

  .workflow-editor-title {
    padding: 18px;
  }

  .workflow-core-form, .workflow-step-list {
    padding-left: 18px;
    padding-right: 18px;
  }

  .workflow-new-step {
    margin-left: 18px;
    margin-right: 18px;
  }
}

.m-form-details {
  background: #f7f8fa;
  border-radius: 10px;
  gap: 6px;
  margin: 10px 0;
  padding: 10px 12px;
  display: grid;
}

.m-form-details > div {
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  display: flex;
}

.m-form-details span {
  color: #718096;
  text-transform: capitalize;
}

.m-form-details b {
  text-align: right;
}

.forms-catalog-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
}

.form-catalog-panel {
  padding: 22px;
}

.page-header.compact {
  align-items: center;
  margin: 0 0 14px;
}

.page-header.compact h2 {
  margin: 2px 0;
}

.form-template-catalog-card {
  background: linear-gradient(#fff, #fbfdfd);
  align-items: center;
}

.form-template-card-top {
  align-items: center;
  gap: 8px;
  display: flex;
}

.status-badge {
  color: #66767b;
  background: #eef1f2;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
}

.form-template-meta {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
  display: flex;
}

.form-template-meta span {
  color: #66777c;
  background: #f3f6f7;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
}

.form-detail-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.form-detail-side {
  gap: 16px;
  padding: 22px;
  display: grid;
  position: sticky;
  top: 96px;
}

.summary-grid.single {
  grid-template-columns: 1fr;
  gap: 10px;
  display: grid;
}

.summary-grid.single > div {
  background: #f7fafb;
  border: 1px solid #e5ecee;
  border-radius: 10px;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  display: flex;
}

.summary-grid.single span {
  color: #708086;
}

.header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.text-link {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.alert.success {
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.m-card.alert p {
  margin: 5px 0 0;
}

@media (max-width: 1100px) {
  .forms-catalog-layout, .form-detail-layout {
    grid-template-columns: 1fr;
  }

  .form-detail-side {
    position: static;
  }

  .header-actions {
    flex-wrap: wrap;
  }
}

.project-create-card {
  padding: 0;
  overflow: hidden;
}

.project-create-heading {
  background: linear-gradient(#fff, #fbfcfc);
  border-bottom: 1px solid #e8edef;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 26px 20px;
  display: flex;
}

.project-create-heading h2 {
  letter-spacing: -.01em;
  margin: 5px 0 7px;
  font-size: 21px;
}

.project-create-heading p {
  max-width: 780px;
  margin: 0;
  line-height: 1.55;
}

.project-create-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.project-create-step {
  color: #65777b;
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 999px;
  flex: none;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

.project-create-form {
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, .72fr);
  align-items: stretch;
  display: grid;
}

.project-create-main {
  gap: 0;
  padding: 4px 28px 26px;
  display: grid;
}

.project-form-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  min-width: 0;
  margin: 0;
  padding: 24px 0;
}

.project-form-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.project-form-section legend {
  color: #26383c;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.project-form-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.project-form-section legend > div {
  gap: 2px;
  display: grid;
}

.project-form-section legend strong {
  font-size: 14px;
}

.project-form-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 400;
}

.project-form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  display: grid;
}

.project-form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-form-grid label {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.project-form-grid input, .project-form-grid select, .project-form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.project-form-grid textarea {
  resize: vertical;
  min-height: 82px;
}

.project-form-grid input:focus, .project-form-grid select:focus, .project-form-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  outline: 0;
  box-shadow: 0 0 0 3px #25b7b31c;
}

.project-form-grid input::placeholder, .project-form-grid textarea::placeholder {
  color: #a7b1b4;
}

.project-form-grid .money-input-wrap {
  display: block;
  position: relative;
}

.project-form-grid .money-input-wrap input {
  padding-right: 38px;
}

.project-create-side {
  background: #f8fbfb;
  border-left: 1px solid #e8edef;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  display: flex;
}

.project-create-summary {
  border-bottom: 1px solid #e2ebec;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 18px;
  display: flex;
}

.project-create-summary-icon {
  color: #fff;
  background: linear-gradient(135deg, #27b6b1, #168f8c);
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: 700;
  display: grid;
  box-shadow: 0 7px 16px #25b7b32e;
}

.project-create-summary > div {
  gap: 4px;
  display: grid;
}

.project-create-summary strong {
  color: #27484b;
  font-size: 14px;
}

.project-create-summary small {
  color: #738489;
  line-height: 1.45;
}

.project-create-notes {
  gap: 15px;
  display: grid;
}

.project-create-notes > div {
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 10px;
  display: grid;
}

.project-create-notes > div > span {
  color: #247e7b;
  background: #e7f3f2;
  border-radius: 8px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.project-create-notes p {
  gap: 3px;
  margin: 0;
  display: grid;
}

.project-create-notes strong {
  color: #42595e;
  font-size: 12px;
}

.project-create-notes small {
  color: #7a898d;
  line-height: 1.45;
}

.project-create-toggle {
  cursor: pointer;
  background: #fff;
  border: 1px solid #dbe7e8;
  border-radius: 12px;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin-top: auto;
  padding: 14px;
  gap: 10px !important;
  font-weight: 400 !important;
  display: grid !important;
}

.project-create-toggle input {
  accent-color: #1da7a3;
  width: auto;
  margin-top: 3px;
}

.project-create-toggle > span {
  gap: 3px;
  display: grid;
}

.project-create-toggle strong {
  color: #365156;
  font-size: 12px;
}

.project-create-toggle small {
  color: #7c8b8f;
  line-height: 1.4;
}

.project-create-submit {
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding-inline: 16px;
}

.project-create-submit > span {
  font-size: 18px;
  line-height: 1;
}

.project-create-footnote {
  text-align: center;
  color: #8a979a;
  line-height: 1.4;
}

.shell[data-admin-theme="MODERN"] .project-create-card {
  border-color: #dce9ea;
  box-shadow: 0 9px 30px #1f53550e;
}

.shell[data-admin-theme="MODERN"] .project-create-heading {
  background: linear-gradient(#fff, #f8fcfb);
  border-bottom-color: #dfe9ea;
}

.shell[data-admin-theme="MODERN"] .project-create-side {
  background: linear-gradient(#f5fbfa, #f8fbfb);
  border-left-color: #dfe9ea;
}

@media (max-width: 1100px) {
  .project-create-form {
    grid-template-columns: 1fr;
  }

  .project-create-side {
    border-top: 1px solid #e8edef;
    border-left: 0;
  }

  .project-create-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-create-toggle {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .project-create-heading {
    padding: 20px;
    display: grid;
  }

  .project-create-step {
    justify-self: start;
  }

  .project-create-main, .project-create-side {
    padding: 20px;
  }

  .project-form-grid.two, .project-create-notes {
    grid-template-columns: 1fr;
  }

  .project-form-section {
    padding: 20px 0;
  }
}

.payroll-settings-card {
  padding: 0;
  overflow: hidden;
}

.payroll-settings-hero {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e7eef0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  padding: 24px 26px 20px;
  display: flex;
}

.payroll-settings-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.payroll-settings-hero h2 {
  letter-spacing: -.01em;
  margin: 8px 0 7px;
  font-size: 21px;
}

.payroll-settings-hero p {
  max-width: 860px;
  margin: 0;
  line-height: 1.58;
}

.payroll-settings-hero-metrics {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  min-width: min(460px, 45%);
  display: grid;
}

.payroll-settings-hero-metrics > div {
  background: #fff;
  border: 1px solid #e0ebec;
  border-radius: 14px;
  gap: 4px;
  padding: 14px 15px;
  display: grid;
  box-shadow: 0 4px 14px #205b5e0a;
}

.payroll-settings-hero-metrics small {
  color: #7b8a8e;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}

.payroll-settings-hero-metrics strong {
  color: #214449;
  font-size: 15px;
}

.payroll-settings-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, .78fr);
  align-items: start;
  display: grid;
}

.payroll-settings-main {
  padding: 8px 28px 26px;
}

.payroll-settings-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  min-width: 0;
  margin: 0;
  padding: 24px 0;
}

.payroll-settings-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.payroll-settings-section legend {
  color: #26383c;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.payroll-settings-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.payroll-settings-section legend > div {
  gap: 2px;
  display: grid;
}

.payroll-settings-section legend strong {
  font-size: 14px;
}

.payroll-settings-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 400;
}

.payroll-settings-grid {
  gap: 14px;
}

.payroll-settings-grid label {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.payroll-settings-grid input, .payroll-settings-grid select, .payroll-settings-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.payroll-settings-grid input:focus, .payroll-settings-grid select:focus, .payroll-settings-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  outline: 0;
  box-shadow: 0 0 0 3px #25b7b31c;
}

.payroll-settings-grid .money-input-wrap {
  display: block;
  position: relative;
}

.payroll-settings-grid .money-input-wrap input {
  padding-right: 38px;
}

.payroll-settings-grid small {
  line-height: 1.45;
}

.payroll-settings-grid.compact-top {
  margin-top: 14px;
}

.payroll-settings-side {
  background: linear-gradient(#f6fbfb, #fafcfc);
  border-left: 1px solid #e7eef0;
  gap: 16px;
  padding: 26px;
  display: grid;
  position: sticky;
  top: 92px;
}

.payroll-settings-side-card {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 10px;
  padding: 16px;
  display: grid;
  box-shadow: 0 4px 16px #225a5c0a;
}

.payroll-settings-side-card strong {
  color: #284a4f;
  font-size: 14px;
}

.payroll-settings-side-card p {
  margin: 0;
  line-height: 1.56;
}

.payroll-settings-bullets {
  gap: 10px;
  display: grid;
}

.payroll-settings-bullets > div {
  border-bottom: 1px dashed #e0e8ea;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  display: flex;
}

.payroll-settings-bullets > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.payroll-settings-bullets span {
  color: #708084;
  font-size: 12px;
}

.payroll-settings-bullets b {
  color: #24454a;
  text-align: right;
  font-size: 13px;
}

.payroll-settings-side-card ul {
  color: #738489;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
  display: grid;
}

.payroll-settings-submit {
  width: 100%;
  min-height: 46px;
}

.payroll-settings-footnote {
  text-align: center;
  color: #879599;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.shell[data-admin-theme="MODERN"] .payroll-settings-card {
  border-color: #dce9ea;
  box-shadow: 0 9px 30px #1f53550e;
}

.shell[data-admin-theme="MODERN"] .payroll-settings-hero {
  background: linear-gradient(#fff, #f8fcfb);
  border-bottom-color: #dfe9ea;
}

.shell[data-admin-theme="MODERN"] .payroll-settings-side {
  background: linear-gradient(#f5fbfa, #f8fbfb);
  border-left-color: #dfe9ea;
}

@media (max-width: 1180px) {
  .payroll-settings-hero {
    display: grid;
  }

  .payroll-settings-hero-metrics {
    min-width: 0;
  }

  .payroll-settings-layout {
    grid-template-columns: 1fr;
  }

  .payroll-settings-side {
    border-top: 1px solid #e7eef0;
    border-left: 0;
    position: static;
  }
}

@media (max-width: 760px) {
  .payroll-settings-hero, .payroll-settings-main, .payroll-settings-side {
    padding: 20px;
  }

  .payroll-settings-hero-metrics {
    grid-template-columns: 1fr;
  }

  .payroll-settings-section {
    padding: 20px 0;
  }
}

.payroll-period-create {
  gap: 14px;
  display: grid;
}

.payroll-period-heading {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  display: flex;
}

.payroll-period-heading h2, .payroll-period-list-head h2 {
  margin: 6px 0 5px;
  font-size: 20px;
}

.payroll-period-heading p, .payroll-period-list-head p {
  margin: 0;
}

.payroll-period-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 16px;
  display: grid;
}

.payroll-period-card {
  border-color: #e2ebec;
  gap: 16px;
  padding: 22px;
  display: grid;
}

.payroll-period-card.featured {
  background: linear-gradient(#fff, #f8fcfb);
}

.payroll-period-card-head {
  align-items: flex-start;
  gap: 11px;
  display: flex;
}

.payroll-period-card-head > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.payroll-period-card-head > div {
  gap: 3px;
  display: grid;
}

.payroll-period-card-head strong {
  color: #2a454a;
  font-size: 15px;
}

.payroll-period-card-head small {
  color: #7a898d;
}

.payroll-period-card .form-grid {
  max-width: none;
}

.payroll-custom-period-form {
  gap: 14px;
}

.payroll-period-list {
  gap: 14px;
  display: grid;
}

.payroll-period-list-head {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  display: flex;
}

.payroll-period-summary {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  min-width: min(470px, 46%);
  display: grid;
}

.payroll-period-summary > div {
  background: #fff;
  border: 1px solid #e0e9eb;
  border-radius: 13px;
  gap: 3px;
  padding: 13px 14px;
  display: grid;
}

.payroll-period-summary small {
  color: #7b8a8e;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}

.payroll-period-summary strong {
  color: #24464b;
  font-size: 14px;
}

.payroll-period-table {
  border-radius: 15px;
  box-shadow: 0 6px 20px #1f53550a;
}

.payroll-period-table th {
  color: #6b7d81;
  background: #f8fbfb;
}

.payroll-period-table tbody tr:hover {
  background: #fbfefe;
}

.payroll-period-name {
  gap: 3px;
  display: grid;
}

.payroll-period-name small {
  color: #839095;
  font-size: 11px;
  display: none;
}

.payroll-net-value {
  color: #147f78;
}

.payroll-status {
  color: #617176;
  letter-spacing: .03em;
  background: #eef2f3;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 86px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.payroll-status.draft {
  color: #9a6a13;
  background: #fff7e8;
}

.payroll-status.calculated {
  color: #246b9b;
  background: #eaf6ff;
}

.payroll-status.approved, .payroll-status.paid {
  color: #1c7a52;
  background: #e8f7ef;
}

.payroll-status.cancelled, .payroll-status.void {
  color: #a24646;
  background: #fff0f0;
}

.payroll-period-actions {
  min-width: max-content;
}

.shell[data-admin-theme="MODERN"] .payroll-period-card, .shell[data-admin-theme="MODERN"] .payroll-period-table, .shell[data-admin-theme="MODERN"] .payroll-period-summary > div {
  border-color: #dce8e9;
}

@media (max-width: 1100px) {
  .payroll-period-grid {
    grid-template-columns: 1fr;
  }

  .payroll-period-list-head {
    display: grid;
  }

  .payroll-period-summary {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .payroll-period-summary {
    grid-template-columns: 1fr;
  }

  .payroll-period-card {
    padding: 18px;
  }

  .payroll-period-table td:nth-child(2), .payroll-period-table th:nth-child(2) {
    display: none;
  }

  .payroll-period-name small {
    display: block;
  }
}

.learning-admin-page-header {
  align-items: flex-end;
}

.learning-admin-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.learning-admin-header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.learning-admin-hero {
  background: linear-gradient(#fff, #f9fcfc);
  border: 1px solid #dfe9ea;
  gap: 18px;
  padding: 24px 26px;
  display: grid;
}

.learning-admin-hero h2 {
  letter-spacing: -.02em;
  color: #163339;
  margin: 0 0 8px;
  font-size: 24px;
}

.learning-admin-hero-copy p {
  max-width: 920px;
  margin: 0;
  line-height: 1.58;
}

.learning-admin-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.learning-stat-card {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 16px;
  gap: 5px;
  padding: 16px 17px;
  display: grid;
  box-shadow: 0 4px 16px #225a5c0a;
}

.learning-stat-card small {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7b8a8e;
  font-size: 11px;
}

.learning-stat-card strong {
  color: #204348;
  font-size: 27px;
  line-height: 1;
}

.learning-stat-card span {
  color: #75868a;
  font-size: 12px;
}

.learning-admin-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.learning-admin-form-card {
  padding: 0;
  overflow: hidden;
}

.learning-section-head {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e8eff0;
  padding: 24px 26px 18px;
}

.learning-section-head h2 {
  letter-spacing: -.02em;
  margin: 8px 0 6px;
  font-size: 22px;
}

.learning-section-head p {
  max-width: 850px;
  margin: 0;
  line-height: 1.55;
}

.learning-section-badge {
  color: #248985;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.learning-admin-form {
  gap: 0;
  padding: 0 26px 26px;
  display: grid;
}

.learning-form-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  margin: 0;
  padding: 24px 0;
}

.learning-form-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 20px;
}

.learning-form-section legend {
  color: #26383c;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.learning-form-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.learning-form-section legend > div {
  gap: 2px;
  display: grid;
}

.learning-form-section legend strong {
  font-size: 14px;
}

.learning-form-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 400;
}

.learning-form-grid {
  gap: 14px;
}

.learning-form-grid label {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.learning-form-grid input, .learning-form-grid select, .learning-form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.learning-form-grid textarea {
  resize: vertical;
  min-height: 88px;
}

.learning-form-grid input:focus, .learning-form-grid select:focus, .learning-form-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  outline: 0;
  box-shadow: 0 0 0 3px #25b7b31c;
}

.learning-form-grid .learning-multi-select {
  min-height: 132px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.learning-form-grid small {
  line-height: 1.45;
}

.learning-form-grid.single-row {
  display: grid;
}

.learning-form-actions {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
  display: flex;
}

.learning-form-actions .button {
  min-width: 180px;
}

.learning-admin-sidebar {
  gap: 16px;
  display: grid;
  position: sticky;
  top: 92px;
}

.learning-side-card {
  background: linear-gradient(#fff, #fbfdfd);
  border-color: #dfe9ea;
  padding: 18px 18px 16px;
}

.learning-side-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.learning-guideline-list {
  gap: 12px;
  display: grid;
}

.learning-guideline-item {
  border-bottom: 1px dashed #e4ebec;
  padding: 12px 0;
}

.learning-guideline-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.learning-guideline-item strong {
  color: #24464a;
  margin-bottom: 4px;
  display: block;
}

.learning-guideline-item p {
  margin: 0;
  line-height: 1.5;
}

.learning-bullet-list {
  color: #6f8186;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
  display: grid;
}

.learning-side-summary {
  gap: 10px;
  display: grid;
}

.learning-side-summary > div {
  border-bottom: 1px dashed #e2e9ea;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.learning-side-summary > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.learning-side-summary span {
  color: #708084;
  font-size: 12px;
}

.learning-side-summary b {
  color: #25464b;
  font-size: 14px;
}

.learning-list-header h2 {
  margin: 0 0 4px;
}

.learning-inline-metrics {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.learning-inline-metrics span {
  color: #496469;
  background: #f2f7f7;
  border: 1px solid #dde8e9;
  border-radius: 999px;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.learning-table-wrap {
  border-radius: 16px;
  overflow: hidden;
}

.learning-program-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.learning-program-table thead th {
  white-space: nowrap;
}

.learning-program-table tbody td {
  vertical-align: top;
  padding-top: 16px;
  padding-bottom: 16px;
}

.learning-program-table tbody tr:hover {
  background: #fbfdfd;
}

.learning-primary-cell {
  gap: 4px;
  min-width: 240px;
  display: grid;
}

.learning-primary-cell strong {
  color: #1f3d42;
  font-size: 14px;
}

.learning-primary-cell span {
  color: #7f8f93;
  font-size: 12px;
  font-weight: 700;
}

.learning-primary-cell p {
  color: #6d7f84;
  max-width: 420px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.learning-pill {
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
}

.learning-pill-neutral {
  color: #4e676c;
  background: #f4f6f7;
  border: 1px solid #e1e7e9;
}

.learning-pill-soft {
  color: #2a726f;
  background: #edf7f6;
  border: 1px solid #d6eae8;
}

.learning-status-pill.status-draft {
  color: #8a5d00;
  background: #fff5db;
  border: 1px solid #f6deb0;
}

.learning-status-pill.status-published {
  color: #1f7a43;
  background: #e9f9ef;
  border: 1px solid #cdeed7;
}

.learning-status-pill.status-archived {
  color: #647078;
  background: #f1f3f5;
  border: 1px solid #e0e5e8;
}

.learning-progress-cell {
  gap: 6px;
  min-width: 150px;
  display: grid;
}

.learning-progress-cell strong {
  color: #24454a;
  font-size: 14px;
}

.learning-progress-cell span {
  color: #728387;
  font-size: 12px;
}

.learning-progress-bar {
  background: #ebf1f1;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.learning-progress-bar i {
  background: linear-gradient(90deg, #25b7b3, #67cfc9);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.learning-empty-state {
  text-align: center;
  gap: 6px;
  padding: 30px 10px;
  display: grid;
}

.learning-empty-state strong {
  color: #27474c;
  font-size: 16px;
}

.learning-empty-state p {
  margin: 0;
}

.shell[data-admin-theme="MODERN"] .learning-admin-hero, .shell[data-admin-theme="MODERN"] .learning-side-card, .shell[data-admin-theme="MODERN"] .learning-admin-form-card {
  border-color: #dce9ea;
  box-shadow: 0 9px 30px #1f53550e;
}

.shell[data-admin-theme="MODERN"] .learning-inline-metrics span {
  color: #376065;
  background: #f3fbfa;
  border-color: #d2e8e7;
}

@media (max-width: 1180px) {
  .learning-admin-layout {
    grid-template-columns: 1fr;
  }

  .learning-admin-sidebar {
    position: static;
  }

  .learning-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .learning-admin-hero, .learning-section-head, .learning-admin-form {
    padding-left: 18px;
    padding-right: 18px;
  }

  .learning-admin-hero {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .learning-admin-stats {
    grid-template-columns: 1fr;
  }

  .learning-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .learning-scope-grid {
    grid-template-columns: 1fr;
  }

  .learning-inline-metrics {
    justify-content: flex-start;
  }
}

.workspace-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.workspace-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.workspace-stat-card {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 16px;
  gap: 5px;
  min-width: 0;
  padding: 17px 18px;
  display: grid;
  box-shadow: 0 4px 16px #225a5c0a;
}

.workspace-stat-card > span {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7b8a8e;
  font-size: 11px;
  font-weight: 700;
}

.workspace-stat-card > strong {
  color: #204348;
  letter-spacing: -.03em;
  font-size: 28px;
  line-height: 1.05;
}

.workspace-stat-card > small {
  color: #75868a;
  font-size: 12px;
  line-height: 1.4;
}

.workspace-section-head {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e8eff0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px 18px;
  display: flex;
}

.workspace-section-head.compact-head {
  background: none;
  padding: 0 0 16px;
}

.workspace-section-head h2 {
  letter-spacing: -.015em;
  color: #203d42;
  margin: 7px 0 5px;
  font-size: 20px;
}

.workspace-section-head p {
  margin: 0;
  line-height: 1.5;
}

.workspace-head-badge, .workspace-count-badge {
  color: #557075;
  background: #f7fbfb;
  border: 1px solid #dbe8e8;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  font-size: 12px;
  display: inline-flex;
}

.workspace-count-badge {
  color: #2f6d6c;
  background: #edf8f7;
  font-weight: 700;
}

.workspace-form {
  gap: 0;
  display: grid;
}

.workspace-form-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  min-width: 0;
  margin: 0;
  padding: 22px 0;
}

.workspace-form-section:last-of-type {
  border-bottom: 0;
}

.workspace-form-section legend {
  color: #26383c;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.workspace-form-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.workspace-form-section legend > div {
  gap: 2px;
  display: grid;
}

.workspace-form-section legend strong {
  font-size: 14px;
}

.workspace-form-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 400;
}

.workspace-form-grid {
  gap: 14px;
  display: grid;
}

.workspace-form-grid label, .workspace-form-grid.single-row {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.workspace-form-grid input, .workspace-form-grid select, .workspace-form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
}

.workspace-form-grid textarea {
  resize: vertical;
  min-height: 88px;
}

.workspace-form-grid small {
  line-height: 1.45;
}

.workspace-form-grid.compact-top {
  margin-top: 14px;
}

.workspace-form-actions {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0 0;
  display: flex;
}

.workspace-details-list {
  gap: 12px;
  display: grid;
}

.workspace-details-card {
  background: #fff;
  border: 1px solid #dfe9ea;
  border-radius: 14px;
  overflow: hidden;
}

.workspace-details-card > summary {
  cursor: pointer;
  background: #fbfdfd;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  list-style: none;
  display: flex;
}

.workspace-details-card > summary::-webkit-details-marker {
  display: none;
}

.workspace-details-card > summary > div {
  gap: 3px;
  display: grid;
}

.workspace-details-card > summary span {
  color: #738489;
  font-size: 12px;
}

.workspace-details-body {
  border-top: 1px solid #e7eeee;
  padding: 18px;
}

.workspace-empty-state {
  text-align: center;
  justify-items: center;
  gap: 5px;
  padding: 30px 18px;
  display: grid;
}

.workspace-empty-state strong {
  color: #29494d;
  font-size: 15px;
}

.workspace-empty-state p {
  margin: 0;
}

.status-chip {
  white-space: nowrap;
  color: #5c6f74;
  background: #f4f6f7;
  border: 1px solid #e0e6e8;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.status-chip.success {
  color: #237747;
  background: #eaf8ef;
  border-color: #ccebd6;
}

.status-chip.warning {
  color: #8a6208;
  background: #fff6df;
  border-color: #f1dfb9;
}

.status-chip.danger {
  color: #a23b3b;
  background: #fff0f0;
  border-color: #f3d1d1;
}

.status-chip.info {
  color: #2f6f8d;
  background: #eaf6fb;
  border-color: #cfe7f1;
}

.table-primary-cell {
  white-space: normal;
  gap: 4px;
  max-width: 420px;
  display: grid;
}

.table-primary-cell strong {
  color: #213f44;
}

.table-primary-cell span {
  color: #738489;
  font-size: 12px;
  line-height: 1.4;
}

.table-details summary {
  cursor: pointer;
  color: #277c79;
  font-size: 12px;
  font-weight: 700;
}

.table-details > div {
  white-space: normal;
  min-width: 320px;
  padding: 12px 0;
  line-height: 1.5;
}

.shell[data-admin-theme="MODERN"] .content {
  background: linear-gradient(#f6faf9 0, #f5f8f8 220px, #f6f8f9 100%);
}

.shell[data-admin-theme="MODERN"] .content > .page-header, .shell[data-admin-theme="MODERN"] .content > div > .page-header {
  padding: 2px 2px 0;
}

.shell[data-admin-theme="MODERN"] .page-header h1 {
  letter-spacing: -.025em;
  font-weight: 700;
}

.shell[data-admin-theme="MODERN"] .page-header p {
  margin: 6px 0 0;
  line-height: 1.5;
}

.shell[data-admin-theme="MODERN"] .card {
  background: linear-gradient(#fff, #fdfefe);
  border-color: #dce7e8;
  border-radius: 16px;
  box-shadow: 0 7px 24px #1f53550b;
}

.shell[data-admin-theme="MODERN"] .card > h2:first-child, .shell[data-admin-theme="MODERN"] .card > h3:first-child {
  color: #203d42;
  letter-spacing: -.01em;
}

.shell[data-admin-theme="MODERN"] .form-grid {
  gap: 14px;
  max-width: none;
}

.shell[data-admin-theme="MODERN"] .form-grid label {
  color: #52656a;
  font-size: 12px;
  font-weight: 750;
}

.shell[data-admin-theme="MODERN"] .form-grid input, .shell[data-admin-theme="MODERN"] .form-grid select, .shell[data-admin-theme="MODERN"] .form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
}

.shell[data-admin-theme="MODERN"] .form-grid textarea {
  resize: vertical;
  min-height: 82px;
}

.shell[data-admin-theme="MODERN"] .form-grid input:focus, .shell[data-admin-theme="MODERN"] .form-grid select:focus, .shell[data-admin-theme="MODERN"] .form-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  box-shadow: 0 0 0 3px #25b7b31a;
}

.shell[data-admin-theme="MODERN"] .table-wrap {
  background: #fff;
  border-color: #dce7e8;
  border-radius: 16px;
  box-shadow: 0 5px 18px #1f535509;
}

.shell[data-admin-theme="MODERN"] table th {
  color: #60757a;
  background: #f6faf9;
  border-bottom-color: #dfe9ea;
  font-size: 11px;
  font-weight: 700;
}

.shell[data-admin-theme="MODERN"] table td {
  border-bottom-color: #edf2f2;
}

.shell[data-admin-theme="MODERN"] table tbody tr {
  transition: background .12s;
}

.shell[data-admin-theme="MODERN"] table tbody tr:hover {
  background: #fbfdfd;
}

.shell[data-admin-theme="MODERN"] .module-card {
  transition: transform .16s, box-shadow .16s, border-color .16s;
}

.shell[data-admin-theme="MODERN"] .module-card:hover {
  border-color: #c3dddd;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #1f535514;
}

.shell[data-admin-theme="MODERN"] .list-row {
  border-bottom-color: #e8eeee;
}

.shell[data-admin-theme="MODERN"] details.list-row {
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 13px;
  margin-bottom: 10px;
  padding: 0;
  display: block;
  overflow: hidden;
}

.shell[data-admin-theme="MODERN"] details.list-row > summary {
  cursor: pointer;
  color: #2e4b50;
  background: #fbfdfd;
  padding: 14px 15px;
  list-style: none;
}

.shell[data-admin-theme="MODERN"] details.list-row > summary::-webkit-details-marker {
  display: none;
}

.shell[data-admin-theme="MODERN"] details.list-row > [class*="section-gap"], .shell[data-admin-theme="MODERN"] details.list-row > form {
  padding-left: 16px;
  padding-right: 16px;
}

.shell[data-admin-theme="MODERN"] .button {
  border-radius: 10px;
  min-height: 38px;
  transition: transform .12s, box-shadow .12s, background .12s;
}

.shell[data-admin-theme="MODERN"] .button:hover {
  transform: translateY(-1px);
}

.shell[data-admin-theme="MODERN"] .form-error, .shell[data-admin-theme="MODERN"] .m-error, .shell[data-admin-theme="MODERN"] .form-success {
  border-radius: 12px;
}

.recruitment-page {
  display: block;
}

.recruitment-page-header {
  align-items: flex-end;
}

.recruitment-page-header .workspace-kicker {
  margin-bottom: 8px;
}

.recruitment-hero {
  background: linear-gradient(135deg, #fff 0, #f5fbfa 100%);
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}

.recruitment-hero:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #2fb9b11f, #2fb9b100 70%);
  border-radius: 50%;
  width: 260px;
  height: 260px;
  position: absolute;
  top: -110px;
  right: -80px;
}

.recruitment-hero-copy {
  z-index: 1;
  max-width: 920px;
  position: relative;
}

.recruitment-hero-eyebrow {
  color: #2d7d79;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.recruitment-hero h2 {
  letter-spacing: -.02em;
  color: #18383d;
  margin: 0 0 8px;
  font-size: 24px;
}

.recruitment-hero p {
  margin: 0;
  line-height: 1.6;
}

.recruitment-flow-strip {
  z-index: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  display: flex;
  position: relative;
}

.recruitment-flow-strip span {
  color: #396368;
  background: #fff;
  border: 1px solid #d8e8e7;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 750;
}

.recruitment-flow-strip i {
  color: #91aaa9;
  font-style: normal;
}

.recruitment-module-heading {
  align-items: flex-end;
}

.recruitment-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.recruitment-module-card {
  gap: 18px;
  min-height: 220px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  display: grid;
  padding: 20px !important;
}

.recruitment-module-card:hover {
  transform: translateY(-3px);
  border-color: #bbdcda !important;
  box-shadow: 0 14px 34px #1f535517 !important;
}

.recruitment-module-top {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.recruitment-module-step {
  color: #237f7b;
  background: #eaf7f5;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.recruitment-module-badge {
  color: #687b7f;
  background: #f4f7f7;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 750;
}

.recruitment-module-card h2 {
  font-size: 19px;
  margin: 0 0 8px !important;
}

.recruitment-module-card p {
  color: #6f8085;
  margin: 0;
  line-height: 1.55;
}

.recruitment-module-action {
  color: #247c79;
  border-top: 1px solid #e8eeee;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  display: flex;
}

.recruitment-module-action span {
  font-size: 19px;
}

.recruitment-principle-card {
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 24px;
  padding: 22px 24px;
  display: grid;
}

.recruitment-principle-card h2 {
  margin: 7px 0 0;
}

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

.recruitment-principle-grid > div {
  background: #fbfdfd;
  border: 1px solid #e0e9ea;
  border-radius: 12px;
  gap: 4px;
  padding: 13px 14px;
  display: grid;
}

.recruitment-principle-grid b {
  color: #2b5055;
}

.recruitment-principle-grid span {
  color: #738489;
  font-size: 12px;
  line-height: 1.45;
}

.recruitment-subpage > .workspace-stat-grid {
  margin-bottom: 0;
}

.recruitment-form-shell {
  padding: 0;
  overflow: hidden;
}

.recruitment-form-shell > .form-error, .recruitment-form-shell > .form-success {
  margin: 18px 24px 0;
}

.recruitment-request-form {
  padding: 0 24px 24px;
}

.recruitment-inbox-card, .recruitment-history-card, .recruitment-subpage > .card:not(.recruitment-form-shell):not(.recruitment-inbox-card):not(.recruitment-history-card) {
  padding: 22px 24px;
}

.recruitment-subpage .card > .form-grid {
  margin-top: 12px;
}

.recruitment-subpage .card > .two-col .card {
  height: 100%;
}

.recruitment-subpage .table-wrap {
  margin-top: 10px;
}

.recruitment-subpage .list-row {
  white-space: normal;
}

.recruitment-subpage details.list-row > summary {
  font-weight: 650;
}

.recruitment-subpage details.list-row .form-grid {
  max-width: none;
}

.recruitment-forms-page > .section-gap > .card {
  padding: 22px 24px;
}

.recruitment-forms-page > .section-gap > .card > .page-header {
  margin-bottom: 14px;
}

.recruitment-interviews-page .form-inline select {
  min-width: 280px;
}

.recruitment-hr-page > .two-col {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px;
}

.recruitment-hr-page > .two-col > .card {
  padding: 22px 24px;
}

@media (max-width: 1180px) {
  .workspace-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recruitment-principle-card, .recruitment-hr-page > .two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .workspace-section-head {
    display: grid;
  }

  .workspace-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .recruitment-module-grid, .recruitment-principle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .workspace-stat-grid {
    grid-template-columns: 1fr;
  }

  .recruitment-hero {
    padding: 20px;
  }

  .recruitment-flow-strip i {
    display: none;
  }

  .recruitment-request-form {
    padding-left: 18px;
    padding-right: 18px;
  }

  .recruitment-inbox-card, .recruitment-history-card {
    padding: 18px;
  }
}

:root {
  --admin-font-size: 11px;
}

html, body {
  font-family: var(--app-font);
  font-size: var(--admin-font-size);
  line-height: 1.45;
}

body, input, select, textarea, button, table, th, td, label, a, p, li, summary, small, code {
  font-family: var(--app-font);
}

.shell, input, select, textarea, button, label, table, th, td, p, li, summary, .muted, .form-inline, .form-grid, .list-row, .result-list, .sidebar-footer, .topbar-link, .nav a, .nav-group summary, .nav-group-items a, button, .button, .button.compact, .button.secondary, th, td, small, .auth-help, .result-list span, .table-primary-cell span, .workspace-stat-card span, .recruitment-principle-grid span, .nav a, .nav-group summary, .nav-group-items a, .topbar-link, .mobile-nav a, .auth-card label, .alert {
  font-size: var(--admin-font-size);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--app-font);
  line-height: 1.2;
}

h1, .page-header h1 {
  font-size: calc(var(--admin-font-size) + 13px);
}

h2 {
  font-size: calc(var(--admin-font-size) + 6px);
}

h3 {
  font-size: calc(var(--admin-font-size) + 3px);
}

h4 {
  font-size: calc(var(--admin-font-size) + 1px);
}

h5, h6 {
  font-size: var(--admin-font-size);
}

.metric, .workspace-stat-card strong, .learning-stat-card strong {
  font-size: calc(var(--admin-font-size) + 16px);
}

.workspace-kicker, .learning-admin-kicker, .learning-section-badge, .payroll-settings-kicker, .project-create-kicker, .recruitment-hero-eyebrow, .status-chip, .learning-pill, .learning-inline-metrics span, .recruitment-module-badge, .auth-badge, .m-status, .workspace-details-card > summary span, .learning-stat-card small, .payroll-settings-hero-metrics small, .project-form-section legend small, .payroll-settings-section legend small, .learning-form-section legend small {
  font-size: var(--admin-font-size);
}

.mobile-app, .mobile-app input, .mobile-app select, .mobile-app textarea, .mobile-app button, .mobile-app a, .mobile-app p, .mobile-app span, .mobile-app small, .mobile-app label, .mobile-app li {
  font-family: var(--app-font);
}

.mobile-app {
  font-size: 11px;
}

.m-header strong {
  font-size: 13px;
}

.m-header span, .m-header > a, .m-bottom span, .m-hero p, .m-hero span, .m-page-title p, .m-list > a, .m-list > div, .m-request p, .m-task p, .payslip-row, .profile-list b, .quiz-question label {
  font-size: 11px;
}

.print-report, .certificate, .public-verify {
  font-family: var(--app-font);
}

.print-report th, .print-report td {
  font-size: var(--admin-font-size);
}

.admin-font-size-card {
  gap: 20px;
  display: grid;
}

.admin-font-size-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.admin-font-size-head h2 {
  margin: 7px 0 5px;
}

.admin-font-size-head p {
  max-width: 760px;
  margin: 0;
}

.admin-font-size-current {
  text-align: center;
  background: #f7fbfb;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 3px;
  min-width: 96px;
  padding: 13px 15px;
  display: grid;
}

.admin-font-size-current small {
  color: #738589;
}

.admin-font-size-current strong {
  color: #24484d;
  font-size: 24px;
}

.admin-font-size-options {
  grid-template-columns: repeat(7, minmax(70px, 1fr));
  gap: 10px;
  display: grid;
}

.admin-font-size-option {
  cursor: pointer;
  background: #fff;
  border: 1px solid #dce5e7;
  border-radius: 14px;
  place-items: center;
  min-height: 82px;
  padding: 12px;
  transition: all .15s;
  gap: 6px !important;
  display: grid !important;
}

.admin-font-size-option:hover {
  background: #f8fcfc;
  border-color: #9bd5d2;
}

.admin-font-size-option.selected {
  background: #edf9f8;
  border-color: #42b8b3;
  box-shadow: 0 0 0 3px #25b7b317;
}

.admin-font-size-option:has(input:checked) {
  background: #edf9f8;
  border-color: #42b8b3;
  box-shadow: 0 0 0 3px #25b7b317;
}

.admin-font-size-option input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.admin-font-size-option span {
  font-family: var(--app-font);
  color: #24464b;
  font-weight: 700;
}

.admin-font-size-option small {
  color: #7d8d91;
}

.admin-font-size-preview {
  font-family: var(--app-font);
  background: #fbfdfd;
  border: 1px dashed #c9dddd;
  border-radius: 14px;
  gap: 5px;
  padding: 18px;
  display: grid;
}

.admin-font-size-preview p, .admin-font-size-preview small {
  font-size: inherit;
  margin: 0;
}

.admin-font-size-preview small {
  opacity: .7;
}

@media (max-width: 820px) {
  .admin-font-size-options {
    grid-template-columns: repeat(4, 1fr);
  }

  .admin-font-size-head {
    display: grid;
  }

  .admin-font-size-current {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .admin-font-size-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lifecycle-v2-header {
  align-items: flex-end;
}

.lifecycle-v2-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.lifecycle-v2-stat {
  background: linear-gradient(#fff, #fbfdfd);
  gap: 5px;
  min-height: 112px;
  padding: 17px 18px;
  display: grid;
}

.lifecycle-v2-stat small {
  color: #708287;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.lifecycle-v2-stat strong {
  color: #1f4b50;
  font-size: 28px;
  line-height: 1;
}

.lifecycle-v2-stat span {
  color: #7a898d;
}

.lifecycle-v2-create {
  padding: 0;
  overflow: hidden;
}

.lifecycle-v2-create > .workspace-section-head {
  background: linear-gradient(#fff, #fafdfd);
  border-bottom: 1px solid #e6edef;
  padding: 22px 24px 18px;
}

.lifecycle-v2-create-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  display: grid;
}

.lifecycle-v2-create-panel {
  gap: 14px;
  padding: 24px;
  display: grid;
}

.lifecycle-v2-create-panel + .lifecycle-v2-create-panel {
  border-left: 1px solid #e6edef;
}

.lifecycle-v2-create-panel label {
  color: #4d6368;
  gap: 7px;
  font-weight: 700;
  display: grid;
}

.lifecycle-v2-create-panel input, .lifecycle-v2-create-panel select {
  background: #fcfefe;
  border-color: #d8e4e6;
  min-height: 44px;
}

.lifecycle-v2-panel-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  display: flex;
}

.lifecycle-v2-panel-head > span {
  color: #177b77;
  background: #dff5f2;
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-weight: 700;
  display: grid;
}

.offboarding-panel .lifecycle-v2-panel-head > span {
  color: #b8513d;
  background: #fff0ed;
}

.lifecycle-v2-panel-head > div {
  gap: 3px;
  display: grid;
}

.lifecycle-v2-panel-head strong {
  color: #24474b;
  font-size: 15px;
}

.lifecycle-v2-panel-head small {
  color: #78898d;
}

.lifecycle-v2-note {
  color: #6d7e82;
  background: #f8fbfb;
  border: 1px solid #e2e9eb;
  border-radius: 10px;
  padding: 11px 12px;
  line-height: 1.45;
}

.lifecycle-v2-list {
  gap: 10px;
  display: grid;
}

.lifecycle-v2-row {
  grid-template-columns: auto minmax(230px, 1.3fr) auto 145px minmax(160px, .9fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: grid;
}

.lifecycle-v2-row:hover {
  border-color: #cfe3e3;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px #1f535512;
}

.lifecycle-v2-avatar {
  color: #147973;
  background: #e3f6f3;
  border-radius: 14px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 15px;
  font-weight: 700;
  display: grid;
}

.lifecycle-v2-avatar.offboarding {
  color: #b64b35;
  background: #fff0ed;
}

.lifecycle-v2-person {
  gap: 4px;
  display: grid;
}

.lifecycle-v2-person strong {
  color: #233f44;
  font-size: 13px;
}

.lifecycle-v2-person span {
  color: #75868a;
}

.lifecycle-type-pill.onboarding {
  color: #1c7551;
  background: #e5f8ef;
  border: 1px solid #ccebdc;
}

.lifecycle-type-pill.offboarding {
  color: #a94a36;
  background: #fff0ec;
  border: 1px solid #f2d5cc;
}

.lifecycle-v2-date {
  gap: 4px;
  display: grid;
}

.lifecycle-v2-date small {
  color: #839094;
}

.lifecycle-v2-date strong {
  color: #344f54;
}

.lifecycle-v2-progress {
  gap: 7px;
  display: grid;
}

.lifecycle-v2-progress > div {
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.lifecycle-v2-progress > div span {
  color: #7d8d91;
}

.lifecycle-v2-progress > i {
  background: #e9eff0;
  border-radius: 999px;
  height: 7px;
  display: block;
  overflow: hidden;
}

.lifecycle-v2-progress > i > b {
  background: linear-gradient(90deg, #25b7b3, #69cec8);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.lifecycle-status-pill.status-in_progress {
  color: #277875;
  background: #eaf7f6;
  border: 1px solid #d4eae8;
}

.lifecycle-status-pill.status-pending {
  color: #8a6200;
  background: #fff5d9;
  border: 1px solid #f1dfb2;
}

.lifecycle-status-pill.status-completed {
  color: #287746;
  background: #e9f8ee;
  border: 1px solid #d0e9d8;
}

.lifecycle-status-pill.status-cancelled {
  color: #69777b;
  background: #f1f3f4;
  border: 1px solid #e0e5e7;
}

.lifecycle-v2-open {
  color: #287a78;
  white-space: nowrap;
  font-weight: 700;
}

.lifecycle-v2-empty {
  text-align: center;
  gap: 6px;
  display: grid;
  padding: 34px !important;
}

.lifecycle-v2-empty p {
  margin: 0;
}

.lifecycle-detail-header {
  align-items: flex-end;
}

.lifecycle-back-link {
  color: #5d757a;
  margin-bottom: 9px;
  display: inline-flex;
}

.lifecycle-detail-overview {
  grid-template-columns: minmax(250px, 1.25fr) repeat(3, minmax(150px, .75fr));
  gap: 14px;
  display: grid;
}

.lifecycle-detail-profile {
  align-items: center;
  gap: 13px;
  display: flex;
}

.lifecycle-detail-profile > div:last-child {
  gap: 3px;
  display: grid;
}

.lifecycle-detail-profile small, .lifecycle-detail-metric small {
  color: #7a898d;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lifecycle-detail-profile strong {
  color: #234349;
  font-size: 15px;
}

.lifecycle-detail-profile span {
  color: #738488;
}

.lifecycle-detail-metric {
  gap: 5px;
  display: grid;
}

.lifecycle-detail-metric strong {
  color: #23484d;
  font-size: 20px;
}

.lifecycle-detail-metric span {
  color: #77888c;
}

.lifecycle-detail-timeline {
  padding: 22px;
}

.lifecycle-department-groups {
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.lifecycle-department-card {
  background: #fff;
  border: 1px solid #dfe9ea;
  border-radius: 15px;
  overflow: hidden;
}

.lifecycle-department-head {
  background: #f8fbfb;
  border-bottom: 1px solid #e5edef;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  display: flex;
}

.lifecycle-department-head > div:first-child {
  align-items: center;
  gap: 11px;
  display: flex;
}

.lifecycle-department-head > div:first-child > span {
  color: #287d79;
  background: #e4f5f3;
  border-radius: 9px;
  place-items: center;
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  font-weight: 700;
  display: grid;
}

.lifecycle-department-head > div:first-child > div {
  gap: 2px;
  display: grid;
}

.lifecycle-department-head small {
  color: #7a898d;
}

.lifecycle-mini-progress {
  background: #e7eeee;
  border-radius: 999px;
  width: 140px;
  height: 7px;
  overflow: hidden;
}

.lifecycle-mini-progress i {
  background: linear-gradient(90deg, #27b6b1, #69cec9);
  height: 100%;
  display: block;
}

.lifecycle-task-list {
  display: grid;
}

.lifecycle-task-row {
  border-bottom: 1px solid #edf1f2;
  grid-template-columns: 34px minmax(230px, 1.2fr) minmax(360px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: grid;
}

.lifecycle-task-row:last-child {
  border-bottom: 0;
}

.lifecycle-task-state {
  color: #64767a;
  background: #eef3f4;
  border-radius: 10px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  display: grid;
}

.lifecycle-task-state.status-in_progress {
  color: #247b77;
  background: #e2f4f2;
}

.lifecycle-task-state.status-blocked {
  color: #a85d29;
  background: #fff1e8;
}

.lifecycle-task-state.status-done {
  color: #277848;
  background: #e6f7ed;
}

.lifecycle-task-state.status-cancelled {
  color: #7b8589;
  background: #f0f2f3;
}

.lifecycle-task-copy {
  gap: 4px;
  display: grid;
}

.lifecycle-task-copy strong {
  color: #2b484d;
}

.lifecycle-task-copy span {
  color: #7a898d;
}

.lifecycle-task-copy p {
  color: #5f7479;
  margin: 2px 0 0;
}

.lifecycle-task-update {
  grid-template-columns: 125px minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.lifecycle-task-update input, .lifecycle-task-update select {
  min-height: 36px;
  padding: 8px 9px;
}

.lifecycle-task-status.status-pending {
  color: #69797d;
  background: #f4f6f6;
}

.lifecycle-task-status.status-in_progress {
  color: #277b76;
  background: #e9f7f5;
}

.lifecycle-task-status.status-blocked {
  color: #a65826;
  background: #fff0e8;
}

.lifecycle-task-status.status-done {
  color: #267747;
  background: #e8f8ee;
}

.lifecycle-task-status.status-cancelled {
  color: #7a8386;
  background: #f1f2f3;
}

.lifecycle-danger-zone {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
  background: #fffaf8 !important;
  border-color: #f0d9d3 !important;
}

.lifecycle-danger-zone h3 {
  margin: 0 0 5px;
}

.lifecycle-danger-zone p {
  margin: 0;
}

.lifecycle-danger-zone details {
  min-width: 260px;
}

.lifecycle-danger-zone details form {
  margin-top: 12px;
}

.lifecycle-task-center {
  padding: 22px;
}

.lifecycle-task-center-list {
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.lifecycle-task-center-row {
  background: #fcfefe;
  border: 1px solid #e1e9eb;
  border-radius: 13px;
  grid-template-columns: 34px minmax(300px, 1.25fr) minmax(420px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  display: grid;
}

.lifecycle-task-center-copy {
  gap: 5px;
  display: grid;
}

.lifecycle-task-center-copy > div {
  color: #78888c;
  align-items: center;
  gap: 8px;
  display: flex;
}

.lifecycle-task-center-copy strong {
  color: #29474c;
  font-size: 13px;
}

.lifecycle-task-center-copy p {
  color: #74868a;
  margin: 0;
}

.lifecycle-task-update.wide {
  grid-template-columns: 130px minmax(200px, 1fr) auto;
}

@media (max-width: 1250px) {
  .lifecycle-v2-row {
    grid-template-columns: auto minmax(220px, 1fr) auto 140px minmax(140px, .8fr);
  }

  .lifecycle-v2-row > .lifecycle-status-pill, .lifecycle-v2-row > .lifecycle-v2-open {
    grid-column: auto;
  }

  .lifecycle-detail-overview {
    grid-template-columns: 1fr 1fr;
  }

  .lifecycle-task-row {
    grid-template-columns: 34px 1fr;
  }

  .lifecycle-task-update, .lifecycle-task-status {
    grid-column: 2;
  }

  .lifecycle-task-center-row {
    grid-template-columns: 34px 1fr;
  }

  .lifecycle-task-center-row > .lifecycle-task-update, .lifecycle-task-center-row > .text-link {
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .lifecycle-v2-stats {
    grid-template-columns: 1fr 1fr;
  }

  .lifecycle-v2-create-grid {
    grid-template-columns: 1fr;
  }

  .lifecycle-v2-create-panel + .lifecycle-v2-create-panel {
    border-top: 1px solid #e6edef;
    border-left: 0;
  }

  .lifecycle-v2-row {
    grid-template-columns: auto 1fr;
  }

  .lifecycle-v2-row > :not(.lifecycle-v2-avatar):not(.lifecycle-v2-person) {
    grid-column: 2;
  }

  .lifecycle-detail-overview {
    grid-template-columns: 1fr;
  }

  .lifecycle-danger-zone {
    display: grid;
  }

  .lifecycle-task-update.wide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .lifecycle-v2-stats {
    grid-template-columns: 1fr;
  }

  .lifecycle-v2-create-panel {
    padding: 18px;
  }

  .lifecycle-detail-timeline, .lifecycle-task-center {
    padding: 16px;
  }

  .lifecycle-task-update {
    grid-template-columns: 1fr;
  }

  .lifecycle-task-update > * {
    width: 100%;
  }

  .lifecycle-mini-progress {
    width: 90px;
  }
}

.procurement-page-header {
  align-items: flex-end;
}

.procurement-hero {
  background: linear-gradient(#fff, #f8fcfb);
  border-color: #dce9ea;
  padding: 24px 26px;
  box-shadow: 0 9px 30px #1f53550e;
}

.procurement-kicker {
  color: #247d79;
  font-size: var(--admin-font-size, 11px);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #eaf7f5;
  border-radius: 999px;
  align-items: center;
  padding: 5px 10px;
  font-weight: 700;
  display: inline-flex;
}

.procurement-hero h2 {
  color: #19393e;
  margin: 10px 0 7px;
  font-size: 20px;
}

.procurement-hero p {
  max-width: 900px;
  margin: 0;
  line-height: 1.55;
}

.procurement-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  display: grid;
}

.procurement-stats > div {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 5px;
  padding: 15px 16px;
  display: grid;
  box-shadow: 0 4px 14px #1f535509;
}

.procurement-stats small {
  color: #718489;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.procurement-stats strong {
  color: #21454a;
  font-size: 26px;
  line-height: 1;
}

.procurement-stats span {
  color: #75868a;
}

.procurement-inbox-card {
  padding: 22px;
}

.procurement-table-wrap {
  border-radius: 14px;
}

.procurement-purpose-cell {
  white-space: normal;
  color: #40575c;
  max-width: 330px;
  line-height: 1.45;
}

.procurement-status, .procurement-source {
  white-space: nowrap;
  color: #607176;
  background: #f0f3f4;
  border: 1px solid #e0e6e8;
  border-radius: 999px;
  align-items: center;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.procurement-status.status-approved {
  color: #187255;
  background: #e8f8f3;
  border-color: #ccebdd;
}

.procurement-status.status-submitted {
  color: #8a6107;
  background: #fff5dc;
  border-color: #f3dfb1;
}

.procurement-status.status-ordered {
  color: #2d64a3;
  background: #eaf4ff;
  border-color: #cee1f5;
}

.procurement-status.status-fulfill_from_stock, .procurement-status.status-stock_transfer_in_progress {
  color: #28668e;
  background: #eef8ff;
  border-color: #d6eaf6;
}

.procurement-status.status-completed_from_stock {
  color: #176d4d;
  background: #e7f8f0;
  border-color: #cbeada;
}

.procurement-status.status-received {
  color: #347646;
  background: #ecf9ee;
  border-color: #d2ebd7;
}

.procurement-status.status-rejected, .procurement-status.status-cancelled {
  color: #9a4141;
  background: #fff0f0;
  border-color: #f0d1d1;
}

.procurement-source.source-form {
  color: #287b78;
  background: #edf7f6;
  border-color: #d6e9e8;
}

.procurement-inline-note {
  margin: 12px 0 0;
  line-height: 1.5;
}

.procurement-support-grid {
  align-items: start;
}

.procurement-details > summary {
  cursor: pointer;
  width: max-content;
  list-style: none;
}

.procurement-details > summary::-webkit-details-marker {
  display: none;
}

.procurement-process-guide {
  gap: 10px;
  display: grid;
}

.procurement-process-guide > div {
  border-bottom: 1px dashed #e3ebec;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  display: grid;
}

.procurement-process-guide > div:last-child {
  border-bottom: 0;
}

.procurement-process-guide > div > span {
  color: #247d79;
  background: #eaf7f5;
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  display: grid;
}

.procurement-process-guide p {
  gap: 2px;
  margin: 0;
  display: grid;
}

.procurement-process-guide small {
  color: #74858a;
}

.procurement-detail-hero {
  background: linear-gradient(#fff, #f9fcfc);
  gap: 18px;
  padding: 22px 24px;
  display: grid;
}

.procurement-detail-status {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.procurement-detail-status small {
  color: #78898d;
}

.procurement-detail-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.procurement-detail-metrics > div {
  background: #fff;
  border: 1px solid #dfe9ea;
  border-radius: 12px;
  gap: 5px;
  padding: 13px 14px;
  display: grid;
}

.procurement-detail-metrics small {
  color: #74858a;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.procurement-detail-metrics strong {
  color: #27494e;
}

.procurement-detail-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.procurement-detail-side {
  position: sticky;
  top: 92px;
}

.procurement-next-step {
  background: linear-gradient(#fff, #f8fcfb);
  border-color: #cfe8e5;
}

.procurement-po-footer {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  display: flex;
}

.procurement-timeline {
  gap: 0;
  display: grid;
}

.procurement-timeline > div {
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 10px;
  padding: 0 0 18px;
  display: grid;
  position: relative;
}

.procurement-timeline > div:not(:last-child):before {
  content: "";
  background: #e5ebed;
  width: 2px;
  position: absolute;
  top: 29px;
  bottom: 0;
  left: 14px;
}

.procurement-timeline > div > span {
  color: #728287;
  z-index: 1;
  background: #f1f4f5;
  border-radius: 999px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  display: grid;
}

.procurement-timeline p {
  gap: 2px;
  margin: 2px 0 0;
  display: grid;
}

.procurement-timeline small {
  color: #7c8b8f;
}

.procurement-timeline > div.done > span {
  color: #187057;
  background: #e3f5ef;
}

.procurement-timeline > div.current > span {
  color: #1b7f7b;
  background: #dff4f3;
  box-shadow: 0 0 0 4px #25b7b314;
}

@media (max-width: 1100px) {
  .procurement-stats, .procurement-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .procurement-detail-layout {
    grid-template-columns: 1fr;
  }

  .procurement-detail-side {
    position: static;
  }
}

@media (max-width: 700px) {
  .procurement-stats, .procurement-detail-metrics {
    grid-template-columns: 1fr;
  }

  .procurement-hero, .procurement-inbox-card, .procurement-detail-hero {
    padding: 18px;
  }

  .procurement-po-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .procurement-po-footer form, .procurement-po-footer button {
    width: 100%;
  }
}

.operations-monitor-header {
  align-items: flex-end;
}

.operations-kicker {
  color: #247b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.operations-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.operations-summary-card {
  gap: 6px;
  min-height: 118px;
  padding: 18px;
  display: grid;
}

.operations-summary-card small {
  color: #718287;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

.operations-summary-card strong {
  color: #21464b;
  font-size: 30px;
  line-height: 1;
}

.operations-summary-card span {
  color: #74868a;
}

.operations-section-title {
  align-items: end;
}

.operations-section-title h2 {
  margin: 0 0 4px;
}

.operations-cadence-pill {
  color: #396267;
  white-space: nowrap;
  background: #f5fbfa;
  border: 1px solid #d8e7e7;
  border-radius: 999px;
  align-items: center;
  padding: 8px 11px;
  font-weight: 700;
  display: inline-flex;
}

.operations-scheduler-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.scheduler-monitor-card {
  background: linear-gradient(#fff, #fbfdfd);
  border-color: #dfe9ea;
  gap: 14px;
  padding: 20px;
  display: grid;
}

.scheduler-monitor-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.scheduler-monitor-head h3 {
  color: #24464b;
  margin: 5px 0 0;
  font-size: 15px;
}

.scheduler-module {
  color: #2a7773;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #eef7f6;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.scheduler-state {
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.scheduler-state.success {
  color: #207542;
  background: #e9f9ef;
  border-color: #ccebd5;
}

.scheduler-state.info {
  color: #1e6592;
  background: #e9f5ff;
  border-color: #cfe6fa;
}

.scheduler-state.warning {
  color: #8b5f08;
  background: #fff5dd;
  border-color: #f5dfae;
}

.scheduler-state.danger {
  color: #a83d3d;
  background: #fff0f0;
  border-color: #f3caca;
}

.scheduler-state.neutral {
  color: #66757a;
  background: #f2f4f5;
  border-color: #e1e5e7;
}

.scheduler-description {
  margin: 0;
  line-height: 1.5;
}

.scheduler-monitor-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.scheduler-monitor-metrics > div {
  background: #fff;
  border: 1px solid #e2eaeb;
  border-radius: 12px;
  gap: 5px;
  padding: 12px;
  display: grid;
}

.scheduler-monitor-metrics small {
  color: #78898d;
}

.scheduler-monitor-metrics strong {
  color: #24464b;
  font-size: 14px;
}

.scheduler-monitor-detail {
  gap: 12px;
  padding-top: 2px;
  display: grid;
}

.scheduler-monitor-detail > p {
  color: #5d7378;
  background: #f5f8f8;
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px;
  line-height: 1.5;
}

.scheduler-monitor-detail dl {
  gap: 8px;
  margin: 0;
  display: grid;
}

.scheduler-monitor-detail dl > div {
  border-bottom: 1px dashed #e2e8e9;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  display: flex;
}

.scheduler-monitor-detail dl > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.scheduler-monitor-detail dt {
  color: #7b898d;
}

.scheduler-monitor-detail dd {
  text-align: right;
  color: #35555a;
  margin: 0;
  font-weight: 700;
}

.scheduler-error-box {
  color: #963d3d;
  background: #fff5f5;
  border: 1px solid #f0cccc;
  border-radius: 10px;
  gap: 4px;
  padding: 11px 12px;
  display: grid;
}

.scheduler-error-box span {
  word-break: break-word;
  line-height: 1.45;
}

.operations-next-card {
  gap: 16px;
  padding: 22px;
  display: grid;
}

.operations-next-card h2 {
  margin: 2px 0 0;
}

.operations-next-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.operations-next-grid > div {
  background: #fbfdfd;
  border: 1px solid #e0e9ea;
  border-radius: 13px;
  gap: 6px;
  padding: 15px;
  display: grid;
}

.operations-next-grid small {
  color: #78898d;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

.operations-next-grid strong {
  color: #24464b;
  font-size: 13px;
}

.operations-next-grid span {
  color: #728388;
  line-height: 1.45;
}

.operations-table-wrap {
  border-radius: 16px;
}

.operations-table-wrap td {
  vertical-align: top;
}

.shell[data-admin-theme="MODERN"] .scheduler-monitor-card, .shell[data-admin-theme="MODERN"] .operations-summary-card, .shell[data-admin-theme="MODERN"] .operations-next-card {
  border-color: #dce9ea;
  box-shadow: 0 8px 26px #1f53550b;
}

@media (max-width: 1180px) {
  .operations-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-scheduler-grid, .operations-next-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .operations-summary-grid, .scheduler-monitor-metrics {
    grid-template-columns: 1fr;
  }

  .operations-section-title {
    display: grid;
  }

  .operations-cadence-pill {
    justify-self: start;
  }

  .scheduler-monitor-head {
    display: grid;
  }

  .scheduler-state {
    justify-self: start;
  }
}

.form-process-header {
  align-items: flex-end;
}

.form-process-header .eyebrow {
  margin: 9px 0 4px;
  display: block;
}

.form-process-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.form-process-summary-card {
  gap: 6px;
  min-height: 112px;
  display: grid;
}

.form-process-summary-card small {
  color: #74858a;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.form-process-summary-card strong {
  color: #21444a;
  font-size: 17px;
}

.form-process-summary-card span {
  color: #7b898d;
}

.form-process-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(290px, .72fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.form-process-panel {
  padding: 22px;
}

.form-process-side {
  position: sticky;
  top: 92px;
}

.form-process-side-card {
  padding: 18px;
}

.form-process-side-card h3 {
  margin: 7px 0 14px;
}

.form-process-timeline {
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.form-process-step {
  background: #fbfdfd;
  border: 1px solid #e1e9ea;
  border-radius: 14px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding: 15px;
  display: grid;
}

.form-process-step.active {
  background: #f5fcfb;
  border-color: #8dd7d3;
  box-shadow: 0 0 0 2px #25b7b312;
}

.form-process-step-index {
  color: #31716f;
  background: #edf5f5;
  border-radius: 11px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 700;
  display: grid;
}

.form-process-step.active .form-process-step-index {
  color: #137d79;
  background: #dff5f3;
}

.form-process-step-main {
  gap: 8px;
  display: grid;
}

.form-process-step-title {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.form-process-step-title strong {
  color: #26454a;
  font-size: 13px;
}

.form-process-step-meta {
  color: #728287;
  flex-wrap: wrap;
  gap: 7px 14px;
  display: flex;
}

.form-process-step-meta b {
  color: #4f676c;
}

.form-process-note {
  color: #526a6f;
  background: #f1f5f5;
  border-radius: 9px;
  padding: 9px 10px;
}

.form-process-step-action {
  align-self: center;
}

.process-status {
  white-space: nowrap;
  color: #64747a;
  background: #eef1f2;
  border-radius: 999px;
  align-items: center;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.process-status.status-pending {
  color: #8a5a00;
  background: #fff5d9;
}

.process-status.status-waiting {
  color: #66747b;
  background: #f2f4f6;
}

.process-status.status-approved {
  color: #187346;
  background: #e4f8ec;
}

.process-status.status-rejected {
  color: #a33;
  background: #fff0f0;
}

.process-status.status-cancelled {
  color: #697177;
  background: #f1f2f4;
}

.process-status.status-submitted {
  color: #315e86;
  background: #eef6ff;
}

.form-process-data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.form-process-data-grid > div {
  background: #fafcfc;
  border: 1px solid #e5ecee;
  border-radius: 11px;
  gap: 5px;
  padding: 12px 13px;
  display: grid;
}

.form-process-data-grid > div.wide {
  grid-column: 1 / -1;
}

.form-process-data-grid span {
  color: #728287;
}

.form-process-data-grid b {
  color: #28484d;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.downstream-panel {
  background: linear-gradient(#fff, #f8fcfb);
  border-color: #cfe7e5;
}

.form-process-owner {
  background: #f6fafa;
  border: 1px solid #e0eaeb;
  border-radius: 12px;
  gap: 6px;
  margin-bottom: 12px;
  padding: 13px;
  display: grid;
}

.form-process-owner strong {
  color: #21464b;
}

.form-process-owner span {
  color: #337875;
  font-weight: 700;
}

.form-process-owner b {
  font-size: 12px;
}

.form-process-owner small {
  color: #74858a;
  line-height: 1.45;
}

.form-process-push {
  width: 100%;
}

.form-process-delivery-list {
  gap: 0;
  display: grid;
}

.form-process-delivery-list > div {
  border-bottom: 1px dashed #e1e8e9;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.form-process-delivery-list > div:last-child {
  border-bottom: 0;
}

.form-process-delivery-list span {
  color: #74858a;
}

.form-process-delivery-list b {
  text-align: right;
  color: #29494e;
}

.form-process-help-list {
  color: #687b80;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 18px;
  line-height: 1.5;
  display: grid;
}

.status-badge.pending {
  color: #8b5b00;
  background: #fff4d6;
}

.shell[data-admin-theme="MODERN"] .form-process-summary-card, .shell[data-admin-theme="MODERN"] .form-process-panel, .shell[data-admin-theme="MODERN"] .form-process-side-card {
  border-color: #dce9ea;
  box-shadow: 0 7px 24px #1f53550b;
}

@media (max-width: 1100px) {
  .form-process-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .form-process-side {
    position: static;
  }
}

@media (max-width: 700px) {
  .form-process-summary-grid, .form-process-data-grid {
    grid-template-columns: 1fr;
  }

  .form-process-step {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .form-process-step-action {
    grid-column: 2;
  }

  .form-process-step-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-process-data-grid > div.wide {
    grid-column: auto;
  }
}

.m-approval-history {
  background: linear-gradient(#fcfbff, #fff);
  border: 1px solid #e5e1f5;
  border-radius: 14px;
  margin-top: 12px;
  overflow: hidden;
}

.m-approval-history-head {
  background: #f8f5ff;
  border-bottom: 1px solid #eeeaf8;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.m-approval-history-head > div {
  gap: 2px;
  display: grid;
}

.m-approval-history-head strong {
  color: #3c3158;
  font-size: 12px;
}

.m-approval-history-head small {
  color: #817797;
  font-size: 10px;
}

.m-approval-history-head > span {
  color: #6d43c1;
  background: #ece5ff;
  border-radius: 999px;
  flex: none;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
}

.m-approval-history-list {
  display: grid;
}

.m-approval-history-item {
  border-bottom: 1px solid #f0edf6;
  grid-template-columns: minmax(120px, .85fr) minmax(160px, 1.15fr) minmax(110px, .7fr);
  gap: 10px 14px;
  padding: 13px 14px;
  display: grid;
}

.m-approval-history-item:last-child {
  border-bottom: 0;
}

.m-approval-history-step {
  align-content: start;
  gap: 3px;
  display: grid;
}

.m-approval-history-step > span {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8d84a1;
  font-size: 9px;
  font-weight: 700;
}

.m-approval-history-step > b {
  color: #332b46;
  font-size: 11px;
}

.m-approval-history-meta {
  align-content: start;
  gap: 3px;
  display: grid;
}

.m-approval-history-meta > span {
  color: #413851;
  font-size: 11px;
  font-weight: 700;
}

.m-approval-history-meta > small {
  color: #8a8199;
  font-size: 9px;
}

.m-approval-history-decision {
  align-content: start;
  justify-items: end;
  gap: 4px;
  display: grid;
}

.m-approval-history-decision > small {
  color: #8a8199;
  font-size: 9px;
}

.m-history-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.m-history-status.status-approved {
  color: #177348;
  background: #e6f8ef;
}

.m-history-status.status-rejected {
  color: #b42318;
  background: #feeceb;
}

.m-history-status.status-skipped {
  color: #66727b;
  background: #eef1f4;
}

.m-history-status.status-waiting, .m-history-status.status-pending {
  color: #8b6406;
  background: #fff6dc;
}

.m-approval-history-note {
  background: #f7f7fa;
  border-radius: 10px;
  grid-column: 1 / -1;
  padding: 9px 10px;
}

.m-approval-history-note > small {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #91899d;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 700;
  display: block;
}

.m-approval-history-note > p {
  color: #4f465c !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

@media (max-width: 640px) {
  .m-approval-history-item {
    grid-template-columns: 1fr;
  }

  .m-approval-history-decision {
    justify-items: start;
  }

  .m-approval-history-note {
    grid-column: auto;
  }
}

.m-approval-actions .m-approve-form, .m-approval-actions .m-reject-form {
  gap: 7px;
  display: grid;
}

.m-approval-actions .m-approve-form input, .m-approval-actions .m-reject-form input {
  min-height: 40px;
}

.procurement-inline-vendor-flow {
  background: #f8fcfb;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  display: grid;
}

.procurement-inline-vendor-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.procurement-inline-vendor-head > div {
  gap: 3px;
  display: grid;
}

.procurement-inline-vendor-form {
  border-top: 1px dashed #dce8e8;
  max-width: none;
  margin-top: 12px;
  padding-top: 14px;
}

.procurement-po-create-form {
  border-top: 1px solid #e6eeee;
  max-width: none;
  margin-top: 18px;
  padding-top: 18px;
}

.summary-card {
  background: #fff;
  border: 1px solid #dfe8ea;
  border-radius: 14px;
  gap: 6px;
  padding: 15px 16px;
  display: grid;
}

.summary-card > span {
  color: #657a80;
  font-size: 11px;
  font-weight: 700;
}

.summary-card > strong {
  color: #183f46;
  font-size: 22px;
  line-height: 1;
}

.summary-card > small {
  color: #7d8c90;
  font-size: 11px;
}

.details-card {
  background: #fbfdfd;
  border: 1px solid #e0e8ea;
  border-radius: 12px;
  padding: 12px;
}

.details-card > summary {
  cursor: pointer;
  color: #24565c;
  font-weight: 700;
}

.security-session-header {
  align-items: flex-end;
}

.security-kicker {
  color: #257c78;
  letter-spacing: .07em;
  background: #edf7f6;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.security-kicker.danger {
  color: #b43c32;
  background: #fff0ee;
}

.security-header-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.security-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.security-summary {
  gap: 5px;
  padding: 16px;
  display: grid;
}

.security-summary small {
  color: #708286;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.security-summary strong {
  color: #21464a;
  font-size: 27px;
  line-height: 1;
}

.security-summary span {
  color: #7c8d90;
}

.security-emergency-card {
  background: linear-gradient(#fff, snow);
  border-color: #f0d2ce;
}

.security-card-head h2 {
  margin: 7px 0 4px;
}

.security-kick-all-form {
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.security-kick-all-form label {
  color: #52656a;
  gap: 6px;
  font-weight: 750;
  display: grid;
}

.security-warning-note {
  margin: 10px 0 0;
}

.security-session-table-wrap table {
  min-width: 1180px;
}

.security-presence {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.security-presence.online {
  color: #1f7a43;
  background: #e8f8ee;
}

.security-presence.idle {
  color: #8b6305;
  background: #fff6dd;
}

.security-presence.revoked {
  color: #a43b35;
  background: #feeceb;
}

.security-presence.expired {
  color: #68757a;
  background: #f0f2f3;
}

.security-revoked-reason {
  color: #8a6662;
  max-width: 220px;
  margin-top: 5px;
  line-height: 1.35;
  display: block;
}

.security-inline-kick {
  gap: 6px;
  min-width: 220px;
  display: flex;
}

.security-inline-kick input {
  min-width: 130px;
  height: 34px;
}

.security-ua {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  display: inline-block;
  overflow: hidden;
}

@media (max-width: 1180px) {
  .security-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .security-kick-all-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .security-summary-grid {
    grid-template-columns: 1fr;
  }

  .security-header-actions {
    width: 100%;
  }

  .security-header-actions .button {
    flex: 1;
  }

  .security-inline-kick {
    min-width: 190px;
  }
}

.button.danger {
  color: #fff;
  box-shadow: none;
  background: #c94036;
  border-color: #c94036;
}

.button.danger:hover {
  background: #b7352c;
  border-color: #b7352c;
}

.access-matrix-header {
  align-items: flex-end;
}

.access-matrix-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.access-matrix-layout {
  grid-template-columns: minmax(280px, .72fr) minmax(0, 2fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.access-matrix-sidebar {
  max-height: calc(100vh - 110px);
  padding: 16px;
  position: sticky;
  top: 88px;
  overflow: auto;
}

.access-matrix-tabs {
  background: #f5f9f9;
  border: 1px solid #dfe8e9;
  border-radius: 12px;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  display: grid;
}

.access-matrix-tabs a {
  text-align: center;
  color: #61767a;
  border-radius: 9px;
  padding: 9px 8px;
  font-weight: 700;
  text-decoration: none;
}

.access-matrix-tabs a.active {
  color: #176c69;
  background: #fff;
  box-shadow: 0 2px 10px #1f535514;
}

.access-matrix-create-form {
  border-bottom: 1px solid #e6eeee;
  gap: 9px;
  padding: 16px 2px;
  display: grid;
}

.access-matrix-create-form .two-col {
  gap: 8px;
}

.access-target-list {
  gap: 7px;
  padding-top: 14px;
  display: grid;
}

.access-target-list > a {
  color: #27474c;
  background: #fff;
  border: 1px solid #e1e9ea;
  border-radius: 11px;
  gap: 3px;
  padding: 11px 12px;
  text-decoration: none;
  display: grid;
}

.access-target-list > a span {
  color: #7b8b8f;
  font-size: 10px;
}

.access-target-list > a.active {
  background: #effaf9;
  border-color: #63c7c2;
  box-shadow: 0 0 0 2px #25b7b314;
}

.access-matrix-editor {
  padding: 0;
  overflow: hidden;
}

.access-matrix-editor-head {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e6eeee;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  display: flex;
}

.access-matrix-editor-head h2 {
  margin: 8px 0 5px;
  font-size: 20px;
}

.access-matrix-editor-head p {
  max-width: 760px;
  margin: 0;
  line-height: 1.5;
}

.access-inheritance-summary {
  text-align: right;
  background: #fff;
  border: 1px solid #dce9e9;
  border-radius: 12px;
  gap: 4px;
  min-width: 150px;
  padding: 12px 14px;
  display: grid;
}

.access-inheritance-summary span {
  color: #77898d;
  font-size: 10px;
}

.access-inheritance-summary strong {
  color: #23565a;
  font-size: 18px;
}

.access-permission-form {
  padding: 0 24px 22px;
  display: grid;
}

.permission-group-card {
  border: 0;
  border-bottom: 1px solid #e9eeee;
  padding: 0;
}

.permission-group-card > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  list-style: none;
  display: flex;
}

.permission-group-card > summary::-webkit-details-marker {
  display: none;
}

.permission-group-card > summary > div {
  gap: 3px;
  display: grid;
}

.permission-group-card > summary strong {
  color: #1f4045;
  font-size: 14px;
}

.permission-group-card > summary span {
  color: #77888c;
  font-size: 11px;
}

.permission-group-card > summary > b {
  color: #2b7774;
  background: #eef7f6;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 10px;
}

.permission-checkbox-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 0 18px;
  display: grid;
}

.permission-choice {
  background: #fcfefe;
  border: 1px solid #e0e8e9;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 12px;
  display: flex;
}

.permission-choice:hover {
  background: #fff;
  border-color: #bfdedc;
}

.permission-choice.protected {
  opacity: .78;
  background: #f6f7f8;
}

.permission-choice-copy {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.permission-choice-copy > strong {
  color: #29494e;
  font-size: 11px;
}

.permission-choice-copy code {
  color: #89979a;
  overflow-wrap: anywhere;
  font-size: 9px;
}

.permission-source {
  color: #24744c;
  background: #e9f7f1;
  border-radius: 999px;
  width: max-content;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.permission-toggle, .permission-override-options label {
  white-space: nowrap;
  color: #576d72;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.permission-toggle input, .permission-override-options input {
  accent-color: #25a9a5;
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
}

.permission-override-options {
  gap: 7px;
  min-width: 84px;
  display: grid;
}

.permission-override-options label:last-child {
  color: #9b4c45;
}

.access-matrix-savebar {
  background: linear-gradient(#fff0, #fff 24%);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 0 0;
  display: flex;
  position: sticky;
  bottom: 0;
}

.access-matrix-savebar > div {
  gap: 3px;
  display: grid;
}

.access-matrix-savebar span {
  color: #7b898d;
  font-size: 10px;
}

.access-matrix-savebar .button {
  min-width: 190px;
}

.access-policy-explainer {
  padding: 20px 22px;
}

.access-policy-flow {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  display: flex;
}

.access-policy-flow span, .access-policy-flow strong {
  background: #f0f7f7;
  border: 1px solid #dce9e9;
  border-radius: 10px;
  padding: 9px 11px;
}

.access-policy-flow strong {
  color: #1f6f6b;
  background: #e7f8f5;
}

@media (max-width: 1180px) {
  .access-matrix-layout {
    grid-template-columns: 1fr;
  }

  .access-matrix-sidebar {
    max-height: none;
    position: static;
  }

  .permission-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .access-matrix-metrics, .permission-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .access-matrix-editor-head, .access-matrix-savebar {
    flex-direction: column;
    align-items: stretch;
  }

  .access-permission-form {
    padding-left: 16px;
    padding-right: 16px;
  }

  .access-matrix-tabs {
    grid-template-columns: 1fr;
  }

  .access-inheritance-summary {
    text-align: left;
  }
}

.permission-override-options select {
  border-radius: 9px;
  min-width: 105px;
  min-height: 34px;
  padding: 6px 28px 6px 8px;
  font-size: 10px;
}

.m-dynamic-greeting {
  background: #fff;
  border: 1px solid #e4eaec;
  border-radius: 24px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 160px;
  margin: 0;
  padding: 22px 24px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px #1f484f0f;
}

.m-dynamic-greeting-copy {
  z-index: 2;
  gap: 5px;
  max-width: 68%;
  display: grid;
  position: relative;
}

.m-dynamic-greeting-copy p {
  border-radius: 999px;
  width: max-content;
  margin: 0 0 2px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.m-dynamic-greeting-copy h1 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.08;
}

.m-dynamic-greeting-copy span {
  color: #66777b;
  max-width: 620px;
  line-height: 1.55;
}

.m-dynamic-greeting-copy small {
  color: #89979a;
  text-transform: capitalize;
  margin-top: 2px;
}

.m-dynamic-greeting-image {
  z-index: 1;
  object-fit: contain;
  width: 210px;
  max-width: 31%;
  height: 125px;
  position: relative;
}

.m-dynamic-greeting.morning {
  background: linear-gradient(125deg, #fff 0%, #f2fcf8 56%, #e8f8f1 100%);
  border-color: #dceee7;
}

.m-dynamic-greeting.morning .m-dynamic-greeting-copy p {
  color: #23785d;
  background: #e9f8f1;
}

.m-dynamic-greeting.afternoon {
  background: linear-gradient(125deg, #fff 0%, #fff9ed 56%, #fff0e2 100%);
  border-color: #f1e4d4;
}

.m-dynamic-greeting.afternoon .m-dynamic-greeting-copy p {
  color: #a46816;
  background: #fff0d9;
}

.m-dynamic-greeting.evening {
  background: linear-gradient(125deg, #fff 0%, #f2f2fa 56%, #e5e7f4 100%);
  border-color: #dfe1ee;
}

.m-dynamic-greeting.evening .m-dynamic-greeting-copy p {
  color: #54547e;
  background: #e9e9f7;
}

.m-dynamic-greeting.evening .m-dynamic-greeting-copy h1 {
  color: #353751;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning {
  background: linear-gradient(125deg, #fff 0%, #effbf6 55%, #e4f7ee 100%);
  border-color: #d8ede4;
  box-shadow: 0 16px 38px #43977617;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning:before {
  background: #dff7ec;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning .youth-kicker {
  color: #2e8768;
  background: #e5f8ef;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning h1 {
  color: #2d6f59;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon {
  background: linear-gradient(125deg, #fff 0%, #fff9ea 54%, #ffeadb 100%);
  border-color: #f0dfcc;
  box-shadow: 0 16px 38px #c1894117;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon:before {
  background: #fff0cf;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon .youth-kicker {
  color: #a66d1c;
  background: #fff0d7;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon h1 {
  color: #815923;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening {
  background: linear-gradient(125deg, #fff 0%, #f2f1fb 54%, #e5e6f5 100%);
  border-color: #dedff0;
  box-shadow: 0 16px 38px #4648771a;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening:before {
  background: #e1e2f5;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening .youth-kicker {
  color: #575784;
  background: #e9e8f8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening h1 {
  color: #3e405f;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening p {
  color: #666783;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image {
  flex: 0 0 240px;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 130px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image img {
  object-fit: contain;
  filter: drop-shadow(0 12px 18px #33474c14);
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 720px) {
  .m-dynamic-greeting {
    min-height: 145px;
    padding: 18px;
  }

  .m-dynamic-greeting-copy {
    max-width: 72%;
  }

  .m-dynamic-greeting-image {
    width: 120px;
    max-width: 28%;
    height: 90px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image {
    flex-basis: 110px;
    width: 110px;
    height: 92px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
    max-width: 72%;
  }
}

@media (max-width: 440px) {
  .m-dynamic-greeting {
    min-height: 135px;
  }

  .m-dynamic-greeting-copy {
    max-width: 75%;
  }

  .m-dynamic-greeting-image {
    width: 92px;
    height: 76px;
  }

  .m-dynamic-greeting-copy h1 {
    font-size: 24px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image {
    flex-basis: 84px;
    width: 84px;
    height: 76px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
    max-width: 74%;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome p {
    font-size: 11px;
    line-height: 1.45;
  }
}

.company-profile-card {
  padding: 0;
  overflow: hidden;
}

.company-profile-head {
  background: linear-gradient(#fff, #fafdfc);
  border-bottom: 1px solid #e7eeee;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  display: flex;
}

.company-profile-head h2 {
  margin: 0 0 4px;
}

.company-profile-head p {
  margin: 0;
}

.company-logo-preview {
  color: #237f69;
  background: #e9f8f3;
  border: 1px solid #d6ebe5;
  border-radius: 16px;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 18px;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.company-logo-preview img {
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 100%;
}

.company-profile-form {
  padding: 0 26px 26px;
}

@media (max-width: 760px) {
  .company-profile-head, .company-profile-form {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.company-logo-upload-panel {
  background: #fbfdfd;
  border: 1px solid #dfe9ea;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 18px 0 4px;
  padding: 16px 18px;
  display: flex;
}

.company-logo-upload-panel h3 {
  margin: 0 0 4px;
}

.company-logo-upload-panel p {
  margin: 0;
}

.company-logo-upload-form {
  align-items: center;
  gap: 10px;
  min-width: min(100%, 520px);
  display: flex;
}

.company-logo-upload-form input[type="file"] {
  background: #fff;
  border: 1px solid #dbe4e6;
  border-radius: 10px;
  flex: 1;
  min-height: 40px;
  padding: 8px;
}

@media (max-width: 760px) {
  .company-logo-upload-panel, .company-logo-upload-form {
    flex-direction: column;
    align-items: stretch;
  }

  .company-logo-upload-form {
    min-width: 0;
  }
}

.crm-v2-header {
  align-items: flex-end;
}

.crm-v2-hero {
  margin-top: 4px;
}

.crm-ticket-summary {
  padding: 20px 22px;
}

.crm-timeline {
  gap: 0;
  display: grid;
}

.crm-timeline-item {
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 0 0 18px;
  display: grid;
  position: relative;
}

.crm-timeline-item:before {
  content: "";
  background: #dce9e8;
  width: 1px;
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 6px;
}

.crm-timeline-item:last-child:before {
  display: none;
}

.crm-timeline-dot {
  z-index: 1;
  background: #3eb8aa;
  border: 3px solid #e7f8f5;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin-top: 5px;
}

.crm-timeline-content {
  background: #fff;
  border: 1px solid #e2ecec;
  border-radius: 14px;
  padding: 13px 14px;
}

.crm-timeline-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.crm-timeline-head span {
  color: #7b898c;
  white-space: nowrap;
  font-size: 11px;
}

.crm-timeline-content p {
  margin: 7px 0;
  line-height: 1.5;
}

.crm-timeline-content small {
  color: #687a7e;
  margin-top: 7px;
  display: block;
}

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

.detail-grid div {
  border: 1px solid #e3ebec;
  border-radius: 12px;
  padding: 12px;
}

.detail-grid dt {
  color: #78888c;
  margin-bottom: 5px;
  font-size: 11px;
}

.detail-grid dd {
  margin: 0;
  font-weight: 700;
}

.m-metric-row {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.m-metric-row > div {
  text-align: center;
  background: #f5fbfa;
  border-radius: 14px;
  gap: 3px;
  padding: 12px 8px;
  display: grid;
}

.m-metric-row b {
  font-size: 19px;
}

.m-metric-row span {
  color: #758589;
  font-size: 10px;
}

@media (max-width: 760px) {
  .crm-timeline-head {
    display: grid;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }
}

.crm-dashboard-filter {
  padding: 12px 16px;
}

.crm-activity-mix {
  gap: 12px;
  display: grid;
}

.crm-activity-mix > div {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
  display: grid;
}

.crm-activity-mix span {
  color: #52676b;
  font-weight: 700;
}

.crm-activity-mix strong {
  color: #1d4347;
}

.crm-activity-mix i {
  background: linear-gradient(90deg, #35bdb7, #9ee5d9);
  border-radius: 999px;
  grid-column: 1 / -1;
  min-width: 2px;
  max-width: 100%;
  height: 7px;
  display: block;
}

.crm-sla-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  display: grid;
}

.crm-sla-form label {
  gap: 6px;
  display: grid;
}

.crm-sla-form .check-row {
  align-items: center;
  min-height: 42px;
  display: flex;
}

.crm-sla-strip {
  border-top: 1px solid #e7eeee;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  display: grid;
}

.crm-sla-strip > div {
  background: #f7fbfb;
  border: 1px solid #e0ebeb;
  border-radius: 12px;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.crm-sla-strip span {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #75888c;
  font-size: 10px;
}

.crm-sla-strip b {
  font-size: 11px;
}

.danger-text {
  color: #bf3d35 !important;
}

.success-text {
  color: #198256 !important;
}

.crm-visit-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.crm-map-card {
  padding: 14px;
  overflow: hidden;
}

.crm-map-card iframe {
  background: #eef4f4;
  border: 0;
  border-radius: 14px;
  width: 100%;
  height: 520px;
}

.crm-map-focus {
  gap: 4px;
  padding: 14px 4px 2px;
  display: grid;
}

.crm-map-focus strong {
  font-size: 15px;
}

.crm-map-focus span, .crm-map-focus small {
  color: #6f8185;
}

.crm-visit-list {
  max-height: 650px;
  padding: 16px;
  overflow: auto;
}

.crm-visit-list h2 {
  margin-top: 0;
}

.crm-visit-row {
  color: inherit;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  text-decoration: none;
  display: flex;
}

.crm-visit-row:hover, .crm-visit-row.active {
  background: #f1fbf9;
  border-color: #cfeae5;
}

.crm-visit-row > div:first-child {
  gap: 3px;
  display: grid;
}

.crm-visit-row span, .crm-visit-row small {
  color: #708287;
}

.learning-pill.status-overdue {
  color: #a83c34;
  background: #fff0ef;
  border: 1px solid #f0c8c4;
}

@media (max-width: 1050px) {
  .crm-sla-form, .crm-sla-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-visit-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .crm-sla-form, .crm-sla-strip {
    grid-template-columns: 1fr;
  }

  .crm-map-card iframe {
    height: 360px;
  }
}

.mobile-primary-action {
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
}

.mobile-inline-actions {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.segmented-control {
  background: #78829614;
  border-radius: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  display: grid;
}

.segmented-control button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 8px;
  font-weight: 700;
}

.segmented-control button.active {
  background: #fff;
  box-shadow: 0 1px 5px #1423371f;
}

.segmented-control button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.compact-card h2 {
  margin-top: 0;
}

.visit-box {
  background: #e1faf259;
  border: 1px dashed #46968259;
  border-radius: 14px;
  padding: 12px;
}

@media (max-width: 720px) {
  .mobile-inline-actions .button {
    width: auto;
  }

  .segmented-control {
    grid-template-columns: 1fr 1fr;
  }
}

.m-brand-line {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.m-company-logo {
  object-fit: contain;
  background: #fff;
  border: 1px solid #94a3b847;
  border-radius: 8px;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 3px;
}

.brand-logo {
  object-fit: contain;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 4px;
}

.crm-hub-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.crm-hub-card {
  color: inherit;
  min-height: 180px;
  padding: 24px;
  text-decoration: none;
  display: block;
}

.crm-hub-card h2 {
  margin: 12px 0 8px;
}

.crm-hub-card p {
  color: var(--muted);
  line-height: 1.6;
}

.crm-hub-card > strong {
  margin-top: 14px;
  display: inline-block;
}

.crm-hub-card.disabled {
  opacity: .7;
}

.crm-calendar-layout {
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, .75fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.crm-calendar-card, .crm-calendar-side {
  padding: 20px;
}

.crm-calendar-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.crm-calendar-toolbar h2 {
  margin: 0;
}

.crm-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.crm-calendar-weekdays {
  text-align: center;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.crm-calendar-day {
  border: 1px solid var(--border);
  min-height: 116px;
  color: inherit;
  background: var(--card);
  border-radius: 14px;
  padding: 10px;
  text-decoration: none;
  transition: all .15s;
}

.crm-calendar-day:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.crm-calendar-day.selected {
  outline: 2px solid var(--accent);
  background: color-mix(in srgb,var(--accent) 5%,var(--card));
}

.crm-calendar-day.blank {
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: 0;
}

.crm-calendar-events {
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  display: flex;
}

.crm-calendar-event {
  background: color-mix(in srgb,var(--accent) 10%,var(--card));
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 8px;
  padding: 4px 6px;
  font-size: .9em;
  display: block;
  overflow: hidden;
}

.crm-calendar-event.completed {
  opacity: .65;
  text-decoration: line-through;
}

.crm-calendar-event.cancelled {
  opacity: .5;
  text-decoration: line-through;
}

.crm-email-setting {
  padding: 20px;
}

@media (max-width: 900px) {
  .crm-hub-grid, .crm-calendar-layout {
    grid-template-columns: 1fr;
  }

  .crm-calendar-day {
    min-height: 88px;
    padding: 7px;
  }

  .crm-calendar-event {
    font-size: .78em;
  }

  .crm-calendar-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .crm-calendar-grid {
    gap: 4px;
  }

  .crm-calendar-day {
    border-radius: 10px;
    min-height: 68px;
  }

  .crm-calendar-events {
    display: none;
  }

  .crm-calendar-toolbar h2 {
    font-size: 16px;
  }
}

.crm-visit-requirement {
  border: 1px solid var(--border, #d9e4e6);
  background: #fff8e6bf;
  border-radius: 12px;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}

.crm-visit-requirement strong {
  white-space: nowrap;
}

.crm-visit-requirement span {
  opacity: .78;
}

.crm-calendar-status-legend, .my-calendar-legend {
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  display: flex;
}

.crm-calendar-status-legend span, .my-calendar-legend span {
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.crm-calendar-event.scheduled, .crm-calendar-status-legend .scheduled, .my-calendar-event.crm, .my-calendar-legend .crm {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.crm-calendar-event.overdue, .crm-calendar-status-legend .overdue, .my-calendar-event.overdue, .my-calendar-detail.overdue, .my-calendar-legend .overdue {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

.crm-calendar-event.completed, .crm-calendar-status-legend .completed, .my-calendar-event.done, .my-calendar-detail.done, .my-calendar-legend .done {
  color: #166534;
  opacity: 1;
  background: #dcfce7;
  border-color: #86efac;
  text-decoration: none;
}

.crm-calendar-event.cancelled, .crm-calendar-status-legend .cancelled, .my-calendar-event.cancelled, .my-calendar-detail.cancelled, .my-calendar-legend .cancelled {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
  text-decoration: line-through;
}

.my-calendar-shell {
  padding: 16px;
}

.my-calendar-toolbar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.my-calendar-toolbar h2 {
  margin: 0;
  font-size: 16px;
}

.my-calendar-toolbar > a {
  border: 1px solid var(--border);
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  text-decoration: none;
  display: grid;
}

.my-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.my-calendar-grid.weekdays {
  text-align: center;
  color: var(--muted);
  margin-bottom: 5px;
  font-size: 11px;
}

.my-calendar-day {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 11px;
  min-height: 84px;
  padding: 6px;
  overflow: hidden;
}

.my-calendar-day.blank {
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: 0;
}

.my-calendar-day.selected {
  outline: 2px solid var(--accent);
}

.my-calendar-day.today .my-calendar-date {
  background: var(--accent);
  color: #fff;
}

.my-calendar-date {
  width: 25px;
  height: 25px;
  color: inherit;
  border-radius: 50%;
  place-items: center;
  font-weight: 700;
  text-decoration: none;
  display: grid;
}

.my-calendar-events {
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  display: flex;
}

.my-calendar-event {
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #0000;
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 9px;
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.my-calendar-event.progress, .my-calendar-detail.progress, .my-calendar-legend .progress {
  color: #0369a1;
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.my-calendar-event.todo, .my-calendar-detail.todo {
  color: #be123c;
  background: #fff1f2;
  border-color: #fda4af;
}

.my-calendar-event.review, .my-calendar-detail.review, .my-calendar-legend .review {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

.my-calendar-event.training, .my-calendar-detail.training, .my-calendar-legend .training {
  color: #7e22ce;
  background: #f3e8ff;
  border-color: #d8b4fe;
}

.my-calendar-detail {
  color: inherit;
  border-left: 5px solid;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: flex;
}

.my-calendar-detail div {
  min-width: 0;
}

.my-calendar-detail small {
  font-weight: 700;
}

.my-calendar-detail strong {
  margin: 4px 0;
  display: block;
}

.my-calendar-detail p {
  color: inherit;
  opacity: .8;
  margin: 0;
}

.my-calendar-detail > span {
  white-space: nowrap;
  font-weight: 700;
}

@media (max-width: 640px) {
  .my-calendar-day {
    min-height: 64px;
    padding: 4px;
  }

  .my-calendar-events {
    display: none;
  }

  .my-calendar-legend {
    gap: 4px;
  }

  .my-calendar-legend span {
    padding: 4px 6px;
    font-size: 9px;
  }
}

.crm-calendar-view-switch {
  gap: 8px;
  margin-bottom: 14px;
  display: flex;
}

.crm-calendar-view-switch .button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.crm-calendar-day-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.crm-calendar-day-head small {
  color: var(--muted);
  font-size: 11px;
}

.crm-day-timeline {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.crm-day-slot {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  display: grid;
}

.crm-day-slot.selected {
  outline: 2px solid var(--accent);
  background: color-mix(in srgb,var(--accent) 4%,var(--card));
}

.crm-day-slot-time {
  border: 1px dashed var(--border);
  color: inherit;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 84px;
  padding: 12px;
  text-decoration: none;
  display: flex;
}

.crm-day-slot-time span {
  font-size: 18px;
  font-weight: 700;
}

.crm-day-slot-time small {
  color: var(--accent);
  margin-top: 4px;
  font-weight: 700;
}

.crm-day-slot-content {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  display: flex;
}

.crm-day-event {
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.crm-day-event p, .crm-day-event small {
  color: inherit;
  opacity: .8;
  margin: 0;
}

.crm-day-event strong {
  margin-bottom: 4px;
  display: block;
}

.crm-day-event.scheduled {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.crm-day-event.overdue {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

.crm-day-event.completed {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.crm-day-event.cancelled {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
}

@media (max-width: 900px) {
  .crm-day-slot {
    grid-template-columns: 1fr;
  }

  .crm-day-slot-time {
    min-height: auto;
  }
}

.crm-timeline-wrap {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  overflow: auto;
}

.crm-timeline-help {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 4%,var(--card));
  z-index: 4;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 11px;
  display: flex;
  position: sticky;
  left: 0;
}

.crm-timeline-help strong {
  color: var(--accent);
}

.crm-timeline {
  align-items: stretch;
  min-width: 100%;
  display: grid;
}

.crm-timeline.week {
  min-width: 1180px;
}

.crm-timeline.day {
  min-width: 540px;
}

.crm-timeline-corner, .crm-timeline-dayhead {
  z-index: 3;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  text-align: center;
  padding: 10px;
  font-weight: 700;
  position: sticky;
  top: 0;
}

.crm-timeline-corner {
  z-index: 5;
  left: 0;
}

.crm-timeline-time {
  z-index: 2;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 10px 8px;
  font-weight: 700;
  position: sticky;
  left: 0;
}

.crm-timeline-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb,var(--card) 96%,transparent);
  min-height: 58px;
  padding: 4px;
  transition: all .12s;
}

.crm-timeline-cell.drop-ready:hover {
  background: color-mix(in srgb,var(--accent) 9%,var(--card));
  outline: 2px dashed color-mix(in srgb,var(--accent) 55%,transparent);
  outline-offset: -3px;
}

.crm-timeline-event {
  border: 1px solid #0000;
  border-radius: 9px;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 3px;
  padding: 6px 7px;
  font-size: 10px;
  line-height: 1.25;
  display: flex;
}

.crm-timeline-event strong {
  font-size: 11px;
}

.crm-timeline-event span, .crm-timeline-event small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.crm-timeline-event.draggable {
  cursor: grab;
}

.crm-timeline-event.draggable:active {
  cursor: grabbing;
}

.crm-timeline-event.locked {
  cursor: not-allowed;
}

.crm-timeline-event.scheduled {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.crm-timeline-event.overdue {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

.crm-timeline-event.completed {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.crm-timeline-event.cancelled {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
  text-decoration: line-through;
}

@media (max-width: 900px) {
  .crm-calendar-view-switch {
    white-space: nowrap;
    overflow: auto;
  }

  .crm-timeline-help {
    flex-direction: column;
    align-items: flex-start;
  }

  .crm-timeline.day {
    min-width: 480px;
  }
}

.crm-calendar-day.blank, .my-calendar-day.blank {
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.crm-copy-day-panel {
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 3%,var(--card));
  border-radius: 14px;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.crm-copy-day-panel summary {
  cursor: pointer;
  font-weight: 700;
}

.crm-copy-day-form {
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.crm-copy-day-form label {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.crm-copy-day-form > span {
  padding-bottom: 12px;
  font-weight: 700;
}

.crm-copy-result {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 9px 12px;
}

.my-calendar-event.leave, .my-calendar-detail.leave, .my-calendar-legend .leave {
  color: #9d174d;
  background: #fce7f3;
  border-color: #f9a8d4;
}

.my-calendar-event.business-trip, .my-calendar-detail.business-trip, .my-calendar-legend .business-trip {
  color: #3730a3;
  background: #e0e7ff;
  border-color: #a5b4fc;
}

.my-calendar-event.company-holiday, .my-calendar-detail.company-holiday, .my-calendar-legend .company-holiday {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fdba74;
}

@media (max-width: 800px) {
  .crm-copy-day-form {
    grid-template-columns: 1fr 1fr;
  }

  .crm-copy-day-form > span {
    display: none;
  }

  .crm-copy-day-form .button {
    grid-column: 1 / -1;
  }
}

.work-calendar-panel {
  margin-top: 4px;
}

.work-section-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.work-section-head small {
  letter-spacing: .08em;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.work-section-head h2 {
  margin: 4px 0 2px;
}

.work-section-head p {
  margin: 0;
}

.work-agenda-list, .work-task-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.work-agenda-item {
  color: inherit;
  border-left: 5px solid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: grid;
}

.work-agenda-item > div:nth-child(2) {
  min-width: 0;
}

.work-agenda-item small {
  font-weight: 700;
}

.work-agenda-item strong {
  margin: 3px 0;
  display: block;
}

.work-agenda-item p {
  color: inherit;
  opacity: .75;
  margin: 0;
}

.work-agenda-date {
  border-right: 1px solid var(--border);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 10px;
  display: flex;
}

.work-agenda-date strong {
  font-size: 22px;
  line-height: 1;
}

.work-agenda-date span {
  color: var(--muted);
  font-size: 10px;
}

.work-agenda-date small {
  margin-top: 4px;
}

.work-agenda-status {
  white-space: nowrap;
  font-weight: 700;
}

.work-agenda-item.crm {
  color: #1d4ed8;
  background: #eff6ff;
}

.work-agenda-item.leave {
  color: #be185d;
  background: #fdf2f8;
}

.work-agenda-item.company-holiday {
  color: #c2410c;
  background: #fff7ed;
}

.work-agenda-item.progress {
  color: #0369a1;
  background: #f0f9ff;
}

.work-agenda-item.review {
  color: #92400e;
  background: #fffbeb;
}

.work-agenda-item.todo {
  background: var(--card);
  color: inherit;
}

.work-agenda-item.overdue {
  color: #b91c1c;
  background: #fef2f2;
}

.work-task-row {
  color: inherit;
  border-left: 5px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: flex;
}

.work-task-row div {
  min-width: 0;
}

.work-task-row small {
  color: var(--muted);
  font-weight: 700;
}

.work-task-row strong {
  margin: 4px 0;
  display: block;
}

.work-task-row p {
  color: var(--muted);
  margin: 0;
}

.work-task-row > span {
  white-space: nowrap;
  font-weight: 700;
}

.work-task-row.in_progress {
  border-left-color: #38bdf8;
}

.work-task-row.review {
  border-left-color: #f59e0b;
}

.work-task-row.overdue {
  color: #991b1b;
  background: #fef2f2;
  border-left-color: #ef4444;
}

.work-task-row.overdue p {
  color: #b91c1c;
}

@media (max-width: 640px) {
  .work-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .work-agenda-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .work-agenda-status {
    grid-column: 2;
  }

  .work-task-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-task-row > span {
    align-self: flex-end;
  }
}

.crm-recurrence-box {
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 4%,var(--card));
  border-radius: 14px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.crm-recurrence-box > div > strong {
  font-size: 13px;
}

.crm-recurrence-box p {
  margin: 3px 0 0;
}

.crm-recurrence-weekdays {
  border: 0;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
}

.crm-recurrence-weekdays legend {
  margin-bottom: 6px;
  font-weight: 700;
}

.crm-recurrence-weekdays label {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  display: inline-flex;
}

.crm-recurring-badge {
  color: #6d28d9;
  background: #ede9fe;
  border-radius: 999px;
  align-items: center;
  margin-left: 6px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.report-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.report-module-card {
  color: inherit;
  min-height: 160px;
  text-decoration: none;
  transition: all .18s;
}

.report-module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #0f172a14;
}

.report-module-code {
  color: #197c78;
  letter-spacing: .04em;
  background: #edf7f5;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.report-module-card h3 {
  margin: 14px 0 6px;
  font-size: 18px;
}

.report-module-card p {
  color: var(--muted);
  line-height: 1.55;
}

.report-open {
  margin-top: 16px;
  font-weight: 700;
  display: block;
}

.report-scope-note {
  border-left: 4px solid var(--accent);
}

.report-scope-note p {
  color: var(--muted);
  margin-bottom: 0;
}

.report-filter-bar {
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  display: flex;
}

.report-filter-form {
  align-items: end;
  gap: 12px;
  display: flex;
}

.report-filter-form label {
  min-width: 160px;
}

.report-scope-pill {
  background: #f3f8f8;
  border-radius: 12px;
  padding: 10px 14px;
}

.report-scope-pill small, .report-scope-pill strong {
  display: block;
}

.report-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.report-metric small {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
}

.report-metric strong {
  margin-top: 8px;
  font-size: 24px;
  display: block;
}

.report-breakdown-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.report-bar-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.report-bar-row > div:first-child {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.report-bar-track {
  background: #edf2f2;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.report-bar-track i {
  background: var(--accent);
  border-radius: inherit;
  height: 100%;
  display: block;
}

.crm-report-model {
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 18px;
  display: grid;
}

.crm-report-model span {
  text-align: center;
  background: #f2faf8;
  border-radius: 12px;
  padding: 12px 8px;
  font-weight: 700;
}

.report-table {
  max-height: 620px;
}

.report-table thead th {
  background: var(--card);
  z-index: 1;
  position: sticky;
  top: 0;
}

.report-mobile-filter {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.report-mobile-row {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 0;
  display: grid;
}

.report-mobile-row small {
  color: var(--muted);
  display: block;
}

.report-mobile-row span {
  font-weight: 700;
  display: block;
}

@media (max-width: 1100px) {
  .report-module-grid, .report-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .crm-report-model {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .report-module-grid, .report-breakdown-grid, .report-metric-grid {
    grid-template-columns: 1fr;
  }

  .report-filter-bar, .report-filter-form {
    grid-template-columns: 1fr;
    width: 100%;
    display: grid;
  }

  .crm-report-model {
    grid-template-columns: repeat(2, 1fr);
  }
}

.group-overview-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
  display: grid;
}

.group-holding-card {
  background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--card));
}

.group-bu-form {
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 2%,var(--card));
  border-radius: 16px;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  display: grid;
}

.group-bu-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.group-bu-cards article h3 {
  margin: 8px 0;
}

.group-bu-cards details {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .group-overview-grid, .group-bu-cards {
    grid-template-columns: 1fr;
  }
}

.topbar-left {
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.topbar-left .global-search {
  flex: 1;
  min-width: 260px;
  max-width: 520px;
}

.bu-switcher {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  white-space: nowrap;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  display: flex;
}

.bu-switcher-label {
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 700;
}

.bu-switcher select {
  background: none;
  border: 0;
  outline: none;
  min-width: 180px;
  padding: 4px 24px 4px 4px;
  font-weight: 700;
}

.bu-scope-banner {
  background: color-mix(in srgb,var(--accent) 8%,var(--card));
  border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 11px;
  display: flex;
}

.bu-scope-banner strong {
  color: var(--accent);
}

@media (max-width: 1100px) {
  .bu-switcher-label {
    display: none;
  }

  .bu-switcher select {
    min-width: 130px;
  }

  .topbar-left .global-search {
    min-width: 180px;
  }
}

@media (max-width: 800px) {
  .topbar-left {
    width: 100%;
  }

  .bu-switcher {
    display: none;
  }
}

.workflow-condition-box {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  margin-top: 12px;
  padding: 12px;
}

.workflow-condition-box .workflow-steps-head {
  margin-bottom: 8px;
}

.workflow-editor-redesign {
  overflow: visible;
}

.workflow-settings-disclosure {
  background: #fbfcfc;
  border: 1px solid #e3eaeb;
  border-radius: 14px;
  margin: 18px 24px 0;
  overflow: hidden;
}

.workflow-settings-disclosure > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.workflow-settings-disclosure > summary span {
  color: #738287;
  font-size: 12px;
  font-weight: 400;
}

.workflow-settings-disclosure[open] > summary {
  border-bottom: 1px solid #e8edef;
}

.workflow-settings-disclosure .workflow-core-form {
  padding: 16px;
}

.workflow-steps-head-redesign {
  padding: 22px 24px 12px;
}

.workflow-steps-head-redesign p {
  color: #75858a;
  margin: 5px 0 0;
  font-size: 12px;
}

.workflow-count-badge {
  color: #177e7a;
  background: #eef8f7;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
}

.workflow-step-list-redesign {
  gap: 16px;
}

.workflow-step-card-redesign {
  background: #fff;
  border-radius: 18px;
  padding: 0;
  display: block;
  overflow: hidden;
  box-shadow: 0 8px 24px #21494d0b;
}

.workflow-step-topbar {
  background: linear-gradient(#fbfdfd, #f8fbfb);
  border-bottom: 1px solid #edf1f2;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 18px;
  display: flex;
}

.workflow-step-identity {
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.workflow-step-identity h4 {
  margin: 2px 0 6px;
  font-size: 15px;
}

.workflow-step-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.workflow-step-chips span {
  color: #53666b;
  background: #f1f5f5;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
}

.workflow-step-chips span.always {
  color: #287756;
  background: #eaf8f1;
}

.workflow-step-chips span.conditional {
  color: #8a6015;
  background: #fff4df;
}

.workflow-step-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  display: flex;
}

.workflow-save-step {
  white-space: nowrap;
  width: auto !important;
}

.workflow-move-step {
  min-width: 36px;
  padding-left: 10px;
  padding-right: 10px;
}

.workflow-delete-step {
  white-space: nowrap;
  width: auto !important;
}

.workflow-step-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 16px;
  padding: 16px 18px 18px;
  display: grid;
}

.workflow-config-block, .workflow-rule-builder {
  background: #fbfcfc;
  border: 1px solid #e4eaeb;
  border-radius: 14px;
  margin: 0;
  padding: 15px;
}

.workflow-block-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.workflow-block-heading h4 {
  margin: 3px 0 0;
  font-size: 13px;
}

.workflow-step-name {
  gap: 6px;
  margin-bottom: 12px;
  display: grid;
}

.workflow-rule-builder.is-always {
  background: #f8fcfa;
  border-color: #dfeee7;
}

.workflow-rule-builder.is-active {
  background: #fffdfa;
  border-color: #eee4cf;
}

.workflow-rule-badge {
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
}

.workflow-rule-badge.always {
  color: #287756;
  background: #e7f7ef;
}

.workflow-rule-badge.condition {
  color: #8b6215;
  background: #fff1d6;
}

.workflow-rule-row {
  grid-template-columns: auto minmax(150px, 1.6fr) minmax(76px, .55fr) minmax(100px, .75fr);
  align-items: end;
  gap: 9px;
  display: grid;
}

.workflow-rule-if {
  color: #47585d;
  align-items: center;
  height: 42px;
  padding: 0 2px;
  font-weight: 700;
  display: flex;
}

.workflow-rule-row label {
  gap: 5px;
  display: grid;
}

.workflow-rule-row label > span {
  color: #718187;
  font-size: 10.5px;
  font-weight: 700;
}

.workflow-rule-empty {
  color: #5c7469;
  background: #eef7f2;
  border-radius: 10px;
  grid-column: 3 / -1;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  font-size: 11px;
  display: flex;
}

.workflow-rule-summary {
  color: #75531d;
  background: #fff7e8;
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 11px;
  font-size: 11px;
  display: flex;
}

.workflow-rule-summary > span {
  font-weight: 700;
}

.workflow-rule-summary small {
  color: #8a7655;
  width: 100%;
}

.workflow-approver-box .two-col {
  gap: 9px;
}

.workflow-resolve-preview {
  background: #fff;
  border-color: #e1e8e9;
  padding: 10px 12px;
}

.workflow-resolve-preview p {
  font-size: 11px;
}

.workflow-new-step-redesign {
  background: #fff;
  border-style: solid;
  padding: 0;
  overflow: hidden;
}

.workflow-new-step-redesign > summary {
  cursor: pointer;
  color: #177e7a;
  background: #f5fbfa;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.workflow-new-step-redesign > summary small {
  color: #76868a;
  font-weight: 400;
}

.workflow-new-step-redesign[open] > summary {
  border-bottom: 1px solid #e5ecec;
}

.workflow-new-step-form {
  gap: 14px;
  padding: 16px;
  display: grid;
}

@media (max-width: 1150px) {
  .workflow-step-grid {
    grid-template-columns: 1fr;
  }

  .workflow-rule-row {
    grid-template-columns: auto 1.5fr .6fr .8fr;
  }
}

@media (max-width: 760px) {
  .workflow-settings-disclosure {
    margin-left: 16px;
    margin-right: 16px;
  }

  .workflow-step-topbar {
    display: block;
  }

  .workflow-step-actions {
    justify-content: stretch;
    margin-top: 12px;
  }

  .workflow-step-actions .workflow-save-step, .workflow-step-actions .workflow-delete-step {
    flex: 1;
  }

  .workflow-save-step {
    width: auto !important;
  }

  .workflow-step-grid {
    padding: 14px;
  }

  .workflow-rule-row {
    grid-template-columns: 1fr;
  }

  .workflow-rule-if {
    height: auto;
  }

  .workflow-rule-empty {
    grid-column: auto;
  }

  .workflow-settings-disclosure > summary, .workflow-new-step-redesign > summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-step-chips {
    margin-top: 6px;
  }
}

.workflow-step-card-redesign .workflow-step-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.workflow-step-card-redesign .workflow-config-block {
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 12px 18px;
  display: grid;
}

.workflow-step-card-redesign .workflow-config-block > .workflow-block-heading {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.workflow-step-card-redesign .workflow-config-block > .workflow-step-name {
  grid-column: 1;
  margin-bottom: 0;
}

.workflow-step-card-redesign .workflow-config-block > .workflow-approver-box {
  grid-area: 2 / 2 / span 2;
  min-width: 0;
}

.workflow-step-card-redesign .workflow-approver-box .two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workflow-step-card-redesign .workflow-approver-box label, .workflow-step-card-redesign .workflow-step-name {
  min-width: 0;
}

.workflow-step-card-redesign .workflow-approver-box select, .workflow-step-card-redesign .workflow-approver-box input, .workflow-step-card-redesign .workflow-step-name input {
  width: 100%;
  min-width: 0;
}

.workflow-step-card-redesign .workflow-resolve-preview {
  box-sizing: border-box;
  width: 100%;
}

.workflow-step-card-redesign .workflow-rule-builder {
  min-width: 0;
}

.workflow-step-card-redesign .workflow-rule-row {
  grid-template-columns: 42px minmax(220px, 1.6fr) minmax(100px, .55fr) minmax(120px, .7fr);
  align-items: end;
  gap: 12px;
}

.workflow-step-card-redesign .workflow-rule-builder.is-always .workflow-rule-row {
  grid-template-columns: 42px minmax(220px, 360px) minmax(0, 1fr);
}

.workflow-step-card-redesign .workflow-rule-builder.is-always .workflow-rule-empty {
  white-space: normal;
  grid-column: auto;
  min-width: 0;
  min-height: 42px;
}

.workflow-step-card-redesign .workflow-rule-row select, .workflow-step-card-redesign .workflow-rule-row input {
  width: 100%;
  min-width: 0;
}

.workflow-step-card-redesign .workflow-rule-empty, .workflow-step-card-redesign .workflow-rule-summary {
  box-sizing: border-box;
  overflow-wrap: anywhere;
  max-width: 100%;
}

@media (max-width: 980px) {
  .workflow-step-card-redesign .workflow-config-block {
    grid-template-columns: 1fr;
  }

  .workflow-step-card-redesign .workflow-config-block > .workflow-block-heading, .workflow-step-card-redesign .workflow-config-block > .workflow-step-name, .workflow-step-card-redesign .workflow-config-block > .workflow-approver-box {
    grid-area: auto / 1;
  }

  .workflow-step-card-redesign .workflow-rule-row, .workflow-step-card-redesign .workflow-rule-builder.is-always .workflow-rule-row {
    grid-template-columns: 1fr;
  }

  .workflow-step-card-redesign .workflow-rule-if {
    height: auto;
  }
}

.loyalty-automation-builder {
  padding: 0;
  overflow: hidden;
  background: #f9fbfb !important;
  border-color: #dce7e8 !important;
}

.loyalty-builder-head {
  background: linear-gradient(135deg, #fff 0%, #fbfefe 68%, #f0fbfa 100%);
  border-bottom: 1px solid #e4edee;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 30px 22px;
  display: flex;
}

.loyalty-builder-head h2 {
  letter-spacing: -.025em;
  color: #182f34;
  margin: 10px 0 7px;
  font-size: 25px;
  line-height: 1.2;
}

.loyalty-builder-head p {
  max-width: 980px;
  margin: 0;
  line-height: 1.55;
}

.loyalty-builder-kicker {
  color: #168983;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #e7f7f5;
  border-radius: 999px;
  align-items: center;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.loyalty-builder-guide {
  color: #6f7f83;
  background: #ffffffd9;
  border: 1px solid #dce8e9;
  border-radius: 10px;
  flex: none;
  margin-top: 2px;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
}

.loyalty-builder-form {
  background: #f7f9fa;
  padding: 18px;
}

.loyalty-builder-columns {
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.loyalty-builder-left {
  gap: 16px;
  display: grid;
}

.loyalty-builder-panel {
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 16px #21484c09;
}

.loyalty-panel-title {
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  display: flex;
}

.loyalty-panel-title h3 {
  color: #203d42;
  letter-spacing: -.01em;
  margin: 0 0 3px;
  font-size: 15px;
}

.loyalty-panel-title p {
  color: #819095;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.loyalty-panel-icon {
  color: #168983;
  letter-spacing: .03em;
  background: #e8f7f6;
  border-radius: 9px;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.loyalty-field-grid {
  gap: 14px;
  display: grid;
}

.loyalty-field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loyalty-field-grid.three {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(130px, .62fr);
}

.loyalty-field-grid label, .loyalty-action-fields label {
  color: #42595e;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.loyalty-field-grid input, .loyalty-field-grid select, .loyalty-action-fields input, .loyalty-action-fields textarea {
  color: #203136;
  background: #fcfdfd;
  border: 1px solid #d9e3e5;
  border-radius: 10px;
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.loyalty-action-fields textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.5;
}

.loyalty-field-grid input:focus, .loyalty-field-grid select:focus, .loyalty-action-fields input:focus, .loyalty-action-fields textarea:focus {
  background: #fff;
  border-color: #3db0aa;
  outline: 0;
  box-shadow: 0 0 0 3px #23a9a21c;
}

.loyalty-builder-date-row {
  max-width: 72%;
  margin-top: 14px;
}

.loyalty-builder-info {
  color: #688085;
  background: linear-gradient(90deg, #f1faf9, #f8fbfb);
  border: 1px solid #d7e9e8;
  border-radius: 11px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 13px;
  display: flex;
}

.loyalty-builder-info > span {
  color: #168983;
  border: 1px solid #54aaa5;
  border-radius: 50%;
  flex: 0 0 20px;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.loyalty-builder-info p {
  margin: 1px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.loyalty-builder-actions {
  min-height: 100%;
}

.loyalty-action-box {
  background: #fcfefe;
  border: 1px solid #dfe8ea;
  border-radius: 13px;
  padding: 16px;
}

.loyalty-action-box + .loyalty-action-box {
  margin-top: 14px;
}

.loyalty-action-box.email {
  background: linear-gradient(145deg, #fcfefe, #f7fbff);
  border-color: #dce7f0;
}

.loyalty-action-box.activity {
  background: linear-gradient(145deg, #fcfefe, #f5fbf8);
  border-color: #d9e9e1;
}

.loyalty-switch-row {
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-start;
  color: #233e43 !important;
  gap: 18px !important;
  display: flex !important;
}

.loyalty-switch-row > span:first-child {
  gap: 3px;
  display: grid;
}

.loyalty-switch-row strong {
  font-size: 12px;
}

.loyalty-switch-row small {
  color: #87969a;
  font-weight: 400;
  line-height: 1.45;
}

.loyalty-switch {
  flex: 0 0 40px;
  width: 40px;
  height: 22px;
  display: inline-flex;
  position: relative;
}

.loyalty-switch input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.loyalty-switch > span {
  background: #cbd7d9;
  border-radius: 999px;
  transition: all .18s;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px #0000000a;
}

.loyalty-switch > span:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: all .18s;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 3px #0000002e;
}

.loyalty-switch input:checked + span {
  background: #15968f;
}

.loyalty-switch input:checked + span:after {
  transform: translateX(18px);
}

.loyalty-action-fields {
  border-top: 1px solid #e6eded;
  gap: 13px;
  margin-top: 15px;
  padding-top: 14px;
  display: grid;
}

.loyalty-template-vars {
  color: #87969a;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  display: flex;
}

.loyalty-template-vars code {
  color: #37716e;
  background: #eef5f5;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 10px;
}

.loyalty-builder-footer {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 16px 2px 1px;
  display: flex;
}

.loyalty-save-button {
  min-width: 230px;
  box-shadow: 0 7px 18px #168f892e;
  background: linear-gradient(135deg, #168f89, #0faaa1) !important;
  border-color: #168f89 !important;
}

.loyalty-draft-button {
  min-width: 120px;
}

@media (max-width: 1100px) {
  .loyalty-builder-columns {
    grid-template-columns: 1fr;
  }

  .loyalty-builder-date-row {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .loyalty-builder-head {
    padding: 22px 18px;
    display: grid;
  }

  .loyalty-builder-guide {
    justify-self: start;
  }

  .loyalty-builder-form {
    padding: 12px;
  }

  .loyalty-builder-panel {
    padding: 16px;
  }

  .loyalty-field-grid.two, .loyalty-field-grid.three {
    grid-template-columns: 1fr;
  }

  .loyalty-builder-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .loyalty-save-button, .loyalty-draft-button {
    width: 100%;
    min-width: 0;
  }
}

.loyalty-rule-library {
  padding: 0;
  overflow: hidden;
  background: #f8fbfb !important;
  border-color: #dce7e8 !important;
}

.loyalty-rule-library-head {
  background: linear-gradient(135deg, #fff, #f6fbfb);
  border-bottom: 1px solid #e4edee;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 26px 20px;
  display: flex;
}

.loyalty-rule-library-head h2 {
  color: #1d373c;
  letter-spacing: -.02em;
  margin: 9px 0 5px;
  font-size: 21px;
}

.loyalty-rule-library-head p {
  max-width: 840px;
  margin: 0;
  line-height: 1.5;
}

.loyalty-rule-count {
  color: #547175;
  background: #fff;
  border: 1px solid #d7e7e7;
  border-radius: 12px;
  place-items: center;
  min-width: 72px;
  padding: 10px 14px;
  display: grid;
}

.loyalty-rule-count strong {
  color: #168f89;
  font-size: 20px;
  line-height: 1;
}

.loyalty-rule-count span {
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
}

.loyalty-rule-list {
  gap: 12px;
  padding: 16px;
  display: grid;
}

.loyalty-rule-card {
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 15px;
  overflow: visible;
  box-shadow: 0 5px 18px #23484c09;
}

.loyalty-rule-main {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px 14px;
  display: flex;
}

.loyalty-rule-title {
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.loyalty-rule-title h3 {
  color: #203b40;
  margin: 0 0 7px;
  font-size: 14px;
}

.loyalty-rule-status-dot {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  box-shadow: 0 0 0 4px #00000006;
}

.loyalty-rule-status-dot.on {
  background: #17a17d;
}

.loyalty-rule-status-dot.off {
  background: #a8b4b6;
}

.loyalty-rule-badges {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.loyalty-rule-badges span {
  color: #607a7e;
  letter-spacing: .02em;
  background: #eef6f6;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 700;
}

.loyalty-rule-stat {
  text-align: right;
  flex: none;
}

.loyalty-rule-stat span {
  color: #879599;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9px;
  font-weight: 700;
  display: block;
}

.loyalty-rule-stat strong {
  color: #5e7074;
  margin-top: 4px;
  font-size: 15px;
  display: block;
}

.loyalty-rule-stat strong.positive {
  color: #138a69;
}

.loyalty-rule-grid {
  background: #fbfcfc;
  border-top: 1px solid #edf2f2;
  border-bottom: 1px solid #edf2f2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.loyalty-rule-grid > div {
  border-right: 1px solid #edf2f2;
  align-content: start;
  gap: 3px;
  min-height: 76px;
  padding: 13px 16px;
  display: grid;
}

.loyalty-rule-grid > div:last-child {
  border-right: 0;
}

.loyalty-rule-grid .label {
  color: #8b989b;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 9px;
  font-weight: 850;
}

.loyalty-rule-grid strong {
  color: #314a4e;
  font-size: 11px;
}

.loyalty-rule-grid small {
  color: #829194;
  font-size: 10px;
  line-height: 1.4;
}

.loyalty-rule-grid .status-on {
  color: #148665;
}

.loyalty-rule-grid .status-off {
  color: #8b9698;
}

.loyalty-rule-footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  display: flex;
}

.loyalty-rule-test-form {
  align-items: center;
  gap: 8px;
  display: flex;
}

.loyalty-rule-test-form select {
  color: #344c50;
  background: #fff;
  border: 1px solid #dbe5e6;
  border-radius: 9px;
  min-width: 220px;
  min-height: 35px;
  padding: 6px 10px;
}

.loyalty-rule-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  display: flex;
}

.loyalty-rule-delete {
  color: #a84f4f !important;
  background: snow !important;
  border-color: #ead7d7 !important;
}

.loyalty-rule-edit {
  position: relative;
}

.loyalty-rule-edit > summary {
  cursor: pointer;
  color: #38575b;
  background: #fff;
  border: 1px solid #dce5e6;
  border-radius: 9px;
  align-items: center;
  min-height: 32px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 700;
  list-style: none;
  display: inline-flex;
}

.loyalty-rule-edit > summary::-webkit-details-marker {
  display: none;
}

.loyalty-rule-edit[open] > summary {
  border-color: #8ac7c3;
  box-shadow: 0 0 0 3px #168f8914;
}

.loyalty-rule-edit-form {
  z-index: 20;
  background: #fff;
  border: 1px solid #d7e4e5;
  border-radius: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(720px, 82vw);
  padding: 16px;
  display: grid;
  position: absolute;
  top: 40px;
  right: 0;
  box-shadow: 0 18px 50px #1c383c2e;
}

.loyalty-rule-edit-form label {
  color: #4c6266;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.loyalty-rule-edit-form input, .loyalty-rule-edit-form select, .loyalty-rule-edit-form textarea {
  background: #fcfdfd;
  border: 1px solid #dbe4e5;
  border-radius: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
}

.loyalty-rule-edit-form textarea {
  resize: vertical;
}

.loyalty-rule-edit-form .wide {
  grid-column: 1 / -1;
}

.loyalty-rule-edit-form .check-line {
  align-self: end;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  display: flex;
}

.loyalty-rule-edit-form .check-line input {
  width: 15px;
  min-height: 15px;
}

.loyalty-rule-edit-buttons {
  justify-content: flex-end;
  display: flex;
}

@media (max-width: 1100px) {
  .loyalty-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loyalty-rule-grid > div:nth-child(2) {
    border-right: 0;
  }

  .loyalty-rule-grid > div:nth-child(-n+2) {
    border-bottom: 1px solid #edf2f2;
  }

  .loyalty-rule-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .loyalty-rule-actions {
    justify-content: flex-start;
  }

  .loyalty-rule-edit-form {
    left: 0;
    right: auto;
  }
}

@media (max-width: 700px) {
  .loyalty-rule-library-head {
    padding: 20px 16px;
  }

  .loyalty-rule-count {
    display: none;
  }

  .loyalty-rule-list {
    padding: 10px;
  }

  .loyalty-rule-main {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }

  .loyalty-rule-stat {
    text-align: left;
  }

  .loyalty-rule-grid {
    grid-template-columns: 1fr;
  }

  .loyalty-rule-grid > div {
    border-bottom: 1px solid #edf2f2;
    border-right: 0 !important;
  }

  .loyalty-rule-grid > div:last-child {
    border-bottom: 0;
  }

  .loyalty-rule-test-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .loyalty-rule-test-form select {
    width: 100%;
    min-width: 0;
  }

  .loyalty-rule-actions {
    width: 100%;
  }

  .loyalty-rule-edit-form {
    grid-template-columns: 1fr;
    width: auto;
    max-height: 78vh;
    position: fixed;
    top: 76px;
    left: 12px;
    right: 12px;
    overflow: auto;
  }

  .loyalty-rule-edit-form .wide {
    grid-column: auto;
  }
}

.loyalty-edit-page {
  gap: 18px;
  display: grid;
}

.loyalty-edit-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 4px 2px;
  display: flex;
}

.loyalty-edit-header h1 {
  margin: 8px 0 6px;
  font-size: 24px;
  line-height: 1.2;
}

.loyalty-edit-header p {
  max-width: 820px;
  margin: 0;
}

.loyalty-edit-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  display: grid;
}

.loyalty-edit-form > .loyalty-builder-panel:first-child, .loyalty-edit-form > .loyalty-builder-actions {
  grid-column: 1 / -1;
}

.loyalty-edit-actions {
  background: #fff;
  border: 1px solid #e1e9ea;
  border-radius: 14px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  display: flex;
}

.loyalty-edit-actions .loyalty-save-button {
  min-width: 180px;
}

@media (max-width: 900px) {
  .loyalty-edit-header {
    flex-direction: column;
  }

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

  .loyalty-edit-form > .loyalty-builder-panel, .loyalty-edit-form > .loyalty-builder-actions {
    grid-column: auto;
  }

  .loyalty-edit-actions {
    z-index: 5;
    position: sticky;
    bottom: 8px;
  }
}

.m-attendance-action .m-primary, .m-attendance-action .m-danger {
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: #0f766e2e;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  min-height: 52px;
  position: relative;
}

.m-attendance-action .m-primary:not(:disabled):active, .m-attendance-action .m-danger:not(:disabled):active {
  transform: scale(.985);
}

.att-review-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.att-review-summary > div {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  display: flex;
}

.att-review-legend {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.att-review-legend span {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.att-review-legend .ok {
  color: #166534;
  background: #ecfdf5;
}

.att-review-legend .issue {
  color: #9a3412;
  background: #fff7ed;
}

.att-review-legend .missing {
  color: #991b1b;
  background: #fef2f2;
}

.att-review-legend .special {
  color: #1d4ed8;
  background: #eff6ff;
}

.att-review-calendar {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.att-review-day {
  min-height: 86px;
  color: inherit;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  text-decoration: none;
  display: flex;
}

.att-review-day small {
  font-weight: 700;
}

.att-review-day b {
  font-size: 13px;
}

.att-review-day span {
  font-size: 10px;
  line-height: 1.25;
}

.att-review-day.ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.att-review-day.issue {
  background: #fff7ed;
  border-color: #fed7aa;
}

.att-review-day.missing {
  background: #fef2f2;
  border-color: #fecaca;
}

.att-review-day.special {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.att-review-day.empty {
  color: #94a3b8;
  background: #f8fafc;
}

.att-review-day.selected {
  outline-offset: 1px;
  outline: 2px solid;
}

.att-review-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
  display: grid;
}

.att-review-detail-grid > div {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.att-review-correction {
  margin-top: 14px;
}

.att-review-request-status {
  border-radius: 10px;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  display: flex;
}

.att-review-request-status.pending {
  background: #fffbeb;
}

.att-review-request-status.approved {
  background: #ecfdf5;
}

.att-review-request-status.rejected {
  background: #fef2f2;
}

.review-kpi-box {
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: start;
  gap: 14px;
  display: grid;
}

.review-kpi-box form {
  gap: 8px;
  display: grid;
}

.review-kpi-box textarea {
  min-height: 78px;
}

.inline-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.inline-actions form {
  align-items: center;
  gap: 6px;
  display: flex;
}

.inline-actions input {
  min-width: 120px;
}

@media (max-width: 760px) {
  .att-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .att-review-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .att-review-day {
    min-height: 72px;
    padding: 5px;
  }

  .att-review-day b {
    font-size: 10px;
  }

  .att-review-day span {
    font-size: 8px;
  }

  .att-review-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-kpi-box {
    grid-template-columns: 1fr;
  }
}

.att-review-weekdays {
  text-align: center;
  color: #64748b;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  display: grid;
}

.att-review-day.spacer {
  visibility: hidden;
  pointer-events: none;
}

.approval-card-list, .approval-template-grid {
  gap: 14px;
  display: grid;
}

.approval-template-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.approval-template-card {
  border: 1px solid var(--border, #dfe5e8);
  background: var(--surface, #fff);
  border-radius: 18px;
  padding: 18px;
}

.approval-stage-list {
  gap: 8px;
  margin: 14px 0;
  display: grid;
}

.approval-stage-row {
  border: 1px solid var(--border, #e4e8eb);
  background: #f8fafcb8;
  border-radius: 12px;
  gap: 3px;
  padding: 10px 12px;
  display: grid;
}

.approval-stage-row span, .approval-stage-row small {
  color: var(--muted, #60717a);
}

@media (max-width: 700px) {
  .approval-template-grid {
    grid-template-columns: 1fr;
  }

  .approval-template-card {
    padding: 14px;
  }
}

.approval-picker {
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--surface) 92%,var(--accent) 8%);
  border-radius: 14px;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.approval-picker > label {
  gap: 6px;
  display: grid;
}

.approval-picker-hint {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  gap: 4px;
  padding: 12px 14px;
  display: grid;
}

.approval-picker-hint small {
  color: var(--muted);
}

.approval-picker select[multiple] {
  min-height: 132px;
}

.exec-dashboard {
  --purple: #5b43f5;
  --blue: #2f8fff;
  --teal: #31b8b1;
  --green: #18a765;
  --orange: #f5a623;
  --red: #ef4d4d;
  color: #1c2340;
  max-width: 1560px;
  margin: 0 auto;
  padding: 6px 8px 34px;
}

.exec-toolbar {
  border-bottom: 1px solid #edf0f6;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: -2px 0 24px;
  padding: 2px 2px 12px;
  display: flex;
}

.exec-search {
  color: #8790a6;
  background: #fff;
  border: 1px solid #e2e6ef;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  width: min(520px, 42vw);
  padding: 12px 15px;
  display: flex;
  box-shadow: 0 4px 18px #212a4d08;
}

.exec-toolbar-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.exec-filter {
  background: #fff;
  border: 1px solid #e5e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 750;
}

.exec-bell {
  width: 38px;
  height: 38px;
  color: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e5e8f0;
  border-radius: 10px;
  place-items: center;
  font-size: 19px;
  text-decoration: none;
  transition: all .18s;
  display: grid;
  position: relative;
}

.exec-bell:hover, .exec-bell:focus-visible {
  border-color: #cfd5e2;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px #212a4d1a;
}

.exec-bell b {
  color: #fff;
  background: #ef4438;
  border-radius: 99px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 9px;
  display: grid;
  position: absolute;
  top: -5px;
  right: -4px;
}

.exec-profile {
  align-items: center;
  gap: 9px;
  padding-left: 5px;
  display: flex;
}

.exec-profile > span {
  color: #fff;
  background: linear-gradient(145deg, #2b3158, #5d43f5);
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: 700;
  display: grid;
}

.exec-profile div {
  display: grid;
}

.exec-profile strong {
  font-size: 11px;
}

.exec-profile small {
  color: #8b93a7;
  font-size: 9px;
}

.exec-title {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 0 0 18px;
  display: flex;
}

.exec-title h1 {
  letter-spacing: -.045em;
  margin: 4px 0 5px;
  font-size: 31px;
}

.exec-title p {
  color: #7f879b;
  margin: 0;
  font-size: 11px;
}

.exec-kicker {
  color: #6b55f5;
  letter-spacing: .13em;
  font-size: 9px;
  font-weight: 700;
}

.exec-primary {
  background: #5b43f5;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 10px;
  font-weight: 850;
  box-shadow: 0 8px 20px #5b43f533;
  color: #fff !important;
}

.exec-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  display: grid;
}

.exec-kpi {
  background: #fff;
  border: 1px solid #e7e9f1;
  border-radius: 15px;
  align-content: start;
  min-height: 128px;
  padding: 15px;
  transition: all .18s;
  display: grid;
  box-shadow: 0 5px 18px #222c4f0b;
  color: #202640 !important;
}

.exec-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px #222c4f14;
}

.exec-kpi small {
  color: #626b80;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 700;
}

.exec-kpi strong {
  letter-spacing: -.04em;
  margin-top: 5px;
  font-size: 25px;
  line-height: 1.05;
}

.exec-kpi strong.money {
  font-size: 21px;
}

.exec-kpi em {
  color: #8b93a4;
  margin-top: 8px;
  font-size: 9px;
  font-style: normal;
}

.exec-kpi em.up {
  color: #13a164;
  font-weight: 700;
}

.exec-kpi em.warn {
  color: #df8d0b;
}

.exec-kpi em.danger {
  color: #e44c45;
  font-weight: 700;
}

.exec-icon {
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  display: grid;
}

.exec-icon.purple {
  color: #6048f7;
  background: #f0edff;
}

.exec-icon.blue {
  color: #2c8bf1;
  background: #eaf4ff;
}

.exec-icon.orange {
  color: #f29915;
  background: #fff2df;
}

.exec-icon.green {
  color: #169856;
  background: #e9f8ef;
}

.exec-icon.red {
  color: #ef4d4d;
  background: #ffeded;
}

.exec-main-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.exec-card {
  background: #fff;
  border: 1px solid #e6e9f1;
  border-radius: 16px;
  grid-column: span 4;
  min-height: 250px;
  padding: 17px;
  box-shadow: 0 6px 22px #232b4b0b;
}

.exec-card.action {
  grid-column: span 4;
}

.exec-card.trend {
  grid-column: span 5;
}

.exec-card.trend + .exec-card {
  grid-column: span 3;
}

.exec-card.cost {
  grid-column: span 5;
  min-height: 320px;
}

.exec-card.learning {
  grid-column: span 3;
  min-height: 320px;
}

.exec-card.quick {
  grid-column: span 4;
  min-height: 320px;
}

.exec-card-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  display: flex;
}

.exec-card-head small {
  color: #8a91a6;
  letter-spacing: .11em;
  font-size: 8px;
  font-weight: 700;
}

.exec-card-head h2 {
  letter-spacing: -.015em;
  margin: 3px 0 0;
  font-size: 14px;
}

.exec-card-head > a, .exec-card-head > span {
  color: #6851f4;
  font-size: 9px;
  font-weight: 700;
}

.exec-pill {
  background: #fafbfe;
  border: 1px solid #eaecf3;
  border-radius: 8px;
  color: #727b91 !important;
  padding: 6px 9px !important;
}

.exec-action-list {
  display: grid;
}

.exec-action-list > a {
  border-bottom: 1px solid #f0f1f5;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  display: grid;
  color: #394158 !important;
}

.exec-action-list > a:last-child {
  border: 0;
}

.exec-action-list b {
  border-radius: 50%;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 9px;
  display: grid;
}

.exec-action-list b.danger {
  color: #e94a42;
  background: #ffeded;
}

.exec-action-list b.warn {
  color: #dc930d;
  background: #fff4df;
}

.exec-action-list b.info {
  color: #5371e9;
  background: #eef3ff;
}

.exec-action-list span {
  font-size: 10px;
  font-weight: 700;
}

.exec-action-list em {
  color: #ef6b62;
  font-size: 8px;
  font-style: normal;
}

.exec-line {
  color: #6248f6;
  width: 100%;
  height: 126px;
  overflow: visible;
}

.exec-axis {
  color: #8d95a6;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 8px;
  display: flex;
}

.exec-donut-wrap {
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 170px;
  display: grid;
}

.exec-donut {
  border-radius: 50%;
  place-items: center;
  width: 125px;
  height: 125px;
  display: grid;
  position: relative;
}

.exec-donut:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  position: absolute;
}

.exec-donut > span {
  z-index: 1;
  font-size: 17px;
  font-weight: 700;
  position: relative;
}

.exec-legend {
  gap: 9px;
  display: grid;
}

.exec-legend > div {
  color: #687086;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  display: grid;
}

.exec-legend strong {
  color: #252c43;
}

.dot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.dot.blue {
  background: var(--blue);
}

.dot.teal {
  background: var(--teal);
}

.exec-exceptions {
  gap: 5px;
  display: grid;
}

.exec-exceptions > div {
  border-bottom: 1px solid #f0f1f5;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  padding: 8px;
  display: grid;
}

.exec-exceptions i {
  border-radius: 8px;
  place-items: center;
  width: 25px;
  height: 25px;
  font-style: normal;
  display: grid;
}

.exec-exceptions i.purple {
  color: #654df5;
  background: #f0edff;
}

.exec-exceptions i.red {
  color: #ef5149;
  background: #ffeded;
}

.exec-exceptions i.orange {
  color: #e89813;
  background: #fff2df;
}

.exec-exceptions i.blue {
  color: #3288ed;
  background: #eaf3ff;
}

.exec-exceptions span {
  font-size: 10px;
}

.exec-exceptions strong {
  color: #1b9b64;
  font-size: 11px;
}

.exec-funnel {
  gap: 6px;
  padding-top: 3px;
  display: grid;
}

.exec-funnel > div {
  grid-template-columns: 1fr 38px;
  align-items: center;
  gap: 9px;
  display: grid;
}

.exec-funnel span {
  text-align: center;
  color: #4b466d;
  border-radius: 5px;
  justify-self: center;
  padding: 8px 6px;
  font-size: 9px;
  font-weight: 700;
}

.exec-funnel strong {
  font-size: 10px;
}

.exec-funnel .f0 {
  background: #d9d3ff;
}

.exec-funnel .f1 {
  background: #c7bfff;
}

.exec-funnel .f2 {
  background: #aea5fb;
}

.exec-funnel .f3 {
  background: #8e8eea;
}

.exec-funnel .f4 {
  color: #fff;
  background: #65c6c1;
}

.exec-rings {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 10px;
  display: grid;
}

.exec-ring {
  --ring: 0deg;
  background: conic-gradient(var(--ring-color) var(--ring),#edf0f4 0);
  border-radius: 50%;
  place-items: center;
  width: 105px;
  height: 105px;
  margin: auto;
  display: grid;
  position: relative;
}

.exec-ring:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 77px;
  height: 77px;
  position: absolute;
}

.exec-ring > div {
  z-index: 1;
  text-align: center;
  display: grid;
  position: relative;
}

.exec-ring strong {
  font-size: 17px;
}

.exec-ring span {
  color: #757d8f;
  max-width: 68px;
  font-size: 8px;
  line-height: 1.3;
}

.exec-ring.green {
  --ring-color: #18a765;
}

.exec-ring.purple {
  --ring-color: #6450f4;
}

.exec-ring.blue {
  --ring-color: #3694ee;
}

.exec-cost-total {
  margin-bottom: 12px;
  display: grid;
}

.exec-cost-total span {
  color: #7c8497;
  font-size: 9px;
}

.exec-cost-total strong {
  margin-top: 3px;
  font-size: 23px;
}

.exec-bars {
  gap: 8px;
  display: grid;
}

.exec-bars > div {
  grid-template-columns: 84px 1fr 86px;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  display: grid;
}

.exec-bars > b {
  background: #edf0f7;
  border-radius: 99px;
  height: 5px;
  overflow: hidden;
}

.exec-bars i {
  background: #644cf4;
  border-radius: 99px;
  height: 100%;
  display: block;
}

.exec-bars strong {
  text-align: right;
  font-size: 8px;
}

.exec-card.cost .exec-line {
  height: 72px;
  margin-top: 10px;
}

.exec-learning-top {
  gap: 22px;
  display: grid;
}

.exec-learning-top > div:last-child {
  gap: 4px;
  display: grid;
}

.exec-learning-top p {
  border-bottom: 1px solid #f0f1f4;
  margin: 0;
  padding: 9px 0;
  font-size: 9px;
}

.exec-learning-top b {
  place-items: center;
  min-width: 25px;
  margin-right: 8px;
  display: inline-grid;
}

.exec-learning-top b.danger {
  color: #e94b45;
}

.exec-learning-top b.warn {
  color: #e59610;
}

.exec-quick-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.exec-quick-grid > a {
  background: #fafbfe;
  border: 1px solid #eceef4;
  border-radius: 11px;
  grid-template-columns: 28px 1fr;
  gap: 2px 8px;
  padding: 11px;
  display: grid;
  color: #283049 !important;
}

.exec-quick-grid > a > span {
  color: #6047f5;
  background: #eeeafd;
  border-radius: 8px;
  grid-row: 1 / 3;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.exec-quick-grid b {
  font-size: 9px;
}

.exec-quick-grid small {
  color: #8a92a5;
  font-size: 8px;
}

.exec-no-ai {
  color: #8179a8;
  background: linear-gradient(135deg, #f7f5ff, #fafcff);
  border: 1px dashed #dcd7fb;
  border-radius: 10px;
  margin-top: 14px;
  padding: 12px;
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 1250px) {
  .exec-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .exec-card, .exec-card.action, .exec-card.trend, .exec-card.trend + .exec-card, .exec-card.cost, .exec-card.learning, .exec-card.quick {
    grid-column: span 6;
  }

  .exec-toolbar {
    align-items: flex-start;
  }

  .exec-toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .exec-dashboard {
    padding: 0;
  }

  .exec-toolbar {
    display: grid;
  }

  .exec-search {
    width: 100%;
  }

  .exec-toolbar-actions {
    justify-content: flex-start;
  }

  .exec-filter, .exec-profile div {
    display: none;
  }

  .exec-title {
    align-items: flex-start;
    display: grid;
  }

  .exec-title h1 {
    font-size: 25px;
  }

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

  .exec-main-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .exec-card, .exec-card.action, .exec-card.trend, .exec-card.trend + .exec-card, .exec-card.cost, .exec-card.learning, .exec-card.quick {
    grid-column: 1;
  }

  .exec-donut-wrap {
    grid-template-columns: 112px 1fr;
  }

  .exec-donut {
    width: 105px;
    height: 105px;
  }

  .exec-donut:after {
    width: 62px;
    height: 62px;
  }

  .exec-quick-grid {
    grid-template-columns: 1fr;
  }

  .exec-action-list > a {
    grid-template-columns: 25px 1fr;
  }

  .exec-action-list em {
    display: none;
  }
}

.payroll-formula-source-note {
  border-left: 4px solid var(--accent, #5b5bd6);
}

.payroll-formula-preset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.payroll-formula-preset {
  border: 1px solid var(--border);
  background: var(--surface-soft, #f8fafc);
  border-radius: 14px;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.payroll-formula-preset code, .payroll-formula-expression {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #e8edf7;
  background: #101827;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  display: block;
}

.payroll-formula-variable-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  display: grid;
}

.payroll-formula-variable-grid > div {
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  display: flex;
}

.payroll-formula-variable-grid code {
  font-weight: 700;
}

.payroll-formula-variable-grid span {
  color: var(--muted);
  font-size: 11px;
}

.payroll-formula-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.payroll-formula-card {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.payroll-formula-card-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.payroll-formula-card h3 {
  margin: 6px 0 2px;
}

.payroll-formula-edit {
  max-width: none;
  margin-top: 10px;
}

.payroll-formula-danger {
  align-self: flex-start;
}

.payroll-formula-inputs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.payroll-formula-inputs label {
  font-size: 10px;
}

.payroll-formula-inputs input {
  min-width: 0;
}

@media (max-width: 1000px) {
  .payroll-formula-preset-grid, .payroll-formula-variable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-formula-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .payroll-formula-preset-grid, .payroll-formula-variable-grid, .payroll-formula-inputs {
    grid-template-columns: 1fr;
  }
}

.salary-component-info {
  border-left: 4px solid var(--accent, #4f46e5);
}

.salary-component-flags {
  flex-wrap: wrap;
  gap: 22px;
  padding: 10px 0;
  display: flex;
}

.salary-component-flags label {
  align-items: center;
  gap: 8px;
  font-weight: 700;
  display: flex;
}

.salary-component-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.salary-component-card {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.salary-component-card-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.salary-component-badges {
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
  display: flex;
}

.salary-component-type, .salary-component-chip {
  color: #334155;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.salary-component-type.earning {
  color: #047857;
  background: #ecfdf5;
}

.salary-component-type.deduction {
  color: #be123c;
  background: #fff1f2;
}

.salary-component-money {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 11px 13px;
  display: flex;
}

.salary-component-assignment-list {
  border-top: 1px solid #e5e7eb;
  gap: 8px;
  padding-top: 12px;
  display: grid;
}

.salary-component-assignment {
  background: #f8fafc;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  display: flex;
}

.salary-component-assignment small {
  color: #64748b;
  margin-top: 3px;
  display: block;
}

.salary-component-edit {
  margin-top: 10px;
}

.salary-component-danger {
  color: #b91c1c;
  border-color: #fecaca;
}

@media (max-width: 1000px) {
  .salary-component-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .salary-component-card-head, .salary-component-assignment {
    flex-direction: column;
    align-items: stretch;
  }

  .salary-component-flags {
    flex-direction: column;
    gap: 10px;
  }
}

.trace-hero {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px;
  display: flex;
}

.trace-hero h2 {
  margin: 8px 0 4px;
  font-size: 32px;
}

.trace-hero-grid {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 10px;
  display: grid;
}

.trace-hero-grid > div {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  gap: 5px;
  padding: 12px 14px;
  display: grid;
}

.trace-hero-grid span, .trace-row span, .trace-expression span {
  color: var(--muted, #6b7280);
  font-size: 11px;
}

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

.trace-grid .card {
  padding: 18px;
}

.trace-grid h2 {
  margin: 0 0 12px;
}

.trace-grid h3 {
  margin: 16px 0 8px;
  font-size: 13px;
}

.trace-row {
  border-bottom: 1px solid var(--border, #edf0f2);
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  display: flex;
}

.trace-row b, .trace-row strong {
  text-align: right;
}

.trace-row strong {
  font-size: 14px;
}

.trace-expression {
  gap: 6px;
  margin: 10px 0 12px;
  display: grid;
}

.trace-expression code, .trace-component code {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f6f7f9;
  border-radius: 9px;
  padding: 9px 10px;
  display: block;
}

.trace-component {
  border-bottom: 1px solid var(--border, #edf0f2);
  gap: 7px;
  padding: 11px 0;
  display: grid;
}

.trace-component > div:first-child {
  gap: 2px;
  display: grid;
}

.trace-component small {
  color: var(--muted, #6b7280);
}

.trace-component-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.trace-component-meta span {
  background: #f0f2f5;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
}

.trace-component-meta strong {
  margin-left: auto;
}

.trace-policy {
  border-bottom: 1px solid var(--border, #edf0f2);
  padding: 10px 0;
}

.trace-policy > div:first-child {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trace-policy details, .trace-grid details {
  margin-top: 8px;
}

.trace-grid summary, .trace-policy summary {
  cursor: pointer;
  color: var(--accent, #4f46e5);
  font-weight: 700;
}

.trace-grid pre, .trace-policy pre, .section-gap pre {
  color: #e5e7eb;
  white-space: pre-wrap;
  word-break: break-word;
  background: #111827;
  border-radius: 10px;
  max-height: 420px;
  padding: 12px;
  font-size: 11px;
  overflow: auto;
}

.trace-note {
  color: #9a3412;
  background: #fff7ed;
  border-radius: 9px;
  padding: 9px 10px;
}

@media (max-width: 1000px) {
  .trace-hero {
    flex-direction: column;
    align-items: stretch;
  }

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

@media (max-width: 720px) {
  .trace-grid {
    grid-template-columns: 1fr;
  }

  .trace-hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trace-row {
    gap: 10px;
  }
}

.sensitive-lock-card {
  margin-bottom: 14px;
  overflow: visible;
}

.sensitive-lock-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.sensitive-lock-head small {
  letter-spacing: .08em;
  color: #7c8590;
  font-size: 10px;
  font-weight: 700;
}

.sensitive-lock-head h2 {
  margin: 4px 0 0;
  font-size: 17px;
}

.sensitive-unlock-details {
  position: relative;
}

.sensitive-unlock-details > summary {
  list-style: none;
}

.sensitive-unlock-details > summary::-webkit-details-marker {
  display: none;
}

.sensitive-eye {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e2e7ec;
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 19px;
  display: grid;
  box-shadow: 0 4px 12px #1118270f;
}

.sensitive-popover {
  z-index: 50;
  background: #fff;
  border: 1px solid #dfe5ea;
  border-radius: 16px;
  width: min(330px, 100vw - 48px);
  padding: 16px;
  position: absolute;
  top: 48px;
  right: 0;
  box-shadow: 0 18px 42px #1118272e;
}

.sensitive-popover > p {
  color: #697481;
  font-size: 12px;
}

.sensitive-popover label {
  font-size: 12px;
  font-weight: 700;
}

.sensitive-mask {
  letter-spacing: .16em;
  text-align: center;
  color: #69727c;
  -webkit-user-select: none;
  user-select: none;
  background: linear-gradient(135deg, #f7f8fa, #eef1f4);
  border: 1px dashed #d9dee4;
  border-radius: 14px;
  margin-top: 16px;
  padding: 22px;
  font-size: 28px;
  font-weight: 700;
}

.sensitive-unlocked-bar {
  color: #25613a;
  background: #f0fbf4;
  border: 1px solid #cce9d7;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: -4px 0 12px;
  padding: 9px 11px;
  font-size: 11px;
  display: flex;
}

.sensitive-unlocked-bar form {
  margin: 0;
}

.sensitive-unlocked-bar button {
  cursor: pointer;
  background: #fff;
  border: 1px solid #b7ddc5;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .sensitive-popover, .mobile-app[data-theme="YOUTH_PASTEL"] .sensitive-eye {
  background: var(--u-surface);
  border-color: var(--u-border);
}

.hod-dashboard {
  color: #202235;
  background: #f7f7fc;
  border-radius: 18px;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  display: flex;
}

.hod-top {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.hod-top h1 {
  letter-spacing: -.4px;
  margin: 0;
  font-size: 24px;
}

.hod-top p {
  color: #777b8f;
  margin: 5px 0 0;
}

.hod-top-actions {
  align-items: center;
  gap: 14px;
  display: flex;
}

.hod-top-actions > span, .hod-card-head > span {
  color: #61657a;
  background: #fff;
  border: 1px solid #ececf4;
  border-radius: 10px;
  padding: 8px 11px;
}

.hod-user {
  align-items: center;
  gap: 9px;
  display: flex;
}

.hod-user > i, .hod-people-list i, .hod-toppeople i {
  color: #6548e8;
  background: #eeeafc;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.hod-user div {
  flex-direction: column;
  display: flex;
}

.hod-user small {
  color: #8b8ea0;
}

.hod-kpis {
  background: #fff;
  border: 1px solid #ececf5;
  border-radius: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  display: grid;
  box-shadow: 0 8px 22px #3832690b;
}

.hod-kpis > a {
  color: inherit;
  border-right: 1px solid #f0f0f6;
  grid-template-columns: 38px 1fr;
  grid-template-areas: "icon label"
                       "icon value"
                       "icon sub";
  column-gap: 10px;
  padding: 18px 16px;
  text-decoration: none;
  display: grid;
}

.hod-kpis > a:last-child {
  border-right: 0;
}

.hod-kpis i {
  color: #6d51e8;
  background: #f3f0ff;
  border-radius: 11px;
  grid-area: icon;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-style: normal;
  display: grid;
}

.hod-kpis span {
  color: #65697b;
  grid-area: label;
}

.hod-kpis strong {
  grid-area: value;
  font-size: 25px;
  line-height: 1.2;
}

.hod-kpis strong em {
  color: #85899a;
  margin-left: 3px;
  font-size: 12px;
  font-style: normal;
}

.hod-kpis small {
  color: #55a978;
  grid-area: sub;
}

.hod-grid {
  gap: 12px;
  display: grid;
}

.hod-grid-top {
  grid-template-columns: 1.7fr 1.2fr 1.15fr .95fr;
}

.hod-grid-mid {
  grid-template-columns: 1.05fr .9fr 1.25fr .8fr;
}

.hod-grid-bottom {
  grid-template-columns: 2.1fr 1fr;
}

.hod-card {
  background: #fff;
  border: 1px solid #ececf5;
  border-radius: 12px;
  min-width: 0;
  padding: 14px;
  box-shadow: 0 6px 20px #2c285c08;
}

.hod-card h2 {
  margin: 0 0 12px;
  font-size: 14px;
}

.hod-card-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.hod-card-head a, .hod-more {
  color: #6a53e6;
  font-size: 11px;
  text-decoration: none;
}

.hod-card-head > b {
  color: #fff;
  background: #ff5e5e;
  border-radius: 999px;
  place-items: center;
  min-width: 22px;
  height: 22px;
  display: grid;
}

.hod-line {
  color: #6547e9;
  width: 100%;
  height: 145px;
  overflow: visible;
}

.hod-line text {
  fill: #5b6074;
  font-size: 9px;
}

.hod-axis {
  color: #9295a4;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
}

.hod-donut-wrap {
  align-items: center;
  gap: 18px;
  display: flex;
}

.hod-donut {
  aspect-ratio: 1;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 122px;
  display: grid;
  position: relative;
}

.hod-donut:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  position: absolute;
  inset: 22px;
}

.hod-donut > div {
  z-index: 1;
  text-align: center;
}

.hod-donut strong {
  font-size: 22px;
  display: block;
}

.hod-donut small {
  color: #888b9d;
}

.hod-legend {
  flex-direction: column;
  flex: 1;
  gap: 9px;
  display: flex;
}

.hod-legend > div {
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: grid;
}

.hod-legend em {
  color: #9598a8;
  font-style: normal;
}

.hod-legend .dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.dot.purple {
  background: #694de5;
}

.dot.green {
  background: #4fc27a;
}

.dot.yellow {
  background: #f0c94e;
}

.dot.orange {
  background: #f69d4c;
}

.dot.red {
  background: #ed6262;
}

.hod-bars {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.hod-bars > div {
  grid-template-columns: 72px 1fr 22px;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: grid;
}

.hod-bars b {
  background: #f0eef8;
  border-radius: 7px;
  height: 7px;
  overflow: hidden;
}

.hod-bars i {
  background: #6b4de5;
  border-radius: 7px;
  height: 100%;
  display: block;
}

.hod-approval > a {
  color: inherit;
  border-top: 1px solid #f0eff5;
  grid-template-columns: 32px 1fr 12px;
  align-items: center;
  padding: 9px 0;
  text-decoration: none;
  display: grid;
}

.hod-approval > a i {
  color: #6b50e6;
  background: #f2efff;
  border-radius: 8px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-style: normal;
  display: grid;
}

.hod-approval > a span {
  flex-direction: column;
  display: flex;
}

.hod-approval > a small {
  color: #9194a5;
}

.hod-big-number {
  align-items: flex-end;
  gap: 7px;
  margin: 18px 0;
  display: flex;
}

.hod-big-number > strong {
  font-size: 32px;
}

.hod-big-number > span {
  color: #74778a;
  flex-direction: column;
  display: flex;
}

.hod-two {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  display: grid;
}

.hod-two > div {
  background: #fafafe;
  border-radius: 9px;
  padding: 10px;
}

.hod-two small {
  color: #8d90a1;
  margin-bottom: 4px;
  display: block;
}

.hod-perf-bars {
  justify-content: space-around;
  align-items: flex-end;
  gap: 7px;
  height: 150px;
  display: flex;
}

.hod-perf-bars > div {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  height: 100%;
  display: flex;
}

.hod-perf-bars b {
  color: #fff;
  border-radius: 6px 6px 2px 2px;
  justify-content: center;
  align-items: flex-start;
  width: 32px;
  min-height: 20px;
  padding-top: 6px;
  display: flex;
}

.hod-perf-bars .p0 {
  background: #44b978;
}

.hod-perf-bars .p1 {
  background: #72c88e;
}

.hod-perf-bars .p2 {
  background: #e3c73d;
}

.hod-perf-bars .p3 {
  background: #ef9b55;
}

.hod-perf-bars .p4 {
  background: #e86767;
}

.hod-perf-bars span {
  color: #6c7082;
  min-height: 24px;
  font-size: 9px;
}

.hod-side-stack {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.hod-side-stack > .hod-card {
  flex: 1;
}

.hod-people-list, .hod-upcoming {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.hod-people-list > div {
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 7px;
  display: grid;
}

.hod-people-list i {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.hod-people-list b, .hod-upcoming b {
  color: #777b8e;
  font-size: 9px;
}

.hod-upcoming > div {
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  display: grid;
}

.hod-upcoming i {
  background: #6b4de5;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.hod-upcoming i.yellow {
  background: #f1c94a;
}

.hod-project-table {
  flex-direction: column;
  display: flex;
}

.hod-project-table > div {
  border-top: 1px solid #f1f1f5;
  grid-template-columns: 1.5fr .8fr 1fr .8fr .7fr;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  font-size: 10px;
  display: grid;
}

.hod-project-table .head {
  color: #767a8d;
  border-top: 0;
  font-weight: 700;
}

.hod-project-table span > i {
  vertical-align: middle;
  background: #efedf8;
  border-radius: 6px;
  width: 85px;
  height: 6px;
  margin-right: 5px;
  display: inline-block;
  overflow: hidden;
}

.hod-project-table span > i > em {
  background: #6c4ee7;
  height: 100%;
  display: block;
}

.hod-project-table .ok {
  color: #50ad71;
}

.hod-project-table .warn {
  color: #d49a2e;
}

.hod-toppeople > a {
  color: inherit;
  border-top: 1px solid #f1f1f5;
  grid-template-columns: 24px 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  text-decoration: none;
  display: grid;
}

.hod-toppeople > a > strong {
  color: #38ac69;
  font-size: 15px;
}

.hod-toppeople > a > i {
  width: 30px;
  height: 30px;
  font-size: 10px;
}

.hod-toppeople > a > b {
  font-size: 11px;
}

.hod-card > small {
  color: #999cad;
}

.hod-more {
  text-align: center;
  border-top: 1px solid #f1f1f5;
  margin-top: 10px;
  padding-top: 10px;
  display: block;
}

@media (max-width: 1200px) {
  .hod-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .hod-kpis > a:nth-child(3) {
    border-right: 0;
  }

  .hod-grid-top, .hod-grid-mid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hod-grid-bottom {
    grid-template-columns: 1fr;
  }

  .hod-side-stack {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}

@media (max-width: 720px) {
  .hod-dashboard {
    padding: 10px;
  }

  .hod-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .hod-top-actions {
    justify-content: space-between;
    width: 100%;
  }

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

  .hod-kpis > a:nth-child(2n) {
    border-right: 0;
  }

  .hod-grid-top, .hod-grid-mid, .hod-grid-bottom, .hod-side-stack {
    grid-template-columns: 1fr;
  }

  .hod-project-table {
    overflow-x: auto;
  }

  .hod-project-table > div {
    min-width: 650px;
  }

  .hod-donut-wrap {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.m-preference-auto-form {
  gap: 10px;
  display: grid;
}

.m-preference-save-state {
  color: #73738a;
  text-align: center;
  background: #fafafe;
  border: 1px dashed #d9d8e7;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.m-preference-save-state.pending {
  color: #6658c8;
  background: #f4f1ff;
  border-style: solid;
  border-color: #b7afe9;
}

.m-accent-auto-form {
  margin: 0 !important;
}

.accent-button.is-saving {
  opacity: .78;
  cursor: wait;
  transform: none !important;
}

.accent-button:disabled {
  pointer-events: none;
}

.m-preference-spinner {
  animation: .8s linear infinite mPreferenceSpin;
}

@keyframes mPreferenceSpin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-preference-save-state {
  border-color: color-mix(in srgb,var(--y-primary) 24%,#d9d8e7);
  background: var(--y-soft-2);
  color: var(--y-ink);
}

.shell, .shell :where(p, a, label, input, select, textarea, button, td, th, li, summary, small, code), .shell :where(.muted, .form-inline, .form-grid, .list-row, .result-list, .sidebar-footer, .topbar-link, .nav a, .nav-group summary, .nav-group-items a) {
  font-size: var(--admin-font-size) !important;
}

.shell h1, .shell .page-header h1 {
  font-size: calc(var(--admin-font-size) + 13px) !important;
}

.shell h2 {
  font-size: calc(var(--admin-font-size) + 6px) !important;
}

.shell h3 {
  font-size: calc(var(--admin-font-size) + 3px) !important;
}

.shell h4 {
  font-size: calc(var(--admin-font-size) + 1px) !important;
}

.shell h5, .shell h6 {
  font-size: var(--admin-font-size) !important;
}

.shell :where(.metric, .workspace-stat-card strong, .learning-stat-card strong) {
  font-size: calc(var(--admin-font-size) + 16px) !important;
}

.shell .mobile-app, .shell .mobile-app * {
  font-size: revert-layer;
}

.admin-theme-native-form, .admin-font-native-form {
  min-width: 0;
  margin: 0;
}

.admin-theme-native-button, .admin-font-native-button {
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}

.admin-theme-native-button {
  position: relative;
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  min-height: 0 !important;
  padding: 18px !important;
}

.admin-theme-native-button:hover {
  background: #fbfefe !important;
  border-color: #9bd5d2 !important;
}

.admin-theme-native-button.selected {
  border-color: #22b8b5 !important;
  box-shadow: 0 0 0 4px #22b8b51a !important;
}

.admin-choice-radio {
  z-index: 2;
  background: #fff;
  border: 1.5px solid #9ca7b5;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 15px;
  right: 15px;
}

.admin-theme-native-button.selected .admin-choice-radio {
  background: #315df5;
  border-color: #315df5;
  box-shadow: inset 0 0 0 3px #fff;
}

.admin-theme-native-button .admin-theme-preview {
  box-sizing: border-box;
  width: 100%;
}

.admin-theme-native-button strong, .admin-theme-native-button small {
  text-align: left;
  display: block;
}

.admin-font-native-form {
  display: block;
}

.admin-font-native-button {
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #dce5e7 !important;
  min-height: 82px !important;
  padding: 12px !important;
}

.admin-font-native-button:hover {
  background: #f8fcfc !important;
  border-color: #9bd5d2 !important;
}

.admin-font-native-button.selected {
  background: #edf9f8 !important;
  border-color: #42b8b3 !important;
  box-shadow: 0 0 0 3px #25b7b317 !important;
}

.admin-font-native-button span, .admin-font-native-button small {
  text-align: center;
  display: block;
}

.form-builder-row-new {
  animation: .35s formFieldAdded;
  background: #f0fbfa !important;
  border-color: #72cbc6 !important;
}

@keyframes formFieldAdded {
  from {
    opacity: .2;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.line-manager-summary {
  background: #f8fcfc;
  border: 1px solid #dce8e8;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  display: flex;
}

.line-manager-summary strong {
  color: #23484d;
}

.line-manager-summary span {
  color: #5f7479;
  font-weight: 700;
}

@media (max-width: 640px) {
  .line-manager-summary {
    flex-direction: column;
    align-items: flex-start;
  }
}

.workflow-approver-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.workflow-candidate-preview {
  gap: 8px;
  display: grid;
}

.workflow-candidate-list {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.workflow-candidate-list span {
  color: #4f686c;
  background: #f7fbfb;
  border: 1px solid #dce8e8;
  border-radius: 999px;
  align-items: center;
  padding: 5px 8px;
  font-size: 10.5px;
  display: inline-flex;
}

@media (max-width: 900px) {
  .workflow-approver-filter-grid {
    grid-template-columns: 1fr;
  }
}

.workflow-approver-mode-grid {
  border: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  display: grid;
}

.workflow-approver-mode-grid legend {
  color: #607277;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
}

.workflow-approver-mode-option {
  cursor: pointer;
  text-align: center;
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  position: relative;
  display: flex !important;
}

.workflow-approver-mode-option input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.workflow-approver-mode-option:has(input:checked) {
  color: #167b77;
  background: #eaf8f6;
  border-color: #32aaa6;
  box-shadow: 0 0 0 2px #32aaa614;
}

.workflow-approver-mode-option span {
  font-size: 11px;
  font-weight: 700;
}

.workflow-approver-panel {
  gap: 10px;
  display: none;
}

@media (max-width: 900px) {
  .workflow-approver-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.att-review-legend .noschedule {
  color: #475569;
  background: #f1f5f9;
}

.att-review-day.noschedule {
  color: #475569;
  background: #f8fafc;
  border-color: #94a3b8;
}

.att-review-day.offwork {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #c4b5fd;
}

.att-review-shift {
  background: #f8fbfb;
  border: 1px solid #dbe7e6;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0 12px;
  padding: 11px 12px;
  display: flex;
}

.att-review-shift span {
  color: #64748b;
  font-size: 10px;
}

:root {
  --app-font: Helvetica,"Helvetica Neue",Arial,sans-serif;
}

html, body, body * {
  font-synthesis: none;
  font-family: var(--app-font) !important;
}

body, input, select, textarea, button, table, th, td, label, a, p, li, summary, small, code, span, div {
  font-weight: 400;
}

strong, b, h1, h2, h3, h4, h5, h6, th, button, .button, .brand, .workspace-kicker, .nav-group summary {
  font-weight: 700 !important;
}

.employee-360-panel {
  overflow: hidden;
}

.employee-360-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  display: flex;
}

.employee-360-head h2 {
  margin: 0 0 4px;
}

.employee-360-head p {
  margin: 0;
}

.employee-360-head > span {
  white-space: nowrap;
  font-weight: 700;
}

.employee-360-timeline {
  display: grid;
}

.employee-360-event {
  grid-template-columns: 110px 22px minmax(0, 1fr);
  gap: 14px;
  min-height: 104px;
  display: grid;
}

.employee-360-date {
  color: #53666b;
  padding-top: 3px;
  font-weight: 700;
}

.employee-360-dot {
  position: relative;
}

.employee-360-dot:before {
  content: "";
  background: #23aaa6;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 7px;
  left: 7px;
  box-shadow: 0 0 0 4px #e7f7f5;
}

.employee-360-dot:after {
  content: "";
  background: #dce8e8;
  width: 1px;
  position: absolute;
  top: 23px;
  bottom: -7px;
  left: 11px;
}

.employee-360-event:last-child .employee-360-dot:after {
  display: none;
}

.employee-360-body {
  padding: 0 0 22px;
}

.employee-360-body h3 {
  margin: 5px 0;
}

.employee-360-body p {
  color: #66777c;
  margin: 0;
}

.employee-360-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.employee-360-meta span, .employee-360-meta strong {
  color: #177e7a;
  background: #eef8f7;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
}

.employee-360-meta strong {
  color: #526168;
  background: #f3f5f6;
}

@media (max-width: 800px) {
  .employee-360-event {
    grid-template-columns: 1fr;
  }

  .employee-360-date {
    padding-top: 12px;
  }

  .employee-360-dot {
    display: none;
  }

  .employee-360-head {
    display: grid;
  }
}

.people-analytics-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  display: grid;
}

.people-analytics-kpi {
  min-height: 138px;
  color: inherit;
  gap: 8px;
  text-decoration: none;
  display: grid;
}

.people-analytics-kpi small {
  color: #718187;
}

.people-analytics-kpi strong {
  color: #17343b;
  font-size: 28px;
  line-height: 1;
}

.people-analytics-kpi span {
  color: #65777c;
  line-height: 1.45;
}

.people-analytics-grid {
  grid-template-columns: 1.45fr 1fr;
  gap: 16px;
  display: grid;
}

.people-analytics-card {
  min-width: 0;
}

.people-analytics-trend {
  grid-row: span 2;
}

.people-analytics-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  display: flex;
}

.people-analytics-head h2 {
  margin: 0 0 4px;
}

.people-analytics-head p {
  margin: 0;
}

.people-analytics-head > strong {
  font-size: 24px;
}

.people-analytics-legend {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.people-analytics-legend span {
  color: #66777c;
  align-items: center;
  gap: 6px;
  display: flex;
}

.people-analytics-legend i {
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.people-analytics-legend .in, .people-analytics-columns .in {
  background: #23aaa6;
}

.people-analytics-legend .out, .people-analytics-columns .out {
  background: #ef6262;
}

.people-analytics-months {
  border-bottom: 1px solid #dbe5e6;
  grid-template-columns: repeat(12, minmax(24px, 1fr));
  align-items: end;
  gap: 8px;
  height: 300px;
  padding: 16px 4px 0;
  display: grid;
}

.people-analytics-month {
  text-align: center;
  grid-template-rows: 1fr 28px;
  align-items: end;
  gap: 5px;
  height: 100%;
  display: grid;
}

.people-analytics-columns {
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
  display: flex;
}

.people-analytics-columns i {
  border-radius: 6px 6px 2px 2px;
  width: min(14px, 42%);
  min-height: 0;
  display: block;
}

.people-analytics-month small {
  white-space: nowrap;
  color: #758489;
}

.people-analytics-bars {
  gap: 14px;
  display: grid;
}

.people-analytics-bar {
  gap: 6px;
  display: grid;
}

.people-analytics-bar-head {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.people-analytics-track {
  background: #edf3f3;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.people-analytics-track i {
  background: #27aaa6;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.people-analytics-bar small {
  color: #758489;
}

.people-analytics-watch {
  display: grid;
}

.people-analytics-watch > a {
  color: inherit;
  border-bottom: 1px solid #edf1f2;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 13px 0;
  text-decoration: none;
  display: grid;
}

.people-analytics-watch > a:last-child {
  border-bottom: 0;
}

.people-analytics-watch strong {
  grid-row: span 2;
  font-size: 18px;
}

.people-analytics-watch small {
  color: #758489;
}

.people-analytics-note p {
  max-width: 1100px;
  margin: 8px 0;
  line-height: 1.6;
}

.people-analytics-note h2 {
  margin-top: 0;
}

@media (max-width: 1250px) {
  .people-analytics-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .people-analytics-grid {
    grid-template-columns: 1fr;
  }

  .people-analytics-trend {
    grid-row: auto;
  }

  .people-analytics-months {
    height: 240px;
    overflow-x: auto;
  }

  .people-analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .people-analytics-kpis {
    grid-template-columns: 1fr;
  }

  .people-analytics-legend {
    display: none;
  }

  .people-analytics-months {
    grid-template-columns: repeat(12, 38px);
  }
}

.people-analytics-alerts {
  margin-bottom: 16px;
}

.people-analytics-alert-list {
  gap: 10px;
  display: grid;
}

.people-analytics-alert {
  color: inherit;
  background: #fff;
  border: 1px solid #e1e9ea;
  border-radius: 14px;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  text-decoration: none;
  display: grid;
}

.people-analytics-alert.high {
  border-left: 4px solid #e85b5b;
}

.people-analytics-alert.medium {
  border-left: 4px solid #e9a23b;
}

.people-analytics-alert.info {
  border-left: 4px solid #2ca9a5;
}

.people-analytics-alert-badge {
  font-size: 12px;
  font-weight: 700;
}

.people-analytics-alert p {
  color: #6d7d82;
  margin: 4px 0 0;
}

.people-analytics-alert > b {
  font-size: 20px;
}

.people-analytics-window-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  display: grid;
}

.people-analytics-window {
  gap: 7px;
  min-height: 110px;
  display: grid;
}

.people-analytics-window small, .people-analytics-window span {
  color: #718187;
}

.people-analytics-window strong {
  font-size: 26px;
}

.people-analytics-risk-list {
  gap: 12px;
  display: grid;
}

.people-analytics-risk-list > div {
  border-bottom: 1px solid #edf1f2;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding-bottom: 10px;
  display: grid;
}

.people-analytics-risk-list > div:last-child {
  border-bottom: 0;
}

.people-analytics-risk-list small {
  color: #758489;
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .people-analytics-window-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-analytics-alert {
    grid-template-columns: 1fr auto;
  }

  .people-analytics-alert-badge {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .people-analytics-window-grid {
    grid-template-columns: 1fr;
  }
}

.forms-catalog-layout > *, .form-template-create .two-col > * {
  min-width: 0;
}

.form-template-create input, .form-template-create select, .form-template-create textarea {
  min-width: 0;
  max-width: 100%;
}

.form-builder-row > * {
  min-width: 0;
}

@media (max-width: 1380px) {
  .forms-catalog-layout {
    grid-template-columns: 1fr;
  }

  .form-catalog-panel {
    order: 2;
  }

  .form-template-create {
    order: 1;
  }
}

.workflow-level-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 24px 16px;
  display: grid;
}

.workflow-level-slot {
  background: #f7fbfb;
  border: 1px solid #dce7e8;
  border-radius: 12px;
  gap: 4px;
  padding: 12px 13px;
  display: grid;
}

.workflow-level-slot b {
  font-size: 11px;
}

.workflow-level-slot span {
  color: #607176;
  font-size: 11px;
}

.workflow-level-slot.empty {
  background: #fbfcfc;
  border-style: dashed;
}

.workflow-level-slot.empty span {
  color: #9aa6a9;
}

.workflow-empty-approver {
  margin: 0 24px 16px;
}

.workflow-new-step-always {
  overflow: visible;
}

.workflow-new-step-title {
  color: #177e7a;
  background: #f5fbfa;
  border-bottom: 1px solid #e5ecec;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
}

.workflow-new-step-title small {
  color: #76868a;
  font-weight: 400;
}

@media (max-width: 900px) {
  .workflow-level-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .workflow-level-overview {
    grid-template-columns: 1fr;
  }

  .workflow-new-step-title {
    display: grid;
  }
}

.integration-gateway-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
  align-items: start;
  gap: 20px;
  display: grid;
}

.integration-gateway-grid > * {
  min-width: 0;
}

.integration-endpoint-list {
  gap: 10px;
  display: grid;
}

.integration-endpoint-card {
  background: #fbfdfd;
  border: 1px solid #e2e9ea;
  border-radius: 13px;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  display: flex;
}

.integration-endpoint-card > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.integration-endpoint-card small {
  color: #6c7e82;
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .integration-gateway-grid {
    grid-template-columns: 1fr;
  }
}

.forms-admin-layout.forms-catalog-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.forms-admin-layout.forms-catalog-layout .form-grid {
  width: 100%;
  max-width: none;
}

.forms-admin-layout.forms-catalog-layout .form-builder-row {
  grid-template-columns: 32px minmax(130px, 1.1fr) minmax(120px, .75fr) auto minmax(150px, 1fr) auto;
}

@media (max-width: 900px) {
  .forms-admin-layout.forms-catalog-layout .form-builder-row {
    grid-template-columns: 32px minmax(0, 1fr) minmax(120px, .6fr);
  }

  .forms-admin-layout.forms-catalog-layout .form-builder-row .form-builder-wide {
    grid-column: 2 / -1;
  }
}

.document-print-area {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.document-print-area pre {
  color: var(--text);
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

@media print {
  .document-print-area {
    box-shadow: none !important;
    border: 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .document-print-area ~ .card {
    display: none !important;
  }
}

.modal-backdrop {
  z-index: 1200;
  background: #0f172a7a;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 20px;
  width: min(1100px, 96vw);
  max-height: 88vh;
  padding: 24px;
  overflow: auto;
  box-shadow: 0 24px 70px #0f172a38;
}

.document-variable-modal table code {
  white-space: nowrap;
}

.document-variable-modal input {
  width: 100%;
}

@media (max-width: 800px) {
  .modal-backdrop {
    padding: 10px;
  }

  .modal-card {
    border-radius: 14px;
    padding: 16px;
  }

  .document-variable-modal table {
    min-width: 850px;
  }
}

.m-brand-home {
  color: inherit;
  text-decoration: none;
  display: block;
}

.m-brand-home:hover strong {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.m-side-brand {
  display: none !important;
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom:before {
    content: none !important;
    display: none !important;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-side-brand {
    margin: 0 0 10px;
    color: var(--y-primary) !important;
    background: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-side-brand span {
    color: inherit !important;
    font-size: 16px !important;
  }
}

.m-attendance-action {
  margin-top: 14px;
}

.m-attendance-status {
  color: #15803d;
  margin: 10px 0 0;
  font-weight: 700;
}

.m-attendance-action .m-error {
  margin: 10px 0 0;
}

.auth-page-v2 {
  background: radial-gradient(circle at 15% 18%, #42b98524, #0000 26%), radial-gradient(circle at 85% 12%, #5c9fe621, #0000 26%), linear-gradient(160deg, #f8fbfa 0%, #f7f8ff 55%, #fff 100%);
  position: relative;
  overflow: hidden;
}

.auth-page-v2:before, .auth-page-v2:after {
  content: "";
  filter: blur(2px);
  pointer-events: none;
  border-radius: 999px;
  position: absolute;
}

.auth-page-v2:before {
  background: #79d6ae21;
  width: 280px;
  height: 280px;
  bottom: -80px;
  left: -90px;
}

.auth-page-v2:after {
  background: #8bc5f221;
  width: 240px;
  height: 240px;
  top: -80px;
  right: -70px;
}

.auth-card-v2 {
  z-index: 1;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #fffffff0;
  border: 1px solid #d5dee1eb;
  border-radius: 28px;
  width: min(460px, 100%);
  padding: 34px 34px 30px;
  position: relative;
  box-shadow: 0 28px 70px #1f3a441f;
}

.auth-card-v2 .auth-copy {
  text-align: center;
  margin: 6px 0 24px;
}

.auth-card-v2 .auth-copy h1 {
  letter-spacing: -.04em;
  margin: 0 0 8px;
  font-size: 30px;
}

.auth-card-v2 .auth-copy p {
  color: #718087;
  margin: 0;
}

.auth-card-v2 form {
  gap: 16px;
}

.auth-card-v2 input {
  background: #fbfdfd;
  border-radius: 14px;
  height: 52px;
}

.auth-card-v2 .auth-submit {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 14px;
  height: 52px;
  box-shadow: 0 10px 24px #11182726;
}

.auth-help {
  text-align: center;
  color: #718087;
  margin: 20px 0 0;
  font-size: 13px;
}

.auth-help a {
  color: #248c70;
  font-weight: 700;
}

.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 68px;
}

.password-toggle {
  color: #257e67;
  height: 36px;
  font: inherit;
  cursor: pointer;
  background: #eef7f4;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  top: 8px;
  right: 8px;
}

.login-bear {
  filter: drop-shadow(0 10px 14px #3c2d1e1f);
  width: 110px;
  height: 88px;
  margin: -82px auto 8px;
  position: relative;
}

.bear-head {
  background: #c58d5a;
  border: 4px solid #9c693e;
  border-radius: 46% 46% 42% 42%;
  width: 86px;
  height: 76px;
  position: absolute;
  top: 12px;
  left: 12px;
}

.bear-ear {
  background: #c58d5a;
  border: 4px solid #9c693e;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 4px;
}

.bear-ear.left {
  left: 10px;
}

.bear-ear.right {
  right: 10px;
}

.bear-eye {
  background: #2e211a;
  border-radius: 50%;
  width: 8px;
  height: 10px;
  transition: opacity .2s;
  position: absolute;
  top: 29px;
}

.bear-eye.left {
  left: 23px;
}

.bear-eye.right {
  right: 23px;
}

.bear-nose {
  background: #4a3022;
  border-radius: 50% 50% 55% 55%;
  width: 15px;
  height: 11px;
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
}

.bear-arm {
  z-index: 3;
  background: #b97845;
  border: 3px solid #925c35;
  border-radius: 20px;
  width: 34px;
  height: 18px;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), top .28s;
  position: absolute;
  top: 34px;
}

.bear-arm.left {
  left: -13px;
  transform: rotate(26deg);
}

.bear-arm.right {
  right: -13px;
  transform: rotate(-26deg);
}

.login-bear.is-shy .bear-eye {
  opacity: 0;
}

.login-bear.is-shy .bear-arm.left {
  top: 24px;
  transform: translate(28px, -2px)rotate(-12deg);
}

.login-bear.is-shy .bear-arm.right {
  top: 24px;
  transform: translate(-28px, -2px)rotate(12deg);
}

@media (max-width: 520px) {
  .auth-card-v2 {
    padding: 30px 22px 24px;
  }

  .login-bear {
    margin-top: -72px;
  }

  .auth-page-v2 {
    padding: 22px;
  }
}

.m-attendance-card .m-attendance-hint {
  color: #68747b;
  max-width: 560px;
  margin: 8px auto;
  font-size: 12px;
  line-height: 1.55;
}

.m-attendance-count {
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
  display: flex;
}

.m-attendance-count strong {
  font-size: 18px;
}

.m-attendance-count span {
  color: #718087;
  font-size: 12px;
}

.workspace-stat-link {
  color: inherit;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s;
}

.workspace-stat-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #1f3a4414;
}

.dashboard-action-card {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  position: relative;
}

.dashboard-action-card:hover {
  border-color: #15a3a159;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #0f36481a;
}

.dashboard-action-card:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #15a3a13d;
}

.dashboard-action-card > small:last-child, .dashboard-action-card > span:last-child {
  color: var(--muted, #687985);
}

#policies, #executions, #scheduler-current, #background-jobs, #invoices, #project-effectiveness, #create-invoice, #time-logs, #active-timers, #projects-pending, #projects-running, #projects-closed, #inventory-balances, #loyalty-programs, #loyalty-members, #loyalty-ledger, #loyalty-cases, #automation-rules, #reward-requests, #issued-vouchers, #automation-runs, #ticket-attention, #sales-performance, #activity-mix, #turnover-trend {
  scroll-margin-top: 110px;
}

.api-permission-fieldset {
  background: #fff;
  border: 1px solid #dbe4e6;
  border-radius: 14px;
  margin: 0;
  padding: 18px 18px 20px;
}

.api-permission-fieldset > legend {
  color: #193b40;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 750;
}

.api-permission-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.api-permission-option {
  cursor: pointer;
  background: #fbfdfd;
  border: 1px solid #dde6e8;
  border-radius: 12px;
  align-items: center;
  min-height: 54px;
  padding: 12px 14px;
  line-height: 1.35;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
  position: relative;
  color: #3f555a !important;
  gap: 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
}

.api-permission-option:hover {
  background: #f5fbfa;
  border-color: #b9d9d6;
  transform: translateY(-1px);
}

.api-permission-option:focus-within {
  border-color: #55bcb8;
  box-shadow: 0 0 0 3px #25b7b31a;
}

.api-permission-option > input {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
}

.api-permission-check {
  background: #fff;
  border: 1.5px solid #9caeb2;
  border-radius: 5px;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  transition: all .15s;
  box-shadow: inset 0 0 0 2px #fff;
}

.api-permission-option:has(input:checked) {
  background: #f1faf9;
  border-color: #65bdb9;
  box-shadow: 0 0 0 1px #25b7b314;
}

.api-permission-option:has(input:checked) .api-permission-check {
  background: #1da7a3;
  border-color: #1da7a3;
  position: relative;
  box-shadow: inset 0 0 0 3px #1da7a3;
}

.api-permission-option:has(input:checked) .api-permission-check:after {
  content: "";
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 9px;
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(45deg);
}

.api-permission-option-wide {
  grid-column: 1 / -1;
}

@media (max-width: 1050px) {
  .api-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .api-permission-option-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .api-permission-fieldset {
    padding: 14px;
  }

  .api-permission-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .api-permission-option, .api-permission-option-wide {
    grid-column: auto;
    min-height: 50px;
    padding: 11px 12px;
  }
}

.mobile-app .m-floating-field {
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 16px;
  min-width: 0;
  margin-top: 8px;
  padding: 0 12px;
  transition: border-color .16s, box-shadow .16s, background .16s;
  display: block;
  position: relative;
}

.mobile-app .m-floating-field > .m-floating-caption {
  z-index: 2;
  color: #6b7280;
  pointer-events: none;
  letter-spacing: .01em;
  background: #fff;
  padding: 0 6px;
  font-weight: 700;
  line-height: 14px;
  position: absolute;
  top: -7px;
  left: 13px;
  font-size: 10.5px !important;
}

.mobile-app .m-floating-field > input:not([type="hidden"]), .mobile-app .m-floating-field > select, .mobile-app .m-floating-field > textarea {
  width: 100%;
  min-height: 50px;
  color: inherit;
  border-radius: 0;
  padding: 15px 2px 11px;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.mobile-app .m-floating-field > textarea {
  resize: vertical;
  min-height: 92px;
  padding-top: 17px;
}

.mobile-app .m-floating-field > select {
  appearance: auto;
  padding-right: 24px;
}

.mobile-app .m-floating-field:focus-within {
  border-color: var(--y-primary, var(--youth-primary, #6f61dc));
  box-shadow: 0 0 0 3px var(--y-ring, #6f61dc1f);
}

.mobile-app .m-floating-field:focus-within > .m-floating-caption {
  color: var(--y-primary, var(--youth-primary, #6f61dc));
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-floating-field {
  border-color: color-mix(in srgb,var(--y-primary) 18%,#dfe3ea);
  background: var(--u-surface, #fff);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-floating-field > .m-floating-caption {
  background: var(--u-surface, #fff);
  color: var(--y-primary);
}

.mobile-app .m-floating-field.is-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px #dc262614;
}

.mobile-app .m-floating-field.is-error > .m-floating-caption {
  color: #b91c1c;
}

.mobile-app .m-floating-help {
  color: #7b8490;
  margin: 5px 4px 0;
  display: block;
  font-size: 10px !important;
}

@media (max-width: 640px) {
  .mobile-app .m-floating-field {
    border-radius: 15px;
  }

  .mobile-app .m-floating-field > input:not([type="hidden"]), .mobile-app .m-floating-field > select {
    min-height: 52px;
  }
}

.policy-center-page {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.policy-center-header {
  align-items: flex-start;
}

.policy-summary-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.policy-summary-bar > div {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 14px;
  align-items: baseline;
  gap: 9px;
  padding: 14px 16px;
  display: flex;
}

.policy-summary-bar strong {
  font-size: 24px;
}

.policy-summary-bar span {
  color: var(--muted, #64748b);
  font-size: 12px;
}

.policy-domain-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.policy-domain-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 16px;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  min-height: 132px;
  padding: 14px;
  display: grid;
  position: relative;
}

.policy-domain-icon {
  color: #2563eb;
  background: #eef4ff;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 18px;
  font-weight: 800;
  display: grid;
}

.policy-domain-icon.worktime_ot {
  color: #16965a;
  background: #edf9f2;
}

.policy-domain-icon.three_p {
  color: #7657d8;
  background: #f3efff;
}

.policy-domain-icon.insurance_tax {
  color: #287bd1;
  background: #eef6ff;
}

.policy-domain-icon.benefits {
  color: #df624f;
  background: #fff0ed;
}

.policy-domain-content strong {
  font-size: 13px;
}

.policy-domain-content p {
  color: var(--muted, #64748b);
  margin: 5px 0 18px;
  font-size: 11px;
  line-height: 1.4;
}

.policy-domain-content span {
  color: var(--muted, #64748b);
  font-size: 11px;
}

.policy-domain-action {
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  position: absolute;
  bottom: 11px;
  right: 12px;
}

.policy-list-card {
  overflow: hidden;
}

.policy-list-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  display: flex;
}

.policy-list-head h2 {
  margin: 0 0 4px;
}

.policy-table th {
  white-space: nowrap;
}

.policy-table td {
  vertical-align: middle;
}

.policy-config-summary {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 560px;
  display: block;
  overflow: hidden;
}

.policy-chip, .policy-status {
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.policy-chip {
  color: #475569;
  background: #f2f5f8;
}

.policy-status.on {
  color: #16803d;
  background: #e9f8ee;
}

.policy-status.off {
  color: #667085;
  background: #f1f3f6;
}

.policy-modal-backdrop {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1400;
  background: #1e293b61;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.policy-modal {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 20px;
  flex-direction: column;
  width: min(1180px, 96vw);
  height: min(820px, 92vh);
  display: flex;
  overflow: hidden;
  box-shadow: 0 28px 90px #0f172a47;
}

.policy-modal-header {
  border-bottom: 1px solid var(--border, #e2e8f0);
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  display: flex;
}

.policy-modal-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.policy-modal-header p {
  color: var(--muted, #64748b);
  margin: 0;
  font-size: 12px;
}

.policy-close {
  color: #475569;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
}

.policy-modal-layout {
  flex: 1;
  grid-template-columns: 260px 1fr;
  min-height: 0;
  display: grid;
}

.policy-modal-nav {
  border-right: 1px solid var(--border, #e2e8f0);
  background: #fbfcfe;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  display: flex;
}

.policy-modal-nav a {
  color: inherit;
  border-radius: 12px;
  grid-template-columns: 30px 1fr;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  text-decoration: none;
  display: grid;
}

.policy-modal-nav a > span {
  background: #eef2f7;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.policy-modal-nav a strong {
  font-size: 12px;
  display: block;
}

.policy-modal-nav a small {
  color: var(--muted, #64748b);
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.3;
  display: block;
}

.policy-modal-nav a.active {
  color: #1459c7;
  background: #edf5ff;
}

.policy-modal-nav a.active > span {
  color: #fff;
  background: #2475ef;
}

.policy-modal-main {
  min-width: 0;
  padding: 16px;
  overflow: auto;
}

.policy-modal-title {
  flex-direction: column;
  gap: 3px;
  margin: 0 0 12px;
  display: flex;
}

.policy-modal-title > span {
  font-size: 20px;
  font-weight: 800;
}

.policy-modal-title small {
  color: var(--muted, #64748b);
}

.policy-modal-form {
  flex-direction: column;
  gap: 10px;
  padding-bottom: 70px;
  display: flex;
}

.policy-section {
  border: 1px solid var(--border, #dbe4ea);
  background: var(--card, #fff);
  border-radius: 14px;
  overflow: hidden;
}

.policy-section > summary {
  cursor: pointer;
  background: #fcfdff;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  list-style: none;
  display: flex;
}

.policy-section > summary::-webkit-details-marker {
  display: none;
}

.policy-section > summary strong {
  font-size: 13px;
  display: block;
}

.policy-section > summary small {
  color: var(--muted, #64748b);
  margin-top: 2px;
  font-size: 10px;
  display: block;
}

.policy-chevron {
  color: #64748b;
  font-size: 18px;
}

.policy-section-body {
  border-top: 1px solid var(--border, #edf1f5);
  padding: 14px;
}

.policy-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  display: grid;
}

.policy-field-grid.policy-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.policy-span-2 {
  grid-column: span 2;
}

.policy-field-grid label, .policy-section label {
  font-size: 11px;
  font-weight: 650;
}

.policy-field-grid input, .policy-field-grid select, .policy-section textarea {
  margin-top: 5px;
}

.policy-gap-top {
  margin-top: 12px;
}

.policy-label {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
}

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

.policy-mode-card {
  border: 1px solid var(--border, #dbe4ea);
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.policy-mode-card:has(input:checked) {
  background: #f1f7ff;
  border-color: #3b82f6;
  box-shadow: inset 0 0 0 1px #3b82f6;
}

.policy-mode-card input {
  width: auto;
  margin: 0;
}

.policy-mode-card strong {
  font-size: 12px;
  display: block;
}

.policy-mode-card small {
  color: var(--muted, #64748b);
  margin-top: 2px;
  font-size: 10px;
  display: block;
}

.policy-check-row {
  border-top: 1px dashed var(--border, #dbe4ea);
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
}

.policy-check-row label {
  align-items: center;
  gap: 6px;
  display: flex;
}

.policy-check-row input {
  width: auto;
}

.policy-explain {
  background: #f7f9fc;
  border-radius: 12px;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  padding: 11px 12px;
  display: flex;
}

.policy-explain span {
  color: var(--muted, #64748b);
  font-size: 11px;
}

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

.policy-3p-card {
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  display: flex;
}

.policy-3p-card > b {
  font-size: 12px;
}

.policy-3p-card > small {
  color: var(--muted, #64748b);
  font-size: 10px;
}

.policy-3p-card label:has(input[type="checkbox"]) {
  align-items: center;
  gap: 6px;
  display: flex;
}

.policy-3p-card input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.policy-modal-footer {
  border-top: 1px solid var(--border, #dbe4ea);
  z-index: 2;
  background: #fffffff5;
  justify-content: space-between;
  gap: 10px;
  margin: 4px -16px -70px;
  padding: 10px 16px;
  display: flex;
  position: sticky;
  bottom: -70px;
}

@media (max-width: 1100px) {
  .policy-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .policy-modal-layout {
    grid-template-columns: 210px 1fr;
  }

  .policy-field-grid, .policy-field-grid.policy-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .policy-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .policy-domain-grid {
    grid-template-columns: 1fr;
  }

  .policy-modal-backdrop {
    padding: 0;
  }

  .policy-modal {
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
  }

  .policy-modal-layout {
    display: block;
  }

  .policy-modal-nav {
    border-right: 0;
    border-bottom: 1px solid var(--border, #dbe4ea);
    flex-direction: row;
    display: flex;
    overflow: auto;
  }

  .policy-modal-nav a {
    min-width: 170px;
  }

  .policy-field-grid, .policy-field-grid.policy-grid-4, .policy-mode-grid, .policy-3p-grid {
    grid-template-columns: 1fr;
  }

  .policy-span-2 {
    grid-column: auto;
  }

  .policy-list-head {
    display: block;
  }

  .policy-list-head .actions {
    margin-top: 8px;
  }
}

.shift-center-page {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.shift-center-header {
  align-items: flex-start;
}

.shift-summary-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.shift-summary-bar > div {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 15px;
  gap: 2px;
  padding: 14px 16px;
  display: grid;
}

.shift-summary-bar span {
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 700;
}

.shift-summary-bar strong {
  font-size: 25px;
  line-height: 1.1;
}

.shift-summary-bar small {
  color: var(--muted, #64748b);
  font-size: 10px;
}

.shift-list-card {
  overflow: hidden;
}

.shift-list-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  display: flex;
}

.shift-list-head h2 {
  margin: 0 0 4px;
}

.shift-filter-note {
  color: #245fbd;
  background: #eef5ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
}

.shift-kind-chip, .shift-source-chip {
  color: #475569;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.shift-rule-chips {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.shift-rule-chips span {
  color: #3566a9;
  background: #eef5ff;
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 9px;
}

.shift-inline-details {
  margin-top: 7px;
}

.shift-inline-details summary {
  cursor: pointer;
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
}

.shift-mini-form {
  grid-template-columns: 80px 90px 100px 100px 90px auto;
  align-items: end;
  gap: 6px;
  margin-top: 8px;
  display: grid;
}

.shift-mini-form .checkbox {
  font-size: 10px;
}

.shift-bottom-grid {
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  display: grid;
}

.shift-holiday-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.shift-holiday-list > div {
  border-bottom: 1px solid var(--border, #e2e8f0);
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.shift-holiday-list > div:last-child {
  border-bottom: 0;
}

.shift-holiday-list span {
  align-items: center;
  gap: 8px;
  display: flex;
}

.shift-holiday-list small {
  color: var(--muted, #64748b);
  white-space: nowrap;
}

.shift-modal-backdrop {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1450;
  background: #1e293b6b;
  justify-content: center;
  align-items: center;
  padding: 18px;
  display: flex;
  position: fixed;
  inset: 0;
}

.shift-modal {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 20px;
  flex-direction: column;
  width: min(1240px, 97vw);
  height: min(850px, 94vh);
  display: flex;
  overflow: hidden;
  box-shadow: 0 28px 90px #0f172a47;
}

.shift-modal-small {
  width: min(620px, 94vw);
  height: auto;
  max-height: 90vh;
}

.shift-modal-header {
  border-bottom: 1px solid var(--border, #e2e8f0);
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  display: flex;
}

.shift-modal-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.shift-modal-header p {
  color: var(--muted, #64748b);
  margin: 0;
  font-size: 11px;
}

.shift-modal-close {
  color: #475569;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
}

.shift-modal-layout {
  flex: 1;
  grid-template-columns: 220px minmax(0, 1fr) 230px;
  min-height: 0;
  display: grid;
}

.shift-modal-nav {
  border-right: 1px solid var(--border, #e2e8f0);
  background: #fbfcfe;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  display: flex;
  overflow: auto;
}

.shift-modal-nav button {
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
}

.shift-modal-nav button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #2475ef;
}

.shift-modal-main {
  scroll-behavior: smooth;
}

.shift-modal-nav a, .shift-modal-nav button {
  color: inherit;
  border-radius: 12px;
  grid-template-columns: 30px 1fr;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  text-decoration: none;
  display: grid;
}

.shift-modal-nav a > span, .shift-modal-nav button > span {
  background: #eef2f7;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.shift-modal-nav a strong, .shift-modal-nav button strong {
  font-size: 11px;
  display: block;
}

.shift-modal-nav a small, .shift-modal-nav button small {
  color: var(--muted, #64748b);
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.3;
  display: block;
}

.shift-modal-nav a.active, .shift-modal-nav button.active {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-nav a.active > span, .shift-modal-nav button.active > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-main {
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 13px;
  display: flex;
  overflow: auto;
}

.shift-modal-form {
  flex-direction: column;
  gap: 9px;
  display: flex;
}

.shift-form-panel {
  border: 1px solid var(--border, #dbe4ea);
  background: var(--card, #fff);
  border-radius: 14px;
  scroll-margin-top: 8px;
  overflow: hidden;
}

.shift-panel-head {
  border-bottom: 1px solid var(--border, #edf1f5);
  background: #fcfdff;
  padding: 10px 12px;
}

.shift-panel-head strong {
  font-size: 12px;
  display: block;
}

.shift-panel-head small {
  color: var(--muted, #64748b);
  margin-top: 2px;
  font-size: 9px;
  display: block;
}

.shift-panel-body {
  padding: 12px;
}

.shift-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 10px;
  display: grid;
}

.shift-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shift-field-grid label, .shift-subform label, .shift-simple-modal-form > label {
  font-size: 10px;
  font-weight: 700;
}

.shift-field-grid input, .shift-field-grid select, .shift-subform input, .shift-subform select, .shift-simple-modal-form input, .shift-simple-modal-form select {
  margin-top: 5px;
}

.shift-span-2 {
  grid-column: span 2;
}

.shift-help {
  color: var(--muted, #64748b);
  margin-top: 4px;
  font-weight: 400;
  display: block;
}

.shift-toggle-line {
  background: #f7f9fc;
  border-radius: 11px;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  display: flex;
}

.shift-toggle-line input {
  width: auto;
  margin-top: 2px;
}

.shift-toggle-line strong {
  font-size: 10px;
  display: block;
}

.shift-toggle-line small {
  color: var(--muted, #64748b);
  margin-top: 2px;
  font-size: 9px;
  display: block;
}

.shift-summary-panel {
  border-left: 1px solid var(--border, #e2e8f0);
  background: #fbfcfe;
  padding: 14px;
  overflow: auto;
}

.shift-summary-panel h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.shift-summary-panel h4 {
  margin: 16px 0 7px;
  font-size: 11px;
}

.shift-summary-preview {
  background: #eef5ff;
  border-radius: 13px;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  display: flex;
}

.shift-summary-preview strong {
  font-size: 13px;
}

.shift-summary-preview span {
  color: #4a6480;
  font-size: 10px;
}

.shift-summary-note {
  border-top: 1px solid var(--border, #e2e8f0);
  margin-top: 14px;
  padding-top: 12px;
}

.shift-summary-note strong {
  font-size: 11px;
}

.shift-summary-note p {
  color: var(--muted, #64748b);
  font-size: 10px;
  line-height: 1.5;
}

.shift-modal-footer {
  border-top: 1px solid var(--border, #dbe4ea);
  z-index: 4;
  background: #fffffff7;
  justify-content: space-between;
  gap: 10px;
  margin: 3px -13px -13px;
  padding: 9px 13px;
  display: flex;
  position: sticky;
  bottom: -13px;
}

.shift-roster-layout {
  grid-template-columns: 220px minmax(0, 1fr) 230px;
}

.shift-roster-main {
  padding-bottom: 0;
}

.shift-form-action {
  align-items: end;
  display: flex;
}

.shift-roster-two {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.shift-subform {
  border: 1px solid var(--border, #e2e8f0);
  background: #fcfdff;
  border-radius: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.shift-subform h4 {
  margin: 0;
  font-size: 11px;
}

.shift-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.shift-roster-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.shift-roster-metrics > div {
  background: #eef5ff;
  border-radius: 11px;
  padding: 10px;
}

.shift-roster-metrics > div:nth-child(2) {
  background: #eaf8ee;
}

.shift-roster-metrics > div:nth-child(3) {
  background: #fff5e9;
}

.shift-roster-metrics > div:nth-child(4) {
  background: #f4efff;
}

.shift-roster-metrics strong {
  font-size: 20px;
  display: block;
}

.shift-roster-metrics span {
  color: #526173;
  font-size: 9px;
}

.shift-week-preview {
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  display: grid;
}

.shift-week-preview div {
  border: 1px solid var(--border, #dbe4ea);
  text-align: center;
  border-radius: 8px;
  padding: 5px 2px;
}

.shift-week-preview span {
  color: var(--muted, #64748b);
  font-size: 8px;
  display: block;
}

.shift-week-preview strong {
  margin-top: 3px;
  font-size: 8px;
  display: block;
}

.shift-simple-modal-form {
  gap: 12px;
  padding: 16px;
  display: grid;
}

@media (max-width: 1150px) {
  .shift-modal-layout, .shift-roster-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .shift-summary-panel {
    display: none;
  }

  .shift-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shift-roster-two, .shift-bottom-grid {
    grid-template-columns: 1fr;
  }

  .shift-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .shift-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shift-modal-backdrop {
    padding: 0;
  }

  .shift-modal {
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
  }

  .shift-modal-layout, .shift-roster-layout {
    display: block;
  }

  .shift-modal-nav {
    border-right: 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
    flex-direction: row;
    display: flex;
    overflow: auto;
  }

  .shift-modal-nav a, .shift-modal-nav button {
    min-width: 155px;
  }

  .shift-field-grid, .shift-grid-4, .shift-two-col {
    grid-template-columns: 1fr;
  }

  .shift-span-2 {
    grid-column: auto;
  }

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

  .shift-center-header .actions {
    flex-wrap: wrap;
  }
}

.attendance-settings-backdrop {
  z-index: 120;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #0f172a6b;
  justify-content: center;
  align-items: center;
  padding: 22px;
  display: flex;
  position: fixed;
  inset: 0;
}

.attendance-settings-modal {
  background: #fff;
  border: 1px solid #dbe4ea;
  border-radius: 24px;
  flex-direction: column;
  width: min(1460px, 96vw);
  height: min(900px, 92vh);
  display: flex;
  overflow: hidden;
  box-shadow: 0 28px 80px #0f172a33;
}

.attendance-settings-header {
  border-bottom: 1px solid #e5edf2;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 26px 18px;
  display: flex;
}

.attendance-settings-header h2 {
  margin: 0;
  font-size: 28px;
}

.attendance-settings-header p {
  color: #64748b;
  margin: 6px 0 0;
}

.attendance-settings-close {
  color: #475569;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}

.attendance-settings-layout {
  flex: 1;
  grid-template-columns: 280px minmax(0, 1fr) 270px;
  min-height: 0;
  display: grid;
}

.attendance-settings-nav {
  background: #fbfdfe;
  border-right: 1px solid #e5edf2;
  padding: 18px 12px;
}

.attendance-settings-nav button {
  text-align: left;
  cursor: pointer;
  color: #334155;
  background: none;
  border: 0;
  border-radius: 16px;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 6px;
  padding: 13px 12px;
  display: flex;
}

.attendance-settings-nav button > span {
  background: #edf2f6;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 700;
  display: grid;
}

.attendance-settings-nav button div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.attendance-settings-nav button small {
  color: #64748b;
  font-size: 12px;
}

.attendance-settings-nav button.active {
  color: #1265c4;
  background: #eaf4ff;
}

.attendance-settings-nav button.active > span {
  color: #fff;
  background: #2878e8;
}

.attendance-settings-nav button.active small {
  color: #55708e;
}

.attendance-settings-main {
  scroll-behavior: smooth;
  background: #f8fafb;
  padding: 18px;
  overflow: auto;
}

.attendance-settings-form {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.attendance-settings-card {
  background: #fff;
  border: 1px solid #dce6ec;
  border-radius: 18px;
  padding: 18px;
  scroll-margin-top: 10px;
}

.attendance-settings-card h3 {
  margin: 0 0 14px;
  font-size: 17px;
}

.attendance-settings-card label {
  flex-direction: column;
  gap: 7px;
  font-weight: 600;
  display: flex;
}

.attendance-settings-card label small {
  color: #64748b;
  font-weight: 400;
}

.attendance-settings-card input, .attendance-settings-card select {
  width: 100%;
}

.attendance-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  display: grid;
}

.attendance-qr-legacy {
  background: #fbfdff;
  border: 1px solid #e4ebf0;
  border-radius: 14px;
  margin-top: 14px;
  padding: 12px;
}

.attendance-qr-legacy summary {
  cursor: pointer;
  font-weight: 700;
}

.attendance-month-note {
  color: #2563a7;
  background: #eaf4ff;
  border-radius: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
}

.attendance-month-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  display: grid;
}

.attendance-month-metrics > div {
  background: #f8fbfd;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  display: flex;
}

.attendance-month-metrics span {
  color: #64748b;
  font-size: 12px;
}

.attendance-month-metrics strong {
  font-size: 24px;
}

.attendance-month-table {
  max-height: none;
  overflow: auto visible;
}

.attendance-settings-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.attendance-settings-summary {
  background: #fbfdfe;
  border-left: 1px solid #e5edf2;
  padding: 20px 18px;
  overflow: auto;
}

.attendance-settings-summary h3 {
  margin: 0 0 16px;
}

.attendance-settings-summary > div {
  border-bottom: 1px solid #e7edf1;
  flex-direction: column;
  gap: 4px;
  padding: 13px 0;
  display: flex;
}

.attendance-settings-summary span {
  color: #64748b;
  font-size: 12px;
}

.attendance-settings-summary strong {
  font-size: 14px;
}

.attendance-settings-summary p {
  color: #47627f;
  background: #eaf4ff;
  border-radius: 12px;
  margin-top: 16px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.attendance-settings-launch {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.attendance-settings-launch h2 {
  margin-bottom: 5px;
}

@media (max-width: 1100px) {
  .attendance-settings-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .attendance-settings-summary {
    display: none;
  }

  .attendance-month-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .attendance-settings-backdrop {
    padding: 0;
  }

  .attendance-settings-modal {
    border-radius: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
  }

  .attendance-settings-layout {
    grid-template-columns: 1fr;
  }

  .attendance-settings-nav {
    border-bottom: 1px solid #e5edf2;
    border-right: 0;
    padding: 8px;
    display: flex;
    overflow: auto;
  }

  .attendance-settings-nav button {
    min-width: 190px;
    margin: 0 4px;
  }

  .attendance-settings-main {
    padding: 12px;
  }

  .attendance-settings-grid, .attendance-month-metrics {
    grid-template-columns: 1fr;
  }

  .attendance-settings-header {
    padding: 16px;
  }

  .attendance-settings-header h2 {
    font-size: 22px;
  }
}

.modal-step-nav {
  z-index: 12;
  pointer-events: auto;
  position: relative;
}

.modal-step-nav a {
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.modal-step-nav a:focus-visible {
  outline: 2px solid var(--accent, #2475ef);
  outline-offset: 2px;
}

.shift-modal-nav a {
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
}

.attendance-settings-nav a {
  text-align: left;
  cursor: pointer;
  color: #334155;
  background: none;
  border: 0;
  border-radius: 16px;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 6px;
  padding: 13px 12px;
  text-decoration: none;
  display: flex;
}

.attendance-settings-nav a > span {
  background: #edf2f6;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 700;
  display: grid;
}

.attendance-settings-nav a div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.attendance-settings-nav a small {
  color: #64748b;
  font-size: 12px;
}

.attendance-settings-nav a.active {
  color: #1265c4;
  background: #eaf4ff;
}

.attendance-settings-nav a.active > span {
  color: #fff;
  background: #2878e8;
}

.attendance-settings-nav a.active small {
  color: #55708e;
}

#shift-info, #shift-time, #shift-ot, #shift-scope, #roster-day, #roster-scope, #roster-rotate, #roster-project, #attendance-mode, #attendance-location, #attendance-month, #attendance-save {
  scroll-margin-top: 14px;
}

.modal-step-nav a {
  z-index: 1;
  position: relative;
}

.shift-modal-layout:has(:target) .shift-modal-nav a.active {
  color: inherit;
  background: none;
}

.shift-modal-layout:has(:target) .shift-modal-nav a.active > span {
  color: inherit;
  background: #eef2f7;
}

.attendance-settings-layout:has(:target) .attendance-settings-nav a.active {
  color: #334155;
  background: none;
}

.attendance-settings-layout:has(:target) .attendance-settings-nav a.active > span {
  color: #334155;
  background: #edf2f6;
}

.attendance-settings-layout:has(:target) .attendance-settings-nav a.active small {
  color: #64748b;
}

.shift-modal-layout:has(#shift-info:target) .shift-modal-nav a[href="#shift-info"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#shift-info:target) .shift-modal-nav a[href="#shift-info"] > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-layout:has(#shift-time:target) .shift-modal-nav a[href="#shift-time"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#shift-time:target) .shift-modal-nav a[href="#shift-time"] > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-layout:has(#shift-ot:target) .shift-modal-nav a[href="#shift-ot"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#shift-ot:target) .shift-modal-nav a[href="#shift-ot"] > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-layout:has(#shift-scope:target) .shift-modal-nav a[href="#shift-scope"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#shift-scope:target) .shift-modal-nav a[href="#shift-scope"] > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-layout:has(#roster-day:target) .shift-modal-nav a[href="#roster-day"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#roster-day:target) .shift-modal-nav a[href="#roster-day"] > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-layout:has(#roster-scope:target) .shift-modal-nav a[href="#roster-scope"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#roster-scope:target) .shift-modal-nav a[href="#roster-scope"] > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-layout:has(#roster-rotate:target) .shift-modal-nav a[href="#roster-rotate"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#roster-rotate:target) .shift-modal-nav a[href="#roster-rotate"] > span {
  color: #fff;
  background: #2475ef;
}

.shift-modal-layout:has(#roster-project:target) .shift-modal-nav a[href="#roster-project"] {
  color: #1459c7;
  background: #edf5ff;
}

.shift-modal-layout:has(#roster-project:target) .shift-modal-nav a[href="#roster-project"] > span {
  color: #fff;
  background: #2475ef;
}

:is(.shift-modal-layout:has(#forms-info:target) .shift-modal-nav a[href="#forms-info"], .shift-modal-layout:has(#forms-workflow:target) .shift-modal-nav a[href="#forms-workflow"], .shift-modal-layout:has(#forms-fields:target) .shift-modal-nav a[href="#forms-fields"], .shift-modal-layout:has(#forms-confirm:target) .shift-modal-nav a[href="#forms-confirm"], .shift-modal-layout:has(#forms-edit-info:target) .shift-modal-nav a[href="#forms-edit-info"], .shift-modal-layout:has(#forms-edit-workflow:target) .shift-modal-nav a[href="#forms-edit-workflow"], .shift-modal-layout:has(#forms-edit-fields:target) .shift-modal-nav a[href="#forms-edit-fields"], .shift-modal-layout:has(#forms-edit-confirm:target) .shift-modal-nav a[href="#forms-edit-confirm"]) {
  color: #1459c7;
  background: #edf5ff;
}

:is(.shift-modal-layout:has(#forms-info:target) .shift-modal-nav a[href="#forms-info"] > span, .shift-modal-layout:has(#forms-workflow:target) .shift-modal-nav a[href="#forms-workflow"] > span, .shift-modal-layout:has(#forms-fields:target) .shift-modal-nav a[href="#forms-fields"] > span, .shift-modal-layout:has(#forms-confirm:target) .shift-modal-nav a[href="#forms-confirm"] > span, .shift-modal-layout:has(#forms-edit-info:target) .shift-modal-nav a[href="#forms-edit-info"] > span, .shift-modal-layout:has(#forms-edit-workflow:target) .shift-modal-nav a[href="#forms-edit-workflow"] > span, .shift-modal-layout:has(#forms-edit-fields:target) .shift-modal-nav a[href="#forms-edit-fields"] > span, .shift-modal-layout:has(#forms-edit-confirm:target) .shift-modal-nav a[href="#forms-edit-confirm"] > span) {
  color: #fff;
  background: #2475ef;
}

.attendance-settings-layout:has(#attendance-mode:target) .attendance-settings-nav a[href="#attendance-mode"] {
  color: #1265c4;
  background: #eaf4ff;
}

.attendance-settings-layout:has(#attendance-mode:target) .attendance-settings-nav a[href="#attendance-mode"] > span {
  color: #fff;
  background: #2878e8;
}

.attendance-settings-layout:has(#attendance-mode:target) .attendance-settings-nav a[href="#attendance-mode"] small {
  color: #55708e;
}

.attendance-settings-layout:has(#attendance-location:target) .attendance-settings-nav a[href="#attendance-location"] {
  color: #1265c4;
  background: #eaf4ff;
}

.attendance-settings-layout:has(#attendance-location:target) .attendance-settings-nav a[href="#attendance-location"] > span {
  color: #fff;
  background: #2878e8;
}

.attendance-settings-layout:has(#attendance-location:target) .attendance-settings-nav a[href="#attendance-location"] small {
  color: #55708e;
}

.attendance-settings-layout:has(#attendance-month:target) .attendance-settings-nav a[href="#attendance-month"] {
  color: #1265c4;
  background: #eaf4ff;
}

.attendance-settings-layout:has(#attendance-month:target) .attendance-settings-nav a[href="#attendance-month"] > span {
  color: #fff;
  background: #2878e8;
}

.attendance-settings-layout:has(#attendance-month:target) .attendance-settings-nav a[href="#attendance-month"] small {
  color: #55708e;
}

.attendance-settings-layout:has(#attendance-save:target) .attendance-settings-nav a[href="#attendance-save"] {
  color: #1265c4;
  background: #eaf4ff;
}

.attendance-settings-layout:has(#attendance-save:target) .attendance-settings-nav a[href="#attendance-save"] > span {
  color: #fff;
  background: #2878e8;
}

.attendance-settings-layout:has(#attendance-save:target) .attendance-settings-nav a[href="#attendance-save"] small {
  color: #55708e;
}

.gps-attempt-log-wrap {
  overscroll-behavior: contain;
  border: 1px solid var(--border, #dbe4ea);
  border-radius: 14px;
  max-height: 760px;
  overflow: auto;
}

.gps-attempt-log-wrap table {
  margin: 0;
}

.gps-attempt-log-wrap thead th {
  z-index: 2;
  background: var(--card, #fff);
  box-shadow: 0 1px 0 var(--border, #dbe4ea);
  position: sticky;
  top: 0;
}

.gps-attempt-log-table tbody tr {
  height: 72px;
}

.gps-attempt-log-table td {
  vertical-align: top;
}

@media (max-width: 760px) {
  .gps-attempt-log-wrap {
    max-height: 620px;
  }
}

.nav-group-icon {
  transition: background .16s, color .16s, border-color .16s, transform .16s;
  position: relative;
}

.nav-group summary:hover .nav-group-icon, .nav-group[open] > .nav-group-icon {
  transform: translateY(-1px);
}

.nav-group[open] > summary .nav-group-icon, .nav-group.is-active > summary .nav-group-icon {
  color: #fff;
  background: #33404a;
  border-color: #465662;
}

.nav-group.is-active > summary {
  color: #fff;
  background: #20282e;
}

.nav-group-items a.is-active {
  color: #fff;
  background: #252c32;
  border-left-color: #9aa7b2;
}

.nav-group-icon[data-tooltip]:after {
  content: attr(data-tooltip);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  color: #fff;
  z-index: 80;
  background: #111827;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  transition: opacity .14s, transform .14s;
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%)translateX(-3px);
  box-shadow: 0 7px 20px #0000002e;
}

.nav-group-icon[data-tooltip]:hover:after {
  opacity: 1;
  transform: translateY(-50%)translateX(0);
}

.mobile-nav a {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.mobile-nav-icon {
  color: #647477;
  background: #f0f5f5;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  display: grid;
}

.mobile-nav-icon svg {
  width: 13px;
  height: 13px;
}

.mobile-nav a.is-active {
  color: #117b78;
  background: #eaf8f7;
  border-color: #bfe7e4;
  font-weight: 700;
}

.mobile-nav a.is-active .mobile-nav-icon {
  color: #128f8a;
  background: #d8f1ef;
}

.shell[data-admin-theme="MODERN"] .nav-group[open] > summary .nav-group-icon, .shell[data-admin-theme="MODERN"] .nav-group.is-active > summary .nav-group-icon {
  background: var(--a-primary);
  color: #fff;
  border-color: var(--a-primary);
}

.shell[data-admin-theme="MODERN"] .nav-group.is-active > summary {
  background: var(--a-soft);
  color: #116f6c;
  border-color: #bfe6e3;
}

.shell[data-admin-theme="MODERN"] .nav-group-items a.is-active {
  color: #116f6c;
  border-left-color: var(--a-primary);
  background: #eaf8f7;
}

.ux-body-modal-open {
  overflow: hidden;
}

.ux-auto-modal-opener {
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
  margin: 8px 0 14px;
}

.ux-auto-modal-backdrop {
  z-index: 1180;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #14232761;
  position: fixed;
  inset: 0;
}

.ux-auto-modal-form {
  display: none !important;
}

.ux-auto-modal-form.open {
  z-index: 1190;
  scroll-behavior: smooth;
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 22px;
  gap: 16px;
  max-height: 91vh;
  scroll-padding-top: 108px;
  position: fixed;
  inset: 4.5vh 4vw;
  overflow: auto;
  box-shadow: 0 28px 80px #1a3e423d;
  width: auto !important;
  max-width: none !important;
  padding: 92px 28px 92px 246px !important;
  display: grid !important;
}

.ux-auto-modal-toolbar {
  z-index: 1194;
  background: #fffffffa;
  border-bottom: 1px solid #e2ecec;
  border-radius: 22px 22px 0 0;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
  padding: 17px 72px 14px 28px;
  display: flex;
  position: fixed;
  top: 4.5vh;
  left: 4vw;
  right: 4vw;
  box-shadow: 0 5px 18px #1f56580a;
}

.ux-auto-modal-toolbar > div {
  gap: 4px;
  display: grid;
}

.ux-auto-modal-toolbar strong {
  color: #1a292d;
  font-size: 22px;
}

.ux-auto-modal-toolbar small {
  color: #708087;
  font-size: 12px;
  font-weight: 500;
}

.ux-auto-modal-close {
  color: #35545a;
  background: #f3f7f7;
  border: 0;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 24px;
  line-height: 1;
  position: absolute;
  top: 18px;
  right: 20px;
}

.ux-auto-modal-close:hover {
  color: #147b78;
  background: #e7f4f3;
}

.ux-auto-modal-nav {
  z-index: 1193;
  background: #fbfdfd;
  border-right: 1px solid #e0eaea;
  border-radius: 0 0 0 22px;
  align-content: start;
  gap: 8px;
  width: 218px;
  padding: 22px 16px;
  display: grid;
  position: fixed;
  top: calc(4.5vh + 76px);
  bottom: 4.5vh;
  left: 4vw;
  overflow: auto;
}

.ux-auto-modal-nav button {
  color: #30454a;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 9px;
  display: grid;
}

.ux-auto-modal-nav button > span {
  color: #26393e;
  background: #eef3f4;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  font-weight: 800;
  display: grid;
}

.ux-auto-modal-nav button strong {
  font-size: 12px;
  line-height: 1.25;
}

.ux-auto-modal-nav button:hover {
  background: #f1f9f8;
  border-color: #d7ecea;
}

.ux-auto-modal-nav button.active {
  color: #137a77;
  background: #eaf7f6;
  border-color: #cfeae7;
}

.ux-auto-modal-nav button.active > span {
  color: #fff;
  background: #20aaa6;
}

.ux-auto-group-marker {
  color: #203136;
  border-bottom: 1px solid #e3ecec;
  grid-column: 1 / -1;
  margin: 12px 0 2px;
  padding: 12px 0 9px;
  scroll-margin-top: 116px;
  font-size: 15px;
  font-weight: 800;
}

.ux-auto-modal-form.form-grid, .ux-auto-modal-form > .form-grid {
  max-width: none !important;
}

.ux-auto-modal-form.open > .actions:last-child, .ux-auto-modal-form.open > .form-actions:last-child {
  z-index: 1192;
  background: #fffffff7;
  border-top: 1px solid #e1ebeb;
  margin: 12px -28px -92px -246px;
  padding: 15px 28px 15px 246px;
  position: sticky;
  bottom: -92px;
}

.ux-table-pagination {
  color: #64767b;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 18px;
  font-size: 12px;
  display: flex;
}

.ux-table-page-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ux-table-page-actions label {
  color: #52666b;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  display: flex;
}

.ux-table-page-actions select {
  border-radius: 8px;
  width: auto;
  min-width: 66px;
  padding: 7px 24px 7px 9px;
}

.ux-page-prev, .ux-page-next {
  color: #31575b;
  background: #fff;
  border: 1px solid #d5e3e3;
  border-radius: 9px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 19px;
  display: grid;
}

.ux-page-prev:hover:not(:disabled), .ux-page-next:hover:not(:disabled) {
  color: #14817d;
  background: #edf8f7;
}

.ux-page-prev:disabled, .ux-page-next:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.ux-page-number {
  text-align: center;
  color: #334b50;
  min-width: 54px;
  font-weight: 800;
}

@media (max-width: 1050px) {
  .ux-auto-modal-form.open {
    inset: 2vh 2vw;
    padding: 88px 20px 86px !important;
  }

  .ux-auto-modal-toolbar {
    top: 2vh;
    left: 2vw;
    right: 2vw;
  }

  .ux-auto-modal-nav {
    z-index: 1193;
    background: #fff;
    border-bottom: 1px solid #e0eaea;
    border-right: 0;
    border-radius: 0;
    width: auto;
    padding: 10px 0;
    display: flex;
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    overflow-x: auto;
  }

  .ux-auto-modal-nav button {
    min-width: 170px;
  }

  .ux-auto-modal-form.open > .actions:last-child, .ux-auto-modal-form.open > .form-actions:last-child {
    margin: 12px -20px -86px;
    padding: 14px 20px;
  }
}

@media (max-width: 720px) {
  .ux-auto-modal-form.open {
    border-radius: 0;
    max-height: 100vh;
    inset: 0;
    padding: 82px 14px !important;
  }

  .ux-auto-modal-toolbar {
    border-radius: 0;
    padding-left: 16px;
    top: 0;
    left: 0;
    right: 0;
  }

  .ux-auto-modal-toolbar strong {
    font-size: 18px;
  }

  .ux-auto-modal-nav button {
    grid-template-columns: 28px minmax(0, 1fr);
    min-width: 142px;
    padding: 8px 7px;
  }

  .ux-auto-modal-nav button > span {
    width: 27px;
    height: 27px;
  }

  .ux-table-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .ux-table-page-actions {
    justify-content: flex-end;
    width: 100%;
  }
}

.ux-auto-modal-form.open {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.ux-auto-modal-form.open > .ux-auto-modal-toolbar, .ux-auto-modal-form.open > .ux-auto-modal-nav, .ux-auto-modal-form.open > .ux-auto-group-marker, .ux-auto-modal-form.open > fieldset, .ux-auto-modal-form.open > section, .ux-auto-modal-form.open > .card, .ux-auto-modal-form.open > .actions, .ux-auto-modal-form.open > .form-actions, .ux-auto-modal-form.open > h1, .ux-auto-modal-form.open > h2, .ux-auto-modal-form.open > h3, .ux-auto-modal-form.open > h4, .ux-auto-modal-form.open > p.muted {
  grid-column: 1 / -1;
}

.ux-auto-modal-form.open > fieldset, .ux-auto-modal-form.open > section, .ux-auto-modal-form.open > .card {
  box-shadow: none;
  background: #fcfefe;
  border: 1px solid #e0e9e9;
  border-radius: 16px;
  padding: 16px;
}

.ux-auto-modal-form.open > label {
  min-width: 0;
}

.ux-auto-modal-form.open input, .ux-auto-modal-form.open select, .ux-auto-modal-form.open textarea {
  border-color: #d3e0e0;
  border-radius: 10px;
  min-height: 42px;
}

.ux-auto-modal-form.open textarea {
  min-height: 96px;
}

.ux-auto-modal-form.open label {
  color: #273b40;
  font-weight: 700;
}

.ux-auto-modal-form.open .muted, .ux-auto-modal-form.open small {
  color: #718489;
}

@media (max-width: 720px) {
  .ux-auto-modal-form.open {
    grid-template-columns: 1fr;
  }
}

.project-center-header {
  align-items: flex-end;
}

.project-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.project-overview-card {
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  transition: all .18s;
  display: flex;
}

.project-overview-card:hover, .project-overview-card.active {
  border-color: #b9deda;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px #1f7a7714;
}

.project-overview-card > div {
  gap: 3px;
  display: grid;
}

.project-overview-card small {
  color: #687d82;
  font-weight: 700;
}

.project-overview-card strong {
  color: #1e3034;
  font-size: 26px;
}

.project-overview-card p {
  color: #809095;
  margin: 0;
  font-size: 11px;
}

.project-overview-dot {
  border-radius: 50%;
  flex: none;
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 7px #f1f6f6;
}

.project-overview-dot.pending {
  background: #e0a52b;
}

.project-overview-dot.running {
  background: #20aaa6;
}

.project-overview-dot.closed {
  background: #829096;
}

.project-overview-dot.total {
  background: #5867c7;
}

.project-list-card {
  padding: 0;
  overflow: hidden;
}

.project-list-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 22px 14px;
  display: flex;
}

.project-list-toolbar h2 {
  margin: 0 0 4px;
}

.project-status-tabs {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.project-status-tabs a {
  color: #53686d;
  background: #fff;
  border: 1px solid #dae5e5;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  font-weight: 700;
  display: inline-flex;
}

.project-status-tabs a span {
  background: #eef4f4;
  border-radius: 999px;
  place-items: center;
  min-width: 21px;
  height: 21px;
  font-size: 10px;
  display: grid;
}

.project-status-tabs a.active {
  color: #147c78;
  background: #eaf8f6;
  border-color: #bfe4e1;
}

.project-status-tabs a.active span {
  color: #fff;
  background: #20aaa6;
}

.project-table-wrap {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.project-table-name {
  align-items: center;
  gap: 10px;
  display: flex;
}

.project-table-name > span {
  color: #168d89;
  background: #eef8f7;
  border: 1px solid #d2ece9;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 800;
  display: grid;
}

.project-table-name > div {
  gap: 2px;
  display: grid;
}

.project-table-name small {
  color: #7b8b90;
}

.project-status-badge {
  border-radius: 999px;
  align-items: center;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.status-planned {
  color: #9a6b00;
  background: #fff7df;
}

.status-active {
  color: #18785f;
  background: #e7f8f3;
}

.status-on_hold {
  color: #52649f;
  background: #eef2fb;
}

.status-completed {
  color: #326b9c;
  background: #eaf4ff;
}

.status-cancelled {
  color: #777;
  background: #f4f4f4;
}

.project-empty-state {
  text-align: center;
  color: #7a8b90;
  padding: 28px;
}

.project-pagination {
  color: #6e8186;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  display: flex;
}

.project-pagination > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.project-pagination .button.disabled {
  opacity: .42;
  pointer-events: none;
}

.project-page-indicator {
  color: #43585d;
  font-weight: 700;
}

.project-modal-backdrop {
  z-index: 1300;
  pointer-events: auto;
}

.project-create-modal {
  max-width: 1480px;
}

.project-modal-layout {
  grid-template-columns: 300px minmax(0, 1fr) 280px;
}

.project-modal-main {
  background: #f8fbfb;
}

.project-modal-form {
  gap: 14px;
  padding-bottom: 86px;
  display: grid;
}

.project-modal-panel {
  background: #fff;
  border: 1px solid #dce7e7;
  border-radius: 17px;
  scroll-margin-top: 12px;
  overflow: hidden;
}

.project-modal-panel > header {
  background: #fbfdfd;
  border-bottom: 1px solid #e5eded;
  padding: 15px 18px;
}

.project-modal-panel > header h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.project-modal-panel > header p {
  color: #6e8188;
  margin: 0;
}

.project-modal-panel-body {
  padding: 17px;
}

.project-modal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.project-modal-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-modal-field {
  color: #263a3f;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
  display: grid;
}

.project-modal-field.span-2 {
  grid-column: 1 / -1;
}

.project-modal-field input, .project-modal-field select, .project-modal-field textarea {
  border-color: #d2dede;
  border-radius: 11px;
  min-height: 44px;
}

.project-modal-toggle {
  background: #f3f8f8;
  border-radius: 12px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
  padding: 13px 14px;
  display: flex;
}

.project-modal-toggle input {
  width: auto;
  margin-top: 2px;
}

.project-modal-toggle span {
  gap: 3px;
  display: grid;
}

.project-modal-toggle small {
  color: #708388;
  font-weight: 500;
}

.project-confirm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.project-confirm-grid > div {
  background: #fbfdfd;
  border: 1px solid #e1e9e9;
  border-radius: 13px;
  gap: 10px;
  padding: 13px;
  display: flex;
}

.project-confirm-grid > div > span {
  color: #178b87;
  background: #eaf7f6;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.project-confirm-grid p {
  gap: 4px;
  margin: 0;
  display: grid;
}

.project-confirm-grid small {
  color: #75878c;
}

.project-modal-footer {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 5;
  background: #fffffff7;
  margin-top: 0;
  position: sticky;
  bottom: 0;
}

.project-summary-panel {
  background: #fbfdfd;
}

.project-summary-hero {
  background: #eaf7f6;
  border-radius: 15px;
  gap: 5px;
  margin-bottom: 18px;
  padding: 16px;
  display: grid;
}

.project-summary-hero > span {
  color: #fff;
  background: #20aaa6;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 18px;
  font-weight: 800;
  display: grid;
}

.project-summary-hero strong {
  font-size: 16px;
}

.project-summary-hero small {
  color: #5e777c;
}

.project-summary-note {
  border-top: 1px solid #e1eaea;
  padding: 16px 0;
}

.project-summary-note p {
  color: #657b80;
  margin-bottom: 0;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .project-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-modal-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .project-summary-panel {
    display: none;
  }

  .project-modal-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .project-overview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-list-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-status-tabs {
    width: 100%;
  }

  .project-status-tabs a {
    flex: 1;
    justify-content: center;
  }

  .project-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-modal-layout, .project-modal-grid, .project-modal-grid-3, .project-confirm-grid {
    grid-template-columns: 1fr;
  }

  .project-modal-field.span-2 {
    grid-column: auto;
  }
}

.forms-center-header {
  align-items: flex-end;
}

.forms-overview-grid, .forms-detail-overview {
  margin-bottom: 18px;
}

.forms-list-card {
  margin-top: 0;
}

.forms-list-card .project-table-wrap, .forms-submission-card .project-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.forms-create-modal {
  z-index: 1310;
  pointer-events: auto;
  width: min(1480px, 96vw);
  max-width: 1480px;
  height: min(900px, 94vh);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.forms-create-modal * {
  pointer-events: auto;
}

.forms-create-modal .shift-modal-layout {
  min-height: 0;
}

.forms-create-modal .shift-modal-main, .forms-create-modal .shift-summary-panel, .forms-create-modal + * {
  pointer-events: auto;
}

.forms-modal-layout {
  grid-template-columns: 290px minmax(0, 1fr) 280px;
}

.forms-modal-main {
  background: #f7fbfb;
}

.forms-modal-form {
  padding-bottom: 86px;
}

.forms-modal-panel {
  scroll-margin-top: 12px;
}

.forms-builder-shell {
  background: #fbfdfd;
  border: 1px solid #e0e9e9;
  border-radius: 14px;
  padding: 14px;
  overflow: hidden;
}

.forms-builder-shell .form-grid {
  max-width: none;
}

.forms-builder-shell input, .forms-builder-shell select, .forms-builder-shell textarea {
  background: #fff;
}

.forms-detail-header {
  align-items: flex-end;
}

.forms-status-word {
  font-size: 19px !important;
}

.forms-workflow-summary {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
}

.forms-workflow-summary h2 {
  margin: 3px 0 5px;
}

.forms-workflow-summary p {
  margin: 0;
}

.forms-submission-card {
  padding: 0;
  overflow: hidden;
}

.forms-submission-card .project-pagination {
  border-top: 1px solid #edf1f1;
}

.forms-modal-panel .request-form-builder, .forms-builder-shell {
  min-width: 0;
}

.forms-modal-panel [data-form-builder], .forms-modal-panel .builder {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .forms-modal-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .forms-modal-layout .project-summary-panel {
    display: none;
  }
}

@media (max-width: 760px) {
  .forms-overview-grid, .forms-detail-overview {
    grid-template-columns: 1fr 1fr;
  }

  .forms-workflow-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .forms-modal-layout {
    grid-template-columns: 1fr;
  }

  .forms-create-modal {
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
  }
}

.workflows-center-header {
  align-items: flex-end;
}

.workflow-center-modal {
  width: min(1480px, 97vw);
  height: min(900px, 95vh);
}

.workflow-modal-layout {
  grid-template-columns: 280px minmax(0, 1fr) 270px;
  min-height: 0;
  overflow: hidden;
}

.workflow-modal-main {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #f7fbfb;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.workflow-modal-panel {
  scroll-margin-top: 12px;
}

.workflow-modal-backdrop {
  z-index: 1460;
}

.workflow-editor-summary-card {
  gap: 16px;
  display: grid;
}

.workflow-editor-summary-card .workflow-editor-title {
  margin: 0;
}

.workflow-editor-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.workflow-editor-summary-grid > div {
  background: #fbfdfd;
  border: 1px solid #e1eaea;
  border-radius: 12px;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.workflow-editor-summary-grid small {
  color: #73868b;
}

.workflow-core-form-popup, .workflow-new-step-popup {
  margin: 0;
}

.workflow-summary-panel {
  background: #fbfdfd;
}

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

.workflow-confirm-grid > div {
  background: #fbfdfd;
  border: 1px solid #e0e9e9;
  border-radius: 12px;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.workflow-confirm-grid > div > span {
  color: #168b87;
  background: #eaf7f6;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 800;
  display: grid;
}

.workflow-confirm-grid p {
  gap: 3px;
  margin: 0;
  display: grid;
}

.workflow-confirm-grid small {
  color: #73868b;
}

.workflow-modal-single-field {
  gap: 7px;
  max-width: 520px;
  font-weight: 700;
  display: grid;
}

.workflow-inline-note {
  background: #f3f8f8;
  border-radius: 12px;
  gap: 4px;
  padding: 13px 14px;
  display: grid;
}

.workflow-inline-note span {
  color: #6f8388;
}

.workflow-list-pagination {
  border-top: 1px solid #e6eeee;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  display: flex;
}

.workflow-list-pagination span {
  color: #6e8186;
  font-size: 10px;
}

.workflow-list-pagination .disabled, .project-pagination .disabled {
  opacity: .42;
  pointer-events: none;
}

.workflow-modal-main .workflow-step-card {
  margin-bottom: 10px;
}

.workflow-modal-main .workflow-step-grid {
  grid-template-columns: 1fr 1fr;
}

.workflow-modal-main .workflow-level-overview {
  margin-bottom: 12px;
}

@media (max-width: 1180px) {
  .workflow-modal-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .workflow-summary-panel {
    display: none;
  }
}

@media (max-width: 760px) {
  .workflow-modal-layout {
    display: block;
  }

  .workflow-editor-summary-grid, .workflow-confirm-grid, .workflow-modal-main .workflow-step-grid {
    grid-template-columns: 1fr;
  }

  .workflow-list-pagination {
    flex-wrap: wrap;
  }
}

:is(.shift-modal-layout:has(#workflow-edit-info:target) .shift-modal-nav a[href="#workflow-edit-info"], .shift-modal-layout:has(#workflow-edit-levels:target) .shift-modal-nav a[href="#workflow-edit-levels"], .shift-modal-layout:has(#workflow-edit-add:target) .shift-modal-nav a[href="#workflow-edit-add"], .shift-modal-layout:has(#workflow-edit-review:target) .shift-modal-nav a[href="#workflow-edit-review"], .shift-modal-layout:has(#workflow-create-info:target) .shift-modal-nav a[href="#workflow-create-info"], .shift-modal-layout:has(#workflow-create-scope:target) .shift-modal-nav a[href="#workflow-create-scope"], .shift-modal-layout:has(#workflow-create-notify:target) .shift-modal-nav a[href="#workflow-create-notify"], .shift-modal-layout:has(#workflow-create-confirm:target) .shift-modal-nav a[href="#workflow-create-confirm"]) {
  color: #1459c7;
  background: #edf5ff;
}

:is(.shift-modal-layout:has(#workflow-edit-info:target) .shift-modal-nav a[href="#workflow-edit-info"] > span, .shift-modal-layout:has(#workflow-edit-levels:target) .shift-modal-nav a[href="#workflow-edit-levels"] > span, .shift-modal-layout:has(#workflow-edit-add:target) .shift-modal-nav a[href="#workflow-edit-add"] > span, .shift-modal-layout:has(#workflow-edit-review:target) .shift-modal-nav a[href="#workflow-edit-review"] > span, .shift-modal-layout:has(#workflow-create-info:target) .shift-modal-nav a[href="#workflow-create-info"] > span, .shift-modal-layout:has(#workflow-create-scope:target) .shift-modal-nav a[href="#workflow-create-scope"] > span, .shift-modal-layout:has(#workflow-create-notify:target) .shift-modal-nav a[href="#workflow-create-notify"] > span, .shift-modal-layout:has(#workflow-create-confirm:target) .shift-modal-nav a[href="#workflow-create-confirm"] > span) {
  color: #fff;
  background: #2475ef;
}

.workflow-approver-panel.is-visible {
  display: grid;
}

.workflow-level-slot {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: inherit;
}

.workflow-level-slot small {
  color: #7a8b90;
  font-size: 10px;
}

.workflow-level-slot:hover, .workflow-level-slot.focused {
  background: #ecf9f8;
  border-color: #2aa9a5;
  box-shadow: 0 0 0 2px #2aa9a514;
}

.workflow-step-card-redesign {
  scroll-margin-top: 14px;
}

.workflow-step-card-redesign.is-focused {
  border-color: #2aa9a5;
  box-shadow: 0 0 0 2px #2aa9a51a, 0 8px 24px #21494d0f;
}

.workflow-modal-notice {
  margin: 10px 14px 0;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-step-grid {
  gap: 14px;
  grid-template-columns: 1fr !important;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-config-block {
  gap: 12px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr !important;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-config-block > .workflow-block-heading, .workflow-modal-main .workflow-step-card-redesign .workflow-config-block > .workflow-step-name, .workflow-modal-main .workflow-step-card-redesign .workflow-config-block > .workflow-approver-box {
  min-width: 0;
  grid-area: auto / 1 !important;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-rule-builder {
  min-width: 0;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-step-topbar {
  z-index: 4;
  position: sticky;
  top: 0;
}

.workflow-modal-main .workflow-step-list-redesign {
  gap: 14px;
  display: grid;
}

.workflow-modal-main .workflow-step-card-redesign {
  scrollbar-gutter: stable;
  border: 1px solid #dce7e8;
  max-height: 560px;
  overflow: auto;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-step-actions {
  min-width: max-content;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-step-identity, .workflow-modal-main .workflow-step-card-redesign .workflow-step-identity > div:last-child {
  min-width: 0;
}

.workflow-modal-main .workflow-step-card-redesign .workflow-step-identity h4 {
  overflow-wrap: anywhere;
}

.workflow-modal-main .workflow-new-step-popup {
  scrollbar-gutter: stable;
  max-height: 520px;
  padding-right: 4px;
  overflow: auto;
}

.workflow-modal-main #workflow-edit-add .shift-panel-body {
  padding-bottom: 0;
}

.workflow-modal-main .workflow-new-step-popup > .button {
  z-index: 4;
  color: #fff;
  background: #17191b;
  margin-top: 4px;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -10px 20px #fffffff5;
}

.workflow-approver-mode-grid {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 9px;
}

.workflow-approver-mode-option {
  white-space: normal;
  min-height: 44px;
  padding: 9px 11px;
}

.workflow-approver-mode-option span {
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.25;
}

.workflow-approver-panel {
  background: #fff;
  border: 1px solid #e1e9ea;
  border-radius: 12px;
  gap: 11px;
  padding: 12px;
  display: none;
}

.workflow-approver-native-fallback:has(input[name="approverMode"][value="MANAGER"]:checked) .panel-manager {
  display: grid;
}

.workflow-approver-native-fallback:has(input[name="approverMode"][value="DEPARTMENT_HEAD"]:checked) .panel-department-head {
  display: grid;
}

.workflow-approver-native-fallback:has(input[name="approverMode"][value="ROLE"]:checked) .panel-role {
  display: grid;
}

.workflow-approver-native-fallback:has(input[name="approverMode"][value="POSITION"]:checked) .panel-position {
  display: grid;
}

.workflow-approver-native-fallback:has(input[name="approverMode"][value="USER"]:checked) .panel-user {
  display: grid;
}

.workflow-approver-native-fallback:has(input[name="approverMode"][value="TARGET_EMPLOYEE"]:checked) .panel-target-employee {
  display: grid;
}

.workflow-approver-position-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.workflow-approver-panel label {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.workflow-approver-panel select, .workflow-approver-panel input {
  width: 100%;
  min-width: 0;
}

.workflow-candidate-list {
  align-content: start;
  max-height: 120px;
  overflow: auto;
}

@media (max-width: 900px) {
  .workflow-approver-position-grid {
    grid-template-columns: 1fr;
  }

  .workflow-modal-main .workflow-step-card-redesign, .workflow-modal-main .workflow-new-step-popup {
    max-height: none;
  }
}

.workflow-page-editor {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1560px, 98vw);
  height: min(930px, 96vh);
  display: grid;
  overflow: hidden;
}

.workflow-page-layout {
  border-top: 1px solid #e0e9e9;
  grid-template-columns: 270px minmax(0, 1fr) 270px;
  min-height: 0;
  display: grid;
}

.workflow-page-nav {
  background: #fbfdfd;
  border-right: 1px solid #e1eaea;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding: 16px 12px;
  display: grid;
  overflow-y: auto;
}

.workflow-page-nav > a {
  color: #172226;
  border: 1px solid #0000;
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  display: grid;
}

.workflow-page-nav > a:hover {
  background: #f0f7f7;
}

.workflow-page-nav > a.active {
  color: #1162bd;
  background: #e8f2ff;
  border-color: #d7e7fb;
}

.workflow-page-nav > a > span:last-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.workflow-page-nav b {
  font-size: 11px;
}

.workflow-page-nav small {
  color: #6b7e85;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  overflow: hidden;
}

.workflow-page-nav-dot {
  color: #223338;
  background: #eef3f5;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 800;
  display: grid;
}

.workflow-page-nav > a.active .workflow-page-nav-dot {
  color: #fff;
  background: #2f80ed;
}

.workflow-page-main {
  scrollbar-gutter: stable;
  background: #f7fbfb;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
}

.workflow-page-card {
  background: #fff;
  border: 1px solid #dce7e8;
  border-radius: 16px;
  align-content: start;
  gap: 18px;
  min-height: 100%;
  padding: 18px;
  display: grid;
}

.workflow-page-heading {
  border-bottom: 1px solid #e5eded;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  display: flex;
}

.workflow-page-heading h3 {
  margin: 3px 0 2px;
  font-size: 18px;
}

.workflow-page-heading p {
  color: #6b7e85;
  margin: 0;
}

.workflow-page-heading-actions {
  gap: 6px;
  display: flex;
}

.workflow-page-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.workflow-page-form label, .workflow-step-page-form > label {
  gap: 6px;
  font-weight: 700;
  display: grid;
}

.workflow-page-form .span-2 {
  grid-column: 1 / -1;
}

.workflow-page-actions {
  border-top: 1px solid #e3ebec;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  display: flex;
}

.workflow-level-page-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.workflow-level-page-card {
  color: #18272b;
  background: #fff;
  border: 1px solid #dae5e7;
  border-radius: 14px;
  grid-template-columns: 46px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  text-decoration: none;
  display: grid;
}

.workflow-level-page-card:hover {
  border-color: #27aaa5;
  box-shadow: 0 8px 24px #16505014;
}

.workflow-level-page-card.empty {
  background: #fbfdfd;
  border-style: dashed;
}

.workflow-level-page-number {
  color: #118b86;
  background: #e8f7f5;
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 18px;
  font-weight: 900;
  display: grid;
}

.workflow-level-page-card h4 {
  margin: 3px 0;
}

.workflow-level-page-card p {
  color: #6b7e85;
  margin: 0;
}

.workflow-level-page-arrow {
  color: #7c8f94;
  font-size: 20px;
}

.workflow-extra-levels {
  gap: 8px;
  display: grid;
}

.workflow-extra-levels > a {
  color: inherit;
  border: 1px solid #e0e9e9;
  border-radius: 10px;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 11px 12px;
  text-decoration: none;
  display: grid;
}

.workflow-step-page-form {
  gap: 18px;
  display: grid;
}

.workflow-page-section {
  background: #fbfdfd;
  border: 1px solid #dfe8e9;
  border-radius: 14px;
  gap: 14px;
  padding: 16px;
  display: grid;
}

.workflow-step-page .workflow-approver-box {
  max-width: none;
}

.workflow-step-page .workflow-approver-mode-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.workflow-step-page .workflow-approver-panel {
  padding: 14px;
}

.workflow-step-page .workflow-rule-builder {
  margin: 0;
}

.workflow-danger-zone {
  background: #fff8f7;
  border: 1px solid #f0d0cd;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px;
  display: flex;
}

.workflow-danger-zone p {
  color: #8d6b68;
  margin: 3px 0 0;
}

.workflow-review-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.workflow-review-cards > div {
  background: #fbfdfd;
  border: 1px solid #dee8e9;
  border-radius: 14px;
  gap: 6px;
  padding: 16px;
  display: grid;
}

.workflow-review-cards small, .workflow-review-cards span {
  color: #6d8086;
}

.workflow-review-levels {
  gap: 8px;
  display: grid;
}

.workflow-review-levels > a {
  color: inherit;
  border: 1px solid #dfe8e9;
  border-radius: 10px;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  display: grid;
}

.workflow-review-levels > a:hover {
  border-color: #28a9a4;
}

.workflow-page-summary {
  background: #fbfdfd;
  border-left: 1px solid #e1eaea;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 16px;
  display: grid;
  overflow-y: auto;
}

.workflow-page-summary h3 {
  margin: 0;
}

.workflow-summary-levels {
  border-top: 1px solid #e0e8e9;
  gap: 7px;
  padding-top: 12px;
  display: grid;
}

.workflow-summary-levels > div {
  grid-template-columns: 50px 1fr;
  gap: 8px;
  display: grid;
}

.workflow-summary-levels b.ok {
  color: #168b67;
}

.workflow-summary-levels b.muted {
  color: #8a999d;
  font-weight: 500;
}

.workflow-page-footer {
  background: #fff;
  border-top: 1px solid #e0e9e9;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

@media (max-width: 1180px) {
  .workflow-page-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .workflow-page-summary {
    display: none;
  }

  .workflow-step-page .workflow-approver-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .workflow-page-editor {
    border-radius: 0;
    width: 100vw;
    height: 100vh;
  }

  .workflow-page-layout {
    display: block;
    overflow-y: auto;
  }

  .workflow-page-nav {
    border-bottom: 1px solid #e1eaea;
    border-right: 0;
    display: flex;
    overflow-x: auto;
  }

  .workflow-page-nav > a {
    min-width: 190px;
  }

  .workflow-page-main {
    overflow: visible;
  }

  .workflow-page-card {
    min-height: auto;
  }

  .workflow-level-page-grid, .workflow-page-form, .workflow-review-cards {
    grid-template-columns: 1fr;
  }

  .workflow-step-page .workflow-approver-mode-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workflow-page-footer {
    position: sticky;
    bottom: 0;
  }
}

.workflow-management-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 18px;
  display: grid;
}

.workflow-management-stats > div {
  background: #fff;
  border: 1px solid #dfe7e9;
  border-radius: 16px;
  gap: 4px;
  padding: 16px 18px;
  display: grid;
  box-shadow: 0 7px 22px #1f3b4009;
}

.workflow-management-stats span {
  color: #6b7c82;
  font-size: 11px;
  font-weight: 700;
}

.workflow-management-stats b {
  color: #17262b;
  font-size: 24px;
  line-height: 1.1;
}

.workflow-management-stats small {
  color: #829197;
}

.workflow-management-card {
  padding: 0;
  overflow: hidden;
}

.workflow-management-head {
  border-bottom: 1px solid #e8edef;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 22px 16px;
  display: flex;
}

.workflow-management-head h2 {
  margin: 3px 0 4px;
}

.workflow-management-head p {
  color: #718187;
  margin: 0;
}

.workflow-management-table-wrap {
  border: 0;
  border-radius: 0;
  overflow-x: auto;
}

.workflow-management-table {
  min-width: 1120px;
}

.workflow-management-table th {
  white-space: nowrap;
}

.workflow-management-table td {
  vertical-align: middle;
}

.workflow-management-table td small {
  color: #7b8b90;
  margin-top: 3px;
  display: block;
}

.workflow-name-cell {
  align-items: center;
  gap: 11px;
  display: flex;
}

.workflow-row-icon {
  color: #15948e;
  background: #eaf7f6;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.workflow-name-cell b {
  white-space: nowrap;
  display: block;
}

.workflow-step-count {
  white-space: nowrap;
  background: #f0f5f5;
  border-radius: 999px;
  align-items: center;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.workflow-actions-col {
  width: 270px;
}

.workflow-row-actions {
  white-space: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  display: flex;
}

.workflow-row-actions form {
  margin: 0;
}

.workflow-row-actions .button {
  min-height: 34px;
}

.workflow-management-card > .project-pagination {
  border-top: 1px solid #edf1f2;
  padding: 12px 18px 16px;
}

.workflow-pending-section {
  margin-top: 24px;
}

.workflow-pending-section > .page-header {
  margin-bottom: 12px;
}

@media (max-width: 1050px) {
  .workflow-management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .workflow-management-stats {
    grid-template-columns: 1fr 1fr;
  }

  .workflow-management-head {
    align-items: flex-start;
  }

  .workflow-row-actions {
    justify-content: flex-start;
  }

  .workflow-management-stats b {
    font-size: 20px;
  }
}

.delegation-header {
  align-items: flex-end;
}

.delegation-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.delegation-metrics > div {
  border: 1px solid var(--border, #dbe4ea);
  background: #fff;
  border-radius: 16px;
  gap: 5px;
  padding: 16px;
  display: grid;
}

.delegation-metrics span {
  color: #5e747c;
  font-weight: 700;
}

.delegation-metrics b {
  font-size: 28px;
}

.delegation-metrics small {
  color: #819299;
}

.delegation-list-card, .delegation-log-card {
  padding: 0;
  overflow: hidden;
}

.delegation-section-head {
  border-bottom: 1px solid #e5eeee;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 18px 20px;
  display: flex;
}

.delegation-section-head h2 {
  margin: 4px 0;
}

.delegation-section-head p {
  color: #6e8186;
  margin: 0;
}

.delegation-list-card .table-wrap, .delegation-log-card .table-wrap {
  max-width: 100%;
  overflow: auto;
}

.delegation-modal-backdrop {
  z-index: 1520;
}

.delegation-modal {
  width: min(1480px, 97vw);
  height: min(900px, 95vh);
}

.delegation-modal-layout {
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  min-height: 0;
}

.delegation-modal-main {
  background: #f7fbfb;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.delegation-modal-form {
  padding-bottom: 72px;
}

.delegation-panel {
  scroll-margin-top: 12px;
}

.delegation-panel > header {
  border-bottom: 1px solid #e5eeee;
  margin: -13px -13px 14px;
  padding: 13px;
}

.delegation-panel > header h3 {
  margin: 0 0 4px;
}

.delegation-panel > header p {
  color: #6e8186;
  margin: 0;
}

.delegation-trigger-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.delegation-trigger-grid > label {
  cursor: pointer;
  background: #fbfdfd;
  border: 1px solid #dce7e7;
  border-radius: 13px;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  display: flex;
}

.delegation-trigger-grid input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.delegation-trigger-grid span {
  gap: 3px;
  display: grid;
}

.delegation-trigger-grid small {
  color: #74878d;
}

.delegation-timeout-field {
  max-width: 420px;
  margin-top: 12px;
}

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

.delegation-notify-grid > div {
  background: #fbfdfd;
  border: 1px solid #dce7e7;
  border-radius: 13px;
  gap: 4px;
  padding: 13px;
  display: grid;
}

.delegation-notify-grid span {
  color: #6e8186;
}

.delegation-engine-note {
  background: #eaf8f5;
  border-radius: 13px;
  margin-top: 12px;
  padding: 14px;
}

.delegation-engine-note p {
  color: #587077;
  margin: 5px 0 0;
}

.delegation-summary .shift-summary-card {
  gap: 7px;
  display: grid;
}

.status-badge {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.status-badge.active {
  color: #138050;
  background: #e8f8ef;
}

.status-badge.inactive {
  color: #6d7880;
  background: #f1f3f5;
}

@media (max-width: 1100px) {
  .delegation-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delegation-modal-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .delegation-summary {
    display: none;
  }
}

@media (max-width: 760px) {
  .delegation-metrics, .delegation-trigger-grid, .delegation-notify-grid {
    grid-template-columns: 1fr;
  }

  .delegation-modal {
    width: 100vw;
    height: 100vh;
    max-height: none;
  }

  .delegation-modal-layout {
    display: block;
  }
}

.approval-exec-dashboard {
  color: #1d2540;
  gap: 14px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 10px 12px 36px;
  display: grid;
}

.approval-exec-title {
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  display: flex;
}

.approval-exec-title > div:first-child > span, .approval-exec-section-head span {
  letter-spacing: .13em;
  color: #6a53e8;
  font-size: 9px;
  font-weight: 800;
}

.approval-exec-title h1 {
  letter-spacing: -.04em;
  margin: 4px 0 5px;
  font-size: 30px;
}

.approval-exec-title p, .approval-exec-section-head p {
  color: #7d869c;
  margin: 0;
}

.approval-exec-actions {
  gap: 8px;
  display: flex;
}

.approval-exec-actions a {
  color: #28314c;
  background: #fff;
  border: 1px solid #e2e6ef;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 800;
  text-decoration: none;
}

.approval-exec-actions a:first-child {
  color: #fff;
  background: #5b43f5;
  border-color: #5b43f5;
}

.approval-exec-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.approval-exec-kpis > a {
  color: inherit;
  background: #fff;
  border: 1px solid #e7eaf2;
  border-radius: 15px;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "icon label"
                       "icon value"
                       "icon sub";
  column-gap: 9px;
  padding: 16px;
  text-decoration: none;
  transition: all .18s;
  display: grid;
  box-shadow: 0 6px 20px #212a480b;
}

.approval-exec-kpis > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px #212a4814;
}

.approval-exec-kpis i {
  color: #6048f5;
  background: #f0edff;
  border-radius: 9px;
  grid-area: icon;
  place-items: center;
  width: 31px;
  height: 31px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.approval-exec-kpis span {
  color: #667086;
  grid-area: label;
  font-weight: 700;
}

.approval-exec-kpis strong {
  grid-area: value;
  font-size: 25px;
  line-height: 1.15;
}

.approval-exec-kpis small {
  color: #19965f;
  grid-area: sub;
}

.approval-exec-kpis small.danger {
  color: #e24c46;
}

.approval-exec-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.approval-exec-card {
  background: #fff;
  border: 1px solid #e6e9f1;
  border-radius: 16px;
  grid-column: span 4;
  min-height: 255px;
  padding: 17px;
  box-shadow: 0 6px 22px #232b4b0b;
}

.approval-exec-card.action {
  grid-column: span 4;
}

.approval-exec-card.trend {
  grid-column: span 5;
}

.approval-exec-card.trend + .approval-exec-card {
  grid-column: span 3;
}

.approval-exec-card.quick {
  grid-column: span 4;
}

.approval-exec-card-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  display: flex;
}

.approval-exec-card-head small {
  letter-spacing: .12em;
  color: #8a91a6;
  font-size: 8px;
  font-weight: 800;
}

.approval-exec-card-head h2 {
  margin: 3px 0 0;
  font-size: 15px;
}

.approval-exec-card-head > a, .approval-exec-card-head > span {
  color: #6851f4;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.approval-exec-action-list {
  display: grid;
}

.approval-exec-action-list > a {
  color: #384158;
  border-bottom: 1px solid #f0f1f5;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  text-decoration: none;
  display: grid;
}

.approval-exec-action-list > a:last-child {
  border: 0;
}

.approval-exec-action-list b {
  color: #654df5;
  background: #f0edff;
  border-radius: 50%;
  place-items: center;
  width: 25px;
  height: 25px;
  display: grid;
}

.approval-exec-action-list span {
  font-weight: 800;
  display: grid;
}

.approval-exec-action-list span small {
  color: #8a92a6;
  font-weight: 500;
}

.approval-exec-action-list em {
  color: #ef6b62;
  font-size: 8px;
  font-style: normal;
}

.approval-exec-line {
  color: #6248f6;
  width: 100%;
  height: 130px;
}

.approval-exec-axis {
  color: #8d95a6;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 8px;
  display: flex;
}

.approval-exec-donut-wrap {
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 170px;
  display: grid;
}

.approval-exec-donut {
  border-radius: 50%;
  place-items: center;
  width: 125px;
  height: 125px;
  display: grid;
  position: relative;
}

.approval-exec-donut:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  position: absolute;
}

.approval-exec-donut > span {
  z-index: 1;
  font-size: 18px;
  font-weight: 800;
  position: relative;
}

.approval-exec-legend {
  gap: 9px;
  display: grid;
}

.approval-exec-legend > div {
  color: #687086;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 7px;
  display: grid;
}

.approval-exec-legend .dot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.approval-exec-legend .purple {
  background: #5b43f5;
}

.approval-exec-legend .orange {
  background: #f5a623;
}

.approval-exec-legend .red {
  background: #ef4d4d;
}

.approval-exec-legend .gray {
  background: #dfe3ec;
}

.approval-exec-today {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.approval-exec-today > div {
  background: #fafbfe;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 15px;
  display: grid;
}

.approval-exec-today strong {
  font-size: 24px;
}

.approval-exec-today span {
  color: #798196;
}

.approval-exec-risks {
  display: grid;
}

.approval-exec-risks > div {
  border-bottom: 1px solid #f0f1f5;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  display: grid;
}

.approval-exec-risks i {
  border-radius: 8px;
  place-items: center;
  width: 25px;
  height: 25px;
  font-style: normal;
  display: grid;
}

.approval-exec-risks i.danger {
  color: #ef5149;
  background: #ffeded;
}

.approval-exec-risks i.warn {
  color: #e89813;
  background: #fff2df;
}

.approval-exec-risks i.info {
  color: #3288ed;
  background: #eaf3ff;
}

.approval-exec-bars {
  gap: 11px;
  display: grid;
}

.approval-exec-bars > div {
  grid-template-columns: 100px 1fr 28px;
  align-items: center;
  gap: 8px;
  display: grid;
}

.approval-exec-bars b {
  background: #eef0f6;
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}

.approval-exec-bars b i {
  background: #6450f4;
  border-radius: 99px;
  height: 100%;
  display: block;
}

.approval-exec-bars strong {
  text-align: right;
}

.approval-exec-rings {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.approval-exec-ring {
  border-radius: 50%;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: auto;
  display: grid;
  position: relative;
}

.approval-exec-ring:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 78px;
  height: 78px;
  position: absolute;
}

.approval-exec-ring > div {
  z-index: 1;
  text-align: center;
  display: grid;
  position: relative;
}

.approval-exec-ring strong {
  font-size: 18px;
}

.approval-exec-ring span {
  color: #7c8497;
}

.approval-exec-note {
  text-align: center;
  color: #7d8599;
}

.approval-exec-top {
  display: grid;
}

.approval-exec-top > div {
  border-bottom: 1px solid #f0f1f5;
  grid-template-columns: 24px 1fr 90px 28px;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  display: grid;
}

.approval-exec-top > div > b {
  color: #6750e8;
}

.approval-exec-top i {
  background: #efedf8;
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}

.approval-exec-top i em {
  background: #6c4ee7;
  height: 100%;
  display: block;
}

.approval-exec-quick {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.approval-exec-quick > a {
  color: #283049;
  background: #fafbfe;
  border: 1px solid #eceef4;
  border-radius: 11px;
  grid-template-columns: 28px 1fr;
  gap: 2px 8px;
  padding: 11px;
  text-decoration: none;
  display: grid;
}

.approval-exec-quick > a > span {
  color: #6047f5;
  background: #eeeafd;
  border-radius: 8px;
  grid-row: 1 / 3;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.approval-exec-quick b {
  font-size: 10px;
}

.approval-exec-quick small {
  color: #8a92a5;
  font-size: 8px;
}

.approval-exec-template-state {
  gap: 10px;
  margin-top: 13px;
  display: flex;
}

.approval-exec-template-state span {
  color: #70788d;
  background: #f8f9fc;
  border-radius: 9px;
  flex: 1;
  padding: 8px 10px;
}

.approval-exec-template-state b {
  float: right;
  color: #222a42;
}

.approval-exec-section {
  background: #fff;
  border: 1px solid #e6e9f1;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 22px #232b4b0a;
}

.approval-exec-section-head {
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.approval-exec-section-head h2 {
  margin: 4px 0;
}

.approval-exec-section-head > strong {
  color: #654de9;
  background: #f4f1ff;
  border-radius: 9px;
  padding: 7px 10px;
}

.approval-exec-inbox-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.approval-exec-inbox-grid > article {
  background: #fbfcfe;
  border: 1px solid #e8ebf2;
  border-radius: 13px;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;
  padding: 15px;
  display: grid;
}

.approval-exec-inbox-grid h3 {
  margin: 4px 0;
}

.approval-exec-inbox-grid p, .approval-exec-inbox-grid small {
  color: #747d91;
}

.approval-exec-inbox-grid form {
  gap: 7px;
  display: grid;
}

.approval-exec-inbox-grid form textarea {
  min-height: 62px;
}

.approval-exec-inbox-grid form > div {
  gap: 7px;
  display: flex;
}

.approval-exec-empty {
  color: #7d8598;
  text-align: center;
  background: #fafbfe;
  border-radius: 12px;
  padding: 18px;
}

.approval-exec-empty.big {
  padding: 32px;
}

.approval-status {
  background: #f0f2f7;
  border-radius: 999px;
  padding: 5px 8px;
  display: inline-flex;
}

.approval-status.approved {
  color: #188352;
  background: #eaf8f0;
}

.approval-status.pending {
  color: #b87a0c;
  background: #fff5df;
}

.approval-status.rejected {
  color: #bd3d38;
  background: #ffeded;
}

.approval-status.cancelled {
  color: #687082;
  background: #eff1f5;
}

.approval-exec-pagination {
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  display: flex;
}

.approval-exec-pagination a {
  color: #3b4358;
  background: #fff;
  border: 1px solid #e4e7ef;
  border-radius: 9px;
  padding: 8px 10px;
  text-decoration: none;
}

.approval-exec-pagination a.disabled {
  pointer-events: none;
  opacity: .45;
}

@media (max-width: 1250px) {
  .approval-exec-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .approval-exec-card, .approval-exec-card.action, .approval-exec-card.trend, .approval-exec-card.trend + .approval-exec-card, .approval-exec-card.quick {
    grid-column: span 6;
  }

  .approval-exec-inbox-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .approval-exec-dashboard {
    padding: 8px 0;
  }

  .approval-exec-title {
    display: grid;
  }

  .approval-exec-actions {
    flex-wrap: wrap;
  }

  .approval-exec-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .approval-exec-grid {
    grid-template-columns: 1fr;
  }

  .approval-exec-card, .approval-exec-card.action, .approval-exec-card.trend, .approval-exec-card.trend + .approval-exec-card, .approval-exec-card.quick {
    grid-column: 1;
  }

  .approval-exec-inbox-grid > article {
    grid-template-columns: 1fr;
  }

  .approval-exec-donut-wrap {
    grid-template-columns: 112px 1fr;
  }

  .approval-exec-donut {
    width: 105px;
    height: 105px;
  }

  .approval-exec-donut:after {
    width: 62px;
    height: 62px;
  }

  .approval-exec-quick {
    grid-template-columns: 1fr;
  }

  .approval-exec-section-head {
    align-items: flex-start;
    display: grid;
  }
}

.asset-header-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.asset-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.asset-list-card {
  overflow: hidden;
}

.asset-row-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.asset-row-actions form {
  margin: 0;
}

.asset-status {
  background: #eef4f5;
  border-radius: 999px;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.asset-status-assigned {
  color: #067a55;
  background: #e8f8f2;
}

.asset-status-in_stock {
  color: #2366a8;
  background: #edf5ff;
}

.asset-status-maintenance {
  color: #9c6500;
  background: #fff4df;
}

.asset-status-lost, .asset-status-disposed {
  color: #b83232;
  background: #ffeded;
}

.asset-pagination {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 2px 2px;
  display: flex;
}

.asset-pagination > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.asset-pagination .disabled {
  pointer-events: none;
  opacity: .45;
}

.asset-category-layout {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.asset-modal .shift-modal-main {
  min-height: 0;
  overflow-y: auto;
}

.asset-modal .shift-panel {
  scroll-margin-top: 18px;
}

.asset-confirm-card {
  background: #f7fbfb;
  border: 1px solid #dce7ea;
  border-radius: 14px;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  display: flex;
}

.asset-assign-modal {
  max-width: 860px;
}

.asset-assign-body {
  padding: 22px;
}

@media (max-width: 1000px) {
  .asset-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-category-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .asset-kpi-grid {
    grid-template-columns: 1fr;
  }

  .asset-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .asset-header-actions {
    width: 100%;
  }

  .asset-header-actions .button {
    flex: 1;
  }

  .asset-category-layout {
    grid-template-columns: 1fr;
  }
}

.supply-ops-dashboard .business-unit-scope-banner {
  margin: 0 0 14px;
}

.supply-ops-dashboard .supply-completion {
  color: #626b80;
  background: #fafbfe;
  border: 1px solid #eceef4;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 12px 13px;
  font-size: 10px;
  display: flex;
}

.supply-ops-dashboard .supply-completion strong {
  color: #1c2340;
  font-size: 18px;
}

.supply-ops-dashboard .exec-bars > div > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
}

.training-center-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
  display: grid;
}

.training-center-stats .learning-stat-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  gap: 5px;
  padding: 14px;
  display: grid;
}

.training-center-stats strong {
  font-size: 22px;
}

.training-create-modal .shift-modal-main {
  min-height: 0;
  overflow-y: auto;
}

.training-create-modal .shift-panel {
  scroll-margin-top: 16px;
}

.training-popup-multi {
  min-height: 118px;
}

.table-pagination {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 4px 2px;
  display: flex;
}

.button.disabled {
  pointer-events: none;
  opacity: .45;
}

@media (max-width: 1100px) {
  .training-center-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .training-center-stats {
    grid-template-columns: 1fr;
  }

  .table-pagination {
    flex-direction: column;
    align-items: flex-start;
  }
}

.people-development-dashboard .people-development-trend-note {
  color: #767d91;
  border-top: 1px solid #eef0f6;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 9px;
  font-size: 10px;
  display: flex;
}

.people-development-dashboard .people-development-trend-note b {
  color: #1c2340;
  margin-left: 4px;
}

.people-development-rate-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.people-development-rate-grid > a {
  color: inherit;
  background: #fafbfe;
  border: 1px solid #eceef5;
  border-radius: 11px;
  grid-template-columns: 1fr auto;
  gap: 7px;
  padding: 13px;
  text-decoration: none;
  display: grid;
}

.people-development-rate-grid > a > span {
  font-weight: 700;
}

.people-development-rate-grid > a > strong {
  font-size: 22px;
}

.people-development-rate-grid > a > i {
  background: #eceaf8;
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
}

.people-development-rate-grid > a > i > em {
  background: #6547e9;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.people-development-rate-grid > a > small {
  color: #8b90a2;
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .people-development-rate-grid {
    grid-template-columns: 1fr;
  }
}

.asset-status-delivering {
  color: #9c6500;
  background: #fff4df;
}

.asset-search-toolbar {
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(200px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 0 0 18px;
  display: grid;
}

.asset-search-toolbar label {
  gap: 6px;
  display: grid;
}

.asset-search-actions {
  gap: 8px;
  display: flex;
}

.asset-search-actions .button {
  white-space: nowrap;
}

.asset-timeline {
  gap: 10px;
  display: grid;
}

.asset-timeline-item {
  background: #fff;
  border: 1px solid #e5eaee;
  border-radius: 14px;
  padding: 13px 15px;
}

.asset-timeline-item > div {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.asset-timeline-item span, .asset-timeline-item small {
  color: #64748b;
  font-size: 12px;
}

.asset-timeline-item p {
  margin: 7px 0;
}

.alert.success {
  color: #166534;
  background: #ecfdf3;
  border-color: #a7f3d0;
}

.m-actions.m-approval-actions .m-danger {
  min-height: 44px;
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.m-actions.m-approval-actions .m-primary {
  color: #fff !important;
}

@media (max-width: 980px) {
  .asset-search-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .asset-search-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .asset-search-toolbar {
    grid-template-columns: 1fr;
  }

  .asset-search-actions {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}

.workflow-create-page-editor {
  overflow: hidden;
}

.workflow-create-page-layout {
  grid-template-rows: minmax(0, 1fr) auto;
  height: calc(100% - 86px);
}

.workflow-create-page-layout > .workflow-page-nav, .workflow-create-page-layout > .workflow-page-main, .workflow-create-page-layout > .workflow-page-summary {
  grid-row: 1;
}

.workflow-create-page-layout > .workflow-page-nav {
  grid-column: 1;
}

.workflow-create-page-layout > .workflow-page-main {
  grid-column: 2;
}

.workflow-create-page-layout > .workflow-page-summary {
  grid-column: 3;
}

.workflow-create-page-layout > .workflow-page-footer {
  grid-area: 2 / 1 / auto / -1;
}

.workflow-create-nav > button {
  appearance: none;
  color: #172226;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
  background: none;
  border: 1px solid #0000;
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: grid;
}

.workflow-create-nav > button:hover {
  background: #f0f7f7;
}

.workflow-create-nav > button.active {
  color: #1162bd;
  background: #e8f2ff;
  border-color: #d7e7fb;
}

.workflow-create-nav > button > span:last-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.workflow-create-nav > button b {
  font-size: 11px;
}

.workflow-create-nav > button small {
  color: #6b7e85;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  overflow: hidden;
}

.workflow-create-nav > button.active .workflow-page-nav-dot {
  color: #fff;
  background: #2f80ed;
}

.workflow-create-page-main {
  min-height: 0;
  overflow-y: auto;
}

.workflow-create-footer-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.workflow-create-footer button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .workflow-create-page-layout > .workflow-page-summary {
    display: none;
  }

  .workflow-create-page-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .workflow-create-page-layout {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: 1fr;
    height: calc(100% - 80px);
    display: grid;
  }

  .workflow-create-page-layout > .workflow-page-nav {
    grid-area: 1 / 1;
    display: flex;
    overflow-x: auto;
  }

  .workflow-create-page-layout > .workflow-page-main {
    grid-area: 2 / 1;
    overflow-y: auto;
  }

  .workflow-create-page-layout > .workflow-page-footer {
    grid-area: 3 / 1;
  }

  .workflow-create-nav > button {
    min-width: 190px;
  }

  .workflow-create-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-create-footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    margin-left: 0;
  }
}

.workflow-session-page-editor {
  overflow: hidden;
}

.workflow-session-page-layout {
  height: 100%;
  min-height: 0;
}

.workflow-session-main {
  background: #f7fbfb;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.workflow-session-main > .workflow-page-card {
  max-width: none;
  min-height: 100%;
}

.workflow-session-nav > a {
  min-height: 68px;
}

.workflow-session-footer-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.workflow-session-footer {
  min-height: 66px;
  padding: 10px 18px;
}

.workflow-session-page-editor .workflow-page-heading {
  padding-bottom: 16px;
}

.workflow-session-page-editor .workflow-page-card {
  padding: 20px;
}

.workflow-session-page-editor .workflow-inline-note {
  align-self: end;
}

@media (max-width: 760px) {
  .workflow-session-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-session-footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    margin-left: 0;
  }

  .workflow-session-main {
    padding: 12px;
  }
}

.workflow-create-scroll-editor {
  overflow: hidden;
}

.workflow-create-scroll-layout {
  flex: 1;
  grid-template-columns: 230px minmax(0, 1fr) 260px;
  min-height: 0;
}

.workflow-create-scroll-main {
  scroll-behavior: smooth;
  background: #f7fbfb;
  gap: 12px;
  min-height: 0;
  padding: 14px 16px 0;
  overflow-y: auto;
}

.workflow-create-panel {
  flex: none;
  scroll-margin-top: 12px;
}

.workflow-create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.workflow-create-grid label {
  gap: 6px;
  font-weight: 700;
  display: grid;
}

.workflow-create-grid .span-2 {
  grid-column: 1 / -1;
}

.workflow-create-scroll-footer {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #fffffffa;
  align-items: center;
  min-height: 64px;
  margin: 4px -16px 0;
  padding: 12px 16px;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

.workflow-create-scroll-footer .button {
  min-width: 140px;
}

.workflow-create-scroll-footer .button:last-child {
  margin-left: auto;
}

@media (max-width: 1150px) {
  .workflow-create-scroll-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .workflow-create-scroll-layout > .workflow-page-summary {
    display: none;
  }
}

@media (max-width: 760px) {
  .workflow-create-scroll-layout {
    display: block;
  }

  .workflow-create-scroll-layout > .shift-modal-nav {
    z-index: 5;
    border-right: 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
    flex-direction: row;
    display: flex;
    position: sticky;
    top: 0;
    overflow-x: auto;
  }

  .workflow-create-scroll-layout > .shift-modal-nav a {
    min-width: 190px;
  }

  .workflow-create-scroll-main {
    height: calc(100vh - 145px);
    padding: 12px 12px 0;
  }

  .workflow-create-grid {
    grid-template-columns: 1fr;
  }

  .workflow-create-grid .span-2 {
    grid-column: auto;
  }

  .workflow-create-scroll-footer {
    gap: 8px;
    margin-left: -12px;
    margin-right: -12px;
    padding: 10px 12px;
  }

  .workflow-create-scroll-footer .button {
    flex: 1;
    min-width: 0;
  }
}

.employee-filter-card {
  margin: 16px 0;
}

.employee-filter-card .page-header {
  margin-bottom: 14px;
}

.employee-filter-grid label {
  flex-direction: column;
  gap: 7px;
  font-weight: 700;
  display: flex;
}

.employee-list-card {
  margin-top: 16px;
}

.employee-table-wrap {
  overflow-x: auto;
}

.employee-pagination {
  margin-top: 14px;
}

.employee-pagination > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

@media (max-width: 1200px) {
  .employee-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-filter-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .employee-filter-grid {
    grid-template-columns: 1fr;
  }

  .employee-filter-search {
    grid-column: auto;
  }

  .employee-filter-actions {
    flex-wrap: wrap;
    grid-column: auto;
  }

  .employee-pagination {
    align-items: flex-start;
    gap: 10px;
  }

  .employee-pagination > div {
    flex-wrap: wrap;
  }
}

.workflow-skip-rules {
  background: #f8fcfc;
  border: 1px solid #dce9e8;
  border-radius: 14px;
  gap: 14px;
  padding: 16px;
  display: grid;
}

.workflow-skip-rules .workflow-block-heading p {
  color: #667785;
  margin: 5px 0 0;
  font-size: 11px;
}

.workflow-skip-auto {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d7e7e4;
  border-radius: 12px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  display: flex !important;
}

.workflow-skip-auto input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.workflow-skip-auto > span {
  gap: 3px;
  display: grid;
}

.workflow-skip-auto small {
  color: #6b7785;
  font-weight: 400;
}

.workflow-skip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.workflow-skip-grid label {
  gap: 6px;
  font-weight: 700;
  display: grid;
}

.workflow-skip-grid select {
  min-height: 92px;
}

.workflow-skip-grid small {
  color: #788591;
  font-weight: 400;
}

@media (max-width: 760px) {
  .workflow-skip-grid {
    grid-template-columns: 1fr;
  }
}

.asset-blocked-notice {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.asset-blocked-notice > div:first-child {
  gap: 4px;
  display: grid;
}

.asset-blocked-notice span {
  font-size: 13px;
}

.asset-blocked-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex !important;
}

.asset-blocked-actions form, .asset-row-actions form {
  margin: 0;
}

.m-actions.m-approval-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  display: grid;
}

.m-actions.m-approval-actions form {
  width: 100%;
  min-width: 0;
}

.m-actions.m-approval-actions .m-primary, .m-actions.m-approval-actions .m-danger {
  width: 100%;
  height: 56px;
  min-height: 56px;
  font: inherit;
  box-shadow: none;
  justify-content: center;
  align-items: center;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  border: 0 !important;
  border-radius: 16px !important;
}

.m-actions.m-approval-actions .m-primary {
  color: #fff !important;
  background: #16a34a !important;
  border-color: #16a34a !important;
}

.m-actions.m-approval-actions .m-primary:hover {
  background: #15803d !important;
}

.m-actions.m-approval-actions .m-danger {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.m-actions.m-approval-actions .m-reject-form {
  gap: 12px;
  display: grid;
}

.m-actions.m-approval-actions .m-reject-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
}

@media (max-width: 640px) {
  .m-actions.m-approval-actions {
    grid-template-columns: 1fr;
  }
}

.m-actions.m-approval-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end !important;
}

.m-actions.m-approval-actions > form {
  width: 100% !important;
  min-width: 0 !important;
}

.m-actions.m-approval-actions button.m-primary, .m-actions.m-approval-actions button.m-danger {
  border-radius: 16px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
}

.m-actions.m-approval-actions button.m-primary {
  color: #fff !important;
  background: #16a34a !important;
  border-color: #16a34a !important;
}

.m-actions.m-approval-actions button.m-primary:hover {
  background: #15803d !important;
}

.m-actions.m-approval-actions button.m-danger {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

@media (max-width: 640px) {
  .m-actions.m-approval-actions {
    grid-template-columns: 1fr !important;
  }
}

.asset-handover-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 18px !important;
  display: grid !important;
}

.asset-handover-column {
  width: 100% !important;
  min-width: 0 !important;
}

.asset-handover-column form {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
}

.asset-handover-reason {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  font: inherit !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 0 18px !important;
  display: block !important;
}

.asset-handover-button {
  box-sizing: border-box !important;
  color: #fff !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  font: inherit !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 16px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: flex !important;
}

.asset-handover-button-accept {
  background: #16a34a !important;
}

.asset-handover-button-accept:hover {
  background: #15803d !important;
}

.asset-handover-button-reject {
  background: #dc2626 !important;
}

.asset-handover-button-reject:hover {
  background: #b91c1c !important;
}

@media (max-width: 640px) {
  .asset-handover-actions {
    grid-template-columns: 1fr !important;
  }

  .asset-handover-column {
    width: 100% !important;
  }
}

.audit-filter-card {
  margin: 16px 0;
}

.audit-filter-card .page-header {
  margin-bottom: 14px;
}

.audit-filter-grid {
  grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 12px;
  display: grid;
}

.audit-filter-grid label {
  flex-direction: column;
  gap: 7px;
  font-weight: 700;
  display: flex;
}

.audit-filter-grid input, .audit-filter-grid select {
  width: 100%;
}

.audit-filter-actions {
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.audit-list-card {
  margin-top: 16px;
}

.audit-table-wrap {
  overflow-x: auto;
}

.audit-pagination {
  margin-top: 14px;
}

.audit-pagination > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.audit-pagination .disabled {
  opacity: .45;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .audit-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-filter-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .audit-filter-grid {
    grid-template-columns: 1fr;
  }

  .audit-filter-search, .audit-filter-actions {
    grid-column: auto;
  }

  .audit-filter-actions {
    flex-wrap: wrap;
  }

  .audit-pagination {
    align-items: flex-start;
    gap: 10px;
  }
}

.session-filter-grid {
  grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(140px, 1fr));
}

@media (max-width: 1280px) {
  .session-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .session-filter-grid .audit-filter-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .session-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .session-filter-grid {
    grid-template-columns: 1fr;
  }

  .session-filter-grid .audit-filter-search, .session-filter-grid .audit-filter-actions {
    grid-column: auto;
  }
}

.m-asset-list {
  gap: 10px;
  display: grid;
}

.m-asset-item {
  padding: 0;
  overflow: hidden;
}

.m-asset-summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  list-style: none;
  display: flex;
}

.m-asset-summary::-webkit-details-marker {
  display: none;
}

.m-asset-summary-main {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.m-asset-summary-main strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.m-asset-summary-main small {
  color: #718096;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.m-asset-item[open] .m-asset-summary {
  border-bottom: 1px solid #edf0f4;
}

.m-asset-detail {
  padding: 14px 15px 16px;
}

.m-asset-transfer {
  border: 1px solid #dfe5ea;
  border-radius: 14px;
  margin-top: 12px;
  overflow: hidden;
}

.m-asset-transfer > summary {
  cursor: pointer;
  color: #167d73;
  background: #f7faf9;
  padding: 13px 14px;
  font-weight: 800;
  list-style: none;
}

.m-asset-transfer > summary::-webkit-details-marker {
  display: none;
}

.m-asset-transfer[open] > summary {
  border-bottom: 1px solid #e5e7eb;
}

.m-asset-transfer > .m-form-stack {
  padding: 14px;
}

.team-calendar-header .eyebrow {
  letter-spacing: .09em;
  color: var(--accent, #0f9f9a);
  font-size: 11px;
  font-weight: 700;
}

.team-calendar-toolbar {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.team-calendar-filters {
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  display: flex;
}

.team-calendar-filters label {
  gap: 5px;
  font-weight: 700;
  display: grid;
}

.team-calendar-filters input, .team-calendar-filters select {
  min-height: 38px;
}

.team-calendar-view-toggle {
  border: 1px solid var(--border, #dce5e7);
  background: #f8fbfb;
  border-radius: 12px;
  padding: 4px;
  display: flex;
}

.team-calendar-view-toggle a {
  border-radius: 9px;
  padding: 8px 14px;
  font-weight: 700;
  text-decoration: none;
}

.team-calendar-view-toggle a.active {
  color: var(--accent, #0f9f9a);
  background: #fff;
  box-shadow: 0 3px 12px #1b3d421a;
}

.team-calendar-kpis {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  display: grid;
}

.team-calendar-kpis > .card {
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.team-calendar-kpis small {
  color: var(--muted, #6d7b80);
  display: block;
}

.team-calendar-kpis strong {
  font-size: 20px;
}

.team-status {
  background: #edf2f3;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  height: 30px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.team-status.present {
  color: #167346;
  background: #daf7e7;
}

.team-status.late {
  color: #8d6400;
  background: #fff0c9;
}

.team-status.leave {
  color: #6944a8;
  background: #efe5ff;
}

.team-status.off, .team-status.holiday {
  color: #637078;
  background: #edf0f3;
}

.team-status.business_trip {
  color: #18678c;
  background: #dff3ff;
}

.team-status.remote {
  color: #0f756c;
  background: #dcf7f4;
}

.team-status.absent {
  color: #aa3838;
  background: #ffe1e1;
}

.team-status.scheduled, .team-status.today_pending {
  color: #395f9f;
  background: #e8efff;
}

.team-status.no_schedule {
  color: #8c6330;
  background: #fff1dc;
}

.team-calendar-card {
  padding: 0;
  overflow: hidden;
}

.team-calendar-nav {
  border-bottom: 1px solid var(--border, #e2e8e9);
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
}

.team-calendar-nav a {
  font-weight: 700;
  text-decoration: none;
}

.team-calendar-legend {
  border-bottom: 1px solid var(--border, #e2e8e9);
  color: #53636a;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 16px;
  font-size: 11px;
  display: flex;
}

.team-calendar-legend span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.team-calendar-legend i {
  background: #ddd;
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.team-calendar-legend i.present {
  background: #66c68e;
}

.team-calendar-legend i.late {
  background: #efbd4e;
}

.team-calendar-legend i.leave {
  background: #9a7bd5;
}

.team-calendar-legend i.off {
  background: #a4adb3;
}

.team-calendar-legend i.trip {
  background: #55a9d2;
}

.team-calendar-legend i.remote {
  background: #54bfb4;
}

.team-calendar-legend i.absent {
  background: #e87878;
}

.team-calendar-legend i.scheduled {
  background: #789de1;
}

.team-calendar-scroll {
  max-height: 68vh;
  overflow: auto;
}

.team-calendar-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: max-content;
  font-size: 11px;
}

.team-calendar-table th, .team-calendar-table td {
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #edf1f2;
  border-right: 1px solid #edf1f2;
  min-width: 46px;
  height: 50px;
  padding: 4px;
}

.team-calendar-table thead th {
  z-index: 4;
  background: #f7fafb;
  position: sticky;
  top: 0;
}

.team-calendar-table th span {
  color: #839096;
  font-size: 9px;
  display: block;
}

.team-calendar-table th b {
  font-size: 12px;
}

.team-calendar-table .employee-col {
  z-index: 3;
  text-align: left;
  border-right: 1px solid #dce5e7;
  min-width: 205px;
  max-width: 205px;
  padding: 8px 12px;
  position: sticky;
  left: 0;
}

.team-calendar-table thead .employee-col {
  z-index: 6;
}

.team-calendar-table .employee-col strong, .team-calendar-table .employee-col small {
  display: block;
}

.team-calendar-table .employee-col small {
  color: #718087;
  margin-top: 3px;
}

.team-calendar-table .summary-col {
  z-index: 3;
  text-align: left;
  background: #fbfcfc;
  min-width: 145px;
  padding: 8px;
  position: sticky;
  right: 0;
}

.team-calendar-table thead .summary-col {
  z-index: 6;
}

.team-calendar-table .summary-col small {
  line-height: 1.45;
  display: block;
}

.team-calendar-table td.today, .team-calendar-table th.today {
  box-shadow: inset 2px 0 #72a1ff, inset -2px 0 #72a1ff;
}

.team-calendar-cell {
  border-radius: 9px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  min-width: 38px;
  min-height: 38px;
  padding: 3px;
  text-decoration: none;
  display: flex;
}

.team-calendar-cell b {
  font-size: 10px;
}

.team-calendar-cell small {
  font-size: 8px;
}

.team-calendar-cell.present {
  color: #236e48;
  background: #e4f8ec;
}

.team-calendar-cell.late {
  color: #805f0c;
  background: #fff3d1;
}

.team-calendar-cell.leave {
  color: #68479f;
  background: #f1e9ff;
}

.team-calendar-cell.off, .team-calendar-cell.holiday {
  color: #68747b;
  background: #eff2f4;
}

.team-calendar-cell.business_trip {
  color: #1e6688;
  background: #e2f4ff;
}

.team-calendar-cell.remote {
  color: #156d65;
  background: #e0f7f4;
}

.team-calendar-cell.absent {
  color: #9c3f3f;
  background: #ffe6e6;
}

.team-calendar-cell.scheduled, .team-calendar-cell.today_pending {
  color: #49699e;
  background: #ebf1ff;
}

.team-calendar-cell.no_schedule {
  color: #8c6330;
  background: #fff4e5;
}

.team-calendar-cell.selected {
  outline: 2px solid var(--accent, #0f9f9a);
  outline-offset: 1px;
}

.team-calendar-detail {
  margin-top: 14px;
}

.team-calendar-detail-head {
  border-bottom: 1px solid #e7ecee;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  display: flex;
}

.team-calendar-detail-head > div {
  align-items: center;
  gap: 12px;
  display: flex;
}

.team-calendar-detail-head h2, .team-calendar-detail-head p {
  margin: 0;
}

.team-calendar-detail-head a {
  text-decoration: none;
}

.team-calendar-detail-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  display: grid;
}

.team-calendar-detail-grid > div {
  background: #fbfdfd;
  border: 1px solid #e8edef;
  border-radius: 12px;
  padding: 12px;
}

.team-calendar-detail-grid small, .team-calendar-detail-grid span {
  color: #718087;
  display: block;
}

.team-calendar-detail-grid strong {
  margin: 4px 0;
  display: block;
}

.team-calendar-detail-grid .span-2 {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .team-calendar-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .team-calendar-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contract-expiry-summary article {
  min-height: 118px;
}

.contract-expiry-summary h2 {
  margin: 8px 0;
  font-size: 30px;
}

.contract-expiry-summary a {
  font-weight: 700;
  text-decoration: none;
}

.contract-expiry-filters {
  align-items: end;
  gap: 12px;
}

.contract-expiry-filters label {
  gap: 5px;
  display: grid;
}

.contract-expiry-search {
  flex: 1;
  min-width: 280px;
}

.contract-expiry-badge {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.contract-expiry-badge.danger {
  color: #b42318;
  background: #fff0ee;
  border: 1px solid #f4b9b2;
}

.contract-expiry-badge.warning {
  color: #8a5a00;
  background: #fff8df;
  border: 1px solid #efd787;
}

.contract-expiry-badge.info {
  color: #175b91;
  background: #eef7ff;
  border: 1px solid #b9d9f2;
}

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

@media (max-width: 760px) {
  .contract-expiry-filters {
    display: grid;
  }

  .contract-expiry-search {
    min-width: 0;
  }

  .pagination {
    align-items: flex-start;
  }
}

.payslip-legal {
  overflow: hidden;
}

.payslip-legal details {
  border-top: 1px solid #e5e7eb;
  margin-top: 10px;
}

.payslip-legal summary {
  cursor: pointer;
  color: #0f172a;
  padding: 12px 0;
  font-weight: 800;
  list-style: none;
}

.payslip-legal summary::-webkit-details-marker {
  display: none;
}

.payslip-legal summary:after {
  content: "⌄";
  float: right;
  color: #64748b;
}

.payslip-legal details[open] summary:after {
  content: "⌃";
}

.payslip-ident {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
  padding: 10px;
  display: grid;
}

.payslip-ident div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.payslip-ident small {
  color: #64748b;
  font-size: 10px;
}

.payslip-section .payslip-row {
  align-items: flex-start;
}

.payslip-row span {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.payslip-row span small {
  font-size: 9px;
}

.payslip-row.strong {
  background: #eefaf7;
  border-radius: 8px;
  margin: 0 -8px;
  padding: 9px 8px;
}

.payslip-row.strong span, .payslip-row.strong b {
  font-weight: 900;
}

.payslip-note {
  background: #fff8e8;
  border: 1px solid #f2dfae;
  border-radius: 10px;
  margin-top: 10px;
  padding: 9px;
  font-size: 11px;
}

@media (max-width: 620px) {
  .payslip-ident {
    grid-template-columns: 1fr;
  }

  .payslip-legal .payslip-head strong {
    font-size: 22px;
  }
}

.temporary-staff-modal-backdrop {
  z-index: 1510;
}

.temporary-staff-create-modal {
  width: min(1380px, 96vw);
  height: min(880px, 94vh);
}

.temporary-staff-modal-layout {
  grid-template-columns: 250px minmax(0, 1fr) 260px;
  min-height: 0;
  overflow: hidden;
}

.temporary-staff-modal-main {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #f8fbfb;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.temporary-staff-popup-form {
  padding-bottom: 0;
}

.temporary-staff-panel {
  scroll-margin-top: 14px;
}

.temporary-staff-panel .shift-panel-heading {
  margin-bottom: 14px;
}

.temporary-staff-panel textarea {
  resize: vertical;
  min-height: 92px;
}

.temporary-staff-inline-note {
  background: #f1f8f7;
  border: 1px solid #dbeaea;
  border-radius: 12px;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 14px;
  display: grid;
}

.temporary-staff-inline-note span {
  color: #667d83;
}

.temporary-staff-summary {
  background: #fbfdfd;
}

.temporary-staff-summary .shift-summary-note {
  margin-bottom: 10px;
}

.temporary-staff-modal-footer {
  z-index: 5;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #f8fbfbf7;
  border-top: 1px solid #e0eaea;
  padding: 14px 0 2px;
  position: sticky;
  bottom: 0;
}

@media (max-width: 1100px) {
  .temporary-staff-modal-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .temporary-staff-summary {
    display: none;
  }
}

@media (max-width: 760px) {
  .temporary-staff-create-modal {
    width: 98vw;
    height: 96vh;
  }

  .temporary-staff-modal-layout {
    display: block;
  }

  .temporary-staff-modal-layout > .shift-modal-nav {
    z-index: 8;
    border-bottom: 1px solid var(--border);
    background: #fff;
    padding: 10px;
    display: flex;
    position: sticky;
    top: 0;
    overflow-x: auto;
  }

  .temporary-staff-modal-layout > .shift-modal-nav a {
    min-width: 180px;
  }

  .temporary-staff-modal-main {
    height: calc(96vh - 94px);
  }

  .temporary-staff-panel .shift-field-grid {
    grid-template-columns: 1fr;
  }

  .temporary-staff-panel .shift-span-2 {
    grid-column: auto;
  }
}

.access-quick-grid {
  grid-template-columns: 2fr repeat(3, minmax(160px, 1fr));
  gap: 14px;
  margin: 16px 0;
  display: grid;
}

.access-primary-card {
  background: linear-gradient(135deg, #eff8ff, #f6fbff);
  border: 1px solid #bcdcf8;
}

.access-primary-card h2 {
  margin: 6px 0 8px;
}

.access-kicker {
  letter-spacing: .08em;
  color: #1666a8;
  font-size: 11px;
  font-weight: 800;
}

.access-count-pill {
  background: #fff;
  border: 1px solid #d7e8f5;
  border-radius: 999px;
  align-items: center;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.access-account-list-card {
  margin-top: 0;
}

.access-row-needs-account td {
  background: #fffdf7;
}

.access-role-form-clear {
  grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.5fr) minmax(170px, 1fr) minmax(170px, 1fr);
  align-items: center;
  gap: 8px;
  display: grid;
}

.access-role-form-clear .button {
  white-space: nowrap;
}

.access-guide-card {
  background: #fbfcfe;
}

.access-guide-steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.access-guide-steps > div {
  border: 1px solid var(--border, #e4e9ef);
  background: #fff;
  border-radius: 12px;
  padding: 14px;
}

.access-guide-steps strong, .access-guide-steps span {
  display: block;
}

.access-guide-steps span {
  color: var(--muted, #6b7280);
  margin-top: 5px;
  font-size: 12px;
}

.access-advanced {
  padding: 0;
  overflow: hidden;
}

.access-advanced > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  list-style: none;
  display: flex;
}

.access-advanced > summary::-webkit-details-marker {
  display: none;
}

.access-advanced > summary span {
  color: var(--muted, #6b7280);
  font-size: 12px;
  font-weight: 400;
}

.access-advanced[open] > summary {
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: #fafbfc;
}

.access-advanced-body {
  padding: 16px 18px;
}

.employee-filter-grid {
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(170px, 1fr));
  align-items: end;
  gap: 12px;
  display: grid;
}

.employee-filter-grid label {
  gap: 6px;
  font-weight: 700;
  display: grid;
}

.employee-filter-grid input, .employee-filter-grid select {
  width: 100%;
}

.employee-filter-actions {
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.table-pagination {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  display: flex;
}

.table-pagination > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.table-pagination .disabled {
  opacity: .45;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .access-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .access-primary-card {
    grid-column: 1 / -1;
  }

  .access-role-form-clear {
    grid-template-columns: 1fr 1fr;
  }

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

  .employee-filter-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .access-quick-grid, .access-guide-steps, .employee-filter-grid {
    grid-template-columns: 1fr;
  }

  .access-primary-card, .employee-filter-search, .employee-filter-actions {
    grid-column: auto;
  }

  .access-role-form-clear {
    grid-template-columns: 1fr;
  }

  .access-advanced > summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .table-pagination {
    align-items: flex-start;
  }
}

.beta-shell {
  color: #13223c;
  background: #f4f7fb;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  display: grid;
}

.beta-sidebar {
  color: #edf5ff;
  background: linear-gradient(#0d1b2d, #101d2c 62%, #132133);
  flex-direction: column;
  gap: 18px;
  height: 100vh;
  padding: 18px 12px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: auto;
}

.beta-brand {
  color: #fff;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  text-decoration: none;
  display: flex;
}

.beta-brand img, .beta-brand > span {
  object-fit: contain;
  border-radius: 9px;
  width: 34px;
  height: 34px;
}

.beta-brand > span {
  background: linear-gradient(135deg, #1f87ff, #5fd5cb);
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  display: grid;
}

.beta-brand strong {
  letter-spacing: .02em;
  font-size: 18px;
  display: block;
}

.beta-brand small {
  color: #93a5bc;
  letter-spacing: .1em;
  font-size: 7px;
  display: block;
}

.beta-nav {
  gap: 5px;
  display: grid;
}

.beta-nav a {
  color: #dce6f1;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.beta-nav a:hover {
  color: #fff;
  background: #1d3046;
}

.beta-nav a span {
  text-align: center;
  color: #a8b8ca;
  width: 20px;
  font-size: 16px;
}

.beta-side-section {
  border-top: 1px solid #26394e;
  gap: 5px;
  padding: 16px 10px 0;
  display: grid;
}

.beta-side-section small {
  color: #64cfd1;
  letter-spacing: .12em;
  font-weight: 800;
}

.beta-side-section p {
  color: #92a5b8;
  margin: 0;
  line-height: 1.5;
}

.beta-help {
  background: #16273a;
  border: 1px solid #263b52;
  border-radius: 12px;
  margin-top: auto;
  padding: 14px;
}

.beta-help p {
  color: #9eb0c1;
  line-height: 1.5;
}

.beta-help a {
  color: #17263a;
  text-align: center;
  background: #fff;
  border-radius: 7px;
  padding: 9px;
  font-weight: 800;
  text-decoration: none;
  display: block;
}

.beta-main {
  min-width: 0;
}

.beta-topbar {
  z-index: 20;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff0;
  border-bottom: 1px solid #e3e9f1;
  justify-content: space-between;
  align-items: center;
  height: 62px;
  padding: 0 24px;
  display: flex;
  position: sticky;
  top: 0;
}

.beta-search {
  color: #8492a6;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  width: min(440px, 45vw);
  height: 36px;
  padding: 0 12px;
  display: flex;
}

.beta-user {
  align-items: center;
  gap: 8px;
  display: flex;
}

.beta-user strong, .beta-user small {
  display: block;
}

.beta-user small {
  color: #8793a5;
}

.beta-avatar {
  color: #2c64b7;
  background: #e7eefb;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 900;
  display: grid;
}

.beta-badge {
  color: #2768cf;
  letter-spacing: .08em;
  background: #e7f1ff;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 900;
}

.beta-content {
  max-width: 1700px;
  margin: auto;
  padding: 22px 24px 38px;
}

.beta-page-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
  display: flex;
}

.beta-page-head h1 {
  color: #10213d;
  margin: 3px 0 6px;
  font-size: 26px;
}

.beta-page-head h1 em {
  color: #2768d0;
  vertical-align: middle;
  background: #e5efff;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-style: normal;
}

.beta-page-head p {
  color: #6f7e92;
  margin: 0;
  font-size: 12px;
}

.beta-section-kicker {
  letter-spacing: .09em;
  color: #6180aa;
  font-size: 9px;
  font-weight: 900;
}

.beta-head-actions {
  gap: 8px;
  display: flex;
}

.beta-btn {
  color: #fff;
  background: #1677ff;
  border: 1px solid #1677ff;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.beta-btn.secondary {
  color: #203550;
  background: #fff;
  border-color: #d9e2ed;
}

.beta-card {
  background: #fff;
  border: 1px solid #e0e7f0;
  border-radius: 12px;
  box-shadow: 0 6px 20px #27436609;
}

.beta-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  display: grid;
}

.beta-metric {
  background: #fff;
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  display: flex;
}

.beta-metric > span {
  color: #1ba56c;
  background: #eaf7f0;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-weight: 900;
  display: grid;
}

.beta-metric:nth-child(2) > span {
  color: #3a75e4;
  background: #eaf1ff;
}

.beta-metric:nth-child(3) > span {
  color: #8a56dc;
  background: #f3ebff;
}

.beta-metric:nth-child(4) > span {
  color: #d28b18;
  background: #fff4dc;
}

.beta-metric strong {
  font-size: 22px;
  line-height: 1.05;
  display: block;
}

.beta-metric small {
  color: #697b91;
  margin-top: 5px;
  display: block;
}

.beta-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.beta-module-card {
  background: #fff;
  border: 1px solid #e0e7f0;
  border-radius: 12px;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 18px;
  display: grid;
}

.beta-module-card > span {
  color: #4f83e6;
  background: #ecf3ff;
  border-radius: 10px;
  place-items: center;
  height: 44px;
  font-size: 20px;
  font-weight: 900;
  display: grid;
}

.beta-module-card h2 {
  margin: 2px 0 6px;
  font-size: 17px;
}

.beta-module-card p {
  color: #728197;
  margin: 0 0 14px;
  line-height: 1.55;
}

.beta-module-card > div > div {
  gap: 8px;
  display: flex;
}

.beta-compare {
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-top: 14px;
  padding: 18px;
  display: flex;
}

.beta-compare h2 {
  margin: 3px 0 6px;
}

.beta-compare p {
  color: #728197;
  max-width: 720px;
  margin: 0;
}

.beta-compare-cards {
  gap: 8px;
  display: flex;
}

.beta-compare-cards div {
  background: #fafcff;
  border: 1px solid #e4eaf2;
  border-radius: 9px;
  min-width: 100px;
  padding: 12px;
}

.beta-compare-cards b {
  color: #3675db;
  font-size: 18px;
  display: block;
}

.beta-compare-cards span, .beta-compare-cards small {
  display: block;
}

.beta-compare-cards small {
  color: #8a97a8;
  margin-top: 3px;
}

.beta-split {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 12px;
  display: grid;
}

.beta-list {
  min-width: 0;
  overflow: hidden;
}

.beta-list-head {
  border-bottom: 1px solid #e6ebf2;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  display: flex;
}

.beta-list-head h2 {
  margin: 0 0 3px;
}

.beta-list-head p {
  color: #8290a2;
  margin: 0;
}

.beta-tabs {
  white-space: nowrap;
  gap: 18px;
  display: flex;
}

.beta-tabs span {
  color: #748297;
  padding: 8px 0;
  font-weight: 700;
}

.beta-tabs span.active {
  color: #236ee4;
  border-bottom: 2px solid #236ee4;
}

.beta-filter {
  color: #758399;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 7px;
  padding: 8px 10px;
}

.beta-table-wrap {
  max-height: 66vh;
  overflow: auto;
}

.beta-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
}

.beta-table th {
  z-index: 2;
  color: #738198;
  text-align: left;
  background: #f7f9fc;
  border-bottom: 1px solid #e5ebf2;
  padding: 10px;
  font-weight: 700;
  position: sticky;
  top: 0;
}

.beta-table td {
  color: #40526a;
  border-bottom: 1px solid #eef2f6;
  padding: 10px;
}

.beta-table tr.selected td {
  background: #f1f6ff;
}

.beta-table td strong, .beta-table td small {
  display: block;
}

.beta-table td small {
  color: #8a97a8;
  margin-top: 3px;
}

.beta-table a {
  color: #4676bf;
  text-decoration: none;
}

.beta-chip {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.beta-chip.blue {
  color: #2e70d5;
  background: #e7f0ff;
}

.beta-chip.purple {
  color: #7a4fbc;
  background: #f1e8ff;
}

.beta-status {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.beta-status i {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.beta-status.on {
  color: #16824f;
  background: #e6f7ed;
}

.beta-status.off {
  color: #6f7e8d;
  background: #f1f3f6;
}

.beta-detail {
  background: #fff;
  border: 1px solid #e0e7f0;
  border-radius: 12px;
  position: sticky;
  top: 78px;
  overflow: hidden;
}

.beta-detail > header {
  border-bottom: 1px solid #e7edf4;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  display: flex;
}

.beta-detail h2 {
  margin: 0 0 3px;
  font-size: 17px;
}

.beta-detail header small {
  color: #8290a2;
}

.beta-detail-tabs {
  border-bottom: 1px solid #e7edf4;
  gap: 15px;
  padding: 0 16px;
  display: flex;
}

.beta-detail-tabs span {
  color: #75849a;
  padding: 11px 0;
  font-size: 9px;
  font-weight: 800;
}

.beta-detail-tabs span.active {
  color: #2570df;
  border-bottom: 2px solid #2570df;
}

.beta-detail-body {
  gap: 10px;
  padding: 16px;
  display: grid;
}

.beta-detail-row {
  background: #fbfcfe;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  padding: 10px;
}

.beta-detail-row span {
  color: #7c8999;
  font-size: 9px;
  display: block;
}

.beta-detail-row strong {
  margin-top: 5px;
  font-size: 11px;
  display: block;
}

.beta-config-block {
  border-top: 1px solid #e8edf3;
  padding-top: 12px;
}

.beta-config-block small {
  color: #79889a;
  margin-bottom: 6px;
  display: block;
}

.beta-config-block code {
  white-space: pre-wrap;
  word-break: break-word;
  color: #536375;
  background: #f5f7fa;
  border-radius: 7px;
  padding: 9px;
  font-size: 9px;
  display: block;
}

.beta-config-block p {
  color: #536375;
  line-height: 1.5;
}

.beta-detail-actions {
  gap: 8px;
  margin-top: 6px;
  display: flex;
}

.beta-rate-grid {
  border-top: 1px solid #e7edf4;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
  display: grid;
}

.beta-rate-grid > div {
  background: #f8fafc;
  border: 1px solid #e5ebf1;
  border-radius: 9px;
  padding: 12px;
}

.beta-rate-grid b, .beta-rate-grid span {
  display: block;
}

.beta-rate-grid span {
  color: #758399;
  margin-top: 4px;
}

.beta-progress {
  background: #edf2f7;
  border-radius: 999px;
  min-width: 110px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

.beta-progress i {
  background: #58b98b;
  border-radius: 999px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.beta-progress span {
  z-index: 1;
  text-align: center;
  color: #27425d;
  font-weight: 800;
  line-height: 20px;
  display: block;
  position: relative;
}

.beta-state {
  color: #657383;
  background: #edf1f5;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.beta-state.in_progress, .beta-state.completed {
  color: #15804e;
  background: #e3f7ed;
}

.beta-state.at_risk {
  color: #9a6700;
  background: #fff1d7;
}

.beta-state.cancelled {
  color: #a64242;
  background: #ffe6e6;
}

@media (max-width: 1100px) {
  .beta-shell {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .beta-sidebar {
    padding: 16px 8px;
  }

  .beta-brand div, .beta-nav a:not(:hover) {
    font-size: 0;
  }

  .beta-nav a {
    justify-content: center;
  }

  .beta-nav a span {
    font-size: 18px;
  }

  .beta-side-section, .beta-help {
    display: none;
  }

  .beta-split {
    grid-template-columns: 1fr;
  }

  .beta-detail {
    position: static;
  }

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

@media (max-width: 700px) {
  .beta-shell {
    display: block;
  }

  .beta-sidebar {
    display: none;
  }

  .beta-content {
    padding: 14px;
  }

  .beta-topbar {
    padding: 0 14px;
  }

  .beta-search {
    flex: 1;
    width: auto;
  }

  .beta-user > div:last-child {
    display: none;
  }

  .beta-page-head {
    display: grid;
  }

  .beta-head-actions {
    flex-wrap: wrap;
  }

  .beta-kpi-grid, .beta-module-grid {
    grid-template-columns: 1fr;
  }

  .beta-compare {
    display: grid;
  }

  .beta-compare-cards {
    overflow: auto;
  }

  .beta-list-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .beta-tabs {
    max-width: 100%;
    overflow: auto;
  }

  .beta-filter {
    width: 100%;
  }

  .beta-split {
    display: block;
  }

  .beta-detail {
    margin-top: 12px;
  }
}

.beta-v2 {
  background: #f3f6fb;
}

.beta-v2 .beta-sidebar {
  background: #0b1727;
  border-right: 1px solid #17283b;
  width: auto;
  padding: 18px 14px 16px;
}

.beta-v2 .beta-brand {
  border-bottom: 1px solid #1d2d40;
  padding: 2px 6px 16px;
}

.beta-v2 .beta-brand strong {
  font-size: 17px;
}

.beta-v2 .beta-nav {
  gap: 3px;
}

.beta-v2 .beta-nav a {
  border-radius: 7px;
  min-height: 40px;
  padding: 9px 10px;
  font-weight: 700;
}

.beta-v2 .beta-nav a:hover {
  background: #172a3d;
}

.beta-nav-group {
  gap: 4px;
  display: grid;
}

.beta-nav-parent {
  color: #fff;
  background: #223247;
  border-radius: 8px;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 10px;
  display: grid;
}

.beta-nav-parent > span {
  font-size: 16px;
}

.beta-nav-parent > b {
  font-size: 10px;
}

.beta-nav-children {
  border-left: 1px solid #314358;
  gap: 2px;
  margin-left: 20px;
  padding: 4px 0 5px 29px;
  display: grid;
}

.beta-nav-children a {
  color: #b9c8d9;
  border-radius: 6px;
  padding: 7px 10px;
  font-weight: 700;
  text-decoration: none;
}

.beta-nav-children a:hover, .beta-nav-children a.active {
  color: #fff;
  background: #1a2c40;
  box-shadow: inset 2px 0 #55b7ff;
}

.beta-nav-secondary {
  margin-top: 2px;
}

.beta-v2 .beta-help {
  background: #15273a;
  border-color: #263b52;
  border-radius: 10px;
}

.beta-top-actions {
  align-items: center;
  gap: 9px;
  display: flex;
}

.beta-user-copy strong, .beta-user-copy small {
  display: block;
}

.beta-user-copy small {
  color: #8b98a9;
}

.beta-bell {
  color: #64768e;
  font-size: 18px;
  position: relative;
}

.beta-bell b {
  color: #fff;
  background: #f45050;
  border-radius: 50%;
  place-items: center;
  width: 15px;
  height: 15px;
  font-size: 8px;
  display: grid;
  position: absolute;
  top: -6px;
  right: -5px;
}

.beta-v2 .beta-content {
  max-width: none;
  padding: 22px 22px 34px;
}

.beta-v2 .beta-page-head {
  margin-bottom: 16px;
}

.beta-v2 .beta-page-head h1 {
  letter-spacing: -.02em;
  font-size: 28px;
}

.beta-kpi-grid-v2 {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.beta-v2 .beta-metric {
  box-shadow: none;
  border-radius: 10px;
  min-height: 84px;
}

.beta-v2 .beta-metric strong {
  font-size: 24px;
}

.beta-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.beta-dashboard-main, .beta-dashboard-side {
  gap: 14px;
  display: grid;
}

.beta-focus-card, .beta-work-card, .beta-module-table-card, .beta-side-card {
  overflow: hidden;
}

.beta-section-title {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 14px;
  display: flex;
}

.beta-section-title.compact {
  padding: 15px 16px 12px;
}

.beta-section-title h2 {
  margin: 2px 0 5px;
  font-size: 17px;
}

.beta-section-title p {
  color: #7b899c;
  margin: 0;
  line-height: 1.45;
}

.beta-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
  display: grid;
}

.beta-feature {
  color: #20334e;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  grid-template-columns: 46px 1fr;
  align-items: start;
  gap: 12px;
  min-height: 150px;
  padding: 16px;
  text-decoration: none;
  transition: all .18s;
  display: grid;
}

.beta-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #23416914;
}

.beta-feature > span {
  border-radius: 10px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 900;
  display: grid;
}

.beta-feature.mint {
  background: linear-gradient(145deg, #f7fffb, #effbf5);
}

.beta-feature.mint > span {
  color: #159360;
  background: #daf5e7;
}

.beta-feature.blue {
  background: linear-gradient(145deg, #f8fbff, #eff5ff);
}

.beta-feature.blue > span {
  color: #3173df;
  background: #e1edff;
}

.beta-feature.purple {
  background: linear-gradient(145deg, #fcf9ff, #f5efff);
}

.beta-feature.purple > span {
  color: #8050d4;
  background: #eadfff;
}

.beta-feature h3 {
  margin: 2px 0 7px;
  font-size: 15px;
}

.beta-feature p {
  color: #718198;
  margin: 0 0 16px;
  line-height: 1.55;
}

.beta-feature b {
  color: #3b6fb9;
  font-size: 10px;
}

.beta-attention-list {
  border-top: 1px solid #edf1f6;
}

.beta-attention-row {
  border-bottom: 1px solid #eef2f6;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  display: grid;
}

.beta-attention-row:last-child {
  border-bottom: 0;
}

.beta-attention-row strong, .beta-attention-row small {
  display: block;
}

.beta-attention-row small {
  color: #8491a2;
  margin-top: 4px;
}

.beta-attention-row > a {
  color: #2f6fd1;
  font-weight: 800;
  text-decoration: none;
}

.beta-attention-icon {
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 900;
  display: grid;
}

.beta-attention-icon.amber {
  color: #bf7b00;
  background: #fff1d8;
}

.beta-attention-icon.blue {
  color: #3675d9;
  background: #e8f1ff;
}

.beta-attention-icon.green {
  color: #15935a;
  background: #e5f8ed;
}

.beta-module-rows {
  border-top: 1px solid #edf1f6;
}

.beta-module-row {
  color: #21364f;
  border-bottom: 1px solid #eef2f6;
  grid-template-columns: 44px 1fr 140px 28px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  text-decoration: none;
  display: grid;
}

.beta-module-row:last-child {
  border-bottom: 0;
}

.beta-module-row > span:first-child {
  color: #3f77d4;
  background: #edf4ff;
  border-radius: 9px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 15px;
  font-weight: 900;
  display: grid;
}

.beta-module-row strong, .beta-module-row small {
  display: block;
}

.beta-module-row small {
  color: #8694a6;
  margin-top: 3px;
}

.beta-module-row em {
  color: #178454;
  text-align: center;
  background: #e7f7ee;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.beta-module-row > b {
  color: #5e7390;
  font-size: 16px;
}

.beta-side-card .beta-section-title {
  border-bottom: 1px solid #edf1f6;
}

.beta-flow-list {
  padding: 10px 12px 14px;
  display: grid;
}

.beta-flow-list > a {
  color: #2a3d55;
  border-radius: 9px;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  text-decoration: none;
  display: grid;
}

.beta-flow-list > a:hover, .beta-flow-list > a.active {
  color: #2869ce;
  background: #edf4ff;
}

.beta-flow-list > a > span {
  background: #f0f3f7;
  border-radius: 8px;
  place-items: center;
  width: 31px;
  height: 31px;
  display: grid;
}

.beta-flow-list > a.active > span {
  background: #dceaff;
}

.beta-flow-list b, .beta-flow-list small {
  display: block;
}

.beta-flow-list small {
  color: #7f8ea1;
  margin-top: 3px;
  font-size: 9px;
}

.beta-flow-list > i {
  text-align: center;
  color: #a5b0bf;
  font-style: normal;
  line-height: 12px;
}

.beta-quick-links {
  display: grid;
}

.beta-quick-links a {
  color: #32465f;
  border-bottom: 1px solid #eef2f6;
  justify-content: space-between;
  padding: 12px 15px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.beta-quick-links a:last-child {
  border-bottom: 0;
}

.beta-quick-links a:hover {
  color: #2f6fd1;
  background: #f7faff;
}

.beta-tip-card {
  background: #fffcf2;
  border-color: #f1e5b9;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.beta-tip-card > span {
  font-size: 20px;
}

.beta-tip-card b {
  display: block;
}

.beta-tip-card p {
  color: #7b725c;
  margin: 5px 0 0;
  line-height: 1.5;
}

.beta-v2 .beta-split {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.beta-v2 .beta-detail {
  box-shadow: 0 6px 18px #263e5f0a;
}

.beta-v2 .beta-table th {
  height: 38px;
}

.beta-v2 .beta-table td {
  height: 42px;
}

.beta-v2 .beta-card {
  box-shadow: 0 3px 12px #21395906;
}

@media (max-width: 1250px) {
  .beta-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .beta-dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .beta-dashboard-side .beta-tip-card {
    grid-column: 1 / -1;
  }

  .beta-feature-grid {
    grid-template-columns: 1fr;
  }

  .beta-feature {
    min-height: auto;
  }

  .beta-kpi-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .beta-dashboard-side, .beta-kpi-grid-v2 {
    grid-template-columns: 1fr;
  }

  .beta-section-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .beta-module-row {
    grid-template-columns: 40px 1fr 24px;
  }

  .beta-module-row em, .beta-top-actions .beta-user-copy, .beta-top-actions > span:last-child {
    display: none;
  }
}

.beta-lab-intro {
  margin-bottom: 14px;
  padding: 18px 20px;
}

.beta-lab-intro h2 {
  margin: 3px 0 6px;
}

.beta-lab-intro p {
  color: #6f7e92;
  margin: 0;
}

.beta-lab-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.beta-lab-card {
  color: #203550;
  background: #fff;
  border: 1px solid #e0e7f0;
  border-radius: 12px;
  gap: 14px;
  min-height: 145px;
  padding: 18px;
  text-decoration: none;
  display: flex;
}

.beta-lab-card > span {
  color: #3379e5;
  background: #edf4ff;
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 21px;
  display: grid;
}

.beta-lab-card h3 {
  margin: 0 0 7px;
  font-size: 17px;
}

.beta-lab-card p {
  color: #718096;
  margin: 0 0 12px;
  line-height: 1.5;
}

.beta-lab-card b {
  color: #2470df;
}

.beta-rules-layout {
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.beta-rule-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  display: grid;
}

.beta-rule-feature {
  color: #15233b;
  border: 1px solid #e3e9f1;
  border-radius: 12px;
  min-height: 190px;
  padding: 18px;
  text-decoration: none;
  display: block;
  position: relative;
}

.beta-rule-feature.blue {
  background: linear-gradient(135deg, #f2f7ff, #fff);
}

.beta-rule-feature.mint {
  background: linear-gradient(135deg, #effcf5, #fff);
}

.beta-rule-feature.purple {
  background: linear-gradient(135deg, #f7f2ff, #fff);
}

.beta-rule-feature > span {
  color: #2769dc;
  background: #dfeaff;
  border-radius: 11px;
  place-items: center;
  width: 45px;
  height: 45px;
  font-size: 20px;
  display: grid;
}

.beta-rule-feature.mint > span {
  color: #1f9a61;
  background: #dff8ea;
}

.beta-rule-feature.purple > span {
  color: #7b4bd0;
  background: #eadfff;
}

.beta-rule-feature h3 {
  margin: 14px 0 6px;
  font-size: 17px;
}

.beta-rule-feature p {
  color: #6c7b90;
  min-height: 45px;
  line-height: 1.55;
}

.beta-rule-feature b {
  color: #3070d0;
  background: #e7f0ff;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 10px;
  display: inline-block;
}

.beta-rule-feature.mint b {
  color: #168552;
  background: #ddf6e8;
}

.beta-rule-feature.purple b {
  color: #7550ba;
  background: #eee3ff;
}

.beta-rule-feature > i {
  font-size: 24px;
  font-style: normal;
  position: absolute;
  bottom: 16px;
  right: 16px;
}

.beta-table-card {
  margin-bottom: 12px;
}

.beta-rule-note {
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  display: flex;
}

.beta-rule-note > span {
  font-size: 27px;
}

.beta-rule-note h3 {
  margin: 0 0 4px;
}

.beta-rule-note p {
  color: #6e7d91;
  margin: 0;
}

.beta-rule-note .beta-btn {
  margin-left: auto;
}

.beta-flow-panel {
  padding: 16px;
  position: sticky;
  top: 78px;
}

.beta-flow-panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.beta-flow-panel > a {
  color: #243955;
  border: 1px solid #0000;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  text-decoration: none;
  display: flex;
}

.beta-flow-panel > a:hover, .beta-flow-panel > a.active {
  background: #eef5ff;
  border-color: #dce8fa;
}

.beta-flow-panel > a > span {
  border: 1px solid #dce4ee;
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.beta-flow-panel a b, .beta-flow-panel a small {
  display: block;
}

.beta-flow-panel a small {
  color: #8591a2;
  margin-top: 2px;
}

.beta-flow-panel > i {
  text-align: center;
  color: #9aa7b7;
  font-style: normal;
  display: block;
}

.beta-flow-panel hr {
  border: none;
  border-top: 1px solid #e7edf3;
  margin: 12px 0;
}

.beta-flow-panel h3 {
  font-size: 13px;
}

.wide-detail {
  grid-template-columns: minmax(0, 1fr) 400px;
}

.kpi-detail {
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
}

.beta-detail-v3 {
  top: 74px;
}

.beta-detail-v3 > header {
  padding: 16px 18px;
}

.beta-detail-tabs {
  overflow: auto;
}

.beta-detail-section {
  border-bottom: 1px solid #e8edf4;
  padding: 14px 18px;
}

.beta-detail-section h3 {
  color: #172842;
  margin: 0 0 10px;
  font-size: 12px;
}

.beta-detail-section-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.beta-field {
  background: #fff;
  border: 1px solid #e3e9f1;
  border-radius: 7px;
  min-height: 48px;
  padding: 8px 10px;
}

.beta-field span {
  color: #76859a;
  margin-bottom: 4px;
  font-size: 9px;
  display: block;
}

.beta-field strong {
  font-size: 10px;
  line-height: 1.35;
}

.beta-check {
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.beta-check > span {
  color: #fff;
  background: #fff;
  border: 1px solid #cbd6e4;
  border-radius: 4px;
  place-items: center;
  width: 17px;
  height: 17px;
  display: grid;
}

.beta-check > span.checked {
  background: #1677ff;
  border-color: #1677ff;
}

.beta-panel-actions {
  background: #fbfcfe;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.beta-insurance-bottom {
  background: #fbfcfe;
  border-top: 1px solid #e8edf4;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.beta-insurance-bottom section {
  background: #fff;
  border: 1px solid #e5ebf2;
  border-radius: 9px;
  padding: 12px;
}

.beta-insurance-bottom h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.beta-rate-table {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
  font-size: 10px;
  display: grid;
}

.beta-kpi-toolbar {
  border-bottom: 1px solid #e4eaf2;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 0 8px;
  display: flex;
}

.beta-kpi-toolbar .beta-tabs {
  overflow: auto;
}

.beta-detail-two {
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.beta-detail-two .beta-detail-section {
  border-right: 1px solid #e8edf4;
}

.beta-detail-two .beta-detail-section-body {
  grid-template-columns: 1fr;
}

@media (max-width: 1200px) {
  .beta-rules-layout {
    grid-template-columns: 1fr;
  }

  .beta-flow-panel {
    position: static;
  }

  .wide-detail, .kpi-detail {
    grid-template-columns: 1fr;
  }

  .beta-detail-v3 {
    position: static;
  }

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

@media (max-width: 760px) {
  .beta-lab-grid, .beta-rule-cards {
    grid-template-columns: 1fr;
  }

  .beta-kpi-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .beta-detail-two, .beta-insurance-bottom, .beta-detail-section-body {
    grid-template-columns: 1fr;
  }

  .beta-rule-note {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .beta-rule-note .beta-btn {
    margin-left: 0;
  }
}

.shift-pattern-session-list {
  gap: 14px;
  display: grid;
}

.shift-session-day {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  scroll-margin-top: 18px;
}

.shift-session-day-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.shift-session-day-head span {
  color: #64748b;
  font-size: 12px;
}

.shift-session-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.shift-session-card {
  background: #f8fafc;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.shift-session-card > span {
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.shift-session-card div {
  gap: 4px;
  display: grid;
}

.shift-session-card small {
  color: #64748b;
}

.m-leave-session-box {
  border: 1px solid var(--m-border, #e5e7eb);
  background: #ffffffb3;
  border-radius: 22px;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.m-leave-session-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.m-leave-session-head > div {
  gap: 4px;
  display: grid;
}

.m-leave-session-head small {
  color: #64748b;
}

.m-leave-day-row {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.5fr);
  gap: 12px;
  padding: 12px;
  display: grid;
}

.m-leave-day-row.is-blocked {
  opacity: .66;
  background: #f8fafc;
}

.m-leave-day-date {
  align-content: start;
  gap: 4px;
  display: grid;
}

.m-leave-day-date small {
  color: #64748b;
}

.m-leave-day-sessions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.m-session-choice {
  cursor: pointer;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  display: flex;
}

.m-session-choice.is-selected {
  background: #eff6ff;
  border-color: #60a5fa;
}

.m-session-choice span {
  gap: 2px;
  display: grid;
}

.m-session-choice small {
  color: #64748b;
}

.m-error {
  color: #b91c1c;
  margin: 0;
}

@media (max-width: 760px) {
  .shift-session-grid, .m-leave-day-sessions, .m-leave-day-row {
    grid-template-columns: 1fr;
  }

  .m-leave-session-head {
    flex-direction: column;
    align-items: stretch;
  }

  .m-leave-session-head .button {
    width: 100%;
  }
}

.gamma-shell {
  color: #142650;
  background: #f7faff;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 100vh;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  display: grid;
}

.gamma-side {
  background: #fff;
  border-right: 1px solid #e4ebf4;
  flex-direction: column;
  gap: 18px;
  height: 100vh;
  padding: 18px 10px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: auto;
}

.gamma-brand {
  color: #15356b;
  align-items: center;
  gap: 10px;
  padding: 0 9px;
  text-decoration: none;
  display: flex;
}

.gamma-brand img, .gamma-brand > span {
  object-fit: contain;
  border-radius: 10px;
  width: 40px;
  height: 40px;
}

.gamma-brand > span {
  color: #1975e8;
  background: #eef5ff;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  display: grid;
}

.gamma-brand strong {
  font-size: 18px;
  display: block;
}

.gamma-brand small {
  letter-spacing: .08em;
  font-size: 6px;
  display: block;
}

.gamma-side nav {
  gap: 5px;
  display: grid;
}

.gamma-side nav a {
  color: #344d75;
  border-radius: 8px;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.gamma-side nav i {
  text-align: center;
  width: 20px;
  font-size: 17px;
  font-style: normal;
}

.gamma-nav-logo {
  object-fit: contain;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  margin: auto;
  display: block;
}

.gamma-help {
  color: #425a7c;
  background: #f7fbff;
  border-radius: 10px;
  margin-top: auto;
  padding: 13px;
}

.gamma-help p {
  font-size: 10px;
  line-height: 1.5;
}

.gamma-help a {
  text-align: center;
  color: #1c69bf;
  background: #e7f3ff;
  border-radius: 7px;
  padding: 9px;
  font-weight: 800;
  text-decoration: none;
  display: block;
}

.gamma-collapse {
  color: #617797;
  border-top: 1px solid #e8eef5;
  padding: 13px;
}

.gamma-main {
  min-width: 0;
}

.gamma-top {
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #e5ebf3;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 20px;
  display: flex;
  position: sticky;
  top: 0;
}

.gamma-search {
  color: #7587a0;
  border: 1px solid #dce5f0;
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  width: min(560px, 47vw);
  height: 36px;
  padding: 0 12px;
  display: flex;
}

.gamma-search kbd {
  color: #72839d;
  background: #f4f6fa;
  border: 0;
  border-radius: 5px;
  margin-left: auto;
  padding: 3px 6px;
}

.gamma-top-actions {
  align-items: center;
  gap: 12px;
  display: flex;
}

.gamma-month {
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 7px;
  padding: 9px 13px;
  font-weight: 700;
}

.gamma-bell {
  color: #18355f;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 19px;
  text-decoration: none;
  display: grid;
  position: relative;
}

.gamma-bell b, .gamma-shortcuts > a > b {
  color: #fff;
  background: #ef4141;
  border-radius: 999px;
  place-items: center;
  min-width: 16px;
  height: 16px;
  font-size: 8px;
  display: grid;
  position: absolute;
  top: -2px;
  right: -3px;
}

.gamma-avatar {
  color: #355e9a;
  background: #e9effa;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 900;
  display: grid;
}

.gamma-top-actions div strong, .gamma-top-actions div small {
  display: block;
}

.gamma-top-actions div small {
  color: #73839b;
  font-size: 9px;
}

.gamma-content {
  max-width: 1600px;
  margin: auto;
  padding: 10px 18px 34px;
}

.gamma-hero {
  isolation: isolate;
  background: #eaf4fc;
  border-radius: 12px;
  min-height: 224px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 7px 24px #214e7c0f;
}

.gamma-hero-bg {
  z-index: -3;
  background-image: linear-gradient(90deg, #ebf7fffa 0%, #ebf7ffed 32%, #e6f3fda8 54%, #d1e6f71f 73%, #0d40701f 100%), url("/gamma/city-morning.jpg");
  background-position: center, 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%, 58% 100%;
  position: absolute;
  inset: 0;
}

.gamma-hero:after {
  content: "";
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(#ffffff0f, #dfeffb1f);
  position: absolute;
  inset: 0;
}

.gamma-hero-copy {
  z-index: 1;
  max-width: 850px;
  padding: 24px 38px 20px;
  position: relative;
}

.gamma-hero small {
  letter-spacing: .22em;
  color: #28507c;
  font-weight: 800;
}

.gamma-hero h1 {
  color: #0b2151;
  letter-spacing: -.02em;
  margin: 9px 0 7px;
  font-size: 34px;
  line-height: 1.04;
}

.gamma-hero p {
  color: #243d62;
  max-width: 520px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.gamma-hero-metrics {
  align-items: flex-start;
  margin-top: 18px;
  display: flex;
}

.gamma-hero-metrics span {
  border-right: 1px solid #15416f2e;
  grid-template-rows: auto auto;
  grid-template-columns: 30px auto;
  column-gap: 8px;
  min-width: 160px;
  padding: 0 20px;
  display: grid;
}

.gamma-hero-metrics span:first-child {
  padding-left: 0;
}

.gamma-hero-metrics span:last-child {
  border-right: 0;
}

.gamma-hero-metrics i {
  color: #1783ef;
  text-align: center;
  grid-row: 1 / 3;
  align-self: center;
  width: 30px;
  font-size: 27px;
  font-style: normal;
}

.gamma-hero-metrics b {
  font-size: 22px;
  line-height: 1;
}

.gamma-hero-metrics em {
  color: #4b6180;
  white-space: nowrap;
  margin-top: 4px;
  font-style: normal;
}

.gamma-hero-brandline {
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 8px #001f4047;
  letter-spacing: .2em;
  text-align: left;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  position: absolute;
  top: 28px;
  bottom: 26px;
  right: 26px;
}

.gamma-hero-brandline strong {
  font-size: 12px;
  line-height: 1.55;
}

.gamma-hero-brandline span {
  border-top: 1px solid #ffffffb3;
  padding-top: 12px;
  font-size: 9px;
  line-height: 1.45;
}

.gamma-title-row {
  justify-content: space-between;
  align-items: center;
  margin: 14px 4px 8px;
  display: flex;
}

.gamma-title-row h2 {
  margin: 0;
  font-size: 19px;
}

.gamma-title-row a {
  color: #2671c9;
  text-decoration: none;
}

.gamma-apps {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-app {
  color: #18315a;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  min-height: 130px;
  padding: 15px;
  text-decoration: none;
  position: relative;
}

.gamma-app i {
  background: #ffffffa6;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
  font-style: normal;
  display: grid;
}

.gamma-app h3 {
  margin: 9px 0 3px;
  font-size: 15px;
}

.gamma-app p {
  color: #60728d;
  margin: 0;
  line-height: 1.4;
}

.gamma-app > b {
  background: #ffffffb3;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  display: grid;
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.gamma-shortcuts {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 11px 0;
  display: grid;
}

.gamma-shortcuts > a {
  color: #314a70;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  height: 46px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  position: relative;
}

.gamma-lower {
  grid-template-columns: 1.1fr 1fr .9fr;
  gap: 11px;
  display: grid;
}

.gamma-panel {
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 10px;
  overflow: hidden;
}

.gamma-panel > header {
  border-bottom: 1px solid #edf1f6;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  display: flex;
}

.gamma-panel h2 {
  margin: 0;
  font-size: 15px;
}

.gamma-panel header a {
  color: #1473da;
  font-size: 10px;
  text-decoration: none;
}

.gamma-tabs {
  border-bottom: 1px solid #edf1f6;
  gap: 32px;
  padding: 10px 14px 0;
  display: flex;
}

.gamma-tabs > * {
  padding: 0 0 9px;
}

.gamma-tabs b {
  color: #1480ec;
  border-bottom: 2px solid #1480ec;
}

.gamma-work-row, .gamma-note {
  color: #223b61;
  border-bottom: 1px solid #f0f3f7;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  display: flex;
}

.gamma-work-row > i, .gamma-note > i {
  background: #eef5ff;
  border-radius: 8px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 15px;
  font-style: normal;
  display: grid;
}

.gamma-work-row div, .gamma-note div {
  flex: 1;
  min-width: 0;
}

.gamma-work-row strong, .gamma-work-row small, .gamma-note strong, .gamma-note small {
  display: block;
}

.gamma-work-row small, .gamma-note small {
  color: #7a8ba2;
  margin-top: 3px;
}

.gamma-work-row em {
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 9px;
  font-style: normal;
}

.gamma-note {
  position: relative;
}

.gamma-note > b {
  background: #ef4c4c;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.gamma-more {
  padding-bottom: 10px;
}

.gamma-promo {
  background: #eaf4ff;
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
  min-height: 160px;
  margin: 10px;
  display: grid;
  overflow: hidden;
}

.gamma-promo > div {
  padding: 16px;
}

.gamma-promo h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.gamma-promo p {
  color: #5c708e;
  line-height: 1.45;
}

.gamma-promo a {
  color: #fff;
  background: #173c77;
  border-radius: 6px;
  padding: 8px 10px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.gamma-promo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gamma-suggest {
  border: 1px solid #e1e9f2;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  margin: 10px;
  padding: 10px;
  display: flex;
}

.gamma-suggest i {
  color: #1d7bd7;
  font-size: 24px;
  font-style: normal;
}

.gamma-suggest div {
  flex: 1;
}

.gamma-suggest p {
  color: #6b7d95;
  margin: 3px 0 0;
}

.gamma-suggest a {
  color: #1672ce;
  border: 1px solid #cfe2f6;
  border-radius: 6px;
  padding: 7px 10px;
  font-weight: 800;
  text-decoration: none;
}

.gamma-lastpay {
  color: #7a8ba1;
  padding: 0 12px;
  display: block;
}

.gamma-mode-note {
  text-align: center;
  color: #8794a7;
  padding: 18px 0 0;
}

@media (max-width: 1150px) {
  .gamma-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .gamma-brand div, .gamma-side nav a span, .gamma-help, .gamma-collapse span {
    display: none;
  }

  .gamma-side nav a {
    justify-content: center;
  }

  .gamma-apps {
    grid-template-columns: repeat(3, 1fr);
  }

  .gamma-lower {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-more {
    grid-column: 1 / -1;
  }

  .gamma-hero-metrics span {
    min-width: 125px;
  }

  .gamma-search {
    width: 38vw;
  }
}

@media (max-width: 760px) {
  .gamma-shell {
    display: block;
  }

  .gamma-side {
    display: none;
  }

  .gamma-top {
    padding: 0 10px;
  }

  .gamma-search {
    width: 48vw;
  }

  .gamma-search span, .gamma-search kbd, .gamma-month, .gamma-top-actions > div:not(.gamma-avatar), .gamma-top-actions > span:last-child {
    display: none;
  }

  .gamma-content {
    padding: 8px;
  }

  .gamma-hero {
    min-height: 320px;
  }

  .gamma-hero-bg {
    background-position: center, bottom;
    background-size: 100% 100%, 100% 55%;
  }

  .gamma-hero-copy {
    padding: 20px;
  }

  .gamma-hero-brandline {
    display: none;
  }

  .gamma-hero h1 {
    font-size: 27px;
  }

  .gamma-hero-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    display: grid;
  }

  .gamma-hero-metrics span {
    border: 0;
    min-width: 0;
    padding: 6px 0;
  }

  .gamma-apps, .gamma-shortcuts {
    grid-template-columns: repeat(2, 1fr);
  }

  .gamma-lower {
    grid-template-columns: 1fr;
  }

  .gamma-more {
    grid-column: auto;
  }
}

.gamma-shell {
  color: #0d2149;
  background: #f5f9ff;
}

.gamma-side {
  background: #fff;
  border-right-color: #d8e3f1;
  box-shadow: 4px 0 18px #1c457409;
}

.gamma-brand, .gamma-brand strong {
  color: #0a2e67;
}

.gamma-brand small {
  color: #557197;
}

.gamma-side nav a {
  color: #173e77;
  font-weight: 700;
}

.gamma-side nav a:hover, .gamma-side nav a.active {
  color: #0767db;
  background: #e2efff;
}

.gamma-side nav i {
  color: #104d9d;
}

.gamma-help {
  color: #294f7f;
  background: #f0f7ff;
  border: 1px solid #d8e8fa;
}

.gamma-help a {
  color: #0864c9;
  background: #dceeff;
}

.gamma-top {
  border-bottom-color: #d9e4f2;
  box-shadow: 0 3px 14px #2148750a;
}

.gamma-search, .gamma-month {
  color: #486786;
  border-color: #ccdced;
}

.gamma-search {
  background: #fff;
}

.gamma-search kbd {
  color: #435f81;
  background: #eaf1f8;
}

.gamma-bell {
  color: #123e78;
}

.gamma-avatar {
  color: #143f91;
  background: #dfeaff;
}

.gamma-content {
  color: #102650;
}

.gamma-hero {
  background: #dceefe;
  box-shadow: 0 10px 30px #184c841c;
}

.gamma-hero-bg {
  filter: saturate(1.24) contrast(1.08);
  background-image: linear-gradient(90deg, #ebf7fffa 0%, #e7f4fff0 27%, #deeffdc7 42%, #dbedfc47 55%, #0a37660a 72%, #042b561f 100%), url("/gamma/city-morning.jpg");
  background-size: 100% 100%, 64% 100%;
}

.gamma-hero:after {
  background: linear-gradient(#fff0, #134d8109);
}

.gamma-hero small {
  color: #153f72;
}

.gamma-hero h1 {
  color: #061b4d;
}

.gamma-hero p {
  color: #173b66;
  font-weight: 600;
}

.gamma-hero-metrics span {
  border-right-color: #0c3d7440;
}

.gamma-hero-metrics i {
  color: #006ff2;
}

.gamma-hero-metrics span:nth-child(2) i {
  color: #1470e8;
}

.gamma-hero-metrics span:nth-child(3) i {
  color: #00a96b;
}

.gamma-hero-metrics span:nth-child(4) i {
  color: #0874e8;
}

.gamma-hero-metrics b {
  color: #071d4a;
}

.gamma-hero-metrics em {
  color: #2d527d;
  font-weight: 600;
}

.gamma-title-row h2, .gamma-panel h2 {
  color: #071b45;
}

.gamma-title-row a, .gamma-panel header a {
  color: #006bdc;
  font-weight: 700;
}

.gamma-app {
  color: #102d60;
  border-color: #d7e3f0;
  box-shadow: 0 5px 16px #1b406a0b;
}

.gamma-app.blue {
  background: #e3f0ff;
}

.gamma-app.green {
  background: #e3f8f1;
}

.gamma-app.orange {
  background: #fff0dc;
}

.gamma-app.purple {
  background: #f0e6ff;
}

.gamma-app.pink {
  background: #ffe7ee;
}

.gamma-app.slate {
  background: #e9f0fa;
}

.gamma-app i {
  background: #ffffffd1;
  box-shadow: 0 3px 12px #244a750f;
}

.gamma-app h3 {
  color: #0a2556;
}

.gamma-app p {
  color: #425f84;
  font-weight: 600;
}

.gamma-app > b {
  color: #124d97;
  background: #ffffffe0;
}

.gamma-shortcuts > a {
  color: #173e75;
  border-color: #d3dfed;
  box-shadow: 0 3px 12px #20467109;
}

.gamma-panel {
  border-color: #d4e1ef;
  box-shadow: 0 5px 18px #1a426f0b;
}

.gamma-panel > header, .gamma-tabs {
  border-bottom-color: #dfe8f3;
}

.gamma-tabs b {
  color: #006fe6;
  border-bottom-color: #006fe6;
}

.gamma-work-row, .gamma-note {
  color: #173862;
  border-bottom-color: #e4ebf3;
}

.gamma-work-row small, .gamma-note small {
  color: #5d7390;
}

.gamma-work-row > i, .gamma-note > i {
  color: #075fc5;
  background: #e5f0ff;
}

.gamma-work-row em.pink {
  color: #cf2c61;
  background: #ffdfe9;
}

.gamma-work-row em.green {
  color: #087c4d;
  background: #dff7e9;
}

.gamma-work-row em.blue {
  color: #0869cd;
  background: #dcebff;
}

.gamma-work-row em.orange {
  color: #b76505;
  background: #ffe9cb;
}

.gamma-promo {
  background: #deefff;
}

.gamma-promo p {
  color: #405f84;
}

.gamma-promo a {
  background: #103d82;
}

.gamma-suggest {
  border-color: #d5e3f1;
}

.gamma-suggest i {
  color: #006fd8;
}

.gamma-suggest p {
  color: #56708e;
}

.gamma-suggest a {
  color: #0868c7;
  border-color: #bcd9f5;
}

.gamma-mode-link {
  color: #075fbf !important;
  background: #e0efff !important;
}

.gamma-leave {
  color: #102650;
}

.gamma-breadcrumb {
  color: #7083a0;
  margin: 2px 0 5px;
  font-size: 11px;
}

.gamma-breadcrumb span {
  padding: 0 7px;
}

.gamma-breadcrumb strong {
  color: #17365f;
}

.gamma-leave-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  display: flex;
}

.gamma-leave-head h1 {
  color: #071c4a;
  margin: 0;
  font-size: 28px;
}

.gamma-leave-head p {
  color: #637895;
  margin: 4px 0 0;
}

.gamma-leave-title {
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-leave-title span {
  color: #1473d6;
  background: #e4f1ff;
  border-radius: 12px;
  padding: 3px 7px;
  font-weight: 800;
}

.gamma-primary {
  background: linear-gradient(135deg, #1678eb, #7b20f4);
  border-radius: 7px;
  padding: 11px 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 7px 18px #4642e333;
  color: #fff !important;
}

.gamma-leave-kpis {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  display: grid;
}

.gamma-leave-kpis > div {
  background: #fff;
  border: none;
  border-radius: 8px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 42px 1fr;
  column-gap: 10px;
  min-height: 88px;
  padding: 14px;
  display: grid;
  box-shadow: 0 4px 14px #1e426909;
}

.gamma-leave-kpis i {
  border-radius: 8px;
  grid-row: 1 / 4;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-style: normal;
  display: grid;
}

.gamma-leave-kpis i.blue {
  color: #2779da;
  background: #e7f1ff;
}

.gamma-leave-kpis i.green {
  color: #13a365;
  background: #e2f7ec;
}

.gamma-leave-kpis i.red {
  color: #e45c5c;
  background: #ffe7e7;
}

.gamma-leave-kpis span {
  color: #5b708f;
}

.gamma-leave-kpis strong {
  color: #0b1e4f;
  font-size: 25px;
  line-height: 1;
}

.gamma-leave-kpis small {
  color: #69945f;
  margin-top: 5px;
}

.gamma-leave-grid {
  grid-template-columns: minmax(0, 2.05fr) minmax(310px, .95fr);
  gap: 10px;
  display: grid;
}

.gamma-calendar-card, .gamma-balance-card, .gamma-create-card, .gamma-recent, .gamma-leave-bottom > article {
  background: #fff;
  border: 1px solid #d9e4f1;
  border-radius: 8px;
  overflow: hidden;
}

.gamma-calendar-card > header, .gamma-balance-card > header, .gamma-recent > header, .gamma-leave-bottom article > header {
  border-bottom: 1px solid #e5ebf3;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  padding: 0 13px;
  display: flex;
}

.gamma-calendar-card h2, .gamma-balance-card h2, .gamma-recent h2, .gamma-leave-bottom h2 {
  color: #142a58;
  margin: 0;
  font-size: 14px;
}

.gamma-calendar-card > header > div {
  align-items: center;
  gap: 6px;
  display: flex;
}

.gamma-calendar-card > header span, .gamma-calendar-card > header a, .gamma-calendar-card > header b {
  color: #4d6688;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 10px;
  text-decoration: none;
}

.gamma-calendar-card > header b {
  color: #173a6e;
  background: none;
  border: 0;
}

.gamma-calendar-week {
  background: #f9fbfe;
  border-bottom: 1px solid #e4eaf2;
  grid-template-columns: repeat(7, 1fr);
  display: grid;
}

.gamma-calendar-week b {
  text-align: center;
  color: #617692;
  padding: 8px 2px;
  font-size: 9px;
}

.gamma-calendar {
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(88px, 1fr);
  display: grid;
}

.gamma-calendar > div {
  border-bottom: 1px solid #e9eef5;
  border-right: 1px solid #e9eef5;
  min-width: 0;
  padding: 7px;
}

.gamma-calendar > div:nth-child(7n) {
  border-right: 0;
}

.gamma-calendar > div.blank {
  background: #fbfcfe;
}

.gamma-calendar em {
  color: #5a708f;
  font-size: 9px;
  font-style: normal;
}

.gamma-calendar .event {
  border-radius: 4px;
  margin-top: 4px;
  padding: 5px 6px;
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.gamma-calendar .event strong, .gamma-calendar .event span {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 8px;
  display: block;
  overflow: hidden;
}

.gamma-calendar .event.blue {
  color: #315ea5;
  background: #e6efff;
}

.gamma-calendar .event.green {
  color: #207b4b;
  background: #e3f6ea;
}

.gamma-calendar .event.amber {
  color: #93671d;
  background: #fff2d8;
}

.gamma-calendar .event.rose {
  color: #a4525a;
  background: #ffe7e9;
}

.gamma-calendar .event.purple {
  color: #6d4cac;
  background: #eee6ff;
}

.gamma-calendar .event.cyan {
  color: #287b7e;
  background: #dff5f5;
}

.gamma-leave-side {
  align-content: start;
  gap: 10px;
  display: grid;
}

.gamma-balance-card header a, .gamma-recent header a, .gamma-leave-bottom header a {
  color: #2176d0;
  font-size: 9px;
  text-decoration: none;
}

.gamma-balance-body {
  align-items: center;
  gap: 24px;
  padding: 18px;
  display: flex;
}

.gamma-ring {
  --used: 90deg;
  background: conic-gradient(#5d3ff0 0 var(--used),#94b8f3 var(--used) 270deg,#e2ecfb 270deg);
  border-radius: 50%;
  place-items: center;
  width: 118px;
  height: 118px;
  display: grid;
  position: relative;
}

.gamma-ring:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 76px;
  height: 76px;
  position: absolute;
}

.gamma-ring strong, .gamma-ring span {
  z-index: 1;
  position: absolute;
}

.gamma-ring strong {
  font-size: 24px;
  transform: translateY(-6px);
}

.gamma-ring span {
  color: #657b99;
  font-size: 9px;
  transform: translateY(14px);
}

.gamma-balance-body > div:last-child {
  flex: 1;
}

.gamma-balance-body p {
  color: #58708f;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 6px;
  display: grid;
}

.gamma-balance-body .dot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.dot.used {
  background: #5d3ff0;
}

.dot.remain {
  background: #84acec;
}

.dot.total {
  background: #d7e4f7;
}

.gamma-create-card {
  background: #f5f1ff;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.gamma-create-card > i {
  color: #6242ed;
  font-size: 23px;
  font-style: normal;
}

.gamma-create-card > div {
  flex: 1;
}

.gamma-create-card strong, .gamma-create-card span {
  display: block;
}

.gamma-create-card span {
  color: #6d7f99;
  margin-top: 3px;
}

.gamma-create-card > a {
  color: #fff;
  background: #641df2;
  border-radius: 5px;
  padding: 9px 14px;
  font-weight: 800;
  text-decoration: none;
}

.gamma-recent > a {
  color: #17345f;
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-mini-avatar {
  color: #225da5;
  background: #e6efff;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 900;
  display: grid;
}

.gamma-recent a strong, .gamma-recent a span {
  display: block;
}

.gamma-recent a span {
  color: #72839b;
  margin-top: 2px;
  font-size: 9px;
}

.gamma-recent em {
  border-radius: 9px;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
}

.gamma-recent em.approved {
  color: #16804e;
  background: #e3f7ea;
}

.gamma-recent em.pending {
  color: #9c7118;
  background: #fff4d9;
}

.gamma-recent em.rejected {
  color: #bd4a4a;
  background: #ffe5e5;
}

.gamma-recent em.cancelled {
  color: #6b788a;
  background: #edf1f5;
}

.gamma-none {
  color: #71829a;
  padding: 15px;
}

.gamma-leave-bottom {
  grid-template-columns: 1.05fr 1.05fr 1fr;
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.gamma-leave-bottom article > a {
  color: #29466f;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  text-decoration: none;
  display: grid;
}

.gamma-leave-bottom article > a:hover {
  background: #f7faff;
}

.gamma-leave-bottom .legend {
  border-radius: 50%;
  justify-self: center;
  width: 7px;
  height: 7px;
}

.legend.blue {
  background: #4b63ef;
}

.legend.green {
  background: #34a996;
}

.legend.amber {
  background: #e4af42;
}

.legend.rose {
  background: #e76565;
}

.legend.purple {
  background: #8766de;
}

.legend.cyan {
  background: #34aeb7;
}

.gamma-leave-bottom article > a em {
  color: #7185a0;
  font-style: normal;
}

.gamma-function-note {
  text-align: center;
  color: #8391a6;
  padding: 12px 0 2px;
  font-size: 9px;
}

@media (max-width: 1100px) {
  .gamma-leave-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .gamma-leave-grid {
    grid-template-columns: 1fr;
  }

  .gamma-leave-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-calendar {
    grid-auto-rows: minmax(80px, 1fr);
  }
}

@media (max-width: 760px) {
  .gamma-leave-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-leave-head {
    gap: 10px;
  }

  .gamma-primary {
    white-space: nowrap;
  }

  .gamma-calendar-card {
    overflow-x: auto;
  }

  .gamma-calendar-week, .gamma-calendar {
    min-width: 720px;
  }

  .gamma-leave-bottom {
    grid-template-columns: 1fr;
  }
}

.gamma-nav-parent {
  color: #173e77;
  border-radius: 8px;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.gamma-nav-parent b {
  color: #6d83a0;
  margin-left: auto;
  font-size: 10px;
}

.gamma-nav-submenu {
  border-left: 1px solid #d8e5f3;
  margin: 0 0 3px 30px;
  padding-left: 12px;
  display: grid;
}

.gamma-side nav .gamma-nav-submenu a {
  color: #38577f;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
}

.gamma-side nav .gamma-nav-submenu a:hover {
  color: #0767db;
  background: #edf6ff;
}

.gamma-side nav .gamma-nav-submenu a:before {
  content: "";
  background: #2e7dde;
  border-radius: 50%;
  flex: none;
  width: 5px;
  height: 5px;
  margin-right: 8px;
}

@media (max-width: 1150px) {
  .gamma-nav-parent span, .gamma-nav-parent b, .gamma-nav-submenu {
    display: none;
  }

  .gamma-nav-parent {
    justify-content: center;
  }
}

.gamma-candidates {
  color: #102650;
}

.gamma-candidate-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  display: flex;
}

.gamma-candidate-head h1 {
  color: #071c4a;
  margin: 0;
  font-size: 28px;
}

.gamma-candidate-head p {
  color: #637895;
  margin: 4px 0 0;
}

.gamma-candidate-actions {
  gap: 8px;
  display: flex;
}

.gamma-candidate-actions > a {
  color: #173a6e;
  background: #fff;
  border: 1px solid #d7e1ee;
  border-radius: 7px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
}

.gamma-candidate-actions .gamma-primary {
  background: linear-gradient(135deg, #1678eb, #7b20f4);
  border: 0;
  color: #fff !important;
}

.gamma-candidate-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  display: grid;
}

.gamma-candidate-kpis > div {
  background: #fff;
  border: none;
  border-radius: 8px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 42px 1fr;
  column-gap: 10px;
  min-height: 82px;
  padding: 14px;
  display: grid;
  box-shadow: 0 4px 14px #1e42690a;
}

.gamma-candidate-kpis i {
  border-radius: 8px;
  grid-row: 1 / 4;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-style: normal;
  display: grid;
}

.gamma-candidate-kpis i.blue {
  color: #2779da;
  background: #e7f1ff;
}

.gamma-candidate-kpis i.green {
  color: #13a365;
  background: #e2f7ec;
}

.gamma-candidate-kpis span {
  color: #5b708f;
}

.gamma-candidate-kpis strong {
  color: #0b1e4f;
  font-size: 25px;
  line-height: 1;
}

.gamma-candidate-kpis small {
  color: #647a98;
  margin-top: 4px;
}

.gamma-candidate-tabs {
  border-bottom: 1px solid #dfe7f1;
  gap: 24px;
  margin-bottom: 10px;
  display: flex;
}

.gamma-candidate-tabs a {
  color: #5b6f91;
  padding: 10px 2px 9px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-candidate-tabs a.active {
  color: #176fe8;
  border-bottom: 2px solid #176fe8;
}

.gamma-candidate-main {
  grid-template-columns: minmax(0, 1.75fr) minmax(340px, .85fr);
  gap: 10px;
  display: grid;
}

.gamma-candidate-list-card, .gamma-interview-calendar, .gamma-candidate-bottom > article {
  background: #fff;
  border: 1px solid #d9e4f1;
  border-radius: 8px;
  overflow: hidden;
}

.gamma-candidate-list-card > header, .gamma-interview-calendar > header, .gamma-candidate-bottom > article > header {
  border-bottom: 1px solid #e6ecf4;
  justify-content: space-between;
  align-items: center;
  min-height: 45px;
  padding: 0 13px;
  display: flex;
}

.gamma-candidate-list-card h2, .gamma-interview-calendar h2, .gamma-candidate-bottom h2 {
  color: #142a58;
  margin: 0;
  font-size: 14px;
}

.gamma-candidate-filter {
  border-bottom: 1px solid #eef2f7;
  grid-template-columns: 1.7fr .8fr .8fr auto;
  gap: 8px;
  padding: 10px;
  display: grid;
}

.gamma-candidate-filter input, .gamma-candidate-filter select, .gamma-candidate-filter button {
  color: #405a7d;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  padding: 9px 10px;
}

.gamma-candidate-filter button {
  cursor: pointer;
  font-weight: 800;
}

.gamma-candidate-table {
  font-size: 10px;
}

.gamma-candidate-table .head, .gamma-candidate-table .row {
  grid-template-columns: 28px 1.55fr 1.2fr .8fr .9fr .9fr 65px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  display: grid;
}

.gamma-candidate-table .head {
  color: #6b7d99;
  background: #f8fbff;
  font-size: 9px;
}

.gamma-candidate-table .row {
  color: #29466f;
  border-top: 1px solid #edf2f7;
}

.gamma-candidate-table .candidate {
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.gamma-candidate-table .candidate .avatar {
  color: #4a5ed5;
  background: #e8efff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.gamma-candidate-table .candidate > span {
  min-width: 0;
}

.gamma-candidate-table .candidate strong, .gamma-candidate-table .candidate small {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.gamma-candidate-table small {
  color: #7a8ba4;
}

.gamma-candidate-table em {
  border-radius: 9px;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
}

.gamma-candidate-table em.new {
  color: #2f68bf;
  background: #e7f0ff;
}

.gamma-candidate-table em.screening {
  color: #946c14;
  background: #fff4cf;
}

.gamma-candidate-table em.interview {
  color: #4f5acb;
  background: #e8efff;
}

.gamma-candidate-table em.offer {
  color: #7041b5;
  background: #f3e8ff;
}

.gamma-candidate-table em.selected {
  color: #14804c;
  background: #e0f6ea;
}

.gamma-candidate-table em.rejected {
  color: #bd4d4d;
  background: #ffe6e6;
}

.gamma-candidate-table .row > span:last-child a {
  color: #1d3d6e;
  font-weight: 900;
  text-decoration: none;
}

.gamma-candidate-list-card > footer {
  color: #6f819b;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.gamma-candidate-list-card > footer > div {
  gap: 4px;
  display: flex;
}

.gamma-candidate-list-card > footer a, .gamma-candidate-list-card > footer div > span {
  color: #537091;
  border: 1px solid #e0e7f0;
  border-radius: 5px;
  place-items: center;
  min-width: 28px;
  height: 28px;
  text-decoration: none;
  display: grid;
}

.gamma-candidate-list-card > footer a.active {
  color: #176fe8;
  background: #e9f1ff;
  border-color: #cfe0ff;
}

.gamma-interview-calendar header a, .gamma-candidate-bottom header a {
  color: #2176d0;
  font-size: 9px;
  text-decoration: none;
}

.gamma-cal-controls {
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 9px;
  display: flex;
}

.gamma-cal-controls a {
  color: #58708f;
  border: 1px solid #dbe4ef;
  border-radius: 5px;
  place-items: center;
  width: 28px;
  height: 28px;
  text-decoration: none;
  display: grid;
}

.gamma-cal-controls b {
  color: #253f6e;
}

.gamma-mini-week, .gamma-mini-calendar {
  grid-template-columns: repeat(7, 1fr);
  display: grid;
}

.gamma-mini-week b {
  text-align: center;
  color: #6d809c;
  background: #f9fbfe;
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
  padding: 7px 0;
  font-size: 8px;
}

.gamma-mini-calendar > div {
  border-bottom: 1px solid #eef2f7;
  border-right: 1px solid #eef2f7;
  min-width: 0;
  min-height: 62px;
  padding: 4px;
}

.gamma-mini-calendar > div:nth-child(7n) {
  border-right: 0;
}

.gamma-mini-calendar em {
  color: #506a8d;
  font-size: 8px;
  font-style: normal;
}

.gamma-mini-calendar .iv {
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 3px;
  margin-top: 3px;
  padding: 3px 4px;
  font-size: 7px;
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.gamma-mini-calendar .tone-0 {
  color: #315ea5;
  background: #e5efff;
}

.gamma-mini-calendar .tone-1 {
  color: #207b4b;
  background: #e3f6ea;
}

.gamma-mini-calendar .tone-2 {
  color: #6d4cac;
  background: #eee6ff;
}

.gamma-candidate-bottom {
  grid-template-columns: 1.2fr .9fr 1fr .9fr;
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.gamma-candidate-bottom > article > a, .gamma-candidate-bottom .reminder {
  color: #29466f;
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-candidate-bottom > article > a span strong, .gamma-candidate-bottom > article > a span small {
  display: block;
}

.gamma-candidate-bottom > article > a span small {
  color: #7c8ca2;
  margin-top: 2px;
}

.gamma-candidate-bottom .pipe {
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  display: grid;
}

.gamma-candidate-bottom .pipe i {
  color: #4868ad;
  border: 1px solid #7891c7;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font-style: normal;
  display: grid;
}

.gamma-candidate-bottom .reminder {
  grid-template-columns: 48px 1fr auto;
}

.gamma-candidate-bottom .reminder > span small {
  color: #7b8ba2;
  display: block;
}

.gamma-candidate-bottom .reminder em {
  color: #176fe8;
  border: 1px solid #cfe0ff;
  border-radius: 5px;
  padding: 4px 6px;
  font-style: normal;
}

.gamma-empty {
  color: #7d8ca2;
  padding: 14px;
}

@media (max-width: 1180px) {
  .gamma-candidate-main {
    grid-template-columns: 1fr;
  }

  .gamma-candidate-bottom, .gamma-candidate-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .gamma-candidate-filter, .gamma-candidate-bottom {
    grid-template-columns: 1fr;
  }

  .gamma-candidate-table {
    overflow-x: auto;
  }

  .gamma-candidate-table .head, .gamma-candidate-table .row {
    min-width: 860px;
  }

  .gamma-candidate-head {
    flex-direction: column;
    gap: 10px;
  }

  .gamma-candidate-actions {
    width: 100%;
  }
}

.gamma-location-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  display: flex;
}

.gamma-location-head h1 {
  color: #071c4a;
  margin: 0;
  font-size: 28px;
}

.gamma-location-head p {
  color: #637895;
  margin: 4px 0 0;
}

.gamma-location-create {
  position: relative;
}

.gamma-location-create > summary {
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, #1678eb, #6b22f5);
  border-radius: 7px;
  padding: 11px 16px;
  font-weight: 800;
  list-style: none;
  box-shadow: 0 7px 18px #4642e333;
}

.gamma-location-create > summary::-webkit-details-marker {
  display: none;
}

.gamma-location-create[open] > .gamma-location-dialog {
  z-index: 120;
  background: #0d1d3959;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.gamma-location-dialog > form {
  background: #fff;
  border-radius: 16px;
  width: min(780px, 96vw);
  padding: 20px;
  box-shadow: 0 28px 80px #0e234b40;
}

.gamma-location-dialog header h2 {
  color: #0b2151;
  margin: 0;
}

.gamma-location-dialog header p {
  margin: 4px 0 14px;
}

.gamma-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.gamma-form-grid label, .gamma-location-row-action label {
  color: #385273;
  gap: 5px;
  font-weight: 700;
  display: grid;
}

.gamma-form-grid input, .gamma-form-grid select, .gamma-location-row-action input {
  background: #fff;
  border: 1px solid #cddbeb;
  border-radius: 7px;
  height: 40px;
  padding: 0 10px;
}

.gamma-check {
  align-items: center;
  margin-top: 12px;
  gap: 7px !important;
  display: flex !important;
}

.gamma-check input {
  width: 16px !important;
  height: 16px !important;
}

.gamma-location-dialog footer {
  justify-content: flex-end;
  margin-top: 14px;
  display: flex;
}

.gamma-location-dialog button, .gamma-location-row-action button {
  color: #fff;
  cursor: pointer;
  background: #122a54;
  border: 0;
  border-radius: 7px;
  padding: 10px 14px;
  font-weight: 800;
}

.gamma-location-success {
  color: #147c49;
  background: #e7f8ed;
  border-radius: 7px;
  margin: -2px 0 10px;
  padding: 10px 12px;
}

.gamma-location-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  display: grid;
}

.gamma-location-kpis > div {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 42px 1fr auto;
  column-gap: 10px;
  min-height: 92px;
  padding: 14px;
  display: grid;
  position: relative;
}

.gamma-location-kpis i {
  color: #2779da;
  background: #e7f1ff;
  border-radius: 8px;
  grid-row: 1 / 4;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-style: normal;
  display: grid;
}

.gamma-location-kpis span {
  color: #5b708f;
}

.gamma-location-kpis strong {
  color: #0b1e4f;
  font-size: 25px;
  line-height: 1;
}

.gamma-location-kpis small {
  color: #6d839f;
  margin-top: 5px;
}

.gamma-mini-ring {
  background: conic-gradient(#4a7ef0 0 var(--pct),#e8eef8 var(--pct));
  color: #254f96;
  border-radius: 50%;
  grid-area: 1 / 3 / 4;
  align-self: center;
  place-items: center;
  width: 54px;
  height: 54px;
  font-weight: 900;
  display: grid;
  position: relative;
}

.gamma-mini-ring:before {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  position: absolute;
}

.gamma-mini-ring {
  font-size: 9px;
}

.gamma-mini-ring:after {
  content: attr(data-label);
  position: relative;
}

.gamma-mini-ring.muted-ring {
  background: conic-gradient(#f1ad23 0 var(--pct),#edf2f8 var(--pct));
}

.gamma-location-main {
  grid-template-columns: minmax(310px, .9fr) minmax(0, 1.65fr);
  gap: 10px;
  display: grid;
}

.gamma-location-map-card, .gamma-location-list, .gamma-location-bottom > article {
  background: #fff;
  border: 1px solid #d9e4f1;
  border-radius: 8px;
  overflow: hidden;
}

.gamma-location-map-card > header, .gamma-location-list > header, .gamma-location-bottom article > header {
  border-bottom: 1px solid #e5ebf3;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  padding: 0 13px;
  display: flex;
}

.gamma-location-map-card h2, .gamma-location-list h2, .gamma-location-bottom h2 {
  color: #142a58;
  margin: 0;
  font-size: 14px;
}

.gamma-location-map-card header a {
  color: #2176d0;
  font-size: 9px;
  text-decoration: none;
}

.gamma-location-map {
  background: linear-gradient(135deg, #eef5ec 0, #f6f7ed 42%, #e9f3fb 43%, #edf7fb 60%, #f1f5ea 61%);
  height: 360px;
  position: relative;
  overflow: hidden;
}

.gamma-location-map:before, .gamma-location-map:after {
  content: "";
  opacity: .9;
  background: #cbe6f5;
  border-radius: 50%;
  position: absolute;
  transform: rotate(-22deg);
}

.gamma-location-map:before {
  width: 80px;
  height: 520px;
  top: -70px;
  left: 58%;
}

.gamma-location-map:after {
  width: 36px;
  height: 440px;
  top: -40px;
  left: 28%;
}

.gamma-location-map .road {
  transform-origin: 0;
  z-index: 1;
  background: #fff;
  border: 1px solid #e2e7df;
  height: 8px;
  position: absolute;
  box-shadow: 0 0 0 2px #ffffffa6;
}

.gamma-location-map .r1 {
  width: 130%;
  top: 34%;
  left: -10%;
  transform: rotate(10deg);
}

.gamma-location-map .r2 {
  width: 110%;
  top: 64%;
  left: 0;
  transform: rotate(-15deg);
}

.gamma-location-map .r3 {
  width: 85%;
  top: 17%;
  left: 16%;
  transform: rotate(-40deg);
}

.gamma-location-map .map-label {
  color: #7c8ba0;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  position: absolute;
}

.gamma-location-map .l1 {
  top: 12%;
  left: 6%;
}

.gamma-location-map .l2 {
  bottom: 10%;
  right: 7%;
}

.gamma-map-pin {
  z-index: 5;
  position: absolute;
  transform: translate(-50%, -50%);
}

.gamma-map-pin > b {
  color: #fff;
  background: #2379ee;
  border-radius: 50% 50% 50% 0;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
  transform: rotate(-45deg);
  box-shadow: 0 5px 14px #2379ee47;
}

.gamma-map-pin > b:first-letter {
  transform: rotate(45deg);
}

.gamma-map-pin.default > b {
  background: #f2a51c;
}

.gamma-map-pin > span {
  color: #2b466d;
  background: #fff;
  border-radius: 8px;
  width: 190px;
  padding: 9px;
  display: none;
  position: absolute;
  top: -18px;
  left: 18px;
  box-shadow: 0 10px 28px #1431562e;
}

.gamma-map-pin:hover > span, .gamma-map-pin span strong, .gamma-map-pin span small, .gamma-map-pin span em {
  display: block;
}

.gamma-map-pin span small {
  color: #7c8ca1;
  margin-top: 2px;
}

.gamma-map-pin span em {
  color: #15965c;
  margin-top: 5px;
  font-style: normal;
}

.gamma-map-empty {
  color: #73859c;
  z-index: 3;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.gamma-location-map-card > footer {
  color: #637895;
  gap: 18px;
  padding: 10px 13px;
  display: flex;
}

.legend-dot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  display: inline-block;
}

.legend-dot.active {
  background: #2b8def;
}

.legend-dot.default {
  background: #f1a91c;
}

.legend-dot.inactive {
  background: #9aa9bd;
}

.gamma-location-filter {
  border-bottom: 1px solid #e8edf4;
  grid-template-columns: minmax(210px, 1fr) 145px 155px auto;
  gap: 8px;
  padding: 10px 12px;
  display: grid;
}

.gamma-location-filter input, .gamma-location-filter select, .gamma-location-filter button {
  color: #506885;
  background: #fff;
  border: 1px solid #d7e1ed;
  border-radius: 5px;
  height: 34px;
  padding: 0 9px;
}

.gamma-location-filter button {
  cursor: pointer;
  font-weight: 800;
}

.gamma-location-table {
  overflow-x: auto;
}

.gamma-location-table .head, .gamma-location-table .row {
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 1.15fr 1.65fr .7fr .55fr .8fr .65fr .5fr;
  align-items: center;
  gap: 8px;
  min-width: 850px;
  padding: 9px 12px;
  display: grid;
}

.gamma-location-table .head {
  color: #77889e;
  background: #fafcff;
  font-size: 9px;
}

.gamma-location-table .row {
  color: #3a5274;
}

.gamma-location-table .row > span > strong, .gamma-location-table .row > span > small {
  display: block;
}

.gamma-location-table .row > span > small {
  color: #7c8da3;
  margin-top: 2px;
}

.gamma-location-table em {
  border-radius: 10px;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
}

.gamma-location-table em.active {
  color: #16824f;
  background: #e3f7eb;
}

.gamma-location-table em.inactive {
  color: #9b6c16;
  background: #fff0d8;
}

.gamma-location-list > footer {
  color: #6e819b;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.gamma-location-list > footer > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-location-list > footer a, .gamma-location-list > footer b, .gamma-location-list > footer > div > span {
  color: #34557f;
  border: 1px solid #dbe4ef;
  border-radius: 5px;
  place-items: center;
  width: 28px;
  height: 28px;
  text-decoration: none;
  display: grid;
}

.gamma-location-list > footer b {
  color: #1e6cce;
  background: #edf4ff;
}

.gamma-location-list > footer em {
  margin-left: 6px;
  font-style: normal;
}

.gamma-location-row-action {
  position: relative;
}

.gamma-location-row-action > summary {
  cursor: pointer;
  color: #173b70;
  list-style: none;
}

.gamma-location-row-action > div {
  z-index: 20;
  background: #fff;
  border: 1px solid #d8e3ef;
  border-radius: 10px;
  width: 310px;
  padding: 12px;
  position: absolute;
  top: 24px;
  right: 0;
  box-shadow: 0 14px 38px #122e572e;
}

.gamma-location-row-action form {
  gap: 8px;
  display: grid;
}

.gamma-location-row-action .two {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.gamma-location-row-action form + form {
  margin-top: 8px;
}

.gamma-location-row-action .danger {
  color: #c24e4e;
  background: #fff0f0;
  border: 1px solid #ffd7d7;
  width: 100%;
}

.gamma-location-bottom {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.gamma-location-bottom article > a {
  color: #335176;
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  text-decoration: none;
  display: grid;
}

.gamma-location-bottom article > a:hover {
  background: #f7faff;
}

.gamma-location-bottom article > a > em {
  color: #7185a0;
  font-style: normal;
}

.gamma-location-bottom article > a > em.on {
  color: #188151;
  background: #e5f7ec;
  border-radius: 10px;
  padding: 3px 7px;
}

.gamma-location-bottom article > a > em.off {
  color: #758195;
  background: #eff2f6;
  border-radius: 10px;
  padding: 3px 7px;
}

@media (max-width: 1100px) {
  .gamma-location-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-location-main {
    grid-template-columns: 1fr;
  }

  .gamma-location-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-location-map {
    height: 300px;
  }
}

@media (max-width: 760px) {
  .gamma-location-head {
    flex-direction: column;
  }

  .gamma-location-kpis, .gamma-form-grid {
    grid-template-columns: 1fr;
  }

  .gamma-location-filter {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-location-filter input {
    grid-column: 1 / -1;
  }

  .gamma-location-bottom {
    grid-template-columns: 1fr;
  }
}

.gamma-leaflet-wrap {
  background: #eef4fb;
  min-height: 330px;
  position: relative;
}

.gamma-leaflet-map {
  z-index: 1;
  background: #eef4fb;
  width: 100%;
  height: 330px;
}

.gamma-leaflet-hint {
  z-index: 500;
  color: #60738e;
  background: #ffffffeb;
  border: 1px solid #d8e3f0;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 9px;
  position: absolute;
  bottom: 9px;
  left: 10px;
  box-shadow: 0 2px 8px #21446e14;
}

.gamma-leaflet-div-icon {
  background: none !important;
  border: 0 !important;
}

.gamma-leaflet-popup {
  color: #18345d;
  gap: 4px;
  min-width: 180px;
  display: grid;
}

.gamma-leaflet-popup strong {
  color: #0b2450;
  font-size: 12px;
}

.gamma-leaflet-popup span {
  color: #5d718e;
  font-size: 10px;
}

.gamma-leaflet-popup em {
  color: #13985e;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.gamma-location-map-card .leaflet-control-zoom a {
  color: #173e77;
}

.gamma-location-map-card .leaflet-control-attribution {
  font-size: 8px;
}

@media (max-width: 760px) {
  .gamma-leaflet-map, .gamma-leaflet-wrap {
    height: 280px;
    min-height: 280px;
  }
}

.gamma-leaflet-error, .gamma-leaflet-empty {
  z-index: 650;
  text-align: center;
  color: #526a89;
  background: #fffffff2;
  border: 1px solid #d8e3f0;
  border-radius: 8px;
  max-width: 82%;
  padding: 10px 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 18px #21446e1f;
}

.gamma-leaflet-empty {
  color: #60738e;
}

.gamma-leaflet-fallback {
  z-index: 1;
  background: #eef4fb;
  border: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.gamma-leaflet-map {
  z-index: 2;
  opacity: 0;
  background: none;
  width: 100%;
  height: 100%;
  transition: opacity .18s;
  position: absolute;
  inset: 0;
}

.gamma-leaflet-runtime-note {
  z-index: 620;
  color: #8a5b12;
  background: #fffffff0;
  border: 1px solid #f1d6a2;
  border-radius: 7px;
  max-width: 70%;
  padding: 6px 9px;
  font-size: 9px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  box-shadow: 0 2px 10px #1e42691a;
}

.gamma-leaflet-empty-note {
  z-index: 610;
  color: #60738e;
  white-space: nowrap;
  background: #ffffffeb;
  border: 1px solid #d8e3f0;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 9px;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.gamma-leaflet-hint {
  z-index: 630;
}

@media (max-width: 760px) {
  .gamma-leaflet-wrap {
    min-height: 280px;
  }

  .gamma-leaflet-runtime-note {
    max-width: 88%;
  }

  .gamma-leaflet-empty-note {
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: 86%;
  }
}

.gamma-leaflet-wrap {
  background: #eef4fb;
  min-height: 330px;
  position: relative;
  overflow: hidden;
}

.gamma-leaflet-map {
  z-index: 2;
  background: #eef4fb;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 1 !important;
}

.gamma-leaflet-fallback {
  display: none !important;
}

.gamma-leaflet-loading {
  z-index: 620;
  color: #60738e;
  background: #fffffff2;
  border: 1px solid #d8e3f0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 18px #21446e1a;
}

.gamma-leaflet-error {
  z-index: 650;
  text-align: center;
  color: #526a89;
  background: #fffffff7;
  border: 1px solid #efcaca;
  border-radius: 9px;
  width: min(86%, 420px);
  padding: 12px 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 18px #21446e1f;
}

.gamma-leaflet-error strong, .gamma-leaflet-error span {
  display: block;
}

.gamma-leaflet-error strong {
  color: #b33b3b;
  margin-bottom: 5px;
}

.gamma-local-map-fallback {
  z-index: 1;
  background: #eef4fb;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gamma-local-map-fallback img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.gamma-local-map-point {
  z-index: 3;
  background: #3478f6;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px #19469659;
}

.gamma-local-map-point.is-default {
  background: #f2a51a;
}

.gamma-leaflet-map {
  z-index: 2;
  transition: opacity .18s;
  opacity: 0 !important;
  background: none !important;
}

.gamma-leaflet-map.is-ready {
  opacity: 1 !important;
}

.gamma-leaflet-loading {
  pointer-events: none;
}

.gamma-map-online-cta {
  z-index: 640;
  text-align: center;
  color: #526a89;
  background: #fffffff5;
  border: 1px solid #d8e3f0;
  border-radius: 10px;
  gap: 7px;
  width: min(82%, 360px);
  padding: 12px 14px;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 22px #21446e24;
}

.gamma-map-online-cta strong {
  color: #173e77;
  font-size: 11px;
}

.gamma-map-online-cta span {
  font-size: 9px;
  line-height: 1.45;
}

.gamma-map-online-cta button {
  color: #fff;
  font: inherit;
  cursor: pointer;
  background: #2d6cdf;
  border: 1px solid #2d6cdf;
  border-radius: 8px;
  justify-self: center;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
}

.gamma-map-online-cta button:hover {
  filter: brightness(.97);
}

.gamma-map-online-cta button:disabled {
  opacity: .65;
  cursor: wait;
}

.gamma-leaflet-map {
  pointer-events: none;
}

.gamma-leaflet-map.is-ready {
  pointer-events: auto;
}

@media (max-width: 760px) {
  .gamma-map-online-cta {
    width: min(88%, 340px);
  }
}

.gamma-leaflet-compact {
  background: #eef3f8;
  border-radius: 0;
  overflow: hidden;
  height: 238px !important;
  min-height: 238px !important;
}

.gamma-leaflet-compact .gamma-leaflet-map {
  pointer-events: auto;
  width: 100%;
  position: absolute;
  inset: 0;
  opacity: 1 !important;
  background: #eef3f8 !important;
  height: 100% !important;
}

.gamma-leaflet-compact .leaflet-container {
  background: #eef3f8;
  font-family: Helvetica, Arial, sans-serif;
}

.gamma-location-pin {
  background: #3478f6;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 5px;
  width: 28px;
  height: 34px;
  display: block;
  position: relative;
  transform: rotate(-45deg);
  box-shadow: 0 3px 11px #1b489159;
}

.gamma-location-pin.is-default {
  background: #f2a51a;
}

.gamma-location-pin-dot {
  background: #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 7px;
  left: 7px;
}

.gamma-map-recenter {
  z-index: 650;
  color: #314e76;
  cursor: pointer;
  background: #fffffff5;
  border: 1px solid #d8e1ec;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 19px;
  display: grid;
  position: absolute;
  bottom: 42px;
  right: 12px;
  box-shadow: 0 2px 10px #1e3d6629;
}

.gamma-map-status {
  z-index: 640;
  color: #5b708d;
  text-align: center;
  background: #fffffff0;
  border: 1px solid #d9e3ef;
  border-radius: 7px;
  max-width: 78%;
  padding: 6px 9px;
  font-size: 9px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px #21446e14;
}

.gamma-map-status.is-warning {
  color: #835914;
  border-color: #f0d39d;
}

.gamma-map-status b {
  font-weight: 800;
}

.gamma-map-empty-mini {
  z-index: 630;
  color: #60738e;
  background: #fffffff0;
  border: 1px solid #d8e3f0;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 9px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gamma-leaflet-compact .gamma-leaflet-hint {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 64px);
  bottom: 9px;
  left: 10px;
  right: auto;
  overflow: hidden;
}

@media (max-width: 760px) {
  .gamma-leaflet-compact {
    height: 220px !important;
    min-height: 220px !important;
  }

  .gamma-map-status {
    max-width: 90%;
  }
}

.gamma-pmtiles-wrap {
  background: #eef3f8;
  overflow: hidden;
  height: 238px !important;
  min-height: 238px !important;
}

.gamma-pmtiles-map {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #eef3f8 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}

.gamma-pmtiles-map.maplibregl-map {
  font-family: Helvetica, Arial, sans-serif;
  position: absolute;
  overflow: hidden;
}

.gamma-pmtiles-map .maplibregl-canvas-container, .gamma-pmtiles-map .maplibregl-canvas {
  position: absolute;
  inset: 0;
}

.gamma-pmtiles-map .maplibregl-canvas {
  outline: none;
}

.gamma-pmtiles-map .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.gamma-pmtiles-map .maplibregl-canvas-container.maplibregl-interactive:active {
  cursor: grabbing;
}

.gamma-pmtiles-map .maplibregl-marker {
  will-change: transform;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
}

.gamma-pmtiles-pin {
  cursor: pointer;
  background: #3478f6;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 5px;
  width: 28px;
  height: 34px;
  padding: 0;
  display: block;
  position: relative;
  transform: rotate(-45deg);
  box-shadow: 0 3px 11px #1b489159;
}

.gamma-pmtiles-pin.is-default {
  background: #f2a51a;
}

.gamma-pmtiles-pin.is-inactive {
  filter: grayscale(.45);
  opacity: .72;
}

.gamma-pmtiles-pin span {
  background: #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 7px;
  left: 7px;
}

.gamma-pmtiles-map .maplibregl-popup {
  will-change: transform;
  pointer-events: none;
  z-index: 20;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.gamma-pmtiles-map .maplibregl-popup-content {
  pointer-events: auto;
  background: #fff;
  border: 1px solid #d9e3ef;
  border-radius: 8px;
  padding: 10px 22px 10px 10px;
  position: relative;
  box-shadow: 0 5px 20px #193a662e;
}

.gamma-pmtiles-map .maplibregl-popup-close-button {
  color: #71819a;
  cursor: pointer;
  background: none;
  border: 0;
  position: absolute;
  top: 3px;
  right: 4px;
}

.gamma-pmtiles-map .maplibregl-popup-tip {
  display: none;
}

.gamma-pmtiles-popup {
  color: #24476f;
  gap: 3px;
  min-width: 180px;
  display: grid;
}

.gamma-pmtiles-popup strong {
  color: #102d58;
  font-size: 11px;
}

.gamma-pmtiles-popup small {
  color: #627692;
  font-size: 9px;
}

.gamma-pmtiles-popup em {
  color: #15905a;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 760px) {
  .gamma-pmtiles-wrap {
    height: 220px !important;
    min-height: 220px !important;
  }
}

.gamma-leaflet-pin-host {
  background: none !important;
  border: 0 !important;
  overflow: visible !important;
}

.gamma-pmtiles-map .leaflet-pane, .gamma-pmtiles-map .leaflet-map-pane, .gamma-pmtiles-map .leaflet-tile-pane {
  z-index: auto;
}

.gamma-pmtiles-map canvas {
  max-width: none !important;
}

.gamma-map-boundary {
  min-width: 0;
  position: relative;
}

.gamma-map-diagnostic {
  color: #58708f;
  background: #f8fbff;
  border-bottom: 1px solid #dbe5f1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 9px;
  line-height: 1.2;
  display: flex;
}

.gamma-map-diagnostic span {
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d8e3ef;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  display: inline-flex;
}

.gamma-map-diagnostic span i {
  background: #9aa9bd;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.gamma-map-diagnostic span.is-ok i {
  background: #25a66a;
}

.gamma-map-diagnostic span.is-error i {
  background: #d74b4b;
}

.gamma-map-diagnostic small {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6c7f99;
  width: 100%;
  overflow: hidden;
}

.gamma-map-runtime-loading {
  color: #60738e;
  background: #eef3f8;
  justify-content: center;
  align-items: center;
  height: 238px;
  font-size: 10px;
  display: flex;
}

@media (max-width: 760px) {
  .gamma-map-runtime-loading {
    height: 220px;
  }

  .gamma-map-diagnostic {
    gap: 4px;
    padding: 6px 8px;
  }

  .gamma-map-diagnostic span {
    padding: 3px 6px;
  }
}

.gamma-osm-popup {
  color: #24476f;
  gap: 3px;
  min-width: 180px;
  display: grid;
}

.gamma-osm-popup strong {
  color: #102d58;
  font-size: 11px;
}

.gamma-osm-popup small {
  color: #627692;
  font-size: 9px;
}

.gamma-osm-popup em {
  color: #15905a;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.gamma-static-map-list {
  background: #f7f9fe;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.gamma-static-map-item {
  background: #fff;
  border: 1px solid #dbe4f3;
  border-radius: 14px;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  display: grid;
  overflow: hidden;
}

.gamma-static-map-canvas {
  background: #edf2f8;
  border-radius: 12px;
  max-width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #455d8714;
}

.gamma-static-map-tiles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gamma-static-map-tiles img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  border: 0;
  position: absolute;
  max-width: none !important;
}

.gamma-static-map-overlay {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.gamma-static-radius {
  fill: #3478f61f;
  stroke: #3478f6;
  stroke-width: 2px;
}

.gamma-static-pin {
  filter: drop-shadow(0 3px 6px #0f265a47);
  z-index: 3;
  width: 30px;
  height: 38px;
  position: absolute;
  transform: translate(-50%, -100%);
}

.gamma-static-pin:before {
  content: "";
  box-sizing: border-box;
  background: #3478f6;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(-45deg);
}

.gamma-static-pin span {
  z-index: 2;
  background: #fff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 9px;
  left: 12px;
}

.gamma-static-pin.is-default:before {
  background: #e8a514;
}

.gamma-static-map-badge {
  z-index: 4;
  color: #516487;
  background: #ffffffeb;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 10px;
  position: absolute;
  bottom: 8px;
  left: 8px;
  box-shadow: 0 1px 6px #20365f24;
}

.gamma-static-map-meta {
  color: #172457;
  gap: 3px;
  padding: 0 2px 2px;
  display: grid;
}

.gamma-static-map-meta > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-static-map-meta strong {
  font-size: 12px;
}

.gamma-static-map-meta em {
  color: #9b6a00;
  background: #fff3cf;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-style: normal;
}

.gamma-static-map-meta span, .gamma-static-map-meta small {
  color: #687a9d;
  font-size: 10px;
}

.gamma-static-map-empty {
  text-align: center;
  color: #506487;
  background: #f7f9fe;
  border: 1px dashed #c8d4e8;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 238px;
  margin: 12px;
  padding: 20px;
  display: flex;
}

.gamma-static-map-empty strong {
  color: #172457;
  font-size: 12px;
}

.gamma-static-map-empty span {
  max-width: 360px;
  font-size: 10px;
}

@media (min-width: 1200px) {
  .gamma-static-map-list:has(.gamma-static-map-item:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamma-static-map-list:has(.gamma-static-map-item:nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gamma-timesheet {
  color: #102650;
}

.gamma-timesheet-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  display: flex;
}

.gamma-timesheet-head h1 {
  color: #071c4a;
  margin: 0;
  font-size: 28px;
}

.gamma-timesheet-head p {
  color: #637895;
  margin: 4px 0 0;
}

.gamma-timesheet-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-timesheet-actions a {
  color: #2464bb;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #cfdaeb;
  border-radius: 7px;
  padding: 9px 13px;
  font-weight: 800;
  text-decoration: none;
}

.gamma-timesheet-actions a.primary {
  color: #fff;
  background: linear-gradient(135deg, #216bea, #6b22f5);
  border-color: #0000;
  box-shadow: 0 5px 14px #4256e12e;
}

.gamma-att-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  display: grid;
}

.gamma-att-kpis article {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 88px;
  padding: 13px 16px;
  display: flex;
}

.gamma-att-kpis article span, .gamma-att-kpis article small {
  color: #5b708f;
  display: block;
}

.gamma-att-kpis article strong {
  color: #0a2251;
  margin-top: 6px;
  font-size: 27px;
  line-height: 1.1;
  display: block;
}

.gamma-att-kpis article small {
  color: #67869e;
  margin-top: 5px;
}

.gamma-att-ring {
  --p: 0deg;
  background: radial-gradient(circle,#fff 0 59%,transparent 61%),conic-gradient(#315ff4 0 var(--p),#e8edf5 var(--p));
  color: #183d72;
  border-radius: 50%;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.gamma-att-ring.late {
  background: radial-gradient(circle,#fff 0 59%,transparent 61%),conic-gradient(#f0a91d 0 var(--p),#e8edf5 var(--p));
}

.gamma-att-ring.absent {
  background: radial-gradient(circle,#fff 0 59%,transparent 61%),conic-gradient(#ef5b62 0 var(--p),#e8edf5 var(--p));
}

.gamma-att-main {
  grid-template-columns: minmax(0, 2.15fr) minmax(280px, .78fr);
  gap: 10px;
  display: grid;
}

.gamma-att-calendar-card, .gamma-att-side > article, .gamma-att-list {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  overflow: hidden;
}

.gamma-att-calendar-card > header, .gamma-att-side article > header, .gamma-att-list > header {
  border-bottom: 1px solid #e5ebf3;
  justify-content: space-between;
  align-items: center;
  min-height: 45px;
  padding: 0 13px;
  display: flex;
}

.gamma-att-calendar-card h2, .gamma-att-side h2, .gamma-att-list h2 {
  color: #142a58;
  margin: 0;
  font-size: 14px;
}

.gamma-att-calendar-card header > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-att-calendar-card header a, .gamma-att-calendar-card header b {
  color: #426083;
  border: 1px solid #dbe4ef;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 9px;
  text-decoration: none;
}

.gamma-att-calendar-card header b {
  border: 0;
}

.gamma-att-week {
  background: #f9fbfe;
  border-bottom: 1px solid #e5ebf3;
  grid-template-columns: repeat(7, 1fr);
  display: grid;
}

.gamma-att-week b {
  text-align: center;
  color: #647793;
  padding: 7px 2px;
  font-size: 8px;
}

.gamma-att-calendar {
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(76px, 1fr);
  display: grid;
}

.gamma-att-calendar > a, .gamma-att-calendar > .blank {
  color: #183860;
  border-bottom: 1px solid #e8edf5;
  border-right: 1px solid #e8edf5;
  min-width: 0;
  padding: 7px;
  text-decoration: none;
}

.gamma-att-calendar > a:nth-child(7n), .gamma-att-calendar > .blank:nth-child(7n) {
  border-right: 0;
}

.gamma-att-calendar > a.selected {
  outline-offset: -2px;
  background: #f3f6ff;
  outline: 2px solid #4774f3;
}

.gamma-att-calendar > a em {
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.gamma-att-calendar > a div {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  display: flex;
}

.gamma-att-calendar > a span {
  font-size: 8px;
}

.gamma-att-calendar > a small {
  color: #94a2b6;
  margin-top: 12px;
  font-size: 8px;
  display: block;
}

.gamma-att-calendar .present {
  color: #20a86b;
}

.gamma-att-calendar .late {
  color: #e5a51f;
}

.gamma-att-calendar .leave {
  color: #4d82df;
}

.gamma-att-calendar .absent {
  color: #e35d64;
}

.gamma-att-calendar-card > footer {
  color: #5c7390;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  font-size: 8px;
  display: flex;
}

.gamma-att-calendar-card > footer span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-att-calendar-card > footer i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.gamma-att-calendar-card > footer i.present {
  background: #20a86b;
}

.gamma-att-calendar-card > footer i.late {
  background: #e5a51f;
}

.gamma-att-calendar-card > footer i.leave {
  background: #4d82df;
}

.gamma-att-calendar-card > footer i.absent {
  background: #e35d64;
}

.gamma-att-calendar-card > footer i.holiday {
  background: #a7b1c2;
}

.gamma-att-side {
  align-content: start;
  gap: 10px;
  display: grid;
}

.gamma-att-side article > header a {
  color: #2670ce;
  font-size: 8px;
  text-decoration: none;
}

.gamma-att-summary {
  padding: 8px 13px;
}

.gamma-att-summary p {
  color: #556c89;
  border-bottom: 1px solid #edf1f6;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  display: flex;
}

.gamma-att-summary p:last-child {
  border-bottom: 0;
}

.gamma-att-summary b {
  color: #0c2857;
}

.gamma-att-exceptions a, .gamma-att-quick a {
  color: #375170;
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-att-exceptions i {
  border-radius: 50%;
  place-items: center;
  width: 16px;
  height: 16px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.gamma-att-exceptions i.danger {
  color: #e34f56;
  background: #ffe2e3;
}

.gamma-att-exceptions i.warn {
  color: #bf8611;
  background: #fff0c9;
}

.gamma-att-exceptions i.info {
  color: #3d6edc;
  background: #e4edff;
}

.gamma-att-quick a {
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  min-width: 0;
}

.gamma-att-quick-icon {
  color: #385b8e;
  place-items: center;
  width: 20px;
  min-width: 20px;
  font-weight: 800;
  line-height: 1;
  display: grid;
}

.gamma-att-quick-label {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  min-width: 0;
  line-height: 1.35;
  display: block;
}

.gamma-att-quick b {
  color: #7a8ca4;
  text-align: center;
  font-size: 14px;
}

.gamma-att-side, .gamma-att-side > article {
  min-width: 0;
}

.gamma-att-list {
  margin-top: 10px;
}

.gamma-att-list > header {
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.gamma-att-list form {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  display: flex;
}

.gamma-att-list input, .gamma-att-list select {
  color: #4c6280;
  height: 34px;
  font: inherit;
  background: #fff;
  border: 1px solid #d2dceb;
  border-radius: 6px;
  min-width: 135px;
  padding: 0 9px;
}

.gamma-att-list input {
  min-width: 210px;
}

.gamma-att-list button {
  color: #315d99;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c8d5e7;
  border-radius: 6px;
  height: 34px;
  padding: 0 11px;
  font-weight: 800;
}

.gamma-att-table {
  overflow-x: auto;
}

.gamma-att-table .head, .gamma-att-table .row {
  grid-template-columns: 78px 1.25fr 1fr 1fr 74px 74px 75px 120px 48px;
  align-items: center;
  min-width: 980px;
  display: grid;
}

.gamma-att-table .head {
  color: #61758f;
  background: #f8fafd;
  border-bottom: 1px solid #e4eaf2;
  font-size: 8px;
}

.gamma-att-table .head span {
  padding: 8px 10px;
}

.gamma-att-table .row {
  color: #304c70;
  border-bottom: 1px solid #edf1f6;
}

.gamma-att-table .row > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  overflow: hidden;
}

.gamma-att-table .row em {
  border-radius: 11px;
  padding: 4px 8px;
  font-size: 8px;
  font-style: normal;
}

.gamma-att-table .row em.present, .gamma-att-table .row em.remote, .gamma-att-table .row em.trip {
  color: #187e4c;
  background: #dff6e8;
}

.gamma-att-table .row em.leave {
  color: #3169ad;
  background: #e4efff;
}

.gamma-att-table .row em.absent {
  color: #c34249;
  background: #ffe1e2;
}

.gamma-att-table .row em.holiday {
  color: #66768b;
  background: #edf0f4;
}

.gamma-att-table .row a {
  color: #536b8a;
  font-weight: 900;
  text-decoration: none;
}

.gamma-att-empty {
  color: #71829a;
  padding: 20px;
}

.gamma-att-list > footer {
  color: #657993;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  display: flex;
}

.gamma-att-list > footer > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-att-list > footer a, .gamma-att-list > footer b, .gamma-att-list > footer > div > span {
  color: #496384;
  border: 1px solid #d7e0ec;
  border-radius: 5px;
  place-items: center;
  min-width: 28px;
  height: 28px;
  text-decoration: none;
  display: grid;
}

.gamma-att-list > footer b {
  color: #2b62c9;
  background: #edf3ff;
}

.gamma-att-list > footer em {
  margin-left: 5px;
  font-style: normal;
}

@media (max-width: 1150px) {
  .gamma-att-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .gamma-att-main {
    grid-template-columns: 1fr;
  }

  .gamma-att-side {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 780px) {
  .gamma-timesheet-head {
    display: block;
  }

  .gamma-timesheet-actions {
    margin-top: 10px;
  }

  .gamma-att-kpis, .gamma-att-side {
    grid-template-columns: 1fr;
  }

  .gamma-att-calendar-card {
    overflow-x: auto;
  }

  .gamma-att-week, .gamma-att-calendar {
    min-width: 720px;
  }

  .gamma-att-list > header {
    display: block;
  }

  .gamma-att-list form {
    margin-top: 8px;
  }

  .gamma-att-list input, .gamma-att-list select {
    width: 100%;
    min-width: 100%;
  }
}

.gamma-tax-page {
  gap: 10px;
  display: grid;
}

.gamma-tax-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 8px 2px 2px;
  display: flex;
}

.gamma-tax-breadcrumb {
  color: #6d7f9c;
  margin-bottom: 4px;
  font-size: 10px;
}

.gamma-tax-head h1 {
  color: #071a49;
  margin: 0;
  font-size: 25px;
  line-height: 1.05;
}

.gamma-tax-head h1 em {
  color: #405de6;
  vertical-align: middle;
  background: #eaf0ff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-style: normal;
}

.gamma-tax-head p {
  color: #607391;
  margin: 5px 0 0;
  font-size: 11px;
}

.gamma-tax-head-actions {
  gap: 8px;
  padding-top: 8px;
  display: flex;
}

.gamma-tax-head-actions a {
  color: #24466e;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 7px;
  padding: 9px 12px;
  font-weight: 800;
  text-decoration: none;
}

.gamma-tax-head-actions a.primary {
  color: #fff;
  background: #4f46e5;
  border-color: #4f46e5;
}

.gamma-tax-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-tax-kpis article {
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 9px;
  align-items: flex-start;
  gap: 12px;
  min-height: 90px;
  padding: 14px;
  display: flex;
}

.gamma-tax-kpis article > i {
  color: #3c75ee;
  background: #edf4ff;
  border-radius: 9px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gamma-tax-kpis small, .gamma-tax-kpis strong, .gamma-tax-kpis span {
  display: block;
}

.gamma-tax-kpis small {
  color: #607391;
  margin-bottom: 5px;
}

.gamma-tax-kpis strong {
  color: #081d50;
  font-size: 20px;
}

.gamma-tax-kpis span {
  color: #71839f;
  margin-top: 5px;
  font-size: 9px;
}

.gamma-tax-tabs {
  background: #fff;
  border-bottom: 1px solid #dde6f1;
  align-items: flex-end;
  gap: 28px;
  height: 42px;
  padding: 0 14px;
  display: flex;
}

.gamma-tax-tabs a, .gamma-tax-tabs b {
  color: #4d6283;
  align-items: center;
  height: 42px;
  text-decoration: none;
  display: flex;
}

.gamma-tax-tabs b {
  color: #385ee6;
  border-bottom: 2px solid #496cf2;
}

.gamma-tax-tabs span {
  color: #536987;
  border: 1px solid #dce5ef;
  border-radius: 6px;
  align-self: center;
  margin-left: auto;
  padding: 7px 9px;
}

.gamma-tax-dashboard {
  grid-template-columns: 1.4fr .9fr .62fr;
  gap: 10px;
  display: grid;
}

.gamma-tax-card {
  background: #fff;
  border: 1px solid #dee7f1;
  border-radius: 9px;
  overflow: hidden;
}

.gamma-tax-card > header {
  border-bottom: 1px solid #edf1f6;
  padding: 11px 13px;
}

.gamma-tax-card h2 {
  color: #10254c;
  margin: 0;
  font-size: 13px;
}

.gamma-tax-history {
  min-height: 220px;
}

.gamma-tax-bars {
  align-items: flex-end;
  gap: 12px;
  height: 145px;
  padding: 16px 18px 5px;
  display: flex;
}

.gamma-tax-bar-col {
  text-align: center;
  flex: 1;
  min-width: 0;
}

.gamma-tax-bar-wrap {
  background: #f3f6fb;
  border-radius: 4px;
  align-items: flex-end;
  height: 108px;
  display: flex;
  overflow: hidden;
}

.gamma-tax-bar-wrap i {
  background: linear-gradient(#8ab4ff, #4f7df3);
  border-radius: 4px 4px 0 0;
  width: 100%;
  display: block;
}

.gamma-tax-bar-col span {
  color: #6d7e98;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 5px;
  font-size: 8px;
  display: block;
  overflow: hidden;
}

.gamma-tax-legend {
  color: #637590;
  border-top: 1px solid #f0f3f7;
  padding: 8px 14px 12px;
}

.gamma-tax-legend i {
  background: #4f7df3;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  display: inline-block;
}

.gamma-tax-legend b {
  color: #ff9f43;
  margin-left: 15px;
}

.gamma-tax-empty {
  color: #8190a5;
  padding: 30px;
}

.gamma-tax-structure {
  min-height: 220px;
}

.gamma-tax-donut-wrap {
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 24px 12px;
  display: flex;
}

.gamma-tax-donut {
  border-radius: 50%;
  place-items: center;
  width: 120px;
  height: 120px;
  display: grid;
  position: relative;
}

.gamma-tax-donut:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  position: absolute;
}

.gamma-tax-donut > div {
  z-index: 1;
  text-align: center;
}

.gamma-tax-donut b {
  font-size: 18px;
  display: block;
}

.gamma-tax-donut small {
  color: #71819b;
  font-size: 8px;
}

.gamma-tax-rate-list {
  min-width: 105px;
}

.gamma-tax-rate-list p {
  color: #5f718f;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  display: grid;
}

.gamma-tax-rate-list i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.gamma-tax-rate-list i.a {
  background: #4f7df3;
}

.gamma-tax-rate-list i.b {
  background: #75a9fb;
}

.gamma-tax-rate-list i.c {
  background: #b3ccfb;
}

.gamma-tax-actions > a {
  color: #27446c;
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 18px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-tax-actions > a i {
  text-align: center;
  font-style: normal;
}

.gamma-tax-actions > a b {
  text-align: right;
}

.gamma-tax-table-card {
  min-width: 0;
}

.gamma-tax-table-head {
  border-bottom: 1px solid #e8eef6;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.gamma-tax-table-head h2 {
  margin: 0;
  font-size: 13px;
}

.gamma-tax-table-head form {
  gap: 7px;
  min-width: 0;
  display: flex;
}

.gamma-tax-table-head input, .gamma-tax-table-head select, .gamma-tax-table-head button {
  color: #526783;
  height: 32px;
  font: inherit;
  background: #fff;
  border: 1px solid #dce5f0;
  border-radius: 6px;
  padding: 0 10px;
}

.gamma-tax-table-head input {
  width: 220px;
}

.gamma-tax-table-head button {
  font-weight: 800;
}

.gamma-tax-table-wrap {
  overflow: auto;
}

.gamma-tax-table-card table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1000px;
}

.gamma-tax-table-card th {
  color: #687b97;
  text-align: left;
  background: #f8faff;
  border-bottom: 1px solid #e8edf4;
  padding: 9px 11px;
  font-weight: 600;
}

.gamma-tax-table-card td {
  color: #334b70;
  border-bottom: 1px solid #edf1f5;
  padding: 9px 11px;
}

.gamma-tax-table-card td a {
  color: #2168c7;
  text-decoration: none;
}

.gamma-tax-state {
  color: #7a889c;
  background: #f1f4f8;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  display: inline-flex;
}

.gamma-tax-state.on {
  color: #16875a;
  background: #e7f7ee;
}

.gamma-tax-table-card footer {
  color: #657894;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.gamma-tax-table-card footer div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-tax-table-card footer a {
  color: #3e5b83;
  border: 1px solid #dce5f0;
  border-radius: 5px;
  place-items: center;
  width: 28px;
  height: 28px;
  text-decoration: none;
  display: grid;
}

.gamma-tax-table-card footer a.active {
  color: #355de5;
  background: #eef3ff;
}

.gamma-tax-footgrid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.gamma-tax-rate-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  display: grid;
}

.gamma-tax-rate-grid span {
  color: #617590;
  background: #f7f9fc;
  border: 1px solid #e6ecf4;
  border-radius: 7px;
  padding: 10px;
}

.gamma-tax-rate-grid b {
  color: #132d57;
  margin-top: 4px;
  font-size: 14px;
  display: block;
}

.gamma-tax-reminders {
  padding: 8px 12px;
}

.gamma-tax-reminders p {
  color: #5e718f;
  border-bottom: 1px solid #edf1f5;
  margin: 0;
  padding: 8px 0;
}

.gamma-tax-reminders b {
  color: #163f7a;
  margin-right: 5px;
}

.gamma-nav-group {
  gap: 1px;
  display: grid;
}

.gamma-nav-parent {
  color: #173e77;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.gamma-nav-parent i {
  text-align: center;
  color: #104d9d;
  width: 20px;
  font-size: 17px;
  font-style: normal;
}

.gamma-nav-parent b {
  margin-left: auto;
  font-weight: 400;
}

.gamma-nav-submenu {
  border-left: 1px solid #d9e4f1;
  margin-left: 21px;
  padding-left: 7px;
  display: grid;
}

.gamma-nav-submenu a {
  padding: 8px 10px !important;
  font-size: 11px !important;
}

.gamma-nav-submenu a:before {
  content: "•";
  color: #4d75ef;
  margin-right: 8px;
}

@media (max-width: 1150px) {
  .gamma-tax-dashboard {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-tax-actions {
    grid-column: 1 / -1;
  }

  .gamma-tax-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .gamma-nav-parent span, .gamma-nav-parent b, .gamma-nav-submenu {
    display: none;
  }

  .gamma-nav-parent {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .gamma-tax-head {
    display: block;
  }

  .gamma-tax-head-actions {
    overflow: auto;
  }

  .gamma-tax-kpis, .gamma-tax-dashboard, .gamma-tax-footgrid {
    grid-template-columns: 1fr;
  }

  .gamma-tax-actions {
    grid-column: auto;
  }

  .gamma-tax-tabs {
    gap: 18px;
    overflow: auto;
  }

  .gamma-tax-table-head {
    display: block;
  }

  .gamma-tax-table-head form {
    margin-top: 8px;
    overflow: auto;
  }

  .gamma-tax-table-card footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.gamma-bonus-page {
  color: #14245b;
  gap: 14px;
  display: grid;
}

.gamma-bonus-head {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  display: flex;
}

.gamma-bonus-breadcrumb {
  color: #7886aa;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
}

.gamma-bonus-head h1 {
  color: #0d1e63;
  margin: 0;
  font-size: 27px;
  line-height: 1.1;
}

.gamma-bonus-head h1 em {
  color: #4e67e8;
  vertical-align: middle;
  background: #e8efff;
  border-radius: 999px;
  margin-left: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-style: normal;
}

.gamma-bonus-head p {
  color: #647398;
  max-width: 760px;
  margin: 5px 0 0;
}

.gamma-bonus-head-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.gamma-bonus-head-actions a {
  color: #263867;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.gamma-bonus-head-actions a.primary {
  color: #fff;
  background: #4f56e8;
  border-color: #4f56e8;
}

.gamma-bonus-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-bonus-kpis article {
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 8px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  display: grid;
}

.gamma-bonus-kpis article > i {
  color: #4f66f3;
  background: #eef3ff;
  border-radius: 10px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gamma-bonus-kpis span, .gamma-bonus-kpis small {
  color: #69789a;
  display: block;
}

.gamma-bonus-kpis strong {
  color: #0d1e63;
  overflow-wrap: anywhere;
  margin: 4px 0;
  font-size: 22px;
  display: block;
}

.gamma-bonus-tabs {
  border-bottom: 1px solid #dce4f3;
  align-items: center;
  gap: 22px;
  min-height: 42px;
  display: flex;
  overflow-x: auto;
}

.gamma-bonus-tabs a, .gamma-bonus-tabs b {
  color: #536386;
  white-space: nowrap;
  padding: 11px 1px;
  text-decoration: none;
}

.gamma-bonus-tabs b {
  color: #4157df;
  border-bottom: 2px solid #5269f1;
}

.gamma-bonus-tabs span {
  margin-left: auto;
}

.gamma-bonus-tabs span a {
  color: #263867;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 700;
  display: inline-flex;
}

.gamma-bonus-filters {
  grid-template-columns: 160px 170px 190px 165px minmax(210px, 1fr) auto;
  gap: 8px;
  display: grid;
}

.gamma-bonus-filters select, .gamma-bonus-filters input, .gamma-bonus-filters button {
  color: #263867;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 6px;
  min-width: 0;
  height: 39px;
  padding: 0 11px;
}

.gamma-bonus-filters button {
  cursor: pointer;
  font-weight: 700;
}

.gamma-bonus-dashboard {
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr) minmax(230px, .72fr);
  gap: 10px;
  display: grid;
}

.gamma-bonus-card {
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.gamma-bonus-card > header {
  border-bottom: 1px solid #e7ecf5;
  padding: 12px 14px;
}

.gamma-bonus-card h2 {
  color: #13235d;
  margin: 0;
  font-size: 14px;
}

.gamma-bonus-history {
  min-height: 225px;
}

.gamma-bonus-bars {
  border-bottom: 1px solid #eef2f8;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  gap: 10px;
  height: 170px;
  padding: 18px 14px 10px;
  display: grid;
}

.gamma-bonus-bar-col {
  justify-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  display: grid;
}

.gamma-bonus-bar-wrap {
  border-bottom: 1px solid #d9e1ef;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 130px;
  display: flex;
}

.gamma-bonus-bar-wrap i {
  background: linear-gradient(#a9c9fa, #5268ef);
  border-radius: 4px 4px 0 0;
  width: min(34px, 70%);
  min-height: 2px;
  display: block;
}

.gamma-bonus-bar-col span {
  color: #657495;
  white-space: nowrap;
  font-size: 10px;
}

.gamma-bonus-legend {
  color: #69789a;
  padding: 8px 14px;
  font-size: 10px;
}

.gamma-bonus-legend i {
  background: #536cf2;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  display: inline-block;
}

.gamma-bonus-donut-wrap {
  grid-template-columns: 145px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 205px;
  padding: 12px;
  display: grid;
}

.gamma-bonus-donut {
  border-radius: 50%;
  place-items: center;
  width: 135px;
  height: 135px;
  display: grid;
}

.gamma-bonus-donut > div {
  text-align: center;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 78px;
  height: 78px;
  padding: 5px;
  display: grid;
}

.gamma-bonus-donut b {
  color: #14245b;
  overflow-wrap: anywhere;
  max-width: 70px;
  font-size: 15px;
}

.gamma-bonus-donut small {
  color: #7280a1;
}

.gamma-bonus-kind-list p {
  color: #576789;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  display: grid;
}

.gamma-bonus-kind-list i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.gamma-bonus-kind-list b {
  color: #24345f;
}

.gamma-bonus-actions > a {
  color: #21315f;
  border-bottom: 1px solid #edf1f7;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-bonus-actions > a:last-child {
  border-bottom: 0;
}

.gamma-bonus-actions > a i {
  text-align: center;
  font-style: normal;
}

.gamma-bonus-actions > a span {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

.gamma-bonus-actions > a b {
  text-align: right;
  color: #8390ad;
}

.gamma-bonus-table-card {
  overflow: visible;
}

.gamma-bonus-table-head {
  border-bottom: 1px solid #e5ebf4;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.gamma-bonus-table-head h2 {
  margin: 0;
  font-size: 14px;
}

.gamma-bonus-table-head span {
  color: #7a88a7;
  font-size: 10px;
}

.gamma-bonus-table-wrap {
  overflow: auto;
}

.gamma-bonus-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 930px;
}

.gamma-bonus-table-wrap th {
  color: #73809c;
  text-align: left;
  white-space: nowrap;
  background: #fafcff;
  border-bottom: 1px solid #e6ecf5;
  padding: 9px 10px;
  font-size: 10px;
}

.gamma-bonus-table-wrap td {
  color: #31416b;
  vertical-align: middle;
  border-bottom: 1px solid #edf1f7;
  padding: 10px;
}

.gamma-bonus-table-wrap td b, .gamma-bonus-table-wrap td small {
  display: block;
}

.gamma-bonus-table-wrap td small {
  color: #8290ac;
  margin-top: 3px;
  font-size: 10px;
}

.gamma-bonus-status {
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  display: inline-block;
}

.gamma-bonus-status.active {
  color: #2f8e55;
  background: #eaf8ef;
}

.gamma-bonus-status.inactive {
  color: #75809a;
  background: #f0f2f6;
}

.gamma-bonus-more {
  color: #5669dd;
  font-weight: 900;
  text-decoration: none;
}

.gamma-bonus-empty {
  text-align: center;
  color: #8290ac !important;
  padding: 28px !important;
}

.gamma-bonus-pagination {
  color: #71809f;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.gamma-bonus-pagination > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-bonus-pagination a, .gamma-bonus-pagination b {
  color: #536386;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 5px;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  text-decoration: none;
  display: grid;
}

.gamma-bonus-pagination a.active {
  color: #455be3;
  background: #eef2ff;
}

.gamma-bonus-pagination a[aria-disabled="true"] {
  pointer-events: none;
  opacity: .45;
}

.gamma-bonus-pagination b {
  min-width: auto;
  font-weight: 500;
}

@media (max-width: 1180px) {
  .gamma-bonus-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamma-bonus-dashboard {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-bonus-actions {
    grid-column: 1 / -1;
  }

  .gamma-bonus-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .gamma-bonus-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .gamma-bonus-kpis, .gamma-bonus-dashboard {
    grid-template-columns: 1fr;
  }

  .gamma-bonus-actions {
    grid-column: auto;
  }

  .gamma-bonus-filters {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-bonus-donut-wrap {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .gamma-bonus-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .gamma-bonus-tabs {
    gap: 14px;
  }
}

.gamma-benefit-page {
  color: #14245b;
  gap: 14px;
  display: grid;
}

.gamma-benefit-head {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  display: flex;
}

.gamma-benefit-breadcrumb {
  color: #7886aa;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
}

.gamma-benefit-head h1 {
  color: #0d1e63;
  margin: 0;
  font-size: 27px;
  line-height: 1.1;
}

.gamma-benefit-head h1 em {
  color: #4e67e8;
  vertical-align: middle;
  background: #e8efff;
  border-radius: 999px;
  margin-left: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-style: normal;
}

.gamma-benefit-head p {
  color: #647398;
  max-width: 780px;
  margin: 5px 0 0;
}

.gamma-benefit-head-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.gamma-benefit-head-actions a {
  color: #263867;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.gamma-benefit-head-actions a.primary {
  color: #fff;
  background: #4f56e8;
  border-color: #4f56e8;
}

.gamma-benefit-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-benefit-kpi-link {
  color: inherit;
  min-width: 0;
  text-decoration: none;
  display: block;
}

.gamma-benefit-kpis article {
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 8px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 100%;
  padding: 15px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  display: grid;
}

.gamma-benefit-kpi-link:hover article {
  border-color: #bfcaf3;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px #3c4e9614;
}

.gamma-benefit-kpis article > i {
  color: #4f66f3;
  background: #eef3ff;
  border-radius: 10px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gamma-benefit-kpis span, .gamma-benefit-kpis small {
  color: #69789a;
  display: block;
}

.gamma-benefit-kpis .gamma-benefit-source {
  color: #4d61d8;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
}

.gamma-benefit-kpis strong {
  color: #0d1e63;
  overflow-wrap: anywhere;
  margin: 4px 0;
  font-size: 22px;
  display: block;
}

.gamma-benefit-tabs {
  border-bottom: 1px solid #dce4f3;
  align-items: center;
  gap: 22px;
  min-height: 42px;
  display: flex;
  overflow-x: auto;
}

.gamma-benefit-tabs a, .gamma-benefit-tabs b {
  color: #536386;
  white-space: nowrap;
  padding: 11px 1px;
  text-decoration: none;
}

.gamma-benefit-tabs b {
  color: #4157df;
  border-bottom: 2px solid #5269f1;
}

.gamma-benefit-tabs span {
  margin-left: auto;
}

.gamma-benefit-tabs span a {
  color: #263867;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 700;
  display: inline-flex;
}

.gamma-benefit-main {
  grid-template-columns: minmax(0, 2.05fr) minmax(270px, .76fr);
  gap: 10px;
  display: grid;
}

.gamma-benefit-card {
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.gamma-benefit-card > header {
  border-bottom: 1px solid #e7ecf5;
  padding: 12px 14px;
}

.gamma-benefit-card h2 {
  color: #13235d;
  margin: 0;
  font-size: 14px;
}

.gamma-benefit-filters {
  border-bottom: 1px solid #e8edf5;
  grid-template-columns: 180px 180px minmax(230px, 1fr) 160px auto;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.gamma-benefit-filters select, .gamma-benefit-filters input, .gamma-benefit-filters button {
  color: #263867;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 6px;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
}

.gamma-benefit-filters button {
  cursor: pointer;
  font-weight: 700;
}

.gamma-benefit-table-wrap {
  overflow: auto;
}

.gamma-benefit-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1050px;
}

.gamma-benefit-table-wrap th {
  color: #73809c;
  text-align: left;
  white-space: nowrap;
  background: #fafcff;
  border-bottom: 1px solid #e6ecf5;
  padding: 9px 10px;
  font-size: 10px;
}

.gamma-benefit-table-wrap td {
  color: #31416b;
  vertical-align: middle;
  border-bottom: 1px solid #edf1f7;
  padding: 10px;
}

.gamma-benefit-table-wrap td b, .gamma-benefit-table-wrap td small {
  display: block;
}

.gamma-benefit-table-wrap td small {
  color: #8290ac;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  margin-top: 3px;
  font-size: 10px;
  overflow: hidden;
}

.gamma-benefit-status {
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  display: inline-block;
}

.gamma-benefit-status.active {
  color: #2f8e55;
  background: #eaf8ef;
}

.gamma-benefit-status.inactive {
  color: #75809a;
  background: #f0f2f6;
}

.gamma-benefit-more {
  color: #5669dd;
  font-weight: 900;
  text-decoration: none;
}

.gamma-benefit-empty {
  text-align: center;
  color: #8290ac !important;
  padding: 28px !important;
}

.gamma-benefit-pagination {
  color: #71809f;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.gamma-benefit-pagination > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-benefit-pagination a, .gamma-benefit-pagination b {
  color: #536386;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 5px;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  text-decoration: none;
  display: grid;
}

.gamma-benefit-pagination a.active {
  color: #455be3;
  background: #eef2ff;
}

.gamma-benefit-pagination a[aria-disabled="true"] {
  pointer-events: none;
  opacity: .45;
}

.gamma-benefit-pagination b {
  min-width: auto;
  font-weight: 500;
}

.gamma-benefit-side {
  align-content: start;
  gap: 10px;
  min-width: 0;
  display: grid;
}

.gamma-benefit-donut-wrap {
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  display: grid;
}

.gamma-benefit-donut {
  border-radius: 50%;
  place-items: center;
  width: 120px;
  height: 120px;
  display: grid;
}

.gamma-benefit-donut > div {
  text-align: center;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 70px;
  height: 70px;
  display: grid;
}

.gamma-benefit-donut b {
  color: #14245b;
  font-size: 20px;
}

.gamma-benefit-donut small {
  color: #7280a1;
}

.gamma-benefit-donut-wrap p {
  color: #576789;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 9px 0;
  display: grid;
}

.gamma-benefit-donut-wrap p i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.gamma-benefit-donut-wrap p b {
  color: #24345f;
}

.gamma-benefit-actions > a, .gamma-benefit-docs > a {
  color: #21315f;
  border-bottom: 1px solid #edf1f7;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-benefit-actions > a:last-child, .gamma-benefit-docs > a:last-child {
  border-bottom: 0;
}

.gamma-benefit-actions > a i, .gamma-benefit-docs > a i {
  text-align: center;
  font-style: normal;
}

.gamma-benefit-actions > a span, .gamma-benefit-docs > a span {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

.gamma-benefit-actions > a b, .gamma-benefit-docs > a b {
  text-align: right;
  color: #8390ad;
}

@media (max-width: 1180px) {
  .gamma-benefit-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamma-benefit-main {
    grid-template-columns: 1fr;
  }

  .gamma-benefit-side, .gamma-benefit-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .gamma-benefit-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .gamma-benefit-kpis, .gamma-benefit-side {
    grid-template-columns: 1fr;
  }

  .gamma-benefit-filters {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-benefit-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .gamma-benefit-tabs {
    gap: 14px;
  }
}

.gamma-benefit-audit {
  scroll-margin-top: 84px;
}

.gamma-benefit-audit > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.gamma-benefit-audit > header div {
  min-width: 0;
}

.gamma-benefit-audit > header p {
  color: #71809f;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.gamma-benefit-audit > header > a {
  color: #3f52cb;
  background: #fff;
  border: 1px solid #dce4f3;
  border-radius: 6px;
  flex: none;
  padding: 6px 10px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-benefit-audit .gamma-benefit-table-wrap table {
  min-width: 1120px;
}

.gamma-app .gamma-app-logo {
  border-radius: 12px;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  overflow: hidden;
  background: none !important;
}

.gamma-app .gamma-app-logo img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.nav-group-items a {
  align-items: center;
  gap: 8px;
  display: flex !important;
}

.nav-item-icon {
  background: #5864f214;
  border-radius: 6px;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
}

.nav-item-icon.is-logo {
  box-shadow: inset 0 0 0 1px #5864f214;
}

.nav-item-logo {
  object-fit: contain;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  display: block;
}

.mobile-nav-icon .nav-item-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.mobile-nav-icon .nav-item-logo {
  width: 20px;
  height: 20px;
}

.gamma-app img {
  pointer-events: none;
}

.gamma-salary-policy-page {
  color: #15325f;
  gap: 10px;
  display: grid;
}

.gamma-salary-policy-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 4px 2px 2px;
  display: flex;
}

.gamma-salary-policy-breadcrumb {
  color: #7183a2;
  margin-bottom: 4px;
  font-size: 10px;
}

.gamma-salary-policy-head h1 {
  color: #071a49;
  margin: 0;
  font-size: 25px;
  line-height: 1.05;
}

.gamma-salary-policy-head h1 em {
  color: #405de6;
  vertical-align: middle;
  background: #eaf0ff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-style: normal;
}

.gamma-salary-policy-head p {
  color: #607391;
  margin: 5px 0 0;
  font-size: 11px;
}

.gamma-salary-policy-head-actions {
  gap: 8px;
  padding-top: 8px;
  display: flex;
}

.gamma-salary-policy-head-actions a {
  color: #24466e;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 7px;
  padding: 9px 12px;
  font-weight: 800;
  text-decoration: none;
}

.gamma-salary-policy-head-actions a.primary {
  color: #fff;
  background: #4f46e5;
  border-color: #4f46e5;
}

.gamma-salary-policy-tabs {
  background: #fff;
  border-bottom: 1px solid #dde6f1;
  align-items: flex-end;
  gap: 28px;
  height: 42px;
  padding: 0 14px;
  display: flex;
  overflow: auto;
}

.gamma-salary-policy-tabs a, .gamma-salary-policy-tabs b {
  white-space: nowrap;
  color: #4d6283;
  align-items: center;
  height: 42px;
  text-decoration: none;
  display: flex;
}

.gamma-salary-policy-tabs b {
  color: #385ee6;
  border-bottom: 2px solid #496cf2;
}

.gamma-salary-policy-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-salary-policy-kpi {
  min-width: 0;
  color: inherit;
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 9px;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  transition: all .16s;
  display: flex;
}

.gamma-salary-policy-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px #27446f0f;
}

.gamma-salary-policy-kpi > i {
  color: #3c75ee;
  background: #edf4ff;
  border-radius: 9px;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gamma-salary-policy-kpi.alert > i {
  color: #e65858;
  background: #fff0ed;
}

.gamma-salary-policy-kpi span, .gamma-salary-policy-kpi strong, .gamma-salary-policy-kpi small, .gamma-salary-policy-kpi em {
  display: block;
}

.gamma-salary-policy-kpi span {
  color: #607391;
  margin-bottom: 5px;
}

.gamma-salary-policy-kpi strong {
  color: #081d50;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px;
  overflow: hidden;
}

.gamma-salary-policy-kpi small {
  color: #71839f;
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.35;
}

.gamma-salary-policy-kpi em {
  color: #4d5cf3;
  margin-top: 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.gamma-salary-policy-upper {
  grid-template-columns: 1.02fr 1.15fr .82fr;
  align-items: stretch;
  gap: 10px;
  display: grid;
}

.gamma-salary-policy-card {
  background: #fff;
  border: 1px solid #dee7f1;
  border-radius: 9px;
  min-width: 0;
  overflow: hidden;
}

.gamma-salary-policy-card > header {
  border-bottom: 1px solid #edf1f6;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  display: flex;
}

.gamma-salary-policy-card h2 {
  color: #10254c;
  margin: 0;
  font-size: 13px;
}

.gamma-salary-policy-card header a {
  color: #3f67d8;
  white-space: nowrap;
  font-size: 9px;
  text-decoration: none;
}

.gamma-salary-policy-donut-wrap {
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 190px;
  padding: 18px;
  display: flex;
}

.gamma-salary-policy-donut {
  border-radius: 50%;
  flex: 0 0 132px;
  place-items: center;
  width: 132px;
  height: 132px;
  display: grid;
  position: relative;
}

.gamma-salary-policy-donut:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 78px;
  height: 78px;
  position: absolute;
}

.gamma-salary-policy-donut > div {
  z-index: 1;
  text-align: center;
}

.gamma-salary-policy-donut b {
  color: #102453;
  font-size: 22px;
  display: block;
}

.gamma-salary-policy-donut small {
  color: #6e7f9a;
  font-size: 9px;
}

.gamma-salary-policy-legend {
  min-width: 150px;
}

.gamma-salary-policy-legend p {
  color: #5c718f;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 9px 0;
  display: grid;
}

.gamma-salary-policy-legend i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.gamma-salary-policy-legend b {
  color: #18325d;
}

.gamma-salary-policy-cost-bars {
  align-items: flex-end;
  gap: 10px;
  height: 190px;
  padding: 16px 16px 8px;
  display: flex;
}

.gamma-salary-policy-cost-col {
  text-align: center;
  flex: 1;
  grid-template-rows: 20px 122px 22px;
  align-items: end;
  min-width: 0;
  display: grid;
}

.gamma-salary-policy-cost-value {
  color: #31579d;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 8px;
  font-weight: 800;
  overflow: hidden;
}

.gamma-salary-policy-cost-track {
  background: #f3f6fb;
  border-radius: 4px;
  align-items: flex-end;
  height: 118px;
  display: flex;
  overflow: hidden;
}

.gamma-salary-policy-cost-track i {
  background: linear-gradient(#92b7ff, #587bef);
  border-radius: 4px 4px 0 0;
  width: 100%;
  display: block;
}

.gamma-salary-policy-cost-col span {
  color: #697b98;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 8px;
  overflow: hidden;
}

.gamma-salary-policy-empty {
  color: #8796a9;
  padding: 40px 18px;
}

.gamma-salary-policy-health {
  padding-bottom: 10px;
}

.gamma-salary-policy-metric-line {
  border-bottom: 1px solid #f0f3f7;
  grid-template-columns: minmax(0, 1fr) 80px 32px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: grid;
}

.gamma-salary-policy-metric-line > div:first-child {
  justify-content: space-between;
  gap: 8px;
  display: flex;
}

.gamma-salary-policy-metric-line span {
  color: #5d6f8c;
}

.gamma-salary-policy-metric-line b {
  color: #18335f;
}

.gamma-salary-policy-progress {
  background: #edf2fb;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.gamma-salary-policy-progress i {
  background: #6b89ec;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.gamma-salary-policy-metric-line small {
  color: #7b8da9;
  text-align: right;
}

.gamma-salary-policy-warning-box {
  background: #fbfcff;
  border: 1px solid #e6ecf6;
  border-radius: 7px;
  margin: 8px 10px 0;
  padding: 8px 10px;
}

.gamma-salary-policy-warning-box p {
  color: #627491;
  margin: 4px 0;
  line-height: 1.35;
}

.gamma-salary-policy-warning-box b {
  color: #4d66df;
  margin-right: 5px;
}

.gamma-salary-policy-lower {
  grid-template-columns: 1.08fr .92fr;
  gap: 10px;
  display: grid;
}

.gamma-salary-policy-table-wrap {
  overflow: auto;
}

.gamma-salary-policy-table-card table {
  border-collapse: collapse;
  width: 100%;
  min-width: 650px;
}

.gamma-salary-policy-table-card th {
  color: #687b97;
  text-align: left;
  background: #f8faff;
  border-bottom: 1px solid #e8edf4;
  padding: 9px 11px;
  font-weight: 600;
}

.gamma-salary-policy-table-card td {
  color: #334b70;
  border-bottom: 1px solid #edf1f5;
  padding: 9px 11px;
}

.gamma-salary-policy-table-card tr.total td {
  color: #16315c;
  background: #fbfcff;
}

.gamma-salary-policy-state {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  display: inline-flex;
}

.gamma-salary-policy-state.ok {
  color: #168357;
  background: #e6f7ee;
}

.gamma-salary-policy-state.warn {
  color: #c54b4b;
  background: #fff0ed;
}

.gamma-salary-policy-note {
  color: #607493;
  background: #eef3ff;
  border-radius: 7px;
  align-items: flex-start;
  gap: 8px;
  margin: 10px;
  padding: 10px 12px;
  display: flex;
}

.gamma-salary-policy-note b {
  color: #3f5ee2;
  white-space: nowrap;
}

.gamma-salary-policy-mini-bar {
  background: #eef2fa;
  border-radius: 999px;
  width: 120px;
  height: 7px;
  overflow: hidden;
}

.gamma-salary-policy-mini-bar i {
  background: #7897ee;
  border-radius: 999px;
  height: 100%;
  display: block;
}

@media (max-width: 1250px) {
  .gamma-salary-policy-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamma-salary-policy-upper {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-salary-policy-health {
    grid-column: 1 / -1;
  }

  .gamma-salary-policy-lower {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .gamma-salary-policy-head {
    display: grid;
  }

  .gamma-salary-policy-head-actions {
    flex-wrap: wrap;
  }

  .gamma-salary-policy-kpis, .gamma-salary-policy-upper {
    grid-template-columns: 1fr;
  }

  .gamma-salary-policy-donut-wrap {
    justify-content: flex-start;
    overflow: auto;
  }

  .gamma-salary-policy-metric-line {
    grid-template-columns: 1fr 70px 30px;
  }
}

.gamma-salary-plan-page {
  color: #10234c;
  gap: 10px;
  font-family: Helvetica, Arial, sans-serif;
  display: grid;
}

.gamma-salary-plan-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 2px 2px 0;
  display: flex;
}

.gamma-salary-plan-breadcrumb {
  color: #7181a1;
  margin-bottom: 4px;
  font-size: 10px;
}

.gamma-salary-plan-head h1 {
  color: #071a49;
  margin: 0;
  font-size: 25px;
  line-height: 1.05;
}

.gamma-salary-plan-head p {
  color: #617391;
  margin: 5px 0 0;
  font-size: 11px;
}

.gamma-salary-plan-actions {
  gap: 8px;
  padding-top: 4px;
  display: flex;
}

.gamma-salary-plan-actions span, .gamma-salary-plan-actions a {
  color: #27446b;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 7px;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.gamma-salary-plan-actions a {
  color: #fff;
  background: #5237e9;
  border-color: #5237e9;
}

.gamma-salary-plan-tabs {
  background: #fff;
  border-bottom: 1px solid #dfe6f0;
  align-items: flex-end;
  gap: 28px;
  height: 42px;
  padding: 0 14px;
  display: flex;
  overflow: auto;
}

.gamma-salary-plan-tabs a, .gamma-salary-plan-tabs b {
  color: #4d6283;
  white-space: nowrap;
  align-items: center;
  height: 42px;
  text-decoration: none;
  display: flex;
}

.gamma-salary-plan-tabs b {
  color: #355fea;
  border-bottom: 2px solid #536ff0;
}

.gamma-salary-plan-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-salary-plan-kpi {
  color: inherit;
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 9px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  display: grid;
}

.gamma-salary-plan-kpi > i {
  color: #486feb;
  background: #edf3ff;
  border-radius: 9px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 19px;
  font-style: normal;
  display: grid;
}

.gamma-salary-plan-kpi.red > i {
  color: #ed6262;
  background: #fff0ef;
}

.gamma-salary-plan-kpi.purple > i {
  color: #6651eb;
  background: #f0edff;
}

.gamma-salary-plan-kpi span, .gamma-salary-plan-kpi strong, .gamma-salary-plan-kpi small {
  display: block;
}

.gamma-salary-plan-kpi span {
  color: #5f718e;
  margin-bottom: 5px;
}

.gamma-salary-plan-kpi strong {
  color: #071c4c;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 19px;
  overflow: hidden;
}

.gamma-salary-plan-kpi small {
  color: #6f819d;
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.4;
}

.gamma-salary-plan-kpi-progress {
  background: #edf1fa;
  border-radius: 999px;
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
}

.gamma-salary-plan-kpi-progress em {
  background: #5b78ef;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.gamma-salary-plan-middle {
  grid-template-columns: 1.45fr .9fr;
  gap: 10px;
  display: grid;
}

.gamma-salary-plan-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 9px;
  min-width: 0;
  overflow: hidden;
}

.gamma-salary-plan-card > header {
  border-bottom: 1px solid #edf1f6;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 13px;
  display: flex;
}

.gamma-salary-plan-card > header h2 {
  color: #10254c;
  margin: 0;
  font-size: 13px;
}

.gamma-salary-plan-card > header span, .gamma-salary-plan-card > header a {
  color: #4967c7;
  font-size: 9px;
  text-decoration: none;
}

.gamma-salary-plan-bars {
  align-items: flex-end;
  gap: 13px;
  height: 205px;
  padding: 18px 20px 8px;
  display: flex;
}

.gamma-salary-plan-bar-col {
  text-align: center;
  flex: 1;
  min-width: 0;
}

.gamma-salary-plan-bar-col .bar-stack {
  border-bottom: 1px solid #dbe3ee;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 145px;
  display: flex;
}

.gamma-salary-plan-bar-col .bar-stack i {
  border-radius: 4px 4px 0 0;
  width: 32%;
  min-width: 10px;
  display: block;
}

.gamma-salary-plan-bar-col .bar-stack i.plan {
  background: #7793f4;
}

.gamma-salary-plan-bar-col .bar-stack i.actual {
  background: #58c8a1;
}

.gamma-salary-plan-bar-col b {
  color: #455c7f;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 7px;
  font-size: 8px;
  display: block;
  overflow: hidden;
}

.gamma-salary-plan-bar-col small {
  color: #7a89a1;
  margin-top: 3px;
  font-size: 8px;
  display: block;
}

.gamma-salary-plan-chart-legend {
  color: #677996;
  justify-content: center;
  gap: 18px;
  padding: 8px 12px 12px;
  font-size: 9px;
  display: flex;
}

.gamma-salary-plan-chart-legend span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-salary-plan-chart-legend i {
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

.gamma-salary-plan-chart-legend i.plan {
  background: #7793f4;
}

.gamma-salary-plan-chart-legend i.actual {
  background: #58c8a1;
}

.gamma-salary-plan-donut-body {
  justify-content: center;
  align-items: center;
  gap: 22px;
  min-height: 225px;
  padding: 16px;
  display: flex;
}

.gamma-salary-plan-donut {
  border-radius: 50%;
  flex: 0 0 150px;
  place-items: center;
  width: 150px;
  height: 150px;
  display: grid;
  position: relative;
}

.gamma-salary-plan-donut:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 86px;
  height: 86px;
  position: absolute;
}

.gamma-salary-plan-donut > div {
  z-index: 1;
  text-align: center;
  position: relative;
}

.gamma-salary-plan-donut strong {
  color: #122957;
  font-size: 20px;
  display: block;
}

.gamma-salary-plan-donut small {
  color: #75859c;
  font-size: 8px;
}

.gamma-salary-plan-donut-legend {
  min-width: 160px;
}

.gamma-salary-plan-donut-legend p {
  color: #5e718d;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  display: grid;
}

.gamma-salary-plan-donut-legend p i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.gamma-salary-plan-donut-legend p b {
  color: #17305d;
}

.gamma-salary-plan-dept-table > header > div:first-child p {
  color: #71819b;
  margin: 4px 0 0;
  font-size: 9px;
}

.gamma-salary-plan-dept-table > header > div:last-child {
  gap: 7px;
  display: flex;
}

.gamma-salary-plan-dept-table > header > div:last-child span, .gamma-salary-plan-dept-table > header > div:last-child a {
  color: #4b6283;
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 6px;
  padding: 6px 9px;
  text-decoration: none;
}

.gamma-salary-plan-table-wrap {
  overflow: auto;
}

.gamma-salary-plan-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 850px;
}

.gamma-salary-plan-table-wrap th {
  color: #687a96;
  text-align: left;
  background: #f8faff;
  border-bottom: 1px solid #e7edf5;
  padding: 9px 10px;
  font-weight: 600;
}

.gamma-salary-plan-table-wrap td {
  color: #314a70;
  border-bottom: 1px solid #eef2f6;
  padding: 9px 10px;
}

.gamma-salary-plan-table-wrap td:first-child b, .gamma-salary-plan-table-wrap td:first-child small {
  display: block;
}

.gamma-salary-plan-table-wrap td:first-child small {
  color: #8795a8;
  margin-top: 3px;
}

.gamma-salary-plan-table-wrap td.negative {
  color: #dd5151;
}

.gamma-salary-plan-table-wrap td.positive {
  color: #239369;
}

.gamma-salary-plan-table-wrap tr.total td {
  color: #132c59;
  background: #fbfcff;
}

.gamma-salary-plan-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  display: inline-flex;
}

.gamma-salary-plan-status.ok {
  color: #178252;
  background: #e3f7ec;
}

.gamma-salary-plan-status.warn {
  color: #a47300;
  background: #fff5d8;
}

.gamma-salary-plan-status.bad {
  color: #c94a4a;
  background: #ffe8e8;
}

.gamma-salary-plan-bottom {
  grid-template-columns: 1.15fr .8fr .8fr;
  gap: 10px;
  display: grid;
}

.gamma-salary-plan-line-wrap {
  padding: 12px 14px;
}

.gamma-salary-plan-line-wrap svg {
  width: 100%;
  height: 150px;
  overflow: visible;
}

.gamma-salary-plan-line-wrap .axis {
  stroke: #dbe3ee;
  stroke-width: 1px;
}

.gamma-salary-plan-line-wrap .plan-line {
  fill: none;
  stroke: #516cf0;
  stroke-width: 2.2px;
  stroke-dasharray: 4 3;
}

.gamma-salary-plan-line-wrap .actual-line {
  fill: none;
  stroke: #38b985;
  stroke-width: 2.4px;
}

.gamma-salary-plan-line-wrap .actual-dot {
  fill: #38b985;
}

.gamma-salary-plan-months {
  color: #8390a4;
  text-align: center;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  font-size: 7px;
  display: grid;
  overflow: hidden;
}

.gamma-salary-plan-policy-list > a, .gamma-salary-plan-alert-row {
  color: #263f64;
  border-bottom: 1px solid #edf1f5;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-salary-plan-policy-list > a > i {
  color: #526bec;
  background: #eef3ff;
  border-radius: 6px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-style: normal;
  display: grid;
}

.gamma-salary-plan-policy-list > a b, .gamma-salary-plan-policy-list > a small, .gamma-salary-plan-alert-row b, .gamma-salary-plan-alert-row small {
  display: block;
}

.gamma-salary-plan-policy-list > a small, .gamma-salary-plan-alert-row small {
  color: #7c8a9f;
  margin-top: 3px;
  font-size: 8px;
}

.gamma-salary-plan-policy-list > a > span, .gamma-salary-plan-alert-row > span {
  color: #8a98aa;
}

.gamma-salary-plan-alert-row > i {
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  font-style: normal;
  display: grid;
}

.gamma-salary-plan-alert-row > i.ok {
  color: #168458;
  background: #e7f7ed;
}

.gamma-salary-plan-alert-row > i.warn {
  color: #a26f00;
  background: #fff2d7;
}

.gamma-salary-plan-alert-row > i.bad {
  color: #c54848;
  background: #ffe7e7;
}

.gamma-salary-plan-alert-row > i.info {
  color: #4b68d7;
  background: #eaf1ff;
}

.gamma-salary-plan-empty {
  color: #8190a5;
  padding: 35px 18px;
}

@media (max-width: 1250px) {
  .gamma-salary-plan-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamma-salary-plan-middle {
    grid-template-columns: 1fr;
  }

  .gamma-salary-plan-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-salary-plan-line-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .gamma-salary-plan-head {
    display: grid;
  }

  .gamma-salary-plan-actions {
    flex-wrap: wrap;
  }

  .gamma-salary-plan-kpis, .gamma-salary-plan-bottom {
    grid-template-columns: 1fr;
  }

  .gamma-salary-plan-line-card {
    grid-column: auto;
  }

  .gamma-salary-plan-donut-body {
    justify-content: flex-start;
    overflow: auto;
  }

  .gamma-salary-plan-bars {
    overflow: auto;
  }

  .gamma-salary-plan-bar-col {
    min-width: 75px;
  }
}

.gamma-discipline-page {
  color: #10234c;
  gap: 10px;
  font-family: Helvetica, Arial, sans-serif;
  display: grid;
}

.gamma-discipline-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 2px;
  display: flex;
}

.gamma-discipline-breadcrumb {
  color: #7181a1;
  margin-bottom: 4px;
  font-size: 10px;
}

.gamma-discipline-head h1 {
  color: #071a49;
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
}

.gamma-discipline-head p {
  color: #617391;
  margin: 5px 0 0;
  font-size: 11px;
}

.gamma-discipline-primary {
  color: #fff;
  background: #5a35e8;
  border-radius: 7px;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.gamma-discipline-tabs {
  background: #fff;
  border-bottom: 1px solid #dfe6f0;
  align-items: flex-end;
  gap: 30px;
  height: 42px;
  padding: 0 14px;
  display: flex;
  overflow: auto;
}

.gamma-discipline-tabs a, .gamma-discipline-tabs b {
  color: #4d6283;
  white-space: nowrap;
  align-items: center;
  height: 42px;
  text-decoration: none;
  display: flex;
}

.gamma-discipline-tabs b {
  color: #355fea;
  border-bottom: 2px solid #536ff0;
}

.gamma-discipline-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-discipline-kpi {
  color: inherit;
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 9px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 13px;
  text-decoration: none;
  display: grid;
}

.gamma-discipline-kpi > i {
  color: #526ef0;
  background: #edf3ff;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-style: normal;
  display: grid;
}

.gamma-discipline-kpi.purple > i {
  color: #6a50e8;
  background: #f1edff;
}

.gamma-discipline-kpi.yellow > i {
  color: #ba8900;
  background: #fff7dc;
}

.gamma-discipline-kpi.green > i {
  color: #21915d;
  background: #e8f8ef;
}

.gamma-discipline-kpi span, .gamma-discipline-kpi strong, .gamma-discipline-kpi small {
  display: block;
}

.gamma-discipline-kpi span {
  color: #657693;
  margin-bottom: 3px;
}

.gamma-discipline-kpi strong {
  color: #0d2453;
  font-size: 20px;
}

.gamma-discipline-kpi small {
  color: #7d8aa0;
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.35;
}

.gamma-discipline-kpi-progress {
  background: #edf1f8;
  border-radius: 999px;
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
}

.gamma-discipline-kpi-progress em {
  background: #536df0;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.gamma-discipline-kpi.yellow .gamma-discipline-kpi-progress em {
  background: #e8bf33;
}

.gamma-discipline-kpi.green .gamma-discipline-kpi-progress em {
  background: #34bb7b;
}

.gamma-discipline-overview {
  grid-template-columns: 1.45fr .9fr .9fr;
  gap: 10px;
  display: grid;
}

.gamma-discipline-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 9px;
  min-width: 0;
  overflow: hidden;
}

.gamma-discipline-card > header {
  border-bottom: 1px solid #edf1f6;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 13px;
  display: flex;
}

.gamma-discipline-card > header h2 {
  color: #10254c;
  margin: 0;
  font-size: 13px;
}

.gamma-discipline-card > header p {
  color: #7b8aa0;
  margin: 3px 0 0;
  font-size: 8px;
}

.gamma-discipline-card > header span, .gamma-discipline-card > header a {
  color: #4967c7;
  font-size: 9px;
  text-decoration: none;
}

.gamma-discipline-bars {
  align-items: flex-end;
  gap: 12px;
  height: 205px;
  padding: 18px 18px 8px;
  display: flex;
}

.gamma-discipline-bar {
  text-align: center;
  flex: 1;
  min-width: 0;
}

.gamma-discipline-bar > b {
  color: #263b72;
  margin-bottom: 4px;
  font-size: 9px;
  display: block;
}

.gamma-discipline-bar > div {
  border-bottom: 1px solid #dbe3ee;
  justify-content: center;
  align-items: flex-end;
  height: 145px;
  display: flex;
}

.gamma-discipline-bar > div i {
  background: linear-gradient(#7f9df7, #6686ea);
  border-radius: 4px 4px 0 0;
  width: 44%;
  min-width: 18px;
  display: block;
}

.gamma-discipline-bar > span {
  color: #536987;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 7px;
  font-size: 8px;
  display: block;
  overflow: hidden;
}

.gamma-discipline-donut-wrap {
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 225px;
  padding: 14px;
  display: flex;
}

.gamma-discipline-donut {
  border-radius: 50%;
  flex: 0 0 142px;
  place-items: center;
  width: 142px;
  height: 142px;
  display: grid;
  position: relative;
}

.gamma-discipline-donut:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 82px;
  height: 82px;
  position: absolute;
}

.gamma-discipline-donut > div {
  z-index: 1;
  text-align: center;
  position: relative;
}

.gamma-discipline-donut strong {
  font-size: 19px;
  display: block;
}

.gamma-discipline-donut small {
  color: #77869b;
  font-size: 8px;
}

.gamma-discipline-donut-legend p {
  color: #5f718d;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  font-size: 9px;
  display: grid;
}

.gamma-discipline-donut-legend p i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.gamma-discipline-donut-legend p b {
  color: #17305d;
}

.gamma-discipline-alerts {
  display: grid;
}

.gamma-discipline-alerts > a {
  color: #284064;
  border-bottom: 1px solid #edf1f5;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-discipline-alerts > a:last-child {
  border-bottom: 0;
}

.gamma-discipline-alerts i {
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  font-style: normal;
  display: grid;
}

.gamma-discipline-alerts i.red {
  color: #cc4c4c;
  background: #ffe7e7;
}

.gamma-discipline-alerts i.orange {
  color: #d77823;
  background: #fff0dc;
}

.gamma-discipline-alerts i.yellow {
  color: #b88700;
  background: #fff6d9;
}

.gamma-discipline-alerts i.purple {
  color: #7650d7;
  background: #f1ebff;
}

.gamma-discipline-alerts b, .gamma-discipline-alerts small {
  display: block;
}

.gamma-discipline-alerts b {
  font-size: 9px;
}

.gamma-discipline-alerts small {
  color: #7c8a9d;
  margin-top: 3px;
  font-size: 8px;
}

.gamma-discipline-alerts > a > span {
  color: #8491a3;
}

.gamma-discipline-filter {
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, .7fr)) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.gamma-discipline-filter label {
  color: #71829c;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  display: flex;
}

.gamma-discipline-filter input, .gamma-discipline-filter select {
  color: #455d7f;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  height: 34px;
}

.gamma-discipline-filter select {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 7px;
  padding: 0 9px;
}

.gamma-discipline-filter button {
  color: #415a7e;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 7px;
  height: 36px;
  padding: 0 14px;
  font-weight: 700;
}

.gamma-discipline-table-wrap {
  overflow: auto;
}

.gamma-discipline-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1050px;
}

.gamma-discipline-table-wrap th {
  color: #6b7d98;
  text-align: left;
  background: #f8faff;
  border-bottom: 1px solid #e7edf5;
  padding: 8px 9px;
  font-weight: 600;
}

.gamma-discipline-table-wrap td {
  color: #314a70;
  vertical-align: top;
  border-bottom: 1px solid #eef2f6;
  padding: 8px 9px;
}

.gamma-discipline-table-wrap td b, .gamma-discipline-table-wrap td small {
  display: block;
}

.gamma-discipline-table-wrap td small {
  color: #8794a7;
  text-overflow: ellipsis;
  max-width: 190px;
  margin-top: 3px;
  font-size: 8px;
  overflow: hidden;
}

.gamma-discipline-table-wrap td:last-child a {
  color: #435fd1;
  font-weight: 700;
  text-decoration: none;
}

.gamma-discipline-pill {
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 8px;
  display: inline-flex;
}

.gamma-discipline-pill.ok {
  color: #178252;
  background: #e4f7ec;
}

.gamma-discipline-pill.warn {
  color: #9c6d00;
  background: #fff4d7;
}

.gamma-discipline-pill.bad {
  color: #c44848;
  background: #ffe7e7;
}

.gamma-discipline-pill.info {
  color: #4867d6;
  background: #e8efff;
}

.gamma-discipline-pill.muted {
  color: #68798f;
  background: #eef1f5;
}

.gamma-discipline-empty {
  text-align: center;
  color: #8795a8 !important;
  padding: 30px !important;
}

.gamma-discipline-pagination {
  color: #7787a0;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  display: flex;
}

.gamma-discipline-pagination > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-discipline-pagination a, .gamma-discipline-pagination > div > span {
  color: #4d6284;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 6px;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  text-decoration: none;
  display: grid;
}

.gamma-discipline-pagination a.active {
  color: #435fda;
  background: #edf2ff;
}

.gamma-discipline-pagination a.disabled {
  pointer-events: none;
  opacity: .4;
}

.gamma-discipline-bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-discipline-links {
  display: grid;
}

.gamma-discipline-links > a {
  color: #30496e;
  border-bottom: 1px solid #edf1f5;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  text-decoration: none;
  display: grid;
}

.gamma-discipline-links > a:last-child {
  border-bottom: 0;
}

.gamma-discipline-links > a > span b, .gamma-discipline-links > a > span small {
  display: block;
}

.gamma-discipline-links > a > span b {
  font-size: 9px;
}

.gamma-discipline-links > a > span small {
  color: #8491a5;
  margin-top: 3px;
  font-size: 8px;
}

.gamma-discipline-links > a > em {
  color: #8a97aa;
  font-style: normal;
}

@media (max-width: 1280px) {
  .gamma-discipline-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gamma-discipline-overview {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-discipline-urgent {
    grid-column: 1 / -1;
  }

  .gamma-discipline-filter {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .gamma-discipline-filter label {
    grid-column: 1 / -1;
  }

  .gamma-discipline-bottom {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .gamma-discipline-head {
    display: grid;
  }

  .gamma-discipline-tabs {
    gap: 18px;
  }

  .gamma-discipline-kpis, .gamma-discipline-overview, .gamma-discipline-bottom {
    grid-template-columns: 1fr;
  }

  .gamma-discipline-urgent {
    grid-column: auto;
  }

  .gamma-discipline-filter {
    grid-template-columns: 1fr;
  }

  .gamma-discipline-filter label {
    grid-column: auto;
  }

  .gamma-discipline-bars {
    overflow: auto;
  }

  .gamma-discipline-bar {
    min-width: 70px;
  }

  .gamma-discipline-donut-wrap {
    justify-content: flex-start;
    overflow: auto;
  }
}

.gamma-record-page, .gamma-record-detail {
  color: #102650;
}

.gamma-record-head, .gamma-record-detail-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.gamma-record-head h1, .gamma-record-detail-head h1 {
  color: #071c4a;
  margin: 3px 0 2px;
  font-size: 28px;
}

.gamma-record-head p, .gamma-record-detail-head p {
  color: #687b98;
  margin: 3px 0;
}

.gamma-record-breadcrumb {
  color: #7688a1;
  font-size: 11px;
}

.gamma-record-breadcrumb a {
  color: #637c9f;
  text-decoration: none;
}

.gamma-record-primary, .gamma-record-actions .primary {
  background: linear-gradient(135deg, #6554e8, #7627ed);
  border-radius: 7px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
  color: #fff !important;
}

.gamma-record-tabs, .gamma-record-detail-tabs {
  border-bottom: 1px solid #dbe5f1;
  gap: 24px;
  min-height: 38px;
  margin: 12px 0 14px;
  display: flex;
}

.gamma-record-tabs a, .gamma-record-tabs b, .gamma-record-detail-tabs a {
  color: #4c6384;
  align-items: center;
  padding: 0 4px;
  text-decoration: none;
  display: flex;
}

.gamma-record-tabs b, .gamma-record-detail-tabs a:first-child {
  color: #315bea;
  border-bottom: 2px solid #315bea;
}

.gamma-record-filter {
  grid-template-columns: minmax(260px, 1.5fr) minmax(180px, .6fr) minmax(180px, .6fr) auto;
  gap: 9px;
  margin-bottom: 10px;
  display: grid;
}

.gamma-record-filter label {
  background: #fff;
  border: 1px solid #d9e4f1;
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  display: flex;
}

.gamma-record-filter input, .gamma-record-filter select, .gamma-record-filter button {
  color: #23456e;
  background: #fff;
  border: 1px solid #d9e4f1;
  border-radius: 7px;
  min-height: 38px;
  padding: 0 10px;
}

.gamma-record-filter label input {
  border: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
}

.gamma-record-filter button {
  color: #315bea;
  font-weight: 800;
}

.gamma-record-card, .gamma-record-detail-card {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  overflow: hidden;
}

.gamma-record-card > header, .gamma-record-card-head {
  border-bottom: 1px solid #e5ebf3;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  display: flex;
}

.gamma-record-card h2, .gamma-record-detail-card h2 {
  color: #10265a;
  margin: 0;
  font-size: 14px;
}

.gamma-record-card header p {
  color: #7889a1;
  margin: 3px 0 0;
}

.gamma-record-table-wrap {
  overflow: auto;
}

.gamma-record-table-wrap table {
  border-collapse: collapse;
  width: 100%;
}

.gamma-record-table-wrap th, .gamma-record-table-wrap td {
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e8eef5;
  padding: 10px 12px;
}

.gamma-record-table-wrap th {
  color: #6b7f9e;
  background: #f7f9fd;
  font-size: 10px;
}

.gamma-record-table-wrap td b, .gamma-record-table-wrap td small {
  display: block;
}

.gamma-record-table-wrap td small {
  color: #8090a7;
  margin-top: 3px;
}

.gamma-record-table-wrap td a {
  color: #235bd5;
  text-decoration: none;
}

.gamma-record-pill {
  color: #5e6f85;
  background: #eef2f7;
  border-radius: 999px;
  align-items: center;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.gamma-record-pill.notice, .gamma-record-pill.active {
  color: #118354;
  background: #e5f7ee;
}

.gamma-record-pill.warning, .gamma-record-pill.pending {
  color: #a56d00;
  background: #fff0cf;
}

.gamma-record-pill.serious, .gamma-record-pill.final {
  color: #cb3131;
  background: #ffe5e5;
}

.gamma-record-pill.expired, .gamma-record-pill.cancelled {
  color: #6f7b8a;
  background: #edf0f4;
}

.gamma-record-detail-link {
  font-weight: 800;
}

.gamma-record-empty {
  color: #8090a6;
  text-align: center !important;
  padding: 24px !important;
}

.gamma-record-pagination {
  color: #6f819b;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.gamma-record-pagination > div {
  align-items: center;
  gap: 7px;
  display: flex;
}

.gamma-record-pagination a {
  color: #345a8c;
  border: 1px solid #dce6f2;
  border-radius: 6px;
  place-items: center;
  min-width: 30px;
  height: 30px;
  text-decoration: none;
  display: grid;
}

.gamma-record-pagination a.disabled {
  pointer-events: none;
  opacity: .35;
}

.gamma-record-title {
  align-items: center;
  gap: 10px;
  display: flex;
}

.gamma-record-detail-head small {
  color: #7689a3;
}

.gamma-record-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-record-actions .secondary, .gamma-record-outline {
  background: #fff;
  border: 1px solid #d5e1ef;
  border-radius: 7px;
  padding: 9px 12px;
  font-weight: 800;
  text-decoration: none;
  color: #214c86 !important;
}

.gamma-record-detail-grid {
  gap: 10px;
  display: grid;
}

.gamma-record-detail-grid.top {
  grid-template-columns: 1fr 1.25fr .85fr;
}

.gamma-record-detail-grid.lower {
  grid-template-columns: 1.1fr 1fr;
  margin-top: 10px;
}

.gamma-record-detail-card {
  padding: 14px;
}

.gamma-record-detail-card > h2 {
  margin-bottom: 12px;
}

.gamma-record-employee {
  grid-template-columns: 68px 1fr;
  align-items: start;
  gap: 13px;
  display: grid;
}

.gamma-record-employee .avatar {
  color: #365bd6;
  background: #e8efff;
  border-radius: 50%;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 24px;
  font-weight: 900;
  display: grid;
}

.gamma-record-employee h3 {
  margin: 2px 0 3px;
  font-size: 15px;
}

.gamma-record-employee p {
  color: #6c7e99;
  margin: 4px 0;
}

.gamma-record-employee small {
  color: #536d91;
  margin-top: 5px;
  display: block;
}

.gamma-record-employee .tags {
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
  display: flex;
}

.gamma-record-employee .tags span {
  color: #5d6f91;
  background: #f0f3fb;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
}

.gamma-record-outline {
  margin-top: 12px;
  display: inline-flex;
}

.gamma-record-dl {
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin: 0;
  display: grid;
}

.gamma-record-dl > div {
  grid-template-columns: 115px 1fr;
  gap: 8px;
  padding: 6px 0;
  display: grid;
}

.gamma-record-dl dt {
  color: #7586a0;
}

.gamma-record-dl dd {
  color: #243b62;
  margin: 0;
  font-weight: 700;
}

.gamma-record-dl.wide .span {
  grid-column: 1 / -1;
}

.gamma-record-side-stack {
  gap: 10px;
  display: grid;
}

.gamma-record-summary, .gamma-record-guidance {
  border-radius: 8px;
  padding: 14px;
}

.gamma-record-summary {
  background: #fff1f1;
  border: 1px solid #f6d7d7;
}

.gamma-record-summary h2 {
  color: #bd3030;
}

.gamma-record-guidance {
  background: #f3f0ff;
  border: 1px solid #ded6ff;
}

.gamma-record-guidance h2 {
  color: #5538c7;
}

.gamma-record-summary h2, .gamma-record-guidance h2 {
  margin: 0 0 9px;
  font-size: 13px;
}

.gamma-record-summary p, .gamma-record-guidance ul {
  color: #526780;
  margin: 0;
  line-height: 1.6;
}

.gamma-record-guidance ul {
  padding-left: 18px;
}

.gamma-record-card-head {
  margin-bottom: 8px;
  padding: 0 0 10px;
}

.gamma-record-card-head a {
  color: #315be8;
  font-weight: 800;
  text-decoration: none;
}

.gamma-record-file {
  border: 1px solid #e4eaf2;
  border-radius: 7px;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.gamma-record-file i {
  color: #cc3434;
  background: #fbe5e5;
  border-radius: 6px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.gamma-record-file b, .gamma-record-file small {
  display: block;
}

.gamma-record-file small {
  color: #8190a6;
  margin-top: 3px;
}

.gamma-record-file a {
  color: #315be8;
  font-size: 18px;
  text-decoration: none;
}

.gamma-record-emptybox {
  text-align: center;
  color: #7f8fa5;
  border: 1px dashed #d7e1ee;
  border-radius: 7px;
  padding: 20px;
}

.gamma-record-impact {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.gamma-record-impact > div {
  background: #f9fbff;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  padding: 12px;
}

.gamma-record-impact span, .gamma-record-impact strong, .gamma-record-impact small {
  display: block;
}

.gamma-record-impact strong {
  margin: 4px 0;
  font-size: 20px;
}

.gamma-record-impact small {
  color: #8091a8;
}

.gamma-record-detail-card.process, .gamma-record-detail-card.history {
  grid-column: 1 / -1;
}

.gamma-record-steps {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 20px 0 14px;
  display: grid;
}

.gamma-record-steps > div {
  text-align: center;
  padding-top: 32px;
  position: relative;
}

.gamma-record-steps > div:before {
  content: "";
  background: #d6deea;
  height: 2px;
  position: absolute;
  top: 13px;
  left: -50%;
  right: 50%;
}

.gamma-record-steps > div:first-child:before {
  display: none;
}

.gamma-record-steps i {
  color: #70839e;
  background: #fff;
  border: 2px solid #aab8cc;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  font-style: normal;
  display: grid;
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
}

.gamma-record-steps .done:before {
  background: #27b779;
}

.gamma-record-steps .done i {
  color: #fff;
  background: #27b779;
  border-color: #27b779;
}

.gamma-record-steps .active i {
  color: #fff;
  background: #6652e9;
  border-color: #6652e9;
}

.gamma-record-steps b, .gamma-record-steps small {
  display: block;
}

.gamma-record-steps small {
  color: #8090a6;
  margin-top: 3px;
}

.gamma-record-process-note {
  color: #566b8d;
  background: #f0f3ff;
  border-radius: 7px;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.gamma-record-history {
  display: grid;
}

.gamma-record-history > div {
  border-bottom: 1px solid #edf1f6;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  padding: 9px 0;
  display: grid;
}

.gamma-record-history p, .gamma-record-history small {
  color: #788ba5;
  margin: 3px 0;
}

.gamma-record-history i {
  color: #5e55e6;
}

@media (max-width: 1150px) {
  .gamma-record-detail-grid.top, .gamma-record-detail-grid.lower {
    grid-template-columns: 1fr;
  }

  .gamma-record-detail-card.process, .gamma-record-detail-card.history {
    grid-column: auto;
  }

  .gamma-record-filter {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-record-detail-head {
    display: grid;
  }

  .gamma-record-actions {
    flex-wrap: wrap;
  }

  .gamma-record-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .gamma-record-steps > div:before {
    display: none;
  }
}

.gamma-org-page {
  gap: 14px;
  display: grid;
}

.gamma-org-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.gamma-org-head h1 {
  color: #17145f;
  margin: 3px 0 4px;
  font-size: 28px;
}

.gamma-org-head p {
  color: #6973a0;
  margin: 0;
}

.gamma-org-breadcrumb {
  color: #6c74a0;
  font-size: 11px;
  font-weight: 700;
}

.gamma-org-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.gamma-org-actions a {
  color: #26316c;
  background: #fff;
  border: 1px solid #dce3f2;
  border-radius: 8px;
  padding: 10px 13px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-org-actions a.primary {
  color: #fff;
  background: #6338ed;
  border-color: #6338ed;
}

.gamma-org-tabs {
  border-bottom: 1px solid #dfe5f1;
  gap: 26px;
  padding: 0 8px;
  display: flex;
}

.gamma-org-tabs > * {
  color: #5e6793;
  padding: 12px 0;
  text-decoration: none;
}

.gamma-org-tabs b {
  color: #4c44e6;
  border-bottom: 2px solid #5b55f5;
}

.gamma-org-toolbar {
  background: #fff;
  border: 1px solid #e0e5ef;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px;
  display: flex;
}

.gamma-org-toolbar form {
  border: 1px solid #dde4f1;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-width: 360px;
  padding: 0 10px;
  display: flex;
}

.gamma-org-toolbar input {
  border: 0;
  outline: 0;
  flex: 1;
  min-height: 36px;
}

.gamma-org-toolbar form button {
  color: #5a61d8;
  background: none;
  border: 0;
}

.gamma-org-toolbar > span {
  color: #59628d;
  border: 1px solid #dde4f1;
  border-radius: 7px;
  margin-left: auto;
  padding: 9px 12px;
}

.gamma-org-zoom {
  border: 1px solid #dde4f1;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.gamma-org-zoom > * {
  color: #445080;
  background: #fff;
  border: 0;
  border-right: 1px solid #e3e7f0;
  padding: 9px 12px;
}

.gamma-org-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.gamma-org-canvas {
  background: linear-gradient(#fff, #fbfcff);
  border: 1px solid #e1e6f0;
  border-radius: 12px;
  min-height: 610px;
  padding: 28px 18px 16px;
  overflow: auto;
}

.gamma-org-root-card {
  background: #fff;
  border: 1px solid #dfe5f0;
  border-radius: 10px;
  grid-template-columns: 42px 1fr 26px;
  align-items: center;
  gap: 10px;
  width: 220px;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  box-shadow: 0 4px 16px #29376e14;
}

.gamma-org-root-card strong, .gamma-org-root-card span {
  display: block;
}

.gamma-org-root-card span {
  color: #67739b;
  font-size: 10px;
}

.gamma-org-root-card em {
  text-align: center;
  color: #5048e5;
  background: #eef1ff;
  border-radius: 6px;
  padding: 4px;
  font-style: normal;
}

.gamma-org-avatar {
  color: #4a48db;
  background: #e8edff;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  font-weight: 800;
  display: grid;
}

.gamma-org-avatar.small {
  width: 36px;
  height: 36px;
}

.gamma-org-line.vertical {
  background: #cbd3e6;
  width: 1px;
  height: 34px;
  margin: 0 auto;
}

.gamma-org-line.vertical.short {
  height: 28px;
}

.gamma-org-tree-stage {
  width: var(--org-stage-width);
  min-width: var(--org-stage-width);
  margin: 0 auto;
  position: relative;
}

.gamma-org-dept-row {
  width: max-content;
  min-width: max-content;
  margin-left: var(--org-dept-start);
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.gamma-org-dept-branch {
  flex-direction: column;
  flex: 0 0 128px;
  align-items: center;
  width: 128px;
  display: flex;
  position: relative;
}

.gamma-org-dept-branch.active {
  z-index: 2;
}

.gamma-org-child-tree {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: 0;
  display: flex;
  position: relative;
}

.gamma-org-parent-stem {
  left: var(--org-parent-x);
  background: #cbd3e6;
  flex: 0 0 28px;
  width: 1px;
  height: 28px;
  position: relative;
  transform: translateX(-.5px);
}

.gamma-org-child-group {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.gamma-org-child-bus {
  top: 0;
  left: var(--org-bus-left);
  right: var(--org-bus-right);
  background: #cbd3e6;
  height: 1px;
  position: absolute;
}

.gamma-org-team-row {
  width: max-content;
  min-width: max-content;
  margin-left: var(--org-team-start);
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.gamma-org-team-branch {
  flex-direction: column;
  flex: 0 0 145px;
  align-items: center;
  width: 145px;
  display: flex;
  position: relative;
}

.gamma-org-child-stem {
  background: #cbd3e6;
  flex: 0 0 24px;
  width: 1px;
  height: 24px;
}

.gamma-org-dept-card {
  text-align: center;
  color: #26316a;
  background: #fff;
  border: 1px solid #e0e5ef;
  border-radius: 9px;
  justify-items: center;
  gap: 5px;
  width: 128px;
  min-height: 92px;
  padding: 12px 10px;
  text-decoration: none;
  display: grid;
}

.gamma-org-dept-card.active {
  border: 2px solid #5d59ff;
  box-shadow: 0 8px 22px #5350e61f;
}

.gamma-org-dept-card i {
  color: #5b63ef;
  font-size: 20px;
  font-style: normal;
}

.gamma-org-dept-card b {
  color: #4f50d8;
  background: #eff1ff;
  border-radius: 5px;
  padding: 2px 7px;
}

.gamma-org-dept-card small {
  color: #7a84a6;
  font-size: 9px;
}

.gamma-org-team-row {
  flex-wrap: nowrap;
}

.gamma-org-team-card {
  color: #29346d;
  text-align: center;
  background: #fff;
  border: 1px solid #e1e6ef;
  border-radius: 9px;
  justify-items: center;
  gap: 4px;
  width: 145px;
  padding: 11px;
  text-decoration: none;
  display: grid;
}

.gamma-org-team-card span {
  color: #6f789b;
  font-size: 10px;
}

.gamma-org-team-card b {
  background: #f2f4ff;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 9px;
}

.gamma-org-empty {
  color: #7d86a3;
  padding: 20px;
}

.gamma-org-legend {
  color: #727b9c;
  border-top: 1px solid #e6eaf2;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 14px;
  display: flex;
}

.gamma-org-legend span {
  align-items: center;
  gap: 6px;
  display: flex;
}

.gamma-org-legend i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.gamma-org-legend .blue {
  background: #5a6bf2;
}

.gamma-org-legend .green {
  background: #66cf9b;
}

.gamma-org-legend .yellow {
  background: #e7bd38;
}

.gamma-org-legend .gray {
  background: #9ba4b5;
}

.gamma-org-side {
  gap: 12px;
  display: grid;
}

.gamma-org-card {
  background: #fff;
  border: 1px solid #e1e6f0;
  border-radius: 11px;
  overflow: hidden;
}

.gamma-org-card > header {
  border-bottom: 1px solid #edf0f6;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.gamma-org-card > header > div {
  grid-template-columns: 34px 1fr;
  column-gap: 8px;
  display: grid;
}

.gamma-org-card > header i {
  color: #564ee5;
  background: #eef0ff;
  border-radius: 8px;
  grid-row: 1 / 3;
  place-items: center;
  width: 32px;
  height: 32px;
  font-style: normal;
  display: grid;
}

.gamma-org-card h2 {
  color: #222861;
  margin: 0;
  font-size: 15px;
}

.gamma-org-card header small {
  color: #78809c;
}

.gamma-org-card header a {
  color: #4650cf;
  text-decoration: none;
}

.gamma-org-card > nav {
  color: #737b9d;
  border-bottom: 1px solid #edf0f6;
  gap: 16px;
  padding: 10px 14px;
  display: flex;
}

.gamma-org-card > nav b {
  color: #534ee1;
  border-bottom: 2px solid #5b56ed;
  padding-bottom: 7px;
}

.gamma-org-card dl {
  grid-template-columns: 110px 1fr;
  gap: 10px;
  margin: 0;
  padding: 14px;
  display: grid;
}

.gamma-org-card dt {
  color: #7a829f;
}

.gamma-org-card dd {
  color: #35406d;
  margin: 0;
}

.gamma-org-people-list {
  display: grid;
}

.gamma-org-people-list > a {
  color: #2a3567;
  border-bottom: 1px solid #eff2f7;
  grid-template-columns: 30px 1fr 18px;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  text-decoration: none;
  display: grid;
}

.gamma-org-people-list i {
  background: #eef1ff;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-style: normal;
  display: grid;
}

.gamma-org-people-list span b, .gamma-org-people-list span small {
  display: block;
}

.gamma-org-people-list span small {
  color: #7f87a2;
  font-size: 9px;
}

.gamma-org-stats > div {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.gamma-org-stats span {
  color: #70799a;
  background: #f8f9fd;
  border-radius: 8px;
  padding: 11px;
}

.gamma-org-stats span b {
  color: #313d72;
  margin-top: 5px;
  font-size: 17px;
  display: block;
}

@media (max-width: 1100px) {
  .gamma-org-grid {
    grid-template-columns: 1fr;
  }

  .gamma-org-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamma-org-head {
    display: grid;
  }

  .gamma-org-toolbar {
    flex-wrap: wrap;
  }

  .gamma-org-toolbar form {
    flex: 280px;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .gamma-org-side {
    grid-template-columns: 1fr;
  }

  .gamma-org-actions, .gamma-org-tabs {
    flex-wrap: nowrap;
    overflow: auto;
  }

  .gamma-org-grid {
    display: block;
  }

  .gamma-org-side {
    margin-top: 12px;
  }
}

.gamma-org-tree-stage {
  margin-inline: auto;
}

.gamma-org-dept-row {
  justify-content: center;
}

.gamma-org-team-row {
  position: relative;
}

.gamma-chat-page {
  gap: 14px;
  display: grid;
}

.gamma-chat-page-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.gamma-chat-page-head h1 {
  color: #17145f;
  align-items: center;
  gap: 10px;
  margin: 3px 0 4px;
  font-size: 28px;
  display: flex;
}

.gamma-chat-title-logo {
  object-fit: contain;
  border-radius: 9px;
  width: 34px;
  height: 34px;
}

.gamma-chat-page-head h1 em {
  color: #5c42db;
  vertical-align: middle;
  background: #ece9ff;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-style: normal;
}

.gamma-chat-page-head p {
  color: #6f779a;
  margin: 0;
}

.gamma-chat-breadcrumb {
  color: #6c74a0;
  font-size: 11px;
  font-weight: 700;
}

.gamma-chat-head-actions {
  gap: 8px;
  display: flex;
}

.gamma-chat-head-actions a {
  color: #26316c;
  background: #fff;
  border: 1px solid #dce3f2;
  border-radius: 8px;
  padding: 10px 13px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-chat-head-actions a.primary {
  color: #fff;
  background: #6338ed;
  border-color: #6338ed;
}

.gamma-chat-shell {
  background: #fff;
  border: 1px solid #dfe4ef;
  border-radius: 14px;
  grid-template-columns: 238px minmax(460px, 1fr) 286px;
  min-height: 690px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 8px 30px #2a2d5a0a;
}

.gamma-chat-sidebar {
  background: #f6f4fb;
  border-right: 1px solid #e4e1ec;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.gamma-chat-sidebar > header {
  border-bottom: 1px solid #e4e1ec;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding: 0 14px;
  display: flex;
}

.gamma-chat-sidebar-brand {
  align-items: center;
  gap: 9px;
  display: flex;
}

.gamma-chat-sidebar-brand > img {
  object-fit: contain;
  border-radius: 8px;
  width: 28px;
  height: 28px;
}

.gamma-chat-sidebar > header strong, .gamma-chat-sidebar > header small {
  display: block;
}

.gamma-chat-sidebar > header small {
  color: #80799a;
  font-size: 9px;
}

.gamma-chat-sidebar button {
  color: #686080;
  background: none;
  border: 0;
}

.gamma-chat-sidebar-search {
  color: #8a83a2;
  background: #fff;
  border: 1px solid #dfdbea;
  border-radius: 8px;
  margin: 10px 12px;
  padding: 9px 10px;
}

.gamma-chat-sidebar nav {
  padding: 0 8px 8px;
  display: grid;
}

.gamma-chat-sidebar nav a {
  color: #403c5d;
  border-radius: 7px;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 8px;
  text-decoration: none;
  display: grid;
}

.gamma-chat-sidebar nav a.active, .gamma-chat-sidebar nav a:hover {
  color: #4c2ed0;
  background: #e9e4f8;
}

.gamma-chat-sidebar nav a i {
  text-align: center;
  font-style: normal;
}

.gamma-chat-sidebar nav a b {
  color: #fff;
  background: #6842e8;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
}

.gamma-chat-sidebar section {
  padding: 8px 10px;
}

.gamma-chat-sidebar section > header {
  color: #5f5877;
  justify-content: space-between;
  align-items: center;
  padding: 5px 4px;
  display: flex;
}

.gamma-chat-channel-list, .gamma-chat-dm-list {
  display: grid;
}

.gamma-chat-channel-list a, .gamma-chat-dm-list a {
  color: #554f70;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 8px;
  text-decoration: none;
  display: flex;
}

.gamma-chat-channel-list a.active {
  color: #fff;
  background: #6945e7;
}

.gamma-chat-channel-list a span {
  font-weight: 900;
}

.gamma-chat-dm-list a {
  position: relative;
}

.gamma-chat-dm-list i {
  background: #e3def8;
  border-radius: 7px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  display: grid;
}

.gamma-chat-dm-list em {
  background: #bbb5c9;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-left: auto;
}

.gamma-chat-dm-list em.online {
  background: #2fbd7e;
}

.gamma-chat-sidebar > footer {
  background: #f1eef7;
  border-top: 1px solid #e3dfea;
  grid-template-columns: 32px 1fr 24px;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 12px;
  display: grid;
}

.gamma-chat-sidebar > footer strong, .gamma-chat-sidebar > footer small {
  display: block;
}

.gamma-chat-sidebar > footer small {
  color: #6d6682;
  font-size: 9px;
}

.gamma-chat-self-avatar {
  color: #fff;
  background: #5d45df;
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 800;
  display: grid;
}

.gamma-chat-conversation {
  background: #fff;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.gamma-chat-conversation-head {
  border-bottom: 1px solid #e7e9f0;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 16px;
  display: flex;
}

.gamma-chat-conversation-head h2 {
  color: #24245d;
  margin: 0;
}

.gamma-chat-conversation-head p {
  color: #8a91a8;
  margin: 2px 0 0;
  font-size: 9px;
}

.gamma-chat-head-tools {
  color: #68718f;
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-chat-head-tools button {
  color: #59617e;
  background: #fff;
  border: 1px solid #e1e5ef;
  border-radius: 7px;
  width: 30px;
  height: 30px;
}

.gamma-chat-member-stack {
  display: flex;
}

.gamma-chat-member-stack i {
  color: #4f43b8;
  background: #ece9ff;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-left: -5px;
  font-size: 8px;
  font-style: normal;
  display: grid;
}

.gamma-chat-day {
  color: #8189a1;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 4px;
  display: flex;
}

.gamma-chat-day:before, .gamma-chat-day:after {
  content: "";
  background: #eceef4;
  flex: 1;
  height: 1px;
}

.gamma-chat-day span {
  border: 1px solid #e5e8f0;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 700;
}

.gamma-chat-messages {
  flex: 1;
  gap: 5px;
  padding: 6px 18px;
  display: grid;
  overflow: auto;
}

.gamma-chat-messages article {
  border-radius: 8px;
  grid-template-columns: 36px 1fr;
  gap: 9px;
  padding: 9px 8px;
  display: grid;
}

.gamma-chat-messages article:hover {
  background: #fafaff;
}

.gamma-chat-msg-avatar {
  color: #503ad0;
  background: #e9e6ff;
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.gamma-chat-msg-avatar.purple {
  color: #7c43cb;
  background: #f0e5ff;
}

.gamma-chat-msg-avatar.green {
  color: #18875d;
  background: #dff7ec;
}

.gamma-chat-msg-avatar.mine {
  color: #336bc0;
  background: #e5efff;
}

.gamma-chat-messages article header {
  align-items: baseline;
  gap: 7px;
  display: flex;
}

.gamma-chat-messages article time {
  color: #989fb2;
  font-size: 9px;
}

.gamma-chat-messages article p {
  color: #363d62;
  margin: 4px 0 0;
  line-height: 1.5;
}

.gamma-chat-messages mark {
  color: #5a3fd0;
  background: #eeeaff;
  border-radius: 4px;
  padding: 1px 3px;
}

.gamma-chat-reactions {
  gap: 5px;
  margin-top: 7px;
  display: flex;
}

.gamma-chat-reactions button {
  color: #5c6480;
  background: #fff;
  border: 1px solid #e2e5ef;
  border-radius: 999px;
  padding: 3px 7px;
}

.gamma-chat-file {
  border: 1px solid #e1e5ef;
  border-radius: 8px;
  grid-template-columns: 32px 1fr 26px;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  margin-top: 8px;
  padding: 9px;
  display: grid;
}

.gamma-chat-file > span {
  background: #e8efff;
  border-radius: 7px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.gamma-chat-file b, .gamma-chat-file small {
  display: block;
}

.gamma-chat-file small {
  color: #8a91a7;
  font-size: 9px;
}

.gamma-chat-file button {
  background: none;
  border: 0;
}

.gamma-chat-thread-link {
  color: #553fd0;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
}

.gamma-chat-typing {
  color: #878ea5;
  padding: 3px 20px 5px;
  font-size: 9px;
}

.gamma-chat-typing span {
  color: #5442c4;
  background: #ece9ff;
  border-radius: 50%;
  place-items: center;
  width: 18px;
  height: 18px;
  display: inline-grid;
}

.gamma-chat-composer {
  background: #fff;
  border: 1px solid #cfd5e5;
  border-radius: 10px;
  margin: 0 16px 16px;
  overflow: hidden;
}

.gamma-chat-format {
  color: #6c748f;
  background: #fafbfe;
  border-bottom: 1px solid #edf0f5;
  padding: 7px 10px;
}

.gamma-chat-composer textarea {
  resize: none;
  width: 100%;
  min-height: 58px;
  font: inherit;
  border: 0;
  outline: none;
  padding: 10px 12px;
}

.gamma-chat-composer footer {
  justify-content: space-between;
  padding: 7px 9px;
  display: flex;
}

.gamma-chat-composer button {
  color: #656d88;
  background: none;
  border: 0;
}

.gamma-chat-composer .send {
  color: #fff;
  background: #5e43dc;
  border-radius: 6px;
  padding: 6px 11px;
}

.gamma-chat-detail {
  background: #fbfbfe;
  border-left: 1px solid #e7e9f0;
  overflow: auto;
}

.gamma-chat-detail > header {
  border-bottom: 1px solid #e6e8ef;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding: 0 14px;
  display: flex;
}

.gamma-chat-detail > header h3 {
  margin: 0;
}

.gamma-chat-detail button {
  background: none;
  border: 0;
}

.gamma-chat-channel-info {
  text-align: center;
  border-bottom: 1px solid #e8eaf1;
  padding: 18px 14px;
}

.gamma-chat-hash {
  color: #5a40dc;
  background: #ece8ff;
  border-radius: 12px;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  font-size: 20px;
  font-weight: 900;
  display: grid;
}

.gamma-chat-channel-info h2 {
  color: #27285d;
  margin: 0;
}

.gamma-chat-channel-info p {
  color: #8289a0;
}

.gamma-chat-channel-info > div:last-child {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  display: grid;
}

.gamma-chat-channel-info button {
  color: #626a87;
  background: #fff;
  border: 1px solid #e2e5ee;
  border-radius: 8px;
  justify-items: center;
  gap: 4px;
  padding: 9px 4px;
  display: grid;
}

.gamma-chat-channel-info button span {
  font-size: 8px;
}

.gamma-chat-detail details {
  border-bottom: 1px solid #e7e9f0;
}

.gamma-chat-detail summary {
  color: #444b70;
  justify-content: space-between;
  padding: 12px 14px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.gamma-chat-member-list, .gamma-chat-pins, .gamma-chat-files {
  padding: 0 10px 10px;
}

.gamma-chat-member-list a {
  color: #46506e;
  grid-template-columns: 28px 1fr 16px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  text-decoration: none;
  display: grid;
}

.gamma-chat-member-list i {
  background: #ece9ff;
  border-radius: 7px;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 8px;
  font-style: normal;
  display: grid;
}

.gamma-chat-member-list > a:last-child {
  color: #5c43d2;
  padding-left: 8px;
  display: block;
}

.gamma-chat-pins p {
  background: #fff;
  border-radius: 7px;
  margin: 0;
  padding: 8px;
}

.gamma-chat-pins b, .gamma-chat-pins small {
  display: block;
}

.gamma-chat-pins small {
  color: #8d94a8;
  margin-top: 3px;
}

.gamma-chat-files a {
  color: #4d5574;
  gap: 7px;
  padding: 7px;
  text-decoration: none;
  display: flex;
}

.gamma-chat-files span, .gamma-chat-files small {
  display: block;
}

.gamma-chat-files small {
  color: #9097aa;
  font-size: 8px;
}

@media (max-width: 1250px) {
  .gamma-chat-shell {
    grid-template-columns: 220px minmax(430px, 1fr);
  }

  .gamma-chat-detail {
    display: none;
  }
}

@media (max-width: 900px) {
  .gamma-chat-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .gamma-chat-sidebar {
    display: none;
  }

  .gamma-chat-page-head {
    display: grid;
  }

  .gamma-chat-head-actions {
    flex-wrap: wrap;
  }
}

.gamma-leaflet-pin-host svg {
  display: block;
  overflow: visible;
}

.gamma-location-edit-link {
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d7e3f1;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  min-width: 46px;
  height: 28px;
  padding: 0 10px;
  font-weight: 800;
  display: inline-flex;
  color: #245ca6 !important;
  text-decoration: none !important;
}

.gamma-location-edit-link:hover {
  background: #edf5ff;
  border-color: #a9c8ee;
}

.gamma-location-edit-backdrop {
  z-index: 180;
  background: #0918336b;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: auto;
}

.gamma-location-edit-modal {
  background: #fff;
  border: 1px solid #d7e2ef;
  border-radius: 16px;
  width: min(820px, 96vw);
  max-height: calc(100vh - 48px);
  padding: 20px;
  overflow: auto;
  box-shadow: 0 28px 90px #0c224447;
}

.gamma-location-edit-modal > header {
  border-bottom: 1px solid #e7edf5;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  display: flex;
}

.gamma-location-edit-modal > header small {
  color: #6a22e6;
  margin-bottom: 3px;
  font-weight: 800;
  display: block;
}

.gamma-location-edit-modal > header h2 {
  color: #0a2254;
  margin: 0;
  font-size: 20px;
}

.gamma-location-edit-modal > header p {
  color: #6c809c;
  margin: 5px 0 0;
}

.gamma-location-edit-close {
  color: #49627f;
  background: #fff;
  border: 1px solid #d9e3ef;
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  display: grid;
}

.gamma-location-edit-modal select {
  color: #385273;
  background: #fff;
  border: 1px solid #cddbeb;
  border-radius: 7px;
  height: 40px;
  padding: 0 10px;
}

.gamma-location-edit-checks {
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  display: flex;
}

.gamma-location-edit-modal footer {
  border-top: 1px solid #e7edf5;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
}

.gamma-location-edit-modal footer button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #176fe8, #6b22f5);
  border: 0;
  border-radius: 7px;
  padding: 10px 16px;
  font-weight: 800;
}

.gamma-location-edit-cancel {
  color: #48617e;
  border: 1px solid #d7e2ee;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.gamma-location-delete-form {
  border-top: 1px dashed #ead8d8;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
}

.gamma-location-delete-form button {
  color: #ba4141;
  cursor: pointer;
  background: #fff3f3;
  border: 1px solid #ffd0d0;
  border-radius: 7px;
  padding: 8px 12px;
  font-weight: 800;
}

@media (max-width: 700px) {
  .gamma-location-edit-backdrop {
    padding: 10px;
  }

  .gamma-location-edit-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
  }

  .gamma-location-edit-checks {
    gap: 4px;
    display: grid;
  }

  .gamma-location-edit-modal footer {
    background: #fff;
    padding-bottom: 2px;
    position: sticky;
    bottom: -20px;
  }
}

.training-material-upload .training-upload-file-info {
  background: #f8fafc;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 11px;
  font-size: 11px;
  display: flex;
}

.training-material-upload .training-upload-file-info span {
  color: #64748b;
  overflow-wrap: anywhere;
}

.training-storage-status {
  background: #f8fafc;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 11px;
  display: flex;
}

.training-storage-status strong {
  flex: 1;
  font-weight: 700;
}

.training-storage-status.is-ready {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.training-storage-status.is-error {
  color: #991b1b;
  background: #fff1f2;
  border-color: #fecaca;
}

.training-storage-status.is-checking {
  color: #475569;
}

.training-material-upload .notice-success, .training-material-upload .notice-error {
  z-index: 2;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  position: sticky;
  bottom: 8px;
}

.training-material-upload .notice-success {
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.training-material-upload .notice-error {
  color: #991b1b;
  background: #fff1f2;
  border: 1px solid #fecaca;
}

.training-manage-modal {
  max-width: min(1380px, 100vw - 28px);
  height: min(92vh, 920px);
}

.compliance-manage-main {
  scroll-behavior: smooth;
  padding: 18px 22px 28px;
}

.compliance-manage-section {
  scroll-margin-top: 14px;
  display: block;
}

.compliance-manage-section + .compliance-manage-section {
  border-top: 1px solid #edf1f7;
  margin-top: 18px;
  padding-top: 4px;
}

.compliance-manage-title {
  border-bottom: 1px solid #e7ecf4;
  margin: 0 0 12px;
  padding: 0 0 14px;
}

.training-manage-modal .section-gap {
  margin-top: 14px;
}

.training-manage-modal .card {
  box-shadow: none;
}

.training-manage-modal .table-wrap {
  max-height: 330px;
  overflow: auto;
}

@media (max-width: 980px) {
  .training-manage-modal {
    max-width: calc(100vw - 14px);
    height: 94vh;
  }

  .training-manage-modal .shift-modal-layout {
    grid-template-columns: 1fr;
  }

  .training-manage-modal .shift-modal-nav {
    border-bottom: 1px solid #e7ecf4;
    border-right: 0;
    display: flex;
    overflow-x: auto;
  }

  .training-manage-modal .shift-modal-nav a {
    min-width: 190px;
  }
}

.training-upload-feedback {
  color: #334155;
  background: #f8fafc;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  display: flex;
}

.training-upload-feedback > span {
  color: #4f46e5;
  background: #eef2ff;
  border-radius: 50%;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-weight: 700;
  display: grid;
}

.training-upload-feedback.is-success {
  color: #166534;
  background: #f0fdf4;
  border-color: #b7e4c7;
}

.training-upload-feedback.is-success > span {
  color: #15803d;
  background: #dcfce7;
}

.training-upload-feedback.is-error {
  color: #991b1b;
  background: #fff1f2;
  border-color: #fecaca;
}

.training-upload-feedback.is-error > span {
  color: #b91c1c;
  background: #fee2e2;
}

.gamma-decisions-page {
  color: #17205b;
  gap: 16px;
  display: grid;
}

.gamma-decisions-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.gamma-decisions-breadcrumb {
  color: #6d78a5;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
}

.gamma-decisions-head h1 {
  color: #100563;
  margin: 0 0 4px;
  font-size: 30px;
}

.gamma-decisions-head p {
  color: #66709b;
  margin: 0;
}

.gamma-decisions-actions {
  gap: 9px;
  display: flex;
}

.gamma-decisions-actions a {
  color: #273266;
  background: #fff;
  border: 1px solid #d8def0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
}

.gamma-decisions-actions .primary {
  color: #fff;
  background: #6417e8;
  border-color: #6417e8;
}

.gamma-decisions-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.gamma-decisions-kpi {
  background: #fff;
  border: 1px solid #e0e5f2;
  border-radius: 10px;
  gap: 12px;
  min-height: 104px;
  padding: 15px;
  display: flex;
}

.gamma-decisions-kpi > i {
  color: #5468ef;
  background: #edf1ff;
  border-radius: 9px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.gamma-decisions-kpi div {
  align-content: start;
  display: grid;
}

.gamma-decisions-kpi span {
  color: #6e789d;
  font-size: 12px;
}

.gamma-decisions-kpi strong {
  color: #15125e;
  font-size: 25px;
  line-height: 1.2;
}

.gamma-decisions-kpi small {
  color: #7b84a5;
  font-size: 11px;
}

.gamma-decisions-kpi.purple > i {
  color: #7a3fe3;
  background: #f2ebff;
}

.gamma-decisions-kpi.yellow > i {
  color: #d5a500;
  background: #fff8dc;
}

.gamma-decisions-kpi.green > i {
  color: #22a873;
  background: #eafaf3;
}

.gamma-decisions-kpi.red > i {
  color: #e45963;
  background: #fff0f1;
}

.gamma-decisions-kpi.slate > i {
  color: #667085;
  background: #f0f2f7;
}

.gamma-decisions-filter {
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, .7fr)) auto;
  gap: 10px;
  display: grid;
}

.gamma-decisions-filter label {
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-decisions-filter label, .gamma-decisions-filter select, .gamma-decisions-filter button {
  background: #fff;
  border: 1px solid #dde3ef;
  border-radius: 7px;
  min-height: 40px;
  padding: 0 11px;
}

.gamma-decisions-filter input {
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
}

.gamma-decisions-filter button {
  color: #26316a;
  font-weight: 700;
}

.gamma-decisions-main {
  grid-template-columns: minmax(0, 1fr) 350px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.gamma-decisions-card, .gamma-decisions-detail {
  background: #fff;
  border: 1px solid #dfe4f0;
  border-radius: 10px;
  overflow: hidden;
}

.gamma-decisions-card > header, .gamma-decisions-detail > header {
  border-bottom: 1px solid #e6e9f2;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  display: flex;
}

.gamma-decisions-card h2, .gamma-decisions-detail h2 {
  color: #11165b;
  margin: 0;
  font-size: 15px;
}

.gamma-decisions-card header p, .gamma-decisions-detail header p {
  color: #7c85a4;
  margin: 4px 0 0;
  font-size: 11px;
}

.gamma-decisions-detail header > a {
  color: #5c29e8;
  font-size: 11px;
  font-weight: 700;
}

.gamma-decisions-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.gamma-decisions-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1050px;
  font-size: 11px;
}

.gamma-decisions-table-wrap th {
  color: #7b84a3;
  text-align: left;
  background: #fbfcff;
  border-bottom: 1px solid #e7eaf2;
  padding: 9px 10px;
  font-weight: 700;
}

.gamma-decisions-table-wrap td {
  vertical-align: top;
  color: #283166;
  border-bottom: 1px solid #edf0f6;
  padding: 10px;
}

.gamma-decisions-table-wrap tr.selected td {
  background: #f5f2ff;
}

.gamma-decisions-table-wrap td b {
  color: #21285f;
  display: block;
}

.gamma-decisions-table-wrap td small {
  color: #8a92aa;
  margin-top: 3px;
  display: block;
}

.gamma-decision-type, .gamma-decision-status {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.gamma-decision-type.purple {
  color: #6f39d7;
  background: #f0eaff;
}

.gamma-decision-type.yellow {
  color: #a97c00;
  background: #fff6d8;
}

.gamma-decision-type.green {
  color: #17845b;
  background: #e7f8f0;
}

.gamma-decision-type.red {
  color: #c43d4b;
  background: #fdebec;
}

.gamma-decision-type.slate {
  color: #596579;
  background: #eef1f5;
}

.gamma-decision-type.blue {
  color: #3e5bd8;
  background: #eaf0ff;
}

.gamma-decision-status.ok {
  color: #1f855e;
  background: #e6f8ef;
}

.gamma-decision-status.pending {
  color: #9a7300;
  background: #fff4d4;
}

.gamma-decision-status.draft {
  color: #8c6a00;
  background: #fff7df;
}

.gamma-decision-status.bad {
  color: #bb3141;
  background: #fde9e9;
}

.gamma-decision-status.muted {
  color: #687386;
  background: #eef1f5;
}

.gamma-decisions-pagination {
  color: #7a839f;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  font-size: 11px;
  display: flex;
}

.gamma-decisions-pagination > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-decisions-pagination a {
  color: #40508d;
  border: 1px solid #dce2ef;
  border-radius: 6px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.gamma-decisions-pagination a.active {
  color: #4f61e9;
  background: #edf1ff;
}

.gamma-decisions-pagination a.disabled {
  pointer-events: none;
  opacity: .4;
}

.gamma-decisions-detail nav {
  border-bottom: 1px solid #e6e9f2;
  gap: 16px;
  padding: 10px 14px;
  font-size: 11px;
  display: flex;
  overflow: auto;
}

.gamma-decisions-detail nav b {
  color: #5d28de;
  border-bottom: 2px solid #5d28de;
  padding-bottom: 8px;
}

.gamma-decisions-detail dl {
  grid-template-columns: 105px 1fr;
  gap: 10px 8px;
  margin: 0;
  padding: 14px;
  font-size: 11px;
  display: grid;
}

.gamma-decisions-detail dt {
  color: #7a83a0;
}

.gamma-decisions-detail dd {
  color: #2f3769;
  margin: 0;
}

.gamma-decisions-detail dd small {
  color: #8891aa;
  margin-top: 2px;
  display: block;
}

.gamma-decisions-detail section {
  background: #f8f9fd;
  border-radius: 8px;
  margin: 0 14px 14px;
  padding: 12px;
}

.gamma-decisions-detail section h3 {
  margin: 0 0 6px;
  font-size: 12px;
}

.gamma-decisions-detail section p {
  color: #636d90;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.gamma-decisions-related {
  border-top: 1px solid #e6e9f2;
}

.gamma-decisions-related a {
  color: #30396c;
  border-bottom: 1px solid #eef0f6;
  justify-content: space-between;
  padding: 11px 14px;
  font-size: 11px;
  display: flex;
}

.gamma-decisions-bottom {
  grid-template-columns: 1.15fr 1fr .75fr;
  gap: 14px;
  display: grid;
}

.gamma-decisions-bars {
  justify-content: space-around;
  align-items: flex-end;
  height: 190px;
  padding: 24px 16px 12px;
  display: flex;
}

.gamma-decisions-bars > div {
  text-align: center;
  grid-template-rows: auto 120px auto;
  gap: 5px;
  width: 14%;
  display: grid;
}

.gamma-decisions-bars b {
  font-size: 12px;
}

.gamma-decisions-bars i {
  border-bottom: 1px solid #dfe4ef;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.gamma-decisions-bars em {
  background: linear-gradient(#7b7df5, #5367ec);
  border-radius: 4px 4px 0 0;
  width: 28px;
  display: block;
}

.gamma-decisions-bars span {
  color: #687291;
  font-size: 10px;
  line-height: 1.2;
}

.gamma-decisions-donut-wrap {
  grid-template-columns: 155px 1fr;
  align-items: center;
  gap: 15px;
  padding: 20px;
  display: grid;
}

.gamma-decisions-donut {
  border-radius: 50%;
  place-items: center;
  width: 145px;
  height: 145px;
  display: grid;
}

.gamma-decisions-donut > div {
  background: #fff;
  border-radius: 50%;
  align-content: center;
  place-items: center;
  width: 88px;
  height: 88px;
  display: grid;
}

.gamma-decisions-donut b {
  font-size: 22px;
}

.gamma-decisions-donut small {
  color: #8189a3;
  font-size: 10px;
}

.gamma-decisions-donut-wrap > div:last-child p {
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  font-size: 10px;
  display: grid;
}

.gamma-decisions-donut-wrap p i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.gamma-decisions-source {
  padding-bottom: 6px;
}

.gamma-decisions-source > a {
  color: #30396c;
  border-bottom: 1px solid #edf0f5;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 11px;
  display: flex;
}

.gamma-decisions-empty {
  text-align: center;
  color: #8a92aa;
  padding: 30px !important;
}

@media (max-width: 1300px) {
  .gamma-decisions-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .gamma-decisions-main {
    grid-template-columns: 1fr;
  }

  .gamma-decisions-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-decisions-detail {
    order: -1;
  }
}

@media (max-width: 800px) {
  .gamma-decisions-head {
    display: grid;
  }

  .gamma-decisions-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-decisions-filter, .gamma-decisions-bottom {
    grid-template-columns: 1fr;
  }

  .gamma-decisions-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.training-pdfjs-player {
  gap: 10px;
  display: grid;
}

.training-pdf-toolbar {
  background: #f8fafc;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  grid-template-columns: 42px minmax(160px, 1fr) auto 42px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: grid;
}

.training-pdf-toolbar > button, .training-pdf-zoom button {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8dfeb;
  border-radius: 8px;
  height: 34px;
}

.training-pdf-toolbar > button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.training-pdf-toolbar label {
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.training-pdf-toolbar input {
  text-align: center;
  width: 62px;
  height: 32px;
  padding: 4px 7px;
}

.training-pdf-zoom {
  align-items: center;
  gap: 6px;
  display: flex;
}

.training-pdf-zoom button {
  width: 34px;
}

.training-pdf-zoom span {
  text-align: center;
  min-width: 48px;
  font-size: 11px;
}

.training-pdf-canvas-wrap {
  background: #e8ebf0;
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  justify-content: center;
  align-items: flex-start;
  min-height: 520px;
  max-height: 72vh;
  padding: 16px;
  display: flex;
  position: relative;
  overflow: auto;
}

.training-pdf-canvas-wrap canvas {
  background: #fff;
  display: block;
  box-shadow: 0 2px 10px #0f172a1f;
}

.training-pdf-state {
  z-index: 2;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.training-pdf-state.is-error {
  color: #a22626;
  background: #fff6f6;
  border-color: #f0bcbc;
}

.training-pdf-progress {
  background: #fff;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
  gap: 6px;
  padding: 10px 12px;
  display: grid;
}

.training-pdf-progress > div {
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.training-pdf-progress progress {
  accent-color: #5b5ff0;
  width: 100%;
  height: 8px;
}

.training-pdf-progress small {
  color: #667085;
}

.training-auto-meta {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
}

@media (max-width: 700px) {
  .training-pdf-toolbar {
    grid-template-columns: 40px 1fr 40px;
  }

  .training-pdf-zoom {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .training-pdf-canvas-wrap {
    min-height: 56vh;
    padding: 8px;
  }
}

.gamma-training-report {
  color: #11145c;
  padding: 4px 0 28px;
}

.gamma-training-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 14px;
  display: flex;
}

.gamma-training-breadcrumb {
  color: #6c78a5;
  margin-bottom: 7px;
  font-size: 12px;
}

.gamma-training-head h1 {
  color: #11105e;
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.05;
}

.gamma-training-head p {
  color: #68739d;
  margin: 0;
  font-size: 13px;
}

.gamma-training-export {
  color: #18205f;
  background: #fff;
  border: 1px solid #d6dcef;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-training-tabs {
  border-bottom: 1px solid #dfe4f1;
  align-items: flex-end;
  gap: 34px;
  min-height: 42px;
  display: flex;
}

.gamma-training-tabs a, .gamma-training-tabs b {
  color: #424a83;
  white-space: nowrap;
  padding: 0 5px 12px;
  font-size: 13px;
  text-decoration: none;
}

.gamma-training-tabs b {
  color: #5b38f5;
  border-bottom: 3px solid #633cff;
}

.gamma-training-filters {
  background: #fff;
  border: 1px solid #e0e5f2;
  border-radius: 10px;
  grid-template-columns: 1.15fr 1.15fr 1.15fr 1.15fr 1.15fr auto auto;
  align-items: end;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 14px;
  display: grid;
}

.gamma-training-filters label {
  gap: 5px;
  display: grid;
}

.gamma-training-filters label span {
  color: #58628d;
  font-size: 11px;
}

.gamma-training-filters select {
  color: #26306b;
  background: #fff;
  border: 1px solid #dce2ef;
  border-radius: 7px;
  height: 38px;
  padding: 0 10px;
}

.gamma-training-filters button, .gamma-training-filters > a {
  border-radius: 7px;
  place-items: center;
  height: 38px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: grid;
}

.gamma-training-filters button {
  color: #fff;
  background: #6c2bf2;
  border: 0;
}

.gamma-training-filters > a {
  color: #606999;
}

.gamma-training-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
  display: grid;
}

.gamma-training-kpi {
  color: inherit;
  background: #fff;
  border: 1px solid #e1e5f1;
  border-radius: 10px;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 14px;
  text-decoration: none;
  display: flex;
}

.gamma-training-kpi > i {
  color: #633cff;
  background: #f0edff;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gamma-training-kpi > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.gamma-training-kpi small {
  color: #6e789c;
  font-size: 11px;
}

.gamma-training-kpi strong {
  color: #11105e;
  font-size: 23px;
}

.gamma-training-kpi em {
  color: #7b84a4;
  font-size: 10px;
  font-style: normal;
}

.gamma-training-kpi.is-alert > i {
  color: #dc4d58;
  background: #fff0f0;
}

.gamma-training-kpi.is-alert strong {
  color: #c83d49;
}

.gamma-training-grid {
  grid-template-columns: 1.25fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  display: grid;
}

.gamma-training-card {
  background: #fff;
  border: 1px solid #e0e5f1;
  border-radius: 10px;
  min-width: 0;
  padding: 14px;
}

.gamma-training-card header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex;
}

.gamma-training-card h2 {
  color: #202568;
  margin: 0;
  font-size: 14px;
}

.gamma-training-card header a, .gamma-training-card header span {
  color: #6c43e7;
  font-size: 11px;
  text-decoration: none;
}

.gamma-training-chart {
  border-bottom: 1px solid #dfe4ef;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 7px;
  height: 190px;
  padding: 10px 6px 0;
  display: grid;
}

.gamma-training-month {
  text-align: center;
  grid-template-rows: 150px 18px 15px;
  min-width: 0;
  display: grid;
}

.gamma-training-month .bars {
  justify-content: center;
  align-items: flex-end;
  height: 150px;
  display: flex;
  position: relative;
}

.gamma-training-month .bars i {
  background: linear-gradient(#7664ff, #5f4ee8);
  border-radius: 3px 3px 0 0;
  width: 22px;
  min-height: 2px;
}

.gamma-training-month .bars em {
  background: #28157f;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 0 2px #fff;
}

.gamma-training-month b {
  color: #65709a;
  font-size: 10px;
}

.gamma-training-month small {
  color: #98a1bb;
  font-size: 9px;
}

.gamma-training-trend footer {
  color: #69749e;
  justify-content: center;
  gap: 25px;
  padding-top: 10px;
  font-size: 10px;
  display: flex;
}

.gamma-training-trend footer i {
  background: #6453f5;
  border-radius: 2px;
  width: 10px;
  height: 7px;
  margin-right: 5px;
  display: inline-block;
}

.gamma-training-trend footer i.line {
  background: #28157f;
  height: 2px;
}

.gamma-training-deps {
  gap: 15px;
  padding: 3px 4px;
  display: grid;
}

.gamma-training-deps > div {
  grid-template-columns: 130px 1fr 40px 42px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  display: grid;
}

.gamma-training-deps b {
  color: #4c5681;
  font-weight: 600;
}

.gamma-training-deps span {
  background: #f0f1f7;
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}

.gamma-training-deps span i {
  background: linear-gradient(90deg, #7354f4, #7587f5);
  border-radius: 10px;
  height: 100%;
  display: block;
}

.gamma-training-deps strong {
  color: #5e6690;
  font-size: 11px;
}

.gamma-training-deps em {
  color: #555e8b;
  font-style: normal;
}

.gamma-training-bottom {
  grid-template-columns: 1.15fr 1fr;
}

.gamma-training-card table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}

.gamma-training-card th {
  color: #7a83a3;
  text-align: left;
  background: #fafbfe;
  border-bottom: 1px solid #e7eaf3;
  padding: 8px;
  font-weight: 500;
}

.gamma-training-card td {
  color: #394274;
  border-bottom: 1px solid #edf0f6;
  padding: 9px 8px;
}

.gamma-training-card tbody tr:last-child td {
  border-bottom: 0;
}

.gamma-training-empty {
  color: #8a93ad;
  text-align: center;
  padding: 22px;
  font-size: 12px;
}

.gamma-function-note {
  color: #737c9c;
  background: #f6f7fb;
  border: 1px solid #e2e6f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
}

@media (max-width: 1200px) {
  .gamma-training-kpis, .gamma-training-filters {
    grid-template-columns: repeat(3, 1fr);
  }

  .gamma-training-grid, .gamma-training-bottom {
    grid-template-columns: 1fr;
  }

  .gamma-training-tabs {
    overflow-x: auto;
  }
}

@media (max-width: 800px) {
  .gamma-training-kpis, .gamma-training-filters {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-training-head {
    flex-direction: column;
  }

  .gamma-training-chart {
    grid-template-columns: repeat(12, 50px);
    overflow-x: auto;
  }
}

.gamma-course-catalog {
  color: #11145c;
  padding: 4px 0 30px;
}

.gamma-course-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 14px;
  display: flex;
}

.gamma-course-head h1 {
  color: #11105e;
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.05;
}

.gamma-course-head p {
  color: #68739d;
  margin: 0;
  font-size: 13px;
}

.gamma-course-create {
  color: #fff;
  background: linear-gradient(135deg, #722cf1, #5a22d8);
  border-radius: 8px;
  padding: 11px 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px #672ce233;
}

.gamma-course-tabs {
  border-bottom: 1px solid #dfe4f1;
  gap: 28px;
  margin-bottom: 12px;
  display: flex;
}

.gamma-course-tabs a {
  color: #495184;
  white-space: nowrap;
  padding: 0 8px 12px;
  font-size: 13px;
  text-decoration: none;
}

.gamma-course-tabs a.is-active {
  color: #5e35ef;
  border-bottom: 3px solid #6840f4;
  font-weight: 700;
}

.gamma-course-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  display: grid;
}

.gamma-course-filter-panel {
  background: #fff;
  border: 1px solid #dfe5f0;
  border-radius: 10px;
  align-self: start;
  padding: 14px;
}

.gamma-course-filter-title {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.gamma-course-filter-title b {
  font-size: 14px;
}

.gamma-course-filter-title a {
  color: #6754dc;
  font-size: 10px;
  text-decoration: none;
}

.gamma-course-filter-panel form {
  gap: 12px;
  display: grid;
}

.gamma-course-search {
  border: 1px solid #dfe3ed;
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  display: flex;
}

.gamma-course-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 11px;
}

.gamma-course-filter {
  border-top: 1px solid #edf0f5;
  gap: 5px;
  padding-top: 10px;
  display: grid;
}

.gamma-course-filter > span {
  color: #2d336c;
  font-size: 11px;
  font-weight: 700;
}

.gamma-course-filter select {
  color: #48507c;
  background: #fff;
  border: 1px solid #dde3ee;
  border-radius: 7px;
  height: 36px;
  padding: 0 8px;
  font-size: 11px;
}

.gamma-course-filter-panel button {
  color: #5d34e8;
  background: #f0edff;
  border: 0;
  border-radius: 7px;
  height: 38px;
  font-weight: 700;
}

.gamma-course-results {
  min-width: 0;
}

.gamma-course-result-head {
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin-bottom: 8px;
  display: flex;
}

.gamma-course-result-head > strong {
  font-size: 14px;
}

.gamma-course-result-head > label {
  color: #69739b;
  margin-left: auto;
  font-size: 11px;
}

.gamma-course-result-head > label select {
  display: none;
}

.gamma-course-result-head form {
  gap: 6px;
  display: flex;
}

.gamma-course-sort-select {
  color: #404878;
  background: #fff;
  border: 1px solid #dfe4ee;
  border-radius: 7px;
  height: 34px;
  padding: 0 8px;
}

.gamma-course-result-head form button {
  background: #fff;
  border: 1px solid #dfe4ee;
  border-radius: 7px;
  width: 34px;
  height: 34px;
}

.gamma-course-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.gamma-course-card {
  background: #fff;
  border: 1px solid #dfe4ef;
  border-radius: 11px;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 2px 5px #18204808;
}

.gamma-course-cover {
  background: linear-gradient(135deg, #ede9ff, #dbe8ff);
  place-items: center;
  height: 116px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.gamma-course-cover:before, .gamma-course-cover:after {
  content: "";
  background: #ffffff5c;
  border-radius: 50%;
  position: absolute;
}

.gamma-course-cover:before {
  width: 130px;
  height: 130px;
  top: -50px;
  right: -30px;
}

.gamma-course-cover:after {
  width: 90px;
  height: 90px;
  bottom: -40px;
  left: -24px;
}

.gamma-course-cover > span {
  color: #5f38ec;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 26px;
  font-weight: 800;
  display: grid;
  box-shadow: 0 8px 20px #301f6c1f;
}

.gamma-course-cover > small {
  color: #4f5684;
  z-index: 2;
  background: #ffffffe0;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 9px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.gamma-course-cover > b {
  color: #9b6e00;
  z-index: 2;
  background: #fff6d8;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 9px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.gamma-course-cover.tone-1 {
  background: linear-gradient(135deg, #e7f5ff, #e4ebff);
}

.gamma-course-cover.tone-2 {
  background: linear-gradient(135deg, #eefcff, #e8f6ed);
}

.gamma-course-cover.tone-3 {
  background: linear-gradient(135deg, #fff2df, #fff9ec);
}

.gamma-course-cover.tone-4 {
  background: linear-gradient(135deg, #fcecff, #eae8ff);
}

.gamma-course-cover.tone-5 {
  background: linear-gradient(135deg, #e8f7f2, #e4f1ff);
}

.gamma-course-card-body {
  padding: 12px;
}

.gamma-course-code {
  color: #7d86a5;
  margin-bottom: 5px;
  font-size: 9px;
}

.gamma-course-card h2 {
  color: #22187f;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.3;
}

.gamma-course-card p {
  color: #687294;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 29px;
  margin: 0 0 10px;
  font-size: 10px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.gamma-course-meta {
  color: #6c7599;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 9px;
  display: flex;
}

.gamma-course-progress {
  grid-template-columns: 1fr 36px;
  align-items: center;
  gap: 8px;
  display: grid;
}

.gamma-course-progress > span {
  background: #eef0f6;
  border-radius: 8px;
  height: 6px;
  overflow: hidden;
}

.gamma-course-progress i {
  background: linear-gradient(90deg, #6d4df2, #7b8cf5);
  border-radius: 8px;
  height: 100%;
  display: block;
}

.gamma-course-progress b {
  color: #5c648c;
  font-size: 9px;
}

.gamma-course-card-foot {
  border-top: 1px solid #eef0f5;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
}

.gamma-course-card-foot small {
  color: #737c9e;
  font-size: 9px;
}

.gamma-course-card-foot a {
  color: #5d35e7;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-course-empty {
  text-align: center;
  color: #7d86a4;
  background: #fff;
  border: 1px dashed #d9dfeb;
  border-radius: 10px;
  padding: 50px;
}

.gamma-course-pagination {
  color: #70799c;
  justify-content: space-between;
  align-items: center;
  padding: 14px 2px 0;
  font-size: 10px;
  display: flex;
}

.gamma-course-pagination > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.gamma-course-pagination a {
  color: #49517f;
  background: #fff;
  border: 1px solid #dfe4ed;
  border-radius: 6px;
  place-items: center;
  width: 30px;
  height: 30px;
  text-decoration: none;
  display: grid;
}

.gamma-course-pagination a.is-active {
  color: #5934e9;
  background: #eeeaff;
  border-color: #ded4ff;
  font-weight: 700;
}

.gamma-course-pagination a.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.gamma-course-pagination b {
  padding-left: 8px;
  font-weight: 500;
}

@media (max-width: 1250px) {
  .gamma-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .gamma-course-layout {
    grid-template-columns: 1fr;
  }

  .gamma-course-filter-panel {
    position: static;
  }

  .gamma-course-grid {
    grid-template-columns: 1fr;
  }

  .gamma-course-tabs {
    overflow: auto;
  }

  .gamma-course-pagination {
    gap: 10px;
    display: grid;
  }

  .gamma-course-head {
    display: grid;
  }
}

.gamma-course-result-head form {
  color: #69739b;
  align-items: center;
  margin-left: auto;
  font-size: 11px;
}

.gamma-course-result-head form button {
  color: #4f5684;
  width: auto;
  padding: 0 10px;
}

.gamma-training-plan {
  color: #151862;
  padding: 4px 0 30px;
}

.gamma-training-plan-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
  display: flex;
}

.gamma-training-plan-head h1 {
  color: #12105f;
  margin: 0 0 6px;
  font-size: 30px;
}

.gamma-training-plan-head p {
  color: #69749c;
  margin: 0;
  font-size: 13px;
}

.gamma-training-plan-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-training-plan-actions span {
  background: #fff;
  border: 1px solid #dfe4ef;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12px;
}

.gamma-training-plan-actions a {
  color: #fff;
  background: linear-gradient(135deg, #722cf1, #5a22d8);
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-training-plan-tabs {
  border-bottom: 1px solid #e1e5f0;
  gap: 28px;
  margin-bottom: 12px;
  display: flex;
  overflow: auto;
}

.gamma-training-plan-tabs a, .gamma-training-plan-tabs b {
  color: #4b5485;
  white-space: nowrap;
  padding: 0 6px 12px;
  font-size: 12px;
  text-decoration: none;
}

.gamma-training-plan-tabs b {
  color: #5e39ef;
  border-bottom: 3px solid #673ef6;
}

.gamma-training-plan-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
  display: grid;
}

.gamma-training-plan-kpi {
  background: #fff;
  border: 1px solid #e0e5f1;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 14px;
  display: flex;
}

.gamma-training-plan-kpi > i {
  color: #6340ed;
  background: #f0edff;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gamma-training-plan-kpi > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.gamma-training-plan-kpi span {
  color: #70799b;
  font-size: 11px;
}

.gamma-training-plan-kpi strong {
  color: #12105f;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 22px;
  overflow: hidden;
}

.gamma-training-plan-kpi small {
  color: #7b84a3;
  font-size: 10px;
}

.gamma-training-plan-kpi-progress {
  background: #eef0f6;
  border-radius: 8px;
  height: 5px;
  overflow: hidden;
}

.gamma-training-plan-kpi-progress em {
  background: linear-gradient(90deg, #704cf3, #6d85f5);
  height: 100%;
  display: block;
}

.gamma-training-plan-kpi.is-alert > i {
  color: #c98800;
  background: #fff3e0;
}

.gamma-training-plan-kpi.neutral strong {
  color: #5c6489;
  font-size: 17px;
}

.gamma-training-plan-main {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  display: grid;
}

.gamma-training-plan-card {
  background: #fff;
  border: 1px solid #e0e5f1;
  border-radius: 10px;
  min-width: 0;
  padding: 14px;
}

.gamma-training-plan-card > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.gamma-training-plan-card h2 {
  color: #202468;
  margin: 0;
  font-size: 14px;
}

.gamma-training-plan-card header p {
  color: #7c85a4;
  margin: 3px 0 0;
  font-size: 10px;
}

.gamma-training-plan-card header a {
  color: #6340e9;
  font-size: 10px;
  text-decoration: none;
}

.gamma-training-plan-filters {
  grid-template-columns: 1.2fr 1fr .7fr auto auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 12px;
  display: grid;
}

.gamma-training-plan-filters label {
  gap: 4px;
  display: grid;
}

.gamma-training-plan-filters span {
  color: #6d7799;
  font-size: 10px;
}

.gamma-training-plan-filters select {
  color: #394172;
  background: #fff;
  border: 1px solid #dfe4ef;
  border-radius: 7px;
  height: 36px;
  padding: 0 9px;
}

.gamma-training-plan-filters button, .gamma-training-plan-filters > a {
  border-radius: 7px;
  place-items: center;
  height: 36px;
  padding: 0 12px;
  font-size: 11px;
  text-decoration: none;
  display: grid;
}

.gamma-training-plan-filters button {
  color: #fff;
  background: #6b39ee;
  border: 0;
}

.gamma-training-plan-filters > a {
  color: #606a91;
  background: #fff;
  border: 1px solid #e0e4ee;
}

.gamma-training-plan-table-wrap {
  overflow: auto;
}

.gamma-training-plan-table-card table {
  border-collapse: collapse;
  width: 100%;
  min-width: 850px;
  font-size: 10px;
}

.gamma-training-plan-table-card th {
  color: #7780a0;
  text-align: left;
  background: #fafbfe;
  border-bottom: 1px solid #e7eaf3;
  padding: 8px;
  font-weight: 500;
}

.gamma-training-plan-table-card td {
  color: #394174;
  border-bottom: 1px solid #edf0f6;
  padding: 9px 8px;
}

.gamma-training-plan-table-card td b {
  color: #26306d;
  display: block;
}

.gamma-training-plan-table-card td small {
  color: #8a93ae;
  margin-top: 2px;
  display: block;
}

.gamma-training-plan-table-card td.muted-cell {
  color: #9aa2b8;
}

.gamma-training-plan-table-card td.empty {
  text-align: center;
  color: #8992aa;
  padding: 28px;
}

.gamma-training-plan-rate {
  align-items: center;
  gap: 7px;
  display: flex;
}

.gamma-training-plan-rate span {
  background: #eef0f6;
  border-radius: 8px;
  width: 60px;
  height: 7px;
  overflow: hidden;
}

.gamma-training-plan-rate i {
  background: linear-gradient(90deg, #7353f5, #7f92f7);
  border-radius: 8px;
  height: 100%;
  display: block;
}

.gamma-training-plan-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  display: inline-block;
}

.gamma-training-plan-status.ok {
  color: #268459;
  background: #e8f8ef;
}

.gamma-training-plan-status.warn {
  color: #9a7100;
  background: #fff6da;
}

.gamma-training-plan-status.bad {
  color: #c44e56;
  background: #ffeaea;
}

.gamma-training-plan-table-card > footer {
  color: #747e9f;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  font-size: 10px;
  display: flex;
}

.gamma-training-plan-table-card > footer div {
  align-items: center;
  gap: 7px;
  display: flex;
}

.gamma-training-plan-table-card > footer a {
  color: #4e5681;
  border: 1px solid #dfe4ee;
  border-radius: 6px;
  place-items: center;
  width: 28px;
  height: 28px;
  text-decoration: none;
  display: grid;
}

.gamma-training-plan-table-card > footer a.disabled {
  opacity: .35;
  pointer-events: none;
}

.gamma-training-plan-side {
  align-content: start;
  gap: 12px;
  display: grid;
}

.gamma-training-plan-alerts {
  display: grid;
}

.gamma-training-plan-alerts > a {
  color: inherit;
  border-bottom: 1px solid #edf0f5;
  grid-template-columns: 28px 1fr 14px;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  text-decoration: none;
  display: grid;
}

.gamma-training-plan-alerts > a:last-child {
  border-bottom: 0;
}

.gamma-training-plan-alerts i {
  border-radius: 7px;
  place-items: center;
  width: 25px;
  height: 25px;
  font-style: normal;
  display: grid;
}

.gamma-training-plan-alerts i.bad {
  color: #d04e57;
  background: #ffeaea;
}

.gamma-training-plan-alerts i.warn {
  color: #b07f00;
  background: #fff4d7;
}

.gamma-training-plan-alerts i.info {
  color: #5a45df;
  background: #ececff;
}

.gamma-training-plan-alerts b {
  color: #313873;
  font-size: 10px;
}

.gamma-training-plan-alerts small {
  color: #8790ab;
  margin-top: 2px;
  font-size: 9px;
  display: block;
}

.gamma-training-plan-alerts > a > span {
  color: #7657ea;
}

.gamma-training-plan-clear {
  text-align: center;
  color: #8790aa;
  padding: 16px;
  font-size: 11px;
}

.gamma-training-plan-budget-note {
  padding: 4px 2px;
}

.gamma-training-plan-budget-note strong {
  color: #303770;
  font-size: 11px;
}

.gamma-training-plan-budget-note p {
  color: #78819e;
  font-size: 10px;
  line-height: 1.5;
}

.gamma-training-plan-budget-note a {
  color: #603be6;
  font-size: 10px;
  text-decoration: none;
}

.gamma-training-plan-bottom {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  display: grid;
}

.gamma-training-plan-kpi-list {
  display: grid;
}

.gamma-training-plan-kpi-list > div {
  border-bottom: 1px solid #eef0f5;
  grid-template-columns: 1.4fr .8fr .55fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 10px;
  display: grid;
}

.gamma-training-plan-kpi-list > div:last-child {
  border-bottom: 0;
}

.gamma-training-plan-kpi-list b {
  color: #30376e;
}

.gamma-training-plan-kpi-list span {
  color: #7b84a1;
}

.gamma-training-plan-kpi-list strong {
  color: #3f4775;
}

.gamma-training-plan-kpi-list em {
  background: #eff1f6;
  border-radius: 8px;
  height: 7px;
  overflow: hidden;
}

.gamma-training-plan-kpi-list em i {
  background: linear-gradient(90deg, #6b4cef, #79a0f5);
  height: 100%;
  display: block;
}

.gamma-training-plan-next {
  display: grid;
}

.gamma-training-plan-next p {
  border-bottom: 1px solid #eef0f5;
  grid-template-columns: 25px 1fr;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 0;
  display: grid;
}

.gamma-training-plan-next p:last-child {
  border-bottom: 0;
}

.gamma-training-plan-next i {
  color: #6f7899;
  background: #f0f1f6;
  border-radius: 6px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-style: normal;
  display: grid;
}

.gamma-training-plan-next i.ok {
  color: #25835a;
  background: #e7f8ee;
}

.gamma-training-plan-next i.warn {
  color: #9a7200;
  background: #fff4d8;
}

.gamma-training-plan-next i.info {
  color: #5b47de;
  background: #ececff;
}

.gamma-training-plan-next b {
  color: #30376e;
  font-size: 10px;
}

.gamma-training-plan-next small {
  color: #848da7;
  margin-top: 2px;
  font-size: 9px;
  display: block;
}

@media (max-width: 1200px) {
  .gamma-training-plan-main {
    grid-template-columns: 1fr;
  }

  .gamma-training-plan-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .gamma-training-plan-side {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-training-plan-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .gamma-training-plan-head {
    display: grid;
  }

  .gamma-training-plan-kpis {
    grid-template-columns: 1fr;
  }

  .gamma-training-plan-filters {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-training-plan-side {
    grid-template-columns: 1fr;
  }
}

.gamma-my-learning {
  color: #151862;
  padding: 4px 0 32px;
}

.gamma-my-learning-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.gamma-my-learning-head h1 {
  color: #17105f;
  margin: 0 0 5px;
  font-size: 30px;
}

.gamma-my-learning-head p {
  color: #69749c;
  margin: 0;
  font-size: 13px;
}

.gamma-my-learning-head > a {
  color: #5f3be6;
  background: #fff;
  border: 1px solid #dfe4ef;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-my-tabs {
  border-bottom: 1px solid #e2e6f0;
  gap: 28px;
  margin: 18px 0 12px;
  display: flex;
  overflow: auto;
}

.gamma-my-tabs > * {
  color: #535d8b;
  white-space: nowrap;
  padding: 0 5px 12px;
  font-size: 11px;
  text-decoration: none;
}

.gamma-my-tabs b {
  color: #633cf0;
  border-bottom: 3px solid #6540ef;
}

.gamma-my-summary {
  background: #fff;
  border: 1px solid #e0e5f0;
  border-radius: 10px;
  grid-template-columns: minmax(270px, 1.7fr) repeat(4, minmax(120px, .65fr));
  margin-bottom: 12px;
  display: grid;
  overflow: hidden;
}

.gamma-my-profile {
  border-right: 1px solid #ebedf4;
  align-items: center;
  gap: 13px;
  padding: 16px;
  display: flex;
}

.gamma-my-profile > span {
  color: #5e38e9;
  background: linear-gradient(135deg, #eee8ff, #d9e6ff);
  border-radius: 50%;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 18px;
  font-weight: 800;
  display: grid;
}

.gamma-my-profile h2 {
  margin: 0 0 5px;
  font-size: 16px;
}

.gamma-my-profile p {
  color: #7781a2;
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.gamma-my-metric {
  border-right: 1px solid #ebedf4;
  grid-template-columns: 30px 1fr;
  align-content: center;
  padding: 15px 12px;
  display: grid;
}

.gamma-my-metric:last-child {
  border-right: 0;
}

.gamma-my-metric i {
  color: #633ceb;
  background: #f0edff;
  border-radius: 8px;
  grid-row: 1 / 3;
  place-items: center;
  width: 27px;
  height: 27px;
  font-style: normal;
  display: grid;
}

.gamma-my-metric strong {
  font-size: 20px;
}

.gamma-my-metric span {
  color: #7983a3;
  font-size: 9px;
}

.gamma-my-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  display: grid;
}

.gamma-my-grid > main, .gamma-my-grid > aside {
  align-content: start;
  gap: 12px;
  display: grid;
}

.gamma-my-card {
  background: #fff;
  border: 1px solid #dfe4ef;
  border-radius: 10px;
  min-width: 0;
  padding: 13px;
}

.gamma-my-card > header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.gamma-my-card > header h2 {
  color: #202468;
  margin: 0;
  font-size: 14px;
}

.gamma-my-card > header span, .gamma-my-card > header a {
  color: #6d51df;
  font-size: 9px;
  text-decoration: none;
}

.gamma-my-continue-list article {
  border-bottom: 1px solid #eef0f5;
  grid-template-columns: 62px minmax(170px, 1fr) minmax(130px, .8fr) 105px 75px;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  display: grid;
}

.gamma-my-continue-list article:last-child {
  border-bottom: 0;
}

.gamma-my-course-thumb {
  color: #fff;
  background: linear-gradient(135deg, #5e4cf3, #8f7df4);
  border-radius: 7px;
  place-items: center;
  width: 62px;
  height: 46px;
  font-size: 18px;
  font-weight: 800;
  display: grid;
}

.gamma-my-course-thumb.tone-1, .gamma-my-reco-cover.tone-1 {
  background: linear-gradient(135deg, #507ee9, #6ea7f5);
}

.gamma-my-course-thumb.tone-2, .gamma-my-reco-cover.tone-2 {
  background: linear-gradient(135deg, #3ca48e, #6fc8aa);
}

.gamma-my-course-thumb.tone-3, .gamma-my-reco-cover.tone-3 {
  background: linear-gradient(135deg, #e49d43, #f5c879);
}

.gamma-my-course-thumb.tone-4, .gamma-my-reco-cover.tone-4 {
  background: linear-gradient(135deg, #ab5ac8, #df91e9);
}

.gamma-my-course-thumb.tone-5, .gamma-my-reco-cover.tone-5 {
  background: linear-gradient(135deg, #d15e75, #e9a);
}

.gamma-my-course-info {
  gap: 3px;
  display: grid;
}

.gamma-my-course-info b {
  color: #272e6e;
  font-size: 11px;
}

.gamma-my-course-info small {
  color: #7f88a4;
  font-size: 9px;
}

.gamma-my-progress {
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-my-progress > span {
  background: #eceff6;
  border-radius: 8px;
  flex: 1;
  height: 7px;
  overflow: hidden;
}

.gamma-my-progress i {
  background: linear-gradient(90deg, #6c46ef, #8197f6);
  height: 100%;
  display: block;
}

.gamma-my-progress b {
  font-size: 10px;
}

.gamma-my-due {
  color: #858da7;
  font-size: 9px;
}

.gamma-my-continue-list article > a, .gamma-my-assigned-list > div > a, .gamma-my-completed-grid article > a {
  text-align: center;
  color: #5d41d9;
  border: 1px solid #cfd7eb;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 9px;
  text-decoration: none;
}

.gamma-my-assigned-list > div {
  border-bottom: 1px solid #eef0f5;
  grid-template-columns: minmax(180px, 1fr) 90px 82px 70px;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  display: grid;
}

.gamma-my-assigned-list > div:last-child {
  border-bottom: 0;
}

.gamma-my-assigned-list b {
  font-size: 10px;
}

.gamma-my-assigned-list small {
  color: #8089a4;
  margin-top: 3px;
  font-size: 8px;
  display: block;
}

.gamma-my-assigned-list > div > span {
  color: #6c7597;
  font-size: 9px;
}

.gamma-my-assigned-list em {
  color: #63709c;
  text-align: center;
  background: #edf0fb;
  border-radius: 999px;
  padding: 5px 7px;
  font-size: 8px;
  font-style: normal;
}

.gamma-my-assigned-list em.is-bad {
  color: #c85459;
  background: #ffebea;
}

.gamma-my-completed-grid, .gamma-my-recommend-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.gamma-my-completed-grid article {
  border: 1px solid #e6e9f2;
  border-radius: 8px;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  padding: 9px;
  display: grid;
}

.gamma-my-completed-grid .gamma-my-course-thumb {
  width: 52px;
  height: 45px;
}

.gamma-my-completed-grid b {
  font-size: 9px;
}

.gamma-my-completed-grid small {
  color: #7f88a4;
  margin-top: 3px;
  font-size: 8px;
  display: block;
}

.gamma-my-completed-grid strong {
  color: #2f8a62;
  margin-top: 4px;
  font-size: 8px;
  display: block;
}

.gamma-my-completed-grid article > a {
  grid-column: 1 / 3;
}

.gamma-my-recommend-grid article {
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  gap: 6px;
  padding: 9px;
  display: grid;
}

.gamma-my-reco-cover {
  color: #fff;
  background: linear-gradient(135deg, #6545ec, #9b7cf6);
  border-radius: 7px;
  place-items: center;
  height: 52px;
  font-size: 20px;
  font-weight: 800;
  display: grid;
}

.gamma-my-recommend-grid b {
  font-size: 10px;
}

.gamma-my-recommend-grid p {
  color: #77819f;
  height: 34px;
  margin: 0;
  font-size: 8px;
  line-height: 1.4;
  overflow: hidden;
}

.gamma-my-recommend-grid small {
  color: #6d51d9;
  font-size: 8px;
}

.gamma-my-recommend-grid a {
  text-align: right;
  color: #5e3ddd;
  font-size: 9px;
  text-decoration: none;
}

.gamma-my-skills {
  gap: 11px;
  display: grid;
}

.gamma-my-skills > div > div {
  justify-content: space-between;
  gap: 8px;
  display: flex;
}

.gamma-my-skills b {
  font-size: 9px;
}

.gamma-my-skills span, .gamma-my-skills small {
  color: #747d9d;
  font-size: 8px;
}

.gamma-my-skills em {
  background: #edf0f6;
  border-radius: 8px;
  height: 7px;
  margin: 5px 0 3px;
  display: block;
  overflow: hidden;
}

.gamma-my-skills em i {
  background: linear-gradient(90deg, #6543ef, #8299f6);
  height: 100%;
  display: block;
}

.gamma-my-paths {
  display: grid;
}

.gamma-my-paths > div:not(.gamma-my-empty-row) {
  border-bottom: 1px solid #eef0f5;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  display: grid;
}

.gamma-my-paths > div:last-child {
  border-bottom: 0;
}

.gamma-my-paths > div > span {
  color: #6140df;
  background: #f0edff;
  border-radius: 7px;
  place-items: center;
  width: 25px;
  height: 25px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}

.gamma-my-paths b {
  font-size: 9px;
}

.gamma-my-paths small {
  color: #818aa3;
  margin-top: 2px;
  font-size: 8px;
  display: block;
}

.gamma-my-certs {
  display: grid;
}

.gamma-my-certs > div:not(.gamma-my-empty-row) {
  border-bottom: 1px solid #eef0f5;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  padding: 8px 0;
  display: grid;
}

.gamma-my-certs > div:last-child {
  border-bottom: 0;
}

.gamma-my-certs i {
  color: #5d35e3;
  background: #efeaff;
  border-radius: 7px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-style: normal;
  display: grid;
}

.gamma-my-certs b {
  font-size: 9px;
}

.gamma-my-certs small {
  color: #8189a3;
  margin-top: 2px;
  font-size: 8px;
  display: block;
}

.gamma-my-empty {
  background: #fff;
  border: 1px solid #e0e4ef;
  border-radius: 12px;
  margin-top: 18px;
  padding: 28px;
}

.gamma-my-empty p {
  color: #747d9c;
}

.gamma-my-empty a {
  color: #5d3adc;
  text-decoration: none;
}

.gamma-my-empty-row {
  text-align: center;
  color: #8891aa;
  border: 1px dashed #e0e4ee;
  border-radius: 7px;
  grid-column: 1 / -1;
  padding: 22px;
  font-size: 9px;
}

@media (max-width: 1280px) {
  .gamma-my-summary {
    grid-template-columns: 1.6fr repeat(2, 1fr);
  }

  .gamma-my-profile {
    grid-row: span 2;
  }

  .gamma-my-grid {
    grid-template-columns: 1fr;
  }

  .gamma-my-grid > aside {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .gamma-my-summary {
    grid-template-columns: 1fr 1fr;
  }

  .gamma-my-profile {
    grid-area: auto / 1 / auto / -1;
  }

  .gamma-my-continue-list article {
    grid-template-columns: 52px 1fr;
  }

  .gamma-my-progress, .gamma-my-due, .gamma-my-continue-list article > a {
    grid-column: 2;
  }

  .gamma-my-assigned-list > div {
    grid-template-columns: 1fr 70px;
  }

  .gamma-my-completed-grid, .gamma-my-recommend-grid, .gamma-my-grid > aside {
    grid-template-columns: 1fr;
  }

  .gamma-my-tabs {
    gap: 15px;
  }
}

.gamma-learning-paths {
  gap: 14px;
  display: grid;
}

.gamma-lp-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.gamma-lp-head h1 {
  color: #17105f;
  margin: 4px 0;
  font-size: 28px;
}

.gamma-lp-head p {
  color: #6d73a2;
  margin: 0;
}

.gamma-lp-actions {
  gap: 8px;
  display: flex;
}

.gamma-lp-actions a {
  color: #29206f;
  background: #fff;
  border: 1px solid #d9def2;
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-lp-actions a.is-primary {
  color: #fff;
  background: #6434ed;
  border-color: #6434ed;
}

.gamma-lp-selector {
  background: #fff;
  border: 1px solid #dfe3f2;
  border-radius: 12px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 12px 14px;
  display: flex;
}

.gamma-lp-selector form {
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.gamma-lp-selector label {
  color: #4e5585;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.gamma-lp-selector select {
  color: #24205f;
  background: #fff;
  border: 1px solid #d9def0;
  border-radius: 8px;
  min-width: 270px;
  padding: 9px 12px;
}

.gamma-lp-selector button {
  color: #fff;
  background: #6737eb;
  border: 0;
  border-radius: 8px;
  padding: 10px 15px;
  font-weight: 700;
}

.gamma-lp-selector small {
  color: #7c83a8;
}

.gamma-lp-hero {
  grid-template-columns: 250px minmax(0, 1fr) 245px;
  gap: 12px;
  display: grid;
}

.gamma-lp-cover, .gamma-lp-overview, .gamma-lp-progress, .gamma-lp-card, .gamma-lp-side-card {
  background: #fff;
  border: 1px solid #dfe3f2;
  border-radius: 12px;
}

.gamma-lp-cover {
  color: #fff;
  background: linear-gradient(145deg, #24265e, #596a8c 48%, #c8a982);
  align-items: flex-end;
  min-height: 250px;
  padding: 22px;
  display: flex;
  overflow: hidden;
}

.gamma-lp-cover div {
  gap: 2px;
  display: grid;
}

.gamma-lp-cover span {
  font-size: 28px;
  font-weight: 800;
}

.gamma-lp-cover strong {
  font-size: 34px;
}

.gamma-lp-cover b {
  margin-top: 10px;
  font-size: 16px;
}

.gamma-lp-overview {
  padding: 18px;
}

.gamma-lp-tags {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.gamma-lp-tags span {
  color: #5a3bc1;
  background: #f2f0ff;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
}

.gamma-lp-overview h2 {
  margin: 18px 0 6px;
  font-size: 16px;
}

.gamma-lp-overview h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.gamma-lp-overview p, .gamma-lp-overview li {
  color: #626990;
  font-size: 13px;
}

.gamma-lp-overview ul {
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.gamma-lp-overview li {
  color: #247b5c;
}

.gamma-lp-progress {
  padding: 18px;
}

.gamma-lp-progress > small {
  color: #5f668d;
  font-weight: 700;
}

.gamma-lp-progress > strong {
  color: #3d1bb2;
  margin: 7px 0;
  font-size: 32px;
  display: block;
}

.gamma-lp-progress > div {
  background: #eceefa;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.gamma-lp-progress > div i {
  background: #6841e9;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.gamma-lp-progress dl {
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 12px;
  display: grid;
}

.gamma-lp-progress dt {
  color: #777da3;
}

.gamma-lp-progress dd {
  color: #29245f;
  margin: 0;
  font-weight: 700;
}

.gamma-lp-layout {
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 12px;
  display: grid;
}

.gamma-lp-layout main, .gamma-lp-layout > aside {
  align-content: start;
  gap: 12px;
  display: grid;
}

.gamma-lp-card {
  padding: 14px;
}

.gamma-lp-card > header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.gamma-lp-card h2, .gamma-lp-side-card h2 {
  color: #201765;
  margin: 0;
  font-size: 15px;
}

.gamma-lp-card > header span, .gamma-lp-card > header a {
  color: #6841e9;
  font-size: 12px;
  text-decoration: none;
}

.gamma-lp-course-list {
  display: grid;
}

.gamma-lp-course-list article {
  border-top: 1px solid #eef0f7;
  grid-template-columns: 30px minmax(230px, 1fr) 90px 100px 90px 92px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  display: grid;
}

.gamma-lp-step {
  color: #5a3fc3;
  background: #eeecff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.gamma-lp-course-main {
  gap: 3px;
  display: grid;
}

.gamma-lp-course-main b {
  color: #2d236f;
}

.gamma-lp-course-main small, .gamma-lp-course-list article > small {
  color: #7b81a3;
}

.gamma-lp-course-list em {
  text-align: center;
  color: #676d89;
  background: #f1f2f8;
  border-radius: 999px;
  padding: 5px 7px;
  font-size: 11px;
  font-style: normal;
}

.gamma-lp-course-list em.status-completed {
  color: #23845e;
  background: #e8f8ef;
}

.gamma-lp-course-list em.status-in_progress {
  color: #6241c8;
  background: #eeeaff;
}

.gamma-lp-course-list em.status-overdue {
  color: #c64b43;
  background: #fff0ef;
}

.gamma-lp-mini-progress {
  background: #eceefa;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.gamma-lp-mini-progress i {
  background: #6744e6;
  height: 100%;
  display: block;
}

.gamma-lp-course-list article > a {
  color: #5d3bc8;
  text-align: center;
  border: 1px solid #7150e7;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-lp-skill-table {
  display: grid;
}

.gamma-lp-skill-table > div {
  border-top: 1px solid #eef0f7;
  grid-template-columns: minmax(220px, 1fr) 90px 90px 70px;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  display: grid;
}

.gamma-lp-skill-table .head {
  color: #858aa8;
  font-size: 11px;
}

.gamma-lp-skill-table strong.is-gap {
  color: #cf514c;
}

.gamma-lp-skill-table strong.is-ok {
  color: #25835d;
}

.gamma-lp-side-card {
  gap: 9px;
  padding: 14px;
  display: grid;
}

.gamma-lp-side-card > strong {
  color: #332475;
  font-size: 17px;
}

.gamma-lp-side-card > small, .gamma-lp-side-card p {
  color: #7b81a2;
  margin: 0;
  font-size: 12px;
}

.gamma-lp-side-card a {
  color: #6740e7;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-lp-manager {
  align-items: center;
  gap: 9px;
  display: flex;
}

.gamma-lp-manager > span {
  color: #5b3bc4;
  background: #eeebff;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: 800;
  display: grid;
}

.gamma-lp-manager div {
  display: grid;
}

.gamma-lp-manager small {
  color: #858aa7;
}

.gamma-my-tabs a, .gamma-my-tabs b {
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .gamma-lp-hero {
    grid-template-columns: 200px 1fr;
  }

  .gamma-lp-progress {
    grid-column: 1 / -1;
  }

  .gamma-lp-layout {
    grid-template-columns: 1fr;
  }

  .gamma-lp-layout > aside {
    grid-template-columns: repeat(3, 1fr);
  }

  .gamma-lp-course-list article {
    grid-template-columns: 30px minmax(200px, 1fr) 80px 90px;
  }

  .gamma-lp-mini-progress {
    display: none;
  }
}

@media (max-width: 760px) {
  .gamma-lp-head, .gamma-lp-selector {
    display: grid;
  }

  .gamma-lp-actions, .gamma-lp-selector form {
    flex-wrap: wrap;
  }

  .gamma-lp-hero, .gamma-lp-layout > aside {
    grid-template-columns: 1fr;
  }

  .gamma-lp-course-list article {
    grid-template-columns: 30px 1fr;
  }

  .gamma-lp-course-list article > :nth-child(n+3) {
    grid-column: 2;
  }

  .gamma-lp-skill-table > div {
    grid-template-columns: 1fr 55px 55px 45px;
  }
}

.gamma-approval-page {
  color: #18205b;
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.ga-breadcrumb {
  color: #6a7296;
  font-size: 12px;
}

.ga-breadcrumb span {
  padding: 0 8px;
}

.ga-header {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.ga-header h1 {
  color: #16076f;
  margin: 0;
  font-size: 30px;
}

.ga-header p {
  color: #70789c;
  margin: 4px 0 0;
}

.ga-primary {
  color: #fff;
  background: #6717e8;
  border-radius: 9px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
}

.ga-tabs {
  border-bottom: 1px solid #e3e7f1;
  gap: 30px;
  display: flex;
}

.ga-tabs a {
  color: #6a7296;
  padding: 12px 0;
  font-weight: 700;
  text-decoration: none;
}

.ga-tabs a.active {
  color: #5532e7;
  border-bottom: 3px solid #5532e7;
}

.ga-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.ga-kpis article {
  background: #fff;
  border: 1px solid #e2e6f0;
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  display: flex;
}

.ga-kpis article > span {
  background: #eef0ff;
  border-radius: 10px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  display: grid;
}

.ga-kpis small {
  color: #70789c;
  display: block;
}

.ga-kpis strong {
  font-size: 28px;
}

.ga-kpis .danger > span {
  color: #e84052;
  background: #fff0f1;
}

.ga-kpis .warn > span {
  color: #d8a000;
  background: #fff8df;
}

.ga-filters {
  background: #fff;
  border: 1px solid #e2e6f0;
  border-radius: 10px;
  grid-template-columns: minmax(260px, 1fr) 200px 200px auto;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.ga-filters input, .ga-filters select, .ga-filters button {
  color: #29305d;
  background: #fff;
  border: 1px solid #dce1ec;
  border-radius: 8px;
  height: 40px;
  padding: 0 12px;
}

.ga-body {
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: start;
  gap: 12px;
  display: grid;
}

.ga-table-card, .ga-detail {
  background: #fff;
  border: 1px solid #e2e6f0;
  border-radius: 12px;
  overflow: hidden;
}

.ga-table-card table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.ga-table-card th {
  color: #6c7495;
  text-align: left;
  background: #f8f9fd;
  padding: 11px;
}

.ga-table-card td {
  vertical-align: top;
  border-top: 1px solid #edf0f6;
  padding: 12px 11px;
}

.ga-table-card tr.selected {
  background: #f2efff;
}

.ga-table-card td a {
  color: #33407b;
  text-decoration: none;
}

.ga-table-card td strong {
  color: #171f58;
  display: block;
}

.ga-table-card td small {
  color: #71799a;
  margin-top: 3px;
  display: block;
}

.ga-table-card .late {
  color: #e54050;
}

.ga-status {
  color: #5745d9;
  background: #eef0ff;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11px;
  display: inline-flex;
}

.ga-status.approved {
  color: #168653;
  background: #e8f8ee;
}

.ga-status.rejected {
  color: #d83b4c;
  background: #ffe9ec;
}

.ga-status.cancelled {
  color: #6f7890;
  background: #eef1f6;
}

.ga-status.pending, .ga-status.waiting {
  color: #3f5bd8;
  background: #edf2ff;
}

.ga-pager {
  color: #6f7797;
  border-top: 1px solid #edf0f6;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  font-size: 12px;
  display: flex;
}

.ga-pager div {
  align-items: center;
  gap: 7px;
  display: flex;
}

.ga-pager a, .ga-pager b {
  color: #343e75;
  border: 1px solid #e0e4ee;
  border-radius: 7px;
  place-items: center;
  min-width: 30px;
  height: 30px;
  text-decoration: none;
  display: grid;
}

.ga-pager a.disabled {
  opacity: .4;
  pointer-events: none;
}

.ga-detail {
  max-height: calc(100vh - 100px);
  padding: 18px;
  position: sticky;
  top: 82px;
  overflow: auto;
}

.ga-detail-top {
  justify-content: space-between;
  display: flex;
}

.ga-detail-top > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ga-detail-top h2, .ga-detail h3 {
  color: #211077;
  margin: 0;
}

.ga-detail h3 {
  margin-top: 8px;
  font-size: 17px;
}

.ga-detail-top > a {
  color: #596188;
  font-size: 22px;
  text-decoration: none;
}

.ga-detail-tabs {
  border-bottom: 1px solid #e8ebf2;
  gap: 18px;
  margin: 18px 0 10px;
  display: flex;
}

.ga-detail-tabs > * {
  padding-bottom: 9px;
  font-size: 12px;
}

.ga-detail-tabs b {
  color: #5235e8;
  border-bottom: 2px solid #5235e8;
}

.ga-detail dl {
  grid-template-columns: 120px 1fr;
  gap: 10px 8px;
  font-size: 12px;
  display: grid;
}

.ga-detail dt {
  color: #697194;
}

.ga-detail dd {
  margin: 0;
  font-weight: 700;
}

.ga-detail section {
  border-top: 1px solid #edf0f6;
  margin-top: 14px;
  padding-top: 14px;
}

.ga-detail section h4 {
  margin: 0 0 10px;
}

.ga-detail section p {
  color: #59617f;
  font-size: 12px;
  line-height: 1.6;
}

.ga-meta {
  gap: 8px;
  display: grid;
}

.ga-meta div {
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  display: flex;
}

.ga-meta span {
  color: #777f9e;
}

.ga-meta strong {
  text-align: right;
  word-break: break-word;
}

.ga-history {
  border-bottom: 1px dashed #eceef4;
  grid-template-columns: 85px 1fr auto;
  gap: 8px;
  padding: 7px 0;
  font-size: 11px;
  display: grid;
}

.ga-history small {
  color: #8188a6;
}

.ga-decision {
  border-top: 1px solid #e8ebf2;
  margin-top: 18px;
  padding-top: 14px;
}

.ga-decision textarea {
  resize: vertical;
  border: 1px solid #dce1ec;
  border-radius: 8px;
  width: 100%;
  min-height: 70px;
  padding: 10px;
}

.ga-decision div {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.ga-decision button {
  border-radius: 8px;
  height: 42px;
  font-weight: 700;
}

.ga-decision .reject {
  color: #d83b4c;
  background: #fff;
  border: 1px solid #e55b68;
}

.ga-decision .approve {
  color: #fff;
  background: #5b19e8;
  border: 1px solid #5b19e8;
}

@media (max-width: 1200px) {
  .ga-body {
    grid-template-columns: 1fr;
  }

  .ga-detail {
    max-height: none;
    position: static;
  }

  .ga-filters {
    grid-template-columns: 1fr 1fr;
  }

  .ga-kpis {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ga-filters {
    grid-template-columns: 1fr;
  }

  .ga-header {
    gap: 12px;
  }

  .ga-header h1 {
    font-size: 24px;
  }

  .ga-primary {
    white-space: nowrap;
  }

  .ga-table-card {
    overflow: auto;
  }
}

.gamma-approval-forms-page {
  color: #12124b;
  background: #f7f8fc;
  min-height: 100vh;
  padding: 22px 26px 42px;
}

.gaf-breadcrumb {
  color: #68708a;
  margin-bottom: 6px;
  font-size: 12px;
}

.gaf-breadcrumb span {
  padding: 0 7px;
}

.gaf-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
  display: flex;
}

.gaf-header h1 {
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 1.1;
}

.gaf-header p {
  color: #69718c;
  margin: 0;
}

.gaf-header-actions, .gaf-status-actions, .gaf-save-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.gaf-primary, .gaf-secondary, .gaf-dot {
  border: 1px solid #d8dcef;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.gaf-primary {
  color: #fff;
  background: #6d28f5;
  border-color: #6d28f5;
}

.gaf-secondary {
  color: #22245d;
  background: #fff;
}

.gaf-dot {
  color: #474a74;
  background: #fff;
  padding: 8px 12px;
}

.gaf-notice {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
}

.gaf-shell {
  background: #fff;
  border: 1px solid #e2e5f0;
  border-radius: 12px;
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 650px;
  display: grid;
  overflow: hidden;
}

.gaf-list {
  background: #fbfbfe;
  border-right: 1px solid #e6e8f0;
}

.gaf-search {
  background: #fff;
  border: 1px solid #dfe2ed;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin: 14px;
  padding: 8px 10px;
  display: flex;
}

.gaf-search input {
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
}

.gaf-list-scroll {
  max-height: 680px;
  padding: 0 10px 14px;
  overflow: auto;
}

.gaf-item {
  color: #17194d;
  border: 1px solid #0000;
  border-radius: 9px;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding: 10px 8px;
  text-decoration: none;
  display: grid;
}

.gaf-item.active {
  background: #f3f0ff;
  border-color: #8b7cff;
}

.gaf-item-icon {
  color: #5d48f6;
  text-align: center;
  font-size: 21px;
}

.gaf-item b {
  font-size: 14px;
  display: block;
}

.gaf-item small {
  color: #767d93;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 210px;
  margin-top: 2px;
  font-size: 11px;
  display: block;
  overflow: hidden;
}

.gaf-item em {
  font-size: 16px;
  font-style: normal;
}

.gaf-item em.on {
  color: #10b981;
}

.gaf-item em.off {
  color: #c4c9d6;
}

.gaf-editor {
  min-width: 0;
}

.gaf-editor-head {
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 14px;
  display: flex;
}

.gaf-editor-head h2 {
  margin: 0 0 6px;
  font-size: 26px;
}

.gaf-editor-head p {
  color: #737a90;
  margin: 0;
}

.gaf-status-actions .status {
  color: #777;
  background: #f1f3f8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.gaf-status-actions .status.active {
  color: #169b62;
  background: #e8fbf3;
}

.gaf-tabs {
  border-bottom: 1px solid #e7e8ef;
  gap: 28px;
  padding: 0 24px;
  display: flex;
}

.gaf-tabs a {
  color: #454a73;
  border-bottom: 2px solid #0000;
  padding: 13px 2px 12px;
  font-size: 13px;
  text-decoration: none;
}

.gaf-tabs a.active {
  color: #5535f6;
  border-bottom-color: #5535f6;
  font-weight: 700;
}

.gaf-general {
  grid-template-columns: minmax(0, 1.7fr) 320px;
  gap: 28px;
  padding: 24px;
  display: grid;
}

.gaf-main-fields {
  border-right: 1px solid #e8e9f0;
  padding-right: 22px;
}

.gaf-general label, .gaf-meta > label {
  color: #414665;
  gap: 7px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  display: grid;
}

.gaf-general input, .gaf-general textarea, .gaf-general select {
  box-sizing: border-box;
  color: #222;
  background: #fff;
  border: 1px solid #d9dce8;
  border-radius: 7px;
  width: 100%;
  padding: 10px 11px;
}

.gaf-general input[readonly] {
  color: #777;
  background: #f7f8fb;
}

.gaf-scope {
  gap: 10px;
  font-size: 12px;
  display: grid;
}

.gaf-scope label {
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  display: flex;
}

.gaf-scope input {
  width: auto;
}

.gaf-meta {
  padding-left: 4px;
}

.gaf-toggle-row {
  border: 1px solid #e2e5ef;
  border-radius: 9px;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  display: flex;
}

.gaf-toggle-row form {
  margin: 0;
}

.gaf-toggle {
  color: #fff;
  background: #d1d5db;
  border: 0;
  border-radius: 999px;
  width: 42px;
  height: 24px;
}

.gaf-toggle.on {
  background: #20c98a;
}

.gaf-toggle-row b, .gaf-toggle-row small {
  display: block;
}

.gaf-toggle-row small {
  color: #777;
  margin-top: 2px;
  font-size: 10px;
}

.gaf-save-row {
  border-top: 1px solid #e8e9f0;
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 16px;
}

.gaf-tab-panel {
  padding: 24px;
}

.gaf-panel-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
  display: flex;
}

.gaf-panel-head h3, .gaf-tab-panel h3 {
  margin: 0 0 6px;
}

.gaf-panel-head p, .gaf-muted {
  color: #747b91;
  margin: 0;
}

.gaf-field-list, .gaf-step-list {
  gap: 8px;
  display: grid;
}

.gaf-field-list > div, .gaf-step-list > div {
  border: 1px solid #e3e5ee;
  border-radius: 8px;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.gaf-field-list span, .gaf-step-list span {
  color: #5c42f5;
  background: #f0edff;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  display: grid;
}

.gaf-field-list b, .gaf-step-list b, .gaf-field-list small, .gaf-step-list small {
  display: block;
}

.gaf-field-list small, .gaf-step-list small {
  color: #777d91;
  margin-top: 2px;
}

.gaf-rule {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  display: flex;
}

.gaf-rule span {
  color: #5a6079;
}

.gaf-info-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 20px;
  display: grid;
}

.gaf-info-grid > div {
  border: 1px solid #e3e5ef;
  border-radius: 8px;
  padding: 14px;
}

.gaf-info-grid small, .gaf-info-grid b {
  display: block;
}

.gaf-info-grid small {
  color: #7a8093;
  margin-bottom: 5px;
}

.gaf-empty, .gaf-empty-large {
  color: #7a8093;
  text-align: center;
  padding: 32px 15px;
}

.gaf-empty-large {
  padding: 100px 20px;
}

.gaf-empty-large h2 {
  color: #242657;
}

@media (max-width: 1100px) {
  .gaf-shell {
    grid-template-columns: 260px 1fr;
  }

  .gaf-general {
    grid-template-columns: 1fr;
  }

  .gaf-main-fields {
    border-right: 0;
    padding-right: 0;
  }

  .gaf-meta {
    border-top: 1px solid #eee;
    padding-top: 18px;
  }

  .gaf-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.gamma-sidebar-accordion {
  gap: 2px;
  display: grid !important;
}

.gamma-sidebar-accordion > .gamma-nav-group {
  gap: 1px;
  display: grid;
}

.gamma-sidebar-accordion .gamma-nav-parent {
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
}

.gamma-sidebar-accordion .gamma-nav-parent:hover {
  background: #f3f7ff;
}

.gamma-sidebar-accordion .gamma-nav-group.is-open > .gamma-nav-parent {
  color: #274fc7;
  background: #f2f6ff;
}

.gamma-sidebar-accordion .gamma-nav-submenu[hidden] {
  display: none !important;
}

.gamma-sidebar-accordion .gamma-nav-submenu a.active {
  color: #3159d7 !important;
  background: #edf3ff !important;
}

.gamma-sidebar-accordion .gamma-nav-parent b {
  transition: transform .18s;
}

.gap-page {
  color: #172554;
  gap: 14px;
  display: grid;
}

.gap-breadcrumb {
  color: #6d78a1;
  font-size: 11px;
}

.gap-breadcrumb span {
  padding: 0 6px;
}

.gap-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.gap-header h1 {
  color: #19105f;
  margin: 0 0 6px;
  font-size: 31px;
  line-height: 1;
}

.gap-header p {
  color: #6673a0;
  margin: 0;
}

.gap-actions {
  gap: 8px;
  display: flex;
}

.gap-actions a {
  color: #30206f;
  background: #fff;
  border: 1px solid #dbe3f2;
  border-radius: 7px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
}

.gap-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  display: grid;
}

.gap-kpis article {
  background: #fff;
  border: 1px solid #e1e7f2;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  display: flex;
}

.gap-kpis i {
  color: #5865f2;
  background: #eef1ff;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gap-kpis article.ok i {
  color: #19a46b;
  background: #eafaf3;
}

.gap-kpis article.danger i {
  color: #ed5f57;
  background: #fff0ee;
}

.gap-kpis article.purple i {
  color: #8b35ea;
  background: #f5ecff;
}

.gap-kpis span, .gap-kpis small {
  color: #67749b;
  display: block;
}

.gap-kpis strong {
  color: #21106d;
  margin: 3px 0;
  font-size: 25px;
  display: block;
}

.gap-grid.two {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.gap-card {
  background: #fff;
  border: 1px solid #e1e7f2;
  border-radius: 10px;
  min-width: 0;
  padding: 13px;
}

.gap-card > header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.gap-card h2 {
  color: #25116f;
  margin: 0;
  font-size: 15px;
}

.gap-card header span {
  color: #7c86a7;
  font-size: 10px;
}

.gap-card header a {
  color: #5a38db;
  font-size: 10px;
  text-decoration: none;
}

.gap-card table {
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
}

.gap-card th {
  text-align: left;
  color: #7c86a7;
  border-bottom: 1px solid #edf0f6;
  padding: 7px 6px;
  font-weight: 700;
}

.gap-card td {
  color: #364365;
  border-bottom: 1px solid #f0f2f7;
  padding: 8px 6px;
}

.gap-card td.good {
  color: #15a268;
  font-weight: 800;
}

.gap-card td.bad {
  color: #ef5f59;
  font-weight: 800;
}

.gap-type-chart {
  gap: 10px;
  display: grid;
}

.gap-type-row {
  grid-template-columns: 120px 1fr 72px;
  align-items: center;
  gap: 9px;
  display: grid;
}

.gap-type-row > span {
  color: #515e82;
  font-size: 10px;
}

.gap-type-row > div, .gap-corrections > div > div {
  background: #eef1f7;
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.gap-type-row > div b, .gap-corrections > div > div b {
  background: #6670f1;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.gap-type-row em {
  text-align: right;
  color: #33416c;
  font-style: normal;
  font-weight: 800;
}

.pill {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 9px;
  display: inline-block;
}

.pill.good {
  color: #168b5d;
  background: #eaf9f2;
}

.pill.warn {
  color: #db7c29;
  background: #fff2e8;
}

.load {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 9px;
  display: inline-block;
}

.load.low {
  color: #198a5f;
  background: #eaf9f2;
}

.load.mid {
  color: #9a7621;
  background: #fff5db;
}

.load.high {
  color: #d94d46;
  background: #fff0ee;
}

.gap-result-bar {
  background: #eef1f6;
  border-radius: 6px;
  height: 22px;
  margin: 18px 0;
  display: flex;
  overflow: hidden;
}

.gap-result-bar b {
  background: #16b477;
}

.gap-result-bar i {
  background: #7869ee;
}

.gap-result-bar em {
  background: #f3b742;
}

.gap-result-bar span {
  background: #ee635d;
}

.gap-result-legend {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid;
}

.gap-result-legend div {
  gap: 7px;
  display: flex;
}

.gap-result-legend b {
  color: #26136f;
  font-size: 16px;
}

.gap-result-legend span {
  color: #687495;
  font-size: 9px;
}

.gap-corrections {
  gap: 10px;
  display: grid;
}

.gap-corrections > div {
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  gap: 8px;
  display: grid;
}

.gap-corrections span {
  font-size: 10px;
}

.gap-corrections strong {
  text-align: right;
}

.gap-automation {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.gap-automation > div {
  border: 1px solid #edf0f6;
  border-radius: 9px;
  padding: 12px;
}

.gap-automation strong {
  color: #2a1676;
  font-size: 22px;
  display: block;
}

.gap-automation span {
  color: #6d7897;
  font-size: 9px;
}

.gap-automation .ring {
  border: 14px solid #7568ed;
  border-radius: 50%;
  flex-direction: column;
  grid-area: 1 / 2 / 3;
  justify-content: center;
  justify-self: center;
  align-items: center;
  width: 125px;
  height: 125px;
  display: flex;
}

.gap-automation .ring b {
  font-size: 24px;
}

.gap-empty {
  text-align: center;
  color: #8b94ad;
  padding: 22px;
}

.gap-foot {
  color: #7b86a5;
  padding: 2px 4px;
  font-size: 9px;
}

.gap-grid.bottom {
  align-items: stretch;
}

@media (max-width: 1100px) {
  .gap-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .gap-grid.two {
    grid-template-columns: 1fr;
  }

  .gap-type-row {
    grid-template-columns: 100px 1fr 65px;
  }
}

@media (max-width: 720px) {
  .gap-kpis {
    grid-template-columns: 1fr;
  }

  .gap-header {
    display: block;
  }

  .gap-actions {
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .gap-card {
    overflow: auto;
  }
}

.gamma-sidebar-accordion details.gamma-nav-group {
  display: block;
}

.gamma-sidebar-accordion details.gamma-nav-group > summary {
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
}

.gamma-sidebar-accordion details.gamma-nav-group > summary::-webkit-details-marker {
  display: none;
}

.gamma-sidebar-accordion details.gamma-nav-group:not([open]) > .gamma-nav-submenu {
  display: none !important;
}

.gamma-sidebar-accordion details.gamma-nav-group[open] > .gamma-nav-submenu {
  display: grid !important;
}

.gamma-sidebar-accordion details.gamma-nav-group[open] > .gamma-nav-parent {
  color: #274fc7;
  background: #f2f6ff;
}

.gamma-sidebar-accordion details.gamma-nav-group[open] .gamma-nav-chevron {
  transform: rotate(180deg);
}

.gamma-sidebar-accordion .gamma-nav-chevron {
  transition: transform .18s;
}

.gamma-delegation-page {
  color: #11134e;
  background: #f7f8fc;
  min-height: 100vh;
  padding: 20px 24px 36px;
}

.gd-breadcrumb {
  color: #68708f;
  margin-bottom: 6px;
  font-size: 12px;
}

.gd-breadcrumb span {
  padding: 0 6px;
}

.gd-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  display: flex;
}

.gd-header h1 {
  margin: 0 0 5px;
  font-size: 30px;
}

.gd-header p {
  color: #68718f;
  margin: 0;
}

.gd-header-actions {
  gap: 10px;
  display: flex;
}

.gd-primary, .gd-secondary {
  border: 1px solid #dfe3ef;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.gd-primary {
  color: #fff;
  background: #6818eb;
  border-color: #6818eb;
}

.gd-secondary {
  color: #252858;
  background: #fff;
}

.gd-notice {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9px;
  margin-bottom: 12px;
  padding: 10px 14px;
}

.gd-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
  display: grid;
}

.gd-kpis article {
  background: #fff;
  border: 1px solid #e3e6ef;
  border-radius: 10px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  display: flex;
}

.gd-kpis i {
  color: #6046ed;
  background: #eef0ff;
  border-radius: 11px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  font-style: normal;
  display: grid;
}

.gd-kpis small, .gd-kpis span {
  color: #767e9b;
  display: block;
}

.gd-kpis strong {
  margin: 2px 0;
  font-size: 28px;
  display: block;
}

.gd-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 12px;
  display: grid;
}

.gd-main, .gd-editor {
  background: #fff;
  border: 1px solid #e1e5ef;
  border-radius: 10px;
}

.gd-tabs {
  border-bottom: 1px solid #e7eaf2;
  gap: 28px;
  padding: 0 14px;
  display: flex;
}

.gd-tabs > * {
  color: #5e6687;
  padding: 14px 0 12px;
  font-size: 12px;
  text-decoration: none;
}

.gd-tabs b {
  color: #5034e8;
  border-bottom: 2px solid #5034e8;
}

.gd-filters {
  grid-template-columns: minmax(260px, 1fr) 180px 180px auto;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.gd-filters input, .gd-filters select, .gd-filters button, .gd-editor input, .gd-editor select, .gd-editor textarea {
  box-sizing: border-box;
  color: #252858;
  background: #fff;
  border: 1px solid #dce0ec;
  border-radius: 7px;
  width: 100%;
  padding: 9px 10px;
}

.gd-filters button {
  width: auto;
}

.gd-table-wrap {
  overflow: auto;
}

.gd-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}

.gd-table-wrap th {
  color: #6e7593;
  text-align: left;
  background: #f8f9fc;
  padding: 10px;
}

.gd-table-wrap td {
  vertical-align: middle;
  border-top: 1px solid #edf0f6;
  padding: 11px 10px;
}

.gd-table-wrap td b, .gd-table-wrap td small {
  display: block;
}

.gd-table-wrap td small {
  color: #77809c;
  margin-top: 2px;
}

.gd-chips {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.gd-chips span {
  color: #5764a8;
  background: #eef2ff;
  border-radius: 5px;
  padding: 4px 6px;
}

.gd-switch {
  background: #d5dae5;
  border: 0;
  border-radius: 999px;
  width: 40px;
  height: 22px;
  padding: 2px;
}

.gd-switch span {
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: all .15s;
  display: block;
}

.gd-switch.on {
  background: #20bf8a;
}

.gd-switch.on span {
  transform: translateX(18px);
}

.gd-more {
  color: #3e42a5;
  font-weight: 800;
  text-decoration: none;
}

.gd-empty {
  text-align: center;
  color: #7a8199;
  padding: 30px !important;
}

.gd-pager {
  color: #6d7593;
  border-top: 1px solid #edf0f6;
  justify-content: space-between;
  align-items: center;
  padding: 13px;
  font-size: 11px;
  display: flex;
}

.gd-pager div {
  align-items: center;
  gap: 6px;
  display: flex;
}

.gd-pager a, .gd-pager b {
  border: 1px solid #e1e4ee;
  border-radius: 6px;
  place-items: center;
  width: 29px;
  height: 29px;
  text-decoration: none;
  display: grid;
}

.gd-pager a.disabled {
  opacity: .35;
  pointer-events: none;
}

.gd-editor {
  padding: 18px;
  position: sticky;
  top: 80px;
}

.gd-editor h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.gd-editor form > label, .gd-editor fieldset {
  gap: 6px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.gd-editor fieldset {
  border: 0;
  padding: 0;
}

.gd-editor legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.gd-editor fieldset label {
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-weight: 500;
  display: flex;
}

.gd-editor fieldset input {
  width: auto;
}

.gd-timeout input[type="number"] {
  width: 54px;
  padding: 4px 6px;
}

.gd-dates {
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 6px;
  margin-bottom: 14px;
  display: grid;
}

.gd-dates label {
  font-size: 11px;
  font-weight: 600;
}

.gd-dates span {
  padding-bottom: 8px;
}

.gd-editor textarea {
  resize: vertical;
  min-height: 74px;
}

.gd-editor-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.gd-editor-actions button {
  border: 0;
}

.gd-editor-actions .gd-secondary {
  border: 1px solid #dfe3ef;
}

.gd-editor-actions .gd-primary {
  border: 1px solid #6818eb;
}

@media (max-width: 1200px) {
  .gd-layout {
    grid-template-columns: 1fr;
  }

  .gd-editor {
    position: static;
  }

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

@media (max-width: 760px) {
  .gd-kpis, .gd-filters {
    grid-template-columns: 1fr;
  }

  .gd-header {
    display: block;
  }

  .gd-header-actions {
    margin-top: 12px;
  }
}

.gamma-payroll-page {
  color: #10205f;
  background: #f6f8fe;
  min-height: 100vh;
  padding: 20px 22px 28px;
}

.gamma-payroll-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.gamma-payroll-breadcrumb {
  color: #6c78a1;
  margin-bottom: 4px;
  font-size: 13px;
}

.gamma-payroll-head h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
}

.gamma-payroll-head h1 em {
  color: #6a43ef;
  vertical-align: middle;
  background: #ebe8ff;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-style: normal;
}

.gamma-payroll-head p {
  color: #67749b;
  margin: 6px 0 0;
}

.gamma-payroll-head-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.gamma-payroll-head-actions a, .gamma-payroll-head-actions button {
  color: #172469;
  background: #fff;
  border: 1px solid #d8def0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}

.gamma-payroll-head-actions button {
  color: #fff;
  background: #6e39e8;
  border-color: #6e39e8;
}

.gamma-payroll-tabs {
  border-bottom: 1px solid #dde3f2;
  gap: 26px;
  margin: 20px 0 12px;
  display: flex;
}

.gamma-payroll-tabs a, .gamma-payroll-tabs b {
  color: #65729a;
  padding: 10px 2px;
  text-decoration: none;
}

.gamma-payroll-tabs b {
  color: #5f39ed;
  border-bottom: 2px solid #5f39ed;
}

.gamma-payroll-filters {
  grid-template-columns: 180px 1fr 1fr 1.3fr auto;
  gap: 10px;
  margin-bottom: 12px;
  display: grid;
}

.gamma-payroll-filters select, .gamma-payroll-filters input, .gamma-payroll-filters button {
  color: #26336f;
  background: #fff;
  border: 1px solid #dbe1ef;
  border-radius: 8px;
  min-width: 0;
  padding: 10px 12px;
}

.gamma-payroll-filters button {
  font-weight: 700;
}

.gamma-payroll-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
  display: grid;
}

.gamma-payroll-kpis article {
  background: #fff;
  border: 1px solid #dfe5f3;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.gamma-payroll-kpis i {
  color: #6944ef;
  background: #edf0ff;
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.gamma-payroll-kpis span {
  color: #68759c;
  font-size: 12px;
  display: block;
}

.gamma-payroll-kpis strong {
  color: #141c66;
  font-size: 24px;
  display: block;
}

.gamma-payroll-kpis small {
  color: #7280a8;
}

.gamma-payroll-layout {
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: start;
  gap: 12px;
  display: grid;
}

.gamma-payroll-card, .gamma-payroll-slip {
  background: #fff;
  border: 1px solid #dce3f0;
  border-radius: 12px;
  overflow: hidden;
}

.gamma-payroll-table-wrap {
  overflow: auto;
}

.gamma-payroll-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.gamma-payroll-table-wrap th {
  text-align: left;
  color: #6b7698;
  white-space: nowrap;
  background: #f6f8fd;
  border-bottom: 1px solid #e4e8f2;
  padding: 10px;
}

.gamma-payroll-table-wrap td {
  vertical-align: middle;
  border-bottom: 1px solid #edf0f6;
  padding: 10px;
}

.gamma-payroll-table-wrap tr.selected {
  background: #f5f2ff;
}

.gamma-payroll-status {
  white-space: nowrap;
  color: #69748e;
  background: #eef1f6;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  display: inline-flex;
}

.gamma-payroll-status.ok {
  color: #268252;
  background: #e7f8ee;
}

.gamma-payroll-status.warn {
  color: #a27609;
  background: #fff5d8;
}

.gamma-payroll-status.danger {
  color: #bf4444;
  background: #ffe9e9;
}

.gamma-payroll-view {
  color: #3150a4;
  border: 1px solid #cad4ea;
  border-radius: 7px;
  padding: 5px 10px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.gamma-payroll-empty {
  text-align: center;
  color: #7c86a3;
  padding: 26px !important;
}

.gamma-payroll-pagination {
  color: #75809d;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  font-size: 12px;
  display: flex;
}

.gamma-payroll-pagination > div {
  align-items: center;
  gap: 6px;
  display: flex;
}

.gamma-payroll-pagination a, .gamma-payroll-pagination b {
  color: #59658a;
  background: #fff;
  border: 1px solid #dde3ef;
  border-radius: 7px;
  place-items: center;
  min-width: 28px;
  height: 28px;
  text-decoration: none;
  display: grid;
}

.gamma-payroll-pagination a.active {
  color: #5e41ed;
  background: #eef1ff;
}

.gamma-payroll-slip {
  padding: 0 14px 14px;
  position: sticky;
  top: 78px;
}

.gamma-payroll-slip > header {
  padding: 14px 0 8px;
}

.gamma-payroll-slip h2 {
  margin: 0 0 8px;
}

.gamma-payroll-person {
  align-items: center;
  gap: 10px;
  display: flex;
}

.gamma-payroll-person > span {
  color: #6043e8;
  background: #eef0ff;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: 800;
  display: grid;
}

.gamma-payroll-person strong, .gamma-payroll-person small {
  display: block;
}

.gamma-payroll-person small {
  color: #717d9d;
  font-size: 11px;
}

.gamma-payroll-slip-actions {
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.gamma-payroll-slip-actions a, .gamma-payroll-slip-actions button {
  color: #344583;
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 11px;
  text-decoration: none;
}

.gamma-payroll-slip-actions button {
  color: #fff;
  background: #6e39e8;
  border-color: #6e39e8;
}

.gamma-payroll-slip-section {
  border-top: 1px solid #e6eaf3;
  padding: 9px 0;
}

.gamma-payroll-slip-section h3 {
  color: #5e43d9;
  margin: 0 0 7px;
  font-size: 12px;
}

.gamma-payroll-slip-row {
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 11px;
  display: flex;
}

.gamma-payroll-slip-row span {
  color: #64708e;
}

.gamma-payroll-slip-row b {
  text-align: right;
  color: #29366c;
  font-weight: 600;
}

.gamma-payroll-slip-row.strong {
  border-top: 1px solid #edf0f6;
  margin-top: 4px;
  padding-top: 6px;
}

.gamma-payroll-slip-row.strong b {
  color: #273aa2;
  font-weight: 800;
}

.gamma-payroll-slip-row.positive {
  background: #eaf9ef;
  border-radius: 6px;
  padding: 6px;
}

.gamma-payroll-slip-row.positive b {
  color: #23784e;
}

.gamma-payroll-slip-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.gamma-payroll-snapshot-note {
  color: #7a84a0;
  margin-top: 6px;
  display: block;
}

.gamma-payroll-primary {
  color: #fff;
  background: #6e39e8;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 1200px) {
  .gamma-payroll-layout {
    grid-template-columns: 1fr;
  }

  .gamma-payroll-slip {
    position: static;
  }

  .gamma-payroll-filters, .gamma-payroll-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* [project]/node_modules/leaflet/dist/leaflet.css [app-client] (css) */
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer {
  position: absolute;
  top: 0;
  left: 0;
}

.leaflet-container {
  overflow: hidden;
}

.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.leaflet-tile::selection {
  background: none;
}

.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}

.leaflet-safari .leaflet-tile-container {
  -webkit-transform-origin: 0 0;
  width: 1600px;
  height: 1600px;
}

.leaflet-marker-icon, .leaflet-marker-shadow {
  display: block;
}

.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}

.leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile {
  width: auto;
  padding: 0;
  max-width: none !important;
  max-height: none !important;
}

.leaflet-container img.leaflet-tile {
  mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}

.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  touch-action: none;
  touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}

.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}

.leaflet-container a {
  -webkit-tap-highlight-color: #33b5e566;
}

.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}

.leaflet-tile-loaded {
  visibility: inherit;
}

.leaflet-zoom-box {
  box-sizing: border-box;
  z-index: 800;
  width: 0;
  height: 0;
}

.leaflet-overlay-pane svg {
  -moz-user-select: none;
}

.leaflet-pane {
  z-index: 400;
}

.leaflet-tile-pane {
  z-index: 200;
}

.leaflet-overlay-pane {
  z-index: 400;
}

.leaflet-shadow-pane {
  z-index: 500;
}

.leaflet-marker-pane {
  z-index: 600;
}

.leaflet-tooltip-pane {
  z-index: 650;
}

.leaflet-popup-pane {
  z-index: 700;
}

.leaflet-map-pane canvas {
  z-index: 100;
}

.leaflet-map-pane svg {
  z-index: 200;
}

.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}

.lvml {
  behavior: url("#default#VML");
  display: inline-block;
  position: absolute;
}

.leaflet-control {
  z-index: 800;
  pointer-events: visiblePainted;
  pointer-events: auto;
  position: relative;
}

.leaflet-top, .leaflet-bottom {
  z-index: 1000;
  pointer-events: none;
  position: absolute;
}

.leaflet-top {
  top: 0;
}

.leaflet-right {
  right: 0;
}

.leaflet-bottom {
  bottom: 0;
}

.leaflet-left {
  left: 0;
}

.leaflet-control {
  float: left;
  clear: both;
}

.leaflet-right .leaflet-control {
  float: right;
}

.leaflet-top .leaflet-control {
  margin-top: 10px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-left .leaflet-control {
  margin-left: 10px;
}

.leaflet-right .leaflet-control {
  margin-right: 10px;
}

.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  transition: opacity .2s linear;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}

.leaflet-zoom-animated {
  transform-origin: 0 0;
}

svg.leaflet-zoom-animated {
  will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform .25s cubic-bezier(0, 0, .25, 1);
  -moz-transition: -moz-transform .25s cubic-bezier(0, 0, .25, 1);
  transition: transform .25s cubic-bezier(0, 0, .25, 1);
}

.leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile {
  transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}

.leaflet-interactive {
  cursor: pointer;
}

.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.leaflet-crosshair, .leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}

.leaflet-popup-pane, .leaflet-control {
  cursor: auto;
}

.leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container {
  pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted;
  pointer-events: auto;
}

.leaflet-container {
  outline-offset: 1px;
  background: #ddd;
}

.leaflet-container a {
  color: #0078a8;
}

.leaflet-zoom-box {
  background: #ffffff80;
  border: 2px dotted #38f;
}

.leaflet-container {
  font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
  font-size: .75rem;
  line-height: 1.5;
}

.leaflet-bar {
  border-radius: 4px;
  box-shadow: 0 1px 5px #000000a6;
}

.leaflet-bar a {
  text-align: center;
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-decoration: none;
  display: block;
}

.leaflet-bar a, .leaflet-control-layers-toggle {
  background-position: 50%;
  background-repeat: no-repeat;
  display: block;
}

.leaflet-bar a:hover, .leaflet-bar a:focus {
  background-color: #f4f4f4;
}

.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-bar a:last-child {
  border-bottom: none;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.leaflet-bar a.leaflet-disabled {
  cursor: default;
  color: #bbb;
  background-color: #f4f4f4;
}

.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  text-indent: 1px;
  font: bold 18px Lucida Console, Monaco, monospace;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  font-size: 22px;
}

.leaflet-control-layers {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 5px #0006;
}

.leaflet-control-layers-toggle {
  background-image: url("../media/layers.3muxcl8sz6330.png");
  width: 36px;
  height: 36px;
}

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url("../media/layers-2x.23wrxu3xxu9-i.png");
  background-size: 26px 26px;
}

.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}

.leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}

.leaflet-control-layers-expanded {
  color: #333;
  background: #fff;
  padding: 6px 10px 6px 6px;
}

.leaflet-control-layers-scrollbar {
  padding-right: 5px;
  overflow: hidden scroll;
}

.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}

.leaflet-control-layers label {
  font-size: 1.08333em;
  display: block;
}

.leaflet-control-layers-separator {
  border-top: 1px solid #ddd;
  height: 0;
  margin: 5px -10px 5px -6px;
}

.leaflet-default-icon-path {
  background-image: url("../media/marker-icon.1le94j_pe_ih1.png");
}

.leaflet-container .leaflet-control-attribution {
  background: #fffc;
  margin: 0;
}

.leaflet-control-attribution, .leaflet-control-scale-line {
  color: #333;
  padding: 0 5px;
  line-height: 1.4;
}

.leaflet-control-attribution a {
  text-decoration: none;
}

.leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus {
  text-decoration: underline;
}

.leaflet-attribution-flag {
  width: 1em;
  height: .6669em;
  vertical-align: baseline !important;
  display: inline !important;
}

.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}

.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}

.leaflet-control-scale-line {
  white-space: nowrap;
  box-sizing: border-box;
  text-shadow: 1px 1px #fff;
  background: #fffc;
  border: 2px solid #777;
  border-top: none;
  padding: 2px 5px 1px;
  line-height: 1.1;
}

.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  box-shadow: none;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  background-clip: padding-box;
  border: 2px solid #0003;
}

.leaflet-popup {
  text-align: center;
  margin-bottom: 20px;
  position: absolute;
}

.leaflet-popup-content-wrapper {
  text-align: left;
  border-radius: 12px;
  padding: 1px;
}

.leaflet-popup-content {
  min-height: 1px;
  margin: 13px 24px 13px 20px;
  font-size: 1.08333em;
  line-height: 1.3;
}

.leaflet-popup-content p {
  margin: 1.3em 0;
}

.leaflet-popup-tip-container {
  pointer-events: none;
  width: 40px;
  height: 20px;
  margin-top: -1px;
  margin-left: -20px;
  position: absolute;
  left: 50%;
  overflow: hidden;
}

.leaflet-popup-tip {
  pointer-events: auto;
  width: 17px;
  height: 17px;
  margin: -10px auto 0;
  padding: 1px;
  transform: rotate(45deg);
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  color: #333;
  background: #fff;
  box-shadow: 0 3px 14px #0006;
}

.leaflet-container a.leaflet-popup-close-button {
  text-align: center;
  color: #757575;
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  font: 16px / 24px Tahoma, Verdana, sans-serif;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
}

.leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus {
  color: #585858;
}

.leaflet-popup-scrolled {
  overflow: auto;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
  -ms-zoom: 1;
}

.leaflet-oldie .leaflet-popup-tip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  width: 24px;
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=.707107, M12=.707107, M21=-.707107, M22=.707107);
  margin: 0 auto;
}

.leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}

.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}

.leaflet-tooltip {
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 6px;
  position: absolute;
  box-shadow: 0 1px 3px #0006;
}

.leaflet-tooltip.leaflet-interactive {
  cursor: pointer;
  pointer-events: auto;
}

.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
  pointer-events: none;
  content: "";
  background: none;
  border: 6px solid #0000;
  position: absolute;
}

.leaflet-tooltip-bottom {
  margin-top: 6px;
}

.leaflet-tooltip-top {
  margin-top: -6px;
}

.leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before {
  margin-left: -6px;
  left: 50%;
}

.leaflet-tooltip-top:before {
  border-top-color: #fff;
  margin-bottom: -12px;
  bottom: 0;
}

.leaflet-tooltip-bottom:before {
  border-bottom-color: #fff;
  margin-top: -12px;
  margin-left: -6px;
  top: 0;
}

.leaflet-tooltip-left {
  margin-left: -6px;
}

.leaflet-tooltip-right {
  margin-left: 6px;
}

.leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
  margin-top: -6px;
  top: 50%;
}

.leaflet-tooltip-left:before {
  border-left-color: #fff;
  margin-right: -12px;
  right: 0;
}

.leaflet-tooltip-right:before {
  border-right-color: #fff;
  margin-left: -12px;
  left: 0;
}

@media print {
  .leaflet-control {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/*# sourceMappingURL=_0yf5yvl._.css.map*/