html, body, #__nuxt {
margin: 0;
height: 100%;
font-family: "Segoe UI", Inter, system-ui, sans-serif;
background: #eef1f4;
color: #1c2430;
}
.shell {
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100%;
}
.brand {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #0f2744;
padding: 0 12px 0 4px;
}
.menubar {
border-radius: 0 !important;
border: none !important;
border-bottom: 1px solid #d5dde6 !important;
background: #fff !important;
min-height: 44px;
padding: 0 8px !important;
flex-shrink: 0;
flex-wrap: nowrap;
}
.menubar-link {
display: flex;
align-items: center;
gap: 8px;
padding: 0.5rem 0.75rem;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.menubar-link i {
font-size: 14px;
}
.menubar .p-menubar-end {
display: flex;
align-items: center;
gap: 0.5rem;
}
.menubar-link.is-active {
color: #1c4a7a;
box-shadow: inset 0 -2px 0 #1c4a7a;
}
.ribbon.p-toolbar {
border-radius: 8px !important;
border: 1px solid #e1e6ed !important;
background: #fff !important;
padding: 4px 10px 6px !important;
flex-shrink: 0;
}
.ribbon-cluster {
display: flex;
align-items: stretch;
gap: 8px;
}
.ribbon-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ribbon-group-items {
display: flex;
gap: 2px;
}
.ribbon-group-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6b7785;
}
.ribbon .p-button {
min-width: 58px;
}
.ribbon .p-button-label {
font-size: 11px;
}
.statusbar.p-toolbar {
border-radius: 0 !important;
border: none !important;
border-top: 1px solid #d5dde6 !important;
background: #f7f9fb !important;
padding: 2px 10px !important;
min-height: 32px;
flex-shrink: 0;
}
.desk-body {
flex: 1;
min-height: 0;
}
.desk-split {
height: 100%;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
}
.desk-pane {
overflow: hidden;
}
.desk-main {
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0;
}
.desk-tabstrip {
display: flex;
gap: 4px;
padding: 8px 12px 0;
border-bottom: 1px solid #d5dde6;
background: #f7f9fb;
flex-shrink: 0;
}
.desk-tab {
display: inline-block;
padding: 8px 14px;
font-size: 13px;
color: #6b7785;
}
.desk-tab.is-active {
background: #fff;
color: #0f2744;
font-weight: 600;
border: 1px solid #d5dde6;
border-bottom-color: #fff;
border-radius: 10px 10px 0 0;
margin-bottom: -1px;
}
.desk-page:has(.kanban-page) {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 8px 12px 12px;
}
.desk-side {
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
min-width: 0;
}
.desk-side-title {
padding: 10px 12px;
font-size: 13px;
font-weight: 700;
color: #0f2744;
border-bottom: 1px solid #d5dde6;
flex-shrink: 0;
}
.desk-tree {
flex: 1;
min-height: 0;
overflow: auto;
border: none;
padding: 8px;
}
.tree-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.desk-detail-scroll {
flex: 1;
min-height: 0;
overflow: auto;
padding: 16px;
box-sizing: border-box;
}
.ficha {
min-width: 0;
box-sizing: border-box;
}
.ficha .p-datatable,
.ficha .p-button.w-full {
max-width: 100%;
}
.ficha .p-datatable-table-container {
overflow-x: auto;
}
.ficha-head {
display: flex;
align-items: center;
gap: 10px;
}
.ficha-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.workspace {
overflow: auto;
padding: 12px 16px 20px;
min-height: 0;
display: flex;
flex-direction: column;
}
.toolbar-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #0f2744;
}
.p-toolbar-start,
.p-toolbar-center,
.p-toolbar-end {
gap: 0.5rem;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
gap: 12px;
}
.kpi-value {
font-size: 28px;
font-weight: 700;
color: #0f2744;
line-height: 1.1;
}
.home-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.home-split .list-page { min-height: 0; }
.dash {
display: flex;
flex-direction: column;
gap: 12px;
}
.dash-charts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.dash-span-2 { grid-column: span 2; }
.dash-chart-label {
font-size: 13px;
font-weight: 600;
color: #0f2744;
margin-bottom: 8px;
}
.dash-chart {
height: 240px;
position: relative;
}
.dash-chart--bar { height: 280px; }
.dash-empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.dash-kpi-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.dash-kpi.clickable { cursor: pointer; }
.dash-kpi.clickable:hover {
outline: 1px solid #bcd6ff;
}
.dash-shortcuts {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 12px;
}
.form-grid .span-2 { grid-column: 1 / -1; }
.muted { color: #6b7785; font-size: 12px; }
.w-full { width: 100%; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.ml-2 { margin-left: 8px; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.align-items-center { align-items: center; }
.mb-3 { margin-bottom: 12px; }
.p-error { color: #b00020; font-size: 11px; }
.person-cell {
display: flex;
align-items: center;
gap: 10px;
}
.person-cell .muted { margin-top: 2px; }
.person-cell,
.toolbar-title,
.data-text,
.data-text .p-inputtext {
text-transform: uppercase;
}
.workspace .p-datatable-tbody > tr > td,
.desk-page .p-datatable-tbody > tr > td {
text-transform: uppercase;
}
.workspace .p-datatable-tbody .p-tag,
.workspace .p-datatable-tbody .p-chip,
.workspace .p-datatable-tbody .p-badge,
.workspace .p-datatable-tbody .p-button,
.workspace .p-datatable-tbody .p-button-label,
.workspace .p-datatable-tbody .p-toggleswitch,
.desk-page .p-datatable-tbody .p-tag,
.desk-page .p-datatable-tbody .p-chip,
.desk-page .p-datatable-tbody .p-badge,
.desk-page .p-datatable-tbody .p-button,
.desk-page .p-datatable-tbody .p-button-label,
.desk-page .p-datatable-tbody .p-toggleswitch {
text-transform: none;
}
.workspace .p-inputtext:not(.no-caps),
.desk-page .p-inputtext:not(.no-caps) {
text-transform: uppercase;
}
.badge-pair {
display: flex;
gap: 24px;
flex-wrap: wrap;
align-items: flex-start;
}
.letter-wrap {
overflow: auto;
padding-bottom: 8px;
}
.letter-caption { margin-bottom: 8px; }
.letter-sheet {
width: 900px;
aspect-ratio: 11 / 8.5;
background: #fff;
border: 1px solid #cfd6de;
box-shadow: 0 8px 24px rgba(15, 39, 68, 0.12);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 14px;
box-sizing: border-box;
}
.letter-row {
display: flex;
justify-content: space-between;
gap: 6px;
}
.letter-row > * {
flex: 1;
min-width: 0;
}
@media (max-width: 1100px) {
.kpi-grid, .home-split, .form-grid, .dash-charts {
grid-template-columns: 1fr;
}
.dash-span-2 { grid-column: auto; }
}
.crash-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: linear-gradient(180deg, #eef1f4 0%, #e2e8f0 100%);
}
.crash-card {
width: min(560px, 100%);
box-shadow: 0 12px 40px rgba(15, 39, 68, 0.12);
}
.crash-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.25rem;
font-weight: 700;
color: #0f2744;
}
.crash-title .pi {
color: #a20000;
font-size: 1.4rem;
}
.crash-lead {
margin: 0 0 16px;
color: #4b5563;
line-height: 1.5;
}
.crash-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.crash-reason {
color: #1c2430;
font-size: 0.95rem;
}
.crash-details {
margin-bottom: 16px;
border: 1px solid #d5dde6;
border-radius: 8px;
background: #f8fafc;
padding: 8px 12px;
}
.crash-details summary {
cursor: pointer;
font-weight: 600;
color: #0f2744;
}
.crash-details pre {
margin: 10px 0 0;
white-space: pre-wrap;
word-break: break-word;
font-size: 12px;
color: #334155;
}
.crash-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}