.dashboard-heading[hidden], #dashboard-heading[hidden], #stats[hidden], #workspace-grid[hidden], #create-modal[hidden], #create-panel[hidden], #edit-user-modal[hidden], #role-modal[hidden], #detail[hidden], #user-panel[hidden], #roles-card[hidden], #user-admin-grid[hidden] { display: none !important; }
.workspace-grid { display: block; }
.tickets-card { width: 100%; }
.filters { grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(120px, 1fr)); }
.sla-on-track { background: #e3fcef; color: #006644; }
.sla-risk { background: #fff0b3; color: #7f5f01; }
.sla-breached { background: #ffebe6; color: #de350b; }
.detail:not([hidden]) { position: fixed; inset: 4vh 6vw; z-index: 1800; overflow-y: auto; max-height: 92vh; padding: 28px; border: 1px solid #c1c7d0; box-shadow: 0 20px 60px rgba(9, 30, 66, .35); }
.detail-control { display: grid; gap: 5px; color: #42526e; font-size: 10px; font-weight: 800; text-align: left; text-transform: uppercase; }
.detail-control select { min-width: 170px; text-transform: none; }
.ticket-open-button { margin-left: auto; padding: 5px 8px; border: 0; border-radius: 4px; background: #deebff; color: #0747a6; cursor: pointer; font-size: 10px; font-weight: 800; }
.ticket-open-button:hover { background: #b3d4ff; }
.priority-urgent { color: #de350b; font-weight: 800; }
.priority-high { color: #ff5630; font-weight: 700; }
.priority-medium { color: #42526e; }
.priority-low { color: #6b778c; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 24px; margin-top: 22px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.section-heading h3 { margin: 0; color: #172b4d; font-size: 14px; }
.section-heading span { color: #6b778c; font-size: 11px; }
.messages { display: grid; gap: 10px; }
.message { padding: 13px 15px; border: 1px solid #dfe1e6; border-left: 4px solid #6554c0; border-radius: 7px; background: #f7f8fa; color: #172b4d; line-height: 1.5; white-space: pre-wrap; }
.message.public { border-left-color: #00875a; background: #f1fff8; }
.message-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.message-top strong { font-size: 12px; }
.message-visibility { color: #6b778c; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.message small, .activity-list small { display: block; margin-top: 8px; color: #6b778c; font-size: 10px; }
.message-form { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid #dfe1e6; border-radius: 8px; background: #fff; }
.message-form label { display: grid; gap: 8px; color: #42526e; font-size: 12px; font-weight: 700; }
.message-form select { width: 100%; }
.message-form textarea { width: 100%; resize: vertical; }
.activity-panel { padding: 16px; border: 1px solid #dfe1e6; border-radius: 8px; background: #fff; }
.activity-list { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.activity-list li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; }
.activity-list li > div { min-width: 0; }
.activity-list strong { color: #172b4d; font-size: 12px; }
.activity-list p { margin: 3px 0 0; color: #42526e; font-size: 11px; line-height: 1.4; }
.activity-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #0052cc; box-shadow: 0 0 0 3px #deebff; }
.empty-state { color: #6b778c; font-size: 12px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(9, 30, 66, .55); backdrop-filter: blur(2px); }
.modal-card { width: min(760px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; margin: 0; }
.modal-card form { margin-top: 20px; }
.admin-modal { width: min(620px, 100%); }
.roles-card { margin-bottom: 20px; padding: 24px; }
.roles-card p:not(.eyebrow) { margin-top: 6px; }
.roles-list { display: grid; gap: 0; margin-top: 18px; }
.role-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #ebecf0; }
.role-row-main { display: grid; flex: 1; min-width: 0; gap: 4px; }
.role-row-main strong { color: #172b4d; font-size: 13px; }
.role-row-main span { color: #6b778c; font-size: 11px; line-height: 1.4; }
.role-row code { color: #6b778c; font-size: 10px; }
.role-delete { color: #de350b; }
.role-delete:hover { border-color: #ffbdad; background: #ffebe6; color: #bf2600; }
.role-built-in { display: inline-block; margin-left: 6px; padding: 3px 6px; border-radius: 4px; background: #deebff; color: #0747a6; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.checkbox-label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-weight: 600; }
.checkbox-label input { width: auto; margin: 0; }
.permission-fieldset { display: grid; gap: 10px; margin: 0; padding: 13px; border: 1px solid #dfe1e6; border-radius: 6px; }
.permission-fieldset legend { padding: 0 5px; color: #42526e; font-size: 12px; font-weight: 700; }
.user-admin-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(420px, 1.3fr); gap: 20px; }
.user-form-card, .user-list-card { padding: 24px; }
.users-list { display: grid; gap: 0; margin-top: 20px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #ebecf0; }
.user-row:last-child { border-bottom: 0; }.user-row-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #deebff; color: #0747a6; font-size: 13px; font-weight: 800; }.user-row-main { display: grid; flex: 1; min-width: 0; gap: 3px; }.user-row-main strong { overflow: hidden; color: #172b4d; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.user-row-main span { overflow: hidden; color: #6b778c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.user-role { color: #6b778c; font-size: 11px; white-space: nowrap; }.user-status { padding: 5px 9px; border: 0; border-radius: 4px; font-size: 10px; font-weight: 800; }.user-status.active { background: #e3fcef; color: #006644; }.user-status.inactive { background: #ffebe6; color: #de350b; }
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(3, minmax(140px, 1fr)); } }
@media (max-width: 760px) { .user-admin-grid { grid-template-columns: 1fr; }.user-row { flex-wrap: wrap; }.user-role { margin-left: 46px; }.user-status { margin-left: auto; }.role-row { flex-wrap: wrap; }.role-row code { order: 3; margin-left: 0; }.filters { grid-template-columns: 1fr; }.modal-backdrop { align-items: flex-end; padding: 0; }.modal-card { max-height: 92vh; border-radius: 14px 14px 0 0; }.detail:not([hidden]) { inset: 0; max-height: 100vh; padding: 18px; border-radius: 0; }.detail-layout { grid-template-columns: 1fr; }.detail-actions { align-items: stretch; flex-wrap: wrap; }.detail-control { flex: 1 1 160px; } }

/* Motion system */
@keyframes helpdesk-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes helpdesk-modal-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes helpdesk-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes helpdesk-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body:has(#detail:not([hidden]))::before { content: ""; position: fixed; inset: 0; z-index: 1700; background: rgba(9, 30, 66, .42); backdrop-filter: blur(3px); animation: helpdesk-backdrop-in .2s ease-out both; }
.detail:not([hidden]) { animation: helpdesk-modal-in .24s cubic-bezier(.2, .8, .2, 1) both; }
.detail:not([hidden]) .detail-header { animation: helpdesk-rise-in .28s .04s ease-out both; }
.detail:not([hidden]) .attachments { animation: helpdesk-rise-in .28s .08s ease-out both; }
.detail:not([hidden]) .detail-layout { animation: helpdesk-rise-in .28s .12s ease-out both; }
.detail:not([hidden]) .message { animation: helpdesk-rise-in .24s ease-out both; }
.detail:not([hidden]) .message:nth-child(2) { animation-delay: .04s; }
.detail:not([hidden]) .message:nth-child(3) { animation-delay: .08s; }
.detail:not([hidden]) .activity-list li { animation: helpdesk-rise-in .24s ease-out both; }
.detail:not([hidden]) .activity-list li:nth-child(2) { animation-delay: .04s; }
.detail:not([hidden]) .activity-list li:nth-child(3) { animation-delay: .08s; }
.kanban-card { animation: helpdesk-card-in .22s ease-out both; }
.kanban-card:nth-child(2) { animation-delay: .03s; }
.kanban-card:nth-child(3) { animation-delay: .06s; }
.kanban-card:nth-child(4) { animation-delay: .09s; }
.primary-button, .secondary, .ticket-open-button, .attachment-link, .nav-item { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.primary-button:active, .secondary:active, .ticket-open-button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Visual polish: compact Jira-like workspace */
body { background: #f4f5f7; }
.app-layout { background: #f4f5f7; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 14px 18px; }
.sidebar-brand { padding: 0 12px 24px; }
.workspace-name { margin-top: 22px; }
.nav-item { min-height: 42px; }
.topbar { position: sticky; top: 0; z-index: 100; min-height: 72px; box-shadow: 0 1px 0 rgba(9, 30, 66, .04); }
.page-content { padding-top: 30px; }
.page-heading h2 { letter-spacing: -.02em; }
.stats { gap: 16px; }
.stat-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: #b3d4ff; box-shadow: 0 5px 14px rgba(9, 30, 66, .1); }
.tickets-card { border-color: #cbd2dc; box-shadow: 0 4px 14px rgba(9, 30, 66, .07); }
.tickets-card > .card-heading { padding-bottom: 20px; }
.filters { margin: 18px 0 18px; padding: 12px; border: 1px solid #ebecf0; border-radius: 8px; background: #f7f8fa; }
.filters input, .filters select { border-color: #c1c7d0; background: #fff; }
.kanban-board { gap: 14px; }
.board-column { border: 1px solid #ebecf0; background: #f7f8fa; }
.column-heading { padding: 14px 12px 11px; }
.drop-zone { padding: 0 9px 9px; }
.kanban-card { gap: 9px; border-color: #dfe1e6; border-radius: 8px; padding: 13px; box-shadow: 0 2px 4px rgba(9, 30, 66, .1); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kanban-card:hover { transform: translateY(-1px); border-color: #4c9aff; box-shadow: 0 6px 13px rgba(9, 30, 66, .14); }
.ticket-card-footer { min-height: 28px; }
.ticket-open-button { opacity: .9; }
.detail:not([hidden]) { border-radius: 14px; background: #f7f8fa; }
.detail:not([hidden]) .detail-header { padding-bottom: 20px; border-bottom: 1px solid #dfe1e6; }
.detail:not([hidden]) .detail-title .eyebrow { color: #0052cc; }
.activity-panel { box-shadow: 0 2px 8px rgba(9, 30, 66, .06); }
.message-form { box-shadow: 0 2px 8px rgba(9, 30, 66, .05); }
.user-panel .page-heading { margin-bottom: 24px; }
.roles-card, .user-form-card, .user-list-card { border-color: #cbd2dc; box-shadow: 0 3px 10px rgba(9, 30, 66, .06); }
.modal-card { border-color: #c1c7d0; box-shadow: 0 18px 50px rgba(9, 30, 66, .24); }
@media (max-width: 760px) { .sidebar { position: static; height: auto; }.topbar { position: static; }.page-content { padding-top: 22px; }.filters { padding: 10px; }.tickets-card { box-shadow: 0 2px 8px rgba(9, 30, 66, .06); } }