/* Shared UI rules: content defines height; viewports constrain overlays. */
:root {
  --ui-accent: #4338ca;
  --ui-accent-hover: #3730a3;
  --ui-accent-soft: #eef2ff;
  --ui-text: #182337;
  --ui-muted: #536176;
  --ui-border: #cbd5e1;
  --ui-surface: #fff;
  --ui-canvas: #f3f5f9;
  --ui-danger: #b91c1c;
  --ui-success: #047857;
  --ui-space: 8px;
}
body { color: var(--ui-text); background: var(--ui-canvas); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
input, select, textarea { min-width: 0; max-width: 100%; caret-color: var(--ui-accent); }
input::placeholder, textarea::placeholder { color: var(--ui-muted); opacity: 1; }
::selection { background: #dfe5ff; color: #1e1b4b; }
:is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 3px;
}
.sidebar :focus-visible { outline-color: #c7d2fe; }
button:disabled { cursor: not-allowed; opacity: .65; }
button[aria-busy="true"] { cursor: progress; }
.btn { min-height: 40px; justify-content: center; line-height: 1.4; white-space: normal; text-align: center; }
.btn-primary, .metrics-sub-btn.active { background: var(--ui-accent); border-color: var(--ui-accent); }
.btn-primary:hover, .metrics-sub-btn.active:hover { background: var(--ui-accent-hover); }
.btn-danger { background: var(--ui-danger); border-color: var(--ui-danger); }
.btn-danger:hover { background: #991b1b; }
.main-content [style*="color:#9ca3af"], .main-content [style*="color:#d1d5db"] { color: var(--ui-muted) !important; }
.metric-card .metric-val { color: var(--ui-accent); }
.metric-card .metric-val[style*="color:#9ca3af"] { color: var(--ui-muted) !important; }
.custom-field-row label { font-size: 13px; }
.ticket-card:hover, .kanban-card:hover { box-shadow: none; }
#_logViewer { width: min(500px,calc(100vw - 20px)) !important; max-height: min(400px,calc(100dvh - 72px)) !important; }
.sidebar-footer .email { color: #bac5d8; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-150%); background: var(--ui-surface); padding: 12px; color: var(--ui-accent); }
.skip-link:focus { transform: none; }
.category-card-grid { overflow-y: auto; }
.btn-outline, .admin-btn-sm { border-color: var(--ui-border); }
.admin-btn-sm { min-width: 36px; min-height: 36px; flex-shrink: 0; }
.admin-btn-danger { color: var(--ui-danger); }
.app-layout { height: 100dvh; }
.sidebar { width: 240px; background: #172238; }
.sidebar-header { padding: 24px 20px; }
.sidebar-nav { padding: 16px 10px; }
.sidebar-nav-item { padding: 12px; border-radius: 8px; margin-bottom: 4px; border-right: none; }
.sidebar-nav-item.active { background: #303c60; color: #e0e7ff; border-right: none; }
.sidebar-footer { padding: 16px; }
.sidebar-logout { min-height: 40px; }
.main-content { margin-left: 240px; padding: 28px; min-height: 0; }
.main-content > div { min-width: 0; }
h2 { font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.3; }
.detail-header, .admin-page-header { gap: 16px; flex-wrap: wrap; }
.detail-header > div { min-width: 0; }
#tabDashboard > div:first-child, #tabControl > div:first-child, #tabMetrics > div:first-child {
  gap: 16px; flex-wrap: wrap;
}
#tabDashboard > div:first-child > div, #tabControl > div:first-child > div, #tabMetrics > div:first-child > div {
  display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%;
}
#spaceFilter, #categoryFilter, #controlSpaceFilter, #metricsSpaceFilter, #metricsOperatorFilter { max-width: 280px; min-height: 40px; }
.admin-space-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.category-card-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr)); }
.admin-space-card, .category-card, .admin-section { box-shadow: none; }
.admin-space-card:hover, .category-card:hover { transform: none; box-shadow: none; background: #fafbff; }
.admin-space-card .name, .admin-row, .admin-row .email, .operator-row, .wf-stage,
.kanban-card .title, .ticket-card .title, .detail-field .value, .message .bubble,
.history-item, .prev-stage-section, #detailTitle, #detailDesc, #approvalStatus,
.badge, .toast, .attachment-item { overflow-wrap: anywhere; min-width: 0; }
.admin-space-card .actions, .admin-section-title, .admin-row, .admin-tabs { flex-wrap: wrap; }
.admin-section-title .hint { color: var(--ui-muted); }
.admin-empty, .message .time, .metric-lbl, .detail-field label { color: var(--ui-muted); }
.admin-inline-form > input, .admin-inline-form > select { flex: 1 1 180px; }
.admin-tabs { gap: 4px; }
.admin-tab { min-height: 44px; padding: 10px 14px; }
.admin-tab.active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.board-page.app-layout { height: auto; min-height: 100dvh; overflow: visible; }
.board-page .main-content { overflow: visible; }
.board-page :is(#tabDashboard,#tabControl) { flex: none !important; overflow: visible; }
.kanban-container { min-width: 0; flex: none; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: auto; scrollbar-color: #536176 #e2e8f0; }
.kanban-container::-webkit-scrollbar { height: 14px; }
.kanban-container::-webkit-scrollbar-thumb { background: #536176; border: 3px solid #e2e8f0; border-radius: 8px; }
.kanban-column { width: 260px; max-width: none; min-width: 260px; min-height: 160px; flex: 1 0 260px; background: #e9edf4; }
.kanban-column:only-child { max-width: 420px; }
.kanban-column-header { gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.kanban-column-count { flex-shrink: 0; }
.kanban-body { overflow: visible; overscroll-behavior: auto; flex: none; }
.board-scroll-tools { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 0; background: var(--ui-canvas); }
.board-scroll-tools[hidden] { display: none; }
.board-scroll-tools button { flex-shrink: 0; min-width: 44px; }
.board-scroll-rail { appearance: none; flex: 1; min-width: 0; width: 100%; height: 44px; padding: 0; background: transparent; cursor: ew-resize; }
.board-scroll-rail::-webkit-slider-runnable-track { height: 8px; background: #cbd5e1; border-radius: 4px; }
.board-scroll-rail::-webkit-slider-thumb { appearance: none; width: 48px; height: 20px; margin-top: -6px; background: #536176; border: 2px solid var(--ui-canvas); border-radius: 6px; }
.board-scroll-rail::-moz-range-track { height: 8px; background: #cbd5e1; border-radius: 4px; }
.board-scroll-rail::-moz-range-thumb { width: 48px; height: 20px; background: #536176; border: 2px solid var(--ui-canvas); border-radius: 6px; }
.kanban-card { padding: 14px; border-radius: 12px; }
.kanban-card .title { font-size: 14px; font-weight: 500; line-height: 1.5; }
.kanban-card .num, .card-number { color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.detail-panel { gap: 20px; min-width: 0; }
.detail-left { width: min(36%,360px); flex-shrink: 1; }
.detail-right, .message .bubble { min-width: 0; }
.detail-reply { padding: 16px 0 0; flex-wrap: wrap; }
.detail-reply textarea { flex-basis: 200px; }
#checklistItems > div { align-items: flex-start !important; gap: 10px !important; padding: 10px 0 !important; }
#checklistItems > div > span { min-width: 0; overflow-wrap: anywhere; }
#checklistItems input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.detail-tab-bar { display: flex; flex-wrap: wrap; }
.detail-tab-btn { min-height: 44px; }
.stage-step { min-width: 96px; }
.stage-step .lbl { max-width: 140px; overflow-wrap: anywhere; padding-inline: 8px; }
.metric-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.metric-card { box-shadow: none; border: 1px solid var(--ui-border); padding: 20px; }
.metric-val { font-size: 1.875rem; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.metrics-submenu { flex-wrap: wrap; }
.metrics-sub-btn { min-height: 44px; }
.admin-table-wrap { max-width: 100%; overflow: auto; box-shadow: none; border: 1px solid var(--ui-border); overscroll-behavior-inline: contain; }
.admin-table { border-radius: 0; }
.admin-table :is(td,th) { overflow-wrap: anywhere; min-width: 88px; }
.admin-table th { color: var(--ui-muted); text-transform: none; font-size: 13px; }
.admin-table td { vertical-align: top; }
.modal-overlay { padding: 20px; background: rgba(15,23,42,.56); overflow: hidden; }
.modal-card, .modal-card.wide {
  width: 480px; max-width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 16px;
  box-shadow: 0 20px 64px rgba(15,23,42,.24); line-height: 1.5;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; }
.modal-close { min-width: 40px; min-height: 40px; flex-shrink: 0; font-size: 22px; }
.modal-header h3, h3.modal-header { margin: 0; font-size: 1.125rem; color: var(--ui-text); }
.modal-body { padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; min-width: 0; scrollbar-gutter: stable; }
.modal-footer { padding: 16px 24px; border-top: 1px solid #e2e8f0; background: #f8fafc; flex-shrink: 0; flex-wrap: wrap; margin: 0 !important; }
.modal-body > div, .modal-body label, .modal-body p { min-width: 0; overflow-wrap: anywhere; }
.modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea {
  font-size: 14px; line-height: 1.5; min-height: 42px; border-color: var(--ui-border); border-radius: 8px;
}
.modal-card :is(input[type="checkbox"],input[type="radio"]) {
  width: 20px; height: 20px; min-width: 20px; padding: 0; margin: 0; flex: 0 0 20px; accent-color: var(--ui-accent);
}
.modal-card label { line-height: 1.5; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ui-muted); margin-bottom: 6px; }
#modalStage .modal-card { width: 680px !important; }
#stageChecklistTemplatesList > div { display: grid !important; grid-template-columns: minmax(0,1fr) auto; gap: 8px !important; padding-block: 12px; border-bottom: 1px solid #e2e8f0; }
#stageChecklistTemplatesList textarea { grid-column: 1 / -1; width: 100%; margin: 0; padding: 10px; resize: vertical; overflow-wrap: anywhere; }
#stageChecklistTemplatesList label { white-space: normal !important; font-size: 13px !important; }
#stageChecklistTemplatesList button { grid-column: 2; }
#stageFieldsList select, #catCustomFieldsList select { width: auto; flex: 1 1 150px; }
#stageFieldsList input[type="text"], #catCustomFieldsList input[type="text"] { min-width: 0; }
#stageFieldsList > div, #catCustomFieldsList > div { background: transparent !important; border-width: 0 0 1px !important; border-radius: 0 !important; padding: 12px 0 !important; }
#catWorkflowStages > div { flex-wrap: wrap; }
.login-page { min-height: 100dvh; padding: 24px; }
.login-card { width: 400px; max-width: 100%; padding: 32px; }
.toast-container { max-width: calc(100vw - 32px); pointer-events: none; }
.toast { max-width: min(420px,100%); }
.toast-success { background: var(--ui-success); }
.toast-error { background: var(--ui-danger); }
.ui-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: -.2em; }
@media (max-width: 1100px) {
  .detail-panel { flex-direction: column; overflow-y: auto; }
  .detail-left { width: 100%; overflow-y: visible; }
  .detail-right { min-height: 320px; flex-shrink: 0; }
}
@media (max-width: 900px) {
  .app-layout { height: auto; min-height: 100dvh; }
  .sidebar { width: 100%; }
  .sidebar-header { padding: 14px 16px; }
  .sidebar-nav { padding: 6px 10px; }
  .sidebar-nav-item { margin: 0; min-height: 44px; }
  .sidebar-footer { padding: 10px 16px; }
  .main-content { margin-left: 0; padding: 20px 16px; }
  .kanban-column, .kanban-column:only-child { width: 100%; max-width: 100%; min-width: 0; flex: none; }
  .kanban-container { overflow: visible; }
  .detail-panel { overflow: visible; }
  #spaceFilter, #categoryFilter, #controlSpaceFilter, #metricsSpaceFilter, #metricsOperatorFilter { max-width: 100%; flex: 1 1 180px; }
  .admin-row > .grow { flex-basis: 180px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea { font-size: 16px !important; }
  .btn, .admin-btn-sm, .field-type-btn, .sidebar-logout { min-height: 44px; }
  .admin-btn-sm { min-width: 44px; }
}
@media (max-width: 480px) {
  .modal-overlay { padding: 8px; }
  .modal-card, .modal-card.wide { max-height: calc(100dvh - 16px); border-radius: 12px; }
  .modal-header { padding: 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; }
  .modal-footer .btn { flex: 1 1 100px; }
  .modal-body > div[style*="display:flex"] { flex-wrap: wrap; }
  .modal-body > div[style*="display:flex"] > div { flex-basis: 160px !important; }
  .detail-header > .btn { margin-left: 0 !important; }
  #adminUsersSpaceFilter { min-width: 0 !important; width: 100%; }
  .detail-header > div { flex-basis: 100% !important; }
  .detail-header > div > div:first-child { flex-wrap: wrap; align-items: flex-start !important; }
  #detailTitle { flex-basis: 100% !important; }
  .login-card { padding: 24px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .metric-card { padding: 14px; }
  .metric-card .metric-val { font-size: 1.375rem; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-card, .category-card, .admin-space-card, .btn, .sidebar-nav-item { transition: none; }
  .toast, .toast-exit { animation: none; }
  .spinner { animation-duration: 1.5s; }
}