/*
 * CloudYMS Portal 2.0 premium interface layer
 * This file intentionally sits after portal.css so the proven application,
 * drawer, messaging, and administration behavior remains unchanged.
 */
:root {
  --cy-navy-950: #071a2c;
  --cy-navy-900: #0a2239;
  --cy-navy-800: #103653;
  --cy-blue-700: #0b5a9b;
  --cy-blue-600: #0875c9;
  --cy-blue-500: #1796e8;
  --cy-blue-100: #dff2ff;
  --cy-teal-600: #078178;
  --cy-green-600: #15965d;
  --cy-amber-600: #c77a13;
  --cy-red-600: #c43f4c;
  --cy-purple-600: #7359b6;
  --cy-ink: #102f49;
  --cy-text: #294a64;
  --cy-muted: #71869a;
  --cy-line: #d9e5ee;
  --cy-line-strong: #c5d6e3;
  --cy-surface: #ffffff;
  --cy-canvas: #f2f6f9;
  --cy-soft: #f7fafc;
  --cy-shadow-sm: 0 5px 16px rgba(13, 51, 80, .06);
  --cy-shadow-md: 0 14px 35px rgba(9, 46, 76, .10);
  --cy-shadow-lg: 0 28px 70px rgba(5, 28, 48, .18);
  --cy-radius-sm: 10px;
  --cy-radius: 16px;
  --cy-radius-lg: 22px;
  --cy-topbar: 76px;
  --cy-sidebar: 236px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  color: var(--cy-text);
  background: var(--cy-canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(23, 150, 232, .28); outline-offset: 2px; }

/* Shared premium header */
.topbar {
  min-height: var(--cy-topbar);
  height: var(--cy-topbar);
  padding: 0 24px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 65;
  border-bottom: 1px solid rgba(182, 206, 223, .75);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  box-shadow: 0 5px 24px rgba(9, 44, 72, .07);
}
.brand { gap: 12px; min-width: 210px; }
.brandMark {
  width: 46px;
  height: 46px;
  padding: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d6e4ee;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--cy-shadow-sm);
}
.brandMark img { width: 100%; max-height: 100%; object-fit: contain; }
.brand > img { width: 122px; }
.brand div { line-height: 1.1; }
.brand strong { font-size: 14px; color: var(--cy-ink); letter-spacing: -.01em; }
.brand span:not(.brandMark) { margin-top: 5px; color: var(--cy-muted); font-size: 10px; letter-spacing: .04em; }
.topActions { margin-left: auto; gap: 8px; }
.iconBtn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--cy-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(13, 51, 80, .04);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.iconBtn:hover { transform: translateY(-1px); border-color: #9dc4df; background: #f7fbfe; box-shadow: var(--cy-shadow-sm); }
.iconBtn svg { width: 20px; height: 20px; stroke: var(--cy-blue-700); }
.userChip { margin-left: 3px; padding: 3px 6px 3px 3px; border-radius: 13px; }
.userChip strong { color: var(--cy-ink); }
.userChip .avatar.self { width: 40px; height: 40px; border: 0; background: linear-gradient(145deg, var(--cy-blue-600), var(--cy-navy-800)); box-shadow: 0 5px 13px rgba(8, 99, 168, .22); }
.badge { right: -4px; top: -6px; box-shadow: 0 3px 8px rgba(174, 38, 55, .25); }
.globalSearch {
  width: min(440px, 34vw);
  height: 42px;
  margin-left: clamp(4px, 2vw, 34px);
  padding: 0 10px 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--cy-line);
  border-radius: 12px;
  background: #f7fafc;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.globalSearch:focus-within { border-color: #69aee0; background: #fff; box-shadow: 0 0 0 4px rgba(22, 128, 201, .10); }
.globalSearch svg { width: 18px; height: 18px; fill: none; stroke: #62829b; stroke-width: 1.8; }
.globalSearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--cy-ink); font-size: 13px; }
.globalSearch input::placeholder { color: #8193a3; }
.globalSearch kbd { padding: 3px 7px; border: 1px solid #d4e0e8; border-bottom-width: 2px; border-radius: 6px; background: #fff; color: #8394a3; font-size: 10px; font-family: inherit; }
.mobileNavToggle { display: none; }

/* Desktop navigation rail */
.portalSidebar {
  position: fixed;
  z-index: 50;
  top: var(--cy-topbar);
  bottom: 0;
  left: 0;
  width: var(--cy-sidebar);
  padding: 21px 14px 16px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #143a57;
  background:
    radial-gradient(circle at 8% 8%, rgba(35, 142, 210, .20), transparent 28%),
    linear-gradient(180deg, var(--cy-navy-900), var(--cy-navy-950));
  box-shadow: 9px 0 30px rgba(5, 30, 50, .08);
}
.portalNav { display: flex; flex-direction: column; gap: 4px; }
.portalNavLabel { margin: 8px 12px 7px; color: #7994aa; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.portalAdminLabel { margin-top: 24px; }
.portalNavItem {
  min-height: 45px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #bdd0df;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.portalNavItem:hover { color: #fff; background: rgba(255, 255, 255, .07); transform: translateX(2px); }
.portalNavItem.active { color: #fff; border-color: rgba(98, 182, 236, .24); background: linear-gradient(90deg, rgba(29, 139, 209, .30), rgba(21, 111, 171, .15)); box-shadow: inset 3px 0 0 #44b5f3; }
.portalNavIcon { width: 24px; height: 24px; display: grid; place-items: center; }
.portalNavIcon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.portalNavItem em { min-width: 23px; height: 21px; margin-left: auto; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.09); color: #d8e8f4; font-size: 9px; font-style: normal; }
.sidebarStatus { margin-top: auto; padding: 13px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(118, 179, 216, .16); border-radius: 12px; background: rgba(255,255,255,.045); }
.statusDot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #36d486; box-shadow: 0 0 0 4px rgba(54, 212, 134, .12), 0 0 14px rgba(54, 212, 134, .55); }
.sidebarStatus div { display: flex; flex-direction: column; }
.sidebarStatus strong { color: #e5f1f8; font-size: 10px; }
.sidebarStatus small { margin-top: 3px; color: #7f9aaf; font-size: 9px; }
.mobileNavBackdrop { display: none; }

/* Main dashboard */
.portalHome .pageShell { max-width: 1680px; margin-left: var(--cy-sidebar); padding: 28px 28px 38px; }
.portalHome .appFooter { margin-left: var(--cy-sidebar); }
.welcomeRow {
  min-height: 132px;
  margin: 0 0 18px;
  padding: 25px 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid #bfd8ea;
  border-radius: var(--cy-radius-lg);
  background:
    radial-gradient(circle at 87% 10%, rgba(25, 151, 230, .16), transparent 27%),
    linear-gradient(125deg, #fff 0%, #f5fbff 62%, #e8f5fd 100%);
  box-shadow: var(--cy-shadow-md);
}
.welcomeRow::after { content: ""; position: absolute; right: 9%; bottom: -70px; width: 210px; height: 210px; border: 32px solid rgba(20, 130, 203, .055); border-radius: 50%; pointer-events: none; }
.welcomeCopy { position: relative; z-index: 1; }
.welcomeRow h1 { margin: 4px 0 6px; color: var(--cy-ink); font-size: clamp(27px, 2.3vw, 38px); font-weight: 780; letter-spacing: -.045em; }
.welcomeRow p { color: var(--cy-muted); font-size: 13px; }
.eyebrow { color: var(--cy-blue-600); font-size: 9px; letter-spacing: .17em; }
.onlineBlock { position: relative; z-index: 2; padding: 11px 13px; border: 1px solid rgba(174, 204, 224, .9); border-radius: 14px; background: rgba(255,255,255,.84); backdrop-filter: blur(8px); box-shadow: var(--cy-shadow-sm); }
.onlineLabel { color: #587187; }
.onlineLabel i { box-shadow: 0 0 0 4px rgba(41,181,107,.10); }

.kpiGrid { gap: 12px; margin-bottom: 29px; }
.kpiCard.kpiButton {
  min-height: 133px;
  padding: 16px 18px 15px 72px;
  position: relative;
  display: block;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--cy-line);
  border-radius: var(--cy-radius);
  background: #fff;
  color: inherit;
  box-shadow: var(--cy-shadow-sm);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kpiCard.kpiButton::before { content: ""; position: absolute; inset: auto -30px -54px auto; width: 115px; height: 115px; border: 22px solid var(--kpi-soft); border-radius: 50%; opacity: .75; }
.kpiCard.kpiButton:hover { transform: translateY(-3px); border-color: var(--kpi-accent); box-shadow: var(--cy-shadow-md); }
.kpiIcon { position: absolute; left: 17px; top: 18px; width: 42px; height: 42px; display: grid !important; place-items: center; border-radius: 12px; background: var(--kpi-soft); color: var(--kpi-accent); }
.kpiIcon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpiCard.kpiButton > span:not(.kpiIcon) { display: block; color: #6d8294; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.kpiCard.kpiButton strong { margin: 7px 0 1px; color: var(--cy-ink); font-size: 28px; line-height: 1; }
.kpiCard.kpiButton small { display: block; color: var(--cy-muted); font-size: 10px; }
.kpiCard.kpiButton i { margin-top: 13px; display: block; color: var(--kpi-accent); font-size: 9px; font-style: normal; font-weight: 800; }
.toneBlue { --kpi-accent: #0875c9; --kpi-soft: #e5f3fe; }
.toneGreen { --kpi-accent: #15965d; --kpi-soft: #e4f7ed; }
.toneAmber { --kpi-accent: #c77a13; --kpi-soft: #fff3df; }
.tonePurple { --kpi-accent: #7359b6; --kpi-soft: #f0ebfb; }

.sectionHeading { margin: 5px 0 13px; align-items: center; }
.sectionHeading h1, .sectionHeading h2 { color: var(--cy-ink); letter-spacing: -.025em; }
.sectionHeading h2 { margin-top: 4px; font-size: 22px; }
.sectionHeading p, .panelHead p { margin: 5px 0 0; color: var(--cy-muted); font-size: 10px; }
.moduleSearch { height: 41px; width: min(330px, 30vw); border-color: var(--cy-line); background: #fff; box-shadow: var(--cy-shadow-sm); }
.moduleSearch svg { stroke: #63839c; }
.btn { min-height: 40px; padding: 10px 16px; border-radius: 11px; font-size: 12px; letter-spacing: .005em; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, var(--cy-blue-600), var(--cy-blue-700)); box-shadow: 0 8px 18px rgba(8, 105, 177, .20); }
.btn.ghost { border: 1px solid var(--cy-line); background: #fff; color: #315b7c; box-shadow: 0 3px 10px rgba(13, 51, 80, .035); }
.btn.ghost:hover { border-color: #a9c8dc; background: #f8fbfd; }

.moduleGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.moduleCard {
  min-height: 108px;
  padding: 15px 14px;
  grid-template-columns: 50px minmax(0, 1fr) 33px;
  gap: 13px;
  border-color: var(--cy-line);
  border-radius: var(--cy-radius);
  background: #fff;
  box-shadow: var(--cy-shadow-sm);
}
.moduleCard::after { top: 15px; bottom: 15px; left: 0; width: 3px; border-radius: 0 4px 4px 0; }
.moduleCard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--module-accent) 44%, #d8e5ee); box-shadow: var(--cy-shadow-md); }
.moduleIcon { width: 48px; height: 48px; border-radius: 14px; }
.moduleIcon svg { width: 25px; height: 25px; }
.moduleText strong { font-size: 14px; color: var(--cy-ink); }
.moduleText small { margin-top: 6px; font-size: 10px; line-height: 1.45; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.favoriteToggle { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; }
.openArrow { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #f1f6fa; font-size: 14px; }
.quickAccessSection { gap: 12px; }
.quickAccessGroup { padding: 12px; border-color: var(--cy-line); background: #f8fbfd; box-shadow: 0 4px 14px rgba(13, 51, 80, .035); }

.dashboardGrid { grid-template-columns: minmax(0, 2fr) minmax(310px, .85fr); gap: 14px; }
.panel { padding: 20px; border-color: var(--cy-line); border-radius: var(--cy-radius-lg); background: #fff; box-shadow: var(--cy-shadow-sm); }
.panelHead { margin-bottom: 17px; padding-bottom: 14px; border-bottom: 1px solid #edf2f6; }
.panelHead h2, .panel h2 { color: var(--cy-ink); font-size: 19px; letter-spacing: -.02em; }
.textLink, .textButton { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid #cfe0ec; border-radius: 9px; background: #f8fbfd; color: var(--cy-blue-700); font-size: 10px; text-decoration: none; }
.yardStatusGrid { gap: 10px; }
.yardStatusCard { padding: 15px; border-color: #dbe7ef; background: linear-gradient(180deg, #fff, #f8fbfd); }
.yardTitle strong { color: var(--cy-ink); }
.statusPill { padding: 5px 9px; }
.yardNumbers strong { color: var(--cy-blue-700); }
.progress { height: 7px; }
.progress i { background: linear-gradient(90deg, var(--cy-blue-600), #2ab2d5); }
.personRow { padding: 9px; border: 1px solid transparent; }
.personRow:hover { border-color: #d8e7f2; background: #f6fafd; }

/* Drawers, alerts, messages, and notifications */
.drawer { border-left: 1px solid #cbdce8; box-shadow: -25px 0 70px rgba(5, 30, 50, .20); }
.drawerHead { height: 82px; padding: 17px 21px; background: linear-gradient(180deg, #fff, #f8fbfd); }
.drawerHead h2 { color: var(--cy-ink); }
.closeBtn, .composerClose { transition: transform .15s ease, background .15s ease; }
.closeBtn:hover, .composerClose:hover { transform: rotate(5deg); background: #dfeef8; }
.drawerBackdrop { backdrop-filter: blur(3px); background: rgba(5, 24, 40, .43); }
.contactsPane { background: #f8fafc; }
.contactsPane input, .composer textarea { border-color: var(--cy-line); }
.conversationHead { min-height: 68px; }
.messageHistory { background: #f2f6f9; }
.bubble { border-radius: 15px; }
.bubble.mine { background: linear-gradient(135deg, var(--cy-blue-600), var(--cy-blue-700)); }
.notificationToolbar { padding: 13px 15px; }
.notificationItem { border-color: var(--cy-line); box-shadow: 0 3px 10px rgba(13,51,80,.03); }
.notificationComposerPanel { margin: 0 13px 12px; }
.messageAlertCard, .notificationAlertCard { border-radius: var(--cy-radius-lg); box-shadow: var(--cy-shadow-lg); }

/* Premium workspace frame */
.workspaceBody { background: #d7e1e9; }
.workspaceBar {
  height: 70px;
  padding: 9px 14px;
  gap: 10px;
  border-bottom: 1px solid #c4d5e2;
  background: rgba(255,255,255,.97);
  box-shadow: 0 5px 22px rgba(8, 42, 69, .10);
}
.workspaceLogo { width: 42px; height: 42px; padding: 5px; display: grid; place-items: center; border: 1px solid var(--cy-line); border-radius: 11px; background: #fff; }
.workspaceLogo img { width: 100%; max-height: 100%; object-fit: contain; }
.workspaceBrand img { width: 100%; }
.workspaceHome { min-height: 39px; border: 1px solid var(--cy-line); background: #f7fafc; }
.workspaceCrumb span { color: #8a9cab; }
.workspaceCrumb strong { color: var(--cy-ink); }
.workspaceSwitcher select { min-height: 39px; border-color: var(--cy-line); background: #fff; }
.workspaceFrameWrap { height: calc(100vh - 70px); padding: 4px 4px 0; background: #cfdbe4; }
.workspaceFrame { border: 1px solid #b6cbd9; border-bottom: 0; border-radius: 7px 7px 0 0; box-shadow: 0 -3px 18px rgba(7,38,63,.08); }

/* Login experience */
.loginBody {
  min-height: 100vh;
  padding: 0;
  justify-content: center;
  background:
    radial-gradient(circle at 8% 12%, rgba(32, 144, 214, .27), transparent 30%),
    radial-gradient(circle at 92% 86%, rgba(18, 116, 185, .14), transparent 34%),
    linear-gradient(135deg, var(--cy-navy-950), var(--cy-navy-800));
}
.loginBody::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right, #000, transparent 78%); }
.loginShell { width: min(1180px, calc(100% - 48px)); min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(410px, .78fr); overflow: hidden; position: relative; z-index: 1; border: 1px solid rgba(193, 220, 238, .22); border-radius: 28px; background: rgba(255,255,255,.05); box-shadow: 0 35px 100px rgba(0, 13, 25, .42); }
.loginShowcase { min-width: 0; padding: 48px 52px 42px; display: flex; flex-direction: column; color: #fff; }
.loginShowcase .loginBrand { margin: 0; justify-content: flex-start; gap: 14px; text-align: left; }
.loginLogo { width: 66px; height: 66px; padding: 8px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 17px; background: #fff; box-shadow: 0 12px 28px rgba(0,24,43,.25); }
.loginLogo img { width: 100%; max-height: 100%; object-fit: contain; }
.loginShowcase .loginBrand h1 { color: #fff; font-size: 20px; }
.loginShowcase .loginBrand p { color: #9fb9cc; font-size: 11px; }
.loginShowcaseCopy { margin: auto 0 38px; max-width: 570px; }
.loginShowcaseCopy .eyebrow { color: #57c1fa; }
.loginShowcaseCopy h2 { margin: 11px 0 18px; color: #fff; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; letter-spacing: -.055em; }
.loginShowcaseCopy h2 em { color: #55bff7; font-style: normal; }
.loginShowcaseCopy p { max-width: 530px; color: #b7cad9; font-size: 14px; line-height: 1.75; }
.loginFeatureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.loginFeatureGrid > div { min-height: 112px; padding: 14px; display: flex; flex-direction: column; border: 1px solid rgba(144, 197, 230, .15); border-radius: 14px; background: rgba(255,255,255,.045); }
.loginFeatureGrid span { color: #4dbcf7; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.loginFeatureGrid strong { margin-top: auto; color: #ecf6fb; font-size: 11px; }
.loginFeatureGrid small { margin-top: 5px; color: #86a4ba; font-size: 9px; line-height: 1.4; }
.loginTrust { margin-top: 20px; display: flex; align-items: center; gap: 9px; color: #8facbf; font-size: 9px; letter-spacing: .035em; }
.loginTrust .statusDot { width: 7px; height: 7px; }
.loginBody .loginCard { width: auto; margin: 0; padding: 58px 45px; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; background: #fff; box-shadow: -15px 0 50px rgba(0, 25, 44, .12); }
.loginCardHeading { margin-bottom: 14px; }
.loginCardHeading h2 { margin: 7px 0 7px; color: var(--cy-ink); font-size: 28px; letter-spacing: -.035em; }
.loginCardHeading p { font-size: 12px; }
.loginCard label { margin: 13px 0; gap: 8px; color: #35566f; font-size: 11px; }
.fieldShell { min-height: 49px; padding: 0 9px 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #d3e0e9; border-radius: 12px; background: #f9fbfc; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.fieldShell:focus-within { border-color: #5ba9dc; background: #fff; box-shadow: 0 0 0 4px rgba(20, 132, 205, .10); }
.fieldIcon { width: 18px; color: #6e8aa0; font-size: 12px; text-align: center; }
.loginCard .fieldShell input { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 13px; }
.passwordToggle { padding: 6px 5px; border: 0; background: transparent; color: var(--cy-blue-700); font-size: 10px; font-weight: 800; cursor: pointer; }
.capsWarning { color: var(--cy-amber-600); font-size: 9px; font-weight: 800; }
.loginSubmit { min-height: 50px; margin-top: 14px; justify-content: space-between; padding-left: 18px; padding-right: 16px; }
.loginSubmit i { font-size: 18px; font-style: normal; transition: transform .16s ease; }
.loginSubmit:hover i { transform: translateX(3px); }
.loginSubmit.isLoading { opacity: .82; pointer-events: none; }
.loginHelp { margin: 18px 0 0; color: #8a9cab; font-size: 9px; text-align: center; }
.loginBody > .appFooter { position: fixed; right: 22px; bottom: 10px; padding: 0; color: rgba(218,234,244,.55); }

/* Administration and setup */
.portalAdmin .pageShell { padding-top: 27px; }
.portalAdmin .topbar { position: sticky; }
.portalAdmin .sectionHeading { margin-bottom: 18px; padding: 20px 22px; border: 1px solid var(--cy-line); border-radius: var(--cy-radius-lg); background: linear-gradient(120deg, #fff, #eff8fe); box-shadow: var(--cy-shadow-sm); }
.portalAdmin .adminGrid, .portalAdmin .authAdminGrid { gap: 18px; }
.portalAdmin .panel { box-shadow: var(--cy-shadow-sm); }
.portalAdmin .formGrid input, .portalAdmin .formGrid select, .portalAdmin .formGrid textarea, .notificationComposerPanel input, .notificationComposerPanel select, .notificationComposerPanel textarea { min-height: 43px; border-color: #d3e0e9; border-radius: 10px; background: #fbfcfd; }
.portalAdmin .formGrid textarea { padding: 11px 12px; resize: vertical; }
.portalAdmin .formGrid input:focus, .portalAdmin .formGrid select:focus, .portalAdmin .formGrid textarea:focus { border-color: #62a8d6; background: #fff; box-shadow: 0 0 0 4px rgba(30, 128, 195, .09); }
.moduleAdminRow, .authSourceRow { padding: 11px; border-color: var(--cy-line); border-radius: 13px; background: #fff; }
.moduleAdminRow:hover, .authSourceRow:hover, .authSourceRow.selected { border-color: #91bddb; background: #f5fafe; box-shadow: var(--cy-shadow-sm); }
.moduleVisualPicker, .roleMappingPanel, .standardRoleAccess, .lookupTest { border-color: #cbdde9; background: #f7fafc; }
.iconChoice { min-height: 65px; }
.helpPanel { border-left: 4px solid var(--cy-blue-600); }
.helpPanel code { padding: 2px 5px; border-radius: 5px; background: #edf4f9; color: #315b78; }
.installBody .installShell { position: relative; z-index: 2; }
.installBody .loginBrand h1 { color: #fff; }
.installBody .loginBrand p { color: #b6cbd9; }
.installBody .loginCard { border-radius: 20px; }

/* Responsive behavior */
@media (max-width: 1320px) {
  :root { --cy-sidebar: 218px; }
  .globalSearch { width: min(350px, 28vw); }
  .moduleGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loginShell { min-height: 620px; }
  .loginShowcase { padding: 42px; }
}

@media (max-width: 1020px) {
  .globalSearch { display: none; }
  .dashboardGrid { grid-template-columns: 1fr; }
  .teamPanel { min-height: 300px; }
  .loginShell { width: min(920px, calc(100% - 34px)); grid-template-columns: 1fr 420px; }
  .loginFeatureGrid { grid-template-columns: 1fr; }
  .loginFeatureGrid > div { min-height: 70px; }
  .loginFeatureGrid > div:nth-child(3) { display: none; }
}

@media (max-width: 820px) {
  :root { --cy-topbar: 68px; }
  .portalHome .topbar { padding: 0 12px; gap: 9px; }
  .mobileNavToggle { width: 40px; height: 40px; padding: 9px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid var(--cy-line); border-radius: 11px; background: #fff; }
  .mobileNavToggle span { width: 100%; height: 2px; border-radius: 2px; background: var(--cy-blue-700); transition: transform .18s ease, opacity .18s ease; }
  .mobileNavToggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobileNavToggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobileNavToggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .portalHome .brand { min-width: 0; }
  .portalHome .brandMark { width: 40px; height: 40px; }
  .portalHome .brand div { display: none; }
  .portalHome .topActions { gap: 4px; }
  .portalHome .topActions .userChip, .portalHome .topActions > .btn { display: none; }
  .portalSidebar { top: var(--cy-topbar); width: min(286px, 86vw); transform: translateX(-105%); transition: transform .22s ease; }
  .portalSidebar.open { transform: translateX(0); }
  .mobileNavBackdrop { position: fixed; z-index: 45; inset: var(--cy-topbar) 0 0; display: block; opacity: 0; pointer-events: none; background: rgba(3, 20, 34, .45); backdrop-filter: blur(2px); transition: opacity .2s ease; }
  .mobileNavBackdrop.show { opacity: 1; pointer-events: auto; }
  .portalHome .pageShell { margin-left: 0; padding: 18px 13px 28px; }
  .portalHome .appFooter { margin-left: 0; }
  .welcomeRow { min-height: 0; padding: 20px; align-items: flex-start; }
  .welcomeRow h1 { font-size: 27px; }
  .moduleGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moduleHeadingActions { width: 100%; }
  .moduleSearch { width: 100%; max-width: none; }
  .loginShell { margin: 22px auto 50px; width: min(560px, calc(100% - 28px)); min-height: 0; display: block; border-radius: 24px; background: transparent; overflow: visible; }
  .loginShowcase { padding: 28px 22px 24px; }
  .loginShowcaseCopy { margin: 38px 0 0; }
  .loginShowcaseCopy h2 { font-size: 38px; }
  .loginShowcaseCopy p, .loginFeatureGrid, .loginTrust { display: none; }
  .loginBody .loginCard { padding: 35px 28px; border-radius: 22px; box-shadow: var(--cy-shadow-lg); }
  .loginBody > .appFooter { position: static; margin-bottom: 16px; color: rgba(218,234,244,.65); }
  .workspaceUser { display: none; }
}

@media (max-width: 620px) {
  .kpiGrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpiCard.kpiButton { min-height: 117px; padding: 14px 12px 13px 54px; }
  .kpiIcon { left: 11px; top: 13px; width: 35px; height: 35px; }
  .kpiIcon svg { width: 19px; height: 19px; }
  .kpiCard.kpiButton strong { font-size: 23px; }
  .kpiCard.kpiButton i { margin-top: 9px; }
  .moduleGrid { grid-template-columns: 1fr; }
  .moduleCard { min-height: 96px; }
  .yardStatusGrid { grid-template-columns: 1fr; }
  .panel { padding: 16px; border-radius: 17px; }
  .panelHead { align-items: flex-start; gap: 10px; }
  .quickAccessSection { grid-template-columns: 1fr; }
  .quickModuleGrid { grid-template-columns: 1fr; }
  .workspaceBar { height: 61px; padding: 7px; }
  .workspaceFrameWrap { height: calc(100vh - 61px); padding: 2px 2px 0; }
  .workspaceLogo { width: 38px; height: 38px; }
  .workspaceHome { font-size: 0; width: 36px; padding: 0; justify-content: center; }
  .workspaceHome::after { content: "←"; font-size: 16px; }
  .workspaceSwitcher { min-width: 0; }
  .workspaceActions .iconBtn { width: 36px; height: 36px; }
  .loginShowcase { padding-left: 18px; padding-right: 18px; }
  .loginShowcaseCopy h2 { font-size: 31px; }
  .loginLogo { width: 58px; height: 58px; }
  .loginBody .loginCard { padding: 29px 20px; }
  .portalAdmin .topbar { padding: 9px 11px; height: auto; min-height: 68px; }
  .portalAdmin .brand div { display: none; }
  .portalAdmin .topActions { gap: 5px; }
  .portalAdmin .topActions .btn { padding: 8px 9px; font-size: 9px; }
  .portalAdmin .sectionHeading { padding: 16px; }
}

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

/* -------------------------------------------------------------------------
 * v2.0.1 CloudYMS brand refinement: horizontal menu, brighter blue, full logo
 * ------------------------------------------------------------------------- */
:root {
  --cy-navy-950: #173b5c;
  --cy-navy-900: #204e74;
  --cy-navy-800: #28658f;
  --cy-blue-700: #087ac4;
  --cy-blue-600: #078fe3;
  --cy-blue-500: #1da4ee;
  --cy-blue-100: #e4f5ff;
  --cy-ink: #274d70;
  --cy-text: #41637f;
  --cy-muted: #718da3;
  --cy-canvas: #f3f8fb;
  --cy-topbar: 86px;
}

/* Larger horizontal CloudYMS branding */
.portalHome .topbar {
  height: var(--cy-topbar);
  min-height: var(--cy-topbar);
  padding: 0 28px;
  border-bottom-color: #d6e8f3;
  box-shadow: 0 4px 18px rgba(24, 91, 138, .07);
}
.portalHome .brand { min-width: 286px; gap: 15px; }
.portalHome .brandMark {
  width: 166px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.portalHome .brandMark img { width: 160px; max-height: 58px; object-fit: contain; }
.portalHome .brand strong { color: #315a7d; font-size: 13px; }
.portalHome .brand span:not(.brandMark) { color: #7a94a8; }
.portalAdmin .brand > img { width: 156px; max-height: 58px; object-fit: contain; }

/* Horizontal top navigation */
.portalTopNav {
  min-height: 57px;
  position: sticky;
  z-index: 58;
  top: var(--cy-topbar);
  border-bottom: 1px solid #d7e7f1;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
  box-shadow: 0 5px 18px rgba(23, 83, 126, .055);
}
.portalTopNavInner {
  width: 100%;
  max-width: 1720px;
  min-height: 57px;
  margin: 0 auto;
  padding: 6px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.portalTopNav .portalNav { flex: 1; flex-direction: row; align-items: center; gap: 5px; }
.portalTopNav .portalNavLabel { display: none; }
.portalTopNav .portalNavItem {
  min-height: 42px;
  padding: 0 13px;
  gap: 8px;
  color: #496b85;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
}
.portalTopNav .portalNavItem:hover {
  color: #067bc6;
  border-color: #d6ebf8;
  background: #f0f9ff;
  transform: translateY(-1px);
}
.portalTopNav .portalNavItem.active {
  color: #057bc8;
  border-color: #bfe3f8;
  background: linear-gradient(180deg, #eff9ff, #e3f4ff);
  box-shadow: inset 0 -3px 0 #0a96e7;
}
.portalTopNav .portalNavIcon { width: 21px; height: 21px; }
.portalTopNav .portalNavIcon svg { width: 18px; height: 18px; }
.portalTopNav .portalNavItem em { background: #e7f4fc; color: #1679b8; }
.portalTopNav .sidebarStatus {
  min-width: 164px;
  margin: 0 0 0 auto;
  padding: 8px 11px;
  border-color: #d7e8f2;
  background: #f7fbfd;
}
.portalTopNav .sidebarStatus strong { color: #34617f; }
.portalTopNav .sidebarStatus small { color: #86a0b2; }

/* The dashboard now uses the full page width beneath the top menu. */
.portalHome .pageShell { max-width: 1720px; margin: 0 auto; padding: 25px 28px 38px; }
.portalHome .appFooter { margin-left: 0; }
.welcomeRow {
  border-color: #cbe5f5;
  background:
    radial-gradient(circle at 87% 10%, rgba(24, 162, 237, .13), transparent 27%),
    linear-gradient(125deg, #fff 0%, #f7fcff 61%, #eaf7ff 100%);
  box-shadow: 0 12px 32px rgba(21, 101, 154, .08);
}
.welcomeRow::after { border-color: rgba(20, 154, 231, .055); }
.kpiCard.kpiButton, .moduleCard, .panel { border-color: #d9e9f2; }
.btn.primary { background: linear-gradient(135deg, #16a0ed, #0784d2); }

/* Brighter, lighter CloudYMS login experience */
.loginBody {
  background:
    radial-gradient(circle at 10% 10%, rgba(26, 163, 236, .16), transparent 32%),
    radial-gradient(circle at 90% 90%, rgba(76, 183, 238, .14), transparent 34%),
    linear-gradient(135deg, #f5fbff, #e6f4fc);
}
.loginBody::before {
  opacity: .34;
  background-image: linear-gradient(rgba(10, 143, 222, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 143, 222, .07) 1px, transparent 1px);
  mask-image: linear-gradient(to right, #000, rgba(0,0,0,.35));
}
.loginShell {
  border-color: #cce3f1;
  background: #fff;
  box-shadow: 0 30px 85px rgba(34, 102, 148, .18);
}
.loginShowcase {
  color: #315873;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.9), transparent 31%),
    linear-gradient(145deg, #edf9ff, #d8effd);
}
.loginLogo {
  width: 218px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.loginLogo img { width: 210px; max-height: 70px; object-fit: contain; }
.loginShowcase .loginBrand { gap: 18px; }
.loginShowcase .loginBrand h1 { color: #315574; font-size: 18px; }
.loginShowcase .loginBrand p { color: #6f90a7; }
.loginShowcaseCopy .eyebrow { color: #078bdc; }
.loginShowcaseCopy h2 { color: #315b7d; }
.loginShowcaseCopy h2 em { color: #0794e5; }
.loginShowcaseCopy p { color: #5d7f98; }
.loginFeatureGrid > div {
  border-color: rgba(91, 169, 216, .28);
  background: rgba(255,255,255,.68);
  box-shadow: 0 7px 18px rgba(57, 125, 168, .055);
}
.loginFeatureGrid span { color: #078fdc; }
.loginFeatureGrid strong { color: #315b7a; }
.loginFeatureGrid small { color: #6d8aa0; }
.loginTrust { color: #6989a0; }
.loginBody .loginCard { border-left: 1px solid #dcebf4; box-shadow: -12px 0 36px rgba(45, 112, 155, .07); }
.loginBody > .appFooter { color: #7c9aae; }

@media (max-width: 1120px) {
  .portalHome .brand { min-width: 220px; }
  .portalHome .brand div { display: none; }
  .portalTopNav .portalNavItem { padding: 0 10px; }
  .portalTopNav .sidebarStatus { min-width: 145px; }
}

@media (max-width: 820px) {
  :root { --cy-topbar: 74px; }
  .portalHome .topbar { height: var(--cy-topbar); min-height: var(--cy-topbar); }
  .portalHome .brand { min-width: 0; flex: 1; }
  .portalHome .brandMark { width: 139px; height: 52px; }
  .portalHome .brandMark img { width: 136px; max-height: 50px; }
  .portalTopNav {
    min-height: 0;
    max-height: calc(100vh - var(--cy-topbar));
    position: fixed;
    right: 0;
    left: 0;
    top: var(--cy-topbar);
    overflow: auto;
    transform: translateY(-115%);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .18s ease;
  }
  .portalTopNav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .portalTopNavInner { min-height: 0; padding: 12px; display: block; }
  .portalTopNav .portalNav { align-items: stretch; flex-direction: column; gap: 4px; }
  .portalTopNav .portalNavItem { min-height: 47px; padding: 0 14px; font-size: 12px; }
  .portalTopNav .portalNavItem.active { box-shadow: inset 4px 0 0 #0a96e7; }
  .portalTopNav .sidebarStatus { width: 100%; margin-top: 10px; }
  .mobileNavBackdrop { inset: var(--cy-topbar) 0 0; }
  .portalHome .pageShell { margin: 0; padding: 18px 13px 28px; }
  .loginLogo { width: 190px; height: 66px; }
  .loginLogo img { width: 186px; max-height: 64px; }
  .loginShowcase .loginBrand h1, .loginShowcase .loginBrand p { display: none; }
  .loginBody > .appFooter { color: #67889f; }
}

@media (max-width: 480px) {
  .portalHome .brandMark { width: 121px; }
  .portalHome .brandMark img { width: 118px; }
  .portalHome .topActions .iconBtn:nth-of-type(3) { display: none; }
  .loginLogo { width: 168px; height: 59px; }
  .loginLogo img { width: 164px; max-height: 57px; }
}

/* -------------------------------------------------------------------------
 * v2.1.0 compact industrial transportation interface
 * ------------------------------------------------------------------------- */
:root {
  --cy-industrial-charcoal: #2d363d;
  --cy-industrial-steel: #56636d;
  --cy-industrial-silver: #d9e0e4;
  --cy-industrial-orange: #ef8b22;
  --cy-blue-700: #087fc8;
  --cy-blue-600: #0795e5;
  --cy-blue-500: #22a9ef;
  --cy-ink: #263f53;
  --cy-text: #435d70;
  --cy-muted: #718594;
  --cy-line: #d3dde3;
  --cy-canvas: #eef2f4;
  --cy-radius-sm: 4px;
  --cy-radius: 6px;
  --cy-radius-lg: 8px;
  --cy-topbar: 78px;
}

body {
  font-family: Bahnschrift, "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  background-color: var(--cy-canvas);
  background-image: linear-gradient(135deg, rgba(74, 91, 104, .025) 25%, transparent 25%, transparent 50%, rgba(74, 91, 104, .025) 50%, rgba(74, 91, 104, .025) 75%, transparent 75%, transparent);
  background-size: 18px 18px;
}

/* Compact brand and horizontal operations menu */
.portalHome .topbar {
  height: var(--cy-topbar);
  min-height: var(--cy-topbar);
  padding: 0 20px;
  border-bottom: 4px solid var(--cy-industrial-orange);
  background: #fff;
  box-shadow: 0 3px 10px rgba(33, 47, 57, .12);
}
.portalHome .brand { min-width: 165px; }
.portalHome .brandMark { width: 154px; height: 56px; }
.portalHome .brandMark img { width: 150px; max-height: 54px; }
.portalHome .brand div { display: none; }
.portalHome .brand strong { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.globalSearch { height: 38px; border-radius: 4px; background: #f3f6f7; box-shadow: none; }
.iconBtn, .btn, .workspaceHome, .workspaceSwitcher select { border-radius: 5px; }
.iconBtn { width: 38px; height: 38px; }

.portalTopNav {
  min-height: 48px;
  border-bottom: 0;
  background: linear-gradient(90deg, #0797e6, #087fc8);
  box-shadow: 0 3px 9px rgba(8, 112, 178, .22);
}
.portalTopNavInner { min-height: 48px; padding: 3px 20px; }
.portalTopNav .portalNavItem {
  min-height: 40px;
  padding: 0 12px;
  color: #dce4e9;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.portalTopNav .portalNavItem:hover { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.12); transform: none; }
.portalTopNav .portalNavItem.active {
  color: #087fc8;
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 -3px 0 var(--cy-industrial-orange);
}
.portalTopNav .portalNavItem em { background: rgba(255,255,255,.17); color: #fff; }
.portalTopNav .portalNavItem.active em { background: #e5f4fc; color: #087fc8; }
.portalTopNav .sidebarStatus { display: none; }
.portalTopNav .sidebarStatus strong { color: #fff; }
.portalTopNav .sidebarStatus small { display: none; }

/* Dense first-screen dashboard */
.portalHome .pageShell { max-width: 1740px; padding: 14px 20px 24px; }
.welcomeRow {
  min-height: 78px;
  margin-bottom: 9px;
  padding: 12px 16px 12px 20px;
  border: 1px solid #cbd6dc;
  border-left: 6px solid var(--cy-industrial-orange);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(37, 57, 70, .07);
}
.welcomeRow::after { display: none; }
.welcomeRow .onlineBlock { display: none; }
.welcomeRow h1 { margin: 1px 0 3px; font-size: clamp(22px, 2vw, 29px); font-weight: 800; letter-spacing: -.025em; }
.welcomeRow .eyebrow, .sectionHeading .eyebrow, .panelHead .eyebrow { color: #657783; letter-spacing: .13em; }
.operationsTags { display: flex; align-items: center; gap: 7px; color: #637683; font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.operationsTags i { width: 3px; height: 3px; border-radius: 50%; background: var(--cy-industrial-orange); }
.onlineBlock { padding: 7px 9px; border-radius: 4px; box-shadow: none; }

.kpiGrid { gap: 7px; margin-bottom: 12px; }
.kpiCard.kpiButton {
  min-height: 83px;
  padding: 12px 12px 10px 55px;
  border-radius: 4px;
  border-top: 3px solid var(--kpi-accent);
  box-shadow: 0 2px 7px rgba(37, 57, 70, .065);
}
.kpiCard.kpiButton::before { right: -45px; bottom: -68px; opacity: .35; }
.kpiCard.kpiButton:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(33, 56, 71, .11); }
.kpiIcon { left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 3px; }
.kpiIcon svg { width: 18px; height: 18px; }
.kpiCard.kpiButton strong { margin: 4px 0 0; font-size: 22px; }
.kpiCard.kpiButton small { font-size: 9px; }
.kpiCard.kpiButton i { display: none; }

.sectionHeading { margin: 3px 0 7px; }
.sectionHeading h2 { margin-top: 1px; font-size: 18px; text-transform: uppercase; letter-spacing: .01em; }
.moduleSearch { height: 36px; border-radius: 4px; box-shadow: none; }
.moduleGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.moduleCard {
  min-height: 80px;
  padding: 10px;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  gap: 9px;
  border-radius: 4px;
  border-top: 3px solid var(--module-accent);
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100% - 17px), rgba(72, 92, 105, .025) calc(100% - 17px), rgba(72, 92, 105, .025) calc(100% - 15px)),
    #fff;
  box-shadow: 0 2px 7px rgba(37, 57, 70, .065);
}
.moduleCard::after { top: 10px; bottom: 10px; width: 2px; }
.moduleCard:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(34, 56, 70, .12); }
.moduleIcon { width: 38px; height: 38px; border-radius: 3px; }
.moduleIcon svg { width: 21px; height: 21px; }
.moduleText strong { font-size: 12px; text-transform: uppercase; letter-spacing: .015em; }
.moduleText small { margin-top: 4px; font-size: 9px; white-space: nowrap; -webkit-line-clamp: 1; }
.favoriteToggle { width: 23px; height: 23px; border-radius: 3px; }
.openArrow { width: 23px; height: 23px; border-radius: 3px; }
.quickAccessSection { gap: 7px; margin-bottom: 8px; }
.quickAccessGroup { padding: 7px; border-radius: 4px; }
.quickAccessTitle { margin-bottom: 4px; }
.quickModuleGrid { gap: 5px; }

.dashboardGrid { gap: 8px; }
.panel { padding: 12px; border-radius: 5px; box-shadow: 0 2px 8px rgba(37, 57, 70, .07); }
.panelHead { margin-bottom: 8px; padding-bottom: 7px; border-bottom: 2px solid #e4eaed; }
.panelHead h2, .panel h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .025em; }
.textLink, .textButton { min-height: 29px; border-radius: 3px; }
.yardStatusGrid { gap: 6px; }
.yardStatusCard { padding: 9px; border-radius: 3px; background: #f8fafb; }
.yardNumbers { margin: 7px 0 5px; }
.yardNumbers strong { font-size: 20px; }
.personRow { padding: 6px; border-radius: 3px; }

/* Industrial login, kept compact and light */
.loginBody {
  background-color: #e8edef;
  background-image: repeating-linear-gradient(135deg, rgba(53, 68, 78, .035) 0, rgba(53, 68, 78, .035) 1px, transparent 1px, transparent 14px);
}
.loginBody::before { display: none; }
.loginShell {
  width: min(1050px, calc(100% - 40px));
  min-height: 520px;
  grid-template-columns: 1.08fr .92fr;
  border: 1px solid #bfcbd2;
  border-top: 6px solid var(--cy-industrial-orange);
  border-radius: 6px;
  box-shadow: 0 22px 55px rgba(42, 55, 64, .20);
}
.loginShowcase {
  padding: 32px 38px 28px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0, transparent 92%, rgba(51, 69, 81, .07) 92%, rgba(51, 69, 81, .07) 93%, transparent 93%),
    linear-gradient(145deg, #f7fafb, #dfe7eb);
}
.loginShowcase::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: 42px;
  width: 290px;
  height: 8px;
  transform: rotate(-28deg);
  background: repeating-linear-gradient(90deg, var(--cy-industrial-orange) 0 28px, transparent 28px 48px);
  opacity: .32;
}
.loginLogo { width: 190px; height: 66px; }
.loginLogo img { width: 186px; max-height: 64px; }
.loginShowcase .loginBrand h1, .loginShowcase .loginBrand p { display: none; }
.loginShowcaseCopy { margin: auto 0 25px; position: relative; z-index: 1; }
.loginShowcaseCopy h2 { margin: 8px 0 0; color: #334f62; font-size: clamp(30px, 3.3vw, 42px); line-height: 1.07; text-transform: uppercase; letter-spacing: -.035em; }
.loginShowcaseCopy h2 em { color: #0789d5; }
.loginFeatureGrid { gap: 6px; position: relative; z-index: 1; }
.loginFeatureGrid > div { min-height: 62px; padding: 10px; border-radius: 3px; border-top: 3px solid var(--cy-industrial-orange); background: rgba(255,255,255,.72); }
.loginFeatureGrid strong { margin-top: auto; text-transform: uppercase; font-size: 9px; }
.loginFeatureGrid small { display: none; }
.loginTrust { margin-top: 14px; position: relative; z-index: 1; text-transform: uppercase; letter-spacing: .08em; }
.loginBody .loginCard { padding: 36px 34px; border-left: 1px solid #cbd6dc; }
.loginCardHeading { margin-bottom: 7px; }
.loginCardHeading h2 { margin: 4px 0; font-size: 25px; text-transform: uppercase; }
.loginCard label { margin: 9px 0; }
.fieldShell { min-height: 44px; border-radius: 4px; }
.loginSubmit { min-height: 45px; margin-top: 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.loginHelp { margin-top: 12px; }

/* Industrial framing for workspace and developer screens */
.workspaceBar { height: 64px; border-bottom: 4px solid var(--cy-industrial-orange); box-shadow: 0 3px 10px rgba(33,47,57,.13); }
.workspaceFrameWrap { height: calc(100vh - 64px); padding: 2px 2px 0; background: #aeb9c0; }
.workspaceFrame { border-radius: 2px 2px 0 0; }
.portalAdmin .sectionHeading { padding: 12px 15px; border-left: 6px solid var(--cy-industrial-orange); border-radius: 4px; background: #fff; }
.portalAdmin .panel, .moduleAdminRow, .authSourceRow, .moduleVisualPicker, .roleMappingPanel, .standardRoleAccess { border-radius: 4px; }

@media (max-width: 1450px) { .moduleGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1120px) { .moduleGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 820px) {
  :root { --cy-topbar: 70px; }
  .portalHome .brandMark { width: 134px; height: 50px; }
  .portalHome .brandMark img { width: 130px; max-height: 48px; }
  .portalTopNav { background: linear-gradient(180deg, #0797e6, #087fc8); }
  .portalTopNav .portalNavItem.active { box-shadow: inset 4px 0 0 var(--cy-industrial-orange); }
  .welcomeRow { padding: 10px 12px; }
  .operationsTags { flex-wrap: wrap; }
  .moduleGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loginShell { width: min(540px, calc(100% - 24px)); }
  .loginShowcase { padding: 22px 20px 18px; }
  .loginShowcaseCopy { margin: 25px 0 0; }
  .loginShowcaseCopy h2 { font-size: 29px; }
  .loginFeatureGrid { display: none; }
  .loginBody .loginCard { padding: 26px 22px; }
}

@media (max-width: 560px) {
  .kpiGrid { grid-template-columns: 1fr 1fr; }
  .kpiCard.kpiButton { min-height: 76px; padding-left: 49px; }
  .kpiIcon { left: 9px; width: 30px; height: 30px; }
  .moduleGrid { grid-template-columns: 1fr; }
  .moduleCard { min-height: 74px; }
}

/* -------------------------------------------------------------------------
 * v2.2.0 industrial-tech operations network
 * ------------------------------------------------------------------------- */
:root {
  --cy-tech-blue: #078fe0;
  --cy-tech-cyan: #25c5f2;
  --cy-tech-deep: #174966;
  --cy-tech-grid: rgba(7, 143, 224, .055);
  --cy-industrial-orange: #ef8b22;
}

body {
  background-color: #eef6fa;
  background-image:
    linear-gradient(var(--cy-tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cy-tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(16, 106, 158, .018) 25%, transparent 25%, transparent 50%, rgba(16, 106, 158, .018) 50%, rgba(16, 106, 158, .018) 75%, transparent 75%, transparent);
  background-size: 32px 32px, 32px 32px, 18px 18px;
}

.portalHome .topbar {
  border-bottom-color: var(--cy-tech-cyan);
  background: linear-gradient(90deg, #fff, #f7fcff);
}
.globalSearch { border-color: #c9e4f2; background: #f5fbfe; }
.globalSearch:focus-within { border-color: var(--cy-tech-cyan); box-shadow: 0 0 0 3px rgba(37, 197, 242, .13); }
.iconBtn:hover { border-color: #7ed7ef; box-shadow: 0 0 0 2px rgba(37,197,242,.08), 0 5px 12px rgba(8,115,177,.08); }

.portalTopNav {
  background: linear-gradient(90deg, #078fdc, #087fc8 62%, #0876bc);
  box-shadow: 0 4px 13px rgba(7, 105, 168, .24);
}
.portalTopNav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112,229,255,.95), transparent);
}
.portalTopNav .portalNavItem.active { box-shadow: inset 0 -3px 0 var(--cy-tech-cyan); }

.welcomeRow {
  border-color: #bddbe9;
  border-left-color: var(--cy-tech-cyan);
  background:
    linear-gradient(rgba(7,143,224,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,143,224,.035) 1px, transparent 1px),
    linear-gradient(110deg, #fff, #f1faff);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 3px 10px rgba(14, 92, 137, .08);
}
.operationsMeta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; position: relative; z-index: 2; }
.networkLive { display: flex; align-items: center; gap: 7px; color: #217d9e; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.networkLive i { width: 7px; height: 7px; border-radius: 50%; background: #24c77a; box-shadow: 0 0 0 4px rgba(36,199,122,.10), 0 0 10px rgba(36,199,122,.42); animation: networkPulse 2.2s ease-in-out infinite; }
.liveTimestamp { color: #7792a3; font-size: 8px; font-variant-numeric: tabular-nums; }
@keyframes networkPulse { 0%,100% { opacity: 1; } 50% { opacity: .52; } }

.kpiCard.kpiButton {
  border-color: #c8dfea;
  background:
    linear-gradient(90deg, transparent 0 76%, rgba(37,197,242,.035) 76% 77%, transparent 77% 84%, rgba(37,197,242,.035) 84% 85%, transparent 85%),
    #fff;
  box-shadow: 0 2px 8px rgba(15, 91, 135, .07);
}
.kpiCard.kpiButton::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--kpi-accent), transparent 72%); opacity: .55; }
.kpiCard.kpiButton:hover { border-color: #74d5ef; box-shadow: 0 0 0 2px rgba(37,197,242,.08), 0 7px 17px rgba(12,96,149,.12); }
.kpiCard.kpiButton.hasUnread { border-color: #78cceb; box-shadow: 0 0 0 2px rgba(7,143,224,.07), 0 4px 12px rgba(7,118,188,.10); }
.kpiCard.kpiButton.hasAttention { border-top-color: var(--cy-industrial-orange); border-color: #efc38f; box-shadow: 0 0 0 2px rgba(239,139,34,.08), 0 5px 14px rgba(171,93,16,.10); }
.kpiCard.kpiButton.hasAttention .kpiIcon { background: #fff1e2; color: #c97012; }

.moduleCard {
  border-color: #c9dfea;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 18px), rgba(37,197,242,.045) calc(100% - 18px), rgba(37,197,242,.045) calc(100% - 16px)),
    #fff;
}
.moduleCard::before { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-right: 1px solid rgba(37,197,242,.55); border-bottom: 1px solid rgba(37,197,242,.55); pointer-events: none; }
.moduleCard:hover { border-color: #6fd3ee; box-shadow: 0 0 0 2px rgba(37,197,242,.08), 0 8px 18px rgba(7,103,161,.13); }
.moduleIcon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 0 12px rgba(7,143,224,.07); }
.openArrow { background: #eef8fd; color: #1288ca; }
.favoriteToggle:hover, .favoriteToggle:focus { color: #0d95d9; background: #eaf8fe; }

.panel { border-color: #c9dfea; box-shadow: 0 2px 9px rgba(12, 88, 132, .07); }
.panelHead { border-bottom-color: #dcebf2; }
.panelHead::after { content: ""; width: 34px; height: 2px; position: absolute; left: 0; bottom: -2px; background: var(--cy-tech-cyan); }
.panelHead { position: relative; }
.yardStatusCard { border-color: #d5e6ee; background: linear-gradient(180deg, #fff, #f5fbfe); }
.progress i { background: linear-gradient(90deg, #078fdc, var(--cy-tech-cyan)); box-shadow: 0 0 8px rgba(37,197,242,.24); }

.loginShell { border-top-color: var(--cy-tech-cyan); border-color: #bcd8e6; box-shadow: 0 24px 62px rgba(13, 87, 132, .19); }
.loginShowcase {
  background:
    linear-gradient(rgba(7,143,224,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,143,224,.055) 1px, transparent 1px),
    radial-gradient(circle at 18% 18%, rgba(37,197,242,.15), transparent 28%),
    linear-gradient(145deg, #f7fcff, #deeff7);
  background-size: 24px 24px, 24px 24px, auto, auto;
}
.loginShowcase::after { height: 2px; background: repeating-linear-gradient(90deg, var(--cy-tech-cyan) 0 26px, transparent 26px 44px); opacity: .6; }
.loginFeatureGrid > div { border-top-color: var(--cy-tech-cyan); border-color: #c9e2ed; box-shadow: 0 3px 10px rgba(7,113,176,.06); }
.fieldShell:focus-within { border-color: var(--cy-tech-cyan); box-shadow: 0 0 0 3px rgba(37,197,242,.12); }
.loginSubmit { background: linear-gradient(90deg, #0795e5, #087fc8); }

.workspaceBar { border-bottom-color: var(--cy-tech-cyan); }
.portalAdmin .sectionHeading { border-left-color: var(--cy-tech-cyan); background: linear-gradient(90deg, #fff, #f3fbff); }

/* Module loading overlay - v2.2.1 */
.moduleLaunchOverlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(37,197,242,.11), transparent 34%),
    rgba(7, 32, 49, .78);
  backdrop-filter: blur(6px);
  transition: opacity .18s ease;
}
.moduleLaunchOverlay.show { opacity: 1; pointer-events: auto; }
.moduleLaunchPanel {
  width: min(410px, calc(100vw - 34px));
  padding: 24px 28px 22px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(112,223,250,.62);
  border-top: 3px solid var(--cy-tech-cyan);
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #eefaff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 26px 64px rgba(0,20,34,.38), 0 0 34px rgba(37,197,242,.15);
}
.moduleLaunchPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(7,143,224,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,143,224,.045) 1px, transparent 1px);
  background-size: 20px 20px;
}
.moduleLaunchPanel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6fe7ff, transparent);
  animation: launchTopScan 1.8s linear infinite;
}
.moduleLaunchPanel > * { position: relative; z-index: 1; }
.moduleLaunchBrand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.moduleLaunchBrand img { width: 108px; height: 38px; object-fit: contain; display: block; }
.moduleLaunchBrand span { padding-left: 10px; border-left: 1px solid #c9e4ef; color: #64869a; font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.launchSignal { height: 27px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.launchSignal i { width: 5px; border-radius: 2px 2px 0 0; background: var(--cy-tech-blue); animation: signalBars .85s ease-in-out infinite alternate; }
.launchSignal i:nth-child(1) { height: 11px; }
.launchSignal i:nth-child(2) { height: 23px; animation-delay: -.25s; background: var(--cy-tech-cyan); }
.launchSignal i:nth-child(3) { height: 16px; animation-delay: -.5s; }
.moduleLaunchPanel strong { margin-top: 11px; display: block; color: #174d6d; font-size: 17px; line-height: 1.25; letter-spacing: .015em; }
.moduleLaunchMessage { margin: 8px auto 0; display: block; max-width: 310px; color: #56798d; font-size: 12px; line-height: 1.45; font-weight: 700; }
.launchTrack { height: 4px; margin-top: 19px; display: block; overflow: hidden; border-radius: 99px; background: #d8eaf2; box-shadow: inset 0 1px 2px rgba(14,83,121,.09); }
.launchTrack i { width: 45%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--cy-tech-blue), var(--cy-tech-cyan)); animation: launchScan 1s ease-in-out infinite; box-shadow: 0 0 8px rgba(37,197,242,.45); }
.moduleLaunchHint { margin-top: 9px; display: block; color: #8aa0ad; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@keyframes signalBars { to { height: 6px; opacity: .55; } }
@keyframes launchScan { from { transform: translateX(-105%); } to { transform: translateX(230%); } }
@keyframes launchTopScan { from { transform: translateX(-70%); opacity: .25; } 50% { opacity: 1; } to { transform: translateX(70%); opacity: .25; } }

@media (max-width: 820px) {
  .operationsMeta { display: none; }
  .portalTopNav { background: linear-gradient(180deg, #078fdc, #087fc8); }
  .portalTopNav .portalNavItem.active { box-shadow: inset 4px 0 0 var(--cy-tech-cyan); }
}

@media (prefers-reduced-motion: reduce) {
  .networkLive i, .launchSignal i, .launchTrack i, .moduleLaunchPanel::after { animation: none !important; }
}

/* v2.3.0 CloudYMS Messenger file attachments */
.composer {
  display: block;
  padding: 10px 12px 12px;
  background: #fff;
}
.composerRow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.composerRow textarea { min-height: 44px; }
.composerAttachBtn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--cy-line, #d5e0ea);
  border-radius: 11px;
  background: #f7fafc;
  color: var(--cy-blue-700, #0f5fa8);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .15s ease;
}
.composerAttachBtn:hover:not(:disabled) { background:#eaf4fb; border-color:#a8cde8; transform:translateY(-1px); }
.composerAttachBtn:disabled { cursor:not-allowed; opacity:.5; }
.composerAttachBtn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.composerAttachmentHint { display:block; color:#8b99a8; font-size:9px; padding:6px 2px 0 50px; }
.messageAttachmentQueue {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 0 8px;
}
.pendingAttachment {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 24px;
  align-items:center;
  gap:7px;
  min-width:190px;
  max-width:100%;
  padding:6px 7px;
  border:1px solid #d7e4ef;
  border-radius:10px;
  background:#f6faff;
}
.pendingAttachmentIcon {
  height:30px;
  min-width:34px;
  border-radius:8px;
  background:#dceefb;
  color:#175e95;
  font-size:8px;
  font-weight:900;
  display:grid;
  place-items:center;
  padding:0 4px;
}
.pendingAttachmentText { min-width:0; display:flex; flex-direction:column; }
.pendingAttachmentText strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:#294b68; }
.pendingAttachmentText small { font-size:8px; color:#8393a2; margin-top:2px; }
.pendingAttachment button { border:0; background:transparent; color:#7b8b9a; font-size:19px; cursor:pointer; line-height:1; padding:0; }
.composerUploadStatus {
  margin:7px 2px 0 50px;
  border-radius:8px;
  padding:7px 9px;
  font-size:10px;
  font-weight:700;
  background:#edf6fc;
  color:#24658e;
}
.composerUploadStatus.working::before {
  content:'';
  width:10px;
  height:10px;
  display:inline-block;
  margin-right:7px;
  vertical-align:-1px;
  border:2px solid #9ac8e5;
  border-top-color:#176aa7;
  border-radius:50%;
  animation:cyMessageSpin .7s linear infinite;
}
.composerUploadStatus.error { background:#fff0f1; color:#9e2e3d; }
@keyframes cyMessageSpin { to { transform:rotate(360deg); } }
.composer.draggingFiles { background:#eef8ff; box-shadow:inset 0 0 0 2px #75b5df; }
.messageAttachments { display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.messageFileAttachment {
  min-width:220px;
  max-width:330px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 20px;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius:11px;
  background:#fff;
  border:1px solid rgba(26,77,116,.16);
  color:#264964;
  box-shadow:0 2px 7px rgba(18,55,85,.08);
}
.messageFileAttachment:hover { border-color:#9ac5e2; box-shadow:0 4px 11px rgba(18,71,108,.12); }
.messageFileType {
  height:36px;
  border-radius:8px;
  background:#e5f2fb;
  color:#17659d;
  font-size:8px;
  font-weight:900;
  display:grid;
  place-items:center;
  padding:0 4px;
}
.messageFileText { min-width:0; display:flex; flex-direction:column; }
.messageFileText strong { color:#244760; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.messageFileText small { color:#7a8c9b!important; opacity:1!important; font-size:8px!important; margin-top:3px!important; }
.messageFileArrow { color:#4785ad; font-size:16px; text-align:center; }
.messageImageAttachment {
  width:min(290px,100%);
  border-radius:11px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(25,73,109,.16);
  box-shadow:0 2px 7px rgba(18,55,85,.08);
}
.messageImageAttachment>a { display:block; color:#2a4b65; }
.messageImageAttachment img { display:block; width:100%; max-height:210px; object-fit:cover; background:#edf2f6; }
.messageImageAttachment>a>span { display:block; padding:7px 9px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:800; }
.messageImageAttachment>div { display:flex; justify-content:space-between; gap:8px; padding:0 9px 7px; }
.messageImageAttachment>div small { color:#7f8f9d!important; opacity:1!important; margin:0!important; font-size:8px!important; }
.messageImageAttachment>div a { color:#176aa7; font-size:9px; font-weight:800; }
.bubble.mine .messageFileAttachment,
.bubble.mine .messageImageAttachment { border-color:rgba(255,255,255,.45); }
.messageTimestamp { clear:both; }

@media(max-width:720px){
  .composerAttachmentHint { padding-left:0; }
  .composerUploadStatus { margin-left:0; }
  .pendingAttachment { min-width:100%; }
  .messageFileAttachment { min-width:0; width:100%; }
  .messageImageAttachment { width:100%; }
}


/* v2.3.1 - suppress casual URL copy/share callouts on Portal module launch controls. */
[data-protected-launch="1"],
.moduleCard[data-module-key] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
}
[data-protected-launch="1"] *,
.moduleCard[data-module-key] * {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}


/* v2.3.2 - Resume last page / recent pages */
.resumeWorkspace {
  margin: -5px 0 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: stretch;
}
.resumeLastPage,
.recentPagesToggle {
  border: 1px solid #bddbe9;
  background: linear-gradient(180deg, #ffffff, #f4fbfe);
  box-shadow: 0 3px 11px rgba(7, 83, 126, .07);
  color: #234f69;
}
.resumeLastPage {
  min-height: 58px;
  padding: 9px 14px 9px 10px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  border-radius: 7px;
  cursor: pointer;
}
.resumeLastPage:hover { border-color: #69bfe4; background: #f5fcff; box-shadow: 0 5px 16px rgba(7, 111, 171, .12); }
.resumeIcon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #e4f5fc; color: #078ad2; font-size: 19px; font-weight: 900; }
.resumeCopy { min-width: 0; display: flex; flex-direction: column; }
.resumeCopy small { color: #6b8796; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.resumeCopy strong { margin-top: 2px; color: #173f58; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumeCopy span { margin-top: 1px; color: #728996; font-size: 9px; }
.resumeArrow { color: #087fc8; font-size: 9px; font-weight: 900; white-space: nowrap; }
.recentPagesControl { position: relative; min-width: 168px; }
.recentPagesToggle { width: 100%; height: 100%; min-height: 58px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; cursor: pointer; font-size: 10px; font-weight: 850; }
.recentPagesToggle em { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: #e2f3fb; color: #087fc8; font-size: 8px; font-style: normal; }
.recentPagesToggle i { font-style: normal; color: #7b94a2; }
.recentPagesMenu { width: min(360px, calc(100vw - 28px)); position: absolute; z-index: 75; top: calc(100% + 6px); right: 0; padding: 6px; border: 1px solid #bad8e7; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(5, 47, 73, .20); }
.recentPagesMenu button { width: 100%; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid #edf3f6; background: #fff; color: #264e66; text-align: left; cursor: pointer; }
.recentPagesMenu button:last-child { border-bottom: 0; }
.recentPagesMenu button:hover { background: #f3faff; }
.recentPagesMenu button span { min-width: 0; display: flex; flex-direction: column; }
.recentPagesMenu button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.recentPagesMenu button small { margin-top: 2px; color: #7a909c; font-size: 8px; }
.recentPagesMenu button i { color: #0789d2; font-style: normal; }

/* v2.3.2 - Messenger soft-delete / 45-day retention */
.messageBubbleFooter { margin-top: 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.messageBubbleFooter .messageTimestamp { margin: 0; }
.messageDeleteButton { padding: 2px 6px; border: 0; border-radius: 5px; background: transparent; color: #718795; font-size: 8px; font-weight: 800; cursor: pointer; opacity: .55; }
.messageDeleteButton:hover { opacity: 1; background: rgba(23, 86, 126, .08); color: #b44b48; }
.bubble.mine .messageDeleteButton { color: rgba(255,255,255,.78); }
.bubble.mine .messageDeleteButton:hover { background: rgba(255,255,255,.14); color: #fff; }
.messengerRetentionStatus { padding: 6px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e2edf3; background: #f7fbfd; }
.messengerRetentionStatus span { color: #718894; font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.messengerRetentionStatus strong { color: #557080; font-size: 8px; font-weight: 750; text-align: right; }

@media (max-width: 720px) {
  .resumeWorkspace { grid-template-columns: 1fr; }
  .recentPagesControl { min-width: 0; }
  .recentPagesToggle { min-height: 42px; }
  .recentPagesMenu { left: 0; right: auto; width: 100%; }
  .resumeArrow { display: none; }
  .messengerRetentionStatus { align-items: flex-start; flex-direction: column; gap: 2px; }
  .messengerRetentionStatus strong { text-align: left; }
  .messageDeleteButton { opacity: .8; }
}


/* v2.3.5 - personalized per-user application card layout */
.moduleLayoutToggle,
.moduleLayoutReset { white-space: nowrap; }
.moduleLayoutStatus {
  min-width: 0;
  color: #6e8798;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}
.moduleLayoutStatus.saving { color: #0d79b8; }
.moduleLayoutStatus.saved { color: #16845c; }
.moduleLayoutStatus.error { color: #b44343; }
.moduleDragHandle {
  display: none;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid #9fcadd;
  border-radius: 3px;
  background: #eef9fd;
  color: #0879b5;
  font-size: 17px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.moduleGrid.layoutEditing .moduleCard {
  cursor: default;
  border-style: dashed;
  border-color: #77c7df;
  box-shadow: 0 0 0 2px rgba(37,197,242,.06), 0 4px 12px rgba(7,103,161,.08);
}
.moduleGrid.layoutEditing .moduleCard:hover { transform: none; }
.moduleGrid.layoutEditing .moduleDragHandle { display: grid; }
.moduleGrid.layoutEditing .favoriteToggle,
.moduleGrid.layoutEditing .openArrow { display: none; }
.moduleGrid.layoutEditing .moduleCardActions { justify-content: center; }
.moduleGrid.layoutEditing .moduleCard::before { opacity: .25; }
.moduleGrid.layoutEditing .moduleCard.layoutDragging {
  opacity: .58;
  transform: scale(.985);
  border-style: solid;
  border-color: #159ecb;
  box-shadow: 0 10px 24px rgba(7,103,161,.18);
  z-index: 5;
}
.moduleGrid.layoutEditing.layoutDragActive .moduleCard:not(.layoutDragging) { transition: transform .12s ease, box-shadow .12s ease; }
.moduleLayoutEditing .moduleCard[data-module-key] { touch-action: pan-y; }
.moduleGrid.layoutEditing .moduleDragHandle { touch-action: none; }

@media(max-width:900px){
  .moduleLayoutStatus { order: 10; width: 100%; white-space: normal; }
  .moduleLayoutToggle, .moduleLayoutReset { min-height: 36px; }
}

/* v2.3.6 username-level module access */
.usernameAccessPanel { border: 1px solid #cbdde9; border-radius: 4px; background: #f7fafc; padding: 14px; }
.usernameAccessHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.usernameAccessHeader > div { min-width: 0; }
.usernameAccessHeader small { display: block; margin-top: 4px; line-height: 1.45; }
.usernameRestrictionToggle { flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 8px; min-height: 38px; margin: 0 !important; padding: 8px 11px; border: 1px solid #aecfe4; border-radius: 4px; background: #fff; color: #164d70; font-weight: 800; cursor: pointer; }
.usernameRestrictionToggle input { min-height: 0 !important; width: 16px; height: 16px; margin: 0; }
.usernameAccessControls { margin-top: 13px; padding-top: 13px; border-top: 1px solid #d7e5ee; }
.userAccessSearch { display: grid !important; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 10px !important; }
.userAccessSearch input { width: 100%; }
.moduleUserPicker { max-height: 300px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 4px; border: 1px solid #d3e0e9; border-radius: 4px; background: #fff; }
.moduleUserOption { min-width: 0; margin: 0 !important; padding: 9px 10px; display: flex !important; align-items: center; gap: 9px; border: 1px solid #dbe7ee; border-radius: 4px; background: #fbfdfe; cursor: pointer; }
.moduleUserOption:hover { border-color: #8dbddd; background: #f2f9fd; }
.moduleUserOption:has(input:checked) { border-color: #278bc9; background: #eaf6fd; box-shadow: inset 3px 0 0 #0789d5; }
.moduleUserOption input { flex: 0 0 auto; min-height: 0 !important; width: 16px; height: 16px; margin: 0; }
.moduleUserOption span { min-width: 0; display: block; }
.moduleUserOption strong, .moduleUserOption small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moduleUserOption strong { color: #183c54; font-size: 12px; }
.moduleUserOption small { margin-top: 2px; color: #6c8394; font-size: 10px; }
.usernameAccessSummary { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.usernameAccessSummary strong { color: #087fc8; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.usernameAccessSummary small { text-align: right; }
.restrictedUserSummary { color: #9b5d00 !important; }
.restrictedUserSummary strong { color: #7e4800; }
@media (max-width: 760px) {
  .usernameAccessHeader, .usernameAccessSummary { align-items: stretch; flex-direction: column; }
  .usernameRestrictionToggle { width: 100%; }
  .userAccessSearch { grid-template-columns: 1fr; }
  .moduleUserPicker { grid-template-columns: 1fr; max-height: 340px; }
  .usernameAccessSummary small { text-align: left; }
}

/* v2.3.6.4 protected-link security message */
.cySecurityDialog[hidden] { display: none !important; }
.cySecurityDialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .15s ease;
}
.cySecurityDialog.show { opacity: 1; }
.cySecurityBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 27, 46, .48);
  backdrop-filter: blur(3px);
}
.cySecurityPanel {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  padding: 24px 26px 22px;
  border: 1px solid #c8ddea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(5, 28, 48, .28);
  text-align: center;
  transform: translateY(8px) scale(.985);
  transition: transform .15s ease;
}
.cySecurityDialog.show .cySecurityPanel { transform: translateY(0) scale(1); }
.cySecurityBrand { height: 36px; margin-bottom: 10px; display: grid; place-items: center; }
.cySecurityBrand img { max-width: 138px; max-height: 36px; object-fit: contain; }
.cySecurityIcon {
  width: 48px;
  height: 48px;
  margin: 2px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf6fd;
  border: 1px solid #b9dcef;
  font-size: 22px;
}
.cySecurityPanel h2 { margin: 0; color: var(--cy-ink); font-size: 19px; letter-spacing: -.01em; }
.cySecurityPanel p { margin: 9px auto 18px; max-width: 320px; color: #587187; font-size: 13px; line-height: 1.5; }
.cySecurityOk {
  min-width: 104px;
  min-height: 40px;
  padding: 9px 22px;
  border: 0;
  border-radius: 9px;
  background: var(--cy-blue-600);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(8, 117, 201, .22);
}
.cySecurityOk:hover { filter: brightness(.96); }
.cySecurityOk:focus-visible { outline: 3px solid rgba(23, 150, 232, .28); outline-offset: 3px; }


/* v2.4.0 Developer Audit + Usage Dashboard */
.auditDashboard { background:#eef4f7; }
.auditPage { max-width:1720px; padding:20px 22px 32px; }
.auditHero { padding:16px 18px !important; border-left:6px solid var(--cy-tech-cyan, #0789d5) !important; }
.auditHero h1 { margin:2px 0 3px; font-size:26px; }
.auditHero p { max-width:900px; font-size:12px; line-height:1.5; }
.auditPeriodBadge { min-width:230px; padding:10px 13px; border:1px solid #c5dce8; border-radius:5px; background:#f8fcfe; text-align:right; }
.auditPeriodBadge strong,.auditPeriodBadge span { display:block; }
.auditPeriodBadge strong { color:#123e5d; font-size:12px; }
.auditPeriodBadge span { margin-top:3px; color:#6f8492; font-size:10px; }
.auditFilters { display:grid; grid-template-columns:145px 145px 145px minmax(170px,1fr) minmax(190px,1.2fr) auto auto; gap:9px; align-items:end; margin:0 0 12px; padding:11px 12px; border:1px solid #c9dfe9; border-radius:5px; background:#fff; box-shadow:0 2px 8px rgba(20,70,96,.05); }
.auditFilters label { display:flex; flex-direction:column; gap:4px; margin:0; color:#506b7b; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.auditFilters select,.auditFilters input { width:100%; min-height:38px; padding:8px 9px; border:1px solid #cbdce5; border-radius:4px; background:#fbfdfe; color:#183f57; font-size:12px; text-transform:none; letter-spacing:0; }
.auditFilters .btn { min-height:38px; border-radius:4px; }
.auditKpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:11px; }
.auditKpi { min-width:0; padding:13px 15px; border:1px solid #c9dfe9; border-top:3px solid #0789d5; border-radius:5px; background:#fff; box-shadow:0 2px 8px rgba(20,70,96,.05); }
.auditKpi:nth-child(2){border-top-color:#15965d}.auditKpi:nth-child(3){border-top-color:#7359b6}.auditKpi:nth-child(4){border-top-color:#c77a13}
.auditKpi span { display:block; color:#647e8d; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.auditKpi strong { display:block; margin:5px 0 1px; color:#123e5d; font-size:26px; line-height:1.05; }
.auditKpi small { color:#7b8f9c; font-size:10px; }
.auditGridTwo { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:11px; }
.auditPanel { border-radius:5px !important; padding:14px !important; }
.auditPanel .panelHead { margin-bottom:11px; padding-bottom:8px; }
.auditPanel .panelHead small { color:#7e919d; font-size:10px; }
.auditBarList { display:flex; flex-direction:column; gap:8px; }
.auditBarRow { display:grid; grid-template-columns:minmax(130px,210px) minmax(120px,1fr) 72px; gap:10px; align-items:center; }
.auditBarLabel { min-width:0; }
.auditBarLabel strong,.auditBarLabel small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auditBarLabel strong { color:#24465b; font-size:11px; }
.auditBarLabel small { margin-top:2px; color:#8a9aa4; font-size:9px; }
.auditBarTrack { height:15px; overflow:hidden; border:1px solid #d7e4ea; border-radius:3px; background:#edf3f6; }
.auditBarTrack i { display:block; height:100%; min-width:2px; }
.auditBarValue { color:#173f58; font-size:11px; text-align:right; white-space:nowrap; }
.auditModuleBar { background:#0789d5; }
.auditUserColor0{background:#0875c9!important}.auditUserColor1{background:#15965d!important}.auditUserColor2{background:#7359b6!important}.auditUserColor3{background:#c77a13!important}.auditUserColor4{background:#078178!important}.auditUserColor5{background:#c43f4c!important}.auditUserColor6{background:#526d82!important}.auditUserColor7{background:#4d8aa8!important}.auditUserColor8{background:#9b6dba!important}.auditUserColor9{background:#6e9f45!important}.auditUserColor10{background:#d26d3d!important}.auditUserColor11{background:#3261a8!important}
.auditDailyPanel { margin-bottom:11px; }
.auditLegend { display:flex; flex-wrap:wrap; gap:6px 12px; margin:-2px 0 11px; }
.auditLegend span { display:inline-flex; align-items:center; gap:5px; color:#597383; font-size:9px; }
.auditLegend i { width:9px; height:9px; border-radius:2px; }
.auditDailyChart { display:flex; flex-direction:column; gap:7px; }
.auditDailyRow { display:grid; grid-template-columns:58px minmax(160px,1fr) 72px; gap:9px; align-items:center; }
.auditDayLabel strong,.auditDayLabel small { display:block; }
.auditDayLabel strong { color:#274c62; font-size:10px; }
.auditDayLabel small { color:#8798a2; font-size:9px; }
.auditDailyTrack { height:23px; display:flex; align-items:stretch; overflow:hidden; border:1px solid #d7e4ea; border-radius:3px; background:repeating-linear-gradient(90deg,#edf3f6 0,#edf3f6 24.7%,#dfe9ee 25%,#edf3f6 25.3%,#edf3f6 49.7%,#dfe9ee 50%,#edf3f6 50.3%,#edf3f6 74.7%,#dfe9ee 75%,#edf3f6 75.3%); }
.auditDailyTrack i { display:block; height:100%; min-width:1px; }
.auditDailyRow > strong { color:#173f58; font-size:10px; text-align:right; }
.auditLowerGrid { align-items:stretch; }
.auditNowList { display:flex; flex-direction:column; gap:6px; }
.auditNowRow { display:grid; grid-template-columns:38px 1fr auto; gap:9px; align-items:center; padding:7px 8px; border:1px solid #e0e9ed; border-radius:4px; background:#fbfdfe; }
.auditNowRow .avatar { width:34px; height:34px; font-size:10px; }
.auditNowRow span:nth-child(2) strong,.auditNowRow span:nth-child(2) small { display:block; }
.auditNowRow span:nth-child(2) strong { color:#24465b; font-size:11px; }
.auditNowRow span:nth-child(2) small { margin-top:2px; color:#81939f; font-size:9px; }
.auditNowRow em { color:#6d8492; font-size:9px; font-style:normal; }
.auditRules p { margin:0 0 9px; color:#5c7484; font-size:11px; line-height:1.55; }
.auditRules p:last-child { margin-bottom:0; }
.auditRules strong { color:#214960; }
.auditTablePanel { margin-bottom:11px; }
.auditTableWrap { width:100%; overflow:auto; border:1px solid #d9e5ea; border-radius:4px; }
.auditTable { width:100%; min-width:920px; border-collapse:collapse; background:#fff; }
.auditTable th { position:sticky; top:0; z-index:2; padding:8px 9px; border-bottom:2px solid #cbdde6; background:#eef6f9; color:#496a7c; font-size:9px; text-align:left; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.auditTable td { padding:8px 9px; border-bottom:1px solid #e7eef2; color:#476477; font-size:10px; vertical-align:top; }
.auditTable tbody tr:hover { background:#f6fbfd; }
.auditTable td strong,.auditTable td small { display:block; }
.auditTable td strong { color:#254b62; font-size:10px; }
.auditTable td small { margin-top:2px; color:#8697a2; font-size:9px; max-width:480px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auditTable code { color:#566f7e; font-size:9px; }
.auditDetails { max-width:520px; white-space:normal; line-height:1.45; }
.auditEventPill { display:inline-flex; padding:3px 6px; border:1px solid #c9dfe9; border-radius:3px; background:#eef7fb; color:#17658f; font-size:8px; font-weight:850; letter-spacing:.03em; }
.auditEmptyCell { padding:22px !important; color:#81929d !important; text-align:center; }
@media(max-width:1100px){.auditFilters{grid-template-columns:repeat(3,minmax(0,1fr))}.auditGridTwo{grid-template-columns:1fr}.auditKpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.auditPage{padding:12px}.auditHero{align-items:flex-start!important}.auditPeriodBadge{width:100%;text-align:left}.auditFilters{grid-template-columns:1fr 1fr}.auditFilters label:nth-of-type(4),.auditFilters label:nth-of-type(5){grid-column:1/-1}.auditKpis{grid-template-columns:1fr 1fr}.auditKpi strong{font-size:21px}.auditBarRow{grid-template-columns:110px 1fr 58px;gap:6px}.auditDailyRow{grid-template-columns:48px 1fr 55px;gap:6px}.auditLegend{max-height:75px;overflow:auto}.auditDashboard .topActions .btn:not(:last-child){display:none}}
@media(max-width:430px){.auditFilters{grid-template-columns:1fr}.auditFilters label{grid-column:auto!important}.auditKpis{grid-template-columns:1fr 1fr}.auditBarRow{grid-template-columns:1fr 58px}.auditBarTrack{grid-column:1/-1;grid-row:2}.auditBarLabel{grid-column:1}.auditBarValue{grid-column:2}.auditDailyRow{grid-template-columns:44px 1fr}.auditDailyRow>strong{grid-column:2}.auditDailyTrack{grid-column:2}}


/* v2.4.6 - per-user customizable Favorites layout */
.favoriteQuickAccessTitle { min-height: 25px; }
.favoriteQuickAccessTitle > strong { flex: 0 0 auto; }
.favoriteLayoutStatus { flex: 1 1 auto; min-width: 0; margin-left: 5px; color: #6f8797; font-size: 8px; font-weight: 800; letter-spacing: .02em; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favoriteLayoutStatus.saved { color: #16845c; }
.favoriteLayoutControls { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.favoriteLayoutButton { min-height: 24px; padding: 3px 7px; border: 1px solid #bed7e7; border-radius: 5px; background: #fff; color: #1d607f; font: inherit; font-size: 8px; font-weight: 900; letter-spacing: .02em; cursor: pointer; text-transform: none; }
.favoriteLayoutButton:hover { border-color: #72bbdc; background: #f0faff; }
.favoriteColumnsControl { display: inline-flex; align-items: center; gap: 4px; color: #718a9a; font-size: 8px; font-weight: 850; text-transform: none; }
.favoriteColumnsControl select { height: 24px; min-height: 24px; padding: 1px 20px 1px 6px; border: 1px solid #bed7e7; border-radius: 5px; background: #fff; color: #1d607f; font-size: 9px; font-weight: 850; }
#favoriteModules[data-favorite-columns="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
#favoriteModules[data-favorite-columns="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
#favoriteModules[data-favorite-columns="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
#favoriteModules.favoriteLayoutEditing .moduleCard { cursor: default; border-style: dashed; border-color: #79c5dd; box-shadow: 0 0 0 2px rgba(37,197,242,.05),0 4px 12px rgba(7,103,161,.08); }
#favoriteModules.favoriteLayoutEditing .moduleCard:hover { transform: none; }
#favoriteModules.favoriteLayoutEditing .moduleDragHandle { display: grid; }
#favoriteModules.favoriteLayoutEditing .favoriteToggle,
#favoriteModules.favoriteLayoutEditing .openArrow { display: none; }
#favoriteModules.favoriteLayoutEditing .moduleCardActions { justify-content: center; }
#favoriteModules.favoriteLayoutEditing .moduleDragHandle { touch-action: none; cursor: grab; }
#favoriteModules.favoriteLayoutEditing .moduleCard.favoriteLayoutDragging { opacity: .58; transform: scale(.985); border-style: solid; border-color: #159ecb; box-shadow: 0 10px 24px rgba(7,103,161,.18); z-index: 5; }
#favoriteModules.favoriteLayoutEditing.favoriteDragActive .moduleCard:not(.favoriteLayoutDragging) { transition: transform .12s ease,box-shadow .12s ease; }
@media(max-width:900px){
  #favoriteModules[data-favorite-columns="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .favoriteQuickAccessTitle { flex-wrap: wrap; }
  .favoriteLayoutStatus { order: 4; flex-basis: 100%; margin-left: 20px; white-space: normal; }
}
@media(max-width:620px){
  #favoriteModules[data-favorite-columns="2"],#favoriteModules[data-favorite-columns="3"],#favoriteModules[data-favorite-columns="4"] { grid-template-columns: 1fr; }
  .favoriteLayoutControls { width: 100%; margin: 4px 0 0 20px; }
}


/* v2.4.8 - explicit Favorites sorting controls */
.favoriteSortControls { display:none; align-items:center; gap:3px; }
#favoriteModules.favoriteLayoutEditing .favoriteSortControls { display:inline-flex; }
.favoriteSortControl {
  width:23px; height:23px; display:grid; place-items:center;
  border:1px solid #9fcadd; border-radius:3px; background:#fff; color:#0879b5;
  font-size:13px; font-weight:900; line-height:1; cursor:pointer; user-select:none;
}
.favoriteSortControl:hover,.favoriteSortControl:focus { border-color:#58b5d8; background:#eef9fd; outline:none; }
.favoriteSortControl.isDisabled { opacity:.28; cursor:not-allowed; pointer-events:none; }
#favoriteModules.favoriteLayoutEditing .moduleCardActions { gap:4px; }
#favoriteModules.favoriteLayoutEditing .moduleDragHandle { margin-left:1px; }
@media(max-width:620px){
  .favoriteSortControl,.moduleDragHandle { width:28px; height:28px; }
}


/* v2.5.0 - per-user dashboard card colors */
.moduleColorButton {
  display:none;
  width:23px;
  height:23px;
  place-items:center;
  border:1px solid #9fcadd;
  border-radius:3px;
  background:#fff;
  color:#0879b5;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.moduleGrid.layoutEditing .moduleColorButton { display:grid; }
.moduleColorButton:hover,.moduleColorButton:focus { border-color:#58b5d8; background:#eef9fd; outline:none; }
.moduleCard.hasCustomCardColor {
  background:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 18px), rgba(255,255,255,.10) calc(100% - 18px), rgba(255,255,255,.10) calc(100% - 16px)),
    var(--custom-card-color);
  border-color:color-mix(in srgb,var(--custom-card-color) 70%,#7296aa);
}
.moduleCard.hasCustomCardColor .moduleText strong { color:var(--custom-card-ink); }
.moduleCard.hasCustomCardColor .moduleText small,
.moduleCard.hasCustomCardColor .moduleRecoveryStatus { color:var(--custom-card-muted); }
.moduleCard.hasCustomCardColor .favoriteToggle,
.moduleCard.hasCustomCardColor .openArrow { background:var(--custom-card-control); color:var(--custom-card-ink); }
.moduleCard.hasCustomCardColor::before { border-color:color-mix(in srgb,var(--custom-card-ink) 42%,transparent); }
.moduleColorPicker {
  position:fixed;
  z-index:5000;
  width:238px;
  padding:10px;
  border:1px solid #afd0e2;
  border-radius:8px;
  background:#fff;
  box-shadow:0 16px 38px rgba(15,75,110,.22);
}
.moduleColorPicker[hidden] { display:none; }
.moduleColorPickerHead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; color:#183d60; font-size:11px; }
.moduleColorPickerClose { width:25px; height:25px; border:1px solid #cedfe8; border-radius:4px; background:#f8fbfd; color:#58788e; cursor:pointer; font-size:17px; line-height:1; }
.moduleColorSwatches { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:10px; }
.moduleColorSwatch { width:28px; height:28px; padding:0; border:1px solid rgba(36,70,90,.22); border-radius:5px; background:var(--swatch); cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,.38); }
.moduleColorSwatch:hover,.moduleColorSwatch:focus { outline:2px solid #168fc5; outline-offset:1px; }
.moduleCustomColor { display:grid; grid-template-columns:auto 38px 1fr; align-items:center; gap:7px; margin:0 0 8px; color:#58788e; font-size:9px; font-weight:800; }
.moduleCustomColor input[type="color"] { width:38px; height:28px; padding:1px; border:1px solid #bfd4df; border-radius:4px; background:#fff; cursor:pointer; }
.moduleCustomColor button,.moduleColorReset { min-height:28px; border:1px solid #bed7e7; border-radius:5px; background:#f5fbfe; color:#1d607f; font-size:9px; font-weight:850; cursor:pointer; }
.moduleColorReset { width:100%; background:#fff; }
.moduleCustomColor button:hover,.moduleColorReset:hover { border-color:#72bbdc; background:#eef9fd; }
@media(max-width:600px){
  .moduleColorPicker { width:min(238px,calc(100vw - 20px)); }
  .moduleColorSwatches { grid-template-columns:repeat(6,1fr); }
  .moduleColorButton,.moduleDragHandle { width:28px; height:28px; }
}


/* v2.5.0 - CloudYMS blue/steel dashboard refresh + reusable My Colors palette */
body.portalHome{
  background:
    radial-gradient(circle at 10% 0%, rgba(52,119,164,.12), transparent 32rem),
    linear-gradient(180deg,#eef6fb 0%,#f7fafc 42%,#f3f7fa 100%);
}
.portalHome .heroPanel,
.portalHome .quickAccessSection,
.portalHome .moduleCard:not(.hasCustomCardColor){
  border-color:#c9dbe7;
}
.portalHome .heroPanel{
  background:linear-gradient(135deg,#f8fcff 0%,#e8f3fa 100%);
}
.portalHome .sectionHeading .eyebrow,
.portalHome .quickAccessTitle{
  color:#245d7a;
}
.portalHome .moduleCard:not(.hasCustomCardColor){
  background:linear-gradient(180deg,#ffffff 0%,#f1f7fb 100%);
}
.moduleColorPicker{width:280px;max-width:calc(100vw - 20px)}
.moduleColorPickerLabel{
  margin:10px 0 6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#557184;
}
.moduleSavedColorSwatches{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-height:28px;
  align-items:center;
}
.savedColorItem{position:relative;display:inline-flex}
.savedColorItem .savedColorDelete{
  position:absolute;
  right:-5px;
  top:-6px;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid rgba(20,49,68,.18);
  background:#fff;
  color:#294b61;
  font-size:12px;
  line-height:12px;
  padding:0;
  cursor:pointer;
}
.savedColorEmpty{font-size:12px;color:#6d8493}
.moduleCustomColor{flex-wrap:wrap}
#moduleCustomColorSave{
  border:1px solid #245d7a;
  background:#eef7fc;
  color:#173b57;
  border-radius:8px;
  padding:6px 9px;
  font-weight:700;
  cursor:pointer;
}


/* -------------------------------------------------------------------------
 * v2.5.1 OfficeUI shell alignment
 * Matches the TSG OfficeUI v36 shell colors/style while deliberately leaving
 * all dashboard/application cards and saved custom card colors unchanged.
 * ------------------------------------------------------------------------- */
body.portalHome{
  --cy-topbar:70px;
  background:#eef3f7!important;
  background-image:none!important;
  color:#173247;
}
body.portalHome::before{display:none!important;}

/* OfficeUI dark navy command header */
.portalHome .topbar{
  height:var(--cy-topbar)!important;
  min-height:var(--cy-topbar)!important;
  padding:10px clamp(14px,2vw,28px)!important;
  color:#fff!important;
  background:#173b5d!important;
  border:0!important;
  border-bottom:3px solid #2c8bc0!important;
  box-shadow:0 4px 14px rgba(23,59,93,.18)!important;
}
.portalHome .brand{min-width:300px!important;gap:12px!important;color:#fff!important;}
.portalHome .brandMark{
  width:142px!important;
  height:48px!important;
  padding:3px 8px!important;
  border:1px solid #cfdbe5!important;
  border-radius:7px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.portalHome .brandMark img{width:136px!important;max-height:44px!important;object-fit:contain!important;}
.portalHome .brand div{display:flex!important;flex-direction:column!important;min-width:0;}
.portalHome .brand strong{
  color:#fff!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.35px!important;
  text-transform:none!important;
}
.portalHome .brand span:not(.brandMark){
  margin-top:4px!important;
  color:#c8ddeb!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.55px!important;
  text-transform:uppercase!important;
}

/* Search / user controls use the same compact OfficeUI command-pill treatment. */
.portalHome .globalSearch{
  height:36px!important;
  border:1px solid #416783!important;
  border-radius:6px!important;
  background:#244b6b!important;
  box-shadow:none!important;
  color:#fff!important;
}
.portalHome .globalSearch input{color:#fff!important;}
.portalHome .globalSearch input::placeholder{color:#c8ddeb!important;opacity:.9;}
.portalHome .globalSearch svg{color:#c8ddeb!important;}
.portalHome .globalSearch kbd{color:#d6e5ef!important;border-color:#56758c!important;background:#173b5d!important;}
.portalHome .iconBtn{
  width:34px!important;
  height:34px!important;
  border:1px solid #416783!important;
  border-radius:6px!important;
  background:#244b6b!important;
  color:#fff!important;
  box-shadow:none!important;
}
.portalHome .iconBtn:hover{border-color:#5a83a0!important;background:#2b5577!important;box-shadow:none!important;}
.portalHome .userChip{
  min-height:34px!important;
  padding:4px 9px!important;
  border:1px solid #416783!important;
  border-radius:6px!important;
  background:#244b6b!important;
  box-shadow:none!important;
}
.portalHome .userChip strong{color:#fff!important;}
.portalHome .userChip span{color:#c8ddeb!important;}
.portalHome .userChip .avatar.self{
  width:28px!important;
  height:28px!important;
  color:#fff!important;
  background:#176eaa!important;
  box-shadow:none!important;
}
.portalHome .topActions > .btn.ghost{
  min-height:34px!important;
  padding:6px 10px!important;
  border:1px solid #d7b6b6!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#8e2d2d!important;
  box-shadow:none!important;
}

/* OfficeUI white navigation strip below the navy command header. */
.portalHome .portalTopNav{
  min-height:56px!important;
  top:var(--cy-topbar)!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.portalHome .portalTopNav::after{display:none!important;}
.portalHome .portalTopNavInner{
  width:calc(100% - 18px)!important;
  max-width:none!important;
  min-height:48px!important;
  margin:8px auto 0!important;
  padding:6px!important;
  gap:6px!important;
  border:1px solid #d4dee7!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(23,59,93,.06)!important;
}
.portalHome .portalTopNav .portalNav{gap:6px!important;}
.portalHome .portalTopNav .portalNavItem{
  min-width:112px!important;
  min-height:36px!important;
  padding:6px 12px!important;
  border:1px solid transparent!important;
  border-radius:6px!important;
  background:#f6f9fb!important;
  color:#244a66!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:800!important;
  transform:none!important;
}
.portalHome .portalTopNav .portalNavIcon{width:18px!important;height:18px!important;color:#176eaa!important;}
.portalHome .portalTopNav .portalNavIcon svg{width:17px!important;height:17px!important;}
.portalHome .portalTopNav .portalNavItem:hover,
.portalHome .portalTopNav .portalNavItem.active{
  color:#fff!important;
  background:#176eaa!important;
  border-color:#176eaa!important;
  box-shadow:none!important;
  transform:none!important;
}
.portalHome .portalTopNav .portalNavItem:hover .portalNavIcon,
.portalHome .portalTopNav .portalNavItem.active .portalNavIcon{color:#fff!important;}
.portalHome .portalTopNav .portalNavItem em{
  border-radius:5px!important;
  background:#eaf2f7!important;
  color:#31546e!important;
}
.portalHome .portalTopNav .portalNavItem:hover em,
.portalHome .portalTopNav .portalNavItem.active em{background:rgba(255,255,255,.18)!important;color:#fff!important;}
.portalHome .portalTopNav .sidebarStatus{
  min-width:154px!important;
  margin:0 0 0 auto!important;
  padding:6px 9px!important;
  border:1px solid #d4dee7!important;
  border-radius:6px!important;
  background:#f6f9fb!important;
  box-shadow:none!important;
}
.portalHome .portalTopNav .sidebarStatus strong{color:#31546e!important;}
.portalHome .portalTopNav .sidebarStatus small{color:#637688!important;}

/* OfficeUI page-shell treatment. Cards inside remain exactly as v2.5.0. */
.portalHome .pageShell{max-width:1740px!important;padding:14px 20px 24px!important;}
.portalHome .welcomeRow{
  border:1px solid #d4dee7!important;
  border-left:5px solid #176eaa!important;
  border-radius:8px!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:0 2px 8px rgba(23,59,93,.05)!important;
}
.portalHome .welcomeRow::before,
.portalHome .welcomeRow::after{display:none!important;}
.portalHome .welcomeRow h1{color:#173b5d!important;}
.portalHome .welcomeRow .eyebrow,
.portalHome .sectionHeading .eyebrow{color:#176eaa!important;}
.portalHome .operationsTags{color:#637688!important;}
.portalHome .networkLive{color:#176eaa!important;}
.portalHome .liveTimestamp{color:#637688!important;}
.portalHome .sectionHeading h2{color:#173b5d!important;}
.portalHome .appFooter{
  border-top-color:#d4dee7!important;
  background:#f7f9fb!important;
  color:#6a7b88!important;
}

@media(max-width:1120px){
  .portalHome .brand{min-width:190px!important;}
  .portalHome .brand div{display:none!important;}
}
@media(max-width:820px){
  body.portalHome{--cy-topbar:62px;}
  .portalHome .topbar{min-height:62px!important;height:62px!important;padding:7px 10px!important;}
  .portalHome .brand{min-width:0!important;}
  .portalHome .brandMark{width:116px!important;height:42px!important;}
  .portalHome .brandMark img{width:110px!important;max-height:38px!important;}
  .portalHome .portalTopNav{top:var(--cy-topbar)!important;background:#eef3f7!important;}
  .portalHome .portalTopNavInner{width:calc(100% - 12px)!important;margin:6px auto!important;padding:7px!important;}
  .portalHome .portalTopNav .portalNavItem{min-width:0!important;}
  .portalHome .pageShell{padding:12px 10px 22px!important;}
}


/* -------------------------------------------------------------------------
 * v2.5.7 unified authenticated Portal header
 * Keeps the v2.5.1 dashboard header as the visual source of truth on Home,
 * Workspace, Module Setup, Authentication Sources, and Audit & Usage.
 * Login/setup screens intentionally retain their dedicated layouts.
 * ------------------------------------------------------------------------- */
.portalAdmin .portalUnifiedHeader,
.workspaceBody .portalUnifiedHeader{
  height:70px!important;
  min-height:70px!important;
  padding:10px clamp(14px,2vw,28px)!important;
  color:#fff!important;
  background:#173b5d!important;
  border:0!important;
  border-bottom:3px solid #2c8bc0!important;
  box-shadow:0 4px 14px rgba(23,59,93,.18)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  position:sticky!important;
  top:0!important;
  z-index:40!important;
}
.portalAdmin .portalUnifiedHeader .brand,
.workspaceBody .portalUnifiedHeader .brand{min-width:300px!important;gap:12px!important;color:#fff!important;}
.portalAdmin .portalUnifiedHeader .brandMark,
.workspaceBody .portalUnifiedHeader .brandMark{
  width:142px!important;height:48px!important;padding:3px 8px!important;
  border:1px solid #cfdbe5!important;border-radius:7px!important;background:#fff!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.portalAdmin .portalUnifiedHeader .brandMark img,
.workspaceBody .portalUnifiedHeader .brandMark img{width:136px!important;max-height:44px!important;object-fit:contain!important;}
.portalAdmin .portalUnifiedHeader .brand div,
.workspaceBody .portalUnifiedHeader .brand div{display:flex!important;flex-direction:column!important;min-width:0;}
.portalAdmin .portalUnifiedHeader .brand strong,
.workspaceBody .portalUnifiedHeader .brand strong{
  color:#fff!important;font-size:22px!important;font-weight:900!important;line-height:1!important;letter-spacing:-.35px!important;text-transform:none!important;
}
.portalAdmin .portalUnifiedHeader .brand span:not(.brandMark),
.workspaceBody .portalUnifiedHeader .brand span:not(.brandMark){
  margin-top:4px!important;color:#c8ddeb!important;font-size:10px!important;font-weight:800!important;letter-spacing:.55px!important;text-transform:uppercase!important;
}
.portalAdmin .portalUnifiedHeader .userChip,
.workspaceBody .portalUnifiedHeader .userChip{
  min-height:34px!important;padding:4px 9px!important;border:1px solid #416783!important;border-radius:6px!important;background:#244b6b!important;box-shadow:none!important;
}
.portalAdmin .portalUnifiedHeader .userChip strong,
.workspaceBody .portalUnifiedHeader .userChip strong{color:#fff!important;}
.portalAdmin .portalUnifiedHeader .userChip span,
.workspaceBody .portalUnifiedHeader .userChip span{color:#c8ddeb!important;}
.portalAdmin .portalUnifiedHeader .userChip .avatar.self,
.workspaceBody .portalUnifiedHeader .userChip .avatar.self{width:28px!important;height:28px!important;color:#fff!important;background:#176eaa!important;box-shadow:none!important;}
.portalAdmin .portalUnifiedHeader .topActions>.btn.ghost,
.workspaceBody .portalUnifiedHeader .topActions>.btn.ghost{
  min-height:34px!important;padding:6px 10px!important;border:1px solid #d7b6b6!important;border-radius:6px!important;background:#fff!important;color:#8e2d2d!important;box-shadow:none!important;
}

/* Page-specific navigation lives below the common header instead of changing it. */
.portalPageSubnav{
  min-height:48px;margin:8px 9px 0;padding:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  border:1px solid #d4dee7;border-radius:9px;background:#fff;box-shadow:0 3px 10px rgba(23,59,93,.06);
}
.portalSubnavItem{
  min-height:36px;padding:8px 12px;display:inline-flex;align-items:center;border:1px solid transparent;border-radius:6px;
  background:#f6f9fb;color:#244a66;font-size:12px;font-weight:800;
}
.portalSubnavItem:hover,.portalSubnavItem.active{background:#176eaa;color:#fff;border-color:#176eaa;}
.portalAdmin{background:#eef3f7!important;}
.portalAdmin .pageShell{max-width:1740px!important;padding-top:14px!important;}

/* Workspace keeps module switching/full-screen controls in a compact secondary bar. */
.workspaceBody{background:#eef3f7!important;}
.workspaceBody .workspaceControlBar{
  height:54px!important;min-height:54px!important;margin:0!important;padding:6px 12px!important;
  background:#fff!important;border:0!important;border-bottom:1px solid #d4dee7!important;box-shadow:0 2px 8px rgba(23,59,93,.06)!important;
  position:relative!important;z-index:25!important;
}
.workspaceBody .workspaceFrameWrap{height:calc(100vh - 124px)!important;}
.workspaceBody .workspaceControlBar .iconBtn{width:34px!important;height:34px!important;border-radius:6px!important;}
.workspaceBody .workspaceControlBar .workspaceHome,
.workspaceBody .workspaceControlBar .workspaceSwitcher select{border-radius:6px!important;}

@media(max-width:1120px){
  .portalAdmin .portalUnifiedHeader .brand,
  .workspaceBody .portalUnifiedHeader .brand{min-width:190px!important;}
  .portalAdmin .portalUnifiedHeader .brand div,
  .workspaceBody .portalUnifiedHeader .brand div{display:none!important;}
}
@media(max-width:820px){
  .portalAdmin .portalUnifiedHeader,
  .workspaceBody .portalUnifiedHeader{height:62px!important;min-height:62px!important;padding:7px 10px!important;}
  .portalAdmin .portalUnifiedHeader .brand,
  .workspaceBody .portalUnifiedHeader .brand{min-width:0!important;}
  .portalAdmin .portalUnifiedHeader .brandMark,
  .workspaceBody .portalUnifiedHeader .brandMark{width:116px!important;height:42px!important;}
  .portalAdmin .portalUnifiedHeader .brandMark img,
  .workspaceBody .portalUnifiedHeader .brandMark img{width:110px!important;max-height:38px!important;}
  .portalAdmin .portalUnifiedHeader .userChip,
  .workspaceBody .portalUnifiedHeader .userChip{display:none!important;}
  .portalPageSubnav{margin:6px 6px 0;overflow-x:auto;flex-wrap:nowrap;}
  .portalSubnavItem{white-space:nowrap;}
  .workspaceBody .workspaceFrameWrap{height:calc(100vh - 116px)!important;}
}


/* v2.5.7 - Developer-controlled embedded workspace header setting */
.moduleWorkspaceAppearance{
  border:1px solid #cbdbe6;
  border-radius:12px;
  padding:14px;
  background:linear-gradient(180deg,#f9fcfe 0%,#f2f8fc 100%);
  display:grid;
  gap:12px;
}
.moduleWorkspaceAppearanceHead{
  display:flex;
  gap:14px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}
.workspaceHeaderToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #b9cfdd;
  background:#fff;
  border-radius:9px;
  padding:9px 11px;
  font-weight:800;
  color:#214d68;
}
.workspaceHeaderToggle input{width:17px;height:17px}
.workspaceHeaderSelector{display:grid;gap:6px;font-weight:800;color:#244e67}
.workspaceHeaderSelector input{font-family:Consolas,"Courier New",monospace}
.workspaceHeaderSelector small{font-family:inherit;font-weight:400;color:#647c8b;line-height:1.4}
.workspaceHeaderSelector code{background:#e7f2f8;border:1px solid #c8dce8;border-radius:5px;padding:1px 5px;color:#194f70}
.workspaceHeaderStatus{color:#276a8d}


/* v2.5.7 - checkbox first; CSS selector is an optional advanced override */
.workspaceHeaderAdvanced{
  border-top:1px solid #d8e4eb;
  padding-top:10px;
}
.workspaceHeaderAdvanced summary{
  cursor:pointer;
  color:#557083;
  font-size:12px;
  font-weight:800;
  user-select:none;
}
.workspaceHeaderAdvanced[open] summary{margin-bottom:10px}
.optionalLabel{font-weight:500;color:#7a8f9c}