/* traklance-admin/src CSS (CRA bundled every imported stylesheet globally): index.css, App.css, css, components (all .css files) */

/* ---- index.css ---- */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.sidebar-brand {
  box-sizing: border-box;
  height: 76px;
  padding: 10px 10px 4px;
  transition: height 0.3s ease, padding 0.3s ease;
}

.sidebar-brand__logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 35, 90, 0.2));
}

.sidebar-brand--collapsed {
  height: 64px;
  justify-content: flex-start !important;
  padding: 4px 10px;
}

.sidebar-brand--collapsed .sidebar-brand__logo {
  flex: none;
  width: auto;
  height: 56px;
  max-height: none;
}

/* Leaflet Map Fixes */
.leaflet-container {
  height: 100%;
  width: 100%;
  z-index: 1;
  background: #f5f5f5;
}

.ant-modal .leaflet-container {
  z-index: 1;
}

.ant-modal .leaflet-pane,
.ant-modal .leaflet-top,
.ant-modal .leaflet-bottom {
  z-index: auto;
}

.leaflet-pane {
  z-index: 2;
}

.leaflet-control-container {
  z-index: 1000;
}

/* Ensure map tiles load properly */
.leaflet-tile-container {
  animation: none !important;
}

.leaflet-tile {
  max-width: none !important;
  max-height: none !important;
}

/* ---- App.css ---- */
/* dark-mode.css - Import this in your global styles file */

/* Variables for theme colors */
:root {
  --app-primary: #EBB552;
  --app-primary-soft: rgba(235, 181, 82, 0.18);
  --app-primaryDark: #D49B2A;
  --app-primaryLight: #FFF3E0;
  --app-onPrimary: #211A0D;
  --app-secondary: #74664D;
  --app-background: #FFFBFE;
  --app-surface: #FFFFFF;
  --app-textPrimary: #212121;
  --app-textSecondary: #757575;
  --app-border: #E0E0E0;
  --app-success: #4CAF50;
  --app-warning: #FFA500;
  --app-error: #B3261E;
  --app-info: #4299E1;
  --bg-color: #ffffff;
  --text-color: rgba(0, 0, 0, 0.85);
  --secondary-text-color: rgba(0, 0, 0, 0.45);
  --border-color: #f0f0f0;
  --card-bg: #ffffff;
  --component-bg: #fafafa;
  --disabled-bg: rgba(0, 0, 0, 0.04);
  --hover-color: rgba(0, 0, 0, 0.04);
  --sidebar-bg-light: #92b9bd;
  /* Light mode sidebar background */
  --menu-item-hover-light: #88adb1;
  /* Light mode menu item hover */
  --menu-item-active-light: #78a5aa;
  /* Light mode menu item active */
  --header-bg-light: #ffffff;
  /* Light mode header background */
  --content-area-bg-light: #ffffff;
  /* Light mode content area background */
  --logout-bg-light: #ffcdd2;
  /* Light mode logout button background */
  --logout-text-light: #c62828;
  /* Light mode logout button text */
  --switch-bg-light: #f0f0f0;
  /* Light mode switch background */
}

html.dark-theme {
  --bg-color: #141414;
  --text-color: rgba(255, 255, 255, 0.85);
  --secondary-text-color: rgba(255, 255, 255, 0.45);
  --border-color: #303030;
  --card-bg: #1f1f1f;
  --component-bg: #141414;
  --disabled-bg: rgba(255, 255, 255, 0.08);
  --hover-color: rgba(255, 255, 255, 0.08);
  --sidebar-bg-dark: #1f1f1f;
  /* Dark mode sidebar background */
  --menu-item-hover-dark: #333333;
  /* Dark mode menu item hover */
  --menu-item-active-dark: #177ddc;
  /* Dark mode menu item active */
  --header-bg-dark: #121212;
  /* Dark mode header background */
  --content-area-bg-dark: #1a1a1a;
  /* Dark mode content area background */
  --logout-bg-dark: #d32f2f;
  /* Dark mode logout button background */
  --logout-text-dark: #ffffff;
  /* Dark mode logout button text */
  --switch-bg-dark: #303030;
  /* Dark mode switch background */
}

/* Body styles based on theme */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Shared authenticated screen layout */
.app-content-shell {
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.app-content-shell > * {
  min-width: 0;
}

.app-content-shell:has(.chat-page-shell) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-content-shell:has(.chat-page-shell) > * {
  flex: 1;
  min-height: 0;
}

.app-content-shell .ant-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.app-content-shell .ant-table {
  min-width: max-content;
}

.app-content-shell img,
.app-content-shell video,
.app-content-shell canvas {
  max-width: 100%;
}

/* Material top app bar (shell header): surface colour from the theme, round icon buttons with state layers */
.ant-layout-header.app-topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 10px; line-height: normal;
  color: var(--text-color); background: color-mix(in srgb, var(--app-surface, #fff) 92%, transparent);
  border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
}
html.dark-theme .ant-layout-header.app-topbar { background: rgba(18, 18, 18, 0.9); }
.topbar-icon-btn {
  position: relative; display: inline-grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--secondary-text-color);
  font-size: 18px; cursor: pointer; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text-color) 5%, transparent);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.topbar-actions .topbar-icon-btn + .ant-tooltip-open, .topbar-actions > * + * { margin-left: 2px; }
.topbar-icon-btn .ant-badge-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; line-height: 18px; box-shadow: 0 0 0 2px var(--app-surface, #fff); }
.topbar-menu-btn { background: transparent; }
.topbar-icon-btn:hover { color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); }
.topbar-icon-btn:active { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 18%, transparent); }
.topbar-icon-btn:focus-visible, .topbar-logout:focus-visible { outline: 2px solid var(--app-primary, #0d4d9c); outline-offset: 2px; }
.topbar-icon-btn .ant-badge { color: inherit; font-size: inherit; }
.topbar-menu-btn { color: var(--text-color); }
.topbar-title { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; margin-left: 4px; }
.topbar-title small { color: var(--secondary-text-color); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; }
.topbar-title h1 { overflow: hidden; margin: 0; color: var(--text-color); font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.topbar-divider { width: 1px; height: 26px; margin: 0 6px; background: var(--border-color); }
.topbar-user {
  display: inline-flex; align-items: center; gap: 10px; max-width: 240px; height: 46px; padding: 4px 12px 4px 4px; color: var(--text-color); font: inherit; text-align: left;
  cursor: pointer; border: 1px solid var(--border-color); border-radius: 999px; background: var(--card-bg, #fff); transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.topbar-user:hover, .topbar-user.ant-popover-open { border-color: color-mix(in srgb, var(--app-primary, #0d4d9c) 45%, var(--border-color)); box-shadow: 0 4px 14px color-mix(in srgb, var(--app-primary, #0d4d9c) 16%, transparent); }
.topbar-user:focus-visible { outline: 2px solid var(--app-primary, #0d4d9c); outline-offset: 2px; }
.topbar-user__avatar, .account-menu__avatar {
  position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; overflow: hidden; color: var(--app-onPrimary, #fff);
  font-size: 12px; font-weight: 800; border-radius: 50%; background: linear-gradient(140deg, var(--app-primary, #0d4d9c), var(--app-primaryDark, #082f63));
  box-shadow: 0 0 0 2px var(--card-bg, #fff), 0 0 0 3px color-mix(in srgb, var(--app-primary, #0d4d9c) 35%, transparent);
}
.topbar-user__avatar img, .account-menu__avatar img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.topbar-user__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar-user__text strong { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user__text small { color: var(--secondary-text-color); font-size: 11px; font-weight: 600; }
.topbar-user__caret { color: var(--secondary-text-color); font-size: 11px; transition: transform 0.2s ease; }
.topbar-user.ant-popover-open .topbar-user__caret { transform: rotate(180deg); }

/* Account menu (profile chip popover) */
.ant-popover:has(.account-menu) .ant-popover-arrow { display: none; }
.ant-popover:has(.account-menu) .ant-popover-inner { padding: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2); }
.ant-popover:has(.account-menu) .ant-popover-inner-content { padding: 0; }
.account-menu { width: 300px; color: var(--text-color); }
.account-menu__head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 12%, var(--card-bg, #fff)), var(--card-bg, #fff)); border-bottom: 1px solid var(--border-color); }
.account-menu__avatar { width: 52px; height: 52px; font-size: 17px; }
.account-menu__who { display: flex; flex-direction: column; min-width: 0; }
.account-menu__who strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__who small { overflow: hidden; color: var(--secondary-text-color); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.account-menu__tags em { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; overflow: hidden; color: var(--app-primary, #0d4d9c); font-size: 11px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; background: color-mix(in srgb, var(--app-primary, #0d4d9c) 11%, transparent); }
.account-menu__list, .account-menu__footer { display: flex; flex-direction: column; padding: 6px; }
.account-menu__footer { border-top: 1px solid var(--border-color); }
.account-menu__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; border: 0; border-radius: 12px; background: transparent; transition: background 0.15s ease; }
.account-menu__item:hover { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 8%, transparent); }
.account-menu__item:focus-visible { outline: 2px solid var(--app-primary, #0d4d9c); outline-offset: -2px; }
.account-menu__icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; color: var(--app-primary, #0d4d9c); font-size: 16px; border-radius: 10px; background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); }
.account-menu__text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.account-menu__text strong { font-size: 13.5px; font-weight: 700; }
.account-menu__text small { color: var(--secondary-text-color); font-size: 11.5px; }
.account-menu__chevron { color: var(--secondary-text-color); font-size: 11px; opacity: 0.6; }
.account-menu__switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--text-color) 20%, transparent); transition: background 0.2s ease; }
.account-menu__switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; }
.account-menu__switch.is-on { background: var(--app-primary, #0d4d9c); }
.account-menu__switch.is-on i { transform: translateX(16px); }
.account-menu__logout { color: var(--app-error, #d32f2f); }
.account-menu__logout .account-menu__icon { color: var(--app-error, #d32f2f); background: color-mix(in srgb, var(--app-error, #d32f2f) 10%, transparent); }
.account-menu__logout:hover { background: color-mix(in srgb, var(--app-error, #d32f2f) 8%, transparent); }
html.dark-theme .account-menu__icon, html.dark-theme .account-menu__tags em { color: color-mix(in srgb, var(--app-primary, #0d4d9c) 45%, #fff); }
html.dark-theme .account-menu__logout, html.dark-theme .account-menu__logout .account-menu__icon { color: #ff7875; }
.topbar-logout {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; margin-left: 4px; padding: 0 14px; color: var(--app-error, #d32f2f); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--app-error, #d32f2f) 10%, transparent); transition: background 0.18s ease;
}
.topbar-logout:hover { background: color-mix(in srgb, var(--app-error, #d32f2f) 18%, transparent); }
@media (max-width: 768px) {
  .ant-layout-header.app-topbar { gap: 4px; padding: 0 8px 0 4px; }
  .topbar-title h1 { font-size: 15px; }
  .topbar-title small { font-size: 11px; }
  .topbar-user { height: 42px; padding: 3px; }
  .topbar-user__avatar { width: 34px; height: 34px; }
}

/* Dashboard */
.dashboard-page {
  width: 100%;
  min-width: 0;
}

/* Hero: theme primary gradient, AI search and live KPI tiles (follows Settings > Appearance) */
.dashboard-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 26px;
  padding: clamp(20px, 2.6vw, 30px);
  color: #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(130deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 62%, #020617), var(--app-primary, #0d4d9c) 58%, color-mix(in srgb, var(--app-primary, #0d4d9c) 72%, #60a5fa));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--app-primary, #0d4d9c) 30%, transparent);
}
.dashboard-hero__orb {
  position: absolute; z-index: -1; right: -90px; bottom: -120px; width: 320px; height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; box-shadow: inset 0 0 0 46px rgba(255, 255, 255, 0.04);
}
.dashboard-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dashboard-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; color: rgba(255, 255, 255, 0.86); font-size: 12px; font-weight: 700; border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.dashboard-hero h1 { margin: 12px 0 0; color: #fff; font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; }
.dashboard-hero p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.dashboard-hero .ant-btn.dashboard-hero__refresh { flex: 0 0 auto; color: #fff; border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.1); }
.dashboard-hero .ant-btn.dashboard-hero__refresh:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.18); }
.dashboard-hero__search { display: grid; grid-template-columns: minmax(200px, 0.6fr) minmax(320px, 1.4fr); align-items: center; gap: 22px; margin-top: 22px; }
.dashboard-hero__search-copy { display: flex; flex-direction: column; gap: 3px; }
.dashboard-hero__search-copy strong { font-size: clamp(17px, 1.6vw, 21px); }
.dashboard-hero__search-copy small { color: rgba(255, 255, 255, 0.74); font-size: 13px; }
.dashboard-hero .ai-search-bar { border-color: transparent; }
.dashboard-hero .ai-search-bar .ant-btn-primary { background: var(--app-primary, #0d4d9c); border-color: var(--app-primary, #0d4d9c); }
.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.dashboard-kpi {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; color: #fff; font: inherit; text-align: left; cursor: pointer;
  border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px); transition: background 0.2s ease, transform 0.2s ease;
}
.dashboard-kpi:hover { background: rgba(255, 255, 255, 0.17); transform: translateY(-2px); }
.dashboard-kpi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dashboard-kpi__icon { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; font-size: 19px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); }
.dashboard-kpi__body { display: flex; flex-direction: column; min-width: 0; }
.dashboard-kpi__body small { color: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.dashboard-kpi__body strong { overflow: hidden; font-size: clamp(18px, 1.7vw, 23px); font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-kpi__body em { overflow: hidden; color: rgba(255, 255, 255, 0.7); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

/* Module launcher (Ubuntu / ERP app-grid style): gradient squircle icon in the module colour
   (Settings > Appearance > dashboard cards), white glyph with gloss, label below */
.dashboard-modules .dashboard-section-heading { margin-bottom: 14px; }
.dashboard-modules__count { padding: 3px 10px; color: var(--app-primary, #0d4d9c); font-size: 12px; font-weight: 700; border-radius: 999px; background: var(--app-primary-soft, rgba(13, 77, 156, 0.12)); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dashboard-module {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; min-width: 0; min-height: 146px; padding: 18px 12px 16px;
  color: var(--text-color); font: inherit; text-align: center; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 20px; background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.dashboard-module:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--module) 35%, var(--border-color));
  background: linear-gradient(180deg, color-mix(in srgb, var(--module) 7%, var(--card-bg)), var(--card-bg) 70%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--module) 20%, transparent);
}
.dashboard-module:active { transform: translateY(-1px) scale(0.98); }
.dashboard-module:focus-visible { outline: 2px solid var(--module); outline-offset: 2px; }
.dashboard-module__icon {
  position: relative; display: grid; place-items: center; width: 62px; height: 62px; overflow: hidden; color: #fff; font-size: 29px;
  border-radius: 19px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--module) 72%, #fff) 0%, var(--module) 48%, color-mix(in srgb, var(--module) 72%, #000) 100%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--module) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.dashboard-module__icon::after {  /* gloss */
  position: absolute; inset: 0 0 52% 0; content: ""; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)); border-radius: 19px 19px 50% 50% / 19px 19px 14px 14px;
}
.dashboard-module__icon .anticon { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.dashboard-module:hover .dashboard-module__icon { transform: translateY(-2px) scale(1.07); box-shadow: 0 12px 24px color-mix(in srgb, var(--module) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.12); }
.dashboard-module__title { display: block; width: 100%; font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dashboard-module__go { display: none; }
html.dark-theme .dashboard-module { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
html.dark-theme .dashboard-section-heading > div > span { color: color-mix(in srgb, var(--app-primary, #0d4d9c) 55%, #fff); }
html.dark-theme .dashboard-modules__count { color: color-mix(in srgb, var(--app-primary, #0d4d9c) 45%, #fff); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 28%, transparent); }

@media (max-width: 1100px) {
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dashboard-hero__search { grid-template-columns: 1fr; gap: 12px; }
  .dashboard-hero__search-copy small { display: none; }
}
@media (max-width: 640px) {
  .dashboard-hero { border-radius: 20px; }
  .dashboard-hero__top { flex-direction: column; align-items: stretch; }
  .dashboard-hero .ant-btn.dashboard-hero__refresh { width: 100%; }
  .dashboard-kpis { gap: 10px; }
  .dashboard-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .dashboard-module { min-height: 118px; padding: 14px 6px 12px; gap: 9px; border-radius: 16px; }
  .dashboard-module__icon { width: 50px; height: 50px; font-size: 23px; border-radius: 15px; }
  .dashboard-module__icon::after { border-radius: 15px 15px 50% 50% / 15px 15px 11px 11px; }
  .dashboard-module__title { font-size: 12px; }
}

/* AI workspace search */
.dashboard-ai-search {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(340px, 1.2fr);
  align-items: center;
  gap: 24px;
  margin: 18px 0 20px;
  padding: 22px 24px;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 15%, rgba(85, 154, 255, 0.45), transparent 30%),
    linear-gradient(125deg, #082f63, #0d4d9c 58%, #1f6ed4);
  box-shadow: 0 12px 32px rgba(13, 77, 156, 0.2);
}

.dashboard-ai-search__copy { display: flex; flex-direction: column; gap: 3px; }
.dashboard-ai-search__copy span { color: #b9d8ff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dashboard-ai-search__copy strong { font-size: clamp(19px, 2vw, 25px); }
.dashboard-ai-search__copy small { color: rgba(255, 255, 255, 0.76); font-size: 13px; }

.ai-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 7px 6px 14px;
  background: #fff;
  border: 1px solid rgba(13, 77, 156, 0.12);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(5, 28, 57, 0.16);
}

.ai-search-bar--large { min-height: 58px; border-radius: 16px; }
.ai-search-bar__spark { display: grid; place-items: center; color: var(--app-primary, #1f6ed4); font-size: 21px; }
.ai-search-bar .ant-input { min-width: 0; color: #172033; font-size: 15px; background: transparent; }
.ai-search-bar .ant-btn { flex: 0 0 auto; min-height: 38px; border-radius: 10px; }
.ai-search-bar--large .ant-btn { min-height: 44px; padding-inline: 20px; }

.ai-search-page { width: 100%; max-width: 1440px; margin: 0 auto; }
.ai-search-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 10%, rgba(31, 110, 212, 0.18), transparent 27%),
    radial-gradient(circle at 5% 90%, rgba(72, 187, 255, 0.12), transparent 25%),
    linear-gradient(145deg, #f7fbff, #eef6ff);
  border: 1px solid #d9eaff;
}
.ai-search-hero__badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #0d4d9c; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ai-search-hero h1.ant-typography { margin: 0 0 7px; color: #10233e; font-size: clamp(28px, 4vw, 46px); }
.ai-search-hero > .ant-typography { color: #5f6f83; font-size: 16px; }
.ai-search-hero .ai-search-bar { max-width: 800px; margin: 28px auto 18px; text-align: left; }
.ai-search-suggestions { justify-content: center; }
.ai-search-suggestions .ant-btn { color: #34506f; border-color: #cfdfef; border-radius: 999px; background: rgba(255,255,255,0.74); }
.ai-search-alert, .ai-search-results, .ai-search-empty { margin-top: 22px; }
.ai-search-results__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.ai-search-results__heading h3.ant-typography { margin: 0 0 3px; }
.ai-search-result-group { margin-top: 24px; }
.ai-search-result-group__title { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: #293a50; font-size: 16px; }
.ai-search-result-group__title > span { display: grid; place-items: center; width: 30px; height: 30px; color: #0d4d9c; border-radius: 8px; background: #e8f2ff; }
.ai-search-result-card { height: 100%; border-radius: 14px; }
.ai-search-result-card .ant-card-body { display: flex; flex-direction: column; height: 100%; }
.ai-search-result-card__top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ai-search-result-card h4.ant-typography { margin: 0 0 5px; font-size: 17px; }
.ai-search-result-card__meta { margin-top: 12px; color: #334a66; font-size: 13px; font-weight: 600; }
.ai-search-result-card .ant-btn-link { align-self: flex-start; margin-top: auto; padding: 14px 0 0; }
.ai-search-empty { text-align: center; padding: 30px; border-radius: 16px; }
.ai-search-empty > .ant-card-body > .anticon { color: #1f6ed4; font-size: 42px; }

.ai-record-page { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1450px; margin: 0 auto; }
.ai-record-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 8px 2px 14px; border-bottom: 1px solid var(--border-color); }
.ai-record-header > div:first-child { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.ai-record-header > div:first-child > .ant-btn { height: auto; margin-bottom: 14px; padding: 0; color: var(--app-primary); }
.ai-record-header__eyebrow { display: flex; align-items: center; gap: 6px; color: var(--app-primary); font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.ai-record-header h1.ant-typography { margin: 4px 0 6px; font-size: clamp(27px, 3.5vw, 42px); }
.ai-record-section, .ai-record-media { height: 100%; border-radius: 14px; }
.ai-record-section .ant-descriptions-item-label { color: var(--secondary-text-color); font-size: 12px; }
.ai-record-section .ant-descriptions-item-content { color: var(--text-color); font-weight: 600; }
.ai-record-media .ant-image, .ai-record-media img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; }

@media (max-width: 700px) {
  .ai-record-header { align-items: flex-start; flex-direction: column; }
  .ai-record-header > .ant-space { width: 100%; }
  .ai-record-header > .ant-space .ant-btn { flex: 1; }
}

html.dark-theme .ai-search-hero { background: linear-gradient(145deg, #182232, #111a27); border-color: #293b52; }
html.dark-theme .ai-search-hero h1.ant-typography { color: #f3f7fc; }
html.dark-theme .ai-search-hero > .ant-typography { color: #aebbc9; }
html.dark-theme .ai-search-result-group__title { color: #e6edf5; }

@media (max-width: 768px) {
  .dashboard-ai-search { grid-template-columns: 1fr; gap: 16px; padding: 19px; }
  .ai-search-hero { padding: 26px 16px; }
  .ai-search-suggestions { display: none; }
  .ai-search-results__heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ai-search-bar--large .ant-btn span:not(.anticon) { display: none; }
  .ai-search-bar--large .ant-btn { padding-inline: 14px; }
}

.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 6px 2px;
}

.dashboard-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--app-primaryDark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.dashboard-heading h1 {
  margin: 0;
  color: var(--text-color);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.dashboard-heading p {
  margin: 7px 0 0;
  color: var(--secondary-text-color);
  font-size: 14px;
}

.dashboard-feature-card {
  min-height: clamp(108px, 11vw, 136px);
  height: 100%;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.1);
}

.dashboard-feature-card .ant-card-body {
  display: flex;
  padding: clamp(12px, 1.6vw, 20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dashboard-feature-icon {
  margin-bottom: 9px;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1;
}

.dashboard-feature-title {
  width: 100%;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-insights-section {
  margin-top: clamp(22px, 3vw, 32px);
}

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

.dashboard-section-heading > div > span {
  color: var(--app-primaryDark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-section-heading h2 {
  margin: 3px 0 0;
  color: var(--text-color);
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.2;
}

.dashboard-insights-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(400px, 1.28fr);
  gap: 14px;
}

.dashboard-insight-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 17px;
  background: var(--card-bg);
  box-shadow: 0 6px 22px rgba(18, 22, 33, 0.07);
}

.dashboard-insight-card__header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-insight-card__header h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.25;
}

.dashboard-insight-card__header p {
  margin: 3px 0 0;
  color: var(--secondary-text-color);
  font-size: 10px;
}

.dashboard-insight-card__header .ant-btn {
  height: auto;
  padding: 2px 0;
  color: var(--app-primaryDark);
  font-size: 10px;
  font-weight: 700;
}

.dashboard-attendance-content {
  display: flex;
  min-height: 188px;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 34px);
}

.dashboard-attendance-donut {
  position: relative;
  display: grid;
  width: 130px;
  height: 130px;
  flex: 0 0 130px;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--app-primary, #2584d8) 0 var(--attendance-percent),
      #ef5b4b var(--attendance-percent) calc(var(--attendance-percent) + 12deg),
      #f5a400 calc(var(--attendance-percent) + 12deg) calc(var(--attendance-percent) + 22deg),
      color-mix(in srgb, var(--border-color) 65%, transparent) calc(var(--attendance-percent) + 22deg)
    );
}

.dashboard-attendance-donut::after {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--card-bg);
  content: "";
}

.dashboard-attendance-donut > div {
  z-index: 1;
  text-align: center;
}

.dashboard-attendance-donut strong,
.dashboard-attendance-donut span {
  display: block;
}

.dashboard-attendance-donut strong {
  color: var(--text-color);
  font-size: 25px;
  line-height: 1;
}

.dashboard-attendance-donut span {
  margin-top: 4px;
  color: var(--secondary-text-color);
  font-size: 9px;
  font-weight: 650;
}

.dashboard-attendance-legend {
  display: grid;
  min-width: 110px;
  gap: 12px;
}

.dashboard-attendance-legend span {
  display: grid;
  grid-template-columns: 8px minmax(48px, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--secondary-text-color);
  font-size: 10px;
}

.dashboard-attendance-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dashboard-attendance-legend .is-present {
  background: var(--app-primary, #2584d8);
}

.dashboard-attendance-legend .is-absent {
  background: #ef5b4b;
}

.dashboard-attendance-legend .is-leave {
  background: #f5a400;
}

.dashboard-attendance-legend strong {
  color: var(--text-color);
}

.dashboard-revenue-card {
  overflow: hidden;
}

.dashboard-revenue-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-color);
  font-size: 25px;
  font-weight: 800;
}

.dashboard-revenue-total button {
  padding: 0;
  border: 0;
  color: var(--app-primaryDark);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-revenue-chart {
  display: block;
  width: 100%;
  height: 174px;
  overflow: visible;
}

.dashboard-revenue-chart line {
  stroke: var(--border-color);
  stroke-dasharray: 4 5;
  stroke-width: 1;
}

.dashboard-revenue-area { fill: url(#dashboard-revenue-fill); stroke: none; }
.dashboard-revenue-stop-top { stop-color: var(--app-primary, #0d4d9c); stop-opacity: 0.22; }
.dashboard-revenue-stop-bottom { stop-color: var(--app-primary, #0d4d9c); stop-opacity: 0; }

.dashboard-revenue-chart polyline {
  fill: none;
  stroke: var(--app-primary, #0d4d9c);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.dashboard-revenue-chart circle {
  fill: var(--app-primary, #0d4d9c);
  stroke: var(--card-bg);
  stroke-width: 3;
}

.dashboard-revenue-chart text {
  fill: var(--secondary-text-color);
  font-size: 9px;
}

.dashboard-activity-list,
.dashboard-engineer-list {
  display: grid;
}

.dashboard-activity-list button,
.dashboard-engineer-list button {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.dashboard-activity-list button {
  gap: 10px;
  padding: 8px 3px;
}

.dashboard-activity-list button:last-child,
.dashboard-engineer-list button:last-child {
  border-bottom: 0;
}

.dashboard-activity-list button:hover,
.dashboard-engineer-list button:hover {
  background: var(--hover-color);
}

.dashboard-activity-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  font-size: 13px;
}

.dashboard-activity-copy {
  display: block;
  min-width: 0;
  flex: 1;
}

.dashboard-activity-copy strong,
.dashboard-activity-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-activity-copy strong {
  font-size: 11px;
}

.dashboard-activity-copy small {
  margin-top: 2px;
  color: var(--secondary-text-color);
  font-size: 9px;
}

.dashboard-activity-list time {
  flex: 0 0 auto;
  color: var(--secondary-text-color);
  font-size: 9px;
}

.dashboard-engineer-list button {
  gap: 9px;
  padding: 7px 3px;
}

.dashboard-engineer-list .ant-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--app-primary);
  color: var(--app-onPrimary);
  font-size: 11px;
  line-height: 30px;
}

.dashboard-engineer-rank {
  width: 16px;
  flex: 0 0 16px;
  color: var(--secondary-text-color);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.dashboard-engineer-info {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 6px;
}

.dashboard-engineer-info strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-engineer-info > span {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-color);
}

.dashboard-engineer-info i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-primary, #2f9744);
}

.dashboard-engineer-list b {
  min-width: 22px;
  font-size: 11px;
  text-align: right;
}

.dashboard-insight-card .ant-empty {
  margin-block: 30px 14px;
}

.dashboard-insight-card .ant-empty-description {
  color: var(--secondary-text-color);
  font-size: 10px;
}

.dashboard-insight-card__header .is-spinning {
  color: var(--app-primaryDark);
  cursor: pointer;
  animation: dashboard-spin 1s linear infinite;
}

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

/* Business progress: every colour comes from the app theme (Settings > Appearance), light and dark */
.dashboard-progress-section {
  --dp-accent: var(--app-primary, #0d4d9c);
  --dp-accent-strong: var(--app-primaryDark, #083567);
  --dp-on-accent: var(--app-onPrimary, #fff);
  --dp-accent-text: var(--app-primaryDark, #083567);
  --dp-ink: var(--app-textPrimary, #1a1a1a);
  --dp-muted: color-mix(in srgb, var(--dp-ink) 62%, transparent);
  --dp-faint: color-mix(in srgb, var(--dp-ink) 46%, transparent);
  --dp-card: color-mix(in srgb, var(--app-surface, #fff) 86%, transparent);
  --dp-card-hover: var(--app-surface, #fff);
  --dp-line: color-mix(in srgb, var(--dp-ink) 9%, transparent);
  --dp-skeleton: color-mix(in srgb, var(--dp-ink) 8%, transparent);
  margin-top: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dp-accent) 26%, transparent);
  border-radius: 22px;
  color: var(--dp-ink);
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--dp-accent) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--dp-accent) 9%, var(--app-background, #fff)) 0%, var(--app-background, #fff) 62%);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--dp-accent) 12%, transparent);
}

body.dark-mode .dashboard-progress-section {
  /* lift the brand colour so it stays readable on the dark panel */
  --dp-accent-text: color-mix(in srgb, var(--app-primary, #1f6ed4) 62%, #fff);
  --dp-ink: #fff;
  --dp-muted: rgba(255, 255, 255, 0.64);
  --dp-faint: rgba(255, 255, 255, 0.48);
  --dp-card: rgba(255, 255, 255, 0.055);
  --dp-card-hover: rgba(255, 255, 255, 0.09);
  --dp-line: rgba(255, 255, 255, 0.1);
  --dp-skeleton: rgba(255, 255, 255, 0.13);
  border-color: color-mix(in srgb, var(--dp-accent) 42%, transparent);
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--dp-accent) 23%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--dp-accent) 6%, #080909) 0%, #161718 54%, #090a0a 100%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.dashboard-progress-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  padding-bottom: 18px;
}

.dashboard-progress-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dp-accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-progress-header h2 {
  margin: 7px 0 0;
  color: var(--dp-ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}

.dashboard-progress-header p {
  margin: 7px 0 0;
  color: var(--dp-muted);
  font-size: 13px;
}

.dashboard-progress-section .ant-btn.dashboard-target-button,
body.dark-mode .dashboard-progress-section .ant-btn.dashboard-target-button {
  flex: 0 0 auto;
  border-color: var(--dp-accent);
  color: var(--dp-on-accent);
  background: var(--dp-accent);
  font-weight: 750;
}

.dashboard-progress-section .ant-btn.dashboard-target-button:hover,
body.dark-mode .dashboard-progress-section .ant-btn.dashboard-target-button:hover {
  border-color: var(--dp-accent-strong) !important;
  color: var(--dp-on-accent) !important;
  background: var(--dp-accent-strong) !important;
}

.dashboard-progress-grid,
.dashboard-progress-loading {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 clamp(20px, 3vw, 32px) 26px;
}

.dashboard-progress-loading > div {
  padding: 16px;
  border-radius: 15px;
  background: var(--dp-card);
}

.dashboard-progress-loading .ant-skeleton-title,
.dashboard-progress-loading .ant-skeleton-paragraph > li {
  background: var(--dp-skeleton) !important;
}

.dashboard-progress-card {
  display: flex;
  min-width: 0;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--dp-line);
  border-radius: 16px;
  color: inherit;
  background: var(--dp-card);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.dashboard-progress-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--dp-accent) 60%, transparent);
  background: var(--dp-card-hover);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--dp-accent) 12%, transparent);
}

.dashboard-progress-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--dp-accent) 50%, transparent);
  outline-offset: 2px;
}

.dashboard-progress-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
}

.dashboard-progress-content {
  display: block;
  min-width: 0;
  flex: 1;
}

.dashboard-progress-label,
.dashboard-progress-value,
.dashboard-progress-meta {
  display: flex;
}

.dashboard-progress-label {
  color: var(--dp-muted);
  font-size: 11px;
  font-weight: 650;
}

.dashboard-progress-value {
  align-items: baseline;
  margin: 3px 0 8px;
  color: var(--dp-ink);
  font-size: 23px;
  font-weight: 820;
  line-height: 1.1;
}

.dashboard-progress-value small {
  margin-left: 4px;
  color: var(--dp-faint);
  font-size: 11px;
  font-weight: 600;
}

.dashboard-progress-card .ant-progress {
  display: block;
  margin: 0;
  line-height: 1;
}

.dashboard-progress-meta {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: var(--dp-faint);
  font-size: 10px;
}

.dashboard-progress-meta strong {
  color: var(--dp-accent-text);
}

.dashboard-progress-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--dp-accent) 25%, transparent);
  background: linear-gradient(90deg, var(--dp-accent-strong), var(--dp-accent));
  color: var(--dp-on-accent);
}

.dashboard-progress-footer span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border-right: 1px solid color-mix(in srgb, var(--dp-on-accent) 22%, transparent);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.dashboard-progress-footer span:last-child {
  border-right: 0;
}

.dashboard-target-help {
  margin-top: 0;
  color: var(--secondary-text-color);
}

@media (max-width: 1100px) {
  .dashboard-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-progress-grid,
  .dashboard-progress-loading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-heading,
  .dashboard-progress-header {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-heading .ant-btn,
  .dashboard-target-button {
    width: 100%;
  }

  .dashboard-insights-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-attendance-content {
    min-height: 170px;
  }

  .dashboard-section-heading .ant-btn {
    display: none;
  }

  .dashboard-progress-grid,
  .dashboard-progress-loading {
    grid-template-columns: 1fr;
  }

  .dashboard-progress-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-progress-footer span:nth-child(2) {
    border-right: 0;
  }

  .dashboard-progress-footer span:nth-child(-n + 2) {
    border-bottom: 1px solid color-mix(in srgb, var(--dp-on-accent) 22%, transparent);
  }
}

/* Appearance management */
.appearance-page {
  width: 100%;
  min-width: 0;
  border-radius: 10px;
}

.appearance-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(14px, 2vw, 22px);
}

.appearance-page-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.appearance-page-heading .ant-typography {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
}

.appearance-color-card {
  height: 100%;
}

.appearance-color-label {
  display: block;
  min-height: 22px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.45;
}

.appearance-actions {
  max-width: 100%;
}

.appearance-actions .ant-space-item {
  display: flex;
}

/* Shared statistics panels */
.statistics-panel {
  height: 100%;
  overflow: hidden;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(18, 22, 33, 0.07);
}

.statistics-panel-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(12px, 1.8vw, 18px);
  padding-bottom: 10px;
}

.statistics-panel-title {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 19px) !important;
  font-weight: 700 !important;
  line-height: 1.3;
}

.statistics-panel-filters {
  justify-content: flex-end;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  width: 100%;
  min-width: 0;
}

.statistics-grid--three,
.statistics-grid--four,
.statistics-grid--five {
  grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
}

.statistics-tile {
  min-width: 0;
  min-height: clamp(104px, 10vw, 124px);
  padding: clamp(12px, 1.6vw, 18px) 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.statistics-tile--interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.11);
}

.statistics-tile--interactive:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-primary) 45%, transparent);
  outline-offset: 2px;
}

.statistics-tile-icon {
  margin-bottom: 9px;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1;
}

.statistics-tile-icon--boxed {
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  margin-bottom: 9px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
}

.statistics-tile-value {
  margin: 0 0 4px;
  max-width: 100%;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
}

.statistics-tile-label {
  max-width: 100%;
  margin-top: 2px;
  font-size: clamp(11px, 1.2vw, 13px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

html.dark-theme .statistics-panel {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.26);
}

/* Compact tour management */
.tour-management-page {
  display: flex;
  width: 100%;
  max-width: 1700px;
  min-height: calc(100dvh - 112px);
  flex-direction: column;
  margin-inline: auto;
  padding: 6px;
  border-radius: 12px;
}

.tour-management-titlebar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
}

.tour-management-titlebar h1 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 780;
  line-height: 1.15;
}

.tour-management-titlebar p {
  margin: 2px 0 0;
  font-size: 11px;
}

.tour-icon-button {
  width: 34px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
}

.tour-view-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--component-bg);
}

.tour-view-switch .ant-btn {
  width: 31px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--secondary-text-color);
  background: transparent;
  box-shadow: none;
}

.tour-view-switch .ant-btn.is-active {
  color: var(--app-onPrimary);
  background: var(--app-primary);
}

.tour-overview-row > .ant-col {
  display: flex;
}

.tour-statistics-panel,
.tour-filter-panel {
  width: 100%;
  overflow: hidden;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
}

.tour-statistics-header {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.tour-statistics-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.tour-statistics-header .ant-btn {
  height: 26px;
  padding-inline: 8px;
  border-radius: 6px;
  font-size: 10px;
}

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

.tour-stat-tile {
  display: grid;
  min-width: 0;
  min-height: 49px;
  grid-template-columns: 28px minmax(30px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: transform 160ms ease, border-color 160ms ease;
}

.tour-stat-tile:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--app-primary) 55%, transparent) !important;
}

.tour-stat-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 14px;
}

.tour-stat-value {
  overflow: hidden;
  margin: 0;
  font-size: 17px;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-stat-label {
  overflow: hidden;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.tour-filter-controls {
  display: grid;
  height: 100%;
  min-height: 77px;
  grid-template-columns: minmax(150px, 1fr);
  align-content: center;
  gap: 5px;
}

.tour-filter-controls .ant-input-affix-wrapper,
.tour-filter-controls > .ant-btn,
.tour-filter-controls .ant-dropdown-trigger {
  width: 100%;
  min-height: 31px;
  border-radius: 7px;
  font-size: 11px;
}

.tour-filter-controls .ant-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tour-filter-controls > .ant-btn:last-child {
  color: var(--app-primaryDark);
}

.tour-results-area {
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 8px;
}

.tour-record-card {
  height: 100%;
  overflow: hidden;
  border-radius: 11px !important;
  border-left: 3px solid var(--tour-status) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.06);
  transition: transform 170ms ease, box-shadow 170ms ease !important;
}

.tour-record-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.11) !important;
}

.tour-card-content {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  padding: 9px;
}

.tour-card-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.tour-card-identity .ant-avatar {
  width: 34px;
  min-width: 34px;
  height: 34px;
  line-height: 32px;
  border: 2px solid var(--tour-status);
  background: color-mix(in srgb, var(--tour-status) 15%, var(--card-bg));
}

.tour-card-worker {
  display: block;
  min-width: 0;
  flex: 1;
}

.tour-card-worker strong,
.tour-card-worker span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-card-worker strong {
  font-size: 14px;
  line-height: 1.25;
}

.tour-card-worker span {
  margin-top: 2px;
  font-size: 10px;
}

.tour-card-status {
  flex: 0 0 auto;
  margin: 0 !important;
  padding-inline: 6px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  line-height: 21px !important;
}

.tour-card-reference {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 5px 7px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--component-bg);
  font-size: 10px;
}

.tour-card-reference strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-card-date {
  white-space: nowrap;
}

.tour-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}

.tour-card-metrics > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--component-bg);
}

.tour-card-metrics > div > .anticon {
  flex: 0 0 auto;
  color: var(--tour-status);
  font-size: 11px;
}

.tour-card-metrics span,
.tour-card-metrics small,
.tour-card-metrics strong {
  display: block;
  min-width: 0;
}

.tour-card-metrics span {
  overflow: hidden;
}

.tour-card-metrics small {
  font-size: 9px;
  line-height: 1.1;
  text-transform: uppercase;
}

.tour-card-metrics strong {
  overflow: hidden;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: auto;
  padding-top: 7px;
}

.tour-card-actions .ant-btn {
  height: 30px;
  padding-inline: 10px;
  border-radius: 7px;
  font-size: 10px;
}

.tour-card-actions .ant-btn-primary {
  border-color: var(--app-primary);
  color: var(--app-onPrimary);
  background: var(--app-primary);
}

@media (min-width: 900px) {
  .tour-results-grid--list .tour-card-content {
    display: grid;
    min-height: 60px;
    grid-template-columns: minmax(220px, 1.15fr) minmax(210px, 0.9fr) minmax(280px, 1.2fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
  }

  .tour-results-grid--list .tour-card-reference,
  .tour-results-grid--list .tour-card-metrics,
  .tour-results-grid--list .tour-card-actions {
    margin: 0;
  }

  .tour-results-grid--list .tour-card-actions {
    padding: 0 0 0 7px;
    border-left: 1px solid var(--border-color);
  }
}

@media (max-width: 1200px) {
  .tour-statistics-grid {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(125px, 1fr));
  }

  .tour-filter-controls {
    min-height: 0;
    grid-template-columns: minmax(180px, 1.4fr) minmax(145px, 0.8fr) auto;
  }

  .tour-filter-controls > .ant-btn:last-child {
    width: auto;
  }
}

@media (max-width: 640px) {
  .tour-management-page {
    padding: 3px;
  }

  .tour-management-titlebar {
    padding: 7px 8px;
  }

  .tour-management-titlebar p {
    display: none;
  }

  .tour-filter-controls {
    grid-template-columns: 1fr;
  }

  .tour-filter-controls > .ant-btn:last-child {
    width: 100%;
  }

  .tour-card-reference {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tour-card-date {
    grid-column: 1 / -1;
  }
}

/* Tour details page */
.tour-details-page {
  width: 100%;
  max-width: 1600px;
  min-width: 0;
  margin-inline: auto;
}

.tour-details-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--app-primary) 13%, var(--card-bg)), var(--card-bg) 54%);
  box-shadow: 0 3px 12px rgba(18, 22, 33, 0.06);
}

.tour-details-header__main,
.tour-details-header__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.tour-details-back {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 9px;
}

.tour-details-heading {
  min-width: 0;
}

.tour-details-heading > span {
  display: block;
  color: var(--app-primaryDark);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tour-details-heading h1 {
  overflow: hidden;
  margin: 2px 0;
  color: var(--text-color);
  font-size: clamp(21px, 2.3vw, 26px);
  font-weight: 820;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-details-heading p {
  overflow: hidden;
  margin: 0;
  color: var(--secondary-text-color);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-details-heading p strong {
  font-weight: 600;
}

.tour-details-header__actions .ant-tag {
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.tour-details-header__actions .ant-btn {
  height: 42px;
  border-radius: 8px;
  font-size: 13px;
}

.tour-details-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tour-details-metrics > div {
  display: flex;
  min-width: 0;
  min-height: 72px;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: 0 2px 7px rgba(18, 22, 33, 0.045);
}

.tour-details-metrics > div > .anticon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 8px;
  color: var(--app-primaryDark);
  background: var(--app-primary-soft);
  font-size: 16px;
}

.tour-details-metrics span,
.tour-details-metrics small,
.tour-details-metrics strong {
  display: block;
  min-width: 0;
}

.tour-details-metrics span {
  overflow: hidden;
}

.tour-details-metrics small {
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.1;
}

.tour-details-metrics strong {
  overflow: hidden;
  margin-top: 3px;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-details-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.75fr);
  align-items: start;
  gap: 14px;
}

.tour-details-main,
.tour-details-sidebar {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.tour-details-sidebar {
  width: 100%;
  max-width: none;
  justify-self: end;
}

.tour-detail-panel {
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--card-bg);
  box-shadow: 0 3px 12px rgba(18, 22, 33, 0.055);
}

.tour-detail-panel__header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.tour-detail-panel__header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.tour-detail-panel__header > div > .anticon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 8px;
  color: var(--app-primaryDark);
  background: var(--app-primary-soft);
  font-size: 16px;
}

.tour-detail-panel__header h2 {
  margin: 0;
  color: var(--text-color);
  font-size: 19px;
  line-height: 1.2;
}

.tour-detail-panel__header p {
  margin: 2px 0 0;
  color: var(--secondary-text-color);
  font-size: 12px;
}

.tour-site-list {
  display: grid;
  gap: 10px;
}

.tour-site-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--component-bg);
  transition: border-color 160ms ease, transform 160ms ease;
}

.tour-site-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--app-primary) 58%, transparent);
}

.tour-site-index {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  color: var(--app-onPrimary);
  background: var(--app-primary);
  font-size: 12px;
  font-weight: 800;
}

.tour-site-copy {
  min-width: 0;
}

.tour-site-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.tour-site-title strong {
  overflow: hidden;
  color: var(--text-color);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-site-title .ant-tag {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12px;
  line-height: 24px;
  text-transform: capitalize;
}

.tour-site-copy > p {
  overflow: hidden;
  margin: 3px 0;
  color: var(--secondary-text-color);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-site-work {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--secondary-text-color);
  font-size: 13px;
}

.tour-site-work span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-site-attachments {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.tour-site-attachments .ant-image,
.tour-site-attachments > span {
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 6px;
}

.tour-site-attachments img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.tour-site-attachments > span {
  display: grid;
  place-items: center;
  color: var(--secondary-text-color);
  background: var(--border-color);
  font-size: 10px;
  font-weight: 700;
}

.tour-site-actions {
  display: flex;
  gap: 5px;
}

.tour-site-actions .ant-btn {
  height: 38px;
  padding-inline: 14px;
  border-radius: 7px;
  font-size: 13px;
}

.tour-worker-profile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.tour-worker-profile .profile-avatar {
  flex: 0 0 auto;
  border: 3px solid var(--card-bg);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--app-primary) 24%, transparent);
}

.profile-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.profile-avatar .ant-avatar-string {
  position: static !important;
  color: #fff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  transform: none !important;
  line-height: 1 !important;
}

.tour-worker-profile .tour-worker-avatar {
  font-weight: 800;
}

.tour-worker-profile .profile-avatar .ant-avatar-string {
  font-family: inherit;
}

.tour-worker-profile > div {
  min-width: 0;
}

.tour-worker-profile strong,
.tour-worker-profile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-worker-profile strong {
  color: var(--text-color);
  font-size: 17px;
}

.tour-worker-profile span {
  margin-top: 2px;
  color: var(--secondary-text-color);
  font-size: 13px;
}

.tour-worker-contact,
.tour-ticket-info {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.tour-worker-contact > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--component-bg);
}

.tour-worker-contact .anticon {
  color: var(--app-primaryDark);
  font-size: 14px;
}

.tour-worker-contact small,
.tour-ticket-info small {
  color: var(--secondary-text-color);
  font-size: 12px;
}

.tour-worker-contact strong,
.tour-ticket-info strong {
  overflow: hidden;
  color: var(--text-color);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-detail-panel > .ant-btn-primary {
  height: 44px;
  border-color: var(--app-primary);
  border-radius: 8px;
  color: var(--app-onPrimary);
  background: var(--app-primary);
  font-size: 13px;
}

.tour-ticket-info > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
}

.tour-ticket-info > span:last-child {
  border-bottom: 0;
}

.tour-details-state {
  display: flex;
  min-height: 55vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

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

@media (max-width: 850px) {
  .tour-details-layout {
    grid-template-columns: 1fr;
  }

  .tour-details-sidebar {
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 600px) {
  .tour-details-header {
    align-items: stretch;
    flex-direction: column;
  }

  .tour-details-header__actions {
    justify-content: space-between;
  }

  .tour-details-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-details-metrics > div {
    padding: 7px;
  }

  .tour-site-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .tour-site-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .tour-site-actions .ant-btn {
    flex: 1;
  }
}

/* Ticket management */
.ticket-management-page {
  min-width: 0;
}

.ticket-management-shell {
  display: flex;
  min-height: calc(100dvh - 132px);
  flex-direction: column;
}

.ticket-management-header,
.ticket-statistics-panel {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.ticket-management-title-row,
.ticket-management-actions,
.ticket-management-filters {
  min-width: 0;
}

.ticket-management-heading {
  min-width: 220px;
}

.ticket-header-overview {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline: auto;
  padding-inline: 14px;
}

.ticket-header-overview-item {
  display: flex;
  min-width: 82px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--component-bg);
  white-space: nowrap;
}

.ticket-header-overview-item strong {
  color: var(--app-textPrimary);
  font-size: 18px;
  line-height: 1;
}

.ticket-header-overview-item span {
  color: var(--app-textSecondary);
  font-size: 11px;
  font-weight: 650;
}

.ticket-header-filter-chip {
  max-width: 150px;
  overflow: hidden;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--app-onPrimary);
  background: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-management-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ticket-management-header {
  overflow: hidden;
}

.ticket-secondary-action,
.ticket-primary-action {
  min-height: 44px;
  padding-inline: 18px;
  white-space: nowrap;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease !important;
}

.ticket-secondary-action:hover,
.ticket-primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.1);
}

.ticket-secondary-action:active,
.ticket-primary-action:active {
  transform: translateY(0);
}

.ticket-search-field {
  min-width: min(300px, 100%) !important;
}

.ticket-search-field .ant-input-affix-wrapper {
  padding-inline: 14px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.ticket-search-field .ant-input-affix-wrapper:hover,
.ticket-search-field .ant-input-affix-wrapper:focus-within {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px var(--app-primary-soft);
}

.ticket-filter-select .ant-select-selector {
  height: 44px !important;
  padding-inline: 14px !important;
  border-radius: 12px !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

.ticket-filter-select .ant-select-selection-item,
.ticket-filter-select .ant-select-selection-placeholder {
  line-height: 42px !important;
}

.ticket-filter-select:hover .ant-select-selector,
.ticket-filter-select.ant-select-focused .ant-select-selector {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px var(--app-primary-soft) !important;
}

.ticket-view-toggle {
  flex: 0 0 auto;
}

.ticket-view-toggle .ant-btn {
  min-width: 38px;
  min-height: 36px;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.ticket-view-toggle .ant-btn:hover {
  transform: scale(1.04);
}

.ticket-statistics-panel {
  overflow: hidden;
}

.ticket-statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
  gap: 8px;
}

.ticket-stat-card {
  min-width: 0;
  isolation: isolate;
  outline: none;
  user-select: none;
  will-change: transform;
  align-items: center;
}

.ticket-results-area {
  flex: 1 0 auto;
}

.ticket-pagination-bar {
  position: sticky !important;
  bottom: 0;
  margin-top: auto;
}

.ticket-stat-card:hover:not(.ticket-stat-card--active) {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--app-primary) 55%, transparent) !important;
  box-shadow: 0 10px 24px rgba(18, 22, 33, 0.12) !important;
}

.ticket-stat-card:active {
  transform: translateY(-1px);
}

.ticket-stat-card:focus-visible {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 4px var(--app-primary-soft) !important;
}

.ticket-stat-card__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: 0;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 3px 10px rgba(18, 22, 33, 0.06);
  font-size: 19px;
  opacity: 0.9;
  transition: transform 180ms ease;
}

.ticket-stat-card:hover .ticket-stat-card__icon {
  transform: scale(1.08);
}

.ticket-stat-card__content,
.ticket-stat-card__value,
.ticket-stat-card__label {
  min-width: 0;
}

.ticket-stat-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  text-align: left;
}

.ticket-stat-card__value {
  flex: 0 0 auto;
  margin: 0 !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.ticket-stat-card__label {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  text-align: left;
}

.ticket-result-card {
  will-change: transform;
  transition:
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

.ticket-result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(18, 22, 33, 0.14) !important;
}

.ticket-result-card--visited:hover {
  box-shadow: 0 0 20px rgba(235, 181, 82, 0.7) !important;
}

.ticket-floating-action {
  display: none !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease !important;
}

.ticket-floating-action:hover {
  transform: translateY(-3px) scale(1.06);
}

.ticket-floating-action:active {
  transform: translateY(0) scale(0.98);
}

html.dark-theme .ticket-stat-card__icon {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

html.dark-theme .ticket-stat-card:hover:not(.ticket-stat-card--active) {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34) !important;
}

/* Assign ticket workflow */
.assign-ticket-modal .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 18px;
}

.assign-ticket-modal .ant-modal-header {
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.assign-ticket-modal .ant-modal-close {
  top: 18px;
  right: 18px;
}

.assign-ticket-modal .ant-modal-body {
  max-height: min(68vh, 650px);
  padding: 20px 24px 8px;
  overflow-y: auto;
}

.assign-ticket-modal .ant-modal-footer {
  margin: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--component-bg) 58%, transparent);
}

.assign-ticket-modal .ant-modal-footer .ant-btn {
  min-width: 104px;
  height: 42px;
  border-radius: 10px;
  font-weight: 650;
}

.assign-ticket-modal .ant-modal-footer .ant-btn-primary {
  border-color: var(--app-primary);
  background: var(--app-primary);
  color: var(--app-onPrimary);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--app-primary) 26%, transparent);
}

.assign-ticket-modal__title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 34px;
}

.assign-ticket-modal__title-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--app-primary-soft);
  color: var(--app-primary);
  font-size: 20px;
}

.assign-ticket-modal__title-text,
.assign-ticket-modal__title-caption {
  display: block;
}

.assign-ticket-modal__title-text {
  color: var(--text-color);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.assign-ticket-modal__title-caption {
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: 450;
}

.assign-ticket-context {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--app-primary) 24%, var(--border-color));
  border-radius: 14px;
  background: color-mix(in srgb, var(--app-primary) 7%, var(--card-bg));
}

.assign-ticket-context__icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--app-primary);
  box-shadow: 0 3px 10px rgba(18, 22, 33, 0.08);
  font-size: 19px;
}

.assign-ticket-context__body {
  min-width: 0;
}

.assign-ticket-context__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.assign-ticket-context__eyebrow .ant-tag {
  margin: 0;
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--secondary-text-color);
  font-size: 10px;
}

.assign-ticket-context__subject {
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-color);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assign-ticket-context__customer {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  margin-top: 4px;
  color: var(--secondary-text-color);
  font-size: 12px;
}

.assign-ticket-context__customer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assign-ticket-field-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-color);
  font-weight: 650;
}

.assign-ticket-field-label small {
  margin-left: 2px;
  color: var(--secondary-text-color);
  font-size: 10px;
  font-weight: 500;
}

.assign-ticket-modal .ant-form-item-extra {
  padding-top: 5px;
  color: var(--secondary-text-color);
  font-size: 11px;
}

.assign-ticket-worker-select {
  width: 100%;
}

.assign-ticket-worker-select .ant-select-selector {
  min-height: 46px !important;
  align-items: center;
  border-radius: 10px !important;
}

.assign-ticket-worker-option {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding-block: 3px;
}

.assign-ticket-worker-option__identity {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.assign-ticket-worker-option__name,
.assign-ticket-worker-option__contact {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assign-ticket-worker-option__name {
  color: var(--text-color);
  font-weight: 650;
}

.assign-ticket-worker-option__contact {
  color: var(--secondary-text-color);
  font-size: 11px;
}

.assign-ticket-worker-option__workload {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 4px;
  color: var(--secondary-text-color);
}

.assign-ticket-worker-option__workload strong {
  color: var(--text-color);
}

.assign-ticket-worker-option__workload small {
  font-size: 10px;
}

.assign-ticket-selected-worker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #22c55e 30%, var(--border-color));
  border-radius: 12px;
  background: color-mix(in srgb, #22c55e 7%, var(--card-bg));
}

.assign-ticket-selected-worker__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.assign-ticket-selected-worker__body strong,
.assign-ticket-selected-worker__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assign-ticket-selected-worker__body small {
  color: var(--secondary-text-color);
}

.assign-ticket-selected-worker__status {
  color: #16a34a;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.assign-ticket-selected-worker__count {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
}

.assign-ticket-selected-worker__count strong {
  color: var(--text-color);
  font-size: 18px;
  line-height: 1;
}

.assign-ticket-selected-worker__count span {
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 10px;
}

.assign-ticket-nearest-button {
  height: 42px;
  margin-bottom: 18px;
  border-style: dashed;
  border-radius: 10px;
  color: #059669;
  font-weight: 650;
}

.assign-ticket-nearest-button:not(:disabled):hover {
  border-color: #059669 !important;
  color: #047857 !important;
}

.assign-ticket-modal textarea.ant-input {
  resize: none;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .assign-ticket-modal {
    width: calc(100vw - 20px) !important;
    max-width: none;
    margin: 10px auto;
  }

  .assign-ticket-modal .ant-modal-header {
    padding: 16px;
  }

  .assign-ticket-modal .ant-modal-body {
    max-height: calc(100dvh - 210px);
    padding: 16px 16px 6px;
  }

  .assign-ticket-modal .ant-modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px;
  }

  .assign-ticket-modal .ant-modal-footer .ant-btn {
    width: 100%;
    min-width: 0;
    margin-inline-start: 0 !important;
  }

  .assign-ticket-modal__title-caption,
  .assign-ticket-selected-worker__count {
    display: none;
  }

  .assign-ticket-context {
    padding: 12px;
  }
}

/* Compact customer directory */
.customers-page {
  width: 100%;
  max-width: 1600px;
  min-height: calc(100dvh - 112px) !important;
  margin-inline: auto;
  padding: 10px 10px 78px !important;
  background: transparent !important;
}

.customers-back-button {
  height: 36px;
  margin: 0 !important;
  border-radius: 9px;
}

.customers-heading {
  display: grid !important;
  grid-template-columns: auto auto minmax(220px, 1fr) auto;
  margin-bottom: 10px !important;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
}

.customers-heading .ant-typography {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 24px !important;
}

.customers-heading__count {
  display: inline-grid;
  min-width: 30px;
  height: 26px;
  padding-inline: 7px;
  place-items: center;
  border-radius: 8px;
  background: var(--app-primary-soft);
  color: var(--app-primaryDark);
  font-size: 13px;
  font-weight: 750;
}

.customers-heading__actions .ant-btn {
  height: 40px;
  border-radius: 10px;
  font-weight: 650;
}

.customers-heading__actions .ant-btn-primary {
  border-color: var(--app-primary);
  background: var(--app-primary);
  color: var(--app-onPrimary);
}

.customers-search-bar {
  position: relative;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
}

.customers-search-bar .ant-input-affix-wrapper {
  height: 42px;
  padding-inline: 13px;
  border-radius: 10px !important;
  font-size: 14px !important;
}

.customers-refreshing {
  position: absolute;
  top: 50%;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--component-bg);
  color: var(--secondary-text-color);
  font-size: 10px;
  pointer-events: none;
}

.customers-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.customers-grid--loading {
  display: grid;
}

.customer-card {
  min-width: 0;
  margin-bottom: 0 !important;
  overflow: hidden;
  border-color: var(--border-color) !important;
  border-radius: 13px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.06) !important;
}

.customer-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 45%, var(--border-color)) !important;
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.1) !important;
  transform: translateY(-2px);
}

.customer-card__body {
  padding: 12px !important;
}

.customer-card__body > div:first-child {
  margin-bottom: 9px !important;
}

.customer-card__body h3 {
  overflow: hidden;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-card__business {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-card__detail {
  min-height: 26px;
  margin-bottom: 3px !important;
  font-size: 12px !important;
}

.customer-card__detail > .anticon {
  flex: 0 0 auto;
  margin-right: 7px;
  color: var(--app-primaryDark);
}

.customer-card__coordinates > span:first-of-type,
.customer-card__mobile > span:first-of-type {
  display: none;
}

.customer-card__coordinates::before,
.customer-card__mobile::before {
  flex: 0 0 auto;
  min-width: 48px;
  margin-right: 7px;
  color: var(--app-primaryDark);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.customer-card__coordinates::before {
  content: "Lat/Lng";
}

.customer-card__mobile::before {
  content: "Mobile";
}

.customer-card__address > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 24px;
}

.customer-card__detail .ant-btn {
  height: 24px;
  padding-inline: 5px;
  font-size: 11px;
}

.customer-card__body > .ant-divider {
  margin: 6px 0 !important;
}

.customer-card__credentials {
  margin-bottom: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid color-mix(in srgb, var(--app-primary) 18%, var(--border-color));
  background: color-mix(in srgb, var(--app-primary) 6%, var(--card-bg)) !important;
}

.customer-card__credentials > div:first-child {
  margin-bottom: 3px !important;
}

.customer-card__credentials .ant-typography {
  color: var(--app-primaryDark) !important;
  font-size: 11px;
}

.customer-card__credentials .ant-btn {
  height: 22px;
  padding-inline: 4px;
  font-size: 10px;
}

.customer-card__credentials > div:last-child {
  font-size: 11px !important;
}

.customer-card__credentials > div:last-child > div {
  min-height: 23px;
  align-items: center;
}

.customer-card__credentials > div:last-child > div > span:nth-child(2) {
  min-width: 0;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-card__actions {
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.customer-card__actions .ant-btn {
  height: 30px;
  min-width: 0 !important;
  border-radius: 8px;
  font-size: 11px;
}

.customer-card--skeleton {
  min-height: 196px;
  padding: 18px 14px;
}

.customers-pagination {
  position: fixed !important;
  right: auto !important;
  bottom: 8px !important;
  left: 50% !important;
  z-index: 20 !important;
  width: min(calc(100vw - 28px), 760px);
  margin-top: 10px;
  padding: 9px 12px !important;
  transform: translateX(-50%);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent) !important;
}

.customers-pagination .ant-pagination {
  margin: 0;
}

.customers-empty-state__icon {
  margin-bottom: 12px;
  color: var(--secondary-text-color);
  font-size: 38px;
}

.customers-empty-state > div:first-child {
  display: none;
}

.customers-empty-state::before {
  display: block;
  margin-bottom: 10px;
  color: var(--secondary-text-color);
  content: "\263A";
  font-size: 34px;
  line-height: 1;
}

html.dark-theme .customer-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 700px) {
  .customers-page {
    padding: 6px !important;
  }

  .customers-heading {
    grid-template-columns: auto 1fr !important;
    align-items: flex-start !important;
    padding: 12px;
  }

  .customers-heading .ant-typography {
    width: auto;
    font-size: 21px !important;
  }

  .customers-heading .customers-search-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .customers-heading__actions {
    display: grid;
    width: 100%;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .customers-heading__actions .ant-space-item,
  .customers-heading__actions .ant-btn {
    width: 100%;
  }

  .customers-refreshing {
    display: none;
  }

  .customers-pagination {
    bottom: 4px !important;
    width: calc(100vw - 12px);
    overflow-x: auto;
    justify-content: flex-start !important;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .customers-heading {
    grid-template-columns: auto auto 1fr;
  }

  .customers-heading__actions {
    grid-column: 2 / -1;
    justify-self: end;
  }
}

/* Add and edit customer form */
.customer-form-modal .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--card-bg);
}

.customer-form-modal .ant-modal-header {
  margin: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
}

.customer-form-modal .ant-modal-close {
  top: 17px;
  right: 17px;
}

.customer-form-modal .ant-modal-body {
  max-height: min(70dvh, 690px);
  padding: 18px 22px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.customer-form-modal .ant-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--component-bg) 70%, var(--card-bg));
}

.customer-form-modal .ant-modal-footer .ant-btn {
  min-width: 110px;
  height: 40px;
  margin-inline-start: 0 !important;
  border-radius: 10px;
  font-weight: 650;
}

.customer-form-modal .ant-modal-footer .ant-btn-primary {
  border-color: var(--app-primary);
  background: var(--app-primary);
  color: var(--app-onPrimary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--app-primary) 24%, transparent);
}

.customer-form-modal__title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 34px;
}

.customer-form-modal__title-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 11px;
  background: var(--app-primary-soft);
  color: var(--app-primaryDark);
  font-size: 18px;
}

.customer-form-modal__title > span:last-child,
.customer-form-modal__title strong,
.customer-form-modal__title small {
  display: block;
}

.customer-form-modal__title strong {
  color: var(--text-color);
  font-size: 17px;
  line-height: 1.25;
}

.customer-form-modal__title small {
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 450;
}

.customer-form .ant-form-item {
  margin-bottom: 10px;
}

.customer-form .ant-form-item-label {
  padding-bottom: 4px;
}

.customer-form .ant-form-item-label > label {
  height: auto;
  color: var(--text-color);
  font-size: 11px;
  font-weight: 650;
}

.customer-form .ant-input,
.customer-form .ant-input-affix-wrapper,
.customer-form .ant-select-selector,
.customer-form .ant-select-single {
  min-height: 40px;
  border-radius: 9px !important;
}

.customer-form .ant-input-affix-wrapper .ant-input {
  min-height: auto;
}

.customer-form textarea.ant-input {
  min-height: 62px;
  resize: vertical;
}

.customer-form .ant-form-item-explain-error {
  margin-top: 2px;
  font-size: 10px;
}

.customer-form__section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--app-primary) 22%, var(--border-color));
  border-radius: 11px;
  background: color-mix(in srgb, var(--app-primary) 6%, var(--card-bg));
}

.customer-form__section-heading > .anticon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  background: var(--card-bg);
  color: var(--app-primaryDark);
}

.customer-form__section-heading > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.customer-form__section-heading strong {
  color: var(--text-color);
  font-size: 13px;
}

.customer-form__section-heading small {
  margin-top: 1px;
  color: var(--secondary-text-color);
  font-size: 10px;
}

.customer-form__section-heading em,
.customer-form-section summary em {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--component-bg);
  color: var(--secondary-text-color);
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  text-transform: uppercase;
}

.customer-form__location-row {
  margin: 0 0 10px !important;
  padding: 8px 10px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  background: var(--component-bg);
}

.customer-form__location-row .ant-btn {
  height: 34px;
  border-color: var(--app-primary) !important;
  border-radius: 8px;
  background: var(--app-primary) !important;
  color: var(--app-onPrimary);
  font-size: 11px;
  font-weight: 650;
}

.customer-form__location-row .ant-typography {
  overflow: hidden;
  color: var(--secondary-text-color) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-form__credentials-heading {
  margin: 3px 0 9px !important;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--component-bg);
}

.customer-form__credentials-heading .ant-typography {
  color: var(--text-color);
  font-size: 12px !important;
}

.customer-form__credentials-heading .ant-btn {
  height: 28px;
  padding-inline: 7px;
  color: var(--app-primaryDark) !important;
  font-size: 10px;
  font-weight: 650;
}

.customer-form-section {
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--card-bg);
}

.customer-form-section summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  background: var(--component-bg);
  user-select: none;
}

.customer-form-section summary::-webkit-details-marker {
  display: none;
}

.customer-form-section summary::before {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 7px;
  background: var(--app-primary-soft);
  color: var(--app-primaryDark);
  content: "+";
  font-size: 17px;
  font-weight: 500;
}

.customer-form-section[open] summary::before {
  content: "\2212";
}

.customer-form-section summary > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.customer-form-section summary strong {
  color: var(--text-color);
  font-size: 12px;
}

.customer-form-section summary small {
  margin-top: 2px;
  color: var(--secondary-text-color);
  font-size: 10px;
}

.customer-form-section__content {
  padding: 12px 12px 2px;
  border-top: 1px solid var(--border-color);
}

@media (max-width: 600px) {
  .customer-form-modal {
    width: calc(100vw - 16px) !important;
    max-width: none;
    margin: 8px auto;
  }

  .customer-form-modal .ant-modal-header {
    padding: 15px 16px;
  }

  .customer-form-modal .ant-modal-body {
    max-height: calc(100dvh - 196px);
    padding: 14px 14px 5px;
  }

  .customer-form-modal .ant-modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 11px 14px;
  }

  .customer-form-modal .ant-modal-footer .ant-btn {
    width: 100%;
    min-width: 0;
  }

  .customer-form-modal__title small,
  .customer-form__section-heading small {
    display: none;
  }

  .customer-form__location-row {
    align-items: stretch !important;
    flex-direction: column;
  }

  .customer-form__location-row .ant-btn {
    width: 100%;
  }

  .customer-form-section summary em {
    display: none;
  }
}

/* Compact product management */
.product-management-page {
  display: flex;
  width: 100%;
  max-width: 1600px;
  min-height: calc(100dvh - 112px) !important;
  flex-direction: column;
  margin-inline: auto;
  padding: 10px !important;
  background: transparent !important;
}

.product-management-header {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(360px, 1.25fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
}

.product-management-header h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-color);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.2;
}

.product-management-header__count {
  display: inline-flex;
  min-width: 25px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding-inline: 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-primary) 15%, transparent);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 750;
}

.product-management-header p {
  margin: 3px 0 0;
  color: var(--secondary-text-color);
  font-size: 11px;
}

.product-header-filters {
  width: 100%;
  min-width: 0;
}

.product-header-filters .product-search-panel__controls {
  display: grid !important;
  height: auto !important;
  grid-template-columns: minmax(125px, 0.55fr) minmax(220px, 1.45fr);
  align-items: center;
  gap: 8px !important;
}

.product-header-filters .ant-select,
.product-header-filters .ant-input-affix-wrapper,
.product-header-filters .ant-select-selector {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 9px !important;
}

.product-header-filters .ant-select-selection-item {
  line-height: 36px !important;
}

.product-create-button {
  height: 40px;
  padding-inline: 17px;
  border-color: var(--app-primary) !important;
  border-radius: 10px;
  background: var(--app-primary) !important;
  color: var(--app-onPrimary) !important;
  font-weight: 700;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--app-primary) 25%, transparent);
}

.product-management-toolbar > .ant-col {
  display: flex;
}

.product-management-toolbar .ant-card {
  width: 100%;
}

.product-statistics-panel,
.product-search-panel {
  overflow: hidden;
  border-color: var(--border-color) !important;
  border-radius: 13px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05) !important;
}

.product-statistics-panel .ant-card-body,
.product-search-panel .ant-card-body {
  padding: 10px !important;
}

.product-statistics-panel .statistics-panel-header {
  margin-bottom: 6px;
}

.product-statistics-panel .statistics-panel-title,
.product-search-panel__title .ant-typography {
  color: var(--text-color) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-statistics-panel .statistics-grid {
  gap: 7px;
}

.product-statistics-panel .statistics-tile {
  min-height: 58px;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 10px;
}

.product-statistics-panel .statistics-tile-icon {
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px;
  font-size: 14px;
}

.product-statistics-panel .statistics-tile-value {
  font-size: 18px;
  line-height: 1;
}

.product-statistics-panel .statistics-tile-label {
  font-size: 9px;
  line-height: 1.15;
}

.product-search-panel__title {
  margin-bottom: 6px !important;
}

.product-search-panel__controls {
  height: auto !important;
  gap: 7px !important;
}

.product-search-panel .ant-select,
.product-search-panel .ant-input-affix-wrapper {
  min-height: 37px;
}

.product-search-panel .ant-select-selector,
.product-search-panel .ant-input-affix-wrapper {
  min-height: 37px !important;
  border-radius: 9px !important;
}

.product-search-panel .ant-select-selection-item {
  line-height: 35px !important;
}

.product-results-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.product-list-card {
  height: 100%;
  margin: 0 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
}

.product-list-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 42%, var(--border-color)) !important;
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.1);
  transform: translateY(-2px);
}

.product-list-card .ant-card-body {
  padding: 11px !important;
}

.product-list-card__main {
  display: grid !important;
  grid-template-columns: 80px minmax(86px, 1fr) minmax(104px, auto);
  gap: 9px;
  margin: 0 !important;
}

.product-list-card__main::before,
.product-list-card__main::after {
  display: none;
}

.product-list-card__media,
.product-list-card__inventory,
.product-list-card__meta {
  min-width: 0;
}

.product-list-card__inventory {
  padding: 0 !important;
  font-size: 14px !important;
}

.product-card-carousel,
.product-card-carousel .slick-list,
.product-card-carousel .slick-slide,
.product-card-carousel__image {
  width: 80px !important;
  height: 80px !important;
}

.product-card-carousel__image {
  border-radius: 8px !important;
}

.product-card-carousel .slick-dots {
  bottom: 3px;
}

.product-list-card__name {
  display: -webkit-box;
  overflow: hidden;
  min-height: 31px;
  margin-bottom: 7px !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.2;
}

.product-list-card__inventory .ant-col > div:first-child {
  font-size: 9px;
}

.product-list-card__inventory .ant-col > div:nth-child(2) {
  font-size: 13px !important;
}

.product-list-card__inventory .ant-progress {
  margin: 0 !important;
}

.product-list-card__inventory .ant-tag {
  margin: 2px 0 0;
  padding-inline: 4px;
  font-size: 8px;
  line-height: 16px;
}

.product-list-card__meta .ant-tag {
  margin: 0 0 4px;
  white-space: nowrap;
}

.product-list-card__meta > .ant-col > div {
  overflow: hidden;
  max-width: 145px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-list-card__dates {
  overflow: hidden;
  margin-top: 7px !important;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-list-card__actions {
  margin-top: 6px !important;
  gap: 6px !important;
}

.product-list-card__actions .ant-btn {
  height: 28px !important;
  padding-inline: 8px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

.product-pagination-bar {
  position: sticky !important;
  bottom: 0;
  z-index: 30;
  min-height: 48px;
  margin-top: 10px;
  padding: 7px 10px !important;
  border: 1px solid var(--border-color);
  border-radius: 11px 11px 0 0;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent) !important;
  backdrop-filter: blur(10px);
}

.product-pagination-bar .ant-pagination {
  margin: 0;
}

.product-floating-create {
  display: none;
}

html.dark-theme .product-list-card,
html.dark-theme .product-management-header,
html.dark-theme .product-statistics-panel,
html.dark-theme .product-search-panel {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 767px) {
  .product-management-page {
    padding: 6px !important;
  }

  .product-management-header {
    padding: 11px 12px;
  }

  .product-management-header h1 {
    font-size: 20px;
  }

  .product-management-header p {
    display: none;
  }

  .product-create-button {
    width: 40px;
    padding: 0;
    font-size: 0;
  }

  .product-create-button .anticon {
    margin: 0;
    font-size: 15px;
  }

  .product-results-area {
    min-height: 0;
  }

  .product-pagination-bar {
    overflow-x: auto;
  }
}

@media (max-width: 420px) {
  .product-list-card__main {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .product-card-carousel,
  .product-card-carousel .slick-list,
  .product-card-carousel .slick-slide,
  .product-card-carousel__image {
    width: 72px !important;
    height: 72px !important;
  }

  .product-list-card__meta {
    grid-column: 1 / -1;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
  }

  .product-list-card__meta > .ant-col {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    gap: 7px;
  }
}

/* Compact order management */
.order-management-page {
  display: flex;
  width: 100%;
  max-width: 1600px;
  min-height: calc(100dvh - 112px) !important;
  flex-direction: column;
  margin-inline: auto;
  padding: 10px !important;
  background: transparent !important;
}

.order-management-header {
  display: grid;
  grid-template-columns: minmax(270px, 0.8fr) minmax(380px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
}

.order-management-header__title h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-color);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.2;
}

.order-management-header__title h1 span {
  display: inline-flex;
  min-width: 25px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding-inline: 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-primary) 15%, transparent);
  color: var(--app-primary);
  font-size: 11px;
}

.order-management-header__title p {
  margin: 3px 0 0;
  color: var(--secondary-text-color);
  font-size: 11px;
}

.order-management-header__filters {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(135px, 0.55fr) minmax(230px, 1.45fr);
  gap: 8px;
}

.order-management-header__filters .ant-select,
.order-management-header__filters .ant-input-affix-wrapper,
.order-management-header__filters .ant-select-selector {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 9px !important;
}

.order-management-header__filters .ant-select-selection-item {
  line-height: 36px !important;
}

.order-create-button {
  height: 40px;
  padding-inline: 17px;
  border-color: var(--app-primary) !important;
  border-radius: 10px;
  background: var(--app-primary) !important;
  color: var(--app-onPrimary) !important;
  font-weight: 700;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--app-primary) 25%, transparent);
}

.order-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-contacts-button {
  width: auto !important;
  min-width: max-content;
  height: 40px;
  padding-inline: 14px !important;
  border-radius: 10px;
  font-weight: 650;
}

.order-view-switch {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--component-bg);
}

.order-view-switch .ant-btn {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--secondary-text-color);
  box-shadow: none;
}

.order-more-products {
  height: auto;
  margin-top: 3px;
  padding: 2px 0;
  font-size: 10px;
  font-weight: 650;
}

.order-view-switch .ant-btn:hover {
  background: color-mix(in srgb, var(--app-primary) 10%, transparent);
  color: var(--app-primary);
}

.order-view-switch .ant-btn.is-active {
  background: var(--app-primary);
  color: var(--app-onPrimary);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--app-primary) 25%, transparent);
}

.order-legacy-filter-panel {
  display: none !important;
}

.order-statistics-card {
  overflow: hidden;
  border-color: var(--border-color) !important;
  border-radius: 13px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
}

.order-statistics-card .ant-card-body {
  padding: 8px !important;
}

.order-statistics-grid > .ant-col {
  min-width: 130px;
}

.order-stat-card {
  display: grid !important;
  min-width: 0 !important;
  min-height: 52px;
  height: 52px !important;
  grid-template-columns: 28px auto minmax(0, 1fr);
  align-items: center !important;
  justify-content: stretch !important;
  gap: 7px;
  padding: 5px 9px !important;
  text-align: left !important;
}

.order-stat-card > div {
  margin: 0 !important;
}

.order-stat-card > div:first-child {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
}

.order-stat-card .anticon {
  font-size: 14px !important;
}

.order-stat-card > div:nth-child(2) {
  font-size: 18px !important;
  line-height: 1;
}

.order-stat-card > div:last-child {
  overflow: hidden;
  font-size: 10px !important;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.order-results-area {
  min-height: 0;
  flex: 1 1 auto;
  overflow: visible !important;
}

.order-list-card {
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.06) !important;
}

.order-list-card:hover {
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.1) !important;
  transform: translateY(-2px);
}

.order-list-card .ant-card-body {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 11px !important;
}

.order-list-card__header {
  align-items: center !important;
  margin-bottom: 5px !important;
}

.order-list-card__header .ant-avatar {
  width: 34px !important;
  min-width: 34px;
  height: 34px !important;
  line-height: 34px !important;
}

.order-list-card__header .ant-space {
  gap: 7px !important;
}

.order-list-card__header .ant-space-item > div > div:first-child {
  font-size: 13px !important;
  line-height: 1.2;
}

.order-list-card__header .ant-tag {
  margin: 2px 0 0 !important;
  padding-inline: 5px !important;
  font-size: 8px;
  line-height: 17px;
}

.order-list-card__header .ant-typography {
  font-size: 10px;
  white-space: nowrap;
}

.order-list-card__summary {
  margin: 2px 0 7px !important;
  font-size: 11px !important;
}

.order-list-card__products {
  margin-bottom: 8px !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
}

.order-list-card__products > div:first-child {
  margin-bottom: 4px !important;
  font-size: 10px;
  text-transform: uppercase;
}

.order-list-card__products > div:not(:first-child) {
  margin-bottom: 5px !important;
  padding-bottom: 5px !important;
}

.order-list-card__products > div:not(:first-child) > div:first-child {
  font-size: 11px;
}

.order-list-card__products > div:not(:first-child) > div:last-child {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  font-size: 9px !important;
}

.order-list-card__details {
  align-items: end;
  margin-top: 0 !important;
}

.order-list-card__details > .ant-col:first-child > div {
  overflow: hidden;
  margin-bottom: 4px !important;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-list-card__details > .ant-col:first-child > div span:first-child {
  margin-right: 5px !important;
}

.order-view-button {
  height: 29px;
  margin-top: 5px !important;
  padding-inline: 9px;
  border-radius: 7px;
  font-size: 10px;
}

.order-list-card__details > .ant-col:last-child > div:first-child {
  font-size: 9px;
}

.order-list-card__details > .ant-col:last-child > div:nth-child(2) {
  font-size: 15px !important;
  line-height: 1.15;
}

.order-list-card__details .ant-progress {
  margin: 0;
}

.order-list-card__details > .ant-col:last-child > div:last-child {
  margin-top: 5px !important;
}

.order-list-card__details > .ant-col:last-child > div:last-child > div {
  margin-bottom: 4px !important;
  font-size: 9px;
}

.order-list-card__details .ant-select,
.order-list-card__details .ant-select-selector {
  min-height: 29px !important;
  border-radius: 7px !important;
}

.order-list-card__details .ant-select-selection-item {
  font-size: 10px;
  line-height: 27px !important;
}

@media (min-width: 1100px) {
  .order-list-card--list .ant-card-body {
    display: grid;
    grid-template-columns:
      minmax(220px, 0.72fr)
      minmax(280px, 1fr)
      minmax(330px, 1.18fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 6px 16px;
  }

  .order-list-card--list .order-list-card__header {
    grid-column: 1;
    grid-row: 1;
  }

  .order-list-card--list .order-list-card__summary {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .order-list-card--list .order-list-card__products {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    margin: 0 !important;
  }

  .order-list-card--list .order-list-card__details {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  .order-list-card--list .order-list-card__details > .ant-col:first-child {
    padding-right: 8px;
  }
}

.order-pagination-bar {
  position: sticky !important;
  bottom: 0;
  z-index: 20 !important;
  min-height: 42px;
  justify-content: center !important;
  margin-top: 10px;
  padding: 5px 10px !important;
  border: 1px solid var(--border-color);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent) !important;
  box-shadow: 0 -2px 8px rgba(18, 22, 33, 0.05);
}

.order-pagination-create {
  display: none !important;
}

@media (max-width: 1000px) {
  .order-management-header {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .order-management-header__filters {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .order-header-actions {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 767px) {
  .order-management-page {
    padding: 6px !important;
  }

  .order-management-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 12px;
  }

  .order-management-header__title h1 {
    font-size: 20px;
  }

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

  .order-create-button,
  .order-contacts-button {
    min-width: 38px;
    padding-inline: 10px !important;
  }

  .order-statistics-grid {
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }

  .order-statistics-grid > .ant-col {
    min-width: 145px;
    flex: 0 0 145px !important;
  }

  .order-list-card__details > .ant-col + .ant-col {
    margin-top: 8px;
  }
}

@media (max-width: 520px) {
  .order-management-header {
    grid-template-columns: 1fr;
  }

  .order-management-header__title,
  .order-management-header__filters,
  .order-header-actions {
    grid-column: 1;
  }

  .order-header-actions {
    grid-row: auto;
    justify-content: stretch;
  }

  .order-header-actions > .order-create-button,
  .order-header-actions > .order-contacts-button {
    flex: 1 1 auto;
  }

  .order-management-header__filters {
    grid-template-columns: 1fr;
  }

  .order-create-button {
    height: 36px;
    padding-inline: 10px;
  }

  .order-list-card__products > div:not(:first-child) > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }
}

.product-header-overview {
  display: flex;
  min-width: 0;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-inline: auto 8px;
}

.product-header-overview > div {
  display: flex;
  min-width: 94px;
  flex-direction: column;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--component-bg);
}

.product-header-overview span {
  color: var(--secondary-text-color);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.product-header-overview strong {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-color);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-list-card .ant-card-body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.product-list-card__main {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.product-list-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-carousel,
.product-card-carousel .slick-list,
.product-card-carousel .slick-slide,
.product-card-carousel__image {
  width: 92px !important;
  height: 92px !important;
}

.product-card-carousel {
  overflow: hidden;
  border-radius: 9px;
  background: var(--component-bg);
}

.product-carousel-arrow {
  top: 50% !important;
  width: 19px;
  height: 19px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  opacity: 0;
  font-size: 8px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  transition: opacity 160ms ease;
}

.product-carousel-arrow--prev {
  right: auto !important;
  left: 5px !important;
}

.product-carousel-arrow--next {
  right: 5px !important;
  left: auto !important;
}

.product-carousel-arrow .anticon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-carousel:hover .product-carousel-arrow {
  opacity: 1;
}

.product-card-carousel__badge {
  right: 4px !important;
  bottom: 4px !important;
  left: auto !important;
  z-index: 3;
  padding: 2px 5px !important;
  border-radius: 6px !important;
  font-size: 8px !important;
  line-height: 1.25;
  backdrop-filter: blur(4px);
}

.product-card-carousel__badge--empty {
  right: 4px !important;
}

.product-list-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.product-list-card__title-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.product-list-card__name {
  min-width: 0;
  min-height: 30px;
  flex: 1;
  margin: 0 !important;
  color: var(--text-color);
  font-size: 13px;
  font-weight: 750;
}

.product-list-card__status {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 1px 5px !important;
  font-size: 8px !important;
  line-height: 17px;
}

.product-list-card__price {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: 3px;
}

.product-list-card__price-label {
  color: var(--secondary-text-color);
  font-size: 9px;
}

.product-list-card__price > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
}

.product-list-card__price strong {
  overflow: hidden;
  color: var(--text-color);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-list-card__original-price {
  color: var(--secondary-text-color);
  font-size: 10px;
  text-decoration: line-through;
  white-space: nowrap;
}

.product-list-card__price .ant-tag {
  margin: 0;
  padding-inline: 3px;
  font-size: 8px;
  line-height: 15px;
}

.product-list-card__stock {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}

.product-list-card__stock > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.product-list-card__stock span {
  color: var(--secondary-text-color);
  font-size: 9px;
}

.product-list-card__stock strong {
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.2;
}

.product-list-card__stock .ant-tag {
  margin: 0;
  padding-inline: 4px;
  font-size: 8px;
  line-height: 15px;
}

.product-list-card__content > .ant-progress {
  margin: 0 !important;
  line-height: 1;
}

.product-list-card__meta {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  gap: 7px;
  margin-top: 4px;
}

.product-list-card__meta > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--secondary-text-color);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-list-card__meta .anticon {
  flex: 0 0 auto;
  color: var(--app-primaryDark);
}

.product-list-card__footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.product-list-card__dates {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 9px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  color: var(--secondary-text-color);
  font-size: 8px;
}

.product-list-card__dates span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-list-card__dates strong {
  color: var(--text-color);
  font-size: 8px;
}

.product-list-card__actions {
  display: flex;
  flex: 0 0 auto;
  margin: 0 !important;
}

.product-list-card__actions .ant-btn {
  height: 27px !important;
  padding-inline: 7px !important;
  border-radius: 7px !important;
  background: transparent;
  font-size: 9px !important;
}

.product-pagination-bar {
  position: sticky !important;
  right: auto;
  bottom: 0;
  left: auto;
  z-index: 20;
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 5px 10px !important;
  transform: none;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -2px 8px rgba(18, 22, 33, 0.05);
}

@media (min-width: 768px) {
  .product-management-toolbar .product-statistics-panel,
  .product-management-toolbar .product-search-panel {
    min-height: 84px;
    height: 84px !important;
  }

  .product-statistics-panel .ant-card-body,
  .product-search-panel .ant-card-body {
    height: 100% !important;
    padding: 8px 10px !important;
  }

  .product-statistics-panel .statistics-panel-header,
  .product-search-panel__title {
    height: 15px;
    margin-bottom: 4px !important;
    line-height: 15px;
  }

  .product-statistics-panel .statistics-grid {
    height: 49px;
    gap: 6px;
  }

  .product-statistics-panel .statistics-tile {
    display: grid;
    min-height: 49px !important;
    grid-template-columns: 28px auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 7px;
    padding: 5px 8px !important;
  }

  .product-statistics-panel .statistics-tile-icon--boxed {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    font-size: 13px !important;
  }

  .product-statistics-panel .statistics-tile-value {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .product-statistics-panel .statistics-tile-label {
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    text-align: left;
  }

  .product-search-panel__controls {
    display: grid !important;
    height: 41px !important;
    grid-template-columns: minmax(125px, 0.72fr) minmax(180px, 1.35fr);
    align-items: center;
    gap: 7px !important;
  }

  .product-search-panel .ant-select,
  .product-search-panel .ant-input-affix-wrapper,
  .product-search-panel .ant-select-selector {
    width: 100% !important;
    min-height: 38px !important;
  }
}

@media (max-width: 1000px) {
  .product-management-header {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .product-header-filters {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .product-header-overview > div:nth-child(2) {
    display: none;
  }
}

@media (max-width: 700px) {
  .product-management-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 12px;
  }

  .product-management-header h1 {
    font-size: 20px;
  }

  .product-header-overview {
    display: none;
  }

  .product-pagination-bar {
    bottom: 0;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .product-header-filters .product-search-panel__controls {
    grid-template-columns: 1fr;
  }

  .product-create-button {
    height: 36px;
    padding-inline: 11px;
  }
}

@media (max-width: 420px) {
  .product-list-card__main {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .product-card-carousel,
  .product-card-carousel .slick-list,
  .product-card-carousel .slick-slide,
  .product-card-carousel__image {
    width: 78px !important;
    height: 78px !important;
  }

  .product-list-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-list-card__actions {
    width: 100%;
  }

  .product-list-card__actions .ant-space-item {
    flex: 1;
  }

  .product-list-card__actions .ant-btn {
    width: 100%;
  }
}

/* Attendance ERP workspace */
.attendance-erp-page {
  min-width: 0;
}

.attendance-erp-shell {
  display: flex;
  min-height: calc(100dvh - 132px);
  flex-direction: column;
}

.attendance-command-panel {
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(18, 22, 33, 0.07);
}

.attendance-command-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.attendance-command-search {
  width: auto;
  min-width: min(260px, 100%);
  flex: 1 1 280px;
  height: 44px;
  border-radius: 11px;
}

.attendance-command-status {
  flex: 0 0 190px;
  width: 190px;
  height: 44px;
  align-self: center;
}

.attendance-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  padding: 0;
}

.attendance-header-statistics {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.attendance-header-stat {
  display: inline-flex;
  min-width: 92px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--app-textPrimary);
  background: var(--component-bg);
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.attendance-header-stat:hover {
  border-color: var(--app-primary);
  transform: translateY(-1px);
}

.attendance-header-stat--active {
  border-color: var(--app-primary);
  background: var(--app-primary-soft);
  box-shadow: inset 0 -2px 0 var(--app-primary);
}

.attendance-header-stat--present > .anticon {
  color: var(--app-success);
}

.attendance-header-stat--absent > .anticon {
  color: var(--app-error);
}

.attendance-header-stat strong {
  font-size: 18px;
  line-height: 1;
}

.attendance-header-stat span {
  color: var(--app-textSecondary);
  font-size: 12px;
  font-weight: 650;
}

.attendance-page-title {
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.attendance-page-subtitle {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
}

.attendance-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.attendance-report-button {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 10px;
  font-weight: 600;
}

.attendance-report-button--primary {
  color: var(--app-onPrimary) !important;
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

.attendance-date-panel {
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(18, 22, 33, 0.07);
}

.attendance-summary-panel {
  margin-bottom: 8px;
  border-radius: 12px !important;
}

.attendance-summary-panel .statistics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.attendance-summary-panel .statistics-tile {
  min-height: 68px;
  padding-block: 6px;
}

.attendance-summary-panel .statistics-tile > div:first-child {
  margin-bottom: 2px !important;
}

.attendance-summary-panel .statistics-tile-value {
  line-height: 1.1;
}

.attendance-date-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.attendance-date-heading {
  display: flex;
  min-width: 220px;
  align-items: center;
  gap: 12px;
}

.attendance-date-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--app-onPrimary);
  background: var(--app-primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--app-primary) 30%, transparent);
  font-size: 21px;
}

.attendance-date-label {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.attendance-date-value {
  font-size: clamp(15px, 1.55vw, 18px);
  font-weight: 700;
  line-height: 1.35;
}

.attendance-date-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.attendance-date-nav,
.attendance-today-button {
  height: 44px;
  border-radius: 12px;
}

.attendance-date-nav {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.attendance-today-button {
  padding-inline: 16px;
  font-weight: 650;
}

.attendance-material-picker {
  width: 178px;
  height: 44px;
  border-radius: 12px;
  background: var(--component-bg);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.attendance-material-picker:hover,
.attendance-material-picker.ant-picker-focused {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px var(--app-primary-soft);
}

.attendance-date-picker-dropdown .ant-picker-panel-container {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(18, 22, 33, 0.18);
}

.attendance-date-picker-dropdown .ant-picker-header {
  padding-block: 6px;
  border-bottom-color: var(--border-color);
}

.attendance-date-picker-dropdown .ant-picker-cell-inner {
  border-radius: 50% !important;
}

.attendance-date-picker-dropdown
  .ant-picker-cell-in-view.ant-picker-cell-selected
  .ant-picker-cell-inner {
  color: var(--app-onPrimary) !important;
  background: var(--app-primary) !important;
}

.attendance-date-picker-dropdown
  .ant-picker-cell-in-view.ant-picker-cell-today
  .ant-picker-cell-inner::before {
  border-color: var(--app-primary) !important;
  border-radius: 50%;
}

.attendance-filter-panel {
  height: 100%;
  overflow: hidden;
  border-radius: 14px !important;
}

.attendance-erp-page .statistics-panel-header {
  margin-bottom: 10px;
  padding-bottom: 6px;
}

.attendance-erp-page .statistics-tile {
  min-height: 68px;
  padding: 10px 8px;
}

.attendance-erp-page .statistics-tile-value {
  font-size: clamp(20px, 2.2vw, 26px);
}

.attendance-filter-controls {
  gap: 10px !important;
}

.attendance-material-input {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.attendance-material-input:hover,
.attendance-material-input:focus-within {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px var(--app-primary-soft);
}

.attendance-status-select {
  width: 100%;
  height: 44px;
}

.attendance-status-select .ant-select-selector {
  display: flex;
  height: 44px !important;
  align-items: center;
  padding: 0 38px 0 14px !important;
  border-radius: 12px !important;
}

.attendance-status-select .ant-select-selection-item {
  line-height: normal !important;
}

.attendance-status-select .ant-select-arrow {
  top: 50%;
  right: 13px;
  margin-top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}

.attendance-status-select:hover .ant-select-selector,
.attendance-status-select.ant-select-focused .ant-select-selector {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px var(--app-primary-soft) !important;
}

.attendance-view-control {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attendance-view-label {
  font-size: 13px;
  font-weight: 600;
}

.attendance-view-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--component-bg);
}

.attendance-view-toggle .ant-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
}

.attendance-view-toggle .ant-btn-primary {
  color: var(--app-onPrimary);
  background: var(--app-primary);
}

.attendance-records > .ant-col {
  transition:
    width 220ms ease,
    max-width 220ms ease,
    flex-basis 220ms ease;
}

.attendance-worker-card {
  height: 100%;
  overflow: hidden;
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease !important;
}

.attendance-worker-card .ant-card-body {
  padding: 16px;
}

.attendance-worker-card--list .ant-card-body {
  padding: 13px 18px;
}

.attendance-worker-card--list {
  border-radius: 10px !important;
}

.attendance-worker-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 22, 33, 0.12) !important;
}

.attendance-list-table {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 4px 14px rgba(18, 22, 33, 0.06);
}

.attendance-list-table .ant-table {
  background: transparent;
}

.attendance-list-table .ant-table-thead > tr > th {
  padding-block: 11px;
  color: var(--app-textSecondary);
  background: var(--component-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.attendance-list-table .ant-table-tbody > tr > td {
  padding-block: 11px;
  border-bottom-color: var(--border-color);
}

.attendance-list-table .ant-table-tbody > tr {
  transition: background-color 160ms ease;
}

.attendance-list-table .ant-table-tbody > tr:hover > td {
  background: var(--app-primary-soft) !important;
}

.attendance-pagination-bar {
  position: sticky !important;
  bottom: 0;
  margin-top: auto;
  padding-block: 10px !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

.attendance-records-area {
  flex: 1 0 auto;
}

html.dark-theme .attendance-date-panel,
html.dark-theme .attendance-command-panel,
html.dark-theme .attendance-worker-card {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

html.dark-theme .attendance-date-picker-dropdown .ant-picker-panel-container {
  background: var(--card-bg);
}

html.dark-theme .attendance-list-table {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

/* Ant Design component styles in dark mode */
html.dark-theme .ant-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

html.dark-theme .ant-btn {
  background-color: var(--component-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

html.dark-theme .ant-input,
html.dark-theme .ant-select-selector {
  background-color: var(--component-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

html.dark-theme .ant-typography {
  color: var(--text-color);
}

html.dark-theme .ant-typography.ant-typography-secondary {
  color: var(--secondary-text-color);
}

html.dark-theme .ant-divider {
  border-color: var(--border-color);
}

html.dark-theme .ant-table {
  background-color: var(--card-bg);
  color: var(--text-color);
}

html.dark-theme .ant-table-thead>tr>th {
  background-color: var(--component-bg);
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}

html.dark-theme .ant-table-tbody>tr>td {
  border-bottom: 1px solid var(--border-color);
}

html.dark-theme .ant-table-tbody>tr.ant-table-row:hover>td {
  background-color: var(--hover-color);
}

html.dark-theme .ant-pagination-item {
  background-color: var(--component-bg);
  border-color: var(--border-color);
}

html.dark-theme .ant-pagination-item-active {
  border-color: #177ddc;
}

html.dark-theme .ant-modal-content,
html.dark-theme .ant-drawer-content {
  background-color: var(--card-bg);
  color: var(--text-color);
}

html.dark-theme .ant-modal-header,
html.dark-theme .ant-drawer-header {
  background-color: var(--card-bg);
  border-bottom-color: var(--border-color);
}

html.dark-theme .ant-modal-title,
html.dark-theme .ant-drawer-title {
  color: var(--text-color);
}

/* Transition for smooth theme switch */
body,
.ant-card,
.ant-btn,
.ant-input,
.ant-select-selector,
.ant-table,
.ant-modal-content,
.ant-drawer-content {
  transition: all 0.3s ease-in-out;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

/* Service Report Detail Styles */
.service-report-detail {
  max-width: 100%;
  overflow-x: hidden;
}

.report-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
}

.back-button {
  position: absolute;
  left: 16px;
}

.report-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.report-container {
  padding: 0 16px;
  max-width: 800px;
  margin: 0 auto;
}

.error-container {
  padding: 24px;
  text-align: center;
}

.attachment-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.attachment-button {
  margin-bottom: 8px;
}

/* Add these styles to your CSS file or in a <style> tag */
.custom-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.custom-carousel-dots li {
  margin: 0 4px;
}

.custom-carousel-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.custom-carousel-dots li.slick-active button {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

/* Optional: Style for the arrow buttons */
.ant-carousel .slick-prev,
.ant-carousel .slick-next {
  z-index: 10;
}

.ant-carousel .slick-prev:before,
.ant-carousel .slick-next:before {
  color: var(--app-primary);
  font-size: 20px;
}


/* Responsive utilities */
@media (max-width: 480px) {
  .ant-layout-sider {
    width: 100% !important;
    max-width: 250px !important;
  }

  .ant-menu-item {
    padding-left: 16px !important;
  }

  .ant-layout-header {
    height: 56px !important;
    line-height: 56px !important;
  }

  .dashboard-feature-card {
    min-height: 124px;
  }

  .appearance-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .appearance-page-heading {
    align-items: flex-start;
  }

  .appearance-actions {
    display: flex;
    width: 100%;
  }

  .appearance-actions .ant-space-item {
    width: 100%;
  }

  .appearance-actions .ant-btn {
    width: 100%;
  }

  .statistics-panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .statistics-panel-filters {
    justify-content: flex-start;
  }

  .statistics-panel-filters .ant-btn {
    min-width: auto;
  }
}

@media (min-width: 769px) {
  .ticket-stat-card {
    min-height: 68px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px;
    padding: 8px 12px !important;
  }

  .ticket-stat-card__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin: 0;
    font-size: 18px;
  }

  .ticket-stat-card__value {
    font-size: 22px !important;
  }

  .ticket-stat-card__label {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: left;
  }

  .attendance-summary-panel .statistics-tile {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding-inline: 14px;
  }

  .attendance-summary-panel .statistics-tile > div:first-child {
    margin: 0 !important;
  }

  .attendance-summary-panel .statistics-tile-value,
  .attendance-summary-panel .statistics-tile-label {
    margin: 0 !important;
  }

  .attendance-summary-panel .statistics-tile-label {
    text-align: left;
  }
}

@media (min-width: 769px) and (max-width: 1150px) {
  .attendance-header-stat {
    min-width: 48px;
    padding-inline: 8px;
  }

  .attendance-header-stat span {
    display: none;
  }
}

@media (max-width: 768px) {
  .app-main-header {
    min-width: 0;
    padding-inline: 8px !important;
  }

  .app-header-greeting {
    min-width: 0;
    max-width: 150px;
    justify-content: flex-start !important;
    margin-inline: 3px !important;
  }

  .app-header-greeting-text {
    width: 100%;
    padding-inline: 2px !important;
    font-size: 14px !important;
    line-height: 1.2;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-header-actions {
    flex: 0 0 auto;
    gap: 4px !important;
    margin-right: 0 !important;
  }

  .attendance-command-controls {
    align-items: stretch;
  }

  .attendance-command-search {
    flex-basis: 100%;
  }

  .attendance-command-status {
    width: auto;
    flex: 1 1 150px;
  }

  .attendance-page-header,
  .attendance-date-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-header-statistics {
    width: 100%;
    justify-content: flex-start;
  }

  .attendance-page-actions {
    justify-content: flex-start;
  }

  .attendance-date-controls {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .attendance-material-picker {
    width: min(240px, 100%);
  }

  .ticket-management-title-row {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 10px;
  }

  .ticket-header-overview {
    display: none;
  }

  .ticket-floating-action {
    display: flex !important;
  }

  .ticket-management-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .ticket-management-filters {
    align-items: stretch !important;
  }

  .ticket-search-field {
    flex-basis: 100% !important;
  }

  .ticket-filter-select {
    flex: 1 1 150px;
    width: auto !important;
  }

  .ant-layout-content {
    margin: 10px 8px 12px !important;
  }

  .logo {
    height: 32px !important;
    width: auto !important;
  }
    .ant-menu-item {
    padding-left: 16px !important;
  }
    .ant-layout-header {
    height: 56px !important;
    line-height: 56px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .dashboard-feature-card {
    min-height: 146px;
  }
}

@media (max-width: 575px) {
  .attendance-erp-page {
    padding: 6px !important;
  }

  .attendance-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .attendance-page-header > div:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    flex: 1 1 auto;
  }

  .attendance-header-statistics {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 5px;
  }

  .attendance-header-stat {
    min-width: 0;
    flex: 1 1 0;
    height: 36px;
    padding-inline: 6px;
  }

  .attendance-header-stat strong {
    font-size: 16px;
  }

  .attendance-header-stat span {
    font-size: 10px;
  }

  .attendance-page-title {
    overflow: hidden;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attendance-page-subtitle {
    display: none;
  }

  .attendance-command-panel {
    border-radius: 14px !important;
  }

  .attendance-command-controls {
    gap: 8px;
    padding-top: 10px;
  }

  .attendance-command-search {
    order: 1;
  }

  .attendance-command-status {
    order: 2;
    min-width: 0;
    flex: 1 1 calc(100% - 88px);
  }

  .attendance-page-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    width: auto;
    flex: 0 0 auto;
    gap: 5px;
  }

  .attendance-page-actions .ant-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
  }

  .attendance-report-label {
    display: none;
  }

  .attendance-date-panel {
    border-radius: 14px !important;
  }

  .attendance-date-heading {
    min-width: 0;
  }

  .attendance-date-controls {
    order: 4;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px auto;
    gap: 7px;
  }

  .attendance-command-controls .attendance-view-toggle {
    order: 3;
    margin-left: 0;
  }

  .attendance-summary-panel {
    margin-bottom: 10px;
  }

  .attendance-summary-panel .statistics-grid {
    gap: 7px;
  }

  .attendance-summary-panel .statistics-tile {
    min-height: 72px;
    padding: 7px 4px;
  }

  .attendance-summary-panel .statistics-tile-label {
    font-size: 10px !important;
  }

  .attendance-material-picker {
    width: 100%;
  }

  .attendance-date-nav {
    width: 44px;
    min-width: 44px;
  }

  .attendance-erp-page .statistics-tile {
    min-height: 72px;
  }

  .attendance-today-button {
    grid-column: auto;
    width: auto;
    padding-inline: 12px;
  }

  .attendance-worker-card .ant-card-body {
    padding: 12px !important;
  }

  .attendance-pagination-bar {
    position: sticky !important;
    bottom: 0;
    justify-content: center !important;
    margin-top: auto;
    padding-inline: 4px !important;
  }

  .ticket-management-page {
    padding: 0 !important;
  }

  .ticket-management-header {
    margin-bottom: 8px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .ticket-management-heading {
    min-width: 0;
  }

  .ticket-management-heading h1 {
    font-size: 23px !important;
    line-height: 1.25;
  }

  .ticket-management-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .ticket-management-actions .ticket-primary-action {
    grid-column: 1 / -1;
  }

  .ticket-management-actions .ant-btn {
    width: 100%;
    padding-inline: 10px;
  }

  .ticket-management-filters {
    gap: 10px !important;
  }

  .ticket-search-field,
  .ticket-filter-select {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .ticket-order-select {
    flex-basis: calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
  }

  .ticket-view-toggle {
    margin-left: auto;
  }

  .ticket-statistics-panel {
    border-radius: 14px !important;
  }

  .ticket-statistics-panel .ant-card-body {
    padding: 8px !important;
  }

  .ticket-statistics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ticket-stat-card {
    min-height: 90px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px;
    padding: 10px 12px !important;
  }

  .ticket-stat-card__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin: 0;
    font-size: 18px;
  }

  .ticket-stat-card__value {
    margin-bottom: 3px !important;
    font-size: 23px !important;
  }

  .ticket-stat-card__label {
    font-size: 12px !important;
  }

  .ticket-floating-action {
    right: 18px !important;
    bottom: 22px !important;
    width: 50px !important;
    height: 50px !important;
  }

  .app-content-shell {
    border-radius: 8px !important;
  }

  .app-content-shell .ant-card-head {
    min-height: 44px;
    padding-inline: 14px;
  }

  .app-content-shell .ant-card-head-title {
    padding-block: 10px;
    white-space: normal;
  }

  .ant-modal {
    max-width: calc(100vw - 20px);
    margin: 10px auto;
  }
}

@media (max-width: 360px) {
  .ticket-management-actions {
    grid-template-columns: 1fr;
  }

  .ticket-management-actions .ticket-primary-action {
    grid-column: auto;
  }

  .ticket-statistics-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1440px) {
  .dashboard-page,
  .appearance-page {
    max-width: 1440px;
    margin-inline: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ant-layout-sider {
    width: 200px !important;
  }
}

/* Touch-friendly buttons on mobile */
@media (hover: none) and (pointer: coarse) {
  .ant-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .ant-menu-item {
    min-height: 48px;
  }
}

/* Smooth transitions for all screen changes */
@media (prefers-reduced-motion: no-preference) {
  .ant-layout,
  .ant-layout-sider,
  .ant-layout-content,
  .ant-layout-header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-secondary-action,
  .ticket-primary-action,
  .ticket-view-toggle .ant-btn,
  .ticket-stat-card,
  .ticket-stat-card__icon,
  .ticket-result-card,
  .ticket-floating-action {
    transition: none !important;
  }
}


@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Add new animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
    /* Slightly less intense pulse for general use */
  }

  100% {
    transform: scale(1);
  }
}

/* Enhanced transitions */
.site-layout {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-menu-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-menu-item:hover {
  transform: translateX(5px);
}

.ant-menu-item-selected {
  animation: pulse 0.3s ease-in-out;
}

.sidebar-navigation-menu .ant-menu-item,
.sidebar-navigation-menu .ant-menu-item .anticon,
.sidebar-navigation-menu .ant-menu-item .anticon svg {
  transition:
    color 180ms ease,
    fill 180ms ease,
    stroke 180ms ease,
    transform 180ms ease !important;
}

.sidebar-navigation-menu .ant-menu-item-selected .anticon {
  color: inherit;
}

/* Button hover effects */
.ant-btn {
  transition: all 0.3s ease !important;
}

.ant-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Logo animation */
.logo {
  transition: all 0.3s ease !important;
}

.logo:hover {
  transform: scale(1.1);
}

/* Switch animation */
.ant-switch {
  transition: all 0.3s ease !important;
}

.ant-switch:checked {
  animation: pulse 0.3s ease-in-out;
}

/* Card hover effects */
.ant-card {
  transition: all 0.3s ease !important;
}

.ant-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-text-color);
  /* Darker on hover */
}

/* Compact expense management */
.expense-management-page {
  display: flex;
  width: 100%;
  max-width: 1600px;
  min-height: calc(100dvh - 112px) !important;
  flex-direction: column;
  margin-inline: auto;
  padding: 8px !important;
  background: transparent !important;
}

.expense-management-header {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(360px, 1.15fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
}

.expense-management-header__title h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-color);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}

.expense-management-header__title h1 span {
  display: inline-flex;
  min-width: 25px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding-inline: 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-primary) 15%, transparent);
  color: var(--app-primary);
  font-size: 11px;
}

.expense-management-header__title p {
  margin: 3px 0 0;
  color: var(--secondary-text-color);
  font-size: 11px;
}

.expense-management-header__search,
.expense-management-header__search.ant-input-affix-wrapper {
  min-height: 38px;
  border-radius: 9px;
}

.expense-header-refresh {
  height: 38px;
  padding-inline: 13px;
  border-color: var(--app-primary) !important;
  border-radius: 9px;
  color: var(--app-primary);
  font-weight: 650;
}

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

/* Expense reporting */
.expense-report-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.expense-report-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 2px;
}

.expense-report-header h1.ant-typography {
  margin: 2px 0 3px;
  font-size: clamp(28px, 3vw, 40px);
}

.expense-report-header > div:first-child > .ant-btn {
  height: auto;
  padding: 0;
  color: var(--app-primary);
}

.expense-report-filters .ant-card-body {
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) repeat(3, minmax(150px, 1fr)) auto;
  gap: 10px;
  padding: 14px;
}

.expense-report-filters .ant-picker,
.expense-report-filters .ant-select { width: 100%; }

.expense-report-kpis .ant-col { display: flex; }
.expense-report-kpi { width: 100%; overflow: hidden; border-radius: 14px; }
.expense-report-kpi .ant-card-body { display: flex; align-items: flex-start; gap: 13px; padding: 18px; }
.expense-report-kpi .ant-card-body > span { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; font-size: 21px; border-radius: 12px; background: color-mix(in srgb, currentColor 11%, transparent); }
.expense-report-kpi .ant-card-body > div { display: flex; min-width: 0; flex-direction: column; }
.expense-report-kpi strong { overflow: hidden; color: var(--text-color); font-size: clamp(22px, 2vw, 29px); line-height: 1.2; text-overflow: ellipsis; }
.expense-report-kpi small { margin-top: 3px; color: var(--secondary-text-color); }

.expense-report-panel { height: 100%; border-radius: 14px; }
.expense-report-panel > .ant-card-head { min-height: 49px; }
.expense-report-trend { display: block; width: 100%; min-height: 220px; overflow: visible; }
.expense-report-trend__grid { stroke: #dfe7f1; stroke-width: 1; stroke-dasharray: 5 5; }
.expense-report-trend__area { fill: rgba(31, 110, 212, 0.1); }
.expense-report-trend__line { fill: none; stroke: var(--app-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.expense-report-trend circle { fill: #fff; stroke: var(--app-primary); stroke-width: 3; }
.expense-report-trend text { fill: var(--secondary-text-color); font-size: 11px; }

.expense-status-breakdown { display: flex; flex-direction: column; gap: 12px; }
.expense-status-breakdown > div > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.expense-status-breakdown .ant-progress { margin: 2px 0 -5px; }
.expense-status-breakdown small { color: var(--secondary-text-color); }
.expense-report-details { margin-bottom: 8px; }

html.dark-theme .expense-report-trend__grid { stroke: #344154; }
html.dark-theme .expense-report-trend circle { fill: #18202c; }

/* Subscription management */
.subscription-page { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1540px; margin: 0 auto; }
.subscription-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 8px 2px; }
.subscription-header > div:first-child > span { display: flex; align-items: center; gap: 7px; color: #5b21b6; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.subscription-header h1.ant-typography { margin: 5px 0 4px; font-size: clamp(28px, 3.5vw, 42px); }
.subscription-summary .ant-col { display: flex; }
.subscription-summary .ant-card { width: 100%; border-radius: 14px; background: linear-gradient(145deg, var(--card-bg), color-mix(in srgb, var(--app-primary) 5%, var(--card-bg))); }
.subscription-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; }
.subscription-section-heading h2.ant-typography { margin: 0 0 2px; }
.subscription-plan-card { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--border-color); border-top: 5px solid #166534; border-radius: 16px; }
.subscription-plan-card--professional, .subscription-plan-card--business_unlimited { border-top-color: #1245c6; }
.subscription-plan-card--enterprise, .subscription-plan-card--corporate_unlimited { border-top-color: #5b21b6; }
.subscription-plan-card--enterprise_unlimited { border-top-color: #dc2626; }
.subscription-plan-card.is-selected { border-color: var(--app-primary); box-shadow: 0 10px 30px color-mix(in srgb, var(--app-primary) 18%, transparent); }
.subscription-plan-card.is-selected { outline: 3px solid color-mix(in srgb, var(--app-primary) 15%, transparent); transform: translateY(-4px); }
.subscription-plan-card__current { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin: -4px 0 12px; padding: 6px 10px; color: #075985; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; background: #e0f2fe; }
.subscription-plan-card .ant-card-body { display: flex; height: 100%; flex-direction: column; padding: 20px; }
.subscription-plan-card__popular { position: absolute; top: 0; right: 0; padding: 5px 12px; color: #fff; font-size: 10px; font-weight: 800; background: #1245c6; border-radius: 0 0 0 10px; text-transform: uppercase; }
.subscription-plan-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.subscription-plan-card__heading h3.ant-typography { margin: 2px 0 8px; font-size: 22px; }
.subscription-plan-card__price { display: flex; flex-direction: column; margin: 8px 0 10px; }
.subscription-plan-card__price strong { color: var(--text-color); font-size: 30px; line-height: 1.1; }
.subscription-plan-card__price span, .subscription-plan-card__limit { color: var(--secondary-text-color); font-size: 12px; }
.subscription-plan-card__limit { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 9px; background: color-mix(in srgb, var(--app-primary) 7%, transparent); }
.subscription-plan-card__features { display: flex; flex: 1; flex-direction: column; gap: 7px; margin: 14px 0 18px; }
.subscription-plan-card__features > span { display: flex; align-items: flex-start; gap: 7px; color: var(--text-color); font-size: 12px; }
.subscription-plan-card__features .anticon { margin-top: 2px; color: #16a34a; }
.subscription-groups-card { border-radius: 16px; }
.current-subscription { display: flex; flex-direction: column; gap: 14px; }
.current-subscription__hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: clamp(22px, 4vw, 38px); color: #fff; border-radius: 18px; background: radial-gradient(circle at 85% 5%, rgba(99,102,241,.75), transparent 32%), linear-gradient(125deg, #111f45, #173f9e 60%, #5b21b6); }
.current-subscription__hero h2.ant-typography { margin: 5px 0 2px; color: #fff; font-size: 34px; }
.current-subscription__hero .ant-typography { color: rgba(255,255,255,.78); }
.current-subscription__hero > div > span { display: flex; align-items: center; gap: 7px; color: #c7d8ff; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.current-subscription__change { color: #10204a; border: 0; background: #fff; font-weight: 700; }
.subscription-unlimited-meter { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding: 8px 10px; color: #166534; font-size: 12px; font-weight: 800; border-radius: 9px; background: #dcfce7; }
.current-subscription > .ant-row .ant-card { height: 100%; border-radius: 14px; box-shadow: 0 6px 22px color-mix(in srgb, var(--app-primary) 7%, transparent); }
.subscription-change-alert { margin-bottom: 18px; }
.subscription-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.subscription-feature-grid span { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.subscription-feature-grid .anticon { color: #16a34a; }
.subscription-detail-list { display: flex; flex-direction: column; gap: 12px; }
.subscription-detail-list > span { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 9px; border-bottom: 1px solid var(--border-color); }
.subscription-detail-list > span:last-child { border-bottom: 0; }

/* Plan prices with offers, billing switch and the renew / change-plan form (theme colours) */
.current-subscription__hero { background: radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--app-primary) 55%, #fff), transparent 34%), linear-gradient(125deg, color-mix(in srgb, var(--app-primaryDark) 80%, #000), var(--app-primary)); }
.current-subscription__hero > .ant-space { align-items: flex-end; }
.current-subscription__change { min-width: 104px; }
.current-subscription__change--ghost { color: #fff; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.current-subscription__change--ghost:hover { color: #fff !important; border-color: #fff !important; background: rgba(255,255,255,.18) !important; }
.current-subscription__expiry { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: color-mix(in srgb, var(--app-primaryDark) 85%, #000); font-size: 13px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--app-primary) 25%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--app-primary) 7%, var(--card-bg)); }
.current-subscription__expiry.is-urgent { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.plan-price { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.plan-price__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.plan-price__row s { color: var(--secondary-text-color); font-size: 15px; }
.plan-price__row strong { color: var(--text-color); font-size: 30px; line-height: 1.1; }
.plan-price__row span { color: var(--secondary-text-color); font-size: 12px; }
.plan-price__offer { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 10px; color: #9a3412; font-size: 11px; font-weight: 800; border-radius: 999px; background: #ffedd5; }
.subscription-plan-card__limit small { margin-left: auto; color: var(--secondary-text-color); }
.billing-switch { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); }
.billing-switch button { min-width: 96px; height: 34px; padding: 0 16px; color: var(--secondary-text-color); font: inherit; font-weight: 700; border: 0; border-radius: 9px; background: transparent; cursor: pointer; transition: background .15s ease, color .15s ease; }
.billing-switch button:hover:not(:disabled) { color: var(--text-color); }
.billing-switch button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.billing-switch button.is-active { color: var(--app-onPrimary, #fff); background: var(--app-primary); }
.billing-switch button:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-primary) 30%, transparent); outline-offset: 2px; }
.renew-title { display: inline-flex; align-items: center; gap: 8px; }
.renew-title .anticon { color: var(--app-primary); }
.renew-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
.renew-form__main { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.renew-step h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--text-color); font-size: 14px; font-weight: 750; }
.renew-step h4 b { display: grid; width: 22px; height: 22px; place-items: center; color: var(--app-onPrimary, #fff); font-size: 12px; border-radius: 50%; background: var(--app-primary); }
.renew-step h4 small { color: var(--secondary-text-color); font-weight: 500; }
.renew-step > .ant-alert { margin-top: 10px; }
.renew-step .ant-space-compact { display: flex; width: 100%; }
.renew-step .ant-space-compact > .ant-input, .renew-step .ant-space-compact > .ant-input-affix-wrapper { flex: 1; min-width: 0; }
.renew-step .ant-space-compact > .ant-btn { flex: 0 0 auto; }
.renew-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.renew-plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; color: var(--text-color); font: inherit; text-align: left; border: 1.5px solid var(--border-color); border-radius: 12px; background: var(--card-bg); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.renew-plan:hover { border-color: color-mix(in srgb, var(--app-primary) 55%, var(--border-color)); }
.renew-plan.is-selected { border-color: var(--app-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 16%, transparent); }
.renew-plan.is-small { opacity: .6; }
.renew-plan:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-primary) 30%, transparent); outline-offset: 2px; }
.renew-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.renew-plan__top strong { font-size: 14px; }
.renew-plan__top em { padding: 2px 8px; color: #075985; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; border-radius: 999px; background: #e0f2fe; }
.renew-plan__top em.is-popular { color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 10%, transparent); }
.renew-plan__price { display: flex; align-items: baseline; gap: 5px; }
.renew-plan__price s { color: var(--secondary-text-color); font-size: 12px; }
.renew-plan__price b { font-size: 20px; }
.renew-plan__price small, .renew-plan__limit { color: var(--secondary-text-color); font-size: 12px; }
.renew-plan__limit { display: flex; align-items: center; gap: 5px; }
.renew-plan__offer { align-self: flex-start; padding: 2px 8px; color: #9a3412; font-size: 10px; font-weight: 800; border-radius: 999px; background: #ffedd5; }
.renew-hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--secondary-text-color); font-size: 12px; }
.renew-members { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.renew-members > span { color: var(--secondary-text-color); font-size: 13px; }
.renew-summary { position: sticky; top: 0; display: flex; align-self: start; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid color-mix(in srgb, var(--app-primary) 20%, var(--border-color)); border-radius: 16px; background: color-mix(in srgb, var(--app-primary) 5%, var(--card-bg)); }
.renew-summary h4 { margin: 0; color: var(--secondary-text-color); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.renew-summary__plan { display: flex; flex-direction: column; }
.renew-summary__plan span { color: var(--text-color); font-size: 18px; font-weight: 800; }
.renew-summary__plan small, .renew-summary__note, .renew-summary__empty, .renew-summary__loading { color: var(--secondary-text-color); font-size: 12px; }
.renew-summary__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0; text-align: center; }
.renew-summary__empty .anticon { color: var(--app-primary); font-size: 26px; }
.renew-summary__loading { display: flex; align-items: center; gap: 8px; }
.renew-summary__line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.renew-summary__line span { color: var(--secondary-text-color); }
.renew-summary__line.is-discount span, .renew-summary__line.is-discount strong { color: #15803d; }
.renew-summary__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.renew-summary__total span { font-weight: 700; }
.renew-summary__total strong { color: var(--app-primary); font-size: 26px; }
.renew-summary__note { margin: 0; line-height: 1.5; }
.renew-summary__warn { display: flex; gap: 6px; padding: 8px 10px; color: #9a3412; font-size: 12px; border-radius: 9px; background: #fff7ed; }
.renew-summary__secure { display: flex; gap: 6px; padding-top: 10px; color: var(--secondary-text-color); font-size: 11px; border-top: 1px solid var(--border-color); }
.renew-summary__secure .anticon { color: #16a34a; }
@media (max-width: 860px) {
  .renew-form { grid-template-columns: 1fr; }
  .renew-summary { position: static; }
}
@media (max-width: 520px) {
  .renew-plans { grid-template-columns: 1fr; }
  .subscription-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
}


@media (max-width: 700px) {
  .subscription-header { align-items: flex-start; flex-direction: column; }
  .subscription-header > .ant-space { width: 100%; }
  .subscription-header > .ant-space .ant-btn { flex: 1; }
  .subscription-feature-grid { grid-template-columns: 1fr; }
  .current-subscription__hero { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1100px) {
  .expense-report-filters .ant-card-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .expense-report-header { align-items: flex-start; flex-direction: column; }
  .expense-report-filters .ant-card-body { grid-template-columns: 1fr; }
  .expense-report-filters .ant-btn { width: 100%; }
  .expense-report-trend { min-height: 170px; }
}

.expense-view-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--component-bg);
}

.expense-view-switch .ant-btn {
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--secondary-text-color);
  box-shadow: none;
}

.expense-view-switch .ant-btn:hover {
  background: color-mix(in srgb, var(--app-primary) 10%, transparent);
  color: var(--app-primary);
}

.expense-view-switch .ant-btn.is-active {
  background: var(--app-primary);
  color: var(--app-onPrimary);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--app-primary) 25%, transparent);
}

.expense-statistics-panel,
.expense-tools-panel {
  overflow: hidden;
  border-color: var(--border-color) !important;
  border-radius: 13px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05) !important;
}

.expense-overview-row > .ant-col {
  display: flex;
}

.expense-overview-row .expense-statistics-panel,
.expense-overview-row .expense-tools-panel {
  width: 100%;
  height: 100% !important;
}

.expense-statistics-panel .ant-card-body,
.expense-tools-panel .ant-card-body {
  height: 100%;
  padding: 7px !important;
}

.expense-statistics-panel .statistics-panel-header {
  height: 14px;
  margin-bottom: 4px;
}

.expense-statistics-panel .statistics-panel-title {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.expense-statistics-panel .statistics-grid {
  height: 55px;
  gap: 6px;
}

.expense-statistics-panel .statistics-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.expense-statistics-panel .statistics-tile {
  display: grid;
  min-width: 0;
  min-height: 55px;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 7px !important;
  border-radius: 9px;
}

.expense-statistics-panel .statistics-tile > div:first-child {
  display: flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: 7px;
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
}

.expense-statistics-panel .statistics-tile .anticon {
  font-size: 13px !important;
}

.expense-statistics-panel .statistics-tile-value {
  overflow: hidden;
  font-size: 14px !important;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-statistics-panel .statistics-tile-label {
  overflow: hidden;
  margin-top: 3px;
  font-size: 8px !important;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.expense-tools-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

.expense-tools-title {
  display: block;
  height: 14px;
  margin-bottom: 4px !important;
  font-size: 10px;
  line-height: 14px;
  text-transform: uppercase;
}

.expense-tools-panel .ant-select,
.expense-tools-panel .ant-select-selector,
.expense-tools-panel .ant-btn {
  min-height: 29px !important;
  border-radius: 7px !important;
  font-size: 10px;
}

.expense-tools-panel .ant-select-selection-item {
  line-height: 27px !important;
}

.expense-tools-panel .ant-row {
  row-gap: 4px !important;
}

.expense-tools-panel .ant-row + .ant-row {
  margin-top: 4px !important;
}

.expense-results-area {
  min-height: 0;
  flex: 1 1 auto;
}

.expense-list-card {
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.06) !important;
}

.expense-list-card:hover {
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.1) !important;
  transform: translateY(-2px) !important;
}

.expense-list-card .ant-card-body {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 10px !important;
}

.expense-list-card__header {
  margin-bottom: 6px !important;
}

.expense-list-card__header .ant-avatar {
  width: 34px !important;
  min-width: 34px;
  height: 34px !important;
  line-height: 34px !important;
  background: linear-gradient(135deg, var(--app-primary), var(--app-primaryDark));
  color: var(--app-onPrimary);
  font-weight: 700;
}

.expense-list-card__header .ant-space {
  gap: 7px !important;
}

.expense-list-card__header .ant-space-item > div > div:first-child {
  font-size: 14px !important;
}

.expense-list-card__header .ant-typography {
  font-size: 11px !important;
}

.expense-list-card__header .ant-tag {
  margin: 0;
  padding-inline: 5px;
  font-size: 8px;
  line-height: 17px;
}

.expense-list-card__summary {
  margin-bottom: 7px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.expense-list-card__header .expense-list-card__summary {
  align-self: stretch;
  padding: 2px 12px !important;
  margin: 0 !important;
  border-right: 1px solid var(--border-color);
  border-bottom: 0;
  border-left: 1px solid var(--border-color);
}

.expense-list-card__summary > .ant-typography {
  display: block;
  overflow: hidden;
  font-size: 13px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-list-card__summary > div {
  display: flex;
  align-items: center;
  margin-top: 3px !important;
  gap: 5px;
  font-size: 11px !important;
}

.expense-list-card__summary .anticon {
  color: #52c41a;
}

.expense-list-card__summary .ant-btn {
  overflow: hidden;
  max-width: 170px;
  margin-left: 5px !important;
  height: auto;
  padding: 0;
  font-size: 10px;
  text-overflow: ellipsis;
}

.expense-list-card__details {
  flex: 1 1 auto;
}

.expense-list-card__info {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 5px 10px;
}

.expense-list-card__info > div {
  min-width: 0;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.25;
}

.expense-list-card__info > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-list-card__info > .ant-btn {
  width: max-content;
  height: 27px;
  padding-inline: 8px;
  border-radius: 7px;
  font-size: 10px !important;
}

.expense-list-card__status {
  padding-left: 10px !important;
  border-left: 1px solid var(--border-color);
}

.expense-list-card__status > div > div:first-child {
  margin-bottom: 4px !important;
  font-size: 10px !important;
}

.expense-list-card__status .ant-space-vertical {
  gap: 5px !important;
}

.expense-list-card__status .ant-btn,
.expense-list-card__status .ant-select,
.expense-list-card__status .ant-select-selector {
  min-height: 28px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

.expense-list-card__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px !important;
  padding-top: 7px;
  border-top: 1px solid var(--border-color);
}

.expense-list-card__footer-meta {
  overflow: hidden;
  color: var(--secondary-text-color);
  font-size: 10px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-list-card__footer-meta i {
  padding-inline: 6px;
  color: var(--border-color);
  font-style: normal;
}

.expense-list-card__actions .ant-space {
  gap: 5px !important;
}

.expense-list-card__actions .ant-btn {
  height: 27px;
  padding-inline: 7px;
  border-radius: 7px;
  font-size: 10px !important;
}

@media (min-width: 1100px) {
  .expense-list-card--list .ant-card-body {
    display: grid;
    grid-template-columns: minmax(480px, 1.2fr) minmax(420px, 0.8fr);
    grid-template-rows: 1fr auto;
    align-items: stretch;
    gap: 8px 16px;
  }

  .expense-list-card--list .expense-list-card__header {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0 !important;
  }

  .expense-list-card--list .expense-list-card__details {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    padding-left: 14px;
    border-left: 1px solid var(--border-color);
  }

  .expense-list-card--list .expense-list-card__actions {
    grid-column: 1;
    grid-row: 2;
    margin: 0 !important;
  }

  .expense-list-card--list .expense-list-card__status {
    border-left: 1px solid var(--border-color);
  }
}

.expense-pagination-bar {
  position: sticky !important;
  bottom: 0;
  z-index: 20 !important;
  min-height: 42px;
  justify-content: center !important;
  margin-top: 10px;
  padding: 5px 10px !important;
  border: 1px solid var(--border-color);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent) !important;
  box-shadow: 0 -2px 8px rgba(18, 22, 33, 0.05);
}

.expense-pagination-refresh {
  display: none !important;
}

@media (max-width: 1150px) {
  .expense-management-header {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .expense-management-header__search {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .expense-overview-row > .ant-col,
  .expense-overview-row .expense-statistics-panel,
  .expense-overview-row .expense-tools-panel {
    height: auto !important;
    min-height: 0;
  }

}

@media (max-width: 767px) {
  .expense-management-page {
    padding: 6px !important;
  }

  .expense-management-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 12px;
  }

  .expense-management-header__title h1 {
    font-size: 20px;
  }

  .expense-statistics-panel .statistics-grid {
    display: flex;
    height: auto;
    overflow-x: auto;
  }

  .expense-statistics-panel .statistics-tile {
    min-width: 130px;
  }

  .expense-tools-panel .ant-row > .ant-col {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .expense-results-grid--grid > .expense-result-column {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@media (max-width: 520px) {
  .expense-header-refresh {
    width: 36px;
    padding: 0;
    font-size: 0;
  }

  .expense-header-actions {
    gap: 5px;
  }

  .expense-header-refresh .anticon {
    margin: 0;
    font-size: 13px;
  }

  .expense-list-card__info {
    grid-template-columns: 1fr;
  }

  .expense-list-card__header .expense-list-card__summary {
    margin-top: 8px !important;
    padding: 7px 0 !important;
    border-top: 1px solid var(--border-color);
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    border-left: 0;
  }

  .expense-list-card__state {
    margin-top: 6px;
    text-align: left !important;
  }

  .expense-list-card__status {
    margin-top: 8px;
    padding-top: 8px;
    padding-left: 4px !important;
    border-top: 1px solid var(--border-color);
    border-left: 0;
  }

  .expense-list-card__actions .ant-space {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .expense-list-card__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  .expense-management-header {
    grid-template-columns: 1fr;
  }

  .expense-management-header__search,
  .expense-header-actions {
    grid-column: 1;
  }

  .expense-management-header__search {
    grid-row: 2;
  }

  .expense-header-actions {
    grid-row: 3;
    justify-content: space-between;
  }
}

/* Staff management */
.staff-management-page {
  padding: 0;
}

.staff-management-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 8px;
}

.staff-results-label {
  display: block;
  color: var(--app-primaryDark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.staff-management-header h1 {
  margin: 0 0 3px !important;
  color: var(--text-color) !important;
  font-size: clamp(22px, 2vw, 27px) !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em;
}

.staff-management-header .ant-typography {
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.5;
}

.staff-add-button {
  min-width: 124px;
  height: 42px;
  border: 0 !important;
  border-radius: 10px !important;
  background: #00944d !important;
  box-shadow: 0 8px 18px rgba(0, 148, 77, 0.2);
  font-weight: 700;
}

.staff-command-panel {
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(18, 22, 33, 0.07) !important;
}

.staff-role-statistics {
  padding-bottom: 8px;
}

.staff-role-statistics .ant-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.staff-role-statistics .ant-row > .ant-col {
  max-width: none;
  flex: 1 0 112px;
}

.staff-role-stat {
  display: flex;
  min-height: 50px;
  height: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--component-bg);
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.staff-role-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(18, 22, 33, 0.08) !important;
}

.staff-role-stat--active {
  border-color: var(--app-primary);
  background: var(--app-primary-soft);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.12);
}

.staff-role-stat__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.staff-role-stat__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.staff-role-stat__copy strong {
  color: var(--text-color);
  font-size: 17px;
  line-height: 1.05;
}

.staff-role-stat__copy span {
  overflow: hidden;
  color: var(--secondary-text-color);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-command-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.staff-company-control {
  flex: 0 0 210px;
}

.staff-search-input,
.staff-company-selector {
  height: 42px !important;
  border-radius: 10px !important;
}

.staff-search-input {
  min-width: min(260px, 100%);
  flex: 1 1 280px;
}

.staff-company-selector {
  background: #1d4ed8 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.staff-results-section {
  padding-top: 0;
}

.staff-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 10px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border-color);
}

.staff-results-heading h3 {
  margin: 3px 0 0 !important;
  color: var(--text-color) !important;
  font-size: 20px !important;
  line-height: 1.1;
}

.staff-results-summary {
  display: block;
  margin-top: 3px;
  color: var(--secondary-text-color) !important;
  font-size: 12px;
}

.staff-results-filters {
  justify-content: flex-end;
}

.staff-results-filters .ant-tag {
  margin-inline-end: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.staff-results-heading .ant-btn-link {
  color: var(--app-primaryDark);
  font-weight: 700;
}

.staff-member-card {
  height: 100%;
  border: 1px solid var(--border-color) !important;
  border-radius: 15px !important;
  box-shadow: 0 6px 18px rgba(18, 22, 33, 0.07) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.staff-member-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 28px rgba(18, 22, 33, 0.12) !important;
}

.staff-member-card .ant-card-body {
  display: flex;
  height: 100%;
  padding: 16px !important;
  flex-direction: column;
}

.staff-member-card__header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.staff-member-card__details {
  flex: 1;
  padding: 2px 0 8px;
}

.staff-member-card__details .ant-col > div {
  margin-bottom: 9px !important;
}

.staff-member-card__details .ant-col:last-child > div:last-child {
  margin: 0 !important;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(24, 144, 255, 0.06);
}

.staff-member-card__actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.staff-member-card__actions .ant-btn {
  border-radius: 7px !important;
  font-weight: 600;
}

.staff-pagination-bar {
  min-height: 56px;
  margin-top: 20px;
  padding: 8px 12px !important;
  border-top: 1px solid var(--border-color) !important;
}

html.dark-theme .staff-member-card__details .ant-col:last-child > div:last-child {
  background: rgba(24, 144, 255, 0.14);
}

@media (max-width: 767px) {
  .staff-management-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 8px;
  }

  .staff-add-button {
    width: 100%;
  }

  .staff-results-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .staff-results-filters {
    justify-content: flex-start;
  }

  .staff-command-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .staff-company-control,
  .staff-search-input {
    width: 100%;
    flex: 1 1 auto;
  }

  .staff-member-card__actions,
  .staff-member-card__assignment-actions,
  .staff-member-card__record-actions {
    width: 100%;
  }

  .staff-member-card__actions .ant-space {
    justify-content: space-between;
  }

  .staff-member-card__assignment-actions .ant-btn:not(:first-child) {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .staff-management-page {
    padding: 0;
  }

  .staff-command-panel .ant-card-body,
  .staff-member-card .ant-card-body {
    padding: 12px !important;
  }

  .staff-member-card__assignment-actions .ant-btn {
    font-size: 11px;
  }

  .staff-pagination-bar .ant-pagination {
    transform: scale(0.9);
  }
}

/* Compact payment received management */
.payment-management-page {
  display: flex;
  width: 100%;
  max-width: 1600px;
  min-height: calc(100dvh - 112px) !important;
  flex-direction: column;
  margin-inline: auto;
  padding: 8px !important;
  background: transparent !important;
}

.payment-management-header {
  display: grid;
  grid-template-columns: minmax(270px, 0.8fr) minmax(440px, 1.25fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05);
}

.payment-management-header__title h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-color);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}

.payment-management-header__title h1 span {
  display: inline-flex;
  min-width: 25px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding-inline: 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-primary) 15%, transparent);
  color: var(--app-primary);
  font-size: 11px;
}

.payment-management-header__title p {
  margin: 3px 0 0;
  color: var(--secondary-text-color);
  font-size: 10px;
}

.payment-header-filters {
  min-width: 0;
}

.payment-filter-controls {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(125px, 0.55fr) minmax(210px, 1.45fr) auto;
  gap: 7px;
}

.payment-filter-controls .ant-input,
.payment-filter-controls .ant-input-affix-wrapper,
.payment-filter-controls .ant-btn {
  min-height: 36px;
  border-radius: 8px;
  font-size: 11px;
}

.payment-filter-reset {
  padding-inline: 11px;
  color: var(--app-primary);
}

.payment-view-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--component-bg);
}

.payment-view-switch .ant-btn {
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--secondary-text-color);
  box-shadow: none;
}

.payment-view-switch .ant-btn.is-active {
  background: var(--app-primary);
  color: var(--app-onPrimary);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--app-primary) 25%, transparent);
}

.payment-statistics-panel {
  overflow: hidden;
  border-color: var(--border-color) !important;
  border-radius: 13px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.05) !important;
}

.payment-statistics-panel .ant-card-body {
  padding: 7px !important;
}

.payment-statistics-panel .statistics-panel-header {
  height: 14px;
  margin-bottom: 4px;
  padding: 0;
  border: 0 !important;
}

.payment-statistics-panel .statistics-panel-title {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.payment-statistics-panel .statistics-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px;
}

.payment-statistics-panel .statistics-tile {
  display: grid;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 30px minmax(34px, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 6px 10px !important;
  border-radius: 9px;
}

.payment-statistics-panel .statistics-tile-icon--boxed {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  font-size: 13px;
}

.payment-statistics-panel .statistics-tile-value {
  overflow: hidden;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-statistics-panel .statistics-tile-label {
  overflow: hidden;
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-results-area {
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 8px;
}

.payment-loading-state {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--secondary-text-color);
  font-size: 11px;
}

.payment-record-card {
  height: 100% !important;
  min-height: 0;
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(18, 22, 33, 0.06) !important;
}

.payment-record-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(18, 22, 33, 0.1) !important;
}

.payment-record-card .ant-card-body {
  height: 100%;
}

.payment-card-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 11px !important;
}

.payment-card-header {
  margin-bottom: 6px !important;
}

.payment-card-header .ant-avatar {
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  color: #fff;
  font-weight: 700;
}

.payment-card-header > div:first-child {
  gap: 8px !important;
}

.payment-card-header .ant-tag {
  padding: 2px 7px !important;
  font-size: 8px !important;
}

.payment-card-summary {
  gap: 6px !important;
  margin-bottom: 6px !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
}

.payment-card-summary .ant-typography {
  font-size: 10px !important;
}

.payment-card-summary > div > .ant-typography:nth-child(2) {
  font-size: 13px !important;
}

.payment-card-id {
  margin-bottom: 5px !important;
}

.payment-card-id .ant-typography {
  font-size: 9px !important;
}

.payment-card-cash,
.payment-card-remarks {
  margin-bottom: 6px !important;
  padding: 7px 9px !important;
}

.payment-card-cash .ant-typography,
.payment-card-remarks .ant-typography {
  font-size: 10px !important;
}

.payment-card-actions {
  gap: 6px !important;
  margin-top: auto;
  padding-top: 7px !important;
}

.payment-card-actions .ant-btn {
  min-width: 0 !important;
  height: 29px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

.payment-card-status-actions {
  gap: 6px !important;
  margin-top: 6px !important;
}

.payment-card-status-actions .ant-btn {
  height: 28px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
}

@media (min-width: 1100px) {
  .payment-record-card--list .payment-card-content {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(250px, 0.75fr) minmax(320px, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: center;
    gap: 6px 14px;
  }

  .payment-record-card--list .payment-card-header {
    grid-column: 1;
    grid-row: 1;
  }

  .payment-record-card--list .payment-card-id {
    grid-column: 1;
    grid-row: 2;
  }

  .payment-record-card--list .payment-card-summary {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0 !important;
  }

  .payment-record-card--list .payment-card-cash,
  .payment-record-card--list .payment-card-remarks {
    grid-column: 3;
    margin: 0 !important;
  }

  .payment-record-card--list .payment-card-actions {
    grid-column: 1 / 3;
    grid-row: 3;
    margin: 0;
  }

  .payment-record-card--list .payment-card-status-actions {
    grid-column: 3;
    grid-row: 3;
    margin: 0 !important;
  }
}

.payment-pagination-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -2px 8px rgba(18, 22, 33, 0.05);
  backdrop-filter: blur(10px);
}

.payment-pagination-bar .ant-pagination {
  margin: 0;
}

@media (max-width: 1050px) {
  .payment-management-header {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .payment-header-filters {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .payment-results-grid--grid > .payment-result-column {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@media (max-width: 767px) {
  .payment-management-page {
    padding: 6px !important;
  }

  .payment-management-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 12px;
  }

  .payment-management-header__title h1 {
    font-size: 20px;
  }

  .payment-statistics-panel .statistics-grid--four {
    display: flex;
    overflow-x: auto;
  }

  .payment-statistics-panel .statistics-tile {
    min-width: 145px;
  }
}

@media (max-width: 560px) {
  .payment-filter-controls {
    grid-template-columns: 1fr;
  }

  .payment-filter-reset {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .payment-management-header {
    grid-template-columns: 1fr;
  }

  .payment-view-switch {
    grid-row: 3;
    width: max-content;
  }
}
/* Attendance history — responsive material-style workspace */
.attendance-history-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
}

.attendance-history-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 6px 0 22px;
}

.attendance-history-heading--compact {
  margin-bottom: 12px;
}

.attendance-history-back {
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.attendance-history-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--app-primary, #1677ff) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.attendance-history-profile-card,
.attendance-history-calendar-card,
.attendance-history-detail-card {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07) !important;
}

.attendance-history-profile-card {
  margin-bottom: 10px !important;
}

.attendance-history-profile-card .ant-card-body {
  padding: 12px 16px;
}

.attendance-history-profile-card .ant-row {
  align-items: center;
}

.attendance-history-calendar-card .ant-card-body {
  padding: 12px 16px 14px;
}

.attendance-history-stat {
  position: relative;
  min-height: 72px;
  padding: 9px 12px;
  overflow: hidden;
  text-align: left;
  background: color-mix(in srgb, var(--stat-color) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--stat-color) 22%, transparent);
  border-radius: 14px;
}

.attendance-history-stat-icon {
  position: absolute;
  top: 9px;
  right: 10px;
  color: var(--stat-color);
  font-size: 20px;
  opacity: 0.7;
}

.attendance-history-export-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.attendance-history-export-col .ant-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(82, 196, 26, 0.2);
}

.attendance-history-month-toolbar {
  padding: 0 2px 9px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.attendance-history-month-toolbar .ant-btn {
  border-radius: 12px;
}

.attendance-history-calendar .ant-picker-calendar-date-value {
  font-weight: 600;
}

.attendance-history-calendar .ant-picker-panel {
  border-top: 0;
  background: transparent;
}

.attendance-history-calendar .ant-picker-body {
  padding: 4px 0 0 !important;
}

.attendance-history-calendar .ant-picker-content {
  table-layout: fixed;
}

.attendance-history-calendar .ant-picker-cell {
  padding: 2px 3px !important;
}

.attendance-history-calendar .ant-picker-cell::before {
  display: none;
}

.attendance-history-calendar .ant-picker-cell-inner {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(148, 163, 184, 0.035);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

/* fullCellRender supplies this custom node instead of Ant's normal date node. */
.attendance-history-calendar .attendance-history-day-cell {
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}

.attendance-history-calendar .attendance-history-day-cell:hover {
  border-color: color-mix(in srgb, var(--app-primary, #1677ff) 38%, transparent) !important;
  background: color-mix(in srgb, var(--app-primary, #1677ff) 6%, transparent) !important;
}

.attendance-history-calendar .attendance-history-day-cell.is-selected {
  border-color: var(--app-primary, #1677ff) !important;
  background: color-mix(in srgb, var(--app-primary, #1677ff) 10%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--app-primary, #1677ff);
}

.attendance-history-calendar .attendance-history-day-cell.is-outside {
  opacity: 0.28 !important;
}

.attendance-history-calendar .ant-picker-content tbody tr {
  height: 46px;
}

.attendance-history-calendar .ant-picker-cell-in-view:hover .ant-picker-cell-inner {
  border-color: color-mix(in srgb, var(--app-primary, #1677ff) 40%, transparent) !important;
  background: color-mix(in srgb, var(--app-primary, #1677ff) 6%, transparent);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.attendance-history-calendar .ant-picker-cell-selected .ant-picker-cell-inner {
  border-color: var(--app-primary, #1677ff) !important;
  background: color-mix(in srgb, var(--app-primary, #1677ff) 9%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary, #1677ff) 12%, transparent);
}

.attendance-history-calendar .ant-picker-content th {
  padding: 7px 0 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.attendance-history-calendar .ant-picker-cell-inner {
  border-radius: 12px;
}

.attendance-history-detail-card {
  border-top: 3px solid var(--app-primary, #1677ff) !important;
}

.attendance-history-page.is-dark .attendance-history-stat {
  background: rgba(255, 255, 255, 0.035);
}

.attendance-history-page.is-dark .attendance-history-calendar .ant-picker-cell-inner {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 767px) {
  .attendance-history-heading {
    gap: 10px;
    margin-bottom: 14px;
  }

  .attendance-history-heading h2 {
    font-size: 23px;
  }

  .attendance-history-profile-card .ant-card-body,
  .attendance-history-calendar-card .ant-card-body,
  .attendance-history-detail-card .ant-card-body {
    padding: 10px;
  }

  .attendance-history-stat {
    min-height: 64px;
    padding: 7px 8px;
  }

  .attendance-history-stat-icon {
    display: none;
  }

  .attendance-history-export-col {
    justify-content: stretch;
  }

  .attendance-history-calendar .ant-picker-content th {
    padding-top: 10px;
    font-size: 9px;
    letter-spacing: 0;
  }

  .attendance-history-calendar .ant-picker-cell {
    padding: 1px !important;
  }

  .attendance-history-calendar .ant-picker-cell-inner {
    height: 42px !important;
    border-radius: 9px !important;
  }

  .attendance-history-calendar .attendance-history-day-cell {
    min-height: 36px;
  }

  .attendance-history-calendar .ant-picker-content tbody tr {
    height: 39px;
  }
}

@media (min-width: 992px) {
  .attendance-history-profile-card .ant-card-body > .ant-row {
    flex-wrap: nowrap;
  }
}

/* ---- css/login.css ---- */
.login-page {
  --login-blue: var(--app-primary, #0d4d9c);
  --login-blue-dark: var(--app-primaryDark, #083567);
  --login-ink: #13213a;
  --login-muted: #6f7b8f;
  position: fixed;
  z-index: 2000;
  inset: 0;
  overflow: auto;
  padding: clamp(14px, 2.4vw, 34px);
  display: grid;
  place-items: center;
  color: var(--login-ink);
  font-family: "Inter", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 16%, rgba(31, 110, 212, 0.14), transparent 27%),
    radial-gradient(circle at 88% 84%, rgba(13, 77, 156, 0.12), transparent 28%),
    #eaf0f7;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.login-page *,
.login-page *::before,
.login-page *::after {
  box-sizing: border-box;
}

.login-page::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(13, 77, 156, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 77, 156, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.login-shell {
  position: relative;
  width: min(1280px, 100%);
  min-height: min(760px, calc(100dvh - 68px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 30px;
  background: #fff;
  box-shadow:
    0 38px 90px rgba(16, 45, 82, 0.19),
    0 8px 24px rgba(16, 45, 82, 0.08);
}

.login-command {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(30px, 4.2vw, 64px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(circle at 84% 15%, rgba(50, 139, 255, 0.42), transparent 30%),
    linear-gradient(145deg, #071b38 0%, #0a3369 52%, #0d4d9c 100%);
}

.login-command::before {
  position: absolute;
  z-index: -1;
  right: -18%;
  bottom: -30%;
  width: 72%;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 62px rgba(255, 255, 255, 0.03),
    0 0 0 124px rgba(255, 255, 255, 0.018);
}

.login-command::after {
  position: absolute;
  z-index: -1;
  top: 28%;
  right: -70px;
  width: 190px;
  height: 190px;
  content: "";
  border: 1px solid rgba(87, 168, 255, 0.32);
  border-radius: 32px;
  transform: rotate(25deg);
}

.login-command__grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(135deg, black, transparent 72%);
}

.login-command__header,
.login-command__status,
.login-command__footer,
.login-command__footer > div {
  display: flex;
  align-items: center;
}

.login-command__header {
  position: relative;
  z-index: 2;
  justify-content: space-between;
  gap: 24px;
}

.login-command__wordmark {
  width: clamp(190px, 22vw, 275px);
  height: auto;
  filter: drop-shadow(0 5px 18px rgba(0, 0, 0, 0.18));
}

.login-command__status {
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  background: rgba(5, 24, 51, 0.22);
  backdrop-filter: blur(10px);
}

.login-command__status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #71e6a5;
  box-shadow: 0 0 0 4px rgba(113, 230, 165, 0.12);
}

.login-command__copy {
  position: relative;
  z-index: 1;
  width: min(660px, 96%);
  margin: auto 0 clamp(36px, 5vh, 62px);
}

.login-command__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #86c4ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.login-command__eyebrow::before {
  width: 26px;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: currentColor;
}

.login-command__copy h1 {
  max-width: 650px;
  margin: 18px 0 20px;
  color: #fff;
  font-size: clamp(46px, 5.2vw, 78px);
  font-weight: 730;
  letter-spacing: -3.8px;
  line-height: 0.98;
}

.login-command__copy p {
  max-width: 560px;
  margin: 0;
  color: rgba(232, 243, 255, 0.72);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.7;
}

.login-command__capabilities {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.login-command__capabilities article {
  position: relative;
  min-width: 0;
  min-height: 116px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(5, 25, 53, 0.32);
  backdrop-filter: blur(12px);
  transition: transform 0.2s ease, background 0.2s ease;
}

.login-command__capabilities article:hover {
  background: rgba(7, 33, 70, 0.52);
  transform: translateY(-3px);
}

.login-command__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(134, 196, 255, 0.24);
  border-radius: 10px;
  color: #9ed0ff;
  background: rgba(53, 142, 239, 0.13);
}

.login-command__capabilities article > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-command__capabilities strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-command__capabilities small {
  overflow: hidden;
  color: rgba(220, 235, 252, 0.56);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-command__capabilities b {
  position: absolute;
  top: 15px;
  right: 15px;
  color: rgba(255, 255, 255, 0.26);
  font-size: 9px;
}

.login-command__footer {
  margin-top: 20px;
  justify-content: space-between;
  color: rgba(229, 241, 255, 0.57);
  font-size: 11px;
  letter-spacing: 0.3px;
}

.login-command__footer > div {
  gap: 6px;
}

.login-command__footer .anticon {
  color: #86c4ff;
}

.login-access {
  min-width: 0;
  padding: clamp(36px, 5.2vw, 78px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(31, 110, 212, 0.06), transparent 29%),
    #fff;
}

.login-panel-inner {
  width: min(430px, 100%);
}

.login-mobile-brand {
  display: none;
}

.login-mobile-brand {
  align-items: center;
  gap: 11px;
}

.login-mobile-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border: 1px solid #e5eaf0;
  border-radius: 13px;
}

.login-mobile-brand > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.login-mobile-brand strong {
  color: var(--login-ink);
  font-size: 16px;
  letter-spacing: -0.35px;
}

.login-mobile-brand span {
  color: var(--login-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-heading {
  margin-bottom: 30px;
}

.login-secure-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--login-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-secure-label__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--login-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--login-blue) 10%, transparent);
  transform: rotate(45deg);
}

.login-heading h2 {
  margin: 14px 0 7px;
  color: var(--login-ink);
  font-size: clamp(35px, 3.2vw, 46px);
  font-weight: 750;
  letter-spacing: -2px;
  line-height: 1.05;
}

.login-heading p {
  margin: 0;
  color: var(--login-muted);
  font-size: 15px;
  line-height: 1.55;
}

.login-notification-prompt {
  margin-bottom: 22px;
  padding: 12px 10px 12px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--login-blue) 18%, #dce4ed);
  border-radius: 14px;
  background: color-mix(in srgb, var(--login-blue) 5%, white);
}

.login-notification-prompt__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--login-blue);
  background: color-mix(in srgb, var(--login-blue) 11%, white);
  font-size: 17px;
}

.login-notification-prompt__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.login-notification-prompt__text strong {
  color: var(--login-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.login-notification-prompt__text span {
  color: var(--login-muted);
  font-size: 12px;
  line-height: 1.4;
}

.login-notification-prompt__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.login-notification-prompt__enable {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--login-blue);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease, opacity 0.18s ease;
}

.login-notification-prompt__enable:hover:not(:disabled) {
  background: var(--login-blue-dark);
}

.login-notification-prompt__enable:disabled {
  cursor: progress;
  opacity: 0.65;
}

.login-notification-prompt__close {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--login-muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
}

.login-notification-prompt__close:hover {
  color: var(--login-ink);
  background: color-mix(in srgb, var(--login-blue) 9%, white);
}

.login-remember {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4a5870;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  user-select: none;
}

.login-remember input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.login-remember__box {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1.5px solid #c5cfdb;
  border-radius: 6px;
  color: transparent;
  background: #fff;
  font-size: 11px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.login-remember:hover .login-remember__box {
  border-color: var(--login-blue);
}

.login-remember input:checked + .login-remember__box {
  border-color: var(--login-blue);
  color: #fff;
  background: var(--login-blue);
}

.login-remember input:focus-visible + .login-remember__box {
  outline: 3px solid color-mix(in srgb, var(--login-blue) 28%, transparent);
  outline-offset: 2px;
}

.login-field-label,
.login-password-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-field + .login-field-label {
  margin-top: 19px;
}

.login-password-label {
  margin-top: 19px;
}

.login-field-label label,
.login-password-label label {
  color: #34435a;
  font-size: 13px;
  font-weight: 750;
}

.login-field-label span {
  color: #8a95a5;
  font-size: 12px;
}

.login-password-label a {
  color: var(--login-blue);
  font-size: 13px;
  font-weight: 750;
}

.login-field {
  height: 54px;
  margin-top: 8px;
  padding: 0 14px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce3eb;
  border-radius: 14px;
  background: #fbfcfe;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.login-field:focus-within {
  border-color: var(--login-blue);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--login-blue) 10%, transparent);
}

.login-field__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #77859a;
  background: #eef2f7;
}

.login-country-code {
  padding-right: 10px;
  border-right: 1px solid #dfe5ec;
  color: #56647a;
  font-size: 14px;
  font-weight: 700;
}

.login-field input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--login-ink);
  font: inherit;
  font-size: 15px;
}

.login-field input::placeholder {
  color: #a2adbb;
}

.login-field__valid {
  flex: 0 0 auto;
  color: #19a66f;
}

.login-password-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #77859a;
  cursor: pointer;
}

.login-password-toggle:hover {
  color: var(--login-blue);
  background: color-mix(in srgb, var(--login-blue) 7%, white);
}

.login-password-toggle:focus-visible,
.login-submit:focus-visible,
.login-password-label a:focus-visible,
.login-notification-prompt button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--login-blue) 28%, transparent);
  outline-offset: 2px;
}

.login-error {
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid #f5c7c7;
  border-radius: 10px;
  background: #fff5f5;
  color: #b42318;
  font-size: 13px;
  line-height: 1.45;
}

.login-submit {
  width: 100%;
  height: 55px;
  margin-top: 24px;
  padding: 0 9px 0 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(110deg, var(--login-blue-dark), var(--login-blue));
  box-shadow: 0 13px 28px color-mix(in srgb, var(--login-blue) 25%, transparent);
  cursor: pointer;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.2px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.login-submit__icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.18s ease;
}

.login-submit:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 33px color-mix(in srgb, var(--login-blue) 32%, transparent);
}

.login-submit:not(:disabled):hover .login-submit__icon {
  transform: translateX(2px);
}

.login-submit:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.login-trust {
  margin-top: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #7d889a;
  font-size: 12px;
}

.login-trust .anticon {
  color: var(--login-blue);
}

.login-access__footer {
  margin-top: 42px;
  padding-top: 17px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #edf0f4;
  color: #8a95a5;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.login-page.is-dark {
  --login-ink: #f3f6fa;
  --login-muted: #9ca8b8;
  background: #09111e;
}

.login-page.is-dark .login-shell {
  border-color: #29364a;
  background: #111a28;
}

.login-page.is-dark .login-access {
  background:
    radial-gradient(circle at 100% 0%, rgba(48, 130, 236, 0.1), transparent 28%),
    #111a28;
}

.login-page.is-dark .login-field {
  border-color: #354257;
  background: #172233;
}

.login-page.is-dark .login-field:focus-within {
  border-color: #4f9df6;
  background: #172538;
}

.login-page.is-dark .login-field-label label,
.login-page.is-dark .login-password-label label {
  color: #d7e0eb;
}

.login-page.is-dark .login-field__icon {
  color: #a9b6c7;
  background: #222f42;
}

.login-page.is-dark .login-country-code {
  border-color: #3a4658;
  color: #bdc8d5;
}

.login-page.is-dark .login-field input {
  color: #f3f6fa;
}

.login-page.is-dark .login-password-toggle:hover {
  background: #263348;
}

.login-page.is-dark .login-notification-prompt {
  border-color: #33445d;
  background: #172438;
}

.login-page.is-dark .login-notification-prompt__icon {
  background: #22324a;
}

.login-page.is-dark .login-remember {
  color: #c3cddb;
}

.login-page.is-dark .login-remember__box {
  border-color: #46556c;
  background: #172233;
}

.login-page.is-dark .login-notification-prompt__close:hover {
  background: #22324a;
}

.login-page.is-dark .login-error {
  border-color: #723e45;
  background: #351f27;
  color: #ffb6b6;
}

.login-page.is-dark .login-access__footer {
  border-color: #29364a;
}

@media (max-width: 980px) {
  .login-page {
    position: fixed;
    align-items: flex-start;
    padding: 20px;
  }

  .login-shell {
    width: min(720px, 100%);
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 24px;
  }

  .login-command {
    min-height: 0;
    padding: 26px 32px 30px;
  }

  .login-command__wordmark {
    width: 190px;
  }

  .login-command__copy {
    width: min(680px, 100%);
    margin: 30px 0 0;
  }

  .login-command__copy h1 {
    max-width: 620px;
    margin: 12px 0 10px;
    font-size: clamp(32px, 5.6vw, 46px);
  }

  .login-command__copy p {
    max-width: 610px;
  }

  .login-command__capabilities,
  .login-command__footer {
    display: none;
  }

  .login-access {
    padding: 45px 28px 38px;
  }

  .login-panel-inner {
    width: min(510px, 100%);
  }
}

@media (max-width: 600px) {
  .login-page {
    padding: 0;
    background: #fff;
  }

  .login-page::before {
    display: none;
  }

  .login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .login-command {
    display: none;
  }

  .login-access {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    padding:
      max(25px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }

  .login-mobile-brand {
    margin-bottom: clamp(50px, 12vh, 92px);
    display: flex;
    align-items: center;
    gap: 11px;
  }

  .login-heading h2 {
    font-size: 34px;
  }

  .login-notification-prompt {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .login-notification-prompt__icon {
    width: 34px;
    height: 34px;
  }

  /* 16px stops iOS Safari zooming into the field on focus */
  .login-field input {
    font-size: 16px;
  }

  .login-access__footer {
    margin-top: 36px;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .login-page {
    padding: 10px;
  }

  .login-shell {
    min-height: calc(100dvh - 20px);
    border-radius: 22px;
  }

  .login-command {
    padding: 28px 34px;
  }

  .login-command__wordmark {
    width: 210px;
  }

  .login-command__copy {
    margin: auto 0 24px;
  }

  .login-command__copy h1 {
    margin-block: 12px;
    font-size: clamp(42px, 4.8vw, 62px);
  }

  .login-command__capabilities article {
    min-height: 94px;
    padding: 12px;
  }

  .login-command__icon {
    width: 29px;
    height: 29px;
  }

  .login-command__footer {
    margin-top: 12px;
  }

  .login-access {
    padding: 28px 42px;
  }

  .login-heading {
    margin-bottom: 20px;
  }

  .login-access__footer {
    margin-top: 24px;
  }
}

@media (min-width: 981px) and (max-height: 610px) {
  .login-command__capabilities,
  .login-command__footer {
    display: none;
  }

  .login-command__copy {
    margin-bottom: auto;
  }

  .login-notification-prompt {
    margin-bottom: 12px;
  }

  .login-password-label {
    margin-top: 13px;
  }

  .login-submit {
    margin-top: 17px;
  }

  .login-trust {
    margin-top: 12px;
  }
}

@media (max-width: 980px) and (max-height: 700px) {
  .login-page {
    padding: 0;
    background: #fff;
  }

  .login-page::before,
  .login-command {
    display: none;
  }

  .login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .login-access {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    padding:
      max(20px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
  }

  .login-mobile-brand {
    margin-bottom: 28px;
    display: flex;
  }

  .login-heading {
    margin-bottom: 20px;
  }

  .login-access__footer {
    margin-top: 28px;
  }
}

@media (max-width: 380px) {
  .login-access {
    padding-inline: 16px;
  }

  .login-notification-prompt {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .login-notification-prompt__icon,
  .login-notification-prompt__text span {
    display: none;
  }

  .login-remember {
    font-size: 12px;
  }
}

@media (max-width: 600px) and (max-height: 700px) {
  .login-mobile-brand {
    margin-bottom: 32px;
  }

  .login-heading {
    margin-bottom: 18px;
  }

  .login-heading h2 {
    margin-top: 10px;
    font-size: 30px;
  }

  .login-notification-prompt {
    margin-bottom: 14px;
  }

  .login-password-label {
    margin-top: 14px;
  }

  .login-submit {
    margin-top: 18px;
  }

  .login-trust {
    margin-top: 13px;
  }

  .login-access__footer {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-command__capabilities article,
  .login-submit,
  .login-field {
    transition: none;
  }
}

/* ---- css/forgotPass.css ---- */
.forgot-command {
  background:
    radial-gradient(circle at 82% 18%, rgba(66, 155, 255, 0.38), transparent 29%),
    linear-gradient(148deg, #06182f 0%, #0a2c58 52%, #0d4d9c 100%);
}

.forgot-command::after {
  top: auto;
  right: -45px;
  bottom: 22%;
  width: 155px;
  height: 155px;
  border-radius: 50%;
}

.forgot-command__status .anticon {
  color: #9ed0ff;
}

.forgot-command__copy {
  position: relative;
  z-index: 1;
  max-width: 630px;
  margin: clamp(48px, 8vh, 86px) 0 34px;
}

.forgot-command__copy h1 {
  margin: 17px 0 17px;
  color: #fff;
  font-size: clamp(44px, 4.7vw, 68px);
  font-weight: 740;
  letter-spacing: -3.3px;
  line-height: 1;
}

.forgot-command__copy p {
  max-width: 540px;
  margin: 0;
  color: rgba(229, 241, 255, 0.68);
  font-size: 14px;
  line-height: 1.65;
}

.forgot-command__steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
}

.forgot-command__steps article {
  position: relative;
  min-height: 62px;
  padding: 11px 42px 11px 11px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: rgba(228, 240, 255, 0.52);
  background: rgba(4, 23, 49, 0.22);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.forgot-command__steps article > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.04);
}

.forgot-command__steps article > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.forgot-command__steps strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.forgot-command__steps small {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forgot-command__steps article > i {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}

.forgot-command__steps article.is-active {
  border-color: rgba(134, 196, 255, 0.42);
  color: #9ed0ff;
  background: rgba(40, 125, 218, 0.16);
  transform: translateX(7px);
}

.forgot-command__steps article.is-active > span {
  border-color: rgba(134, 196, 255, 0.4);
  color: #fff;
  background: rgba(72, 155, 245, 0.18);
}

.forgot-command__steps article.is-active strong {
  color: #fff;
}

.forgot-command__steps article.is-active > i {
  border-color: #77e7aa;
  background: #77e7aa;
  box-shadow: 0 0 0 5px rgba(119, 231, 170, 0.1);
}

.forgot-command__steps article.is-complete {
  color: #77e7aa;
}

.forgot-command__steps article.is-complete > span {
  border-color: rgba(119, 231, 170, 0.3);
  color: #77e7aa;
}

.forgot-command__footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(225, 239, 255, 0.52);
  font-size: 9px;
}

.forgot-command__footer .anticon {
  color: #86c4ff;
}

.forgot-panel-inner {
  width: min(445px, 100%);
}

.forgot-back {
  height: 32px;
  margin: 0 0 24px -8px;
  padding-inline: 8px;
  color: #6d7b8f;
  font-size: 10px;
  font-weight: 750;
}

.forgot-back:hover {
  color: var(--login-blue) !important;
  background: color-mix(in srgb, var(--login-blue) 6%, transparent) !important;
}

.forgot-back:focus-visible,
.forgot-inline-actions button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--login-blue) 25%, transparent);
  outline-offset: 2px;
}

.forgot-progress {
  margin-bottom: 31px;
  display: grid;
  grid-template-columns: 30px 1fr 30px 1fr 30px;
  align-items: center;
}

.forgot-progress > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #dce3eb;
  border-radius: 10px;
  color: #98a4b3;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 800;
  transition: all 0.2s ease;
}

.forgot-progress > span.is-active {
  border-color: var(--login-blue);
  border-radius: 50%;
  color: #fff;
  background: var(--login-blue);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--login-blue) 9%, transparent);
}

.forgot-progress > span.is-complete {
  border-color: #25a872;
  color: #25a872;
  background: #effbf6;
}

.forgot-progress > i {
  height: 2px;
  margin-inline: 8px;
  border-radius: 999px;
  background: #e2e7ee;
}

.forgot-progress > i.is-complete {
  background: #25a872;
}

.forgot-heading {
  min-height: 115px;
  margin-bottom: 23px;
}

.forgot-heading h2 {
  max-width: 410px;
  font-size: clamp(30px, 2.8vw, 40px);
  letter-spacing: -1.65px;
}

.forgot-otp-field input {
  text-align: center;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: 5px;
}

.forgot-inline-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.forgot-inline-actions button {
  padding: 3px 0;
  border: 0;
  border-radius: 4px;
  color: var(--login-blue);
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
}

.forgot-inline-actions button:disabled {
  color: #9da7b5;
  cursor: not-allowed;
}

.forgot-password-hint {
  margin-top: 10px;
  color: #98a4b3;
  font-size: 9px;
}

.forgot-password-hint span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.forgot-password-hint span.is-valid {
  color: #1d9f69;
}

.forgot-page.is-dark .forgot-progress > span {
  border-color: #39475b;
  color: #95a3b6;
  background: #172233;
}

.forgot-page.is-dark .forgot-progress > span.is-active {
  border-color: #4f9df6;
  color: #fff;
  background: var(--login-blue);
}

.forgot-page.is-dark .forgot-progress > span.is-complete {
  border-color: #41c68c;
  color: #77e7aa;
  background: #163329;
}

.forgot-page.is-dark .forgot-progress > i {
  background: #354257;
}

.forgot-page.is-dark .forgot-progress > i.is-complete {
  background: #41c68c;
}

.forgot-page.is-dark .forgot-back {
  color: #a6b3c3;
}

@media (max-width: 980px) {
  .forgot-command {
    min-height: 340px;
  }

  .forgot-command__copy {
    max-width: 660px;
    margin: 48px 0 24px;
  }

  .forgot-command__copy h1 {
    max-width: 620px;
    margin-block: 13px;
    font-size: clamp(41px, 7vw, 58px);
  }

  .forgot-command__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .forgot-command__steps article {
    padding-right: 12px;
  }

  .forgot-command__steps article > i,
  .forgot-command__steps small,
  .forgot-command__footer {
    display: none;
  }

  .forgot-command__steps article.is-active {
    transform: translateY(-4px);
  }

  .forgot-access {
    min-height: 560px;
  }
}

@media (max-width: 600px) {
  .forgot-access {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .forgot-mobile-brand {
    margin-bottom: 30px;
  }

  .forgot-back {
    margin-bottom: 20px;
  }

  .forgot-progress {
    margin-bottom: 27px;
  }

  .forgot-heading {
    min-height: 118px;
  }

  .forgot-heading h2 {
    font-size: 31px;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .forgot-command__copy {
    margin: 32px 0 20px;
  }

  .forgot-command__copy h1 {
    margin-block: 10px;
    font-size: clamp(39px, 4.2vw, 56px);
  }

  .forgot-command__steps {
    gap: 7px;
  }

  .forgot-command__steps article {
    min-height: 52px;
    padding-block: 6px;
  }

  .forgot-command__steps article > span {
    width: 36px;
    height: 36px;
  }

  .forgot-command__footer {
    padding-top: 10px;
  }

  .forgot-back {
    margin-bottom: 14px;
  }

  .forgot-progress {
    margin-bottom: 20px;
  }

  .forgot-heading {
    min-height: 100px;
    margin-bottom: 17px;
  }
}

@media (min-width: 981px) and (max-height: 610px) {
  .forgot-command__steps article {
    min-height: 46px;
  }

  .forgot-command__footer {
    display: none;
  }

  .forgot-back {
    margin-bottom: 10px;
  }

  .forgot-progress {
    margin-bottom: 14px;
  }

  .forgot-heading {
    min-height: 88px;
    margin-bottom: 12px;
  }
}

@media (max-width: 980px) and (max-height: 700px) {
  .forgot-access {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .forgot-mobile-brand {
    margin-bottom: 18px;
  }

  .forgot-back {
    margin-bottom: 14px;
  }

  .forgot-progress {
    margin-bottom: 20px;
  }

  .forgot-heading {
    min-height: 96px;
    margin-bottom: 16px;
  }
}

@media (max-width: 380px) {
  .forgot-progress {
    grid-template-columns: 28px 1fr 28px 1fr 28px;
  }

  .forgot-progress > span {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 600px) and (max-height: 700px) {
  .forgot-mobile-brand {
    margin-bottom: 18px;
  }

  .forgot-heading h2 {
    font-size: 28px;
  }

  .forgot-inline-actions {
    margin-top: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .forgot-command__steps article,
  .forgot-progress > span {
    transition: none;
  }
}

/* ---- components/Chat/chatting.css ---- */
.chat-page-shell {
  --chat-shell-offset: 148px;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--chat-shell-offset));
  min-height: 420px;
  max-height: calc(100dvh - var(--chat-shell-offset));
}

.chat-page {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e4e8ee;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
}

.chat-contact-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #e5e7eb;
  background: #fff;
}

.chat-sidebar-header {
  flex-shrink: 0;
  height: 70px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #edf0f3;
}

.chat-sidebar-header h1 {
  margin: 0;
  color: #111827;
  font-size: 19px;
  line-height: 1.2;
}

.chat-sidebar-header span {
  color: #8a94a3;
  font-size: 10px;
}

.chat-contact-count {
  height: 30px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 13%, white);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
}

.chat-contact-search {
  flex-shrink: 0;
  padding: 10px 12px;
}

.chat-contact-search .ant-input-affix-wrapper {
  height: 38px;
  border-radius: 9px;
  background: #f7f8fa;
}

.chat-contact-list {
  flex: 1;
  min-height: 0;
  padding: 0 7px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-contact-item {
  position: relative;
  width: 100%;
  padding: 10px 8px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.chat-contact-item:hover {
  background: #f6f7f9;
}

.chat-contact-item.is-active {
  background: color-mix(in srgb, var(--app-primary) 12%, white);
}

.chat-contact-item.is-active::before {
  position: absolute;
  width: 3px;
  height: 32px;
  border-radius: 0 3px 3px 0;
  background: var(--app-primary);
  content: "";
}

.chat-contact-copy,
.chat-contact-name-row {
  min-width: 0;
  display: flex;
}

.chat-contact-copy {
  flex-direction: column;
  gap: 3px;
}

.chat-contact-name-row {
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.chat-contact-name-row strong {
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-contact-name-row small,
.chat-contact-preview {
  color: #8b95a5;
  font-size: 9px;
}

.chat-contact-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-empty-contacts {
  margin-top: 50px;
}

.chat-conversation-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f7f8fa;
}

.chat-conversation-header {
  flex-shrink: 0;
  height: 70px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.96);
}

.chat-back-button {
  display: none;
}

.chat-active-contact {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-active-contact strong {
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-active-contact span {
  color: #23a26d;
  font-size: 10px;
  text-transform: capitalize;
}

.chat-header-tag {
  margin: 0;
  border-radius: 7px;
  font-size: 9px;
}

.chat-message-list {
  flex: 1;
  min-height: 0;
  padding: 12px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.chat-date-divider {
  margin: 7px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #98a1af;
  font-size: 9px;
}

.chat-date-divider::before,
.chat-date-divider::after {
  height: 1px;
  flex: 1;
  background: #e2e6eb;
  content: "";
}

.chat-date-divider span {
  padding: 3px 8px;
  border: 1px solid #e2e6eb;
  border-radius: 10px;
  background: #fff;
}

.chat-message-row {
  margin: 6px 0;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.chat-message-row.is-user {
  flex-direction: row-reverse;
}

.chat-message-content {
  max-width: min(68%, 620px);
}

.chat-message-bubble {
  padding: 8px 11px;
  border-radius: 5px 13px 13px 13px;
  background: #fff;
  color: #263140;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.08);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chat-message-row.is-user .chat-message-bubble {
  border-radius: 13px 5px 13px 13px;
  background: var(--app-primary);
  color: var(--app-onPrimary, #111);
}

.chat-message-meta {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #929baa;
  font-size: 8px;
}

.chat-message-row.is-user .chat-message-meta {
  justify-content: flex-end;
}

.chat-message-menu {
  width: 24px;
  height: 24px;
  padding: 0;
  opacity: 0;
}

.chat-message-row:hover .chat-message-menu,
.chat-message-menu:focus {
  opacity: 1;
}

.chat-file-message {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-empty-messages {
  margin-top: 14vh;
}

.chat-composer {
  flex-shrink: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-top: 1px solid #e2e6eb;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
}

.chat-error {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.4;
}

.chat-composer .ant-input {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f8fa;
  resize: none;
}

.chat-attach-button,
.chat-send-button {
  min-height: 38px;
  border-radius: 9px;
}

.chat-attach-button {
  width: 38px;
  padding: 0;
}

.chat-send-button {
  padding-inline: 14px;
}

.chat-page.is-dark,
.chat-page.is-dark .chat-contact-panel,
.chat-page.is-dark .chat-conversation-header,
.chat-page.is-dark .chat-composer {
  border-color: #303030;
  background: #171717;
}

.chat-page.is-dark .chat-conversation-panel,
.chat-page.is-dark .chat-contact-search .ant-input-affix-wrapper,
.chat-page.is-dark .chat-composer .ant-input {
  background: #111;
}

.chat-page.is-dark .chat-sidebar-header,
.chat-page.is-dark .chat-conversation-header,
.chat-page.is-dark .chat-composer {
  border-color: #303030;
}

.chat-page.is-dark .chat-sidebar-header h1,
.chat-page.is-dark .chat-contact-name-row strong,
.chat-page.is-dark .chat-active-contact strong {
  color: #f3f4f6;
}

.chat-page.is-dark .chat-contact-item:hover {
  background: #242424;
}

.chat-page.is-dark .chat-contact-item.is-active {
  background: color-mix(in srgb, var(--app-primary) 18%, #171717);
}

.chat-page.is-dark .chat-message-bubble,
.chat-page.is-dark .chat-date-divider span {
  border-color: #333;
  background: #292929;
  color: #f3f4f6;
}

.chat-page.is-dark .chat-message-row.is-user .chat-message-bubble {
  background: var(--app-primary);
  color: var(--app-onPrimary, #111);
}

.chat-page.is-dark .chat-error {
  border-color: #7f1d1d;
  background: #3f1515;
  color: #fecaca;
}

@media (max-width: 900px) {
  .chat-page {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .chat-header-tag {
    display: none;
  }
}

@media (max-width: 768px) {
  .chat-page-shell {
    --chat-shell-offset: 108px;
    min-height: 360px;
  }

  .chat-page {
    display: block;
    height: 100%;
    min-height: 0;
    border-radius: 12px;
  }

  .chat-contact-panel {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: min(88%, 320px);
    border-radius: 12px 0 0 12px;
    box-shadow: 12px 0 25px rgba(15, 23, 42, 0.16);
    transform: translateX(-110%);
    transition: transform 0.22s ease;
  }

  .chat-contact-panel.is-mobile-open {
    transform: translateX(0);
  }

  .chat-conversation-panel {
    height: 100%;
  }

  .chat-back-button {
    display: inline-flex;
  }

  .chat-message-list {
    padding: 10px;
  }

  .chat-message-content {
    max-width: 82%;
  }

  .chat-send-button {
    width: 40px;
    padding: 0;
    font-size: 0;
  }

  .chat-send-button .anticon {
    margin: 0;
    font-size: 14px;
  }
}

/* ---- components/Enquiries/enquiries.css ---- */
.enquiries-management-page {
  padding: clamp(6px, 1vw, 14px) !important;
  background: #f6f7f9 !important;
}

.enquiries-header,
.enquiries-toolbar {
  border: 1px solid #e5e8ed;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.enquiries-header {
  min-height: 78px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  border-radius: 14px;
}

.enquiries-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.enquiries-heading h2 {
  margin: 0 !important;
  color: #111827;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
}

.enquiries-heading span {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 15%, white);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
}

.enquiries-heading > .ant-typography {
  color: #7d8796;
  font-size: 12px;
}

.enquiries-header-actions {
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.enquiries-search {
  width: min(620px, 100%);
  height: 40px;
  border-radius: 9px;
}

.enquiries-header-actions .ant-btn {
  height: 40px;
  border-radius: 9px;
  font-weight: 600;
}

.enquiries-view-switch {
  padding: 3px;
  display: flex;
  gap: 2px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #f7f8fa;
}

.enquiries-view-switch .ant-btn {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.enquiries-toolbar {
  margin: 10px 0 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
}

.enquiries-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 135px));
  gap: 7px;
}

.enquiries-summary button {
  min-height: 43px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e7e9ed;
  border-radius: 9px;
  background: #f8f9fb;
  color: #243044;
  cursor: pointer;
}

.enquiries-summary button.is-active {
  border-color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 11%, white);
}

.enquiries-summary strong {
  font-size: 16px;
}

.enquiries-summary small {
  color: #6f7a8b;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.enquiries-status-filter {
  width: 170px;
}

.enquiries-status-filter .ant-select-selector {
  min-height: 38px !important;
  border-radius: 8px !important;
}

.enquiries-results > .ant-col {
  display: flex;
}

.enquiry-card {
  width: 100%;
  overflow: hidden;
  border-color: #e5e8ed !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.055) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

.enquiry-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 40%, #e5e8ed) !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.09) !important;
}

.enquiry-card > .ant-card-body {
  height: 100%;
  padding: 12px !important;
  display: flex;
  flex-direction: column;
}

.enquiry-card-main {
  min-width: 0;
  flex: 1;
  margin-bottom: 8px !important;
}

.enquiry-card-head {
  margin-bottom: 8px !important;
}

.enquiry-card-head .ant-avatar {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
}

.enquiry-card-head .ant-tag {
  margin-inline-end: 0;
}

.enquiry-card-details {
  margin-bottom: 8px !important;
}

.enquiry-card-details > .ant-space-item {
  min-width: 0;
}

.enquiry-card-id {
  margin-top: auto;
  padding: 6px 8px !important;
}

.enquiry-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 6px !important;
  margin-top: 8px !important;
}

.enquiry-card-actions .ant-btn {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding-inline: 8px;
  margin: 0 !important;
  border-radius: 7px !important;
  font-size: 11px;
}

.enquiries-results.is-list .enquiry-card > .ant-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 290px;
  grid-template-rows: auto;
  align-items: center;
  gap: 14px;
  min-height: 138px;
}

.enquiries-results.is-list .enquiry-card-main {
  display: grid;
  grid-template-columns: minmax(210px, 0.75fr) minmax(280px, 1.25fr);
  align-items: center;
  gap: 18px;
  margin: 0 !important;
}

.enquiries-results.is-list .enquiry-card-head {
  min-width: 0;
  margin: 0 !important;
}

.enquiries-results.is-list .enquiry-card-details {
  min-width: 0;
  margin: 0 !important;
  padding-left: 16px;
  border-left: 1px solid #edf0f4;
}

.enquiries-results.is-list .enquiry-card-id {
  width: 100%;
  margin: 0 !important;
}

.enquiries-results.is-list .enquiry-card-actions {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 !important;
  padding-left: 14px;
  border-left: 1px solid #edf0f4;
}

.enquiries-results.is-list .enquiry-card-actions .ant-btn {
  height: 32px;
}

.enquiry-list-row {
  width: 100%;
  min-height: 138px;
  padding: 12px;
  display: grid;
  grid-template-columns:
    minmax(190px, 0.8fr)
    minmax(260px, 1.25fr)
    minmax(230px, 0.95fr)
    260px;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid;
  border-left: 4px solid var(--enquiry-status-color) !important;
  border-radius: 12px;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.055);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.enquiry-list-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.09);
}

.enquiry-list-identity,
.enquiry-list-description,
.enquiry-list-meta,
.enquiry-list-actions {
  min-width: 0;
}

.enquiry-list-identity {
  padding: 4px 14px 4px 2px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.enquiry-list-identity .ant-avatar {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #667eea, #764ba2);
  font-weight: 700;
}

.enquiry-list-identity > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.enquiry-list-identity > div > .ant-typography:first-child {
  overflow: hidden;
  color: #172033;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enquiry-list-identity .ant-typography-secondary {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enquiry-list-description,
.enquiry-list-meta,
.enquiry-list-actions {
  padding: 4px 14px;
  border-left: 1px solid #edf0f4;
}

.enquiry-list-description {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.enquiry-list-description > span {
  color: #8a94a3;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.enquiry-list-description > .ant-typography {
  overflow-wrap: anywhere;
  color: #344054;
  font-size: 11px;
  line-height: 1.5;
}

.enquiry-list-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.enquiry-list-meta > div:not(.enquiry-list-tags) {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.enquiry-list-meta > div:not(.enquiry-list-tags) > .anticon {
  margin-top: 2px;
  flex: 0 0 auto;
  color: #8a94a3;
}

.enquiry-list-meta > div:not(.enquiry-list-tags) .ant-typography {
  overflow-wrap: anywhere;
  font-size: 10px;
  line-height: 1.4;
}

.enquiry-list-tags {
  display: flex;
  gap: 5px;
}

.enquiry-list-tags .ant-tag {
  margin: 0;
  border-radius: 6px;
  font-size: 9px;
}

.enquiry-list-id {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid #dbe7fb;
  border-radius: 6px;
  background: #f4f8ff;
  color: #47617e;
  font-size: 9px;
  font-weight: 600;
}

.enquiry-list-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 7px;
}

.enquiry-list-actions .ant-btn {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding-inline: 8px;
  border-radius: 7px;
  font-size: 10px;
}

.enquiry-list-actions .ant-btn:first-child {
  border-color: #91caff;
  color: #1677ff;
}

.enquiries-pagination-bar {
  position: sticky;
  z-index: 20;
  bottom: 0;
  min-height: 46px;
  margin-top: 10px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e7eb;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
}

.enquiries-management-page.is-dark,
.enquiries-management-page.is-dark .enquiries-header,
.enquiries-management-page.is-dark .enquiries-toolbar {
  border-color: #30343b;
  background: #171717 !important;
}

.enquiries-management-page.is-dark .enquiries-heading h2 {
  color: #f3f4f6;
}

.enquiries-management-page.is-dark .enquiries-view-switch,
.enquiries-management-page.is-dark .enquiries-summary button {
  border-color: #343434;
  background: #222;
  color: #f3f4f6;
}

.enquiries-management-page.is-dark .enquiries-pagination-bar {
  border-color: #30343b;
  background: rgba(20, 20, 20, 0.94);
}

.enquiries-management-page.is-dark .enquiry-card {
  border-color: #30343b !important;
}

.enquiries-management-page.is-dark
  .enquiries-results.is-list
  .enquiry-card-details,
.enquiries-management-page.is-dark
  .enquiries-results.is-list
  .enquiry-card-actions {
  border-color: #30343b;
}

.enquiries-management-page.is-dark .enquiry-list-row,
.enquiries-management-page.is-dark .enquiry-list-description,
.enquiries-management-page.is-dark .enquiry-list-meta,
.enquiries-management-page.is-dark .enquiry-list-actions {
  border-color: #30343b;
}

.enquiries-management-page.is-dark
  .enquiry-list-identity
  > div
  > .ant-typography:first-child,
.enquiries-management-page.is-dark
  .enquiry-list-description
  > .ant-typography {
  color: #f3f4f6;
}

.enquiries-management-page.is-dark .enquiry-list-id {
  border-color: #34465e;
  background: #202a38;
  color: #b9d3f4;
}

@media (max-width: 1280px) {
  .enquiries-results.is-list .enquiry-card > .ant-card-body {
    grid-template-columns: minmax(0, 1fr) 160px 250px;
  }

  .enquiries-results.is-list .enquiry-card-main {
    grid-template-columns: minmax(180px, 0.75fr) minmax(230px, 1.25fr);
    gap: 12px;
  }

  .enquiry-list-row {
    grid-template-columns:
      minmax(180px, 0.75fr)
      minmax(240px, 1.25fr)
      minmax(220px, 1fr);
  }

  .enquiry-list-actions {
    grid-column: 1 / -1;
    padding: 9px 0 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf0f4;
    border-left: 0;
  }
}

@media (max-width: 1050px) {
  .enquiries-header,
  .enquiries-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .enquiries-search {
    flex: 1;
  }

  .enquiries-status-filter {
    width: 100%;
  }

  .enquiries-results.is-list .enquiry-card > .ant-card-body {
    grid-template-columns: minmax(0, 1fr) 160px;
    grid-template-rows: auto auto;
  }

  .enquiries-results.is-list .enquiry-card-actions {
    grid-column: 1 / -1;
    padding: 8px 0 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf0f4;
    border-left: 0;
  }

  .enquiry-list-row {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  }

  .enquiry-list-description {
    border-left: 1px solid #edf0f4;
  }

  .enquiry-list-meta {
    grid-column: 1 / -1;
    padding: 10px 2px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    border-top: 1px solid #edf0f4;
    border-left: 0;
  }

  .enquiry-list-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .enquiries-management-page {
    padding: 4px !important;
  }

  .enquiries-header {
    padding: 11px;
  }

  .enquiries-heading h2 {
    font-size: 20px;
    white-space: nowrap;
  }

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

  .enquiries-search {
    width: 100%;
    flex-basis: 100%;
  }

  .enquiries-header-actions > .ant-btn:last-child {
    flex: 1;
  }

  .enquiries-summary {
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    overflow-x: auto;
  }

  .enquiries-summary button {
    min-width: 82px;
    flex-direction: column;
    gap: 0;
  }

  .enquiries-results.is-list .enquiry-card > .ant-card-body {
    display: flex;
    min-height: 0;
  }

  .enquiries-results.is-list .enquiry-card-main {
    display: block;
  }

  .enquiries-results.is-list .enquiry-card-details {
    margin-top: 8px !important;
    padding: 8px 0 0;
    border-top: 1px solid #edf0f4;
    border-left: 0;
  }

  .enquiries-results.is-list .enquiry-card-id {
    margin-top: 2px !important;
  }

  .enquiries-results.is-list .enquiry-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px !important;
  }

  .enquiry-list-row {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .enquiry-list-identity,
  .enquiry-list-description,
  .enquiry-list-meta,
  .enquiry-list-actions {
    padding: 9px 2px;
    border-left: 0;
  }

  .enquiry-list-description,
  .enquiry-list-meta,
  .enquiry-list-actions {
    border-top: 1px solid #edf0f4;
  }

  .enquiry-list-meta {
    display: flex;
    align-items: stretch;
  }

  .enquiry-list-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enquiries-pagination-bar .ant-pagination-total-text {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ---- components/MarketingSection/marketing-workspace.css ---- */
.marketing-workspace {
  padding: 2px;
}

.marketing-workspace-header {
  min-height: 48px;
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marketing-workspace-header h3 {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}

.marketing-workspace-header .ant-btn {
  height: 38px;
  border-radius: 9px;
  font-weight: 600;
}

.marketing-item-card {
  border: 1px solid #e5e8ed !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.055) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

.marketing-item-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 42%, #e5e8ed) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.09) !important;
}

.marketing-item-card > .ant-card-body > div {
  padding: 14px !important;
  border-top-width: 3px !important;
}

.marketing-item-card .ant-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  font-size: 17px !important;
}

.marketing-item-card h5 {
  font-size: 15px !important;
}

.marketing-item-card .ant-btn {
  min-height: 32px;
  height: 34px !important;
  border-radius: 8px !important;
  font-size: 11px;
}

.marketing-route-card .ant-row {
  margin-bottom: 12px !important;
}

.marketing-route-card .ant-col > div {
  padding: 8px !important;
  border-radius: 8px !important;
}

.marketing-card-grid > .ant-col {
  display: flex;
}

.marketing-card-grid .marketing-item-card {
  width: 100%;
}

.marketing-management-page.is-dark .marketing-item-card {
  border-color: #30343b !important;
}

@media (max-width: 768px) {
  .marketing-workspace-header {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-workspace-header .ant-btn {
    width: 100%;
  }

  .marketing-item-card > .ant-card-body > div {
    padding: 12px !important;
  }
}

/* ---- components/MarketingSection/marketing.css ---- */
.marketing-management-page {
  min-height: 100%;
  padding: clamp(6px, 1vw, 14px);
  background: #f6f7f9;
}

.marketing-management-header {
  min-height: 76px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  border: 1px solid #e5e8ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.marketing-management-header h2 {
  margin: 0 0 3px !important;
  color: #111827;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
}

.marketing-management-header .ant-typography-secondary {
  color: #7d8796;
  font-size: 12px;
}

.marketing-management-content {
  margin-top: 10px;
  padding: 0 14px 14px;
  border: 1px solid #e5e8ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.marketing-tabs > .ant-tabs-nav {
  margin: 0 0 12px;
}

.marketing-tabs > .ant-tabs-nav::before {
  border-color: #edf0f4;
}

.marketing-tabs .ant-tabs-tab {
  min-width: 155px;
  margin: 0 !important;
  padding: 13px 16px;
  justify-content: center;
  font-weight: 600;
}

.marketing-tabs .ant-tabs-tab + .ant-tabs-tab {
  margin-left: 4px !important;
}

.marketing-tabs .ant-tabs-tab-btn span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.marketing-tabs .ant-tabs-tab-active {
  background: color-mix(in srgb, var(--app-primary) 9%, white);
}

.marketing-management-page.is-dark,
.marketing-management-page.is-dark .marketing-management-header,
.marketing-management-page.is-dark .marketing-management-content {
  border-color: #30343b;
  background: #171717;
}

.marketing-management-page.is-dark .marketing-management-header h2 {
  color: #f3f4f6;
}

.marketing-management-page.is-dark .marketing-tabs .ant-tabs-tab-active {
  background: color-mix(in srgb, var(--app-primary) 18%, #171717);
}

@media (max-width: 600px) {
  .marketing-management-page {
    padding: 4px;
  }

  .marketing-management-header {
    min-height: 66px;
    padding: 11px 12px;
  }

  .marketing-management-header h2 {
    font-size: 20px;
    white-space: nowrap;
  }

  .marketing-management-content {
    padding: 0 9px 10px;
  }

  .marketing-tabs .ant-tabs-tab {
    min-width: 0;
    flex: 1;
    padding-inline: 8px;
  }
}

/* ---- components/Setting/IntegrationManagement.css ---- */
.integration-page {
  padding: clamp(12px, 2vw, 24px);
  max-width: 1400px;
  margin: 0 auto;
}

.integration-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.integration-hero h2 {
  margin: 0 0 6px;
}

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

.integration-stat-card {
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.integration-stat-card strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  margin-top: 4px;
}

.integration-stat-card span {
  color: #64748b;
  font-size: 13px;
}

.integration-provider-grid {
  margin-top: 8px;
}

.integration-provider-card {
  height: 100%;
  border-radius: 14px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.integration-provider-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.integration-provider-card .provider-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.integration-provider-card .provider-desc {
  min-height: 48px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.integration-workflow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}

.integration-workflow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 13px;
}

.integration-workflow-step.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.integration-connection-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integration-error-text {
  display: block;
  max-width: 280px;
  color: #dc2626;
  font-size: 12px;
  line-height: 1.4;
}

.integration-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.integration-raw-json {
  margin: 0;
  padding: 12px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  overflow: auto;
  max-height: 240px;
}

.integration-explorer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

.integration-explorer-modal {
  top: 0;
  padding: 0;
  max-width: 100vw;
}

.integration-explorer-modal .ant-modal-content {
  min-height: 100vh;
  border-radius: 0;
}

.integration-explorer-modal .ant-modal-body {
  padding: 16px 20px 24px;
  max-height: calc(100vh - 72px);
  overflow: auto;
}

.integration-explorer-panel {
  min-height: calc(100vh - 180px);
}

.integration-explorer-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.integration-explorer-toolbar-card,
.integration-explorer-summary {
  margin-bottom: 16px;
}

.integration-explorer-table .ant-table-body {
  overflow: auto !important;
}

.integration-data-explorer .ant-drawer-body {
  padding-top: 12px;
}

.integration-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: #64748b;
}

/* ---- components/Setting/assets.css ---- */
.assets-management-page {
  min-height: 100%;
  padding: clamp(6px, 1vw, 14px);
  background: #f6f7f9;
}

.assets-management-header,
.assets-statistics {
  border: 1px solid #e5e8ed;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.assets-management-header {
  min-height: 78px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 14px;
}

.assets-heading,
.assets-title-row,
.assets-header-actions {
  display: flex;
  align-items: center;
}

.assets-heading {
  gap: 11px;
}

.assets-back-button {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 9px;
}

.assets-title-row {
  gap: 8px;
}

.assets-title-row h2 {
  margin: 0 !important;
  color: #111827;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
}

.assets-title-row span {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 15%, white);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
}

.assets-heading .ant-typography-secondary {
  color: #7d8796;
  font-size: 12px;
}

.assets-header-actions {
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
}

.assets-search {
  width: min(580px, 100%);
  height: 40px;
  border-radius: 9px;
}

.assets-header-actions .ant-btn {
  height: 40px;
  border-radius: 9px;
  font-weight: 600;
}

.assets-statistics {
  margin: 10px 0 12px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  border-radius: 12px;
}

.asset-stat {
  min-height: 52px;
  padding: 7px 11px;
  display: grid;
  grid-template-columns: 30px auto 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid #e7e9ed;
  border-radius: 9px;
  background: #f8f9fb;
}

.asset-stat > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: var(--app-primary);
  font-size: 15px;
}

.asset-stat strong {
  color: #172033;
  font-size: 18px;
}

.asset-stat small {
  color: #6f7a8b;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.asset-stat-available > span {
  color: #16a34a;
}

.asset-stat-unavailable > span {
  color: #ef4444;
}

.asset-stat-stock > span {
  color: #7c3aed;
}

.assets-grid > .ant-col {
  display: flex;
}

.asset-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e5e8ed !important;
  border-radius: 13px !important;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.055) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

.asset-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 40%, #e5e8ed) !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.09) !important;
}

.asset-card > .ant-card-body {
  height: 100%;
  padding: 0 !important;
}

.asset-card-layout {
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-rows: 128px minmax(0, 1fr);
}

.asset-card-media {
  position: relative;
  width: 100%;
  height: 128px;
  min-height: 0;
  overflow: hidden;
  background: #f4f6f8;
}

.asset-card-media .ant-image {
  display: block;
  width: 100%;
  height: 100%;
}

.asset-card-media .ant-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-card-media.is-placeholder .ant-image-img {
  padding: 8px 12px;
  object-fit: contain;
}

.asset-type-icon {
  position: absolute;
  bottom: 9px;
  left: 9px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--app-primary);
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
}

.asset-card-content {
  min-width: 0;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
}

.asset-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.asset-card-title > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asset-card-title > div > .ant-typography:first-child {
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-title .ant-typography-secondary {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-title > .ant-tag {
  margin: 0;
  flex: 0 0 auto;
  font-size: 9px;
}

.asset-card-tags {
  margin-top: 8px;
  display: flex;
  gap: 5px;
}

.asset-card-tags .ant-tag {
  max-width: 50%;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-description {
  min-height: 29px;
  margin-top: 7px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.asset-stock {
  margin-top: 7px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 7px;
  background: #f7f8fa;
}

.asset-stock .ant-typography {
  font-size: 10px;
}

.asset-stock strong {
  color: #172033;
  font-size: 15px;
}

.asset-card-footer {
  margin-top: auto;
  padding-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #edf0f4;
}

.asset-card-footer > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.asset-card-footer > div:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.asset-card-footer > div:last-child {
  justify-content: flex-end;
}

.asset-card-footer .ant-typography {
  font-size: 10px;
  white-space: nowrap;
}

.asset-card-footer .ant-btn {
  height: 29px;
  padding-inline: 8px;
  border-radius: 7px;
  font-size: 10px;
}

.assets-loading {
  min-height: 280px;
  display: grid;
  place-items: center;
}

.assets-empty {
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dashed #d9dee7;
  border-radius: 13px;
  background: #fff;
}

.assets-empty img {
  width: min(260px, 70vw);
  max-height: 170px;
  object-fit: contain;
}

.assets-empty h4 {
  margin: 6px 0 2px !important;
}

.asset-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.asset-modal-title > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-primary) 12%, white);
  color: var(--app-primary);
}

.asset-modal-title > div {
  display: flex;
  flex-direction: column;
}

.asset-modal-title small {
  color: #7d8796;
  font-size: 10px;
  font-weight: 400;
}

.asset-form-modal .ant-modal-content {
  overflow: hidden;
  border-radius: 14px;
}

.asset-form-modal .ant-modal-body {
  padding-top: 14px;
}

.asset-form-section-label {
  margin-bottom: 11px;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.asset-form .ant-form-item {
  margin-bottom: 14px;
}

.asset-form .ant-input,
.asset-form .ant-select-selector,
.asset-form .ant-input-group-addon {
  border-radius: 8px;
}

.asset-image-upload {
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  border: 1px dashed #cfd6df;
  border-radius: 10px;
  background: #f8fafc;
}

.asset-image-upload img {
  width: 100%;
  height: 124px;
  object-fit: cover;
  border-radius: 8px;
}

.asset-image-upload .ant-btn {
  width: 100%;
  border-radius: 8px;
}

.asset-image-upload .ant-typography {
  font-size: 9px;
}

.assets-management-page.is-dark,
.assets-management-page.is-dark .assets-management-header,
.assets-management-page.is-dark .assets-statistics,
.assets-management-page.is-dark .assets-empty {
  border-color: #30343b;
  background: #171717;
}

.assets-management-page.is-dark .assets-title-row h2,
.assets-management-page.is-dark .asset-card-title > div > .ant-typography:first-child,
.assets-management-page.is-dark .asset-stock strong {
  color: #f3f4f6;
}

.assets-management-page.is-dark .asset-stat,
.assets-management-page.is-dark .asset-stock {
  border-color: #30343b;
  background: #222;
}

.assets-management-page.is-dark .asset-stat > span {
  background: #292929;
}

.assets-management-page.is-dark .asset-stat strong {
  color: #f3f4f6;
}

.assets-management-page.is-dark .asset-card {
  border-color: #30343b !important;
  background: #1f1f1f !important;
}

@media (max-width: 1050px) {
  .assets-management-header {
    align-items: stretch;
    flex-direction: column;
  }

  .assets-search {
    flex: 1;
  }

  .assets-statistics {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }
}

@media (max-width: 600px) {
  .assets-management-page {
    padding: 4px;
  }

  .assets-management-header {
    padding: 11px;
  }

  .assets-title-row h2 {
    font-size: 20px;
    white-space: nowrap;
  }

  .assets-heading .ant-typography-secondary {
    display: none;
  }

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

  .assets-search {
    width: 100%;
    flex-basis: 100%;
  }

  .assets-header-actions .ant-btn {
    width: 100%;
  }

  .asset-card-layout {
    grid-template-rows: 118px minmax(0, 1fr);
  }

  .asset-card-media {
    height: 118px;
  }

  .asset-card-footer .ant-btn {
    padding-inline: 7px;
  }
}

/* ---- components/Setting/settings.css ---- */
.settings-management-page {
  min-height: 100%;
  padding: clamp(6px, 1vw, 14px);
  color: #111827;
  background: #f6f7f9;
}

.settings-management-header {
  min-height: 78px;
  margin-bottom: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #e5e8ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.settings-heading,
.settings-title-row {
  display: flex;
  align-items: center;
}

.settings-heading {
  gap: 11px;
}

.settings-title-icon,
.settings-card-icon {
  display: grid;
  place-items: center;
}

.settings-title-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: color-mix(in srgb, var(--app-primary) 12%, white);
  color: var(--app-primary);
  font-size: 21px;
}

.settings-title-row {
  gap: 8px;
}

.settings-title-row h2 {
  margin: 0 !important;
  color: #111827;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
}

.settings-title-row span {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 15%, white);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
}

.settings-heading .ant-typography-secondary {
  color: #7d8796;
  font-size: 12px;
}

.settings-search {
  width: min(520px, 45vw);
  height: 40px;
  border-radius: 9px;
}

.settings-grid > .ant-col {
  display: flex;
}

.settings-card {
  width: 100%;
  min-height: 104px;
  border: 1px solid #e5e8ed !important;
  border-left-width: 3px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.045);
}

.settings-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.09);
}

.settings-card > .ant-card-body {
  padding: 14px !important;
}

.settings-card-content {
  height: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  text-align: left;
}

.settings-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.settings-card-icon .anticon {
  font-size: 20px !important;
}

.settings-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.settings-card-copy > .ant-typography:first-child {
  overflow: hidden;
  color: #1c2534;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-card-copy .ant-typography-secondary {
  display: -webkit-box;
  overflow: hidden;
  color: #7d8796;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.settings-card-arrow {
  color: #a1a9b5;
  transition: transform 0.18s ease, color 0.18s ease;
}

.settings-card:hover .settings-card-arrow {
  color: var(--app-primary);
  transform: translateX(2px);
}

.settings-empty {
  padding: 60px 20px;
  text-align: center;
  color: #7d8796;
}

.settings-footer {
  margin-top: 18px;
  padding: 10px 2px 2px;
  display: flex;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid #e5e8ed;
  font-size: 11px;
}

.settings-management-page.is-dark,
.settings-management-page.is-dark .settings-management-header {
  border-color: #30343b;
  background: #171717;
}

.settings-management-page.is-dark .settings-title-row h2,
.settings-management-page.is-dark
  .settings-card-copy
  > .ant-typography:first-child {
  color: #f3f4f6;
}

.settings-management-page.is-dark .settings-title-icon {
  background: color-mix(in srgb, var(--app-primary) 20%, #171717);
}

.settings-management-page.is-dark .settings-card {
  border-color: #30343b !important;
  background: #1f1f1f !important;
}

.settings-management-page.is-dark .settings-footer {
  border-color: #30343b;
}

@media (max-width: 768px) {
  .settings-management-page {
    padding: 4px;
  }

  .settings-management-header {
    padding: 11px;
    align-items: stretch;
    flex-direction: column;
  }

  .settings-title-row h2 {
    font-size: 20px;
  }

  .settings-search {
    width: 100%;
  }
}

/* ---- components/feedbackandsuggestions/feedback.css ---- */
.feedback-management-page {
  min-height: 100%;
  padding: clamp(6px, 1vw, 14px);
}

.feedback-management-header,
.feedback-toolbar {
  border: 1px solid #e5e8ed;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.feedback-management-header {
  min-height: 78px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 14px;
}

.feedback-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feedback-heading h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
}

.feedback-heading span {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 15%, white);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
}

.feedback-heading p {
  margin: 4px 0 0;
  color: #7d8796;
  font-size: 12px;
}

.feedback-header-actions {
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-search {
  width: min(620px, 100%);
  height: 40px;
  border-radius: 9px;
}

.feedback-header-actions .ant-btn {
  height: 40px;
  border-radius: 9px;
}

.feedback-view-switch {
  padding: 3px;
  display: flex;
  gap: 2px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #f7f8fa;
}

.feedback-view-switch .ant-btn {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.feedback-refresh-button {
  width: 40px;
  padding: 0;
}

.feedback-toolbar {
  margin: 10px 0 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
}

.feedback-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 7px;
}

.feedback-summary button {
  min-height: 44px;
  padding: 5px 9px;
  display: grid;
  grid-template-columns: 20px auto auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e7e9ed;
  border-radius: 9px;
  background: #f8f9fb;
  color: #243044;
  cursor: pointer;
}

.feedback-summary button.is-active {
  border-color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 12%, white);
}

.feedback-summary strong {
  font-size: 17px;
}

.feedback-summary small {
  color: #6f7a8b;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.feedback-filters {
  display: flex;
  gap: 8px;
}

.feedback-filters .ant-select {
  width: 145px;
}

.feedback-filters .ant-select-selector {
  min-height: 37px !important;
  border-radius: 8px !important;
}

.feedback-results-area {
  min-height: calc(100dvh - 290px);
  padding-bottom: 54px;
}

.feedback-results > .ant-col {
  display: flex;
}

.feedback-card {
  width: 100%;
  min-height: 314px;
  flex: 1;
  overflow: hidden;
  border-color: #e6e9ee !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  transition: border-color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.feedback-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 42%, #e6e9ee) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.09) !important;
}

.feedback-card-content {
  min-height: 0;
  padding: 14px !important;
}

.feedback-accent {
  height: 3px !important;
}

.feedback-type-badge {
  top: 10px !important;
  right: 11px !important;
}

.feedback-user {
  min-width: 0;
  margin: 0 82px 9px 0 !important;
  padding-bottom: 9px !important;
}

.feedback-user .ant-avatar {
  flex: 0 0 auto;
}

.feedback-subject {
  min-width: 0;
  margin-bottom: 7px !important;
}

.feedback-message {
  min-width: 0;
  margin-bottom: 8px !important;
  padding: 9px !important;
  background: #f8fafc !important;
  border-color: #edf0f4 !important;
}

.feedback-attachments,
.feedback-admin-response {
  min-width: 0;
  margin-bottom: 8px !important;
  padding: 8px !important;
}

.feedback-card-footer {
  min-width: 0;
  padding-top: 8px !important;
}

.feedback-card-meta {
  gap: 8px;
  margin-bottom: 8px !important;
}

.feedback-card-actions {
  display: grid !important;
  grid-template-columns: 1.15fr repeat(3, auto);
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.feedback-card-actions .ant-btn {
  min-width: 0 !important;
  min-height: 28px;
  padding-inline: 9px;
  font-size: 10px;
}

.feedback-results.is-list .feedback-card {
  min-height: 156px;
}

.feedback-results.is-list .feedback-card-content {
  display: grid !important;
  grid-template-columns:
    minmax(185px, 0.72fr)
    minmax(165px, 0.68fr)
    minmax(250px, 1.25fr)
    minmax(270px, 0.95fr);
  grid-template-rows: auto auto auto;
  gap: 7px 16px;
  align-items: start;
}

.feedback-results.is-list .feedback-user {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0 !important;
  padding: 4px 14px 4px 0 !important;
  align-self: stretch;
  align-items: flex-start !important;
  border-right: 1px solid #edf0f4;
  border-bottom: 0 !important;
}

.feedback-results.is-list .feedback-subject {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  padding-top: 4px;
}

.feedback-results.is-list .feedback-message {
  grid-column: 3;
  grid-row: 1 / 4;
  min-height: 98px;
  margin: 0 !important;
}

.feedback-results.is-list .feedback-attachments {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
}

.feedback-results.is-list .feedback-admin-response {
  grid-column: 2;
  grid-row: 3;
  margin: 0 !important;
}

.feedback-results.is-list .feedback-card-footer {
  grid-column: 4;
  grid-row: 1 / 4;
  height: 100%;
  margin: 0 !important;
  padding: 3px 0 3px 16px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 0 !important;
  border-left: 1px solid #edf0f4;
}

.feedback-results.is-list .feedback-card-meta {
  align-items: flex-start !important;
  flex-direction: column;
}

.feedback-results.is-list .feedback-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feedback-results.is-list .feedback-card-actions .ant-btn {
  width: 100%;
}

.feedback-results.is-list .feedback-type-badge {
  top: 9px !important;
  right: 12px !important;
}

.feedback-pagination-bar {
  position: sticky;
  z-index: 20;
  bottom: 0;
  min-height: 46px;
  margin-top: -46px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e7eb;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
}

.feedback-pagination-bar:empty {
  display: none;
}

.feedback-management-page.is-dark .feedback-management-header,
.feedback-management-page.is-dark .feedback-toolbar {
  border-color: #303030;
  background: #171717;
}

.feedback-management-page.is-dark .feedback-heading h1 {
  color: #f3f4f6;
}

.feedback-management-page.is-dark .feedback-view-switch,
.feedback-management-page.is-dark .feedback-summary button {
  border-color: #343434;
  background: #222;
  color: #f3f4f6;
}

.feedback-management-page.is-dark .feedback-card {
  border-color: #30343b !important;
}

.feedback-management-page.is-dark .feedback-message {
  background: #1e2024 !important;
  border-color: #30343b !important;
}

.feedback-management-page.is-dark
  .feedback-results.is-list
  .feedback-user {
  border-right-color: #30343b;
}

.feedback-management-page.is-dark
  .feedback-results.is-list
  .feedback-card-footer {
  border-left-color: #30343b;
}

.feedback-management-page.is-dark .feedback-pagination-bar {
  border-color: #303030;
  background: rgba(20, 20, 20, 0.94);
}

@media (max-width: 1280px) {
  .feedback-results.is-list .feedback-card-content {
    grid-template-columns: minmax(180px, 0.75fr) minmax(180px, 0.75fr) minmax(
        260px,
        1.3fr
      );
  }

  .feedback-results.is-list .feedback-message {
    grid-column: 3;
  }

  .feedback-results.is-list .feedback-card-footer {
    grid-column: 1 / -1;
    grid-row: 4;
    height: auto;
    padding: 9px 0 0 !important;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(360px, auto);
    align-items: center;
    gap: 12px;
    border-top: 1px solid #edf0f4 !important;
    border-left: 0;
  }

  .feedback-results.is-list .feedback-card-meta {
    margin: 0 !important;
    align-items: center !important;
    flex-direction: row;
  }

  .feedback-results.is-list .feedback-card-actions {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
  }

  .feedback-management-page.is-dark
    .feedback-results.is-list
    .feedback-card-footer {
    border-top-color: #30343b !important;
  }
}

@media (max-width: 1050px) {
  .feedback-management-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .feedback-header-actions {
    justify-content: stretch;
  }

  .feedback-search {
    flex: 1;
  }

  .feedback-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .feedback-filters {
    justify-content: flex-end;
  }

  .feedback-results.is-list .feedback-card-content {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto auto auto;
  }

  .feedback-results.is-list .feedback-user {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 9px !important;
    border-right: 0;
    border-bottom: 1px solid #edf0f4 !important;
  }

  .feedback-results.is-list .feedback-subject {
    grid-column: 2;
    grid-row: 1;
  }

  .feedback-results.is-list .feedback-message {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
  }

  .feedback-results.is-list .feedback-attachments {
    grid-column: 1;
    grid-row: 3;
  }

  .feedback-results.is-list .feedback-admin-response {
    grid-column: 2;
    grid-row: 3;
  }

  .feedback-results.is-list .feedback-card-footer {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

@media (max-width: 768px) {
  .feedback-management-page {
    padding: 4px;
  }

  .feedback-management-header {
    padding: 11px;
  }

  .feedback-heading h1 {
    font-size: 20px;
    white-space: nowrap;
  }

  .feedback-summary {
    grid-template-columns: repeat(4, minmax(80px, 1fr));
    overflow-x: auto;
  }

  .feedback-summary button {
    min-width: 80px;
    grid-template-columns: 1fr 1fr;
  }

  .feedback-summary small {
    grid-column: 1 / -1;
  }

  .feedback-filters .ant-select {
    flex: 1;
    width: auto;
  }

  .feedback-results.is-list .feedback-card-content {
    display: flex !important;
  }

  .feedback-card-content {
    padding: 12px !important;
  }

  .feedback-results.is-list .feedback-card {
    min-height: 0;
  }

  .feedback-results.is-list .feedback-user {
    margin-right: 74px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid #edf0f4 !important;
  }

  .feedback-results.is-list .feedback-card-footer {
    padding-top: 8px !important;
    display: flex;
  }

  .feedback-results.is-list .feedback-card-meta {
    margin-bottom: 8px !important;
  }

  .feedback-card-actions,
  .feedback-results.is-list .feedback-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-card-actions .ant-btn {
    width: 100%;
  }

  .feedback-pagination-bar .ant-pagination-total-text {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ---- components/hrm/HrmManagement.css ---- */
.hrm-page {
  position: relative;
  min-height: 100%;
  padding: clamp(8px, 1.2vw, 18px);
  max-width: 1440px;
  margin: 0 auto;
}

.hrm-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid #e8ebef;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.05);
}

.hrm-page-heading {
  min-width: 240px;
}

.hrm-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hrm-title-row h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  font-weight: 700;
}

.hrm-title-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, #0d9488 14%, white);
  color: #0d9488;
  font-size: 20px;
}

.hrm-page-heading p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  max-width: 680px;
  line-height: 1.5;
}

.hrm-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.hrm-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e8ebef;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  min-width: 0;
}

.hrm-stat-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  font-size: 18px;
}

.hrm-stat-card--teal .hrm-stat-card__icon {
  background: rgba(13, 148, 136, 0.12);
  color: #0d9488;
}

.hrm-stat-card--blue .hrm-stat-card__icon {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.hrm-stat-card--amber .hrm-stat-card__icon {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}

.hrm-stat-card--rose .hrm-stat-card__icon {
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}

.hrm-stat-card--violet .hrm-stat-card__icon {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

.hrm-stat-card__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
}

.hrm-stat-card__label {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}

.hrm-tabs-card {
  border-radius: 14px !important;
  border: 1px solid #e8ebef !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden;
}

.hrm-tabs-card .ant-tabs-nav {
  margin-bottom: 0 !important;
  padding: 8px 12px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e8ebef;
}

.hrm-tabs-card .ant-tabs-tab {
  padding: 10px 14px !important;
  border-radius: 10px 10px 0 0 !important;
}

.hrm-tabs-card .ant-tabs-content-holder {
  padding: 16px 18px 18px;
}

.hrm-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  background: #fbfcfd;
}

.hrm-toolbar__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-width: 520px;
}

.hrm-toolbar__actions {
  justify-content: flex-end;
}

.hrm-toolbar__actions .ant-btn,
.hrm-toolbar__actions .ant-input-search {
  border-radius: 10px;
}

.hrm-section-card {
  border-radius: 12px !important;
  border: 1px solid #eef2f6 !important;
}

.hrm-section-card .ant-card-head {
  min-height: 44px;
  border-bottom: 1px solid #eef2f6;
}

.hrm-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 992px) {
  .hrm-overview-grid {
    grid-template-columns: 1fr;
  }
}

.hrm-progress-wrap {
  margin-top: 4px;
}

.hrm-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.hrm-quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.hrm-quick-action:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #0d9488 40%, #e8ebef);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.hrm-quick-action__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
  font-size: 16px;
}

.hrm-quick-action__label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.hrm-quick-action__hint {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

.hrm-employee-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hrm-employee-cell__meta {
  min-width: 0;
}

.hrm-employee-cell__meta .ant-typography {
  display: block;
}

.hrm-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.hrm-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.hrm-summary-chip strong {
  color: #0f172a;
}

.hrm-form-section-title {
  margin: 4px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eef2f6;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hrm-table-wrap .ant-table {
  border-radius: 10px;
  overflow: hidden;
}

.hrm-table-wrap .ant-table-thead > tr > th {
  background: #f8fafc !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b !important;
}

.hrm-empty-panel {
  padding: 28px 16px;
  text-align: center;
}

.hrm-page.is-dark .hrm-page-header,
.hrm-page.is-dark .hrm-stat-card,
.hrm-page.is-dark .hrm-toolbar,
.hrm-page.is-dark .hrm-quick-action,
.hrm-page.is-dark .hrm-section-card {
  background: #1f1f1f;
  border-color: #303030;
}

.hrm-page.is-dark .hrm-title-row h1,
.hrm-page.is-dark .hrm-stat-card__value,
.hrm-page.is-dark .hrm-quick-action__label {
  color: #f5f5f5;
}

.hrm-page.is-dark .hrm-page-heading p,
.hrm-page.is-dark .hrm-stat-card__label,
.hrm-page.is-dark .hrm-quick-action__hint {
  color: #a3a3a3;
}

.hrm-page.is-dark .hrm-tabs-card {
  background: #141414 !important;
  border-color: #303030 !important;
}

.hrm-page.is-dark .hrm-tabs-card .ant-tabs-nav {
  background: #1a1a1a;
  border-bottom-color: #303030;
}

.hrm-page.is-dark .hrm-summary-chip {
  background: #262626;
  color: #d4d4d4;
}

.hrm-page.is-dark .hrm-summary-chip strong {
  color: #fafafa;
}

.hrm-page.is-dark .hrm-form-section-title {
  border-bottom-color: #303030;
  color: #d4d4d4;
}

.hrm-page.is-dark .hrm-table-wrap .ant-table-thead > tr > th {
  background: #1a1a1a !important;
  color: #a3a3a3 !important;
}

/* ---- components/leave/LeaveDetails.css ---- */
.leave-history-container {
    padding: 20px;
    max-width: 600px;
    margin: auto;
}

.leave-history-header {
    text-align: center;
    margin-bottom: 20px;
}

.leave-history-card {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.leave-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

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

.days-badge {
    background-color: #f5f5f5;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.leave-details-body p {
    margin-bottom: 12px;
}
/* ---- components/leave/LeaveManagement.css ---- */
/* Compact ERP-style leave management */
.leave-management-page {
  position: relative;
  min-height: 100%;
  padding: clamp(6px, 1vw, 14px);
}

.leave-page-header,
.leave-statistics-panel,
.leave-filter-panel {
  border: 1px solid #e8ebef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.leave-page-header {
  min-height: 82px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.leave-page-heading {
  min-width: 230px;
}

.leave-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.leave-title-row h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  font-weight: 700;
}

.leave-total-badge {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 15%, white);
  color: var(--app-primary);
  font-size: 12px;
  font-weight: 700;
}

.leave-page-heading p {
  margin: 5px 0 0;
  color: #7a8495;
  font-size: 13px;
}

.leave-header-tools {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.leave-search {
  width: min(620px, 100%);
  height: 42px;
  border-radius: 10px;
}

.leave-header-tools .ant-btn {
  height: 42px;
  border-radius: 10px;
}

.leave-view-switch {
  display: flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f7f8fa;
}

.leave-view-switch .ant-btn {
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.leave-overview-row {
  align-items: flex-start;
}

.leave-overview-row > .ant-col {
  display: block;
}

.leave-statistics-panel,
.leave-filter-panel {
  width: 100%;
  height: auto !important;
}

.leave-statistics-panel .ant-card-body {
  padding: 9px 10px !important;
}

.leave-statistics-panel .statistics-panel-header {
  min-height: 0;
  margin-bottom: 5px !important;
  padding-bottom: 0 !important;
}

.leave-statistics-panel .statistics-panel-title,
.leave-filter-title {
  color: #1f2937;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.leave-statistics-panel .statistics-panel-title {
  font-size: 10px !important;
  line-height: 1 !important;
}

.leave-statistics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.leave-statistics-grid .statistics-tile {
  min-height: 48px !important;
  height: 48px !important;
  padding: 5px 8px;
  display: grid !important;
  grid-template-columns: 26px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 6px;
  border-radius: 8px;
  justify-content: stretch !important;
  text-align: left !important;
}

.leave-statistics-grid .statistics-tile > div:first-child {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  margin: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
}

.leave-statistics-grid .statistics-tile-value {
  align-self: end;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1;
  font-weight: 700;
}

.leave-statistics-grid .statistics-tile-label {
  align-self: start;
  margin: 2px 0 0 !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

.leave-filter-panel .ant-card-body {
  padding: 10px !important;
}

.leave-filter-title {
  margin-bottom: 7px;
}

.leave-filter-controls {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) repeat(2, minmax(125px, 1fr));
  gap: 7px;
}

.leave-filter-panel .ant-select,
.leave-filter-panel .ant-input {
  width: 100%;
}

.leave-filter-panel .ant-select-selector,
.leave-filter-panel .ant-input {
  min-height: 34px !important;
  border-radius: 8px !important;
}

.leave-filter-panel input[type="date"] {
  min-width: 0;
}

.leave-results {
  min-height: calc(100vh - 330px);
  margin-top: 12px;
  padding-bottom: 58px;
}

.leave-request-card {
  overflow: hidden;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.leave-request-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--app-primary) 45%, #d9d9d9);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.09) !important;
}

.leave-request-card .ant-btn {
  min-height: 28px;
  border-radius: 7px;
}

.leave-results.is-list .ant-row {
  row-gap: 8px !important;
}

.leave-results.is-list .leave-request-card .ant-card-body {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(320px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px !important;
}

.leave-results.is-list .leave-request-card .ant-card-body > div {
  min-width: 0;
  margin-bottom: 0 !important;
}

.leave-results.is-list
  .leave-request-card
  .ant-card-body
  > div:nth-child(2) {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(100px, 0.55fr) minmax(
      160px,
      1fr
    );
  align-items: center;
  gap: 10px;
}

.leave-results.is-list
  .leave-request-card
  .ant-card-body
  > div:nth-child(2)
  > div {
  min-width: 0;
  margin: 0 !important;
}

.leave-results.is-list
  .leave-request-card
  .ant-card-body
  > div:nth-child(2)
  .ant-typography {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-results.is-list
  .leave-request-card
  .ant-card-body
  > div:last-child {
  justify-content: flex-end !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  flex-wrap: nowrap !important;
}

.leave-management-page.is-dark .leave-view-switch {
  border-color: #303030;
  background: #202020;
}

.leave-pagination-bar {
  position: sticky;
  z-index: 20;
  bottom: 0;
  min-height: 48px;
  margin-top: -48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e7eb;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
}

.leave-pagination-bar:empty {
  display: none;
}

.leave-management-page.is-dark .leave-page-header,
.leave-management-page.is-dark .leave-statistics-panel,
.leave-management-page.is-dark .leave-filter-panel {
  border-color: #303030;
  background: #171717;
}

.leave-management-page.is-dark .leave-title-row h1,
.leave-management-page.is-dark .leave-filter-title {
  color: #f3f4f6;
}

.leave-management-page.is-dark .leave-pagination-bar {
  border-color: #303030;
  background: rgba(20, 20, 20, 0.94);
}

@media (max-width: 1100px) {
  .leave-statistics-grid {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .leave-filter-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .leave-results.is-list .leave-request-card .ant-card-body {
    grid-template-columns: minmax(200px, 0.8fr) 1.2fr;
  }

  .leave-results.is-list
    .leave-request-card
    .ant-card-body
    > div:last-child {
    grid-column: 1 / -1;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
  }
}

@media (max-width: 768px) {
  .leave-management-page {
    padding: 4px;
  }

  .leave-page-header {
    min-height: 0;
    padding: 12px;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .leave-title-row h1 {
    font-size: 21px;
    white-space: nowrap;
  }

  .leave-page-heading p {
    font-size: 12px;
  }

  .leave-header-tools {
    width: 100%;
  }

  .leave-header-tools .ant-btn {
    width: 42px;
    padding-inline: 0;
    font-size: 0;
  }

  .leave-header-tools .ant-btn .anticon {
    margin: 0;
    font-size: 15px;
  }

  .leave-view-switch {
    flex: 0 0 auto;
  }

  .leave-view-switch .ant-btn {
    width: 34px;
  }

  .leave-statistics-grid {
    grid-template-columns: repeat(5, 112px);
  }

  .leave-results {
    min-height: calc(100vh - 390px);
  }

  .leave-filter-controls {
    grid-template-columns: 1fr 1fr;
  }

  .leave-filter-controls .leave-status-select {
    grid-column: 1 / -1;
  }

  .leave-results.is-list .leave-request-card .ant-card-body {
    display: block;
    padding: 12px !important;
  }

  .leave-results.is-list
    .leave-request-card
    .ant-card-body
    > div:nth-child(2) {
    display: block;
    margin: 10px 0 !important;
  }

  .leave-results.is-list
    .leave-request-card
    .ant-card-body
    > div:nth-child(2)
    > div {
    margin-bottom: 7px !important;
  }

  .leave-results.is-list
    .leave-request-card
    .ant-card-body
    > div:last-child {
    padding-top: 9px !important;
    flex-wrap: wrap !important;
  }

  .leave-pagination-bar .ant-pagination-total-text {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .leave-title-row h1 {
    font-size: 19px;
  }

  .leave-total-badge {
    font-size: 10px;
  }
}

/* ---- components/news/news.css ---- */
.news-events-page {
  min-height: 100%;
  padding: clamp(6px, 1vw, 14px) !important;
}

.news-events-shell {
  max-width: 1500px;
  margin: 0 auto;
}

.news-management-header,
.news-toolbar {
  border: 1px solid #e5e8ed;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.news-management-header {
  min-height: 78px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 14px;
}

.news-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.news-heading h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
}

.news-heading p {
  margin: 4px 0 0;
  color: #7d8796;
  font-size: 12px;
}

.news-total-badge {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 15%, white);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
}

.news-header-actions {
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.news-header-actions .ant-btn,
.news-search {
  height: 40px;
  border-radius: 9px;
}

.news-search {
  width: min(520px, 100%);
}

.news-view-switch {
  padding: 3px;
  display: flex;
  gap: 2px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #f7f8fa;
}

.news-view-switch .ant-btn {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.news-refresh-button {
  width: 40px;
  padding: 0;
}

.news-toolbar {
  margin: 10px 0 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
}

.news-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(85px, 1fr));
  gap: 7px;
}

.news-summary > button,
.news-summary > div {
  min-height: 44px;
  padding: 5px 10px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e7e9ed;
  border-radius: 9px;
  background: #f8f9fb;
  color: #243044;
}

.news-summary > button {
  cursor: pointer;
}

.news-summary > button.is-active {
  border-color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 12%, white);
}

.news-summary span {
  font-size: 18px;
  font-weight: 750;
}

.news-summary small {
  color: #6f7a8b;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.news-filters {
  display: flex;
  gap: 8px;
}

.news-filters .ant-select {
  width: 145px;
}

.news-filters .ant-select-selector {
  min-height: 38px !important;
  border-radius: 9px !important;
}

.news-results {
  min-height: calc(100dvh - 300px);
  padding-bottom: 56px;
}

.news-results > .ant-col {
  display: flex;
}

.news-event-card {
  width: 100%;
  flex: 1;
  height: auto !important;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.news-event-card.is-expanded {
  height: auto !important;
}

.news-event-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.1) !important;
}

.news-event-card .ant-card-cover > div {
  height: 145px !important;
}

.news-event-card .ant-card-cover img {
  border-radius: 12px 12px 0 0 !important;
}

.news-event-card .ant-card-body > div {
  padding: 12px !important;
}

.news-event-card .ant-card-body .ant-typography {
  margin-bottom: 6px !important;
}

.news-event-card .ant-card-body .ant-space {
  margin-bottom: 8px !important;
}

.news-event-card .ant-card-cover .ant-tag {
  padding: 2px 8px !important;
  font-size: 9px;
}

.news-event-card .ant-btn {
  min-height: 28px;
  border-radius: 7px !important;
  font-size: 10px;
}

.news-results.is-list > .ant-col {
  max-width: 100%;
}

.news-results.is-list .news-event-card {
  height: auto !important;
  min-height: 218px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
}

.news-results.is-list .news-event-card.is-expanded {
  height: auto !important;
  min-height: 218px;
}

.news-results.is-list .news-event-card .ant-card-cover,
.news-results.is-list .news-event-card .ant-card-cover > div,
.news-results.is-list .news-event-card .ant-card-cover img {
  width: 210px;
  height: 100% !important;
  border-radius: 12px 0 0 12px !important;
}

.news-results.is-list .news-event-card .ant-card-body {
  min-width: 0;
}

.news-event-card .ant-card-body {
  min-height: 0;
  flex: 1;
  display: flex;
}

.news-event-card .ant-card-body > div {
  width: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-event-card .ant-card-body > div > div:last-child {
  margin-top: auto;
  padding-top: 8px;
}

.news-pagination-bar {
  position: sticky;
  z-index: 20;
  bottom: 0;
  min-height: 46px;
  margin-top: -46px;
  padding: 7px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
}

.news-empty-alert {
  margin-bottom: 12px;
  border-radius: 10px;
}

.news-events-page.is-dark .news-management-header,
.news-events-page.is-dark .news-toolbar {
  border-color: #303030;
  background: #171717;
}

.news-events-page.is-dark .news-heading h1 {
  color: #f3f4f6;
}

.news-events-page.is-dark .news-view-switch,
.news-events-page.is-dark .news-summary > button,
.news-events-page.is-dark .news-summary > div {
  border-color: #343434;
  background: #222;
  color: #f3f4f6;
}

.news-events-page.is-dark .news-summary > button.is-active {
  border-color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 18%, #171717);
}

.news-events-page.is-dark .news-pagination-bar {
  border-color: #303030;
  background: rgba(20, 20, 20, 0.94);
}

@media (max-width: 1000px) {
  .news-management-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .news-header-actions {
    justify-content: stretch;
  }

  .news-search {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .news-events-page {
    padding: 4px !important;
  }

  .news-management-header {
    padding: 11px;
  }

  .news-heading h1 {
    font-size: 21px;
    white-space: nowrap;
  }

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

  .news-search {
    width: 100%;
    flex-basis: 100%;
  }

  .news-header-actions > .ant-btn:last-child {
    flex: 1;
  }

  .news-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .news-summary {
    grid-template-columns: repeat(4, minmax(75px, 1fr));
    overflow-x: auto;
  }

  .news-summary > button,
  .news-summary > div {
    min-width: 75px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .news-filters .ant-select {
    flex: 1;
    width: auto;
  }

  .news-results.is-list .news-event-card {
    height: auto !important;
    display: block;
  }

  .news-results.is-list .news-event-card .ant-card-cover,
  .news-results.is-list .news-event-card .ant-card-cover > div,
  .news-results.is-list .news-event-card .ant-card-cover img {
    width: 100%;
    height: 140px !important;
    border-radius: 12px 12px 0 0 !important;
  }
}

/* ---- components/notification/Notifications.css ---- */
.notifications-container {
  width: 100%;
  min-height: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(6px, 1vw, 14px) !important;
}

.notification-management-header,
.notification-toolbar {
  border: 1px solid #e5e8ed;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.notification-management-header {
  min-height: 78px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 14px;
}

.notification-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-heading h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
}

.notification-heading > div > span {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-primary) 15%, white);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
}

.notification-heading p {
  margin: 4px 0 0;
  color: #7d8796;
  font-size: 12px;
}

.notification-header-actions {
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.notification-search {
  width: min(520px, 100%);
  height: 40px;
  border-radius: 9px;
}

.notification-header-actions .ant-btn {
  height: 40px;
  border-radius: 9px;
}

.notification-view-switch {
  padding: 3px;
  display: flex;
  gap: 2px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #f7f8fa;
}

.notification-view-switch .ant-btn {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.notification-refresh-button {
  width: 40px;
  padding: 0;
}

.notification-toolbar {
  margin: 10px 0 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
}

.notification-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 7px;
}

.notification-summary > button,
.notification-summary > div {
  min-height: 44px;
  padding: 5px 9px;
  display: grid;
  grid-template-columns: 20px auto auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e7e9ed;
  border-radius: 9px;
  background: #f8f9fb;
  color: #243044;
}

.notification-summary > button {
  cursor: pointer;
}

.notification-summary > button.is-active {
  border-color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 12%, white);
}

.notification-summary strong {
  font-size: 17px;
}

.notification-summary small {
  color: #6f7a8b;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.notification-toolbar-controls {
  display: flex;
  gap: 7px;
}

.notification-toolbar-controls .ant-select {
  width: 140px;
}

.notification-toolbar-controls .ant-select-selector,
.notification-toolbar-controls .ant-btn {
  min-height: 36px;
  border-radius: 8px !important;
}

.notification-results {
  min-height: calc(100dvh - 300px);
  padding-bottom: 54px;
}

.notification-results > .ant-col,
.notification-results .ant-ribbon-wrapper {
  display: flex;
  width: 100%;
}

.notification-card {
  width: 100%;
  min-height: 285px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.notification-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.1) !important;
}

.notification-card.is-unread {
  border-left: 3px solid var(--app-primary) !important;
}

.notification-card .ant-card-body {
  min-height: 0;
  flex: 1;
  display: flex;
}

.notification-card-content {
  width: 100%;
  min-height: 0;
  flex: 1;
}

.notification-card-content h3 {
  margin-bottom: 9px !important;
  font-size: 14px !important;
}

.notification-people {
  margin-bottom: 8px !important;
}

.notification-message .ant-typography {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.notification-card-footer {
  padding-top: 8px !important;
}

.notification-card .ant-card-actions > li {
  margin: 5px 0;
}

.notification-card .ant-card-actions .ant-btn {
  height: 28px;
  font-size: 10px;
}

.notification-results.is-list .notification-card {
  min-height: 172px;
}

.notification-results.is-list .notification-card-content {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.8fr) minmax(230px, 1fr) minmax(
      260px,
      1.4fr
    );
  grid-template-rows: 1fr auto;
  gap: 8px 16px;
}

.notification-results.is-list .notification-card-content > h3 {
  grid-column: 1;
}

.notification-results.is-list .notification-people {
  grid-column: 2;
  grid-row: 1;
}

.notification-results.is-list .notification-message {
  grid-column: 3;
  grid-row: 1;
}

.notification-results.is-list .notification-card-footer {
  grid-column: 1 / -1;
  grid-row: 2;
}

.notification-pagination-bar {
  position: sticky;
  z-index: 20;
  bottom: 0;
  min-height: 46px;
  margin-top: -46px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e7eb;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
}

.notification-empty-state {
  margin-top: 12px !important;
  border: 1px solid #e5e8ed;
}

.notifications-container.is-dark .notification-management-header,
.notifications-container.is-dark .notification-toolbar {
  border-color: #303030;
  background: #171717;
}

.notifications-container.is-dark .notification-heading h1 {
  color: #f3f4f6;
}

.notifications-container.is-dark .notification-view-switch,
.notifications-container.is-dark .notification-summary > button,
.notifications-container.is-dark .notification-summary > div {
  border-color: #343434;
  background: #222;
  color: #f3f4f6;
}

.notifications-container.is-dark .notification-pagination-bar {
  border-color: #303030;
  background: rgba(20, 20, 20, 0.94);
}

@media (max-width: 1100px) {
  .notification-management-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .notification-header-actions {
    justify-content: stretch;
  }

  .notification-search {
    flex: 1;
  }

  .notification-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-toolbar-controls {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .notifications-container {
    padding: 4px !important;
  }

  .notification-management-header {
    padding: 11px;
  }

  .notification-heading h1 {
    font-size: 21px;
  }

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

  .notification-search {
    width: 100%;
    flex-basis: 100%;
  }

  .notification-header-actions > .ant-btn:last-child {
    flex: 1;
  }

  .notification-summary {
    grid-template-columns: repeat(4, minmax(80px, 1fr));
    overflow-x: auto;
  }

  .notification-summary > button,
  .notification-summary > div {
    min-width: 80px;
    grid-template-columns: 1fr 1fr;
  }

  .notification-summary small {
    grid-column: 1 / -1;
  }

  .notification-toolbar-controls {
    flex-wrap: wrap;
  }

  .notification-toolbar-controls .ant-select {
    flex: 1;
    width: auto;
  }

  .notification-results.is-list .notification-card-content {
    display: flex !important;
  }

  .notification-results.is-list .notification-card {
    min-height: 0;
  }

  .notification-pagination-bar .ant-pagination-total-text {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ---- components/report/ReportDetails.css ---- */
/* Report Details Custom Styles */

.report-details-container {
  background-color: #f0f2f5;
  min-height: 100vh;
  padding: 16px;
}

.report-details-container.dark {
  background-color: #141414;
}

.report-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.report-card.dark {
  background-color: #1f1f1f;
  border: 1px solid #303030;
}

.report-card .ant-card-body {
  padding: 16px;
}

.report-card .ant-card-head {
  padding: 0 16px;
  min-height: 48px;
}

.compact-row {
  margin-bottom: 8px;
}

.compact-row:last-child {
  margin-bottom: 0;
}

.status-completed {
  background: linear-gradient(135deg, #52c41a, #389e0d);
  color: white;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 500;
}

.worker-avatar-section {
  padding: 16px;
  border-radius: 8px;
  background: rgba(24, 144, 255, 0.05);
  border: 1px solid rgba(24, 144, 255, 0.2);
}

.worker-avatar-section.dark {
  background: rgba(24, 144, 255, 0.1);
}

.attachment-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.attachment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.attachment-preview {
  height: 140px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-preview .file-icon {
  font-size: 32px;
  color: #1890ff;
}

.attachment-actions {
  padding: 8px;
  display: flex;
  justify-content: space-between;
  background: white;
}

.preview-modal {
  max-width: 600px;
}

.preview-modal .ant-modal-content {
  border-radius: 8px;
}

.preview-modal .ant-modal-body {
  padding: 16px;
  text-align: center;
}

.ticket-info-row {
  padding: 2px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ticket-info-row:last-child {
  border-bottom: none;
}

.ticket-info-row.dark {
  border-bottom-color: #303030;
}
/* .compact-space .ant-space-item {
  margin-bottom: 2px !important;
} */
/* .compact-space .ant-space-item:last-child {
  margin-bottom: 0 !important;
} */

.action-button {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-1px);
}

.service-type-tag {
  background: linear-gradient(135deg, #722ed1, #531dab);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 4px 12px;
  font-weight: 500;
}

.maps-button {
  background: linear-gradient(135deg, #faad14, #d48806);
  border: none;
  color: white;
  border-radius: 6px;
  font-weight: 500;
}

.share-button {
  background: linear-gradient(135deg, #faad14, #d48806);
  border: none;
  border-radius: 6px;
  font-weight: 500;
}

.complaint-type-tag {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
  border-radius: 12px;
  padding: 2px 8px;
}

.chargeable-type-tag {
  background: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
  border-radius: 12px;
  padding: 2px 8px;
}

.timeline-item {
  padding: 8px 0;
}

.section-divider {
  margin: 16px 0;
  border-color: rgba(0, 0, 0, 0.1);
}

.section-divider.dark {
  border-color: rgba(255, 255, 255, 0.1);
}

.info-card-content {
  padding: 16px;
}

.attachment-preview-modal .ant-modal-content {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.worker-contact-button {
  border-radius: 6px;
  font-weight: 500;
  height: 36px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .report-details-container {
    padding: 16px;
  }
  
  .report-card {
    margin-bottom: 12px;
  }
  
  .worker-avatar-section {
    padding: 12px;
  }
}

/* Custom scrollbar for better UX */
.ant-card-body::-webkit-scrollbar {
  width: 6px;
}

.ant-card-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.ant-card-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.ant-card-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* New CSS to make the modal smaller and more stylish */
.attachment-preview-modal .ant-modal-body {
  max-height: 80vh; /* Set a maximum height for the modal body */
  overflow-y: auto; /* Enable vertical scrolling */
  padding: 16px;
}

@media (max-width: 768px) {
  .attachment-preview-modal {
    width: 90% !important;
  }
}

/* Attachments strip: single horizontal row only (no vertical scroll) */
.attachments-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 8px 0; /* spacers added via pseudo elements so content doesn't slide under arrows */
  align-items: stretch;
}

.attachments-scroll .attachment-thumb {
  flex: 0 0 180px; /* fixed thumbnail width */
  height: 140px;
  margin-right: 12px;
}

/* Add invisible spacers so thumbnails never sit beneath the arrow buttons when scrolled */
.attachments-scroll::before,
.attachments-scroll::after {
  content: "";
  flex: 0 0 64px; /* space equal to arrow area */
}

@media (max-width: 768px) {
  .attachments-scroll {
    padding: 8px 16px;
  }

  .attachments-scroll .attachment-thumb {
    flex: 0 0 140px;
    height: 120px;
    margin-right: 12px;
  }
}

/* Attachment thumbnail base styling */
.attachment-thumb {
  width: 100%;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: block;
}

.attachment-thumb:hover,
.attachment-thumb:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Hide native scrollbar but keep usable on desktop */
.attachments-scroll::-webkit-scrollbar {
  height: 8px;
}
.attachments-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.attachments-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 6px;
}

/* Arrow button styling: always visible, positioned beside strip */
.attachments-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(255,255,255,0.95);
  border-radius: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  border: none;
}

.attachments-arrow.left {
  left: 8px;
}

.attachments-arrow.right {
  right: 8px;
}

/* Modal-specific arrows (inside preview modal) */
.attachment-preview-modal .attachments-arrow {
  background: rgba(255,255,255,0.95);
  width: 44px;
  height: 44px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

/* Reduce arrow size on small screens but keep visible */
@media (max-width: 480px) {
  .attachments-arrow {
    width: 34px;
    height: 34px;
  }
  .attachments-scroll {
    padding: 8px 0;
  }

  .attachments-scroll::before,
  .attachments-scroll::after {
    flex: 0 0 44px;
  }
}

/* ---- components/staff/AddWorkerForm.css ---- */
.worker-form-page {
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(180deg, #f4f8f6 0, #f7f9fc 260px, #f7f9fc 100%);
}

.worker-profile-hero,
.worker-form-shell {
  width: min(1240px, 100%);
  margin-inline: auto;
  border: 1px solid #e5ebe8;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 42, 30, 0.06);
}

.worker-profile-hero {
  margin-bottom: 20px;
  overflow: hidden;
  border-top: 4px solid #168a4b;
  background: #fff;
}

.worker-profile-hero .ant-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 112px;
  padding: 20px 28px;
}

.worker-profile-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.worker-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #dce6e1;
  background: #fff;
}

.worker-back-button .anticon {
  margin: 0;
  font-size: 17px;
  line-height: 1;
}

.worker-back-button:hover {
  border-color: #168a4b !important;
  color: #168a4b !important;
  background: #f1faf5 !important;
}

.worker-page-kicker {
  display: block;
  margin-bottom: 3px;
  color: #168a4b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.worker-page-title.ant-typography {
  margin: 0 0 2px;
  color: #123326;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
}

.worker-avatar-control {
  flex: 0 0 auto;
  padding-left: 28px;
  border-left: 1px solid #e5ebe8;
}

.worker-avatar {
  cursor: pointer;
  border: 3px solid #fff;
  background: #dff4e7;
  color: #08753d;
  box-shadow: 0 0 0 2px #1d9b57, 0 8px 20px rgba(13, 117, 61, 0.15);
}

.worker-photo-button {
  height: 38px;
  border-color: #cfe0d7;
  border-radius: 10px;
  color: #176b40;
  font-weight: 700;
}

.worker-form-shell .ant-card-body { padding: 26px 28px 0; }
.worker-details-form .ant-form-item { margin-bottom: 19px; }

.worker-details-form .ant-form-item-label > label {
  color: #354b41;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.worker-details-form .ant-input,
.worker-details-form .ant-input-affix-wrapper,
.worker-details-form .ant-picker,
.worker-details-form .ant-select-selector {
  border-color: #dce6e1 !important;
  border-radius: 10px !important;
}

.worker-details-form .ant-divider-horizontal.ant-divider-with-text {
  margin: 30px 0 20px;
  color: #08753d;
  font-size: 14px;
  font-weight: 800;
}

.worker-details-form .ant-divider-horizontal.ant-divider-with-text::before,
.worker-details-form .ant-divider-horizontal.ant-divider-with-text::after {
  border-color: #d9e9e0;
}

.worker-action-bar {
  position: sticky;
  z-index: 5;
  bottom: 0;
  margin: 28px -28px 0 !important;
  padding: 16px 28px;
  border-top: 1px solid #e3eae6;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 24px rgba(15, 42, 30, 0.06);
  backdrop-filter: blur(10px);
}

.worker-action-bar .ant-btn {
  min-width: 108px;
  border-radius: 10px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .worker-form-page { padding: 12px; }
  .worker-profile-hero .ant-card-body { align-items: center; gap: 14px; min-height: 96px; padding: 16px; }
  .worker-profile-heading { flex: 1; }
  .worker-back-button { flex-basis: 36px; width: 36px; height: 36px; }
  .worker-avatar-control { padding-left: 14px; }
  .worker-avatar-control .ant-space { flex-direction: column; gap: 6px !important; }
  .worker-avatar { width: 52px !important; height: 52px !important; line-height: 52px !important; }
  .worker-photo-button { height: 30px; padding-inline: 9px; font-size: 11px; }
  .worker-form-shell .ant-card-body { padding: 18px 16px 0; }
  .worker-action-bar { margin-inline: -16px !important; padding: 12px 16px; }
}

@media (max-width: 480px) {
  .worker-profile-hero .ant-card-body { align-items: flex-start; }
  .worker-profile-heading { gap: 10px; }
  .worker-page-title.ant-typography { font-size: 20px; }
  .worker-profile-heading .ant-typography-secondary { display: none; }
  .worker-avatar-control { align-self: center; padding-left: 10px; }
  .worker-photo-button span:not(.anticon) { display: none; }
  .worker-photo-button { width: 32px; min-width: 32px; padding: 0; }
  .worker-action-bar { gap: 10px; }
  .worker-action-bar > .ant-col { width: 100%; }
  .worker-action-bar .ant-space { display: flex; }
  .worker-action-bar .ant-btn { flex: 1; }
}

/* ---- components/todo/TodoManagement.css ---- */
.todo-page {
  padding: clamp(8px, 1.2vw, 18px);
  max-width: 1440px;
  margin: 0 auto;
}

.todo-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid #e8ebef;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffef8 0%, #fff9e6 100%);
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.05);
}

.todo-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.todo-title-row h1 {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  color: #111827;
}

.todo-title-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(251, 188, 4, 0.18);
  color: #d97706;
  font-size: 20px;
}

.todo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.todo-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.todo-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.todo-summary-chip strong {
  color: #0f172a;
}

.todo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
}

.todo-card {
  position: relative;
  min-height: 120px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.todo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.todo-card--pinned::before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 14px;
  height: 14px;
  border-radius: 0 0 4px 4px;
  background: rgba(0, 0, 0, 0.18);
}

.todo-card__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
}

.todo-card__desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
  white-space: pre-wrap;
}

.todo-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.todo-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.todo-status-btn.is-active {
  font-weight: 700;
}

.todo-status-btn--complete {
  margin-left: auto;
}

.todo-card--completed {
  opacity: 0.92;
}

.todo-card__completed-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
}

.todo-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.todo-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.todo-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.todo-color-swatch.active {
  border-color: #111827;
  box-shadow: 0 0 0 2px #fff inset;
}

.todo-page.is-dark .todo-card__completed-banner {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.todo-page.is-dark .todo-page-header,
.todo-page.is-dark .todo-card {
  border-color: #303030;
}

.todo-page.is-dark .todo-title-row h1,
.todo-page.is-dark .todo-card__title {
  color: #f5f5f5;
}

.todo-page.is-dark .todo-card__desc {
  color: #cbd5e1;
}

.todo-page.is-dark .todo-summary-chip {
  background: #262626;
  color: #d4d4d4;
}

.todo-page.is-dark .todo-summary-chip strong {
  color: #fafafa;
}

.todo-history-summary {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8ebef;
}

.todo-history-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-history-timeline {
  margin-top: 8px;
}

.todo-page.is-dark .todo-history-summary {
  border-bottom-color: #303030;
}

/* Notifications: Material inbox (screens-notifications.js) */
.notif-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1180px; margin: 0 auto; }
.notif-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-radius: 22px; color: #fff;
  background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(130deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 62%, #020617), var(--app-primary, #0d4d9c) 60%, color-mix(in srgb, var(--app-primary, #0d4d9c) 72%, #60a5fa));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--app-primary, #0d4d9c) 26%, transparent);
}
.notif-hero.is-loading { background: var(--card-bg); box-shadow: none; border: 1px solid var(--border-color); }
.notif-hero__copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.notif-hero__icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; font-size: 22px; border-radius: 15px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.notif-hero h1 { margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.notif-hero p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 13.5px; }
.notif-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.notif-hero__actions .ant-btn:not(.ant-btn-primary) { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.notif-hero__actions .ant-btn:not(.ant-btn-primary):hover:not(:disabled) { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.18); }
.notif-hero__actions .ant-btn:not(.ant-btn-primary):disabled { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.18); background: transparent; }
.notif-hero__actions .ant-btn-primary { color: var(--app-primary, #0d4d9c); border-color: #fff; background: #fff; box-shadow: none; }
.notif-hero__actions .ant-btn-primary:hover { color: var(--app-primary, #0d4d9c); background: rgba(255, 255, 255, 0.9); }

.notif-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); }
.notif-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--text-color) 5%, transparent); }
.notif-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; color: var(--secondary-text-color); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 0; border-radius: 10px; background: transparent; transition: background 0.18s ease, color 0.18s ease; }
.notif-tab span { min-width: 22px; padding: 1px 7px; font-size: 11px; text-align: center; border-radius: 999px; background: color-mix(in srgb, var(--text-color) 9%, transparent); }
.notif-tab:hover { color: var(--text-color); }
.notif-tab.is-active { color: #fff; background: var(--app-primary, #0d4d9c); box-shadow: 0 4px 12px color-mix(in srgb, var(--app-primary, #0d4d9c) 30%, transparent); }
.notif-tab.is-active span { color: #fff; background: rgba(255, 255, 255, 0.22); }
.notif-toolbar__controls { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.notif-toolbar .notif-search { flex: 1 1 260px; max-width: 380px; }
.notif-toolbar .notif-type { min-width: 190px; }

.notif-list { display: flex; flex-direction: column; gap: 18px; }
.notif-group__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 4px; color: var(--secondary-text-color); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.notif-group__title span { padding: 1px 8px; color: var(--app-primary, #0d4d9c); font-size: 11px; letter-spacing: 0; border-radius: 999px; background: var(--app-primary-soft, rgba(13, 77, 156, 0.12)); }
.notif-group__rows { overflow: hidden; border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.notif-row { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 14px 18px; transition: background 0.18s ease; }
.notif-row + .notif-row { border-top: 1px solid var(--border-color); }
.notif-row:hover { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 4%, transparent); }
.notif-row.is-unread { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 5%, transparent); }
.notif-row.is-unread::before { position: absolute; top: 14px; bottom: 14px; left: 0; width: 4px; content: ""; border-radius: 0 4px 4px 0; background: var(--app-primary, #0d4d9c); }
.notif-row.is-skeleton { padding: 18px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); }
.notif-avatar {
  position: relative; display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; color: #fff; font-size: 14px; font-weight: 800; border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--tone) 78%, #fff), var(--tone));
}
.notif-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--card-bg); }
.notif-avatar.is-type { font-size: 19px; border-radius: 14px; box-shadow: 0 6px 14px color-mix(in srgb, var(--tone) 30%, transparent); }
.notif-avatar__badge {
  position: absolute; right: -3px; bottom: -3px; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; color: #fff; font-size: 10px; font-style: normal;
  border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px var(--card-bg);
}
.notif-row__main { flex: 1; min-width: 0; }
.notif-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.notif-row__top h3 { overflow: hidden; margin: 0; color: var(--text-color); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.notif-row.is-unread .notif-row__top h3 { font-weight: 800; }
.notif-row__top time { flex: 0 0 auto; color: var(--secondary-text-color); font-size: 12px; white-space: nowrap; }
.notif-row.is-unread .notif-row__top time { color: var(--app-primary, #0d4d9c); font-weight: 700; }
.notif-row__body { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--secondary-text-color); font-size: 13.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notif-row__body.is-open { display: block; }
.notif-link { padding: 0; color: var(--app-primary, #0d4d9c); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; background: none; }
.notif-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.notif-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; color: color-mix(in srgb, var(--tone) 85%, #000); font-size: 11.5px; font-weight: 700; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, transparent); }
.notif-chip.is-muted { --tone: #64748b; }
.notif-row__people { overflow: hidden; color: var(--secondary-text-color); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.notif-row__actions { display: flex; flex: 0 0 auto; gap: 4px; opacity: 0.55; transition: opacity 0.18s ease; }
.notif-row:hover .notif-row__actions, .notif-row:focus-within .notif-row__actions { opacity: 1; }
.notif-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; color: var(--secondary-text-color); font-size: 15px; cursor: pointer; border: 0; border-radius: 10px; background: transparent; transition: background 0.15s ease, color 0.15s ease; }
.notif-icon-btn:hover { color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); }
.notif-icon-btn.is-danger:hover { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
.notif-icon-btn:focus-visible, .notif-tab:focus-visible { outline: 2px solid var(--app-primary, #0d4d9c); outline-offset: 2px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; border: 1px dashed var(--border-color); border-radius: 20px; background: var(--card-bg); }
.notif-empty__icon { margin-bottom: 6px; color: var(--app-primary, #0d4d9c); font-size: 40px; }
.notif-empty__icon.is-error { color: #dc2626; }
.notif-empty h3 { margin: 0; color: var(--text-color); font-size: 17px; }
.notif-empty p { margin: 0 0 10px; color: var(--secondary-text-color); font-size: 13.5px; }
.notif-more { display: flex; justify-content: center; }
.notif-more .ant-btn { border-radius: 999px; }
.notif-end { margin: 0; color: var(--secondary-text-color); font-size: 12px; text-align: center; }
.notif-confirm { margin: 12px 0; padding: 12px; border: 1px solid #ffe58f; border-radius: 10px; background: #fffbe6; }
.notif-confirm p { max-height: 80px; margin: 8px 0 0; overflow: auto; font-size: 13px; }
.notif-confirm__note { margin-top: 10px; color: var(--secondary-text-color); font-size: 13px; }
html.dark-theme .notif-chip { color: color-mix(in srgb, var(--tone) 60%, #fff); background: color-mix(in srgb, var(--tone) 22%, transparent); }
html.dark-theme .notif-confirm { border-color: #434343; background: #262626; }
html.dark-theme .notif-group__title span { color: color-mix(in srgb, var(--app-primary, #0d4d9c) 45%, #fff); }
@media (max-width: 768px) {
  .notif-hero { flex-direction: column; align-items: stretch; padding: 18px; }
  .notif-hero__actions { justify-content: stretch; }
  .notif-hero__actions .ant-btn { flex: 1; }
  .notif-toolbar__controls { justify-content: stretch; }
  .notif-toolbar .notif-search { max-width: none; }
  .notif-row { gap: 11px; padding: 14px 12px 12px 14px; }
  .notif-row__top { flex-direction: column; gap: 2px; }
  .notif-row__actions { opacity: 1; flex-direction: column; }
}

/* Staff directory: Material layout (screens-staff.js) */
.staff-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1600px; margin: 0 auto; }
.staff-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; color: #fff; border-radius: 22px;
  background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(130deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 62%, #020617), var(--app-primary, #0d4d9c) 60%, color-mix(in srgb, var(--app-primary, #0d4d9c) 72%, #60a5fa));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--app-primary, #0d4d9c) 26%, transparent);
}
.staff-hero__copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.staff-hero__icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; font-size: 22px; border-radius: 15px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.staff-hero h1 { margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.staff-hero p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 13.5px; }
.staff-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-hero .ant-btn.staff-hero__export { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.staff-hero .ant-btn.staff-hero__export:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.18); }
.staff-hero .ant-btn-primary.staff-hero__add { color: var(--app-primary, #0d4d9c); border-color: #fff; background: #fff; box-shadow: none; }
.staff-hero .ant-btn-primary.staff-hero__add:hover { color: var(--app-primary, #0d4d9c); background: rgba(255, 255, 255, 0.9); }

.staff-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--card-bg); }
.staff-chips { display: flex; gap: 8px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.staff-chip {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; color: var(--text-color); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border-color); border-radius: 999px; background: var(--card-bg); transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.staff-chip__icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--tone); font-size: 14px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 13%, transparent); }
.staff-chip b { min-width: 22px; padding: 1px 7px; font-size: 12px; text-align: center; border-radius: 999px; background: color-mix(in srgb, var(--text-color) 7%, transparent); }
.staff-chip:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--border-color)); }
.staff-chip.is-active { color: #fff; border-color: var(--tone); background: var(--tone); box-shadow: 0 6px 14px color-mix(in srgb, var(--tone) 30%, transparent); }
.staff-chip.is-active .staff-chip__icon { color: var(--tone); background: #fff; }
.staff-chip.is-active b { color: #fff; background: rgba(255, 255, 255, 0.22); }
.staff-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.staff-filters .staff-filters__search { flex: 1 1 280px; min-width: 0; }
.staff-filters .staff-filters__select { flex: 0 1 230px; min-width: 180px; }
.staff-filters .staff-filters__sort { flex: 0 1 190px; min-width: 170px; }
.staff-view-toggle { display: inline-flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text-color) 6%, transparent); }
.staff-view-toggle button { display: grid; place-items: center; width: 34px; height: 30px; color: var(--secondary-text-color); font-size: 15px; cursor: pointer; border: 0; border-radius: 9px; background: transparent; }
.staff-view-toggle button.is-active { color: #fff; background: var(--app-primary, #0d4d9c); }
.staff-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--secondary-text-color); font-size: 12.5px; }
.staff-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; color: var(--app-primary, #0d4d9c); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; background: var(--app-primary-soft, rgba(13, 77, 156, 0.12)); }
.staff-active-chip .anticon { font-size: 10px; }
.staff-clear-link { padding: 0 4px; color: var(--secondary-text-color); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; border: 0; background: none; }

.staff-results__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 2px 12px; }
.staff-results__head span { color: var(--app-primaryDark, #0d4d9c); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.staff-results__head h2 { margin: 2px 0 0; color: var(--text-color); font-size: 22px; font-weight: 800; }
.staff-results__head small { color: var(--secondary-text-color); font-size: 12.5px; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.staff-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 18px;
  background: var(--card-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.staff-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: var(--tone); }
.staff-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 35%, var(--border-color)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); }
.staff-card__head { display: flex; align-items: center; gap: 12px; }
.staff-card__who { flex: 1; min-width: 0; }
.staff-card__who h3 { overflow: hidden; margin: 0; color: var(--text-color); font-size: 15.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.staff-card__who p { overflow: hidden; margin: 2px 0 0; color: var(--secondary-text-color); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.staff-role-tag { flex: 0 0 auto; padding: 2px 9px; color: color-mix(in srgb, var(--tone) 85%, #000); font-size: 11.5px; font-weight: 700; white-space: nowrap; border-radius: 999px; background: color-mix(in srgb, var(--tone) 13%, transparent); }
.staff-card__info { display: grid; gap: 7px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--border-color); }
.staff-card__info li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--secondary-text-color); font-size: 13px; line-height: 1.4; }
.staff-card__info li .anticon { flex: 0 0 auto; margin-top: 2px; color: color-mix(in srgb, var(--tone) 80%, var(--secondary-text-color)); }
.staff-card__info li span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.staff-card__live span { color: var(--text-color); }
.staff-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-color); }
.staff-card__foot .ant-btn { border-radius: 10px; }
.staff-card__spacer { flex: 1; }
.staff-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--secondary-text-color); font-size: 16px; cursor: pointer; border: 0; border-radius: 10px; background: transparent; transition: background 0.15s ease, color 0.15s ease; }
.staff-icon-btn:hover { color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); }
.staff-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); }
.staff-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; }
.staff-table th { padding: 12px 14px; color: var(--secondary-text-color); font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--border-color); background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.staff-table td { padding: 10px 14px; color: var(--text-color); vertical-align: middle; border-bottom: 1px solid var(--border-color); }
.staff-table tbody tr:last-child td { border-bottom: 0; }
.staff-table tbody tr:hover td { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 4%, transparent); }
.staff-table__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.staff-table__who strong { display: block; font-size: 13.5px; }
.staff-table__who small { display: block; max-width: 240px; overflow: hidden; color: var(--secondary-text-color); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.staff-table__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.staff-table__actions { white-space: nowrap; text-align: right; }
.staff-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; border: 1px dashed var(--border-color); border-radius: 20px; background: var(--card-bg); }
.staff-empty__icon { margin-bottom: 6px; color: var(--app-primary, #0d4d9c); font-size: 40px; }
.staff-empty h3 { margin: 0; color: var(--text-color); font-size: 17px; }
.staff-empty p { margin: 0 0 10px; color: var(--secondary-text-color); font-size: 13.5px; }
.staff-pager { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 16px; background: color-mix(in srgb, var(--card-bg) 92%, transparent); backdrop-filter: blur(10px); }
.staff-pager .staff-pager__size { width: 130px; }
html.dark-theme .staff-role-tag { color: color-mix(in srgb, var(--tone) 60%, #fff); background: color-mix(in srgb, var(--tone) 22%, transparent); }
html.dark-theme .staff-results__head span { color: color-mix(in srgb, var(--app-primary, #0d4d9c) 55%, #fff); }
@media (max-width: 768px) {
  .staff-hero { flex-direction: column; align-items: stretch; padding: 18px; }
  .staff-hero__actions .ant-btn { flex: 1; }
  .staff-filters .staff-filters__select, .staff-filters .staff-filters__sort { flex: 1 1 45%; min-width: 0; }
  .staff-grid { grid-template-columns: 1fr; }
  .staff-pager { justify-content: center; }
}

/* Service reports list (screens-reports.js) */
.rep-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1600px; margin: 0 auto; }
.rep-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; color: #fff; border-radius: 22px;
  background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(130deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 62%, #020617), var(--app-primary, #0d4d9c) 60%, color-mix(in srgb, var(--app-primary, #0d4d9c) 72%, #60a5fa));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--app-primary, #0d4d9c) 26%, transparent);
}
.rep-hero.is-loading { background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: none; }
.rep-hero__copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rep-hero__icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; font-size: 22px; border-radius: 15px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.rep-hero h1 { margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.rep-hero p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 13.5px; }
.rep-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-hero .ant-btn.rep-hero__ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.rep-hero .ant-btn.rep-hero__ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.18); }
.rep-hero .ant-btn-primary.rep-hero__add { color: var(--app-primary, #0d4d9c); border-color: #fff; background: #fff; box-shadow: none; }
.rep-hero .ant-btn-primary.rep-hero__add:hover { color: var(--app-primary, #0d4d9c); background: rgba(255, 255, 255, 0.9); }

.rep-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--card-bg); }
.rep-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rep-type {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text-color); font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 16px; background: var(--card-bg); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rep-type__icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; color: var(--tone); font-size: 19px; border-radius: 13px; background: color-mix(in srgb, var(--tone) 13%, transparent); }
.rep-type__text { display: flex; flex-direction: column; line-height: 1.2; }
.rep-type__text b { font-size: 22px; font-weight: 800; }
.rep-type__text small { color: var(--secondary-text-color); font-size: 12.5px; font-weight: 600; }
.rep-type:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--border-color)); }
.rep-type.is-active { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 8%, var(--card-bg)); box-shadow: 0 0 0 1px var(--tone), 0 8px 18px color-mix(in srgb, var(--tone) 18%, transparent); }
.rep-type.is-active .rep-type__icon { color: #fff; background: var(--tone); }
.rep-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rep-filters .rep-filters__search { flex: 1 1 200px; min-width: 0; }
.rep-filters .rep-filters__select { flex: 0 1 170px; min-width: 140px; }
.rep-filters .rep-filters__range { flex: 0 1 250px; min-width: 210px; }
.rep-view-toggle { display: inline-flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text-color) 6%, transparent); }
.rep-view-toggle button { display: grid; place-items: center; width: 34px; height: 30px; color: var(--secondary-text-color); font-size: 15px; cursor: pointer; border: 0; border-radius: 9px; background: transparent; }
.rep-view-toggle button.is-active { color: #fff; background: var(--app-primary, #0d4d9c); }
.rep-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--secondary-text-color); font-size: 12.5px; }
.rep-active__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; color: var(--app-primary, #0d4d9c); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; background: var(--app-primary-soft, rgba(13, 77, 156, 0.12)); }
.rep-active__chip .anticon { font-size: 10px; }
.rep-active__clear { padding: 0 4px; color: var(--secondary-text-color); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; border: 0; background: none; }

.rep-results__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 2px 12px; }
.rep-results__head span { color: var(--app-primaryDark, #0d4d9c); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.rep-results__head h2 { margin: 2px 0 0; color: var(--text-color); font-size: 22px; font-weight: 800; }
.rep-results__head small { max-width: 60%; overflow: hidden; color: var(--secondary-text-color); font-size: 12.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rep-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; overflow: hidden; cursor: pointer; border: 1px solid var(--border-color);
  border-radius: 18px; background: var(--card-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rep-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: var(--tone); }
.rep-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 35%, var(--border-color)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); }
.rep-card:focus-visible { outline: 2px solid var(--app-primary, #0d4d9c); outline-offset: 2px; }
.rep-card.is-skeleton { cursor: default; }
.rep-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rep-card__id { display: flex; flex-direction: column; min-width: 0; }
.rep-card__id small { color: var(--secondary-text-color); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rep-card__id strong { overflow: hidden; color: var(--text-color); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rep-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 3px 10px; color: color-mix(in srgb, var(--tone) 85%, #000); font-size: 11.5px; font-weight: 700; border-radius: 999px; background: color-mix(in srgb, var(--tone) 13%, transparent); }
.rep-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.rep-chip { display: inline-flex; align-items: center; padding: 2px 9px; color: color-mix(in srgb, var(--tone) 85%, #000); font-size: 11.5px; font-weight: 700; border-radius: 999px; background: color-mix(in srgb, var(--tone) 13%, transparent); }
.rep-card__site h3 { overflow: hidden; margin: 0; color: var(--text-color); font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rep-card__site p { overflow: hidden; margin: 3px 0 0; color: var(--secondary-text-color); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rep-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--secondary-text-color); font-size: 12px; }
.rep-card__meta span:not(.rep-chip) { display: inline-flex; align-items: center; gap: 5px; }
.rep-card__work { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-color); font-size: 13px; line-height: 1.5; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 2; opacity: 0.85; }
.rep-card__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-color); }
.rep-card__who { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.rep-card__who small { color: var(--secondary-text-color); font-size: 10.5px; }
.rep-card__who b { overflow: hidden; color: var(--text-color); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.rep-card__att { display: inline-flex; align-items: center; gap: 4px; color: var(--secondary-text-color); font-size: 12px; }
.rep-card__go { color: var(--secondary-text-color); font-size: 12px; transition: transform 0.2s ease, color 0.2s ease; }
.rep-card:hover .rep-card__go { color: var(--app-primary, #0d4d9c); transform: translateX(3px); }
.rep-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); }
.rep-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }
.rep-table th { padding: 12px 14px; color: var(--secondary-text-color); font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--border-color); background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.rep-table td { padding: 10px 14px; color: var(--text-color); vertical-align: middle; border-bottom: 1px solid var(--border-color); }
.rep-table td small { display: block; color: var(--secondary-text-color); font-size: 12px; }
.rep-table tbody tr { cursor: pointer; }
.rep-table tbody tr:last-child td { border-bottom: 0; }
.rep-table tbody tr:hover td { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 4%, transparent); }
.rep-table__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.rep-table__who { display: inline-flex; align-items: center; gap: 8px; }
.rep-table__go { color: var(--secondary-text-color); text-align: right; }
.rep-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; border: 1px dashed var(--border-color); border-radius: 20px; background: var(--card-bg); }
.rep-empty__icon { margin-bottom: 6px; color: var(--app-primary, #0d4d9c); font-size: 40px; }
.rep-empty__icon.is-error { color: #dc2626; }
.rep-empty h3 { margin: 0; color: var(--text-color); font-size: 17px; }
.rep-empty p { margin: 0 0 10px; color: var(--secondary-text-color); font-size: 13.5px; }
.rep-pager { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 16px; background: color-mix(in srgb, var(--card-bg) 92%, transparent); backdrop-filter: blur(10px); }
.rep-pager small { color: var(--secondary-text-color); font-size: 12.5px; }
.rep-pager .rep-pager__size { width: 130px; }
html.dark-theme .rep-status, html.dark-theme .rep-chip { color: color-mix(in srgb, var(--tone) 60%, #fff); background: color-mix(in srgb, var(--tone) 22%, transparent); }
html.dark-theme .rep-results__head span { color: color-mix(in srgb, var(--app-primary, #0d4d9c) 55%, #fff); }
@media (max-width: 900px) { .rep-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .rep-hero { flex-direction: column; align-items: stretch; padding: 18px; }
  .rep-hero__actions .ant-btn { flex: 1; }
  .rep-filters .rep-filters__select, .rep-filters .rep-filters__range { flex: 1 1 45%; min-width: 0; }
  .rep-grid { grid-template-columns: 1fr; }
  .rep-results__head small { display: none; }
  .rep-pager { justify-content: center; }
}

/* Ticket list header, filters and statistics (screens-tickets.js) */
.ticket-management-shell { display: flex; flex-direction: column; gap: 14px; }
.tk-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; color: #fff; border-radius: 22px;
  background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(130deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 62%, #020617), var(--app-primary, #0d4d9c) 60%, color-mix(in srgb, var(--app-primary, #0d4d9c) 72%, #60a5fa));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--app-primary, #0d4d9c) 26%, transparent);
}
.tk-hero__copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tk-hero__icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; font-size: 22px; border-radius: 15px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.tk-hero h1 { margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.tk-hero p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 13.5px; }
.tk-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tk-hero .ant-btn.tk-hero__ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.tk-hero .ant-btn.tk-hero__ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.18); }
.tk-hero .ant-btn-primary.tk-hero__add { color: var(--app-primary, #0d4d9c); border-color: #fff; background: #fff; box-shadow: none; }
.tk-hero .ant-btn-primary.tk-hero__add:hover { color: var(--app-primary, #0d4d9c); background: rgba(255, 255, 255, 0.9); }
.tk-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--card-bg); }
.tk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-filters .tk-filters__search { flex: 1 1 240px; min-width: 0; }
.tk-filters__select { flex: 0 1 180px; min-width: 150px; }
.tk-filters .tk-filters__range { flex: 0 1 260px; min-width: 220px; }
.tk-filters__order { width: 140px; }
.tk-sortbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tk-sortbar__left { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tk-sortbar .tk-filters__select { flex: 0 0 190px; }
.tk-view-toggle { display: inline-flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text-color) 6%, transparent); }
.tk-view-toggle button { display: grid; place-items: center; width: 34px; height: 30px; color: var(--secondary-text-color); font-size: 15px; cursor: pointer; border: 0; border-radius: 9px; background: transparent; }
.tk-view-toggle button.is-active { color: #fff; background: var(--app-primary, #0d4d9c); }
.tk-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--secondary-text-color); font-size: 12.5px; }
.tk-active__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; color: var(--app-primary, #0d4d9c); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; background: var(--app-primary-soft, rgba(13, 77, 156, 0.12)); }
.tk-active__chip .anticon { font-size: 10px; }
.tk-active__clear { padding: 0 4px; color: var(--secondary-text-color); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; border: 0; background: none; }
.ticket-management-page .ticket-statistics-grid { padding: 12px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--card-bg); }
.ticket-management-page .ticket-stat-card { border: 1px solid var(--border-color) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.ticket-management-page .ticket-stat-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--app-primary, #0d4d9c) 40%, var(--border-color)) !important; }
.ticket-management-page .ticket-stat-card--active { border-color: var(--app-primary, #0d4d9c) !important; box-shadow: 0 0 0 1px var(--app-primary, #0d4d9c), 0 8px 18px color-mix(in srgb, var(--app-primary, #0d4d9c) 18%, transparent) !important; }
.ticket-management-page .ticket-result-card { border-radius: 18px !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.ticket-management-page .ticket-result-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1) !important; }
.ticket-management-page .ticket-pagination-bar { border: 1px solid var(--border-color); border-radius: 16px; }
@media (max-width: 768px) {
  .tk-hero { flex-direction: column; align-items: stretch; padding: 18px; }
  .tk-hero__actions .ant-btn { flex: 1 1 45%; }
  .tk-filters__select, .tk-filters .tk-filters__range, .tk-sortbar .tk-filters__select { flex: 1 1 45%; min-width: 0; }
}

/* Create-ticket dialog (screens-tickets.js) */
.tc-modal .ant-modal-content { padding: 0; overflow: hidden; border-radius: 20px; }
.tc-modal .ant-modal-header { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--border-color); background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, var(--card-bg, #fff)), var(--card-bg, #fff)); }
.tc-modal .ant-modal-close { top: 20px; right: 18px; }
.tc-modal .ant-modal-body { max-height: calc(100vh - 210px); padding: 18px 22px 6px; overflow-y: auto; }
.tc-modal .ant-modal-footer { margin: 0; padding: 14px 22px; border-top: 1px solid var(--border-color); background: var(--card-bg, #fff); }
.tc-title { display: flex; align-items: center; gap: 12px; }
.tc-title__icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; color: #fff; font-size: 19px; border-radius: 13px; background: linear-gradient(140deg, var(--app-primary, #0d4d9c), var(--app-primaryDark, #082f63)); box-shadow: 0 8px 18px color-mix(in srgb, var(--app-primary, #0d4d9c) 30%, transparent); }
.tc-title strong { display: block; color: var(--text-color); font-size: 17px; font-weight: 800; }
.tc-title small { display: block; color: var(--secondary-text-color); font-size: 12px; font-weight: 500; }
.tc-form { display: flex; flex-direction: column; gap: 14px; }
.tc-section { padding: 14px 16px 4px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--card-bg, #fff); }
.tc-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tc-section__num { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; color: #fff; font-size: 11px; font-weight: 800; border-radius: 50%; background: var(--app-primary, #0d4d9c); }
.tc-section__icon { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; color: var(--app-primary, #0d4d9c); font-size: 15px; border-radius: 10px; background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); }
.tc-section__head h3 { margin: 0; color: var(--text-color); font-size: 14.5px; font-weight: 800; }
.tc-section__head p { margin: 1px 0 0; color: var(--secondary-text-color); font-size: 12px; }
.tc-section .ant-form-item { margin-bottom: 14px; }
.tc-section .ant-form-item-label > label { font-size: 12.5px; font-weight: 700; }
.tc-section .ant-input, .tc-section .ant-input-affix-wrapper, .tc-section .ant-select-selector, .tc-section .ant-picker { border-radius: 10px !important; }
.tc-customer { display: flex; align-items: flex-start; gap: 12px; margin: -4px 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--app-primary, #0d4d9c) 25%, var(--border-color)); border-radius: 12px; background: color-mix(in srgb, var(--app-primary, #0d4d9c) 5%, transparent); }
.tc-customer__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-customer__text strong { color: var(--text-color); font-size: 13.5px; }
.tc-customer__text small, .tc-customer__text span { color: var(--secondary-text-color); font-size: 12px; }
.tc-customer__text span { display: flex; gap: 5px; }
.tc-addable { display: flex; gap: 8px; }
.tc-addable > .ant-select { flex: 1; min-width: 0; }
.tc-addable .ant-btn { flex: 0 0 auto; border-radius: 10px; }
.tc-priority { display: inline-flex; align-items: center; gap: 8px; }
.tc-priority i { width: 8px; height: 8px; border-radius: 50%; }
.tc-footer { display: flex; justify-content: flex-end; gap: 8px; }
.tc-footer .ant-btn { min-width: 110px; height: 40px; border-radius: 10px; font-weight: 600; }
.tc-footer .ant-btn-primary { color: #fff; border-color: var(--app-primary, #0d4d9c); background: var(--app-primary, #0d4d9c); box-shadow: 0 6px 16px color-mix(in srgb, var(--app-primary, #0d4d9c) 28%, transparent); }
.tc-footer .ant-btn-primary:hover:not(:disabled) { color: #fff; background: color-mix(in srgb, var(--app-primary, #0d4d9c) 88%, #000); }
@media (max-width: 576px) {
  .tc-modal .ant-modal-body { padding: 14px 14px 4px; }
  .tc-section { padding: 12px 12px 2px; }
  .tc-footer .ant-btn { flex: 1; }
}

/* Add / edit worker (screens-staff-form.js) */
.wf-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1400px; margin: 0 auto; }
.wf-hero {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: #fff; border-radius: 22px;
  background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(130deg, color-mix(in srgb, var(--app-primary, #0d4d9c) 62%, #020617), var(--app-primary, #0d4d9c) 60%, color-mix(in srgb, var(--app-primary, #0d4d9c) 72%, #60a5fa));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--app-primary, #0d4d9c) 26%, transparent);
}
.wf-hero .ant-btn.wf-hero__back { flex: 0 0 auto; width: 42px; height: 42px; color: #fff; border-radius: 13px; background: rgba(255, 255, 255, 0.14); }
.wf-hero .ant-btn.wf-hero__back:hover { color: #fff; background: rgba(255, 255, 255, 0.24); }
.wf-hero__kicker { color: rgba(255, 255, 255, 0.75); font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.wf-hero h1 { margin: 2px 0 0; color: #fff; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.wf-hero p { margin: 2px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 13.5px; }
.wf-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.wf-aside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.wf-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wf-card, .wf-section { padding: 18px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--card-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.wf-section__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wf-section__icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; color: var(--app-primary, #0d4d9c); font-size: 17px; border-radius: 12px; background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); }
.wf-section__head h3 { margin: 0; color: var(--text-color); font-size: 15.5px; font-weight: 800; }
.wf-section__head p { margin: 1px 0 0; color: var(--secondary-text-color); font-size: 12.5px; }
.wf-page .ant-form-item { margin-bottom: 14px; }
.wf-page .ant-form-item-label > label { font-size: 12.5px; font-weight: 700; }
.wf-page .ant-input, .wf-page .ant-input-affix-wrapper, .wf-page .ant-select-selector, .wf-page .ant-picker, .wf-page .ant-input-number { border-radius: 10px !important; }

.wf-photo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wf-photo__ring { position: relative; width: 128px; height: 128px; margin-bottom: 6px; padding: 4px; border-radius: 50%; background: conic-gradient(from 210deg, var(--app-primary, #0d4d9c), color-mix(in srgb, var(--app-primary, #0d4d9c) 40%, #60a5fa), var(--app-primary, #0d4d9c)); }
.wf-photo__ring > img, .wf-photo__empty { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; color: var(--secondary-text-color); font-size: 46px; cursor: pointer; border: 4px solid var(--card-bg); border-radius: 50%; background: color-mix(in srgb, var(--text-color) 6%, var(--card-bg)); }
.wf-photo__empty { cursor: default; }
.wf-photo__ring .ant-upload, .wf-photo__ring .ant-upload-wrapper { position: absolute; right: 2px; bottom: 2px; }
.wf-photo__cam { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; font-size: 17px; cursor: pointer; border: 3px solid var(--card-bg); border-radius: 50%; background: var(--app-primary, #0d4d9c); box-shadow: 0 6px 14px color-mix(in srgb, var(--app-primary, #0d4d9c) 35%, transparent); }
.wf-photo__name { color: var(--text-color); font-size: 16px; font-weight: 800; }
.wf-photo__meta { color: var(--secondary-text-color); font-size: 12.5px; }
.wf-photo__id { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; color: var(--app-primary, #0d4d9c); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; border-radius: 999px; background: var(--app-primary-soft, rgba(13, 77, 156, 0.12)); }
.wf-photo__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.wf-hint { color: var(--secondary-text-color); font-size: 12px; }
.wf-pw-tools { display: flex; gap: 8px; margin: -4px 0 10px; }
.wf-pw-tools .ant-btn { flex: 1; border-radius: 10px; }
.wf-pw-rule { display: flex; align-items: center; gap: 6px; color: var(--secondary-text-color); font-size: 12px; }
.wf-pw-rule.is-ok { color: #16a34a; }
.wf-pw-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 10px; color: color-mix(in srgb, var(--app-primary, #0d4d9c) 85%, #000); font-size: 12px; border-radius: 10px; background: var(--app-primary-soft, rgba(13, 77, 156, 0.12)); }

.wf-doc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wf-doc__label { margin-bottom: 8px; color: var(--text-color); font-size: 12.5px; font-weight: 700; }
.wf-doc__label--spaced { margin-top: 16px; }
.wf-doc .ant-upload-wrapper, .wf-doc .ant-upload { display: block; width: 100%; }
.wf-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 170px; color: var(--secondary-text-color); text-align: center; cursor: pointer; border: 2px dashed var(--border-color); border-radius: 16px; background: color-mix(in srgb, var(--app-primary, #0d4d9c) 3%, transparent); transition: border-color 0.18s ease, background 0.18s ease; }
.wf-drop .anticon { color: var(--app-primary, #0d4d9c); font-size: 26px; }
.wf-drop strong { color: var(--text-color); font-size: 13.5px; }
.wf-drop small { font-size: 12px; }
.wf-drop:hover { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 7%, transparent); }
.wf-doc__frame { overflow: hidden; border: 1px solid var(--border-color); border-radius: 16px; }
.wf-doc__thumb { position: relative; display: grid; place-items: center; width: 100%; height: 170px; padding: 0; overflow: hidden; cursor: zoom-in; border: 0; background: color-mix(in srgb, var(--text-color) 5%, var(--card-bg)); }
.wf-doc__thumb img { width: 100%; height: 100%; object-fit: contain; }
.wf-doc__zoom { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; background: rgba(15, 23, 42, 0.65); opacity: 0; transition: opacity 0.18s ease; }
.wf-doc__thumb:hover .wf-doc__zoom { opacity: 1; }
.wf-doc__file { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #dc2626; font-size: 34px; }
.wf-doc__file small { font-size: 11px; font-weight: 800; }
.wf-doc__actions { display: flex; justify-content: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--border-color); }
.wf-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.wf-mini { position: relative; height: 110px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 14px; background: color-mix(in srgb, var(--text-color) 5%, var(--card-bg)); }
.wf-mini__thumb { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; cursor: zoom-in; border: 0; background: transparent; }
.wf-mini__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wf-mini__remove { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; color: #fff; font-size: 11px; cursor: pointer; border: 0; border-radius: 50%; background: rgba(220, 38, 38, 0.9); }
.wf-mini--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--app-primary, #0d4d9c); font-size: 20px; cursor: pointer; border: 2px dashed color-mix(in srgb, var(--app-primary, #0d4d9c) 40%, var(--border-color)); background: transparent; }
.wf-mini--add small { color: var(--secondary-text-color); font-size: 11.5px; font-weight: 700; }
.wf-mini--add:hover { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 6%, transparent); }

.wf-actionbar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 18px; background: color-mix(in srgb, var(--card-bg) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.06); }
.wf-actionbar__right { display: flex; gap: 8px; }
.wf-actionbar .ant-btn { height: 42px; min-width: 110px; border-radius: 12px; font-weight: 600; }
.wf-page .ant-btn-primary.wf-save { color: #fff; border-color: var(--app-primary, #0d4d9c); background: var(--app-primary, #0d4d9c); box-shadow: 0 8px 18px color-mix(in srgb, var(--app-primary, #0d4d9c) 28%, transparent); }
.wf-crop-stage { display: flex; justify-content: center; padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--text-color) 6%, var(--card-bg)); }
.wf-crop-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wf-crop-footer small { color: var(--secondary-text-color); font-size: 12px; }
.wf-crop-footer > span { display: flex; gap: 8px; }
@media (max-width: 1100px) { .wf-layout { grid-template-columns: 1fr; } .wf-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .wf-aside, .wf-doc-pair { grid-template-columns: 1fr; }
  .wf-actionbar { flex-direction: column-reverse; align-items: stretch; }
  .wf-actionbar__right .ant-btn { flex: 1; }
}

/* ---- Tour management board + live tracking (screens-tours.js) ------------------------------------------------------- */
.tb-page {
  --tb-bg: #f5f7fa; --tb-card: #fff; --tb-border: #e5e7eb; --tb-text: #1a1a1a; --tb-muted: #6b7280; --tb-soft: #f8fafc;
  --tb-primary: var(--app-primary, #0d4d9c);
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 1700px; margin-inline: auto; padding: 8px;
  min-height: calc(100dvh - 112px); background: var(--tb-bg); color: var(--tb-text); border-radius: 12px;
}
html.dark-theme .tb-page { --tb-bg: #0f0f0f; --tb-card: #1a1a1a; --tb-border: #2a2a2a; --tb-text: #f1f1f1; --tb-muted: #9ca3af; --tb-soft: #222; }
.tb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tb-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--tb-text); }
.tb-head p { margin: 2px 0 0; color: var(--tb-muted); font-size: 13px; }
.tb-head__actions { display: flex; gap: 8px; }
.tb-tabs { display: flex; gap: 4px; padding: 4px; background: var(--tb-card); border: 1px solid var(--tb-border); border-radius: 10px; width: fit-content; max-width: 100%; }
.tb-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 0; border-radius: 7px; background: transparent; color: var(--tb-muted); font-weight: 600; cursor: pointer; }
.tb-tabs button:hover { color: var(--tb-text); background: var(--tb-soft); }
.tb-tabs button.is-active { background: var(--tb-primary); color: #fff; }
.tb-tabs button b { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #10b981; color: #fff; font-size: 11px; line-height: 18px; }

.tb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.tb-kpi { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--tb-card); border: 1px solid var(--tb-border); border-left: 4px solid var(--kpi); border-radius: 10px; min-width: 0; }
.tb-kpi.is-clickable { cursor: pointer; }
.tb-kpi.is-clickable:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.tb-kpi__icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 9px; color: var(--kpi); background: color-mix(in srgb, var(--kpi) 14%, transparent); font-size: 17px; }
.tb-kpi__body { display: flex; flex-direction: column; min-width: 0; }
.tb-kpi__body small { color: var(--tb-muted); font-size: 12px; }
.tb-kpi__body strong { font-size: 20px; line-height: 1.25; color: var(--tb-text); }
.tb-kpi__body span { color: var(--tb-muted); font-size: 11.5px; line-height: 1.35; }

.tb-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--tb-card); border: 1px solid var(--tb-border); border-radius: 12px; min-width: 0; }
.tb-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb-presets { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--tb-border); border-radius: 8px; background: var(--tb-soft); }
.tb-presets button { padding: 4px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--tb-muted); font-size: 13px; cursor: pointer; }
.tb-presets button.is-active { background: var(--tb-card); color: var(--tb-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.tb-range { width: 250px; }
.tb-search { flex: 1 1 260px; min-width: 200px; }
.tb-filter { width: 190px; }
.tb-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 2px; border-top: 1px dashed var(--tb-border); }
.tb-summary { color: var(--tb-muted); font-size: 12.5px; padding-top: 6px; }
.tb-view { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--tb-border); border-radius: 8px; }
.tb-view button { width: 32px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--tb-muted); cursor: pointer; }
.tb-view button.is-active { background: var(--tb-primary); color: #fff; }
.tb-muted { color: var(--tb-muted); }
.tb-tour, .tb-cust, .tb-exp, .tb-time { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tb-tour span, .tb-cust span, .tb-exp span { color: var(--tb-muted); font-size: 12px; }
.tb-time span { font-size: 12.5px; white-space: nowrap; }
.tb-time em { font-style: normal; font-size: 12px; color: var(--tb-primary); font-weight: 600; }
html.dark-theme .tb-time em { color: #69b1ff; }
.tb-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-person > div { display: flex; flex-direction: column; min-width: 0; }
.tb-person strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-person span { color: var(--tb-muted); font-size: 12px; }
.tb-pager { display: flex; justify-content: center; padding-top: 6px; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.tb-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--tb-border); border-top: 4px solid var(--tb-status); border-radius: 10px; background: var(--tb-card); }
.tb-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tb-card__ref { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--tb-muted); }
.tb-card__ref strong { color: var(--tb-text); }
.tb-card__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: 8px; background: var(--tb-soft); }
.tb-card__metrics div { display: flex; flex-direction: column; min-width: 0; }
.tb-card__metrics small { color: var(--tb-muted); font-size: 11px; }
.tb-card__metrics strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-card footer { display: flex; justify-content: flex-end; }

.tb-live { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; height: calc(100dvh - 230px); min-height: 480px; }
.tb-live-loading { display: grid; place-items: center; min-height: 420px; }
.tb-live-side { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; background: var(--tb-card); border: 1px solid var(--tb-border); border-radius: 12px; }
.tb-live-head { display: flex; justify-content: space-between; align-items: center; }
.tb-live-head > div { display: flex; flex-direction: column; }
.tb-live-head span { color: var(--tb-muted); font-size: 12px; }
.tb-live-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-live-chips button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--tb-border); border-radius: 14px; background: transparent; color: var(--tb-text); font-size: 12px; cursor: pointer; }
.tb-live-chips button i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip); }
.tb-live-chips button b { color: var(--tb-muted); font-weight: 600; }
.tb-live-chips button.is-active { border-color: var(--chip); background: color-mix(in srgb, var(--chip) 14%, transparent); }
.tb-live-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; flex: 1; margin-right: -4px; padding-right: 4px; }
.tb-live-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; border-left: 3px solid var(--live); border-radius: 8px; background: var(--tb-soft); color: var(--tb-text); text-align: left; cursor: pointer; }
.tb-live-item:hover { border-color: var(--tb-border); border-left-color: var(--live); }
.tb-live-item.is-selected { border-color: var(--tb-primary); border-left-color: var(--live); }
.tb-live-item__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tb-live-item__body strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-live-item__state { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--live); font-weight: 600; }
.tb-live-item__state i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.tb-live-item__meta { font-size: 12px; color: var(--tb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-live-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.tb-live-item__side small { color: var(--tb-muted); font-size: 11px; }
.tb-live-item__side em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #eb2f96; }
.tb-lost { color: #ef4444; }
.tb-live-map { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--tb-border); border-radius: 12px; }
.tb-live-legend { position: absolute; left: 10px; bottom: 30px; z-index: 500; display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.94); color: #1f2937; font-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.tb-live-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tb-live-legend i { width: 10px; height: 10px; border-radius: 50%; }
.tb-live-legend i.is-lost { border: 2px dashed #ef4444; width: 8px; height: 8px; }
.live-pin-wrap { background: transparent; border: 0; }
.live-pin { position: relative; width: 34px; height: 34px; }
.live-pin__dot { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 700 11px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.live-pin__pulse { position: absolute; inset: -6px; border-radius: 50%; opacity: 0.35; animation: tb-pulse 1.8s ease-out infinite; }
@keyframes tb-pulse { from { transform: scale(0.6); opacity: 0.5; } to { transform: scale(1.4); opacity: 0; } }
.live-pop { min-width: 220px; font-size: 12.5px; line-height: 1.55; }
.live-pop__name { font-size: 14px; font-weight: 700; }
.live-pop__meta { color: #6b7280; margin-bottom: 4px; }
.live-pop__status { font-weight: 600; }
.live-pop__links { display: flex; gap: 12px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e5e7eb; }

@media (max-width: 900px) {
  .tb-live { grid-template-columns: 1fr; height: auto; }
  .tb-live-side { max-height: 360px; }
  .tb-live-map { height: 460px; }
  .tb-range, .tb-filter { width: 100%; }
}

/* ---- Attendance register (screens-attendance.js; layout tokens from .tb-page) ---------------------------------------- */
.at-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tb-kpi.is-active { box-shadow: 0 0 0 2px var(--kpi) inset; background: color-mix(in srgb, var(--kpi) 7%, var(--tb-card)); }
.at-daynav { display: inline-flex; align-items: center; gap: 4px; }
.at-views { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--tb-border); border-radius: 8px; background: var(--tb-soft); }
.at-views button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--tb-muted); font-size: 13px; cursor: pointer; }
.at-views button.is-active { background: var(--tb-primary); color: #fff; }
.at-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--st); background: color-mix(in srgb, var(--st) 12%, transparent); border: 1px solid color-mix(in srgb, var(--st) 35%, transparent); white-space: nowrap; }
.at-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.at-flags .ant-tag { margin: 0; font-size: 11px; line-height: 18px; }
.at-punch { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; white-space: nowrap; }
.at-punch span:first-child { color: #16a34a; font-weight: 600; }
.at-punch span:last-child { color: #dc2626; font-weight: 600; }
.at-punch em { color: #ea580c; font-style: normal; font-weight: 500; }
.at-where { display: flex; flex-direction: column; gap: 1px; font-size: 12px; min-width: 0; }
.at-where .is-in { color: #16a34a; }
.at-where .is-off { color: #d97706; }
.at-where small { color: var(--tb-muted); }
.at-where a { font-size: 12px; }
.at-table .ant-table-row { cursor: pointer; }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.at-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--tb-border); border-left: 4px solid var(--st); border-radius: 10px; background: var(--tb-card); cursor: pointer; }
.at-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.at-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.at-card__date { font-size: 12.5px; color: var(--tb-muted); }
.at-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 8px; background: var(--tb-soft); }
.at-card__grid div { display: flex; flex-direction: column; }
.at-card__grid small { color: var(--tb-muted); font-size: 11px; }
.at-card__grid strong { font-size: 13.5px; }
.at-hint { margin: 2px 0 0; color: var(--tb-muted); font-size: 12.5px; }
.at-loading { display: grid; place-items: center; min-height: 280px; }
@media (max-width: 700px) { .at-views button span { display: none; } }
.at-auto { display: inline-flex; align-items: baseline; gap: 4px; color: var(--tb-muted); text-decoration: line-through dotted; }
.at-auto small { text-decoration: none; font-size: 10.5px; padding: 0 5px; border-radius: 8px; background: #fef3c7; color: #92400e; }
.at-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---- Settings hub (screens-settings-a.js TA.screens.settings) ---------------------------------------------------------- */
.st-page {
  --st-bg: #f5f7fa; --st-card: #fff; --st-border: #e5e7eb; --st-text: #111827; --st-muted: #6b7280; --st-soft: #f8fafc;
  --st-primary: var(--app-primary, #0d4d9c);
  display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1400px; margin-inline: auto; padding: 8px;
  color: var(--st-text);
}
html.dark-theme .st-page { --st-bg: #0f0f0f; --st-card: #1a1a1a; --st-border: #2a2a2a; --st-text: #f1f1f1; --st-muted: #9ca3af; --st-soft: #222; }
.st-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, var(--st-primary), color-mix(in srgb, var(--st-primary) 55%, #7c3aed)); box-shadow: 0 6px 20px color-mix(in srgb, var(--st-primary) 25%, transparent); }
.st-hero__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.st-hero__logo { width: 52px; height: 52px; object-fit: contain; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); }
.st-hero h1 { margin: 0; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.2; }
.st-hero p { margin: 2px 0 0; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; }
.st-plan { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); font-weight: 600; }
.st-hero__me { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 40px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); }
.st-hero__me > div { display: flex; flex-direction: column; }
.st-hero__me strong { color: #fff; font-size: 14px; }
.st-hero__me span { color: rgba(255, 255, 255, 0.8); font-size: 12px; }
.st-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--st-border); border-radius: 12px; background: color-mix(in srgb, var(--st-card) 92%, transparent); backdrop-filter: blur(10px); }
.st-search { height: 42px; border-radius: 10px; }
.st-search input { font-size: 14.5px; }
.st-kbd { padding: 0 6px; border: 1px solid var(--st-border); border-bottom-width: 2px; border-radius: 5px; color: var(--st-muted); font-size: 11px; font-family: inherit; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chips::-webkit-scrollbar { display: none; }
.st-chips button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--st-border); border-radius: 18px; background: var(--st-card); color: var(--st-text); font-size: 13px; cursor: pointer; white-space: nowrap; }
.st-chips button .anticon { color: var(--c); }
.st-chips button b { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--st-soft); color: var(--st-muted); font-size: 11px; font-weight: 600; text-align: center; }
.st-chips button:hover { border-color: var(--c); }
.st-chips button.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--st-card)); font-weight: 600; }
.st-chips button.is-active b { background: var(--c); color: #fff; }
.st-section { display: flex; flex-direction: column; gap: 10px; }
.st-section header { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.st-section h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--st-text); }
.st-section header p { margin: 0; color: var(--st-muted); font-size: 12.5px; }
.st-section__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); font-size: 16px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.st-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 84px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); color: var(--st-text); text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.st-card:hover, .st-card:focus-visible { border-color: var(--c); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 18%, transparent); transform: translateY(-1px); outline: none; }
.st-card__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 20px; }
.st-card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.st-card__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.st-card__title em { padding: 0 7px; border-radius: 9px; background: #fef3c7; color: #92400e; font-size: 10.5px; font-style: normal; font-weight: 600; }
.st-card__desc { color: var(--st-muted); font-size: 12.5px; line-height: 1.4; }
.st-card mark { padding: 0 1px; border-radius: 3px; background: #fde68a; color: inherit; }
.st-card__arrow { color: var(--st-muted); font-size: 12px; transition: transform 0.15s, color 0.15s; }
.st-card:hover .st-card__arrow { color: var(--c); transform: translateX(3px); }
.st-section--recent .st-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.st-section--recent .st-card { min-height: 64px; padding: 10px 12px; }
.st-section--recent .st-card__desc { display: none; }
.st-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; border: 1px dashed var(--st-border); border-radius: 12px; color: var(--st-muted); text-align: center; }
.st-empty .anticon { font-size: 28px; }
.st-empty strong { color: var(--st-text); }
.st-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--st-border); color: var(--st-muted); font-size: 12px; }
@media (max-width: 640px) {
  .st-hero { padding: 14px; }
  .st-hero__me { width: 100%; }
  .st-grid { grid-template-columns: 1fr; }
}

/* ---- Third-party integrations (screens-settings-integrations.js TA.screens.integrations) ------------------------------- */
.int-page {
  --i-card: #fff; --i-border: #e5e7eb; --i-text: #111827; --i-muted: #6b7280; --i-soft: #f8fafc; --i-primary: var(--app-primary, #0d4d9c);
  display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1400px; margin-inline: auto; padding: 8px; color: var(--i-text);
}
html.dark-theme .int-page { --i-card: #1a1a1a; --i-border: #2a2a2a; --i-text: #f1f1f1; --i-muted: #9ca3af; --i-soft: #222; }
.int-hero { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, var(--i-primary), color-mix(in srgb, var(--i-primary) 50%, #0f766e)); box-shadow: 0 6px 20px color-mix(in srgb, var(--i-primary) 25%, transparent); }
.int-hero__copy { max-width: 620px; }
.int-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 2px 10px 2px 6px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 12.5px; cursor: pointer; }
.int-back:hover { background: rgba(255, 255, 255, 0.25); }
.int-hero h1 { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: 24px; font-weight: 700; }
.int-hero p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; }
.int-hero__stats { display: flex; flex-wrap: wrap; gap: 8px; }
.int-stat { display: flex; align-items: center; gap: 10px; min-width: 120px; padding: 8px 14px 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.13); }
.int-stat > .anticon { color: var(--c); font-size: 18px; }
.int-stat > div { display: flex; flex-direction: column; line-height: 1.15; }
.int-stat strong { color: #fff; font-size: 20px; }
.int-stat span { color: rgba(255, 255, 255, 0.8); font-size: 11.5px; }
.int-hero__refresh { position: absolute; top: 14px; right: 16px; background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #fff !important; }
.int-how { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.int-how li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--i-border); border-radius: 20px; background: var(--i-card); color: var(--i-text); font-size: 13px; }
.int-how li:not(:last-child)::after { content: '›'; margin-left: 4px; color: var(--i-muted); }
.int-how b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--i-primary) 14%, transparent); color: var(--i-primary); font-size: 12px; }
.int-section { display: flex; flex-direction: column; gap: 10px; }
.int-section > header h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--i-text); }
.int-section > header p { margin: 2px 0 0; color: var(--i-muted); font-size: 12.5px; }
.int-mono { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); }
.int-conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.int-conn { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--i-border); border-top: 4px solid var(--h); border-radius: 12px; background: var(--i-card); }
.int-conn > header { display: flex; align-items: center; gap: 12px; }
.int-conn__title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.int-conn__title strong { font-size: 15.5px; }
.int-conn__title span { color: var(--i-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-health { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 12px; color: var(--h); background: color-mix(in srgb, var(--h) 12%, transparent); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.int-health i { width: 8px; height: 8px; border-radius: 50%; background: var(--h); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h) 25%, transparent); }
.int-conn__steps { display: flex; flex-wrap: wrap; gap: 6px; }
.int-step { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px dashed var(--i-border); border-radius: 12px; color: var(--i-muted); font-size: 12px; }
.int-step.is-done { border-style: solid; border-color: color-mix(in srgb, #16a34a 40%, transparent); color: #16a34a; background: color-mix(in srgb, #16a34a 8%, transparent); }
.int-conn__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 10px; border-radius: 10px; background: var(--i-soft); }
.int-conn__facts div { min-width: 0; }
.int-conn__facts dt { color: var(--i-muted); font-size: 11px; }
.int-conn__facts dd { margin: 0; font-size: 13px; font-weight: 600; }
.int-conn__error { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 12.5px; }
html.dark-theme .int-conn__error { background: rgba(220, 38, 38, 0.15); color: #fca5a5; }
.int-conn > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px solid var(--i-border); padding-top: 12px; }
.int-conn__spacer { flex: 1; }
.int-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.int-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.int-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--i-border); border-radius: 18px; background: var(--i-card); color: var(--i-text); font-size: 13px; cursor: pointer; }
.int-chips button .anticon { color: var(--c); }
.int-chips button b { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--i-soft); color: var(--i-muted); font-size: 11px; text-align: center; }
.int-chips button.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--i-card)); font-weight: 600; }
.int-chips button.is-active b { background: var(--c); color: #fff; }
.int-search { width: 260px; max-width: 100%; }
.int-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.int-provider { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--i-border); border-radius: 12px; background: var(--i-card); transition: border-color 0.15s, box-shadow 0.15s; }
.int-provider:hover { border-color: var(--c); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 15%, transparent); }
.int-provider.is-live { border-color: color-mix(in srgb, #16a34a 45%, var(--i-border)); }
.int-provider > header { display: flex; align-items: center; gap: 10px; }
.int-provider > header div { display: flex; flex-direction: column; min-width: 0; }
.int-provider > header strong { font-size: 14.5px; }
.int-provider > header div span { color: var(--i-muted); font-size: 12px; }
.int-provider p { flex: 1; margin: 0; color: var(--i-muted); font-size: 12.5px; line-height: 1.45; }
.int-provider__foot { display: flex; flex-wrap: wrap; gap: 6px; }
.int-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.int-badge.is-live { color: #15803d; background: #dcfce7; }
.int-badge.is-pending { color: #92400e; background: #fef3c7; }
.int-badge.is-count { color: var(--i-primary); background: color-mix(in srgb, var(--i-primary) 12%, transparent); }
.int-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; border: 1px dashed var(--i-border); border-radius: 12px; color: var(--i-muted); text-align: center; }
.int-empty > .anticon { font-size: 28px; color: var(--i-primary); }
.int-empty strong { color: var(--i-text); }
@media (max-width: 720px) {
  .int-conn-grid { grid-template-columns: 1fr; }
  .int-conn__facts { grid-template-columns: repeat(2, 1fr); }
  .int-hero__refresh { position: static; }
}

/* ---- Integration data explorer (screens-settings-integrations.js explorer()) ------------------------------------------ */
.ex-modal { --x-card: #fff; --x-border: #e5e7eb; --x-text: #111827; --x-muted: #6b7280; --x-soft: #f8fafc; --x-primary: var(--app-primary, #0d4d9c); }
html.dark-theme .ex-modal, html.dark-theme .ex-record { --x-card: #1a1a1a; --x-border: #2a2a2a; --x-text: #f1f1f1; --x-muted: #9ca3af; --x-soft: #222; }
.ex-record { --x-card: #fff; --x-border: #e5e7eb; --x-text: #111827; --x-muted: #6b7280; --x-soft: #f8fafc; }
.ex-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-right: 36px; }
.ex-mono { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; color: #fff; font-weight: 700; font-size: 14px; background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.ex-head__copy { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ex-head__copy strong { font-size: 17px; line-height: 1.25; }
.ex-head__copy span { color: var(--x-muted); font-size: 12.5px; font-weight: 400; }
.ex-ready { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; }
.ex-ready.is-ready { color: #15803d; background: #dcfce7; }
.ex-ready.is-pending { color: #92400e; background: #fef3c7; }
.ex-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--x-border); border-radius: 10px; background: var(--x-soft); }
.ex-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--x-muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.ex-seg button:hover { color: var(--x-text); }
.ex-seg button.is-active { background: var(--x-card); color: var(--x-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.ex-seg button b { padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--x-primary) 12%, transparent); color: var(--x-primary); font-size: 11px; }
.ex-pane { display: flex; flex-direction: column; gap: 10px; color: var(--x-text); }
.ex-switches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.ex-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ex-search { flex: 1 1 320px; min-width: 240px; }
.ex-filter { width: 180px; }
.ex-range { width: 270px; }
.ex-active { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--x-primary) 35%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--x-primary) 8%, transparent); color: var(--x-primary); font-size: 12.5px; cursor: pointer; }
.ex-chip .anticon { font-size: 10px; }
.ex-chip--clear { border-color: transparent; background: transparent; color: var(--x-muted); text-decoration: underline; }
.ex-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--x-border); border-radius: 10px; background: var(--x-soft); font-size: 13px; color: var(--x-muted); }
.ex-summary strong { color: var(--x-text); font-size: 18px; }
.ex-summary__spacer { flex: 1; }
.ex-src { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.ex-src.is-live { color: #1d4ed8; background: #dbeafe; }
.ex-src.is-stored { color: #6d28d9; background: #ede9fe; }
.ex-of { color: var(--x-muted); }
.ex-table .ant-table-row { cursor: pointer; }
.ex-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ex-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-who span { color: var(--x-muted); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ex-contact { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.ex-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-contact .anticon { color: var(--x-muted); margin-right: 2px; }
.ex-contact em, .ex-none { color: var(--x-muted); font-style: normal; opacity: 0.7; }
.ex-pill { display: inline-block; padding: 1px 10px; border-radius: 12px; color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ex-source { display: inline-block; max-width: 100%; padding: 0 8px; border-radius: 6px; background: var(--x-soft); border: 1px solid var(--x-border); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ex-when { color: var(--x-muted); font-size: 12.5px; }
.ex-open { color: var(--x-muted); }
.ex-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 16px; border: 1px dashed var(--x-border); border-radius: 12px; color: var(--x-muted); text-align: center; }
.ex-empty > .anticon { font-size: 30px; color: var(--x-primary); }
.ex-empty strong { color: var(--x-text); font-size: 15px; }
.ex-record { display: flex; flex-direction: column; gap: 14px; }
.ex-record__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-record dl { margin: 0; border: 1px solid var(--x-border); border-radius: 10px; overflow: hidden; }
.ex-record dl div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--x-border); }
.ex-record dl div:last-child { border-bottom: 0; }
.ex-record dt { color: var(--x-muted); font-size: 12.5px; }
.ex-record dd { margin: 0; font-size: 13.5px; word-break: break-word; }
.ex-raw summary { cursor: pointer; color: var(--x-primary); font-size: 13px; }
.ex-raw pre { margin: 8px 0 0; padding: 10px; max-height: 360px; overflow: auto; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 12px; }
.ex-pane--mapping { max-width: 1100px; }
.ex-map-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; }
.ex-map-status > .anticon { font-size: 20px; margin-top: 2px; }
.ex-map-status > div { display: flex; flex-direction: column; }
.ex-map-status span { font-size: 12.5px; opacity: 0.85; }
.ex-map-status.is-ready { color: #166534; background: #dcfce7; }
.ex-map-status.is-pending { color: #92400e; background: #fef3c7; }
.ex-map-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ex-map-meta div { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--x-border); border-radius: 10px; background: var(--x-soft); }
.ex-map-meta small { color: var(--x-muted); font-size: 11.5px; }
.ex-map-meta strong { font-size: 13.5px; }
.ex-map-arrow { color: var(--x-muted); }
.ex-hint { margin: 0; color: var(--x-muted); font-size: 12.5px; }
.ex-map-actions { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .ex-map-meta { grid-template-columns: repeat(2, 1fr); }
  .ex-filter, .ex-range { width: 100%; }
}
.ex-drawer.ant-drawer { z-index: 1100; }
.ex-when { white-space: nowrap; }
.ex-table .ex-who { max-width: 300px; }
.ex-table .ex-contact { max-width: 230px; }
.ex-cell { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ---- Explorer: field mapping (editor + sticky side panel) ---------------------------------------------------------- */
.ex-map { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ex-map-editor { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--x-border); border-radius: 12px; background: var(--x-card); }
.ex-map-editor > header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ex-map-editor h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--x-text); }
.ex-map-editor h3 b { padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--x-primary) 12%, transparent); color: var(--x-primary); font-size: 12px; }
.ex-map-editor header p { margin: 2px 0 0; color: var(--x-muted); font-size: 12.5px; }
.ex-map-editor code { padding: 0 5px; border-radius: 4px; background: var(--x-soft); border: 1px solid var(--x-border); }
.ex-map-sample { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 18px; background: var(--x-soft); border: 1px solid var(--x-border); font-size: 12.5px; color: var(--x-muted); }
.ex-map-sample strong { color: var(--x-text); }
.ex-map-head, .ex-map-row { display: grid; grid-template-columns: 28px minmax(200px, 1.3fr) 20px minmax(150px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) 36px; gap: 10px; align-items: start; }
.ex-map-head { padding: 0 10px; color: var(--x-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ex-map-rows { display: flex; flex-direction: column; gap: 6px; }
.ex-map-row { padding: 10px; border: 1px solid var(--x-border); border-radius: 10px; background: var(--x-card); transition: border-color 0.15s; }
.ex-map-row:hover { border-color: color-mix(in srgb, var(--x-primary) 40%, var(--x-border)); }
.ex-map-row.has-error { border-color: #fca5a5; background: color-mix(in srgb, #dc2626 4%, var(--x-card)); }
.ex-map-row__n { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 4px; border-radius: 50%; background: var(--x-soft); color: var(--x-muted); font-size: 11.5px; font-weight: 600; }
.ex-map-row .ex-map-arrow { margin-top: 9px; color: var(--x-muted); }
.ex-map-row__src, .ex-map-row__dst { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ex-src-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ex-src-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 9px; border: 1px solid var(--x-border); background: var(--x-soft); color: var(--x-muted); font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ex-src-chip i { font-style: normal; font-size: 10px; opacity: 0.7; }
.ex-src-chip.is-used { border-color: color-mix(in srgb, #16a34a 45%, transparent); background: #dcfce7; color: #15803d; }
.ex-src-chip.is-missing { border-style: dashed; color: #b45309; }
.ex-map-row__sample { min-width: 0; padding-top: 6px; font-size: 12.5px; }
.ex-sample { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--x-text); }
.ex-err { color: #dc2626; font-size: 11.5px; }
.ex-map-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.ex-map-side .ex-map-status { margin: 0; }
.ex-map-facts { margin: 0; border: 1px solid var(--x-border); border-radius: 10px; overflow: hidden; background: var(--x-card); }
.ex-map-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--x-border); }
.ex-map-facts div:last-child { border-bottom: 0; }
.ex-map-facts dt { color: var(--x-muted); font-size: 12.5px; }
.ex-map-facts dd { margin: 0; font-size: 13px; font-weight: 600; text-align: right; }
.ex-map-notes { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--x-muted); }
.ex-map-save { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--x-border); border-radius: 10px; background: var(--x-soft); }
.ex-dirty { display: inline-flex; align-items: center; gap: 5px; color: #b45309; font-size: 12.5px; font-weight: 600; }
.ex-clean { display: inline-flex; align-items: center; gap: 5px; color: #15803d; font-size: 12.5px; }
@media (max-width: 1200px) {
  .ex-map { grid-template-columns: 1fr; }
  .ex-map-side { position: static; }
}
@media (max-width: 900px) {
  .ex-map-head { display: none; }
  .ex-map-row { grid-template-columns: 24px 1fr 36px; }
  .ex-map-row .ex-map-arrow { display: none; }
  .ex-map-row__src, .ex-map-row__dst, .ex-map-row__label, .ex-map-row__sample { grid-column: 2; }
}

/* ---- Explorer: true full screen + responsive, export dialog ---------------------------------------------------------- */
.ex-modal.ant-modal { top: 0; width: 100vw !important; max-width: 100vw; margin: 0; padding: 0; }
.ex-modal .ant-modal-content { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding: 0; border-radius: 0; }
.ex-modal .ant-modal-header { flex: 0 0 auto; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--x-border); background: var(--x-card); }
.ex-modal .ant-modal-close { top: 18px; right: 16px; }
.ex-modal .ant-modal-body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 14px 20px 12px; overflow: auto; }
/* the table body gets whatever the viewport leaves below the controls */
.ex-modal { --ex-table-h: calc(100dvh - 380px); }
.ex-table .ant-table-content { min-height: 220px; }
.ex-table .ant-pagination { margin: 10px 0 0 !important; }
.ex-drawer .ant-drawer-content-wrapper { max-width: 100vw; }
.ex-exp-modal .ant-modal-body { padding-top: 4px; }
.ex-exp-title { display: inline-flex; align-items: center; gap: 8px; }
.ex-exp { display: flex; flex-direction: column; gap: 8px; }
.ex-exp__label { margin-top: 4px; color: var(--x-muted, #6b7280); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ex-fmts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ex-fmt { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid #e5e7eb; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.ex-fmt > .anticon { font-size: 26px; color: #64748b; }
.ex-fmt span { display: flex; flex-direction: column; }
.ex-fmt small { color: #6b7280; font-size: 11.5px; }
.ex-fmt.is-active { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 6%, transparent); }
.ex-fmt.is-active > .anticon-file-excel { color: #16a34a; }
.ex-fmt.is-active > .anticon-file-pdf { color: #dc2626; }
.ex-scopes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ex-scope { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.ex-scope i { flex: 0 0 16px; width: 16px; height: 16px; border: 2px solid #cbd5e1; border-radius: 50%; }
.ex-scope span { display: flex; flex-direction: column; min-width: 0; }
.ex-scope small { color: #6b7280; font-size: 11.5px; }
.ex-scope.is-active { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 6%, transparent); }
.ex-scope.is-active i { border: 5px solid var(--app-primary, #0d4d9c); }
.ex-exp__summary { display: flex; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; color: #475569; font-size: 12.5px; }
.ex-exp__cols { display: flex; flex-wrap: wrap; gap: 4px; }
.ex-exp__cols span { padding: 0 8px; border-radius: 8px; border: 1px solid #e5e7eb; color: #6b7280; font-size: 11.5px; }
.ex-exp-run { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; text-align: center; }
.ex-exp-run span { color: #6b7280; font-size: 12.5px; max-width: 420px; }
html.dark-theme .ex-fmt, html.dark-theme .ex-scope, html.dark-theme .ex-exp__cols span { border-color: #333; }
html.dark-theme .ex-exp__summary { background: #222; color: #cbd5e1; }
html.dark-theme .ex-modal .ant-modal-header { background: #1a1a1a; }
@media (max-width: 1024px) {
  .ex-modal { --ex-table-h: calc(100dvh - 420px); }
  .ex-filter, .ex-range { flex: 1 1 200px; width: auto; }
}
@media (max-width: 760px) {
  .ex-modal .ant-modal-header { padding: 10px 12px; }
  .ex-modal .ant-modal-body { padding: 10px 12px; }
  .ex-modal { --ex-table-h: 55dvh; }
  .ex-head { gap: 8px; padding-right: 28px; }
  .ex-head__copy { flex: 1 1 calc(100% - 60px); }
  .ex-head .ex-seg { width: 100%; }
  .ex-head .ex-seg button { flex: 1; justify-content: center; }
  .ex-switches { flex-direction: column; }
  .ex-switches .ex-seg { width: 100%; }
  .ex-switches .ex-seg button { flex: 1; justify-content: center; padding: 5px 8px; }
  .ex-search, .ex-filter, .ex-range { flex: 1 1 100%; width: 100%; min-width: 0; }
  .ex-summary strong { font-size: 16px; }
  .ex-fmts, .ex-scopes { grid-template-columns: 1fr; }
  .ex-table .ant-pagination-options, .ex-table .ant-pagination-total-text { display: none; }
}

/* ---- Integrations: Refresh in the hero flow (it overlapped the stats), Sync all progress -------------------------------- */
.int-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.int-hero .int-hero__refresh { position: static; }
.int-sync { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--i-primary) 30%, transparent); background: color-mix(in srgb, var(--i-primary) 6%, var(--i-card)); }
.int-sync__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.int-sync__head strong { font-size: 13.5px; }
.int-sync__head span { margin-left: auto; color: var(--i-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.int-sync__bar { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--i-primary) 15%, transparent); }
.int-sync__bar i { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 3px; background: var(--i-primary); animation: int-sync-slide 1.4s ease-in-out infinite; }
@keyframes int-sync-slide { from { left: -35%; } to { left: 100%; } }
.int-sync__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--i-muted); font-size: 12px; }
@media (max-width: 720px) { .int-hero__side { align-items: stretch; width: 100%; } .int-hero .int-hero__refresh { align-self: flex-end; } }
.ex-table .ant-table-thead > tr > th { position: sticky; top: 0; z-index: 2; }
.int-badge.is-beta { color: #6d28d9; background: #ede9fe; }
html.dark-theme .int-badge.is-beta { color: #c4b5fd; background: rgba(124, 58, 237, 0.2); }
.ex-amount { font-variant-numeric: tabular-nums; }
.ex-nosearch { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 320px; padding: 5px 10px; border: 1px dashed var(--x-border); border-radius: 8px; color: var(--x-muted); font-size: 12.5px; }
.ex-inline { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12.5px; }
.ex-inline .anticon { flex: 0 0 auto; color: var(--x-muted); }
.ex-inline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- App information (screens-settings-a.js TA.screens.appInfo) ----------------------------------------------------- */
.ab-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, var(--st-primary), color-mix(in srgb, var(--st-primary) 55%, #7cb305)); box-shadow: 0 6px 20px color-mix(in srgb, var(--st-primary) 25%, transparent); }
.ab-hero__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ab-hero h1 { margin: 0; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.2; }
.ab-hero p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 13.5px; }
.ab-hero p b { color: #fff; }
.ab-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ab-hero__side small { color: rgba(255, 255, 255, 0.75); font-size: 11.5px; }
.ab-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ab-health { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.95); font-size: 13px; font-weight: 600; }
.ab-health.is-up { color: #15803d; } .ab-health.is-warn { color: #b45309; } .ab-health.is-down { color: #b91c1c; } .ab-health.is-wait { color: #475569; }
.ab-health.is-up .anticon { animation: ab-pulse 2s ease-in-out infinite; }
@keyframes ab-pulse { 50% { opacity: 0.45; } }
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ab-stat { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); min-width: 0; }
.ab-stat__icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 19px; }
.ab-stat > div { display: flex; flex-direction: column; min-width: 0; }
.ab-stat > div > span { color: var(--st-muted); font-size: 12px; }
.ab-stat strong { overflow: hidden; color: var(--st-text); font-size: 18px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ab-stat small { color: var(--st-muted); font-size: 11.5px; }
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ab-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); overflow: hidden; }
.ab-card--wide { grid-column: 1 / -1; }
.ab-card header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--st-border); }
.ab-card h2 { flex: 1; margin: 0; color: var(--st-text); font-size: 15px; font-weight: 700; }
.ab-card__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); font-size: 16px; }
.ab-card dl { margin: 0; padding: 4px 14px 12px; }
.ab-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--st-border); }
.ab-row:last-of-type { border-bottom: 0; }
.ab-row dt { flex: 0 0 auto; color: var(--st-muted); font-size: 13px; }
.ab-row dd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; margin: 0; color: var(--st-text); font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }
.ab-row dd > .ant-progress { width: 120px; margin: 2px 0 0; }
.ab-row dd small { color: var(--st-muted); font-size: 11.5px; }
.ab-row dd .ant-tag { margin: 0; }
.ab-row code { padding: 1px 6px; border-radius: 5px; background: var(--st-soft); font-size: 12px; }
.ab-row dd:has(.ab-copy) { flex-direction: row; align-items: center; }
.ab-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--st-muted); cursor: pointer; }
.ab-copy:hover { background: var(--st-soft); color: var(--st-primary); }
.ab-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--st-primary, var(--app-primary, #0d4d9c)); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ab-link:hover { background: color-mix(in srgb, var(--st-primary) 10%, transparent); }
.ab-link .anticon { font-size: 10px; }
.ab-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 12px; background: var(--st-soft); color: var(--st-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ab-pill.is-up { background: #dcfce7; color: #15803d; } .ab-pill.is-down { background: #fee2e2; color: #b91c1c; }
html.dark-theme .ab-pill.is-up { background: rgba(34, 197, 94, 0.15); color: #4ade80; } html.dark-theme .ab-pill.is-down { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.ab-muted { color: var(--st-muted); }
.ab-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.ab-actions .ant-btn { display: inline-flex; align-items: center; gap: 6px; }
.ab-hint { margin: 8px 0 0; color: var(--st-muted); font-size: 12px; }
.ab-error { display: flex; gap: 10px; margin-top: 8px; padding: 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; }
.ab-error > .anticon { font-size: 20px; }
.ab-error div { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
html.dark-theme .ab-error { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.ab-req { padding: 0 14px 10px; }
.ab-req__head, .ab-req__row { display: grid; grid-template-columns: 1.1fr 1.6fr 1.6fr 32px; gap: 12px; align-items: center; padding: 10px 4px; font-size: 13px; }
.ab-req__head { color: var(--st-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--st-border); }
.ab-req__row { border-bottom: 1px dashed var(--st-border); color: var(--st-text); }
.ab-req__row:last-child { border-bottom: 0; }
.ab-req__row span:first-child { font-weight: 600; }
.ab-req__row span:nth-child(2) { color: var(--st-muted); }
.ab-req__row.is-fail { background: color-mix(in srgb, #ef4444 6%, transparent); }
.ab-ok { color: #16a34a; font-size: 16px; } .ab-bad { color: #dc2626; font-size: 16px; }
@media (max-width: 1100px) { .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-stat { padding: 10px; gap: 8px; } .ab-stat__icon { flex-basis: 34px; height: 34px; font-size: 16px; } .ab-stat strong { font-size: 15px; }
  .ab-hero { padding: 14px; } .ab-hero__side { align-items: flex-start; width: 100%; } .ab-hero__actions { justify-content: flex-start; }
  .ab-req__head { display: none; }
  .ab-req__row { grid-template-columns: 1fr 28px; gap: 2px 8px; }
  .ab-req__row span:first-child { grid-column: 1; } .ab-req__row span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; }
  .ab-req__row span:nth-child(3) { grid-column: 1; grid-row: 3; } .ab-req__row span:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---- Organization structure (screens-settings-a.js TA.screens.organization) ------------------------------------------ */
.og-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, var(--st-primary), color-mix(in srgb, var(--st-primary) 50%, #7c3aed)); box-shadow: 0 6px 20px color-mix(in srgb, var(--st-primary) 25%, transparent); }
.og-hero h1 { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: 24px; font-weight: 700; }
.og-hero p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; }
.og-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.og-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); min-width: 0; }
.og-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.og-tabs::-webkit-scrollbar { display: none; }
.og-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-card); color: var(--st-text); font-size: 13.5px; cursor: pointer; }
.og-tabs button .anticon { color: var(--c); }
.og-tabs button b { min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--st-soft); color: var(--st-muted); font-size: 11.5px; text-align: center; }
.og-tabs button:hover { border-color: var(--c); }
.og-tabs button.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--st-card)); font-weight: 600; }
.og-tabs button.is-active b { background: var(--c); color: #fff; }
.og-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; color: #78350f; }
.og-banner > .anticon { font-size: 20px; color: #d97706; }
.og-banner > div { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 220px; }
.og-banner > div > span { color: #92400e; font-size: 12.5px; }
html.dark-theme .og-banner { border-color: rgba(217, 119, 6, 0.4); background: rgba(217, 119, 6, 0.1); color: #fcd34d; }
html.dark-theme .og-banner > div > span { color: #fbbf24; }
.og-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.og-search { width: 280px; max-width: 100%; }
.og-status { width: 210px; }
.og-help { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; color: var(--st-muted); font-size: 12.5px; }
.og-table .ant-table-thead > tr > th { font-size: 12.5px; }
.og-name { display: flex; align-items: center; gap: 10px; }
.og-name div { display: flex; flex-direction: column; min-width: 0; }
.og-name small { color: var(--st-muted); font-size: 11.5px; }
.og-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); font-size: 12.5px; font-weight: 700; }
.og-count { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--st-primary) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--st-primary) 7%, transparent); color: var(--st-primary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.og-count:hover { background: color-mix(in srgb, var(--st-primary) 14%, transparent); }
.og-pill { display: inline-block; min-width: 24px; padding: 0 8px; border-radius: 10px; background: var(--st-soft); font-weight: 600; }
.og-zero, .og-muted { color: var(--st-muted); }
.og-actions { display: inline-flex; gap: 2px; }
.og-foot { display: flex; justify-content: flex-start; }
.og-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 16px; border: 1px dashed var(--st-border); border-radius: 12px; text-align: center; }
.og-empty__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 28px; }
.og-empty h3 { margin: 4px 0 0; color: var(--st-text); font-size: 17px; }
.og-empty p { max-width: 460px; margin: 0; color: var(--st-muted); }
.og-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
.og-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.og-tree__card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); }
.og-tree__card.is-loose { border-style: dashed; }
.og-tree__card header { display: flex; align-items: center; gap: 10px; }
.og-tree__card header div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.og-tree__card header small { color: var(--st-muted); font-size: 11.5px; }
.og-tree__card ul { margin: 0 0 0 16px; padding: 0 0 0 12px; border-left: 2px solid var(--st-border); list-style: none; }
.og-tree__card li { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.og-tree__name { flex: 1; min-width: 0; font-size: 13px; }
.og-tree__name em, .og-people em { color: var(--st-muted); font-size: 11px; font-style: normal; }
.og-dot { width: 8px; height: 8px; margin-left: -17px; border-radius: 50%; background: #0d9488; box-shadow: 0 0 0 3px var(--st-card); }
.og-tree__card .ab-link { align-self: flex-start; }
.og-desigs { display: flex; flex-direction: column; gap: 8px; }
.og-desigs h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--st-text); font-size: 14px; }
.og-desigs > div { display: flex; flex-wrap: wrap; gap: 6px; }
.og-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 1px solid var(--st-border); border-radius: 16px; background: var(--st-card); color: var(--st-text); font-size: 13px; cursor: pointer; }
.og-chip:hover { border-color: #2563eb; }
.og-chip b { min-width: 22px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; font-size: 11.5px; text-align: center; }
.og-modal-title { display: inline-flex; align-items: center; gap: 8px; }
.og-modal-title .anticon { color: var(--c); }
.og-modal-help { margin: 0 0 12px; font-size: 12.5px; }
.og-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.og-people { margin: 0; padding: 0; list-style: none; }
.og-people button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.og-people button:hover { background: rgba(127, 127, 127, 0.1); }
.og-people div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.og-people small { overflow: hidden; color: #6b7280; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.og-people .anticon-right { color: #9ca3af; font-size: 11px; }
.og-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.og-pick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 16px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.og-pick.is-on { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); color: var(--app-primary, #0d4d9c); font-weight: 600; }
.og-import { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; margin: 8px 0; overflow-y: auto; }
.og-import__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.og-import__row > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.og-import__row small { color: #6b7280; font-size: 11.5px; }
.og-import__row b { min-width: 28px; padding: 1px 8px; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 12px; text-align: center; }
.og-import__row.is-on { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 6%, transparent); }
.og-check { display: grid; place-items: center; flex: 0 0 18px; height: 18px; border: 1.5px solid #cbd5e1; border-radius: 5px; color: #fff; font-size: 11px; }
.og-import__row.is-on .og-check { border-color: var(--app-primary, #0d4d9c); background: var(--app-primary, #0d4d9c); }
.og-import__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.og-import__foot label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
html.dark-theme .og-import__row, html.dark-theme .og-pick { border-color: #333; }
@media (max-width: 680px) {
  .og-hero { padding: 14px; } .og-hero__actions { width: 100%; }
  .og-search, .og-status { width: 100%; }
  .og-form-row { grid-template-columns: 1fr; gap: 0; }
}
.og-nowrap { white-space: nowrap; color: var(--st-muted); font-size: 12.5px; }

/* ---- Roles (screens-settings-roles.js) --------------------------------------------------------------------------------- */
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rl-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); transition: border-color 0.15s, box-shadow 0.15s; }
.rl-card:hover { border-color: #0f766e; box-shadow: 0 6px 18px rgba(15, 118, 110, 0.1); }
.rl-card > header { display: flex; align-items: center; gap: 10px; }
.rl-card > header > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rl-card > header strong { display: flex; align-items: center; gap: 6px; color: var(--st-text); font-size: 15px; }
.rl-card > header code { align-self: flex-start; padding: 0 6px; border-radius: 5px; background: var(--st-soft); color: var(--st-muted); font-size: 11px; }
.rl-master { padding: 0 7px; border-radius: 9px; background: #fef3c7; color: #92400e; font-size: 10.5px; font-style: normal; font-weight: 600; }
.rl-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-apps span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px dashed var(--st-border); border-radius: 12px; color: var(--st-muted); font-size: 12px; opacity: 0.7; }
.rl-apps span.is-on { border-style: solid; border-color: color-mix(in srgb, #0f766e 35%, transparent); background: color-mix(in srgb, #0f766e 9%, transparent); color: #0f766e; font-weight: 600; opacity: 1; }
html.dark-theme .rl-apps span.is-on { color: #5eead4; }
.rl-body { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--st-soft); }
.rl-body small { display: flex; justify-content: space-between; color: var(--st-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.rl-mods { display: flex; flex-wrap: wrap; gap: 5px; }
.rl-mods span { padding: 1px 8px; border-radius: 10px; background: var(--st-card); border: 1px solid var(--st-border); color: var(--st-text); font-size: 12px; }
.rl-mods span.is-more { border-style: dashed; color: var(--st-muted); }
.rl-full { display: inline-flex; align-items: center; gap: 6px; color: #15803d; font-size: 13px; font-weight: 600; }
.rl-warn { display: inline-flex; align-items: flex-start; gap: 6px; color: #b45309; font-size: 12.5px; line-height: 1.4; }
.rl-warn .anticon { margin-top: 2px; }
.rl-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; font-size: 12px; }
.rl-appcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rl-appcard { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.rl-appcard > .anticon { margin-top: 2px; color: #0f766e; font-size: 16px; }
.rl-appcard span:last-child { display: flex; flex-direction: column; min-width: 0; }
.rl-appcard small { color: #6b7280; font-size: 11.5px; }
.rl-appcard.is-on { border-color: #0f766e; background: rgba(15, 118, 110, 0.06); }
.rl-appcard.is-on .og-check { border-color: #0f766e; background: #0f766e; }
.rl-picker { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.rl-picker__bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; background: var(--ant-color-bg-elevated, #fff); font-size: 12.5px; }
.rl-picker__bar .ant-input-affix-wrapper { width: 220px; }
.rl-picker__bar > span { color: #6b7280; }
.rl-group { padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; }
.rl-group header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rl-group header span { color: #6b7280; font-size: 12px; }
.rl-group header .ab-link { margin-left: auto; }
.rl-group > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.rl-legacy { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.rl-code { display: inline-block; padding: 5px 10px; border-radius: 6px; background: rgba(127, 127, 127, 0.1); }
html.dark-theme .rl-appcard, html.dark-theme .rl-group { border-color: #333; }
html.dark-theme .rl-picker__bar { background: #1f1f1f; }

/* ---- My profile (screens-settings-profile.js) ------------------------------------------------------------------------- */
.pf-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-aside { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.pf-id { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pf-id strong { margin-top: 6px; color: var(--st-text); font-size: 16px; }
.pf-id > span { color: var(--st-muted); font-size: 13px; }
.pf-id .ant-tag { margin: 4px 0 0; }
.pf-facts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 0; border-top: 1px solid var(--st-border); border-bottom: 1px solid var(--st-border); }
.pf-facts div { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.pf-facts dt { color: var(--st-muted); }
.pf-facts dd { overflow: hidden; margin: 0; color: var(--st-text); text-overflow: ellipsis; white-space: nowrap; }
.pf-complete > div { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--st-muted); }
.pf-complete b { color: var(--st-text); }
.pf-complete small { color: var(--st-muted); font-size: 11.5px; }
.pf-nav { display: flex; flex-direction: column; gap: 2px; }
.pf-nav button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--st-text); font-size: 13px; text-align: left; cursor: pointer; }
.pf-nav button:hover { background: var(--st-soft); color: var(--st-primary); }
.pf-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-main > form { display: flex; flex-direction: column; gap: 14px; }
.pf-card { scroll-margin-top: 80px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.pf-card > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--st-border); }
.pf-card h2 { margin: 0; color: var(--st-text); font-size: 15px; font-weight: 700; }
.pf-card header p { margin: 0; color: var(--st-muted); font-size: 12.5px; }
.pf-card__body { padding: 14px 16px 2px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.pf-security { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 10px; background: var(--st-soft); }
.pf-security div { display: flex; flex-direction: column; }
.pf-security span { color: var(--st-muted); font-size: 12.5px; }
.pf-sessions__head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.pf-sessions { margin: 0; padding: 0; list-style: none; }
.pf-sessions li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--st-border); }
.pf-sessions li div { display: flex; flex-direction: column; min-width: 0; }
.pf-sessions small { color: var(--st-muted); font-size: 12px; }
.pf-device { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--st-soft); color: var(--st-muted); font-size: 16px; }
.pf-card .ab-actions { padding-bottom: 14px; }
.pf-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--st-border); border-radius: 12px; background: color-mix(in srgb, var(--st-card) 94%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); backdrop-filter: blur(8px); color: var(--st-muted); font-size: 13px; }
.pf-savebar > span { display: inline-flex; align-items: center; gap: 6px; }
.pf-savebar > div { display: flex; gap: 8px; }
.pf-savebar.is-dirty { border-color: #f59e0b; color: #b45309; }
@media (max-width: 900px) { .pf-layout { grid-template-columns: 1fr; } .pf-aside { position: static; } .pf-nav { flex-direction: row; flex-wrap: wrap; } }

/* ---- Customers (screens-settings-customers.js) ------------------------------------------------------------------------ */
.cu-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cu-name div { display: flex; flex-direction: column; min-width: 0; }
.cu-name strong { overflow: hidden; color: var(--st-text); text-overflow: ellipsis; white-space: nowrap; }
.cu-name small { overflow: hidden; color: var(--st-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cu-addr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cu-addr > span:first-child { display: -webkit-box; overflow: hidden; flex: 1; min-width: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.5px; line-height: 1.4; }
.cu-pin, .cu-nopin { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; white-space: nowrap; }
.cu-pin { border: 1px solid color-mix(in srgb, #059669 35%, transparent); background: color-mix(in srgb, #059669 8%, transparent); color: #059669; cursor: pointer; }
.cu-pin:hover { background: color-mix(in srgb, #059669 16%, transparent); }
.cu-nopin { color: var(--st-muted); opacity: 0.7; }
.cu-inline { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.cu-inline code { padding: 1px 6px; border-radius: 5px; background: var(--st-soft); font-size: 12px; }
.cu-inline a { color: var(--st-text); }
.cu-pager { display: flex; justify-content: center; padding: 6px 0 2px; }
.cu-search { width: 360px; }
.cu-map { height: calc(100vh - 300px); min-height: 380px; overflow: hidden; border: 1px solid var(--st-border); border-radius: 12px; }

/* ---- Assets (screens-settings-assets.js) ------------------------------------------------------------------------------ */
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.as-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); transition: border-color 0.15s, box-shadow 0.15s; }
.as-card:hover { border-color: #2563eb; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.1); }
.as-card.is-off { opacity: 0.85; }
.as-media { position: relative; display: grid; place-items: center; height: 130px; background: var(--st-soft); }
.as-media .ant-image, .as-media img { width: 100%; height: 130px; object-fit: contain; }
.as-media__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; font-size: 26px; }
.as-badge { position: absolute; top: 8px; right: 8px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.as-badge.is-ok { background: #dcfce7; color: #15803d; } .as-badge.is-off { background: #fee2e2; color: #b91c1c; }
.as-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 12px 6px; min-width: 0; }
.as-body strong { overflow: hidden; color: var(--st-text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.as-sn { display: flex; align-items: center; gap: 2px; min-height: 24px; }
.as-sn code { padding: 0 6px; border-radius: 5px; background: var(--st-soft); color: var(--st-muted); font-size: 11.5px; }
.as-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.as-tags span { padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, #2563eb 9%, transparent); color: #2563eb; font-size: 11.5px; }
.as-body p { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--st-muted); font-size: 12.5px; }
.as-stock { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 6px 10px; border-radius: 8px; background: var(--st-soft); color: var(--st-muted); font-size: 12px; }
.as-stock b { color: var(--st-text); font-size: 16px; }
.as-stock b.is-low { color: #d97706; } .as-stock b.is-out { color: #dc2626; }
.as-card > footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px 12px; }
.as-switch { display: inline-flex; align-items: center; gap: 6px; color: var(--st-muted); font-size: 12px; cursor: pointer; }
.as-sep { flex: 0 0 1px; align-self: stretch; margin: 4px 2px; background: var(--st-border); }
html.dark-theme .as-badge.is-ok { background: rgba(34, 197, 94, 0.18); color: #4ade80; } html.dark-theme .as-badge.is-off { background: rgba(239, 68, 68, 0.18); color: #f87171; }

/* ---- Policies (screens-settings-policy.js) ---------------------------------------------------------------------------- */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pl-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); transition: border-color 0.15s, box-shadow 0.15s; }
.pl-card:hover { border-color: #7c3aed; box-shadow: 0 6px 18px rgba(124, 58, 237, 0.1); }
.pl-card.is-off { opacity: 0.8; }
.pl-card > header { display: flex; align-items: flex-start; gap: 10px; }
.pl-card > header > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pl-card > header strong { overflow: hidden; color: var(--st-text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.pl-card > header small { color: var(--st-muted); font-size: 12px; }
.pl-card > header .ant-tag { margin: 0; }
.pl-doc { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, #dc2626 10%, transparent); color: #dc2626; font-size: 18px; }
.pl-card > p { display: -webkit-box; overflow: hidden; flex: 1; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--st-muted); font-size: 13px; }
.pl-card > footer { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--st-border); }
.pl-spacer { flex: 1; }
.pl-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; }
.pl-file > .anticon { color: #dc2626; font-size: 18px; }
.pl-file span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.pl-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; }
.pl-pdf { width: 100%; height: 60vh; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; }
html.dark-theme .pl-file, html.dark-theme .pl-pdf { border-color: #333; }
@media (max-width: 680px) { .rl-appcards { grid-template-columns: 1fr; } .cu-search { width: 100%; } }
.as-media { overflow: hidden; } .as-media .ant-image-img { max-height: 130px; object-fit: contain; }

/* ---- Shared form sections in dialogs (TA.formSection) ---------------------------------------------------------------- */
.fs-sec { margin-bottom: 12px; padding: 12px 14px 2px; border: 1px solid #eef0f3; border-radius: 12px; background: rgba(127, 127, 127, 0.03); }
.fs-sec > header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.fs-sec > header > .anticon { margin-top: 3px; color: var(--app-primary, #0d4d9c); font-size: 15px; }
.fs-sec > header div { display: flex; flex-direction: column; }
.fs-sec > header strong { font-size: 13.5px; }
.fs-sec > header small { color: #6b7280; font-size: 12px; }
.fs-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
html.dark-theme .fs-sec { border-color: #2a2a2a; background: rgba(255, 255, 255, 0.02); }
@media (max-width: 680px) { .fs-grid3 { grid-template-columns: 1fr; } }

/* ---- Attendance mode (screens-settings-attendance-policy.js) ----------------------------------------------------------- */
.ap-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ap-mode { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1.5px solid var(--st-border); border-radius: 12px; background: var(--st-card); color: var(--st-text); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ap-mode:hover { border-color: var(--c); }
.ap-mode.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, var(--st-card)); }
.ap-mode.is-on .og-check { border-color: var(--c); background: var(--c); }
.ap-mode__icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 17px; }
.ap-mode__text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.ap-mode__text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 14px; }
.ap-mode__text em, .ap-mode__text i { padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-style: normal; font-weight: 600; }
.ap-mode__text em { background: #dcfce7; color: #15803d; }
.ap-mode__text i { background: var(--st-soft); color: var(--st-muted); }
.ap-mode__text small { color: var(--st-muted); font-size: 12px; line-height: 1.4; }
.ap-rows { display: flex; flex-direction: column; border-top: 1px solid var(--st-border); }
.ap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--st-border); }
.ap-row > div:first-child { display: flex; flex: 1; flex-direction: column; min-width: 240px; }
.ap-row small { color: var(--st-muted); font-size: 12px; }
.ap-row .ant-form-item { margin: 0; }
.ap-enrol { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.ap-person { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--st-border); border-radius: 12px; }
.ap-person > img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.ap-person > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 200px; }
.ap-person small { color: var(--st-muted); font-size: 12px; }
.ap-person__actions { display: flex; gap: 6px; }
.ap-pick { display: flex; align-items: center; gap: 6px; margin: 0; }
.st-page > .pf-card, .st-page > .pf-savebar { margin: 0; }

/* ---- Shifts & roster (screens-settings-shifts.js) -------------------------------------------------------------------- */
.sh-grid, .si-grid, .lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sh-card, .si-card, .lo-card, .lv-card { display: flex; flex-direction: column; gap: 10px; max-width: 520px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); transition: border-color 0.15s, box-shadow 0.15s; }
.sh-card:hover { border-color: #d97706; box-shadow: 0 6px 18px rgba(217, 119, 6, 0.1); }
.sh-card.is-off, .si-card.is-off, .lo-card.is-off, .lv-card.is-off { opacity: 0.75; }
.sh-card > header, .si-card > header, .lo-card > header, .lv-card > header { display: flex; align-items: center; gap: 10px; }
.sh-card > header > div, .si-card > header > div, .lo-card > header > div, .lv-card > header > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; }
.sh-card > header strong, .si-card > header strong, .lo-card > header strong, .lv-card > header strong { overflow: hidden; max-width: 100%; color: var(--st-text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.sh-card > header code, .si-card > header code { padding: 0 6px; border-radius: 5px; background: var(--st-soft); color: var(--st-muted); font-size: 11px; }
.lo-card > header small { color: var(--st-muted); font-size: 12px; }
.sh-time { display: flex; flex-direction: column; }
.sh-time b { color: var(--st-text); font-size: 20px; }
.sh-time span { color: var(--st-muted); font-size: 12.5px; }
.sh-track { position: relative; height: 10px; border-radius: 6px; background: var(--st-soft); overflow: hidden; }
.sh-track span { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #f59e0b, #d97706); }
.sh-track i { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--st-muted) 30%, transparent); }
.sh-ticks { display: flex; justify-content: space-between; margin-top: -6px; color: var(--st-muted); font-size: 10px; }
.sh-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-rules span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; background: var(--st-soft); color: var(--st-muted); font-size: 11.5px; }
.sh-rules span.is-night { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
.sh-week { display: flex; align-items: center; gap: 4px; }
.sh-week span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; font-size: 11px; font-weight: 600; }
.sh-week span.is-off { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
.sh-week small { margin-left: 6px; color: var(--st-muted); font-size: 11.5px; }
.sh-card > footer, .si-card > footer, .lv-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--st-border); }
.sh-templates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100%, 620px); }
.sh-templates button { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-card); color: var(--st-text); cursor: pointer; }
.sh-templates button:hover { border-color: #d97706; }
.sh-templates span { color: var(--st-muted); font-size: 12px; }
.sh-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12.5px; color: #6b7280; }
.sh-quick button, .sh-target button, .si-radii button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid #d1d5db; border-radius: 16px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.sh-quick button:hover, .sh-target button:hover, .si-radii button:hover { border-color: var(--app-primary, #0d4d9c); }
.sh-target { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sh-target button.is-on, .si-radii button.is-on { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); color: var(--app-primary, #0d4d9c); font-weight: 600; }
.sh-preview { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #2563eb 7%, transparent); font-size: 13px; }
.sh-preview em { color: #4f46e5; font-style: normal; font-weight: 600; }
.sh-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.sh-days button { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border: 1px solid #d1d5db; border-radius: 10px; background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.sh-days button small { color: #16a34a; font-size: 10.5px; font-weight: 500; }
.sh-days button.is-off { border-color: #fca5a5; background: rgba(220, 38, 38, 0.07); color: #b91c1c; }
.sh-days button.is-off small { color: #b91c1c; }
.sh-weeknav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh-weeknav strong { min-width: 170px; text-align: center; }
.sh-roster { overflow-x: auto; border: 1px solid var(--st-border); border-radius: 12px; }
.sh-roster__row { display: grid; grid-template-columns: 220px repeat(7, minmax(110px, 1fr)); min-width: 990px; border-bottom: 1px solid var(--st-border); }
.sh-roster__row:last-child { border-bottom: 0; }
.sh-roster__row > span { padding: 8px; border-right: 1px solid var(--st-border); }
.sh-roster__row > span:last-child { border-right: 0; }
.sh-roster__head { background: var(--st-soft); color: var(--st-muted); font-size: 12px; font-weight: 600; }
.sh-roster__head span { display: flex; flex-direction: column; }
.sh-roster__head b { color: var(--st-text); font-size: 12.5px; }
.sh-roster__head span.is-today { background: color-mix(in srgb, #0d9488 12%, transparent); color: #0f766e; }
.sh-roster__who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sh-roster__cell { display: flex; flex-direction: column; gap: 4px; }
.sh-roster__cell button { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid color-mix(in srgb, #d97706 35%, transparent); border-radius: 8px; background: color-mix(in srgb, #d97706 9%, transparent); color: var(--st-text); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.sh-roster__cell button small { color: var(--st-muted); font-weight: 400; }
.sh-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
@media (max-width: 680px) { .sh-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Sites & office locations ----------------------------------------------------------------------------------------- */
.si-map { height: 320px; overflow: hidden; border: 1px solid var(--st-border); border-radius: 12px; }
.si-card:hover, .lo-card:hover { border-color: #059669; box-shadow: 0 6px 18px rgba(5, 150, 105, 0.1); }
.si-card > p, .lo-card > p { display: flex; gap: 6px; margin: 0; color: var(--st-muted); font-size: 13px; line-height: 1.45; }
.lo-card > p .anticon { margin-top: 3px; }
.si-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.si-meta span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; background: var(--st-soft); color: var(--st-muted); font-size: 12px; }
.si-meta span a { color: inherit; }
.si-meta .si-radius { background: color-mix(in srgb, #059669 10%, transparent); color: #047857; font-weight: 600; }
.si-meta .lo-warn { background: #fef3c7; color: #92400e; }
.si-card > footer a { font-size: 12px; }
.lo-card > footer { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--st-border); }
.si-regen { color: #6b7280; cursor: pointer; }
.si-regen:hover { color: var(--app-primary, #0d4d9c); }
.si-loc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
.si-mini { height: 220px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 10px; }
.si-mini--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 12px; border-style: dashed; background: rgba(5, 150, 105, 0.04); color: inherit; text-align: center; cursor: pointer; }
.si-mini--empty .anticon { color: #059669; font-size: 26px; }
.si-mini--empty small { color: #6b7280; font-size: 12px; }
.si-radii { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.lo-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; }
.lo-coords { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(22, 163, 74, 0.08); color: #15803d; font-size: 12.5px; }
.lo-coords.is-missing { background: #fef3c7; color: #92400e; }
.lo-mapinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lo-mapinfo div { display: flex; flex-direction: column; }
.lo-mapinfo small { color: #6b7280; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.lo-mapframe { height: 420px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 10px; }
html.dark-theme .si-mini, html.dark-theme .lo-mapframe { border-color: #333; }
@media (max-width: 680px) { .si-loc { grid-template-columns: 1fr; } .si-map { height: 240px; } }

/* ---- Leave policy (screens-settings-leave-policy.js) ------------------------------------------------------------------ */
.lv-card:hover { border-color: #db2777; box-shadow: 0 6px 18px rgba(219, 39, 119, 0.1); }
.lv-card > header > div { flex-direction: row; align-items: center; gap: 6px; }
.lv-card > header .ant-tag { margin: 0; }
.lv-quota { display: flex; align-items: baseline; gap: 6px; }
.lv-quota b { color: var(--st-text); font-size: 26px; line-height: 1; }
.lv-quota span { color: var(--st-muted); font-size: 12.5px; }
.lv-rules { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-rules span { padding: 1px 8px; border-radius: 10px; background: var(--st-soft); color: var(--st-muted); font-size: 11.5px; }
.lv-switch { display: inline-flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; }
.lv-switch > span { display: flex; flex-direction: column; }
.lv-switch small { color: #6b7280; font-size: 12px; }
.lv-switches { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.lv-avail { display: flex; align-items: center; gap: 8px; }
.lv-avail b { min-width: 28px; font-size: 15px; }
.lv-avail .ant-progress { flex: 1; margin: 0; }
.lv-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.lv-month { border: 1px solid var(--st-border); border-radius: 12px; overflow: hidden; }
.lv-month h3 { display: flex; justify-content: space-between; margin: 0; padding: 8px 12px; background: var(--st-soft); color: var(--st-text); font-size: 13.5px; }
.lv-month h3 span { color: var(--st-muted); font-weight: 500; }
.lv-hol { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--st-border); }
.lv-hol:first-of-type { border-top: 0; }
.lv-hol > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.lv-hol strong { display: flex; align-items: center; gap: 6px; color: var(--st-text); }
.lv-hol strong em { padding: 0 6px; border-radius: 8px; background: #fef3c7; color: #92400e; font-size: 10.5px; font-style: normal; }
.lv-hol small { color: var(--st-muted); font-size: 12px; }
.lv-hol__date { display: flex; flex: 0 0 44px; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 10px; background: color-mix(in srgb, #d97706 11%, transparent); color: #b45309; }
.lv-hol__date b { font-size: 17px; line-height: 1.1; }
.lv-hol__date small { color: inherit; font-size: 10.5px; text-transform: uppercase; }
.lv-hol.is-past { opacity: 0.55; }
.lv-hol.is-next { background: color-mix(in srgb, #d97706 6%, transparent); }
.lv-hol.is-off .lv-hol__date { background: var(--st-soft); color: var(--st-muted); }

/* ---- Ticket settings (screens-settings-ticket.js) --------------------------------------------------------------------- */
.tk-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.tk-hubcard { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); color: var(--st-text); text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.tk-hubcard:hover, .tk-hubcard:focus-visible { border-color: var(--c); box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 16%, transparent); transform: translateY(-1px); outline: none; }
.tk-hubcard > header { display: flex; align-items: flex-start; gap: 12px; }
.tk-hubcard > header > div { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.tk-hubcard > header strong { font-size: 15.5px; }
.tk-hubcard > header small { color: var(--st-muted); font-size: 12.5px; line-height: 1.4; }
.tk-hubcard > header > b { color: var(--c); font-size: 24px; line-height: 1; }
.tk-hubcard__icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 19px; }
.tk-hubcard__chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; }
.tk-hubcard__chips span { display: inline-flex; align-items: center; gap: 5px; padding: 1px 4px 1px 9px; border: 1px solid var(--st-border); border-radius: 12px; font-size: 12px; }
.tk-hubcard__chips span i { padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 11px; font-style: normal; font-weight: 600; }
.tk-hubcard__chips span.is-more { padding-right: 9px; border-style: dashed; color: var(--st-muted); }
.tk-hubcard > footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--st-border); color: var(--st-muted); font-size: 12.5px; }
.tk-hubcard__go { display: inline-flex; align-items: center; gap: 4px; color: var(--c); font-weight: 600; }
.tk-hubcard__go .anticon { font-size: 10px; transition: transform 0.15s; }
.tk-hubcard:hover .tk-hubcard__go .anticon { transform: translateX(3px); }
.tk-used { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 10px; background: color-mix(in srgb, #16a34a 10%, transparent); color: #15803d; font-size: 12.5px; font-weight: 600; }
.tk-edit { display: flex; align-items: center; gap: 6px; max-width: 420px; }
.tk-area { width: 100%; }
.tk-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.tk-preview span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 12px; font-size: 12.5px; }
.tk-preview .is-new { background: rgba(22, 163, 74, 0.1); color: #15803d; }
.tk-preview .is-dup { background: rgba(127, 127, 127, 0.12); color: #6b7280; text-decoration: line-through; }

/* ---- Product categories (screens-settings-b.js TA.screens.categories) ------------------------------------------------- */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ct-card { display: flex; flex-direction: column; max-width: 420px; overflow: hidden; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); transition: border-color 0.15s, box-shadow 0.15s; }
.ct-card:hover { border-color: #7cb305; box-shadow: 0 6px 18px rgba(124, 179, 5, 0.12); }
.ct-media { display: grid; place-items: center; height: 140px; overflow: hidden; background: var(--st-soft); }
.ct-media .ant-image, .ct-media img { width: 100%; height: 140px; object-fit: cover; }
.ct-media.is-empty span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(124, 179, 5, 0.14); color: #5b8c00; font-size: 28px; font-weight: 700; }
.ct-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 14px 8px; min-width: 0; }
.ct-body strong { overflow: hidden; color: var(--st-text); font-size: 15.5px; text-overflow: ellipsis; white-space: nowrap; }
.ct-body code { align-self: flex-start; padding: 0 6px; border-radius: 5px; background: var(--st-soft); color: var(--st-muted); font-size: 11.5px; }
.ct-body p { display: -webkit-box; overflow: hidden; margin: 2px 0 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--st-muted); font-size: 12.5px; }
.ct-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 12px; }
.ct-card > footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px 14px; border-top: 1px solid var(--st-border); }
.ct-form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
.ct-form__image { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ct-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 180px; height: 180px; overflow: hidden; padding: 0; border: 1.5px dashed #c4cbd4; border-radius: 14px; background: rgba(124, 179, 5, 0.05); color: inherit; text-align: center; cursor: pointer; transition: border-color 0.15s; }
.ct-drop:hover { border-color: #7cb305; }
.ct-drop > .anticon { color: #7cb305; font-size: 30px; }
.ct-drop small { padding: 0 12px; color: #6b7280; font-size: 11.5px; }
.ct-drop.has-image { border-style: solid; }
.ct-drop img { width: 100%; height: 100%; object-fit: cover; }
.ct-drop__actions { display: flex; gap: 4px; }
.ct-file { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.ct-slug { display: inline-block; padding: 4px 10px; border-radius: 6px; background: rgba(127, 127, 127, 0.1); font-size: 12.5px; }
@media (max-width: 600px) { .ct-form { grid-template-columns: 1fr; } .ct-drop { width: 100%; } }
.ct-media > span { display: none; }
.ct-media.is-empty > img { display: none; }
.ct-media.is-empty > span { display: grid; }
.ct-drop__broken { display: none; flex-direction: column; align-items: center; gap: 4px; }
.ct-drop.is-broken img { display: none; }
.ct-drop.is-broken .ct-drop__broken { display: flex; }
.ct-drop__broken .anticon { color: #d97706; font-size: 28px; }
.ct-drop .ct-drop__broken { display: flex; }

/* ---- Expense categories (screens-settings-b.js TA.screens.expenseCategories) ----------------------------------------- */
.ec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ec-card { display: flex; flex-direction: column; gap: 10px; max-width: 520px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); transition: border-color 0.15s, box-shadow 0.15s; }
.ec-card:hover { border-color: var(--st-primary); box-shadow: 0 6px 18px rgba(13, 77, 156, 0.1); }
.ec-card.is-off { opacity: 0.72; }
.ec-card > header { display: flex; align-items: center; gap: 10px; }
.ec-card > header > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ec-card > header strong { overflow: hidden; color: var(--st-text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ec-card > header small { color: var(--st-muted); font-size: 12px; }
.ec-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ec-limits > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--st-soft); }
.ec-limits small { color: var(--st-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.ec-limits b { color: var(--st-text); font-size: 14.5px; }
.ec-usage { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--st-muted); font-size: 12.5px; }
.ec-usage b { color: var(--st-text); }
.ec-over { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 12.5px; }
html.dark-theme .ec-over { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.ec-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--st-border); font-size: 12px; }

/* ---- Approval matrix (screens-settings-a.js TA.screens.approvalMatrix) ------------------------------------------------- */
.am-list { display: flex; flex-direction: column; gap: 10px; }
.am-req { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 14px; border: 1px solid var(--st-border); border-left: 4px solid #2563eb; border-radius: 12px; background: var(--st-card); }
.am-req.is-late { border-left-color: #dc2626; }
.am-req.is-past { opacity: 0.6; }
.am-req__main { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 240px; }
.am-req__main strong { color: var(--st-text); font-size: 14.5px; }
.am-req__main small { color: var(--st-muted); font-size: 12px; }
.am-req__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.am-mod { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--c) 11%, transparent); color: var(--c); font-size: 11.5px; font-weight: 600; }
.am-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.am-steps { display: inline-flex; align-items: center; gap: 4px; }
.am-steps i { width: 18px; height: 6px; border-radius: 3px; background: var(--st-border); }
.am-steps i.is-done { background: #16a34a; } .am-steps i.is-now { background: #2563eb; }
.am-steps small { margin-left: 4px; color: var(--st-muted); font-size: 11.5px; }
.am-due { color: var(--st-muted); font-size: 12.5px; white-space: nowrap; }
.am-due.is-late { color: #dc2626; font-weight: 600; }
.am-comment { display: flex; flex: 1; align-items: flex-start; gap: 6px; min-width: 200px; margin: 0; padding: 6px 10px; border-left: 3px solid #d97706; border-radius: 6px; background: #fffbeb; color: #78350f; font-size: 13px; }
html.dark-theme .am-comment { background: rgba(217, 119, 6, 0.1); color: #fcd34d; }
.am-modules { display: flex; flex-direction: column; gap: 12px; }
.am-module { border: 1px solid var(--st-border); border-radius: 12px; overflow: hidden; }
.am-module > header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--c) 6%, var(--st-card)); }
.am-module > header > div { display: flex; flex: 1; flex-direction: column; }
.am-module > header small { color: var(--st-muted); font-size: 12px; }
.am-rule { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--st-border); }
.am-rule.is-off { opacity: 0.65; }
.am-rule__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.am-rule__head > span { flex: 1; font-size: 12.5px; }
.am-rule .og-actions { align-self: flex-end; }
.am-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.am-level { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-card); }
.am-level > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-size: 11.5px; }
.am-level > span { display: flex; flex-direction: column; }
.am-level small { color: var(--st-muted); font-size: 11.5px; }
.am-arrow { color: var(--st-muted); font-size: 11px; }
.am-esc { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 9px; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: 12px; }
.am-levels { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.am-levelrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; }
.am-levelrow__num { display: grid; place-items: center; flex: 0 0 28px; height: 28px; margin-top: 28px; border-radius: 50%; background: #0f766e; color: #fff; font-weight: 700; }
.am-levelrow__fields { display: grid; flex: 1; grid-template-columns: 1fr 1.4fr; gap: 0 10px; min-width: 0; }
.am-levelrow__tools { display: flex; flex-direction: column; margin-top: 26px; }
html.dark-theme .am-levelrow { border-color: #333; }
@media (max-width: 680px) { .am-levelrow__fields { grid-template-columns: 1fr; } }

/* ---- Appearance & brand (screens-settings-appearance.js) -------------------------------------------------------------- */
.apz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; align-items: start; }
.apz-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.apz-side__sticky { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 8px; }
.apz-side__title { display: flex; align-items: center; gap: 6px; color: var(--st-text); font-size: 13.5px; }
.apz-identity { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding-bottom: 6px; }
.apz-logobox { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.apz-logobox__views { display: grid; grid-template-columns: 1fr 1fr; width: 100%; overflow: hidden; border: 1px solid var(--st-border); border-radius: 12px; }
.apz-logobox__views span { display: grid; place-items: center; height: 96px; }
.apz-logobox__views .is-light { background: #ffffff; }
.apz-logobox__views .is-dark { background: #111827; }
.apz-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; }
.apz-logo.is-big { width: 64px; height: 64px; }
.apz-logo.is-small { width: 20px; height: 20px; }
.apz-logo.is-letter { display: grid; place-items: center; background: var(--p-primary, #0d4d9c); color: var(--p-onPrimary, #fff); font-weight: 700; }
.apz-logobox .apz-logo.is-letter { font-size: 26px; }
.apz-guide { display: flex; flex-wrap: wrap; gap: 6px; }
.apz-guide span { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 10px; background: var(--st-soft); color: var(--st-muted); font-size: 11.5px; }
.apz-live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--st-muted); cursor: pointer; white-space: nowrap; }
.pf-card > header .apz-live { flex: 0 0 auto; }
.apz-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.apz-palettes button { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-card); color: var(--st-text); font-size: 13px; cursor: pointer; }
.apz-palettes button span { flex: 0 0 26px; height: 26px; border-radius: 7px; }
.apz-palettes button:hover, .apz-palettes button.is-on { border-color: var(--st-primary); }
.apz-palettes button.is-on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-primary) 25%, transparent); font-weight: 600; }
.apz-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.apz-groups { margin-top: 6px; }
.apz-hint { margin: 8px 0 10px; font-size: 12.5px; }
.apz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding-bottom: 14px; }
.apz-field { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-card); }
.apz-field.is-bad { border-color: #dc2626; }
.apz-field > div { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.apz-field span { overflow: hidden; color: var(--st-text); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.apz-field small { color: #dc2626; font-size: 11px; }
.apz-swatch { position: relative; flex: 0 0 40px; height: 40px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 9px; cursor: pointer; }
.apz-swatch input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; }
/* preview mock-ups (colours from the draft through --p-* variables) */
.apz-preview { display: flex; flex-direction: column; gap: 10px; }
.apz-admin { display: grid; grid-template-columns: 120px 1fr; height: 300px; overflow: hidden; border: 1px solid var(--st-border); border-radius: 12px; background: var(--p-background); font-size: 11px; }
.apz-admin aside { display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; background: linear-gradient(180deg, var(--p-primary), var(--p-primaryDark)); color: var(--p-onPrimary); }
.apz-admin__brand { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 2px 4px; }
.apz-admin__brand b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.apz-admin aside > span { padding: 5px 8px; border-radius: 6px; opacity: 0.88; }
.apz-admin aside > span.is-on { background: var(--p-primaryDark); opacity: 1; font-weight: 700; }
.apz-admin main { display: flex; flex-direction: column; gap: 8px; padding: 8px; min-width: 0; }
.apz-admin__banner { display: flex; flex-direction: column; gap: 1px; padding: 10px; border-radius: 10px; background: linear-gradient(120deg, var(--p-primary), var(--p-primaryLight)); color: var(--p-onPrimary); }
.apz-admin__banner strong { font-size: 13px; }
.apz-admin__banner button { align-self: flex-end; margin-top: -18px; padding: 2px 10px; border: 0; border-radius: 6px; background: var(--p-surface); color: var(--p-primary); font-size: 10.5px; font-weight: 700; }
.apz-admin__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.apz-admin__tiles span, .apz-phone__body > span { display: flex; align-items: center; gap: 5px; overflow: hidden; padding: 4px; border: 1px solid var(--p-border); border-radius: 7px; background: var(--p-surface); color: var(--p-textPrimary); font-size: 9.5px; white-space: nowrap; }
.apz-admin__tiles i, .apz-phone__body i { flex: 0 0 14px; height: 14px; border-radius: 4px; }
.apz-admin__card { flex: 1; padding: 8px; border: 1px solid var(--p-border); border-radius: 9px; background: var(--p-surface); color: var(--p-textPrimary); }
.apz-admin__card p { margin: 2px 0 6px; color: var(--p-textSecondary); }
.apz-tags { display: flex; gap: 4px; margin-bottom: 6px; }
.apz-tags em { padding: 0 6px; border-radius: 6px; font-size: 9.5px; font-style: normal; font-weight: 600; }
.apz-tags .t-s { background: color-mix(in srgb, var(--p-success) 15%, transparent); color: var(--p-success); }
.apz-tags .t-w { background: color-mix(in srgb, var(--p-warning) 15%, transparent); color: var(--p-warning); }
.apz-tags .t-e { background: color-mix(in srgb, var(--p-error) 15%, transparent); color: var(--p-error); }
.apz-tags .t-i { background: color-mix(in srgb, var(--p-info) 15%, transparent); color: var(--p-info); }
.apz-btns { display: flex; align-items: center; gap: 6px; }
.apz-btns button { padding: 2px 10px; border: 1px solid var(--p-border); border-radius: 6px; background: var(--p-surface); color: var(--p-textPrimary); font-size: 10.5px; }
.apz-btns button.is-primary { border-color: var(--p-primary); background: var(--p-primary); color: var(--p-onPrimary); }
.apz-btns a { color: var(--p-secondary); font-size: 10.5px; }
.apz-phone { align-self: center; width: 200px; overflow: hidden; border: 6px solid #111827; border-radius: 22px; background: var(--p-background); font-size: 10.5px; }
.apz-phone__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--p-primary); color: var(--p-onPrimary); }
.apz-phone__body { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.apz-phone__hero { display: flex; flex-direction: column; padding: 8px; border-radius: 9px; background: linear-gradient(120deg, var(--p-primaryDark), var(--p-primary)); color: var(--p-onPrimary); }
.apz-phone__body > button { margin-top: 2px; padding: 5px; border: 0; border-radius: 8px; background: var(--p-primary); color: var(--p-onPrimary); font-size: 11px; font-weight: 700; }
@media (max-width: 1200px) { .apz-layout { grid-template-columns: 1fr; } .apz-side__sticky { position: static; } }
@media (max-width: 640px) { .apz-identity { grid-template-columns: 1fr; } .apz-admin { grid-template-columns: 90px 1fr; } }

/* ---- App & menu settings (screens-settings-app-menu.js) --------------------------------------------------------------- */
.mn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.mn-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mn-note { display: flex; gap: 6px; margin: 0; font-size: 12.5px; }
.mn-note .anticon { margin-top: 3px; }
.mn-count { flex: 1; color: var(--st-muted); font-size: 13px; }
.mn-count b { color: var(--st-text); }
.mn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.mn-tile { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--st-border); border-radius: 11px; background: var(--st-card); transition: border-color 0.15s, background 0.15s; }
.mn-tile.is-on { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 5%, var(--st-card)); }
.mn-tile.is-locked { opacity: 0.55; }
.mn-tile > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.mn-tile strong { overflow: hidden; color: var(--st-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mn-tile small { color: var(--st-muted); font-size: 11.5px; }
.mn-tile.is-on small { color: var(--c); font-weight: 600; }
.mn-tile__icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--st-soft); color: var(--st-muted); font-size: 16px; }
.mn-tile.is-on .mn-tile__icon { background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.mn-lock { color: var(--st-muted); }
.am-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.mn-phone { width: 260px; --p-primary: var(--app-primary, #0d4d9c); --p-onPrimary: var(--app-onPrimary, #fff); --p-background: var(--st-soft); }
.mn-phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 420px; overflow-y: auto; padding: 8px; }
.mn-phone__grid span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 9px; background: var(--st-card); color: var(--c); font-size: 15px; text-align: center; }
.mn-phone__grid small { overflow: hidden; width: 100%; color: var(--st-text); font-size: 9px; line-height: 1.2; text-overflow: ellipsis; }
.mn-phone__grid em, .mn-sidebar em { grid-column: 1 / -1; padding: 20px 6px; color: var(--st-muted); font-size: 12px; text-align: center; }
.mn-sidebar { display: flex; flex-direction: column; gap: 2px; max-height: 520px; overflow-y: auto; padding: 10px 8px; border-radius: 12px; background: linear-gradient(180deg, var(--app-primary, #0d4d9c), var(--app-primaryDark, #083567)); color: var(--app-onPrimary, #fff); }
.mn-sidebar span { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; font-size: 12.5px; }
.mn-sidebar span:first-child { background: rgba(0, 0, 0, 0.18); font-weight: 600; }
.mn-ticket { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.mn-current { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #bbf7d0; border-radius: 10px; background: #f0fdf4; color: #15803d; }
.mn-current > .anticon { font-size: 20px; }
.mn-current div { display: flex; flex-direction: column; }
.mn-current small { color: #166534; font-size: 11.5px; }
.mn-current strong { color: var(--st-text); }
html.dark-theme .mn-current { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.08); }
@media (max-width: 1100px) { .mn-layout { grid-template-columns: 1fr; } }

/* ---- Language (screens-settings-a.js TA.screens.language) ------------------------------------------------------------- */
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lg-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1.5px solid var(--st-border); border-radius: 14px; background: var(--st-card); color: var(--st-text); text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.lg-card:hover:not([disabled]) { border-color: var(--st-primary); }
.lg-card.is-on { border-color: var(--st-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 15%, transparent); background: color-mix(in srgb, var(--st-primary) 4%, var(--st-card)); }
.lg-card.is-on .og-check { border-color: var(--st-primary); background: var(--st-primary); }
.lg-card[disabled] { cursor: wait; opacity: 0.7; }
.lg-badge { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--st-primary) 11%, transparent); color: var(--st-primary); font-size: 19px; font-weight: 700; }
.lg-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.lg-text strong { font-size: 17px; }
.lg-text strong small { color: var(--st-muted); font-size: 12.5px; font-weight: 500; }
.lg-text > span { color: var(--st-muted); font-size: 12.5px; }
.lg-text q { margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--st-soft); color: var(--st-text); font-size: 13px; quotes: none; }

/* ---- API keys & webhooks (screens-settings-developer.js) -------------------------------------------------------------- */
.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.dv-card { display: flex; flex-direction: column; gap: 10px; max-width: 560px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); }
.dv-card.is-off { opacity: 0.6; }
.dv-card > header { display: flex; align-items: center; gap: 10px; }
.dv-card > header > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; }
.dv-card > header strong { color: var(--st-text); font-size: 15px; }
.dv-card > header code { overflow: hidden; max-width: 100%; padding: 0 6px; border-radius: 5px; background: var(--st-soft); color: var(--st-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.dv-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--st-muted); font-size: 12px; }
.dv-meta > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dv-meta em { padding: 0 7px; border-radius: 9px; background: color-mix(in srgb, #0f766e 10%, transparent); color: #0f766e; font-size: 11.5px; font-style: normal; font-weight: 600; }
.dv-usage > div { display: flex; justify-content: space-between; font-size: 12px; color: var(--st-muted); }
.dv-usage b { color: var(--st-text); }
.dv-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--st-border); font-size: 12px; }
.dv-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.dv-docs section { padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; }
.dv-docs h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--st-text); font-size: 15px; }
.dv-docs p { font-size: 12.5px; }
.dv-docs code { padding: 0 5px; border-radius: 4px; background: var(--st-soft); }
.dv-endpoints { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.dv-endpoints span { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--st-text); }
.dv-endpoints em { min-width: 44px; padding: 0 6px; border-radius: 5px; background: #dcfce7; color: #15803d; font-size: 11px; font-style: normal; font-weight: 700; text-align: center; }
.dv-code { margin: 8px 0; padding: 10px 12px; overflow-x: auto; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 12.5px; white-space: pre; }
.dv-secret { white-space: pre-wrap; word-break: break-all; font-size: 13px; }

/* ---- Backup & restore (screens-settings-a.js TA.screens.backups) ------------------------------------------------------ */
.bk-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bk-tips > div { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); }
.bk-tips .anticon { margin-top: 2px; color: #0891b2; font-size: 18px; }
.bk-tips span { display: flex; flex-direction: column; }
.bk-tips small { color: var(--st-muted); font-size: 12px; }
.bk-list { display: flex; flex-direction: column; gap: 10px; }
.bk-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); }
.bk-card.is-off { opacity: 0.7; }
.bk-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 18px; }
.bk-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 220px; }
.bk-main strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--st-text); }
.bk-main strong .ant-tag { margin: 0; }
.bk-main small { color: var(--st-muted); font-size: 12px; }
.bk-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--st-muted); font-size: 12.5px; }
.bk-facts b { color: var(--st-text); }
.bk-facts--big { margin-bottom: 14px; font-size: 13.5px; }
.bk-inv-title { margin: 18px 0 8px; }
.bk-inv { display: flex; flex-direction: column; gap: 4px; }
.bk-inv > div { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: 8px; font-size: 12.5px; }
.bk-inv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-inv i { height: 8px; border-radius: 4px; background: #0891b2; }
.bk-inv b { text-align: right; }
@media (max-width: 760px) { .bk-tips { grid-template-columns: 1fr; } }
.subscription-page.st-page { max-width: none; }

/* ---- Expenses (screens-expenses.js) ---------------------------------------------------------------------------------- */
.ex-page { max-width: 1600px; }
.ex-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ex-stat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1.5px solid var(--st-border); border-radius: 12px; background: var(--st-card); color: var(--st-text); text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.ex-stat:hover { border-color: var(--c); }
.ex-stat.is-on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.ex-stat__icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 17px; }
.ex-stat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ex-stat small { color: var(--st-muted); font-size: 12px; }
.ex-stat b { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.ex-stat em { color: var(--st-muted); font-size: 11.5px; font-style: normal; }
.ex-person { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ex-person span { display: flex; flex-direction: column; min-width: 0; }
.ex-person strong { color: var(--st-text); font-size: 13px; }
.ex-person small { color: var(--st-muted); font-size: 11.5px; }
.ex-person:hover strong { color: var(--st-primary); }
.ex-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-what strong { color: var(--st-text); font-size: 13px; }
.ex-what > span { display: flex; flex-wrap: wrap; gap: 4px; }
.ex-what em, .ex-what strong em, .ex-drill em { padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--st-primary) 9%, transparent); color: var(--st-primary); font-size: 11px; font-style: normal; font-weight: 600; }
.ex-what i { padding: 0 6px; border-radius: 8px; background: var(--st-soft); color: var(--st-muted); font-size: 11px; font-style: normal; }
.ex-what small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--st-muted); font-size: 12px; }
.ex-amt { font-size: 14px; white-space: nowrap; }
.ex-status { display: inline-block; padding: 1px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ex-table .ant-table-tbody > tr > td:first-child { box-shadow: inset 3px 0 0 transparent; }
.ex-table .ex-row--pending > td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.ex-table .ex-row--approved > td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.ex-table .ex-row--form_request > td:first-child { box-shadow: inset 3px 0 0 #7c3aed; }
.ex-table .ex-row--rejected > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.ex-table .ex-row--deducted > td:first-child { box-shadow: inset 3px 0 0 #be123c; }
.ex-drill { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ex-drill strong { color: var(--st-text); }
.ex-drill:hover strong { color: var(--st-primary); text-decoration: underline; }
.ex-drill small { color: var(--st-muted); font-size: 12px; }
.ex-bar { display: flex; flex-direction: column; gap: 3px; }
.ex-bar i { height: 6px; border-radius: 3px; background: var(--st-primary); }
.ex-atts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ex-atts a { display: block; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 10px; }
.ex-atts img { display: block; width: 100%; height: 130px; object-fit: cover; }
.ex-atts span { display: none; align-items: center; gap: 6px; height: 130px; justify-content: center; font-size: 13px; }
.ex-atts a.is-broken img { display: none; }
.ex-atts a.is-broken span { display: flex; }
@media (max-width: 1200px) { .ex-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ex-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Expense report (screens-expense-report.js) ----------------------------------------------------------------------- */
.er-page { max-width: 1600px; }
.er-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.er-row--wide { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.er-panel { min-width: 0; margin: 0; }
.er-panel .pf-card__body { padding-bottom: 14px; }
.er-chart { display: block; width: 100%; height: auto; }
.er-grid { stroke: var(--st-border); stroke-dasharray: 3 4; }
.er-axis { fill: var(--st-muted); font-size: 11px; }
.er-val { fill: var(--st-text); font-size: 10.5px; font-weight: 600; }
.er-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; color: var(--st-muted); font-size: 12px; }
.er-legend span { display: inline-flex; align-items: center; gap: 5px; }
.er-legend i, .er-donut li i { width: 10px; height: 10px; border-radius: 3px; }
.er-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.er-donut__v { fill: var(--st-text); font-size: 17px; font-weight: 700; }
.er-donut ul { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 190px; margin: 0; padding: 0; list-style: none; }
.er-donut li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 2px 8px; font-size: 13px; }
.er-donut li b { text-align: right; }
.er-donut li small { grid-column: 2 / 4; color: var(--st-muted); font-size: 11.5px; }
.er-bars { display: flex; flex-direction: column; gap: 4px; }
.er-bar { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.er-bar:hover { background: var(--st-soft); }
.er-bar__label { display: flex; flex-direction: column; min-width: 0; }
.er-bar__label strong { overflow: hidden; color: var(--st-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.er-bar__label small { overflow: hidden; color: var(--st-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.er-bar__track { display: flex; height: 10px; overflow: hidden; border-radius: 5px; background: var(--st-soft); }
.er-bar__track i { height: 100%; }
.er-bar > b { min-width: 86px; font-size: 13px; text-align: right; }
.er-more, .er-note { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; }
.er-loading { display: flex; align-items: center; gap: 8px; color: var(--st-muted); font-size: 12.5px; }
@media (max-width: 1100px) { .er-row, .er-row--wide { grid-template-columns: 1fr; } }
.er-row--wide .er-panel .pf-card__body { display: flex; flex-direction: column; justify-content: center; height: calc(100% - 62px); }

/* ---- Payments received + Leave (screens-payments.js, screens-leave.js) ------------------------------------------------ */
.py-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.py-cash { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); }
.py-cash > .anticon { color: #2563eb; font-size: 18px; }
.py-cash__title { margin-right: 6px; color: var(--st-text); font-weight: 600; }
.py-cash__arrow { color: var(--st-muted); font-size: 11px; }
.py-cash button { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 12px; border: 1.5px solid var(--st-border); border-radius: 10px; background: transparent; color: var(--st-text); cursor: pointer; }
.py-cash button small { color: var(--c); font-size: 11.5px; font-weight: 600; }
.py-cash button b { font-size: 15px; }
.py-cash button:hover, .py-cash button.is-on { border-color: var(--c); }
.py-cash button.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 15%, transparent); }
.py-st { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.py-sel { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 127, 127, 0.08); }
.py-sel span { color: #6b7280; font-size: 12.5px; }
.ex-table .py-row--pending > td:first-child, .ex-table .lv-row--pending > td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.ex-table .py-row--confirmed > td:first-child, .ex-table .lv-row--approved > td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.ex-table .py-row--failed > td:first-child, .ex-table .lv-row--rejected > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.ex-table .lv-row--cancelled > td:first-child { box-shadow: inset 3px 0 0 #7c3aed; }
@media (max-width: 900px) { .py-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- HRM & payroll (screens-hrm.js) ------------------------------------------------------------------------------------ */
.hr-page .og-panel { gap: 14px; }
.hr-grow { flex: 1 1 auto; }
.hr-search { width: 260px; max-width: 100%; }
.hr-runpick { width: 230px; }
.hr-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hr-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); min-width: 0; }
.hr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hr-head strong { display: inline-flex; align-items: center; gap: 8px; color: var(--st-text); font-size: 14.5px; }
.hr-head strong .anticon { color: var(--st-primary); }
.hr-more { margin: 0; font-size: 12.5px; }
.hr-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hr-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 10px; }
.hr-steps li.is-done { border-color: color-mix(in srgb, #16a34a 35%, var(--st-border)); background: color-mix(in srgb, #16a34a 5%, transparent); }
.hr-steps__n { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(127, 127, 127, 0.12); color: var(--st-text); font-weight: 700; }
.hr-steps li.is-done .hr-steps__n { background: #16a34a; color: #fff; }
.hr-steps__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hr-steps__body strong { display: inline-flex; align-items: center; gap: 6px; color: var(--st-text); font-size: 13.5px; }
.hr-steps__body small { color: var(--st-muted); font-size: 12.5px; }
.hr-latest { display: flex; flex-direction: column; gap: 12px; }
.hr-latest h3 { margin: 0 0 6px; color: var(--st-text); font-size: 20px; }
.hr-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-flow__s { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--st-border); border-radius: 99px; color: var(--st-muted); font-size: 12px; }
.hr-flow__s.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); font-weight: 600; }
.hr-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.hr-dl div { padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); }
.hr-dl dt { color: var(--st-muted); font-size: 11.5px; }
.hr-dl dd { margin: 0; color: var(--st-text); font-size: 15px; font-weight: 700; }
.hr-dl dd.hr-net, .hr-net { color: #16a34a; }
.hr-people { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hr-people li { display: flex; align-items: center; gap: 10px; }
.hr-people li > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hr-people strong { overflow: hidden; color: var(--st-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hr-people small { color: var(--st-muted); font-size: 12px; }
.hr-trend { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 6px; }
.hr-trend__bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.hr-trend__bar b { color: var(--st-text); font-size: 11.5px; white-space: nowrap; }
.hr-trend__bar i { width: 100%; max-width: 56px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--c) 75%, transparent); }
.hr-trend__bar small { color: var(--st-muted); font-size: 11.5px; }
.hr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1.5px solid var(--st-border); border-radius: 99px; background: transparent; color: var(--st-text); font-size: 13px; cursor: pointer; }
.hr-chip b { color: var(--c); }
.hr-chip.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.hr-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; font-size: 12px; font-weight: 600; }
.hr-flags { display: inline-flex; gap: 4px; }
.hr-flags i { padding: 1px 6px; border: 1px solid var(--st-border); border-radius: 5px; color: var(--st-muted); font-size: 11px; font-style: normal; text-decoration: line-through; }
.hr-flags i.is-on { border-color: #2563eb; color: #2563eb; text-decoration: none; }
.hr-ok, .hr-warn { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.hr-ok { color: #16a34a; }
.hr-warn { color: #d97706; }
.hr-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
/* salary dialog */
.hr-assign { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.hr-assign__form { min-width: 0; }
.hr-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: rgba(127, 127, 127, 0.05); font-size: 13px; }
.hr-preview header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--st-text); font-weight: 700; }
.hr-preview header small { margin-left: auto; color: var(--st-muted); font-size: 11.5px; font-weight: 400; }
.hr-preview > div { display: flex; justify-content: space-between; gap: 8px; color: var(--st-text); }
.hr-preview > div.is-ded { color: #b91c1c; }
.hr-preview p { margin: 4px 0 0; font-size: 12px; }
.hr-preview__sum { padding-top: 6px; border-top: 1px dashed var(--st-border); font-weight: 700; }
.hr-preview__net { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d !important; font-weight: 700; }
.hr-preview__net b { font-size: 17px; }
.hr-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hr-lines > div > small { display: block; margin-bottom: 6px; color: var(--st-muted); font-weight: 600; }
.hr-line { display: grid; grid-template-columns: minmax(0, 1fr) 120px 32px; gap: 6px; }
.hr-line .ant-form-item, .hr-comp .ant-form-item { margin-bottom: 8px; }
/* salary structures */
.hr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hr-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); }
.hr-card.is-off { opacity: 0.7; }
.hr-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hr-card header div { display: flex; flex-direction: column; }
.hr-card header strong { color: var(--st-text); font-size: 15px; }
.hr-card header small { color: var(--st-muted); font-size: 12px; }
.hr-card p { margin: 0; font-size: 12.5px; }
.hr-card footer { display: flex; gap: 6px; margin-top: auto; }
.hr-comps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hr-comps li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 7px; background: color-mix(in srgb, #16a34a 7%, transparent); color: var(--st-text); font-size: 12.5px; }
.hr-comps li.is-ded { background: color-mix(in srgb, #dc2626 7%, transparent); }
.hr-sample { color: var(--st-muted); font-size: 12.5px; }
.hr-comp { display: grid; grid-template-columns: 120px minmax(0, 1fr) 130px 110px 32px; gap: 6px; }
.hr-comp--head { margin-bottom: 4px; color: var(--st-muted); font-size: 12px; font-weight: 600; }
/* payroll runs */
.hr-runs { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.hr-run { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--st-border); border-left: 4px solid var(--c); border-radius: 12px; background: var(--st-card); }
.hr-run.is-off { opacity: 0.65; }
.hr-run header { display: flex; align-items: flex-start; gap: 10px; }
.hr-run header > div { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hr-run header strong { color: var(--st-text); font-size: 16px; }
.hr-run header small { color: var(--st-muted); font-size: 12.5px; }
.hr-run__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 17px; }
.hr-run footer { display: flex; flex-wrap: wrap; gap: 6px; }
/* payslips */
.hr-slipstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-static { cursor: default; }
.hr-static .ex-stat__icon { color: var(--c); }
.hr-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--st-primary) 9%, transparent); }
.hr-bulk strong { margin-right: 4px; color: var(--st-text); }
.hr-slip { display: flex; flex-direction: column; gap: 14px; color: var(--st-text); }
.hr-slip > header { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--app-primary, #0d4d9c); color: #fff; }
.hr-slip > header div:first-child { display: flex; flex-direction: column; }
.hr-slip > header strong { font-size: 18px; }
.hr-slip > header small { opacity: 0.85; }
.hr-slip__period { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hr-slip__period span { font-size: 11px; letter-spacing: 0.12em; opacity: 0.85; }
.hr-slip__period b { font-size: 16px; }
.hr-slip__period .ex-status { background: #fff; }
.hr-slip__who h3 { margin: 0 0 8px; font-size: 18px; }
.hr-slip__who dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; margin: 0; }
.hr-slip__who dt { color: var(--st-muted); font-size: 11.5px; }
.hr-slip__who dd { margin: 0; font-size: 13px; font-weight: 600; word-break: break-word; }
.hr-slip__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--st-border); border-radius: 10px; overflow: hidden; }
.hr-slip__days div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; }
.hr-slip__days div + div { border-left: 1px solid var(--st-border); }
.hr-slip__days b { font-size: 16px; }
.hr-slip__days small { color: var(--st-muted); font-size: 11.5px; text-align: center; }
.hr-slip__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hr-slip__cols section { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--st-border); border-radius: 10px; }
.hr-slip__cols h4 { margin: 0 0 4px; color: var(--st-muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.hr-slip__cols section > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.hr-slip__cols div.is-adj span { color: #7c3aed; }
.hr-slip__cols i { margin-left: 6px; padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, #7c3aed 12%, transparent); font-size: 10.5px; font-style: normal; }
.hr-slip__total { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--st-border); font-weight: 700; }
.hr-slip__net { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, #16a34a 12%, transparent); }
.hr-slip__net div { display: flex; flex-direction: column; }
.hr-slip__net span { color: #15803d; font-weight: 700; }
.hr-slip__net small { color: var(--st-muted); font-size: 12px; }
.hr-slip__net > b { color: #15803d; font-size: 24px; }
.hr-slip > p { margin: 0; }
.hr-viewer__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hr-adj { display: grid; grid-template-columns: 86px minmax(0, 1fr) 150px 32px; align-items: center; gap: 8px; margin-bottom: 8px; }
.hr-adj__net { display: flex; justify-content: space-between; }
/* rules */
.hr-switch { display: flex; align-items: center; gap: 12px; }
.hr-switch .ant-form-item { margin-bottom: 10px; }
.hr-switch span { display: flex; flex-direction: column; margin-bottom: 10px; }
.hr-switch small { color: var(--st-muted); font-size: 12px; }
.hr-savebar { display: flex; justify-content: flex-end; gap: 8px; }
.hr-page.is-dark .fs-sec { border-color: var(--st-border); }
@media (max-width: 1100px) { .hr-grid, .hr-assign { grid-template-columns: 1fr; } .hr-preview { position: static; } }
@media (max-width: 760px) {
  .hr-slipstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-lines, .hr-slip__cols { grid-template-columns: 1fr; }
  .hr-runs { grid-template-columns: 1fr; }
  .hr-comp { grid-template-columns: 1fr 1fr; }
  .hr-comp--head { display: none; }
  .hr-slip__days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-slip__days div + div { border-left: 0; }
  .hr-adj { grid-template-columns: 1fr 1fr; }
  .hr-search, .hr-runpick { width: 100%; }
  .hr-trend b { display: none; }
}

/* ---- Tasks & todos (screens-todos.js) ---------------------------------------------------------------------------------- */
.td-page .og-panel { gap: 14px; }
.td-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.td-stats .ex-stat b { font-size: 20px; }
.td-grow { flex: 1 1 auto; }
.td-date { width: 150px; }
.td-prio { width: 140px; }
.td-search { width: 280px; max-width: 100%; }
.td-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; }
.td-views { display: inline-flex; padding: 3px; border: 1px solid var(--st-border); border-radius: 10px; background: rgba(127, 127, 127, 0.06); }
.td-views button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--st-muted); font-size: 13px; cursor: pointer; }
.td-views button.is-on { background: var(--st-card); color: var(--st-text); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
/* board */
.td-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.td-board.is-single { grid-template-columns: minmax(0, 1fr); }
.td-board.is-single .td-col__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.td-col { display: flex; flex-direction: column; min-width: 0; border-radius: 12px; background: rgba(127, 127, 127, 0.06); }
.td-col > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 3px solid var(--c); border-radius: 12px 12px 0 0; }
.td-col > header span { display: inline-flex; align-items: center; gap: 7px; color: var(--st-text); font-weight: 700; }
.td-col > header .anticon { color: var(--c); }
.td-col > header b { min-width: 24px; padding: 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: 12px; text-align: center; line-height: 22px; }
.td-col__body { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; max-height: 70vh; overflow-y: auto; }
.td-col__empty { margin: 4px 0 8px; padding: 18px 8px; border: 1px dashed var(--st-border); border-radius: 10px; color: var(--st-muted); font-size: 12.5px; text-align: center; }
.td-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--st-border); border-left: 4px solid var(--k); border-radius: 10px; background: var(--st-card); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: box-shadow 0.15s; }
.td-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1); }
.td-card.is-late { border-color: color-mix(in srgb, #dc2626 45%, var(--st-border)); border-left-color: var(--k); }
.td-card.is-done .td-card__title { color: var(--st-muted); text-decoration: line-through; }
.td-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.td-card__title { flex: 1 1 auto; padding: 0; border: 0; background: none; color: var(--st-text); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; word-break: break-word; }
.td-card__title:hover { color: var(--st-primary); }
.td-pin { margin-right: 5px; color: #d97706; }
.td-card__desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--st-muted); font-size: 12.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.td-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.td-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: rgba(127, 127, 127, 0.1); color: var(--st-muted); font-size: 11.5px; }
.td-chip.is-bad, .td-bad { color: #dc2626; }
.td-chip.is-bad { background: color-mix(in srgb, #dc2626 10%, transparent); font-weight: 600; }
.td-purple { color: #7c3aed; }
.td-where { display: flex; flex-direction: column; gap: 2px; color: var(--st-muted); font-size: 12px; }
.td-where span { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-progress { display: flex; align-items: center; gap: 8px; }
.td-progress i { flex: 1 1 auto; height: 5px; border-radius: 99px; background: rgba(127, 127, 127, 0.18); overflow: hidden; }
.td-progress b { display: block; height: 100%; border-radius: 99px; background: #16a34a; }
.td-progress small { color: var(--st-muted); font-size: 11.5px; }
.td-ev { display: flex; gap: 4px; }
.td-ev span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, #dc2626 10%, transparent); color: #dc2626; font-size: 12px; }
.td-ev span.is-ok { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.td-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--st-border); }
.td-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--st-text); font-size: 12.5px; }
.td-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-done.ant-btn { color: #16a34a; border-color: color-mix(in srgb, #16a34a 50%, var(--st-border)); }
.td-done.ant-btn:hover { background: #16a34a !important; color: #fff !important; }
.td-donemark { display: inline-flex; align-items: center; gap: 4px; color: #16a34a; font-size: 12px; font-weight: 600; }
.td-approve { display: inline-flex; gap: 4px; }
.ex-table .td-row--late > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
/* task form */
.td-tpl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.td-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.td-swatch { width: 26px; height: 26px; border: 2px solid; border-radius: 50%; cursor: pointer; }
.td-swatch.is-on { box-shadow: 0 0 0 2px var(--st-card), 0 0 0 4px var(--st-primary); }
.td-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 8px; align-items: start; }
.td-line--field { grid-template-columns: minmax(0, 1fr) 120px auto 32px; }
.td-line .ant-form-item, .td-field .ant-form-item { margin-bottom: 8px; }
.td-line .ant-checkbox-wrapper { margin-top: 5px; }
.td-field { margin-bottom: 4px; }
.td-field + .td-field { padding-top: 6px; border-top: 1px dashed var(--st-border); }
.td-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.td-req { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-card); cursor: pointer; }
.td-req > .anticon { color: var(--st-primary); font-size: 17px; }
.td-req > span { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.td-req strong { color: var(--st-text); font-size: 13px; }
.td-req small { color: var(--st-muted); font-size: 11.5px; }
.td-req .ant-form-item { margin-bottom: 0; }
/* task panel */
.td-panel { display: flex; flex-direction: column; gap: 14px; }
.td-panel__head { display: flex; flex-direction: column; gap: 10px; }
.td-panel__head > p { margin: 0; color: var(--st-text); white-space: pre-wrap; }
.td-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.td-dl div { padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); }
.td-dl dt { color: var(--st-muted); font-size: 11.5px; }
.td-dl dd { display: flex; flex-direction: column; margin: 0; color: var(--st-text); font-size: 13px; font-weight: 600; }
.td-dl dd small { color: var(--st-muted); font-weight: 400; }
.td-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.td-steps > * { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border: 1.5px solid var(--st-border) !important; border-radius: 9px; background: rgba(127, 127, 127, 0.05); color: var(--st-text); font-size: 12.5px; cursor: pointer; }
.td-steps > button:hover { border-color: var(--c) !important; color: var(--c); }
.td-steps > .is-on { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-weight: 700; cursor: default; }
.td-approvebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #7c3aed 10%, transparent); color: #6d28d9; }
.td-approvebar > span { flex: 1 1 auto; }
.td-panel__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.td-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--st-border); }
.td-sec h4 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--st-text); font-size: 13.5px; }
.td-sec h4 .anticon { color: var(--st-primary); }
.td-sec h4 em { margin-left: auto; color: var(--st-muted); font-size: 12px; font-style: normal; font-weight: 500; }
.td-say { display: flex; gap: 6px; margin-top: 8px; }
.td-say > :first-child { flex: 1 1 auto; min-width: 0; }
.td-sec p { margin: 0; }
.td-checks { display: flex; flex-direction: column; gap: 6px; }
.td-checks .is-done { color: var(--st-muted); text-decoration: line-through; }
.td-form { display: flex; flex-direction: column; gap: 8px; }
.td-form label { display: flex; flex-direction: column; gap: 4px; }
.td-form label > span { color: var(--st-text); font-size: 12.5px; }
.td-form label b { color: #dc2626; }
.td-evlist { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.td-evlist li { display: flex; align-items: center; gap: 6px; color: #dc2626; font-size: 13px; }
.td-evlist li.is-ok { color: #16a34a; }
.td-files { display: flex; flex-direction: column; gap: 4px; }
.td-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--st-border); border-radius: 8px; background: transparent; color: var(--st-text); text-align: left; cursor: pointer; }
.td-file:hover { border-color: var(--st-primary); }
.td-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-upload { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.td-comments { display: flex; flex-direction: column; gap: 10px; }
.td-comment { display: flex; gap: 8px; }
.td-comment > div { flex: 1 1 auto; padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); }
.td-comment strong { margin-right: 6px; font-size: 12.5px; }
.td-comment small { color: var(--st-muted); font-size: 11.5px; }
.td-comment p { margin: 2px 0 0 !important; white-space: pre-wrap; }
.td-hist { display: flex; flex-direction: column; }
.td-hist span { color: var(--st-text); font-size: 12.5px; }
.td-hist small { color: var(--st-muted); font-size: 11.5px; }
.td-timeline { margin-top: 4px; }
@media (max-width: 1280px) { .td-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-board { grid-template-columns: repeat(4, minmax(260px, 82vw)); }
  .td-search, .td-date, .td-prio { width: 100%; }
  .td-reqs, .td-dl { grid-template-columns: 1fr; }
  .td-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-line--field { grid-template-columns: minmax(0, 1fr) 100px 32px; }
  .td-line--field > :nth-child(3) { grid-column: 1 / -1; order: 4; }
}

/* ---- Chat (screens-chat.js) ------------------------------------------------------------------------------------------- */
.cx-page {
  --cx-bg: #fff; --cx-soft: #f6f8fb; --cx-line: #e5e7eb; --cx-text: #111827; --cx-muted: #6b7280; --cx-primary: var(--app-primary, #0d4d9c);
  --cx-thread: #eef2f7; --cx-in: #fff; --cx-out: var(--cx-primary); --cx-out-text: #fff; --cx-online: #22c55e;
  position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1; min-height: 0; height: 100%; overflow: hidden;
  border: 1px solid var(--cx-line); border-radius: 16px; background: var(--cx-bg); color: var(--cx-text); box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
}
.cx-page.has-info { grid-template-columns: 340px minmax(0, 1fr) 300px; }
html.dark-theme .cx-page, .cx-page.is-dark { --cx-bg: #1a1a1a; --cx-soft: #222; --cx-line: #2e2e2e; --cx-text: #f1f1f1; --cx-muted: #9ca3af; --cx-thread: #121212; --cx-in: #262626; }
.cx-center { display: grid; place-items: center; padding: 40px; }
.cx-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border: 2px solid var(--cx-bg); border-radius: 50%; background: var(--cx-online); }
.cx-dot--inline { position: static; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 0; vertical-align: 1px; }
.cx-av { position: relative; flex: 0 0 auto; display: inline-flex; }
.cx-typing-text { color: #16a34a; font-style: normal; font-weight: 600; }
.cx-online { color: #16a34a; }
/* sidebar */
.cx-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--cx-line); background: var(--cx-bg); }
.cx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; }
.cx-side__head h1 { margin: 0; color: var(--cx-text); font-size: 20px; font-weight: 800; }
.cx-side__head small { color: var(--cx-muted); font-size: 12.5px; }
.cx-side__head small b { color: var(--cx-primary); }
.cx-side__search { padding: 0 14px 10px; }
.cx-side__search .ant-input-affix-wrapper { border-radius: 10px; background: var(--cx-soft); }
.cx-tabs { display: flex; gap: 4px; padding: 0 14px 8px; border-bottom: 1px solid var(--cx-line); }
.cx-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 99px; background: transparent; color: var(--cx-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.cx-tabs button b { min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--cx-soft); font-size: 11px; line-height: 18px; text-align: center; }
.cx-tabs button.is-on { background: color-mix(in srgb, var(--cx-primary) 12%, transparent); color: var(--cx-primary); }
.cx-tabs button.is-on b { background: var(--cx-primary); color: #fff; }
.cx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.cx-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--cx-text); text-align: left; cursor: pointer; }
.cx-row:hover { background: var(--cx-soft); }
.cx-row.is-on { background: color-mix(in srgb, var(--cx-primary) 10%, transparent); }
.cx-row__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-row__top, .cx-row__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cx-row__top strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cx-row__top small { flex: 0 0 auto; color: var(--cx-muted); font-size: 11.5px; }
.cx-row__sub > span, .cx-row__sub > em { overflow: hidden; color: var(--cx-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cx-row.is-unread .cx-row__top strong, .cx-row.is-unread .cx-row__sub > span { color: var(--cx-text); font-weight: 700; }
.cx-row.is-unread .cx-row__top small { color: var(--cx-primary); font-weight: 700; }
.cx-count { flex: 0 0 auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--cx-primary); color: #fff; font-size: 11px; line-height: 20px; text-align: center; }
.cx-empty-list { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 16px; color: var(--cx-muted); text-align: center; }
.cx-empty-list > .anticon { margin-bottom: 6px; font-size: 30px; opacity: 0.6; }
.cx-empty-list strong { color: var(--cx-text); }
.cx-empty-list .ant-btn { margin-top: 8px; }
/* conversation */
.cx-conv { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cx-thread); }
.cx-conv__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cx-line); background: var(--cx-bg); }
.cx-back { display: none !important; }
.cx-who { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 2px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--cx-text); text-align: left; cursor: pointer; }
.cx-who:hover { background: var(--cx-soft); }
.cx-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cx-who strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.cx-who > span:last-child > span, .cx-who > span:last-child > em { color: var(--cx-muted); font-size: 12.5px; }
.cx-conv__actions { display: flex; gap: 2px; }
.cx-conv__actions .ant-btn, .cx-icon-btn { color: var(--cx-muted); font-size: 17px; }
.cx-conv__actions .is-on { color: var(--cx-primary); }
.cx-icon-btn { display: inline-flex !important; align-items: center; justify-content: center; }
.cx-banner { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: #fef3c7; color: #92400e; font-size: 12.5px; }
.cx-thread { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.cx-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 8px; }
.cx-day { position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; margin: 10px 0 8px; }
.cx-day span { padding: 3px 12px; border-radius: 99px; background: color-mix(in srgb, var(--cx-bg) 92%, transparent); color: var(--cx-muted); font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.cx-msg { position: relative; display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; max-width: 100%; }
.cx-msg.is-cont { margin-top: 2px; }
.cx-msg.is-mine { flex-direction: row-reverse; }
.cx-msg__spacer { flex: 0 0 28px; }
.cx-bubble { position: relative; max-width: min(72%, 560px); padding: 7px 10px 6px; border-radius: 16px; background: var(--cx-in); color: var(--cx-text); box-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.1); }
.cx-msg:not(.is-mine).is-last .cx-bubble { border-bottom-left-radius: 4px; }
.cx-msg.is-mine .cx-bubble { background: var(--cx-out); color: var(--cx-out-text); }
.cx-msg.is-mine.is-last .cx-bubble { border-bottom-right-radius: 4px; }
.cx-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-text a { color: inherit; text-decoration: underline; }
.cx-msg:not(.is-mine) .cx-text a { color: var(--cx-primary); }
.cx-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -2px 10px; opacity: 0.7; font-size: 10.5px; white-space: nowrap; }
.cx-tick { display: inline-flex; font-size: 11px; }
.cx-tick.is-read { color: #7dd3fc; opacity: 1; }
.cx-tick.is-read .anticon + .anticon { margin-left: -6px; }
.cx-msg:not(.is-mine) .cx-meta { color: var(--cx-muted); }
.cx-file { display: inline-flex; align-items: center; gap: 6px; }
.cx-copy { align-self: center; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--cx-muted); opacity: 0; cursor: pointer; transition: opacity 0.15s; }
.cx-msg:hover .cx-copy { opacity: 1; }
.cx-copy:hover { background: rgba(127, 127, 127, 0.15); }
.cx-dots { display: inline-flex; gap: 4px; padding: 12px 14px; }
.cx-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-muted); animation: cx-bounce 1.2s infinite ease-in-out; }
.cx-dots i:nth-child(2) { animation-delay: 0.15s; }
.cx-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cx-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.cx-hello { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12vh auto 0; color: var(--cx-muted); text-align: center; }
.cx-hello strong { color: var(--cx-text); font-size: 16px; }
.cx-jump { position: absolute; right: 18px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--cx-line); border-radius: 50%; background: var(--cx-bg); color: var(--cx-text); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); cursor: pointer; }
.cx-jump b { position: absolute; top: -6px; right: -4px; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--cx-primary); color: #fff; font-size: 11px; line-height: 18px; }
.cx-error { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: #fee2e2; color: #b91c1c; font-size: 12.5px; }
.cx-composer { display: flex; align-items: flex-end; gap: 10px; padding: 10px 14px 4px; background: var(--cx-bg); border-top: 1px solid var(--cx-line); }
.cx-composer__box { flex: 1 1 auto; min-width: 0; }
.cx-composer__box textarea.ant-input { padding: 9px 14px; border-radius: 20px; background: var(--cx-soft); font-size: 14px; line-height: 1.4; resize: none; }
.cx-send.ant-btn { flex: 0 0 auto; }
.cx-hint { padding: 0 14px 8px 28px; background: var(--cx-bg); color: var(--cx-muted); font-size: 11px; }
/* welcome */
.cx-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 24px; text-align: center; }
.cx-welcome__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: color-mix(in srgb, var(--cx-primary) 12%, transparent); color: var(--cx-primary); font-size: 34px; }
.cx-welcome h2 { margin: 6px 0 0; color: var(--cx-text); font-size: 22px; }
.cx-welcome p { max-width: 380px; margin: 0; color: var(--cx-muted); }
.cx-welcome__online { margin-top: 14px; }
.cx-welcome__online small { color: var(--cx-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.cx-welcome__online > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.cx-welcome__online button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 0; background: transparent; color: var(--cx-text); font-size: 12px; cursor: pointer; }
/* contact info */
.cx-info { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--cx-line); background: var(--cx-bg); }
.cx-info > header { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 1px solid var(--cx-line); font-weight: 700; }
.cx-info__who { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 16px; text-align: center; }
.cx-info__who strong { font-size: 17px; }
.cx-info__who small { color: var(--cx-muted); }
.cx-info dl { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 10px; }
.cx-info dl > div { display: flex; align-items: flex-start; gap: 12px; padding: 9px 8px; border-radius: 10px; }
.cx-info dl > div > .anticon { margin-top: 3px; color: var(--cx-muted); font-size: 15px; }
.cx-info dt { color: var(--cx-muted); font-size: 11.5px; }
.cx-info dd { margin: 0; color: var(--cx-text); font-size: 13.5px; word-break: break-word; }
.cx-info__count { margin: 12px 18px; color: var(--cx-muted); font-size: 12px; }
@media (max-width: 1180px) { .cx-page.has-info { grid-template-columns: 300px minmax(0, 1fr); } .cx-info { position: absolute; inset: 0 0 0 auto; z-index: 5; width: 300px; box-shadow: -8px 0 24px rgba(15, 23, 42, 0.15); } }
@media (max-width: 760px) {
  .cx-page, .cx-page.has-info { grid-template-columns: minmax(0, 1fr); border-radius: 12px; }
  .cx-side { position: absolute; inset: 0; z-index: 4; display: none; border-right: 0; }
  .cx-side.is-mobile-open { display: flex; }
  .cx-back { display: inline-flex !important; }
  .cx-info { width: 100%; }
  .cx-messages { padding: 10px 10px 6px; }
  .cx-bubble { max-width: 82%; }
  .cx-copy { display: none; }
  .cx-hint { display: none; }
}

/* ---- News & events (screens-news.js) --------------------------------------------------------------------------------- */
.nw-page .og-panel { gap: 14px; }
.nw-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nw-grow { flex: 1 1 auto; }
.nw-search { width: 260px; max-width: 100%; }
.nw-sort { width: 190px; }
.tb-presets button small { margin-left: 3px; opacity: 0.6; font-size: 11px; }
.nw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.nw-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); transition: box-shadow 0.15s, transform 0.15s; }
.nw-card:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1); transform: translateY(-1px); }
.nw-card.is-hidden { opacity: 0.75; }
.nw-card__media { position: relative; cursor: pointer; }
.nw-cover { position: relative; height: 170px; overflow: hidden; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.nw-cover--news { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.nw-cover--event { background: linear-gradient(135deg, #f59e0b, #db2777); }
.nw-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-cover__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: rgba(255, 255, 255, 0.95); text-align: center; }
.nw-cover__fallback .anticon { font-size: 30px; opacity: 0.85; }
.nw-cover__fallback span { display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 700; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nw-cover--thumb { flex: 0 0 auto; width: 64px; height: 44px; border-radius: 8px; }
.nw-cover--thumb .nw-cover__fallback span { display: none; }
.nw-cover--thumb .nw-cover__fallback .anticon { font-size: 18px; }
.nw-cover--hero { height: 240px; margin: -20px -24px 0; border-radius: 8px 8px 0 0; }
.nw-kind { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: rgba(15, 23, 42, 0.65); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(4px); }
.nw-kind.is-inline { position: static; padding: 2px 10px; backdrop-filter: none; }
.nw-kind--news.is-inline { background: color-mix(in srgb, #2563eb 14%, transparent); color: #2563eb; }
.nw-kind--event.is-inline { background: color-mix(in srgb, #db2777 12%, transparent); color: #be185d; }
.nw-date { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px 6px; border-radius: 10px; background: #fff; color: #111827; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2); line-height: 1.1; }
.nw-date b { font-size: 18px; }
.nw-date small { color: #dc2626; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.nw-hiddenflag { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: #d97706; color: #fff; font-size: 11.5px; font-weight: 600; }
.nw-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 4px; flex: 1 1 auto; }
.nw-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nw-when > span { display: inline-flex; align-items: center; gap: 4px; color: var(--c); font-size: 12px; font-weight: 700; }
.nw-when small { color: var(--st-muted); font-size: 12px; }
.nw-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.nw-card h3 button { padding: 0; border: 0; background: none; color: var(--st-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.nw-card h3 button:hover { color: var(--st-primary); }
.nw-desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--st-muted); font-size: 13px; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-line; }
.nw-loc { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--st-muted); font-size: 12.5px; text-align: left; cursor: default; }
.nw-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-loc.is-link { cursor: pointer; }
.nw-loc.is-link:hover { color: var(--st-primary); }
.nw-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 10px 14px; border-top: 1px solid var(--st-border); }
.nw-acts { display: flex; align-items: center; gap: 6px; }
.nw-stack { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--st-muted); font-size: 12px; cursor: pointer; }
.nw-stack .ant-avatar { margin-left: -8px; border: 2px solid var(--st-card); }
.nw-stack .ant-avatar:first-child { margin-left: 0; }
.nw-stack b { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -8px; border: 2px solid var(--st-card); border-radius: 50%; background: var(--st-soft, #f1f5f9); color: var(--st-text); font-size: 10.5px; }
.nw-stack span { margin-left: 8px; }
.nw-stack:hover span { color: var(--st-primary); }
.nw-nobody { font-size: 12px; }
.nw-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: var(--st-text); text-align: left; cursor: pointer; }
.nw-row > span { display: flex; flex-direction: column; min-width: 0; }
.nw-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-row small { overflow: hidden; color: var(--st-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nw-row:hover strong { color: var(--st-primary); }
/* editor */
.nw-typepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.nw-typepick button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--st-border, #e5e7eb); border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.nw-typepick button > .anticon { font-size: 22px; color: #94a3b8; }
.nw-typepick button span { display: flex; flex-direction: column; }
.nw-typepick button small { color: #6b7280; font-size: 12px; }
.nw-typepick button.is-on { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 7%, transparent); }
.nw-typepick button.is-on > .anticon { color: var(--app-primary, #0d4d9c); }
.nw-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.nw-upload__preview { position: relative; width: 100%; max-width: 360px; }
.nw-upload__preview img { display: block; width: 100%; max-height: 190px; object-fit: cover; border-radius: 10px; }
.nw-upload__preview .ant-btn { position: absolute; top: 8px; right: 8px; }
.nw-pickbtn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nw-locnote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; color: #15803d; font-size: 12.5px; }
.nw-locnote small { color: #6b7280; }
.nw-visible { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer; }
.nw-visible span { display: flex; flex-direction: column; }
.nw-visible small { color: #6b7280; font-size: 12px; }
/* details */
.nw-view { display: flex; flex-direction: column; }
.nw-view__body { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.nw-view__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nw-view h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.nw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0; }
.nw-facts > div { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); }
.nw-facts > div > .anticon { margin-top: 3px; color: var(--app-primary, #0d4d9c); }
.nw-facts dt { color: #6b7280; font-size: 11.5px; }
.nw-facts dd { margin: 0; font-size: 13px; font-weight: 600; }
.nw-view__text { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.nw-view__people > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nw-view__people span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: rgba(127, 127, 127, 0.08); font-size: 12.5px; }
.nw-view__meta { margin: 0; font-size: 12px; }
.nw-viewfoot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.nw-viewfoot > .ant-btn-dangerous { margin-right: auto; }
.nw-people { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nw-people li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.nw-people li span { display: flex; flex-direction: column; }
.nw-people small { color: #6b7280; font-size: 12px; }
@media (max-width: 1100px) { .nw-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .nw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-grid { grid-template-columns: 1fr; }
  .nw-search, .nw-sort { width: 100%; }
  .nw-typepick { grid-template-columns: 1fr; }
  .nw-cover--hero { height: 180px; }
}

/* ---- Inbox-style list pages: feedback, enquiries, support, marketing (screens-feedback / -enquiries / -subscription / -marketing) */
.ib-page .og-panel { gap: 14px; }
.ib-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ib-search { width: 280px; max-width: 100%; }
.ib-period { width: 140px; }
.ib-drill strong { display: inline-flex; align-items: center; gap: 6px; }
.ib-drill small { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ib-unread { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; }
.ex-table .ib-row--unread > td { background: color-mix(in srgb, #2563eb 4%, transparent); }
.ex-table .ib-row--unread > td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
.ib-place { display: inline-flex; align-items: flex-start; gap: 5px; overflow: hidden; color: var(--st-muted); font-size: 12.5px; }
.ib-place .anticon { margin-top: 3px; }
.ib-note { display: -webkit-box; overflow: hidden; color: var(--st-muted); font-size: 12.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ib-clip { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; color: var(--st-muted); font-size: 12px; }
.ib-statusselect .ant-select-selector { border-color: color-mix(in srgb, var(--c) 45%, #d9d9d9) !important; background: color-mix(in srgb, var(--c) 8%, transparent) !important; color: var(--c); font-weight: 600; }
.ib-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.ib-panel { display: flex; flex-direction: column; gap: 12px; }
.ib-panel__who { display: flex; align-items: center; gap: 12px; }
.ib-panel__who span { display: flex; flex-direction: column; }
.ib-panel__who small { color: #6b7280; font-size: 12px; }
.ib-panel h3 { margin: 0; font-size: 18px; }
.ib-message { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(127, 127, 127, 0.07); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.ib-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-att { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 96px; height: 96px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 10px; color: #6b7280; font-size: 11.5px; }
.ib-att img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ib-reply { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; }
.ib-reply h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.ib-statuspick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ib-statuspick button { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border: 1.5px solid #e5e7eb; border-radius: 9px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.ib-statuspick button:hover { border-color: var(--c); color: var(--c); }
.ib-statuspick button.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-weight: 700; }
.ib-reply__foot { display: flex; justify-content: space-between; gap: 8px; }
/* support */
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); color: var(--st-text); text-align: left; cursor: pointer; }
.sp-item:hover, .sp-item.is-on { border-color: var(--st-primary); }
.sp-item.is-unread { box-shadow: inset 3px 0 0 #dc2626; }
.sp-item__icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 17px; }
.sp-item__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-item__top { display: flex; justify-content: space-between; gap: 8px; }
.sp-item__top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-item__top small { flex: 0 0 auto; color: var(--st-muted); font-size: 12px; }
.sp-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.sp-item__meta code, .sp-dtitle code { padding: 0 6px; border-radius: 5px; background: rgba(127, 127, 127, 0.12); font-size: 11.5px; }
.sp-new { color: #dc2626; font-size: 11.5px; }
.sp-panel { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.sp-thread { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-height: 200px; max-height: 58vh; overflow-y: auto; padding: 12px; border-radius: 12px; background: rgba(127, 127, 127, 0.06); }
.sp-msg { display: flex; gap: 10px; max-width: 88%; }
.sp-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.sp-msg > div { padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.sp-msg.is-mine > div { background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, #fff); }
.sp-msg__head { display: flex; justify-content: space-between; gap: 10px; }
.sp-msg__head strong { font-size: 12.5px; }
.sp-msg__head small { color: #6b7280; font-size: 11px; }
.sp-msg__text { margin-top: 3px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sp-wait { display: flex; align-items: center; gap: 6px; margin: 0; }
.sp-compose { display: flex; flex-direction: column; gap: 8px; }
.sp-compose > div { display: flex; justify-content: flex-end; }
.sp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.sp-cats button { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 10px; background: transparent; color: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sp-cats button .anticon { color: #94a3b8; font-size: 16px; }
.sp-cats button.is-on { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 8%, transparent); font-weight: 600; }
.sp-cats button.is-on .anticon { color: var(--app-primary, #0d4d9c); }
html.dark-theme .sp-msg > div { background: #262626; }
html.dark-theme .sp-msg.is-mine > div { background: #1e293b; }
/* marketing */
.mk-grow { flex: 1 1 auto; }
.mk-unread { margin-left: 4px; padding: 0 6px; border-radius: 99px; background: #dc2626; color: #fff; font-size: 11px; font-style: normal; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.mk-route { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--st-border); border-top: 3px solid var(--c); border-radius: 12px; background: var(--st-card); }
.mk-route header { display: flex; align-items: center; gap: 10px; }
.mk-route header > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.mk-route header strong { overflow: hidden; color: var(--st-text); text-overflow: ellipsis; white-space: nowrap; }
.mk-route header small { color: var(--st-muted); font-size: 12px; }
.mk-route__path { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); color: var(--st-text); font-weight: 600; text-transform: capitalize; }
.mk-route__path > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-route__path .anticon { color: var(--c); }
.mk-route__progress > div { display: flex; justify-content: space-between; color: var(--st-muted); font-size: 12.5px; }
.mk-route__progress b { color: var(--st-text); }
.mk-route__progress i { display: block; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(127, 127, 127, 0.18); }
.mk-route__progress i b { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.mk-route footer { display: flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) { .ib-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ib-stats, .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ib-search, .ib-period { width: 100%; }
  .mk-grid { grid-template-columns: 1fr; }
  .ib-statuspick { grid-template-columns: 1fr; }
}

/* ---- Marketing: route details (screens-marketing.js) ----------------------------------------------------------------- */
.rd-modal .ant-modal-content { padding: 0; overflow: hidden; }
.rd-modal .ant-modal-body { max-height: calc(100vh - 80px); overflow-y: auto; }
.rd { display: flex; flex-direction: column; }
.rd-head { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 18px; border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, transparent), transparent); }
.rd-head__top { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.rd-head__who { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.rd-head__who small { color: #6b7280; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.rd-head__who strong { font-size: 18px; }
.rd-head__who span { color: #6b7280; font-size: 12.5px; }
.rd-path { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(127, 127, 127, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.6); font-size: 16px; font-weight: 700; text-transform: capitalize; }
.rd-path > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rd-path > span .anticon { color: var(--c); }
.rd-path > i { flex: 1 1 auto; height: 0; border-top: 2px dashed rgba(127, 127, 127, 0.35); }
.rd-path > .anticon { color: var(--c); }
.rd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rd-stats > div { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 9%, transparent); }
.rd-stats b { color: var(--c); font-size: 20px; line-height: 1.2; }
.rd-stats small { color: #6b7280; font-size: 12px; }
.rd-progress { display: flex; align-items: center; gap: 10px; }
.rd-progress i { flex: 1 1 auto; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(127, 127, 127, 0.18); }
.rd-progress i b { display: block; height: 100%; border-radius: 99px; background: #10b981; transition: width 0.3s; }
.rd-progress span { color: #6b7280; font-size: 12.5px; font-weight: 600; }
.rd-filters { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 24px; border-top: 1px solid rgba(127, 127, 127, 0.15); border-bottom: 1px solid rgba(127, 127, 127, 0.15); background: var(--ant-color-bg-elevated, #fff); }
.rd-filters button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 99px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.rd-filters button b { min-width: 18px; padding: 0 5px; border-radius: 99px; background: rgba(127, 127, 127, 0.14); font-size: 11px; text-align: center; }
.rd-filters button.is-on { border-color: var(--app-primary, #0d4d9c); background: color-mix(in srgb, var(--app-primary, #0d4d9c) 10%, transparent); color: var(--app-primary, #0d4d9c); font-weight: 600; }
.rd-hint { margin-left: auto; color: #6b7280; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.rd-stops { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px 24px 24px; list-style: none; }
.rd-stops::before { content: ''; position: absolute; top: 30px; bottom: 40px; left: 41px; border-left: 2px dashed rgba(127, 127, 127, 0.3); }
.rd-stop { position: relative; display: flex; gap: 14px; }
.rd-stop.is-dragging { opacity: 0.45; }
.rd-stop.is-drop .rd-stop__card { box-shadow: 0 -3px 0 0 var(--app-primary, #0d4d9c); }
.rd-stop__n { position: relative; z-index: 1; flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; margin-top: 8px; border: 2px solid var(--c); border-radius: 50%; background: var(--ant-color-bg-elevated, #fff); color: var(--c); font-weight: 800; }
.rd-stop__card { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(127, 127, 127, 0.2); border-left: 3px solid var(--c); border-radius: 12px; background: var(--ant-color-bg-elevated, #fff); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); }
.rd-stop[draggable='true'] .rd-stop__card { cursor: grab; }
.rd-stop__top { display: flex; align-items: flex-start; gap: 8px; }
.rd-grip { margin-top: 2px; color: #9ca3af; cursor: grab; }
.rd-stop__who { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.rd-stop__who strong { font-size: 15px; }
.rd-stop__who small { color: #6b7280; }
.rd-stop__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: #6b7280; font-size: 12.5px; }
.rd-stop__meta > * { display: inline-flex; align-items: flex-start; gap: 5px; }
.rd-stop__meta .anticon { margin-top: 3px; }
.rd-note { display: flex; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(127, 127, 127, 0.07); font-size: 13px; white-space: pre-wrap; }
.rd-note .anticon { margin-top: 3px; color: #6b7280; }
.rd-stop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rd-grow { flex: 1 1 auto; }
.rd-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--app-primary, #0d4d9c); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rd-hist { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(127, 127, 127, 0.25); list-style: none; }
.rd-hist li { display: flex; gap: 10px; }
.rd-hist li > i { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--c); }
.rd-hist li > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-hist__top { display: flex; justify-content: space-between; gap: 8px; }
.rd-hist__top strong { color: var(--c); font-size: 13px; }
.rd-hist__top small { color: #6b7280; font-size: 11.5px; }
.rd-hist p { margin: 0; font-size: 13px; }
.rd-photo { position: relative; display: grid; place-items: center; width: 110px; height: 110px; overflow: hidden; border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 10px; background: rgba(127, 127, 127, 0.07); color: #9ca3af; font-size: 11px; text-align: center; }
.rd-photo > span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; }
.rd-photo > span .anticon { font-size: 20px; }
.rd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-none { padding: 24px; text-align: center; }
html.dark-theme .rd-path { background: rgba(255, 255, 255, 0.04); }
@media (max-width: 640px) {
  .rd-head, .rd-filters { padding-left: 14px; padding-right: 14px; }
  .rd-stops { padding: 12px 12px 18px; }
  .rd-stops::before { left: 29px; }
  .rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-hint { width: 100%; margin-left: 0; }
  .rd-path { font-size: 14px; }
}
.rd-dir { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid #d9d9d9; border-radius: 6px; color: inherit; font-size: 14px; }
.rd-dir:hover { border-color: var(--app-primary, #0d4d9c); color: var(--app-primary, #0d4d9c); }

/* ---- AI search (screens-search.js) ------------------------------------------------------------------------------------ */
.ais-page { gap: 16px; max-width: 1200px; }
.ais-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 24px 18px; overflow: hidden; border-radius: 18px; text-align: center;
  background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--st-primary) 18%, transparent), transparent 45%), radial-gradient(circle at 90% 90%, color-mix(in srgb, #7c3aed 16%, transparent), transparent 45%), var(--st-card); border: 1px solid var(--st-border); }
.ais-hero.is-compact { padding: 18px 20px 12px; }
.ais-hero__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--st-primary) 10%, transparent); color: var(--st-primary); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ais-hero h1 { margin: 4px 0 0; color: var(--st-text); font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; line-height: 1.15; }
.ais-hero p { max-width: 560px; margin: 0; color: var(--st-muted); font-size: 15px; }
.ais-hero .ai-search-bar { width: min(760px, 100%); margin-top: 6px; }
.ais-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 860px; }
.ais-suggest.is-left { justify-content: flex-start; }
.ais-suggest button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--st-border); border-radius: 99px; background: var(--st-card); color: var(--st-text); font-size: 13px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.ais-suggest button .anticon { color: var(--st-primary); }
.ais-suggest button:hover { border-color: var(--st-primary); color: var(--st-primary); }
.ais-modes { display: inline-flex; gap: 4px; margin-top: 6px; padding: 4px; border: 1px solid var(--st-border); border-radius: 12px; background: rgba(127, 127, 127, 0.06); }
.ais-modes button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--st-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ais-modes button.is-on { background: var(--st-card); color: var(--st-primary); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }
.ais-modes button b { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--st-primary); color: #fff; font-size: 11px; }
.ais-block { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.ais-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.ais-block__head strong { display: inline-flex; align-items: center; gap: 7px; color: var(--st-text); }
.ais-block__head small { font-size: 12.5px; }
.ais-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ais-modules button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 12px; background: transparent; color: var(--st-text); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.ais-modules button span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 15px; }
.ais-modules button:hover { border-color: var(--c); transform: translateY(-1px); }
.ais-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ais-head > div { display: flex; flex-direction: column; }
.ais-head strong { color: var(--st-text); font-size: 18px; }
.ais-head small { display: inline-flex; align-items: center; gap: 5px; color: var(--st-muted); font-size: 12.5px; }
.ais-results { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.ais-facets { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.ais-facets button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--st-text); font-size: 13.5px; text-align: left; cursor: pointer; }
.ais-facets button .anticon { color: var(--c, var(--st-primary)); }
.ais-facets button span { flex: 1 1 auto; }
.ais-facets button b { min-width: 22px; padding: 0 6px; border-radius: 99px; background: rgba(127, 127, 127, 0.12); font-size: 11.5px; text-align: center; }
.ais-facets button:hover { background: rgba(127, 127, 127, 0.07); }
.ais-facets button.is-on { background: color-mix(in srgb, var(--c, var(--st-primary)) 12%, transparent); font-weight: 700; }
.ais-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ais-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); color: var(--st-text); text-align: left; }
.ais-row.is-link { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.ais-row.is-link:hover { border-color: var(--st-primary); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.ais-row__icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 18px; }
.ais-row__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ais-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ais-row__top strong { font-size: 15px; }
.ais-row__sub { color: var(--st-text); font-size: 13px; opacity: 0.85; }
.ais-row__meta { overflow: hidden; color: var(--st-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ais-row mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; }
.ais-row__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; }
.ais-row__side small:first-child { font-weight: 700; }
.ais-row__side > .anticon { color: var(--st-muted); }
/* assistant */
.ais-chat { display: flex; flex-direction: column; min-height: 460px; overflow: hidden; border: 1px solid var(--st-border); border-radius: 16px; background: var(--st-card); }
.ais-chat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--st-border); }
.ais-chat__head > div { display: flex; flex-direction: column; gap: 2px; }
.ais-chat__head strong { display: inline-flex; align-items: center; gap: 7px; color: var(--st-text); font-size: 15px; }
.ais-chat__head small { color: var(--st-muted); font-size: 12.5px; }
.ais-chat__log { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; max-height: 56vh; overflow-y: auto; padding: 16px; background: rgba(127, 127, 127, 0.04); }
.ais-starters { display: flex; flex-direction: column; gap: 8px; margin: auto; width: min(560px, 100%); }
.ais-starters small { color: var(--st-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }
.ais-starters button { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); color: var(--st-text); font-size: 13.5px; text-align: left; cursor: pointer; }
.ais-starters button .anticon { color: #d97706; }
.ais-starters button:hover { border-color: var(--st-primary); }
.ais-msg { display: flex; gap: 10px; max-width: 86%; }
.ais-msg--you { align-self: flex-end; flex-direction: row-reverse; }
.ais-msg__av { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--st-primary) 14%, transparent); color: var(--st-primary); }
.ais-msg--you .ais-msg__av { background: rgba(127, 127, 127, 0.15); color: var(--st-muted); }
.ais-msg__bubble { padding: 10px 14px; border-radius: 14px; background: var(--st-card); color: var(--st-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.ais-msg--you .ais-msg__bubble { background: var(--st-primary); color: #fff; }
.ais-msg__text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ais-msg__meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; opacity: 0.7; font-size: 11px; }
.ais-msg__meta button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font-size: 11.5px; cursor: pointer; }
.ais-msg__bubble.cx-dots i { background: var(--st-muted); }
.ais-chat__compose { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--st-border); }
.ais-chat__compose textarea.ant-input { padding: 9px 14px; border-radius: 18px; font-size: 14px; resize: none; }
@media (max-width: 860px) {
  .ais-results { grid-template-columns: 1fr; }
  .ais-facets { position: static; flex-direction: row; flex-wrap: wrap; }
  .ais-facets button { flex: 0 0 auto; }
  .ais-facets button span { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .ais-hero { padding: 22px 14px 14px; }
  .ais-row__side small { display: none; }
  .ais-msg { max-width: 100%; }
  .ais-modes button { padding: 6px 10px; font-size: 12.5px; }
}
.ais-facets button span { text-align: left; }
@media (max-width: 560px) {
  .ai-search-bar--large .ant-btn .ant-btn-icon { display: inline-flex !important; }
  .ais-modes button { white-space: nowrap; }
}

/* ---- Worker tours (screens-worker-tour.js) ---------------------------------------------------------------------------- */
.wt-page .og-panel { gap: 14px; }
.wt-beat { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.wt-beat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.wt-beat__head > div:first-child { display: flex; flex-direction: column; }
.wt-beat__head strong { display: inline-flex; align-items: center; gap: 7px; color: var(--st-text); font-size: 15px; }
.wt-beat__head small { color: var(--st-muted); font-size: 12.5px; }
.wt-beat__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-beat__empty { margin: 0; font-size: 13px; }
.wt-stops { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wt-stops li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--st-border); border-radius: 99px; color: var(--st-text); font-size: 13px; }
.wt-stops li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; font-size: 11.5px; font-weight: 700; }
.wt-stops li.is-done { border-color: color-mix(in srgb, #10b981 40%, var(--st-border)); }
.wt-stops li.is-done span { background: #10b981; color: #fff; }
.wt-list { display: flex; flex-direction: column; gap: 10px; }
.wt-tour { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--st-border); border-left: 4px solid var(--c); border-radius: 12px; background: var(--st-card); transition: box-shadow 0.15s; }
.wt-tour:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.wt-tour__date { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; background: rgba(127, 127, 127, 0.07); line-height: 1.1; }
.wt-tour__date b { color: var(--st-text); font-size: 20px; }
.wt-tour__date small { color: #dc2626; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.wt-tour__date em { color: var(--st-muted); font-size: 10.5px; font-style: normal; }
.wt-tour__main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wt-tour__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wt-tour__top strong { color: var(--st-text); font-size: 15px; }
.wt-tour__top code { padding: 0 6px; border-radius: 5px; background: rgba(127, 127, 127, 0.12); color: var(--st-muted); font-size: 11.5px; }
.wt-tour__time { display: inline-flex; align-items: center; gap: 6px; color: var(--st-muted); font-size: 13px; }
.wt-tour__stats { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--st-muted); font-size: 12.5px; }
.wt-tour__stats span { display: inline-flex; align-items: center; gap: 5px; }
.wt-tour__stats b { color: var(--st-text); }
.wt-tour__actions { flex: 0 0 auto; display: flex; gap: 6px; }
@media (max-width: 760px) {
  .wt-tour { flex-wrap: wrap; }
  .wt-tour__main { flex-basis: calc(100% - 80px); }
  .wt-tour__actions { width: 100%; }
  .wt-tour__actions .ant-btn { flex: 1 1 0; }
}
.wt-open { color: #d97706; font-weight: 600; }

/* ---- Staff: device information dialog (screens-staff.js) -------------------------------------------------------------- */
.dv-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dv-who span { display: flex; flex-direction: column; }
.dv-who small { color: #6b7280; }
.dv-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.dv-summary > div { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); }
.dv-summary b { font-size: 20px; line-height: 1.2; }
.dv-summary small { color: #6b7280; font-size: 12px; }
.dv-summary .is-bad b { color: #dc2626; }
.dv-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.dv-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 12px; }
.dv-item.is-current { border-color: color-mix(in srgb, #16a34a 45%, transparent); background: color-mix(in srgb, #16a34a 5%, transparent); }
.dv-item.is-emu { border-color: color-mix(in srgb, #dc2626 45%, transparent); }
.dv-item__icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; font-size: 19px; }
.dv-item.is-current .dv-item__icon { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; }
.dv-item.is-emu .dv-item__icon { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }
.dv-item__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dv-item__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-item__top strong { font-size: 15px; }
.dv-item__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-item__chips span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; background: rgba(127, 127, 127, 0.1); color: #6b7280; font-size: 12px; }
.dv-item__when { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.dv-item__when b { font-size: 13px; }
.dv-item__when small { color: #6b7280; font-size: 11.5px; }
.dv-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; }
@media (max-width: 560px) { .dv-item { flex-wrap: wrap; } .dv-item__when { align-items: flex-start; width: 100%; padding-left: 52px; text-align: left; } }

/* ---- Staff assets & spare parts (screens-staff-assets.js / -spares.js) ------------------------------------------------ */
.si-page .og-panel { gap: 12px; }
.si-hero { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 0; border: 1px solid var(--st-border); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--st-primary) 9%, var(--st-card)), var(--st-card)); }
.si-back.ant-btn { align-self: flex-start; margin-left: -8px; color: var(--st-muted); }
.si-hero__main { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.si-hero__who { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.si-hero__who small { color: var(--st-muted); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.si-hero__who h1 { margin: 0; color: var(--st-text); font-size: 22px; line-height: 1.25; }
.si-hero__who span { color: var(--st-muted); font-size: 13px; }
.si-hero__actions { display: flex; gap: 8px; }
.si-switch { display: flex; gap: 4px; margin: 0 -18px; padding: 0 14px; border-top: 1px solid var(--st-border); }
.si-switch button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--st-muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.si-switch button.is-on { border-bottom-color: var(--st-primary); color: var(--st-primary); }
.si-list { display: flex; flex-direction: column; gap: 8px; }
.si-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); }
.si-item__icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; font-size: 19px; }
.si-item__icon.is-teal { background: color-mix(in srgb, #0d9488 12%, transparent); color: #0d9488; }
.si-item__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.si-item__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.si-item__top strong { color: var(--st-text); font-size: 15px; }
.si-qty { padding: 0 8px; border-radius: 99px; background: rgba(127, 127, 127, 0.12); color: var(--st-text); font-size: 12px; font-weight: 700; }
.si-item__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--st-muted); font-size: 12.5px; }
.si-item__meta span { display: inline-flex; align-items: center; gap: 5px; }
.si-item__meta code { padding: 0 5px; border-radius: 4px; background: rgba(127, 127, 127, 0.1); font-size: 12px; }
.si-note { margin: 2px 0 0; color: var(--st-muted); font-size: 12.5px; }
.si-item__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .si-item { flex-wrap: wrap; }
  .si-item__body { flex-basis: calc(100% - 60px); }
  .si-item__actions { width: 100%; }
  .si-hero__actions { width: 100%; }
  .si-hero__actions .ant-btn { flex: 1 1 auto; }
}
@media (max-width: 560px) { .dv-item__body { flex-basis: calc(100% - 52px); } }

/* ---- Products & orders (screens-products.js / screens-orders.js) ------------------------------------------------------ */
.pd-page .og-panel, .od-page .og-panel { gap: 14px; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.pd-card { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; border: 1px solid var(--st-border); border-left: 4px solid var(--c); border-radius: 12px; background: var(--st-card); cursor: pointer; transition: box-shadow 0.15s; }
.pd-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.pd-card__media { flex: 0 0 96px; }
.pd-card__body { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.pd-card__top strong { color: var(--st-text); font-size: 15px; line-height: 1.3; }
.pd-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pd-card__price b { color: var(--st-text); font-size: 18px; }
.pd-card__price s { color: var(--st-muted); font-size: 12.5px; }
.pd-off { padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; font-size: 11.5px; font-weight: 700; }
.pd-card__stock, .pd-stockcell { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--st-muted); }
.pd-card__stock b, .pd-stockcell b { color: var(--st-text); }
.pd-card__stock i, .pd-stockcell i { flex: 1 1 auto; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(127, 127, 127, 0.18); }
.pd-card__stock i b, .pd-stockcell i b { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.pd-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--st-muted); font-size: 12px; }
.pd-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.pd-card > footer { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--st-border); }
.od-stats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.od-stats .ex-stat { padding: 10px; }
.od-stats .ex-stat__icon { display: none; }
.od-list { display: flex; flex-direction: column; gap: 8px; }
.od-row { display: grid; grid-template-columns: 170px minmax(180px, 1.3fr) minmax(150px, 1fr) 120px 150px 180px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--st-border); border-left: 4px solid var(--c); border-radius: 12px; background: var(--st-card); }
.od-row__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-row__id code { overflow: hidden; color: var(--st-text); font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.od-row__id small { color: var(--st-muted); font-size: 11.5px; }
.od-row__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.od-row__who > span { display: flex; flex-direction: column; min-width: 0; }
.od-row__who strong { overflow: hidden; color: var(--st-text); text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.od-row__who small { color: var(--st-muted); font-size: 12px; }
.od-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-row__items { min-width: 0; }
.od-row__amt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.od-row__amt b { color: var(--st-text); font-size: 15px; }
.od-row__status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.od-steps { display: flex; gap: 3px; }
.od-steps i { width: 18px; height: 5px; border-radius: 99px; background: rgba(127, 127, 127, 0.22); }
.od-steps i.is-done { background: color-mix(in srgb, var(--c) 55%, transparent); }
.od-steps i.is-now { background: var(--c); }
.od-steps.is-closed span { display: inline-flex; align-items: center; gap: 4px; color: #dc2626; font-size: 11.5px; }
.od-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.od-final { font-size: 12.5px; }
@media (max-width: 1280px) { .od-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .od-row { grid-template-columns: 1fr 1fr 1fr; } .od-row__actions { justify-content: flex-start; } }
@media (max-width: 640px) {
  .od-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-row { grid-template-columns: 1fr; gap: 8px; }
  .pd-grid { grid-template-columns: 1fr; }
}

/* ---- Add / edit product form (TA.productFormBody in screens-products.js, add page in screens-product-details.js) --------- */
.pa-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 12px; }
.pa-sum > div { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #16a34a 7%, transparent); }
.pa-sum small { color: #6b7280; font-size: 11.5px; }
.pa-sum b { font-size: 17px; line-height: 1.25; }
.pa-sum em { color: #6b7280; font-size: 11.5px; font-style: normal; }
.pa-current { margin-bottom: 10px; }
.pa-current small { display: block; margin-bottom: 6px; color: #6b7280; font-size: 12px; }
.pa-current > div { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-thumb { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: rgba(127, 127, 127, 0.07); }
.pa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pa-thumb.is-broken::after { content: 'Not available'; padding: 4px; color: #9ca3af; font-size: 10.5px; text-align: center; }
.pa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.pa-main { min-width: 0; }
.pa-preview { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.pa-preview__label { color: var(--st-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pa-preview__img { display: grid; place-items: center; height: 180px; overflow: hidden; border-radius: 10px; background: rgba(127, 127, 127, 0.08); color: var(--st-muted); }
.pa-preview__img img { width: 100%; height: 100%; object-fit: cover; }
.pa-preview__img span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; }
.pa-preview__img span .anticon { font-size: 26px; }
.pa-preview strong { color: var(--st-text); font-size: 16px; }
.pa-preview__price { display: flex; align-items: baseline; gap: 6px; }
.pa-preview__price b { color: var(--st-text); font-size: 22px; }
.pa-preview__price s { color: var(--st-muted); }
.pa-preview__price em { color: #dc2626; font-size: 12px; font-style: normal; font-weight: 700; }
.pa-preview .ex-status { align-self: flex-start; }
.pa-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--st-border); border-radius: 14px; background: color-mix(in srgb, var(--st-card) 94%, transparent); backdrop-filter: blur(6px); }
@media (max-width: 960px) { .pa-layout { grid-template-columns: 1fr; } .pa-preview { position: static; order: -1; } .pa-preview__img { height: 140px; } }
@media (max-width: 560px) { .pa-sum { grid-template-columns: 1fr; } .pa-savebar .ant-btn { flex: 1 1 0; } }

/* ---- Order detail (screens-order-items.js) ---------------------------------------------------------------------------- */
.oi-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.oi-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.oi-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.oi-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oi-card__head strong { display: inline-flex; align-items: center; gap: 7px; color: var(--st-text); font-size: 15px; }
.oi-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.oi-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.oi-steps li::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: rgba(127, 127, 127, 0.2); }
.oi-steps li:first-child::before { display: none; }
.oi-steps li.is-done::before, .oi-steps li.is-now::before { background: var(--c); }
.oi-steps li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid rgba(127, 127, 127, 0.3); border-radius: 50%; background: var(--st-card); color: var(--st-muted); font-size: 13px; font-weight: 700; }
.oi-steps li.is-done > span { border-color: var(--c); background: var(--c); color: #fff; }
.oi-steps li.is-now > span { border-color: var(--c); color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.oi-steps li > div { display: flex; flex-direction: column; }
.oi-steps strong { color: var(--st-text); font-size: 12.5px; }
.oi-steps li:not(.is-done):not(.is-now) strong { color: var(--st-muted); font-weight: 500; }
.oi-steps small { color: var(--st-muted); font-size: 11px; }
.oi-steps.is-closed { opacity: 0.45; }
.oi-closed { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #dc2626 9%, transparent); color: #b91c1c; }
.oi-closed > .anticon { font-size: 20px; }
.oi-closed div { display: flex; flex-direction: column; }
.oi-closed small { color: var(--st-muted); }
.oi-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.oi-totals > div { display: flex; justify-content: space-between; gap: 24px; min-width: 260px; color: var(--st-muted); }
.oi-totals b { color: var(--st-text); }
.oi-total { padding-top: 6px; border-top: 1px solid var(--st-border); font-size: 16px; }
.oi-total b { font-size: 20px; }
.oi-totals p { margin: 0; font-size: 12px; }
.oi-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; }
.oi-dl > div { padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.06); }
.oi-dl dt { color: var(--st-muted); font-size: 11.5px; }
.oi-dl dd { margin: 0; color: var(--st-text); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.oi-contact { display: flex; align-items: center; gap: 12px; }
.oi-contact span { display: flex; flex-direction: column; }
.oi-contact strong { color: var(--st-text); font-size: 15px; text-transform: capitalize; }
.oi-contact small { color: var(--st-muted); }
.oi-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.oi-lines li { display: flex; align-items: flex-start; gap: 8px; color: var(--st-text); font-size: 13px; }
.oi-lines li > .anticon { margin-top: 3px; color: var(--st-muted); }
.oi-map { align-self: flex-start; }
@media (max-width: 1000px) { .oi-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .oi-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .oi-steps li:nth-child(4)::before { display: none; }
  .oi-totals > div { min-width: 0; width: 100%; }
}
.oi-page .og-hero h1 { overflow-wrap: anywhere; }

/* ---- Worker expenses + one day (screens-expense-worker.js) --------------------------------------------------------------- */
.wx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.wx-main, .wx-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wx-day { overflow: hidden; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.wx-day > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--st-border); background: rgba(127, 127, 127, 0.04); }
.wx-day__date { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: var(--st-text); text-align: left; cursor: pointer; }
.wx-day__date:hover strong { color: var(--st-primary); }
.wx-day__date > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.wx-day__date strong { font-size: 14.5px; }
.wx-day__date small, .wx-day__sum small { color: var(--st-muted); font-size: 12px; }
.wx-cal { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--st-primary) 12%, transparent); color: var(--st-primary); line-height: 1.1; }
.wx-cal b { font-size: 17px; }
.wx-cal small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; }
.wx-day__sum { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.wx-day__sum b { color: var(--st-text); font-size: 17px; }
.wx-day__list { display: flex; flex-direction: column; }
.wx-claim { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--st-border); }
.wx-day__list > .wx-claim:first-child { border-top: 0; }
.wx-claim__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); font-size: 16px; }
.wx-claim__main { display: flex; flex-direction: column; min-width: 0; }
.wx-claim__main strong { overflow: hidden; color: var(--st-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.wx-claim__main small { color: var(--st-muted); font-size: 12px; }
.wx-claim__ticket { display: inline-flex; align-items: center; gap: 4px; }
.wx-claim__note { overflow: hidden; font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.wx-claim__side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.wx-claim__side b { color: var(--st-text); font-size: 15px; }
.wx-claim__act { display: flex; align-items: center; gap: 4px; min-width: 32px; justify-content: flex-end; }
.wx-side { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.wx-side h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; color: var(--st-text); font-size: 14px; }
.wx-bar { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: var(--st-text); text-align: left; cursor: pointer; }
.wx-bar:hover { background: rgba(127, 127, 127, 0.08); }
.wx-bar > span { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.wx-bar em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.wx-bar i { display: block; height: 6px; border-radius: 4px; background: var(--st-primary); opacity: 0.75; }
.wx-bar small { color: var(--st-muted); font-size: 11px; }
.wx-tk { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; color: var(--st-text); font-size: 13px; }
.wx-tk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-sheet { display: flex; flex-direction: column; gap: 10px; }
.wx-sheet__row { display: flex; gap: 8px; }
@media (max-width: 1100px) { .wx-grid { grid-template-columns: 1fr; } .wx-aside { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
@media (max-width: 640px) {
  .wx-claim { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .wx-claim__act { grid-column: 2 / -1; justify-content: flex-start; }
  .wx-claim__act:empty { display: none; }
}

/* ---- Payment view (screens-payment-view.js; shares oi-grid / oi-dl / oi-contact with the order page) ------------------- */
.pv-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-card); }
.pv-card h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--st-text); font-size: 15px; }
.pv-card h3 small { color: var(--st-muted); font-weight: 500; }
.pv-h-btn { margin-left: auto; }
.pv-amount { border-left: 4px solid var(--c); }
.pv-amount__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pv-amount__top > div { display: flex; flex-direction: column; }
.pv-amount__top small, .pv-cash > small { color: var(--st-muted); font-size: 12px; }
.pv-amount__top b { color: var(--st-text); font-size: 30px; line-height: 1.2; }
.pv-amount__top span { color: var(--st-muted); }
.pv-badge { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c) !important; font-weight: 600; white-space: nowrap; }
.pv-hint { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--st-muted); font-size: 12.5px; }
.pv-cash { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--st-border); }
.pv-cash ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pv-cash li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); color: var(--st-muted); font-size: 12.5px; }
.pv-cash li > span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(127, 127, 127, 0.15); }
.pv-cash li em { font-style: normal; }
.pv-cash li.is-done { color: #15803d; }
.pv-cash li.is-done > span { background: #16a34a; color: #fff; }
.pv-cash li.is-now { background: color-mix(in srgb, #2563eb 10%, transparent); color: var(--st-text); font-weight: 600; }
.pv-cash li.is-now > span { background: #2563eb; color: #fff; }
.pv-cash .ant-btn { align-self: flex-start; }
.pv-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pv-docs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 110px; overflow: hidden; border: 1px solid var(--st-border); border-radius: 10px; color: var(--st-muted); }
.pv-docs img { width: 100%; height: 100%; object-fit: cover; }
.pv-docs .anticon { font-size: 26px; }
.pv-empty { display: flex; align-items: center; gap: 8px; margin: 0; }
.pv-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(127, 127, 127, 0.06); color: var(--st-text); white-space: pre-wrap; }
.pv-row-btns { display: flex; justify-content: flex-end; gap: 8px; }
.pv-addr { margin: 0; color: var(--st-text); font-size: 13px; }
.pv-map { height: 200px; overflow: hidden; border-radius: 10px; }
.pv-card .rd-dir { align-self: flex-start; }
@media (max-width: 640px) { .pv-cash ol { grid-template-columns: 1fr; } .pv-amount__top b { font-size: 24px; } }

/* ---- Leave request detail (screens-leave.js leaveDetails; uses the pv- cards) ------------------------------------------- */
.lv-range { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 127, 127, 0.06); }
.lv-range > div { display: flex; flex-direction: column; }
.lv-range small { color: var(--st-muted); font-size: 11.5px; }
.lv-range strong { color: var(--st-text); }
.lv-range > .anticon { color: var(--st-muted); }
.lv-decision { display: flex; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--st-border); }
.lv-decision > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.lv-decision > div { display: flex; flex-direction: column; }
.lv-decision strong { color: var(--st-text); }
.lv-decision small { color: var(--st-muted); font-size: 12px; }
.lv-decision p { margin: 6px 0 0; color: var(--st-text); font-style: italic; white-space: pre-wrap; }
.lv-wide { grid-column: 1 / -1; }
.lv-others { display: flex; flex-direction: column; }
.lv-other { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px; border: 0; border-top: 1px solid var(--st-border); background: none; color: var(--st-text); text-align: left; cursor: pointer; }
.lv-other:first-child { border-top: 0; }
.lv-other:hover { background: rgba(127, 127, 127, 0.06); }
.lv-other > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.lv-other small { color: var(--st-muted); font-size: 12px; }
.lv-other em { color: #d97706; font-size: 12px; font-style: normal; }
.lv-year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lv-year > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 9%, transparent); }
.lv-year b { color: var(--c); font-size: 16px; }
.lv-year small { color: var(--st-muted); font-size: 11.5px; }
.lv-bal { display: flex; flex-direction: column; gap: 6px; }
.lv-bal > div { display: grid; grid-template-columns: 1fr auto; padding: 6px 8px; border-radius: 8px; background: rgba(127, 127, 127, 0.06); font-size: 13px; }
.lv-bal small { grid-column: 1 / -1; color: var(--st-muted); font-size: 11.5px; }

/* ---- Enquiry detail (screens-enquiries.js enquiryDetails; uses the pv- cards) ------------------------------------------ */
.enq-status { font-size: 24px !important; }
.enq-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.enq-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.07); color: var(--st-muted); font-size: 12.5px; }
.enq-steps li > span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(127, 127, 127, 0.15); }
.enq-steps li em { font-style: normal; }
.enq-steps li.is-done > span { background: var(--c); color: #fff; }
.enq-steps li.is-now { background: color-mix(in srgb, var(--c) 11%, transparent); color: var(--st-text); font-weight: 600; }
.enq-steps li.is-now > span { background: var(--c); color: #fff; }

/* Product detail page follows the shared order and enquiry detail layout. */
.pd-page { max-width: 1480px; }
.pd-page .og-hero { margin-bottom: 16px; }
.pd-page .pd-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.pd-page .oi-col { gap: 16px; }
.pd-page .oi-card { box-shadow: 0 5px 18px rgba(15, 23, 42, 0.035); }
.pd-gallery { padding: 0; overflow: hidden; gap: 0; }
.pd-gallery .oi-card__head { padding: 16px 18px; border-bottom: 1px solid var(--st-border); }
.pd-gallery > div:last-child { width: 100%; padding: 18px; background: radial-gradient(ellipse at center, rgba(127, 127, 127, 0.075), transparent 70%); }
.pd-gallery img { height: clamp(300px, 38vw, 440px) !important; object-fit: contain !important; background: transparent; }
.pd-page .oi-dl { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pd-page .oi-dl > div { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--st-border) 72%, transparent); background: color-mix(in srgb, var(--st-card) 92%, var(--st-text) 8%); }
.pd-page .oi-dl dt { margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.045em; font-size: 10px; }
.pd-page .oi-dl dd { font-size: 13.5px; font-weight: 550; }
.pd-page .pv-note { margin: 0; line-height: 1.75; white-space: pre-wrap; }
.pd-price { position: sticky; top: 16px; }
.pd-price > .oi-card__head + div { width: 100%; margin: 0 !important; }
.pd-price > .oi-card__head + div > .ant-row { min-height: 72px; }
@media (max-width: 1000px) { .pd-page .pd-grid { grid-template-columns: 1fr; } .pd-price { position: static; } }
@media (max-width: 640px) { .pd-gallery > div:last-child { padding: 10px; } .pd-gallery img { height: 260px !important; } .pd-page .oi-dl { grid-template-columns: 1fr 1fr; } }