:root {
  --bg: #f2f6ff;
  --bg-deep: #e8efff;
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: #ffffff;
  --surface-soft: #f5f8ff;
  --surface-muted: #edf3ff;
  --text: #10233f;
  --text-soft: #425b7a;
  --muted: #7a8da8;
  --line: rgba(55, 94, 154, .14);
  --line-strong: rgba(35, 83, 157, .24);
  --primary: #155eef;
  --primary-dark: #0b3b8f;
  --primary-soft: #e9f0ff;
  --secondary: #4d7ff5;
  --secondary-soft: #edf3ff;
  --teal: #2f73e8;
  --accent: #74a2ff;
  --danger: #c64c5d;
  --danger-soft: #fdecef;
  --warning: #a77018;
  --shadow: 0 18px 52px rgba(31, 70, 84, .10);
  --shadow-soft: 0 8px 24px rgba(31, 70, 84, .07);
  --shadow-hover: 0 20px 46px rgba(31, 70, 84, .15);
  --app-font: Vazirmatn, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --app-font-size: 14px;
  --app-font-weight: 500;
  --radius-lg: 22px;
  --radius-md: 15px;
  --radius-sm: 11px;
  color-scheme: light;
  font-family: var(--app-font);
}

html[data-theme="dark"] {
  --bg: #081723;
  --bg-deep: #0c2130;
  --surface: rgba(18, 38, 53, .82);
  --surface-solid: #122637;
  --surface-soft: #102b3a;
  --surface-muted: #183343;
  --text: #e8f2f4;
  --text-soft: #b6cad0;
  --muted: #8ea8b1;
  --line: rgba(173, 216, 221, .16);
  --line-strong: rgba(173, 216, 221, .28);
  --primary: #4fc4ac;
  --primary-dark: #2fa58f;
  --primary-soft: rgba(79, 196, 172, .14);
  --secondary: #82aef3;
  --secondary-soft: rgba(130, 174, 243, .14);
  --teal: #4bd0af;
  --accent: #f1bc66;
  --danger: #f27b8a;
  --danger-soft: rgba(242, 123, 138, .14);
  --warning: #f0c36d;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .18);
  --shadow-hover: 0 24px 60px rgba(0, 0, 0, .34);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #081723;
    --bg-deep: #0c2130;
    --surface: rgba(18, 38, 53, .82);
    --surface-solid: #122637;
    --surface-soft: #102b3a;
    --surface-muted: #183343;
    --text: #e8f2f4;
    --text-soft: #b6cad0;
    --muted: #8ea8b1;
    --line: rgba(173, 216, 221, .16);
    --line-strong: rgba(173, 216, 221, .28);
    --primary: #4fc4ac;
    --primary-dark: #2fa58f;
    --primary-soft: rgba(79, 196, 172, .14);
    --secondary: #82aef3;
    --secondary-soft: rgba(130, 174, 243, .14);
    --teal: #4bd0af;
    --accent: #f1bc66;
    --danger: #f27b8a;
    --warning: #f0c36d;
    --shadow: 0 24px 70px rgba(0, 0, 0, .28);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .18);
    --shadow-hover: 0 24px 60px rgba(0, 0, 0, .34);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { min-height: 100%; direction: ltr; background: var(--bg); }
body {
  min-height: 100vh;
  direction: rtl;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--app-font-size);
  font-weight: var(--app-font-weight);
  font-family: var(--app-font);
  line-height: 1.65;
  overflow-x: hidden;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 8% 4%, rgba(20, 125, 114, .13), transparent 29%), radial-gradient(circle at 92% 16%, rgba(47, 103, 186, .11), transparent 26%), linear-gradient(145deg, var(--bg), var(--bg-deep));
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(47, 103, 186, .28); outline-offset: 2px; }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: .56; transform: none !important; }
.hidden { display: none !important; }
.global-search-wrap { display: flex; align-items: center; gap: 4px; min-width: 220px; }
.global-search { width: 190px; height: 36px; padding: 0 11px; color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 11px; outline: none; font: inherit; font-size: 11px; }
.global-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.top-date-widget { display: flex; align-items: center; gap: 8px; min-width: 178px; padding: 6px 11px; color: var(--text); text-align: right; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 11px; }
.top-date-widget:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.top-date-widget .top-date-label { color: var(--primary); font-size: 10px; font-weight: 800; }
.top-date-widget strong { font-size: 11px; white-space: nowrap; }
.kpi-weight-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.kpi-weight-grid button { grid-column: 1 / -1; justify-self: start; }
.calendar-event.task-event { color: var(--secondary); background: var(--secondary-soft); }
.calendar-event.incident-event { color: var(--danger); background: var(--danger-soft); }
.muted { color: var(--muted); }
.wide { width: 100%; }

.login-view { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 24px; overflow: hidden; }
.login-view::before, .login-view::after { position: absolute; content: ""; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.login-view::before { width: 420px; height: 420px; right: -150px; top: -170px; background: rgba(20, 125, 114, .16); }
.login-view::after { width: 320px; height: 320px; left: -110px; bottom: -120px; background: rgba(47, 103, 186, .13); }
.login-card { position: relative; z-index: 1; width: min(455px, 100%); padding: 43px 40px; text-align: right; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); animation: rise-in .45s ease both; }
.brand-logo { display: flex; align-items: center; flex: 0 0 auto; }
.brand#brand-home { cursor: pointer; }
.brand#brand-home:focus-visible { outline: 3px solid rgba(47, 103, 186, .28); outline-offset: 5px; border-radius: 12px; }
.login-card > .brand-logo { margin-bottom: 20px; }
.brand-logo-image { width: 56px; height: 56px; display: block; object-fit: contain; border-radius: 18px; }
.sidebar .brand-logo-image { width: 40px; height: 40px; border-radius: 13px; }
.brand-logo .brand-mark { margin-bottom: 0; }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 20px; color: #fff; font-size: 29px; font-weight: 800; border-radius: 18px; background: linear-gradient(145deg, var(--primary), var(--secondary)); box-shadow: 0 12px 24px rgba(20, 125, 114, .25); }
.brand-mark.small { width: 40px; height: 40px; margin: 0; font-size: 21px; border-radius: 13px; }
.eyebrow, .top-eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .25px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 8px 0 10px; font-size: 29px; letter-spacing: -.4px; }
h2 { margin: 3px 0 0; font-size: 24px; letter-spacing: -.3px; }
h3 { margin-bottom: 14px; font-size: 16px; }
.form-stack { display: grid; gap: 16px; margin-top: 26px; }
label { display: grid; gap: 7px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
input, textarea, select { width: 100%; padding: 11px 13px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
textarea { min-height: 95px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--primary); }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(20, 125, 114, .12); }
.primary, .secondary, .danger, .ghost, .icon-button, .notification-button { position: relative; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 15px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.primary { color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 8px 18px rgba(20, 125, 114, .18); }
.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20, 125, 114, .26); }
.primary:active, .secondary:active, .danger:active, .ghost:active, .icon-button:active, .notification-button:active { transform: translateY(1px) scale(.985); }
.secondary { color: var(--secondary); background: var(--secondary-soft); border-color: rgba(47, 103, 186, .12); }
.secondary:hover { background: rgba(47, 103, 186, .2); border-color: rgba(47, 103, 186, .25); transform: translateY(-1px); }
.danger { color: var(--danger); background: rgba(198, 76, 93, .11); border-color: rgba(198, 76, 93, .15); }
.danger:hover { background: rgba(198, 76, 93, .18); transform: translateY(-1px); }
.ghost { color: var(--muted); background: transparent; }
.ghost:hover { color: var(--text); background: var(--surface-muted); }
.is-loading { pointer-events: none; color: transparent !important; }
.is-loading::after { position: absolute; top: 50%; left: 50%; width: 17px; height: 17px; content: ""; border: 2px solid rgba(255, 255, 255, .42); border-top-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); animation: spin .7s linear infinite; }
.secondary.is-loading::after, .ghost.is-loading::after { border-color: rgba(20, 125, 114, .25); border-top-color: var(--primary); }
.demo-credentials { margin-top: 22px; padding: 11px 13px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11px; line-height: 1.8; }

