:root {
  --bg: #eef1f5;
  --panel: #ffffff;
  --border: #dce3ec;
  --text: #000000;
  --muted: #333333;
  --topbar: #1f2329;
  --accent: #2b78d4;
  --accent-dark: #1e5f9e;
  --warning: #fff4dc;
  --me-blue: #2b78d4;
  --me-link: #008ddd;
  --me-topbar: #1e293b;
  /* IT Service Desk typography ? slightly larger for readability */
  --me-font-family: Roboto, Arial, Helvetica, sans-serif;
  --me-font-base: 15px;
  --me-font-content: 15px;
  --me-font-small: 14px;
  --me-font-label: 13px;
  --me-line-height: 1.45;
}

body.me-sdp-skin {
  --accent: var(--me-blue);
  --accent-dark: #1e5f9e;
  --bg: #eef1f5;
  --border: #dce3ec;
  --muted: #333333;
  --text: #000000;
  color: var(--text);
  font-family: var(--me-font-family);
  font-size: var(--me-font-content);
  line-height: var(--me-line-height);
}

body.me-sdp-skin a,
body.me-sdp-skin a:visited {
  color: var(--me-link);
}

body.me-sdp-skin a:hover {
  color: #0070b8;
  text-decoration: underline;
}

body.me-sdp-skin .me-wo-user-link,
body.me-sdp-skin .me-wo-edit-link,
body.me-sdp-skin .me-wo-fcr-toggle,
body.me-sdp-skin .me-wo-more-props,
body.me-sdp-skin .me-attach-browse {
  color: var(--me-link);
}

body.me-sdp-skin .topbar {
  background: var(--me-topbar);
  color: #e8edf2;
  height: 48px;
}

body.me-sdp-skin .brand {
  font-size: var(--me-font-content);
}

body.me-sdp-skin .topbar nav a,
body.me-sdp-skin .top-actions,
body.me-sdp-skin .top-actions a,
body.me-sdp-skin .top-actions span {
  color: #e8edf2;
  font-size: var(--me-font-base);
}

body.me-sdp-skin .topbar nav a:hover,
body.me-sdp-skin .top-actions a:hover {
  color: #fff;
}

body.me-sdp-skin .topbar nav a.active {
  background: var(--me-blue);
  color: #fff;
  font-weight: 600;
}

body.me-sdp-skin .top-actions a.active {
  color: #fff;
  font-weight: 600;
}

body.me-sdp-skin .primary-button,
body.me-sdp-skin .primary-link {
  background: var(--me-blue);
  font-size: var(--me-font-base);
}

body.me-sdp-skin .me-toolbar-btn-primary {
  background: #fff;
  border: 1px solid #2b78d4;
  color: #2b78d4;
}

body.me-sdp-skin .me-wo-resolution-actions .me-toolbar-btn-primary {
  background: #fff;
  color: #2b78d4;
  min-width: 72px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--me-font-family);
  font-size: var(--me-font-content);
  line-height: var(--me-line-height);
}

body.me-sdp-skin main a:not(.button):not(.primary-button):not(.primary-link):not(.me-wo-sidebar-title):not(.me-wo-sidebar-action):not(.me-conv-mail-link) {
  color: var(--me-link);
}

/* ME parity: request list/detail ? body text black; only real links stay blue. */
body.me-requests-page .me-requests-table tbody td,
body.me-requests-page .me-requests-table tbody td button,
body.me-requests-page .me-status-text,
body.me-requests-page .me-priority-chip,
body.me-requests-page .me-assign-tech-trigger,
body.me-requests-page .me-group-inline-trigger,
body.me-requests-page .me-status-inline-trigger {
  color: #000;
}

body.me-requests-page .me-requests-table tbody tr.me-request-unassigned td,
body.me-requests-page .me-requests-table tbody tr.me-request-unassigned .me-unassigned-label {
  color: #000;
}

body.me-requests-page .me-requests-table a.me-link,
body.me-requests-page .me-requests-table a.me-link:visited {
  color: var(--me-link);
}

body.me-requests-page a.me-toolbar-btn,
body.me-requests-page a.me-toolbar-btn:visited,
body.me-requests-page a.me-toolbar-icon,
body.me-requests-page a.me-toolbar-icon:visited,
body.me-requests-page a.me-row-action,
body.me-requests-page a.me-row-action:visited,
body.me-requests-page a.me-list-view-summary,
body.me-requests-page .me-list-view-summary {
  color: #4a5568;
}

body.me-requests-page a.me-toolbar-btn-primary,
body.me-requests-page a.me-toolbar-btn-primary:visited {
  color: #2b78d4;
}

body.me-requests-page .me-assign-tech-trigger:hover,
body.me-requests-page .me-group-inline-trigger:hover,
body.me-requests-page .me-status-inline-trigger:hover {
  color: #000;
}

/* Detail left rail: title is navigable but ME shows it black; requester name is the blue link. */
body.me-sdp-skin.me-request-detail-page main a.me-wo-sidebar-title,
body.me-sdp-skin.me-request-detail-page main a.me-wo-sidebar-title:visited,
body.me-sdp-skin.me-request-detail-page a.me-wo-sidebar-title,
body.me-sdp-skin.me-request-detail-page a.me-wo-sidebar-title:visited,
body.me-request-detail-page a.me-wo-sidebar-title,
body.me-request-detail-page a.me-wo-sidebar-title:visited {
  color: #333;
  font-weight: 700;
  text-decoration: none;
}

body.me-sdp-skin.me-request-detail-page main a.me-wo-sidebar-title:hover,
body.me-sdp-skin.me-request-detail-page a.me-wo-sidebar-title:hover,
body.me-request-detail-page a.me-wo-sidebar-title:hover {
  color: #333;
  text-decoration: underline;
}

body.me-request-detail-page .me-wo-sidebar-meta {
  color: #666;
  font-size: 11px;
  line-height: 1.3;
}

body.me-request-detail-page .me-wo-user-link,
body.me-request-detail-page .me-wo-edit-link,
body.me-request-detail-page a.me-wo-edit-link {
  color: var(--me-link);
}

body.me-request-detail-page .me-wo-sidebar-meta .me-wo-user-link {
  font-size: 11px;
  font-weight: 400;
}

body.me-request-detail-page .me-wo-prop-tech-display,
body.me-request-detail-page .me-wo-prop-tech-display:hover {
  color: #000;
}

body.me-request-detail-page .me-wo-prop-status-trigger {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  gap: 6px;
  margin: 0;
  max-width: 100%;
  padding: 2px 4px;
  text-align: left;
}

body.me-request-detail-page .me-wo-prop-status-trigger:hover,
body.me-request-detail-page .me-wo-prop-status-trigger[aria-expanded="true"] {
  background: #f3f7fc;
  border-color: #c9d7e8;
}

body.me-request-detail-page .me-wo-prop-inline-select {
  border: 1px solid #c9d7e8;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  max-width: 100%;
  min-width: 160px;
  padding: 4px 8px;
}

body.me-request-detail-page .me-wo-header h1,
body.me-request-detail-page .me-wo-header-title-text {
  color: #000;
}

body.me-sdp-skin .topbar a,
body.me-sdp-skin .top-actions a {
  color: inherit;
}

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

.nav-disabled {
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}

.subnav a {
  color: var(--text);
  margin-right: 18px;
}

.subnav a:hover {
  color: var(--accent);
}

.compact-list a {
  display: block;
}

.compact-list a:hover strong {
  color: var(--accent);
}

.workflow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.security-banner {
  align-items: center;
  background: var(--warning);
  color: #7a5314;
  display: flex;
  gap: 18px;
  height: 28px;
  justify-content: center;
  font-size: 12px;
}

.security-banner button {
  background: #ff6b2c;
  border: 0;
  border-radius: 2px;
  color: #fff;
  padding: 3px 10px;
}

.topbar {
  align-items: center;
  background: var(--topbar);
  color: #dce3eb;
  display: flex;
  height: 42px;
  padding: 0 14px;
}

.app-switcher {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 22px;
  justify-content: center;
  margin-right: 12px;
  width: 22px;
}

.app-switcher-icon,
.topbar-search-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.app-switcher-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dce3eb'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.topbar-search-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dce3eb' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.brand {
  color: #fff;
  font-weight: 600;
  margin-right: 18px;
}

.f3-app-brand {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  margin-right: 18px;
}

.f3-app-brand-badge {
  align-items: center;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  letter-spacing: -0.02em;
  width: 28px;
}

.f3-app-brand-name {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.f3-app-brand-name span {
  color: #94a3b8;
  font-weight: 500;
}

.topbar nav {
  display: flex;
  flex: 1;
  height: 100%;
}

.topbar nav a {
  align-items: center;
  display: flex;
  padding: 0 12px;
}

.topbar nav a.active {
  background: var(--accent);
  color: #fff;
}

.top-actions {
  align-items: center;
  display: flex;
  gap: 14px;
  position: relative;
}

.topbar-search-btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 15px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 28px;
}

.topbar-search-btn.active {
  color: #7ec8ff;
}

/* ME-style Admin Settings gear (icon-only, rotate on hover) */
.me-settings-btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: #e8edf2;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0;
  height: 42px;
  justify-content: center;
  line-height: 0;
  margin: 0 -2px;
  overflow: hidden;
  padding: 0 10px;
  text-decoration: none;
  width: auto;
}

.me-settings-btn-icon {
  display: block;
  flex-shrink: 0;
  height: 18px;
  transition: transform 0.45s ease;
  width: 18px;
}

.me-settings-btn:hover,
.me-settings-btn.active {
  background: var(--me-blue);
  color: #fff;
}

.me-settings-btn:hover .me-settings-btn-icon,
.me-settings-btn.active .me-settings-btn-icon {
  transform: rotate(180deg);
}

body.me-sdp-skin .top-actions a.me-settings-btn,
body.me-sdp-skin .top-actions a.me-settings-btn:hover,
body.me-sdp-skin .top-actions a.me-settings-btn.active {
  color: #fff;
  font-size: 0;
  font-weight: 400;
}

body.me-admin-settings-page .top-actions a.me-settings-btn.active {
  background: var(--me-blue);
  color: #fff;
  font-weight: 400;
}

.topbar-search-panel {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  z-index: 100;
}

.topbar-search-panel form {
  align-items: center;
  display: flex;
  gap: 8px;
}

.topbar-search-panel input[type="search"] {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  font-size: 13px;
  min-width: 0;
  padding: 6px 10px;
}

.topbar-search-panel button[type="submit"] {
  background: #2b78d4;
  border: 0;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 6px 12px;
}

.subnav {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  font-size: var(--me-font-base);
  gap: 18px;
  height: 36px;
  padding: 0 14px;
}

body.me-requests-page .subnav {
  display: none;
}

body.me-request-detail-page .subnav {
  display: none;
}

main {
  padding: 10px;
}

.home-hero {
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #f2e8f7);
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 18px;
}

.home-hero h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

.home-hero p {
  color: var(--muted);
  margin: 0;
}

.metric-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 10px;
}

.metric-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 14px;
}

.metric-card span {
  color: var(--muted);
  display: block;
}

.metric-card strong {
  display: block;
  font-size: 24px;
  margin-top: 4px;
}

.card,
.request-preview,
.request-list,
.detail-main,
.right-panel,
.form-shell {
  background: var(--panel);
  border: 1px solid var(--border);
}

.dashboard-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 2fr 1.1fr 1.1fr;
}

.card {
  min-height: 170px;
  padding: 14px;
}

.summary-card {
  grid-column: 1;
}

.announcements-card {
  grid-column: 2 / span 2;
}

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

.recent-card {
  grid-column: 3;
  grid-row: span 2;
}

.card-title,
.list-toolbar,
.ticket-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.compact-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.compact-list li {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.compact-list span,
.empty-state,
.empty-list {
  color: var(--muted);
}

.empty-illustration {
  align-items: center;
  color: var(--muted);
  display: flex;
  height: 110px;
  justify-content: center;
}

.catalog-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  margin-top: 12px;
}

.catalog-tile {
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.catalog-tile span {
  color: var(--muted);
}

.page-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  margin-bottom: 12px;
}

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

.page-header p {
  color: var(--muted);
  margin: 0;
  max-width: 520px;
}

.catalog-page .catalog-featured {
  margin-bottom: 12px;
}

.catalog-grid--featured {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.catalog-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.catalog-section-card {
  display: block;
  margin: 0;
  min-height: 0;
  width: 100%;
}

.catalog-section-card > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 12px 14px;
}

.catalog-section-card > summary::-webkit-details-marker {
  display: none;
}

.catalog-section-card > summary::before {
  color: #6b7785;
  content: "\25B8";
  flex-shrink: 0;
  font-size: 11px;
}

.catalog-section-card[open] > summary::before {
  content: "\25BE";
}

.catalog-section-body {
  border-top: 1px solid var(--border);
  padding: 0 14px 12px;
}

.catalog-section-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.catalog-section-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

.catalog-service-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 0;
}

.catalog-service-link {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: block;
  font-size: 13px;
  line-height: 1.35;
  padding: 9px 8px 9px 10px;
  transition: background 0.12s ease, color 0.12s ease;
}

.catalog-service-link:hover {
  background: #f5eef9;
  border-left: 3px solid var(--accent);
  color: var(--accent);
  padding-left: 7px;
}

.catalog-service-link:last-child {
  border-bottom: 0;
}

.catalog-service-muted {
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  display: block;
  font-size: 12px;
  padding: 8px 10px;
}

.catalog-service-muted:last-child {
  border-bottom: 0;
}

.summary-list div,
.right-panel dl div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

.requests-shell,
.detail-shell {
  display: grid;
  gap: 10px;
}

.requests-shell {
  grid-template-columns: 330px 1fr;
}

.detail-shell {
  grid-template-columns: 1fr 310px;
}

.request-list {
  min-height: calc(100vh - 120px);
}

.list-toolbar {
  border-bottom: 1px solid var(--border);
  padding: 12px;
}

.primary-link,
.primary-button {
  background: var(--accent);
  border: 0;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  padding: 7px 12px;
}

.request-row {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}

.request-row.selected {
  background: #efe6f4;
  border-left: 3px solid var(--accent);
}

.request-row span {
  color: var(--muted);
}

.request-preview,
.detail-main,
.right-panel {
  padding: 14px;
}

.ticket-heading h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.ticket-heading p {
  color: var(--muted);
  margin: 0;
}

.tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 18px;
  margin: 16px 0;
}

.tabs span,
.tabs a,
.tabs a.tab-link,
.tabs button.tab-btn {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  padding: 0 0 10px;
  text-decoration: none;
  width: auto;
}

.tabs span.active,
.tabs a.active,
.tabs a.tab-link.active,
.tabs button.tab-btn.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.description-card,
.conversation-card {
  border: 1px solid var(--border);
  margin-bottom: 14px;
  padding: 12px;
}

.description-card h2,
.conversation-card h2,
.right-panel h2,
.right-panel h3 {
  font-size: 14px;
  margin: 0 0 10px;
}

.attachment-drop {
  border-top: 1px dashed var(--border);
  color: var(--muted);
  margin-top: 16px;
  padding-top: 12px;
  text-align: center;
}

.properties-grid,
.form-grid {
  display: grid;
  gap: 14px 30px;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.properties-grid label,
.form-grid label,
.wide-field {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 2px;
  font: inherit;
  padding: 8px;
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  border: initial;
  border-radius: initial;
  flex: 0 0 auto;
  height: auto;
  margin: 0 4px 0 0;
  padding: 0;
  width: auto;
}

textarea {
  resize: vertical;
}

.form-title {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  padding: 14px;
}

.form-title.embedded {
  margin: -18px -18px 18px;
}

.form-title h1 {
  font-size: 17px;
  margin: 0;
}

.request-form {
  padding: 18px;
}

.wide-field {
  margin-top: 16px;
}

.dynamic-fields {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 16px;
}

.dynamic-fields h2 {
  font-size: 14px;
  margin: 0 0 12px;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.button {
  background: #f4f6f8;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  padding: 7px 12px;
}

.sla-pill {
  background: #f6f0df;
  border: 1px solid #e2d4ad;
  border-radius: 2px;
  color: #7b6430;
  padding: 5px 9px;
  font-size: 12px;
  display: inline-block;
  margin-right: 4px;
}

.sla-pill.sla-met { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.sla-pill.sla-breached { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.sla-pill.sla-at-risk { background: #fff3e0; border-color: #ffcc80; color: #e65100; }
.sla-pill.sla-on-track { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }
.sla-pill.sla-paused { background: #eceff1; border-color: #b0bec5; color: #455a64; }
.sla-pill.imported { background: #f3e5f5; border-color: #ce93d8; color: #6a1b9a; }

.saved-views-bar, .list-filters, .save-view-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.saved-views-bar a.active { font-weight: 700; text-decoration: underline; }

.chart-list { list-style: none; margin: 0; padding: 0; }
.chart-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }

.sla-chart-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chart-bar { padding: 10px; border-radius: 4px; text-align: center; }
.chart-bar.breached { background: #ffebee; }
.chart-bar.at-risk { background: #fff3e0; }
.chart-bar.on-track { background: #e3f2fd; }
.chart-bar.no-sla { background: #f5f5f5; }

.checklist-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.checklist-row .done { text-decoration: line-through; color: var(--muted); }

.asset-picker-wrap { position: relative; }
.asset-picker-results {
  border: 1px solid var(--border);
  background: #fff;
  max-height: 200px;
  overflow: auto;
  position: absolute;
  z-index: 10;
  width: 100%;
}
.asset-picker-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.asset-picker-results button:hover { background: #f0f4f8; }

/* ME-style searchable combobox (requester, assets on Add Request) */
.me-combobox {
  flex: 1;
  min-width: 0;
  position: relative;
}
/* Hide native selects only when replaced by me-combobox.js (requester/assets). */
.me-combobox > select.me-combobox-native,
select#id_requester.me-combobox-native,
select#id_assets.me-combobox-native {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
}
.me-notify-users-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.me-email-notify-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.me-email-notify-extra {
  border: 1px solid #c5cdd8;
  border-radius: 8px;
  font-size: 13px;
  min-height: 34px;
  padding: 6px 8px;
  width: 100%;
}
.me-preview-field .me-field-hint {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}
.me-notify-users-wrap .me-field-hint {
  color: #6b7785;
  font-size: 12px;
}
.me-notify-users-wrap .me-combobox {
  width: 100%;
}
.me-combobox-control {
  align-items: stretch;
  display: flex;
  gap: 0;
  width: 100%;
}
.me-combobox-trigger {
  align-items: center;
  background: #fff;
  border: 1px solid #d6dde6;
  cursor: pointer;
  display: flex;
  flex: 1;
  gap: 4px;
  min-height: 28px;
  min-width: 0;
  padding: 2px 8px;
  text-align: left;
}
.me-combobox-trigger::before {
  color: #6b7785;
  content: "\25BE";
  flex-shrink: 0;
  font-size: 10px;
}
.me-combobox.open .me-combobox-trigger::before {
  content: "\25B4";
}
.me-combobox-chips {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.me-combobox-chip {
  align-items: center;
  background: #eef2f6;
  border-radius: 2px;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  padding: 1px 6px;
}
.me-combobox-chip-remove {
  background: transparent;
  border: none;
  color: #6d7580;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.me-combobox-placeholder {
  color: #9aa3ad;
  flex: 1;
  font-size: 12px;
}
.me-combobox-add {
  flex-shrink: 0;
  text-decoration: none;
}
.me-combobox-add-stub {
  cursor: default;
  opacity: 0.55;
}
.me-combobox-menu[hidden] {
  display: none !important;
}
.me-combobox-menu {
  background: #fff;
  border: 1px solid #dce3ec;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  left: 0;
  position: absolute;
  right: 28px;
  top: calc(100% + 2px);
  z-index: 20;
}
.me-combobox-search {
  border-bottom: 1px solid #edf0f4;
  padding: 8px;
  position: relative;
}
.me-combobox-search::before {
  color: #6b7785;
  content: "\2315";
  font-size: 13px;
  left: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.me-combobox-search input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 12px;
  padding: 5px 8px 5px 28px;
  width: 100%;
}
.me-combobox-list {
  list-style: none;
  margin: 0;
  max-height: 168px;
  overflow-y: auto;
  padding: 0;
}
.me-combobox-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
}
.me-combobox-option:hover,
.me-combobox-option.selected {
  background: #e8f1fb;
  color: #1a4f8b;
}
.me-combobox--locked {
  flex: 1;
  min-width: 0;
}
.me-combobox-locked-input {
  cursor: default;
  width: 100%;
}
.me-combobox-option-label {
  font-size: 12px;
}
.me-combobox-option-meta {
  color: #6d7580;
  font-size: 11px;
}
.me-combobox-empty {
  color: #9aa3ad;
  font-size: 12px;
  padding: 10px;
}
.add-request-readonly {
  background: #f5f6f8;
  border: 1px solid #d6dde6;
  color: #333;
  flex: 1;
  font-size: 12px;
  min-height: 28px;
  padding: 5px 8px;
}

.approval-step,
.requester-card,
.comment {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
}

.avatar {
  align-items: center;
  background: #e7ebef;
  border-radius: 50%;
  display: flex;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.comment-form {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}

.approval-actions {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.lifecycle-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.lifecycle-steps span {
  background: #eef1f5;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--muted);
  padding: 6px 10px;
}

.lifecycle-steps span.done {
  background: #e9f8ef;
  border-color: #99d6ad;
  color: #247a3d;
}

.lifecycle-steps span.current {
  background: #fff4dc;
  border-color: #f0bf64;
  color: #966415;
}

.history-list {
  border-top: 1px solid var(--border);
}

.history-item {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.history-item span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.history-item p {
  margin: 4px 0 0;
}

.quick-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.settings-shell {
  display: grid;
  gap: 12px;
  grid-template-columns: 250px 1fr;
}

.settings-sidebar,
.settings-content {
  background: var(--panel);
  border: 1px solid var(--border);
}

.settings-sidebar {
  align-self: start;
  padding: 14px;
}

.settings-sidebar h2 {
  font-size: 16px;
  margin: 0 0 12px;
}

.settings-sidebar a {
  border-radius: 3px;
  color: var(--muted);
  display: block;
  padding: 9px 10px;
}

.settings-sidebar a.selected,
.top-actions a.active {
  color: var(--accent);
  font-weight: 600;
}

.settings-content {
  padding: 16px;
}

.settings-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  margin: -16px -16px 16px;
  padding: 16px;
}

.settings-header h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.settings-header p,
.settings-help {
  color: var(--muted);
  margin: 0;
}

.settings-card {
  border: 1px solid var(--border);
  margin-bottom: 14px;
  padding: 14px;
}

.settings-card h2 {
  font-size: 15px;
  margin: 0 0 12px;
}

.checkbox-line {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.form-grid label.checkbox-line {
  align-items: flex-start;
  flex-direction: row;
  gap: 10px;
}

.checkbox-line input,
.form-grid label.checkbox-line input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 3px 0 0;
  width: auto;
}

.checkbox-line-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.checkbox-line-label {
  color: inherit;
  font-weight: 500;
  line-height: 1.35;
}

.checkbox-line .field-help {
  margin-top: 0;
}

.settings-help {
  margin-bottom: 12px;
}

.settings-footer {
  display: flex;
  justify-content: flex-end;
}

.notice {
  border: 1px solid var(--border);
  margin-bottom: 12px;
  padding: 10px;
}

.notice.success {
  background: #e9f8ef;
  border-color: #99d6ad;
}

.me-flash-stack {
  margin: 12px 16px 0;
}

.me-flash-notice {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.28s ease, margin 0.28s ease, padding 0.28s ease;
}

.me-flash-notice-text {
  flex: 1;
}

.me-flash-notice-close {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
  padding: 0 2px;
}

.me-flash-notice-close:hover {
  opacity: 1;
}

.me-flash-notice.me-flash-hiding {
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 0;
  padding-top: 0;
  transform: translateY(-6px);
}

.me-page-loading {
  align-items: center;
  background: rgba(20, 28, 40, 0.28);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 12000;
}

.me-page-loading[hidden] {
  display: none !important;
}

.me-page-loading-card {
  align-items: center;
  background: #fff;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;
  padding: 22px 28px;
}

.me-page-loading-spinner {
  animation: me-page-spin 0.75s linear infinite;
  border: 3px solid #d9e3ef;
  border-radius: 50%;
  border-top-color: #2b78d4;
  height: 28px;
  width: 28px;
}

.me-page-loading-text {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
}

body.me-page-loading-active {
  cursor: progress;
}

@keyframes me-page-spin {
  to {
    transform: rotate(360deg);
  }
}

.ad-test-box {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
}

.deployment-note {
  background: #f8fbff;
  border: 1px solid #d7e5f5;
  margin-top: 14px;
  padding: 14px;
}

.deployment-note h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

.deployment-note ul {
  margin: 10px 0;
  padding-left: 20px;
}

.deployment-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  margin-top: 12px;
}

.deployment-grid div {
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
}

.deployment-grid label {
  color: var(--muted);
  font-size: 12px;
}

.deployment-grid code {
  color: #26313d;
  font-family: Consolas, "Courier New", monospace;
  word-break: break-all;
}

.deployment-guide {
  margin-top: 18px;
}

.deployment-guide h3 {
  font-size: 14px;
  margin: 16px 0 8px;
}

.deployment-details {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
}

.deployment-details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 8px;
}

.deployment-steps {
  margin: 8px 0 12px;
  padding-left: 22px;
}

.deployment-steps li {
  margin-bottom: 6px;
}

.deployment-script-list {
  margin: 0 0 12px;
  padding-left: 22px;
}

.deployment-auth-table code {
  font-size: 12px;
}

.ad-test-box h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

.ad-test-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(260px, 1fr) auto;
  margin-top: 10px;
  max-width: 720px;
}

.ad-test-result {
  border: 1px solid var(--border);
  margin-top: 12px;
  padding: 12px;
}

.ad-test-result.success {
  background: #e9f8ef;
  border-color: #99d6ad;
}

.ad-test-result.error {
  background: #fff0f0;
  border-color: #e0a0a0;
}

.ad-test-result > span {
  color: var(--muted);
  display: block;
  margin-top: 5px;
}

.ad-test-result dl {
  display: grid;
  gap: 6px 20px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  margin: 12px 0;
}

.ad-test-result dl div {
  display: flex;
  justify-content: space-between;
}

.ad-test-result dt {
  color: var(--muted);
}

.ad-test-result ul {
  margin: 8px 0 0;
  max-height: 160px;
  overflow: auto;
}

.role-mapping-table {
  border: 1px solid var(--border);
  margin-top: 12px;
}

.role-mapping-head,
.role-mapping-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 80px minmax(160px, 0.8fr) minmax(320px, 1.6fr) minmax(150px, 0.7fr);
  padding: 8px 10px;
}

.role-mapping-head {
  background: #f7f8fa;
  color: var(--muted);
  font-weight: 600;
}

.role-mapping-row + .role-mapping-row,
.role-mapping-head + .role-mapping-row {
  border-top: 1px solid var(--border);
}

.user-role-badge {
  background: #eef2f7;
  border: 1px solid #d5dbe3;
  border-radius: 4px;
  color: #4d5864;
  font-size: 11px;
  padding: 2px 8px;
  text-transform: capitalize;
}

.requester-hero h1 {
  font-size: 22px;
}

.requester-metrics .metric-card span {
  font-size: 11px;
}

.requester-home {
  grid-template-columns: 1fr 1fr;
}

.permission-matrix-wrap {
  overflow-x: auto;
}

.permission-matrix {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 720px;
  width: 100%;
}

.permission-matrix th,
.permission-matrix td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
}

.permission-matrix th:first-child,
.permission-matrix td:first-child {
  min-width: 220px;
  text-align: left;
}

.permission-matrix td strong {
  display: block;
  font-weight: 600;
}

.permission-matrix td small {
  color: var(--muted);
  display: block;
  font-size: 10px;
}

.permission-cell input {
  margin: 0 auto;
}

.role-mapping-row input[type="checkbox"] {
  width: auto;
}

.template-manager,
.template-detail {
  background: var(--panel);
  border: 1px solid var(--border);
}

.template-manager-top,
.header-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.template-manager-top {
  background: #f8f9fb;
  border-bottom: 1px solid var(--border);
  min-height: 45px;
  padding: 8px 12px;
}

.template-manager-top h1 {
  font-size: 16px;
  margin: 0;
}

.template-manager-actions {
  display: flex;
  gap: 6px;
}

.template-manager-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: calc(100vh - 150px);
}

.template-admin-shell {
  background: #fff;
  border-top: 1px solid #edf0f4;
  margin: -10px;
  min-height: calc(100vh - 102px);
}

.template-admin-title {
  align-items: flex-start;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  min-height: 44px;
  padding: 12px 18px;
}

.template-admin-title h1 {
  color: #5b626c;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 4px;
}

.template-admin-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  max-width: 640px;
}

.template-admin-hint a {
  color: var(--accent);
  text-decoration: underline;
}

.template-admin-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.template-admin-tabs {
  align-items: flex-end;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 22px;
  height: 42px;
  padding: 0 20px;
}

.template-admin-tabs a {
  color: #5f6771;
  height: 42px;
  line-height: 42px;
  position: relative;
}

.template-admin-tabs a.active {
  color: #8e44ad;
}

.template-admin-tabs a.active::after {
  background: #8e44ad;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

.template-admin-toolbar {
  align-items: center;
  display: flex;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
}

.template-admin-toolbar button,
.template-admin-toolbar select,
.template-small-button {
  background: #fff;
  border: 1px solid #e1e5ea;
  border-radius: 2px;
  color: #4d5661;
  font: inherit;
  min-height: 28px;
  padding: 4px 9px;
}

.template-admin-toolbar button:disabled {
  color: #aeb5be;
}

.template-admin-toolbar span {
  color: #6d7580;
}

.template-filter-form {
  margin: 0;
}

.serviceplus-grid {
  border-collapse: collapse;
  color: #333c46;
  margin: 0 20px;
  table-layout: fixed;
  width: calc(100% - 40px);
}

.serviceplus-grid th {
  background: #f7f8fa;
  border: 1px solid #edf0f4;
  color: #626a74;
  font-size: 12px;
  font-weight: 600;
  height: 30px;
  padding: 0 8px;
  text-align: left;
  text-transform: uppercase;
}

.serviceplus-grid td {
  border-bottom: 1px solid #edf0f4;
  color: #37404a;
  height: 32px;
  overflow: hidden;
  padding: 0 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceplus-grid tbody tr:hover {
  background: #fffaf0;
}

.serviceplus-grid strong {
  font-weight: 500;
}

.check-col {
  text-align: center;
  width: 38px;
}

.handle-col,
.icon-col,
.serviceplus-grid .status-col {
  text-align: center;
  width: 42px;
}

.row-handle {
  color: #8f98a3;
  font-size: 15px;
}

.catalog-icon {
  background: linear-gradient(135deg, #dcecff, #a8c9ef);
  border: 1px solid #a7bfd7;
  border-radius: 3px;
  display: inline-block;
  height: 20px;
  width: 22px;
}

.catalog-icon.icon-purple {
  background: linear-gradient(135deg, #f1e4ff, #c7b3de);
}

.doc-icon {
  color: #9aa3ad;
  font-size: 15px;
}

.doc-icon.cyan {
  color: #53bad0;
}

.doc-icon.muted {
  color: #aeb5be;
}

.ok-dot {
  align-items: center;
  border: 1px solid #89c985;
  border-radius: 50%;
  color: #58aa52;
  display: inline-flex;
  font-size: 10px;
  height: 15px;
  justify-content: center;
  width: 15px;
}

.inactive-dot {
  align-items: center;
  border: 1px solid #c5ccd6;
  border-radius: 50%;
  color: #9aa3ad;
  display: inline-flex;
  font-size: 10px;
  height: 15px;
  justify-content: center;
  width: 15px;
}

.me-template-filter-form {
  display: inline;
  margin: 0;
}

.category-grid th:nth-child(4),
.category-grid td:nth-child(4) {
  width: 34%;
}

.incident-grid-v9 {
  min-width: 1260px;
}

.incident-grid-v9 th,
.incident-grid-v9 td {
  font-size: 12px;
  vertical-align: top;
}

.incident-grid-v9 th {
  line-height: 1.2;
  padding-left: 7px;
  padding-right: 7px;
  white-space: normal;
}

.incident-grid-v9 td {
  padding-left: 7px;
  padding-right: 7px;
}

.incident-grid-v9 th:nth-child(1),
.incident-grid-v9 td:nth-child(1) {
  width: 34px;
}

.incident-grid-v9 th:nth-child(2),
.incident-grid-v9 td:nth-child(2),
.incident-grid-v9 th:nth-child(3),
.incident-grid-v9 td:nth-child(3) {
  width: 32px;
}

.incident-grid-v9 th:nth-child(4),
.incident-grid-v9 td:nth-child(4) {
  width: 210px;
}

.incident-grid-v9 th:nth-child(5),
.incident-grid-v9 td:nth-child(5) {
  width: 145px;
}

.incident-grid-v9 th:nth-child(6),
.incident-grid-v9 td:nth-child(6) {
  width: 190px;
}

.incident-grid-v9 th:nth-child(7),
.incident-grid-v9 td:nth-child(7) {
  width: 250px;
}

.incident-grid-v9 th:nth-child(8),
.incident-grid-v9 td:nth-child(8) {
  width: 72px;
}

.incident-grid-v9 th:nth-child(9),
.incident-grid-v9 td:nth-child(9) {
  width: 110px;
}

.incident-grid-v9 th:nth-child(10),
.incident-grid-v9 td:nth-child(10) {
  width: 58px;
}

.incident-grid-v9 th:nth-child(11),
.incident-grid-v9 td:nth-child(11) {
  width: 105px;
}

.incident-grid-v9 th:nth-child(12),
.incident-grid-v9 td:nth-child(12) {
  width: 120px;
}

.incident-grid-v9 .num-col {
  text-align: center;
}

.me-incident-table-wrap {
  overflow-x: auto;
}

.me-incident-admin-toolbar .me-incident-search-form {
  display: inline;
  margin: 0;
}

.me-incident-admin-toolbar .me-toolbar-search-wrap {
  margin: 0;
}

.task-grid th:nth-child(4),
.task-grid td:nth-child(4),
.task-grid th:nth-child(5),
.task-grid td:nth-child(5) {
  width: 18%;
}

.workflow-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-chain span {
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 7px 10px;
}

.workflow-chain span::after {
  color: var(--muted);
  content: " \2192";
}

.workflow-chain span:last-child::after {
  content: "";
}

.workflow-summary-grid {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 20px;
}

.workflow-summary-grid label {
  color: var(--muted);
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.workflow-summary-grid strong {
  font-size: 1rem;
}

.workflow-approval-list,
.workflow-task-list {
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.workflow-approval-list > div,
.workflow-task-list > div {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 10px;
}

.workflow-approval-list > div + div,
.workflow-task-list > div + div {
  border-top: 1px solid var(--border);
}

.workflow-approval-list .table-head,
.workflow-task-list .table-head {
  background: #f7f8fa;
  color: var(--muted);
  font-weight: 600;
}

.template-table {
  border: 1px solid var(--border);
}

.template-table > div {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 9px 10px;
}

.template-table > div + div {
  border-top: 1px solid var(--border);
}

.template-table .table-head {
  background: #f7f8fa;
  color: var(--muted);
  font-weight: 600;
}

.login-body {
  align-items: center;
  background: linear-gradient(135deg, #202a33, #71368a);
  display: flex;
  min-height: 100vh;
  justify-content: center;
}

.login-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 430px;
  padding: 26px;
  width: 100%;
}

.login-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.login-brand .app-switcher-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23334155'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.login-brand h1 {
  font-size: 22px;
  margin: 0;
}

.login-brand p,
.login-help {
  color: var(--muted);
  margin: 4px 0 0;
}

.sso-status {
  border: 1px solid var(--border);
  margin-bottom: 14px;
  padding: 10px;
}

.sso-status.success {
  background: #e9f8ef;
  border-color: #99d6ad;
}

.sso-status.warning {
  background: #fff4dc;
  border-color: #f0bf64;
}

.login-form p {
  margin: 0 0 12px;
}

.login-form label {
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.login-keep-signed-in {
  margin: 4px 0 14px;
}

.login-keep-signed-in-label {
  align-items: center;
  color: #334155 !important;
  cursor: pointer;
  display: inline-flex !important;
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  margin-bottom: 0 !important;
  user-select: none;
}

.login-keep-signed-in-label input[type="checkbox"] {
  accent-color: #0b5fff;
  cursor: pointer;
  flex-shrink: 0;
  height: 16px;
  margin: 0;
  width: 16px;
}

.login-form .primary-button {
  width: 100%;
}

.sso-button {
  display: block;
  margin-bottom: 14px;
  text-align: center;
}

.sso-button.secondary {
  background: #f0f0f5;
  border: 1px solid #c8c8d4;
  color: #333;
}

.sso-silent-hint {
  font-size: 0.9rem;
  margin: 10px 0 0;
}

.workflow-button {
  background: #bbf08b;
  border: 1px solid #8bd95c;
  border-radius: 50%;
  bottom: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: #2c6d1f;
  font-weight: 700;
  height: 96px;
  position: fixed;
  right: 28px;
  width: 96px;
}

.template-categories-board {
  padding: 0 16px 16px;
}

.template-categories-header {
  align-items: center;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  justify-content: space-between;
  padding: 12px 4px;
}

.template-categories-header h2 {
  font-size: 15px;
  margin: 0;
}

.template-categories-header-actions {
  display: flex;
  gap: 8px;
}

.template-categories-columns {
  display: grid;
  gap: 0;
  grid-template-columns: 320px 1fr;
  min-height: 420px;
}

.template-categories-list,
.template-category-templates {
  border-right: 1px solid #edf0f4;
}

.template-category-templates {
  border-right: 0;
}

.template-categories-list-head {
  align-items: center;
  background: #f7f8fa;
  border-bottom: 1px solid #edf0f4;
  color: #5f6771;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  justify-content: space-between;
  padding: 8px 12px;
}

.template-category-items,
.template-category-template-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.template-category-items li,
.template-category-template-items li {
  align-items: center;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
}

.template-category-items li.selected {
  background: #e8f0fb;
  border-left: 3px solid #2b78d4;
  padding-left: 7px;
}

.template-category-items li a {
  color: #2b78d4;
  flex: 1;
  font-weight: 600;
}

.category-index {
  color: #9aa3ad;
  font-size: 11px;
  min-width: 16px;
  text-align: right;
}

.category-count {
  background: #eef1f5;
  border-radius: 10px;
  color: #6d7580;
  font-size: 11px;
  padding: 2px 7px;
}

.template-type-icon {
  border-radius: 3px;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}

.template-type-icon.incident {
  background: linear-gradient(180deg, #ffd45a, #f0a500);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.template-type-icon.service {
  background: #d9ecff;
  border: 1px solid #9cc7ef;
  border-radius: 50%;
}

.template-item-body {
  flex: 1;
  min-width: 0;
}

.template-item-body strong {
  color: #2b78d4;
}

.template-item-body p {
  color: #6d7580;
  font-size: 11px;
  line-height: 1.35;
  margin: 2px 0 0;
}

.template-item-actions {
  display: flex;
  gap: 6px;
}

.template-item-actions a {
  color: #6d7580;
  font-size: 14px;
}

.template-editor-shell {
  margin: -10px;
  min-height: calc(100vh - 102px);
}

.template-editor-header {
  align-items: flex-start;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 18px;
}

.template-editor-header h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.template-editor-header p {
  color: var(--muted);
  margin: 0;
}

.template-editor-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-editor-tabs {
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0 18px;
}

.template-editor-tabs a {
  border-bottom: 2px solid transparent;
  color: #5f6771;
  padding: 10px 0;
}

.template-editor-tabs a.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.template-editor-tabs a.disabled,
.template-editor-tabs a.tab-locked {
  color: #9aa3ad;
  cursor: not-allowed;
}

.template-editor-tabs a.tab-locked:hover {
  color: #6d7580;
}

.template-unlock-banner {
  background: #fff8db;
  border: 1px solid #f0d060;
  border-radius: 6px;
  color: #6d5a00;
  font-size: 13px;
  margin: 12px 18px 0;
  padding: 10px 14px;
}

.template-unlock-banner-flash {
  animation: unlock-banner-pulse 0.6s ease-in-out 2;
  outline: 2px solid #f0a500;
}

@keyframes unlock-banner-pulse {
  50% { background: #fff3c4; }
}

.template-save-hint {
  color: var(--muted);
  font-size: 12px;
  margin-left: 10px;
}

.template-editor-panel {
  margin: 14px 18px;
  padding: 16px;
}

.template-editor-help {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 14px;
}

.template-form-grid {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.template-form-grid.compact {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.template-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.template-form-field span {
  color: var(--muted);
  font-size: 12px;
}

.template-form-field.checkbox-field {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.template-form-field.checkbox-field span {
  flex: 1 1 100%;
}

.template-form-field small {
  color: var(--muted);
  font-size: 11px;
}

.template-form-field .field-error {
  color: #c0392b;
  font-style: normal;
}

.template-editor-actions {
  margin-top: 16px;
}

.template-inline-form {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
}

.inline-delete-form {
  display: inline;
}

.link-button {
  background: none;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.preview-chain {
  margin: 16px 0;
}

.template-reorder-bar {
  align-items: center;
  background: #fff8db;
  border: 1px solid #f0d060;
  border-radius: 6px;
  display: flex;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.template-reorder-bar[hidden],
.me-reorder-bar[hidden] {
  display: none !important;
}

.template-reorder-bar .reorder-preview-label {
  color: #8a6d00;
  flex: 1;
  font-weight: 600;
}

.template-reorder-dirty .draggable-row.reorder-preview,
.template-reorder-dirty .draggable-row.dragging {
  background: #fff8db;
  outline: 1px dashed #f0a500;
}

.row-handle {
  color: #9aa3ad;
  cursor: grab;
  user-select: none;
}

.draggable-row.dragging {
  opacity: 0.75;
}

.template-preview-shell {
  margin: -10px;
}

.template-preview-canvas {
  background: var(--preview-bg, #fff);
  color: var(--preview-accent, #26313d);
  font-size: var(--preview-font-size, 13px);
  margin: 16px;
  padding: 18px;
}

.template-preview-instructions {
  background: #f4f7fb;
  border-left: 3px solid #2b78d4;
  margin: 0 0 14px;
  padding: 8px 12px;
}

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

.template-preview-field.full-width,
.template-field-wrap.full-width {
  grid-column: 1 / -1;
}

.pii-badge {
  color: #b45309;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

#template-fields {
  background: var(--template-bg, transparent);
  color: var(--template-accent, inherit);
  font-size: var(--template-font-size, inherit);
}

#template-fields[data-label-position="left"] .template-field-wrap,
#template-fields[data-label-position="right"] .template-field-wrap {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 160px 1fr;
}

.template-layout-instructions {
  background: #f4f7fb;
  border-left: 3px solid #2b78d4;
  margin: 0 0 10px;
  padding: 8px 12px;
}

.template-form-section h3 {
  font-size: 14px;
  margin: 12px 0 8px;
}

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

.template-copy-limit {
  color: var(--muted);
  font-size: 12px;
}

.template-canvas-shell .canvas-section {
  border: 1px solid #e8ecf1;
  border-radius: 6px;
  margin-bottom: 14px;
  padding: 10px;
}

.canvas-section-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.canvas-section-head h3 {
  font-size: 14px;
  margin: 0;
}

.canvas-field-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  min-height: 44px;
  padding: 0;
}

.canvas-field-list.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.canvas-field-item {
  align-items: center;
  background: #fafbfc;
  border: 1px dashed #d5dbe3;
  border-radius: 4px;
  cursor: grab;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

.canvas-field-item.full-width {
  grid-column: 1 / -1;
}

.canvas-field-item.reorder-preview,
.canvas-field-item.dragging {
  background: #fff8db;
  border-color: #f0a500;
}

.canvas-width-toggle {
  background: #eef1f5;
  border: 1px solid #d5dbe3;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  margin-left: auto;
  padding: 2px 6px;
}

.resource-info-block {
  border-top: 1px solid #edf0f4;
  margin-top: 16px;
  padding-top: 12px;
}

.resource-cost-total {
  color: #2b78d4;
  font-weight: 600;
  margin-top: 8px;
}

.inline-radio {
  display: inline-flex;
  gap: 4px;
  margin-right: 12px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.copy-rules-panel {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

/* IT Service Desk My View home layout */
.me-home-tabs {
  align-items: center;
  display: flex;
  gap: 0;
  padding-right: 16px;
}

.me-home-tabs a {
  border-bottom: 3px solid transparent;
  color: #4a5568;
  font-size: var(--me-font-base);
  padding: 10px 16px;
  text-decoration: none;
}

.me-home-tabs a.active,
.me-home-tabs a:hover {
  border-bottom-color: #2b78d4;
  color: #2b78d4;
}

.me-home-tabs-spacer {
  flex: 1;
}

.me-new-menu {
  position: relative;
}

.me-new-menu summary {
  color: #2b78d4;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  padding: 8px 12px;
}

.me-new-menu summary::-webkit-details-marker {
  display: none;
}

.me-new-menu-panel {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
}

.me-new-menu-panel a {
  color: #2f3b4a;
  font-size: 13px;
  padding: 10px 14px;
  text-decoration: none;
}

.me-new-menu-panel a:hover {
  background: #f4f7fb;
}

.me-my-view {
  padding: 12px 16px 24px;
}

.me-my-view-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(220px, 1fr) minmax(180px, auto);
  min-height: calc(100vh - 180px);
}

.me-panel {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.me-summary-panel {
  grid-row: 1 / span 2;
}

.me-tasks-panel {
  grid-column: 2;
  grid-row: 1;
}

.me-approvals-panel {
  grid-column: 3;
  grid-row: 1;
}

.me-announcements-panel {
  grid-column: 2;
  grid-row: 2;
}

.me-reminders-panel {
  grid-column: 3;
  grid-row: 2;
}

.me-panel-header {
  align-items: center;
  background: #f7f9fc;
  border-bottom: 1px solid #edf0f4;
  color: #2f3b4a;
  display: flex;
  font-size: var(--me-font-base);
  font-weight: 600;
  justify-content: space-between;
  padding: 10px 14px;
}

.me-panel-link {
  color: #2b78d4;
  font-size: var(--me-font-small);
  font-weight: 500;
  text-decoration: none;
}

.me-panel-body {
  flex: 1;
  overflow: auto;
  padding: 12px 14px;
}

.me-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-summary-list li {
  border-bottom: 1px solid #f0f3f7;
}

.me-summary-list a {
  align-items: center;
  color: #2f3b4a;
  display: flex;
  font-size: var(--me-font-base);
  justify-content: space-between;
  padding: 10px 14px;
  text-decoration: none;
}

.me-summary-list a:hover {
  background: #f7f9fc;
  color: #2b78d4;
}

.me-summary-count {
  color: #2b78d4;
  font-weight: 700;
  min-width: 24px;
  text-align: right;
}

.me-empty-state {
  align-items: center;
  color: #6b7785;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 12px;
  justify-content: center;
  min-height: 120px;
  text-align: center;
}

.me-empty-muted p {
  margin: 0;
}

.workflow-button {
  font-size: 11px;
  height: 108px;
  width: 108px;
}

@media (max-width: 1100px) {
  .me-my-view-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .me-summary-panel,
  .me-tasks-panel,
  .me-approvals-panel,
  .me-announcements-panel,
  .me-reminders-panel {
    grid-column: 1;
    grid-row: auto;
  }
}

/* IT Service Desk Admin Settings hub ? match SDP /app#/admin */
body.me-admin-settings-page {
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 100vh;
  overflow: hidden;
}

body.me-admin-settings-page main {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 42px);
  max-height: calc(100vh - 42px);
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

/* Hub + setup pages must fill main and scroll inside their content pane */
body.me-admin-settings-page main > .me-admin-settings-hub,
body.me-admin-settings-page main > .me-setup-shell {
  flex: 1 1 auto;
  min-height: 0;
}

body.me-admin-settings-page .subnav {
  display: none;
}

body.me-admin-settings-page .topbar nav a {
  color: #e8edf2;
}

body.me-admin-settings-page .topbar nav a:hover {
  color: #fff;
}

body.me-admin-settings-page .top-actions,
body.me-admin-settings-page .top-actions a {
  color: #e8edf2;
}

body.me-admin-settings-page .top-actions a.active {
  color: #fff;
  font-weight: 600;
}

body.me-admin-settings-page .workflow-button {
  display: none !important;
}

.me-admin-settings {
  padding: 20px 24px 40px;
}

/* Full-width hub ? ME Admin Settings grid (no card chrome) */
body.me-sdp-skin main .me-admin-settings-hub,
.me-admin-settings-hub {
  background: #fff;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 100%;
  margin: 0;
  max-height: 100%;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding: 18px 28px 20px;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-header,
.me-admin-hub-header {
  align-items: center;
  border-bottom: 0;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 18px;
  padding-bottom: 0;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-header h1,
.me-admin-hub-header h1 {
  color: #2c333a;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-search-wide,
.me-admin-search-wide {
  flex: 1;
  justify-content: flex-start;
  max-width: 480px;
  min-width: 240px;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-search-wide input,
.me-admin-search-wide input {
  background: #fff;
  border: 1px solid #c9d1d9;
  border-radius: 18px;
  box-shadow: none;
  color: #2c333a;
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  max-width: none;
  padding: 9px 16px;
  width: 100%;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-search button,
.me-admin-settings-hub .me-admin-search button {
  align-items: center;
  background: #2b78d4;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.me-admin-search button svg {
  display: block;
  height: 17px;
  width: 17px;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-grid,
.me-admin-hub-grid {
  display: grid;
  flex: 1;
  gap: 28px 40px;
  grid-auto-rows: minmax(min-content, 1fr);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.me-admin-hub-category {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: 2px 2px 8px;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-category-header,
.me-admin-hub-category-header {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

/* Beat global `main a { color: var(--me-link) }` so hub matches ME dark links */
body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-category-header h2,
.me-admin-hub-category-header h2 {
  color: #2b78d4;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-icon,
.me-admin-hub-icon {
  color: #2b78d4;
  flex-shrink: 0;
  height: 42px;
  width: 42px;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-links,
.me-admin-hub-links {
  color: #4a5568;
  flex: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 2.05;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-links a,
body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-links a:visited,
.me-admin-hub-links a,
.me-admin-hub-links a:visited {
  color: #4a5568 !important;
  font-size: inherit;
  font-weight: 400;
  text-decoration: none;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-links a:hover,
.me-admin-hub-links a:hover {
  color: #2b78d4 !important;
  text-decoration: underline;
}

body.me-sdp-skin main .me-admin-settings-hub .me-admin-link-sep,
.me-admin-link-sep {
  color: #c9a227;
  font-weight: 400;
  margin: 0 5px;
  user-select: none;
}

.me-admin-add-badge,
.me-admin-new-badge {
  color: #c9a227;
  font-size: 12px;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
}

.me-admin-hub-empty {
  color: #6b7785;
  font-size: 16px;
  grid-column: 1 / -1;
}

@media (max-width: 1200px) {
  .me-admin-hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.me-admin-settings-page {
    height: auto;
    overflow: auto;
  }

  body.me-admin-settings-page main {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .me-admin-hub-grid {
    grid-auto-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    overflow: visible;
  }

  .me-admin-hub-category {
    min-height: 0;
    overflow: visible;
  }
}

@media (max-width: 600px) {
  .me-admin-hub-grid {
    grid-template-columns: 1fr;
  }

  .me-admin-settings-hub {
    padding: 14px 16px 32px;
  }

  .me-admin-search-wide {
    justify-content: stretch;
    max-width: none;
  }

  .me-admin-search-wide input {
    max-width: none;
  }

  body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-category-header h2,
  .me-admin-hub-category-header h2 {
    font-size: 18px;
  }

  body.me-sdp-skin main .me-admin-settings-hub .me-admin-hub-icon,
  .me-admin-hub-icon {
    height: 36px;
    width: 36px;
  }
}

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

.me-admin-header h1 {
  font-size: 22px;
  margin: 0;
}

.me-admin-search {
  align-items: center;
  display: flex;
  gap: 8px;
  max-width: 360px;
  width: 100%;
}

.me-admin-search input {
  border: 1px solid #dce3ec;
  border-radius: 20px;
  flex: 1;
  padding: 8px 14px;
}

.me-admin-search button {
  background: #2b78d4;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  height: 34px;
  width: 34px;
}

.me-admin-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.me-admin-category {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  min-height: 280px;
}

.me-admin-category-header {
  align-items: center;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 10px;
  padding: 14px 16px;
}

.me-admin-category-header h2 {
  font-size: 15px;
  margin: 0;
}

.me-admin-icon {
  background: #e8f2fc;
  border-radius: 50%;
  height: 36px;
  width: 36px;
}

.me-admin-icon-building::before,
.me-admin-icon-users::before,
.me-admin-icon-mail::before,
.me-admin-icon-templates::before {
  display: block;
  line-height: 36px;
  text-align: center;
}
.me-admin-icon-building::before { content: "\2302"; }
.me-admin-icon-users::before { content: "\263A"; }
.me-admin-icon-mail::before { content: "\2709"; }
.me-admin-icon-templates::before { content: "\2630"; }

.me-admin-links {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.me-admin-links a {
  color: #2b78d4;
  display: block;
  font-size: 13px;
  padding: 8px 18px;
  text-decoration: none;
}

.me-admin-links a:hover {
  background: #f4f8fd;
}

.me-admin-page {
  padding: 18px 28px 40px;
}

.me-admin-breadcrumb {
  color: #6b7785;
  font-size: var(--me-font-base);
  margin-bottom: 12px;
}

.me-admin-breadcrumb a {
  color: #2b78d4;
  text-decoration: none;
}

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

.me-admin-page-header h1 {
  color: #3d4652;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
}

body.me-sdp-skin .me-admin-page-header .settings-help {
  color: #6b7785;
  font-size: var(--me-font-base);
  line-height: var(--me-line-height);
}

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

.inline-delete-form,
.inline-role-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.link-button {
  background: none;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.table-actions {
  white-space: nowrap;
}

/* IT Service Desk Admin Setup ? sidebar + template catalog */
main:has(.me-setup-shell) {
  padding: 0;
}

.me-setup-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.me-setup-sidebar {
  background: #f4f6f8;
  border-right: 1px solid #dce3ec;
  min-height: 0;
  overflow: auto;
  padding: 8px 0 24px;
}

.me-setup-section details {
  margin: 0;
}

.me-setup-section summary {
  align-items: center;
  color: #3d4652;
  cursor: pointer;
  display: flex;
  font-size: var(--me-font-content);
  font-weight: 600;
  list-style: none;
  padding: 10px 14px;
}

.me-setup-section summary::-webkit-details-marker {
  display: none;
}

.me-setup-section summary::before {
  color: #8a939e;
  content: "\25B8";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.me-setup-section details[open] summary::before {
  transform: rotate(90deg);
}

.me-setup-links {
  display: flex;
  flex-direction: column;
}

.me-setup-links a {
  color: #4a5568;
  font-size: var(--me-font-base);
  line-height: 1.5;
  padding: 8px 14px 8px 28px;
  text-decoration: none;
}

.me-setup-links a:hover {
  background: #e8eef5;
  color: #2b78d4;
}

.me-setup-links a.active {
  background: #2b78d4;
  color: #fff;
}

/* Beat global `main a { color: var(--me-link) }` (same :not() chain + .me-setup-links). */
body.me-sdp-skin main .me-setup-links a:not(.button):not(.primary-button):not(.primary-link):not(.me-wo-sidebar-title):not(.me-wo-sidebar-action):not(.me-conv-mail-link),
body.me-sdp-skin main .me-setup-links a:not(.button):not(.primary-button):not(.primary-link):not(.me-wo-sidebar-title):not(.me-wo-sidebar-action):not(.me-conv-mail-link):visited {
  color: #4a5568;
  text-decoration: none;
}

body.me-sdp-skin main .me-setup-links a:not(.button):not(.primary-button):not(.primary-link):not(.me-wo-sidebar-title):not(.me-wo-sidebar-action):not(.me-conv-mail-link):hover {
  background: #e8eef5;
  color: #2b78d4;
  text-decoration: none;
}

body.me-sdp-skin main .me-setup-links a.active:not(.button):not(.primary-button):not(.primary-link):not(.me-wo-sidebar-title):not(.me-wo-sidebar-action):not(.me-conv-mail-link),
body.me-sdp-skin main .me-setup-links a.active:not(.button):not(.primary-button):not(.primary-link):not(.me-wo-sidebar-title):not(.me-wo-sidebar-action):not(.me-conv-mail-link):visited,
body.me-sdp-skin main .me-setup-links a.active:not(.button):not(.primary-button):not(.primary-link):not(.me-wo-sidebar-title):not(.me-wo-sidebar-action):not(.me-conv-mail-link):hover {
  background: #2b78d4;
  color: #fff;
  text-decoration: none;
}

.me-setup-main {
  background: #fff;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.me-template-admin {
  min-height: 100%;
}

.me-template-breadcrumb {
  border-bottom: 1px solid #edf0f4;
  padding: 12px 18px;
}

.me-template-breadcrumb h1 {
  color: #4a5568;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.me-template-tabs {
  align-items: flex-end;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 24px;
  height: 40px;
  padding: 0 18px;
}

.me-template-tabs a {
  color: #5f6771;
  font-size: 13px;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-decoration: none;
}

.me-template-tabs a.active {
  color: #2b78d4;
  font-weight: 600;
}

.me-template-tabs a.active::after {
  background: #2b78d4;
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
}

.me-template-toolbar {
  align-items: center;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
}

.me-toolbar-search-wrap {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.me-toolbar-search-wrap::before {
  color: #9aa3ad;
  content: "\2315";
  font-size: 14px;
  left: 9px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.me-toolbar-search {
  border: 1px solid #d8dee6;
  border-radius: 2px;
  font-size: 12px;
  min-height: 28px;
  min-width: 240px;
  padding: 4px 10px 4px 28px;
}

.me-catalog-admin-toolbar {
  border-bottom: 1px solid #e8ecf1;
  padding: 8px 16px;
}

.me-catalog-admin-grouped {
  background: #fff;
  padding: 0;
}

.me-catalog-admin-group {
  border-bottom: 1px solid #e8ecf1;
}

.me-catalog-admin-group > summary {
  align-items: center;
  background: #f5f6f8;
  cursor: pointer;
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 12px 16px;
}

.me-catalog-admin-group[open] > summary {
  border-bottom: 1px solid #e8ecf1;
}

.me-catalog-admin-group > summary::-webkit-details-marker,
.me-catalog-admin-group > summary::marker {
  content: "";
  display: none;
}

.me-catalog-admin-chevron {
  color: #6b7785;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  width: 12px;
}

.me-catalog-admin-group:not([open]) .me-catalog-admin-chevron::before {
  content: "\25B8";
}

.me-catalog-admin-group[open] .me-catalog-admin-chevron::before {
  content: "\25BE";
}

.me-catalog-admin-group-wrap {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
  position: relative;
}

.me-catalog-admin-group-wrap .me-catalog-admin-group {
  border-bottom: none;
  flex: 1;
  min-width: 0;
}

.me-catalog-admin-group-wrap .me-catalog-add-service {
  flex-shrink: 0;
  margin-left: auto;
  padding: 12px 16px;
  white-space: nowrap;
}

.me-catalog-admin-summary {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 0;
  width: 100%;
}

.me-catalog-admin-summary .catalog-icon {
  flex-shrink: 0;
}

.me-catalog-admin-group-title {
  color: #2f3b4a;
  font-size: 14px;
  font-weight: 600;
}

.me-catalog-add-service {
  color: #2b78d4;
  cursor: pointer;
  font-size: 12px;
  margin-left: auto;
  padding: 0;
  pointer-events: auto;
  text-decoration: none;
  user-select: none;
}

.me-catalog-add-service:hover {
  text-decoration: underline;
}

.page-incident-templates .me-template-tabs {
  display: none;
}

.me-incident-template-page .me-template-breadcrumb h1 {
  color: #2f3b4a;
}

.me-catalog-admin-panel {
  background: #fff;
  padding: 0 16px 4px 42px;
}

.me-catalog-admin-group-desc {
  color: #6b7785;
  font-size: 12px;
  line-height: 1.5;
  margin: 10px 0 12px;
  max-width: 920px;
}

.me-catalog-admin-services {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.me-catalog-admin-services > li {
  list-style: none !important;
}

.me-catalog-admin-service {
  align-items: flex-start;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.me-catalog-admin-service:last-child {
  border-bottom: none;
}

.me-catalog-admin-service-icon {
  flex-shrink: 0;
  height: 32px;
  position: relative;
  width: 32px;
}

.me-catalog-admin-service-icon .doc-icon {
  font-size: 24px;
  line-height: 1;
}

.me-catalog-admin-service-icon .me-catalog-status {
  bottom: -1px;
  font-size: 8px;
  height: 12px;
  position: absolute;
  right: -2px;
  width: 12px;
}

.me-catalog-admin-service-text {
  flex: 1;
  min-width: 0;
}

.me-catalog-admin-service-name {
  color: #2f3b4a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.me-catalog-admin-service-name:hover {
  color: #3182ce;
  text-decoration: underline;
}

.me-catalog-approval-badge {
  background: #fff4e6;
  border: 1px solid #f0c987;
  border-radius: 10px;
  color: #9a6700;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  padding: 2px 8px;
  vertical-align: middle;
}

.me-template-default-badge {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  color: #0e7490;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  padding: 2px 8px;
  vertical-align: middle;
}

.me-template-system-note {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 10px;
  color: #0e7490;
  font-size: 12px;
  margin: 8px 16px 0;
  padding: 8px 12px;
}

.me-catalog-admin-service-desc {
  color: #6b7785;
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 0;
}

/* Full-width service template builder (no admin sidebar) */
main:has(.me-service-builder-shell) {
  padding: 0;
}

.me-service-builder-shell {
  background: #eef1f5;
  min-height: calc(100vh - 56px);
}

.me-service-builder-preview-overlay[hidden],
.me-service-builder-preview-menu[hidden] {
  display: none !important;
}

.me-palette-view[hidden] {
  display: none !important;
}

.me-canvas-section-block {
  margin-bottom: 20px;
}

.me-canvas-section-block:last-child {
  margin-bottom: 0;
}

.me-preview-field.full-width {
  grid-column: 1 / -1;
}

/* ME-style service template builder (Add Service) */
.me-service-builder {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  max-width: 100%;
  min-height: calc(100vh - 56px);
}

.me-service-builder-topbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: -4px -8px 12px;
  padding: 10px 12px;
}

.me-service-builder-nav {
  background: #fff;
  border-bottom: 1px solid #dce3ec;
  margin: 0;
  padding: 10px 16px 12px;
}

.me-service-builder-toolbar {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.me-service-builder-back-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 4px;
  color: #4a5568;
  display: inline-flex;
  flex-shrink: 0;
  height: 34px;
  justify-content: center;
  text-decoration: none;
  width: 34px;
}

.me-service-builder-back-btn:hover {
  background: #f7f8fa;
  border-color: #9aa5b1;
}

.me-back-arrow {
  border-right: 2px solid #4a5568;
  border-top: 2px solid #4a5568;
  display: block;
  height: 10px;
  margin-left: 3px;
  transform: rotate(-135deg);
  width: 10px;
}

.me-service-builder-topbar-left {
  align-items: center;
  display: flex;
  gap: 10px;
}

.me-service-builder-back {
  color: #4a5568;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

.me-service-builder-preview-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  padding: 7px 12px;
}

.me-preview-eye {
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  display: inline-block;
  height: 10px;
  position: relative;
  width: 14px;
}

.me-preview-eye::after {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
}

.me-preview-caret {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6b7785;
  display: inline-block;
  height: 0;
  width: 0;
}

.me-service-builder-preview-wrap {
  position: relative;
}

.me-service-builder-preview-menu {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  left: 0;
  min-width: 160px;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 20;
}

.me-service-builder-preview-menu button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
}

.me-service-builder-preview-menu button:hover {
  background: #f7f8fa;
}

.me-service-builder-breadcrumb {
  color: #6b7785;
  font-size: 13px;
  line-height: 1.4;
}

.me-service-builder-breadcrumb a {
  color: #2b78d4;
  text-decoration: none;
}

.me-service-builder-breadcrumb a:hover {
  text-decoration: underline;
}

.me-bc-sep {
  color: #9aa5b1;
  margin: 0 6px;
}

.me-bc-current {
  color: #3d4652;
  font-weight: 500;
}

.me-service-builder-breadcrumb span {
  margin: 0 4px;
}

.me-service-builder-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
}

.me-service-builder-meta {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  margin-bottom: 0;
  padding: 16px;
}

.me-service-builder-icon-wrap {
  flex-shrink: 0;
  position: relative;
}

.me-service-builder-icon-btn {
  align-items: center;
  background: #f4f6f8;
  border: 1px dashed #c5cdd8;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 6px;
  height: 88px;
  justify-content: center;
  padding: 8px;
  width: 88px;
}

.me-service-builder-icon-btn:hover {
  background: #eef2f6;
  border-color: #9aa5b1;
}

.me-service-icon-preset {
  height: 40px;
  width: 40px;
}

.me-service-icon-img {
  border-radius: 4px;
  height: 40px;
  object-fit: cover;
  width: 40px;
}

.me-service-icon-label {
  color: #8a96a3;
  font-size: 11px;
}

.me-service-icon-presets {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  left: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  top: calc(100% + 6px);
  width: 280px;
  z-index: 30;
}

.me-service-icon-library-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.me-icon-library-option {
  align-items: center;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  height: 52px;
  justify-content: center;
  padding: 4px;
}

.me-icon-library-option:hover {
  background: #f0f7ff;
  border-color: #2b78d4;
}

.me-icon-library-option.selected {
  background: #e8f4ff;
  border-color: #2b78d4;
  box-shadow: inset 0 0 0 1px #2b78d4;
}

.me-icon-library-option img {
  height: 36px;
  object-fit: contain;
  width: 36px;
}

.me-service-icon-presets[hidden] {
  display: none !important;
}

.me-service-icon-presets-title {
  color: #6b7785;
  font-size: 11px;
  margin: 0 0 8px;
}

.me-service-icon-presets-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 8px;
}

.me-icon-preset-option {
  border: none;
  cursor: pointer;
  height: 32px;
  padding: 0;
  width: 32px;
}

.me-link-btn {
  background: none;
  border: none;
  color: #2b78d4;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-align: left;
}

.me-service-builder-page .workflow-button {
  display: none !important;
}

.me-service-builder-icon {
  align-items: center;
  background: #f7f8fa;
  border: 1px dashed #c5cdd8;
  border-radius: 4px;
  color: #8a96a3;
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.me-service-builder-meta-fields {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.me-service-builder-name input,
.me-service-builder-desc textarea {
  width: 100%;
}

.me-service-builder-name span em,
.me-service-builder-name em {
  color: #e53e3e;
  font-style: normal;
}

.me-service-builder-tabs {
  align-items: center;
  background: #f0f2f5;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  padding: 0 12px;
}

.me-service-builder-tabs .me-service-builder-customize:first-of-type {
  margin-left: auto;
}

.me-incident-builder .me-service-builder-tabs {
  gap: 20px;
}

.me-service-builder-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #4a5568;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 10px 16px;
}

.me-service-builder-tab.active {
  background: #fff;
  border-bottom-color: #3182ce;
  color: #3182ce;
}

.me-service-builder-customize {
  color: #3182ce;
  font-size: 12px;
  text-decoration: none;
}

.me-service-builder-workspace {
  display: grid;
  flex: 1;
  gap: 0;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 480px;
}

.me-service-builder-palette {
  border-radius: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  margin: 0;
  max-height: calc(100vh - 260px);
  min-height: 0;
  overflow: hidden;
}

.me-palette-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.me-palette-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.me-service-builder-palette-group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.me-service-builder-palette-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: space-between;
  padding: 10px 12px;
}

.me-service-builder-palette-search {
  padding: 8px 10px;
}

.me-service-builder-palette-search input {
  font-size: 12px;
  width: 100%;
}

.me-service-builder-palette-group h4 {
  color: #6b7785;
  font-size: 11px;
  font-weight: 600;
  margin: 0;
  padding: 8px 12px 4px;
  text-transform: uppercase;
}

.me-service-builder-palette-list {
  flex: none;
  list-style: none;
  margin: 0;
  max-height: none;
  min-height: 0;
  overflow-y: visible;
  padding: 0 6px 12px;
}

.me-palette-item {
  align-items: center;
  border-radius: 4px;
  cursor: grab;
  display: flex;
  font-size: 12px;
  gap: 8px;
  padding: 7px 8px;
}

.me-palette-item:hover {
  background: #edf2f7;
}

.me-palette-check {
  border: 1px solid #c5cdd8;
  border-radius: 2px;
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}

.me-palette-label {
  flex: 1;
}

.me-palette-drag {
  color: #a0aec0;
  letter-spacing: -2px;
}

.me-palette-add {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  color: #4a5568;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 24px;
}

.me-palette-new-field-wrap {
  padding: 8px 10px 0;
}

.me-new-field-btn {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 4px;
  color: #2b78d4;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  text-align: left;
  width: 100%;
}

.me-new-field-btn:hover {
  background: #f0f7ff;
  border-color: #2b78d4;
}

.me-palette-back {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  margin-right: 6px;
  padding: 0;
  width: 28px;
}

.me-new-field-head {
  gap: 4px;
  justify-content: flex-start;
}

.me-palette-icon,
.me-palette-section-icon {
  background: #e8edf3;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  flex-shrink: 0;
  height: 22px;
  width: 22px;
}

.me-palette-icon-editor {
  background: linear-gradient(180deg, #fff 0%, #fff 40%, #e2e8f0 40%, #e2e8f0 100%);
}

.me-palette-icon-text {
  background: linear-gradient(180deg, #fff 60%, #e2e8f0 60%);
}

.me-palette-icon-textarea {
  background: repeating-linear-gradient(180deg, #fff 0 3px, #e2e8f0 3px 6px);
}

.me-palette-icon-number::after,
.me-palette-icon-decimal::after {
  color: #718096;
  content: "123";
  display: block;
  font-size: 8px;
  line-height: 22px;
  text-align: center;
}

.me-palette-icon-decimal::after {
  content: ".00";
}

.me-palette-icon-approver {
  background: #fff;
  position: relative;
}

.me-palette-icon-approver::before {
  border: 1px solid #718096;
  border-radius: 1px;
  content: "";
  height: 8px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 8px;
}

.me-palette-icon-approver::after {
  color: #2b78d4;
  content: "\2713";
  font-size: 7px;
  font-weight: 700;
  left: 5px;
  line-height: 1;
  position: absolute;
  top: 5px;
}

.me-palette-icon-resource {
  background: #fff;
  position: relative;
}

.me-palette-icon-resource::before {
  border: 1px solid #718096;
  border-radius: 1px;
  content: "";
  height: 6px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 10px;
}

.me-palette-icon-resource::after {
  border: 1px solid #718096;
  border-radius: 1px;
  content: "";
  height: 6px;
  left: 6px;
  position: absolute;
  top: 9px;
  width: 10px;
}

.me-section-icon-single { background: #edf2f7; }
.me-section-icon-double { background: linear-gradient(90deg, #edf2f7 49%, #fff 49%, #fff 51%, #edf2f7 51%); }
.me-section-icon-three { background: linear-gradient(90deg, #edf2f7 32%, #fff 32%, #fff 34%, #edf2f7 34%, #edf2f7 66%, #fff 66%, #fff 68%, #edf2f7 68%); }
.me-section-icon-four { background: repeating-linear-gradient(90deg, #edf2f7 0 22%, #fff 22% 25%); }
.me-section-icon-flex { background: linear-gradient(90deg, #edf2f7 20%, #fff 20%, #fff 30%, #cbd5e0 30%, #cbd5e0 35%, #fff 35%, #fff 45%, #edf2f7 45%); }

.me-resource-sections-group {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-right: 12px;
}

.me-resource-sections-group h4 {
  flex: 1;
}

.me-resource-add {
  flex-shrink: 0;
}

.me-section-drop-zone {
  align-items: center;
  border: 2px dashed #cbd5e0;
  border-radius: 4px;
  color: #8a96a3;
  display: flex;
  font-size: 12px;
  justify-content: center;
  margin: 8px 0;
  min-height: 44px;
  padding: 10px;
  transition: background 0.15s, border-color 0.15s;
}

.me-section-drop-zone.active {
  background: rgba(49, 130, 206, 0.08);
  border-color: #3182ce;
  color: #3182ce;
}

.me-section-block-head {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.me-section-block-head .me-section-title-input {
  flex: 1;
  margin-bottom: 0;
}

.me-section-delete {
  background: none;
  border: none;
  color: #a0aec0;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}

.me-section-delete:hover {
  color: #e53e3e;
}

.me-service-builder-canvas-grid.one-col {
  grid-template-columns: 1fr;
}

.me-service-builder-canvas-grid.three-col {
  grid-template-columns: 1fr 1fr 1fr;
}

.me-service-builder-canvas-grid.four-col {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.me-service-builder-canvas-grid.flex-col {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.me-service-builder-canvas-grid.three-col .me-canvas-field.full-width,
.me-service-builder-canvas-grid.four-col .me-canvas-field.full-width,
.me-service-builder-canvas-grid.flex-col .me-canvas-field.full-width {
  grid-column: 1 / -1;
}

.me-service-builder-canvas {
  border-radius: 0;
  margin: 0;
  min-height: 420px;
  padding: 16px;
}

.me-canvas-header-fields {
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.me-canvas-header-fields-grid {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-canvas-header-fields-grid .me-canvas-field {
  background: #fff;
}

.me-canvas-field-system-default .me-system-default-select {
  width: 100%;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid #c5cdd8;
  border-radius: 4px;
  background: #fff;
  font-size: 0.875rem;
}

.me-incident-builder .me-section-drop-zone {
  display: none;
}

/* ME incident template builder ? visual parity with IT Service Desk admin */
.me-incident-builder {
  background: #ebeff3;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  min-height: calc(100vh - 56px);
}

.me-incident-template-head {
  background: #fff;
  border-bottom: 1px solid #dce3ec;
  padding: 12px 16px;
}

.me-incident-template-title-row {
  align-items: center;
  display: flex;
  gap: 12px;
}

.me-incident-template-title {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.me-incident-template-name-input {
  background: transparent;
  border: none;
  color: #26313d;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  padding: 4px 0;
  width: 100%;
}

.me-incident-template-name-input:focus {
  outline: none;
}

.me-incident-template-name-input::placeholder {
  color: #9aa5b1;
}

.me-incident-template-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.me-incident-copy-template-btn {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 4px;
  color: #4a5568;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
  white-space: nowrap;
}

.me-incident-copy-template-btn:hover:not(:disabled) {
  background: #f7f8fa;
  border-color: #9aa5b1;
}

.me-incident-copy-template-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.me-incident-meta-hidden {
  display: none !important;
}

.me-builder-audience-bar {
  align-items: center;
  background: #f7f9fb;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  gap: 4px;
  padding: 8px 16px;
}

.me-builder-audience-btn {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 4px;
  color: #4a5568;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
}

.me-builder-audience-btn.active {
  background: #e8f1fb;
  border-color: #6b9bd1;
  color: #1f4e79;
}

.me-builder-copy-tech {
  background: transparent;
  border: 0;
  color: #2b6cb0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
  padding: 5px 4px;
}

.me-builder-copy-tech:hover {
  color: #1a4f8a;
  text-decoration: underline;
}

.me-inline-delete-form {
  display: inline;
  margin: 0;
}

.me-incident-delete-template-btn {
  background: #fff;
  border: 1px solid #d9a3a3;
  border-radius: 4px;
  color: #a94442;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
  white-space: nowrap;
}

.me-incident-delete-template-btn:hover {
  background: #fdf2f2;
  border-color: #c97878;
}

.me-incident-builder-nav .me-service-builder-toolbar {
  align-items: center;
  gap: 8px;
}

.me-incident-builder-tabs {
  align-items: flex-end;
  background: #fff;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  gap: 0;
  height: 40px;
  padding: 0 16px;
}

.me-incident-builder-tabs .me-service-builder-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #5f6771;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  margin-bottom: -1px;
  padding: 0 16px;
}

.me-incident-builder-tabs .me-service-builder-tab.active {
  background: transparent;
  border-bottom-color: #2b78d4;
  color: #2b78d4;
  font-weight: 600;
}

.me-incident-tab-spacer {
  flex: 1;
}

.me-incident-builder-tabs .me-service-builder-customize {
  color: #2b78d4;
  font-size: 13px;
  line-height: 40px;
  margin-left: 12px;
  text-decoration: none;
}

.me-incident-builder-tabs .me-service-builder-customize:hover {
  text-decoration: underline;
}

.me-incident-tab-disabled {
  color: #9aa5b1;
  cursor: default;
  pointer-events: none;
}

.me-incident-builder .me-service-builder-workspace {
  background: #ebeff3;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 220px);
}

.me-incident-builder .me-service-builder-palette {
  background: #fff;
  border-right: 1px solid #dce3ec;
  box-shadow: none;
  max-height: none;
}

.me-incident-builder .me-service-builder-palette-head {
  background: #f7f8fa;
  border-bottom: 1px solid #e2e8f0;
  color: #26313d;
  font-size: 13px;
  font-weight: 600;
}

.me-incident-builder .me-service-builder-palette-search input {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  font-size: 12px;
  padding: 6px 8px;
}

.me-incident-builder .me-palette-check {
  background: #fff;
  flex-shrink: 0;
}

.me-incident-builder .me-palette-drag {
  cursor: grab;
  opacity: 0.85;
}

.me-incident-builder .me-new-field-btn {
  border-color: #c5cdd8;
  color: #2b78d4;
  font-weight: 600;
}

.me-incident-builder .me-service-builder-canvas {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 0;
  margin: 12px 12px 12px 0;
  min-height: calc(100vh - 240px);
  padding: 16px 20px 24px;
}

.me-incident-builder .me-canvas-header-fields {
  border-bottom: 1px solid #e8edf3;
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.me-incident-builder .me-canvas-header-fields-grid {
  gap: 12px 24px;
}

.me-incident-builder .me-canvas-header-fields-grid .me-canvas-field {
  background: transparent;
  border: none;
  padding: 0;
}

.me-incident-builder .me-canvas-section-block {
  margin-bottom: 24px;
}

.me-incident-builder .me-section-block-head {
  margin-bottom: 12px;
}

.me-incident-builder .me-section-title-input {
  border: none;
  color: #26313d;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
  padding: 0;
}

.me-incident-builder .me-section-title-input:focus {
  outline: none;
}

.me-incident-builder .me-service-builder-canvas-grid {
  gap: 10px 24px;
  min-height: 0;
}

.me-incident-builder .me-canvas-field {
  align-items: flex-start;
  background: transparent;
  border: none;
  display: flex;
  gap: 6px;
  padding: 2px 0;
}

.me-incident-builder .me-canvas-field-draggable {
  cursor: grab;
}

.me-incident-builder .me-canvas-field-draggable:active {
  cursor: grabbing;
}

.me-incident-builder .me-canvas-drag {
  color: #8a96a3;
  cursor: grab;
  display: block;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 8px;
  padding: 0 2px;
  user-select: none;
}

.me-incident-builder .me-canvas-field-draggable:active .me-canvas-drag {
  cursor: grabbing;
}

.me-incident-builder .me-canvas-field-inner {
  cursor: default;
  width: 100%;
}

.me-incident-builder .me-canvas-field:not(.me-canvas-field-locked) .me-canvas-field-inner {
  cursor: pointer;
}

.me-incident-builder .me-canvas-field-inner .me-preview-field {
  align-items: center;
  gap: 8px;
  grid-template-columns: 120px minmax(0, 1fr);
}

.me-incident-builder .me-canvas-field-inner .me-preview-field.me-preview-choice-group {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: none;
}

.me-incident-builder .me-canvas-field-inner .me-preview-field.full-width {
  grid-template-columns: 120px minmax(0, 1fr);
}

.me-incident-builder .me-canvas-field-inner .me-preview-field span {
  color: #4a5568;
  font-size: 12px;
  padding-top: 0;
  text-align: right;
}

.me-incident-builder .me-canvas-field-inner .me-preview-choice-label,
.me-incident-builder .me-canvas-field-inner .me-preview-choice span {
  text-align: left;
}

.me-incident-builder .me-canvas-field-inner input,
.me-incident-builder .me-canvas-field-inner select,
.me-incident-builder .me-canvas-field-inner textarea {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  color: #26313d;
  font-size: 12px;
  min-height: 30px;
  padding: 5px 8px;
}

.me-incident-builder .me-canvas-field-inner input[type="radio"],
.me-incident-builder .me-canvas-field-inner input[type="checkbox"] {
  background: transparent;
  border: initial;
  border-radius: initial;
  min-height: 0;
  padding: 0;
  width: auto;
}

.me-incident-builder .me-canvas-field-inner select,
.me-incident-builder .me-canvas-field-system-default .me-system-default-select {
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7785' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  padding-right: 26px;
}

.me-incident-builder .me-field-input-wrap input {
  border-radius: 3px 0 0 3px;
}

.me-incident-builder .me-field-add-btn {
  background: #f7f8fa;
  border: 1px solid #c5cdd8;
  border-radius: 0 3px 3px 0;
  color: #4a5568;
  font-size: 16px;
  min-width: 30px;
}

.me-incident-builder .me-canvas-field .me-canvas-remove {
  color: #8a96a3;
  display: block;
  flex-shrink: 0;
  margin-top: 6px;
}

.me-incident-builder .me-canvas-field-system-default .me-canvas-remove {
  margin-top: 8px;
}

.me-incident-builder .me-canvas-field .me-canvas-remove:hover {
  color: #c0392b;
}

.me-incident-builder-footer {
  /* sticky footer styles shared via .me-service-builder-footer */
}

.me-incident-builder-footer .me-incident-save-btn {
  background: #2b78d4;
  border: 1px solid #2b78d4;
  border-radius: 3px;
  font-size: 13px;
  min-width: 72px;
  padding: 7px 16px;
}

.me-incident-builder-footer .me-incident-save-btn:hover {
  background: #256bb8;
  border-color: #256bb8;
}

.me-incident-builder-footer .me-incident-save-workflow-btn {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  color: #4a5568;
  font-size: 13px;
  padding: 7px 14px;
}

.me-incident-builder-footer .me-incident-save-workflow-btn:hover {
  background: #f7f8fa;
  border-color: #9aa5b1;
}

.me-incident-builder-footer .button:last-child {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  color: #4a5568;
  font-size: 13px;
  padding: 7px 14px;
  text-decoration: none;
}

.me-incident-builder-footer .button:last-child:hover {
  background: #f7f8fa;
  border-color: #9aa5b1;
}

.me-service-builder-shell:has(.me-incident-builder) {
  background: #ebeff3;
}

.me-canvas-field-locked {
  cursor: default;
}

.me-canvas-field-locked .me-canvas-drag {
  display: none;
}

.me-field-input-wrap {
  align-items: stretch;
  display: flex;
  position: relative;
}

.me-field-input-wrap input {
  flex: 1;
  min-width: 0;
  padding-right: 30px;
}

.me-field-add-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 0 3px 3px 0;
  color: #4a5568;
  cursor: default;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  height: auto;
  justify-content: center;
  line-height: 1;
  margin-left: -1px;
  min-width: 28px;
  padding: 0 8px;
}

.me-canvas-header-fields-grid .me-preview-field {
  grid-template-columns: 72px 1fr;
}

.me-section-title-input {
  border: none;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  width: 100%;
}

.me-service-builder-canvas-grid {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0;
  min-height: 200px;
  padding: 0;
}

.me-service-builder-canvas-grid.two-col .me-canvas-field.full-width {
  grid-column: 1 / -1;
}

.me-canvas-field {
  align-items: flex-start;
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  display: flex;
  gap: 6px;
  padding: 8px;
}

.me-canvas-field-inner {
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.me-canvas-field-inner .me-preview-field {
  display: grid;
  gap: 4px;
  grid-template-columns: 110px 1fr;
  margin: 0;
}

.me-canvas-field-inner .me-preview-field.me-preview-choice-group {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: none;
}

.me-canvas-field-inner .me-preview-field span {
  color: #4a5568;
  font-size: 12px;
  padding-top: 6px;
}

.me-canvas-field-inner input,
.me-canvas-field-inner select,
.me-canvas-field-inner textarea {
  font-size: 12px;
  width: 100%;
}

.me-canvas-field-inner input[type="radio"],
.me-canvas-field-inner input[type="checkbox"] {
  flex: 0 0 auto;
  height: auto;
  margin: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
  width: auto;
}

.me-canvas-field-inner .me-preview-choice-label {
  font-weight: 600;
  padding-top: 0;
  text-align: left;
}

.me-canvas-field-inner .me-preview-choice-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.me-canvas-field-inner .me-preview-choice {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-start;
  margin: 0;
  max-width: 100%;
  width: auto;
}

.me-canvas-field-inner .me-preview-choice span {
  color: #26313d;
  flex: 0 1 auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  padding-top: 0;
  text-align: left;
  white-space: normal;
}

.me-canvas-field.dragging {
  opacity: 0.45;
}

.me-canvas-drop-indicator {
  grid-column: 1 / -1;
  height: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: relative;
}

.me-canvas-drop-indicator-line {
  background: linear-gradient(90deg, #2b78d4, #5aa0e8);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(43, 120, 212, 0.25);
  display: block;
  height: 3px;
  margin: 6px 0;
}

.me-service-builder-canvas-grid.drag-over {
  background: rgba(49, 130, 206, 0.05);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(49, 130, 206, 0.35);
}

.me-palette-item.dragging {
  background: #e8f2fc;
  box-shadow: 0 4px 14px rgba(43, 120, 212, 0.22);
  opacity: 0.92;
  transform: scale(0.98);
}

.me-drag-ghost {
  background: #2b78d4;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(43, 120, 212, 0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  left: -9999px;
  padding: 8px 14px;
  pointer-events: none;
  position: fixed;
  top: -9999px;
  white-space: nowrap;
  z-index: 10000;
}

.me-incident-builder .me-palette-item {
  cursor: grab;
  padding: 6px 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.me-incident-builder .me-palette-item:active {
  cursor: grabbing;
}

.me-incident-builder .me-palette-drag {
  cursor: grab;
  opacity: 0.85;
}

.me-incident-builder .me-service-builder-canvas-grid.drag-over {
  background: rgba(43, 120, 212, 0.06);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(43, 120, 212, 0.4);
  min-height: 48px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.me-canvas-drag {
  color: #a0aec0;
  cursor: grab;
  padding-top: 8px;
}

.me-canvas-remove {
  background: none;
  border: none;
  color: #a0aec0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
}

.me-service-builder-canvas-hint {
  color: #8a96a3;
  font-size: 11px;
  margin-top: 12px;
}

.me-service-builder-footer,
.me-incident-builder-footer {
  background: #fff;
  border-top: 1px solid #dce3ec;
  bottom: 0;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  display: flex;
  gap: 10px;
  justify-content: center;
  left: 0;
  margin: 0;
  padding: 14px 16px;
  position: sticky;
  right: 0;
  z-index: 40;
}

.me-builder-top-save {
  font-size: 13px !important;
  min-width: 72px;
  padding: 7px 16px !important;
}

.me-wf-meta-edit-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.me-wf-meta-edit-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.me-wf-meta-delete {
  margin-top: 8px;
}

.me-incident-name-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.me-incident-row-actions {
  white-space: nowrap;
}

.me-incident-row-actions .me-inline-delete-form,
.me-incident-name-actions .me-inline-delete-form {
  display: inline;
  margin: 0;
}

.me-link-danger,
button.me-link-danger {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

#me-incident-delete-btn {
  background: #fff;
  border-color: #d9a3a3;
  color: #a94442;
}

.me-service-builder-preview-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1000;
}

.me-service-builder-preview-dialog {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  max-height: 85vh;
  max-width: 800px;
  overflow: hidden;
  width: 92%;
}

.me-service-builder-preview-dialog-head {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 14px 18px 12px;
}

.me-service-builder-preview-dialog-head h2 {
  color: #26313d;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.me-preview-close {
  background: none;
  border: none;
  color: #6b7785;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
}

.me-preview-close:hover {
  color: #26313d;
}

.me-service-builder-preview-audience {
  border-bottom: 1px solid #f0f3f7;
  color: #6b7785;
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 18px 10px;
}

.me-service-builder-preview-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 4px 18px 16px;
}

.me-service-builder-preview-footer {
  align-items: center;
  background: #f5f6f8;
  border-top: 1px solid #dce3ec;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  justify-content: flex-start;
  padding: 10px 18px 12px;
}

.me-service-builder-preview-footer[hidden] {
  display: none !important;
}

.me-preview-grid {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: 1fr 1fr;
}

.me-preview-grid.two-col .me-preview-field.full-width {
  grid-column: 1 / -1;
}

.me-preview-field {
  display: grid;
  gap: 4px;
  grid-template-columns: 110px 1fr;
}

.me-preview-field.me-preview-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: none;
}

.me-preview-field span {
  color: #4a5568;
  font-size: 12px;
  padding-top: 6px;
}

.me-preview-field input,
.me-preview-field select,
.me-preview-field textarea {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #26313d;
  font-size: 12px;
  min-height: 30px;
  padding: 5px 8px;
}

.me-preview-field input[type="radio"],
.me-preview-field input[type="checkbox"] {
  background: transparent;
  border: initial;
  border-radius: initial;
  flex: 0 0 auto;
  height: auto;
  margin: 0;
  min-height: 0;
  padding: 0;
  width: auto;
}

.me-preview-choice {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-start;
  width: auto;
}

.me-preview-choice span {
  padding-top: 0;
  text-align: left;
}

.me-preview-meta h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}

.me-preview-meta p {
  color: #6b7785;
  font-size: 12px;
  margin: 0 0 8px;
}

.me-preview-section h4 {
  border-bottom: 1px solid #e8edf3;
  color: #26313d;
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 10px;
  padding-bottom: 6px;
}

.me-preview-attachments .me-preview-attach-drop {
  margin-top: 0;
}

.me-preview-collapsible-head {
  align-items: center;
  background: #f7f8fa;
  border: 1px solid #dce3ec;
  border-radius: 2px 2px 0 0;
  color: #26313d;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  margin: 16px 0 0;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}

.me-preview-resolution .me-preview-collapsible-body {
  border: 1px solid #dce3ec;
  border-top: 0;
  border-radius: 0 0 2px 2px;
}

.me-preview-resolution .me-preview-collapsible-body[hidden] {
  display: none;
}

.me-preview-collapsible-caret {
  color: #6b7785;
  font-size: 11px;
  width: 12px;
}

.me-preview-rte .me-preview-rte-toolbar {
  pointer-events: none;
}

.me-preview-rte .me-rte-textarea {
  min-height: 160px;
}

.me-preview-rte .me-rte-font-btn {
  font-size: 11px;
  min-width: 48px;
}

.me-catalog-admin-service[hidden],
.me-catalog-admin-group[hidden] {
  display: none !important;
}

.me-toolbar-customize::before {
  content: "\2699 ";
  font-size: 11px;
}

.me-toolbar-select {
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 2px;
  color: #4a5568;
  font-size: 12px;
  min-height: 28px;
  padding: 2px 8px;
}

.me-toolbar-pagesize {
  max-width: 64px;
}

.me-list-table-settings {
  position: relative;
}

.me-list-table-settings > summary {
  list-style: none;
}

.me-list-table-settings > summary::-webkit-details-marker {
  display: none;
}

.me-list-table-settings-menu {
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  min-width: 148px;
  padding: 6px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
}

.me-list-table-settings-label {
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px 6px;
  text-transform: uppercase;
}

.me-list-table-settings-option {
  color: #374151;
  display: block;
  font-size: 13px;
  padding: 6px 12px;
  text-decoration: none;
}

.me-list-table-settings-option:hover {
  background: #f3f6fa;
}

.me-list-table-settings-option.active {
  background: #e8f1fb;
  color: #1d4f91;
  font-weight: 600;
}

.me-list-table-settings-check {
  align-items: center;
  color: #374151;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 8px;
  padding: 6px 12px;
  user-select: none;
}

.me-list-table-settings-check:hover {
  background: #f3f6fa;
}

.me-list-table-settings-check input {
  margin: 0;
}

.me-requests-table.me-requests-hide-sla .me-due-cell .sla-pill,
.me-requests-table.me-requests-hide-sla .sla-pill {
  display: none !important;
}

.me-toolbar-btn {
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 2px;
  color: #4a5568;
  cursor: pointer;
  font-size: 12px;
  min-height: 28px;
  padding: 4px 10px;
  text-decoration: none;
}

.me-toolbar-btn-primary {
  color: #2b78d4;
}

.me-toolbar-btn:disabled {
  color: #b0b8c2;
  cursor: not-allowed;
}

.me-toolbar-icon {
  align-items: center;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 2px;
  box-sizing: border-box;
  color: #5f6771;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  width: 28px;
}

a.me-toolbar-icon,
button.me-toolbar-icon,
summary.me-toolbar-icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.me-list-table-settings > summary.me-toolbar-icon {
  /* Gear emoji sits high in most fonts ? nudge into the box */
  font-size: 13px;
  line-height: 1;
  transform: translateY(1px);
}

.me-toolbar-pager {
  align-items: center;
  color: #6d7580;
  display: inline-flex;
  font-size: 12px;
  height: 28px;
  line-height: 1;
  margin-left: 4px;
}

.me-toolbar-history {
  color: #2b78d4;
  font-size: 12px;
  margin-left: auto;
  text-decoration: none;
}

.me-template-table-wrap {
  overflow: auto;
  padding: 0 18px 24px;
}

.me-admin-data-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.me-admin-data-table th {
  background: #f7f8fa;
  border-bottom: 1px solid #edf0f4;
  color: #626a74;
  font-size: 11px;
  font-weight: 700;
  height: 32px;
  letter-spacing: 0.02em;
  padding: 0 10px;
  text-align: left;
  text-transform: uppercase;
}

.me-admin-data-table td {
  border-bottom: 1px solid #edf0f4;
  color: #37404a;
  font-size: var(--me-font-content, 14px);
  height: 44px;
  overflow: hidden;
  padding: 0 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-admin-data-table tbody tr:hover {
  background: #fffaf0;
}

.me-admin-data-table tbody tr.dragging {
  opacity: 0.55;
}

.me-admin-data-table tbody tr.reorder-preview {
  background: #eef5ff;
}

.me-link {
  color: #2b78d4;
  text-decoration: none;
}

.me-link:hover {
  text-decoration: underline;
}

.me-link strong {
  font-weight: 500;
}

.category-grid th:nth-child(4),
.category-grid td:nth-child(4) {
  width: 22%;
}

.category-grid th:nth-child(5),
.category-grid td:nth-child(5) {
  width: 34%;
}

.category-grid th:nth-child(6),
.category-grid td:nth-child(6),
.category-grid th:nth-child(7),
.category-grid td:nth-child(7) {
  width: 10%;
}

.incident-grid-v9 {
  min-width: 1260px;
}

.incident-grid-v9 th,
.incident-grid-v9 td {
  font-size: 12px;
  vertical-align: top;
}

.incident-grid-v9 th {
  line-height: 1.2;
  padding-left: 7px;
  padding-right: 7px;
  white-space: normal;
}

.incident-grid-v9 td {
  padding-left: 7px;
  padding-right: 7px;
}

.incident-grid-v9 th:nth-child(1),
.incident-grid-v9 td:nth-child(1) {
  width: 34px;
}

.incident-grid-v9 th:nth-child(2),
.incident-grid-v9 td:nth-child(2),
.incident-grid-v9 th:nth-child(3),
.incident-grid-v9 td:nth-child(3) {
  width: 32px;
}

.incident-grid-v9 th:nth-child(4),
.incident-grid-v9 td:nth-child(4) {
  width: 210px;
}

.incident-grid-v9 th:nth-child(5),
.incident-grid-v9 td:nth-child(5) {
  width: 145px;
}

.incident-grid-v9 th:nth-child(6),
.incident-grid-v9 td:nth-child(6) {
  width: 190px;
}

.incident-grid-v9 th:nth-child(7),
.incident-grid-v9 td:nth-child(7) {
  width: 250px;
}

.incident-grid-v9 th:nth-child(8),
.incident-grid-v9 td:nth-child(8) {
  width: 72px;
}

.incident-grid-v9 th:nth-child(9),
.incident-grid-v9 td:nth-child(9) {
  width: 110px;
}

.incident-grid-v9 th:nth-child(10),
.incident-grid-v9 td:nth-child(10) {
  width: 58px;
}

.incident-grid-v9 th:nth-child(11),
.incident-grid-v9 td:nth-child(11) {
  width: 105px;
}

.incident-grid-v9 th:nth-child(12),
.incident-grid-v9 td:nth-child(12) {
  width: 120px;
}

.incident-grid-v9 .num-col {
  text-align: center;
}

.me-incident-table-wrap {
  overflow-x: auto;
}

.me-category-detail {
  border-top: 8px solid #f4f6f8;
  padding: 0 18px 24px;
}

.me-category-detail-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 14px 0 8px;
}

.me-category-detail-header h2 {
  font-size: 14px;
  margin: 0;
}

.me-template-form-panel {
  border-top: 1px solid #edf0f4;
  margin: 0 18px 24px;
  padding-top: 16px;
}

.me-reorder-bar {
  background: #fff8e6;
  border-bottom: 1px solid #f0dca0;
  margin: 0;
  padding: 8px 18px;
}

.catalog-icon {
  border-radius: 3px;
  display: inline-block;
  height: 22px;
  vertical-align: middle;
  width: 24px;
}

.catalog-icon-0 { background: linear-gradient(135deg, #dcecff, #7eb0e8); border: 1px solid #7eb0e8; }
.catalog-icon-1 { background: linear-gradient(135deg, #f1e4ff, #b893de); border: 1px solid #b893de; }
.catalog-icon-2 { background: linear-gradient(135deg, #dff6ea, #7bc9a0); border: 1px solid #7bc9a0; }
.catalog-icon-3 { background: linear-gradient(135deg, #ffe8d9, #e8a06e); border: 1px solid #e8a06e; }
.catalog-icon-4 { background: linear-gradient(135deg, #ffe3ec, #e887a8); border: 1px solid #e887a8; }
.catalog-icon-5 { background: linear-gradient(135deg, #e8f4ff, #6eb5d9); border: 1px solid #6eb5d9; }
.catalog-icon-6 { background: linear-gradient(135deg, #fff3d6, #d9b45c); border: 1px solid #d9b45c; }
.catalog-icon-7 { background: linear-gradient(135deg, #e6e8ff, #9098e0); border: 1px solid #9098e0; }

/* ME-style modal ? service category edit */
body.me-modal-open {
  overflow: hidden;
}

.me-modal-overlay {
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 48px 16px 24px;
  position: fixed;
  z-index: 1200;
}

.me-modal-overlay[hidden] {
  display: none !important;
}

.me-modal-dialog {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  max-width: 520px;
  width: 100%;
}

.me-modal-header {
  align-items: center;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
}

.me-modal-header h2 {
  color: #3d4652;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.me-modal-close {
  background: none;
  border: none;
  color: #8a939e;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
}

.me-modal-close:hover {
  color: #3d4652;
}

.me-modal-body {
  padding: 16px 18px 0;
}

.me-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
}

.me-modal-field input[type="text"],
.me-modal-field textarea {
  border: 1px solid #c8d0da;
  border-radius: 3px;
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
}

.me-required-label::before {
  color: #e74c3c;
  content: "* ";
}

.me-icon-picker {
  align-items: center;
  display: flex;
  gap: 12px;
}

.me-icon-picker .catalog-icon {
  height: 36px;
  width: 36px;
}

.me-link-btn {
  background: none;
  border: none;
  color: #2b78d4;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.me-link-btn.muted {
  color: #8a939e;
}

.me-link-btn:hover {
  text-decoration: underline;
}

.me-modal-footer {
  border-top: 1px solid #e8edf3;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  padding: 14px 18px 18px;
}

button.me-link {
  background: none;
  border: none;
  color: #2b78d4;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-align: left;
}

button.me-link:hover {
  text-decoration: underline;
}

.field-error {
  color: #c0392b;
  font-size: 12px;
}

.field-help {
  display: block;
  margin-top: 4px;
  color: #5c6b7a;
  font-size: 12px;
  font-weight: 400;
}

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

  .me-setup-sidebar {
    border-bottom: 1px solid #dce3ec;
    border-right: 0;
    max-height: 220px;
  }
}

/* Unified ME module pages (Requests, Problems, Changes, Assets, etc.) */
main:has(.me-module-page) {
  padding: 0;
}

main:has(.me-requests-module) {
  background: #eef1f5;
  padding: 0;
}

.me-module-page {
  background: #fff;
  min-height: calc(100vh - 92px);
}

.me-module-breadcrumb {
  align-items: center;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 18px;
}

.me-module-breadcrumb h1 {
  color: #4a5568;
  font-size: var(--me-font-content);
  font-weight: 500;
  margin: 0;
}

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

.me-module-body {
  padding: 0 0 24px;
}

.me-toolbar-filter-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-toolbar-filter-form input[type="search"] {
  border: 1px solid #d8dee6;
  border-radius: 2px;
  font-size: var(--me-font-base);
  min-height: 32px;
  padding: 5px 10px;
  width: 200px;
}

.me-clickable-row {
  cursor: pointer;
}

.me-requests-module .requests-shell {
  border-top: 1px solid #edf0f4;
  min-height: calc(100vh - 140px);
}

/* ME Requests list ? main pane + optional tasks drawer (views live in toolbar dropdown) */
.me-requests-layout {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 92px);
  position: relative;
  width: 100%;
}

.me-requests-layout.tasks-open .me-tasks-drawer:not([hidden]) {
  flex: 0 0 280px;
  max-width: 280px;
}

.me-tasks-drawer[hidden] {
  display: none !important;
}

.me-panel-expand-tab {
  background: #fff;
  border: 1px solid #dce3ec;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  color: #6b7785;
  cursor: pointer;
  display: none;
  height: 48px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  z-index: 3;
}

.me-requests-layout.views-collapsed .me-panel-expand-tab {
  display: block;
}

.me-views-sidebar {
  background: #f7f8fa;
  border-right: 1px solid #dce3ec;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.me-requests-layout.views-collapsed .me-views-sidebar {
  border-right: 0;
  overflow: hidden;
  width: 0;
}

.me-views-sidebar-search {
  border-bottom: 1px solid #e4e9ef;
  display: flex;
  gap: 4px;
  padding: 10px 12px;
}

.me-views-sidebar-search input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  font-size: var(--me-font-base);
  min-width: 0;
  padding: 6px 8px;
}

.me-views-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  padding: 6px 0;
}

.me-views-nav a {
  align-items: center;
  color: #4a5568;
  display: flex;
  font-size: var(--me-font-base);
  gap: 8px;
  padding: 8px 14px;
  text-decoration: none;
}

.me-views-nav a:hover {
  background: #eef2f7;
}

.me-views-nav a.active {
  background: #e8f2fc;
  color: #2b78d4;
  font-weight: 600;
}

.me-views-dot {
  background: transparent;
  border: 1px solid #c5d0dc;
  border-radius: 50%;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.me-views-nav a.active .me-views-dot {
  background: #2b78d4;
  border-color: #2b78d4;
}

.me-views-categories {
  border-top: 1px solid #e4e9ef;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
}

.me-views-categories button {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  color: #6b7785;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
}

.me-views-categories button.active {
  background: #e8f2fc;
  border-color: #2b78d4;
  color: #2b78d4;
}

.me-panel-collapse-tab {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 0 4px 4px 0;
  color: #6b7785;
  cursor: pointer;
  height: 48px;
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  z-index: 2;
}

.me-tasks-drawer {
  background: #f7f8fa;
  border-right: 1px solid #dce3ec;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 92px);
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.me-tasks-drawer[hidden] {
  display: none !important;
}

.me-tasks-drawer-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.me-requests-layout.tasks-collapsed.tasks-open .me-tasks-drawer {
  border-right: 0;
  min-width: 0;
  overflow: visible;
  width: 0;
}

.me-requests-layout.tasks-collapsed.tasks-open .me-tasks-drawer-inner {
  display: none;
}

.me-tasks-collapse-tab {
  display: block;
}

.me-requests-layout.tasks-collapsed .me-tasks-collapse-tab {
  display: none;
}

.me-tasks-expand-tab {
  display: none;
  left: auto;
  right: -14px;
}

.me-requests-layout.tasks-collapsed.tasks-open .me-tasks-expand-tab {
  display: block;
}

.me-tasks-drawer-header {
  align-items: center;
  border-bottom: 1px solid #e4e9ef;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.me-tasks-drawer-body {
  flex: 1;
  overflow: auto;
}

.me-tasks-toggle {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.me-tasks-toggle.active {
  background: #e8f2fc;
  border-color: #2b78d4;
  color: #2b78d4;
}

.me-tasks-toggle-icon {
  color: #3d9e47;
  font-size: 14px;
}

.me-requests-layout.tasks-open .me-tasks-toggle {
  background: #e8f2fc;
  border-color: #2b78d4;
  color: #2b78d4;
}

.me-tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-tasks-list a {
  color: inherit;
  display: block;
  padding: 8px 14px;
  text-decoration: none;
}

.me-tasks-list a:hover {
  background: #eef2f7;
}

.me-tasks-list strong {
  display: block;
  font-size: 13px;
}

.me-tasks-list span {
  color: #6b7785;
  font-size: 11px;
}

.me-tasks-empty {
  align-items: center;
  color: #6b7785;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 220px;
  padding: 24px 16px;
  text-align: center;
}

.me-tasks-empty-icon {
  color: #b8c4d0;
  font-size: 42px;
  line-height: 1;
}

.me-requests-main {
  background: #fff;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.me-requests-toolbar {
  align-items: center;
  background: #f7f8fa;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: space-between;
  min-height: 42px;
  padding: 6px 12px;
}

.me-requests-toolbar-left,
.me-requests-toolbar-center,
.me-requests-toolbar-right {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.me-requests-toolbar-right {
  margin-left: auto;
}

.me-requests-view-select {
  font-weight: 600;
  min-width: 160px;
}

.me-list-view-dropdown {
  position: relative;
  z-index: 1;
}

.me-list-view-dropdown[open] {
  z-index: 60;
}

.me-list-view-dropdown[open] .me-list-view-summary {
  border-color: #2b78d4;
}

.me-list-view-summary {
  align-items: center;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  color: #2f3b4a;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  list-style: none;
  min-height: 28px;
  min-width: 180px;
  padding: 4px 28px 4px 10px;
  position: relative;
}

.me-list-view-summary::-webkit-details-marker,
.me-list-view-summary::marker {
  display: none;
}

.me-list-view-summary::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6b7785;
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.me-list-view-menu {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  left: 0;
  margin-top: 4px;
  min-width: 280px;
  position: absolute;
  top: 100%;
  z-index: 50;
}

.me-list-view-search {
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 4px;
  padding: 10px 12px;
}

.me-list-view-search input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  font-size: 12px;
  min-width: 0;
  padding: 5px 8px;
}

.me-list-view-links {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow: auto;
  padding: 6px 0;
}

.me-list-view-links a {
  color: #4a5568;
  display: block;
  font-size: 13px;
  padding: 8px 14px;
  text-decoration: none;
}

.me-list-view-links a:hover {
  background: #eef2f7;
}

.me-list-view-links a.active {
  background: #e8f2fc;
  color: #2b78d4;
  font-weight: 600;
}

.me-list-view-categories {
  border-top: 1px solid #edf0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.me-list-view-categories button {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 50%;
  color: #6b7785;
  cursor: pointer;
  font-size: 10px;
  height: 44px;
  width: 44px;
}

.me-list-view-categories button.active {
  background: #e8f2fc;
  border-color: #2b78d4;
  color: #2b78d4;
}

.me-list-note-btn {
  background: #fff59d !important;
  border-color: #d4b429 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  gap: 6px;
  min-width: 72px;
  padding: 4px 10px 4px 8px !important;
  width: auto !important;
}

.me-list-note-label {
  color: #5c4f0f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.me-requests-pager {
  margin-left: 0;
}

.me-requests-activities {
  margin-left: 4px;
}

.me-view-mode-toggles {
  display: flex;
  gap: 2px;
  margin-left: 8px;
}

.me-view-mode-toggles .me-toolbar-icon.active {
  background: #e8f2fc;
  color: #2b78d4;
}

.me-actions-menu {
  position: relative;
}

.me-actions-menu summary {
  list-style: none;
}

.me-actions-menu summary::-webkit-details-marker {
  display: none;
}

.me-actions-panel {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  position: absolute;
  top: 100%;
  z-index: 20;
}

.me-actions-panel a,
.me-actions-panel button {
  background: none;
  border: 0;
  color: #4a5568;
  cursor: pointer;
  font-size: 12px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}

.me-actions-panel a:hover,
.me-actions-panel button:hover,
.me-actions-panel-btn:hover {
  background: #f4f8fd;
  color: #2b78d4;
}

.me-requests-filter-panel,
.me-requests-search-bar {
  display: none !important;
}

.me-column-search-row th {
  background: #f7f9fc;
  border-bottom: 1px solid #dce3ec;
  font-weight: 400;
  padding: 4px 6px;
}

.me-column-search-row input[type="search"],
.me-column-search-row select {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 11px;
  max-width: 100%;
  padding: 4px 6px;
  width: 100%;
}

.me-toolbar-icon.active {
  background: #e8f2fc;
  color: #2b78d4;
}

.me-requests-filter-panel input[type="search"],
.me-requests-search-bar input[type="search"] {
  display: none;
}

.me-filter-save {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.me-saved-views-strip {
  background: #fafbfc;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px;
}

.me-saved-views-strip a {
  border-radius: 12px;
  color: #5f6771;
  font-size: 12px;
  padding: 4px 10px;
  text-decoration: none;
}

.me-saved-views-strip a.active,
.me-saved-views-strip a:hover {
  background: #e8f2fc;
  color: #2b78d4;
}

.me-requests-table-wrap {
  flex: 1;
  min-width: 0;
  overflow: auto;
}

.me-requests-table-wrap > form {
  display: block;
  width: 100%;
}

.me-requests-table {
  border-collapse: collapse;
  min-width: 1280px;
  table-layout: auto;
  width: max-content;
  max-width: none;
}

.me-requests-table thead tr:first-child th[data-col-key] {
  position: relative;
}

.me-column-resizer {
  bottom: 0;
  cursor: col-resize;
  position: absolute;
  right: -4px;
  top: 0;
  touch-action: none;
  width: 8px;
  z-index: 4;
}

.me-column-resizer::after {
  background: transparent;
  bottom: 4px;
  content: "";
  position: absolute;
  right: 3px;
  top: 4px;
  width: 2px;
}

.me-column-resizer:hover::after,
.me-requests-table.is-column-resizing .me-column-resizer::after {
  background: var(--me-link, #008ddd);
}

body.me-column-resizing {
  cursor: col-resize !important;
  user-select: none;
}

.me-column-save-status {
  color: #23834b;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.me-column-save-status.is-error {
  color: #c83c3c;
}

.me-requests-table .check-col {
  width: 36px;
}

.me-requests-table .actions-col {
  padding: 4px 6px;
  width: 118px;
}

.me-requests-table .id-col {
  white-space: nowrap;
  width: 72px;
}

.me-requests-table .subject-col {
  max-width: 420px;
  min-width: 220px;
  width: auto;
  white-space: normal;
}

.me-requests-table .subject-col > .me-link {
  display: inline;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.me-requests-table .requester-col,
.me-requests-table .assigned-col,
.me-requests-table .group-col,
.me-requests-table .site-col {
  max-width: 140px;
  white-space: nowrap;
}

.me-requests-table .due-col {
  min-width: 168px;
  overflow: hidden;
  white-space: normal;
  width: 168px;
}

.me-requests-table .created-col {
  min-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  width: 150px;
}

.me-requests-table .status-col,
.me-requests-table .priority-col {
  min-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  width: 140px;
}

.me-requests-table .status-col {
  min-width: 150px;
  width: 150px;
}

.me-due-cell {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.me-due-cell .me-due-date {
  display: block;
  line-height: 1.25;
  white-space: nowrap;
}

.me-due-cell .sla-pill {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-requests-table .status-col .me-status-inline-trigger,
.me-requests-table .status-col .me-status-value-list {
  max-width: 100%;
  min-width: 0;
}

.me-requests-table .status-col .me-status-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-requests-table .reply-col,
.me-requests-table .notes-col,
.me-requests-table .edit-col,
.me-requests-table .task-col,
.me-requests-table .workflow-col,
.me-requests-table .me-action-cell {
  padding: 4px 6px;
  text-align: center;
  width: 44px;
}

.me-requests-table .department-col,
.me-requests-table .category-col,
.me-requests-table .subcategory-col,
.me-requests-table .item-col,
.me-requests-table .service-category-col,
.me-requests-table .template-col {
  max-width: 140px;
  white-space: nowrap;
}

.me-requests-table .impact-col,
.me-requests-table .urgency-col,
.me-requests-table .mode-col,
.me-requests-table .attachments-col,
.me-requests-table .sla-response-col,
.me-requests-table .sla-resolution-col {
  white-space: nowrap;
  width: 110px;
}

.me-requests-table .response-due-col,
.me-requests-table .first-response-col,
.me-requests-table .resolved-col {
  white-space: nowrap;
  width: 150px;
}

.me-task-col-link,
.me-workflow-chip {
  position: relative;
  text-decoration: none;
}

.me-task-col-badge {
  background: #e53935;
  border-radius: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
  padding: 0 4px;
}

.me-workflow-chip {
  background: #eef2f7;
  border: 1px solid #c8d0da;
  border-radius: 2px;
  color: #3d4652;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
}

.me-workflow-chip.is-pending {
  background: #fff7e8;
  border-color: #f0d39a;
  color: #8a5a00;
}

.me-sla-chip {
  border-radius: 2px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
}

.me-sla-chip.sla-on_track { background: #eef8f0; color: #2f7d4a; }
.me-sla-chip.sla-at_risk { background: #fff7e8; color: #8a5a00; }
.me-sla-chip.sla-breached { background: #fdecea; color: #c0392b; }
.me-sla-chip.sla-met { background: #e8f1fb; color: #1d4f91; }
.me-sla-chip.sla-paused { background: #f1f4f8; color: #5c6b7a; }

/* ME column chooser popover */
.me-column-chooser {
  position: relative;
}

.me-column-chooser > summary {
  list-style: none;
}

.me-column-chooser > summary::-webkit-details-marker {
  display: none;
}

.me-column-chooser-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='1.5' width='5' height='5' rx='0.5' fill='none' stroke='%235f6771' stroke-width='1.4'/%3E%3Crect x='9.5' y='1.5' width='5' height='5' rx='0.5' fill='none' stroke='%235f6771' stroke-width='1.4'/%3E%3Crect x='1.5' y='9.5' width='5' height='5' rx='0.5' fill='none' stroke='%235f6771' stroke-width='1.4'/%3E%3Cpath d='M10.5 12h4M12.5 10v4' stroke='%235f6771' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.me-column-chooser-panel {
  background: #fff;
  border: 1px solid #c8d0da;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  max-height: min(420px, 70vh);
  padding: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 260px;
  z-index: 80;
}

.me-column-chooser-search {
  align-items: center;
  border-bottom: 1px solid #e6ebf2;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

.me-column-chooser-search-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='%238a96a5' stroke-width='1.4'/%3E%3Cpath d='M9.2 9.2L12 12' stroke='%238a96a5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}

.me-column-chooser-search input {
  border: 0;
  flex: 1;
  font-size: 13px;
  min-width: 0;
  outline: none;
  padding: 2px 0;
}

.me-column-chooser-list {
  list-style: none;
  margin: 0;
  max-height: 280px;
  overflow: auto;
  padding: 6px 0;
}

.me-column-chooser-item label {
  align-items: center;
  color: #2d3748;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 8px;
  padding: 6px 12px;
}

.me-column-chooser-item label:hover {
  background: #f5f8fc;
}

.me-column-chooser-item input {
  margin: 0;
}

.me-column-chooser-actions {
  border-top: 1px solid #e6ebf2;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 12px;
}

.me-column-chooser-save {
  min-width: 72px;
}

.me-requests-table .me-column-search-row th {
  background: #f7f9fc;
  padding: 4px 6px;
  vertical-align: middle;
}

/* ME Tasks module */
.me-tasks-module {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
}

.me-tasks-toolbar {
  align-items: center;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 16px;
}

.me-tasks-toolbar-search {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 8px;
  justify-content: center;
  max-width: 560px;
}

.me-tasks-toolbar-search input[type="search"],
.me-tasks-toolbar-search select {
  border: 1px solid #c8d0da;
  border-radius: 2px;
  font-size: 13px;
  height: 32px;
  padding: 4px 8px;
}

.me-tasks-toolbar-search input[type="search"] {
  flex: 1;
  min-width: 160px;
}

.me-tasks-table-wrap {
  overflow: auto;
  padding: 0 0 24px;
}

.me-task-board-shell {
  background: linear-gradient(180deg, #f8fbff 0%, #f5f7fb 100%);
  border-bottom: 1px solid #dce3ec;
  padding: 16px;
}

.me-task-board-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.me-task-board-head h2 {
  color: #213046;
  font-size: 19px;
  margin: 0 0 4px;
}

.me-task-board-head p {
  color: #607086;
  font-size: 13px;
  margin: 0;
}

.me-task-board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-task-board-legend span {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.me-task-board-legend .is-open { background: #e8f1fb; color: #1d4f91; }
.me-task-board-legend .is-progress { background: #fff4d6; color: #8a5a00; }
.me-task-board-legend .is-done { background: #e8f8ec; color: #2f7d4a; }
.me-task-board-legend .is-cancelled { background: #eef1f5; color: #5c6b7a; }

.me-task-board {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.me-task-lane {
  background: #fff;
  border: 1px solid #dbe3ed;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(27, 39, 51, 0.06);
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
}

.me-task-lane-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.me-task-lane-head h3 {
  font-size: 14px;
  margin: 0;
}

.me-task-lane-head span {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  min-width: 24px;
  padding: 4px 7px;
  text-align: center;
}

.me-task-lane-open .me-task-lane-head {
  background: linear-gradient(180deg, #edf5ff 0%, #e8f1fb 100%);
}

.me-task-lane-open .me-task-lane-head span {
  background: #d7e8fb;
  color: #1d4f91;
}

.me-task-lane-in_progress .me-task-lane-head {
  background: linear-gradient(180deg, #fff8e7 0%, #fff3d0 100%);
}

.me-task-lane-in_progress .me-task-lane-head span {
  background: #ffe7aa;
  color: #8a5a00;
}

.me-task-lane-completed .me-task-lane-head {
  background: linear-gradient(180deg, #eefaf1 0%, #e5f7eb 100%);
}

.me-task-lane-completed .me-task-lane-head span {
  background: #d7f0df;
  color: #2f7d4a;
}

.me-task-lane-cancelled .me-task-lane-head {
  background: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
}

.me-task-lane-cancelled .me-task-lane-head span {
  background: #e2e8ef;
  color: #5c6b7a;
}

.me-task-lane-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.me-task-lane-body.is-drag-over {
  background: #f6fbff;
  box-shadow: inset 0 0 0 2px #2b78d4;
}

.me-task-lane-empty {
  align-items: center;
  border: 1px dashed #cdd7e3;
  border-radius: 10px;
  color: #8190a2;
  display: flex;
  flex: 1;
  font-size: 12px;
  justify-content: center;
  min-height: 84px;
}

.me-task-card {
  background: #fff;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(27, 39, 51, 0.08);
  cursor: grab;
  display: block;
  padding: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.me-task-card:hover {
  border-color: #b8c8da;
  box-shadow: 0 8px 18px rgba(27, 39, 51, 0.12);
  transform: translateY(-1px);
}

.me-task-card.is-dragging {
  box-shadow: 0 14px 28px rgba(27, 39, 51, 0.18);
  cursor: grabbing;
  opacity: 0.72;
}

.me-task-card.is-overdue {
  border-color: #f0b4b0;
  background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
}

.me-task-card-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.me-task-card-priority {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
}

.me-task-priority-low { background: #eef1f5; color: #536273; }
.me-task-priority-medium { background: #e8f1fb; color: #1d4f91; }
.me-task-priority-high { background: #fff4d6; color: #8a5a00; }
.me-task-priority-very_high { background: #fdecea; color: #c0392b; }

.me-task-card-request {
  color: #7b8a9d;
  font-size: 11px;
  font-weight: 600;
}

.me-task-card-title {
  color: #1e2e45;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
  text-decoration: none;
}

.me-task-card-title:hover {
  color: #0b65c2;
}

.me-task-card-subject {
  color: #637489;
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

.me-task-card-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin: 0;
}

.me-task-card-meta div {
  align-items: baseline;
  display: flex;
  gap: 6px;
}

.me-task-card-meta dt {
  color: #8a96a5;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
  min-width: 36px;
  text-transform: uppercase;
}

.me-task-card-meta dd {
  color: #334155;
  font-size: 12px;
  margin: 0;
}

.me-tasks-table {
  border-collapse: collapse;
  width: 100%;
}

.me-tasks-table th {
  background: #f3f5f8;
  border-bottom: 1px solid #d4dbe3;
  color: #5f6771;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 10px 12px;
  text-align: left;
  text-transform: uppercase;
}

.me-tasks-table td {
  border-bottom: 1px solid #e8ecf1;
  color: #2d3748;
  font-size: 13px;
  padding: 10px 12px;
  vertical-align: top;
}

.me-task-req-subject {
  color: #7a8796;
  display: block;
  font-size: 12px;
}

.me-task-status {
  border-radius: 2px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
}

.me-task-status-open { background: #e8f1fb; color: #1d4f91; }
.me-task-status-in_progress { background: #fff7e8; color: #8a5a00; }
.me-task-status-completed { background: #eef8f0; color: #2f7d4a; }
.me-task-status-cancelled { background: #f1f4f8; color: #5c6b7a; }

.me-task-overdue td {
  background: #fff8f7;
}

.me-tasks-empty-page {
  align-items: center;
  color: #5c6b7a;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 64px 24px;
  text-align: center;
}

.me-tasks-empty-page h2 {
  color: #2d3748;
  font-size: 18px;
  margin: 0;
}

.me-wo-tasks-head h2 {
  font-size: 16px;
  margin: 0 0 4px;
}

.me-wo-tasks-lead {
  color: #5c6b7a;
  font-size: 13px;
  margin: 0 0 14px;
}

.me-wo-task-add {
  border: 1px solid #dce3ec;
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 8px 12px;
}

.me-wo-task-add > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.me-wo-task-form {
  margin-top: 12px;
}

.me-wo-task-form-grid {
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.me-wo-task-form-grid label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
}

.me-wo-task-form-grid input,
.me-wo-task-form-grid select,
.me-wo-task-form-grid textarea {
  border: 1px solid #c8d0da;
  border-radius: 2px;
  font: inherit;
  font-weight: 400;
  padding: 6px 8px;
}

.me-wo-task-form-full {
  grid-column: 1 / -1;
}

.me-wo-tasks-table {
  border-collapse: collapse;
  width: 100%;
}

.me-wo-tasks-table th,
.me-wo-tasks-table td {
  border-bottom: 1px solid #e8ecf1;
  font-size: 13px;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.me-wo-tasks-table th {
  background: #f7f9fc;
  color: #5f6771;
  font-size: 11px;
  text-transform: uppercase;
}

.me-wo-task-desc {
  color: #7a8796;
  font-size: 12px;
  margin-top: 4px;
}

.me-wo-task-actions {
  white-space: nowrap;
}

.me-wo-task-actions form {
  display: inline-block;
  margin-left: 4px;
}

.me-wo-task-inline-form select {
  border: 1px solid #c8d0da;
  border-radius: 2px;
  font-size: 12px;
  padding: 4px 6px;
}

@media (max-width: 800px) {
  .me-wo-task-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .me-task-board {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 720px) {
  .me-task-board {
    grid-template-columns: 1fr;
  }
}

.me-requests-table .me-column-search-row input,
.me-requests-table .me-column-search-row select {
  box-sizing: border-box;
  font-size: 12px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 6px;
  width: 100%;
}

.me-row-actions {
  align-items: center;
  display: flex;
  gap: 2px;
}

.me-row-action {
  background: transparent;
  border: 0;
  color: #6b7785;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 3px;
  text-decoration: none;
}

.me-row-action:hover:not(:disabled) {
  color: #2b78d4;
}

.me-row-action:disabled {
  cursor: default;
  opacity: 0.45;
}

.me-row-attach {
  font-size: 12px;
  margin-left: 4px;
}

.me-priority-chip {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.2;
  vertical-align: middle;
}

.me-priority-chip::before {
  border-radius: 2px;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 10px;
  margin: 0;
  position: relative;
  top: 0;
  width: 10px;
}

.me-priority-low::before {
  background: #6b7785;
}

.me-priority-medium::before {
  background: #2b78d4;
}

.me-priority-high::before {
  background: #e67e22;
}

.me-priority-very_high::before {
  background: #d64545;
}

.me-advanced-filter-btn.active,
.me-toolbar-icon.active {
  background: #e8f2fc;
  color: #2b78d4;
}

.me-tasks-badge {
  background: #eef2f7;
  border-radius: 10px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  padding: 2px 6px;
  text-align: center;
}

.sort-hint {
  color: #b8c4d0;
  font-size: 10px;
}

.me-status-chip {
  border-radius: 10px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
}

.me-status-value {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 6px;
}

.me-status-value-list {
  font-size: 13px;
  font-weight: 500;
}

.me-status-indicator {
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}

.me-status-indicator-new,
.me-status-indicator-open,
.me-status-indicator-assigned,
.me-status-indicator-in_progress {
  background: #2b78d4;
}

.me-status-indicator-pending,
.me-status-indicator-pending_approval,
.me-status-indicator-under_approval,
.me-status-indicator-approved {
  background: #f0a500;
}

.me-status-indicator-need_clarification,
.me-status-indicator-waiting_user,
.me-status-indicator-waiting_vendor,
.me-status-indicator-on_hold {
  background: #8a96a3;
}

.me-status-indicator-resolved,
.me-status-indicator-closed {
  background: #3d9b5f;
}

.me-status-indicator-rejected,
.me-status-indicator-cancelled {
  background: #d64545;
}

.me-status-indicator-default {
  background: #b8c4d0;
}

.me-wo-summary-card .me-status-value {
  font-size: 13px;
}

.me-wo-prop-row .me-status-value {
  font-size: 13px;
}

.me-status-open,
.me-status-assigned,
.me-status-in_progress {
  background: #e8f2fc;
  color: #2b78d4;
}

.me-status-closed,
.me-status-resolved {
  background: #e6f4ea;
  color: #1e7e34;
}

.me-status-pending_approval,
.me-status-under_approval {
  background: #fff3d6;
  color: #9a6700;
}

.me-requests-empty {
  align-items: center;
  color: #6b7785;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  padding: 40px 20px;
  text-align: center;
}

.me-requests-empty h2 {
  color: #3d4652;
  font-size: 22px;
  font-weight: 600;
  margin: 16px 0 8px;
}

.me-requests-empty p {
  font-size: 14px;
  margin: 0;
}

.me-requests-table thead th {
  background: #f0f3f7;
  border-bottom: 1px solid #dce3ec;
  color: #6b7785;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.me-requests-table tbody td {
  border-bottom: 1px solid #edf0f4;
  color: #000;
  font-size: 13px;
  overflow: hidden;
  padding: 9px 12px;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.me-requests-table thead th .me-col-sort {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 4px;
  text-decoration: none;
}

.me-requests-table thead th .me-col-sort:hover {
  color: #2b78d4;
}

.me-requests-table thead th .me-col-sort.is-active {
  color: #1e5f9e;
}

.me-requests-table thead th .sort-hint {
  color: #b8c4d0;
  font-size: 10px;
  line-height: 1;
}

.me-requests-table thead th .me-col-sort.is-active .sort-hint {
  color: #2b78d4;
}

.me-requests-table tbody tr:hover {
  background: #f7fbff;
}

/* Unassigned requests stay bold until a technician is assigned (ME parity). */
.me-requests-table tbody tr.me-request-unassigned td {
  color: #000;
  font-weight: 600;
}

.me-requests-table tbody tr.me-request-unassigned .me-unassigned-label {
  font-weight: 700;
}

.me-requests-selection-bar {
  align-items: center;
  background: #eef5fc;
  border: 1px solid #c5daf0;
  border-radius: 2px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 4px;
  min-height: 32px;
  padding: 2px 8px 2px 10px;
}

.me-requests-selected-label {
  color: #2b78d4;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.me-requests-selected-clear {
  background: transparent;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

.me-requests-bulk-form {
  display: inline-flex;
  margin: 0;
}

.me-request-fab {
  align-items: center;
  bottom: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  right: 28px;
  text-decoration: none;
  width: 88px;
  z-index: 100;
}

.me-request-fab:hover {
  color: #fff;
}

.me-request-fab-ribbon {
  background: #ff6b2c;
  border-radius: 3px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  left: 50%;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
}

.me-request-fab-circle {
  align-items: center;
  background: linear-gradient(180deg, #8ee06a 0%, #5fc93a 100%);
  border: 2px solid #4db82e;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(79, 185, 58, 0.45);
  color: #1f5c12;
  display: flex;
  font-size: 28px;
  font-weight: 300;
  height: 72px;
  justify-content: center;
  line-height: 1;
  width: 72px;
}

.me-request-fab-caption {
  color: #2c6d1f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 900px) {
  .me-requests-layout {
    grid-template-columns: 1fr;
  }

  .me-views-sidebar {
    display: none;
  }

  .me-requests-activities {
    display: none;
  }

  .me-requests-toolbar-center {
    order: 3;
    width: 100%;
  }
}

.me-requests-module .request-row.selected {
  background: #eef5ff;
  border-left: 3px solid #2b78d4;
}

.me-request-detail .detail-shell {
  border-top: 1px solid #edf0f4;
}

.me-module-page .data-table {
  border-collapse: collapse;
  width: 100%;
}

.me-module-page .data-table th,
.me-module-page .data-table td {
  border-bottom: 1px solid #edf0f4;
  font-size: 13px;
  padding: 8px 10px;
}

.me-module-page .data-table th {
  background: #f7f8fa;
  color: #626a74;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.me-cmdb-table-card {
  grid-column: 1 / -1;
}

/* ME Setup Wizard ? SSO, AD, Mail (SetUpWizard.do / ImportADUsers.do parity) */
.me-wizard-tabs {
  align-items: flex-end;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0 0 16px;
  padding: 0 0 0 2px;
}

.me-wizard-tabs a {
  color: #5f6771;
  font-size: 13px;
  padding: 10px 4px 12px;
  position: relative;
  text-decoration: none;
}

.me-wizard-tabs a:hover {
  color: #2b78d4;
}

.me-wizard-tabs a.active {
  color: #2b78d4;
  font-weight: 600;
}

.me-wizard-tabs a.active::after {
  background: #2b78d4;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

.me-wizard-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.me-status-pill {
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
}

.me-status-pill.enabled {
  background: #e6f4ea;
  color: #1e7e34;
}

.me-status-pill.disabled {
  background: #fdecea;
  color: #c0392b;
}

.me-status-pill.neutral {
  background: #eef2f7;
  color: #4a5568;
}

.me-wizard-panel {
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 16px 18px;
}

.me-wizard-panel h2 {
  color: #3d4652;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}

.me-wizard-panel h3 {
  color: #4a5568;
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
}

.me-fieldset {
  display: grid;
  gap: 12px;
}

.me-field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.me-field-row small {
  color: #8a939e;
  font-size: 11px;
}

.me-toggle-row {
  align-items: center;
  flex-direction: row;
  gap: 12px;
  justify-content: space-between;
}

.me-wizard-actions,
.me-wizard-footer,
.settings-footer.me-wizard-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.me-sp-details {
  background: #f7f9fc;
  border: 1px solid #e8edf3;
  border-radius: 4px;
  margin-top: 14px;
  padding: 12px 14px;
}

.me-kv-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.me-kv-table th {
  color: #626a74;
  font-weight: 600;
  padding: 6px 10px 6px 0;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  width: 200px;
}

.me-kv-table td code,
.me-kv-dl .mono {
  font-size: 11px;
  word-break: break-all;
}

.me-kv-dl {
  display: grid;
  font-size: 12px;
  gap: 4px 12px;
  grid-template-columns: 140px 1fr;
  margin-top: 10px;
}

.me-checklist ul {
  font-size: 13px;
  margin: 8px 0 0;
  padding-left: 20px;
}

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

.me-stat-card {
  background: #f7f9fc;
  border: 1px solid #e4e9ef;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  text-align: center;
}

.me-stat-card strong {
  color: #2b78d4;
  font-size: 22px;
}

.me-stat-card span {
  color: #626a74;
  font-size: 11px;
  text-transform: uppercase;
}

.me-notify-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 12px;
}

.me-check-row {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.text-ok {
  color: #1e7e34;
}

.text-err {
  color: #c0392b;
}

/* ME Work Order detail ? WorkOrder.do view parity */
body.me-request-detail-page {
  --me-font-family: Roboto, Arial, Helvetica, sans-serif;
  --me-label: #515562;
  --me-value: #313131;
  --me-text: #333333;
  --me-link: #008ddd;
  --me-muted: #6b7785;
  color: var(--me-text);
  font-family: var(--me-font-family);
  font-size: 13px;
}

body.me-request-detail-page main {
  padding: 0;
}

.me-wo-detail {
  --me-wo-sidebar-width: 320px;
  display: grid;
  grid-template-columns: var(--me-wo-sidebar-width) minmax(0, 1fr) 280px;
  min-height: calc(100vh - 92px);
  position: relative;
}

.me-wo-detail.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 280px;
}

.me-wo-sidebar {
  background: #f5f5f5;
  border-right: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.me-wo-detail.sidebar-collapsed .me-wo-sidebar {
  border-right: 0;
}

.me-wo-sidebar-header {
  align-items: flex-start;
  border-bottom: 1px solid #e4e9ef;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
}

.me-wo-view-dropdown {
  flex: 1;
  min-width: 0;
  position: relative;
}

.me-wo-view-summary {
  align-items: center;
  color: #444;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  padding: 4px 6px;
}

.me-wo-view-summary::-webkit-details-marker {
  display: none;
}

.me-wo-view-summary::before {
  content: "\25BE ";
  color: #6b7785;
  margin-right: 4px;
}

.me-wo-view-dropdown:not([open]) .me-wo-view-summary::before {
  content: "\25B8 ";
}

.me-wo-view-menu {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
}

.me-wo-view-search {
  align-items: center;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 4px;
  padding: 8px;
}

.me-wo-view-search input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  font-size: 12px;
  min-width: 0;
  padding: 5px 8px;
}

.me-wo-view-gear {
  background: #f7f8fa;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #2b78d4;
  cursor: pointer;
  font-size: 14px;
  height: 28px;
  width: 28px;
}

.me-wo-view-links {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow: auto;
  padding: 4px 0;
}

.me-wo-view-links a {
  color: #4a5568;
  font-size: 13px;
  padding: 7px 12px;
  text-decoration: none;
}

.me-wo-view-links a:hover {
  background: #eef2f7;
}

.me-wo-view-links a.active {
  background: #e8f2fc;
  color: #2b78d4;
  font-weight: 600;
}

.me-wo-sidebar-list-search {
  border-bottom: 1px solid #edf0f4;
  padding: 8px 10px;
}

.me-wo-sidebar-list-search input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
}

.me-wo-sidebar-select {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  padding: 5px 8px;
}

.me-wo-sidebar-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.me-wo-sidebar-pager {
  align-items: center;
  border-top: 1px solid #edf0f4;
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  justify-content: center;
  padding: 6px 8px;
}

.me-wo-sidebar-pager .me-toolbar-icon {
  text-decoration: none;
}

.me-wo-sidebar-empty {
  color: #6b7785;
  font-size: 12px;
  padding: 16px 12px;
  text-align: center;
}

.me-wo-sidebar-item {
  align-items: flex-start;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  border-left: 3px solid transparent;
  color: inherit;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 10px 12px 10px 10px;
  text-decoration: none;
}

.me-wo-sidebar-item:hover {
  background: #fafafa;
}

.me-wo-sidebar-item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.me-wo-sidebar-title-row {
  align-items: flex-start;
  display: flex;
  gap: 4px;
  min-width: 0;
}

.me-wo-sidebar-attach {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='1.8'%3E%3Cpath d='M15.5 7.5 8.4 14.7a2.5 2.5 0 1 0 3.5 3.5l8.2-8.2a4 4 0 0 0-5.7-5.7l-8.5 8.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  flex-shrink: 0;
  height: 14px;
  margin-top: 2px;
  width: 12px;
}

.me-wo-sidebar-item-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 6px;
  min-height: 16px;
}

.me-conv-mail-link {
  align-items: center;
  color: #9e9e9e;
  display: inline-flex;
  position: relative;
  text-decoration: none;
}

.me-conv-mail-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='1.7'%3E%3Cpath d='M4 6.5h16v11H4z'/%3E%3Cpath d='m4.5 7 7.5 6 7.5-6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  display: inline-block;
  height: 15px;
  width: 15px;
}

.me-row-action.me-conv-mail-link {
  justify-content: center;
  min-width: 22px;
}

.me-row-action .me-conv-mail-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='1.8'%3E%3Cpath d='M4 6.5h16v11H4z'/%3E%3Cpath d='m4.5 7 7.5 6 7.5-6'/%3E%3C/svg%3E");
}

.me-conv-mail-badge {
  align-items: center;
  background: #e53935;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  height: 14px;
  justify-content: center;
  line-height: 1;
  min-width: 14px;
  padding: 0 3px;
  position: absolute;
  right: -7px;
  top: -6px;
}

.me-wo-sidebar-action {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  display: inline-block;
  flex-shrink: 0;
  height: 14px;
  opacity: 0.72;
  text-decoration: none;
  width: 14px;
}

.me-wo-sidebar-action:hover {
  opacity: 1;
}

.me-wo-sidebar-action-note {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='1.8'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='1.5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

.me-wo-sidebar-action-tasks {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='1.8'%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='12' r='2'/%3E%3Cpath d='M8 6h4v6h4M8 18h4v-6'/%3E%3C/svg%3E");
}

.me-wo-sidebar-has-note {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6c244' d='M5 3.5h10.5L19 7v13.5H5z'/%3E%3Cpath fill='%23e0a800' d='M15.5 3.5V7H19'/%3E%3Cpath fill='none' stroke='%23b8860b' stroke-width='1.2' d='M8 11h8M8 14.5h6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.me-wo-prop-tech {
  min-width: 0;
  width: 100%;
}

.me-wo-prop-tech-display {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #1f2937;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  gap: 6px;
  margin: 0;
  max-width: 100%;
  padding: 2px 4px;
  text-align: left;
}

.me-wo-prop-tech-display:hover {
  background: #f3f7fc;
  border-color: #c9d7e8;
  color: #000;
}

.me-wo-prop-tech-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-wo-prop-tech-caret {
  color: #7a8694;
  font-size: 10px;
}

.me-wo-prop-tech-edit {
  align-items: center;
  display: flex;
  gap: 6px;
  max-width: 360px;
  width: 100%;
}

.me-wo-prop-tech-edit .me-combobox {
  flex: 1;
  min-width: 0;
}

.me-wo-prop-tech-save,
.me-wo-prop-tech-cancel {
  align-items: center;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 26px;
  font-size: 14px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 26px;
}

.me-wo-prop-tech-save {
  background: #2e7d32;
  color: #fff;
}

.me-wo-prop-tech-save:hover {
  background: #1b5e20;
}

.me-wo-prop-tech-cancel {
  background: #90a4ae;
  color: #fff;
}

.me-wo-prop-tech-cancel:hover {
  background: #607d8b;
}

.me-wo-prop-tech.is-editing .me-wo-prop-tech-display {
  display: none;
}

.me-wo-sidebar-title {
  color: #333;
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-req-type-icon {
  background-image: url("../images/me-ui-common-view.svg");
  background-repeat: no-repeat;
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  margin-top: 1px;
  width: 16px;
}

.me-req-type-icon-incident {
  background-position: -60px -122px;
}

.me-req-type-icon-service {
  background-position: -40px -122px;
}

.me-req-type-icon-lg {
  height: 16px;
  margin-left: 8px;
  margin-top: 0;
  vertical-align: middle;
  width: 16px;
}

.me-req-type-icon-lg.me-req-type-icon-incident {
  background-position: -417px -727px;
}

.me-wo-header h1 {
  align-items: center;
  color: #000;
  display: flex;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 400;
  gap: 4px;
  margin: 0 0 6px;
}

.me-wo-header-title-text {
  min-width: 0;
}

.me-wo-meta {
  color: #6b7785;
  font-size: 12px;
  margin: 0;
}

.me-wo-tabs {
  border-bottom: 1px solid #dce3ec;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  padding: 0 16px;
}

.me-wo-tabs a {
  border-bottom: 2px solid transparent;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 0 8px;
  text-decoration: none;
}

.me-wo-tabs a:hover {
  color: #008ddd;
}

.me-wo-tabs a.active {
  border-bottom-color: #008ddd;
  color: #008ddd;
  font-weight: 400;
}

.me-wo-panel {
  display: none;
  padding: 12px 16px 24px;
}

.me-wo-panel.active {
  display: block;
}

.me-wo-section {
  background: #fff;
  border: 1px solid #e4e9ef;
  margin-bottom: 14px;
}

.me-wo-section-head {
  align-items: center;
  background: #f5f5f5;
  border-bottom: 1px solid #e4e9ef;
  color: #333;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 12px;
  justify-content: flex-start;
  list-style: none;
  padding: 8px 12px;
}

.me-wo-section-head.static {
  cursor: default;
}

.me-wo-section-head::-webkit-details-marker {
  display: none;
}

.me-wo-edit-link {
  align-items: center;
  color: #008ddd;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 400;
  gap: 4px;
  margin-left: 8px;
  text-decoration: none;
}

.me-wo-edit-pencil {
  color: #008ddd;
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}

.me-wo-edit-pencil::before {
  content: "\270E";
}

.me-wo-section-body {
  padding: 12px;
}

.me-wo-sidebar-title:hover {
  color: #333;
  text-decoration: underline;
}

.me-wo-sidebar-meta {
  color: #666;
  font-size: 12px;
  line-height: 1.35;
}

.me-wo-user-link {
  background: none;
  border: 0;
  color: #008ddd;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.me-wo-user-link:hover {
  text-decoration: underline;
}

.me-wo-requester-name {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.me-wo-header-requester {
  font-size: 13px;
  font-weight: 600;
}

.me-wo-sidebar-item.active {
  background: #fff;
  border-left-color: #2b78d4;
  box-shadow: inset 0 0 0 1px #e8e8e8;
}

.me-wo-sidebar-item.active .me-wo-sidebar-title {
  color: #333;
}

.me-wo-sidebar-collapse {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  height: 48px;
  left: var(--me-wo-sidebar-width);
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  z-index: 5;
}

.me-wo-sidebar-resizer {
  bottom: 0;
  cursor: col-resize;
  left: calc(var(--me-wo-sidebar-width) - 3px);
  position: absolute;
  top: 0;
  width: 7px;
  z-index: 4;
}

.me-wo-sidebar-resizer:hover,
.me-wo-detail.sidebar-resizing .me-wo-sidebar-resizer {
  background: rgba(43, 120, 212, 0.2);
}

.me-wo-detail.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
}

.me-wo-detail.sidebar-collapsed .me-wo-sidebar-collapse {
  left: 0;
}

.me-wo-detail.sidebar-collapsed .me-wo-sidebar-resizer {
  display: none;
}

.me-wo-main {
  background: #fff;
  min-width: 0;
  overflow: auto;
}

.me-wo-actionbar {
  align-items: center;
  background: #f7f8fa;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px;
}

.me-wo-nav-btn {
  min-width: 30px;
  padding-left: 8px;
  padding-right: 8px;
}

.me-wo-inline-form {
  display: inline;
  margin: 0;
}

.me-resolve-confirm-banner {
  align-items: center;
  background: #f3f8ff;
  border: 1px solid #c5daf5;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 16px 12px;
  padding: 12px 14px;
}

.me-resolve-confirm-banner strong {
  color: #1f4e8c;
  font-size: 14px;
}

.me-resolve-confirm-banner > span {
  color: #44566c;
  flex: 1 1 220px;
  font-size: 13px;
}

.me-resolve-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-wo-header {
  border-bottom: 1px solid #edf0f4;
  padding: 12px 16px 10px;
}

.me-wo-header-top {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.me-wo-header-top h1 {
  flex: 1;
  min-width: 0;
}

.me-wo-status-badge {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  gap: 8px;
  line-height: 1.2;
  max-width: 250px;
  min-height: 36px;
  padding: 8px 18px;
  white-space: nowrap;
}

.me-wo-status-badge::before {
  content: "\25CF";
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.me-wo-status-badge-closed {
  border: 2px solid #00a511;
  color: #378d41;
}

.me-wo-status-badge-resolved {
  border: 2px solid #00a511;
  color: #378d41;
}

.me-wo-status-badge-cancelled {
  border: 2px solid #c62828;
  color: #b71c1c;
}

.me-wo-description {
  line-height: 1.5;
  min-height: 40px;
}

.me-wo-attach-zone {
  border-top: 1px dotted #c5c5c5;
  margin-top: 12px;
  padding-top: 14px;
}

.me-wo-attach-drop,
.me-note-attach-drop {
  align-items: center;
  background: transparent;
  border: 0;
  color: #000;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  gap: 6px;
  justify-content: center;
  line-height: 1.4;
  margin: 0;
  padding: 10px 8px;
  text-align: center;
  width: 100%;
}

.me-wo-attach-drop input,
.me-note-attach-drop input {
  display: none;
}

.me-note-attach-icon {
  color: #333;
  display: inline-block;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  transform: rotate(-25deg);
}

.me-attach-browse {
  color: #008ddd;
  font-weight: 400;
  text-decoration: none;
}

.me-attach-browse:hover {
  text-decoration: underline;
}

.me-attach-hint,
.me-wo-attach-drop small,
.me-note-attach-drop small,
.me-preview-attach-hint {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.me-attach-drop-zone.drag-over {
  background: #eef5fc;
  outline: 1px dashed #008ddd;
}

.me-attach-drop-zone.has-files {
  padding-bottom: 10px;
}

.me-request-attachments,
.me-wo-resolution-attachments,
.me-preview-attachments {
  background: #fff;
  border: 1px solid #e0e0e0;
  margin-top: 12px;
  padding: 0;
}

.me-request-attachments h2,
.me-wo-resolution-attachments h3,
.me-preview-attachments h4 {
  border-bottom: 1px solid #e0e0e0;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  padding: 10px 14px;
}

.me-attach-empty,
.me-wo-resolution-attach-empty {
  border-bottom: 1px dotted #c5c5c5;
  color: #555;
  font-size: 14px;
  margin: 0;
  padding: 14px 16px 12px;
}

.me-request-attachments .me-note-attach-drop,
.me-wo-resolution-attach-drop,
.me-preview-attach-drop {
  border-top: 0;
  margin: 0;
  padding: 16px 12px 18px;
}

.me-wo-resolution-attachments {
  border-top: 1px solid #e0e0e0;
  margin-top: 14px;
  padding-top: 0;
}

.me-wo-resolution-attach-list {
  border-bottom: 1px dotted #c5c5c5;
  list-style: none;
  margin: 0;
  padding: 10px 16px;
}

.me-wo-reply-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.me-wo-conv-head-right {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-end;
  min-width: 0;
}

.me-wo-conv-head-main {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 14px;
  min-width: 0;
}

.me-wo-conv-head-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.me-wo-conv-title {
  flex-shrink: 0;
  white-space: nowrap;
}

.me-wo-section-head.me-wo-conv-head {
  flex-wrap: nowrap;
  gap: 12px;
}

.me-wo-conv-filters {
  align-items: center;
  display: inline-flex;
  flex-shrink: 1;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 400;
  gap: 16px;
  min-width: 0;
}

.me-wo-conv-filters label,
.me-wo-conv-filter {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-shrink: 0;
  gap: 6px;
  line-height: 1.2;
  max-width: none;
  white-space: nowrap;
}

.me-wo-conv-filters input[type="checkbox"] {
  accent-color: #2b78d4;
  box-sizing: border-box;
  flex: 0 0 13px !important;
  height: 13px !important;
  margin: 0 !important;
  max-width: 13px !important;
  min-width: 13px !important;
  padding: 0 !important;
  width: 13px !important;
}

.me-wo-conv-filters .me-wo-conv-filter span {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
}

.me-wo-conv-tools {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.me-wo-conv-list {
  background: #fff;
  border: 1px solid #d9e1ea;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0 !important;
}

.me-wo-conv-empty {
  padding: 24px 16px;
}

.me-wo-conv-card {
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e8edf3;
  margin: 0;
}

.me-wo-conv-card:last-child {
  border-bottom: 0;
}

.me-wo-conv-card[open] {
  background: #fbfcfe;
  border-bottom: 1px solid #d9e1ea;
  box-shadow: inset 3px 0 0 #1a73e8;
}

.me-wo-conv-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: 11px 14px;
}

.me-wo-conv-summary::-webkit-details-marker,
.me-wo-conv-summary::marker {
  content: "";
  display: none;
}

.me-wo-conv-summary-left {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  min-width: 0;
}

.me-wo-conv-author {
  color: #243041;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-wo-conv-when {
  color: #7a8694;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.me-wo-conv-type-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  display: inline-block;
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.me-wo-conv-type-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d64545'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.me-wo-conv-type-system {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7785'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.2 7.2 0 0 0-1.63-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.55-1.63.94l-2.39-.96a.49.49 0 0 0-.59.22L2.77 8.87a.48.48 0 0 0 .12.61l2.03 1.58c-.04.31-.07.63-.07.94s.03.63.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.13.23.4.31.61.22l2.39-.96c.5.39 1.04.71 1.63.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.23 1.13-.55 1.63-.94l2.39.96c.23.09.49 0 .61-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E");
}

.me-wo-conv-type-note {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a227'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

.me-wo-conv-panel {
  border-top: 1px solid #edf1f5;
  padding: 0 14px 14px;
}

.me-wo-conv-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 12px;
}

.me-wo-conv-panel-tools {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
}

.me-wo-conv-icon-btn {
  align-items: center;
  appearance: none;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #627083;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 28px;
}

.me-wo-conv-icon-btn:hover:not(:disabled) {
  background: #eef4fb;
  border-color: #c9d7e8;
  color: #1a73e8;
}

.me-wo-conv-icon-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.me-wo-conv-subject {
  color: #243041;
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
  padding-top: 4px;
}

.me-wo-conv-subject-label {
  color: #536174;
  font-weight: 600;
  margin-right: 4px;
}

.me-wo-conv-body {
  color: #243041;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.me-wo-conv-body.rich-text {
  white-space: normal;
}

.me-wo-conv-body.rich-text p {
  margin: 0 0 0.55em;
}

.me-wo-conv-body.rich-text p:last-child {
  margin-bottom: 0;
}

.me-wo-conv-body.rich-text blockquote,
.me-wo-conv-body.rich-text .gmail_quote,
.me-wo-conv-body .quoted {
  border-left: 3px solid #d5dee8;
  color: #4b5563;
  margin: 10px 0 0;
  padding: 2px 0 2px 12px;
}

.me-wo-conv-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.me-wo-conv-pill {
  appearance: none;
  background: #f5f7fa;
  border: 1px solid #cfd7e2;
  border-radius: 16px;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  padding: 8px 14px;
}

.me-wo-conv-pill:hover:not(:disabled) {
  background: #eaf2fb;
  border-color: #9eb8d6;
  color: #1a73e8;
}

.me-wo-conv-pill:disabled {
  cursor: default;
  opacity: 0.5;
}

.me-wo-assoc-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.me-wo-assoc-links a {
  color: #2b78d4;
  font-size: 12px;
  text-decoration: none;
}

.me-wo-assoc-links a::before {
  content: "\25B8 ";
  color: #6b7785;
}

.me-wo-assoc-links a:hover {
  text-decoration: underline;
}

.me-wo-comment {
  border-bottom: 1px solid #edf0f4;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.me-wo-comment-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-width: 0;
}

.me-wo-comment-summary::-webkit-details-marker {
  display: none;
}

.me-wo-comment-summary-main {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-wo-comment-detail {
  margin-top: 8px;
  min-width: 0;
  overflow-x: auto;
}

.me-wo-comment-subject {
  color: #3d4652;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.me-wo-comment-body {
  font-size: 12px;
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
  overflow-x: auto;
}

.me-wo-comment-body.rich-text,
.me-wo-comment-body.rich-text table {
  max-width: 100%;
}

.me-wo-comment-body.rich-text img {
  height: auto;
  max-width: 100%;
}

.me-wo-comment-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.me-wo-comment-channel {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
}

.me-wo-comment-icon {
  color: #6b7785;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

.me-wo-comment-icon-email {
  color: #2b78d4;
}

.me-wo-comment-date {
  color: #6b7785;
  flex-shrink: 0;
  font-size: 11px;
  white-space: nowrap;
}

.me-wo-comment-body {
  font-size: 12px;
  line-height: 1.5;
}

.me-wo-properties-columns {
  display: grid;
  gap: 0 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px 16px 16px;
}

.me-wo-properties-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.me-wo-prop-row {
  align-items: flex-start;
  border-bottom: 0;
  display: grid;
  gap: 0 16px;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  padding: 5px 0;
}

.me-wo-prop-row.me-wo-prop-spacer {
  border-bottom: 0;
  min-height: 14px;
  padding: 2px 0;
}

.me-wo-prop-row label {
  color: #000;
  display: block;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  padding: 5px 8px 5px 0;
  text-align: right;
}

.me-wo-prop-row strong {
  align-items: center;
  color: #000;
  display: flex;
  flex-wrap: wrap;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.35;
  padding: 5px 0;
  word-break: break-word;
}

.me-wo-prop-row .me-status-value {
  color: #313131;
  font-size: 14px;
  font-weight: 600;
}

.me-wo-user-icon {
  background-color: #7e57c2;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 14px;
  position: relative;
  width: 14px;
}

.me-wo-user-icon::before {
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 4px;
  left: 5px;
  position: absolute;
  top: 2px;
  width: 4px;
}

.me-wo-user-icon::after {
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  bottom: 1px;
  content: "";
  height: 4px;
  left: 3px;
  position: absolute;
  width: 8px;
}

.me-wo-prop-row strong .me-wo-user-link,
.me-wo-prop-row .me-tech-name {
  color: #5e35b1;
  font-weight: 600;
}

.me-wo-properties-extras {
  border-top: 0;
  padding: 0 16px 12px;
}

.me-wo-requester-links {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 6px;
  margin: 4px 0 8px;
}

.me-wo-requester-links a {
  color: #2b78d4;
}

.me-wo-requester-field {
  display: grid;
  font-size: 12px;
  gap: 2px;
  grid-template-columns: 110px 1fr;
  margin-top: 4px;
}

.me-wo-requester-field span {
  color: #6b7785;
}

.me-wo-requester-field strong {
  font-weight: 500;
}

.me-wo-right {
  background: #f7f8fa;
  border-left: 1px solid #dce3ec;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: auto;
  padding: 12px;
}

.me-wo-summary-card {
  background: #fff;
  border: 1px solid #e4e9ef;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.me-wo-summary-card label {
  color: #6b7785;
  display: block;
  font-size: 11px;
}

.me-wo-summary-card strong {
  font-size: 13px;
}

.me-wo-closed-ops {
  display: grid;
  gap: 10px;
}

.me-wo-closed-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-wo-closed-row label,
.me-wo-closed-comments label {
  color: #5f6b7a;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

.me-wo-fcr-form {
  display: inline;
  margin: 0;
}

.me-wo-fcr-toggle {
  background: none;
  border: 0;
  color: #1f2937;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.me-wo-fcr-marked {
  color: #0f7a3a;
  text-decoration: none;
}

.me-wo-ack-banner {
  align-items: flex-start;
  background: #f5f5f5;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px -12px;
  padding: 10px 14px;
  width: calc(100% + 24px);
}

.me-wo-ack-icon {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 22px;
}

.me-wo-ack-no .me-wo-ack-icon {
  background: #d64545;
}

.me-wo-ack-yes .me-wo-ack-icon {
  background: #1f9d55;
}

.me-wo-ack-copy {
  display: flex;
  flex: 1 1 120px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.me-wo-ack-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

.me-wo-ack-banner strong {
  color: #333;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.me-wo-ack-form {
  flex: 1 1 100%;
  margin: 0;
}

.me-wo-ack-tick {
  align-items: center;
  background: #fff;
  border: 1px solid #2563eb;
  border-radius: 8px;
  color: #2563eb;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
}

.me-wo-ack-tick:hover {
  background: #2563eb;
  color: #fff;
}

.me-wo-closed-comments {
  display: grid;
  gap: 4px;
}

.me-wo-closed-comments strong {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  white-space: pre-wrap;
  word-break: break-word;
}

.me-wo-more-props {
  color: #2b78d4;
  font-size: 12px;
  margin-top: 4px;
  text-decoration: none;
}

.me-time-analysis .me-wo-section-body {
  display: grid;
  gap: 18px;
}

.me-ta-summary {
  border: 1px solid #e4e9ef;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.me-ta-summary-block {
  padding: 12px 14px;
}

.me-ta-summary-block + .me-ta-summary-block {
  border-left: 1px solid #e4e9ef;
}

.me-ta-summary-block h3,
.me-ta-elapsed h3 {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
}

.me-ta-summary-grid {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: 1fr 1fr;
}

.me-ta-summary-grid label {
  color: #6b7785;
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.me-ta-summary-grid strong {
  color: #111827;
  font-size: 13px;
}

.me-ta-elapsed {
  border: 1px solid #e4e9ef;
  padding: 12px 14px;
}

.me-ta-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.me-ta-legend-item {
  align-items: center;
  color: #4b5563;
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
}

.me-ta-swatch {
  border: 1px solid #c5ced6;
  display: inline-block;
  height: 12px;
  width: 12px;
}

.me-ta-swatch-unassigned {
  background: #fff;
}

.me-ta-swatch-group {
  background: linear-gradient(90deg, #fff 50%, #5b9bd5 50%);
}

.me-ta-swatch-tech {
  background: linear-gradient(90deg, #fff 50%, #70ad47 50%);
}

.me-ta-timeline-rows {
  display: grid;
  gap: 10px;
}

.me-ta-timeline-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 90px 1fr;
}

.me-ta-timeline-label {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.me-ta-bar {
  background: #f3f5f8;
  border: 1px solid #e4e9ef;
  display: flex;
  height: 18px;
  overflow: hidden;
  width: 100%;
}

.me-ta-seg {
  display: block;
  height: 100%;
  min-width: 2px;
}

.me-ta-seg-unassigned {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.55) 4px,
    transparent 4px,
    transparent 8px
  );
}

.me-ta-seg-empty {
  align-items: center;
  color: #6b7785;
  display: flex;
  font-size: 11px;
  justify-content: center;
}

.me-ta-tables {
  display: grid;
  gap: 18px;
}

.me-ta-table {
  border-collapse: collapse;
  width: 100%;
}

.me-ta-table caption {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left;
}

.me-ta-table th,
.me-ta-table td {
  border-bottom: 1px solid #e4e9ef;
  font-size: 13px;
  padding: 10px 8px;
  text-align: left;
}

.me-ta-table th {
  color: #6b7785;
  font-weight: 600;
}

.me-ta-table td {
  color: #111827;
  font-weight: 600;
}

@media (max-width: 900px) {
  .me-ta-summary {
    grid-template-columns: 1fr;
  }

  .me-ta-summary-block + .me-ta-summary-block {
    border-left: 0;
    border-top: 1px solid #e4e9ef;
  }

  .me-ta-timeline-row {
    grid-template-columns: 1fr;
  }
}

.me-wo-share {
  width: 100%;
}

.me-history-roadmap .me-history-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.me-history-tools {
  align-items: center;
  display: flex;
  gap: 10px;
}

.me-history-filter {
  align-items: center;
  color: #6b7785;
  display: inline-flex;
  font-size: 12px;
  gap: 8px;
}

.me-history-filter input {
  border: 1px solid #d5dde7;
  border-radius: 4px;
  font-size: 13px;
  min-width: 220px;
  padding: 7px 10px;
}

.me-history-sort {
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 4px;
  color: #334155;
  cursor: pointer;
  font-size: 14px;
  height: 34px;
  line-height: 1;
  width: 34px;
}

.me-history-groups {
  display: grid;
  gap: 12px;
}

.me-history-day {
  border: 0;
}

.me-history-day-head {
  align-items: center;
  background: #f3f5f8;
  border-radius: 6px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: space-between;
  list-style: none;
  padding: 10px 14px;
}

.me-history-day-head::-webkit-details-marker {
  display: none;
}

.me-history-day-toggle {
  border: 1px solid #c5ced6;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  position: relative;
  width: 20px;
}

.me-history-day-toggle::before {
  border-left: 2px solid #6b7785;
  border-bottom: 2px solid #6b7785;
  content: "";
  height: 6px;
  left: 6px;
  position: absolute;
  top: 5px;
  transform: rotate(-45deg);
  width: 6px;
}

.me-history-day[open] .me-history-day-toggle::before {
  top: 7px;
  transform: rotate(135deg);
}

.me-history-timeline {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
}

.me-history-item {
  display: grid;
  gap: 12px;
  grid-template-columns: 74px 24px 1fr;
  padding: 14px 8px 14px 4px;
  position: relative;
}

.me-history-item + .me-history-item {
  border-top: 1px solid #eef2f6;
}

.me-history-time {
  color: #6b7785;
  font-size: 12px;
  padding-top: 2px;
  text-align: right;
}

.me-history-rail {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  position: relative;
}

.me-history-item:not(:last-child) .me-history-rail::after {
  background: #d7dee7;
  bottom: -14px;
  content: "";
  left: 50%;
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  width: 2px;
}

.me-history-node {
  background: #e8eef5;
  border: 2px solid #c5ced6;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 18px;
  position: relative;
  width: 18px;
  z-index: 1;
}

.me-history-node-closed,
.me-history-node-success {
  background: #1f9d55;
  border-color: #1f9d55;
}

.me-history-node-closed::before,
.me-history-node-success::before {
  color: #fff;
  content: "\2713";
  font-size: 10px;
  font-weight: 700;
  left: 3px;
  position: absolute;
  top: 0;
}

.me-history-node-conversation {
  background: #edf2f7;
  border-color: #a8b3c2;
}

.me-history-node-conversation::before {
  content: "\2709";
  font-size: 9px;
  left: 2px;
  position: absolute;
  top: 1px;
}

.me-history-node-created,
.me-history-node-system,
.me-history-node-assign,
.me-history-node-approval,
.me-history-node-progress,
.me-history-node-reopen {
  background: #f8fafc;
  border-color: #9aa8b8;
}

.me-history-node-created::before,
.me-history-node-system::before {
  content: "\2699";
  font-size: 9px;
  left: 3px;
  position: absolute;
  top: 1px;
}

.me-history-node-assign::before {
  content: "\2192";
  font-size: 8px;
  left: 2px;
  position: absolute;
  top: 1px;
}

.me-history-node-danger {
  background: #d64545;
  border-color: #d64545;
}

.me-history-title {
  color: #111827;
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.me-history-actor {
  color: #6b7785;
  font-size: 12px;
  margin-top: 2px;
}

.me-history-actor span {
  color: #2b78d4;
  font-weight: 600;
}

.me-history-details {
  color: #4b5563;
  font-size: 12px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.me-history-details li {
  margin: 0 0 3px;
}

.me-history-item[hidden],
.me-history-day[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .me-history-item {
    grid-template-columns: 58px 20px 1fr;
  }

  .me-history-filter input {
    min-width: 160px;
  }
}

.me-wo-assoc-side summary,
.me-wo-assoc summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.me-wo-requester-card {
  background: #fff;
  border: 1px solid #e4e9ef;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding: 12px;
}

.me-user-drawer {
  background: rgba(17, 24, 39, 0.28);
  inset: 0;
  position: fixed;
  z-index: 1200;
}

.me-user-drawer[hidden] {
  display: none !important;
}

.me-user-drawer.is-open {
  display: block !important;
}

.me-user-drawer-panel {
  background: #fff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  max-width: 100%;
  width: 420px;
}

.me-wo-header-requester {
  font-size: inherit;
  font-weight: 700;
}

.me-user-drawer-head {
  align-items: center;
  background: #f3f5f8;
  border-bottom: 1px solid #e4e9ef;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.me-user-drawer-head h2 {
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.me-user-drawer-close {
  background: none;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.me-user-drawer-body {
  display: grid;
  gap: 18px;
  overflow: auto;
  padding: 18px 16px;
}

.me-user-drawer-profile {
  align-items: center;
  display: flex;
  gap: 14px;
}

.me-user-drawer-avatar {
  align-items: center;
  background: #dce3ec;
  border-radius: 50%;
  color: #475569;
  display: flex;
  font-size: 22px;
  font-weight: 700;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.me-user-drawer-profile strong {
  color: #111827;
  font-size: 20px;
  font-weight: 700;
}

.me-user-drawer-grid {
  display: grid;
  gap: 18px 28px;
  grid-template-columns: 1fr 1fr;
}

.me-user-drawer-col {
  display: grid;
  gap: 12px;
}

.me-user-drawer-field label {
  color: #6b7785;
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}

.me-user-drawer-field strong {
  color: #111827;
  font-size: 13px;
  font-weight: 600;
}

.me-wo-requester-avatar {
  align-items: center;
  background: #dce3ec;
  border-radius: 50%;
  display: flex;
  height: 36px;
  justify-content: center;
  margin-bottom: 4px;
  width: 36px;
}

.me-wo-requester-card a {
  color: #2b78d4;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .me-wo-detail {
    grid-template-columns: var(--me-wo-sidebar-width) minmax(0, 1fr);
  }

  .me-wo-detail.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .me-wo-right {
    grid-column: 1 / -1;
    order: 3;
  }
}

@media (max-width: 800px) {
  .me-wo-detail,
  .me-wo-detail.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .me-wo-sidebar,
  .me-wo-detail.sidebar-collapsed .me-wo-sidebar {
    border-right: 1px solid #d9d9d9;
    display: flex;
    max-height: 180px;
  }

  .me-wo-sidebar-resizer,
  .me-wo-sidebar-collapse {
    display: none;
  }
}

/* ME Resolution tab */
.me-wo-subtabs {
  border-bottom: 1px solid #dce3ec;
  display: flex;
  gap: 0 20px;
  margin: 0 0 0;
  padding: 0 16px;
}

.me-wo-subtab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #5f6771;
  cursor: pointer;
  font-size: 13px;
  padding: 10px 0;
}

.me-wo-subtab.active {
  border-bottom-color: #2b78d4;
  color: #2b78d4;
  font-weight: 600;
}

.me-wo-resolution-form {
  padding: 0 16px 20px;
}

.me-wo-resolution-panel[hidden] {
  display: none !important;
}

.me-wo-resolution-panel.active {
  display: block;
}

.me-resolution-status-combobox > select.me-combobox-native,
.me-resolution-status-combobox > select#id_resolution_status {
  height: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
}

.me-wo-resolution-worklog-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.me-rte-toolbar {
  align-items: center;
  background: #f7f8fa;
  border: 1px solid #dce3ec;
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 6px;
}

.me-rte-btn {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  color: #4a5568;
  cursor: pointer;
  font-size: 12px;
  min-width: 28px;
  padding: 4px 6px;
}

.me-rte-btn:hover {
  background: #eef2f7;
}

.me-rte-sep {
  border-left: 1px solid #dce3ec;
  height: 20px;
  margin: 0 4px;
  width: 0;
}

.me-rte-textarea {
  border: 1px solid #dce3ec;
  border-radius: 0 0 2px 2px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  min-height: 220px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.me-wo-resolution-meta {
  border-top: 1px solid #edf0f4;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
}

.me-wo-resolution-meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px 16px;
}

.me-wo-resolution-meta-row label {
  color: #4a5568;
}

.me-wo-resolution-meta-row select {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 12px;
  min-width: 200px;
  padding: 5px 8px;
}

.me-wo-resolution-actions {
  background: #f5f6f8;
  border-top: 1px solid #dce3ec;
  bottom: 0;
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 0 4px;
  position: sticky;
  z-index: 6;
}

.me-wo-resolution-attach-list {
  border-bottom: 1px dotted #c5c5c5;
  list-style: none;
  margin: 0;
  padding: 10px 16px;
}

.me-wo-resolution-status-row label {
  color: #4a5568;
  font-size: 12px;
  min-width: 160px;
}

.me-resolution-status-select {
  min-width: 220px;
}

.me-resolution-status-combobox {
  flex: 1;
  max-width: 320px;
  min-width: 220px;
}

.me-wo-resolution-readonly {
  padding: 0 16px 20px;
}

/* Request detail ? Approvals tab (IT Service Desk parity) */
.me-wo-approvals .me-wo-section-body {
  padding: 0;
}

.me-approval-summary {
  align-items: center;
  background: #f7f9fc;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
}

.me-approval-summary-label {
  color: #6b7785;
  font-size: 12px;
  font-weight: 600;
}

.me-approval-summary-meta {
  color: #6b7785;
  font-size: 12px;
  margin-left: auto;
}

.me-approval-pending {
  background: #fff3d6;
  color: #9a6700;
}

.me-approval-approved {
  background: #e6f4ea;
  color: #1e7e34;
}

.me-approval-rejected {
  background: #fde8e8;
  color: #c62828;
}

.me-approval-skipped {
  background: #eef1f5;
  color: #6b7785;
}

.me-approval-none {
  background: #eef1f5;
  color: #6b7785;
}

.me-approval-default {
  background: #e8f2fc;
  color: #2b78d4;
}

.me-approval-table-wrap {
  overflow-x: auto;
  padding: 0 16px 16px;
}

.me-approval-table {
  margin-top: 12px;
  width: 100%;
}

.me-approval-level {
  min-width: 120px;
}

.me-approval-level strong {
  display: block;
  font-size: 14px;
}

.me-approval-level span {
  color: #6b7785;
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.me-approval-approver-cell {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 180px;
}

.me-approval-avatar {
  align-items: center;
  background: #dce3ec;
  border-radius: 50%;
  box-sizing: border-box;
  color: #3d4652;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  width: 36px;
}

.me-approval-approver-cell strong {
  display: block;
  font-size: 13px;
}

.me-approval-approver-cell > div > span {
  color: #6b7785;
  display: block;
  font-size: 11px;
}

.me-approval-decided-by {
  color: #6b7785;
  display: block;
  font-size: 11px;
  margin-top: 4px;
}

.me-approval-comments {
  color: #3d4652;
  font-size: 12px;
  max-width: 240px;
  white-space: pre-wrap;
  word-break: break-word;
}

.me-approval-empty {
  color: #6b7785;
  font-size: 13px;
  padding: 24px 16px;
  text-align: center;
}

.me-approval-action-panel {
  background: #fffaf0;
  border-top: 1px solid #f0e2c4;
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 14px 16px 16px;
}

.me-approval-action-head {
  display: grid;
  gap: 2px;
}

.me-approval-action-head strong {
  font-size: 13px;
}

.me-approval-action-head span {
  color: #9a6700;
  font-size: 12px;
}

.me-approval-comments-field {
  display: grid;
  gap: 4px;
}

.me-approval-comments-field span {
  color: #6b7785;
  font-size: 12px;
  font-weight: 600;
}

.me-approval-comments-field textarea {
  border: 1px solid #dce3ec;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}

.me-approval-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-toolbar-btn-danger {
  background: #fff;
  border-color: #e0b4b4;
  color: #c62828;
}

.me-toolbar-btn-danger:hover {
  background: #fde8e8;
  border-color: #c62828;
}

.me-approval-history {
  border-top: 1px solid #edf0f4;
  padding: 14px 16px 18px;
}

.me-approval-history h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.me-approval-history-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-approval-history-list li {
  border-left: 3px solid #dce3ec;
  display: grid;
  gap: 2px;
  padding-left: 10px;
}

.me-approval-history-list strong {
  font-size: 13px;
}

.me-approval-history-list span {
  color: #6b7785;
  font-size: 11px;
}

.me-approval-history-list p {
  color: #3d4652;
  font-size: 12px;
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.me-approval-row-pending .me-approval-level strong {
  color: #9a6700;
}

/* Work Logs tab + New Work Log modal (IT Service Desk-style) */
.me-info-banner {
  align-items: flex-start;
  background: #f4f7fb;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  color: #4a5568;
  display: flex;
  font-size: 13px;
  gap: 10px;
  line-height: 1.5;
  padding: 12px 14px;
}

.me-info-banner-icon {
  color: #5b8fd9;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.me-info-banner-link {
  background: none;
  border: 0;
  color: #2b78d4;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: none;
}

.me-info-banner-link:hover {
  text-decoration: underline;
}

.me-worklog-table-wrap {
  overflow-x: auto;
}

.me-worklog-table .me-worklog-desc {
  max-width: 280px;
}

/* ME-style right drawer for New Work Log */
.me-worklog-modal-overlay {
  align-items: stretch;
  background: rgba(17, 24, 39, 0.42);
  justify-content: flex-end;
  padding: 0;
}

.me-worklog-modal-dialog {
  border-radius: 0;
  box-shadow: -8px 0 28px rgba(15, 23, 42, 0.2);
  height: 100%;
  margin: 0;
  max-height: 100vh;
  max-width: min(980px, 74vw);
  width: min(980px, 74vw);
  animation: me-worklog-drawer-in 0.22s ease-out;
}

@keyframes me-worklog-drawer-in {
  from {
    opacity: 0.4;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.me-worklog-modal-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
}

.me-worklog-modal-header {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e5e9ef;
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 1fr auto auto;
  padding: 14px 18px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.me-worklog-modal-header h2 {
  color: #243041;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.me-worklog-template-pick {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 8px;
}

.me-worklog-template-pick label {
  color: #6b7785;
}

.me-worklog-template-pick select,
.me-worklog-select,
.me-worklog-modal-body select {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 12px;
  min-height: 30px;
  min-width: 180px;
  padding: 4px 8px;
}

.me-worklog-modal-body {
  flex: 1;
  overflow: auto;
  padding: 0 18px;
}

.me-worklog-section {
  border-bottom: 1px solid #edf0f4;
  padding: 14px 0 16px;
}

.me-worklog-section:last-child {
  border-bottom: 0;
}

.me-worklog-section h3 {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
}

.me-worklog-grid {
  display: grid;
  gap: 12px 24px;
}

.me-worklog-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.me-worklog-field {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 6px;
}

.me-worklog-field label,
.me-worklog-label {
  color: #4a5568;
}

.me-required {
  color: #d14343;
}

.me-worklog-field-spacer {
  visibility: hidden;
}

.me-worklog-field-checkbox {
  justify-content: flex-end;
  padding-bottom: 4px;
}

.me-worklog-field-checkbox label {
  align-items: center;
  display: flex;
  gap: 6px;
}

.me-worklog-time-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.me-worklog-time-input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 12px;
  max-width: 64px;
  min-height: 30px;
  padding: 4px 8px;
}

.me-worklog-datetime {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 12px;
  min-height: 30px;
  padding: 4px 8px;
  width: 100%;
}

.me-worklog-cost-wrap {
  align-items: center;
  display: flex;
  gap: 4px;
}

.me-worklog-currency {
  color: #6b7785;
  font-size: 12px;
}

.me-worklog-cost-input,
.me-worklog-cost-readonly {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 12px;
  min-height: 30px;
  padding: 4px 8px;
  width: 100%;
}

.me-worklog-cost-readonly {
  background: #f7f8fa;
  color: #6b7785;
}

.me-worklog-hint {
  color: #8a939e;
  font-size: 11px;
}

.me-worklog-modal-footer {
  align-items: center;
  background: #fff;
  border-top: 1px solid #e5e9ef;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 18px 16px;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.me-worklog-first-response {
  align-items: center;
  color: #4a5568;
  display: flex;
  font-size: 12px;
  gap: 6px;
}

.me-worklog-modal-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.me-worklog-modal-actions .me-toolbar-btn-primary {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
  min-width: 88px;
}

@media (max-width: 900px) {
  .me-worklog-modal-dialog {
    max-width: 100vw;
    width: 100vw;
  }
}

@media (max-width: 768px) {
  .me-worklog-grid-2 {
    grid-template-columns: 1fr;
  }

  .me-worklog-modal-header {
    grid-template-columns: 1fr auto;
  }

  .me-worklog-template-pick {
    grid-column: 1 / -1;
  }
}

.me-form-errors {
  background: #fff4f4;
  border: 1px solid #f0c7c7;
  border-radius: 4px;
  color: #b42318;
  font-size: 12px;
  margin: 12px 0 0;
  padding: 8px 10px;
}

.me-field-error {
  color: #b42318;
  font-size: 11px;
}

/* Request detail ? Add Notes modal (IT Service Desk parity) */
.me-note-modal-dialog {
  max-width: 920px;
}

.me-note-modal-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
}

.me-note-modal-header {
  align-items: center;
  border-bottom: 1px solid #e8edf3;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr auto;
  padding: 12px 16px;
}

.me-note-modal-header h2 {
  color: #3d4652;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

.me-note-modal-back {
  background: none;
  border: none;
  color: #6b7785;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}

.me-note-modal-body {
  flex: 1;
  overflow: auto;
  padding: 12px 16px 16px;
}

.me-note-hint {
  align-items: center;
  color: #2b78d4;
  display: flex;
  font-size: 12px;
  gap: 6px;
  justify-content: flex-end;
  margin: 0 0 10px;
}

.me-note-hint-icon {
  font-size: 14px;
}

.me-note-editor {
  display: grid;
  gap: 0;
}

.me-rte-toolbar-rich {
  background: #f7f9fc;
  border: 1px solid #dce3ec;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  flex-wrap: wrap;
  padding: 6px 8px;
}

.me-note-editor .me-rte-textarea {
  border-radius: 0 0 4px 4px;
  min-height: 220px;
}

.me-attach-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-width: 520px;
}

.me-attach-file-item {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  display: grid;
  font-size: 12px;
  gap: 8px;
  grid-template-columns: 1fr auto auto;
  padding: 6px 10px;
}

.me-attach-file-name {
  color: #26313d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-attach-file-size {
  color: #8a96a3;
  font-size: 11px;
  white-space: nowrap;
}

.me-attach-file-remove {
  background: transparent;
  border: 0;
  color: #8a96a3;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

.me-attach-file-remove:hover {
  color: #c0392b;
}

.me-note-modal-footer {
  align-items: center;
  border-top: 1px solid #e8edf3;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px 16px;
}

.me-note-modal-options {
  display: grid;
  gap: 6px;
}

.me-note-option {
  align-items: center;
  color: #3d4652;
  display: flex;
  font-size: 12px;
  gap: 8px;
}

.me-note-modal-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Request detail ? Send Notification / Reply modal (ME-style) */
.me-reply-modal-dialog {
  max-width: 980px;
  width: min(980px, calc(100vw - 48px));
}

.me-reply-modal-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 72px);
}

.me-reply-modal-header {
  align-items: center;
  border-bottom: 1px solid #e5e9ef;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
}

.me-reply-modal-header h2 {
  color: #2f3540;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.me-reply-modal-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 16px 20px 18px;
}

.me-reply-mail-warn {
  align-items: flex-start;
  background: #fff4e5;
  border: 1px solid #f0c48a;
  border-radius: 3px;
  color: #7a4b00;
  display: flex;
  font-size: 13px;
  gap: 8px;
  line-height: 1.45;
  padding: 10px 12px;
}

.me-reply-mail-warn a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: underline;
}

.me-reply-mail-warn-icon {
  flex: 0 0 auto;
  line-height: 1.3;
}

.me-reply-grid-row {
  align-items: center;
  display: grid;
  gap: 12px 16px;
  grid-template-columns: 72px minmax(0, 1fr);
}

.me-reply-grid-row > label {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
}

.me-reply-grid-control {
  min-width: 0;
}

.me-reply-cc-control {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.me-reply-input,
.me-reply-grid-control input.me-reply-input,
.me-reply-subject-row #reply-subject {
  background: #fff;
  border: 1px solid #c8d0da;
  border-radius: 2px;
  box-sizing: border-box;
  color: #1f2329;
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
}

.me-reply-input:focus,
.me-reply-subject-row #reply-subject:focus {
  border-color: #5b9bd5;
  box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.18);
  outline: none;
}

.me-reply-add-bcc {
  background: #fff;
  border: 1px solid #c8d0da;
  border-radius: 2px;
  color: #2b78d4;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  white-space: nowrap;
}

.me-reply-add-bcc:hover {
  background: #f5f9fd;
  border-color: #9eb9d6;
}

.me-reply-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.me-reply-field > label,
.me-reply-desc-block > label {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
}

.me-reply-desc-block {
  margin-top: 4px;
}

.me-canned-template-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  flex-wrap: wrap;
}

.me-canned-template-label {
  margin: 0;
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
}

.me-canned-template-select {
  min-width: 240px;
  max-width: 100%;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #c8d0da;
  border-radius: 2px;
  background: #fff;
  color: #1f2328;
  font-size: 13px;
}

.me-wo-resolution-panel > .me-canned-template-bar {
  margin-bottom: 10px;
}

.me-reply-editor {
  border: 1px solid #c8d0da;
  border-radius: 2px;
  overflow: hidden;
}

.me-reply-editor .me-rte-toolbar {
  background: #f7f9fc;
  border-bottom: 1px solid #e5e9ef;
  border-radius: 0;
}

.me-reply-editor .me-rte-textarea,
.me-reply-editor #reply-body {
  border: 0;
  border-radius: 0;
  min-height: 260px;
  padding: 12px 12px 16px;
}

.me-reply-attach-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.me-reply-attach-title {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
}

.me-reply-attach-drop {
  margin: 0;
}

.me-reply-modal-footer {
  border-top: 1px solid #e5e9ef;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  padding: 12px 20px 16px;
}

.me-reply-send-btn {
  background: #1a73e8;
  border: 1px solid #1a73e8;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-width: 88px;
  padding: 8px 18px;
}

.me-reply-send-btn:hover {
  background: #1557b0;
  border-color: #1557b0;
}

.me-note-private-tag {
  background: #eef2f7;
  border-radius: 8px;
  color: #6b7785;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 6px;
}

.me-wo-edit-link#note-add-link,
#note-add-link.me-note-shortcut-btn {
  background: none;
  border: none;
  color: #2b78d4;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: none;
}

#note-add-link.me-note-shortcut-btn {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

#note-add-link.me-note-shortcut-btn span:last-child {
  color: #2b78d4;
  font-weight: 500;
}

.me-actions-panel .me-open-note-modal {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 8px 12px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.me-actions-panel .me-open-note-modal:hover {
  background: #f7f9fc;
}

/* Yellow sticky-note icon (IT Service Desk Add Notes shortcut) */
.me-note-icon {
  background: linear-gradient(160deg, #fff59d 0%, #ffe566 55%, #f5d547 100%);
  border: 1px solid #d4b429;
  border-radius: 1px 1px 1px 0;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  display: inline-block;
  flex-shrink: 0;
  height: 10px;
  position: relative;
  width: 8px;
}

.me-note-icon-lg {
  height: 14px;
  width: 12px;
}

.me-note-icon-lg::after {
  border-bottom-width: 5px;
  border-left-width: 5px;
}

.me-note-icon::after {
  border-bottom: 3px solid #e8c84a;
  border-left: 3px solid transparent;
  bottom: 0;
  content: "";
  position: absolute;
  right: 0;
}

.me-note-shortcut-btn {
  align-items: center;
  background: #fffdf2;
  border: 1px solid #e6d36a;
  border-radius: 3px;
  color: #6b5a12;
  cursor: pointer;
  display: inline-flex;
  gap: 4px;
  justify-content: center;
  min-height: 20px;
  min-width: 20px;
  padding: 1px 4px;
}

.me-note-shortcut-btn:hover {
  background: #fff8d6;
  border-color: #d4b429;
}

.me-toolbar-icon.me-note-shortcut-btn {
  padding: 3px 5px;
}

.me-toolbar-icon.me-list-note-btn {
  padding: 3px 5px !important;
}

.me-row-action.me-note-shortcut-btn {
  background: #fff59d;
  border: 1px solid #d4b429;
  border-radius: 2px;
  box-shadow: none;
  min-height: 16px;
  min-width: 16px;
  padding: 1px 2px;
}

.me-row-action.me-note-shortcut-btn:hover {
  background: #ffe566;
  border-color: #c9a820;
}

.me-clickable-row.selected {
  background: #fffbe6;
}

.me-note-modal-header {
  background: #f7f9fc;
}

/* Field editor modal (IT Service Desk Add Field) */
.me-field-editor-overlay[hidden] {
  display: none !important;
}

.me-field-editor-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1001;
}

.me-field-editor-dialog {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  max-height: 88vh;
  max-width: 920px;
  overflow: hidden;
  width: 94%;
}

.me-field-editor-head {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 14px 18px 12px;
}

.me-field-editor-head h2 {
  color: #26313d;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.me-field-editor-close {
  background: none;
  border: none;
  color: #6b7785;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
}

.me-field-editor-close:hover {
  color: #26313d;
}

.me-field-editor-toolbar {
  align-items: center;
  border-bottom: 1px solid #f0f3f7;
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  padding: 10px 18px;
}

.me-field-editor-type-label {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 10px;
}

.me-field-editor-type-label span {
  color: #4a5568;
  white-space: nowrap;
}

.me-field-editor-type-label select {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #26313d;
  font-family: inherit;
  font-size: 12px;
  min-width: 180px;
  padding: 5px 8px;
}

.me-field-editor-preview-btn {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #1a73b5;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  margin-left: auto;
  padding: 5px 14px;
}

.me-field-editor-preview-btn:hover {
  background: #f0f6fc;
  border-color: #1a73b5;
}

.me-field-editor-tabs {
  border-bottom: 1px solid #e8edf3;
  display: flex;
  flex-shrink: 0;
  gap: 0;
  padding: 0 18px;
}

.me-field-editor-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6b7785;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  margin-bottom: -1px;
  padding: 10px 14px;
}

.me-field-editor-tab.active {
  border-bottom-color: #1a73b5;
  color: #1a73b5;
  font-weight: 600;
}

.me-field-editor-body {
  display: grid;
  flex: 1 1 auto;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  overflow: hidden;
}

.me-field-editor-preview-wrap {
  background: #f7f9fc;
  border-right: 1px solid #e8edf3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.me-field-editor-preview-caption {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 12px 18px 0;
  text-transform: uppercase;
}

.me-field-editor-preview-pane {
  background: transparent;
  border-right: 0;
  flex: 1;
  overflow: auto;
  padding: 12px 18px 16px;
}

.me-field-editor-props-pane {
  overflow: auto;
  padding: 12px 18px 16px;
}

.me-field-editor-props-pane label {
  display: grid;
  font-size: 12px;
  gap: 4px;
  margin-bottom: 10px;
}

.me-field-editor-props-pane label span {
  color: #4a5568;
}

.me-field-editor-props-pane label em {
  color: #c0392b;
  font-style: normal;
}

.me-field-editor-props-pane input[type="text"],
.me-field-editor-props-pane input[type="number"],
.me-field-editor-props-pane textarea,
.me-field-editor-props-pane select {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #26313d;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  width: 100%;
}

.me-field-editor-props-pane textarea {
  min-height: 56px;
  resize: vertical;
}

.me-field-editor-row-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 10px;
}

.me-field-editor-row-checks label {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  gap: 6px;
  margin-bottom: 0;
  white-space: nowrap;
}

.me-field-editor-row-checks input[type="checkbox"] {
  accent-color: #1a73b5;
  margin: 0;
}

.me-field-editor-values-panel {
  border: 1px solid #dce3ec;
  border-radius: 2px;
  margin-bottom: 10px;
}

.me-field-editor-hint {
  color: #6b7785;
  font-size: 12px;
  line-height: 1.4;
  margin: 4px 0 10px;
}

.me-preview-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.me-preview-choice-label {
  color: #2f3b4a;
  font-size: 13px;
  font-weight: 600;
}

.me-preview-choice-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.me-preview-choice {
  align-items: center;
  color: #445;
  display: flex;
  font-size: 13px;
  font-weight: 400;
  gap: 8px;
}

.me-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.me-choice-option {
  align-items: center;
  display: flex;
  font-weight: 400;
  gap: 8px;
}

.me-field-editor-values-head {
  align-items: center;
  background: #f5f6f8;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

.me-field-editor-values-head input[type="search"] {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
}

.me-field-editor-values-add {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
}

.me-field-editor-bulk-btn {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #1a73b5;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 5px 10px;
  white-space: nowrap;
}

.me-field-editor-bulk-btn:hover {
  background: #f0f6fc;
}

.me-field-editor-values-list {
  list-style: none;
  margin: 0;
  max-height: 160px;
  overflow: auto;
  padding: 0;
}

.me-field-editor-values-list li {
  align-items: center;
  border-bottom: 1px solid #f0f3f7;
  display: flex;
  font-size: 12px;
  gap: 8px;
  padding: 6px 10px;
}

.me-field-editor-values-list li:last-child {
  border-bottom: none;
}

.me-field-editor-values-list li span {
  flex: 1;
}

.me-field-editor-value-remove {
  background: none;
  border: none;
  color: #6b7785;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

.me-field-editor-value-remove:hover {
  color: #c0392b;
}

.me-field-editor-section-title {
  color: #26313d;
  font-size: 12px;
  font-weight: 600;
  margin: 12px 0 8px;
}

.me-field-editor-hint {
  color: #6b7785;
  font-size: 11px;
  margin: -6px 0 10px;
}

.me-field-editor-customization-pane {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px 18px;
}

.me-field-editor-customization-pane[hidden] {
  display: none !important;
}

.me-field-editor-placeholder {
  color: #6b7785;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.me-field-editor-footer {
  align-items: center;
  background: #f5f6f8;
  border-top: 1px solid #dce3ec;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  justify-content: flex-start;
  padding: 10px 18px 12px;
}

.me-field-editor-body[hidden] {
  display: none !important;
}

.me-canvas-field-inner:hover .me-preview-field span:first-child {
  color: #1a73b5;
}

/* IT Service Desk user directory (Users / Technicians admin) */
.me-user-directory-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.me-user-directory-search {
  align-items: center;
  display: flex;
  flex: 1 1 240px;
  gap: 8px;
  min-width: 200px;
}

.me-user-directory-search input[type="search"] {
  flex: 1;
  max-width: 320px;
  padding: 6px 10px;
}

.me-user-directory-toolbar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-user-directory-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.me-user-directory-az {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.me-user-directory-az-letter {
  border: 1px solid transparent;
  border-radius: 3px;
  color: #4a5568;
  font-size: 12px;
  min-width: 22px;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
}

.me-user-directory-az-letter:hover,
.me-user-directory-az-letter.active {
  background: #e8f1fb;
  border-color: #b8d4f0;
  color: #1a73b5;
}

.me-user-directory-status-filter {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.me-user-directory-status-filter select {
  padding: 4px 8px;
}

.me-user-directory-table-wrap {
  overflow-x: auto;
}

.me-user-directory-table th {
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
}

.me-user-directory-status-col {
  width: 28px;
}

.me-user-directory-status-dot {
  background: #c0392b;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.me-user-directory-status-dot.active {
  background: #27ae60;
}

.me-user-directory-edit-col {
  text-align: center;
  width: 36px;
}

.me-user-directory-edit-icon {
  color: #6b7785;
  text-decoration: none;
}

.me-user-directory-edit-icon:hover {
  color: #1a73b5;
}

.me-user-directory-actions-menu {
  position: relative;
}

.me-user-directory-actions-menu summary {
  cursor: pointer;
  list-style: none;
}

.me-user-directory-actions-menu summary::-webkit-details-marker {
  display: none;
}

.me-user-directory-actions-panel {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 160px;
  padding: 10px 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
}

.me-user-directory-back {
  color: #2b78d4;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 6px;
  text-decoration: none;
}

.me-user-directory-detail-header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.me-user-directory-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-user-directory-tabs {
  border-bottom: 1px solid #dce3ec;
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.me-user-directory-tabs a {
  border-bottom: 2px solid transparent;
  color: #4a5568;
  font-size: 13px;
  padding: 8px 14px;
  text-decoration: none;
}

.me-user-directory-tabs a.active {
  border-bottom-color: #1a73b5;
  color: #1a73b5;
  font-weight: 600;
}

.me-user-directory-detail-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.me-user-directory-detail-grid > .settings-card {
  min-width: 0;
  overflow: hidden;
}

.me-user-directory-section-title {
  font-size: 15px;
  margin: 0 0 12px;
}

.me-user-directory-panel-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.me-user-directory-panel-header .me-user-directory-section-title {
  margin: 0;
}

.me-user-directory-field-list {
  margin: 0;
}

.me-user-directory-field-row {
  border-bottom: 1px solid #eef2f6;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 140px minmax(0, 1fr);
  padding: 8px 0;
}

.me-user-directory-field-row dt {
  color: #6b7785;
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}

.me-user-directory-field-row dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.me-user-app-role {
  margin: 0 0 14px;
}

.me-user-portal-perm-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.me-user-portal-perm-group {
  border-top: 1px solid #eef2f6;
  padding-top: 10px;
}

.me-user-portal-perm-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.me-user-portal-perm-module {
  color: #4a5568;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.me-user-portal-perm-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-permission-chip {
  background: #f0f4f8;
  border: 1px solid #d7e0ea;
  border-radius: 3px;
  color: #2d3748;
  display: inline-block;
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
  padding: 4px 8px;
  white-space: normal;
  word-break: break-word;
}

.me-user-directory-pencil {
  background: none;
  border: 0;
  color: #8a939e;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

.me-user-directory-pencil:hover {
  color: #1a73b5;
}

.me-user-directory-assoc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-user-directory-assoc-list li {
  padding: 6px 0;
}

.me-user-directory-modal {
  inset: 0;
  position: fixed;
  z-index: 1000;
}

.me-user-directory-modal[hidden] {
  display: none !important;
}

.me-user-directory-modal-backdrop {
  background: rgba(0, 0, 0, 0.35);
  inset: 0;
  position: absolute;
}

.me-user-directory-modal-dialog {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  left: 50%;
  max-height: 90vh;
  max-width: 480px;
  overflow: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
}

.me-user-directory-modal-header {
  align-items: center;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
}

.me-user-directory-modal-header h2 {
  font-size: 16px;
  margin: 0;
}

.me-user-directory-modal-close {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
}

.me-user-directory-modal-body {
  padding: 16px 18px;
}

.me-user-directory-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
}

body.me-user-directory-modal-open {
  overflow: hidden;
}

.me-user-field-input,
.me-user-directory-input,
.me-user-directory-form input[type="text"],
.me-user-directory-form input[type="email"],
.me-user-directory-form input[type="password"],
.me-user-directory-form input[type="number"],
.me-user-directory-form select,
.me-user-directory-form textarea {
  max-width: 100%;
  padding: 6px 10px;
  width: 100%;
}

.me-user-directory-form-section {
  margin-bottom: 16px;
}

.me-user-directory-form-grid {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.me-user-directory-checkbox-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-user-directory-checkbox-grid li {
  margin: 6px 0;
}

.me-user-directory-login-test {
  margin-top: 12px;
}

.me-user-directory-form-actions {
  margin-top: 8px;
}

.me-user-directory-check-col {
  text-align: center;
  width: 36px;
}

.me-user-directory-list-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.me-user-directory-selection {
  align-items: center;
  display: flex;
  gap: 6px;
}

.me-user-directory-selected-label {
  color: #2b78d4;
  font-size: 13px;
  font-weight: 600;
}

.me-directory-clear-selection {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 50%;
  color: #c0392b;
  cursor: pointer;
  font-size: 14px;
  height: 22px;
  line-height: 1;
  width: 22px;
}

.me-directory-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 200px;
  padding: 4px 0;
}

.me-directory-action-item {
  background: none;
  border: 0;
  color: #2b3a4a;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 14px;
  text-align: left;
  width: 100%;
}

.me-directory-action-item:hover {
  background: #f0f6fc;
  color: #1a73b5;
}

.me-directory-action-danger {
  color: #dc2626 !important;
}

.me-user-delete-block {
  margin: 12px 0 16px;
}

.me-user-delete-block-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.me-user-delete-block-list li {
  margin: 4px 0;
}

.me-user-delete-kind {
  background: #fee2e2;
  border-radius: 6px;
  color: #991b1b;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
  padding: 1px 6px;
}

.me-user-directory-row.selected {
  background: #f3f8fe;
}

.me-directory-icon-btn {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 3px;
  cursor: pointer;
  padding: 6px 10px;
}

.me-directory-edit-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.me-directory-edit-profile {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  padding: 18px;
}

.me-directory-avatar {
  align-items: center;
  background: #e8eef5;
  border-radius: 50%;
  color: #5a6a7e;
  display: flex;
  flex-shrink: 0;
  font-size: 28px;
  font-weight: 600;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.me-directory-profile-fields {
  flex: 1;
  min-width: 0;
}

.me-directory-name-row {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.me-directory-display-name label {
  color: #6b7785;
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.me-directory-vip {
  margin-top: 8px;
}

.me-directory-edit-body {
  padding: 18px;
}

.me-directory-edit-columns {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.me-directory-edit-col .form-row {
  margin-bottom: 10px;
}

.me-directory-edit-col label {
  color: #6b7785;
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.me-directory-edit-footer {
  border-top: 1px solid #dce3ec;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 0 16px 20px;
  padding-top: 16px;
}

.me-directory-login-section {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .me-directory-edit-columns {
    grid-template-columns: 1fr;
  }
}

/* IT Service Desk catalog template tabs (Technician / Workflow) */
.me-catalog-template-tabs {
  align-items: flex-end;
  background: #e8ecf1;
  border-bottom: 1px solid #c8d0da;
  display: flex;
  gap: 0;
  margin: 0;
  min-height: 40px;
  padding: 0 10px;
}

.me-catalog-template-tabs .me-service-builder-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  color: #5f6771;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: -1px;
  margin-top: 4px;
  padding: 9px 18px;
  text-decoration: none;
}

.me-catalog-template-tabs .me-service-builder-tab:hover {
  color: #2b78d4;
}

.me-catalog-template-tabs .me-service-builder-tab.active {
  background: #fff;
  border-color: #c8d0da;
  border-top: 2px solid #2b78d4;
  color: #2b78d4;
  font-weight: 600;
}

.me-catalog-template-tabs .me-tab-disabled {
  color: #a8b0ba;
  cursor: not-allowed;
}

.me-catalog-workflow-page .me-template-workflow-body {
  background: #fff;
  padding: 0;
}

.me-catalog-workflow-meta .me-catalog-workflow-icon-readonly {
  cursor: default;
  pointer-events: none;
}

.me-catalog-workflow-readonly-value {
  color: #2d3748;
  font-size: 14px;
  margin: 4px 0 0;
}

/* IT Service Desk template workflow tab */
.template-editor-workflow-only .template-editor-tabs {
  display: none;
}

.me-template-workflow-body {
  padding: 0;
}

.me-template-workflow-associated,
.me-template-workflow-approval,
.me-template-workflow-sla {
  border: 1px solid #dce3ec;
  border-radius: 0;
  border-top: none;
  margin: 0;
  padding: 14px 18px 18px;
}

.me-template-workflow-associated h2,
.me-template-workflow-approval h2,
.me-template-workflow-sla h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}

.me-wf-section-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235f6771' d='M8 1a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a2 2 0 0 1 2-2zm0 2a1 1 0 0 0-1 1v1h2V4a1 1 0 0 0-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  display: inline-block;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  width: 16px;
}

.me-template-workflow-info {
  align-items: center;
  background: #edf4fc;
  border: 1px solid #c5daf2;
  border-radius: 2px;
  color: #3d4f63;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
}

.me-template-workflow-info.success {
  background: #eef8f0;
  border-color: #c8e6c9;
}

.me-wf-info-icon {
  align-items: center;
  background: #2b78d4;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.me-wf-configure-now {
  background: none;
  border: none;
  color: #2b78d4;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.me-template-workflow-banner {
  align-items: flex-start;
  background: #edf4fc;
  border: 1px solid #c5daf2;
  border-radius: 2px;
  color: #3d4f63;
  display: flex;
  font-size: 13px;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
}

.me-template-workflow-approval-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
}

.me-wf-add-level {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid #c8d0da;
  border-radius: 2px;
  color: #2d3748;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  gap: 4px;
  margin-bottom: 10px;
  padding: 6px 12px;
}

.me-wf-add-level:hover {
  background: #fff;
  border-color: #2b78d4;
  color: #2b78d4;
}

.me-wf-plus {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.me-wf-approval-table-wrap {
  border: 1px solid #d4dbe3;
}

.me-wf-approval-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}

.me-wf-approval-table thead th {
  background: #f3f5f8;
  border-bottom: 1px solid #d4dbe3;
  color: #5f6771;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
}

.me-wf-approval-table tbody td {
  border-bottom: 1px solid #e8ecf1;
  color: #2d3748;
  padding: 8px 10px;
  vertical-align: middle;
}

.me-wf-approval-table tbody tr:last-child td {
  border-bottom: none;
}

.me-wf-col-drag {
  color: #94a3b8;
  cursor: grab;
  text-align: center;
  width: 28px;
}

.me-wf-drag-handle {
  display: inline-block;
  font-size: 12px;
  letter-spacing: -1px;
  line-height: 1;
  user-select: none;
}

.me-wf-approval-row.is-dragging {
  opacity: 0.55;
}

.me-wf-approval-row.is-drag-over {
  outline: 2px dashed #2563eb;
  outline-offset: -2px;
}

.me-wf-drag-hint {
  color: #64748b;
  font-size: 12px;
  margin: 8px 10px 0;
}

.me-wf-approver-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}

.me-wf-approver-tab {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
}

.me-wf-approver-tab.is-active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}

.me-wf-members-panel,
.me-wf-user-results {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 8px 10px;
}

.me-wf-members-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.me-wf-members-head strong {
  color: #0f172a;
  font-size: 13px;
}

.me-wf-members-note {
  color: #64748b;
  font-size: 11px;
}

.me-wf-members-list,
.me-wf-user-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-wf-user-results {
  margin-top: 8px;
}

.me-wf-member-row,
.me-wf-user-result {
  align-items: center;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 6px 4px;
}

.me-wf-member-row:hover,
.me-wf-user-result:hover {
  background: #eff6ff;
}

.me-wf-member-main,
.me-wf-user-result {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.me-wf-user-result {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
}

.me-wf-member-main strong,
.me-wf-user-result strong {
  color: #0f172a;
  font-size: 13px;
}

.me-wf-member-main span,
.me-wf-user-result span {
  color: #64748b;
  font-size: 11px;
}

.me-wf-member-scope {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
}

.me-wf-member-add {
  background: #fff;
  border: 1px solid #2563eb;
  border-radius: 8px;
  color: #2563eb;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  white-space: nowrap;
}

.me-wf-members-empty {
  color: #64748b;
  font-size: 12px;
  padding: 8px 4px;
}

.me-wf-approver-chip.is-removable {
  align-items: center;
  cursor: grab;
  display: inline-flex;
  gap: 4px;
}

.me-wf-chip-grip {
  color: #94a3b8;
  font-size: 10px;
  letter-spacing: -1px;
}

.me-wf-approver-chip.is-dragging {
  opacity: 0.5;
}

.me-wf-col-actions {
  padding: 6px 4px !important;
  text-align: center;
  width: 32px;
}

.me-wf-row-action {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  height: 18px;
  opacity: 0.75;
  padding: 0;
  width: 18px;
}

.me-wf-row-action:hover {
  opacity: 1;
}

.me-wf-row-edit {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235f6771' d='M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.me-wf-row-delete {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23c53030' d='M5 2h6l1 1h3v1H2V3h3l1-1zm1 4h1v6H6V6zm3 0h1v6H9V6zM4 14h8l1-9H3l1 9z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.me-wf-delete-form {
  display: inline;
  margin: 0;
}

.me-template-workflow-config h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}

.me-wf-config-help {
  color: #5f6771;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.me-wf-checkbox {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.me-wf-checkbox input {
  margin-top: 2px;
}

.me-wf-checkbox span {
  color: #2d3748;
  font-size: 13px;
  line-height: 1.4;
}

.me-wf-divider {
  border: 0;
  border-top: 1px solid #e6ebf2;
  margin: 12px 0;
}

.me-template-workflow-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.me-wf-approval-modal {
  background: rgba(0, 0, 0, 0.35);
  inset: 0;
  position: fixed;
  z-index: 1200;
}

.me-wf-approval-modal[hidden] {
  display: none !important;
}

.me-wf-approval-dialog {
  left: 50%;
  max-width: 480px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
}

.me-wf-approval-dialog-head {
  align-items: center;
  border-bottom: 1px solid #dce3ec;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
}

.me-wf-approval-dialog-head h2 {
  font-size: 16px;
  margin: 0;
}

.me-wf-approval-close {
  color: #6b7785;
  font-size: 22px;
  text-decoration: none;
}

.me-wf-approval-form {
  padding: 16px 18px;
}

@media (max-width: 900px) {
  .me-template-workflow-approval-grid {
    grid-template-columns: 1fr;
  }
}

/* ?? Polished ME template workflow ?? */
.me-wf-polished {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0 24px;
}

.me-catalog-workflow-page .me-wf-polished .card {
  border: 1px solid #d5dde8;
  border-radius: 4px;
  box-shadow: none;
  margin: 0;
}

.me-wf-overview {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 48%);
  padding: 16px 18px 18px;
}

.me-wf-overview-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.me-wf-overview h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.me-wf-overview-lead {
  color: #5c6b7a;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  max-width: 42rem;
}

.me-wf-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-wf-stat-pill {
  background: #f1f4f8;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  color: #5c6b7a;
  font-size: 12px;
  padding: 5px 11px;
}

.me-wf-stat-pill strong {
  color: #1f2937;
  font-weight: 700;
}

.me-wf-stat-pill.is-on {
  background: #eef5fc;
  border-color: #bfd6f2;
  color: #2b5f9e;
}

.me-wf-stat-pill.is-warn {
  background: #fff7e8;
  border-color: #f0d39a;
  color: #8a5a00;
}

.me-wf-chain {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-wf-chain-step {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 120px;
  padding: 10px 12px;
  position: relative;
}

.me-wf-chain-step:not(:last-child)::after {
  background: #c5d0de;
  content: "";
  height: 2px;
  left: calc(100% - 6px);
  position: absolute;
  top: 22px;
  width: 12px;
  z-index: 0;
}

.me-wf-chain-dot {
  align-items: center;
  background: #fff;
  border: 2px solid #8fa3bc;
  border-radius: 50%;
  color: #2d4a6f;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  width: 26px;
  z-index: 1;
}

.me-wf-chain-step.is-start .me-wf-chain-dot {
  background: #2b78d4;
  border-color: #2b78d4;
}

.me-wf-chain-step.is-approval .me-wf-chain-dot {
  background: #edf4fc;
  border-color: #2b78d4;
}

.me-wf-chain-step.is-auto .me-wf-chain-dot {
  background: #fff7e8;
  border-color: #d4a017;
}

.me-wf-chain-step.is-tasks .me-wf-chain-dot {
  background: #eef8f0;
  border-color: #3d9b5f;
}

.me-wf-chain-step.is-end .me-wf-chain-dot {
  background: #eef8f0;
  border-color: #2f7d4a;
}

.me-wf-chain-step.is-muted .me-wf-chain-dot {
  border-color: #c5d0de;
  border-style: dashed;
}

.me-wf-chain-label {
  color: #2d3748;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.me-wf-chain-step.is-muted .me-wf-chain-label {
  color: #7a8796;
  font-weight: 500;
}

.me-wf-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
}

.me-wf-panel {
  padding: 16px 18px 18px;
}

.me-wf-panel-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.me-wf-panel h2 {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 4px;
}

.me-wf-panel-sub {
  color: #5c6b7a;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  max-width: 34rem;
}

.me-wf-polished .me-wf-add-level {
  margin-bottom: 0;
}

.me-wf-col-level {
  width: 44px;
}

.me-wf-level-badge {
  align-items: center;
  background: #edf4fc;
  border: 1px solid #c5daf2;
  border-radius: 50%;
  color: #1d4f91;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.me-wf-level-name {
  font-weight: 600;
}

.me-wf-level-approvers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.me-wf-col-row-actions {
  white-space: nowrap;
  width: 72px;
}

.me-wf-col-row-actions .me-wf-delete-form {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

.me-wf-muted {
  color: #7a8796;
}

.me-wf-empty {
  align-items: center;
  background: #f7f9fc;
  border: 1px dashed #c8d0da;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 20px;
  text-align: center;
}

.me-wf-empty-visual {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Crect x='8' y='10' width='32' height='28' rx='3' stroke='%2390a4bc' stroke-width='2'/%3E%3Cpath d='M16 20h16M16 26h10' stroke='%2390a4bc' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='34' r='8' fill='%23edf4fc' stroke='%232b78d4' stroke-width='2'/%3E%3Cpath d='M34 30v8M30 34h8' stroke='%232b78d4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  height: 48px;
  margin-bottom: 6px;
  width: 48px;
}

.me-wf-empty h3 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
}

.me-wf-empty p {
  color: #5c6b7a;
  font-size: 13px;
  margin: 0 0 8px;
  max-width: 28rem;
}

.me-wf-empty-cta {
  margin-top: 4px;
}

.me-wf-tasks-block {
  border-top: 1px solid #e6ebf2;
  margin-top: 18px;
  padding-top: 14px;
}

.me-wf-tasks-head {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.me-wf-tasks-head h3 {
  font-size: 13px;
  font-weight: 650;
  margin: 0;
}

.me-wf-tasks-link {
  color: #2b78d4;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.me-wf-tasks-link:hover {
  text-decoration: underline;
}

.me-wf-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-wf-task-list li {
  align-items: baseline;
  border-bottom: 1px solid #eef1f5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  padding: 8px 0;
}

.me-wf-task-list li:last-child {
  border-bottom: none;
}

.me-wf-task-title {
  color: #2d3748;
  font-size: 13px;
  font-weight: 600;
}

.me-wf-task-meta,
.me-wf-tasks-empty {
  color: #7a8796;
  font-size: 12px;
}

.me-wf-tasks-empty {
  margin: 0;
}

.me-wf-panel-config h2 {
  margin-bottom: 14px;
}

.me-wf-config-group {
  margin-bottom: 16px;
}

.me-wf-config-group h3 {
  color: #5c6b7a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.me-wf-polished .me-wf-checkbox {
  background: #f8fafc;
  border: 1px solid #e6ebf2;
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.me-wf-polished .me-wf-checkbox span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.me-wf-polished .me-wf-checkbox strong {
  font-size: 13px;
  font-weight: 600;
}

.me-wf-polished .me-wf-checkbox small {
  color: #5c6b7a;
  font-size: 12px;
  line-height: 1.4;
}

.me-wf-sla-note {
  background: #f7f9fc;
  border-left: 3px solid #c5d0de;
  color: #5c6b7a;
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 0;
  padding: 10px 12px;
}

.me-wf-settings-actions {
  justify-content: flex-start;
  margin-top: 16px;
}

.me-catalog-workflow-page .me-catalog-workflow-meta {
  border-radius: 4px 4px 0 0;
}

.me-wf-meta-compact {
  align-items: center;
  padding-bottom: 12px;
  padding-top: 12px;
}

.me-wf-meta-compact .me-service-builder-desc {
  margin-top: 4px;
}

.me-catalog-workflow-page .me-catalog-template-tabs {
  border-radius: 0;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media (max-width: 960px) {
  .me-wf-layout {
    grid-template-columns: 1fr;
  }

  .me-wf-chain-step:not(:last-child)::after {
    display: none;
  }
}

/* ME-parity Users / Technicians directory (v3) */
.me-user-directory-page .me-setup-main {
  background: #fff;
}

.me-user-directory-module {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.me-user-directory-messages {
  padding: 10px 16px 0;
}

.me-user-directory-titlebar {
  align-items: center;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 16px;
}

.me-user-directory-titlebar h1 {
  color: #3d4652;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.me-user-directory-toolbar {
  border-bottom: 1px solid #dce3ec;
}

.me-selected-records-summary {
  color: #2b78d4;
  font-weight: 600;
  min-width: 150px;
}

.me-selected-records-dropdown[open] .me-selected-records-summary {
  background: #e8f2fc;
  border-color: #2b78d4;
}

.me-directory-clear-selection {
  color: #c0392b;
  font-size: 16px;
  line-height: 1;
}

.me-actions-panel-btn {
  background: none;
  border: 0;
  color: #4a5568;
  cursor: pointer;
  font-size: 12px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}

.me-actions-panel-btn:hover {
  background: #f4f8fd;
  color: #2b78d4;
}

.me-user-directory-search-row {
  background: #f7f8fa;
  border-bottom: 1px solid #edf0f4;
  padding: 8px 16px;
}

.me-user-directory-search-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.me-user-directory-search-form {
  align-items: center;
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 280px;
}

.me-user-directory-search-wrap {
  align-items: center;
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  display: flex;
  flex: 1 1 280px;
  gap: 6px;
  max-width: 480px;
  min-height: 32px;
  padding: 0 10px;
}

.me-user-directory-search-wrap:focus-within {
  border-color: #2b78d4;
  box-shadow: 0 0 0 1px rgba(43, 120, 212, 0.2);
}

.me-user-directory-search-icon {
  color: #8a939e;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.me-user-directory-search-form input[type="search"] {
  background: transparent;
  border: 0;
  flex: 1 1 auto;
  font-size: var(--me-font-base, 14px);
  min-height: 30px;
  min-width: 0;
  outline: none;
  padding: 4px 0;
  width: 100%;
}

.me-user-directory-search-result {
  color: #6b7785;
  font-size: var(--me-font-small, 13px);
  margin: 6px 0 0;
}

.me-user-directory-page .me-user-directory-filters {
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  margin: 0;
  padding: 10px 16px 8px;
}

.me-user-directory-page .me-user-directory-table-wrap {
  overflow: auto;
  padding: 0;
}

.me-user-directory-page .me-user-directory-table {
  table-layout: auto;
}

.me-user-directory-page .me-user-directory-table .check-col,
.me-user-directory-page .me-user-directory-table .actions-col,
.me-user-directory-page .me-user-directory-table .status-col {
  text-align: center;
  width: 36px;
}

.me-user-directory-page .me-user-directory-table tbody tr.selected {
  background: #eef5ff;
}

.me-user-directory-page .me-user-directory-table tbody tr:hover {
  background: #fffaf0;
}

.me-user-directory-page .me-user-directory-table tbody tr.selected:hover {
  background: #e8f2fc;
}

.me-user-directory-page .me-user-directory-edit-icon {
  color: #8a939e;
  font-size: 14px;
}

.me-user-directory-page .me-user-directory-edit-icon:hover {
  color: #2b78d4;
}

.me-user-directory-empty {
  color: #6b7785;
  padding: 24px 10px !important;
  text-align: center;
}

.me-user-directory-form-page {
  padding-bottom: 24px;
}

.me-directory-edit-titlebar {
  padding: 10px 16px;
}

.me-directory-edit-title-wrap {
  align-items: center;
  display: flex;
  gap: 10px;
}

.me-directory-edit-title-wrap h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.me-directory-edit-titlebar .me-user-directory-back {
  align-items: center;
  border: 1px solid #d8dee6;
  border-radius: 2px;
  color: #4a5568;
  display: inline-flex;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  margin: 0;
  text-decoration: none;
  width: 28px;
}

.me-directory-edit-panel {
  border-bottom: 1px solid #edf0f4;
  margin: 0 16px;
  padding: 16px 0;
}

/* Organization Roles on user/technician edit */
.me-user-org-roles-panel {
  border: 1px solid #dce3ec;
  border-radius: 2px;
  margin: 16px;
  padding: 0;
}

.me-user-org-roles-head {
  align-items: flex-start;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 16px 12px;
}

.me-user-org-roles-head-text {
  min-width: 0;
}

.me-user-org-roles-head .me-user-directory-section-title {
  margin: 0 0 6px;
}

.me-user-org-roles-help {
  margin: 0;
  max-width: 720px;
}

.me-user-org-roles-head .me-toolbar-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.me-user-org-roles-table-wrap {
  overflow-x: auto;
  padding: 0;
}

.me-user-org-roles-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.me-user-org-roles-table .me-org-col-type {
  width: 26%;
}

.me-user-org-roles-table .me-org-col-name {
  width: 34%;
}

.me-user-org-roles-table .me-org-col-scope {
  width: 24%;
}

.me-user-org-roles-table .me-org-col-actions {
  width: 16%;
}

.me-user-org-roles-table thead th {
  background: #f7f8fa;
  border-bottom: 1px solid #edf0f4;
  color: #626a74;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  text-align: left;
  text-transform: uppercase;
}

.me-user-org-roles-table tbody td {
  border-bottom: 1px solid #edf0f4;
  color: #37404a;
  font-size: 13px;
  padding: 12px 14px;
  vertical-align: middle;
  word-break: break-word;
}

.me-user-org-roles-table tbody tr:last-child td {
  border-bottom: 0;
}

.me-user-org-roles-table tbody tr:hover {
  background: #fafbfc;
}

.me-user-org-roles-table .me-org-name-cell {
  font-weight: 600;
}

.me-user-org-roles-table .me-org-scope-cell {
  color: #4a5568;
}

.me-user-org-roles-table .me-org-actions-head,
.me-user-org-roles-table .me-org-actions-cell {
  text-align: right;
  white-space: nowrap;
}

.me-org-remove-form {
  display: inline;
  margin: 0;
}

.me-org-remove-btn {
  background: none;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 0;
  text-decoration: none;
}

.me-org-remove-btn:hover {
  text-decoration: underline;
}

.me-user-org-roles-table .me-org-empty-row td {
  color: #6b7785;
  font-style: italic;
  padding: 18px 14px;
  text-align: center;
}

.me-directory-edit-form {
  padding: 0;
}

.me-user-directory-page .me-toolbar-icon.active {
  background: #e8f2fc;
  border-color: #2b78d4;
  color: #2b78d4;
}

/* ME Roles (Users & Permission) */
.me-roles-panel {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04);
}

.me-roles-intro {
  border-bottom: 1px solid #edf0f4;
  color: #6b7785;
  font-size: var(--me-font-base);
  line-height: var(--me-line-height);
  margin: 0;
  padding: 14px 18px;
}

.me-roles-intro a {
  color: #2b78d4;
  text-decoration: none;
}

.me-roles-intro a:hover {
  text-decoration: underline;
}

.me-roles-table-wrap {
  overflow: auto;
  padding: 0 18px 18px;
}

.me-roles-table-wrap .me-admin-data-table {
  margin-top: 0;
}

.me-roles-table .me-role-name-cell {
  color: #37404a;
  font-size: var(--me-font-content);
  font-weight: 600;
}

.me-roles-table .me-role-desc-cell {
  color: #4a5568;
  font-size: var(--me-font-base);
  max-width: 420px;
}

.me-roles-table .me-role-count-cell {
  color: #37404a;
  font-size: var(--me-font-base);
  text-align: center;
  width: 72px;
}

.me-roles-table .me-role-active-cell {
  font-size: var(--me-font-base);
  text-align: center;
  width: 72px;
}

.me-roles-table .table-actions {
  text-align: right;
  width: 72px;
}

.me-roles-table .table-actions .me-link {
  font-size: var(--me-font-base);
  font-weight: 600;
}

.me-role-status-yes,
.me-role-status-no {
  border-radius: 10px;
  display: inline-block;
  font-size: var(--me-font-small);
  font-weight: 600;
  line-height: 1;
  min-width: 34px;
  padding: 4px 8px;
  text-align: center;
}

.me-role-status-yes {
  background: #e8f6ee;
  color: #1f7a45;
}

.me-role-status-no {
  background: #f3f4f6;
  color: #6b7785;
}

.me-role-system-badge {
  background: #eef4fb;
  border-radius: 4px;
  color: #2b78d4;
  font-size: var(--me-font-small);
  font-weight: 600;
  margin-left: 6px;
  padding: 2px 6px;
  vertical-align: middle;
}

.me-role-edit-head {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.me-role-edit-head h2 {
  font-size: 20px;
  margin: 0;
}

.me-role-back {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}

.me-role-basic {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
}

.me-role-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.me-role-field-wide {
  grid-column: 1 / -1;
}

.me-role-field-inline {
  align-items: center;
  display: flex;
  gap: 8px;
}

.me-role-field .req,
.me-role-permissions-section h3 .req {
  color: #c0392b;
  font-style: normal;
}

.me-role-permissions-section h3,
.me-role-advanced-section h3 {
  font-size: 15px;
  margin: 0 0 12px;
}

.me-role-module-matrix th {
  font-size: var(--me-font-label);
  white-space: nowrap;
}

.me-role-module-matrix td {
  font-size: var(--me-font-base);
}

.me-role-edit-form .me-role-field span,
.me-role-edit-form .me-role-field-inline span {
  font-size: var(--me-font-base);
}

.me-role-edit-form input[type="text"],
.me-role-edit-form textarea,
.me-role-edit-form select {
  font-family: var(--me-font-family);
  font-size: var(--me-font-base);
}

/* Global input{width:100%} must not stretch checkboxes/radios */
.me-role-edit-form input[type="checkbox"],
.me-role-edit-form input[type="radio"] {
  flex: 0 0 auto;
  height: auto;
  margin: 0;
  padding: 0;
  width: auto;
}

.me-role-advanced-block {
  border-top: 1px solid var(--border);
  margin-top: 0;
  padding-top: 0;
}

.me-role-advanced-block:first-of-type {
  border-top: 0;
  margin-top: 8px;
}

.me-role-advanced-section-head {
  background: #f4f6f8;
  border-bottom: 1px solid #dce3ec;
  border-top: 1px solid #dce3ec;
  color: #333;
  font-size: var(--me-font-base);
  font-weight: 700;
  margin: 0;
  padding: 8px 12px;
}

.me-role-advanced-group-row,
.me-role-advanced-columns-row,
.me-role-advanced-footer-row {
  align-items: start;
  display: grid;
  gap: 4px 16px;
  grid-template-columns: 72px repeat(3, minmax(0, 1fr));
  padding: 6px 8px 8px;
}

.me-role-advanced-columns-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.me-role-advanced-footer-row {
  border-top: 1px solid #edf0f4;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 10px;
}

.me-role-advanced-group-label {
  color: #333;
  font-size: var(--me-font-base);
  font-weight: 700;
  padding: 4px 4px 0 4px;
}

.me-role-advanced-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.me-role-advanced-item {
  align-items: flex-start;
  color: #333;
  display: inline-flex;
  font-size: var(--me-font-base);
  gap: 8px;
  justify-content: flex-start;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
  padding: 2px 0;
  width: auto;
}

.me-role-advanced-item input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
  width: auto !important;
}

.me-role-advanced-item span {
  color: #333;
  display: inline;
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
}

.me-role-advanced-block h4 {
  display: none;
}

.me-role-report-scope label {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  width: auto;
}

.me-role-report-scope input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 2px;
  width: auto !important;
}

.me-role-edit-form .permission-matrix input[type="checkbox"],
.me-role-edit-form .me-role-field-inline input[type="checkbox"] {
  width: auto !important;
}

.me-role-report-scope {
  border: 0;
  margin-top: 12px;
  padding: 0;
}

.me-role-report-scope legend {
  font-size: var(--me-font-small);
  font-weight: 600;
  margin-bottom: 8px;
}

.me-role-edit-footer {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 16px;
}

.me-role-delete-btn {
  margin-left: auto;
}

/* ============================================================
   IT Service Desk global app parity ? typography, forms, dashboard
   ============================================================ */
body.me-sdp-skin input:not([type="checkbox"]):not([type="radio"]),
body.me-sdp-skin select,
body.me-sdp-skin textarea,
body.me-sdp-skin .button,
body.me-sdp-skin button:not(.topbar-search-btn):not(.me-panel-collapse-tab):not(.me-panel-expand-tab) {
  font-family: inherit;
  font-size: var(--me-font-base);
}

body.me-sdp-skin table {
  font-size: var(--me-font-base);
}

body.me-sdp-skin .page-header h1,
body.me-sdp-skin .home-hero h1 {
  color: #333;
  font-size: 22px;
  font-weight: 600;
}

body.me-sdp-skin .page-header p,
body.me-sdp-skin .home-hero p,
body.me-sdp-skin .settings-help,
body.me-sdp-skin .empty-state,
body.me-sdp-skin .compact-list span {
  color: var(--muted);
  font-size: var(--me-font-base);
}

body.me-sdp-skin .request-row {
  font-size: var(--me-font-base);
  padding: 12px 14px;
}

body.me-sdp-skin .request-row span {
  font-size: var(--me-font-small);
}

body.me-sdp-skin .card,
body.me-sdp-skin .settings-card {
  border-color: #dce3ec;
}

body.me-sdp-skin .card-title {
  font-size: var(--me-font-content);
  font-weight: 600;
}

body.me-sdp-skin .compact-list li {
  font-size: var(--me-font-base);
  padding: 10px 0;
}

body.me-sdp-skin .metric-card {
  font-size: var(--me-font-base);
}

body.me-sdp-skin .metric-card strong {
  font-size: 28px;
}

body.me-sdp-skin .primary-button,
body.me-sdp-skin .primary-link,
body.me-sdp-skin .button {
  font-size: var(--me-font-base);
  padding: 8px 14px;
}

body.me-sdp-skin .me-link {
  color: var(--me-link);
  font-size: var(--me-font-base);
}

body.me-sdp-skin .me-admin-hub-links {
  font-size: 15px;
}

body.me-sdp-skin .me-admin-hub-category-header h2 {
  font-size: 20px;
}

body.me-sdp-skin .me-module-page .data-table th,
body.me-sdp-skin .me-module-page .data-table td {
  font-size: var(--me-font-base);
  padding: 10px 12px;
}

body.me-sdp-skin .me-module-page .data-table th {
  font-size: var(--me-font-label);
}

body.me-sdp-skin .me-views-categories button {
  font-size: var(--me-font-small);
  padding: 5px 10px;
}

body.me-sdp-skin .field-error {
  font-size: var(--me-font-small);
}

body.me-sdp-skin .user-role-badge {
  font-size: var(--me-font-small);
}

/* ME Helpdesk Dashboard (core/dashboard) */
body.me-dashboard-page main:has(.me-module-page),
body.me-hd-module.me-module-page {
  background: #eef1f5;
}

.me-hd-subheader {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 18px;
}

.me-hd-tabs {
  align-items: stretch;
  display: flex;
  gap: 0;
}

.me-hd-tabs a {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: #2d3748;
  display: inline-flex;
  font-size: var(--me-font-base);
  font-weight: 500;
  padding: 12px 16px;
  text-decoration: none;
}

.me-hd-tabs a:hover {
  color: #2b78d4;
}

.me-hd-tabs a.active {
  border-bottom-color: #2b78d4;
  color: #2b78d4;
  font-weight: 600;
}

.me-hd-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-hd-filter-select {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #333;
  font-size: var(--me-font-base);
  min-height: 32px;
  padding: 4px 28px 4px 10px;
}

.me-hd-dashboard {
  background: #eef1f5;
  padding: 16px 18px 24px;
}

.me-hd-widget-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.me-hd-widget-kpi {
  grid-column: 1 / -1;
  min-height: 0;
}
.me-hd-kpi-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.me-hd-kpi-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.me-hd-kpi-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.me-hd-kpi-grid.me-hd-kpi-grid,
.me-hd-widget-kpi .me-hd-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.me-hd-kpi.good strong { color: #137333; }
.me-hd-widget-meta {
  color: #1a73e8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.me-hd-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px 14px;
}
.me-hd-kpi span {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.me-hd-kpi strong {
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
}
.me-hd-kpi.warn strong { color: #b06000; }
.me-hd-kpi.danger strong { color: #c5221f; }
.me-hd-empty-layout {
  background: #fff;
  border: 1px dashed #c5ced9;
  grid-column: 1 / -1;
  padding: 36px 20px;
  text-align: center;
}
.me-hd-layout-dialog {
  border: 0;
  border-radius: 8px;
  max-width: 920px;
  padding: 0;
  width: calc(100vw - 48px);
}
.me-hd-layout-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.me-hd-layout-panel {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 720px);
}
.me-hd-layout-head {
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 18px 12px;
}
.me-hd-layout-head h2 {
  font-size: 18px;
  margin: 0 0 4px;
}
.me-hd-layout-head p {
  color: #64748b;
  font-size: 13px;
  margin: 0;
}
.me-hd-layout-body {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  overflow: auto;
  padding: 14px 18px;
}
.me-hd-layout-col h3 {
  font-size: 12px;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
  text-transform: uppercase;
  color: #64748b;
}
.me-hd-layout-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.me-hd-layout-list li {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 12px;
}
.me-hd-layout-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.me-hd-layout-item-main strong {
  color: #0f172a;
  font-size: 13px;
}
.me-hd-layout-item-main span {
  color: #64748b;
  font-size: 12px;
}
.me-hd-layout-item-actions {
  align-items: center;
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.me-hd-layout-empty {
  color: #94a3b8;
  font-size: 13px;
  justify-content: center !important;
}
.me-hd-layout-foot {
  align-items: center;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 18px;
}
.me-hd-layout-foot-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 900px) {
  .me-hd-layout-body,
  .me-hd-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.me-hd-widget {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.me-hd-widget-head {
  align-items: center;
  background: #f7f8fa;
  border-bottom: 1px solid #edf0f4;
  color: #333;
  display: flex;
  font-size: var(--me-font-base);
  font-weight: 600;
  gap: 8px;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 14px;
}

.me-hd-widget-head h2,
.me-hd-widget-title-menu summary {
  color: #333;
  cursor: pointer;
  font-size: var(--me-font-base);
  font-weight: 600;
  list-style: none;
  margin: 0;
}

.me-hd-widget-title-menu summary::-webkit-details-marker {
  display: none;
}

.me-hd-widget-meta {
  color: var(--muted);
  font-size: var(--me-font-small);
  font-weight: 500;
}

.me-hd-widget-body {
  flex: 1;
  overflow: auto;
  padding: 10px 14px 14px;
}

.me-hd-summary-table {
  border-collapse: collapse;
  font-size: var(--me-font-base);
  width: 100%;
}

.me-hd-summary-table th,
.me-hd-summary-table td {
  border-bottom: 1px solid #edf0f4;
  padding: 9px 10px;
  text-align: left;
}

.me-hd-summary-table thead th {
  color: #626a74;
  font-size: var(--me-font-label);
  font-weight: 700;
  text-transform: uppercase;
}

.me-hd-summary-table tbody th[scope="row"] {
  color: #333;
  font-weight: 600;
}

.me-hd-count-alert {
  color: #c0392b;
  font-weight: 700;
}

.me-hd-line-chart-wrap {
  min-height: 180px;
}

.me-hd-line-chart {
  display: block;
  height: auto;
  width: 100%;
}

.me-hd-chart-legend,
.me-hd-pie-legend {
  color: #4a5568;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--me-font-base);
  gap: 12px 18px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.me-hd-legend-dot {
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin-right: 6px;
  width: 10px;
}

.me-hd-legend-dot.inbound {
  background: #2b78d4;
}

.me-hd-legend-dot.completed {
  background: #27ae60;
}

.me-hd-legend-dot.overdue {
  background: #e74c3c;
}

.me-hd-legend-dot.sla-violated {
  background: #e45757;
}

.me-hd-legend-dot.sla-ok {
  background: #6fbf73;
}

.me-hd-bar-chart-wrap {
  min-height: 200px;
}

.me-hd-bar-chart {
  display: block;
  height: auto;
  width: 100%;
}

.me-hd-gauge-body {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  text-align: center;
}

.me-hd-gauge-chart {
  display: block;
  height: auto;
  max-width: 260px;
  width: 100%;
}

.me-hd-gauge-label {
  color: #4a5568;
  font-size: var(--me-font-base);
  margin: 4px 0 0;
}

.me-hd-empty-widget {
  color: #718096;
  font-size: var(--me-font-base);
  margin: 28px 0;
  text-align: center;
}

.me-hd-priority-body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.me-hd-pie-wrap {
  flex-shrink: 0;
}

.me-hd-pie-chart {
  display: block;
  height: 160px;
  width: 160px;
}

.me-hd-subject-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-hd-widget-list {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .me-hd-widget-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body.me-sdp-skin .topbar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
  }
}


/* ME org master lists (Departments / Sites / Regions / Group Roles) */
.me-org-list-toolbar {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
}
.me-org-status-filter {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
}
.me-org-status-filter select {
  padding: 4px 8px;
}
.me-org-master-table td:first-child a {
  color: #0066cc;
  font-weight: 600;
  text-decoration: none;
}
.me-org-master-table td:first-child a:hover {
  text-decoration: underline;
}

.me-org-master-settings-page .me-setup-main {
  background: #f4f6f8;
}

.me-org-master-page {
  color: #333;
  font-size: 13px;
  min-height: 100%;
  padding: 16px 20px 28px;
}

.me-org-master-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.me-org-master-toolbar-left {
  align-items: center;
  display: flex;
  gap: 12px;
}

.me-org-master-new-btn {
  background: #2b78d4;
  border: 1px solid #2468b8;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 14px;
  text-decoration: none;
}

.me-org-master-new-btn:hover {
  background: #2468b8;
  color: #fff;
}

.me-org-master-table-wrap {
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04);
  overflow: auto;
}

.me-org-master-table {
  margin: 0;
}

.me-org-master-table .me-link {
  font-weight: 600;
}

.me-org-master-actions-col {
  text-align: right;
  width: 140px;
}

.me-org-master-page .table-actions {
  vertical-align: middle;
}

.me-org-master-actions {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.me-org-master-actions .inline-delete-form {
  margin: 0;
}

.me-org-master-actions .me-link,
.me-org-master-actions .link-button {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.me-org-master-actions .link-button {
  color: #ef4444;
}

.me-org-master-actions .me-link:hover,
.me-org-master-actions .link-button:hover {
  text-decoration: underline;
}

.me-org-master-page .me-org-status-filter label {
  color: #5f6771;
  font-weight: 600;
}

.me-org-master-page .me-org-status-filter select {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 2px;
  min-width: 120px;
  padding: 6px 8px;
}

/* Technician Assigned Roles (ME parity ? chip/tag picker) */
.me-assigned-roles-panel .settings-help {
  margin: 0 0 10px;
}
.me-assigned-roles-field {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  max-width: 720px;
}
.me-assigned-roles-label {
  color: #333;
  flex: 0 0 140px;
  font-size: 13px;
  font-weight: 600;
  line-height: 30px;
  margin: 0;
  padding-top: 1px;
}
.me-assigned-roles-control {
  flex: 1 1 auto;
  min-width: 0;
}
.me-role-chips-box {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 2px;
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 32px;
  padding: 3px 6px;
  position: relative;
  width: 100%;
}
.me-role-chips-box:focus-within,
.me-role-chips-box.is-open {
  border-color: #2b78d4;
  box-shadow: 0 0 0 1px rgba(43, 120, 212, 0.2);
}
.me-role-chips-selected {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.me-role-chip {
  align-items: center;
  background: #f0f2f5;
  border: 1px solid #c5cdd8;
  border-radius: 2px;
  color: #333;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  line-height: 1.2;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
}
.me-role-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-role-chip-remove {
  background: transparent;
  border: 0;
  color: #5a6b7d;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.me-role-chip-remove:hover {
  color: #c0392b;
}
.me-role-chips-search {
  background: transparent;
  border: 0;
  flex: 1 1 120px;
  font-size: 13px;
  min-width: 120px;
  outline: none;
  padding: 4px 2px;
}
.me-role-chips-dropdown {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.12);
  left: 0;
  max-height: 220px;
  overflow: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  z-index: 40;
}
.me-role-chips-option {
  align-items: flex-start;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}
.me-role-chips-option:last-child {
  border-bottom: 0;
}
.me-role-chips-option:hover {
  background: #f3f8fd;
}
.me-role-chips-option-name {
  color: #222;
  font-size: 13px;
  font-weight: 600;
}
.me-role-chips-option-desc {
  color: #6b7785;
  font-size: 12px;
}
.me-role-chips-option--empty {
  color: #6b7785;
  cursor: default;
  font-size: 12px;
}
.me-role-chips-option--empty:hover {
  background: #fff;
}
.me-role-chips-desc {
  color: #555;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 6px;
}
.me-role-chips-desc-line {
  display: inline-block;
}
.me-assigned-roles-select,
select.me-assigned-roles-select {
  min-height: 160px;
  width: 100%;
  max-width: 420px;
  padding: 6px 8px;
}

/* ===== Organization Roles board (ME SetUpWizard parity) ===== */
.me-org-roles-settings-page .me-setup-main {
  background: #f4f6f8;
}

.me-org-roles-page {
  color: #333;
  font-size: 13px;
  min-height: 100%;
  padding: 16px 20px 28px;
}

.me-org-roles-page-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.me-org-roles-page-head h1 {
  color: #3d4652;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.me-org-roles-page-nav {
  display: flex;
  gap: 8px;
}

.me-org-roles-nav-btn {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 2px;
  color: #3d4652;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 7px 14px;
  text-decoration: none;
}

a.me-org-roles-nav-btn:hover {
  border-color: #2b78d4;
  color: #2b78d4;
}

.me-org-roles-nav-btn:disabled,
button.me-org-roles-nav-btn:disabled {
  color: #a0a8b3;
  cursor: default;
  opacity: 0.7;
}

.me-org-roles-toolbar {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.me-org-roles-history-link {
  align-items: center;
  color: #2b78d4;
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  text-decoration: none;
}

.me-org-roles-history-link:hover {
  text-decoration: underline;
}

.me-org-roles-history-icon {
  font-size: 13px;
  line-height: 1;
}

.me-org-roles-info-banner {
  align-items: flex-start;
  background: #eaf4fc;
  border: 1px solid #c5dff0;
  border-radius: 2px;
  color: #3d4652;
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
}

.me-org-roles-info-icon {
  align-items: center;
  background: #2b78d4;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 18px;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 18px;
}

.me-org-roles-info-banner p {
  line-height: 1.45;
  margin: 0;
}

.me-org-roles-board {
  align-items: stretch;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.me-org-roles-column {
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04);
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  max-width: 280px;
  min-height: 420px;
  min-width: 230px;
  width: 250px;
}

.me-org-roles-column-head {
  align-items: center;
  background: #f0f3f7;
  border-bottom: 1px solid #d7dee8;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 40px;
  padding: 8px 12px;
}

.me-org-roles-column-head h2 {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.me-org-roles-add-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 2px;
  color: #2b78d4;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  font-weight: 500;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 24px;
}

.me-org-roles-add-btn:hover {
  background: #e8f2fc;
  border-color: #2b78d4;
}

.me-org-roles-column-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.me-org-role-card {
  border-bottom: 1px solid #edf0f4;
  padding: 14px 14px 12px;
}

.me-org-role-card:last-child {
  border-bottom: 0;
}

.me-org-role-card-title {
  color: #222;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 4px;
}

.me-org-role-card-subtitle {
  color: #5f6771;
  font-size: 12px;
  line-height: 1.35;
  margin: 0 0 8px;
}

.me-org-role-card-users {
  color: #6b7785;
  font-size: 12px;
  margin: 0 0 10px;
}

.me-org-role-card-actions {
  align-items: center;
  display: flex;
  gap: 4px;
}

.me-org-role-inline-form {
  display: inline;
  margin: 0;
}

.me-org-role-action-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: #5f6771;
  cursor: pointer;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  padding: 0;
  width: 26px;
}

.me-org-role-action-btn svg {
  display: block;
  height: 16px;
  width: 16px;
}

.me-org-role-action-btn:hover {
  background: #eef3f8;
  color: #2b78d4;
}

.me-org-role-action-btn[title="Delete role"]:hover {
  color: #c0392b;
}

.me-org-roles-empty {
  color: #8a939e;
  font-size: 12px;
  margin: 0;
  padding: 18px 14px;
}

/* Org roles modals */
.me-org-roles-modal[hidden] {
  display: none !important;
}

.me-org-roles-modal {
  align-items: flex-start;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 64px 16px 24px;
  position: fixed;
  z-index: 1300;
}

.me-org-roles-modal-backdrop {
  background: rgba(0, 0, 0, 0.45);
  inset: 0;
  position: absolute;
}

.me-org-roles-modal-dialog {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  max-width: 480px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.me-org-roles-modal-header {
  align-items: center;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
}

.me-org-roles-modal-header h2 {
  color: #3d4652;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.me-org-roles-modal-close {
  background: none;
  border: none;
  color: #8a939e;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
}

.me-org-roles-modal-close:hover {
  color: #3d4652;
}

.me-org-roles-modal-body {
  padding: 16px 18px 0;
}

.me-org-roles-modal-body .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.me-org-roles-modal-body .form-row label {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
}

.me-org-roles-modal-body .form-row input[type="text"],
.me-org-roles-modal-body .form-row textarea,
.me-org-roles-modal-body .form-row select {
  border: 1px solid #c8d0da;
  border-radius: 3px;
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
}

.me-org-roles-modal-footer {
  border-top: 1px solid #e8edf3;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  padding: 14px 18px 18px;
}

@media (max-width: 900px) {
  .me-org-roles-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .me-org-roles-column {
    flex-basis: 240px;
    min-width: 240px;
    width: 240px;
  }
}

/* Inline list status / assign / close (ME parity) */
.me-assign-tech-trigger,
.me-group-inline-trigger,
.me-status-inline-trigger {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  max-width: 100%;
  padding: 2px 6px;
  text-align: left;
}

.me-assign-tech-trigger:hover,
.me-group-inline-trigger:hover,
.me-status-inline-trigger:hover,
.me-status-inline-trigger[aria-expanded="true"] {
  background: #fff;
  border-color: #c5d0dc;
}

.me-status-caret {
  color: #8a939e;
  font-size: 10px;
  margin-left: 2px;
}

.me-status-picker {
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  position: fixed;
  z-index: 1300;
}

.me-status-picker-current {
  align-items: center;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: space-between;
  padding: 8px 10px;
}

.me-status-picker-dismiss {
  background: none;
  border: none;
  color: #8a939e;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

.me-status-picker-search {
  border-bottom: 1px solid #e8edf3;
  padding: 6px 8px;
}

.me-status-picker-search input {
  border: 1px solid #c8d0da;
  border-radius: 3px;
  font-size: 13px;
  padding: 6px 8px;
  width: 100%;
}

.me-status-picker-list {
  list-style: none;
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 4px 0;
}

.me-status-picker-list li {
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
}

.me-status-picker-list li:hover,
.me-status-picker-list li.is-current {
  background: #2b78d4;
  color: #fff;
}

.me-assign-modal-dialog {
  max-width: 420px;
}

.me-assign-modal-header,
.me-close-modal-header {
  align-items: center;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
}

.me-assign-modal-header h2,
.me-close-modal-header h2 {
  color: #3d4652;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.me-assign-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.me-assign-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.me-assign-field select {
  border: 1px solid #c8d0da;
  border-radius: 3px;
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
}

.me-assign-modal-footer,
.me-close-modal-footer {
  border-top: 1px solid #e8edf3;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 14px 18px 18px;
}

.me-close-modal-dialog {
  max-width: 720px;
}

.me-close-modal-layout {
  display: flex;
  min-height: 320px;
}

.me-close-modal-steps {
  background: #f5f7fa;
  border-right: 1px solid #e8edf3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 14px;
  width: 190px;
}

.me-close-step {
  align-items: center;
  color: #6b7785;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.me-close-step-icon {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.me-close-step-done .me-close-step-icon {
  background: #3d9b5f;
  color: #fff;
}

.me-close-step-active {
  color: #3d4652;
  font-weight: 600;
}

.me-close-step-active .me-close-step-icon {
  background: #e67e22;
  color: #fff;
  font-size: 8px;
}

.me-close-modal-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.me-close-check,
.me-close-ack label {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  gap: 8px;
}

.me-close-ack {
  border: none;
  margin: 0;
  padding: 0;
}

.me-close-ack legend {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.me-close-ack label {
  margin-right: 16px;
}

.me-close-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.me-close-field textarea,
.me-close-field select {
  border: 1px solid #c8d0da;
  border-radius: 3px;
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}

@media (max-width: 700px) {
  .me-close-modal-layout {
    flex-direction: column;
  }

  .me-close-modal-steps {
    border-right: none;
    border-bottom: 1px solid #e8edf3;
    flex-direction: row;
    width: auto;
  }
}

/* ME requester self-service home ? full width */
.me-requester-home-page main,
.me-catalog-portal-page main,
.me-add-request-page main,
.me-request-edit-page main {
  background: #eef1f5;
  max-width: none;
  padding: 0;
  width: 100%;
}

.me-requester-home {
  box-sizing: border-box;
  margin: 0;
  max-width: none;
  padding: 0 24px 32px;
  width: 100%;
}

.me-requester-search-hero {
  background: linear-gradient(120deg, #1f3a5f 0%, #2b78d4 55%, #5aa0e6 100%);
  border-radius: 0;
  margin: 0 -24px 20px;
  padding: 28px 24px 24px;
}

.me-requester-search {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  display: flex;
  margin: 0;
  max-width: none;
  overflow: hidden;
  width: 100%;
}

.me-requester-search input[type="search"],
.me-requester-search input {
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  flex: 1;
  font-size: 15px;
  min-width: 0;
  padding: 14px 16px;
  width: auto;
}

.me-requester-search-btn {
  background: #fff;
  border: 0;
  border-left: 1px solid #e8edf3;
  color: #5f6771;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 16px;
  padding: 0 16px;
}

.me-requester-action-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.me-req-card {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 158px;
  padding: 18px 16px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.me-req-card:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
  filter: saturate(1.06) brightness(1.03);
  transform: translateY(-2px);
}

.me-req-card h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.me-req-card-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: inline-flex;
  font-size: 20px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  line-height: 1;
  opacity: 1;
  width: 40px;
}

.me-req-card-btn {
  align-self: flex-start;
  background: #fff !important;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  color: #2d3748 !important;
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
  padding: 8px 12px;
  text-decoration: none !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.me-req-card-btn:hover {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  filter: brightness(1.02);
}

.me-req-card-issue {
  background: linear-gradient(145deg, #f05454 0%, #d32f2f 55%, #b71c1c 100%);
}
.me-req-card-service {
  background: linear-gradient(145deg, #2bb673 0%, #1e9e5f 55%, #0d7a45 100%);
}
.me-req-card-solutions {
  background: linear-gradient(145deg, #4a9cf5 0%, #2b7de0 55%, #1565c0 100%);
}
.me-req-card-assets {
  background: linear-gradient(145deg, #7d8fa3 0%, #5f7388 55%, #455a6f 100%);
}

.me-req-card-issue .me-req-card-btn { color: #c62828 !important; }
.me-req-card-service .me-req-card-btn { color: #0d7a45 !important; }
.me-req-card-solutions .me-req-card-btn { color: #1565c0 !important; }
.me-req-card-assets .me-req-card-btn { color: #455a6f !important; }

.me-requester-widgets,
.me-requester-bottom {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 14px;
}

.me-requester-bottom {
  grid-template-columns: 1fr 1fr;
}

.me-req-widget {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  min-height: 180px;
}

.me-req-widget .me-panel-body {
  flex: 1;
}

.me-my-assets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-my-asset-row {
  align-items: center;
  border-bottom: 1px solid #eef2f6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 0;
}

.me-my-asset-row:last-child {
  border-bottom: 0;
}

.me-my-asset-row a {
  color: #2b78d4;
  text-decoration: none;
}

.me-my-asset-meta {
  color: #6b7c93;
  font-size: 12px;
}

.me-my-asset-issue {
  margin-left: auto;
  font-size: 12px;
}

.me-req-status-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.me-req-status-card {
  align-items: center;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  color: #2d3748 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 84px;
  text-decoration: none !important;
}

.me-req-status-card:hover {
  border-color: #b7c6d8;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.me-req-status-card strong {
  color: #2b78d4;
  font-size: 28px;
  line-height: 1;
}

.me-req-status-closed strong,
.me-req-status-closed span {
  color: #2f9e6b;
}

.me-req-status-card span {
  color: #5f6771;
  font-size: 12px;
  margin-top: 6px;
  text-align: center;
}

.me-req-summary-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.me-req-summary-list a {
  align-items: center;
  color: #2d3748 !important;
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  text-decoration: none !important;
}

.me-req-summary-list a:hover {
  background: #f7f9fb;
}

.me-req-summary-list strong {
  color: #2b78d4;
}

@media (max-width: 960px) {
  .me-requester-action-cards,
  .me-requester-widgets,
  .me-requester-bottom {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .me-requester-action-cards,
  .me-requester-widgets,
  .me-requester-bottom,
  .me-req-status-grid {
    grid-template-columns: 1fr;
  }
}

/* ME requester service / incident catalog portal */
.me-catalog-portal-page main {
  background: #f4f6f8;
  max-width: none;
  padding: 0;
  width: 100%;
}

.me-catalog-portal {
  box-sizing: border-box;
  margin: 0;
  max-width: none;
  padding: 18px 24px 40px;
  width: 100%;
}

.me-catalog-portal-head h1 {
  color: #2f3b4a;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: left;
}

.me-catalog-breadcrumb {
  align-items: center;
  color: #5f6771;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px;
  margin-bottom: 16px;
}

.me-catalog-breadcrumb a {
  color: #2b78d4 !important;
  text-decoration: none !important;
}

.me-catalog-search {
  align-items: stretch;
  background: #fff;
  border: 1px solid #d4dbe3;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  margin: 0 0 24px;
  max-width: none;
  overflow: hidden;
  width: 100%;
}

.me-catalog-search input[type="search"],
.me-catalog-search input {
  border: 0 !important;
  border-radius: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
  font-size: 14px;
  min-width: 0;
  padding: 12px 14px;
  width: auto !important;
}

.me-catalog-search button {
  background: #fff;
  border: 0;
  border-left: 1px solid #e8edf3;
  color: #5f6771;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  padding: 0 14px;
}

.me-catalog-search button:hover {
  background: #f7f9fc;
  color: #2b78d4;
}

.me-catalog-category-grid,
.me-catalog-service-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.me-catalog-category-card,
.me-catalog-service-card {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  box-sizing: border-box;
  color: #2d3748 !important;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 22px 16px 18px;
  text-align: center;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.me-catalog-category-card:hover,
.me-catalog-service-card:hover {
  border-color: #2b78d4;
  box-shadow: 0 2px 10px rgba(43, 120, 212, 0.12);
}

.me-catalog-category-icon,
.me-catalog-service-icon {
  align-items: center;
  display: flex;
  height: 80px;
  justify-content: center;
  margin-bottom: 12px;
}

.me-catalog-category-icon img,
.me-catalog-service-icon img {
  display: block;
  height: 72px;
  object-fit: contain;
  width: 72px;
}

.me-catalog-service-icon img {
  height: 64px;
  width: 64px;
}

.me-catalog-category-card h2,
.me-catalog-service-card h2 {
  color: #2f3b4a !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}

.me-catalog-category-card:hover h2,
.me-catalog-service-card:hover h2 {
  color: #2b78d4 !important;
}

.me-catalog-category-card p,
.me-catalog-service-card p {
  color: #6b7785 !important;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.me-catalog-empty {
  color: #6b7785;
  grid-column: 1 / -1;
  padding: 40px 16px;
  text-align: center;
}

.me-catalog-empty a {
  color: #2b78d4 !important;
  display: inline-block;
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .me-catalog-category-grid,
  .me-catalog-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .me-catalog-category-grid,
  .me-catalog-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .me-catalog-category-grid,
  .me-catalog-service-grid {
    grid-template-columns: 1fr;
  }
}

/* Topbar role badge on dark header */
.top-actions .user-role-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #e8edf2;
}

.topbar-search-panel[hidden] {
  display: none !important;
}

/* Workflow approval level ? searchable approver picker */
.me-wf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.me-wf-field-label {
  color: #3d4652;
  font-size: 13px;
  font-weight: 600;
}

.me-wf-field-label em {
  color: #c0392b;
  font-style: normal;
}

.me-wf-input {
  border: 1px solid #c8d0da;
  border-radius: 3px;
  font: inherit;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
}

.me-wf-field-help {
  color: #6b7785;
  font-size: 12px;
}

.me-wf-approver-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.me-wf-approver-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.me-wf-approver-chip {
  align-items: center;
  background: #e8f1fb;
  border: 1px solid #b7d0ef;
  border-radius: 12px;
  color: #1d4f91;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  padding: 3px 8px;
}

.me-wf-chip-remove {
  background: transparent;
  border: 0;
  color: #1d4f91;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.me-wf-approver-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.me-wf-approver-select {
  min-height: 160px;
}

.me-wf-approver-select option[hidden] {
  display: none;
}

.me-wf-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

body.me-wf-modal-open {
  overflow: hidden;
}

.me-wf-approval-modal.is-open {
  display: block;
}

/* ===== ME Assets module (list + detail) ===== */
main:has(.me-assets-page) {
  background: #eef1f5;
  padding: 0;
}

.me-assets-page {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 56px);
  width: 100%;
}

.me-assets-nav {
  background: #f4f6f8;
  border-right: 1px solid #dde3ea;
  display: flex;
  flex: 0 0 220px;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
}

.me-assets-nav-item {
  align-items: center;
  color: #3d4654;
  display: flex;
  font-size: 13px;
  gap: 10px;
  padding: 9px 16px;
  text-decoration: none;
}

a.me-assets-nav-item:hover {
  background: #e8eef5;
  color: #1f2a37;
}

.me-assets-nav-item.active {
  background: #fff;
  border-left: 3px solid #2b78d4;
  color: #1a5fa8;
  font-weight: 600;
  padding-left: 13px;
}

.me-assets-nav-muted {
  color: #9aa5b1;
  cursor: default;
}

.me-assets-nav-icon {
  color: #6b7785;
  flex: 0 0 16px;
  font-size: 12px;
  text-align: center;
}

.me-assets-main {
  background: #fff;
  flex: 1;
  min-width: 0;
  padding: 0 0 24px;
}

.me-assets-titlebar {
  border-bottom: 1px solid #e5ebf1;
  padding: 14px 18px 10px;
}

.me-assets-title-row {
  align-items: center;
  display: flex;
  gap: 12px;
}

.me-assets-titlebar h1 {
  color: #26313d;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.me-assets-actions {
  position: relative;
}

.me-assets-actions[hidden] {
  display: none !important;
}

.me-assets-actions-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  color: #3d4654;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
}

.me-assets-actions-caret {
  color: #6b7785;
  font-size: 11px;
}

.me-assets-actions-menu {
  background: #fff;
  border: 1px solid #d5dde6;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(20, 40, 70, 0.12);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px 0;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 40;
}

.me-assets-actions-menu[hidden] {
  display: none !important;
}

.me-assets-actions-item {
  background: none;
  border: 0;
  color: #2b3645;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 14px;
  text-align: left;
  width: 100%;
}

.me-assets-actions-item:hover {
  background: #f0f5fb;
}

.me-assets-actions-danger {
  color: #c0392b;
}

.me-assets-actions-empty {
  color: #8a96a3;
  font-size: 12px;
  padding: 8px 14px;
}

.me-assets-modal-overlay {
  align-items: center;
  background: rgba(20, 30, 45, 0.45);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1200;
}

.me-assets-modal-overlay[hidden] {
  display: none !important;
}

.me-assets-modal {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  max-width: 440px;
  width: calc(100% - 32px);
}

.me-assets-modal-header {
  align-items: center;
  border-bottom: 1px solid #e5ebf1;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.me-assets-modal-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.me-assets-modal-close {
  background: none;
  border: 0;
  color: #6b7785;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.me-assets-modal-body {
  padding: 16px;
}

.me-assets-modal-count {
  color: #5f6b7a;
  font-size: 13px;
  margin: 0 0 12px;
}

.me-assets-modal-field {
  display: grid;
  gap: 6px;
}

.me-assets-modal-field span {
  color: #4a5568;
  font-size: 12px;
}

.me-assets-modal-field select {
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  font-size: 13px;
  min-height: 34px;
  padding: 6px 8px;
}

.me-assets-modal-footer {
  border-top: 1px solid #e5ebf1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
}

.me-assets-btn-danger,
.me-toolbar-btn.me-assets-btn-danger {
  background: #c0392b !important;
  border-color: #c0392b !important;
  color: #fff !important;
}

.me-assets-toolbar {
  align-items: center;
  background: #f7f9fb;
  border-bottom: 1px solid #e5ebf1;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 18px;
}

.me-assets-toolbar-left,
.me-assets-toolbar-right {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-assets-view-toggle {
  color: #5f6b7a;
  font-size: 14px;
}

.me-assets-filters-btn {
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  color: #3d4654;
  cursor: pointer;
  font-size: 14px;
  min-height: 32px;
  padding: 5px 12px;
}

.me-assets-filters-btn.is-active,
.me-assets-filters-btn:hover {
  background: #2b78d4;
  border-color: #2b78d4;
  color: #fff;
}

.me-assets-inline-search {
  align-items: center;
  display: flex;
  gap: 4px;
}

.me-assets-inline-search input[type="search"] {
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  font-size: 14px;
  min-height: 32px;
  padding: 4px 10px;
  width: 180px;
}

.me-assets-icon-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  color: #4a5568;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 30px;
  justify-content: center;
  text-decoration: none;
  width: 30px;
}

.me-assets-pager {
  align-items: center;
  color: var(--f3-text-secondary, #64748b);
  display: flex;
  font-size: 13px;
  gap: 8px;
  white-space: nowrap;
}

.me-assets-page-size {
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  font-size: 12px;
  min-height: 28px;
  padding: 2px 6px;
}

.me-assets-filter-row {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e5ebf1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
}

.me-assets-filter-row[hidden] {
  display: none !important;
}

.me-assets-filter-select {
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  font-size: 14px;
  min-height: 32px;
  min-width: 150px;
  padding: 4px 8px;
}

.me-assets-filter-search {
  min-width: 180px;
}

.me-assets-clear-filter {
  align-items: center;
  color: #6b7785;
  display: inline-flex;
  font-size: 20px;
  height: 30px;
  justify-content: center;
  text-decoration: none;
  width: 30px;
}

.me-assets-table-wrap {
  overflow: auto;
  padding: 0;
}

.me-assets-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--f3-border, #E2E8F0);
}

.me-assets-pager-label {
  color: var(--f3-text-secondary, #64748B);
  font-size: 13px;
}

.me-assets-table {
  border-collapse: collapse;
  min-width: 1100px;
  width: 100%;
}

.me-assets-table th,
.me-assets-table td {
  border-bottom: 1px solid #e8edf3;
  font-size: 14px;
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}

.me-assets-table th {
  background: #f3f6f9;
  color: #4a5568;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.me-assets-table .check-col,
.me-assets-table .edit-col {
  width: 36px;
}

.me-assets-row-edit {
  color: #6b7785;
  text-decoration: none;
}

.me-assets-row-edit:hover {
  color: #2b78d4;
}

.me-assets-table tbody tr:hover {
  background: #f5f9fd;
}

.me-assets-table .empty-state {
  color: #7a8694;
  padding: 28px 12px;
  text-align: center;
}

.me-assets-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 20px 18px;
}

.me-assets-stat-card {
  background: #f7f9fb;
  border: 1px solid #e5ebf1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.me-assets-stat-label {
  color: #6b7785;
  font-size: 13px;
}

.me-assets-stat-value {
  color: #1f2a37;
  font-size: 28px;
  font-weight: 600;
}

.me-assets-summary-note {
  padding: 0 18px 18px;
}

.me-assets-detail-header {
  align-items: flex-start;
  border-bottom: 1px solid #e5ebf1;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 18px;
}

.me-assets-crumb {
  align-items: center;
  color: #7a8694;
  display: flex;
  font-size: 12px;
  gap: 6px;
  margin-bottom: 6px;
}

.me-assets-crumb a {
  color: #2b78d4;
  text-decoration: none;
}

.me-assets-detail-header h1 {
  color: #1f2a37;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.me-assets-detail-sub {
  color: #6b7785;
  font-size: 14px;
  margin: 6px 0 0;
}

.me-assets-detail-actions {
  display: flex;
  gap: 8px;
}

.me-assets-detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px 18px;
}

.me-assets-panel {
  background: #fff;
  border: 1px solid #e5ebf1;
  border-radius: 4px;
  padding: 16px;
}

.me-assets-panel-wide {
  grid-column: 1 / -1;
}

.me-assets-panel h2 {
  border-bottom: 1px solid #edf0f4;
  color: #26313d;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
}

.me-assets-subhead {
  color: #4a5568;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 6px;
}

.me-assets-props {
  display: grid;
  gap: 0;
  margin: 0;
}

.me-assets-props > div {
  border-bottom: 1px solid #f0f3f7;
  display: grid;
  grid-template-columns: 140px 1fr;
  padding: 8px 0;
}

.me-assets-props dt {
  color: #6b7785;
  font-size: 13px;
  margin: 0;
}

.me-assets-props dd {
  color: #26313d;
  font-size: 14px;
  margin: 0;
}

.me-assets-notes {
  margin-top: 14px;
}

.me-assets-notes h3 {
  color: #4a5568;
  font-size: 13px;
  margin: 0 0 6px;
}

.me-assets-rel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-assets-rel-list li {
  border-bottom: 1px solid #f0f3f7;
  font-size: 13px;
  padding: 7px 0;
}

.me-assets-rel-list .muted {
  color: #9aa5b1;
}

.me-assets-rel-form {
  border-top: 1px solid #edf0f4;
  margin-top: 14px;
  padding-top: 12px;
}

.me-assets-rel-form p {
  margin: 0 0 10px;
}

@media (max-width: 960px) {
  .me-assets-page {
    flex-direction: column;
  }

  .me-assets-nav {
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    padding: 8px;
    width: 100%;
  }

  .me-assets-detail-grid {
    grid-template-columns: 1fr;
  }
}

.workflow-button, .me-request-fab { display: none !important; }

/* ===== ME Assets nested sidebar tree + search ===== */
.me-assets-nav {
  background: #f4f6f8;
  border-right: 1px solid #dde3ea;
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  gap: 0;
  max-height: calc(100vh - 56px);
  overflow: hidden;
  padding: 0;
}

.me-assets-nav-search {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e5ebf1;
  display: flex;
  gap: 8px;
  margin: 10px 10px 6px;
  padding: 0 10px;
  border: 1px solid #cfd7e1;
  border-radius: 3px;
}

.me-assets-nav-search-icon {
  color: #8a96a3;
  font-size: 14px;
}

.me-assets-nav-search input {
  background: transparent;
  border: 0;
  flex: 1;
  font-size: 14px;
  min-height: 34px;
  outline: none;
  padding: 0;
  width: 100%;
}

.me-assets-tree {
  flex: 1;
  overflow: auto;
  padding: 4px 0 16px;
}

.me-assets-tree-row {
  align-items: center;
  display: flex;
  gap: 4px;
  min-height: 34px;
  padding: 2px 10px 2px calc(8px + (var(--nav-depth, 0) * 14px));
}

.me-assets-tree-node.is-active > .me-assets-tree-row {
  background: #e7f1fb;
}

.me-assets-tree-toggle,
.me-assets-tree-spacer {
  background: none;
  border: 0;
  color: #7a8694;
  cursor: pointer;
  flex: 0 0 16px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  padding: 0;
  text-align: center;
  width: 16px;
}

.me-assets-tree-node.is-open > .me-assets-tree-row > .me-assets-tree-toggle {
  transform: rotate(90deg);
}

.me-assets-tree-icon {
  align-items: center;
  color: #5b8def;
  display: inline-flex;
  flex: 0 0 18px;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.me-assets-ico {
  display: block;
  height: 16px;
  width: 16px;
}

.me-assets-tree-node.is-muted .me-assets-tree-icon {
  color: #9aa5b1;
}

.me-assets-tree-node.is-active > .me-assets-tree-row .me-assets-tree-icon {
  color: #2b78d4;
}

.me-assets-tree-label {
  color: #2f3b4a;
  flex: 1;
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}

a.me-assets-tree-label:hover {
  color: #1a5fa8;
}

.me-assets-tree-node.is-active > .me-assets-tree-row > .me-assets-tree-label {
  color: #1a5fa8;
  font-weight: 600;
}

.me-assets-tree-node.is-muted > .me-assets-tree-row {
  opacity: 0.55;
}

.me-assets-tree-node.is-muted .me-assets-tree-label {
  color: #8a96a3;
  cursor: default;
}

.me-assets-tree-children {
  display: block;
}

.me-assets-tree-children[hidden] {
  display: none !important;
}

.me-assets-tree-node[hidden] {
  display: none !important;
}

/* Assets readability bump */
.me-assets-page {
  font-size: 14px;
}
.me-assets-tree-label,
.me-assets-nav-search input,
.me-assets-filters-btn,
.me-assets-inline-search input[type="search"],
.me-assets-filter-select,
.me-assets-actions-btn,
.me-assets-actions-item,
.me-assets-table td {
  font-size: 14.5px !important;
}
.me-assets-table th {
  font-size: 12.5px !important;
}
.me-assets-titlebar h1,
.me-assets-detail-header h1 {
  font-size: 24px !important;
}


/* Assets New button + form */
.me-assets-title-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.me-assets-new-btn {
  white-space: nowrap;
}
.me-assets-new-group {
  position: relative;
}
.me-assets-new-group > summary {
  list-style: none;
  cursor: pointer;
}
.me-assets-new-group > summary::-webkit-details-marker {
  display: none;
}
.me-assets-new-group-form {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}
.me-assets-new-group-form label {
  color: #475569;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
}
.me-assets-new-group-form input {
  border: 1px solid #c5cdd8;
  border-radius: 8px;
  font-size: 14px;
  min-height: 34px;
  padding: 6px 8px;
}
.me-assets-form-card {
  padding: 16px 18px 24px;
}
.me-assets-form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.me-assets-form-grid .me-assets-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.me-assets-form-grid .me-assets-modal-field input:not([type="checkbox"]):not([type="radio"]),
.me-assets-form-grid .me-assets-modal-field select,
.me-assets-form-grid .me-assets-modal-field textarea,
.me-assets-input {
  border: 1px solid #c5cdd8;
  border-radius: 3px;
  font-size: 14px;
  min-height: 34px;
  padding: 6px 8px;
  width: 100%;
}
.me-assets-textarea,
textarea.me-assets-input {
  min-height: 96px;
  resize: vertical;
}
.me-assets-checkbox-wrap {
  align-items: center;
  display: flex;
  gap: 8px;
  font-size: 14px;
}
.me-assets-form-grid .me-assets-modal-field input[type="checkbox"],
.me-assets-checkbox-wrap input[type="checkbox"] {
  appearance: auto;
  border: initial;
  border-radius: 3px;
  flex: 0 0 auto;
  height: 16px;
  margin: 0;
  min-height: 16px;
  min-width: 16px;
  padding: 0;
  width: 16px;
}
.me-assets-checkbox-field {
  align-items: flex-start;
}
.me-assets-form-footer {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 960px) {
  .me-assets-form-grid { grid-template-columns: 1fr; }
}

/* ===== Reports dashboard ===== */
.me-reports-page {
  display: grid;
  gap: 0;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
  margin: -8px -12px 0;
  background: #f4f6f9;
}
.me-reports-nav {
  background: #fff;
  border-right: 1px solid #d8dee8;
  padding: 16px 0 24px;
}
.me-reports-nav-title {
  color: #1f2a3a;
  font-size: 15px;
  font-weight: 700;
  margin: 0 16px 12px;
}
.me-reports-nav-item {
  color: #334155;
  display: block;
  font-size: 13px;
  padding: 9px 16px;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.me-reports-nav-item:hover {
  background: #f0f4fa;
  color: #0f172a;
}
.me-reports-nav-item.active {
  background: #e8f0fe;
  border-left-color: #1a73e8;
  color: #174ea6;
  font-weight: 600;
}
.me-reports-main {
  padding: 20px 24px 40px;
}
.me-reports-header {
  margin-bottom: 18px;
}
.me-reports-header h1 {
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}
.me-reports-header p {
  color: #64748b;
  font-size: 13px;
  margin: 0;
}
.me-reports-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}
.me-reports-kpi-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.me-reports-kpi {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.me-reports-kpi span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.me-reports-kpi strong {
  color: #0f172a;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}
.me-reports-kpi.good strong { color: #137333; }
.me-reports-kpi.warn strong { color: #b06000; }
.me-reports-kpi.danger strong { color: #c5221f; }
.me-reports-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.me-reports-grid-1 {
  grid-template-columns: 1fr;
}
.me-reports-card {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  padding: 14px 16px 16px;
}
.me-reports-card h2 {
  border-bottom: 1px solid #e8edf4;
  color: #1f2a3a;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
}
.me-reports-table {
  border-collapse: collapse;
  width: 100%;
}
.me-reports-table th,
.me-reports-table td {
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
  padding: 8px 4px;
  text-align: left;
}
.me-reports-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.me-reports-table td:last-child,
.me-reports-table th:last-child {
  text-align: right;
  width: 88px;
}
.me-reports-empty {
  color: #94a3b8;
  font-size: 13px;
  margin: 8px 0;
}
.me-reports-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.me-reports-bar-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 110px minmax(0, 1fr) 40px;
}
.me-reports-bar-label {
  color: #334155;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-reports-bar-track {
  background: #eef2f7;
  border-radius: 3px;
  height: 10px;
  overflow: hidden;
}
.me-reports-bar-fill {
  background: #1a73e8;
  border-radius: 3px;
  height: 100%;
  min-width: 0;
}
.me-reports-bar-value {
  color: #0f172a;
  font-size: 12px;
  text-align: right;
}
.me-reports-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.me-reports-stat-list li {
  align-items: center;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.me-reports-stat-list li:last-child { border-bottom: 0; }
.me-reports-stat-list span { color: #475569; font-size: 13px; }
.me-reports-stat-list strong { color: #0f172a; font-size: 14px; }
.me-reports-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
}
.me-reports-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
}
.me-reports-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.me-reports-filters input,
.me-reports-filters select {
  min-width: 140px;
  height: 32px;
  border: 1px solid #c5ced9;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
}
.me-reports-export {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media print {
  .me-topbar,
  .me-sidebar,
  .me-reports-nav,
  .me-reports-toolbar,
  .me-workflow-fab { display: none !important; }
  .me-reports-page { display: block; }
  .me-reports-main { padding: 0; }
}
@media (max-width: 1100px) {
  .me-reports-page { grid-template-columns: 1fr; }
  .me-reports-nav {
    border-bottom: 1px solid #d8dee8;
    border-right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px;
  }
  .me-reports-nav-title { width: 100%; }
  .me-reports-nav-item {
    border: 1px solid #d8dee8;
    border-left: 1px solid #d8dee8;
    border-radius: 4px;
    padding: 6px 10px;
  }
  .me-reports-nav-item.active {
    border-color: #1a73e8;
  }
  .me-reports-kpi-grid,
  .me-reports-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Contracts (reuses assets shell) ===== */
.me-assets-nav-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 4px;
  padding-left: 12px;
}
.me-assets-nav-child {
  font-size: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.me-contract-status-active::before { background: #137333; }
.me-contract-status-expired::before { background: #c5221f; }
.me-contract-status-draft::before { background: #6b7785; }
.me-contract-status-cancelled::before { background: #b06000; }
.me-assets-empty {
  color: #94a3b8;
  font-size: 13px;
  padding: 28px 12px !important;
  text-align: center;
}

/* ===== Contract form (ME Add Contract parity) ===== */
.me-contract-form {
  padding: 12px 22px 40px;
  max-width: 980px;
}
.me-contract-section { margin: 0 0 8px; }
.me-contract-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #202124;
  margin: 0 0 12px;
}
.me-contract-divider {
  border: 0;
  border-top: 1px dotted #c5c9d0;
  margin: 18px 0;
}
.me-contract-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}
.me-contract-col { display: flex; flex-direction: column; gap: 12px; }
.me-contract-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #3c4043;
  margin-bottom: 4px;
}
.me-contract-field .req { color: #d93025; margin-right: 2px; }
.me-contract-field .form-control,
.me-contract-field .form-select,
.me-contract-field input,
.me-contract-field select,
.me-contract-field textarea {
  width: 100%;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  background: #fff;
}
.me-contract-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.me-contract-inline > .form-select,
.me-contract-inline > select { flex: 1; }
.me-contract-plus-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #1a73e8;
  background: #1a73e8;
  color: #fff;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.me-contract-plus-btn:hover { background: #1557b0; }
.me-contract-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.me-contract-check-row label,
.me-contract-check-row span { margin: 0; font-weight: 500; font-size: 13px; }
.me-contract-help {
  color: #5f6368;
  font-size: 12px;
  cursor: help;
}
.me-contract-asset-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.me-contract-remove-btn { color: #c5221f !important; border-color: #f0c2c0 !important; }
.me-contract-asset-box {
  border: 1px solid #dadce0;
  border-radius: 4px;
  min-height: 140px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  background: #fff;
}
.me-contract-asset-empty {
  color: #9aa0a6;
  font-size: 13px;
  padding: 40px 12px;
  text-align: center;
}
.me-contract-asset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 3px;
}
.me-contract-asset-row:hover { background: #f1f3f4; }
.me-contract-asset-row .muted { color: #80868b; margin-left: auto; font-size: 12px; }
.me-contract-period-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 20px;
  margin-top: 16px;
  max-width: 640px;
}
.me-contract-dates { flex-wrap: wrap; }
.me-contract-sublabel { font-size: 12px; color: #5f6368; white-space: nowrap; }
.me-contract-notify-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}
.me-contract-notify-header .me-contract-section-title { margin: 0; }
.me-contract-hint {
  font-size: 13px;
  color: #3c4043;
  margin: 10px 0 8px;
}
.me-contract-note {
  font-size: 11px;
  color: #80868b;
  margin: 6px 0 14px;
}
.me-contract-dual-list {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.me-contract-list-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.me-contract-listbox {
  width: 100%;
  min-height: 180px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 4px;
  font-size: 12px;
}
.me-contract-dual-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.me-contract-day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.me-contract-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f0fe;
  color: #1967d2;
  border-radius: 12px;
  padding: 3px 8px 3px 10px;
  font-size: 12px;
}
.me-contract-day-chip button {
  border: 0;
  background: transparent;
  color: #1967d2;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.me-contract-form-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 8px;
}
.me-contract-modal {
  width: min(720px, 94vw);
  max-height: 90vh;
  overflow: auto;
}
.me-contract-asset-modal { width: min(860px, 96vw); }
.me-contract-modal-section {
  font-size: 13px;
  font-weight: 700;
  color: #202124;
  margin: 14px 0 10px;
  padding-top: 10px;
  border-top: 1px solid #e8eaed;
}
.me-contract-modal-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.me-contract-span-2 { grid-column: 1 / -1; }
.me-contract-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.me-contract-picker-toolbar .form-select { max-width: 220px; }
.me-contract-picker-toolbar .form-control { flex: 1; min-width: 160px; }
.me-contract-picker-table-wrap {
  max-height: 360px;
  overflow: auto;
  border: 1px solid #e8eaed;
  border-radius: 4px;
}
@media (max-width: 800px) {
  .me-contract-grid-2,
  .me-contract-period-row,
  .me-contract-dual-list {
    grid-template-columns: 1fr;
  }
  .me-contract-dual-actions { flex-direction: row; justify-content: center; }
}

/* Contracts list pagination */
.me-contracts-page-size-label,
.me-contracts-page-size-unit {
  font-size: 12px;
  color: #5f6368;
  white-space: nowrap;
}
.me-assets-pager .me-assets-page-size {
  min-width: 3.4rem;
  height: 28px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  padding: 0 4px;
}
.me-assets-pager .me-contracts-range {
  margin: 0 2px 0 6px;
  font-size: 12px;
  color: #3c4043;
  white-space: nowrap;
}
.me-assets-pager .me-assets-icon-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Assets ME selection + Actions toolbar */
.me-assets-selection-bar {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: 8px;
}
.me-assets-selection-bar[hidden] {
  display: none !important;
}
.me-assets-selected-records {
  color: #1a73e8;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.me-assets-selected-clear {
  align-items: center;
  background: #fff;
  border: 1px solid #f0c2c0;
  border-radius: 3px;
  color: #c5221f;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  width: 28px;
}
.me-assets-selected-clear:hover {
  background: #fce8e6;
}
.me-assets-toolbar-left .me-assets-actions-btn {
  background: #fff;
  border: 1px solid #c5cdd8;
  min-height: 32px;
}
.me-assets-actions-menu {
  left: 0;
  right: auto;
  min-width: 220px;
}

.me-assets-assign-hint {
  background: #e8f0fe;
  border-radius: 4px;
  color: #1967d2;
  font-size: 12px;
  margin: 0 0 12px;
  padding: 8px 10px;
}
.me-assets-check-row {
  align-items: center;
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin: 8px 0;
}
.me-assets-check-row .req,
.me-assets-modal-field .req { color: #d93025; }
.me-assets-modal select:disabled {
  background: #f1f3f4;
  color: #80868b;
}

/* Assets left drawer ? collapsed by default */
.me-assets-nav-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px 6px;
}
.me-assets-nav-collapse,
.me-assets-nav-expand {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  color: #5f6368;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  width: 28px;
}
.me-assets-nav-expand {
  align-self: flex-start;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  flex: 0 0 28px;
  height: 48px;
  margin-top: 12px;
  width: 28px;
}
.me-assets-nav-expand[hidden] {
  display: none !important;
}
.me-assets-page.nav-collapsed .me-assets-nav {
  border-right: 0;
  flex-basis: 0;
  margin: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  width: 0;
}

.me-contract-detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  padding: 16px 18px 28px;
}
@media (max-width: 900px) {
  .me-contract-detail-grid { grid-template-columns: 1fr; }
}

/* System Health admin page */
.me-health-page { display: grid; gap: 1.25rem; }
.me-health-overall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border: 1px solid #d7dde5;
  background: #f7f9fc;
}
.me-health-overall.me-health-ok { border-color: #9fceb0; background: #edf8f1; }
.me-health-overall.me-health-warn { border-color: #e0c47a; background: #fff8e8; }
.me-health-overall.me-health-error { border-color: #e0a0a0; background: #fceded; }
.me-health-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b6775;
}
.me-health-overall h2 { margin: 0 0 0.35rem; font-size: 1.5rem; }
.me-health-run-form {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
}
.me-health-inline-check {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: #44505c;
}
.me-health-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.me-health-card {
  border: 1px solid #d7dde5;
  padding: 0.9rem 1rem;
  background: #fff;
}
.me-health-card header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.45rem;
}
.me-health-card h3 { margin: 0; font-size: 1rem; }
.me-health-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border: 1px solid currentColor;
}
.me-health-ok .me-health-badge,
.me-health-badge.me-health-ok { color: #1f7a45; }
.me-health-warn .me-health-badge,
.me-health-badge.me-health-warn { color: #9a6b00; }
.me-health-error .me-health-badge,
.me-health-badge.me-health-error { color: #b42318; }
.me-health-detail,
.me-health-log pre {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.65rem;
  background: #f4f6f8;
  border: 1px solid #e3e8ee;
  font-size: 0.75rem;
  white-space: pre-wrap;
  max-height: 180px;
  overflow: auto;
}
.me-health-metrics {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0.75rem 0 1rem;
}
.me-health-metrics div {
  border: 1px solid #e3e8ee;
  padding: 0.65rem 0.75rem;
  background: #fafbfc;
}
.me-health-metrics span {
  display: block;
  font-size: 0.75rem;
  color: #5b6775;
  margin-bottom: 0.2rem;
}
.me-health-metrics strong { font-size: 1.05rem; }
.me-health-estimate,
.me-health-stack {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e3e8ee;
}
.me-health-estimate p,
.me-health-stack p { margin: 0.25rem 0; }
.me-health-history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.me-health-history th,
.me-health-history td {
  border-bottom: 1px solid #e3e8ee;
  text-align: left;
  padding: 0.45rem 0.35rem;
  vertical-align: top;
}
.me-health-log { margin-top: 0.65rem; }
.me-health-log summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* ?? ME Helpdesk Customization ????????????????????????????????? */
body.me-helpdesk-custom-page .me-hd-page {
  background: #fff;
  color: #333;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  padding: 12px 18px 28px;
}
body.me-helpdesk-custom-page .me-hd-page-head {
  margin: 0 0 8px;
}
body.me-helpdesk-custom-page .me-hd-page-head h1 {
  color: #444;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}
body.me-helpdesk-custom-page .me-hd-tabs {
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 0 0 14px;
  padding: 0;
}
body.me-helpdesk-custom-page .me-hd-tab {
  border-bottom: 2px solid transparent;
  color: #555;
  font-size: 13px;
  padding: 10px 0 8px;
  text-decoration: none;
  white-space: nowrap;
}
body.me-helpdesk-custom-page .me-hd-tab:hover {
  color: #111;
}
body.me-helpdesk-custom-page .me-hd-tab.is-active {
  border-bottom-color: #008ecf;
  color: #111;
  font-weight: 600;
}
body.me-helpdesk-custom-page .me-hd-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}
body.me-helpdesk-custom-page .me-hd-toolbar-left,
body.me-helpdesk-custom-page .me-hd-toolbar-right {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.me-helpdesk-custom-page .me-hd-filter {
  position: relative;
}
body.me-helpdesk-custom-page .me-hd-filter-btn {
  display: none;
}
body.me-helpdesk-custom-page .me-hd-filter-select {
  background: #fff;
  border: 1px solid #d0d5db;
  border-radius: 3px;
  color: #333;
  font-size: 13px;
  min-width: 150px;
  padding: 6px 10px;
}
body.me-helpdesk-custom-page .me-hd-new-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5db;
  border-radius: 3px;
  color: #444;
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  padding: 6px 12px;
  text-decoration: none;
}
body.me-helpdesk-custom-page .me-hd-new-btn:hover {
  background: #f7f9fb;
  color: #111;
}
body.me-helpdesk-custom-page .me-hd-new-plus {
  align-items: center;
  background: #008ecf;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  line-height: 1;
  width: 18px;
}
body.me-helpdesk-custom-page .me-hd-icon-btn,
body.me-helpdesk-custom-page .me-hd-delete-btn,
body.me-helpdesk-custom-page .me-hd-page-arrow {
  background: #fff;
  border: 1px solid #d0d5db;
  border-radius: 3px;
  color: #555;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 10px;
}
body.me-helpdesk-custom-page .me-hd-delete-btn:disabled,
body.me-helpdesk-custom-page .me-hd-page-arrow:disabled {
  color: #b0b6bf;
  cursor: default;
  opacity: 0.7;
}
body.me-helpdesk-custom-page .me-hd-page-size,
body.me-helpdesk-custom-page .me-hd-range {
  color: #777;
  font-size: 12px;
}
body.me-helpdesk-custom-page .me-hd-search-bar {
  margin-bottom: 8px;
}
body.me-helpdesk-custom-page .me-hd-search-bar input {
  border: 1px solid #d0d5db;
  border-radius: 3px;
  font-size: 13px;
  padding: 7px 10px;
  width: min(360px, 100%);
}
body.me-helpdesk-custom-page .me-hd-table-wrap {
  border-top: 1px solid #eceff3;
  overflow-x: auto;
}
body.me-helpdesk-custom-page .me-hd-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}
body.me-helpdesk-custom-page .me-hd-table th {
  background: #f5f6f8;
  border-bottom: 1px solid #e6e9ee;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 10px 12px;
  text-align: left;
}
body.me-helpdesk-custom-page .me-hd-table td {
  border-bottom: 1px solid #eceff3;
  color: #333;
  padding: 12px;
  vertical-align: middle;
}
body.me-helpdesk-custom-page .me-hd-table tbody tr:hover {
  background: #fafbfd;
}
body.me-helpdesk-custom-page .me-hd-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #008ecf;
}
body.me-helpdesk-custom-page .me-hd-check-col,
body.me-helpdesk-custom-page .me-hd-drag-col {
  width: 36px;
}
body.me-helpdesk-custom-page .me-hd-drag-handle {
  color: #9aa3ad;
  cursor: grab;
  font-size: 14px;
}
body.me-helpdesk-custom-page .me-hd-name-link {
  color: #1f2937;
  font-weight: 600;
  text-decoration: none;
}
body.me-helpdesk-custom-page .me-hd-name-link:hover {
  color: #008ecf;
  text-decoration: underline;
}
body.me-helpdesk-custom-page .me-hd-desc {
  color: #555;
}
body.me-helpdesk-custom-page .me-hd-color-cell {
  align-items: center;
  display: flex;
  gap: 8px;
}
body.me-helpdesk-custom-page .me-hd-color-swatch {
  border: 1px solid #ccc;
  display: inline-block;
  height: 14px;
  width: 14px;
}
body.me-helpdesk-custom-page .me-hd-empty {
  color: #888;
  padding: 24px 12px !important;
  text-align: center;
}
body.me-helpdesk-custom-page .me-hd-form-panel {
  background: #fafbfc;
  border: 1px solid #e6e9ee;
  border-radius: 4px;
  max-width: 560px;
  padding: 18px 20px;
}
body.me-helpdesk-custom-page .me-hd-form-panel h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 14px;
}
body.me-helpdesk-custom-page .me-hd-form label {
  display: block;
  font-size: 13px;
  margin-bottom: 12px;
}
body.me-helpdesk-custom-page .me-hd-input,
body.me-helpdesk-custom-page .me-hd-form input[type="text"],
body.me-helpdesk-custom-page .me-hd-form input[type="number"],
body.me-helpdesk-custom-page .me-hd-form textarea,
body.me-helpdesk-custom-page .me-hd-form select {
  border: 1px solid #d0d5db;
  border-radius: 3px;
  display: block;
  font: inherit;
  margin-top: 4px;
  padding: 7px 10px;
  width: 100%;
}
body.me-helpdesk-custom-page .me-hd-check {
  align-items: center;
  display: flex !important;
  gap: 8px;
}
body.me-helpdesk-custom-page .me-hd-check input {
  margin: 0;
  width: auto;
}
body.me-helpdesk-custom-page .me-hd-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
body.me-helpdesk-custom-page .me-hd-btn {
  background: #fff;
  border: 1px solid #d0d5db;
  border-radius: 3px;
  color: #444;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 14px;
  text-decoration: none;
}
body.me-helpdesk-custom-page .me-hd-btn-primary {
  background: #008ecf;
  border-color: #008ecf;
  color: #fff;
}
body.me-helpdesk-custom-page .me-hd-error {
  color: #c0392b;
  font-size: 12px;
}

/* IT Service Desk-style full request editor. */
.me-request-edit-form-full {
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.me-request-edit-section,
.me-request-edit-reason {
  border-bottom: 1px solid #e6e9ed;
  padding: 18px 22px;
}
.me-request-edit-section h2,
.me-request-edit-reason h2 {
  color: #3e4852;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px;
}
.me-request-edit-grid {
  display: grid;
  gap: 14px 34px;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}
.me-request-edit-form-full .me-wf-field {
  display: grid;
  gap: 5px;
  margin: 0 0 14px;
}
.me-request-edit-form-full .me-wf-field-label {
  color: #555f68;
  font-size: 12px;
  font-weight: 500;
}
.me-request-edit-form-full .me-wf-input,
.me-request-edit-form-full input,
.me-request-edit-form-full select,
.me-request-edit-form-full textarea {
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 2px;
  box-sizing: border-box;
  color: #27313a;
  font: inherit;
  min-height: 34px;
  padding: 7px 9px;
  width: 100%;
}
.me-request-edit-form-full textarea {
  min-height: 90px;
  resize: vertical;
}
.me-request-edit-form-full .me-wf-field small {
  color: #8a9299;
  font-size: 11px;
}
.me-request-edit-reason {
  background: #fbfcfd;
}
.me-request-edit-form-full .me-template-workflow-actions {
  justify-content: center;
  margin: 0;
  padding: 18px 22px;
}
.me-wo-edit-link {
  color: #1496c8;
  text-decoration: none;
}
@media (max-width: 820px) {
  .me-request-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ME Notification Alerts drawer ===== */
.me-notif-bell {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 28px;
}

.me-notif-bell-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Cpath d='M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5'/%3E%3Cpath d='M10 17a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.me-notif-bell-badge {
  align-items: center;
  background: #e53935;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  line-height: 1;
  min-width: 16px;
  padding: 0 4px;
  position: absolute;
  right: -4px;
  top: -4px;
}

.me-notif-bell-badge.is-empty {
  display: none;
}

.me-notif-drawer {
  background: rgba(17, 24, 39, 0.28);
  inset: 0;
  position: fixed;
  z-index: 1300;
}

.me-notif-drawer[hidden] {
  display: none !important;
}

.me-notif-drawer.is-open {
  display: block !important;
}

.me-notif-drawer-panel {
  background: #fff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  max-width: 100%;
  width: 400px;
}

.me-notif-drawer-head {
  align-items: center;
  background: #f3f5f8;
  border-bottom: 1px solid #e4e9ef;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}

.me-notif-drawer-head h2 {
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.me-notif-drawer-head-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.me-notif-mark-all {
  background: none;
  border: 0;
  color: #008ddd;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}

.me-notif-drawer-close {
  background: none;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.me-notif-drawer-filters {
  border-bottom: 1px solid #edf0f4;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  padding: 10px 16px;
}

.me-notif-filter {
  display: grid;
  gap: 4px;
}

.me-notif-filter span {
  color: #6b7785;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.me-notif-filter select,
.me-notif-drawer-search input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 13px;
  padding: 6px 8px;
  width: 100%;
}

.me-notif-drawer-search {
  border-bottom: 1px solid #edf0f4;
  padding: 0 16px 10px;
}

.me-notif-drawer-body {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.me-notif-empty {
  color: #6b7785;
  font-size: 13px;
  padding: 28px 16px;
  text-align: center;
}

.me-notif-swipe {
  background: transparent;
  display: flex;
  flex-shrink: 0;
  min-height: fit-content;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  width: 100%;
}

.me-notif-swipe.is-swiping,
.me-notif-swipe.is-revealed,
.me-notif-swipe.is-dismissing {
  background: #16a34a;
}

.me-notif-swipe-action {
  align-items: center;
  bottom: 0;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: flex-end;
  letter-spacing: 0.02em;
  padding-right: 18px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 120px;
}

.me-notif-swipe.is-swiping .me-notif-item,
.me-notif-swipe.is-dismissing .me-notif-item {
  transition: none;
}

.me-notif-swipe.is-dismissing {
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  opacity: 0.35;
}

.me-notif-item {
  align-items: flex-start;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  padding: 12px 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: transform 0.18s ease;
  width: 100%;
  z-index: 1;
}

.me-notif-mark-one {
  align-self: center;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  margin-right: 12px;
  opacity: 0;
  padding: 6px 10px;
  pointer-events: none;
  position: relative;
  z-index: 2;
  transition: opacity 0.15s ease;
}

.me-notif-swipe.is-unread:hover .me-notif-mark-one,
.me-notif-swipe.is-unread:focus-within .me-notif-mark-one,
.me-notif-item.is-unread:hover .me-notif-mark-one,
.me-notif-item.is-unread:focus-within .me-notif-mark-one {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .me-notif-mark-one {
    display: none;
  }
}

.me-notif-item:hover {
  background: #f7fbff;
}

.me-notif-item.is-unread {
  background: #f3f6f9;
}

.me-notif-item.is-unread .me-notif-item-title {
  font-weight: 700;
}

.me-notif-item-dot {
  background: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  height: 8px;
  margin-top: 6px;
  width: 8px;
}

.me-notif-item.is-unread .me-notif-item-dot {
  background: #008ddd;
}

.me-notif-item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.me-notif-item-title {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.35;
}

.me-notif-item-message,
.me-notif-item-ticket {
  color: #4b5563;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-notif-item-ticket {
  color: #008ddd;
}

.me-notif-item-meta {
  color: #8a94a6;
  display: flex;
  font-size: 11px;
  gap: 10px;
  justify-content: space-between;
  margin-top: 2px;
}

body.me-notif-drawer-open {
  overflow: hidden;
}

/* ===== ME user profile / personalization drawer ===== */
.me-user-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  font: inherit;
  padding: 2px 4px;
}

.me-user-trigger:hover {
  opacity: 0.92;
}

.me-user-trigger-avatar,
.me-user-drawer-avatar {
  background: #d7dde5 center/60% no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a8699'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
  border-radius: 50%;
  flex-shrink: 0;
}

.me-user-trigger-avatar {
  height: 28px;
  width: 28px;
}

.me-user-trigger-name {
  font-size: 13px;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-user-drawer {
  background: rgba(17, 24, 39, 0.28);
  inset: 0;
  position: fixed;
  z-index: 1400;
}

.me-user-drawer[hidden] {
  display: none !important;
}

.me-user-drawer.is-open {
  display: block !important;
}

.me-user-drawer-panel {
  background: #fff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  max-width: 100%;
  overflow: auto;
  padding: 18px 20px 28px;
  position: relative;
  width: 380px;
}

.me-user-drawer-close {
  background: none;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 14px;
  top: 10px;
}

.me-user-drawer-profile {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  padding-right: 24px;
}

.me-user-drawer-avatar {
  height: 64px;
  width: 64px;
}

.me-user-drawer-identity {
  flex: 1;
  min-width: 0;
}

.me-user-drawer-name-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
}

.me-user-drawer-name-row strong {
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
}

.me-user-online-toggle,
.me-user-toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  user-select: none;
}

.me-user-online-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.me-user-online-toggle input,
.me-user-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.me-user-switch {
  background: #c5ccd6;
  border-radius: 999px;
  display: inline-block;
  height: 20px;
  position: relative;
  transition: background 0.15s ease;
  width: 36px;
}

.me-user-switch::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  content: "";
  height: 16px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.15s ease;
  width: 16px;
}

.me-user-online-toggle input:checked + .me-user-switch,
.me-user-toggle input:checked + .me-user-switch {
  background: #2e9e5b;
}

.me-user-online-toggle input:checked + .me-user-switch::after,
.me-user-toggle input:checked + .me-user-switch::after {
  transform: translateX(16px);
}

.me-user-drawer-meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  margin-top: 10px;
}

.me-user-logout {
  align-items: center;
  color: #d64545;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  text-decoration: none;
}

.me-user-logout:hover {
  text-decoration: underline;
}

.me-user-logout-icon {
  background: currentColor;
  display: inline-block;
  height: 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 17v-3H9v-4h7V7l5 5-5 5zM14 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h10v-2H4V4h10V2z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 17v-3H9v-4h7V7l5 5-5 5zM14 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h10v-2H4V4h10V2z'/%3E%3C/svg%3E") center/contain no-repeat;
  width: 14px;
}

.me-user-last-login {
  color: #8a94a6;
  font-size: 11px;
}

.me-user-menu {
  border-top: 1px solid #edf0f4;
  display: flex;
  flex-direction: column;
  margin: 6px 0 10px;
  padding: 6px 0;
}

.me-user-menu-item {
  align-items: center;
  background: none;
  border: 0;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 12px;
  padding: 10px 4px;
  text-align: left;
  width: 100%;
}

.me-user-menu-item:hover {
  background: #f7fbff;
  color: var(--me-link, #008ddd);
}

.me-user-menu-icon {
  background: #6b7785;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.me-user-icon-sliders {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.me-user-icon-lock {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.8-2.2-5-5-5S7 3.2 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.8-2.2-5-5-5S7 3.2 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.me-user-icon-tone {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.me-user-icon-token {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v2H4V5zm0 6h10v2H4v-2zm0 6h16v2H4v-2zm14-7h2v2h-2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v2H4V5zm0 6h10v2H4v-2zm0 6h16v2H4v-2zm14-7h2v2h-2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.me-user-panel,
.me-user-personalize {
  border-top: 1px solid #edf0f4;
  margin-top: 4px;
  padding-top: 14px;
}

.me-user-panel h3,
.me-user-personalize h3 {
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}

.me-user-field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.me-user-field-inline {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.me-user-field-label,
.me-user-field > span:first-child {
  color: #5b6573;
  font-size: 13px;
  font-weight: 700;
}

.me-user-field select,
.me-user-form input[type="password"] {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font-size: 13px;
  padding: 7px 8px;
  width: 100%;
}

.me-tone-row {
  align-items: center;
  border-bottom: 1px solid #edf0f4;
  border-top: 1px solid #edf0f4;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 150px;
  margin: 14px 0;
  padding: 14px 0;
}

.me-tone-row > label {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.me-tone-control {
  align-items: center;
  display: flex;
  gap: 6px;
}

.me-tone-control select {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  flex: 1;
  height: 34px;
  min-width: 0;
  padding: 0 8px;
}

.me-tone-play {
  align-items: center;
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.me-tone-play:hover {
  background: #eef7fd;
  border-color: var(--me-link, #008ddd);
}

.me-tone-play span {
  background: var(--me-link, #008ddd);
  clip-path: polygon(18% 8%, 92% 50%, 18% 92%);
  display: block;
  height: 14px;
  width: 14px;
}

.me-user-form-msg.is-error {
  color: #b42318;
}

body.me-night-mode .me-tone-row {
  border-color: #3c4655;
}

body.me-night-mode .me-tone-row > label {
  color: #e5e7eb;
}

body.me-night-mode .me-tone-control select,
body.me-night-mode .me-tone-play {
  background: #252d38;
  border-color: #4b5563;
  color: #f3f4f6;
}

.me-user-nav-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.me-user-radio {
  align-items: center;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
}

.me-user-radio input {
  accent-color: var(--me-link, #008ddd);
}

.me-user-color-row {
  align-items: center;
  display: flex;
  gap: 12px;
}

.me-user-swatches {
  display: flex;
  gap: 8px;
}

.me-user-swatch {
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  height: 28px;
  position: relative;
  width: 28px;
}

.me-user-swatch.is-selected::after {
  color: #fff;
  content: "\2713";
  font-size: 14px;
  font-weight: 700;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -52%);
}

.me-swatch-green { background: #2e9e5b; }
.me-swatch-red { background: #d64545; }
.me-swatch-blue { background: #008ddd; }
.me-swatch-purple { background: #7b68c5; }

.me-user-reset-btn,
.me-user-link-btn {
  background: none;
  border: 0;
  color: var(--me-link, #008ddd);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}

.me-user-help {
  color: #8a94a6;
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.me-user-a11y-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.me-user-a11y-head strong {
  color: #1f2937;
  font-size: 13px;
}

.me-user-a11y-config {
  background: #f7f9fc;
  border: 1px solid #edf0f4;
  margin-top: 10px;
  padding: 12px;
}

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

.me-user-form label {
  color: #5b6573;
  display: grid;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
}

.me-user-primary-btn {
  background: var(--me-link, #008ddd);
  border: 0;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  width: fit-content;
}

.me-user-form-msg {
  font-size: 12px;
  margin: 0;
}

.me-user-form-msg.is-error { color: #d64545; }
.me-user-form-msg.is-ok { color: #2e9e5b; }

.me-user-token-box {
  align-items: center;
  background: #f3f5f8;
  border: 1px solid #e4e9ef;
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
}

.me-user-token-box code {
  flex: 1;
  font-size: 12px;
  overflow-wrap: anywhere;
}

body.me-user-drawer-open {
  overflow: hidden;
}

body.me-color-green {
  --me-link: #2e9e5b;
  --accent: #2e9e5b;
  --me-blue: #2e9e5b;
}

body.me-color-red {
  --me-link: #d64545;
  --accent: #d64545;
  --me-blue: #d64545;
}

body.me-color-blue {
  --me-link: #008ddd;
  --accent: #008ddd;
  --me-blue: #008ddd;
}

body.me-color-purple {
  --me-link: #7b68c5;
  --accent: #7b68c5;
  --me-blue: #7b68c5;
}

body.me-night-mode {
  background: #12151a;
  color: #e5e7eb;
}

body.me-night-mode main,
body.me-night-mode .subnav {
  background: #1a1f27;
  color: #e5e7eb;
}

body.me-night-mode .me-user-drawer-panel {
  background: #1f2430;
  color: #e5e7eb;
}

body.me-night-mode .me-user-drawer-name-row strong,
body.me-night-mode .me-user-menu-item,
body.me-night-mode .me-user-panel h3,
body.me-night-mode .me-user-personalize h3,
body.me-night-mode .me-user-a11y-head strong {
  color: #f3f4f6;
}

body.me-a11y-contrast {
  filter: contrast(1.12);
}

.me-a11y-footer {
  align-items: center;
  background: #1f2329;
  bottom: 0;
  color: #fff;
  display: flex;
  gap: 18px;
  left: 0;
  padding: 8px 16px;
  position: fixed;
  right: 0;
  z-index: 1200;
}

.me-a11y-footer[hidden] {
  display: none !important;
}

.me-a11y-footer label {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  gap: 8px;
}

body.me-a11y-footer-on main {
  padding-bottom: 48px;
}

/* Sidebar / Sidebar Lite navigation layouts */
body.me-nav-sidebar,
body.me-nav-sidebar_lite {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
}

body.me-nav-sidebar_lite {
  grid-template-columns: 72px minmax(0, 1fr);
}

body.me-nav-sidebar .topbar,
body.me-nav-sidebar_lite .topbar {
  align-content: start;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1 / -1;
  height: 100vh;
  overflow: auto;
  padding: 12px 10px;
  position: sticky;
  top: 0;
  width: auto;
}

body.me-nav-sidebar .topbar nav,
body.me-nav-sidebar_lite .topbar nav,
body.me-nav-sidebar .top-actions,
body.me-nav-sidebar_lite .top-actions {
  align-items: stretch;
  flex-direction: column;
  margin-left: 0;
  width: 100%;
}

body.me-nav-sidebar .topbar nav a,
body.me-nav-sidebar_lite .topbar nav a,
body.me-nav-sidebar .top-actions > a,
body.me-nav-sidebar_lite .top-actions > a {
  border-radius: 4px;
  display: block;
  padding: 8px 10px;
}

body.me-nav-sidebar .brand,
body.me-nav-sidebar_lite .brand {
  font-size: 14px;
  margin: 8px 0 12px;
  white-space: normal;
}

body.me-nav-sidebar_lite .brand,
body.me-nav-sidebar_lite .me-user-trigger-name,
body.me-nav-sidebar_lite .user-role-badge,
body.me-nav-sidebar_lite .top-actions > a {
  display: none;
}

body.me-nav-sidebar .subnav,
body.me-nav-sidebar_lite .subnav,
body.me-nav-sidebar main,
body.me-nav-sidebar_lite main,
body.me-nav-sidebar .me-a11y-footer,
body.me-nav-sidebar_lite .me-a11y-footer {
  grid-column: 2;
}

body.me-nav-sidebar .me-user-drawer,
body.me-nav-sidebar_lite .me-user-drawer,
body.me-nav-sidebar .me-notif-drawer,
body.me-nav-sidebar_lite .me-notif-drawer {
  grid-column: 1 / -1;
}

/* IT Service Desk-style Personalize window */
.me-personalize-modal {
  align-items: center;
  background: rgba(15, 23, 42, 0.46);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1500;
}

.me-personalize-modal[hidden] {
  display: none !important;
}

.me-personalize-window {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.3);
  max-height: calc(100vh - 40px);
  min-height: 520px;
  overflow: auto;
  padding: 24px 20px 40px;
  position: relative;
  width: min(950px, calc(100vw - 40px));
}

.me-personalize-close {
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: 12px;
}

.me-personalize-tabs {
  border-bottom: 1px solid #d9dee5;
  display: flex;
  gap: 2px;
  margin-bottom: 28px;
  padding-left: 16px;
}

.me-personalize-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #273444;
  cursor: pointer;
  font-size: 14px;
  padding: 12px 15px 11px;
}

.me-personalize-tabs button.active {
  border-bottom-color: var(--me-link, #008ddd);
  color: var(--me-link, #008ddd);
}

.me-personalize-tab-panel {
  padding: 0 28px;
}

.me-personalize-tab-panel h3 {
  border-bottom: 1px solid #d9dee5;
  color: #1f2937;
  font-size: 14px;
  margin: 0 0 18px;
  padding: 3px 0 10px;
}

.me-personalize-form {
  display: grid;
  gap: 16px;
  max-width: 540px;
}

.me-personalize-form > label {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 160px minmax(0, 380px);
}

.me-personalize-form > label > span {
  color: #475569;
  font-size: 14px;
  text-align: right;
}

.me-personalize-form select,
.me-personalize-form input {
  background: #fff;
  border: 1px solid #aeb8c5;
  border-radius: 3px;
  color: #1f2937;
  font: inherit;
  height: 34px;
  padding: 5px 10px;
  width: 100%;
}

.me-personalize-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-left: 174px;
  margin-top: 2px;
}

.me-personalize-password-form > label > span i {
  color: #dc2626;
  font-style: normal;
}

body.me-night-mode .me-personalize-window {
  background: #111;
  border-color: #3f4650;
  color: #e5e7eb;
}

body.me-night-mode .me-personalize-tabs,
body.me-night-mode .me-personalize-tab-panel h3 {
  border-color: #343a42;
}

body.me-night-mode .me-personalize-tabs button,
body.me-night-mode .me-personalize-tab-panel h3,
body.me-night-mode .me-personalize-form > label > span {
  color: #e5e7eb;
}

body.me-night-mode .me-personalize-tabs button.active {
  color: #39b9ff;
}

body.me-night-mode .me-personalize-form select,
body.me-night-mode .me-personalize-form input {
  background: #111;
  border-color: #4b515a;
  color: #e5e7eb;
}

@media (max-width: 680px) {
  .me-personalize-window {
    min-height: 0;
  }

  .me-personalize-tab-panel {
    padding: 0;
  }

  .me-personalize-form > label {
    align-items: stretch;
    gap: 6px;
    grid-template-columns: 1fr;
  }

  .me-personalize-form > label > span {
    text-align: left;
  }

  .me-personalize-actions {
    margin-left: 0;
  }
}

/* ===== ME Regions admin (Service Desk Configuration) ===== */
.me-regions-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  margin: 8px 0 14px;
}

.me-regions-toolbar-icons {
  display: inline-flex;
  gap: 8px;
}

.me-regions-tool-icon {
  align-items: center;
  background: #f3f5f8;
  border: 1px solid #d5dbe3;
  border-radius: 3px;
  color: #64748b;
  display: inline-flex;
  font-size: 13px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.me-regions-tool-icon.is-disabled {
  opacity: 0.45;
}

.me-regions-pager {
  color: #64748b;
  font-size: 12px;
  margin-left: auto;
}

.me-regions-table .check-col {
  width: 36px;
}

.me-regions-table .actions-menu-col {
  width: 40px;
}

.me-region-row-menu,
.me-region-name-btn {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.me-region-name-btn {
  color: var(--me-link, #008ddd);
  font-weight: 600;
}

.me-region-drawer {
  background: rgba(17, 24, 39, 0.28);
  inset: 0;
  position: fixed;
  z-index: 1400;
}

.me-region-drawer[hidden] {
  display: none !important;
}

.me-region-drawer-panel {
  background: #fff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  max-width: 100%;
  overflow: auto;
  width: 420px;
}

.me-region-drawer-head {
  align-items: center;
  border-bottom: 1px solid #e4e9ef;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.me-region-drawer-head h2 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.me-region-drawer-close {
  background: none;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.me-region-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 24px;
}

.me-region-field {
  display: grid;
  gap: 6px;
}

.me-region-field > span,
.me-region-role-row label > span {
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.me-region-field > span i {
  color: #dc2626;
  font-style: normal;
}

.me-region-field input,
.me-region-field textarea,
.me-region-role-row select {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}

.me-region-org-roles {
  border-top: 1px solid #edf0f4;
  margin-top: 4px;
  padding-top: 14px;
}

.me-region-org-roles h3 {
  color: #1f2937;
  font-size: 14px;
  margin: 0 0 12px;
}

.me-region-role-rows {
  display: grid;
  gap: 12px;
}

.me-region-role-row {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr auto;
}

.me-region-role-row label {
  display: grid;
  gap: 4px;
}

.me-region-row-actions {
  display: inline-flex;
  gap: 4px;
  padding-bottom: 2px;
}

.me-region-row-btn {
  background: #f3f5f8;
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  color: #334155;
  cursor: pointer;
  font-size: 16px;
  height: 32px;
  line-height: 1;
  width: 32px;
}

.me-region-drawer-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

body.me-region-drawer-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .me-region-drawer-panel {
    width: 100%;
  }

  .me-region-role-row {
    grid-template-columns: 1fr;
  }
}

/* ===== ME Operational Hours admin ===== */
.me-ophours-desc {
  color: #6b7785;
  font-size: 12px;
  margin-top: 2px;
}

.me-ophours-drawer {
  background: rgba(17, 24, 39, 0.28);
  inset: 0;
  position: fixed;
  z-index: 1400;
}

.me-ophours-drawer[hidden] {
  display: none !important;
}

.me-ophours-drawer-panel {
  background: #fff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  max-width: 100%;
  overflow: auto;
  width: min(560px, 100%);
}

.me-ophours-drawer-head {
  align-items: center;
  border-bottom: 1px solid #e4e9ef;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.me-ophours-drawer-head h2 {
  font-size: 16px;
  margin: 0;
}

.me-ophours-close {
  background: none;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
}

.me-ophours-form {
  display: grid;
  gap: 14px;
  padding: 16px 18px 28px;
}

.me-ophours-field {
  display: grid;
  gap: 6px;
}

.me-ophours-field > span i {
  color: #dc2626;
  font-style: normal;
}

.me-ophours-field input,
.me-ophours-field textarea,
.me-ophours-field select,
.me-ophours-time-row input,
.me-ophours-day-custom-fields input,
.me-ophours-break-row input {
  border: 1px solid #c5d0dc;
  border-radius: 2px;
  font: inherit;
  padding: 7px 9px;
  width: 100%;
}

.me-ophours-mode {
  border: 1px solid #edf0f4;
  border-radius: 4px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.me-ophours-mode legend {
  font-weight: 700;
  padding: 0 4px;
}

.me-ophours-radio {
  align-items: center;
  display: flex;
  gap: 8px;
}

.me-ophours-time-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.me-ophours-time-row label,
.me-ophours-breaks,
.me-ophours-days,
.me-ophours-applies {
  display: grid;
  gap: 8px;
}

.me-ophours-breaks-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.me-ophours-break-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto 1fr auto;
}

.me-ophours-day-row {
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  display: grid;
  gap: 8px;
  grid-template-columns: 140px 120px 1fr;
  padding: 6px 0;
}

.me-ophours-day-custom-fields {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.me-ophours-default {
  align-items: center;
  display: flex;
  gap: 8px;
}

.me-ophours-footer {
  display: flex;
  gap: 8px;
}

body.me-ophours-drawer-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .me-ophours-day-row,
  .me-ophours-time-row {
    grid-template-columns: 1fr;
  }
}

/* ===== ME My Pending Approvals drawer ===== */
.me-approvals-btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 28px;
}

.me-approvals-btn-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.me-approvals-btn-badge {
  align-items: center;
  background: #e53935;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  line-height: 1;
  min-width: 16px;
  padding: 0 4px;
  position: absolute;
  right: -4px;
  top: -4px;
}

.me-approvals-btn-badge.is-empty {
  display: none;
}

.me-approvals-drawer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1200;
}

.me-approvals-drawer[hidden] {
  display: none !important;
}

.me-approvals-drawer.is-open {
  display: block;
}

.me-approvals-drawer::before {
  background: rgba(20, 28, 40, 0.35);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.me-approvals-drawer-panel {
  background: #fff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  max-width: 100%;
  position: relative;
  width: 420px;
  z-index: 1;
}

.me-approvals-drawer-head {
  align-items: center;
  border-bottom: 1px solid #e6ebf0;
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
}

.me-approvals-drawer-head h2 {
  color: #1f2329;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.me-approvals-drawer-close {
  background: transparent;
  border: 0;
  color: #667788;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 0 4px;
}

.me-approvals-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 12px 0;
}

.me-approvals-empty {
  align-items: center;
  color: #7a8694;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-height: 320px;
  padding: 24px;
  text-align: center;
}

.me-approvals-empty p {
  font-size: 15px;
  margin: 0;
}

.me-approvals-empty-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Cellipse cx='80' cy='96' rx='48' ry='10' fill='%23eef3f8'/%3E%3Ccircle cx='80' cy='54' r='34' fill='%23f4f8fc' stroke='%23c9d6e4' stroke-width='2'/%3E%3Cpath d='M66 54l10 10 18-20' fill='none' stroke='%232b78d4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='48' cy='30' r='6' fill='%23f7d6e0'/%3E%3Ccircle cx='118' cy='38' r='4' fill='%23e45757'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 120px;
  width: 160px;
}

.me-approvals-item {
  align-items: flex-start;
  border-bottom: 1px solid #eef2f6;
  color: inherit;
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  text-decoration: none;
}

.me-approvals-item:hover {
  background: #f5f8fb;
  text-decoration: none;
}

.me-approvals-item-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b78d4' stroke-width='1.8'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  flex: 0 0 20px;
  height: 20px;
  margin-top: 2px;
  width: 20px;
}

.me-approvals-item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.me-approvals-item-title {
  color: #1f2329;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.me-approvals-item-meta {
  color: #7a8694;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px;
}

body.me-approvals-drawer-open {
  overflow: hidden;
}

body.me-nav-sidebar .me-approvals-drawer,
body.me-nav-sidebar_lite .me-approvals-drawer {
  z-index: 1300;
}

/* Attachment Settings (ME General Settings) */
.me-attach-settings-form .me-attach-settings-panel {
  background: #fff;
  border: 0;
  box-shadow: none;
  padding: 8px 4px 24px;
}

.me-attach-settings-rows {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 980px;
}

.me-attach-settings-row {
  align-items: flex-start;
  display: grid;
  gap: 16px 28px;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}

.me-attach-settings-label {
  color: #3d4652;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  padding-top: 8px;
}

.me-attach-settings-control {
  min-width: 0;
}

.me-attach-size-input {
  max-width: 88px;
  width: 88px;
}

.me-attach-path-line {
  align-items: center;
  display: flex;
  gap: 10px;
}

.me-attach-path-input {
  flex: 1;
  min-width: 0;
}

.me-attach-reset-btn {
  flex-shrink: 0;
}

.me-attach-radio-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding-top: 6px;
}

.me-attach-radio {
  align-items: center;
  color: #3d4652;
  display: inline-flex;
  font-size: 14px;
  font-weight: 400;
  gap: 6px;
}

.me-attach-radio input {
  margin: 0;
}

.me-attach-ext-box {
  background: #f7f9fb;
  border: 1px solid #d9e2ec;
  border-radius: 4px;
  margin-top: 12px;
  padding: 12px 14px;
}

.me-attach-ext-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 28px;
}

.me-attach-ext-chip {
  align-items: center;
  background: #fff;
  border: 1px solid #c5d0db;
  border-radius: 3px;
  color: #3d4652;
  display: inline-flex;
  font-size: 13px;
  gap: 4px;
  padding: 3px 8px;
}

.me-attach-ext-remove {
  background: transparent;
  border: 0;
  color: #6b7785;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}

.me-attach-ext-remove:hover {
  color: #c0392b;
}

.me-attach-ext-empty {
  color: #6b7785;
  font-size: 13px;
}

.me-attach-ext-add {
  background: transparent;
  border: 0;
  color: #2b78d4;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.me-attach-ext-add:hover {
  text-decoration: underline;
}

.me-attach-ext-add-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.me-attach-ext-add-row input {
  max-width: 180px;
}

.me-attach-note {
  align-items: flex-start;
  color: #52606d;
  display: flex;
  font-size: 13px;
  gap: 8px;
  line-height: 1.45;
  margin: 10px 0 0;
}

.me-attach-note-icon {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  margin-top: 1px;
  width: 16px;
}

.me-attach-note-warn .me-attach-note-icon {
  background: #e67e22;
}

.me-attach-note-info .me-attach-note-icon {
  background: #2b78d4;
}

.me-attach-settings-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  max-width: 980px;
}

@media (max-width: 900px) {
  .me-attach-settings-row {
    grid-template-columns: 1fr;
  }

  .me-attach-settings-label {
    padding-top: 0;
  }
}

/* IT Service Desk-style Backup Scheduling */
.me-backup-page {
  color: #3d4652;
}

.me-backup-summary {
  align-items: center;
  border-bottom: 1px solid #e1e6eb;
  border-top: 1px solid #e1e6eb;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr auto;
  margin-bottom: 18px;
  padding: 12px 20px;
}

.me-backup-summary > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.me-backup-summary span {
  color: #6b7785;
  font-size: 12px;
}

.me-backup-summary strong {
  font-size: 13px;
}

.me-backup-summary a {
  color: #1689c8 !important;
  font-size: 12px;
  text-decoration: none;
}

.me-backup-edit {
  border: 1px solid #e1e6eb;
  margin-bottom: 20px;
}

.me-backup-edit > h2,
.me-backup-list-actions {
  background: #f5f6f7;
  border-bottom: 1px solid #e1e6eb;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  padding: 9px 12px;
}

.me-backup-form {
  margin: 0 auto;
  max-width: 850px;
  padding: 20px 24px;
}

.me-backup-form-row {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 250px minmax(0, 1fr);
  margin-bottom: 16px;
}

.me-backup-form-row > label,
.me-backup-label {
  font-size: 13px;
  font-weight: 600;
  padding-top: 8px;
  text-align: right;
}

.me-backup-form-row input[type="text"],
.me-backup-form-row input[type="email"],
.me-backup-form-row input[type="password"] {
  max-width: 430px;
  width: 100%;
}

.me-backup-form-row input[type="number"] {
  max-width: 90px;
}

.me-backup-form-row input[type="time"] {
  width: 120px;
}

.me-backup-inline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.me-backup-check {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  font-weight: 400;
  gap: 5px;
}

.me-backup-form-row small {
  color: #788592;
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 5px;
}

.me-backup-link-button,
.me-backup-icon-button {
  background: transparent;
  border: 0;
  color: #1689c8;
  cursor: pointer;
  font: inherit;
  padding: 3px;
}

.me-backup-link-button:hover,
.me-backup-icon-button:hover {
  text-decoration: underline;
}

.me-backup-help-dot {
  align-items: center;
  background: #1689c8;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  height: 15px;
  justify-content: center;
  width: 15px;
}

.me-backup-form-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 6px 0 0 266px;
}

.me-backup-list {
  border: 1px solid #e1e6eb;
}

.me-backup-list-actions h2 {
  font-size: 13px;
  margin: 0;
}

.me-backup-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.me-backup-table th {
  background: #f8f9fa;
  border-bottom: 1px solid #dfe5eb;
  color: #5d6874;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
}

.me-backup-table td {
  border-bottom: 1px solid #edf0f2;
  padding: 10px;
  vertical-align: top;
}

.me-backup-table td:first-child strong,
.me-backup-table td:first-child a {
  display: block;
  font-weight: 600;
}

.me-backup-table td small {
  color: #7b8794;
  display: block;
  margin-top: 3px;
}

.me-backup-status {
  font-weight: 600;
  text-transform: uppercase;
}

.me-backup-status-ok {
  color: #238636;
}

.me-backup-status-failed {
  color: #c0392b;
}

.me-backup-status-running {
  color: #b26a00;
}

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

.me-backup-actions form {
  margin: 0;
}

.me-backup-icon-button.danger {
  color: #c0392b;
}

.me-backup-revealed {
  background: #fff7d6;
  padding: 2px 4px;
}

.me-backup-empty {
  color: #7b8794;
  padding: 24px !important;
  text-align: center;
}

.me-backup-scheduler-note {
  color: #6b7785;
  font-size: 11px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .me-backup-summary {
    grid-template-columns: 1fr;
  }

  .me-backup-form-row {
    grid-template-columns: 1fr;
  }

  .me-backup-form-row > label,
  .me-backup-label {
    padding-top: 0;
    text-align: left;
  }

  .me-backup-form-actions {
    padding-left: 0;
  }
}

/* IT Service Desk Security Settings */
.me-security-page {
  color: #3d4652;
}

.me-security-meter {
  align-items: center;
  border: 1px solid #dfe5eb;
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 18px;
}

.me-security-meter-score {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 84px;
  justify-content: center;
  min-width: 84px;
  width: 84px;
}

.me-security-meter-unsecured .me-security-meter-score { background: #c0392b; }
.me-security-meter-weak .me-security-meter-score { background: #d68910; }
.me-security-meter-moderate .me-security-meter-score { background: #2b78d4; }
.me-security-meter-high .me-security-meter-score { background: #1e8449; }

.me-security-meter-score strong {
  font-size: 22px;
  line-height: 1;
}

.me-security-meter-score span {
  font-size: 10px;
  margin-top: 4px;
  text-align: center;
}

.me-security-meter-copy h2 {
  font-size: 16px;
  margin: 0 0 4px;
}

.me-security-meter-copy p {
  color: #6b7785;
  font-size: 13px;
  margin: 0;
}

.me-security-panel {
  border: 1px solid #e1e6eb;
  margin-bottom: 16px;
  padding: 14px 18px 18px;
}

.me-security-panel > h2 {
  border-bottom: 1px solid #edf0f2;
  font-size: 14px;
  margin: 0 0 14px;
  padding-bottom: 8px;
}

.me-security-grid {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 12px;
}

.me-security-grid label,
.me-security-block {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.me-security-grid input,
.me-security-block textarea {
  display: block;
  font-weight: 400;
  margin-top: 6px;
  max-width: 100%;
  width: 100%;
}

.me-security-check {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  margin: 8px 0;
}

.me-security-checks {
  display: grid;
  gap: 4px;
}

.me-security-help,
.me-security-grid small {
  color: #6b7785;
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
}

.me-security-configs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-security-configs li {
  align-items: center;
  border-bottom: 1px solid #edf0f2;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 8px 0;
}

.me-security-configs li.on strong { color: #1e8449; }
.me-security-configs li.off strong { color: #c0392b; }

.me-security-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ?? Notification Rules (ME Automation parity) ?? */
.me-nrules-page {
  margin: 0 auto;
  max-width: 980px;
}

.me-nrules-tabs {
  border-bottom: 1px solid #d5dde5;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 14px;
}

.me-nrules-tab {
  border-bottom: 2px solid transparent;
  color: #334155;
  font-size: 13px;
  padding: 10px 14px;
  text-decoration: none;
}

.me-nrules-tab:hover {
  color: #0b5fff;
}

.me-nrules-tab.active {
  border-bottom-color: #0b5fff;
  color: #0b5fff;
  font-weight: 600;
}

.me-nrules-format {
  color: #475569;
  font-size: 13px;
  margin: 0 0 18px;
}

.me-nrules-format-link {
  color: #0b5fff;
  text-decoration: none;
}

.me-nrules-section {
  margin-bottom: 22px;
}

.me-nrules-section-head {
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.me-nrules-section-head h2 {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.me-nrules-history {
  color: #64748b;
  cursor: default;
  font-size: 12px;
}

.me-nrules-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-nrules-row {
  align-items: flex-start;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 4px;
}

.me-nrules-check {
  align-items: flex-start;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  flex: 1;
  font-size: 13px;
  gap: 10px;
  line-height: 1.45;
}

.me-nrules-check input {
  margin-top: 2px;
}

.me-nrules-customize {
  color: #0b5fff;
  flex-shrink: 0;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.me-nrules-customize:hover {
  text-decoration: underline;
}

.me-nrules-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 24px;
}

.me-nrules-stub {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
  padding: 18px 20px;
}

.me-nrules-template-page {
  margin: 0 auto;
  max-width: 860px;
}

.me-nrules-template-title {
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 18px;
}

.me-nrules-template-form {
  display: grid;
  gap: 16px;
}

.me-nrules-field {
  display: grid;
  gap: 6px;
}

.me-nrules-field > span,
.me-nrules-message-head span:first-child {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}

.me-nrules-message-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.me-nrules-var-hint {
  color: #64748b;
  font-size: 12px;
  font-weight: 400 !important;
}

.me-nrules-field input[type="text"] {
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
}

.me-nrules-editor {
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  overflow: hidden;
}

.me-nrules-editor .me-nrules-rte-toolbar {
  border: 0;
  border-bottom: 1px solid #dce3ec;
  border-radius: 0;
}

.me-nrules-editor .me-nrules-body,
.me-nrules-editor .me-rte-textarea {
  border: 0;
  border-radius: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  min-height: 280px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.me-rte-select {
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  color: #4a5568;
  font-size: 12px;
  max-width: 120px;
  min-height: 28px;
  padding: 3px 6px;
}

.me-rte-color {
  align-items: center;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 2px;
  color: #4a5568;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  gap: 0;
  line-height: 1;
  min-width: 28px;
  padding: 2px 4px 1px;
  position: relative;
}

.me-rte-color input[type="color"] {
  border: 0;
  cursor: pointer;
  height: 14px;
  padding: 0;
  width: 22px;
}

.me-rte-color-bg span {
  background: linear-gradient(transparent 60%, #ffe566 60%);
}

.me-nrules-body {
  min-height: 280px;
  resize: vertical;
}

.me-nrules-vars {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  font-size: 12px;
  padding: 8px 12px;
}

.me-nrules-vars summary {
  cursor: pointer;
  font-weight: 600;
}

.me-nrules-vars ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.me-nrules-vars li {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 4px 0;
}

.me-nrules-var-btn {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 3px;
  color: #1d4ed8;
  cursor: pointer;
  font-family: Consolas, monospace;
  font-size: 12px;
  padding: 2px 8px;
}

.me-nrules-var-btn:hover {
  background: #dbeafe;
}

.me-nrules-empty {
  color: #94a3b8;
  font-size: 13px;
  padding: 12px 4px;
}


/* Encoding-safe close icons (SVG instead of unicode times) */
.me-notif-drawer-close,
.me-approvals-drawer-close,
.me-user-drawer-close,
.me-personalize-close {
  align-items: center;
  background: transparent;
  border: 0;
  color: transparent;
  cursor: pointer;
  display: inline-flex;
  font-size: 0;
  height: 28px;
  justify-content: center;
  line-height: 0;
  position: relative;
  width: 28px;
}
.me-notif-drawer-close::before,
.me-approvals-drawer-close::before,
.me-user-drawer-close::before,
.me-personalize-close::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  content: "";
  display: block;
  height: 16px;
  width: 16px;
}

/* ===== ME Request Print Preview ===== */
body.me-print-preview-page {
  background: #e8eef5;
  color: #1f2937;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.me-print-preview {
  margin: 0 auto;
  max-width: 980px;
  padding: 12px 16px 28px;
}
.me-print-toolbar {
  align-items: center;
  background: #fff;
  border: 1px solid #d5dde8;
  border-radius: 4px 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 10px 14px;
}
.me-print-toolbar-title {
  color: #111827;
  font-size: 14px;
  white-space: nowrap;
}
.me-print-section-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.me-print-section-toggles label {
  align-items: center;
  color: #334155;
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  white-space: nowrap;
}
.me-print-section-toggles input {
  accent-color: #c5221f;
}
.me-print-doc {
  background: #fff;
  border: 1px solid #d5dde8;
  border-top: 0;
  padding: 18px 22px 28px;
}
.me-print-doc-title-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
}
.me-print-doc-title-row h1 {
  color: #1a56a8;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.me-print-ticket-icon {
  background: #c5221f;
  border-radius: 2px;
  display: inline-block;
  height: 12px;
  margin-right: 6px;
  vertical-align: middle;
  width: 10px;
}
.me-print-view-details {
  color: #c5221f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.me-print-doc-meta {
  align-items: center;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px 10px;
  margin-top: 8px;
}
.me-print-meta-sep { color: #94a3b8; }
.me-print-due.is-overdue { color: #c5221f; font-weight: 600; }
.me-print-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.me-print-badge {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  color: #334155;
  font-size: 12px;
  padding: 3px 8px;
}
.me-print-badge em {
  color: #c5221f;
  font-style: normal;
  font-weight: 700;
}
.me-print-block { margin-top: 18px; }
.me-print-block > h2 {
  border-bottom: 1px solid #cbd5e1;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 6px;
}
.me-print-section-bar {
  background: #edf2f7;
  border-bottom: 0 !important;
  font-size: 13px !important;
  margin: 0 0 12px !important;
  padding: 8px 10px !important;
}
.me-print-block h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
}
.me-print-description {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.me-print-props {
  display: grid;
  gap: 6px 18px;
  grid-template-columns: 1fr 1fr;
}
.me-print-prop {
  display: grid;
  gap: 10px;
  grid-template-columns: 150px 1fr;
  min-height: 20px;
}
.me-print-prop-label {
  color: #64748b;
  font-size: 12px;
  text-align: right;
}
.me-print-prop-value {
  color: #111827;
  font-size: 12px;
  word-break: break-word;
}
.me-print-empty {
  color: #94a3b8;
  font-size: 13px;
  margin: 0;
}
.me-print-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.me-print-timeline li {
  border-bottom: 1px solid #eef2f6;
  padding: 10px 0;
}
.me-print-timeline li:last-child { border-bottom: 0; }
.me-print-timeline-meta {
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px 10px;
  margin-bottom: 4px;
}
.me-print-timeline-meta strong { color: #1f2937; }
.me-print-private {
  background: #fef3c7;
  border-radius: 3px;
  color: #92400e;
  font-size: 11px;
  padding: 1px 6px;
}
.me-print-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}
.me-print-btn-primary,
.me-print-btn-secondary {
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-width: 88px;
  padding: 8px 18px;
}
.me-print-btn-primary {
  background: #c5221f;
  color: #fff;
}
.me-print-btn-secondary {
  background: #6b7280;
  color: #fff;
}
@media print {
  body.me-print-preview-page { background: #fff; }
  .me-print-preview { max-width: none; padding: 0; }
  .me-print-doc { border: 0; padding: 0; }
  .no-print { display: none !important; }
  .me-print-section[hidden] { display: none !important; }
}

/* Request for cancellation (IT Service Desk parity) */
.me-cancel-banner {
  align-items: flex-start;
  background: #fff8e6;
  border: 1px solid #f0d78c;
  border-radius: 4px;
  color: #5c4a00;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 12px 14px;
}
.me-cancel-banner-tech {
  background: #fff4e5;
  border-color: #f5c26b;
}
.me-cancel-banner-main {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
}
.me-cancel-banner-main strong {
  display: inline-block;
  margin-right: 4px;
}
.me-cancel-banner-reason {
  margin-top: 6px;
}
.me-cancel-banner-prompt {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.me-cancel-inline-form {
  display: inline;
  margin: 0;
}
.me-cancel-yes,
.me-cancel-no,
.me-cancel-revoke {
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
}
.me-cancel-yes {
  background: #2e7d32;
  color: #fff;
}
.me-cancel-no {
  background: #c62828;
  color: #fff;
}
.me-cancel-revoke {
  background: #fff;
  border: 1px solid #c9a227;
  color: #5c4a00;
  white-space: nowrap;
}
.me-cancel-revoke-form {
  margin: 0;
}
.me-cancel-modal[hidden] {
  display: none !important;
}
.me-cancel-modal {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1200;
}
.me-cancel-modal-dialog {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  max-width: 560px;
  width: calc(100% - 32px);
}
.me-cancel-modal-head {
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}
.me-cancel-modal-head h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.me-cancel-modal-close {
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.me-cancel-modal-body {
  padding: 16px;
}
.me-cancel-modal-info {
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.me-cancel-modal-field {
  display: block;
  font-size: 13px;
}
.me-cancel-modal-field span {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.me-cancel-modal-field em {
  color: #c62828;
  font-style: normal;
}
.me-cancel-modal-field textarea {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-sizing: border-box;
  font: inherit;
  min-height: 120px;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}
.me-cancel-modal-footer {
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
}
.me-cancel-submit {
  background: #c5221f;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
}
.me-cancel-dismiss {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
}

.me-assets-field-hint {
  color: var(--f3-text-secondary, #64748b);
  font-size: 12px;
  margin: -4px 0 10px;
}