/* Eco CRM — a focused, responsive service workspace. */
:root {
  color-scheme: light;
  --blue: #0876d3;
  --blue-dark: #045daa;
  --blue-soft: #edf6ff;
  --ink: #17324f;
  --body: #42566d;
  --muted: #65768b;
  --line: #e1e8f0;
  --surface: #ffffff;
  --canvas: #edf3f9;
  --radius: 9px;
  --shadow: 0 2px 7px rgba(24, 54, 83, .035);
  --focus: 0 0 0 3px rgba(8, 118, 211, .2);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.administration-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
html { min-height: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  background: linear-gradient(160deg, #e7f0fa 0, #edf3f9 390px, #f4f7fa 100%);
  color: var(--body);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .55; }
button, input, select, textarea, a { outline: none; }
button:focus-visible, a:focus-visible { box-shadow: var(--focus); border-radius: 5px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--blue); box-shadow: var(--focus); }
svg { display: block; flex-shrink: 0; }
.icon { width: 19px; height: 19px; stroke-width: 1.8; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.muted { color: var(--muted); }
.mobile-label { display: none; }

/* Global chrome */
.global-header {
  height: 67px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid #edf1f5;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.7px; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand-logo { display: block; width: 32px; height: 32px; max-width: 32px; max-height: 32px; object-fit: contain; flex: 0 0 32px; }
.brand-mark {
  display: inline-flex;
  width: 39px;
  height: 37px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #118fec, #0365bd);
  border-radius: 12px 12px 12px 4px;
  color: white;
  font-weight: 750;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(8, 118, 211, .15);
}
.brand-mark svg { width: 26px; height: 26px; }
.global-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(465px, 42vw);
  margin-left: auto;
  margin-right: auto;
  gap: 10px;
  border: 1px solid #d9e3ee;
  background: #fafcfe;
  border-radius: 7px;
  padding: 0 12px;
  height: 36px;
  color: #8290a2;
}
.global-search input { min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); }
.global-search input::placeholder { color: #8190a2; }
.global-search:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.global-search kbd { border: 1px solid #dfe6ed; background: white; padding: 0 5px; border-radius: 4px; font-size: 11px; white-space: nowrap; }
.header-tools { display: flex; align-items: center; gap: 7px; }
.language-select { display: block; height: 31px; min-width: 85px; max-width: 100px; padding: 0 8px; margin-right: 6px; border: 1px solid #dce6ef; border-radius: 5px; background: #fafcfe; color: #5d748a; font-size: 11px; cursor: pointer; }
.language-select:hover { border-color: #bdd4e7; background: #f3f8fe; }
.icon-button, .close-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #72859a;
}
.icon-button:hover, .close-button:hover { color: var(--blue); background: var(--blue-soft); }
.header-tools > .icon-button { position: relative; }
.header-tools > .icon-button::after { pointer-events: none; }
.avatar {
  display: inline-flex;
  width: 33px;
  height: 33px;
  align-items: center;
  justify-content: center;
  background: #e8f1fb;
  color: #336390;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #dce6f0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-left: 10px;
}
.app-nav {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 53px;
  padding: 0 28px;
  background: white;
  border-bottom: 1px solid #d6e1ed;
  box-shadow: 0 2px 5px rgba(35, 61, 87, .035);
}
.app-launcher { display: flex; align-items: center; align-self: center; width: 27px; height: 31px; color: #6c8196; border: 0; background: transparent; padding: 0; }
.app-launcher svg { width: 22px; height: 22px; }
.app-name { align-self: center; color: var(--ink); font-size: 15px; font-weight: 650; padding-right: 20px; border-right: 1px solid var(--line); white-space: nowrap; }
.nav-links { display: flex; align-items: stretch; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link {
  display: flex;
  align-items: center;
  position: relative;
  gap: 8px;
  padding: 0 17px;
  border: 0;
  background: transparent;
  color: #62748a;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}
.nav-link .icon { width: 16px; height: 16px; }
.nav-link:hover { color: var(--blue); background: #f6faff; }
.nav-link.active { background: #f3f8fe; color: #0867b7; font-weight: 650; }
.nav-link.active::after { content: ""; position: absolute; height: 3px; background: var(--blue); bottom: -1px; left: 0; right: 0; border-radius: 3px 3px 0 0; }
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 18px; padding: 0 5px; border-radius: 4px; color: #7f8b9b; background: #edf1f6; font-size: 10px; }
.nav-link.active .nav-count { color: #126bb3; background: #deedfb; }
.connection { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; align-self: center; color: #7d8b9c; font-size: 11px; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #3bb583; flex: 0 0 auto; box-shadow: 0 0 0 3px #edf9f3; }

/* Content and reusable controls */
.workspace { max-width: 1600px; margin: 0 auto; padding: 26px 32px 64px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: #7a8ea4; font-size: 10px; font-weight: 650; letter-spacing: 1.35px; text-transform: uppercase; }
.page-title { margin: 0; color: var(--ink); font-size: 27px; line-height: 1.3; font-weight: 650; letter-spacing: -.9px; }
.page-subtitle { margin: 6px 0 0; color: #75869a; font-size: 12px; }
.heading-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid #cedbe8;
  border-radius: 6px;
  background: white;
  color: #245880;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.button .icon { width: 16px; height: 16px; }
.button:hover { background: #f4f9ff; border-color: #adc8df; color: var(--blue-dark); }
.button.primary { background: var(--blue); border-color: var(--blue); color: white; box-shadow: 0 2px 3px rgba(8, 118, 211, .09); }
.button.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: white; }
.button.ghost { background: transparent; box-shadow: none; }
.button.small { min-height: 29px; padding: 5px 11px; font-size: 11px; }
.button.danger { background: #fff; color: #b84c55; border-color: #edc7cc; }
.button.danger:hover { background: #fff0f1; }
.text-link { border: 0; padding: 0; background: transparent; color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; }
.text-link:hover { color: var(--blue-dark); text-decoration: underline; }

/* A calm entry point, with a small CSS landscape. */
.welcome-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 165px;
  border: 1px solid #d9e7f5;
  border-radius: var(--radius);
  background: linear-gradient(112deg, #ffffff 0%, #f4f9ff 55%, #e7f2ff 100%);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 21px;
}
.welcome-copy { z-index: 1; padding: 24px 29px; max-width: 70%; }
.welcome-kicker { display: inline-flex; align-items: center; gap: 6px; color: #4381bb; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.15px; margin-bottom: 7px; }
.welcome-copy h2 { margin: 0 0 8px; color: var(--ink); font-size: 24px; line-height: 1.3; font-weight: 650; letter-spacing: -.7px; }
.welcome-copy p { margin: 0; font-size: 12px; color: #768ba1; }
.banner-actions { display: flex; align-items: center; gap: 17px; margin-top: 17px; }
.welcome-visual { position: absolute; top: 0; right: 0; bottom: 0; width: 31%; min-width: 250px; overflow: hidden; pointer-events: none; }
.scene { position: absolute; width: 340px; height: 180px; right: 9%; bottom: 0; }
.scene::before { content: ""; position: absolute; width: 180px; height: 180px; right: 25px; top: 25px; background: #d9eaff; border-radius: 50%; }
.scene::after { content: ""; position: absolute; left: 35px; right: -70px; height: 70px; bottom: -35px; background: #b5d5f5; border-radius: 50%; transform: rotate(-8deg); }
.scene-cloud { position: absolute; width: 66px; height: 17px; top: 41px; right: 151px; background: white; border-radius: 14px; opacity: .9; }
.scene-cloud::before, .scene-cloud::after { content: ""; position: absolute; bottom: 6px; background: white; border-radius: 50%; width: 27px; height: 27px; left: 10px; }
.scene-cloud::after { width: 20px; height: 20px; left: 32px; bottom: 5px; }
.scene-cloud:nth-child(2) { top: 65px; right: 9px; transform: scale(.7); opacity: .8; }
.scene-mountain { position: absolute; width: 120px; height: 120px; transform: rotate(45deg); border-radius: 12px; background: #92c0ef; bottom: -72px; right: 19px; }
.scene-mountain:nth-of-type(3) { width: 155px; height: 155px; background: #73afe9; right: 125px; bottom: -94px; }
.scene-mountain:nth-of-type(4) { width: 110px; height: 110px; background: #b7d6f4; right: 222px; bottom: -74px; }
.scene-ring { position: absolute; width: 72px; height: 72px; right: 91px; top: 57px; border-radius: 20px; transform: rotate(-9deg); border: 5px solid white; background: #1688dc; box-shadow: 0 9px 18px rgba(19, 99, 166, .18); display: grid; place-items: center; color: white; z-index: 2; }
.scene-ring svg { width: 35px; height: 35px; transform: rotate(9deg); }

/* Overview metrics */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 23px; }
.metric-card { position: relative; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 19px 21px 16px; min-height: 128px; }
.metric-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; position: absolute; top: 20px; right: 20px; }
.metric-icon .icon { width: 18px; height: 18px; }
.metric-icon.blue { background: #e9f4ff; color: #1482d6; }
.metric-icon.orange { background: #fff2e6; color: #e99843; }
.metric-icon.purple { background: #f3eefd; color: #9170cd; }
.metric-icon.green { background: #e9f8f2; color: #3baf86; }
.metric-value { color: var(--ink); font-size: 31px; font-weight: 650; line-height: 1.15; letter-spacing: -1px; }
.metric-label { margin: 7px 0 0; color: #708297; font-size: 12px; }
.metric-foot { display: flex; align-items: center; gap: 4px; margin-top: 12px; color: #8191a3; font-size: 10px; }
.metric-foot .icon { width: 12px; height: 12px; }
.metric-foot.positive, .metric-foot .positive { color: #309772; }

/* Keep the home summary beside the welcome message. */
.welcome-banner.welcome-overview { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 3fr); align-items: stretch; gap: 24px; padding: 24px 28px; }
.welcome-overview .welcome-copy { min-width: 0; max-width: none; padding: 0; align-self: center; }
.welcome-overview .welcome-copy h2 { overflow-wrap: anywhere; }
.welcome-overview .banner-actions { flex-wrap: wrap; gap: 10px 16px; }
.welcome-overview > .metric-grid { min-width: 0; margin: 0; gap: 14px; }
.welcome-overview .metric-card { min-width: 0; min-height: 148px; padding: 18px; }
.welcome-overview .metric-icon { top: 18px; right: 16px; }
@media (max-width: 1180px) {
  .welcome-banner.welcome-overview { grid-template-columns: minmax(230px, 1fr) minmax(0, 2fr); padding: 24px; gap: 22px; }
  .welcome-overview > .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-overview .metric-card { min-height: 128px; }
}
@media (max-width: 760px) {
  .welcome-banner.welcome-overview { grid-template-columns: minmax(0, 1fr); padding: 21px; gap: 22px; }
  .welcome-overview > .metric-grid { gap: 11px; }
  .welcome-overview .metric-card { padding: 16px 14px; min-height: 124px; }
  .welcome-overview .metric-icon { right: 12px; top: 16px; }
}

/* Cards, tables and the right-hand workspace */
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 22px; }
.main-column, .side-column { display: flex; flex-direction: column; min-width: 0; gap: 20px; }
.card { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 22px 16px; }
.card-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.5; font-weight: 650; }
.card-title > .icon { width: 17px; height: 17px; color: #6a8bad; }
.card-subtitle { margin: 3px 0 0; color: #8594a5; font-size: 11px; }
.card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.card-body { padding: 1px 22px 21px; }
.side-column .card-header { padding: 17px 19px 14px; }
.side-column .card-body { padding: 1px 19px 20px; }
.tabs { display: flex; align-items: center; gap: 22px; min-height: 37px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.tab { position: relative; align-self: stretch; display: flex; align-items: center; gap: 7px; padding: 0 0 11px; border: 0; background: transparent; color: #7c8da0; font-size: 11px; font-weight: 500; }
.tab.active { color: var(--blue); font-weight: 650; }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); border-radius: 2px 2px 0 0; }
.tab:hover { color: var(--blue); }
.table-wrap { position: relative; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #ccdae7 transparent; }
table { border-collapse: collapse; width: 100%; text-align: left; white-space: nowrap; }
th { padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid var(--line); color: #7a8ca0; font-weight: 600; font-size: 10px; letter-spacing: .15px; }
td { padding: 15px 16px; border-bottom: 1px solid #edf1f5; color: #60738a; font-size: 11px; }
th:first-child, td:first-child { padding-left: 22px; }
th:last-child, td:last-child { padding-right: 22px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f9fcff; }
tbody tr.clickable { cursor: pointer; }
tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ticket-subject { display: block; padding: 0; border: 0; color: #254763; background: transparent; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: normal; text-align: left; min-width: 155px; max-width: 320px; }
button.ticket-subject:hover, a.ticket-subject:hover { color: var(--blue); }
.ticket-number { display: inline-block; margin-top: 4px; color: #94a1af; font-size: 10px; letter-spacing: .3px; }
.client-cell { display: flex; align-items: center; gap: 9px; }
.client-cell strong { color: #385775; font-size: 12px; font-weight: 600; }
.client-cell small, .client-cell .muted { display: block; font-size: 10px; margin-top: 2px; }
.client-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: #ecf3fc; color: #5283b4; font-size: 11px; font-weight: 700; letter-spacing: -.2px; }
.client-logo[data-tone="purple"] { background: #f1ebfb; color: #8b69bb; }
.client-logo[data-tone="green"] { background: #e8f7f1; color: #4d9e82; }
.client-logo[data-tone="amber"] { background: #fff3e3; color: #bd9458; }
.client-logo.large { width: 49px; height: 49px; font-size: 17px; border-radius: 12px; }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 4px; padding: 3px 7px; font-size: 10px; line-height: 1.4; font-weight: 550; white-space: nowrap; }
.badge[data-tone="blue"] { background: #eaf4ff; color: #2b78b8; }
.badge[data-tone="amber"] { background: #fff4e3; color: #ac7a29; }
.badge[data-tone="green"] { background: #e8f6ee; color: #379569; }
.badge[data-tone="gray"] { background: #eef2f6; color: #768699; }
.badge[data-tone="red"] { background: #fff0f0; color: #c46164; }
.badge[data-tone="purple"] { background: #f2edfc; color: #9270c2; }
.priority { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #718195; }
.priority-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #a7b4c2; }
.priority[data-priority="Alta"] .priority-dot, .priority[data-priority="alta"] .priority-dot, .priority[data-priority="high"] .priority-dot, .priority-dot[data-priority="Alta"] { background: #e58680; }
.priority[data-priority="Sales Escalation"] { color: #a44764; font-weight: 700; }
.priority[data-priority="Sales Escalation"] .priority-dot { background: #bd3e65; }
.priority[data-priority="Standard"] .priority-dot { background: #7e9dbb; }
.priority[data-priority="Media"] .priority-dot, .priority[data-priority="media"] .priority-dot, .priority[data-priority="medium"] .priority-dot, .priority-dot[data-priority="Media"] { background: #e6b55d; }
.priority[data-priority="Baja"] .priority-dot, .priority[data-priority="baja"] .priority-dot, .priority[data-priority="low"] .priority-dot, .priority-dot[data-priority="Baja"] { background: #6db596; }
.section-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 13px 22px; border-top: 1px solid #edf1f5; color: #92a0ae; font-size: 10px; }
.section-footer .text-link { font-size: 11px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 44px 22px; color: #8091a4; }
.empty-state > .icon { width: 32px; height: 32px; padding: 9px; box-sizing: content-box; background: #f0f6fc; color: #83a7cb; border-radius: 13px; margin-bottom: 5px; }
.empty-state h3 { margin: 0; color: #48647f; font-size: 14px; font-weight: 600; }
.empty-state p { margin: 0; font-size: 12px; max-width: 350px; }
.empty-state .button { margin-top: 7px; }
.workload-row { margin-top: 15px; }
.workload-row:first-child { margin-top: 4px; }
.workload-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #71869b; font-size: 11px; }
.workload-head strong { color: #3d5b78; font-size: 11px; font-weight: 600; }
.progress-track { height: 5px; overflow: hidden; border-radius: 5px; background: #edf2f7; }
.progress-fill { height: 100%; min-width: 0; background: #258bda; border-radius: inherit; }
.progress-fill[data-tone="amber"] { background: #efbd6f; }
.progress-fill[data-tone="purple"] { background: #9b83d3; }
.progress-fill[data-tone="green"] { background: #65bc9b; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item { display: flex; gap: 10px; align-items: flex-start; position: relative; padding: 11px 0; }
.activity-item:not(:last-child) { border-bottom: 1px solid #f0f3f6; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b93d8; flex-shrink: 0; margin-top: 6px; }
.activity-dot[data-tone="green"] { background: #66b99a; }
.activity-dot[data-tone="purple"] { background: #a286ce; }
.activity-dot[data-tone="amber"] { background: #e3b76d; }
.activity-line { margin: 0; font-size: 11px; line-height: 1.65; color: #7b8c9e; }
.activity-line strong { font-weight: 600; color: #4c6680; }
.activity-time { margin-top: 3px; color: #a0acb9; font-size: 10px; }
.notice { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid #e3ebf5; background: #f5f9ff; border-radius: 6px; font-size: 11px; color: #71869d; line-height: 1.65; }
.notice .icon { color: #8ba8c7; width: 16px; height: 16px; margin-top: 2px; }
.notice strong { color: #496a8c; }

/* Client and ticket lists */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.list-card > .filters { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.search-input { display: flex; align-items: center; gap: 8px; position: relative; max-width: 340px; min-width: 220px; height: 35px; padding: 0 11px; border: 1px solid #dce5ed; background: white; border-radius: 6px; }
.search-input .icon { width: 16px; height: 16px; color: #8a9aab; }
.search-input input { width: 100%; min-width: 0; border: 0; background: transparent; font-size: 12px; color: var(--ink); outline: none; }
.search-input:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.search-input input::placeholder { color: #95a2af; }
input.search-input { outline: none; font-size: 12px; max-width: 340px; width: 100%; }
.filter-select { height: 35px; min-width: 145px; padding: 0 30px 0 11px; border: 1px solid #dce5ed; border-radius: 6px; background-color: white; color: #677f96; font-size: 12px; }
.list-summary { color: #8392a3; font-size: 11px; margin-left: auto; }
.list-card table { min-width: 680px; }
.view-toggle { display: flex; border: 1px solid #d5e1ed; border-radius: 6px; overflow: hidden; }
.view-toggle .icon-button { border-radius: 0; width: 34px; height: 33px; }
.view-toggle .icon-button.active { background: #eaf4ff; color: var(--blue); }
.view-toggle .icon-button + .icon-button { border-left: 1px solid #d5e1ed; }
.insight-banner { display: flex; align-items: center; gap: 11px; padding: 16px 19px; margin-bottom: 19px; background: #f7fbff; border: 1px solid #dce8f5; border-radius: var(--radius); font-size: 12px; color: #6e8399; }
.insight-banner .icon { width: 20px; height: 20px; color: #488ac2; }
.insight-banner strong { color: #3c6489; font-weight: 600; }

/* Record detail */
.record-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.record-grid > .card, .record-grid > .detail-panel { min-width: 0; }
.detail-panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px; border-bottom: 1px solid var(--line); }
.detail-header h2 { color: var(--ink); font-size: 19px; font-weight: 650; margin: 4px 0 7px; line-height: 1.4; }
.detail-header p { margin: 0; font-size: 12px; color: #8b9bad; }
.detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 28px; padding: 22px; }
.field-pair { min-width: 0; }
.field-pair dt, .field-pair label, .field-pair > span:first-child { display: block; color: #8b9aae; font-size: 10px; margin-bottom: 5px; }
.field-pair dd { margin: 0; color: #48647e; font-size: 12px; overflow-wrap: anywhere; }
.field-pair > strong { display: block; color: #48647e; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.field-pair.wide { grid-column: 1 / -1; }
.field-pair .form-input { height: 33px; font-size: 12px; }
.contact-list { display: grid; gap: 12px; padding: 0 22px 18px; }
.contact-detail { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: #fbfdff; }
.contact-detail h3, .contact-card-header h3, .contact-form-heading h3 { margin: 0; color: #48647e; font-size: 12px; font-weight: 650; }
.contact-detail .serial-meta { margin-top: 12px; }
.client-profile { display: grid; gap: 22px; min-width: 0; }
.client-profile > .card { min-width: 0; }
.client-info-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.client-info-fields dd { white-space: pre-line; }
.client-contact-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: stretch; }
.client-contact-list .contact-detail { display: flex; flex-direction: column; }
.client-contact-list .serial-meta { grid-template-columns: minmax(0, 1fr); margin-bottom: 15px; }
.client-contact-list .serial-meta dd { white-space: pre-line; }
.contact-detail-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contact-detail-identity h3 { overflow-wrap: anywhere; }
.contact-avatar { width: 46px; height: 46px; flex-shrink: 0; }
.contact-photo-field .account-photo-preview > [data-contact-photo-initials] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.contact-photo-error:empty { display: none; }
.contact-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.client-contact-help { padding: 0 22px 18px; margin: 0; }
.contact-delete-summary { overflow-wrap: anywhere; }
.contact-form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.contact-form-heading .field-help { margin: 0; }
.modal .contact-list { padding: 13px 0 8px; }
.contact-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: #fbfdff; }
.contact-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.contact-card-header h3 { margin-right: auto; }
.contact-id { color: #8594a5; font-size: 10px; overflow-wrap: anywhere; }
.contact-add { display: flex; justify-content: flex-start; margin-bottom: 15px; }
.contact-add .button { gap: 6px; }
.record-description { white-space: pre-wrap; color: #617a92; font-size: 13px; line-height: 1.8; margin: 0; }
.timeline { padding: 8px 22px 22px; }
.timeline-item { display: flex; position: relative; gap: 13px; padding: 13px 0; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; top: 43px; bottom: -12px; left: 15px; width: 1px; background: #e6edf4; }
.timeline-icon { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 7px; background: #eaf4ff; color: #4b8ec3; flex-shrink: 0; }
.timeline-icon .icon { width: 15px; height: 15px; }
.timeline-icon[data-tone="green"] { color: #4fa386; background: #edf8f3; }
.timeline-icon[data-tone="purple"] { color: #9680c2; background: #f3effa; }
.timeline-content { min-width: 0; flex: 1; padding-top: 2px; }
.timeline-content h4 { margin: 0 0 5px; color: #48647e; font-size: 12px; font-weight: 600; }
.timeline-content p { font-size: 12px; color: #7b8ea2; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-content small { display: block; font-size: 10px; color: #9aa8b6; margin-top: 6px; }
.note-form { padding: 18px 22px; background: #fafcfe; border-top: 1px solid var(--line); }
.note-form .form-textarea { min-height: 88px; background: white; }
.note-form .button { margin-top: 10px; }
.note-type { color: #6e839a; font-size: 12px; margin-bottom: 9px; }

/* Forms and modal */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 18px; }
.form-field { min-width: 0; }
.form-field.wide { grid-column: 1 / -1; }
.form-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #526d87; }
.required { color: #c37475; }
.form-input, .form-textarea { display: block; width: 100%; border: 1px solid #d5e0eb; background: white; border-radius: 5px; font-size: 13px; color: #36516d; padding: 9px 11px; line-height: 1.5; }
.form-input { height: 38px; }
select.form-input { padding-right: 27px; }
.form-textarea { resize: vertical; min-height: 104px; }
.form-input::placeholder, .form-textarea::placeholder { color: #a0adba; }
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: #d98486; }
.field-help { display: block; font-size: 10px; color: #91a0af; margin: 5px 0 0; }
.form-error { padding: 10px 12px; background: #fff1f1; border: 1px solid #f3d0d1; border-radius: 6px; color: #b65f65; font-size: 12px; margin: 0 0 18px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 26px; display: flex; align-items: center; justify-content: center; background: rgba(17, 43, 69, .35); backdrop-filter: blur(3px); }
.modal { display: flex; flex-direction: column; width: min(100%, 580px); max-height: min(90vh, 850px); background: white; border: 1px solid #dbe5ef; border-radius: 12px; box-shadow: 0 22px 70px rgba(18, 47, 77, .2); animation: modal-enter .16s ease-out; }
.modal.person-details-modal { width: min(100%, 600px); }
.modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 25px 18px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; color: var(--ink); font-size: 19px; font-weight: 650; letter-spacing: -.4px; }
.modal-header p { margin: 4px 0 0; color: #8292a4; font-size: 12px; }
.modal-body { flex: 1; min-height: 0; padding: 23px 25px 26px; overflow-y: auto; }
.modal-footer { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 9px; padding: 16px 25px; border-top: 1px solid var(--line); background: #fafcfe; border-radius: 0 0 12px 12px; }
.modal-footer .button { min-width: 85px; }
body.modal-open { overflow: hidden; }
.toast { position: fixed; z-index: 120; bottom: 55px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 30px); padding: 13px 20px; border: 1px solid #bbdfd1; background: #f0fbf6; color: #347e63; font-size: 13px; border-radius: 8px; box-shadow: 0 6px 22px rgba(27, 70, 53, .12); animation: toast-enter .18s ease-out; }
.toast .icon { color: #48a57e; width: 18px; height: 18px; }
.toast.error { background: #fff4f4; border-color: #e6b8bc; color: #ae5360; }
.toast.error .icon { color: #ae5360; }

/* Reports, help and session utility */
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.chart-bars { display: flex; flex-direction: column; gap: 19px; padding: 9px 0 5px; }
.chart-row { display: grid; grid-template-columns: 93px minmax(0, 1fr) 25px; align-items: center; gap: 12px; }
.chart-label { color: #75899d; font-size: 11px; }
.chart-track { height: 12px; background: #f0f4f8; border-radius: 4px; overflow: hidden; }
.chart-fill { height: 100%; border-radius: inherit; background: #61a9df; }
.chart-fill[data-tone="amber"] { background: #e6bc79; }
.chart-fill[data-tone="green"] { background: #70b99e; }
.chart-fill[data-tone="purple"] { background: #aa91d2; }
.chart-fill[data-tone="gray"] { background: #a5b4c4; }
.chart-value { font-size: 11px; color: #54728f; font-weight: 650; text-align: right; }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li { padding: 14px 0; border-bottom: 1px solid #edf2f6; }
.help-list li:last-child { border-bottom: 0; }
.help-list strong { display: block; margin-bottom: 5px; font-size: 12px; color: #486a88; }
.help-list p { margin: 0; color: #7c91a5; font-size: 12px; line-height: 1.7; }
.utility-bar { display: flex; align-items: center; justify-content: space-between; position: fixed; bottom: 0; left: 0; right: 0; height: 34px; padding: 0 29px; border-top: 1px solid #dde5ee; background: rgba(255, 255, 255, .97); z-index: 40; box-shadow: 0 -1px 4px rgba(27, 50, 78, .025); }
.utility-item { display: inline-flex; align-items: center; gap: 7px; color: #8b9aab; font-size: 10px; }
button.utility-item { border: 0; background: transparent; padding: 0; }
.utility-item .icon { width: 13px; height: 13px; }
.utility-item .status-dot { width: 5px; height: 5px; box-shadow: none; }
.loading-state { padding: 30px 22px; color: #8799ac; font-size: 12px; text-align: center; }
.skeleton { height: 13px; width: 100%; border-radius: 5px; background: linear-gradient(90deg, #eff3f7, #f8fafc, #eff3f7); background-size: 200% 100%; animation: skeleton 1.5s ease-in-out infinite; }

@keyframes modal-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-enter { from { opacity: 0; bottom: 49px; } to { opacity: 1; bottom: 55px; } }
@keyframes skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Details shared by the actual workspace templates. */
.brand-light { font-weight: 400; color: #6d8195; }
.notification-dot { position: absolute; right: 7px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: #ef9b72; border: 1px solid white; }
.page-title-wrap { display: flex; align-items: center; gap: 13px; min-width: 0; }
.page-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; color: white; background: linear-gradient(145deg, #368fce, #1874b8); border-radius: 10px; box-shadow: 0 2px 4px rgba(20, 108, 181, .1); }
.page-icon .icon { width: 23px; height: 23px; }
.heading-actions:empty { display: none; }
.page-title-wrap > div, .card-header > div { min-width: 0; }
.page-title { overflow-wrap: anywhere; }
.heading-actions .button { min-width: 0; text-align: center; white-space: normal; }
.card-title { flex-wrap: wrap; }
.metric-card { text-align: left; transition: box-shadow .15s, border-color .15s; }
.metric-card:hover { border-color: #b9d6ee; box-shadow: 0 4px 12px rgba(25, 84, 132, .07); }
.metric-top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding-right: 40px; margin-bottom: 9px; }
.metric-top .metric-label { margin: 0; font-size: 11px; font-weight: 550; color: #6c7f94; }
.metric-label, .metric-foot { white-space: normal; overflow-wrap: anywhere; }
.metric-card .metric-value { display: flex; align-items: center; justify-content: space-between; }
.metric-value > span { opacity: .35; color: #5683a8; }
.metric-value > span .icon { width: 16px; height: 16px; }
.metric-card:hover .metric-value > span { opacity: 1; color: var(--blue); }
.count-pill { display: inline-flex; min-width: 20px; height: 18px; padding: 0 6px; align-items: center; justify-content: center; color: #6d8299; background: #edf3f9; border-radius: 4px; font-size: 10px; font-weight: 600; }
.card-header > .icon { width: 17px; height: 17px; color: #8ba0b4; }
.text-link { display: inline-flex; align-items: center; gap: 5px; }
.text-link .icon { width: 14px; height: 14px; }
.ticket-number { display: block; margin: 0 0 3px; }
.assignee-cell { display: inline-flex; align-items: center; gap: 8px; color: #657b90; font-size: 11px; white-space: nowrap; }
.mini-avatar { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-size: 9px; font-weight: 650; color: #6583a1; background: #edf3f9; }
.mini-avatar.color-0 { background: #e4f1ff; color: #4f89bd; }
.mini-avatar.color-1 { background: #eee6fa; color: #9474bf; }
.mini-avatar.color-2 { background: #e6f4ed; color: #629681; }
.mini-avatar.color-3 { background: #eef1f5; color: #8997a7; }
.progress-fill.color-0 { background: #4b9cdf; }
.progress-fill.color-1 { background: #a58acc; }
.progress-fill.color-2 { background: #79b99c; }
.progress-fill.color-3 { background: #a5b4c3; }
.priority[data-priority="Urgente"] { color: #b76363; }
.priority[data-priority="Urgente"] .priority-dot { background: #d76565; }
.row-open .icon { width: 14px; height: 14px; transform: rotate(-90deg); }
.activity-dot { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; margin-top: 1px; border-radius: 7px; background: #eaf4fe; color: #5b98c6; }
.activity-dot.green { background: #edf7f2; color: #58a283; }
.activity-dot .icon { width: 13px; height: 13px; }
.activity-line { min-width: 0; }
.activity-line > strong, .activity-line > span, .activity-time { display: block; }
.activity-line > span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 210px; }
.greeting-wave { margin-left: 4px; color: #edb45b; font-size: 22px; }
.welcome-detail { display: flex; align-items: center; gap: 6px; color: #71879b; font-size: 10px; }
.welcome-detail .status-dot { width: 5px; height: 5px; }
.welcome-banner { min-height: 179px; }
.scene::before { width: 205px; height: 205px; right: 27px; top: 24px; background: #dcecff; }
.scene-ring { width: 153px; height: 153px; right: 54px; top: 40px; border: 14px solid #c0dffa; box-shadow: none; background: transparent; border-radius: 50%; transform: none; z-index: 0; }
.scene-cloud.cloud-one { top: 29px; right: 169px; }
.scene-cloud.cloud-two { top: 41px; right: 23px; transform: scale(.68); }
.scene-mountain.mountain-one { width: 132px; height: 132px; right: 7px; bottom: -85px; background: #add0f0; }
.scene-mountain.mountain-two { width: 146px; height: 146px; right: 175px; bottom: -98px; background: #94bfe8; }
.scene-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; min-height: 45px; padding: 10px 13px; background: white; border-radius: 7px; box-shadow: 0 7px 20px rgba(42, 105, 163, .12); font-size: 10px; font-weight: 550; color: #537292; }
.scene-card-one { top: 63px; right: 81px; transform: rotate(-5deg); }
.scene-card-one > .icon { width: 20px; height: 20px; color: #46b68c; }
.scene-card-two { top: 115px; right: 32px; transform: rotate(3deg); }
.scene-card-two small { display: block; margin-top: 2px; font-size: 8px; font-weight: 400; color: #9aabbb; }
.scene-avatar { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: #e6f1fb; color: #6b97bc; font-size: 8px; }
.scene-spark { position: absolute; z-index: 5; color: #81b4e3; font-size: 17px; }
.spark-one { top: 31px; right: 86px; }
.spark-two { top: 128px; right: 239px; font-size: 23px; }
.insight-banner { margin: 0; background: rgba(255, 255, 255, .6); padding: 17px 20px; }
.insight-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; background: #e4effa; }
.insight-banner h3 { font-size: 12px; font-weight: 600; color: #557491; margin: 0 0 3px; }
.insight-banner p { font-size: 11px; color: #7b90a4; margin: 0; }
.insight-banner > .text-link { margin-left: auto; flex-shrink: 0; font-size: 11px; }
.list-card > .list-summary { padding: 10px 22px; margin: 0; background: #fcfdff; border-bottom: 1px solid #edf1f5; }
.utility-right { display: flex; align-items: center; gap: 7px; color: #8595a6; font-size: 10px; }
.utility-right .status-dot { width: 5px; height: 5px; box-shadow: none; }
.utility-button { height: 33px; padding: 0 12px !important; border-left: 1px solid #e8edf2 !important; border-right: 1px solid #e8edf2 !important; margin-right: auto; margin-left: 25px; }
.utility-button:hover { background: #f5f9fd; color: var(--blue); }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: #7c91a4; font-size: 11px; margin-bottom: 17px; }
.back-link .icon { width: 14px; height: 14px; }
.record-grid { grid-template-columns: 310px minmax(0, 1fr); }
.detail-fields { margin: 0; }
.record-grid .detail-panel .detail-fields, .ticket-record .detail-fields { grid-template-columns: minmax(0, 1fr); gap: 19px; }
.field-pair dd > .icon { display: inline-block; vertical-align: -3px; margin-right: 6px; width: 15px; height: 15px; color: #829bb2; }
.ticket-record .side-column { display: flex; }
.status-path { display: flex; align-items: center; gap: 4px; margin-bottom: 21px; padding: 5px; border: 1px solid #dee7f0; border-radius: 7px; background: rgba(255, 255, 255, .65); }
.path-step { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 4px; min-height: 38px; padding: 8px; background: transparent; color: #8193a5; font-size: 11px; font-weight: 550; }
.path-step > span { display: flex; justify-content: center; align-items: center; width: 19px; height: 19px; border: 1px solid #dce5ee; background: white; border-radius: 50%; color: #8294a6; font-size: 9px; }
.path-step > span .icon { width: 11px; height: 11px; }
.path-step:hover { background: #edf6ff; color: #5186b2; }
.path-step.current { background: #e2f0fc; color: #226daa; font-weight: 650; }
.path-step.current > span { background: #2d85c9; color: white; border-color: #2d85c9; }
.path-step.completed { color: #619280; }
.path-step.completed > span { background: #e8f5ef; color: #59a181; border-color: #d9ece4; }
.description-text { font-size: 13px; color: #698198; line-height: 1.8; white-space: pre-wrap; }
.client-email { font-size: 11px; margin: 11px 0 16px; overflow-wrap: anywhere; }
.note-form { padding: 0 0 19px; margin: 0; background: white; border: 0; border-bottom: 1px solid var(--line); }
.note-form .filter-select { margin-bottom: 11px; min-width: 205px; }
.note-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.note-footer .field-help { max-width: 280px; margin: 0; }
.note-footer .button { margin-top: 0; }
.timeline { padding: 13px 0 0; }
.timeline-heading { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; margin-bottom: 4px; }
.timeline-heading strong { font-weight: 600; color: #53728e; font-size: 12px; }
.timeline-heading time { white-space: nowrap; font-size: 10px; color: #8c9db0; }
.timeline-content > .muted { font-size: 10px; }
.timeline-content p { margin-top: 7px; }
.form-error:empty { display: none; }
.form-intro { font-size: 12px; color: #7e93a7; margin: 0 0 21px; }
.form-grid + .field-help { margin-top: 16px; }
.modal > form, #record-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.profile-detail { display: flex; gap: 13px; align-items: center; margin-bottom: 23px; }
.profile-detail .avatar { width: 45px; height: 45px; font-size: 14px; margin-left: 0; }
.profile-detail h3 { margin: 0; color: #415f7b; font-size: 15px; font-weight: 600; }
.profile-detail p { margin: 4px 0 0; font-size: 11px; }
.launcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.launcher-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 19px; border: 1px solid #e1eaf3; border-radius: 7px; color: #6c839a; background: #fcfdff; }
.launcher-item:hover { border-color: #afd0ec; background: #f6faff; }
.launcher-item > .icon { width: 24px; height: 24px; color: #5594c5; margin-bottom: 5px; }
.launcher-item strong { color: #456784; font-size: 13px; font-weight: 600; }
.launcher-item > span { font-size: 11px; }
.search-results h3 { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: #536f89; }
.search-results h3:not(:first-child) { margin-top: 25px; }
.search-result { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 13px 0; border-bottom: 1px solid #edf2f6; }
.search-result strong { display: block; font-size: 12px; color: #476b8a; font-weight: 600; }
.search-result > span { min-width: 0; }
.chart-label > span { display: block; font-size: 9px; color: #93a3b3; margin-top: 2px; }
.report-grid + .report-grid { margin-top: 22px; }
.skip-link:focus { width: auto; height: auto; padding: 9px 14px; margin: 0; left: 14px; top: 10px; overflow: visible; clip: auto; z-index: 200; background: white; color: var(--blue); border: 1px solid #bad5ec; box-shadow: var(--focus); border-radius: 5px; }
.client-cell > span:last-child { color: #416680; font-weight: 550; }
.client-cell small { font-weight: 400; }
.section-footer { justify-content: flex-start; gap: 7px; }
.section-footer > .icon { width: 13px; height: 13px; color: #8aa1b6; }
.chart-row { grid-template-columns: 93px minmax(0, 1fr) 35px; }
/* Keep the small secondary text legible on the light workspace. */
.page-subtitle, .card-subtitle, .welcome-copy p, .metric-label,
.metric-top .metric-label, .metric-foot, .activity-line, .activity-time,
.section-footer, .field-help, .form-intro, .chart-label, .chart-label > span,
.timeline-heading time, .ticket-number, .list-summary, .client-email,
.utility-item, .utility-right, .connection, .help-list p,
.insight-banner p, .welcome-detail { color: #65778a; }
th { color: #62778d; }
.badge[data-tone="blue"] { color: #20659d; }
.badge[data-tone="amber"] { color: #89601e; }
.badge[data-tone="green"] { color: #26774f; }
.badge[data-tone="gray"] { color: #607186; }
.badge[data-tone="purple"] { color: #7653a4; }
.badge[data-tone="red"] { color: #a54851; }

@media (min-width: 1500px) {
  .workspace { padding-left: 40px; padding-right: 40px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 325px; }
  .global-search { width: 505px; }
}
@media (max-width: 1180px) {
  .global-header { padding: 0 23px; gap: 18px; }
  .app-nav { padding: 0 23px; gap: 12px; }
  .app-name { padding-right: 13px; }
  .nav-link { padding: 0 12px; }
  .workspace { padding-left: 24px; padding-right: 24px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 17px; }
  .connection { font-size: 0; gap: 0; }
  .metric-card { padding-left: 17px; }
  .metric-icon { right: 15px; }
  .metric-grid { gap: 13px; }
  td, th { padding-right: 12px; padding-left: 12px; }
  .ticket-subject { min-width: 145px; }
}
@media (max-width: 900px) {
  .global-header { height: 67px; padding: 0 20px; gap: 16px; }
  .brand { font-size: 19px; }
  .brand-mark { width: 35px; height: 34px; font-size: 22px; }
  .global-search { width: auto; flex: 1; max-width: 370px; }
  .global-search kbd { display: none; }
  .header-tools { gap: 2px; }
  .header-tools .icon-button { display: none; }
  .header-tools .icon-button:last-of-type { display: inline-flex; }
  .avatar { margin-left: 6px; }
  .app-nav { height: 49px; padding: 0 20px; }
  .nav-links { overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { font-size: 12px; padding: 0 13px; }
  .nav-link .icon { display: none; }
  .connection { display: none; }
  .workspace { padding: 24px 20px 59px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .side-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; align-items: start; }
  .side-column .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .metric-card { min-height: 122px; padding: 18px 16px 14px; }
  .metric-icon { width: 28px; height: 28px; top: 17px; right: 13px; }
  .metric-icon .icon { width: 16px; height: 16px; }
  .metric-value { font-size: 28px; }
  .metric-label { font-size: 11px; }
  .metric-foot { font-size: 9px; }
  .welcome-copy { max-width: 73%; padding: 23px; }
  .welcome-copy h2 { font-size: 22px; }
  .welcome-visual { min-width: 200px; right: -35px; }
  .scene { right: -13px; }
  .record-grid { grid-template-columns: minmax(0, 1fr) 265px; gap: 17px; }
  .record-grid { grid-template-columns: 265px minmax(0, 1fr); }
  .insight-banner { align-items: flex-start; }
  .insight-banner > .text-link { align-self: center; }
  .detail-fields { padding: 20px; gap: 18px; }
  .report-grid { gap: 18px; }
  .list-summary { width: 100%; margin-left: 0; }
}
@media (max-width: 600px) {
  .global-header { height: 58px; padding: 0 15px; gap: 10px; }
  .brand { font-size: 17px; gap: 3px; letter-spacing: -.6px; }
  .brand-logo { width: 28px; height: 28px; max-width: 28px; max-height: 28px; flex-basis: 28px; }
  .brand-mark { width: 31px; height: 31px; border-radius: 10px 10px 10px 3px; font-size: 21px; }
  .brand-mark svg { width: 23px; height: 23px; }
  .global-search { margin-left: auto; margin-right: 0; width: 31px; flex: 0 0 31px; height: 31px; border: 0; padding: 6px; background: transparent; }
  .global-search input { width: 0; padding: 0; opacity: 0; }
  .global-search:focus-within { position: absolute; left: 15px; right: 65px; width: auto; z-index: 3; background: white; border: 1px solid #d9e3ee; padding: 0 10px; height: 36px; }
  .global-search:focus-within input { width: 100%; opacity: 1; }
  .header-tools .icon-button { display: none !important; }
  .language-select { min-width: 74px; max-width: 80px; height: 29px; padding: 0 4px; margin-right: 3px; font-size: 10px; }
  .avatar { width: 29px; height: 29px; font-size: 10px; margin-left: 0; }
  .app-nav { padding: 0 15px; gap: 10px; height: 47px; }
  .app-launcher { width: 22px; flex-shrink: 0; }
  .app-launcher svg { width: 19px; height: 19px; }
  .app-name { font-size: 12px; padding-right: 12px; }
  .nav-links { gap: 0; }
  .nav-link { padding: 0 11px; font-size: 11px; gap: 5px; }
  .nav-count { font-size: 9px; min-width: 16px; height: 16px; }
  .workspace { padding: 20px 15px 55px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 19px; }
  .page-title { font-size: 25px; }
  .page-subtitle { font-size: 11px; }
  .page-title-wrap { gap: 11px; }
  .page-icon { width: 40px; height: 40px; border-radius: 8px; }
  .page-icon .icon { width: 21px; height: 21px; }
  .heading-actions { width: 100%; gap: 8px; }
  .heading-actions .button { flex: 1; }
  .eyebrow { font-size: 9px; letter-spacing: 1.1px; }
  .welcome-banner { min-height: 171px; margin-bottom: 16px; }
  .welcome-copy { max-width: 100%; padding: 21px; }
  .welcome-copy h2 { font-size: 21px; max-width: 260px; }
  .welcome-copy p { font-size: 11px; max-width: 270px; }
  .welcome-detail { display: none; }
  .welcome-visual { display: none; }
  .welcome-kicker { font-size: 9px; }
  .banner-actions { gap: 13px; }
  .banner-actions .button { font-size: 11px; }
  .banner-actions .text-link { font-size: 10px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-bottom: 18px; }
  .metric-card { min-height: 120px; padding: 17px 16px 13px; }
  .metric-top { min-height: 31px; }
  .metric-icon { right: 14px; top: 17px; }
  .metric-label { font-size: 11px; }
  .metric-foot { font-size: 9px; margin-top: 11px; }
  .side-column { display: flex; gap: 17px; }
  .main-column { gap: 17px; }
  .card-header { padding: 17px 17px 14px; gap: 10px; }
  .card-title { font-size: 13px; }
  .card-subtitle { font-size: 10px; }
  .card-body { padding: 1px 17px 18px; }
  .card-actions { gap: 5px; }
  .card-actions .button { padding: 5px 9px; }
  .tabs { gap: 19px; padding: 0 17px; overflow-x: auto; white-space: nowrap; }
  .tab { font-size: 10px; }
  table { min-width: 630px; }
  th:first-child, td:first-child { padding-left: 17px; }
  .section-footer { padding: 12px 17px; }
  .filters { gap: 8px; }
  .list-card > .filters { padding: 16px 17px; }
  .filters .search-input { max-width: none; width: 100%; flex: 1 0 100%; }
  .filters .filter-select { min-width: 0; flex: 1; width: 0; font-size: 11px; }
  .list-summary { font-size: 10px; margin-top: 3px; }
  .record-grid, .report-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .record-grid .detail-panel .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 15px; }
  .ticket-record .side-column { order: 2; }
  .ticket-record .main-column { order: 1; }
  .detail-header { padding: 18px; }
  .detail-header h2 { font-size: 17px; }
  .detail-fields { padding: 18px; gap: 17px; }
  .timeline { padding: 5px 18px 18px; }
  .note-form { padding: 17px 18px; }
  .timeline { padding: 13px 0 0; }
  .note-form { padding: 0 0 17px; }
  .note-footer { align-items: flex-start; flex-direction: column; gap: 11px; }
  .timeline-heading { flex-direction: column; gap: 2px; }
  .status-path { margin-bottom: 17px; gap: 2px; padding: 4px; }
  .path-step { flex-direction: column; gap: 5px; font-size: 10px; padding: 7px 2px; }
  .modal-backdrop { padding: 12px; }
  .modal { max-height: calc(100dvh - 24px); border-radius: 9px; }
  .modal-header { padding: 18px; }
  .modal-header h2 { font-size: 18px; }
  .modal-body { padding: 19px 18px 23px; }
  .modal-footer { padding: 14px 18px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .form-input { height: 40px; font-size: 14px; }
  .form-textarea { font-size: 14px; }
  .form-field.wide { grid-column: auto; }
  .utility-bar { padding: 0 15px; height: 31px; }
  .utility-item { font-size: 9px; }
  .utility-item:last-child { display: none; }
  .utility-right { display: none; }
  .utility-button { margin-left: auto; margin-right: 0; padding: 0 9px !important; }
  .toast { bottom: 45px; font-size: 12px; padding: 12px 15px; }
  .insight-banner { font-size: 11px; padding: 13px 15px; }
  .insight-banner { flex-wrap: wrap; gap: 10px; }
  .insight-banner > div { flex: 1; }
  .insight-banner > .text-link { margin-left: 48px; }
  .insight-banner h3 { font-size: 11px; }
  .insight-banner p { font-size: 10px; }
  .launcher-grid { gap: 9px; }
  .launcher-item { padding: 15px; }
  .chart-row { grid-template-columns: 82px minmax(0, 1fr) 20px; gap: 9px; }
  .chart-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Ticket tools: technical ownership and the customer's serial numbers. */
.technical-current { padding: 12px 14px; margin-bottom: 15px; border: 1px solid #e1ebf4; border-radius: 6px; background: #f5f9fd; }
.technical-current .technical-level { margin: 0; color: #2a608d; font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.4px; }
.technical-current > p { margin: 5px 0 0; color: #657c92; font-size: 11px; line-height: 1.6; }
.technical-current > small, .technical-current > .form-label { display: block; margin: 0 0 4px; color: #6c8195; font-size: 10px; font-weight: 500; }
.technical-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 2px 0 0; list-style: none; }
.technical-step { display: flex; flex-direction: column; align-items: center; position: relative; gap: 7px; min-width: 0; padding: 4px 0; text-align: center; }
.technical-step:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: calc(50% + 9px); right: calc(-50% + 4px); height: 1px; background: #dce6ef; }
.technical-step-dot { display: block; z-index: 1; width: 9px; height: 9px; flex-shrink: 0; border: 2px solid white; border-radius: 50%; background: #cedbe7; box-shadow: 0 0 0 1px #d5e0eb; }
.technical-step > span:last-child { max-width: 100%; color: #657c92; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.technical-step.done .technical-step-dot { background: #62a68b; box-shadow: 0 0 0 1px #b9ddcd; }
.technical-step.done > span:last-child { color: #56846f; }
.technical-step.done::after { background: #c4e1d4; }
.technical-step.current .technical-step-dot { background: var(--blue); box-shadow: 0 0 0 2px #dbedfc; }
.technical-step.current > span:last-child { color: #256fa9; font-weight: 650; }
.technical-panel .card-body > .button.primary { width: 100%; margin-top: 16px; white-space: normal; text-align: center; }
.technical-panel .card-body > .field-help { margin: 8px 0 0; font-size: 10px; line-height: 1.65; }
.take-panel .card-body { padding-top: 2px; }
.take-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.take-buttons .button { gap: 5px; }
.take-buttons .icon { width: 14px; height: 14px; }
.timeline-icon.escalation { color: #8264b4; background: #f1ecfa; }
.escalation-levels { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; color: #705394; font-size: 11px; font-weight: 600; line-height: 1.5; }
.escalation-levels .icon { width: 13px; height: 13px; color: #9a83bb; }
.serial-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.serial-header small { color: #6d8196; font-size: 10px; }
.serial-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.serial-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid #edf2f6; }
.serial-item:first-child { padding-top: 0; }
.serial-item:last-child { border-bottom: 0; }
.serial-value { min-width: 0; color: #476682; font-family: Consolas, "Cascadia Code", monospace; font-size: 12px; line-height: 1.6; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.serial-actions { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 3px; }
.serial-actions .rma-button { min-height: 29px; padding: 5px 8px; font-size: 10px; }
.serial-actions .icon-button { width: 29px; height: 29px; }
.serial-actions .icon { width: 15px; height: 15px; }
.serial-actions [data-action*="remove"]:hover, .serial-actions [data-action*="delete"]:hover { color: #b34f5b; background: #fff0f2; }
.serial-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e8eef4; }
.serial-form > .form-grid { flex: 1; width: 100%; min-width: 0; }
.serial-input-group { min-width: 0; flex: 1; }
.serial-input-group .form-label { margin-bottom: 6px; font-size: 11px; }
.serial-input-group input { width: 100%; min-width: 0; }
.serial-form > .button { flex: 0 0 auto; min-height: 38px; white-space: normal; }
.serial-panel .form-error { margin: 10px 0 0; }
.serial-empty { padding: 0 0 4px; }
.serial-empty h3 { margin: 0 0 4px; color: #56758f; font-size: 12px; font-weight: 550; }
.serial-empty p { margin: 0; color: #6c8094; font-size: 11px; line-height: 1.65; }

@media (max-width: 600px) {
  .technical-current { padding: 12px 13px; }
  .technical-steps { gap: 7px; }
  .technical-step > span:last-child { font-size: 10px; }
  .serial-form { gap: 8px; }
  .serial-input-group input { font-size: 16px; height: 40px; }
  .serial-form > .button { min-height: 40px; padding: 8px 11px; font-size: 11px; }
  .serial-item { gap: 9px; }
  .serial-value { font-size: 11px; }
  .serial-actions { gap: 1px; }
  .serial-actions .rma-button { padding: 5px 6px; font-size: 9px; }
  .escalation-actions .button { flex: 1 1 auto; }
  .case-close-actions .button { width: 100%; justify-content: center; }
  .serial-header { align-items: flex-start; }
}

/* Technical markers contain a number or a completed-step check. */
.technical-current .technical-level, .technical-current > .muted { display: block; }
.technical-current > .muted { margin-top: 5px; font-size: 11px; line-height: 1.6; }
.escalation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.escalation-actions > .form-label { flex: 0 0 100%; margin: 0; }
.escalation-actions .button { min-height: 33px; }
.escalation-actions .button:disabled { cursor: default; opacity: .65; }
.case-close-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #e8eef4; }
.case-workflow-actions .button { justify-content: center; white-space: normal; }
.technical-step-dot { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; color: #647b91; background: #e9eff5; font-size: 9px; font-weight: 600; line-height: 1; }
.technical-step-dot .icon { width: 11px; height: 11px; }
.technical-step.current .technical-step-dot, .technical-step.done .technical-step-dot { color: white; }
.technical-step:not(:last-child)::after { top: 13px; left: calc(50% + 12px); right: calc(-50% + 7px); }
.technical-max { margin: 16px 0 0; padding: 10px 12px; border-radius: 6px; background: #f1edf8; color: #745996; font-size: 11px; line-height: 1.65; }
.technical-max strong, .technical-max span { display: block; }
.technical-max strong { margin-bottom: 3px; font-weight: 600; }

/* Account access and administration. */
.auth-page { min-height: 100vh; }
.auth-header .header-tools { margin-left: auto; }
.auth-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 410px; align-items: center; gap: 80px; width: min(1030px, calc(100% - 64px)); margin: 0 auto; min-height: calc(100vh - 67px); padding: 48px 0 70px; }
.auth-context { min-width: 0; max-width: 410px; }
.auth-context h1 { margin: 12px 0 19px; color: var(--ink); font-size: 43px; line-height: 1.18; font-weight: 650; letter-spacing: -1.5px; }
.auth-context > p { margin: 0; color: #657d94; font-size: 14px; line-height: 1.85; max-width: 360px; }
.auth-context-detail { display: flex; align-items: center; gap: 11px; margin-top: 32px; padding-top: 22px; border-top: 1px solid #d6e3f0; color: #617e98; font-size: 12px; }
.auth-context-detail .icon { width: 21px; height: 21px; color: #6d98bc; }
.auth-card { min-width: 0; padding: 30px; border: 1px solid #dce7f0; border-radius: 12px; background: white; box-shadow: 0 8px 30px rgba(29, 69, 107, .06); }
.auth-heading { margin-bottom: 23px; }
.auth-symbol { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: 15px; color: #4a8cbf; border-radius: 10px; background: #edf6fe; }
.auth-symbol .icon { width: 20px; height: 20px; }
.auth-heading h2 { margin: 0 0 7px; font-size: 23px; line-height: 1.35; font-weight: 650; letter-spacing: -.6px; color: var(--ink); }
.auth-heading p { margin: 0; color: #6b8197; font-size: 12px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; margin-bottom: 23px; gap: 3px; border: 1px solid #e5ebf2; border-radius: 6px; background: #f4f7fa; }
.auth-tab { min-width: 0; padding: 7px 6px; border: 0; border-radius: 4px; background: transparent; color: #647b91; font-size: 12px; font-weight: 550; }
.auth-tab:hover { color: var(--blue); }
.auth-tab.active { background: white; color: #2e71a7; box-shadow: 0 1px 4px rgba(39, 70, 98, .08); }
.auth-setup-notice { margin-bottom: 23px; font-size: 11px; }
.auth-card .form-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
.auth-card .form-field.wide { grid-column: auto; }
.account-form .form-error { margin: 16px 0 0; }
.auth-submit { margin-top: 22px; }
.auth-submit > .button { width: 100%; justify-content: space-between; min-height: 40px; white-space: normal; text-align: left; }
.auth-footnote { margin: 23px 0 0; text-align: center; color: #73869a; font-size: 10px; }
.account-grid { display: grid; grid-template-columns: 310px minmax(0, 580px); align-items: start; gap: 22px; }
.account-identity { display: flex; gap: 12px; align-items: center; margin: 2px 0 25px; }
.account-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 43px; height: 43px; border-radius: 11px; background: #eaf3fc; color: #5582a9; font-size: 15px; font-weight: 600; }
.account-avatar, .user-cell .mini-avatar { overflow: hidden; }
.account-avatar > img, .user-cell .mini-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
button.avatar { padding: 0; overflow: hidden; }
.avatar > .account-avatar { width: 100%; height: 100%; border-radius: inherit; background: transparent; color: inherit; font: inherit; }
.account-photo-controls { display: flex; align-items: flex-start; gap: 14px; }
.account-photo-preview { width: 64px; height: 64px; border-radius: 12px; font-size: 20px; }
.account-photo-preview > [data-photo-initials] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.account-photo-preview .icon { width: 27px; height: 27px; }
.account-photo-picker { flex: 1; min-width: 0; }
.account-photo-input { height: auto; min-height: 38px; padding: 6px 8px; font-size: 11px; }
.account-photo-input::file-selector-button { margin-right: 8px; padding: 5px 8px; border: 1px solid #d5e0eb; border-radius: 4px; background: #f4f8fc; color: #55718b; font: inherit; cursor: pointer; }
.account-photo-picker .button { margin-top: 8px; }
.account-form textarea.form-textarea { min-height: 82px; resize: vertical; }
.account-address dd { white-space: pre-wrap; }
.account-identity > div { min-width: 0; }
.account-identity h3 { margin: 0 0 3px; color: #486680; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.account-identity p { margin: 0; color: #687f93; font-size: 11px; overflow-wrap: anywhere; }
.account-meta { display: grid; gap: 17px; margin: 0; }
.account-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 23px; }
.account-form-actions .button { white-space: normal; text-align: center; }
.checkbox-label, .report-checkbox { display: flex; align-items: center; gap: 8px; color: #55718b; font-size: 12px; cursor: pointer; line-height: 1.5; }
.checkbox-label input, .report-checkbox input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); cursor: pointer; flex-shrink: 0; }
.checkbox-label + .field-help { margin-left: 23px; }
.admin-user-form .account-form-actions { padding-top: 17px; border-top: 1px solid #e7edf4; }
.users-card table { min-width: 650px; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell .mini-avatar { width: 29px; height: 29px; font-size: 10px; }
.user-cell strong { color: #496982; font-size: 12px; font-weight: 600; }
.person-row { cursor: pointer; }
.person-row td { padding-top: 11px; padding-bottom: 11px; }
.person-row:hover td, .person-row:focus-within td { background: #f4f9fe; }
.person-name-button { min-width: 0; max-width: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.person-name-button > span:last-child { min-width: 0; }
.person-name-button strong { min-width: 0; overflow-wrap: anywhere; }
.person-name-button:focus-visible { outline: 2px solid #1689e5; outline-offset: 4px; }
.person-details .account-identity { margin-bottom: 21px; }
.person-details .person-details-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.person-details-fields .wide, .person-details-fields .account-address { grid-column: 1 / -1; }
.person-details-fields dd { white-space: pre-line; }
.person-delete-help { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.user-self { display: block; margin-top: 2px; color: #6f8397; font-size: 10px; }

/* Ticket state, equipment metadata and saved report views. */
.state-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.state-panel .state-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.state-summary-item { min-width: 0; padding: 12px 14px; background: #f7fafd; border: 1px solid #e7eef5; border-radius: 6px; }
.state-summary-item > span:first-child, .state-summary-item > label { display: block; margin-bottom: 7px; color: #687f95; font-size: 10px; }
.state-summary-item > strong { display: block; font-size: 12px; font-weight: 600; color: #456b8a; overflow-wrap: anywhere; }
.state-options { margin-top: 19px; }
.state-options > .button { align-self: end; min-height: 38px; white-space: normal; }
.serial-item:has(.serial-meta) { display: block; padding: 13px 0; }
.serial-item:has(.serial-meta):first-child { padding-top: 0; }
.serial-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 11px 0 4px; }
.serial-flags { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0; }
.serial-meta > div { min-width: 0; }
.serial-meta dt, .serial-meta > div > span:first-child { display: block; margin-bottom: 3px; color: #6b8195; font-size: 10px; }
.serial-meta dd { margin: 0; color: #486a87; font-size: 11px; overflow-wrap: anywhere; }
.serial-meta > div > strong { display: block; color: #486a87; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.serial-form.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.serial-form.form-grid .serial-input-group.wide { grid-column: 1 / -1; }
.serial-form.form-grid > .button { justify-self: start; }
.ticket-record .main-column > .serial-panel { order: 10; }
.report-builder .report-filters { margin-bottom: 19px; }
.report-builder .form-field { min-width: 0; }
.report-builder .report-checkbox { margin-top: 6px; }
.saved-reports { display: flex; flex-direction: column; gap: 10px; margin-top: 19px; }
.saved-report { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-width: 0; padding: 15px 18px; border: 1px solid #e0e8f1; border-radius: 8px; background: white; box-shadow: var(--shadow); }
.saved-report > div { min-width: 0; }
.saved-report h3, .saved-report strong { margin: 0; color: #436987; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.saved-report p, .saved-report small { display: block; margin: 5px 0 0; color: #6b8196; font-size: 11px; }
.saved-report .button { flex-shrink: 0; }
.report-preview { min-width: 0; margin-top: 22px; }
.report-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.report-columns > * { min-width: 0; }
.report-preview .table-wrap { max-width: 100%; }

/* Ticket submodules share the case context and keep their content focused. */
.ticket-module-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.ticket-module-summary .state-summary-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: rgba(255, 255, 255, .75); }
.ticket-module-summary .state-summary-item > span:first-child,
.ticket-module-summary .state-summary-item > label { margin: 0; }
.ticket-module-summary .state-summary-item > strong { font-size: 11px; }
.ticket-module-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 20px; padding: 5px; border: 1px solid #dee7f0; border-radius: 8px; background: rgba(255, 255, 255, .75); }
.ticket-module-tab { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 7px; min-height: 41px; padding: 10px 13px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #6b8298; font-size: 12px; font-weight: 550; line-height: 1.4; text-align: center; }
.ticket-module-tab > .icon { width: 16px; height: 16px; }
.ticket-module-tab:hover { background: #f0f7fd; color: #337bad; }
.ticket-module-tab.active { background: #e2f0fc; border-color: #d0e6f8; color: #226daa; font-weight: 650; }
.ticket-module-tab:focus-visible { position: relative; box-shadow: var(--focus); }
.ticket-module-panel { min-width: 0; }
.ticket-module-panel[hidden] { display: none !important; }
.ticket-module-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); align-items: start; gap: 20px; }
.ticket-module-grid > *, .ticket-module-stack > * { min-width: 0; }
.ticket-module-grid .detail-fields { grid-template-columns: minmax(0, 1fr); gap: 19px; }
.ticket-module-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ticket-information-grid .card-title { font-size: 16px; }
.ticket-information-sidebar .detail-fields { padding-top: 4px; gap: 22px; }
.ticket-information-sidebar .field-pair dt { font-size: 12px; }
.ticket-information-sidebar .field-pair dd { font-size: 14px; }
.ticket-information-sidebar .client-cell { gap: 12px; font-size: 16px; }
.ticket-information-sidebar .client-cell strong { font-size: inherit; }
.ticket-information-sidebar .client-logo { width: 40px; height: 40px; font-size: 13px; }
.ticket-information-sidebar .client-cell small, .ticket-information-sidebar .client-email { font-size: 12px; }
.ticket-information-sidebar .text-link { font-size: 13px; }
.ticket-information-main .card-subtitle, .ticket-information-main .field-help { font-size: 12px; }
.ticket-information-main .description-text { font-size: 14px; }
.ticket-information-main .state-summary-item > .form-label { font-size: 12px; }
.ticket-information-main .state-summary-item > strong, .ticket-information-main .state-summary-item .ticket-editable-value strong { font-size: 14px; }
.ticket-information-main .note-form > .form-label { font-size: 12px; }
.ticket-information-main .note-form .filter-select { max-width: 100%; }
.ticket-information-main .timeline-heading strong { font-size: 13px; }
.case-description-panel .description-text { font-size:14px; }
#serial-section { scroll-margin-top:130px; }
.ticket-information-top:has(> .case-description-panel:only-child) { grid-template-columns:minmax(0,1fr); }
.case-actions-panel { padding:12px; }
.case-actions-panel .case-workflow-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;margin:0;padding:0;border:0; }
.case-actions-panel .case-workflow-actions .button { width:100%;min-height:32px;white-space:normal; }
.case-actions-panel .case-workflow-actions .button { grid-column:1 / -1; }
.case-actions-panel .case-workflow-actions [data-action="resolve-ticket"], .case-actions-panel .case-workflow-actions [data-action="reopen-ticket"], .case-actions-panel .case-workflow-actions [data-action="route-ticket"] { grid-column:auto; }
.rma-template-preview { margin:12px 0;padding:14px;border:1px solid var(--line);border-radius:6px;background:#f7fafd;font:inherit;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere; }
.serial-flag-values { display:flex;flex-wrap:wrap;gap:12px 24px;margin:0; }
.serial-flag-values > div { display:flex;gap:8px;align-items:baseline; }
.serial-flag-values dd { margin:0; }
.serial-logistics { display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px; }
.serial-shipment { display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;overflow-wrap:anywhere; }
.case-details-panel { container-type:inline-size; }
.case-details-layout { display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-width:0; }
.case-details-layout.has-case-actions { grid-template-columns:minmax(0,1fr) 220px; }
.case-details-layout > .detail-fields { grid-template-columns:minmax(0,1fr);gap:18px;margin:0;min-width:0; }
.case-details-actions { min-width:0;padding:22px;border-left:1px solid var(--line); }
.case-details-actions .case-workflow-actions { display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:0;border:0; }
.case-details-actions .case-workflow-actions .button { width:100%;min-height:39px;white-space:normal; }
.case-workflow-panel { container-type:inline-size; }
.case-workflow-panel .card-header { padding:14px 18px 10px; }
.case-workflow-panel .card-title { font-size:15px; }
.case-workflow-panel .card-subtitle { font-size:11px; }
.case-workflow-panel .card-body { padding:0 18px 14px; }
.case-workflow-panel .state-summary { grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.case-workflow-panel .state-summary-item { padding:10px 12px; }
.case-workflow-panel .field-help { margin:9px 0 0;font-size:11px; }
@container (max-width:700px) {
  .case-workflow-panel .state-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container (max-width:420px) {
  .case-workflow-panel .state-summary { grid-template-columns:minmax(0,1fr); }
}
@container (max-width:580px) {
  .case-details-layout.has-case-actions { grid-template-columns:minmax(0,1fr); }
  .case-details-actions { border-left:0;border-top:1px solid var(--line);padding-top:18px; }
  .case-details-actions .case-workflow-actions { flex-direction:row;flex-wrap:wrap; }
  .case-details-actions .case-workflow-actions .button { width:auto;flex:1 1 170px; }
}
.on-site-summary { margin-bottom: 19px; }

/* Ticket values open an editor in place with double click or keyboard focus. */
.ticket-editable-value { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 5px; margin: -3px -5px; border: 1px dashed transparent; border-radius: 5px; cursor: text; overflow-wrap: anywhere; }
.ticket-editable-value:hover { border-color: #bdd4e7; background: #f0f7fd; }
.ticket-editable-value:focus-visible { border-color: var(--blue); background: #edf6ff; box-shadow: var(--focus); outline: none; }
.ticket-editable-value[aria-busy] { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: auto; }
.description-text > .ticket-editable-value { display: block; }
.state-summary-item .ticket-editable-value strong { font-size: 12px; font-weight: 600; color: #456b8a; }
.ticket-module-summary .ticket-editable-value strong { font-size: 11px; }
.ticket-inline-editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; width: min(100%, 390px); min-width: 0; padding: 9px; border: 1px solid #b9d8f0; border-radius: 6px; background: #f7fbff; cursor: auto; white-space: normal; }
.ticket-inline-editor:focus-within { border-color: var(--blue); }
.ticket-inline-editor input, .ticket-inline-editor select, .ticket-inline-editor textarea { display: block; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #d5e2ed; border-radius: 5px; background: white; color: var(--ink); font-size: 12px; line-height: 1.5; }
.ticket-inline-editor textarea { min-height: 110px; resize: vertical; white-space: pre-wrap; }
.ticket-inline-editor > label { width: 100%; color: #55718b; font-size: 11px; font-weight: 600; }
.ticket-inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; width: 100%; }
.ticket-inline-actions .button { min-height: 31px; padding: 6px 10px; white-space: normal; }
.ticket-inline-error { width: 100%; margin: 0; color: #b13f52; font-size: 11px; line-height: 1.5; }
.ticket-inline-error:empty { display: none; }
.ticket-inline-status { width: 100%; margin: 0; color: #687f95; font-size: 10px; line-height: 1.5; }
.description-text .ticket-inline-editor { width: 100%; }

@media (max-width: 600px) {
  .ticket-inline-editor { width: 100%; }
  .ticket-inline-editor input, .ticket-inline-editor select, .ticket-inline-editor textarea { font-size: 16px; }
  .ticket-inline-actions .button { min-height: 38px; }
}

@media (max-width: 900px) {
  .ticket-module-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ticket-module-summary { gap: 6px; margin-bottom: 12px; }
  .ticket-module-summary .state-summary-item { flex: 1 1 auto; padding: 7px 10px; }
  .ticket-module-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
  .ticket-module-tab { flex-basis: calc(50% - 4px); min-height: 43px; padding: 9px 8px; font-size: 11px; }
  .ticket-module-grid, .ticket-module-stack { gap: 16px; }
}

@media (max-width: 900px) {
  .auth-workspace { width: min(810px, calc(100% - 40px)); grid-template-columns: minmax(0, 1fr) 370px; gap: 35px; }
  .auth-context h1 { font-size: 35px; }
  .auth-context > p { font-size: 12px; }
  .auth-context-detail { font-size: 11px; align-items: flex-start; }
  .auth-card { padding: 26px; }
  .account-grid { grid-template-columns: 265px minmax(0, 1fr); gap: 18px; }
  .state-summary { gap: 8px; }
  .state-summary-item { padding: 10px; }
  .report-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .auth-workspace { grid-template-columns: minmax(0, 1fr); width: min(440px, calc(100% - 30px)); padding: 26px 0 38px; min-height: calc(100vh - 58px); gap: 22px; }
  .auth-context { max-width: none; }
  .auth-context h1 { font-size: 28px; margin: 6px 0 0; }
  .auth-context > p, .auth-context-detail { display: none; }
  .auth-context .welcome-kicker { font-size: 9px; }
  .auth-card { padding: 25px 22px; }
  .auth-heading h2 { font-size: 21px; }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .account-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .account-meta .account-address { grid-column: 1 / -1; }
  .saved-report { align-items: flex-start; flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
}
@media (max-width: 600px) {
  .account-form .form-input { font-size: 16px; }
  .account-form .form-textarea { font-size: 16px; }
  .account-form .account-photo-input { font-size: 12px; }
  .auth-header .language-select { margin-right: 0; }
  .account-form-actions { flex-wrap: wrap; gap: 8px; }
  .account-form-actions > .button { flex: 1; min-height: 38px; }
  .state-summary, .state-panel .state-summary { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .state-summary-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .state-summary-item > span:first-child, .state-summary-item > label { margin: 0; }
  .serial-meta { gap: 9px 13px; }
  .serial-form.form-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .serial-form.form-grid .serial-input-group.wide { grid-column: auto; }
  .serial-form.form-grid .form-input { font-size: 16px; }
  .serial-form.form-grid > .button { justify-self: stretch; }
  .report-preview { margin-top: 17px; }
}
@media (max-width: 480px) {
  .person-details .person-details-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .person-details-modal .modal-footer { flex-wrap: wrap; }
  .person-details-modal .modal-footer .button { flex: 1 1 auto; }
}
/* Staff module grants share one labelled, keyboard-accessible checkbox group. */
.module-access-field { min-width:0; margin:0; padding:16px; border:1px solid var(--border, #dce3eb); border-radius:8px; }
.module-access-field[hidden] { display:none; }
.module-access-field legend { padding:0 6px; }
.module-access-tools { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
.module-access-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px 16px; }
.module-access-option { min-height:36px; margin:0; }
.module-access-option input { flex:0 0 auto; }
/* A call update keeps its telephone context beside the ticket composer. */
.note-call-tools { margin:12px 0; padding:14px; border:1px solid var(--line,#dce6f0); border-radius:8px; background:var(--surface,#f6f9fc); min-width:0; }
.note-call-tools[hidden] { display:none; }
.note-call-fields { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; }
.note-call-fields > div { min-width:0; }
.note-call-fields input,.note-call-fields select { width:100%; min-width:0; box-sizing:border-box; }
.note-call-tools .note-call-fields .filter-select { min-width:0; margin-bottom:0; }
.note-call-recognition { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:12px; color:var(--muted,#65768b); font-size:12px; overflow-wrap:anywhere; }
.note-call-recognition > div { min-width:0; }
.note-call-recognition strong { color:var(--text,#17324f); font-weight:600; }
.note-call-recognition p { margin:4px 0; }
.note-call-links { display:flex; flex-wrap:wrap; gap:8px; }
.note-call-history { font-size:12px; color:var(--muted,#65768b); overflow-wrap:anywhere; }
@media (max-width:480px) { .note-call-fields { grid-template-columns:minmax(0,1fr); } }
.case-editor-preview[data-device="mobile"] .note-call-fields { grid-template-columns:minmax(0,1fr); }