.app-view { position: relative; min-height: 100vh; display: flex; }
.sidebar { position: sticky; top: 0; z-index: 10; width: 272px; min-height: 100vh; max-height: 100vh; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(120, 166, 255, .55) transparent; flex: 0 0 272px; display: flex; flex-direction: column; padding: 25px 15px; color: #eef4ff; background: linear-gradient(165deg, #071a3d 0%, #0a2b63 48%, #123f91 100%); box-shadow: 12px 0 32px rgba(8, 38, 53, .12); }
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(120, 166, 255, .48); border-radius: 10px; }
.sidebar::before { position: absolute; inset: 0; content: ""; opacity: .22; pointer-events: none; background: repeating-linear-gradient(135deg, transparent 0 31px, rgba(255,255,255,.05) 32px 33px); }
.sidebar > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 22px; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand strong, .brand span { display: block; }
.brand strong { color: #fff; font-size: 15px; }
.brand span { max-width: 170px; margin-top: 4px; color: #9fc3c9; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mini { width: 100%; margin-bottom: 13px; padding: 18px 11px; color: inherit; text-align: right; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.13); border-radius: 0; }
.user-mini:hover { background: rgba(255,255,255,.05); }
.user-mini strong { display: block; margin-bottom: 5px; color: #fff; }
.user-mini span { color: #a7cbd1; font-size: 11px; }
.main-nav { display: grid; gap: 4px; }
.nav-section { display: grid; gap: 3px; margin-bottom: 13px; }
.nav-section-label { padding: 4px 12px 5px; color: #6fa8ae; font-size: 10px; font-weight: 800; letter-spacing: .02em; opacity: .9; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: #d8e6ff; text-align: right; background: transparent; border: 0; border-radius: 12px; font-weight: 700; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(79,196,172,.22), rgba(47,103,186,.26)); box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { width: 23px; color: #8fb6ff; text-align: center; font-size: 16px; }
.sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.13); }
.nav-logout { width: 100%; color: #b6d1d5; text-align: right; }
.nav-logout:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-scrim { display: none; }
.main-area { min-width: 0; flex: 1; }
.topbar { position: sticky; top: 0; z-index: 8; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 36px; background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.dashboard-page-mode .topbar { display: none; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.sync-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 20px; font-size: 10px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(19, 166, 135, .12); }
.sync-indicator.offline .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(198, 76, 93, .12); }
.icon-button, .notification-button { color: var(--text-soft); background: var(--surface-muted); border-color: var(--line); }
.icon-button { width: 41px; padding: 9px; font-size: 20px; line-height: 20px; }
.icon-button:hover, .notification-button:hover { color: var(--primary); border-color: var(--line-strong); transform: translateY(-1px); }
.notification-button { position: relative; }
.badge { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; margin-right: 5px; color: #fff; background: var(--danger); border-radius: 20px; font-size: 10px; }
.mobile-menu { display: block; border: 0; background: transparent; color: var(--primary); font-size: 22px; }
.connection-banner { margin: 15px 36px 0; padding: 10px 14px; color: var(--danger); background: rgba(198, 76, 93, .10); border: 1px solid rgba(198, 76, 93, .2); border-radius: var(--radius-sm); font-size: 12px; }
.connection-banner.online { color: var(--primary); background: var(--primary-soft); border-color: rgba(20, 125, 114, .2); }
.page-content { max-width: 1600px; margin: 0 auto; padding: 31px 36px 55px; }
.tab-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tab-button { padding: 9px 14px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 10px; font-weight: 800; }
.tab-button span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; margin-right: 5px; color: var(--primary); background: var(--primary-soft); border-radius: 10px; font-size: 10px; }
.tab-button:hover, .tab-button.active { color: var(--primary); background: var(--primary-soft); border-color: rgba(20,125,114,.14); }
.group-leads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.group-leads div { padding: 9px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.group-leads span, .group-leads strong { display: block; }
.group-leads span { color: var(--muted); font-size: 10px; }
.group-leads strong { margin-top: 4px; font-size: 12px; }
.member-list { display: grid; gap: 5px; }
.member-list div { display: flex; justify-content: space-between; gap: 8px; color: var(--text-soft); font-size: 11px; }
.member-list small { color: var(--muted); }
.measurement-editor { margin-top: 18px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.measurement-editor h4 { margin: 0 0 10px; }
.measurement-line { display: grid; grid-template-columns: 1.5fr .8fr .8fr 1fr; gap: 7px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.measurement-line:last-child { border-bottom: 0; }
.measurement-line label { font-size: 11px; }
.measurement-line small { color: var(--muted); }
.measurement-line input[type=number] { min-width: 0; padding: 7px; }
.definition-list { display: grid; gap: 8px; }
.definition-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.definition-row strong, .definition-row span { display: block; }
.definition-row span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip { padding: 7px 10px; color: var(--primary); background: var(--primary-soft); border-radius: 18px; font-size: 11px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); line-height: 1.9; }
.page-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.grid { display: grid; gap: 18px; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-grid { grid-template-columns: 1.35fr 1fr; }
.three-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.card::before { position: absolute; inset: 0 0 auto; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); opacity: .7; pointer-events: none; }
.card-pad { padding: 20px; }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.stat-card { min-height: 142px; padding: 20px; }
.stat-card::after { position: absolute; width: 130px; height: 130px; left: -48px; top: -52px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(20, 125, 114, .16), transparent 68%); pointer-events: none; }
.stat-card .stat-label, .stat-card .stat-value, .stat-card .stat-note { position: relative; z-index: 1; }
.stat-label { color: var(--muted); font-size: 11px; }
.stat-value { margin-top: 11px; color: var(--text); font-size: 29px; font-weight: 850; letter-spacing: -.5px; }
.stat-note { margin-top: 8px; color: var(--muted); font-size: 10px; }
.stat-card.success .stat-value { color: var(--teal); }
.stat-card.danger .stat-value { color: var(--danger); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.section-title h3 { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 620px; border-collapse: collapse; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
th { color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
td { color: var(--text-soft); font-size: 12px; }
tbody tr { transition: background .18s ease; }
tbody tr:hover { background: rgba(20, 125, 114, .055); }
tbody tr.work-report-editable-row { cursor: pointer; }
tbody tr.work-report-editable-row:hover td { background: rgba(47, 103, 186, .08); }
tr:last-child td { border-bottom: 0; }
.title-cell { color: var(--text); font-weight: 750; }
.sub-cell { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 400; }
.pill { display: inline-flex; align-items: center; white-space: nowrap; padding: 5px 9px; color: var(--muted); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 20px; font-size: 10px; font-weight: 750; }
.pill.success { color: var(--teal); background: rgba(19, 166, 135, .11); border-color: rgba(19, 166, 135, .17); }
.pill.warning { color: var(--warning); background: rgba(217, 148, 47, .13); border-color: rgba(217, 148, 47, .18); }
.pill.danger { color: var(--danger); background: rgba(198, 76, 93, .11); border-color: rgba(198, 76, 93, .17); }
.pill.info { color: var(--secondary); background: var(--secondary-soft); border-color: rgba(47, 103, 186, .16); }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.toolbar input, .toolbar select { width: auto; min-width: 140px; }
.toolbar .search { min-width: 200px; flex: 1; }
.empty { padding: 37px 15px; color: var(--muted); text-align: center; }
.empty::before { display: block; margin-bottom: 8px; color: var(--primary); content: "◌"; font-size: 28px; opacity: .65; }
.error-state { padding: 28px 18px; color: var(--danger); text-align: center; }
.error-state .empty-icon { display: block; margin-bottom: 7px; font-size: 27px; }
.loading-shell { display: grid; gap: 13px; }
.skeleton { height: 16px; overflow: hidden; background: linear-gradient(90deg, var(--surface-muted), var(--surface-solid), var(--surface-muted)); background-size: 220% 100%; border-radius: 8px; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton.large { height: 125px; border-radius: var(--radius-md); }
.skeleton.short { width: 35%; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.person-row:last-child { border-bottom: 0; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; color: var(--secondary); background: var(--secondary-soft); border: 1px solid var(--line); border-radius: 11px; font-weight: 800; }
.person-meta { min-width: 0; flex: 1; }
.person-meta strong { display: block; font-size: 12px; }
.person-meta span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert { margin-bottom: 9px; padding: 13px 15px; background: var(--secondary-soft); border: 1px solid rgba(47, 103, 186, .13); border-right: 4px solid var(--secondary); border-radius: 12px; }
.alert.warning { background: rgba(217, 148, 47, .10); border-right-color: var(--warning); }
.alert.danger { background: rgba(198, 76, 93, .10); border-right-color: var(--danger); }
.alert strong { display: block; margin-bottom: 4px; font-size: 12px; }
.alert span { color: var(--text-soft); font-size: 11px; }
.progress-line { height: 8px; overflow: hidden; background: var(--surface-muted); border-radius: 10px; }
.progress-line span { display: block; height: 100%; background: linear-gradient(90deg, var(--secondary), var(--teal)); border-radius: inherit; }
.progress-meta { display: flex; justify-content: space-between; margin: 8px 0; color: var(--muted); font-size: 11px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(4, 21, 31, .60); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: fade-in .2s ease both; }
.modal { width: min(720px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); animation: rise-in .25s ease both; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-close { width: 32px; height: 32px; color: var(--muted); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 9px; }
.modal-close:hover { color: var(--danger); border-color: var(--danger); }
.modal-body { padding: 21px 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-start; gap: 8px; margin-top: 19px; }
.checkbox-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.check-option { display: flex; align-items: center; gap: 8px; padding: 9px; color: var(--text-soft); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }
.check-option:hover { border-color: var(--primary); background: var(--primary-soft); }
.check-option input { width: auto; accent-color: var(--primary); }
.notification-list { display: grid; gap: 9px; }
.notification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.notification-item { display: flex; gap: 12px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; transition: opacity .18s ease, transform .18s ease, max-height .18s ease, margin .18s ease, padding .18s ease; }
.notification-clickable { cursor: pointer; }
.notification-clickable:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.notification-item.unread { background: var(--secondary-soft); border-color: rgba(47, 103, 186, .22); }
.notification-item.notification-removing { opacity: 0; transform: translateY(-6px); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; pointer-events: none; }
.notification-copy { flex: 1; min-width: 0; }
.notification-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.notification-item strong { display: block; margin-bottom: 5px; font-size: 12px; }
.notification-item p { margin: 0; color: var(--text-soft); font-size: 11px; }
.notification-item time { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.metric-box { padding: 16px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 13px; }
.metric-box strong { display: block; margin-top: 8px; color: var(--text); font-size: 23px; }
.metric-box span { color: var(--muted); font-size: 11px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-actions button { min-width: 120px; flex: 1; }
.comment { padding: 11px 0; border-bottom: 1px solid var(--line); }
.comment:last-child { border-bottom: 0; }
.comment strong { font-size: 11px; }
.comment p { margin: 5px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.8; }
.comment time { color: var(--muted); font-size: 10px; }
.compact-mode .page-content { padding-top: 19px; }
.compact-mode th, .compact-mode td { padding-top: 8px; padding-bottom: 8px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.calendar-header h3 { margin: 0; font-size: 20px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.calendar-weekdays { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 750; text-align: center; }
.calendar-cell { min-height: 105px; padding: 9px; overflow: hidden; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 10px; }
.calendar-cell.blank { background: var(--surface-soft); opacity: .55; }
.calendar-day { margin-bottom: 7px; color: var(--text); font-size: 14px; font-weight: 800; }
.calendar-event { margin-top: 4px; padding: 4px 5px; overflow: hidden; color: var(--teal); background: rgba(19, 166, 135, .11); border-radius: 6px; font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.ticket-event { color: var(--warning); background: rgba(217, 148, 47, .13); }
.jalali-date-input, .jalali-datetime-input { direction: ltr; text-align: right; }
.user-role-help { color: var(--muted); font-size: 11px; line-height: 1.8; }
.small-action { padding: 7px 9px; margin-left: 4px; font-size: 11px; text-decoration: none; }
.archive-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  margin-left: 0;
  vertical-align: middle;
}
.toast-container { position: fixed; left: 22px; bottom: 22px; z-index: 50; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 44px)); }
.toast { color: #fff; background: #1b4055; border-radius: 12px; padding: 12px 15px; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease-out; }
.toast.success { background: #168b75; }
.toast.danger { background: #b73e53; }
.analytics-filters { background: linear-gradient(180deg, var(--surface-solid), var(--surface-soft)); }
.analytics-stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.filter-actions { display: flex; align-items: end; gap: 8px; padding-top: 23px; }
.analytics-bars { display: grid; gap: 15px; padding: 8px 0; }
.analytics-bar-head { display: flex; justify-content: space-between; gap: 10px; color: var(--text-soft); font-size: 11px; }
.analytics-bar-head strong { color: var(--primary); }
.analytics-track { height: 9px; margin-top: 7px; overflow: hidden; background: var(--surface-muted); border-radius: 12px; }
.analytics-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--secondary), var(--teal)); border-radius: inherit; }
.trend-chart { min-height: 190px; display: flex; align-items: end; justify-content: space-around; gap: 8px; padding: 18px 5px 0; border-bottom: 1px solid var(--line); }
.trend-column { min-width: 35px; max-width: 100px; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: end; gap: 6px; color: var(--muted); font-size: 10px; }
.trend-values { display: flex; flex-direction: column; align-items: center; line-height: 1.5; }
.trend-values strong { color: var(--secondary); font-size: 11px; }
.trend-values small { color: var(--teal); }
.trend-bars { width: 42px; height: 135px; display: flex; align-items: end; justify-content: center; gap: 3px; }
.trend-bars span { display: block; width: 17px; min-height: 3px; border-radius: 5px 5px 2px 2px; }
.trend-total { background: rgba(47, 103, 186, .36); }
.trend-completed { background: var(--teal); }
.chart-legend { display: flex; gap: 15px; margin-top: 11px; color: var(--muted); font-size: 10px; }
.legend-dot { width: 8px; height: 8px; display: inline-block; margin-left: 4px; border-radius: 50%; }
.legend-dot.total { background: rgba(47, 103, 186, .36); }
.legend-dot.completed { background: var(--teal); }
.history-head { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.history-head h3 { margin-bottom: 4px; }
.history-section { margin-top: 18px; }
.history-section h3 { margin-bottom: 9px; }
.mission-description { margin: 16px 0; line-height: 2; }
.evidence-box { color: var(--teal); background: rgba(19, 166, 135, .10); border: 1px solid rgba(19, 166, 135, .18); border-radius: 12px; padding: 13px 15px; }
.evidence-box p { margin: 7px 0 0; white-space: pre-wrap; line-height: 1.9; }
.inner-card { margin-top: 15px; background: var(--surface-soft); box-shadow: none; }
.attachment-list { display: grid; gap: 8px; margin-bottom: 15px; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 10px; }
.attachment-download-card { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease; }
.attachment-download-card:hover { background: #f8fbff; border-color: rgba(47,103,186,.38); box-shadow: 0 8px 20px rgba(28,75,145,.10); transform: translateY(-1px); }
.attachment-download-card:focus-visible { outline: 3px solid rgba(47,103,186,.22); outline-offset: 2px; }
.attachment-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--secondary); background: var(--secondary-soft); border-radius: 9px; font-weight: 800; }
.attachment-meta { min-width: 0; flex: 1 1 auto; }
.attachment-meta strong, .attachment-meta span { display: block; }
.attachment-meta strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta a { color: var(--secondary); text-decoration: none; }
.attachment-meta span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.attachment-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 6px 11px; color: #155eef; background: #edf4ff; border: 1px solid #c9dcfb; border-radius: 8px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.attachment-action b { font-size: 15px; line-height: 1; }
.attachment-download-card:hover .attachment-action { color: #fff; background: #155eef; border-color: #155eef; }
.ticket-workspace-side .attachment-download-card { flex-wrap: wrap; align-items: flex-start; }
.ticket-workspace-side .attachment-action { width: 100%; margin-top: 2px; }
.attachment-form { align-items: end; }
.attachment-form button { align-self: end; }
@media (max-width: 560px) {
  .attachment-download-card { flex-wrap: wrap; }
  .attachment-action { width: 100%; }
}
.settings-preview { display: flex; align-items: center; gap: 13px; padding: 15px; background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft)); border: 1px solid var(--line); border-radius: var(--radius-md); }
.settings-preview strong { display: block; margin-bottom: 3px; }
.settings-preview span { color: var(--muted); font-size: 11px; }
.settings-tabs-shell { display: grid; gap: 16px; }
.settings-tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2px;
  padding: 8px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.settings-tab-strip button {
  min-height: 42px;
  padding: 9px 16px;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 900;
}
.settings-tab-strip button:hover,
.settings-tab-strip button.active {
  color: #fff;
  background: #63ad14;
  border-color: #234f06;
  box-shadow: 0 7px 18px rgba(99,173,20,.18);
}
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: grid; gap: 18px; }
.setting-note { display: grid; gap: 3px; padding: 11px 13px; color: var(--text-soft); background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11px; line-height: 1.8; }
.setting-note span { color: var(--muted); font-weight: 400; }
.logo-setting { display: flex; align-items: center; gap: 14px; padding: 13px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-md); }
.logo-setting-preview { flex: 0 0 auto; }
.logo-setting-fields { min-width: 0; flex: 1; display: grid; gap: 7px; }
.logo-setting-fields small { color: var(--muted); font-size: 10px; font-weight: 400; }
.logo-setting-fields .small-action { justify-self: start; }
.font-upload-card { margin-top: 18px; }
.font-upload-card .section-title > div { min-width: 0; }
.font-upload-card .section-title p { margin: 5px 0 0; font-size: 11px; line-height: 1.8; }
.font-upload-form { align-items: end; margin-top: 14px; }
.font-upload-form .setting-note { align-self: stretch; }
.font-list-heading { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.font-list { display: grid; gap: 8px; }
.font-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.font-list-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.font-list-info > div { min-width: 0; }
.font-list-info strong, .font-list-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-list-info strong { font-size: 12px; }
.font-list-info small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.font-swatch { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 11px; font-size: 18px; font-weight: 700; }
.online-badge, .offline-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 4px 7px; border-radius: 14px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.online-badge { color: var(--teal); background: rgba(19, 166, 135, .12); }
.offline-badge { color: var(--muted); background: var(--surface-muted); }
.online-badge i, .offline-badge i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: currentColor; }
.jalali-picker { position: fixed; z-index: 40; width: 258px; padding: 11px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 15px; box-shadow: var(--shadow); direction: rtl; animation: rise-in .16s ease both; }
.jalali-picker-head, .jalali-picker-weekdays, .jalali-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jalali-picker-head { grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 10px; text-align: center; }
.jalali-picker-head strong { font-size: 12px; }
.jalali-picker-head button, .jalali-picker-today { padding: 5px; color: var(--primary); background: var(--primary-soft); border: 0; border-radius: 8px; }
.jalali-picker-weekdays { margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.jalali-picker-grid button, .jalali-picker-empty { min-height: 29px; display: grid; place-items: center; padding: 3px; color: var(--text-soft); background: transparent; border: 0; border-radius: 8px; font-size: 11px; }
.jalali-picker-grid button:hover, .jalali-picker-grid button.selected { color: #fff; background: var(--primary); }
.jalali-picker-today { width: 100%; margin-top: 8px; font-size: 10px; font-weight: 800; }

@media (min-width: 761px) {
  .sidebar { position: fixed; right: 0; top: 0; width: 272px; height: 100vh; min-height: 100vh; transform: translateX(0); }
  .main-area { margin-right: 272px; }
}

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: 220% 0; } 100% { background-position: -20% 0; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { position: fixed; right: -288px; top: 0; z-index: 15; width: 278px; height: 100vh; min-height: 100vh; transition: right .28s ease; box-shadow: -15px 0 38px rgba(0,0,0,.22); }
  .sidebar.open, .sidebar.pinned { right: 0; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 14; display: block; visibility: hidden; opacity: 0; background: rgba(4, 21, 31, .5); transition: opacity .25s ease, visibility .25s ease; }
  .sidebar-scrim.visible { visibility: visible; opacity: 1; }
  .mobile-menu { display: block; }
  .topbar { min-height: 76px; padding: 0 17px; }
  .topbar h2 { font-size: 20px; }
  .sync-indicator { display: none; }
  .global-search-wrap { min-width: 0; }
  .global-search { width: 122px; }
  .connection-banner { margin: 12px 16px 0; }
  .page-content { padding: 22px 16px 40px; }
  .measurement-line { grid-template-columns: 1fr 1fr; }
  .measurement-line label { grid-column: 1 / -1; }
  .stats-grid, .three-grid { grid-template-columns: 1fr; }
  .analytics-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading-actions { width: 100%; }
  .page-heading-actions > button { flex: 1; }
  .login-card { padding: 32px 23px; }
  .form-grid { grid-template-columns: 1fr; }
  .work-slot-row { grid-template-columns: 1fr 1fr; }
  .work-slot-row .remove-slot { grid-column: 1 / -1; width: 100%; }
  .day-note-section { grid-template-columns: 1fr; }
  .day-note-section label:first-child { grid-column: auto; }
  .system-text-grid { grid-template-columns: 1fr; }
  .system-text-grid .full { grid-column: 1; }
  .form-grid .full { grid-column: auto; }
  .checkbox-list { grid-template-columns: 1fr; }
  .calendar-cell { min-height: 78px; padding: 6px; }
  .calendar-weekdays { font-size: 9px; }
  .calendar-event { font-size: 8px; }
  .top-actions { gap: 5px; }
  .notification-button { padding: 9px; font-size: 11px; }
  .filter-actions { align-items: stretch; padding-top: 0; }
  .filter-actions button { flex: 1; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: 94vh; border-radius: 18px; }
  .modal-body { padding: 17px; }
  .calendar-grid, .calendar-weekdays { gap: 4px; }
}
@media (max-width: 430px) {
  .page-content { padding-right: 12px; padding-left: 12px; }
  .card-pad { padding: 16px; }
  .analytics-stat-grid { gap: 10px; }
  .stat-card { min-height: 126px; padding: 16px; }
  .stat-value { font-size: 24px; }
  .topbar { padding-right: 12px; padding-left: 12px; }
  .calendar-day { font-size: 12px; }
  .calendar-event { padding: 3px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.low-motion *, .low-motion *::before, .low-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* === v22: calm operations shell + visual form builder ==================== */
:root {
  --shell-navy: #0b1e42;
  --shell-navy-2: #123b7d;
  --builder-blue: #2563d9;
  --builder-blue-soft: #edf4ff;
  --builder-ink: #142a4a;
  --builder-border: rgba(83, 117, 177, .18);
  --builder-shadow: 0 18px 52px rgba(26, 61, 119, .10);
}

body {
  background: radial-gradient(circle at 9% 4%, rgba(88, 141, 244, .16), transparent 27%), radial-gradient(circle at 88% 22%, rgba(123, 197, 220, .14), transparent 28%), linear-gradient(135deg, #eef4ff 0%, #f9fbff 55%, #edf3ff 100%);
}
.app-view { direction: rtl; }
.main-area { min-height: 100vh; background: transparent; }
.topbar { min-height: 88px; padding-inline: 34px; background: rgba(255,255,255,.82); border-color: rgba(75, 113, 175, .13); box-shadow: 0 8px 30px rgba(28,62,116,.05); }
.page-content { max-width: 1760px; padding: 30px 34px 46px; margin: 0 auto; }
.sidebar { background: linear-gradient(160deg, #081a3a 0%, #0d2d62 55%, #184a9b 100%); border-color: rgba(145, 183, 255, .22); box-shadow: -20px 24px 70px rgba(8, 31, 74, .22); }
.sidebar .brand { padding-bottom: 24px; }
.sidebar .brand strong { font-size: 16px; letter-spacing: -.25px; }
.sidebar .brand span { color: #a9c3e9; }
.sidebar .user-mini { margin-top: 4px; padding: 15px 11px; }
.sidebar .nav-group { margin-bottom: 11px; }
.sidebar .nav-group-toggle { min-height: 34px; color: #a9c3ee; }
.sidebar .nav-submenu { border-right-color: rgba(151, 187, 255, .25); }
.sidebar .nav-item { min-height: 42px; color: #d8e7ff; }
.sidebar .nav-item.active { background: linear-gradient(90deg, rgba(76, 133, 240, .38), rgba(40, 90, 190, .23)); box-shadow: inset -3px 0 0 #a5c4ff !important; }
.card, .project-card, .executive-kpi, .dashboard-news-section { border-color: var(--builder-border); box-shadow: var(--builder-shadow); }
.card:hover, .project-card:hover { border-color: rgba(37, 99, 217, .30); box-shadow: 0 24px 62px rgba(26, 61, 119, .14); }
.page-heading { margin-bottom: 22px; }
.page-heading h3 { color: var(--builder-ink); font-size: 22px; }
.page-heading > div > p { max-width: 760px; line-height: 1.9; }
.primary { background: linear-gradient(135deg, #2563d9, #174aa7); box-shadow: 0 9px 22px rgba(37,99,217,.20); }
.primary:hover { box-shadow: 0 13px 28px rgba(37,99,217,.27); }
.secondary { color: #2457b4; background: #edf4ff; border-color: rgba(37,99,217,.17); }
input, textarea, select { border-color: rgba(83, 117, 177, .22); }
input:focus, textarea:focus, select:focus { border-color: var(--builder-blue); box-shadow: 0 0 0 4px rgba(37,99,217,.11); }
.modal-backdrop { background: rgba(9, 27, 62, .54); backdrop-filter: blur(10px); }
.modal { border-color: rgba(93, 129, 190, .23); box-shadow: 0 30px 90px rgba(7, 27, 64, .28); }
.modal-head { background: linear-gradient(180deg, rgba(248,251,255,.98), rgba(255,255,255,.94)); }
.modal-head h3 { color: var(--builder-ink); }
.mission-form-wide { gap: 17px; }
.mission-form-wide > label, .modal-body .form-grid > label { min-width: 0; }
.mission-form-wide textarea { min-height: 118px; }

/* Builder shell: library on the right, canvas in the middle, properties on the left. */
.form-builder-page { width: 100%; max-width: 1760px; margin: 0 auto; }
.form-builder-heading { align-items: flex-end; }
.form-builder-heading h3 { margin-bottom: 4px; font-size: clamp(22px, 2.2vw, 30px); }
.form-builder-heading .eyebrow { color: var(--builder-blue); }
.form-builder-heading .page-heading-actions { align-items: center; }
.form-publish-action { background: linear-gradient(135deg, #0f9b83, #087966); box-shadow: 0 9px 22px rgba(15,155,131,.18); }
.form-builder-shell { display: grid; grid-template-columns: minmax(245px, .70fr) minmax(460px, 1.65fr) minmax(270px, .82fr); gap: 16px; align-items: start; direction: rtl; }
.form-builder-panel, .form-builder-workspace { min-width: 0; border: 1px solid var(--builder-border); border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: var(--builder-shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.form-builder-panel { padding: 18px; }
.form-builder-library { position: sticky; top: 106px; max-height: calc(100vh - 126px); overflow: auto; }
.form-builder-properties { position: sticky; top: 106px; max-height: calc(100vh - 126px); overflow: auto; }
.form-builder-workspace { overflow: hidden; background: rgba(248,251,255,.68); }
.builder-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.builder-panel-title.compact { margin-bottom: 11px; }
.builder-panel-title h4 { margin: 3px 0 0; color: var(--builder-ink); font-size: 14px; }
.builder-icon-action { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--builder-blue); border: 0; border-radius: 10px; font-size: 19px; box-shadow: 0 8px 18px rgba(37,99,217,.20); }
.builder-icon-action:hover { transform: translateY(-1px); background: #174aa7; }
.form-template-list, .builder-palette { display: grid; gap: 8px; }
.form-template-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px; color: var(--builder-ink); text-align: right; background: rgba(247,250,255,.72); border: 1px solid transparent; border-radius: 13px; transition: .18s ease; }
.form-template-item:hover { border-color: rgba(37,99,217,.23); background: #fff; transform: translateX(-2px); }
.form-template-item.active { border-color: rgba(37,99,217,.34); background: linear-gradient(135deg, #f0f5ff, #fff); box-shadow: inset -3px 0 0 var(--builder-blue), 0 7px 17px rgba(37,99,217,.08); }
.template-item-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--builder-blue); background: #e7efff; border-radius: 9px; font-size: 14px; font-weight: 900; }
.template-item-copy { min-width: 0; }
.template-item-copy strong, .template-item-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-item-copy strong { font-size: 11px; }
.template-item-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.template-item-status { color: #9a6b21; background: #fff5df; border-radius: 999px; padding: 3px 6px; font-size: 8px; white-space: nowrap; }
.template-item-status.published { color: #087966; background: #e2f7f1; }
.builder-divider { height: 1px; margin: 19px 0; background: var(--builder-border); }
.builder-count { min-width: 28px; padding: 4px 7px; color: var(--builder-blue); text-align: center; background: #eaf1ff; border-radius: 999px; font-size: 10px; font-weight: 850; }
.builder-palette-item { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr) 16px; align-items: center; gap: 8px; padding: 8px; color: var(--builder-ink); text-align: right; background: rgba(255,255,255,.64); border: 1px solid rgba(83,117,177,.13); border-radius: 11px; cursor: grab; transition: .18s ease; }
.builder-palette-item:active { cursor: grabbing; }
.builder-palette-item:hover { border-color: rgba(37,99,217,.28); background: #fff; transform: translateX(-2px); }
.palette-icon { width: 27px; height: 27px; display: grid; place-items: center; color: var(--builder-blue); background: #edf4ff; border-radius: 8px; font-size: 12px; font-weight: 900; }
.builder-palette-item strong, .builder-palette-item small { display: block; }
.builder-palette-item strong { font-size: 10px; }
.builder-palette-item small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.builder-palette-item b { color: var(--muted); font-size: 14px; }
.form-builder-workspace-head { display: grid; gap: 10px; padding: 20px 22px; border-bottom: 1px solid var(--builder-border); background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,245,255,.72)); }
.builder-title-input { display: flex; align-items: center; gap: 9px; }
.builder-title-input input { min-width: 0; flex: 1; padding: 7px 0; color: var(--builder-ink); background: transparent; border: 0; border-bottom: 2px solid rgba(37,99,217,.20); border-radius: 0; font-size: 18px; font-weight: 900; }
.builder-title-input input:focus { border-color: var(--builder-blue); box-shadow: none; }
.title-input-icon { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2563d9, #123e8e); border-radius: 9px; font-size: 14px; }
.builder-status { color: #9a6b21; background: #fff5df; border-radius: 999px; padding: 4px 8px; font-size: 9px; white-space: nowrap; }
.builder-status.published { color: #087966; background: #e2f7f1; }
.form-builder-workspace-head textarea { min-height: 42px; padding: 7px 10px; color: var(--text-soft); background: rgba(255,255,255,.6); border-color: rgba(83,117,177,.14); font-size: 11px; resize: vertical; }
.builder-canvas-wrap { padding: 19px 22px 12px; }
.builder-canvas-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.builder-canvas-top > div { display: grid; gap: 2px; }
.builder-canvas-top strong { color: var(--builder-ink); font-size: 15px; }
.canvas-hint { color: var(--muted); font-size: 10px; }
.form-builder-canvas { min-height: 520px; display: grid; align-content: start; gap: 10px; padding: 13px; background: linear-gradient(145deg, rgba(237,244,255,.72), rgba(255,255,255,.78)); border: 1px dashed rgba(83,117,177,.25); border-radius: 17px; }
.builder-field { position: relative; padding: 12px 13px 13px; background: rgba(255,255,255,.93); border: 1px solid rgba(83,117,177,.17); border-radius: 14px; box-shadow: 0 6px 18px rgba(37,65,119,.05); cursor: pointer; transition: .18s ease; }
.builder-field:hover { border-color: rgba(37,99,217,.32); box-shadow: 0 10px 24px rgba(37,65,119,.10); }
.builder-field.selected { border-color: var(--builder-blue); box-shadow: 0 0 0 3px rgba(37,99,217,.10), 0 10px 26px rgba(37,65,119,.10); }
.builder-field-head { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 10px; }
.builder-drag-handle { color: #8ca2c2; font-size: 17px; letter-spacing: -4px; cursor: grab; }
.builder-field-title { min-width: 0; display: grid; gap: 1px; }
.builder-field-title strong { overflow: hidden; color: var(--builder-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.builder-field-title span { color: var(--muted); font-size: 9px; }
.builder-field-key { max-width: 120px; margin-inline-start: auto; overflow: hidden; color: #7690b7; font-family: Tahoma, Arial, sans-serif; font-size: 8px; text-overflow: ellipsis; direction: ltr; white-space: nowrap; }
.builder-field-actions { display: flex; gap: 3px; opacity: .55; transition: opacity .18s ease; }
.builder-field:hover .builder-field-actions, .builder-field.selected .builder-field-actions { opacity: 1; }
.builder-field-actions button { width: 24px; height: 24px; min-height: 24px; padding: 0; color: #6c82a5; background: #f1f5fb; border: 0; border-radius: 7px; font-size: 11px; }
.builder-field-actions button:hover { color: var(--builder-blue); background: #e4edff; }
.builder-field-actions button.remove:hover { color: #c64c5d; background: #fdecef; }
.builder-field-body { display: grid; gap: 8px; pointer-events: none; }
.builder-field-body input, .builder-field-body textarea, .builder-field-body select { min-height: 38px; padding: 8px 10px; color: #8ba0bd; background: #fafcff; border-color: rgba(83,117,177,.14); font-size: 10px; }
.builder-field-body textarea { min-height: 60px; }
.builder-choice-list { display: flex; flex-wrap: wrap; gap: 7px; }
.builder-choice-list label { display: inline-flex; grid-template-columns: auto 1fr; align-items: center; gap: 5px; padding: 6px 8px; color: #7388a6; background: #f5f8fd; border: 1px solid rgba(83,117,177,.12); border-radius: 8px; font-size: 9px; }
.builder-choice-list input { width: auto; min-height: 0; accent-color: var(--builder-blue); }
.builder-file-drop { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; color: #7890b2; background: #f7faff; border: 1px dashed rgba(37,99,217,.25); border-radius: 10px; font-size: 9px; }
.builder-file-drop span:first-child { color: var(--builder-blue); font-size: 18px; }
.builder-rating-preview { display: flex; align-items: center; gap: 4px; color: #f3b52c; font-size: 20px; }
.builder-rating-preview small { margin-inline-start: 6px; color: var(--muted); font-size: 9px; }
.builder-section-field { padding: 12px 14px; background: linear-gradient(135deg, #f1f6ff, #fff); border-style: dashed; }
.builder-section-preview { display: grid; gap: 2px; padding: 5px 3px; border-right: 3px solid var(--builder-blue); }
.builder-section-preview strong { color: var(--builder-ink); font-size: 12px; }
.builder-section-preview span { color: var(--muted); font-size: 9px; }
.builder-help { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.7; }
.builder-required { position: absolute; left: 13px; bottom: 12px; color: #c26c34; background: #fff3e8; border-radius: 999px; padding: 2px 6px; font-size: 8px; }
.form-builder-empty { min-height: 330px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; border: 1px dashed rgba(83,117,177,.25); border-radius: 14px; }
.form-builder-empty > span, .builder-properties-empty > span { width: 45px; height: 45px; display: grid; place-items: center; color: var(--builder-blue); background: #eaf1ff; border-radius: 14px; font-size: 21px; }
.form-builder-empty strong, .builder-properties-empty strong { color: var(--builder-ink); font-size: 12px; }
.form-builder-empty small, .builder-properties-empty small { max-width: 240px; font-size: 10px; }
.builder-bottom-note { display: flex; align-items: center; gap: 7px; padding: 0 22px 17px; color: var(--muted); font-size: 9px; }
.builder-bottom-note > span:first-child { color: #16a477; font-size: 16px; }
.builder-properties .builder-panel-title { padding-bottom: 14px; border-bottom: 1px solid var(--builder-border); }
.properties-mark { color: var(--builder-blue); font-size: 17px; }
.builder-properties-head { display: flex; align-items: center; gap: 9px; margin: 3px 0 17px; }
.properties-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--builder-blue); background: #eaf1ff; border-radius: 9px; font-size: 13px; font-weight: 900; }
.builder-properties-head strong, .builder-properties-head small { display: block; }
.builder-properties-head strong { color: var(--builder-ink); font-size: 12px; }
.builder-properties-head small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.builder-properties-form { display: grid; gap: 12px; }
.builder-properties-form label { gap: 5px; color: #496487; font-size: 10px; }
.builder-properties-form input, .builder-properties-form textarea, .builder-properties-form select { padding: 9px 10px; font-size: 10px; }
.builder-properties-form textarea { min-height: 66px; }
.builder-required-toggle { display: flex; grid-template-columns: auto 1fr; align-items: flex-start; gap: 8px; padding: 10px; background: #f7faff; border: 1px solid rgba(83,117,177,.13); border-radius: 10px; }
.builder-required-toggle input { width: auto; margin-top: 3px; accent-color: var(--builder-blue); }
.builder-required-toggle span, .builder-required-toggle strong, .builder-required-toggle small { display: block; }
.builder-required-toggle strong { color: var(--builder-ink); font-size: 10px; }
.builder-required-toggle small, .property-hint { color: var(--muted); font-size: 8px; font-weight: 400; }
.builder-properties-empty { min-height: 250px; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }

/* Live preview uses the same spacing as a real modal, so design decisions are visible. */
.form-builder-preview-shell { max-width: 860px; margin: 0 auto; }
.preview-intro { margin-bottom: 19px; padding: 18px 20px; background: linear-gradient(135deg, #edf4ff, #fff); border: 1px solid rgba(37,99,217,.14); border-radius: 15px; }
.preview-badge { display: inline-block; color: var(--builder-blue); background: #e5eeff; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 850; }
.preview-intro h3 { margin: 8px 0 3px; color: var(--builder-ink); }
.preview-intro p { margin: 0; color: var(--muted); font-size: 10px; }
.form-builder-preview-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preview-field { min-width: 0; display: grid; gap: 6px; color: #496487; font-size: 11px; }
.preview-field.full { grid-column: 1 / -1; }
.preview-field > span { font-weight: 750; }
.preview-field input, .preview-field textarea, .preview-field select { background: #fff; }
.preview-field textarea { min-height: 100px; }
.preview-field small { color: var(--muted); font-size: 9px; }
.preview-required { color: #d15563; }
.preview-section-title { grid-column: 1 / -1; display: grid; gap: 3px; padding: 9px 12px; border-right: 3px solid var(--builder-blue); background: #f2f6ff; border-radius: 9px; }
.preview-section-title strong { color: var(--builder-ink); font-size: 12px; }
.preview-section-title span { color: var(--muted); font-size: 9px; }
.preview-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-choice-list label { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; background: #f7faff; border: 1px solid rgba(83,117,177,.15); border-radius: 9px; font-size: 10px; }
.preview-choice-list input { width: auto; accent-color: var(--builder-blue); }
.preview-rating { display: flex; gap: 3px; direction: ltr; }
.preview-rating button { padding: 0 3px; color: #cad5e7; background: transparent; border: 0; font-size: 26px; }
.preview-rating button.active, .preview-rating button:hover { color: #f0af27; }

@media (max-width: 1250px) {
  .form-builder-shell { grid-template-columns: minmax(225px, .75fr) minmax(420px, 1.55fr); }
  .form-builder-properties { grid-column: 1 / -1; position: static; max-height: none; }
  .form-builder-properties .builder-properties-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .form-builder-properties .builder-properties-head { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .page-content { padding-inline: 20px; }
  .form-builder-shell { grid-template-columns: 1fr; }
  .form-builder-library, .form-builder-properties { position: static; max-height: none; }
  .form-builder-library { order: 1; }
  .form-builder-workspace { order: 2; }
  .form-builder-properties { order: 3; }
  .builder-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-builder-properties .builder-properties-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .topbar { min-height: 76px; }
  .page-content { padding: 22px 14px 86px; }
  .form-builder-heading { align-items: stretch; }
  .form-builder-heading .page-heading-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .form-builder-heading .page-heading-actions button { width: 100%; }
  .form-builder-workspace-head, .builder-canvas-wrap { padding-inline: 14px; }
  .form-builder-canvas { min-height: 390px; padding: 9px; }
  .builder-field-head { flex-wrap: wrap; }
  .builder-field-key { order: 4; width: 100%; max-width: none; margin-inline-start: 28px; }
  .builder-field-actions { margin-inline-start: auto; }
  .builder-bottom-note { padding-inline: 14px; }
  .form-builder-properties .builder-properties-form, .form-builder-preview-form { grid-template-columns: 1fr; }
  .form-builder-preview-form .preview-field.full { grid-column: auto; }
}
@media (max-width: 460px) {
  .form-builder-heading .page-heading-actions { grid-template-columns: 1fr; }
  .builder-title-input { flex-wrap: wrap; }
  .builder-title-input input { flex-basis: calc(100% - 42px); }
  .builder-status { margin-inline-start: 40px; }
  .builder-palette { grid-template-columns: 1fr; }
  .canvas-hint { display: none; }
}

/* v15: quiet staff workspace and decision-first management dashboard */
html[data-account-type="user"] .global-search-wrap,
html[data-account-type="group_representative"] .global-search-wrap,
html[data-account-type="user"] #refresh-btn,
html[data-account-type="group_representative"] #refresh-btn { display: none; }
html[data-account-type="user"] .nav-group-toggle,
html[data-account-type="group_representative"] .nav-group-toggle { display: none; }
html[data-account-type="user"] .nav-group,
html[data-account-type="group_representative"] .nav-group { margin: 0; }
html[data-account-type="user"] .nav-submenu,
html[data-account-type="group_representative"] .nav-submenu { margin: 0; padding: 0; border: 0; }

.executive-hero {
  position: relative;
  min-height: 154px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 30px 34px;
  color: #eafafa;
  background: linear-gradient(125deg, #0a3149 0%, #0b686b 62%, #2b70ad 120%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 25px;
  box-shadow: 0 22px 48px rgba(8, 49, 69, .20);
}
.executive-hero::after { position: absolute; width: 280px; height: 280px; left: -70px; top: -150px; content: ""; border: 50px solid rgba(255,255,255,.07); border-radius: 50%; }
.executive-hero > * { position: relative; z-index: 1; }
.executive-hero h3 { max-width: 760px; margin: 6px 0 8px; color: #fff; font-size: clamp(20px, 2.1vw, 30px); }
.executive-hero p { max-width: 720px; margin: 0; color: #b9dfe1; font-size: 12px; }
.executive-hero .secondary { flex: 0 0 auto; color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.hero-kicker { display: block; color: #90e1d4; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.compact-hero { min-height: 126px; }

.executive-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.executive-kpi { min-height: 132px; display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; border-top: 3px solid transparent; }
.executive-kpi > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.executive-kpi > strong { display: block; margin: 9px 0 4px; color: var(--text); font-size: 29px; line-height: 1.2; }
.executive-kpi > strong small { color: var(--muted); font-size: 12px; }
.executive-kpi > em { color: var(--muted); font-size: 10px; font-style: normal; }
.executive-kpi > em.positive { color: var(--teal); }
.executive-kpi > em.negative { color: var(--danger); }
.risk-kpi { border-top-color: var(--danger); background: linear-gradient(180deg, var(--surface), var(--danger-soft)); }
.health-kpi { display: grid; grid-template-columns: 1fr 62px; grid-template-rows: auto auto; align-items: center; }
.health-kpi > span { align-self: end; }
.health-kpi > small { align-self: start; color: var(--primary); font-size: 11px; font-weight: 850; }
.mini-ring { grid-column: 2; grid-row: 1 / 3; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at center, var(--surface-solid) 57%, transparent 59%), conic-gradient(var(--teal) calc(var(--score) * 1%), var(--surface-muted) 0); }
.mini-ring strong { font-size: 18px; }

.executive-grid { display: grid; gap: 18px; margin-bottom: 18px; align-items: stretch; }
.main-insight-grid { grid-template-columns: minmax(0, 1.75fr) minmax(290px, .8fr); }
.three-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.executive-grid > .card { min-width: 0; }
.insight-wide { overflow: hidden; }
.line-chart-wrap { min-height: 235px; }
.line-chart { width: 100%; height: auto; overflow: visible; }
.line-chart text { fill: var(--muted); font-family: var(--app-font); font-size: 9px; }
.chart-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-area { fill: rgba(47, 103, 186, .08); }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.total-line { stroke: var(--secondary); }
.done-line { stroke: var(--teal); }
.chart-point { stroke: var(--surface-solid); stroke-width: 3; }
.total-point { fill: var(--secondary); }
.done-point { fill: var(--teal); }

.donut-layout { min-height: 220px; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 17px; }
.donut-chart { width: 148px; height: 148px; display: grid; place-items: center; border-radius: 50%; background: var(--donut-fill); box-shadow: inset 0 0 0 1px var(--line); }
.donut-hole { width: 92px; height: 92px; display: grid; place-content: center; text-align: center; background: var(--surface-solid); border-radius: 50%; box-shadow: 0 5px 18px rgba(31,70,84,.10); }
.donut-hole strong, .donut-hole span { display: block; }
.donut-hole strong { color: var(--text); font-size: 24px; }
.donut-hole span { color: var(--muted); font-size: 9px; }
.donut-legend { display: grid; gap: 9px; }
.donut-legend > div { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; color: var(--text-soft); font-size: 10px; }
.donut-legend i { width: 8px; height: 8px; border-radius: 50%; }
.donut-legend strong { color: var(--text); }

.decision-bars { display: grid; gap: 14px; padding-top: 4px; }
.decision-bar > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--text-soft); font-size: 10px; }
.decision-bar strong { color: var(--primary); }
.decision-track { height: 8px; overflow: hidden; background: var(--surface-muted); border-radius: 12px; }
.decision-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--secondary), var(--teal)); border-radius: inherit; }
.coverage-visual { display: grid; gap: 14px; padding-top: 7px; }
.coverage-value { color: var(--text); font-size: 31px; font-weight: 850; }
.coverage-value small { color: var(--muted); font-size: 11px; }
.coverage-visual p { margin: 0; font-size: 10px; }

.decision-queue { display: grid; gap: 8px; margin-bottom: 10px; }
.queue-item { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-right: 3px solid var(--secondary); border-radius: 11px; }
.queue-item.danger { border-right-color: var(--danger); }
.queue-item.warning { border-right-color: var(--accent); }
.queue-item > span { color: var(--muted); font-size: 9px; }
.queue-item strong { font-size: 11px; }
.queue-item small { color: var(--muted); font-size: 9px; }
.all-clear { min-height: 132px; display: grid; place-content: center; gap: 4px; text-align: center; color: var(--teal); background: linear-gradient(145deg, var(--primary-soft), var(--surface-soft)); border: 1px dashed rgba(20,125,114,.25); border-radius: 15px; }
.all-clear span { color: var(--muted); font-size: 10px; }
.recommendation-list { display: grid; gap: 9px; }
.recommendation { display: flex; gap: 10px; padding: 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.recommendation > i { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 6px; background: var(--secondary); border-radius: 50%; }
.recommendation.danger > i { background: var(--danger); }
.recommendation.warning > i { background: var(--accent); }
.recommendation.success > i { background: var(--teal); }
.recommendation strong, .recommendation span { display: block; }
.recommendation strong { margin-bottom: 3px; font-size: 11px; }
.recommendation span { color: var(--muted); font-size: 10px; line-height: 1.8; }
.people-glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.people-glance-grid > div { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; padding: 11px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.rank-bubble { width: 29px; height: 29px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 9px; font-size: 10px; font-weight: 850; }
.people-glance-grid p { margin: 0; }
.people-glance-grid strong, .people-glance-grid small { display: block; }
.people-glance-grid strong { font-size: 11px; }
.people-glance-grid small, .people-glance-grid em { color: var(--muted); font-size: 9px; font-style: normal; }

.staff-day-shell, .day-close-shell { max-width: 1180px; margin: 0 auto; }
.staff-focus-card { min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; padding: 38px 42px; color: #fff; background: linear-gradient(130deg, #0b354c, #0f766e 68%, #2f67ba 130%); border-radius: 28px; box-shadow: 0 24px 54px rgba(8,49,69,.22); }
.focus-copy { max-width: 680px; }
.focus-copy h3 { margin: 8px 0 10px; color: #fff; font-size: clamp(22px, 3vw, 34px); line-height: 1.55; }
.focus-copy p { margin: 0; color: #bddfe0; font-size: 12px; }
.focus-action { min-width: 210px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 19px; color: #0b4f50; background: #fff; border: 0; border-radius: 15px; box-shadow: 0 13px 28px rgba(0,0,0,.16); font-weight: 850; }
.focus-action:hover { transform: translateY(-2px); }
.focus-action span { font-size: 20px; }
.staff-brief { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 14px 0 18px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }
.staff-brief > div { min-height: 83px; display: grid; align-content: center; gap: 4px; padding: 13px 17px; background: var(--surface-solid); }
.staff-brief span { color: var(--muted); font-size: 9px; }
.staff-brief strong { font-size: 12px; }
.staff-content-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.simple-task-list { display: grid; gap: 7px; }
.simple-task-list button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px; color: var(--text); text-align: right; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.simple-task-list button:hover { border-color: var(--primary); background: var(--primary-soft); }
.simple-task-list button > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--primary); background: var(--surface-solid); border-radius: 9px; font-size: 10px; font-weight: 850; }
.simple-task-list p { margin: 0; }
.simple-task-list strong, .simple-task-list small { display: block; }
.simple-task-list strong { font-size: 11px; }
.simple-task-list small, .simple-task-list em { color: var(--muted); font-size: 9px; font-style: normal; }
.auto-summary-card h4, .auto-report-preview h4 { margin: 13px 0 6px; color: var(--text-soft); font-size: 10px; }
.auto-list { display: grid; gap: 5px; margin: 0; padding: 0 17px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.8; }
.auto-list li::marker { color: var(--teal); }
.quiet-success { margin: 0; color: var(--teal); font-size: 10px; }
.staff-alert-card, .staff-help-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 15px 18px; background: var(--surface-solid); border: 1px solid var(--line); border-right: 4px solid var(--danger); border-radius: 15px; box-shadow: var(--shadow-soft); }
.staff-help-strip { border-right-color: var(--teal); }
.staff-alert-card strong, .staff-alert-card span, .staff-help-strip strong, .staff-help-strip span { display: block; }
.staff-alert-card span, .staff-help-strip span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.staff-day-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 4px 0; color: var(--muted); font-size: 10px; }
.completed-mark { color: var(--teal); font-weight: 850; }

.report-manager-filter { margin-bottom: 18px; }
.report-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.selected-report-card { margin-bottom: 18px; }
.auto-report-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.auto-report-preview > div { padding: 12px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.day-close-hero { display: flex; align-items: center; gap: 20px; padding: 27px 30px; background: linear-gradient(135deg, var(--surface-solid), var(--primary-soft)); border: 1px solid rgba(20,125,114,.18); border-radius: 23px; box-shadow: var(--shadow); }
.day-close-hero.complete { background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft)); }
.day-close-icon { width: 62px; height: 62px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 19px; font-size: 28px; box-shadow: 0 12px 25px rgba(20,125,114,.22); }
.day-close-hero h3 { margin: 5px 0; font-size: 22px; }
.day-close-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.day-close-action { display: grid; justify-items: center; gap: 10px; padding: 24px 0 4px; }
.day-close-action .focus-action { color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.day-close-action small { color: var(--muted); font-size: 9px; }

@media (max-width: 1180px) {
  .executive-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-insight-grid, .action-grid { grid-template-columns: 1fr; }
  .three-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donut-layout { grid-template-columns: 170px 1fr; }
}
@media (max-width: 760px) {
  .executive-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 24px 21px; }
  .executive-hero .secondary { width: 100%; }
  .executive-kpis, .three-insight-grid, .report-kpis { grid-template-columns: 1fr 1fr; }
  .executive-kpi { min-height: 112px; padding: 16px; }
  .staff-focus-card { align-items: stretch; flex-direction: column; padding: 28px 23px; }
  .focus-action { width: 100%; min-width: 0; }
  .staff-brief { grid-template-columns: 1fr 1fr; }
  .staff-content-grid, .auto-report-preview { grid-template-columns: 1fr; }
  .people-glance-grid { grid-template-columns: 1fr; }
  .donut-layout { grid-template-columns: 135px 1fr; }
  .donut-chart { width: 128px; height: 128px; }
  .donut-hole { width: 80px; height: 80px; }
  .queue-item { grid-template-columns: 78px 1fr; }
  .queue-item small { grid-column: 2; }
  .staff-alert-card, .staff-help-strip { align-items: stretch; flex-direction: column; }
  .staff-alert-card button, .staff-help-strip button { width: 100%; }
  .staff-day-footer { align-items: flex-start; flex-direction: column; }
  .day-close-hero { align-items: flex-start; }
}
@media (max-width: 430px) {
  .executive-kpis, .three-insight-grid, .report-kpis { grid-template-columns: 1fr; }
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
  .donut-legend { width: 100%; }
  .staff-brief { grid-template-columns: 1fr; }
  .day-close-hero { flex-direction: column; }
}

/* ArchitectUI-inspired navigation: grouped, nested and intentionally quiet. */
.nav-group { display: grid; gap: 3px; margin-bottom: 9px; }
.nav-group-toggle { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 11px 6px; color: #c8d9f7; text-align: right; background: transparent; border: 0; font-size: 10px; font-weight: 850; }
.nav-group-toggle:hover { color: #fff; }
.nav-group-icon { width: 20px; color: #8fb6ff; text-align: center; font-size: 13px; }
.nav-caret {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-right: auto;
  background-color: rgba(143,180,255,.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23b8d0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(143,180,255,.12);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.nav-group-toggle:hover .nav-caret { background-color: rgba(143,180,255,.17); border-color: rgba(143,180,255,.24); }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 3px; margin-right: 10px; padding-right: 9px; border-right: 1px solid rgba(137,176,255,.22); }
.nav-subitem { padding: 9px 10px; border-radius: 11px; font-size: 11px; }
.nav-subitem .nav-icon { width: 20px; font-size: 14px; }
.nav-subitem.active { box-shadow: inset -3px 0 0 var(--accent); }
.manager-stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.manager-filter-card { margin-top: 18px; }
.manager-center-grid { margin-top: 18px; align-items: start; }
.permission-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.permission-group { padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.permission-group .section-title { margin-bottom: 10px; }
.permission-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 11px; }
.permission-row:first-of-type { border-top: 0; }
.permission-row select { width: 175px; padding: 8px 10px; font-size: 11px; }
.permission-actions { margin: 18px 0 10px; justify-content: flex-start; }

@media (min-width: 761px) {
  .sidebar { position: fixed; right: 18px; top: 18px; width: 286px; height: calc(100vh - 36px); min-height: 0; max-height: calc(100vh - 36px); flex-basis: 286px; padding: 22px 14px; border: 1px solid rgba(126,165,255,.20); border-radius: 24px; box-shadow: 0 24px 60px rgba(8,38,53,.22); }
  .main-area { margin-right: 322px; }
}

@media (max-width: 1100px) {
  .manager-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .permission-matrix { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .permission-matrix { grid-template-columns: 1fr; }
  .manager-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-row { align-items: flex-start; flex-direction: column; }
  .permission-row select { width: 100%; }
}

/* Operational command centre and workflow surfaces */
.operational-stats { margin-top: 2px; }
.operational-cards { align-items: stretch; }
.project-card { min-height: 238px; display: flex; flex-direction: column; }
.project-card h3 { margin-top: 4px; }
.project-description { min-height: 48px; line-height: 1.9; }
.project-meta { display: grid; gap: 6px; margin: auto 0 15px; color: var(--muted); font-size: 11px; }
.eyebrow { display: block; color: var(--secondary); font-size: 10px; letter-spacing: .06em; }
.live-toolbar { margin-top: 18px; }
.live-table td { vertical-align: middle; }
.live-table .progress-meta { margin-top: 7px; font-size: 9px; }
.live-table .progress-line { height: 5px; }
.live-table .pill { white-space: nowrap; }
.subheading { margin: 18px 0 9px; color: var(--text-soft); }
.task-detail h3 { margin-top: 5px; }
.metric-strip { margin: 18px 0; }
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.timeline { display: grid; gap: 13px; position: relative; }
.timeline-item { display: flex; gap: 10px; position: relative; min-height: 35px; }
.timeline-item:not(:last-child)::after { content: ''; position: absolute; right: 5px; top: 17px; bottom: -14px; width: 1px; background: var(--line); }
.timeline-dot { z-index: 1; flex: 0 0 11px; width: 11px; height: 11px; margin-top: 4px; border: 3px solid var(--primary-soft); border-radius: 50%; background: var(--primary); }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item strong { color: var(--text); font-size: 11px; line-height: 1.8; }
.timeline-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.comment-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; margin-bottom: 13px; }
.comment { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); }
.comment strong { font-size: 11px; }
.comment time { margin-right: 8px; color: var(--muted); font-size: 10px; }
.comment p { margin: 6px 0 0; color: var(--text-soft); white-space: pre-wrap; line-height: 1.8; }
.activity-feed { min-height: 260px; }
.wide { width: 100%; }
.hidden { display: none !important; }

@media (max-width: 1100px) {
  .live-table { min-width: 760px; }
}
@media (max-width: 760px) {
  .task-actions button { flex: 1 1 45%; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-toolbar .toolbar { flex-direction: column; align-items: stretch; }
  .live-toolbar .toolbar button { width: 100%; }
  .kpi-weight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v16 unified tickets, dashboard, reports and group chat */
.clickable-card { cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.clickable-card:hover, .clickable-card:focus-visible { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); outline: none; }
.red-card { border-top: 3px solid var(--danger); background: linear-gradient(180deg, rgba(198,76,93,.08), var(--surface-solid)); }
.green-card { border-top: 3px solid var(--teal); background: linear-gradient(180deg, rgba(20,125,114,.08), var(--surface-solid)); }
.manager-warning { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 14px 18px; color: #7d2030; background: #fff0f3; border: 1px solid rgba(198,76,93,.25); border-radius: 15px; }
.manager-warning button { min-height: 42px; color: #fff; background: var(--danger); border: 0; border-radius: 10px; padding: 0 15px; font-weight: 800; }
.dashboard-primary-grid { grid-template-columns: 1.15fr .85fr; }
.ticket-resolution-chart { display: flex; align-items: stretch; gap: 8px; min-height: 210px; margin-top: 16px; }
.ticket-resolution-chart button { flex: 0 0 max(110px, var(--part)); display: grid; align-content: center; justify-items: center; gap: 7px; min-width: 0; color: #fff; border: 0; border-radius: 18px; cursor: pointer; transition: filter .18s ease, transform .18s ease; }
.ticket-resolution-chart button:hover { filter: brightness(.95); transform: translateY(-2px); }
.ticket-resolution-chart strong { font-size: 34px; }
.ticket-resolution-chart span { font-size: 11px; font-weight: 800; }
.resolution-red { background: linear-gradient(145deg, #c64c5d, #9f3143); }
.resolution-green { background: linear-gradient(145deg, #16a085, #0c7567); }
.outage-list { display: grid; gap: 8px; }
.outage-list button { display: grid; gap: 4px; width: 100%; padding: 12px 14px; color: var(--text); text-align: right; background: var(--surface-soft); border: 1px solid var(--line); border-right: 4px solid var(--danger); border-radius: 12px; }
.outage-list span { color: var(--muted); font-size: 10px; }
.decision-queue button.queue-item { width: 100%; color: var(--text); text-align: right; font-family: inherit; }
.ticket-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.ticket-signal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; min-height: 96px; padding: 16px 18px; color: var(--text); text-align: right; border: 1px solid var(--line); cursor: pointer; }
.ticket-signal strong { grid-row: 1 / span 2; grid-column: 2; font-size: 27px; }
.ticket-signal small { color: var(--muted); font-size: 9px; }
.ticket-signal.red { border-right: 4px solid var(--danger); }
.ticket-signal.green { border-right: 4px solid var(--teal); }
.ticket-signal.amber { border-right: 4px solid var(--accent); }
.ticket-signal.active { box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow-soft); }
.ticket-row.ticket-alert,
.ticket-row.ticket-registered { background: rgba(198,76,93,.075); }
.ticket-row.ticket-alert td,
.ticket-row.ticket-registered td { background: rgba(198,76,93,.075); }
.ticket-row.ticket-reviewing { background: rgba(217,148,47,.11); }
.ticket-row.ticket-reviewing td { background: rgba(217,148,47,.11); }
.ticket-row.ticket-resolved { background: rgba(20,125,114,.10); }
.ticket-row.ticket-resolved td { color: #176b5d; background: rgba(20,125,114,.10); }
.ticket-row.ticket-resolved .sub-cell { color: #328f7e; }
.danger-text { color: var(--danger) !important; font-weight: 800; }
.mission-meter-overdue td { background: rgba(198,76,93,.045); }
.score-badge.compact { display: inline-flex; min-width: 38px; justify-content: center; padding: 4px 8px; font-size: 11px; }

/* Ticket workflow overview */
.ticket-list-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 112px; margin-bottom: 18px; padding: 18px 30px; overflow: hidden; color: #fff; background: radial-gradient(circle at 8% 10%, rgba(105,164,255,.35), transparent 27%), linear-gradient(125deg,#092653,#12468f 60%,#2468d7 120%); border: 1px solid rgba(117,164,255,.30); border-radius: 24px; box-shadow: 0 20px 48px rgba(17,59,126,.19); }
.ticket-list-hero::after { position: absolute; left: -55px; bottom: -105px; width: 240px; height: 240px; content: ""; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; box-shadow: 0 0 0 36px rgba(255,255,255,.025),0 0 0 76px rgba(255,255,255,.018); }
.ticket-list-hero > * { position: relative; z-index: 1; }
.ticket-list-hero span { display: inline-flex; padding: 4px 9px; color: #d9e8ff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; font-size: 9px; font-weight: 800; }
.ticket-list-hero h2 { margin: 0 0 5px; color: #fff; font-size: clamp(21px,2.2vw,29px); }
.ticket-list-hero p { margin: 0; color: #bdd2f3; font-size: 11px; line-height: 1.9; }
.ticket-list-hero .primary { min-width: 155px; min-height: 48px; color: #164d9c; background: #fff; box-shadow: 0 12px 28px rgba(3,24,63,.22); }
.ticket-workflow-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ticket-workflow-summary .ticket-signal { position: relative; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-template-rows: auto auto; align-content: center; align-items: center; min-height: 82px; padding: 13px 18px; overflow: hidden; background: #fff; border: 1px solid rgba(83,117,177,.17); border-radius: 19px; box-shadow: 0 12px 32px rgba(27,64,120,.08); transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.ticket-workflow-summary .ticket-signal::before { position: absolute; right: auto; left: 16px; top: 50%; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; transform: translateY(-50%); }
.ticket-workflow-summary .ticket-signal strong { position: static; grid-row: 1 / span 2; grid-column: 2; justify-self: center; align-self: center; z-index: 3; display: block; margin: 0; color: var(--text); font-size: 24px; line-height: 1; transform: none; pointer-events: none; }
.ticket-workflow-summary .ticket-signal span { grid-row: 1; grid-column: 1; justify-self: start; max-width: 100%; font-size: 12px; font-weight: 900; }
.ticket-workflow-summary .ticket-signal small { grid-row: 2; grid-column: 1; justify-self: start; max-width: 100%; margin-top: 4px; }
.ticket-workflow-summary .ticket-signal:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(27,64,120,.13); }
.ticket-workflow-summary .ticket-signal.overdue { border-right: 4px solid #c64c5d; background: linear-gradient(135deg,#fff,#fff5f7); }
.ticket-workflow-summary .ticket-signal.overdue::before { content: "!"; color: #b6384b; background: #fde9ed; font-size: 19px; font-weight: 950; }
.ticket-workflow-summary .ticket-signal.reviewing { border-right: 4px solid #d99a34; background: linear-gradient(135deg,#fff,#fffbf3); }
.ticket-workflow-summary .ticket-signal.reviewing::before { content: "◷"; color: #a66d15; background: #fff2da; font-size: 19px; }
.ticket-workflow-summary .ticket-signal.registered { border-right: 4px solid #df6472; background: linear-gradient(135deg,#fff,#fff3f5); }
.ticket-workflow-summary .ticket-signal.registered::before { content: "•"; color: #c64758; background: #fde8ec; font-size: 24px; font-weight: 900; }
.ticket-workflow-summary .ticket-signal.approved { border-right: 4px solid #15927d; background: linear-gradient(135deg,#fff,#f2fbf8); }
.ticket-workflow-summary .ticket-signal.approved::before { content: "✓"; color: #087b68; background: #e2f7f1; font-size: 18px; font-weight: 900; }
.ticket-workflow-summary .ticket-signal.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,217,.10),0 18px 40px rgba(27,64,120,.13); }
.ticket-list-panel { padding: 21px; border-radius: 21px; }
.ticket-list-panel:has(.ticket-date-filter[open]),
.ticket-list-panel.date-filter-open { z-index: 6; overflow: visible; }
.ticket-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.ticket-list-heading > div { display: grid; gap: 3px; }
.ticket-list-heading > div span { color: var(--primary); font-size: 9px; font-weight: 900; }
.ticket-list-heading h3 { margin: 0; font-size: 17px; }
.ticket-toolbar { margin-bottom: 15px; padding: 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 15px; }
.ticket-toolbar select,
.ticket-date-filter,
.ticket-date-filter > summary,
.ticket-count-box { width: 140px; }
.ticket-toolbar select,
.ticket-date-filter > summary,
.ticket-count-box { box-sizing: border-box; min-height: 42px; padding: 0 13px; border-radius: 12px; font-size: 12px !important; font-weight: 900; line-height: 1.3; white-space: nowrap; }
.ticket-toolbar select { flex: 0 0 140px; padding-left: 37px; appearance: none; -webkit-appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='24' height='24' rx='7' fill='%23edf5ff' stroke='%23c9dcfb'/%3E%3Cpath d='M9 11l3.5 3.5L16 11' fill='none' stroke='%231f5fbf' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 7px center; border-color: var(--line); }
.ticket-count-box { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-soft); border: 1px solid rgba(47,103,186,.18); }
.ticket-date-filter { position: relative; flex: 0 0 140px; }
.ticket-date-filter > summary { position: relative; display: flex; align-items: center; padding-left: 37px; color: var(--text); background: #fff; border: 1px solid var(--line); cursor: pointer; list-style: none; }
.ticket-date-filter > summary::-webkit-details-marker { display: none; }
.ticket-date-filter > summary::before { position: absolute; left: 7px; top: 50%; width: 25px; height: 25px; content: ""; background: #edf5ff; border: 1px solid #c9dcfb; border-radius: 7px; transform: translateY(-50%); transition: background .18s ease, border-color .18s ease; }
.ticket-date-filter > summary::after { position: absolute; left: 16px; top: 50%; width: 7px; height: 7px; content: ""; border-bottom: 1.55px solid #1f5fbf; border-left: 1.55px solid #1f5fbf; border-radius: 1px; transform: translateY(-65%) rotate(-45deg); transition: transform .18s ease; }
.ticket-date-filter[open] > summary::after { transform: translateY(-35%) rotate(135deg); }
.ticket-date-filter[open] { z-index: 20; }
.ticket-date-filter-body { position: absolute; top: calc(100% + 8px); left: 0; z-index: 12; display: grid; width: 310px; gap: 11px; padding: 14px; background: linear-gradient(145deg,#fff,#f5f9ff); border: 1px solid rgba(47,103,186,.22); border-radius: 16px; box-shadow: 0 16px 34px rgba(25,64,122,.18); }
.ticket-date-filter-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-date-filter-title strong { color: var(--text); font-size: 12px; }
.ticket-date-filter-title span { padding: 3px 8px; color: var(--primary); background: var(--primary-soft); border-radius: 999px; font-size: 9px; font-weight: 800; }
.ticket-date-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ticket-date-presets button { display: grid; gap: 3px; padding: 10px; color: var(--text); background: #fff; border: 1px solid rgba(47,103,186,.16); border-radius: 11px; text-align: right; cursor: pointer; }
.ticket-date-presets button:hover { color: var(--primary); background: var(--primary-soft); border-color: rgba(47,103,186,.35); }
.ticket-date-presets strong { font-size: 11px; }
.ticket-date-presets small { color: var(--muted); font-size: 9px; }
.ticket-date-filter-body label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.ticket-date-filter-body label small { color: var(--muted); font-weight: 600; }
.ticket-row-index { color: var(--primary); font-weight: 900; }
.ticket-id-cell { color: #315f9f; font-weight: 900; }
.ticket-date-cell { min-width: 190px; }
.ticket-date-cell strong,
.ticket-date-cell span { display: inline-flex; align-items: center; vertical-align: middle; }
.ticket-date-cell strong { margin-inline-end: 8px; color: var(--text); font-size: 11px; font-weight: 950; }
.ticket-date-cell span { margin-inline-start: 5px; padding: 2px 7px; color: #315f9f; background: rgba(255,255,255,.74); border: 1px solid rgba(47,103,186,.16); border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.ticket-list-panel .table-wrap { border: 1px solid var(--line); border-radius: 15px; }
.ticket-list-panel table { min-width: 760px; }
.ticket-list-panel thead th { background: #f5f8fd; }
.ticket-list-panel .ticket-row { cursor: pointer; transition: background .16s ease,transform .16s ease; }
.ticket-list-panel .ticket-row:hover { background: #f4f8ff; }
.ticket-pagination { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ticket-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 34px; color: var(--text-soft); background: #fff; border: 1px solid var(--line); border-radius: 11px; font-size: 11px; font-weight: 900; }
.ticket-page-btn { min-width: 78px; min-height: 34px; padding: 0 13px; color: var(--primary); background: var(--primary-soft); border: 1px solid rgba(47,103,186,.18); border-radius: 11px; font-size: 11px; font-weight: 900; cursor: pointer; transition: background .16s ease, transform .16s ease, opacity .16s ease; }
.ticket-page-btn:hover:not(:disabled) { background: #dfeeff; transform: translateY(-1px); }
.ticket-page-btn:disabled { opacity: .45; cursor: default; }
.mission-list-hero { background: radial-gradient(circle at 8% 10%, rgba(105,164,255,.35), transparent 27%), linear-gradient(125deg,#092653,#12468f 60%,#2468d7 120%); border-color: rgba(117,164,255,.30); box-shadow: 0 20px 48px rgba(17,59,126,.19); }
.mission-list-hero .primary { color: #164d9c; }
.mission-list-hero .page-heading-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.mission-notification-button { min-width: 116px; }
.mission-workflow-summary .ticket-signal.registered { border-right-color: #5380d7; background: linear-gradient(135deg,#fff,#f3f7ff); }
.mission-workflow-summary .ticket-signal.registered::before { content: "#"; color: #2c5eba; background: #e9f1ff; font-size: 18px; font-weight: 950; }
.mission-workflow-summary .ticket-signal.reviewing { border-right-color: #d99a34; background: linear-gradient(135deg,#fff,#fffaf1); }
.mission-workflow-summary .ticket-signal.reviewing::before { content: "◷"; color: #a66d15; background: #fff2da; font-size: 19px; }
.mission-workflow-summary .ticket-signal.approved { border-right-color: #15927d; background: linear-gradient(135deg,#fff,#f1fbf8); }
.mission-workflow-summary .ticket-signal.approved::before { content: "✓"; color: #087b68; background: #e2f7f1; font-size: 18px; font-weight: 900; }
.mission-workflow-summary .ticket-signal.overdue { border-right-color: #c64c5d; background: linear-gradient(135deg,#fff,#fff5f7); }
.mission-workflow-summary .ticket-signal.overdue::before { content: "!"; color: #b6384b; background: #fde9ed; font-size: 19px; font-weight: 950; }
.mission-scope-shell { margin-bottom: 16px; padding: 8px; background: rgba(255,255,255,.74); border: 1px solid rgba(83,117,177,.17); border-radius: 18px; box-shadow: 0 12px 32px rgba(27,64,120,.07); }
.mission-scope-tabs { gap: 8px; }
.mission-scope-tabs .tab-button { flex: 1; min-height: 42px; border-radius: 12px; font-weight: 900; }
.mission-date-shell { display: grid; gap: 14px; padding: 16px; background: linear-gradient(135deg, rgba(231,240,255,.96), rgba(255,255,255,.92)); border: 1px solid rgba(83,117,177,.16); border-radius: 20px; box-shadow: 0 14px 34px rgba(27,64,120,.08); }
.mission-date-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mission-date-head strong { display: block; margin-top: 4px; color: var(--text); font-size: 15px; font-weight: 900; }
.mission-date-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.mission-date-chip { display: grid; gap: 4px; min-width: 190px; padding: 11px 14px; color: var(--primary-dark); text-align: right; background: rgba(255,255,255,.9); border: 1px solid rgba(47,103,186,.16); border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.mission-date-chip span { color: var(--muted); font-size: 10px; font-weight: 800; }
.mission-date-chip strong { color: var(--primary-dark); font-size: 13px; font-weight: 950; }
.work-report-month-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; align-items: end; }
.work-report-month-picker label { gap: 6px; color: var(--muted); font-size: 10px; font-weight: 900; }
.work-report-month-picker select { min-height: 44px; padding-inline: 12px 36px; background-color: #fff; border-radius: 13px; font-size: 12px; font-weight: 800; }
.report-filter-row { display: grid; grid-template-columns: minmax(330px, 1.9fr) minmax(150px, .8fr) minmax(180px, 1fr); gap: 10px; align-items: end; }
.report-filter-row > label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 900; }
.report-filter-row > label select { min-height: 44px; border-radius: 13px; font-size: 12px; font-weight: 800; }
.report-filter-row .full { grid-column: auto; }
.report-filter-row .mission-date-shell { gap: 8px; padding: 10px 12px; border-radius: 15px; box-shadow: none; }
.report-filter-row .mission-date-head { align-items: center; gap: 10px; }
.report-filter-row .mission-date-head strong { font-size: 13px; }
.report-filter-row .mission-date-head p { display: none; }
.report-filter-row .mission-date-chip { min-width: 145px; padding: 8px 10px; border-radius: 11px; }
.report-filter-row .mission-date-chip strong { font-size: 12px; }
.report-filter-row .work-report-month-picker { grid-template-columns: 100px minmax(120px, 1fr); gap: 8px; }
.report-filter-row .work-report-month-picker select { min-height: 40px; }
.mission-filter-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 16px; padding: 12px; background: var(--surface-soft); border-radius: 15px; }
.mission-filter-panel label, .mission-fixed-group { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 900; }
.mission-filter-panel input, .mission-filter-panel select { min-height: 42px; background-color: #fff; border-radius: 12px; font-size: 12px; font-weight: 800; }
.mission-fixed-group strong, .mission-filter-count { display: inline-flex; align-items: center; min-height: 42px; padding: 0 13px; color: var(--primary); background: var(--primary-soft); border: 1px solid rgba(47,103,186,.18); border-radius: 12px; font-size: 12px; font-weight: 900; }
.mission-filter-clear { min-height: 42px; border-radius: 12px; }
.mission-list-panel { padding: 21px; border-radius: 21px; }
.mission-toolbar-panel { z-index: 6; overflow: visible; }
.mission-toolbar-panel .ticket-toolbar { margin-bottom: 15px; }
.mission-date-filter[open] { z-index: 20; }
.mission-toolbar select { flex: 0 0 140px; }
.mission-card-grid { gap: 16px; }
.mission-card { position: relative; display: flex; flex-direction: column; min-height: 290px; overflow: hidden; background: linear-gradient(145deg,#fff,#f8fbff); border: 1px solid rgba(83,117,177,.17); border-radius: 19px; box-shadow: 0 12px 32px rgba(27,64,120,.08); transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.mission-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(27,64,120,.13); }
.mission-card::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: linear-gradient(90deg,#2563d9,#15a18a); }
.mission-card.mission-has-new-report::before { background: linear-gradient(90deg,#d99a34,#2563d9); }
.mission-card.mission-deadline-ended::before { background: linear-gradient(90deg,#c64c5d,#d99a34); }
.mission-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mission-card-head h3 { margin: 5px 0 0; color: var(--builder-ink, var(--text)); font-size: 16px; line-height: 1.65; }
.mission-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 46%; }
.mission-card .project-description { min-height: 48px; margin: 0 0 12px; line-height: 1.85; }
.mission-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: auto 0 14px; }
.mission-card-meta span { min-width: 0; padding: 8px 10px; overflow: hidden; color: var(--text-soft); background: #fff; border: 1px solid rgba(83,117,177,.14); border-radius: 11px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mission-card .progress { margin-bottom: 13px; }
.mission-card-actions { gap: 7px; margin-top: 0; }
.mission-card-actions button { min-height: 38px; border-radius: 11px; }
@media (max-width: 700px) {
  .ticket-list-hero { align-items: stretch; flex-direction: column; gap: 12px; min-height: 0; margin-bottom: 12px; padding: 15px; border-radius: 16px; }
  .ticket-list-hero h2 { font-size: 19px; }
  .ticket-list-hero p { line-height: 1.7; }
  .ticket-list-hero .primary { width: 100%; min-height: 42px; }
  .ticket-workflow-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
  .ticket-workflow-summary .ticket-signal { grid-template-columns: 1fr 42px 1fr; min-height: 66px; padding: 10px 12px; border-radius: 14px; box-shadow: 0 8px 20px rgba(27,64,120,.06); }
  .ticket-workflow-summary .ticket-signal::before { left: 10px; width: 24px; height: 24px; border-radius: 8px; font-size: 14px; }
  .ticket-workflow-summary .ticket-signal strong { grid-column: 2; justify-self: center; text-align: center; font-size: 20px; }
  .ticket-workflow-summary .ticket-signal span { font-size: 11px; }
  .ticket-workflow-summary .ticket-signal small { font-size: 8.5px; line-height: 1.5; }
  .ticket-list-heading { align-items: flex-start; }
  .ticket-list-panel { padding: 12px; border-radius: 16px; }
  .ticket-toolbar { gap: 7px; margin-bottom: 10px; padding: 8px; border-radius: 13px; }
  .ticket-toolbar .search { min-width: 100%; min-height: 40px; }
  .ticket-toolbar select,
  .ticket-date-filter,
  .ticket-date-filter > summary { width: calc((100% - 14px) / 3) !important; flex: 1 1 calc((100% - 14px) / 3); min-width: 0; }
  .ticket-count-box { width: 100% !important; flex: 1 1 100%; min-width: 0; }
  .ticket-toolbar select,
  .ticket-date-filter > summary,
  .ticket-count-box { min-height: 38px; font-size: 11px !important; border-radius: 11px; }
  .ticket-toolbar select { padding-left: 34px; background-position: left 6px center; }
  .ticket-date-filter > summary { padding-left: 34px; }
  .ticket-date-filter > summary::before { left: 6px; width: 23px; height: 23px; border-radius: 7px; }
  .ticket-date-filter > summary::after { left: 14px; width: 6px; height: 6px; }
  .ticket-date-filter-body { left: auto; right: 0; width: min(292px, calc(100vw - 40px)); padding: 11px; border-radius: 14px; }
  .ticket-list-panel .table-wrap { border-radius: 12px; }
  .ticket-list-panel table { min-width: 640px; }
  .ticket-pagination { gap: 7px; margin-top: 9px; padding-top: 9px; }
  .ticket-pagination span { min-width: 58px; min-height: 31px; font-size: 10px; }
  .ticket-page-btn { min-width: 64px; min-height: 31px; padding-inline: 10px; font-size: 10px; }
  .mission-date-shell { gap: 10px; padding: 12px; border-radius: 16px; }
  .mission-date-head { flex-direction: column; }
  .mission-date-chip { min-width: 0; width: 100%; }
  .work-report-month-picker { grid-template-columns: 1fr; }
  .report-filter-row { grid-template-columns: 1fr; }
  .report-filter-row .full { grid-column: auto; }
  .report-filter-row .mission-date-shell { padding: 10px; }
  .mission-scope-shell { margin-bottom: 10px; padding: 7px; border-radius: 14px; }
  .mission-scope-tabs { flex-direction: column; }
  .mission-filter-panel { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; padding: 9px; border-radius: 13px; }
  .mission-filter-clear, .mission-filter-count { width: 100%; justify-content: center; }
  .mission-list-panel { padding: 12px; border-radius: 16px; }
  .mission-card { min-height: 0; border-radius: 15px; }
  .mission-card-head { flex-direction: column; }
  .mission-card-badges { justify-content: flex-start; max-width: 100%; }
  .mission-card-meta { grid-template-columns: 1fr; }
  .mission-card-actions { flex-direction: column; }
  .mission-card-actions button { width: 100%; }
}
.bulk-permission-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.bulk-permission-actions button { min-height: 42px; }
.simple-report-shell { width: min(850px, 100%); margin: 0 auto; }
.simple-report-shell textarea { min-height: 190px; line-height: 2; }
.report-duration { min-height: 72px; align-self: end; }
.autosave-status { color: var(--teal); font-size: 10px; }
.work-slots-wrap { padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 13px; }
.work-slot-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--line); }
.work-slot-row:last-child { border-bottom: 0; }
.work-slot-row .remove-slot { min-height: 42px; white-space: nowrap; }
.work-slot-row > .slot-report-field,
.work-slot-row > .slot-attachment-field,
.work-slot-row > .slot-existing-attachments { grid-column: 1 / -1; }
.work-slot-row .slot-note,
.day-note-section textarea { min-height: 72px; max-height: 120px; line-height: 1.9; }
.slot-existing-attachments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.slot-existing-attachments .chat-attachment { margin-top: 0; }
.slot-disabled-message { padding: 12px 0 4px; }
.day-note-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 13px; }
.day-note-section label:first-child { grid-column: 1 / -1; }
.day-note-section small,
.slot-attachment-field small { display: block; margin-top: 6px; }
.attachment-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.attachment-list > .muted { width: 100%; }
.report-lock-notice { margin-top: 4px; }
.report-lock-notice span { display: block; margin-top: 5px; }
.muted-section { opacity: .55; }
.work-summary { margin-top: 0; }
.system-text-card { margin-top: 18px; }
.system-text-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.system-text-grid .full { grid-column: 1 / -1; }
.chat-shell { display: grid; grid-template-rows: auto minmax(360px, calc(100vh - 330px)) auto; overflow: hidden; max-width: 1050px; margin: 0 auto; background: var(--surface-solid); }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-head h3 { margin: 0 0 4px; }
.chat-head span { color: var(--muted); font-size: 10px; }
.chat-group-picker { display: flex; align-items: center; gap: 8px; min-width: 240px; }
.chat-messages { display: flex; flex-direction: column; gap: 10px; overflow: auto; padding: 18px; background: linear-gradient(145deg, var(--surface-soft), var(--surface-solid)); }
.chat-message { width: min(72%, 640px); padding: 11px 14px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 15px 15px 4px 15px; box-shadow: var(--shadow-soft); }
.chat-message.mine { align-self: flex-end; background: var(--primary-soft); border-radius: 15px 15px 15px 4px; }
.chat-author { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-author strong { font-size: 10px; }
.chat-author time { color: var(--muted); font-size: 8px; }
.chat-message p { margin: 7px 0 0; white-space: pre-wrap; line-height: 1.9; }
.chat-attachment { display: inline-flex; margin-top: 8px; padding: 7px 10px; color: var(--primary); background: var(--surface-solid); border: 1px solid var(--line); border-radius: 9px; font-size: 10px; text-decoration: none; }
.chat-compose { display: grid; grid-template-columns: 1fr 48px auto; gap: 8px; align-items: end; padding: 12px; border-top: 1px solid var(--line); }
.chat-compose textarea { min-height: 48px; max-height: 130px; resize: vertical; }
.chat-compose button, .chat-file-button { min-height: 48px; }
.chat-file-button { display: grid; place-items: center; cursor: pointer; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 11px; font-size: 19px; }
.chat-read-only { padding: 14px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }
.policy-copy { margin: 0; line-height: 2; color: var(--text-soft); }

@media (max-width: 900px) {
  .dashboard-primary-grid { grid-template-columns: 1fr; }
  .ticket-resolution-chart { min-height: 165px; }
}

@media (max-width: 760px) {
  button, .primary, .secondary, .ghost, .danger, input, select { min-height: 44px; }
  .main-area { min-width: 0; }
  .content { padding: 14px 10px 32px; }
  .topbar { padding: 10px 12px; }
  .page-heading { align-items: stretch; flex-direction: column; gap: 10px; }
  .page-heading > button, .page-heading-actions, .page-heading-actions button { width: 100%; }
  .page-heading-actions { display: grid; grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar > * { width: 100% !important; }
  .ticket-toolbar { flex-direction: row; align-items: center; }
  .ticket-toolbar .search { width: 100% !important; flex: 1 1 100%; }
  .ticket-toolbar select,
  .ticket-toolbar .ticket-date-filter { width: calc((100% - 14px) / 3) !important; flex: 1 1 calc((100% - 14px) / 3); }
  .ticket-toolbar .ticket-date-filter > summary { width: 100% !important; }
  .ticket-toolbar .ticket-count-box { width: 100% !important; flex: 1 1 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }
  .modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 18px; }
  .modal-backdrop { padding: 6px; }
  .modal-head { position: sticky; top: 0; z-index: 2; background: var(--surface-solid); }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions button { width: 100%; }
  .table-wrap { margin-inline: -8px; padding-bottom: 5px; }
  table { min-width: 680px; }
  .ticket-summary-grid { grid-template-columns: 1fr; }
  .ticket-signal { min-height: 78px; }
  .manager-warning { align-items: stretch; flex-direction: column; }
  .ticket-resolution-chart { min-height: 150px; }
  .ticket-resolution-chart button { flex-basis: max(88px, var(--part)); }
  .chat-shell { grid-template-rows: auto minmax(320px, calc(100dvh - 300px)) auto; border-radius: 15px; }
  .chat-head { align-items: stretch; flex-direction: column; }
  .chat-group-picker { width: 100%; min-width: 0; }
  .chat-group-picker select { flex: 1; }
  .chat-message { width: 88%; }
  .chat-compose { grid-template-columns: 1fr 46px; }
  .chat-compose button { grid-column: 1 / -1; width: 100%; }
  .top-date-widget { min-width: 0; flex: 1; justify-content: center; }
  .simple-report-shell .card { padding: 15px; }
  .permission-actions { position: sticky; bottom: 8px; z-index: 3; padding: 8px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 12px; }
}

@media (max-width: 430px) {
  .executive-hero h3 { font-size: 20px; }
  .ticket-resolution-chart { min-height: 135px; }
  .ticket-resolution-chart strong { font-size: 27px; }
  .chat-message { width: 94%; }
}
/* v16.1 chat + review workflow */
.chat-message-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:9px; }
.chat-reaction { min-height:30px; padding:4px 8px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); cursor:pointer; }
.chat-reaction.active { background:var(--primary-soft); border-color:var(--primary); }
.chat-reply-preview, .chat-replying { display:flex; gap:8px; align-items:center; padding:8px 10px; margin:6px 0; border-right:3px solid var(--primary); background:var(--surface-soft); border-radius:9px; font-size:10px; }
.chat-reply-preview span { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-replying { justify-content:space-between; margin:0 12px; }
.chat-admin-tools { display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--surface-soft); }
.ticket-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:190px; }
.notification-row { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.notification-row p { margin:0; display:grid; gap:4px; }
.notification-row small, .notification-row em { color:var(--muted); font-size:10px; }
@media (max-width:760px){ .chat-admin-tools{flex-direction:column}.chat-admin-tools button{width:100%}.ticket-actions{min-width:220px}.notification-row{flex-direction:column} }

/* v16.2 live chat and manager problem board */
.chat-message{position:relative}.chat-message-body{cursor:pointer}.chat-popup-menu{position:absolute;z-index:20;bottom:44px;right:14px;display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid #d8e2e8;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(15,41,55,.18)}.chat-popup-menu.hidden{display:none!important}.chat-popup-reactions{display:flex;gap:4px}.chat-reaction-choice{border:0;background:transparent;font-size:20px;padding:4px 6px;border-radius:10px;cursor:pointer}.chat-reaction-choice:hover{background:#eef7f7}.chat-reaction-summary{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.chat-reaction-count{border:1px solid #d7e4e7;background:#f7fbfb;border-radius:999px;padding:2px 8px;cursor:pointer}.chat-reaction-count.active{background:#dff5ee;border-color:#89cdbb}.problem-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.problem-card{text-align:right;border:0;border-radius:14px;padding:16px;color:#fff;cursor:pointer;display:flex;flex-direction:column;gap:6px}.problem-card.ok{background:#13a45f}.problem-card.warn{background:#efa00b}.problem-card.bad{background:#e84242}.problem-card strong{font-size:16px}.problem-card small{opacity:.9}


/* === MADAR BLUE THEME === */
body::before { background: radial-gradient(circle at 7% 3%, rgba(21,94,239,.10), transparent 28%), radial-gradient(circle at 91% 14%, rgba(77,127,245,.10), transparent 27%), linear-gradient(145deg, var(--bg), var(--bg-deep)); }
.primary { background: linear-gradient(135deg, #155eef 0%, #315bdc 58%, #173d9b 100%); box-shadow: 0 10px 24px rgba(21,94,239,.20); }
.primary:hover { box-shadow: 0 14px 32px rgba(21,94,239,.28); }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(21,94,239,.10); }
.nav-item.active { background: linear-gradient(90deg, rgba(79,128,245,.30), rgba(21,94,239,.18)); box-shadow: inset 3px 0 0 #8eb2ff; }
.nav-subitem.active { box-shadow: inset -3px 0 0 #8eb2ff; }
.topbar { box-shadow: 0 7px 28px rgba(35,67,122,.06); }
.login-view { min-height:100vh; display:block; padding:0; background:#eef3fb; overflow:auto; }
.login-view::before,.login-view::after{display:none;}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,47%) minmax(520px,53%);direction:ltr;background:#f5f8fd;}
.login-form-panel,.login-brand-panel{direction:rtl;}
.login-form-panel{position:relative;display:grid;place-items:center;padding:48px;overflow:hidden;background:radial-gradient(circle at 9% 8%,rgba(21,94,239,.07),transparent 24%),radial-gradient(circle at 88% 86%,rgba(77,127,245,.07),transparent 20%),#f7f9fd;}
.login-form-panel::before{content:"";position:absolute;width:390px;height:390px;left:-250px;top:-190px;border-radius:50%;border:1px solid rgba(21,94,239,.08);}
.login-form-panel::after{content:"";position:absolute;width:240px;height:240px;right:-125px;bottom:-110px;border-radius:50%;border:1px solid rgba(21,94,239,.08);}
.login-card{width:min(420px,100%);padding:40px 36px 32px;text-align:right;background:rgba(255,255,255,.96);border:1px solid rgba(42,78,132,.11);border-radius:24px;box-shadow:0 28px 70px rgba(32,61,109,.12);backdrop-filter:blur(16px);}
.login-logo-wrap{width:68px;height:68px;display:grid;place-items:center;margin:0 auto 14px;border-radius:21px;background:linear-gradient(145deg,#f4f7ff,#e8efff);border:1px solid rgba(21,94,239,.10);}
.login-logo-wrap .brand-logo-image{width:52px;height:52px;border-radius:0;}
.login-kicker{margin-top:4px;color:#6780a5;text-align:center;font-size:11px;font-weight:800;}
.login-card h1{margin:5px 0 2px;color:#0e2344;text-align:center;font-size:32px;font-weight:900;}
.login-card>.muted{margin-bottom:2px;text-align:center;color:#7587a3;font-size:12px;}
.login-form-modern{margin-top:28px;gap:18px;}.login-form-modern label{color:#425a7b;}.login-input-wrap{position:relative;}.login-input-wrap input{height:49px;padding-right:42px;border-radius:13px;border-color:rgba(55,94,154,.20);background:#fff;}.login-input-wrap input[name="password"]{padding-left:112px;}.login-input-icon{position:absolute;z-index:2;right:15px;top:50%;transform:translateY(-50%);color:#7b8ea8;font-size:17px;}.password-toggle{position:absolute;z-index:2;left:10px;top:50%;transform:translateY(-50%);padding:5px 7px;color:#155eef;background:transparent;border:0;font:inherit;font-size:11px;font-weight:800;cursor:pointer;}.password-toggle:hover{color:#0b43bb;}.login-submit{min-height:50px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:13px;font-weight:900;}.login-security-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;color:#8090a7;font-size:10px;}
.login-2fa-step{display:grid;gap:12px}.login-2fa-step .muted{margin:0;text-align:center;font-size:11px;line-height:1.8}.login-2fa-step input{direction:ltr;text-align:center;font-size:20px;font-weight:800;letter-spacing:6px}.login-2fa-step .ghost{min-height:42px}
.login-brand-panel{position:relative;min-height:100vh;display:flex;flex-direction:column;padding:48px 58px 34px;color:#fff;overflow:hidden;background:radial-gradient(circle at 78% 42%,rgba(41,104,234,.32),transparent 25%),radial-gradient(circle at 22% 82%,rgba(40,93,215,.24),transparent 22%),linear-gradient(145deg,#061736 0%,#082457 48%,#123e95 100%);}
.login-brand-panel::before{content:"";position:absolute;width:760px;height:760px;right:-165px;top:90px;border:1px solid rgba(115,161,255,.16);border-radius:50%;}.login-brand-panel::after{content:"";position:absolute;width:460px;height:460px;left:-260px;top:-220px;border:1px solid rgba(115,161,255,.13);border-radius:50%;}.login-brand-panel>*{position:relative;z-index:1;}.login-brand-top{display:flex;align-items:center;gap:13px;}.login-brand-top img{width:54px;height:54px;object-fit:contain;padding:7px;background:rgba(255,255,255,.96);border-radius:15px;}.login-brand-top div{display:grid;gap:1px;}.login-brand-top strong{font-size:22px;font-weight:900;}.login-brand-top span{color:#afc3e7;font-size:11px;}.login-brand-copy{width:min(650px,100%);margin:auto;}.login-version-badge{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;margin-bottom:22px;color:#cfe0ff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:10px;font-weight:800;}.login-brand-copy h2{margin:0 0 17px;color:#fff;font-size:clamp(34px,4vw,55px);line-height:1.38;font-weight:950;}.login-brand-copy h2 em{color:#6c9dff;font-style:normal;}.login-brand-copy>p{max-width:590px;margin-bottom:34px;color:#bfd0ed;font-size:13px;line-height:2.1;}.login-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;}.login-feature-grid>div{display:grid;gap:3px;min-height:108px;padding:15px 13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:16px;}.login-feature-grid b{width:34px;height:34px;display:grid;place-items:center;margin-bottom:5px;color:#8db4ff;background:rgba(108,157,255,.12);border-radius:11px;}.login-feature-grid strong{font-size:11px;}.login-feature-grid span{color:#9fb4d5;font-size:9px;line-height:1.7;}.login-brand-footer{margin-top:auto;color:#7695c3;text-align:left;direction:ltr;font-size:9px;letter-spacing:.4px;}
.sidebar .brand-logo-image{padding:4px;background:#fff;border-radius:12px;}.sidebar::before{opacity:.18;background:radial-gradient(circle at 20% 18%,rgba(116,162,255,.22),transparent 22%),repeating-linear-gradient(135deg,transparent 0 31px,rgba(255,255,255,.035) 32px 33px);}.card,.ticket-signal,.dashboard-section,.settings-preview{border-color:rgba(53,89,147,.12);}.badge.info,.pill.info,.filter-chip{color:#1e57c8;background:#e9f0ff;}
@media(max-width:980px){.login-shell{grid-template-columns:1fr}.login-brand-panel{min-height:360px;padding:30px 28px;order:-1}.login-brand-copy{margin:36px 0 0}.login-brand-copy h2{font-size:34px}.login-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login-form-panel{min-height:620px;padding:34px 20px}}
@media(max-width:560px){.login-brand-panel{min-height:300px;padding:24px 20px}.login-brand-copy h2{font-size:28px}.login-brand-copy>p,.login-feature-grid{display:none}.login-card{padding:30px 22px 26px;border-radius:21px}.login-form-panel{min-height:560px}}

/* === MADAR BLUE THEME FIX 2: full-screen login + dashboard hero === */
/* Keep login locked to the actual browser viewport at every desktop resolution. */
#login-view.login-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f4f7fc;
}
#login-view .login-shell {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: 48% 52%;
}
#login-view .login-form-panel,
#login-view .login-brand-panel {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
}

/* Dashboard hero/banner uses the same navy/royal-blue palette as MADAR. */
.executive-hero {
  color: #ffffff;
  background:
    radial-gradient(circle at 85% 15%, rgba(100,154,255,.18), transparent 28%),
    linear-gradient(120deg, #071a3d 0%, #0b2d68 48%, #155eef 115%);
  border-color: rgba(123,166,255,.22);
  box-shadow: 0 22px 48px rgba(16,55,128,.20);
}
.executive-hero h3,
.executive-hero p,
.executive-hero .hero-kicker {
  color: #ffffff;
}
.executive-hero p { opacity: .82; }
.executive-hero .hero-kicker { opacity: .92; }
.executive-hero .secondary {
  color: #ffffff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}
.executive-hero .secondary:hover {
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.38);
}

/* Remove leftover teal accents from manager dashboard headings/badges where blue theme is expected. */
.hero-kicker { color: #dce8ff; }
.top-eyebrow { color: #2f6ee8; }

@media (max-width: 980px) {
  #login-view.login-view { position: absolute; min-height: 100vh; height: auto; overflow: auto; }
  #login-view .login-shell { height: auto; min-height: 100vh; grid-template-columns: 1fr; }
  #login-view .login-brand-panel { height: auto; min-height: 360px; }
  #login-view .login-form-panel { height: auto; min-height: 620px; }
}


/* MADAR sidebar: remove legacy teal/green accents and make group toggles truly collapsible */
.sidebar { color:#eef4ff; }
.sidebar .nav-group-toggle { color:#cbdcf8 !important; }
.sidebar .nav-group-toggle:hover { color:#ffffff !important; background:rgba(255,255,255,.055); border-radius:10px; }
.sidebar .nav-group-icon { color:#8fb6ff !important; }
.sidebar .nav-caret { color:#a8c3f3 !important; }
.sidebar .nav-submenu { border-right-color:rgba(143,180,255,.24) !important; }
.sidebar .nav-item { color:#dce8ff !important; }
.sidebar .nav-item .nav-icon { color:#91b7ff !important; }
.sidebar .nav-item:hover { color:#fff !important; background:rgba(89,139,238,.13) !important; }
.sidebar .nav-item.active { color:#fff !important; background:linear-gradient(90deg,rgba(61,112,222,.42),rgba(31,79,178,.30)) !important; box-shadow:inset 3px 0 0 #8db4ff !important; }
.sidebar .nav-subitem.active { box-shadow:inset -3px 0 0 #8db4ff !important; }
.sidebar .nav-submenu[hidden] { display:none !important; }

/* === FIX: admin chat cleanup toolbar must stay compact === */
.chat-shell {
  grid-template-rows: auto auto minmax(360px, calc(100vh - 380px)) auto;
}
.chat-admin-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  height: auto;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.chat-admin-tools button {
  width: auto;
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.chat-messages {
  min-height: 0;
}
@media (max-width: 760px) {
  .chat-shell { grid-template-rows: auto auto minmax(320px, calc(100dvh - 350px)) auto; }
  .chat-admin-tools { flex-direction: row; flex-wrap: wrap; }
  .chat-admin-tools button { width: auto; }
}

/* MADAR manager problem monitor */
.manager-monitor-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.manager-live-board{margin-top:18px}.manager-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.manager-group-panel{border:1px solid rgba(70,105,160,.13);border-radius:18px;background:#fbfdff;overflow:hidden}.manager-group-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(70,105,160,.10)}.manager-group-head>div:first-child{display:grid;gap:3px}.manager-group-head strong{font-size:15px}.manager-group-head small{color:var(--muted);font-size:10px}.manager-group-badges{display:flex;gap:6px;flex-wrap:wrap}.problem-board.compact{padding:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.problem-board.compact .problem-card{min-height:88px}.mini-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:12px}.manager-analytics-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;margin-top:18px}.mini-trend-bars{height:210px;display:flex;align-items:flex-end;gap:14px;padding:16px 6px 0}.mini-trend-item{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.mini-trend-item span{font-size:11px;font-weight:800}.mini-trend-item i{display:block;width:26px;min-height:10px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#4f7df2,#2458d8);box-shadow:0 8px 18px rgba(36,88,216,.18)}.mini-trend-item small{font-size:9px;color:var(--muted)}.freq-list{display:grid;gap:14px;padding-top:8px}.freq-list>div{display:grid;grid-template-columns:minmax(120px,1fr) 34px 1.5fr;align-items:center;gap:10px}.freq-list span{font-size:12px}.freq-list b{font-size:11px}.freq-list i{height:8px;background:#e8eef9;border-radius:999px;overflow:hidden}.freq-list em{display:block;height:100%;background:linear-gradient(90deg,#2458d8,#6d8ff5);border-radius:inherit}.red-card{background:linear-gradient(180deg,#fff,#fff7f8)!important}.green-card{background:linear-gradient(180deg,#fff,#f5fffb)!important}@media(max-width:980px){.manager-monitor-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.manager-group-grid,.manager-analytics-grid{grid-template-columns:1fr}}@media(max-width:620px){.manager-monitor-kpis{grid-template-columns:1fr}.manager-group-head{align-items:flex-start;flex-direction:column}.freq-list>div{grid-template-columns:1fr 32px}.freq-list i{grid-column:1/-1}}

/* === Batch refinements: manager time filter, staff blue hero === */
.staff-focus-card {
  background: linear-gradient(135deg, #071a3d 0%, #0b2f6f 58%, #155eef 120%) !important;
  box-shadow: 0 24px 54px rgba(11,47,111,.22) !important;
}
.staff-focus-card .hero-kicker,
.staff-focus-card .focus-copy h3 { color: #fff !important; }
.staff-focus-card .focus-copy p { color: #c8d9fb !important; }
.staff-focus-card .focus-action {
  color: #12346d !important;
  background: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
}
.manager-active-range { display:block; margin-top:6px; color:#637b9e; font-weight:700; }
.manager-time-filter { align-items:end; }
.manager-range-presets { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.trend-day-button { border:0; background:transparent; font:inherit; color:inherit; cursor:pointer; }
.trend-day-button:hover i { filter:brightness(.9); transform:translateY(-2px); }
.trend-day-button i { transition:.18s ease; }
@media (max-width: 760px) {
  .manager-range-presets { grid-column:1/-1; }
}


/* === Mobile bottom navigation === */
.mobile-bottom-nav{display:none}
.dashboard-news-section{margin-top:18px}
.dashboard-news-list{display:grid;gap:12px}
.dashboard-news-item{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#fff,#f6f9ff)}
.dashboard-news-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.dashboard-news-meta time{font-size:11px;color:var(--muted)}
.dashboard-news-item h4{margin:0 0 8px;font-size:1.08em}.dashboard-news-item p{margin:0;line-height:2;color:var(--text-soft)}
.news-admin-list{display:grid;gap:12px}.news-admin-item{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-solid)}.news-admin-item small{display:block;margin-top:5px;color:var(--muted);font-size:11px}.news-admin-item p{line-height:1.9}.news-group-picker{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
/* The configured font size is the base for the complete application. */
#app-view{font-size:var(--app-font-size)}
#app-view input,#app-view textarea,#app-view select,#app-view button{font-size:inherit;font-family:var(--app-font)}
@media(max-width:760px){
  .main-area{padding-bottom:76px}
  .topbar .top-actions{display:none!important}
  .mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:8px;right:8px;bottom:8px;z-index:70;height:62px;padding:6px;background:rgba(7,26,61,.96);border:1px solid rgba(126,165,255,.25);border-radius:18px;box-shadow:0 12px 32px rgba(8,31,74,.30);backdrop-filter:blur(16px);direction:rtl}
  .mobile-bottom-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:#dce8ff;border-radius:12px;min-width:0;padding:3px 2px}
  .mobile-bottom-nav button:active,.mobile-bottom-nav button:hover{background:rgba(75,125,240,.22);color:#fff}
  .mobile-bottom-nav button>span{font-size:20px;line-height:1}.mobile-bottom-nav small{font-size:9px;font-weight:800}.mobile-nav-badge{position:absolute;top:2px;right:18%;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#d04e60;color:#fff;font-size:9px}.mobile-nav-badge.hidden{display:none}
  .dashboard-news-item{padding:13px 14px}
}

/* Backup transfer: upload an exported ZIP from another installation */
.backup-upload-card { margin-bottom: 16px; border: 1px solid rgba(21,94,239,.16); background: linear-gradient(145deg, #fff, #f7faff); }
.backup-upload-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: end; margin: 18px 0 14px; }
.backup-file-picker { display: grid; gap: 8px; padding: 14px 16px; border: 1px dashed rgba(21,94,239,.32); border-radius: 14px; background: #f8faff; }
.backup-file-picker > span { color: var(--text); font-weight: 850; }
.backup-file-picker input[type="file"] { width: 100%; padding: 8px; background: #fff; }
.backup-file-picker small { color: var(--muted); }
#upload-restore-backup-btn { min-height: 48px; white-space: nowrap; }
@media (max-width: 720px) {
  .backup-upload-row { grid-template-columns: 1fr; }
  #upload-restore-backup-btn { width: 100%; }
}

/* Mission result and manager review workflow */
.mission-result-box,
.mission-review-box { margin-top: 16px; border: 1px solid rgba(76,118,220,.18); background: rgba(248,251,255,.72); }
.mission-result-box textarea { width: 100%; min-height: 112px; resize: vertical; border: 1px solid #cbd9f3; border-radius: 14px; padding: 14px; background: rgba(255,255,255,.82); font: inherit; }
.mission-submission-preview { white-space: pre-wrap; line-height: 2; padding: 14px 16px; border-radius: 14px; background: rgba(232,240,255,.65); border: 1px solid rgba(76,118,220,.15); }
.mission-review-history { display: grid; gap: 8px; }
.mission-review-history > div { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(238,244,255,.7); }
.mission-review-history small { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 720px) {
  .mission-review-history > div { grid-template-columns: 1fr; }
  .mission-review-history small { grid-column: auto; }
}

/* v18 visual system: calm glass surfaces with high-contrast readable text */
:root {
  --glass-bg: rgba(255,255,255,.68);
  --glass-bg-strong: rgba(255,255,255,.84);
  --glass-border: rgba(91,126,196,.22);
  --glass-shadow: 0 22px 60px rgba(28,62,116,.12);
}
body { background: radial-gradient(circle at 12% 8%, rgba(86,143,255,.14), transparent 28%), radial-gradient(circle at 85% 16%, rgba(73,198,186,.12), transparent 24%), linear-gradient(135deg,#eef4ff 0%,#f8fbff 48%,#edf4ff 100%); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.18) 50%, transparent 58%); opacity: .55; z-index: -1; }
.card, .modal, .chat-shell, .topbar, .metric-box, .executive-kpi, .project-card, .private-chat-shell, .dashboard-news-section { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }
.card:hover, .project-card:hover, .private-chat-item:hover { border-color: rgba(47,103,186,.38); box-shadow: 0 24px 70px rgba(28,62,116,.16); }
.topbar { background: rgba(255,255,255,.72); }
.sidebar { background: linear-gradient(155deg,rgba(8,35,84,.96),rgba(20,72,158,.92)); box-shadow: -20px 0 70px rgba(8,35,84,.22); backdrop-filter: blur(24px); }
.page-content { animation: page-enter-v18 .28s ease both; }
@keyframes page-enter-v18 { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.nav-direct { width: 100%; justify-content: flex-start; border-radius: 14px; padding: 12px 14px; margin: 4px 0; transition: background .2s ease, transform .2s ease; }
.nav-direct:hover { transform: translateX(-3px); }
.modal-backdrop { background: rgba(13,33,67,.46); backdrop-filter: blur(8px); }
.modal { width: min(1080px, calc(100vw - 28px)); max-height: min(92dvh, 920px); border-radius: 24px; }
.modal-body { padding: 24px; }
.mission-form-wide { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.mission-form-wide .full { grid-column: 1 / -1; }
.mission-people-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.mission-person-option.hidden { display: none; }
.mission-card { cursor: pointer; }
.priority-star { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-start: 5px; font-size: 15px; vertical-align: middle; }
.priority-star.excellent { color: #15a678; }
.priority-star.important { color: #e04d60; }
.priority-star.critical { color: #d6a321; }
.dashboard-news-section { margin-bottom: 18px; }
.manager-news-top { order: -1; }
.dashboard-news-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.news-column { min-width: 0; padding: 16px; border-radius: 18px; background: rgba(247,250,255,.58); border: 1px solid rgba(91,126,196,.16); }
.news-column.news-important { border-color: rgba(224,77,96,.26); background: linear-gradient(135deg,rgba(255,247,248,.74),rgba(255,255,255,.52)); }
.news-scroll-list { max-height: 330px; overflow-y: auto; padding-inline-end: 4px; }
.dashboard-news-item { padding: 14px 16px; border-radius: 15px; background: rgba(255,255,255,.66); border: 1px solid rgba(91,126,196,.16); margin-bottom: 10px; }
.dashboard-news-item.important { border-inline-start: 4px solid #e04d60; }
.dashboard-news-item:last-child { margin-bottom: 0; }
.dashboard-news-item h4 { margin: 7px 0 5px; }
.dashboard-news-item p { margin: 0; color: var(--muted); line-height: 1.95; }
.dashboard-news-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.unified-manager-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; margin-top: 18px; }
.manager-issue-list { display: grid; gap: 9px; max-height: 360px; overflow-y: auto; }
.manager-issue-list article { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; padding: 12px; border-radius: 14px; background: rgba(247,250,255,.7); border: 1px solid rgba(91,126,196,.14); }
.manager-issue-list article small { grid-column: 2; color: var(--muted); }
.mission-member-status { display: grid; gap: 8px; margin-bottom: 18px; }
.mission-member-status > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(247,250,255,.72); }
.workflow-stepper { display: flex; align-items: flex-start; gap: 0; margin: 22px 0; padding: 18px 8px; overflow-x: auto; }
.workflow-step { position: relative; flex: 1 0 110px; text-align: center; color: #aab7ca; }
.workflow-step::before { content: ''; position: absolute; top: 17px; inset-inline-start: -50%; width: 100%; height: 2px; background: #d7deea; z-index: 0; }
.workflow-step:first-child::before { display: none; }
.workflow-step span { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: #edf1f7; border: 2px solid #d7deea; font-weight: 900; }
.workflow-step strong { display: block; font-size: 11px; white-space: nowrap; }
.workflow-step.completed, .workflow-step.current { color: #2467c8; }
.workflow-step.completed span { color: #fff; background: #16a477; border-color: #16a477; }
.workflow-step.completed::before { background: #16a477; }
.workflow-step.current span { color: #fff; background: #2768db; border-color: #2768db; box-shadow: 0 0 0 6px rgba(39,104,219,.12); }
.workflow-step.current strong { font-weight: 900; }
.private-chat-shell { margin-bottom: 18px; }
.private-chat-layout { display: grid; grid-template-columns: minmax(190px,.34fr) minmax(0,1fr); gap: 14px; min-height: 360px; }
.private-chat-list { display: grid; align-content: start; gap: 8px; max-height: 410px; overflow-y: auto; }
.private-chat-item { width: 100%; display: grid; gap: 4px; text-align: start; padding: 12px; border: 1px solid rgba(91,126,196,.18); border-radius: 14px; background: rgba(247,250,255,.7); color: inherit; cursor: pointer; }
.private-chat-item.active { border-color: #3675dc; background: rgba(210,226,255,.76); }
.private-chat-item span { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.private-chat-thread { display: flex; flex-direction: column; min-height: 360px; border-radius: 16px; background: rgba(255,255,255,.42); border: 1px solid rgba(91,126,196,.16); padding: 14px; }
.private-chat-thread-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(91,126,196,.16); }
.private-chat-thread-head strong { margin-inline-end: auto; }
.private-chat-messages { flex: 1; min-height: 220px; max-height: 390px; overflow-y: auto; padding: 12px 2px; }
.private-chat-message { max-width: 78%; padding: 9px 12px; margin: 0 auto 9px 0; border-radius: 14px 14px 4px 14px; background: rgba(232,240,255,.82); }
.private-chat-message.mine { margin-inline-start: 0; margin-inline-end: auto; border-radius: 14px 14px 14px 4px; background: rgba(213,235,229,.84); }
.private-chat-message strong, .private-chat-message time { font-size: 11px; margin-inline-end: 8px; }
.private-chat-message time { color: var(--muted); }
.private-chat-message p { margin: 5px 0 0; white-space: pre-wrap; line-height: 1.8; }
.chat-shell { min-height: calc(100dvh - 170px); }
.chat-messages { min-height: 0; }
.chat-shell { display: flex; flex-direction: column; min-height: 0; max-height: min(760px, calc(100dvh - 130px)); }
.chat-admin-tools { flex: 0 0 auto; }
.chat-messages { flex: 1 1 auto; min-height: 260px; max-height: 520px; }

@media (max-width: 900px) {
  .mission-form-wide { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mission-people-list, .dashboard-news-layout, .unified-manager-grid, .private-chat-layout { grid-template-columns: 1fr; }
  .private-chat-list { max-height: 230px; }
  .chat-shell { max-height: none; }
  .chat-messages { max-height: 440px; }
}
@media (max-width: 560px) {
  .modal { width: calc(100vw - 16px); border-radius: 18px; }
  .modal-body { padding: 16px; }
  .mission-form-wide { grid-template-columns: 1fr; }
  .workflow-step { flex-basis: 88px; }
}

/* Batch edit 2: full-width dashboards, compact cards and unified chat */
.page-content { max-width: 1700px; }
.staff-day-shell, .simple-report-shell { width: 100%; max-width: none; margin-inline: 0; }
.staff-focus-card { min-height: 150px; padding: 24px 34px; border-radius: 22px; }
.staff-content-grid { grid-template-columns: 1fr; }
.dashboard-news-section, .executive-hero, .executive-kpis, .unified-manager-grid, .main-insight-grid, .manager-filter-card, .manager-live-board, .manager-analytics-grid { width: 100%; }
.dashboard-news-section { padding: 18px 22px; }
.dashboard-news-layout { gap: 12px; }
.news-column { padding: 12px; }
.news-scroll-list { max-height: 235px; }
.dashboard-news-item { padding: 10px 12px; margin-bottom: 8px; }
.dashboard-news-item h4 { margin: 5px 0 3px; font-size: .98em; }
.dashboard-news-item p { line-height: 1.7; font-size: 11px; }
.executive-hero { min-height: 126px; padding: 22px 30px; }
.notification-panel { width: 100%; }
.notification-list { max-height: 620px; overflow-y: auto; display: grid; gap: 8px; }
.notification-item { min-height: 0; padding: 9px 12px; border-radius: 12px; }
.notification-item p { line-height: 1.65; }
.notification-filter-label { display: grid; grid-template-columns: auto minmax(180px, 250px); align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.notification-filter-label select { min-height: 38px; }
.chat-hub { width: 100%; }
.chat-tabs { display: flex; gap: 8px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--glass-border); border-radius: 15px; background: rgba(247,250,255,.62); }
.chat-tab { flex: 1; min-height: 42px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 850; transition: .2s ease; }
.chat-tab.active { color: #fff; background: linear-gradient(135deg, #215bd4, #17449e); box-shadow: 0 8px 18px rgba(32,86,198,.2); }
.chat-group-host.hidden, .chat-private-host.hidden { display: none; }
.chat-private-host > .private-chat-shell { margin: 0; }

@media (max-width: 760px) {
  .staff-focus-card { padding: 22px 20px; }
  .notification-filter-label { grid-template-columns: 1fr; width: 100%; }
  .notification-filter-label select { width: 100%; }
  .notification-toolbar, .notification-item, .notification-actions { align-items: stretch; flex-direction: column; }
  .notification-actions button { width: 100%; }
}

/* Final compact dashboard/chat/detail refinements */
.dashboard-news-section { padding: 12px 18px; }
.dashboard-news-layout { gap: 10px; }
.news-column { padding: 9px; }
.news-scroll-list { max-height: 175px; }
.dashboard-news-item { padding: 7px 10px; margin-bottom: 6px; }
.dashboard-news-item h4 { margin: 3px 0 2px; font-size: .94em; }
.dashboard-news-item p { line-height: 1.5; font-size: 10px; }
.dashboard-news-meta { margin-bottom: 3px; }
.notification-list { gap: 6px; }
.notification-item { padding: 6px 9px; border-radius: 10px; }
.notification-item strong { margin-bottom: 2px; font-size: 11px; }
.notification-item p { line-height: 1.45; font-size: 10px; }
.notification-item time { margin-top: 3px; font-size: 9px; }
.chat-hub { height: calc(100dvh - 122px); min-height: 0; display: flex; flex-direction: column; }
.chat-group-host, .chat-private-host { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.chat-shell { width: 100%; max-width: none; height: 100%; max-height: none; min-height: 0; margin: 0; }
.chat-messages { min-height: 0; max-height: none; }
.private-chat-shell { height: 100%; min-height: 0; margin: 0; }
.private-chat-layout { height: calc(100% - 54px); min-height: 0; }
.private-chat-thread { min-height: 0; }
.private-chat-messages { min-height: 0; max-height: none; }
.modal:has(.project-detail) { width: min(1320px, calc(100vw - 24px)); }
.modal:has(.project-detail) .project-detail { max-width: 100%; }
.modal:has(.project-detail) .metric-box { min-height: 92px; }
@media (max-width: 760px) {
  .chat-hub { height: calc(100dvh - 104px); padding: 10px; }
  .chat-tabs { margin-bottom: 8px; }
  .modal:has(.project-detail) { width: calc(100vw - 14px); }
}

/* Keep the new visual direction last so older compatibility batches cannot
   pull the shell back to the previous layout. */
.app-view { direction: rtl; }
.main-area { min-height: 100vh; background: transparent; }
.topbar { background: rgba(255,255,255,.84); border-color: rgba(75,113,175,.13); box-shadow: 0 8px 30px rgba(28,62,116,.05); }
.page-content { max-width: 1760px; padding: 30px 34px 46px; margin: 0 auto; }
.sidebar { right: 18px; top: 18px; width: 286px; height: calc(100vh - 36px); min-height: 0; max-height: calc(100vh - 36px); border: 1px solid rgba(145,183,255,.22); border-radius: 24px; background: linear-gradient(160deg,#081a3a 0%,#0d2d62 55%,#184a9b 100%); box-shadow: -20px 24px 70px rgba(8,31,74,.22); }
.main-area { margin-right: 322px; }
.card, .project-card, .executive-kpi, .dashboard-news-section { border-color: rgba(83,117,177,.18); box-shadow: 0 18px 52px rgba(26,61,119,.10); }
.form-builder-shell { direction: rtl; }
@media (max-width: 760px) {
  .sidebar { right: -288px; top: 0; width: 278px; height: 100vh; min-height: 100vh; max-height: 100vh; border-radius: 0; }
  .sidebar.open, .sidebar.pinned { right: 0; }
  .main-area { margin-right: 0; }
  .page-content { max-width: none; padding: 22px 14px 86px; }
  .form-builder-shell { grid-template-columns: 1fr; }
  .form-builder-library, .form-builder-properties { position: static; max-height: none; }
  .form-builder-heading .page-heading-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .form-builder-heading .page-heading-actions { grid-template-columns: 1fr; }
}

/* Mission form: final override. This must stay after legacy compatibility CSS. */
.modal-backdrop:has(.mission-form-wide) { place-items: center; padding: 22px; background: rgba(6,21,48,.68); }
.modal:has(.mission-form-wide) { width: min(1120px, calc(100vw - 36px)); max-height: min(92dvh, 900px); overflow: hidden; border: 1px solid rgba(103,143,218,.28); border-radius: 28px; background: #f7faff; box-shadow: 0 34px 100px rgba(4,24,63,.34); }
.modal:has(.mission-form-wide) .modal-head { min-height: 82px; padding: 18px 28px; color: #fff; border: 0; background: linear-gradient(120deg,#0a2450,#1858b4 72%,#2d76df); }
.modal:has(.mission-form-wide) .modal-head h3 { color: #fff; font-size: 19px; letter-spacing: -.2px; }
.modal:has(.mission-form-wide) .modal-close { color: #dbe9ff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.modal:has(.mission-form-wide) .modal-close:hover { color: #fff; background: rgba(255,255,255,.22); border-color: #fff; }
.modal:has(.mission-form-wide) .modal-body { padding: 26px 30px 30px; overflow-y: auto; background: linear-gradient(180deg,#f7faff 0%,#eef4fd 100%); }
.mission-form-wide { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px 16px; align-items: start; }
.mission-form-wide > label { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #466080; font-size: 12px; font-weight: 850; }
.mission-form-wide > label.full { grid-column: 1 / -1; }
.mission-form-wide > label:first-child { grid-column: 1 / -1; padding: 16px 18px 18px; border-radius: 18px; background: linear-gradient(135deg,#e7f0ff,#fff); border: 1px solid #cbdcf7; }
.mission-form-wide > label:first-child::before { content: 'اطلاعات اصلی مأموریت'; margin-bottom: 2px; color: #1454ac; font-size: 14px; }
.mission-form-wide input, .mission-form-wide select, .mission-form-wide textarea { width: 100%; min-height: 46px; padding: 11px 14px; color: #172b49; background: rgba(255,255,255,.94); border: 1px solid #c8d8ee; border-radius: 12px; outline: 0; box-sizing: border-box; transition: .18s ease; }
.mission-form-wide textarea { min-height: 118px; resize: vertical; line-height: 1.9; }
.mission-form-wide input:focus, .mission-form-wide select:focus, .mission-form-wide textarea:focus { border-color: #2870d3; box-shadow: 0 0 0 4px rgba(40,112,211,.12); background: #fff; }
.mission-form-wide > label:nth-of-type(2), .mission-form-wide > label:nth-of-type(3), .mission-form-wide > label:nth-of-type(4) { padding: 14px; border: 1px solid #d7e2f1; border-radius: 16px; background: rgba(255,255,255,.7); }
.mission-form-wide .mission-people-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 14px; border: 1px solid #d7e2f1; border-radius: 16px; background: rgba(255,255,255,.62); }
.mission-form-wide .mission-people-list::before { content: 'اعضای انجام‌دهنده را انتخاب کنید'; grid-column: 1 / -1; color: #1454ac; font-size: 12px; font-weight: 900; }
.mission-form-wide .check-option { min-height: 44px; padding: 10px 12px; color: #2d4668; background: #fff; border-color: #d5e2f3; border-radius: 12px; }
.mission-form-wide .check-option:has(input:checked) { color: #0f4f9f; background: #e8f2ff; border-color: #5d94df; box-shadow: 0 5px 16px rgba(44,111,209,.1); }
.mission-form-wide .modal-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 2px; padding-top: 20px; border-top: 1px solid #d6e2f1; }
.mission-form-wide .modal-actions button { min-width: 150px; min-height: 46px; border-radius: 13px; }
@media (max-width: 900px) {
  .mission-form-wide { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mission-form-wide .mission-people-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .modal:has(.mission-form-wide) { width: calc(100vw - 14px); border-radius: 20px; }
  .modal:has(.mission-form-wide) .modal-body { padding: 18px 14px 22px; }
  .mission-form-wide { grid-template-columns: 1fr; gap: 12px; }
  .mission-form-wide .mission-people-list { grid-template-columns: 1fr; }
}

/* =========================================================
   v23 — Premium visual polish for missions, details, reports,
   chat, tables and common management surfaces.
   Visual-only layer: no workflow or API behavior is changed.
   ========================================================= */
:root {
  --v23-ink: #10233f;
  --v23-muted: #7185a3;
  --v23-line: #dce6f4;
  --v23-soft: #f6f9fe;
  --v23-blue: #1e63d5;
  --v23-blue-2: #327be8;
  --v23-navy: #0a2b5f;
  --v23-shadow: 0 18px 55px rgba(20, 57, 111, .12);
}

/* Global surface cleanup */
.card, .metric-box, .executive-kpi, .project-card, .dashboard-news-section,
.private-chat-shell, .chat-shell {
  border-color: rgba(104, 139, 197, .18);
  box-shadow: 0 12px 36px rgba(25, 61, 118, .08);
}
.card-pad { padding: 20px; }
.section-title { gap: 12px; margin-bottom: 16px; }
.section-title h3 { color: var(--v23-ink); letter-spacing: -.2px; }
.eyebrow { color: var(--v23-blue); font-weight: 900; }
.muted { color: var(--v23-muted); }

/* Page heading — tighter and more executive */
.page-heading {
  min-height: 72px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(100, 137, 196, .14);
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(245,249,255,.82));
  box-shadow: 0 10px 34px rgba(24,60,118,.06);
}
.page-heading p { margin: 0; line-height: 1.8; }
.page-heading-actions { gap: 9px; }

/* Buttons */
.primary, button.primary {
  background: linear-gradient(135deg, #2469d7, #1453bd);
  border-color: #1c5fca;
  box-shadow: 0 8px 20px rgba(30,99,213,.18);
}
.primary:hover, button.primary:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(30,99,213,.24); }
.secondary, button.secondary, .ghost, button.ghost { border-radius: 11px; }
.small-action { padding: 7px 11px; min-height: 34px; }

/* Tables */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--v23-line);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
}
table { border-collapse: separate; border-spacing: 0; }
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 13px 14px;
  color: #657a99;
  background: #f5f8fd;
  border-bottom: 1px solid #dce6f3;
  font-size: 10px;
  font-weight: 900;
}
tbody td { padding: 14px; border-bottom-color: #e6edf7; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f8fbff; }
.title-cell { color: var(--v23-ink); font-weight: 850; }
.sub-cell { color: #8495ae; line-height: 1.65; }

/* Mission cards */
.operational-cards { gap: 18px; }
.project-card.mission-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,250,255,.92));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.project-card.mission-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2d78e7, #74a8f3);
  opacity: .85;
}
.project-card.mission-card:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(21,61,124,.13); }
.project-card.mission-card h3 { font-size: 16px; line-height: 1.7; }
.project-card .project-description { min-height: 48px; line-height: 1.9; }
.project-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 10px;
  margin: 14px 0;
}
.project-meta span {
  padding: 8px 10px;
  border: 1px solid #e1e9f5;
  border-radius: 10px;
  background: #f8fbff;
  color: #607796;
  font-size: 10px;
}
.progress-line { height: 7px; background: #e8eff9; }
.progress-line span { background: linear-gradient(90deg,#246cdf,#4c8bf0); }
.progress-meta { margin: 9px 0 7px; }

/* Premium modal shell */
.modal-backdrop {
  background: rgba(6, 24, 55, .52);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}
.modal {
  overflow: hidden;
  border: 1px solid rgba(115,149,204,.24);
  background: #f8fbff;
  box-shadow: 0 34px 110px rgba(7,28,67,.30);
}
.modal-head {
  min-height: 72px;
  padding: 16px 22px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #e1e9f4;
}
.modal-head h3 { color: var(--v23-ink); font-size: 17px; }
.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f6fd;
  border-color: #d7e3f2;
}
.modal-body { background: linear-gradient(180deg,#f8fbff,#f2f6fc); }

/* Mission detail — remove the oversized blank-card feeling */
.modal:has(.project-detail) {
  width: min(1180px, calc(100vw - 36px));
  max-height: min(92dvh, 900px);
  border-radius: 24px;
}
.modal:has(.project-detail) .modal-body { padding: 0; }
.project-detail { padding: 24px; }
.project-detail > .section-title:first-child {
  position: relative;
  align-items: flex-start;
  margin: -24px -24px 20px;
  padding: 24px 26px 22px;
  color: #fff;
  background: linear-gradient(125deg,#0b2b5f,#1658b3 70%,#2d78df);
}
.project-detail > .section-title:first-child h3 { margin: 5px 0 4px; color: #fff; font-size: 21px; }
.project-detail > .section-title:first-child .eyebrow { color: #cfe1ff; }
.project-detail > .section-title:first-child .muted { max-width: 760px; color: rgba(231,240,255,.82); line-height: 1.9; }
.project-detail > .section-title:first-child .pill { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.28); }
.project-detail .metric-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.modal:has(.project-detail) .metric-box {
  min-height: 0;
  padding: 14px 16px;
  border: 1px solid #dbe6f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.modal:has(.project-detail) .metric-box span { color: #7b8da8; }
.modal:has(.project-detail) .metric-box strong { margin-top: 6px; font-size: 16px; line-height: 1.6; }
.project-detail .inner-card {
  margin-top: 14px;
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 26px rgba(25,61,118,.06);
}
.project-detail .member-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.project-detail .member-list > div {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #e0e8f4;
  border-radius: 11px;
  background: #f8fbff;
}
.project-detail .modal-actions {
  position: sticky;
  bottom: -24px;
  z-index: 2;
  margin: 20px -24px -24px;
  padding: 14px 24px;
  border-top: 1px solid #dce6f3;
  background: rgba(248,251,255,.96);
  backdrop-filter: blur(12px);
}

/* Mission task detail / progress surfaces share the same dense rhythm */
.modal .metric-strip + .card,
.modal .project-detail .card + .card { margin-top: 14px; }
.modal .progress-line { height: 7px; }
.modal .form-stack label, .modal .form-grid label { color: #506884; font-weight: 800; }
.modal input, .modal select, .modal textarea {
  border-color: #d4e0ef;
  background: #fff;
  border-radius: 11px;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: #4b86db;
  box-shadow: 0 0 0 4px rgba(52,119,216,.10);
}
.modal textarea { line-height: 1.9; }
.modal-actions {
  gap: 9px;
  padding-top: 16px;
  border-top-color: #e1e8f3;
}

/* Report/progress entry modals */
.modal:has(#modal-form) .form-stack,
.modal:has(#modal-form) .form-grid { gap: 14px; }
.modal:has(#modal-form) label { gap: 7px; }
.modal:has(#modal-form) textarea { min-height: 92px; }
.modal:has(#modal-form) .modal-actions button { min-width: 118px; }

/* Group + private chat — modern messenger */
.chat-hub {
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 18px 56px rgba(21,58,116,.10);
}
.chat-tabs {
  gap: 6px;
  padding: 5px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: #edf3fb;
  border-color: #dce6f3;
}
.chat-tab {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: #7386a2;
  background: transparent;
  font-weight: 900;
  box-shadow: none;
}
.chat-tab.active {
  color: #fff;
  background: linear-gradient(135deg,#246bd9,#174fae);
  box-shadow: 0 7px 18px rgba(30,99,213,.18);
}
.chat-shell {
  border-radius: 17px;
  background: #fff;
  border: 1px solid #dce6f3;
  box-shadow: none;
}
.chat-head {
  min-height: 72px;
  padding: 14px 18px;
  background: linear-gradient(180deg,#fff,#f8fbff);
  border-bottom-color: #e0e8f3;
}
.chat-head h3 { color: var(--v23-ink); font-size: 15px; }
.chat-group-picker select { min-height: 42px; border-radius: 10px; }
.chat-messages {
  gap: 12px;
  padding: 22px;
  background:
    radial-gradient(circle at 12% 14%, rgba(49,123,232,.045), transparent 22%),
    linear-gradient(180deg,#f8fbff,#f5f8fc);
}
.chat-message {
  width: min(68%, 620px);
  padding: 12px 14px;
  border-radius: 16px 16px 5px 16px;
  border-color: #dde7f3;
  background: #fff;
  box-shadow: 0 5px 18px rgba(30,65,122,.07);
}
.chat-message.mine {
  color: #14355f;
  background: #eaf3ff;
  border-color: #c9ddf8;
  border-radius: 16px 16px 16px 5px;
}
.chat-author strong { font-size: 10px; color: #31547e; }
.chat-author time { font-size: 8px; }
.chat-message p { margin-top: 6px; line-height: 1.85; }
.chat-compose {
  grid-template-columns: minmax(0,1fr) 46px 74px;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-top-color: #dfe8f3;
}
.chat-compose textarea {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fbff;
}
.chat-file-button { width: 46px; min-height: 48px; border-radius: 11px; background: #f2f6fc; }
.chat-compose .primary { min-width: 74px; }

/* Private chat */
.private-chat-shell { padding: 0; overflow: hidden; border-radius: 17px; background: #fff; box-shadow: none; }
.private-chat-shell > .section-title { min-height: 72px; margin: 0; padding: 14px 18px; border-bottom: 1px solid #e0e8f3; background: #fbfdff; }
.private-chat-layout { gap: 0; background: #fff; }
.private-chat-list {
  padding: 10px;
  border-left: 1px solid #e0e8f3;
  background: #f7faff;
}
.private-chat-item {
  width: 100%;
  margin-bottom: 7px;
  padding: 11px 12px;
  text-align: right;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
}
.private-chat-item.active { background: #e9f2ff; border-color: #c9dcf7; color: #164f9e; }
.private-chat-item strong { display: block; margin-bottom: 4px; }
.private-chat-item span { display: block; overflow: hidden; color: #7e91aa; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.private-chat-thread { background: #fff; }
.private-chat-thread-head { min-height: 60px; padding: 12px 16px; border-bottom: 1px solid #e1e9f4; background: #fbfdff; }
.private-chat-messages { padding: 18px; background: #f7faff; }
.private-chat-message {
  max-width: 72%;
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid #dce7f4;
  border-radius: 15px 15px 5px 15px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(26,62,118,.06);
}
.private-chat-message.mine { margin-right: auto; background: #eaf3ff; border-color: #c9ddf8; border-radius: 15px 15px 15px 5px; }

/* Empty states should look intentional, not broken */
.empty-state {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #8294ad;
  background: linear-gradient(180deg,rgba(248,251,255,.75),rgba(244,248,253,.62));
  border: 1px dashed #d5e1ef;
  border-radius: 14px;
}

/* Daily reports and common forms */
.simple-report-shell { width: min(980px,100%); }
.simple-report-shell .card,
.report-manager-filter { border-radius: 19px; }
.work-slots-wrap, .day-note-section { border-radius: 15px; background: #f8fbff; }
.work-slot-row { padding: 12px 0; }
.report-duration { border-radius: 13px; }

/* Forms & builder common cards */
.form-builder-shell .card,
.form-builder-library,
.form-builder-properties { border-radius: 18px; }
.form-grid input, .form-grid select, .form-grid textarea,
.form-stack input, .form-stack select, .form-stack textarea { min-height: 44px; }
.check-option { transition: .18s ease; }
.check-option:hover { border-color: #a9c4e9; background: #f7fbff; }

@media (max-width: 1000px) {
  .project-detail .metric-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-detail .member-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-meta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .card-pad { padding: 15px; }
  .page-heading { min-height: 0; padding: 14px; border-radius: 15px; }
  .modal:has(.project-detail) { width: calc(100vw - 12px); border-radius: 18px; }
  .project-detail { padding: 16px; }
  .project-detail > .section-title:first-child { margin: -16px -16px 16px; padding: 18px 16px; }
  .project-detail .metric-strip, .project-detail .member-list { grid-template-columns: 1fr; }
  .project-detail .modal-actions { bottom: -16px; margin: 16px -16px -16px; padding: 12px 16px; }
  .chat-hub { padding: 8px; border-radius: 16px; }
  .chat-messages { padding: 14px 10px; }
  .chat-message, .private-chat-message { width: 88%; max-width: 88%; }
  .chat-compose { grid-template-columns: 1fr 44px; }
  .chat-compose .primary { grid-column: 1/-1; width: 100%; }
  .private-chat-list { border-left: 0; border-bottom: 1px solid #e0e8f3; }
}

/* =========================================================
   v24 — Mission usability refinements requested by user
   ========================================================= */

/* 1) Compact mission assignee selector */
.mission-form-wide .mission-people-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.mission-form-wide .check-option {
  min-height: 38px;
  padding: 7px 10px;
  gap: 7px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.55;
}
.mission-form-wide .check-option input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px;
  margin: 0 0 0 2px;
  padding: 0;
  border-radius: 4px;
  accent-color: #256ad8;
}
.mission-form-wide .check-option small {
  margin-inline-start: auto;
  color: #7b8da8;
  font-size: 9.5px;
  white-space: nowrap;
}

/* 2) Explicit 24-hour clock entry (browser AM/PM UI removed) */
.mission-form-wide .clock24-input {
  direction: ltr;
  text-align: left;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.mission-form-wide .clock24-input::placeholder { color: #9aa9bd; }

/* 3 + 4) Every long modal scrolls internally; header remains visible */
.modal {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 920px);
  overflow: hidden !important;
}
.modal-head {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  background: var(--surface-solid);
}
.modal-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal:has(.mission-form-wide) .modal-head {
  position: relative;
  flex: 0 0 auto;
}
.modal:has(.mission-form-wide) .modal-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto !important;
}
.modal:has(.project-detail) .modal-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto !important;
}
.project-detail > .modal-actions {
  position: sticky;
  bottom: -24px;
  z-index: 5;
  margin: 20px -24px -24px;
  padding: 14px 24px;
  background: rgba(248,251,255,.96);
  border-top: 1px solid #dce6f3;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 5) Mission type marker: long=green, short=yellow, urgent=red */
.mission-type-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-end: 6px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(112,130,155,.10);
}
.mission-type-dot.normal { background: #19a66f; box-shadow: 0 0 0 3px rgba(25,166,111,.13); }
.mission-type-dot.important { background: #e4ad24; box-shadow: 0 0 0 3px rgba(228,173,36,.14); }
.mission-type-dot.urgent { background: #dc4a57; box-shadow: 0 0 0 3px rgba(220,74,87,.13); }

@media (max-width: 1050px) {
  .mission-form-wide .mission-people-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .modal-backdrop { padding: 8px; }
  .modal { max-height: 96dvh; }
  .mission-form-wide .mission-people-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .mission-form-wide .mission-people-list { grid-template-columns: 1fr; }
  .project-detail > .modal-actions { bottom: -18px; margin: 18px -18px -18px; padding: 12px 18px; }
}


/* v25.8 consolidated usability + responsive fixes */
.simple-report-shell { width:100% !important; max-width:none !important; margin:0 !important; }
#page-content:has(.simple-report-shell) { width:100%; max-width:none; }
.mobile-welcome-panel { display: none; }
.welcome-image-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 15px; }
.welcome-image-settings .setting-note { grid-column: 1 / -1; }
.welcome-image-setting { display: grid; gap: 8px; min-width: 0; padding: 10px; background: #fff; border: 1px solid rgba(55,94,154,.14); border-radius: 13px; }
.welcome-image-preview { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: #f4f7fd; border: 1px dashed rgba(55,94,154,.22); border-radius: 11px; font-size: 11px; font-weight: 900; }
.welcome-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.welcome-image-setting label { font-size: 10px; }
.welcome-image-setting input { padding: 8px; font-size: 10px; }
@media (max-width: 560px) {
  #login-view.login-view { position: fixed !important; inset: 0; padding: 0 !important; background: #fff !important; overflow: hidden !important; }
  #login-view .login-shell { min-height: 100dvh !important; height: 100dvh !important; display: block !important; background: #fff !important; }
  #login-view .mobile-welcome-panel { min-height: 100dvh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 18px; padding: 46px 24px max(18px, env(safe-area-inset-bottom)); background: #fff; }
  #login-view.show-login-form .mobile-welcome-panel { display: none; }
  #login-view:not(.show-login-form) .login-form-panel,
  #login-view:not(.show-login-form) .login-brand-panel { display: none !important; }
  #login-view.show-login-form .login-form-panel { min-height: 100dvh !important; height: 100dvh !important; display: grid !important; place-items: center !important; padding: 34px 20px !important; overflow: auto !important; background: #f3f7fd !important; }
  #login-view.show-login-form .login-brand-panel { display: none !important; }
  .mobile-welcome-copy { text-align: center; }
  .mobile-welcome-copy h1 { margin: 0 0 8px; color: #111827; font-size: 24px; font-weight: 950; letter-spacing: 0; }
  .mobile-welcome-copy p { margin: 0; color: #52657f; font-size: 14px; font-weight: 800; }
  .mobile-welcome-slider { min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; direction: ltr; }
  .mobile-welcome-slider::-webkit-scrollbar { display: none; }
  .mobile-welcome-slide { display: grid; place-items: center; scroll-snap-align: center; padding: 10px 0; }
  .mobile-welcome-slide img { width: min(100%, 390px); max-height: 56dvh; object-fit: contain; }
  .mobile-welcome-dots { display: flex; justify-content: center; gap: 8px; }
  .mobile-welcome-dots span { width: 8px; height: 8px; border-radius: 999px; background: #d6deef; }
  .mobile-welcome-dots span.active { width: 24px; background: #2944a3; }
  .mobile-welcome-login { min-height: 48px; border-radius: 8px; background: #2944a3; box-shadow: none; font-weight: 950; }
}
.report-kpis-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.manager-reports-section { overflow:hidden; }
.manager-report-list { display:grid; gap:14px; }
.manager-report-card { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(280px,1.25fr) minmax(260px,1.55fr) minmax(210px,.95fr); gap:18px; align-items:center; padding:18px 20px; border:1px solid #d9e4f3; border-radius:18px; background:#fff; box-shadow:0 7px 22px rgba(30,67,120,.05); }
.manager-report-person strong { display:block; color:#172d4d; font-size:14px; } .manager-report-person span { display:block; margin-top:6px; color:#8293aa; font-size:11px; }
.manager-report-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:center; } .manager-report-facts>span { min-width:0; color:#314d70; font-size:12px; } .manager-report-facts small { display:block; margin-bottom:4px; color:#8b9cb2; }
.manager-report-copy p { margin:0 0 7px; line-height:1.9; color:#415a78; overflow-wrap:anywhere; } .manager-report-copy small { display:block; margin-top:7px; }
.manager-report-status { display:grid; gap:10px; justify-items:start; } .manager-report-status>div { display:flex; flex-wrap:wrap; gap:8px; }
.report-reader { max-width:850px; } .report-reader-meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; } .report-reader-text { padding:18px; border:1px solid #dce6f3; border-radius:16px; background:#fff; line-height:2.1; overflow-wrap:anywhere; }
.report-list-hero .page-heading-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.report-list-hero .primary { color: #164d9c; background: #fff; }
.report-workflow-summary .ticket-signal.registered { border-right-color: #5380d7; background: linear-gradient(135deg,#fff,#f3f7ff); }
.report-workflow-summary .ticket-signal.registered::before { content: "≡"; color: #2c5eba; background: #e9f1ff; font-size: 18px; font-weight: 950; }
.daily-report-hero { margin-bottom: 16px; }
.daily-report-summary { margin-bottom: 18px; }
.daily-report-summary .ticket-signal strong { font-size: 20px; white-space: nowrap; }
.daily-report-summary .ticket-signal.registered { border-right-color: #5380d7; background: linear-gradient(135deg,#fff,#f3f7ff); }
.daily-report-summary .ticket-signal.registered::before { content: "≡"; color: #2c5eba; background: #e9f1ff; font-size: 18px; font-weight: 950; }
.daily-report-notification {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 122px;
  min-height: 42px;
  padding: 10px 18px;
  color: #164d9c;
  background: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(3,24,63,.20);
  font-weight: 900;
}
.daily-report-notification .ticket-topbar-fix-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  color: #fff;
  background: #df4d63;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}
.daily-report-notification .ticket-topbar-fix-badge.hidden { display: none; }
.modal-backdrop.daily-notification-backdrop {
  z-index: 80;
  background: rgba(17,31,48,.36);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.daily-notification-dialog {
  width: min(560px, calc(100vw - 26px));
  max-height: min(760px, calc(100dvh - 42px));
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfe0f6;
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(13,38,77,.28);
}
.daily-notification-dialog .modal-body { padding: 0; }
.daily-notification-modal { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(760px, calc(100dvh - 42px)); direction: rtl; }
.daily-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #dbe7f7;
}
.daily-notification-head > div:first-child { display: inline-flex; align-items: center; gap: 10px; color: #162d4f; font-size: 16px; font-weight: 950; }
.daily-notification-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  color: #fff;
  background: #2468d7;
  border-radius: 999px;
  font-size: 11px;
}
.daily-notification-head-actions { display: flex; align-items: center; gap: 8px; }
.daily-notification-head-actions .ghost { width: 34px; min-width: 34px; height: 34px; padding: 0; font-size: 18px; }
.daily-notification-list {
  display: grid;
  gap: 12px;
  max-height: calc(100dvh - 170px);
  padding: 12px 18px 18px;
  overflow: auto;
}
.daily-notification-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 120px;
  padding: 16px;
  background: #f1f6ff;
  border: 1px solid #bfd4f5;
  border-radius: 14px;
}
.daily-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #1d61d6;
  background: #e6f0ff;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 950;
}
.daily-notification-copy strong { display: block; color: #183154; font-size: 14px; font-weight: 950; }
.daily-notification-copy p { margin: 7px 0 8px; color: #314c70; font-size: 12px; line-height: 1.8; }
.daily-notification-copy time { color: #6f85a4; font-size: 11px; font-weight: 850; }
.daily-notification-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.daily-notification-actions button { min-height: 34px; padding-inline: 14px; border-radius: 10px; }
@media (max-width: 600px) {
  .daily-notification-card { grid-template-columns: 40px minmax(0, 1fr); }
  .daily-notification-actions { grid-column: 1 / -1; justify-content: stretch; }
  .daily-notification-actions button { flex: 1; }
}
.daily-report-form-card { padding: 26px 28px; border-color: rgba(83,117,177,.18); box-shadow: 0 18px 44px rgba(27,64,120,.08); }
.daily-report-form-card .form-grid { gap: 16px; }
.daily-report-form-card label { color: #536a8a; font-size: 10px; font-weight: 900; }
.daily-report-form-card input,
.daily-report-form-card select,
.daily-report-form-card textarea { border-color: #d4e1f4; background: #fff; box-shadow: 0 5px 14px rgba(31,72,126,.035); font-weight: 800; }
.daily-report-form-card textarea { min-height: 86px; resize: vertical; }
.daily-report-form-card .work-slots-wrap { padding: 20px; background: linear-gradient(180deg,#fbfdff,#f6f9fd); border-color: #d7e4f5; border-radius: 18px; }
.daily-report-form-card .work-slots-wrap > .section-title { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e4ecf7; }
.daily-report-form-card .work-slots-wrap h4 { margin: 0; color: #193b66; font-size: 14px; }
.daily-report-form-card .work-slot-row { gap: 12px; padding: 16px 0; border-color: #e4ecf7; }
.daily-report-form-card .slot-attachment-field input[type="file"],
.daily-report-form-card .day-note-section input[type="file"] { padding: 10px; background: #f8fbff; border-style: dashed; }
.daily-report-form-card .work-summary { margin-top: 2px; }
.daily-report-form-card .metric-box { min-height: 82px; background: #fff; border-color: #dbe6f5; box-shadow: 0 10px 24px rgba(26,63,112,.05); }
.daily-report-form-card .modal-actions { margin-top: 12px; justify-content: flex-start; }
.daily-report-form-card #report-submit { min-width: 150px; min-height: 48px; border-radius: 13px; box-shadow: 0 12px 26px rgba(32,98,216,.22); }
@media (max-width: 700px) {
  .daily-report-form-card { padding: 18px 16px; }
  .daily-report-form-card .work-slots-wrap { padding: 16px 12px; }
  .daily-report-form-card .work-slot-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .daily-report-form-card .work-slot-row > .slot-report-field,
  .daily-report-form-card .work-slot-row > .slot-attachment-field,
  .daily-report-form-card .work-slot-row > .slot-existing-attachments {
    grid-column: 1 / -1;
    width: 100%;
  }
  .daily-report-form-card .slot-report-field textarea,
  .daily-report-form-card .slot-attachment-field input[type="file"] {
    width: 100%;
    min-width: 0;
  }
  .daily-report-form-card .slot-report-field textarea { min-height: 110px; }
}
.report-list-panel { overflow: hidden; }
.report-toolbar { display: grid; grid-template-columns: minmax(430px, 1fr) 150px 132px; align-items: stretch; gap: 10px; margin-bottom: 15px; padding: 10px; background: #f6f9ff; border-color: #d6e3f6; }
.report-month-control { min-width: 0; }
.report-toolbar .work-report-month-picker { grid-template-columns: 112px 142px minmax(180px, 1fr); gap: 8px; align-items: stretch; }
.report-toolbar .work-report-month-picker label { display: grid; gap: 4px; margin: 0; color: #6d819d; font-size: 9px; font-weight: 900; }
.report-toolbar .work-report-month-picker select,
.report-toolbar .month-current-label { min-height: 42px; border-radius: 12px; }
.report-toolbar .work-report-month-picker select,
.report-toolbar #work-report-user { height: 42px; color: #173a66; background-color: #fff; border-color: #d3e1f5; box-shadow: 0 4px 12px rgba(32,73,128,.04); font-weight: 900; }
.report-toolbar .month-current-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; background: #fff; border-color: #d3e1f5; box-shadow: 0 4px 12px rgba(32,73,128,.04); }
.report-toolbar .month-current-label span { margin: 0; color: #8396af; font-size: 10px; font-weight: 850; }
.report-toolbar .month-current-label strong { margin: 0; color: #153b6e; font-size: 14px; font-weight: 950; }
.report-toolbar > select,
.report-toolbar .ticket-count-box { width: 100%; }
.report-toolbar .ticket-count-box { background: linear-gradient(180deg,#edf4ff,#e6f0ff); border-color: #bdd4f8; }
.report-sleek-list { gap: 10px; }
.manager-report-card.report-sleek-row { grid-template-columns: 36px minmax(155px,.7fr) minmax(280px,1fr) minmax(360px,1.55fr) minmax(300px,.95fr); gap: 14px; align-items: center; min-height: 82px; padding: 13px 16px; border-radius: 15px; }
.report-sleek-row.reviewing { border-right: 4px solid #d99a34; }
.report-sleek-row.approved { border-right: 4px solid #15927d; background: linear-gradient(135deg,#fff,#f2fbf8); }
.report-sleek-row.overdue { border-right: 4px solid #c64c5d; background: linear-gradient(135deg,#fff,#fff5f7); }
.report-sleek-row .manager-report-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: #314d70; font-size: 12px; line-height: 1.8; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.report-sleek-row .manager-report-status { display: grid; gap: 8px; justify-items: stretch; }
.report-sleek-row .report-status-line,
.report-sleek-row .report-action-line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 7px;
}
.report-sleek-row .report-status-line > *,
.report-sleek-row .report-action-line > * {
  width: 100%;
}
.report-sleek-row .wide-report-action {
  grid-column: 1 / -1;
}
.report-sleek-row .manager-report-status button,
.report-sleek-row .manager-report-status .pill,
.report-state-chip { min-height: 31px; margin: 0; padding: 0 10px; border-radius: 10px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.report-state-chip { display: inline-flex; align-items: center; justify-content: center; color: #5f7390; background: #f7faff; border: 1px solid #d8e5f7; }
.report-state-chip.done { color: #087b68; background: #e8f8f3; border-color: #bce8dc; }
.report-state-chip.waiting { color: #9a5c10; background: #fff6df; border-color: #f0d39a; }
.report-state-chip.muted { color: #7890ad; background: #f5f8fd; border-color: #dce7f5; }
.report-sleek-row .manager-report-status .ghost { color: #506b8e; background: #f7faff; border: 1px solid #d8e5f7; }
.report-sleek-row .manager-report-status .primary { box-shadow: 0 7px 16px rgba(37,99,217,.15); }
.report-sleek-row .manager-report-status .secondary { color: #1d5bbd; background: #edf4ff; border-color: #cfe0f8; }
@media (max-width: 1180px) {
  .report-toolbar { grid-template-columns: 1fr 150px 132px; }
  .report-toolbar .work-report-month-picker { grid-template-columns: 96px 128px minmax(150px,1fr); }
  .manager-report-card.report-sleek-row { grid-template-columns: 34px minmax(150px,.8fr) minmax(260px,1.2fr); }
  .report-sleek-row .manager-report-copy,
  .report-sleek-row .manager-report-status { grid-column: 2 / -1; }
}
@media (max-width: 680px) {
  .report-list-hero { align-items: stretch; flex-direction: column; }
  .report-list-hero .page-heading-actions { width: 100%; }
  .report-list-hero .page-heading-actions button { flex: 1; }
  .report-toolbar { grid-template-columns: 1fr; }
  .report-toolbar .work-report-month-picker,
  .manager-report-card.report-sleek-row { grid-template-columns: 1fr; }
  .report-sleek-row .manager-report-copy,
  .report-sleek-row .manager-report-status { grid-column: auto; }
}
.mission-description-clamp { max-width:880px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-top:8px; color:#667c98; line-height:1.95; white-space:pre-wrap; } .mission-description-clamp.expanded { display:block; max-height:42vh; overflow:auto; }
.project-card .project-description { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:0 !important; max-height:5.7em; overflow-wrap:anywhere; }
.mission-result-box label { display:grid; gap:7px; color:#526b89; font-weight:800; } .mission-result-box textarea { width:100%; }
.mission-progress-entry { margin:14px 0; } .mission-progress-entry label { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; align-items:center; } .mission-progress-entry input[type=range] { grid-column:1/-1; width:100%; } .mission-progress-entry output { color:#1762c0; font-weight:900; }
.mission-review-grid { display:grid; grid-template-columns:160px 1fr; gap:12px; } .mission-review-grid>div { padding:14px; border:1px solid #dfe8f4; border-radius:14px; background:#fbfdff; } .mission-review-grid .full { grid-column:1/-1; } .mission-review-grid span { display:block; color:#8496ad; font-size:11px; } .mission-review-grid p { margin:6px 0 0; line-height:2; overflow-wrap:anywhere; }
.mission-complete-box { display:flex; align-items:center; justify-content:space-between; gap:18px; border-color:#b9dccb; background:#f4fbf7; } .mission-complete-box div { display:grid; gap:5px; } .mission-complete-box span { color:#688175; font-size:12px; }
.private-chat-shell { height:min(74vh,760px) !important; min-height:520px !important; }
.private-chat-layout { height:calc(100% - 72px) !important; grid-template-columns:minmax(220px,280px) minmax(0,1fr) !important; }
.private-chat-thread { display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.private-chat-messages { flex:1; min-height:0 !important; overflow-y:auto !important; }
.private-compose { flex:0 0 auto; display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:end; padding:12px; border-top:1px solid #dfe8f3; background:#fff; }
.private-compose-tools { display:flex; gap:6px; } .private-file-picker { display:inline-grid; place-items:center; min-width:42px; height:42px; cursor:pointer; }
.private-chat-files { display:grid; gap:7px; margin-top:12px; } .private-chat-file { display:flex; gap:8px; align-items:center; width:max-content; max-width:80%; padding:8px 11px; border:1px solid #d8e5f5; border-radius:12px; background:#fff; text-decoration:none; color:#245a9d; } .private-chat-file strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* global resilience */
img,video,canvas,svg { max-width:100%; height:auto; } .card,.metric-box,.modal,.table-wrap,.form-grid>* { min-width:0; } textarea,input,select,button { max-width:100%; box-sizing:border-box; } .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .modal-body { overscroll-behavior:contain; }
@media (max-width:1180px){ .manager-report-card{grid-template-columns:1fr 1.4fr;} .manager-report-copy,.manager-report-status{grid-column:auto;} .private-chat-layout{grid-template-columns:220px minmax(0,1fr)!important;} }
@media (max-width:820px){ .report-kpis-two{grid-template-columns:1fr;} .manager-report-card{grid-template-columns:1fr; gap:12px;} .manager-report-facts{grid-template-columns:repeat(3,1fr);} .manager-report-status{justify-items:stretch;} .manager-report-status>div{width:100%;} .manager-report-status button{flex:1;} .mission-review-grid{grid-template-columns:1fr;} .mission-review-grid .full{grid-column:auto;} .mission-complete-box{align-items:stretch;flex-direction:column;} .private-chat-shell{height:calc(100dvh - 150px)!important; min-height:500px!important;} .private-chat-layout{grid-template-columns:1fr!important; grid-template-rows:auto minmax(0,1fr);} .private-chat-list{display:flex; overflow-x:auto; max-height:none!important; border-left:0!important; border-bottom:1px solid #e0e8f3;} .private-chat-item{min-width:190px;} }
@media (max-width:560px){ #page-content{padding-inline:8px!important;} .card-pad{padding:14px!important;} .page-heading{gap:10px;align-items:stretch;flex-direction:column;} .page-heading-actions{width:100%;flex-wrap:wrap;} .page-heading-actions>*{flex:1;} .form-grid{grid-template-columns:1fr!important;} .manager-report-facts{grid-template-columns:1fr 1fr;} .private-compose{grid-template-columns:auto minmax(0,1fr);}.private-compose>.primary{grid-column:1/-1;width:100%;} .modal{width:calc(100vw - 10px)!important; max-height:97dvh!important;} .modal-body{padding:14px!important;} .four-grid,.three-grid,.two-grid,.stats-grid,.executive-kpis{grid-template-columns:1fr!important;} }

/* v26.6 — ticket referral workflow, readable ticket details and live clock */
.top-date-widget { min-width: 270px; justify-content: center; }
#top-date-value { font-variant-numeric: tabular-nums; letter-spacing: .05px; }
.manager-problems-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; direction: rtl; }
.manager-problems-title > span:first-child { font-size: 17px; }
.manager-problems-clock,
.manager-problems-date { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; padding: 3px 9px; color: var(--muted); font-size: 10px; font-weight: 800; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; }
.manager-problems-clock b { color: var(--primary); font-size: 11px; font-variant-numeric: tabular-nums; }
.manager-problems-date { color: var(--text-soft); }

.modal:has(.ticket-detail-modern) { width: min(1160px, calc(100vw - 28px)); }
.modal:has(.ticket-detail-modern) .modal-body { padding: 0; overflow-y: auto; }
.ticket-detail-modern { display: grid; gap: 16px; padding: 24px; }

/* Ticket details are a workspace, not a dialog. */
body.ticket-modal-open { overflow: hidden; }
.modal-backdrop.ticket-fullscreen-backdrop {
  padding: 0;
  background: var(--surface-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal.ticket-fullscreen-modal {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: fade-in .18s ease both;
}
.ticket-fullscreen-modal .modal-head { display: none; }
.ticket-fullscreen-modal .modal-head h3 { font-size: 16px; }
.ticket-modal-title { display: flex; align-items: center; gap: 10px; }
.ticket-modal-title small { padding: 4px 8px; color: var(--primary); background: var(--primary-soft); border: 1px solid rgba(47,103,186,.14); border-radius: 8px; font-size: 9px; }
.ticket-modal-title strong { font-size: 14px; }
.ticket-fullscreen-modal .modal-close {
  width: 38px;
  height: 38px;
  font-size: 20px;
}
.ticket-fullscreen-modal .modal-body {
  padding: 0 !important;
  background: linear-gradient(180deg, #f7faff 0%, #eef4fd 100%);
}
.ticket-fullscreen-modal .ticket-detail-modern {
  width: min(1680px, 100%);
  margin-inline: auto;
  padding: clamp(14px, 1.6vw, 25px) clamp(18px, 2.5vw, 38px) clamp(18px, 2.5vw, 38px);
}
.ticket-workspace-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(300px, .62fr); gap: 18px; align-items: start; }
.ticket-workspace-main,
.ticket-workspace-side { display: grid; gap: 16px; min-width: 0; }
.ticket-workspace-side { position: sticky; top: 0; }
.ticket-workspace-side .ticket-panel,
.ticket-workspace-side .ticket-inline-disclosure,
.ticket-workspace-side .ticket-disclosure-body { min-width: 0; max-width: 100%; }
.ticket-workspace-side .ticket-reassign-form { grid-template-columns: 1fr; width: 100%; }
.ticket-workspace-side .ticket-reassign-form > * { min-width: 0; width: 100%; }
.ticket-workspace-side .ticket-reassign-form textarea { min-height: 76px; }
.ticket-workspace-side .ticket-attachment-form { grid-template-columns: 1fr; }
.ticket-workspace-side .ticket-attachment-form > * { min-width: 0; width: 100%; }
.ticket-workspace-side .ticket-attachment-form .full { grid-column: auto; }
.ticket-workspace-side:empty { display: none; }
.ticket-workspace-grid:not(:has(.ticket-workspace-side > *)) { grid-template-columns: 1fr; }
.ticket-fullscreen-modal .modal-body { direction: ltr; }
.ticket-fullscreen-modal .ticket-detail-modern { direction: rtl; }
.ticket-fullscreen-modal .ticket-comment-list { max-height: none; overflow: visible; }
.ticket-fullscreen-modal .ticket-comment { width: 96%; max-width: none; }
.modal-backdrop.ticket-floating-backdrop {
  align-items: center;
  padding: 24px;
  background: rgba(10, 31, 66, .48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal.ticket-floating-modal {
  width: min(1180px, calc(100vw - 48px));
  max-height: min(88dvh, 920px);
  overflow: hidden;
  background: #f7faff;
  border: 1px solid rgba(116, 150, 205, .24);
  border-radius: 22px;
  box-shadow: 0 26px 80px rgba(8, 35, 84, .28);
}
.ticket-floating-modal .modal-head { display: none; }
.ticket-floating-modal .modal-body {
  max-height: min(88dvh, 920px);
  padding: 0 !important;
  overflow-y: auto;
  background: linear-gradient(180deg, #f9fbff 0%, #eef4fd 100%);
  direction: ltr;
}
.ticket-floating-modal .ticket-detail-modern {
  width: 100%;
  padding: 22px;
  direction: rtl;
}
.ticket-floating-modal .ticket-comment-list {
  max-height: 360px;
  overflow-y: auto;
}
.ticket-floating-modal .ticket-comment {
  width: min(92%, 720px);
}
.ticket-detail-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 96px; padding: 16px 22px 16px 64px; overflow: hidden; color: #fff; background: radial-gradient(circle at 8% 20%, rgba(103,158,255,.34), transparent 25%), linear-gradient(125deg,#0a2858 0%,#164e9f 62%,#2568d8 120%); border: 1px solid rgba(117,164,255,.30); border-radius: 19px; box-shadow: 0 14px 34px rgba(16,58,125,.18); }
.ticket-detail-hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(105deg, transparent 0 54%, rgba(255,255,255,.07) 55%, transparent 72%); }
.ticket-detail-hero::after { position: absolute; left: -45px; bottom: -85px; width: 210px; height: 210px; content: ""; pointer-events: none; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.025), 0 0 0 65px rgba(255,255,255,.018); }
.ticket-detail-hero > div { position: relative; z-index: 1; min-width: 0; }
.ticket-detail-hero h3 { margin: 0; color: #fff; font-size: clamp(20px, 2vw, 27px); line-height: 1.4; text-shadow: 0 2px 12px rgba(4,22,58,.18); overflow-wrap: anywhere; }
.ticket-hero-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ticket-hero-eyebrow span { padding: 4px 9px; color: #dce9ff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; font-size: 9px; font-weight: 800; }
.ticket-hero-copy p { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 5px 0 0; color: #bcd2f5; font-size: 9px; }
.ticket-hero-copy p span { padding: 2px 7px; color: #dce9ff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; font-weight: 800; }
.ticket-hero-close { position: absolute; left: 16px; top: 50%; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 11px; font-size: 20px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.ticket-hero-close:hover { background: rgba(255,255,255,.20); }
.ticket-hero-overview { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)) auto; gap: 10px; align-items: stretch; flex: 0 0 auto; }
.ticket-hero-overview > div { display: grid; align-content: center; gap: 4px; min-width: 125px; padding: 9px 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; backdrop-filter: blur(8px); }
.ticket-hero-overview > div span { color: #bcd2f5; font-size: 8px; font-weight: 800; }
.ticket-hero-overview > div strong { color: #fff; font-size: 11px; }
.ticket-number { color: var(--muted); font-size: 10px; font-weight: 800; }
.ticket-priority-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 31px; padding: 5px 12px; font-size: 11px; font-weight: 900; border: 1px solid transparent; border-radius: 999px; }
.ticket-detail-hero .ticket-hero-overview .ticket-priority-badge { align-self: center; color: #fff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.18); box-shadow: none; }
.ticket-priority-badge.normal { color: #147d72; background: rgba(20,125,114,.10); border-color: rgba(20,125,114,.18); }
.ticket-priority-badge.important { color: #9a681e; background: rgba(217,148,47,.13); border-color: rgba(217,148,47,.22); }
.ticket-priority-badge.critical { color: #bd3549; background: rgba(198,76,93,.12); border-color: rgba(198,76,93,.22); }

.ticket-message-card { position: relative; padding: 22px 24px; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,247,255,.96)); border: 1px solid rgba(47,103,186,.20); border-right: 5px solid var(--primary); border-radius: 19px; box-shadow: 0 14px 34px rgba(28,70,135,.09); }
.ticket-message-card::after { position: absolute; left: -45px; top: -70px; width: 160px; height: 160px; content: ""; pointer-events: none; background: radial-gradient(circle, rgba(72,121,224,.12), transparent 68%); }
.ticket-message-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(47,103,186,.12); }
.ticket-message-heading span { color: var(--primary); font-size: 11px; font-weight: 900; }
.ticket-message-heading strong { color: var(--muted); font-size: 10px; }
.ticket-message-text { position: relative; z-index: 1; min-height: 48px; margin: 18px 0; color: var(--text); font-size: 15px; font-weight: 700; line-height: 2.05; overflow-wrap: anywhere; }
.ticket-message-meta { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; padding-top: 13px; color: var(--muted); border-top: 1px dashed rgba(47,103,186,.17); font-size: 10px; }
.ticket-message-meta span { display: inline-flex; align-items: center; }

.ticket-panel { padding: 19px 20px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); }
.ticket-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.ticket-panel-heading > div { display: grid; gap: 3px; }
.ticket-panel-heading span { color: var(--muted); font-size: 9px; font-weight: 800; }
.ticket-panel-heading h4 { margin: 0; color: var(--text); font-size: 15px; }
.ticket-management-panel .form-grid { margin-top: 4px; }

.ticket-document-panel { padding: 0; background: linear-gradient(180deg, var(--surface-solid), var(--surface-soft)); }
.ticket-disclosure > summary,
.ticket-inline-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; user-select: none; }
.ticket-disclosure > summary::-webkit-details-marker,
.ticket-inline-disclosure > summary::-webkit-details-marker { display: none; }
.ticket-disclosure > summary { min-height: 62px; padding: 15px 20px; color: var(--text); font-size: 14px; font-weight: 900; }
.ticket-disclosure > summary small { color: var(--primary); font-size: 10px; }
.ticket-disclosure > summary::after,
.ticket-inline-disclosure > summary::after {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-inline-start: 8px;
  content: "";
  background-color: var(--primary-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f67ba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(47,103,186,.14);
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(47,103,186,.08);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ticket-disclosure > summary:hover::after,
.ticket-inline-disclosure > summary:hover::after { background-color: rgba(47,103,186,.14); box-shadow: 0 5px 14px rgba(47,103,186,.13); }
.ticket-disclosure[open] > summary::after,
.ticket-inline-disclosure[open] > summary::after { transform: rotate(180deg); }
.ticket-disclosure > .ticket-disclosure-body { padding: 0 20px 20px; border-top: 1px solid var(--line); }
.ticket-attachment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ticket-attachment-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.ticket-attachment-form .full { grid-column: 1 / -1; }
.ticket-attachment-form button { justify-self: start; }

.ticket-reassign-form { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.5fr) auto; gap: 11px; align-items: end; padding: 15px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; }
.ticket-reassign-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.ticket-reassign-form textarea { min-height: 66px; resize: vertical; }
.ticket-reassign-form button { min-height: 43px; white-space: nowrap; }
.ticket-assignee-summary { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.ticket-assignee-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; color: var(--primary); background: var(--primary-soft); border: 1px solid rgba(47,103,186,.16); border-radius: 14px; font-size: 16px; font-weight: 900; }
.ticket-assignee-summary span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.ticket-assignee-summary h4 { margin: 0; color: var(--text); font-size: 15px; }
.ticket-inline-disclosure { border-top: 1px solid var(--line); }
.ticket-inline-disclosure > summary { min-height: 46px; color: var(--text-soft); font-size: 11px; font-weight: 900; }
.ticket-inline-disclosure > summary span { margin-inline-start: auto; padding: 3px 8px; color: var(--muted); font-size: 9px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; }
.ticket-inline-disclosure > .ticket-disclosure-body { padding: 4px 0 12px; }
.ticket-status-control { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.ticket-status-control span { color: var(--muted); font-size: 9px; font-weight: 800; }
.ticket-status-control h4 { margin: 4px 0 0; color: var(--text); font-size: 16px; }
.ticket-status-control p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.ticket-status-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.ticket-status-actions button { min-width: 140px; min-height: 44px; }
.ticket-status-actions button:disabled { opacity: .55; cursor: default; box-shadow: none; }
.ticket-history-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 17px 2px 9px; color: var(--text-soft); }
.ticket-history-heading strong { font-size: 11px; }
.ticket-history-heading span { color: var(--muted); font-size: 9px; }
.ticket-referral-history { display: grid; gap: 8px; }
.ticket-referral-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 13px; }
.ticket-referral-mark { display: grid; place-items: center; width: 28px; height: 28px; color: var(--primary); background: var(--primary-soft); border-radius: 9px; }
.ticket-referral-item strong { color: var(--text); font-size: 11px; }
.ticket-referral-item p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.ticket-referral-item blockquote { margin: 8px 0 0; padding: 8px 10px; color: var(--text-soft); font-size: 10px; line-height: 1.8; background: var(--surface-solid); border: 0; border-right: 3px solid var(--primary); border-radius: 8px; }
.ticket-referral-item time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.ticket-referral-empty { padding: 12px 14px; color: var(--muted); text-align: center; font-size: 10px; background: var(--surface-soft); border: 1px dashed var(--line); border-radius: 11px; }

.ticket-conversation { min-height: 0; }
.ticket-comment-list { display: grid; gap: 9px; max-height: 360px; padding: 2px 2px 4px; overflow-y: auto; }
.ticket-comment { width: min(82%, 720px); padding: 12px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; }
.ticket-comment.mine { margin-right: auto; background: var(--primary-soft); border-color: rgba(47,103,186,.18); border-radius: 14px 14px 14px 4px; }
.ticket-comment header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticket-comment header strong { color: var(--text); font-size: 10px; }
.ticket-comment header time { color: var(--muted); font-size: 9px; }
.ticket-comment p { margin: 8px 0 0; color: var(--text); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.ticket-comment-actions { display: flex; justify-content: flex-start; margin-top: 8px; opacity: .35; transition: opacity .15s ease; }
.ticket-comment:hover .ticket-comment-actions, .ticket-comment:focus-within .ticket-comment-actions { opacity: 1; }
.ticket-reply-quote { border-right: 3px solid #4389ed; background: #eef5ff; border-radius: 9px; padding: 7px 10px; margin-top: 8px; display: grid; gap: 2px; }
.ticket-reply-quote strong { font-size: 11px; color: #2d64ad; }
.ticket-reply-quote span { font-size: 12px; color: #5f7390; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-reply-preview { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #eef5ff; border: 1px solid #d5e5fb; border-radius: 12px; padding: 8px 10px; }
.ticket-reply-preview > div { display: grid; gap: 2px; min-width: 0; }
.ticket-reply-preview strong { font-size: 11px; color: #2b63ac; }
.ticket-reply-preview span { font-size: 12px; color: #5f7390; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-empty-compact { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 0; padding: 12px 14px; color: var(--muted); background: var(--surface-soft); border: 1px dashed var(--line); border-radius: 12px; }
.ticket-empty-compact span { color: var(--primary); font-size: 18px; line-height: 1; }
.ticket-empty-compact strong { font-size: 10px; }
.ticket-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 11px; align-items: end; margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.ticket-comment-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.ticket-comment-form textarea { min-height: 88px; resize: vertical; }
.ticket-comment-form button { min-width: 120px; min-height: 43px; }
.ticket-detail-actions { margin-top: 0; padding-top: 0; }

/* Keep vertical scrollbars on the physical right while content remains RTL. */
:where(.modal-body, .sidebar, .news-scroll-list, .manager-issue-list, .private-chat-list, .private-chat-messages, .notification-list) { direction: ltr; }
:where(.modal-body, .sidebar, .news-scroll-list, .manager-issue-list, .private-chat-list, .private-chat-messages, .notification-list) > * { direction: rtl; }

@media (max-width: 800px) {
  .top-date-widget { min-width: 0; }
  .ticket-detail-modern { padding: 16px; }
  .ticket-detail-hero { align-items: stretch; flex-direction: column; min-height: 0; padding: 20px; }
  .ticket-hero-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ticket-hero-overview > div { min-width: 0; }
  .ticket-hero-overview .ticket-priority-badge { justify-content: center; }
  .ticket-message-card { padding: 18px; }
  .ticket-reassign-form { grid-template-columns: 1fr; }
  .ticket-reassign-form button { width: 100%; }
  .ticket-status-control { align-items: stretch; flex-direction: column; }
  .ticket-status-actions button { flex: 1; }
  .ticket-comment { width: 92%; }
  .ticket-reply-preview { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1050px) {
  .ticket-workspace-grid { grid-template-columns: 1fr; }
  .ticket-workspace-side { position: static; }
}

@media (max-width: 560px) {
  .top-date-widget { padding-inline: 8px; gap: 5px; }
  .top-date-widget .top-date-label { font-size: 9px; }
  .top-date-widget strong { font-size: 9px; }
  .manager-problems-title { align-items: flex-start; }
  .manager-problems-title > span:first-child { width: 100%; }
  .modal-backdrop.ticket-floating-backdrop { padding: 8px; }
  .modal.ticket-floating-modal { width: calc(100vw - 16px) !important; max-height: 94dvh !important; border-radius: 16px; }
  .ticket-floating-modal .modal-body { max-height: 94dvh; }
  .ticket-floating-modal .ticket-detail-modern,
  .ticket-detail-modern { gap: 10px; padding: 10px; }
  .ticket-detail-hero { align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; }
  .ticket-detail-hero h3 { font-size: 18px; }
  .ticket-hero-close { left: 10px; width: 30px; height: 30px; border-radius: 9px; font-size: 18px; }
  .ticket-hero-overview { grid-template-columns: 1fr; }
  .ticket-hero-overview > div { padding: 8px 10px; border-radius: 10px; }
  .ticket-hero-overview .ticket-priority-badge { width: 100%; }
  .ticket-message-heading { align-items: flex-start; flex-direction: column; }
  .ticket-message-card { padding: 14px; border-radius: 14px; }
  .ticket-message-text { margin: 12px 0; font-size: 13px; line-height: 1.85; }
  .ticket-message-meta { align-items: flex-start; flex-direction: column; }
  .ticket-panel { padding: 12px; border-radius: 14px; }
  .ticket-workspace-main,
  .ticket-workspace-side { gap: 10px; }
  .ticket-attachment-form,
  .ticket-comment-form { grid-template-columns: 1fr; }
  .ticket-attachment-form button,
  .ticket-comment-form button { width: 100%; }
  .ticket-status-actions { flex-direction: column; }
  .ticket-status-actions button { width: 100%; }
  .ticket-referral-item { grid-template-columns: 28px minmax(0, 1fr); }
  .ticket-referral-item time { grid-column: 2; white-space: normal; }
  .ticket-comment { width: 100%; }
}

/* v25.9 refinements: readable mission details, progress history, private-chat interactions */
.mission-description-clamp{
  background:#fff !important;
  color:#233a5c !important;
  border:1px solid #dbe6f4;
  border-radius:14px;
  padding:12px 14px;
  max-width:100% !important;
  line-height:2 !important;
  text-align:right;
}
.mission-description-clamp.expanded{max-height:46vh;overflow:auto;}
.mission-progress-timeline{display:grid;gap:12px;}
.mission-progress-timeline article{background:#f8fbff;border:1px solid #dbe6f4;border-radius:14px;padding:14px;display:grid;gap:8px;}
.mission-progress-timeline article>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mission-progress-timeline article p{margin:0;color:#263d5f;line-height:1.9;white-space:normal;overflow-wrap:anywhere;}
.mission-progress-timeline article small{display:block;color:#637894;line-height:1.8;}
.mission-progress-timeline article .manager-note{background:#fff7e8;border-radius:10px;padding:8px 10px;color:#805b16;}
.mission-progress-timeline article time{font-size:11px;color:#8a9bb1;}
.private-chat-message{position:relative;overflow:visible;}
.private-message-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.private-message-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;opacity:.35;transition:opacity .15s ease;}
.private-chat-message:hover .private-message-actions,.private-chat-message:focus-within .private-message-actions{opacity:1;}
.private-reaction-picker{display:flex;gap:4px;flex-wrap:wrap;}
.reaction-chip,.reaction-count{border:1px solid #d6e2f3;background:#fff;border-radius:999px;padding:3px 7px;cursor:pointer;font:inherit;font-size:12px;}
.reaction-count.mine{background:#e9f3ff;border-color:#86b8ff;}
.message-reactions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.chat-reply-quote{border-right:3px solid #4389ed;background:#eef5ff;border-radius:9px;padding:7px 10px;margin-bottom:8px;display:grid;gap:2px;}
.chat-reply-quote strong{font-size:11px;color:#2d64ad;}.chat-reply-quote span{font-size:12px;color:#5f7390;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.private-reply-preview{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eef5ff;border:1px solid #d5e5fb;border-radius:12px;padding:8px 10px;}
.private-reply-preview>div{display:grid;gap:2px;min-width:0;}.private-reply-preview strong{font-size:11px;color:#2b63ac;}.private-reply-preview span{font-size:12px;color:#5f7390;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.private-chat-shell{width:100%;max-width:100%;box-sizing:border-box;}
.chat-private-host{min-width:0;width:100%;}
.private-chat-layout{min-width:0;}
.private-chat-thread,.private-chat-messages{min-width:0;}
.report-preview{display:inline-block;max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
#work-report-month{direction:rtl;}
@media(max-width:820px){
  .private-message-actions{opacity:1;}
  .private-reaction-picker{max-width:100%;overflow-x:auto;flex-wrap:nowrap;}
  .report-preview{max-width:180px;}
}

/* v26.0 — mission reports, monthly reports, chat and responsive refinements */
.mission-description-toggle{
  margin-top:12px;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  border:1px solid rgba(255,255,255,.58);border-radius:11px;background:rgba(255,255,255,.96);
  color:#164f9e;font-weight:800;box-shadow:0 7px 18px rgba(8,47,102,.14);cursor:pointer;
}
.mission-description-toggle:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(8,47,102,.2)}
.project-detail>.section-title:first-child .mission-description-clamp{color:#17385f;background:#fff;border:1px solid rgba(255,255,255,.75);border-radius:13px;padding:13px 15px;max-width:980px;box-shadow:0 4px 14px rgba(13,54,110,.08)}
.mission-card.mission-has-new-report{border-color:#efc35b;box-shadow:0 10px 28px rgba(195,139,25,.14)}
.mission-new-report-badge{margin-inline-end:6px;font-weight:900}
.month-name-hint{display:block;margin-top:7px;color:#577392;font-weight:700}
.report-slot-list{display:grid;gap:10px;margin:10px 0 16px}
.report-slot-card{border:1px solid #dbe6f4;border-radius:13px;background:#f8fbff;padding:12px 14px}
.report-slot-card>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.report-slot-card>div span{color:#31547e}.report-slot-card>div em{margin-inline-start:auto;color:#1762c0;font-style:normal;font-weight:800}
.report-slot-card p{margin:10px 0 0;line-height:1.9;white-space:pre-wrap;color:#263d5f}
.private-message-actions{opacity:0;pointer-events:none;transform:translateY(2px);transition:.16s ease}
.private-chat-message.actions-open .private-message-actions{opacity:1;pointer-events:auto;transform:none}
.private-chat-message:hover .private-message-actions{opacity:0;pointer-events:none}
.private-chat-message.actions-open:hover .private-message-actions{opacity:1;pointer-events:auto}
.private-compose-tools{display:flex;align-items:center;justify-content:center}
.private-file-picker{display:grid;place-items:center;min-width:46px;min-height:48px}
@media(max-width:1100px){
  .chat-hub{height:calc(100dvh - 110px)}
  .private-chat-shell{min-height:0!important;height:100%!important}
  .private-chat-layout{grid-template-columns:210px minmax(0,1fr)!important}
}
@media(max-width:820px){
  .private-chat-shell{height:calc(100dvh - 118px)!important;min-height:0!important}
  .private-chat-layout{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important}
  .private-chat-list{display:flex;overflow-x:auto;gap:8px;padding:8px;max-height:92px!important}
  .private-chat-item{min-width:170px;max-width:220px}
  .private-chat-thread-head{flex-wrap:wrap;gap:8px}
  .private-chat-messages{padding:12px 9px}
  .private-chat-message{width:92%;max-width:92%}
  .private-compose{grid-template-columns:48px minmax(0,1fr)!important;padding:9px!important}
  .private-compose .primary{grid-column:1/-1;width:100%}
}
@media(max-width:560px){
  .project-detail>.section-title:first-child .mission-description-clamp{padding:11px 12px}
  .mission-description-toggle{width:100%;justify-content:center}
  .report-slot-card>div{display:grid;grid-template-columns:1fr auto}.report-slot-card>div em{margin:0}
}

/* v26.1 — role visibility and monthly report selector */
.report-manager-filter .report-filter-row > .full{grid-column:auto;min-width:0}
.report-manager-filter .report-filter-row .mission-date-shell{grid-template-columns:minmax(145px,.85fr) minmax(220px,1.15fr);align-items:center}
.report-manager-filter .report-filter-row .mission-date-head{min-width:0}
.report-manager-filter.card-pad{padding:8px 10px!important}
.report-manager-filter .report-filter-row{grid-template-columns:minmax(430px,1.4fr) minmax(165px,.55fr) minmax(165px,.55fr);align-items:center;gap:10px}
.report-manager-filter .report-filter-row > label{align-self:stretch;display:grid;align-content:end}
.report-manager-filter .report-filter-row > label select{height:42px;min-height:42px}
.report-manager-filter .mission-date-chip{min-width:128px}
.report-manager-filter .work-report-month-picker select{height:42px;min-height:42px}
@media(max-width:760px){
  .report-manager-filter .report-filter-row > .full{grid-column:1/-1}
  .report-manager-filter .report-filter-row .mission-date-shell{grid-template-columns:1fr}
  .report-manager-filter .report-filter-row{grid-template-columns:1fr}
}
.work-report-month-picker{display:grid;grid-template-columns:minmax(140px,180px) minmax(160px,220px) minmax(180px,1fr);gap:12px;align-items:end}
.work-report-month-picker label{margin:0}.month-current-label{min-height:48px;border:1px solid var(--border,#d8e5f5);border-radius:14px;padding:9px 14px;background:rgba(255,255,255,.72);display:flex;flex-direction:column;justify-content:center}.month-current-label span{font-size:12px;color:var(--muted,#6f86a0)}.month-current-label strong{font-size:15px;margin-top:3px}.month-filter-grid>.full{grid-column:1/-1}@media(max-width:760px){.work-report-month-picker{grid-template-columns:1fr 1fr}.month-current-label{grid-column:1/-1}.month-filter-grid{grid-template-columns:1fr}}

.report-manager-filter.card-pad{padding:8px 10px!important}
.report-manager-filter .month-filter-grid.report-filter-row{display:grid!important;grid-template-columns:minmax(430px,1.45fr) minmax(165px,.55fr) minmax(165px,.55fr)!important;gap:10px!important;align-items:center!important}
.report-manager-filter .month-filter-grid.report-filter-row>.full{grid-column:auto!important;min-width:0!important}
.report-manager-filter .report-filter-row .mission-date-shell{grid-template-columns:minmax(135px,.78fr) minmax(230px,1.22fr)!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;border-radius:14px!important;box-shadow:none!important}
.report-manager-filter .report-filter-row .mission-date-head{align-items:center!important;min-width:0!important}
.report-manager-filter .report-filter-row .mission-date-head p{display:none!important}
.report-manager-filter .report-filter-row .mission-date-chip{min-width:120px!important;padding:7px 9px!important}
.report-manager-filter .report-filter-row .work-report-month-picker{grid-template-columns:96px minmax(120px,1fr)!important;gap:8px!important}
.report-manager-filter .report-filter-row .work-report-month-picker select,
.report-manager-filter .report-filter-row>label select{height:40px!important;min-height:40px!important}
@media(max-width:760px){
  .report-manager-filter .month-filter-grid.report-filter-row{grid-template-columns:1fr!important}
  .report-manager-filter .month-filter-grid.report-filter-row>.full{grid-column:1/-1!important}
  .report-manager-filter .report-filter-row .mission-date-shell{grid-template-columns:1fr!important}
}


/* v26.3 — mobile chat/login/logout polish */
@media(max-width:560px){
 #login-view.login-view{position:fixed!important;overflow:auto!important}
 #login-view .login-shell{height:auto!important;min-height:100dvh!important;display:flex!important;flex-direction:column!important}
 #login-view .login-brand-panel{order:0!important;min-height:150px!important;height:auto!important;padding:16px 18px!important;flex:0 0 auto!important}
 #login-view .login-brand-top img{width:42px;height:42px}.login-brand-top strong{font-size:18px}.login-brand-top span{font-size:9px}
 #login-view .login-brand-copy{margin:18px 0 0!important}.login-version-badge{min-height:24px;margin-bottom:8px!important}.login-brand-copy h2{font-size:22px!important;line-height:1.45!important;margin-bottom:0!important}.login-brand-footer{display:none}
 #login-view .login-form-panel{min-height:0!important;height:auto!important;padding:18px 12px 28px!important;place-items:start center!important;flex:1}
 #login-view .login-card{width:100%!important;max-width:430px;padding:22px 18px!important;border-radius:19px!important}.login-logo-wrap{width:58px;height:58px;margin-bottom:8px}.login-logo-wrap .brand-logo-image{width:44px;height:44px}.login-card h1{font-size:27px}.login-form-modern{margin-top:18px;gap:13px}
 .sidebar-bottom{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(12,48,103,.92),#123f94);padding:10px 0 4px;z-index:5}.nav-logout{min-height:48px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;padding:11px 14px!important;font-size:14px!important;font-weight:900!important;color:#fff!important}
 .chat-shell{height:calc(100dvh - 105px)!important;min-height:0!important;grid-template-rows:auto minmax(0,1fr) auto!important;border-radius:12px!important}.chat-head{padding:10px 12px!important;gap:8px!important}.chat-messages{padding:9px!important;gap:7px!important}.chat-message{width:88%!important;max-width:88%!important;padding:8px 10px!important;border-radius:13px!important}.chat-message p{margin-top:4px!important;line-height:1.65!important}.chat-compose{position:sticky;bottom:0;z-index:6;grid-template-columns:44px minmax(0,1fr) 64px!important;padding:8px!important;gap:6px!important;background:#fff}.chat-compose textarea{min-height:44px!important;max-height:100px!important;resize:none!important}.chat-compose button{grid-column:auto!important;width:auto!important;min-height:44px!important;padding:8px!important}.chat-file-button{min-height:44px!important}
 .private-chat-shell{height:calc(100dvh - 105px)!important}.private-chat-list{max-height:66px!important;padding:6px!important}.private-chat-item{min-width:145px!important;padding:8px!important}.private-chat-thread-head{padding:8px 10px!important}.private-chat-messages{padding:8px!important}.private-chat-message{width:88%!important;max-width:88%!important;padding:8px 10px!important}.private-message-actions{margin-top:5px!important}.private-compose{position:sticky;bottom:0;z-index:6;grid-template-columns:44px minmax(0,1fr) 64px!important;padding:7px!important;background:#fff}.private-compose>.primary{grid-column:auto!important;width:auto!important;min-height:44px!important;padding:8px!important}.private-file-picker{min-width:42px!important;min-height:44px!important}
}

/* v26.4 — compact, touch-friendly mobile chat */
@media(max-width:560px){
  body[data-page="group-chat"] #page-content{padding:0 6px 82px!important}
  .chat-shell{height:calc(100dvh - 142px)!important;border-radius:10px!important;overflow:hidden!important}
  .chat-head{min-height:46px!important;padding:7px 9px!important}.chat-head h3{font-size:14px!important;margin:0}.chat-head span{font-size:9px!important}
  .chat-messages{padding:6px!important;gap:5px!important;overscroll-behavior:contain!important;scrollbar-width:thin}
  .chat-message{width:auto!important;max-width:86%!important;min-height:0!important;padding:6px 8px!important;margin:0!important;border-radius:11px!important;box-shadow:none!important}
  .chat-message p{font-size:13px!important;line-height:1.55!important;margin:2px 0 0!important}.chat-message small{font-size:8px!important}
  .chat-compose{position:sticky!important;bottom:0!important;grid-template-columns:40px minmax(0,1fr) 58px!important;align-items:center!important;padding:6px!important;gap:5px!important;border-top:1px solid #dce6f4!important;background:#fff!important}
  .chat-compose textarea{height:42px!important;min-height:42px!important;max-height:84px!important;padding:9px 10px!important;border-radius:11px!important;font-size:13px!important;line-height:1.5!important}
  .chat-file-button{width:40px!important;height:42px!important;min-height:42px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:10px!important}
  .chat-compose .primary{width:58px!important;height:42px!important;min-height:42px!important;padding:0 5px!important;font-size:11px!important;border-radius:10px!important}
  .private-chat-shell{height:calc(100dvh - 142px)!important;border-radius:10px!important;overflow:hidden!important}.private-chat-shell>.section-title{min-height:46px!important;padding:7px 9px!important}.private-chat-shell>.section-title p{display:none!important}
  .private-chat-layout{height:calc(100% - 46px)!important;grid-template-rows:48px minmax(0,1fr)!important}.private-chat-list{height:48px!important;max-height:48px!important;padding:4px!important;gap:4px!important}.private-chat-item{min-width:128px!important;padding:5px 7px!important;border-radius:9px!important}.private-chat-item strong{font-size:11px!important}.private-chat-item span{font-size:8px!important}
  .private-chat-thread{min-height:0!important;overflow:hidden!important}.private-chat-thread-head{min-height:38px!important;padding:5px 8px!important}.private-chat-messages{min-height:0!important;padding:6px!important;gap:5px!important;overscroll-behavior:contain!important}.private-chat-message{width:auto!important;max-width:86%!important;min-height:0!important;padding:6px 8px!important;margin:0!important;border-radius:11px!important}.private-chat-message p{font-size:13px!important;line-height:1.55!important;margin:2px 0!important}.private-message-actions{display:none!important}
  .private-compose{grid-template-columns:40px minmax(0,1fr) 58px!important;align-items:center!important;padding:6px!important;gap:5px!important}.private-compose textarea{height:42px!important;min-height:42px!important;max-height:84px!important;padding:9px 10px!important;font-size:13px!important}.private-file-picker{width:40px!important;height:42px!important;min-height:42px!important;padding:0!important;display:grid!important;place-items:center!important}.private-compose>.primary{width:58px!important;height:42px!important;min-height:42px!important;padding:0 5px!important;font-size:11px!important}
  .mobile-bottom-nav{z-index:50!important}
}

/* v26.8 — mission people filters, full description and managed completion */
.mission-description-clamp{
  display:block!important;
  -webkit-line-clamp:unset!important;
  width:100%!important;
  max-width:none!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  box-sizing:border-box!important;
}
.mission-description-clamp.expanded{max-height:none!important;overflow:visible!important}
.mission-description-toggle{display:none!important}
/* MADAR_DESCRIPTION_FULL_WIDTH */
.project-detail>.section-title:first-child>div:first-child{flex:1 1 auto!important;min-width:0!important}
.project-detail>.section-title:first-child .mission-description-clamp{width:100%!important;max-width:none!important;box-sizing:border-box!important}

.mission-filter-panel{
  display:grid;
  grid-template-columns:minmax(170px,230px) minmax(190px,1fr) minmax(220px,300px) auto;
  gap:14px;
  align-items:end;
  margin-bottom:18px;
  border-color:#d5e3f5;
  background:linear-gradient(145deg,#fff,#f6faff);
}
.mission-group-filter,.mission-person-search,.mission-person-filter{display:grid;gap:7px;margin:0;color:#526b89;font-weight:800}
.mission-group-filter span,.mission-person-search span,.mission-person-filter span,.mission-fixed-group span{font-size:11px}
.mission-group-filter select,.mission-person-search input,.mission-person-filter select{width:100%;min-height:42px}
.mission-fixed-group{display:grid;gap:7px;min-height:70px;color:#526b89}
.mission-fixed-group strong{min-height:42px;display:flex;align-items:center;padding:9px 13px;border:1px solid #d8e5f5;border-radius:11px;background:#f7faff;color:#234c7c}
.mission-filter-clear{min-height:42px;border:1px solid #d8e5f5;background:#fff}
.mission-filter-count{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 13px;border-radius:12px;background:#eaf3ff;color:#1858a8;font-weight:900;white-space:nowrap}
.mission-card-badges{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.mission-card.mission-deadline-ended{border-color:#efb8bf;box-shadow:0 10px 28px rgba(190,57,75,.1)}
.mission-card.mission-deadline-ended::before{content:"";position:absolute;inset-block:16px;inset-inline-start:0;width:4px;border-radius:0 5px 5px 0;background:#d84b5c}
.mission-card{position:relative}
.mission-complete-button{background:linear-gradient(135deg,#1762c0,#0c4fa7)}
.mission-completion-form textarea{min-height:150px;line-height:2;resize:vertical}
.mission-completion-progress{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:1px solid #d8e5f5;border-radius:13px;background:#f7faff;color:#58718f}
.mission-completion-progress strong{color:#1762c0;font-size:20px}
.mission-completion-summary{border-color:#b9dccb;background:linear-gradient(145deg,#f7fcf9,#edf8f2)}
.mission-completion-summary p{margin:12px 0;line-height:2.05;color:#294b3d;white-space:pre-wrap;overflow-wrap:anywhere}
.mission-completion-summary small{display:block;color:#668276}

@media(max-width:980px){
  .mission-filter-panel{grid-template-columns:1fr 1fr}
  .mission-filter-count{justify-self:stretch}
}
@media(max-width:620px){
  .mission-filter-panel{grid-template-columns:1fr;padding:12px!important;gap:10px}
  .mission-filter-count{justify-self:stretch}
  .mission-card-badges{justify-content:flex-start}
}

/* v26.9 — executive mission board redesign */
.mission-card-grid {
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 18px;
}
.project-card.mission-executive-card,
.mission-executive-card {
  position: relative;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(72,111,176,.18);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(20,55,105,.08);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.project-card.mission-executive-card::before,
.mission-executive-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  width: auto;
  height: 5px;
  background: linear-gradient(90deg, #2468d7, #6da0ff);
  opacity: 1;
}
.mission-executive-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,217,.34);
  box-shadow: 0 22px 56px rgba(20,55,105,.14);
}
.mission-executive-card.mission-has-new-report {
  border-color: rgba(217,154,52,.42);
  box-shadow: 0 16px 42px rgba(160,105,18,.12);
}
.mission-executive-card.mission-has-new-report::before {
  background: linear-gradient(90deg, #d99a34, #2468d7);
}
.mission-executive-card.mission-deadline-ended {
  border-color: rgba(198,76,93,.38);
  box-shadow: 0 16px 42px rgba(160,45,62,.11);
}
.mission-executive-card.mission-deadline-ended::before {
  inset: 0 0 auto 0;
  width: auto;
  height: 5px;
  border-radius: 0;
  background: linear-gradient(90deg, #c64c5d, #d99a34);
}
.mission-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 8px;
}
.mission-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 10px;
  color: #195bb8;
  background: #edf4ff;
  border: 1px solid #d4e4ff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
}
.mission-executive-card .mission-card-badges {
  max-width: 62%;
  gap: 6px;
}
.mission-executive-card h3 {
  min-height: 56px;
  margin: 0;
  padding: 0 20px;
  color: #0f2342;
  font-size: 18px !important;
  line-height: 1.75 !important;
  font-weight: 950;
}
.mission-executive-card .project-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 54px !important;
  max-height: 54px;
  margin: 8px 20px 14px !important;
  overflow: hidden;
  color: #6f829f;
  font-size: 12px;
  line-height: 1.9 !important;
}
.mission-executive-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 20px 16px;
}
.mission-executive-meta > div {
  min-width: 0;
  padding: 10px 11px;
  background: #f7faff;
  border: 1px solid #dfe9f8;
  border-radius: 12px;
}
.mission-executive-meta > div.full {
  grid-column: 1 / -1;
}
.mission-executive-meta small {
  display: block;
  margin-bottom: 3px;
  color: #7c8fab;
  font-size: 9px;
  font-weight: 850;
}
.mission-executive-meta strong {
  display: block;
  overflow: hidden;
  color: #24476f;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-progress-block {
  margin: 0 20px 16px;
  padding: 12px;
  background: linear-gradient(135deg, #f6f9ff, #eef5ff);
  border: 1px solid #d8e7fb;
  border-radius: 14px;
}
.mission-progress-block > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #6a7f9c;
  font-size: 11px;
  font-weight: 900;
}
.mission-progress-block strong {
  color: #185fc0;
  font-size: 20px;
  line-height: 1;
}
.mission-progress-block .progress-line {
  height: 8px;
  background: #dde9f8;
  border-radius: 999px;
}
.mission-progress-block .progress-line span {
  background: linear-gradient(90deg, #1f61c7, #4f8df0);
}
.mission-executive-card .mission-card-actions {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) repeat(auto-fit, minmax(72px, .55fr));
  gap: 8px;
  align-items: center;
  padding: 14px 20px 18px;
  margin: auto 0 0;
  background: #f8fbff;
  border-top: 1px solid #e3ecf8;
}
.mission-executive-card .mission-card-actions button {
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}
.mission-executive-card .mission-card-actions .ghost,
.mission-executive-card .mission-card-actions .danger {
  padding-inline: 8px;
}
.mission-executive-card .mission-card-actions .danger {
  color: #c64c5d;
  background: #fff0f3;
  border-color: #f0c9d0;
}
@media (max-width: 1280px) {
  .mission-card-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 760px) {
  .mission-card-grid { grid-template-columns: 1fr; }
  .mission-card-topline { flex-direction: column; padding: 16px 16px 8px; }
  .mission-executive-card .mission-card-badges { justify-content: flex-start; max-width: 100%; }
  .mission-executive-card h3 { min-height: 0; padding-inline: 16px; font-size: 16px !important; }
  .mission-executive-card .project-description { margin-inline: 16px !important; }
  .mission-executive-meta { grid-template-columns: 1fr; margin-inline: 16px; }
  .mission-progress-block { margin-inline: 16px; }
  .mission-executive-card .mission-card-actions {
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px 16px;
  }
  .mission-executive-card .mission-card-actions button { width: 100%; }
}

/* v27 — mission manager list: cleaner than cards, built for scanning */
.mission-board-list {
  display: grid;
  gap: 12px;
}
.mission-executive-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1.45fr) minmax(360px, 1.25fr) minmax(150px, .55fr) minmax(250px, .75fr);
  gap: 18px;
  align-items: center;
  min-height: 132px;
  padding: 18px 20px 18px 18px !important;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(77,121,190,.18);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(23,58,112,.07);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.mission-executive-row::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 0 6px 6px 0;
  background: #2a6bd9;
}
.mission-executive-row:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,217,.34);
  background: #fff;
  box-shadow: 0 18px 42px rgba(23,58,112,.12);
}
.mission-executive-row.mission-has-new-report {
  border-color: rgba(217,154,52,.36);
}
.mission-executive-row.mission-has-new-report::before {
  background: #d99a34;
}
.mission-executive-row.mission-deadline-ended {
  border-color: rgba(198,76,93,.34);
}
.mission-executive-row.mission-deadline-ended::before {
  inset: 14px auto 14px 0;
  width: 4px;
  height: auto;
  background: #c64c5d;
}
.mission-row-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.mission-row-title {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.mission-row-title h3 {
  margin: 0;
  overflow: hidden;
  color: #10233f;
  font-size: 17px !important;
  font-weight: 950;
  line-height: 1.55 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-row-title p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 0 !important;
  max-height: 43px;
  margin: 0;
  overflow: hidden;
  color: #6e829f;
  font-size: 11px;
  line-height: 1.9;
}
.mission-row-badges,
.mission-executive-row .mission-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  max-width: none;
}
.mission-row-badges .pill {
  min-height: 24px;
  padding-inline: 9px;
  font-size: 9px;
}
.mission-row-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.mission-row-meta span {
  min-width: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #dfe8f6;
  border-radius: 12px;
}
.mission-row-meta span.wide {
  grid-column: 1 / -1;
}
.mission-row-meta small {
  display: block;
  margin-bottom: 3px;
  color: #8293ad;
  font-size: 9px;
  font-weight: 850;
}
.mission-row-meta strong {
  display: block;
  overflow: hidden;
  color: #294a70;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-row-progress {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #f0f6ff;
  border: 1px solid #d8e6f8;
  border-radius: 14px;
}
.mission-row-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #647996;
  font-size: 10px;
  font-weight: 900;
}
.mission-row-progress strong {
  color: #155ec2;
  font-size: 22px;
  line-height: 1;
}
.mission-row-progress .progress-line {
  height: 8px;
  background: #dce8f8;
}
.mission-row-progress .progress-line span {
  background: linear-gradient(90deg, #195fc6, #5b92ee);
}
.mission-row-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-self: stretch;
  align-content: center;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.mission-row-actions button {
  width: 100% !important;
  min-width: 0;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 11px !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  white-space: nowrap;
}
.mission-row-actions .primary,
.mission-row-actions .secondary {
  grid-column: 1 / -1;
}
.mission-row-actions .danger {
  color: #c64c5d;
  background: #fff0f3;
  border-color: #f0c9d0;
}
@media (max-width: 1320px) {
  .mission-executive-row {
    grid-template-columns: minmax(280px, 1.2fr) minmax(320px, 1fr) minmax(130px, .45fr);
  }
  .mission-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .mission-row-actions .primary,
  .mission-row-actions .secondary {
    grid-column: auto;
  }
}
@media (max-width: 860px) {
  .mission-executive-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px !important;
  }
  .mission-row-title h3 {
    white-space: normal;
  }
  .mission-row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  .mission-row-meta {
    grid-template-columns: 1fr;
  }
  .mission-row-actions {
    grid-template-columns: 1fr !important;
  }
}

/* v27.1 — compact mission rows */
.mission-board-list {
  gap: 9px;
}
.mission-executive-row {
  grid-template-columns: minmax(360px, 1.45fr) minmax(430px, 1.2fr) minmax(128px, .38fr) minmax(300px, .72fr);
  gap: 14px;
  min-height: 88px;
  padding: 12px 16px 12px 14px !important;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(23,58,112,.06);
}
.mission-executive-row::before,
.mission-executive-row.mission-deadline-ended::before {
  inset: 12px auto 12px 0;
  width: 3px;
}
.mission-row-main {
  gap: 7px;
}
.mission-row-title {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.mission-kind {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 9px;
}
.mission-row-title h3 {
  min-width: 0;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.mission-row-title p {
  grid-column: 1 / -1;
  -webkit-line-clamp: 1;
  max-height: 22px;
  color: #7486a0;
  font-size: 10px;
  line-height: 1.8;
}
.mission-row-badges .pill {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 8.5px;
}
.mission-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mission-row-meta span,
.mission-row-meta span.wide {
  grid-column: auto;
  flex: 1 1 145px;
  min-height: 36px;
  padding: 6px 9px;
  border-radius: 10px;
}
.mission-row-meta small {
  display: inline;
  margin: 0 0 0 5px;
  font-size: 8.5px;
}
.mission-row-meta strong {
  display: inline;
  font-size: 10px;
}
.mission-row-progress {
  gap: 7px;
  padding: 9px 10px;
  border-radius: 12px;
}
.mission-row-progress > div:first-child {
  margin: 0;
  font-size: 9px;
}
.mission-row-progress strong {
  font-size: 18px;
}
.mission-row-progress .progress-line {
  height: 6px;
}
.mission-row-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-self: center;
  gap: 6px !important;
}
.mission-row-actions .primary,
.mission-row-actions .secondary {
  grid-column: auto;
}
.mission-row-actions button {
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  font-size: 9.5px !important;
}
@media (max-width: 1320px) {
  .mission-executive-row {
    grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 1fr) minmax(120px, .38fr);
  }
}
@media (max-width: 920px) {
  .mission-executive-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* v27.2 — final premium mission cards */
.mission-premium-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}
.project-card.mission-premium-card,
.mission-premium-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 238px !important;
  padding: 16px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(248,251,255,.92), rgba(255,255,255,1) 34%),
    #fff !important;
  border: 1px solid rgba(82,122,190,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(23,58,112,.075) !important;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.project-card.mission-premium-card::before,
.mission-premium-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 4px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #1f5fbf, #6da0ff) !important;
}
.mission-premium-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(37,99,217,.34) !important;
  box-shadow: 0 18px 44px rgba(23,58,112,.13) !important;
}
.mission-premium-card.mission-has-new-report {
  border-color: rgba(217,154,52,.36) !important;
}
.mission-premium-card.mission-has-new-report::before {
  background: linear-gradient(90deg, #d99a34, #1f5fbf) !important;
}
.mission-premium-card.mission-deadline-ended {
  border-color: rgba(198,76,93,.34) !important;
}
.mission-premium-card.mission-deadline-ended::before {
  background: linear-gradient(90deg, #c64c5d, #d99a34) !important;
}
.mission-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mission-premium-card .mission-kind {
  min-height: 25px;
  padding: 4px 9px;
  color: #1858b2;
  background: #edf4ff;
  border-color: #d4e3fb;
  border-radius: 999px;
  font-size: 9px;
}
.mission-premium-card .mission-card-badges {
  justify-content: flex-end;
  gap: 5px;
  max-width: 58%;
}
.mission-premium-card .pill {
  min-height: 23px;
  padding: 3px 8px;
  font-size: 8.5px;
  border-radius: 999px;
}
.mission-premium-card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 50px;
  margin: 0 0 7px !important;
  overflow: hidden;
  color: #10233f !important;
  font-size: 16px !important;
  font-weight: 950;
  line-height: 1.55 !important;
}
.mission-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  min-height: 22px;
  margin: 0 0 12px;
  overflow: hidden;
  color: #72849e;
  font-size: 10.5px;
  line-height: 1.9;
}
.mission-premium-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 11px;
}
.mission-premium-meta span {
  min-width: 0;
  padding: 7px 9px;
  background: rgba(247,250,255,.92);
  border: 1px solid #dfe8f6;
  border-radius: 10px;
}
.mission-premium-meta small,
.mission-members-line small {
  display: block;
  margin-bottom: 2px;
  color: #8293ad;
  font-size: 8.5px;
  font-weight: 850;
}
.mission-premium-meta strong,
.mission-members-line span {
  display: block;
  overflow: hidden;
  color: #294a70;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-premium-progress {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 9px 10px;
  background: #f0f6ff;
  border: 1px solid #d8e6f8;
  border-radius: 12px;
}
.mission-premium-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #637896;
  font-size: 9.5px;
  font-weight: 900;
}
.mission-premium-progress strong {
  color: #155ec2;
  font-size: 17px;
  line-height: 1;
}
.mission-premium-progress .progress-line {
  height: 6px;
  background: #dce8f8;
}
.mission-premium-progress .progress-line span {
  background: linear-gradient(90deg, #195fc6, #5b92ee);
}
.mission-members-line {
  min-height: 34px;
  margin-bottom: 11px;
  padding: 7px 9px;
  background: #fff;
  border: 1px dashed #d6e2f1;
  border-radius: 10px;
}
.mission-premium-actions {
  display: grid !important;
  grid-template-columns: 1.2fr .8fr .65fr .65fr !important;
  gap: 7px !important;
  margin-top: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.mission-premium-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 10px !important;
  font-size: 9.5px !important;
  font-weight: 950 !important;
  white-space: nowrap;
}
.mission-premium-actions .danger {
  color: #c64c5d !important;
  background: #fff0f3 !important;
  border-color: #f0c9d0 !important;
}
@media (max-width: 1300px) {
  .mission-premium-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  .mission-premium-grid {
    grid-template-columns: 1fr !important;
  }
  .mission-premium-card {
    min-height: 0 !important;
  }
  .mission-premium-card .mission-card-badges {
    justify-content: flex-start;
    max-width: 100%;
  }
  .mission-card-top {
    flex-direction: column;
  }
  .mission-premium-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v27.3 — final sleek compact mission rows */
.mission-sleek-list {
  display: grid !important;
  gap: 10px !important;
}
.project-card.mission-sleek-row,
.mission-sleek-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 1.5fr) minmax(360px, 1.15fr) 132px 172px !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 94px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #fff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(77,121,190,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(23,58,112,.07) !important;
  cursor: pointer;
}
.mission-sleek-row::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px auto 14px 0 !important;
  width: 4px !important;
  height: auto !important;
  border-radius: 0 6px 6px 0 !important;
  background: #2468d7 !important;
}
.mission-sleek-row.mission-has-new-report::before { background: #d99a34 !important; }
.mission-sleek-row.mission-deadline-ended::before { background: #c64c5d !important; }
.mission-sleek-row:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(37,99,217,.34) !important;
  box-shadow: 0 18px 42px rgba(23,58,112,.12) !important;
}
.mission-sleek-row .mission-row-main {
  display: grid !important;
  gap: 6px !important;
  min-width: 0;
}
.mission-sleek-row .mission-row-title {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}
.mission-sleek-row .mission-kind {
  min-height: 24px !important;
  padding: 3px 9px !important;
  color: #1858b2 !important;
  background: #edf4ff !important;
  border: 1px solid #d4e3fb !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 950 !important;
}
.mission-sleek-row h3 {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #10233f !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.mission-sleek-row .mission-row-main p {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #7386a1 !important;
  font-size: 10.5px !important;
  line-height: 1.7 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.mission-sleek-row .mission-row-badges {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  min-width: 0;
  overflow: hidden;
}
.mission-sleek-row .mission-row-badges .pill {
  flex: 0 0 auto;
  min-height: 21px !important;
  padding: 2px 7px !important;
  font-size: 8px !important;
  border-radius: 999px !important;
}
.mission-sleek-row .mission-row-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-width: 0;
}
.mission-sleek-row .mission-row-meta span {
  min-width: 0 !important;
  min-height: 31px !important;
  padding: 5px 8px !important;
  background: #fff !important;
  border: 1px solid #dfe8f6 !important;
  border-radius: 10px !important;
}
.mission-sleek-row .mission-row-meta small {
  display: inline !important;
  margin: 0 0 0 5px !important;
  color: #8293ad !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}
.mission-sleek-row .mission-row-meta strong {
  display: inline !important;
  color: #294a70 !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
}
.mission-sleek-row .mission-row-progress {
  display: grid !important;
  gap: 7px !important;
  min-width: 0;
  padding: 9px 10px !important;
  background: #f0f6ff !important;
  border: 1px solid #d8e6f8 !important;
  border-radius: 12px !important;
}
.mission-sleek-row .mission-row-progress > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  color: #637896 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}
.mission-sleek-row .mission-row-progress strong {
  color: #155ec2 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.mission-sleek-row .mission-row-progress .progress-line {
  height: 6px !important;
  background: #dce8f8 !important;
  border-radius: 999px !important;
}
.mission-sleek-row .mission-row-progress .progress-line span {
  background: linear-gradient(90deg, #195fc6, #5b92ee) !important;
}
.mission-sleek-row .mission-row-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  align-self: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.mission-action-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  border: 1px solid #cfe0f8 !important;
  color: #1c5fc4 !important;
  background: #edf4ff !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}
.mission-action-btn span {
  transform: translateY(-1px);
}
.mission-action-btn.details,
.mission-action-btn.complete {
  color: #fff !important;
  background: linear-gradient(135deg, #2563d9, #174aa7) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(37,99,217,.18) !important;
}
.mission-action-btn.hot {
  background: linear-gradient(135deg, #d99a34, #c77716) !important;
  box-shadow: 0 8px 18px rgba(199,119,22,.18) !important;
}
.mission-action-btn.edit {
  color: #526b89 !important;
  background: #f7faff !important;
}
.mission-action-btn.remove {
  color: #c64c5d !important;
  background: #fff0f3 !important;
  border-color: #f0c9d0 !important;
}
.mission-action-btn:hover {
  transform: translateY(-1px) !important;
}
@media (max-width: 1280px) {
  .project-card.mission-sleek-row,
  .mission-sleek-row {
    grid-template-columns: minmax(320px, 1.25fr) minmax(320px, 1fr) 120px 160px !important;
  }
}
@media (max-width: 980px) {
  .project-card.mission-sleek-row,
  .mission-sleek-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
  }
  .mission-sleek-row .mission-row-actions {
    justify-content: flex-start !important;
  }
}
@media (max-width: 560px) {
  .mission-sleek-row .mission-row-title,
  .mission-sleek-row .mission-row-meta {
    grid-template-columns: 1fr !important;
  }
  .mission-sleek-row h3,
  .mission-sleek-row .mission-row-main p {
    white-space: normal !important;
  }
}

/* v27.4 — readable compact mission rows */
.mission-list-panel {
  margin-top: 0;
}
.project-card.mission-sleek-row,
.mission-sleek-row {
  grid-template-columns: 36px minmax(330px, 1.28fr) minmax(360px, 1fr) minmax(230px, .72fr) 220px !important;
  gap: 13px !important;
  min-height: 102px !important;
  padding: 13px 16px !important;
}
.mission-row-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #1f5fbf;
  background: #edf4ff;
  border: 1px solid #d2e2fb;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 950;
}
.mission-sleek-row .mission-row-title {
  grid-template-columns: auto minmax(0, 1fr) !important;
}
.mission-sleek-row .mission-row-main p {
  max-width: 100%;
  white-space: nowrap !important;
}
.mission-sleek-row .mission-row-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.mission-sleek-row .mission-row-meta span {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 34px !important;
  padding: 6px 9px !important;
}
.mission-sleek-row .mission-row-meta small {
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap;
}
.mission-sleek-row .mission-row-meta strong {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-sleek-row .mission-row-progress {
  min-width: 220px;
  padding: 10px 12px !important;
}
.mission-sleek-row .mission-row-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 220px;
  justify-content: stretch !important;
}
.mission-action-btn {
  width: auto !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 9.5px !important;
  white-space: nowrap;
}
.mission-action-btn span {
  transform: none;
}
.mission-action-btn.details,
.mission-action-btn.complete {
  color: #fff !important;
}
.mission-action-btn.edit {
  color: #2457b4 !important;
  background: #edf4ff !important;
  border-color: #cfe0f8 !important;
}
.mission-action-btn.remove {
  color: #c64c5d !important;
  background: #fff0f3 !important;
  border-color: #f0c9d0 !important;
}
.mission-sleek-row.mission-ended-high {
  background: linear-gradient(135deg, #ffffff 0%, #f2fbf8 100%) !important;
  border-color: rgba(21,146,125,.30) !important;
}
.mission-sleek-row.mission-ended-high::before {
  background: #15927d !important;
}
.mission-sleek-row.mission-ended-high .mission-row-index,
.mission-sleek-row.mission-ended-high .mission-row-progress {
  background: #ecfaf6 !important;
  border-color: #cbeee5 !important;
}
.mission-sleek-row.mission-ended-mid {
  background: linear-gradient(135deg, #ffffff 0%, #fffbf1 100%) !important;
  border-color: rgba(217,154,52,.34) !important;
}
.mission-sleek-row.mission-ended-mid::before {
  background: #d99a34 !important;
}
.mission-sleek-row.mission-ended-mid .mission-row-index,
.mission-sleek-row.mission-ended-mid .mission-row-progress {
  background: #fff7e7 !important;
  border-color: #f3deb4 !important;
}
.mission-sleek-row.mission-ended-mid .mission-row-progress strong {
  color: #a66d15 !important;
}
.mission-sleek-row.mission-ended-low {
  background: linear-gradient(135deg, #ffffff 0%, #fff5f7 100%) !important;
  border-color: rgba(198,76,93,.34) !important;
}
.mission-sleek-row.mission-ended-low::before {
  background: #c64c5d !important;
}
.mission-sleek-row.mission-ended-low .mission-row-index,
.mission-sleek-row.mission-ended-low .mission-row-progress {
  background: #fff0f3 !important;
  border-color: #f0c9d0 !important;
}
.mission-sleek-row.mission-ended-low .mission-row-progress strong {
  color: #b6384b !important;
}
@media (max-width: 1320px) {
  .project-card.mission-sleek-row,
  .mission-sleek-row {
    grid-template-columns: 34px minmax(280px, 1.1fr) minmax(320px, 1fr) 210px !important;
  }
  .mission-sleek-row .mission-row-progress {
    grid-column: 3;
  }
  .mission-sleek-row .mission-row-actions {
    grid-column: 4;
  }
}
@media (max-width: 980px) {
  .project-card.mission-sleek-row,
  .mission-sleek-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }
  .mission-sleek-row .mission-row-meta,
  .mission-sleek-row .mission-row-progress,
  .mission-sleek-row .mission-row-actions {
    grid-column: 1 / -1;
  }
  .mission-sleek-row .mission-row-actions {
    width: 100%;
  }
}

/* ===== FINAL MOBILE SIDEBAR / LOGOUT FIX ===== */
@media (max-width: 760px) {

  /* خود سایدبار اسکرول شود */
  .sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }

  /* خروج دیگر وسط منو شناور نباشد */
  .sidebar-bottom {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    margin-top: 18px !important;
    padding: 12px 0 8px !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  .nav-logout {
    position: relative !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
  }

  /* نوار اصلی موبایل روی همه چیز بماند */
  .mobile-bottom-nav {
    z-index: 70 !important;
  }
}

/* ===== MOBILE CHAT ABOVE BOTTOM NAV ===== */
@media (max-width: 760px) {

  .chat-shell,
  .private-chat-shell {
    height: calc(
      100dvh - 183px - env(safe-area-inset-bottom)
    ) !important;

    max-height: calc(
      100dvh - 183px - env(safe-area-inset-bottom)
    ) !important;

    min-height: 0 !important;
  }

  .chat-compose,
  .private-compose {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }

  .chat-messages,
  .private-chat-messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* Ticket numbered pagination */
.ticket-page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ticket-page-number {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.ticket-page-number.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 5px 14px rgba(47,103,186,.22);
  cursor: default;
}

.ticket-page-number.active:hover {
  color: #fff;
  background: var(--primary);
  transform: none;
}

.ticket-pagination .ticket-page-ellipsis {
  min-width: 20px;
  min-height: 34px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 13px;
}

@media (max-width: 700px) {
  .ticket-pagination {
    gap: 5px;
  }

  .ticket-page-numbers {
    gap: 4px;
  }

  .ticket-page-number {
    width: 31px;
    min-width: 31px;
  }

  .ticket-page-prev,
  .ticket-page-next {
    min-width: 55px;
  }
}

/* ==================================================
   Ticket page - clean top area
   ================================================== */

@media (min-width: 761px) {
  body.ticket-page-mode .topbar {
    display: none !important;
  }
}

.ticket-list-hero {
  position: relative;
}

.ticket-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.ticket-hero-notification {
  position: relative;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background .16s ease,
    transform .16s ease;
}

.ticket-hero-notification:hover {
  background: rgba(255,255,255,.20);
  transform: translateY(-1px);
}

.ticket-hero-notification .badge {
  position: static;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: #e34e61;
  border-radius: 999px;

  font-size: 9px;
  line-height: 1;
}

.ticket-hero-notification .badge.hidden {
  display: none !important;
}

.report-list-panel .report-toolbar.report-toolbar-compact {
  display: grid !important;
  grid-template-columns: minmax(230px, .8fr) minmax(170px, .65fr) minmax(170px, .65fr) 112px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin-bottom: 12px !important;
  padding: 8px !important;
}

.report-toolbar-compact .report-month-control,
.report-toolbar-compact .mission-date-shell,
.report-toolbar-compact .work-report-month-picker,
.report-toolbar-compact select,
.report-toolbar-compact .ticket-count-box {
  min-height: 40px !important;
}

.report-toolbar-compact .mission-date-shell {
  display: grid !important;
  grid-template-columns: minmax(112px, .48fr) minmax(210px, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.report-toolbar-compact .mission-date-head {
  align-items: center !important;
  gap: 8px !important;
}

.report-toolbar-compact .mission-date-head > div {
  min-width: 0 !important;
}

.report-toolbar-compact .mission-date-head p {
  display: none !important;
}

.report-toolbar-compact .mission-date-head strong {
  font-size: 12px !important;
}

.report-toolbar-compact .mission-date-chip {
  min-width: 112px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

.report-toolbar-compact .mission-date-chip strong,
.report-toolbar-compact .work-report-month-picker select,
.report-toolbar-compact > select,
.report-toolbar-compact .ticket-count-box {
  font-size: 11px !important;
}

.report-toolbar-compact .work-report-month-picker {
  grid-template-columns: 88px minmax(112px, 1fr) !important;
  gap: 7px !important;
}

.report-toolbar-compact .work-report-month-picker select,
.report-toolbar-compact > select {
  height: 40px !important;
  min-height: 40px !important;
}

.report-toolbar-compact .ticket-count-box {
  height: 40px !important;
  min-height: 40px !important;
  padding-inline: 10px !important;
  white-space: nowrap !important;
}

.report-toolbar-compact .report-month-control {
  min-width: 0 !important;
}

.report-toolbar-compact .report-month-inline {
  display: grid !important;
  grid-template-columns: minmax(86px, .72fr) minmax(116px, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

.report-toolbar-compact .report-month-inline select {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .report-list-panel .report-toolbar.report-toolbar-compact {
    grid-template-columns: 1fr 1fr !important;
  }
  .report-toolbar-compact .report-month-control {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .ticket-hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ticket-hero-actions > button {
    width: 100%;
  }
}

.performance-hero {
  position: relative;
  margin-bottom: 18px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 9% 0%, rgba(255,255,255,.24), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(89, 191, 168, .28), transparent 28%),
    linear-gradient(135deg, #071b3c 0%, #0d3c78 46%, #1b6cc5 100%);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 26px;
  box-shadow: 0 30px 72px rgba(7, 27, 60, .28);
}

.performance-hero::after {
  position: absolute;
  inset: auto -90px -120px auto;
  width: 310px;
  height: 310px;
  content: "";
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}

.performance-hero h2 {
  position: relative;
  z-index: 1;
  margin: 5px 0 9px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 1000;
  letter-spacing: -1px;
}

.performance-hero p,
.performance-hero .eyebrow,
.performance-hero-card {
  position: relative;
  z-index: 1;
}

.performance-hero p {
  max-width: 900px;
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 2.1;
}

.performance-hero-card {
  align-self: center;
  padding: 18px;
  display: grid;
  gap: 5px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}

.performance-hero-card span,
.performance-hero-card small {
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 850;
}

.performance-hero-card strong {
  font-size: 32px;
  font-weight: 1000;
}

.performance-filter {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 150px 130px minmax(160px, 1fr) minmax(210px, 1.2fr) auto;
  gap: 12px;
  align-items: end;
}

.performance-filter label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.performance-command-room {
  margin-bottom: 18px;
  display: grid;
  gap: 14px;
}

.performance-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.performance-kpi-strip > div {
  position: relative;
  min-height: 116px;
  padding: 17px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.performance-kpi-strip > div::before {
  position: absolute;
  inset: -70px auto auto -62px;
  width: 140px;
  height: 140px;
  content: "";
  background: radial-gradient(circle, rgba(27, 108, 197, .16), transparent 68%);
  border-radius: 50%;
}

.performance-kpi-strip span,
.performance-kpi-strip strong,
.performance-kpi-strip small {
  position: relative;
  z-index: 1;
  display: block;
}

.performance-kpi-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.performance-kpi-strip strong {
  margin: 9px 0 6px;
  color: var(--text);
  font-size: 29px;
  font-weight: 1000;
}

.performance-kpi-strip small {
  color: var(--muted);
  line-height: 1.8;
}

.performance-decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.performance-decision-card {
  padding: 16px;
  display: grid;
  gap: 6px;
  min-height: 156px;
  background: linear-gradient(180deg, #fff, #f7fafc);
  border: 1px solid var(--line);
  border-top: 4px solid #7d93b5;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.performance-decision-card.success { border-top-color: #17a673; }
.performance-decision-card.info { border-top-color: #2574d8; }
.performance-decision-card.warning { border-top-color: #d59a19; }
.performance-decision-card.danger { border-top-color: #d94e5f; }

.performance-decision-card span {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.performance-decision-card strong {
  font-size: 32px;
  font-weight: 1000;
}

.performance-decision-card small,
.performance-decision-card em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.8;
}

.performance-decision-card em {
  padding: 5px 8px;
  background: var(--surface-soft);
  border-radius: 999px;
}

.performance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.performance-leaderboard,
.performance-scorebook {
  min-width: 0;
}

.performance-rank {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 30px;
  color: #164279;
  background: #eaf2ff;
  border: 1px solid #cfe0fb;
  border-radius: 999px;
  font-weight: 950;
}

.performance-spotlight {
  position: sticky;
  top: 18px;
  padding: 18px;
  display: grid;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,253,.94));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.performance-person-top {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.performance-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0d3c78, #1b6cc5);
  border-radius: 18px;
  font-size: 22px;
  font-weight: 1000;
}

.performance-person-top small,
.performance-person-top p {
  color: var(--muted);
  font-size: 10px;
}

.performance-person-top h3 {
  margin: 3px 0;
  color: var(--text);
}

.performance-person-top p {
  margin: 0;
}

.performance-person-top > strong {
  min-width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #0d3c78;
  background: #edf5ff;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 1000;
}

.performance-verdict {
  padding: 13px;
  display: grid;
  gap: 5px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.performance-verdict b {
  color: var(--text);
}

.performance-verdict span {
  color: var(--muted);
  line-height: 1.9;
  font-size: 11px;
}

.performance-verdict.success { background: rgba(23, 166, 115, .08); border-color: rgba(23, 166, 115, .2); }
.performance-verdict.info { background: rgba(37, 116, 216, .08); border-color: rgba(37, 116, 216, .2); }
.performance-verdict.warning { background: rgba(213, 154, 25, .1); border-color: rgba(213, 154, 25, .24); }
.performance-verdict.danger { background: rgba(217, 78, 95, .1); border-color: rgba(217, 78, 95, .24); }

.performance-radar {
  display: grid;
  gap: 10px;
}

.performance-radar > div {
  display: grid;
  gap: 6px;
}

.performance-radar span,
.performance-radar strong {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 900;
}

.performance-radar > div {
  grid-template-columns: 82px 42px minmax(0, 1fr);
  align-items: center;
}

.performance-radar i {
  height: 9px;
  overflow: hidden;
  background: #e6edf6;
  border-radius: 999px;
}

.performance-radar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0d3c78, #17a673);
  border-radius: inherit;
}

.performance-score-chip {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 30px;
  color: #0d3c78;
  background: #edf5ff;
  border: 1px solid #cfe0fb;
  border-radius: 999px;
  font-weight: 950;
}

.performance-scorebook {
  margin-top: 18px;
}

.performance-method {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.performance-method > div {
  padding: 16px;
  background: #f8fbff;
  border: 1px solid #dce8f7;
  border-radius: 18px;
}

.performance-method strong,
.performance-method span {
  display: block;
}

.performance-method strong {
  margin-bottom: 7px;
  color: #123d6f;
  font-weight: 950;
}

.performance-method span {
  color: var(--muted);
  line-height: 2;
  font-size: 11px;
}

.mission-meter-overdue {
  background: rgba(217, 78, 95, .045);
}

.work-meter-hero {
  position: relative;
  min-height: 132px;
  margin-bottom: 18px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.23), transparent 32%),
    linear-gradient(135deg, #0b3671 0%, #1855ad 56%, #2574d8 100%);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 24px;
  box-shadow: 0 24px 62px rgba(17, 74, 150, .28);
}

.work-meter-hero::before {
  position: absolute;
  inset: -60px auto auto 120px;
  width: 210px;
  height: 210px;
  content: "";
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}

.work-meter-hero h2 {
  position: relative;
  z-index: 1;
  margin: 5px 0 8px;
  font-size: 30px;
  font-weight: 950;
}

.work-meter-hero p,
.work-meter-hero .eyebrow,
.work-meter-hero-actions {
  position: relative;
  z-index: 1;
}

.work-meter-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 2;
}

.work-meter-hero .eyebrow {
  color: rgba(255,255,255,.72);
}

.work-meter-hero-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.work-meter-hero-actions span {
  padding: 9px 13px;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.work-meter-filter {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.work-meter-filter label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.work-meter-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-meter-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.work-meter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px;
  align-items: start;
}

.work-meter-board,
.work-meter-side {
  display: grid;
  gap: 14px;
}

.work-meter-board {
  min-width: 0;
}

.work-meter-person {
  position: relative;
  overflow: hidden;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.9));
  border: 1px solid var(--line);
  border-right: 5px solid #7d93b5;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.work-meter-person::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, rgba(37,116,216,.85), rgba(20,125,114,.75), transparent);
}

.work-meter-person.excellent { border-right-color: #17a673; }
.work-meter-person.good { border-right-color: #2574d8; }
.work-meter-person.watch { border-right-color: #d59a19; }
.work-meter-person.risk { border-right-color: #d94e5f; }

.work-meter-person-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}

.work-meter-rank {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #174070;
  background: #eaf2ff;
  border: 1px solid #cfe0fb;
  border-radius: 14px;
  font-weight: 950;
}

.work-meter-person h3 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 17px;
}

.work-meter-person p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.work-meter-score-ring {
  --score: 0;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  color: var(--text);
  background:
    radial-gradient(circle, var(--surface) 58%, transparent 60%),
    conic-gradient(#1c73d1 calc(var(--score) * 1%), #e5edf7 0);
  border-radius: 50%;
}

.work-meter-score-ring strong,
.work-meter-score-ring span {
  grid-area: 1 / 1;
}

.work-meter-score-ring strong {
  margin-top: -9px;
  font-size: 22px;
  font-weight: 950;
}

.work-meter-score-ring span {
  margin-top: 33px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.work-meter-verdict {
  margin: 14px 0;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: rgba(27, 88, 169, .07);
  border: 1px solid rgba(27, 88, 169, .13);
  border-radius: 14px;
}

.work-meter-verdict span {
  color: #164279;
  font-weight: 950;
}

.work-meter-verdict small {
  color: var(--muted);
  line-height: 1.8;
}

.work-meter-actuals {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.work-meter-actuals span {
  padding: 10px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 10px;
}

.work-meter-actuals strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 13px;
}

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

.work-meter-bar {
  padding: 10px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.work-meter-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.work-meter-track {
  height: 7px;
  margin: 8px 0;
  overflow: hidden;
  background: #e7edf6;
  border-radius: 999px;
}

.work-meter-track i {
  display: block;
  height: 100%;
  background: #2574d8;
  border-radius: inherit;
}

.work-meter-bar.excellent .work-meter-track i { background: #17a673; }
.work-meter-bar.good .work-meter-track i { background: #2574d8; }
.work-meter-bar.watch .work-meter-track i { background: #d59a19; }
.work-meter-bar.risk .work-meter-track i { background: #d94e5f; }

.work-meter-bar small,
.work-meter-empty-line {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.8;
}

.work-meter-list {
  display: grid;
  gap: 9px;
}

.work-meter-list div {
  padding: 11px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.work-meter-list strong,
.work-meter-list span {
  display: block;
}

.work-meter-list span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.work-meter-list.risk div {
  background: rgba(217, 78, 95, .08);
  border-color: rgba(217, 78, 95, .22);
}

.work-meter-bottom {
  margin-top: 18px;
}

.work-meter-definitions {
  display: grid;
  gap: 10px;
}

.work-meter-definition {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.work-meter-definition strong,
.work-meter-definition span {
  display: block;
}

.work-meter-definition span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.work-meter-definition-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-meter-definition-metrics small {
  padding: 5px 8px;
  color: #164279;
  background: #edf5ff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}

.work-meter-note {
  margin-top: 16px;
  line-height: 2;
}

.work-meter-modal-lead {
  margin-bottom: 14px;
  padding: 14px;
  display: grid;
  gap: 5px;
  color: #15345c;
  background: linear-gradient(135deg, #eef6ff, #f6fbff);
  border: 1px solid #d6e7fb;
  border-radius: 14px;
}

.work-meter-modal-lead span {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 1180px) {
  .performance-filter,
  .performance-layout {
    grid-template-columns: 1fr;
  }

  .performance-decision-grid,
  .performance-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-spotlight {
    position: relative;
    top: auto;
  }

  .work-meter-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-meter-layout {
    grid-template-columns: 1fr;
  }

  .work-meter-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .performance-hero,
  .work-meter-hero,
  .work-meter-filter,
  .work-meter-person-head,
  .work-meter-definition {
    grid-template-columns: 1fr;
  }

  .performance-hero,
  .work-meter-hero {
    display: grid;
    padding: 22px;
  }

  .work-meter-hero-actions {
    justify-items: stretch;
  }

  .work-meter-kpis,
  .work-meter-side,
  .work-meter-actuals,
  .work-meter-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .performance-decision-grid,
  .performance-kpi-strip,
  .performance-method,
  .performance-filter,
  .work-meter-kpis,
  .work-meter-side,
  .work-meter-actuals,
  .work-meter-metrics,
  .work-meter-filter {
    grid-template-columns: 1fr;
  }

  .work-meter-verdict {
    display: grid;
  }

  .performance-person-top,
  .performance-radar > div {
    grid-template-columns: 1fr;
  }
}

/* v28 calendar redesign */
.calendar-hero {
  border-radius: 18px;
}

.calendar-hero .page-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.calendar-hero .primary {
  min-width: 104px;
  color: #174b90;
  background: #fff;
}

.calendar-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calendar-pro-panel,
.calendar-agenda-panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(83,117,177,.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0, rgba(37,99,217,.06), transparent 28%),
    linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 16px 42px rgba(27,64,120,.08);
}

.calendar-pro-panel .calendar-header {
  margin-bottom: 14px;
}

.calendar-pro-panel .calendar-header h3 {
  margin: 3px 0 0;
  color: #10213c;
  font-size: 24px;
  font-weight: 950;
}

.calendar-pro-panel .calendar-weekdays {
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-pro-panel .calendar-weekdays div {
  padding: 9px 8px;
  color: #5f7494;
  border: 1px solid rgba(83,117,177,.12);
  border-radius: 10px;
  background: #f4f8ff;
  font-size: 11px;
  font-weight: 900;
}

.calendar-pro-panel .calendar-grid {
  gap: 8px;
}

.calendar-pro-panel .calendar-cell {
  position: relative;
  min-height: 132px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(83,117,177,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(27,64,120,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.calendar-pro-panel .calendar-cell:not(.blank):hover {
  border-color: rgba(37,99,217,.32);
  box-shadow: 0 16px 34px rgba(27,64,120,.11);
  transform: translateY(-2px);
}

.calendar-pro-panel .calendar-cell.blank {
  background: linear-gradient(135deg, #f4f7fb, #eef3f8);
  border-style: dashed;
  box-shadow: none;
}

.calendar-pro-panel .calendar-cell.today {
  border-color: rgba(37,99,217,.56);
  background: linear-gradient(135deg, #fff, #eef5ff);
  box-shadow: 0 0 0 3px rgba(37,99,217,.10), 0 16px 34px rgba(37,99,217,.13);
}

.calendar-pro-panel .calendar-cell.holiday {
  border-color: rgba(198,76,93,.28);
  background: linear-gradient(135deg, #fff, #fff6f7);
}

.calendar-pro-panel .calendar-cell.friday::after,
.calendar-pro-panel .calendar-cell.holiday::after {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 22px;
  padding: 0 8px;
  content: "تعطیل";
  color: #b6384b;
  border: 1px solid rgba(198,76,93,.18);
  border-radius: 999px;
  background: #fde9ed;
  font-size: 9px;
  font-weight: 950;
}

.calendar-pro-panel .calendar-day {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.calendar-pro-panel .calendar-day strong {
  color: #10213c;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.calendar-pro-panel .calendar-day span {
  max-width: 76px;
  overflow: hidden;
  color: #8190a8;
  font-size: 9px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.calendar-pro-panel .calendar-event,
.calendar-pro-panel .calendar-more {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-pro-panel .calendar-event {
  color: #145cc4;
  background: #eaf2ff;
}

.calendar-pro-panel .calendar-event.ticket-event {
  color: #a66d15;
  background: #fff2da;
}

.calendar-pro-panel .calendar-event.incident-event,
.calendar-pro-panel .calendar-event.holiday-event {
  color: #b6384b;
  background: #fde9ed;
}

.calendar-pro-panel .calendar-event.task-event,
.calendar-pro-panel .calendar-event.report-event {
  color: #087b68;
  background: #e2f7f1;
}

.calendar-pro-panel .calendar-more {
  color: #5f7494;
  background: #f0f4f9;
}

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

.calendar-agenda-column {
  min-width: 0;
}

.calendar-agenda-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 54px;
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(83,117,177,.14);
  border-radius: 12px;
  background: #fff;
}

.calendar-agenda-item strong {
  color: #10213c;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.calendar-agenda-item p {
  display: -webkit-box;
  min-width: 0;
  max-height: 42px;
  margin: 0;
  overflow: hidden;
  color: #5f7494;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.calendar-agenda-item.official {
  border-right: 4px solid #c64c5d;
  background: linear-gradient(135deg, #fff, #fff6f7);
}

.calendar-agenda-item.friday {
  border-right: 4px solid #d99a34;
  background: linear-gradient(135deg, #fff, #fffbf3);
}

.calendar-agenda-item.occasion {
  border-right: 4px solid #5380d7;
  background: linear-gradient(135deg, #fff, #f4f8ff);
}

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

  .calendar-pro-panel .calendar-cell {
    min-height: 116px;
  }
}

@media (max-width: 760px) {
  .calendar-summary-grid,
  .calendar-agenda-panel {
    grid-template-columns: 1fr;
  }

  .calendar-pro-panel {
    padding: 12px;
    overflow-x: auto;
  }

  .calendar-pro-panel .calendar-weekdays,
  .calendar-pro-panel .calendar-grid {
    min-width: 760px;
  }

  .calendar-hero .page-heading-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .calendar-hero .primary {
    min-width: 0;
    width: 100%;
  }
}

/* ==================================================
   Ticket page - clean top area
   ================================================== */

@media (min-width: 761px) {
  body.ticket-page-mode .topbar {
    display: none !important;
  }
}

.ticket-list-hero {
  position: relative;
}

.ticket-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.ticket-hero-notification {
  position: relative;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background .16s ease,
    transform .16s ease;
}

.ticket-hero-notification:hover {
  background: rgba(255,255,255,.20);
  transform: translateY(-1px);
}

.ticket-hero-notification .badge {
  position: static;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: #e34e61;
  border-radius: 999px;

  font-size: 9px;
  line-height: 1;
}

.ticket-hero-notification .badge.hidden {
  display: none !important;
}

@media (max-width: 700px) {
  .ticket-hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ticket-hero-actions > button {
    width: 100%;
  }
}
.assistant-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#f7fbff,#eaf3ff);border-color:#cfe0f7}.assistant-hero h2{margin:7px 0 4px}.assistant-summary{display:flex;gap:10px;flex-wrap:wrap}.assistant-summary span{min-width:82px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center;color:var(--muted);font-size:11px}.assistant-summary b{display:block;color:var(--primary);font-size:20px}.assistant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.assistant-item h3{margin:8px 0 0}.assistant-item small{color:var(--muted)}.assistant-item .modal-actions{margin-top:13px}
.assistant-page-heading{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:122px;margin-bottom:18px;padding:26px 34px;color:#fff;overflow:hidden;border-radius:24px;background:linear-gradient(110deg,#173e78 0%,#1e5ab5 58%,#2867c5 100%);box-shadow:0 18px 36px rgba(30,90,181,.18)}
.assistant-page-mode .topbar{display:none}.assistant-page-mode .page-content{padding-top:30px}
.assistant-page-heading::before{content:"";position:absolute;inset:-80px auto auto 8%;width:250px;height:250px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.04),0 0 0 58px rgba(255,255,255,.03);pointer-events:none}
.assistant-page-heading>*{position:relative;z-index:1}.assistant-page-heading h2{margin:5px 0;font-size:28px}.assistant-page-heading p{margin:0;color:rgba(255,255,255,.78);font-size:12px}.assistant-page-heading .eyebrow{color:rgba(255,255,255,.68)}.assistant-heading-actions{display:flex;gap:10px;align-items:center}.assistant-heading-actions button{min-width:120px}.assistant-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.assistant-kpi{position:relative;min-height:86px;padding:18px 22px;overflow:hidden;border:1px solid #d8e1ef;border-right:4px solid #4a7ed3;border-radius:18px;background:linear-gradient(135deg,#fff,#f3f7fd);box-shadow:0 8px 22px rgba(28,55,95,.06)}.assistant-kpi::after{content:"";position:absolute;left:-35px;bottom:-55px;width:130px;height:130px;border-radius:50%;background:rgba(74,126,211,.08)}.assistant-kpi span,.assistant-kpi strong,.assistant-kpi small{position:relative;z-index:1;display:block}.assistant-kpi span{font-size:12px;font-weight:700;color:#526783}.assistant-kpi strong{margin:5px 0;font-size:25px;color:#142f55}.assistant-kpi small{font-size:10px;color:#8293aa}.assistant-kpi.active{border-right-color:#df951f}.assistant-kpi.reminder{border-right-color:#25a58f}.assistant-kpi.done{border-right-color:#43a66c}.assistant-table-card{padding-top:20px}.assistant-table-card .toolbar{align-items:center;margin-bottom:18px}.assistant-table-card .table-wrap{border:1px solid #d9e4f2;border-radius:16px;overflow-x:auto}.assistant-table-card table{width:100%;min-width:900px;table-layout:fixed}.assistant-table-card th,.assistant-table-card td{padding:15px 12px;text-align:center;vertical-align:middle}.assistant-table-card th:first-child,.assistant-table-card td:first-child{text-align:right;width:27%}.assistant-table-card th:nth-child(2){width:12%}.assistant-table-card th:nth-child(3){width:11%}.assistant-table-card th:nth-child(4){width:14%}.assistant-table-card th:nth-child(5),.assistant-table-card th:nth-child(6){width:11%}.assistant-table-card th:last-child{width:25%}.assistant-table-card td:last-child{white-space:nowrap}.assistant-table-card .small-action{margin:2px 3px}.assistant-form .form-grid{gap:16px}.assistant-time-input{direction:ltr;text-align:center;letter-spacing:.08em;font-weight:700}.assistant-time-help{display:none}
.assistant-notification-wrap{position:relative}.assistant-notifications-button{min-width:120px}.assistant-notification-menu{position:absolute;z-index:30;top:calc(100% + 10px);right:0;width:330px;padding:8px;border:1px solid rgba(255,255,255,.35);border-radius:16px;background:#fff;color:var(--text);box-shadow:0 18px 38px rgba(10,39,82,.25);text-align:right}.assistant-notification-actions{display:flex;justify-content:flex-end;padding:4px 4px 8px;border-bottom:1px solid var(--line)}.assistant-notification-item{position:relative;padding:11px 12px;border-bottom:1px solid var(--line);transition:opacity .18s ease,transform .18s ease,max-height .18s ease,padding .18s ease}.assistant-notification-item:last-child{border-bottom:0}.assistant-notification-item.notification-removing{opacity:0;transform:translateY(-6px);max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;pointer-events:none}.assistant-notification-item strong{display:block;font-size:12px}.assistant-notification-item p{margin:5px 0;color:var(--muted);font-size:11px;line-height:1.7}.assistant-notification-item time{display:block;color:var(--muted);font-size:10px}.assistant-notification-buttons{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.assistant-notification-item button{padding:4px 9px}.assistant-notification-empty{padding:20px 12px;color:var(--muted);font-size:12px;text-align:center}
.assistant-schedule{margin-bottom:18px;padding-top:20px}.assistant-schedule-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.assistant-schedule-column{min-width:0;padding:12px;border:1px solid #dce6f3;border-radius:15px;background:#f8fbff}.assistant-schedule-column.overdue{border-top:3px solid #d85c6b}.assistant-schedule-column.today{border-top:3px solid #2d72d2}.assistant-schedule-column.tomorrow{border-top:3px solid #e29b2d}.assistant-schedule-column.future{border-top:3px solid #31a58f}.assistant-schedule-column.unscheduled{border-top:3px solid #8b9ab0}.assistant-schedule-column-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}.assistant-schedule-column-head strong,.assistant-schedule-column-head small{display:block}.assistant-schedule-column-head strong{font-size:13px;color:#18365f}.assistant-schedule-column-head small{margin-top:3px;color:#8293aa;font-size:10px}.assistant-schedule-column-head b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e8f0fb;color:#2867c5;font-size:11px}.assistant-schedule-list{display:grid;gap:7px}.assistant-schedule-item{position:relative;display:block;width:100%;padding:9px 10px;text-align:right;border:1px solid #e0e8f3;border-radius:11px;background:#fff;color:var(--text);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.assistant-schedule-item:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(30,70,120,.1)}.assistant-schedule-item strong,.assistant-schedule-item small,.assistant-schedule-time{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assistant-schedule-item strong{padding-left:10px;font-size:11px}.assistant-schedule-item small{margin-top:4px;color:var(--muted);font-size:9px}.assistant-schedule-time{margin-bottom:4px;color:#3974c4;font-size:9px;direction:rtl}.assistant-schedule-item i{position:absolute;left:8px;top:11px;width:6px;height:6px;border-radius:50%;background:#e39a2a}.assistant-schedule-item i.done{background:#38a477}.assistant-schedule-empty{padding:16px 4px;color:#9aa8ba;font-size:10px;text-align:center}.assistant-more-items{display:block;margin-top:8px;color:#3974c4;font-size:10px;text-align:center}
@media(max-width:1100px){.assistant-schedule-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.assistant-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.assistant-page-heading{min-height:105px;padding:22px 24px}}
@media(max-width:600px){.assistant-page-heading{display:block;padding:22px 20px}.assistant-page-heading h2{font-size:23px}.assistant-heading-actions{margin-top:16px}.assistant-heading-actions button{min-width:0;flex:1}.assistant-kpis{gap:10px}.assistant-kpi{padding:14px;min-height:76px}.assistant-kpi strong{font-size:21px}.assistant-table-card{padding-inline:10px}.assistant-table-card .toolbar{display:grid;grid-template-columns:1fr 1fr}.assistant-table-card .toolbar .search{grid-column:1/-1}.assistant-notification-menu{position:fixed;top:150px;right:12px;left:12px;width:auto}.assistant-schedule-grid{grid-template-columns:1fr 1fr}.assistant-schedule-column{padding:10px}.assistant-schedule-column:first-child{grid-column:1/-1}}
.assistant-schedule-column.future{grid-column:span 2}.assistant-future-calendar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.assistant-future-day{min-width:0;padding:9px;border:1px solid #dce6f3;border-radius:12px;background:#fff}.assistant-future-day-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid #edf2f8}.assistant-future-day-head strong{font-size:11px;color:#214b84}.assistant-future-day-head b{display:grid;place-items:center;min-width:21px;height:21px;border-radius:50%;background:#e8f5f2;color:#268b78;font-size:10px}
.assistant-schedule .calendar-grid{gap:5px}.assistant-schedule .calendar-cell{min-height:62px;padding:6px;border-radius:9px}.assistant-schedule .calendar-day{margin-bottom:4px;font-size:12px}.assistant-schedule .calendar-event{margin-top:2px;padding:2px 4px;font-size:8px;line-height:1.35}
.assistant-page-mode .assistant-page-heading{min-height:88px;margin-bottom:12px;padding:18px 24px;border-radius:18px}.assistant-page-mode .assistant-page-heading h2{font-size:23px}.assistant-page-mode .assistant-kpis{gap:10px;margin-bottom:12px}.assistant-page-mode .assistant-kpi{min-height:66px;padding:12px 16px;border-radius:14px}.assistant-page-mode .assistant-kpi strong{margin:3px 0;font-size:20px}.assistant-page-mode .assistant-schedule{margin-bottom:12px;padding:14px}.assistant-page-mode .assistant-schedule .section-title{margin-bottom:10px}.assistant-page-mode .assistant-table-card{padding:14px}.assistant-page-mode .assistant-table-card th,.assistant-page-mode .assistant-table-card td{padding:10px 8px}
.assistant-page-mode .assistant-page-heading{overflow:visible}.assistant-page-mode .assistant-notification-wrap{z-index:20}.assistant-page-mode .assistant-notification-menu{max-height:360px;overflow-y:auto}

/* v26.8.43 — login mobile layout: brand banner first, form centered */
@media (max-width: 560px) {
  #login-view .login-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
  }

  #login-view .login-brand-panel {
    order: -1 !important;
    min-height: 205px !important;
    padding: 18px 20px 20px !important;
  }

  #login-view .login-brand-copy {
    margin: 12px 0 0 !important;
  }

  #login-view .login-form-panel {
    flex: 1 1 auto !important;
    min-height: calc(100dvh - 205px) !important;
    padding: 22px 12px 30px !important;
    place-items: center !important;
  }

  #login-view .login-card {
    margin: 0 auto !important;
  }
}

/* فرم ثبت تیکت - سه ستون */
.modal:has(#modal-form.ticket-create-form) .modal-head {
  min-height: 72px;
  color: #fff;
  border-bottom: 0;
  background: linear-gradient(120deg, #0a2f68, #1f66c7 68%, #3a86ef);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18);
}

.modal:has(#modal-form.ticket-create-form) .modal-head h3 {
  color: #fff;
  font-weight: 900;
}

.modal:has(#modal-form.ticket-create-form) .modal-close {
  color: #dceaff;
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
}

.modal:has(#modal-form.ticket-create-form) .modal-close:hover {
  color: #fff;
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.54);
}

#modal-form.ticket-create-form .form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#modal-form.ticket-create-form .form-grid > label {
  min-width: 0;
}

#modal-form.ticket-create-form .form-grid .full {
  grid-column: 1 / -1;
}

#modal-form.ticket-create-form select,
#modal-form.ticket-create-form input,
#modal-form.ticket-create-form textarea {
  width: 100%;
  box-sizing: border-box;
}

#modal-form.ticket-create-form .ticket-single-recipient-hidden {
  display: none;
}

#modal-form.ticket-create-form .field-label {
  display: block;
  margin-bottom: 6px;
  color: #526785;
  font-weight: 700;
}

#modal-form.ticket-create-form .ticket-meeting-list {
  display: block;
  max-height: 148px;
  overflow: auto;
  padding: 0;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  background: #fff;
}

#modal-form.ticket-create-form .ticket-meeting-person {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 31px;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid #edf3fb;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
}

#modal-form.ticket-create-form .ticket-meeting-person:last-child {
  border-bottom: 0;
}

#modal-form.ticket-create-form .ticket-meeting-person:hover {
  background: #eef5ff;
}

#modal-form.ticket-create-form .ticket-meeting-person input {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

#modal-form.ticket-create-form .ticket-meeting-person span {
  min-width: 0;
  flex: 1 1 auto;
}

#modal-form.ticket-create-form .ticket-meeting-person strong,
#modal-form.ticket-create-form .ticket-meeting-person small {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

#modal-form.ticket-create-form .ticket-meeting-person strong {
  font-size: 13px;
  font-weight: 800;
}

#modal-form.ticket-create-form .ticket-meeting-person small::before {
  content: " · ";
}

#modal-form.ticket-create-form .ticket-meeting-person small {
  color: #6d7f99;
  font-size: 11px;
}

@media (max-width: 900px) {
  #modal-form.ticket-create-form .form-grid {
    grid-template-columns: 1fr;
  }

  #modal-form.ticket-create-form .form-grid .full {
    grid-column: auto;
  }

}

/* Mobile-first welcome/login gate */
@media (max-width: 560px) {
  #login-view.login-view { position: fixed !important; inset: 0; min-height: 100dvh !important; height: 100dvh !important; display: block !important; padding: 0 !important; background: #fff !important; overflow: hidden !important; }
  #login-view .login-shell { min-height: 100dvh !important; height: 100dvh !important; display: block !important; background: #fff !important; }
  #login-view .mobile-welcome-panel { min-height: 100dvh !important; height: 100dvh !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto auto !important; gap: 18px !important; padding: 46px 24px max(18px, env(safe-area-inset-bottom)) !important; background: #fff !important; }
  #login-view.show-login-form .mobile-welcome-panel { display: none !important; }
  #login-view:not(.show-login-form) .login-form-panel,
  #login-view:not(.show-login-form) .login-brand-panel { display: none !important; }
  #login-view.show-login-form .login-form-panel { min-height: 100dvh !important; height: 100dvh !important; display: grid !important; place-items: center !important; padding: 34px 20px !important; overflow: auto !important; background: #f3f7fd !important; }
  #login-view.show-login-form .login-brand-panel { display: none !important; }
}

/* v26.8.56 — mobile content cards must not reveal welcome/login artwork behind filters */
@media (max-width: 560px) {
  #login-view.hidden {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #app-view.app-view {
    background: #edf4ff !important;
  }

  #app-view .main-area,
  #app-view .page-content {
    background: #edf4ff !important;
  }

  #app-view .card,
  #app-view .manager-filter-card,
  #app-view .report-manager-filter,
  #app-view .daily-report-form-card {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #app-view .card::before {
    display: none !important;
  }
}