:root { font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif; color: #242424; background: #f3f3f3; font-size: 14px; --accent: #0067c0; --accent-hover: #005a9e; --accent-pressed: #004578; --bg: #f3f3f3; --surface: #ffffff; --surface-subtle: #f9f9f9; --surface-hover: #f5f5f5; --line: #e0e0e0; --line-strong: #d1d1d1; --text: #242424; --muted: #616161; --danger: #c42b1c; --success: #107c10; --warning: #8a5b00; --radius: 8px; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); } button, input, select, textarea { font: inherit; } button { color: inherit; } .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } [hidden] { display: none !important; } .login { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 25% 20%, #e8f3ff 0, transparent 28%), linear-gradient(135deg, #f7f7f7, #ececec); } .login-card { width: min(430px, calc(100vw - 32px)); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(28px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.14); overflow: hidden; } .login-titlebar { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); color: var(--muted); } .app-mark { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #0f7ad8, #005ca8); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; } #loginForm { padding: 36px 38px 40px; } .login-heading { margin-bottom: 28px; } .login-heading h1 { font-size: 28px; font-weight: 600; margin: 0 0 8px; } .login-heading p { color: var(--muted); margin: 0; line-height: 1.5; } .field-login { display: grid; gap: 7px; margin: 16px 0; } .field-login span { font-weight: 600; font-size: 13px; } .field-login input { height: 38px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; padding: 0 10px; outline: none; } .field-login input:focus { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .login-link { display: block; margin: 12px auto 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 6px; } .login-link:hover { text-decoration: underline; } .login-button { width: 100%; height: 38px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; } .login-button:hover { background: var(--accent-hover); } .error { color: var(--danger); margin-top: 12px; min-height: 18px; } #app { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 48px 1fr; min-height: 100vh; } .titlebar { grid-column: 1/-1; background: rgba(250, 250, 250, 0.93); backdrop-filter: blur(22px); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 232px minmax(280px, 600px) 1fr auto; align-items: center; gap: 18px; padding-right: 14px; position: sticky; top: 0; z-index: 20; } .titlebar-brand { height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 600; } .titlebar-brand .app-mark { width: 24px; height: 24px; } .searchbox { position: relative; } .searchbox > .icon { position: absolute; left: 10px; top: 9px; color: #6b6b6b; width: 16px; height: 16px; } .searchbox input { width: 100%; height: 34px; padding: 0 34px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; outline: none; } .searchbox input:focus { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .titlebar-spacer { min-width: 0; } .user-area { display: flex; align-items: center; gap: 10px; } .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #dcecf9; color: #004e8c; font-size: 12px; font-weight: 700; } .user-name { font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout-button { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 5px; display: grid; place-items: center; cursor: pointer; } .logout-button:hover { background: #eaeaea; } .nav-pane { grid-column: 1; grid-row: 2; background: #f7f7f7; border-right: 1px solid var(--line); padding: 8px 8px 12px; position: sticky; top: 48px; height: calc(100vh - 48px); display: flex; flex-direction: column; min-width: 0; } .nav-collapse { height: 36px; width: 40px; border: 0; border-radius: 5px; background: transparent; display: grid; place-items: center; cursor: pointer; margin-bottom: 6px; } .nav-collapse:hover { background: #e9e9e9; } .nav-pane nav { display: flex; flex-direction: column; gap: 2px; overflow: auto; } .nav-item { position: relative; width: 100%; height: 40px; border: 0; border-radius: 5px; background: transparent; display: flex; align-items: center; gap: 12px; padding: 0 11px; cursor: pointer; text-align: left; color: #323232; text-decoration: none; } .nav-item:hover { background: #e9e9e9; } .nav-item.active { background: #e5e5e5; } .nav-item.active:before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); } .nav-item .icon { width: 19px; height: 19px; } .nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-group { display: flex; flex-direction: column; } .nav-submenu { display: none; padding: 2px 0 5px 42px; } .nav-group.open .nav-submenu { display: flex; flex-direction: column; } .nav-subitem { position: relative; min-height: 32px; border: 0; border-radius: 5px; background: transparent; color: #4b5563; text-align: left; padding: 5px 9px; cursor: pointer; display: block; text-decoration: none; } .nav-subitem:hover { background: #e9e9e9; } .nav-subitem.active { background: #e5e5e5; color: #111827; font-weight: 600; } .nav-subitem.active:before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); } main { grid-column: 2; grid-row: 2; min-width: 0; } .content { padding: 24px 28px 48px; width: 100%; min-height: calc(100vh - 48px); } .compact #app { grid-template-columns: 60px minmax(0, 1fr); } .compact .titlebar { grid-template-columns: 60px minmax(280px, 600px) 1fr auto; } .compact .titlebar-brand span:last-child, .compact .nav-item span { display: none; } .compact .titlebar-brand { padding: 0 17px; } .compact .nav-item { justify-content: center; padding: 0; } .compact .nav-collapse { margin-inline: auto; } .compact .nav-pane { overflow: visible; z-index: 20; } .compact .nav-pane nav { overflow: visible; } .compact .nav-submenu { display: none; } .compact .nav-group.open .nav-submenu { display: none; } .compact .nav-item span { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); display: none; width: max-content; max-width: 220px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--text); box-shadow: 0 6px 18px rgb(0 0 0 / 15%); font-size: 13px; font-weight: 400; white-space: nowrap; pointer-events: none; z-index: 30; } .compact .nav-item:hover span, .compact .nav-item:focus-visible span { display: block; } .compact .nav-group { position: relative; } .compact .nav-group:hover .nav-submenu, .compact .nav-group:focus-within .nav-submenu { position: absolute; left: calc(100% - 10px); top: 34px; z-index: 29; display: flex; flex-direction: column; min-width: 190px; padding: 6px 6px 6px 16px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 16%); } .compact .nav-group:hover .nav-submenu .nav-subitem, .compact .nav-group:focus-within .nav-submenu .nav-subitem { display: block; width: 100%; padding-inline: 9px; } .editor-layout.interior-sheet-layout { display: block; grid-template-columns: minmax(0, 1fr); } .interior-sheet-main { grid-template-columns: repeat(4, minmax(0, 1fr)); } .interior-sheet-main > .form-section:first-child, .interior-sheet-main > .form-section:last-child { grid-column: 1 / -1; } .field-prefix { display: flex; align-items: center; gap: 4px; } .field-prefix > span { flex: none; color: var(--muted); } .field-prefix > input { min-width: 0; } @media (max-width: 1100px) { .interior-sheet-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .interior-sheet-main { grid-template-columns: minmax(0, 1fr); } .interior-sheet-main > .form-section:first-child, .interior-sheet-main > .form-section:last-child { grid-column: auto; } } .page-heading { margin: 0 0 18px; } .breadcrumbs { display: flex; align-items: center; gap: 4px; height: 24px; color: var(--muted); font-size: 12px; margin-bottom: 5px; } .breadcrumbs a { border: 0; background: transparent; padding: 2px 3px; color: #4d4d4d; cursor: pointer; text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs .icon { width: 12px; height: 12px; color: #8a8a8a; } .page-heading h1 { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.2px; margin: 0; } .page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 14px; } .commandbar { height: auto; min-height: 46px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: 2px; padding: 5px; margin-bottom: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.025); position: relative; z-index: 2; } .content .commandbar { position: sticky; top: 58px; z-index: 8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .command { height: 34px; border: 0; border-radius: 5px; background: transparent; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; } .command:hover { background: #ededed; } .command:active { background: #e2e2e2; } .command.primary { background: var(--accent); color: #fff; } .command.primary:hover { background: var(--accent-hover); } .command.danger { color: var(--danger); } .command.danger:hover { background: #fde7e4; } .command:disabled { opacity: 0.45; cursor: not-allowed; } .command-separator { height: 24px; width: 1px; background: var(--line); margin: 0 4px; } .list-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; margin: 0 2px 8px; } .list-caption .icon { width: 13px; height: 13px; vertical-align: -2px; } .summary-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; } .summary-band > div { padding: 18px 20px; border-right: 1px solid var(--line); } .summary-band > div:last-child { border-right: 0; } .summary-band span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; } .summary-band strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } .workspace-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr); gap: 18px; } .workspace-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .workspace-panel > header { padding: 18px 20px 13px; border-bottom: 1px solid var(--line); } .workspace-panel h2 { font-size: 16px; font-weight: 600; margin: 0; } .workspace-panel header p { color: var(--muted); margin: 4px 0 0; font-size: 12px; } .quick-actions { padding: 8px; } .quick-action { width: 100%; min-height: 62px; border: 0; border-radius: 6px; background: transparent; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 8px 10px; cursor: pointer; } .quick-action:hover { background: var(--surface-hover); } .quick-icon, .activity-icon { width: 34px; height: 34px; border-radius: 6px; background: #eef6fc; display: grid; place-items: center; color: #005a9e; } .quick-action strong { display: block; font-weight: 600; margin-bottom: 2px; } .quick-action small { display: block; color: var(--muted); } kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--line-strong); border-bottom-color: #b7b7b7; background: #fafafa; border-radius: 4px; padding: 2px 6px; box-shadow: 0 1px 0 #ddd; color: #555; } .activity-list { padding: 8px; } .activity-line { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; } .activity-line strong { font-size: 16px; font-weight: 600; } .activity-icon { width: 30px; height: 30px; } .datagrid-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-width: 100%; } .datagrid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 820px; } .datagrid th { height: 38px; padding: 0 12px; text-align: left; font-weight: 600; font-size: 12px; color: #555; background: #fafafa; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; } .datagrid td { height: 43px; padding: 7px 12px; border-bottom: 1px solid #ececec; vertical-align: middle; } .datagrid tbody tr:last-child td { border-bottom: 0; } .datagrid tbody tr[data-edit-route] { cursor: default; outline: none; } .datagrid tbody tr[data-edit-route]:hover { background: #f6f6f6; } .datagrid tbody tr[data-edit-route]:focus { box-shadow: inset 0 0 0 2px var(--accent); } .action-col, .row-actions { width: 54px; text-align: right !important; } .icon-button { width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; display: inline-grid; place-items: center; cursor: pointer; } .icon-button:hover { background: #e8e8e8; } .icon-button .icon { width: 16px; height: 16px; } .text-button { height: 30px; border: 0; border-radius: 4px; background: transparent; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .text-button:hover { background: #eef6fc; } .text-button .icon { width: 15px; height: 15px; } .datagrid th > button { display: flex; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left; } .datagrid th > button:hover { color: var(--accent); } .datagrid th > button[data-direction='asc'] span:after { content: '▲'; } .datagrid th > button[data-direction='desc'] span:after { content: '▼'; } .datagrid th > button span { font-size: 8px; } .datagrid-tools, .datagrid-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; background: #fafafa; border: 1px solid var(--line); } .datagrid-tools { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; } .datagrid-tools + .datagrid-wrap { border-radius: 0; } .datagrid-tools label { position: relative; } .datagrid-tools label .icon { position: absolute; left: 8px; top: 8px; width: 15px; height: 15px; color: var(--muted); } .datagrid-tools input { width: min(330px, 55vw); height: 32px; padding: 0 10px 0 30px; border: 1px solid var(--line-strong); border-radius: 5px; } .datagrid-tools span, .datagrid-footer { font-size: 11px; color: var(--muted); } .datagrid-footer { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); } .datagrid-footer label, .datagrid-footer > div { display: flex; align-items: center; gap: 8px; } .datagrid-footer select { height: 28px; border: 1px solid var(--line); border-radius: 4px; background: #fff; } .datagrid-footer .icon-button:disabled { opacity: 0.35; cursor: default; } .datagrid-tools > div { display: flex; align-items: center; gap: 12px; } .grid-columns { position: relative; } .grid-columns summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; } .grid-columns summary::-webkit-details-marker { display: none; } .grid-columns > div { position: absolute; right: 0; top: 25px; z-index: 8; display: grid; gap: 7px; min-width: 220px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 8px 24px #0002; } .grid-columns label { display: flex; align-items: center; gap: 7px; color: var(--text); white-space: nowrap; } .grid-columns button { margin-top: 5px; border: 0; background: transparent; color: var(--accent); text-align: left; cursor: pointer; } .datagrid th { position: sticky; } .grid-resizer { position: absolute; right: -3px; top: 0; z-index: 3; width: 7px; height: 100%; cursor: col-resize; } .grid-resizer:hover, .grid-resizer:active { background: var(--accent); } .badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: #ededed; color: #444; font-size: 12px; white-space: nowrap; } .badge.accent { background: #e6f2fb; color: #005a9e; } .badge.success { background: #dff6dd; color: #0b6a0b; } .badge.warning { background: #fff4ce; color: #735100; } .badge.danger { background: #fde7e4; color: #a4262c; } .empty-state { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-height: 260px; display: grid; place-items: center; align-content: center; text-align: center; padding: 30px; color: var(--muted); } .empty-state > .icon { width: 42px; height: 42px; margin-bottom: 12px; color: #888; } .empty-state h3 { color: var(--text); font-size: 16px; margin: 0 0 5px; } .empty-state p { margin: 0; } .editor-page { display: block; } .editor-page > .commandbar { position: sticky; top: 58px; z-index: 8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .editor-commandbar { position: sticky; top: 58px; z-index: 8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .editor-layout { display: grid; grid-template-columns: minmax(0, 930px) minmax(230px, 300px); gap: 18px; align-items: start; } .editor-main { display: grid; gap: 14px; } .form-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .form-section > header { padding: 16px 18px 11px; border-bottom: 1px solid #ededed; background: #fcfcfc; } .form-section h2 { font-size: 15px; font-weight: 600; margin: 0; } .form-section header p { font-size: 12px; color: var(--muted); margin: 4px 0 0; } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding: 18px; } .field { display: grid; align-content: start; gap: 6px; min-width: 0; } .field.wide { grid-column: 1/-1; } .field > span { font-size: 13px; font-weight: 600; } .field > small { font-size: 11px; color: var(--muted); } .field input:not([type='checkbox']), .field select, .field textarea { width: 100%; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; color: var(--text); padding: 7px 9px; outline: none; } .field textarea { resize: vertical; min-height: 92px; line-height: 1.45; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .field-warning { border-color: var(--danger); box-shadow: 0 0 0 2px rgb(196 43 28 / 16%); } .field input.field-warning:not([type='checkbox']), .field select.field-warning, .field textarea.field-warning { border-color: var(--danger); box-shadow: 0 0 0 2px rgb(196 43 28 / 16%); } .file-upload-status { display: block; margin-top: 4px; color: var(--muted); } .file-upload-status[data-tone='error'] { color: var(--danger); } .file-upload-preview { display: block; max-width: 180px; max-height: 120px; margin-top: 8px; border-radius: 4px; object-fit: contain; } .interior-article-image { display: block; width: min(180px, 100%); max-height: 120px; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 4px; object-fit: contain; background: var(--surface-subtle); } .article-type-file-current { display: block; margin-top: 5px; color: var(--muted); } .article-type-file-remove { margin-top: 6px; } .field.required > span:after { color: var(--danger); } .checkbox-field { display: flex; align-items: center; gap: 9px; min-height: 38px; padding-top: 17px; } .checkbox-field input { width: 18px; height: 18px; accent-color: var(--accent); } .checkbox-field strong { display: block; font-size: 13px; } .checkbox-field small { display: block; color: var(--muted); font-size: 11px; } .editor-info { position: sticky; top: 118px; } .info-pane { background: #fafafa; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .info-pane h3 { font-size: 14px; margin: 0 0 10px; } .info-pane p { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; } .info-pane dl { margin: 0; } .info-pane dt { font-size: 11px; color: var(--muted); margin-top: 12px; } .info-pane dd { font-size: 12px; margin: 3px 0 0; overflow-wrap: anywhere; } .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .keyboard-hint { display: flex; align-items: center; gap: 5px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); } .keyboard-hint span { margin-left: 3px; } .module-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .module-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); } .module-row:last-child { border-bottom: 0; } .module-row h3 { font-size: 14px; margin: 0 0 3px; } .module-row p { font-size: 12px; color: var(--muted); margin: 0; } .module-icon { width: 38px; height: 38px; border-radius: 7px; background: #eef6fc; color: #005a9e; display: grid; place-items: center; } .module-state { margin-right: 8px; } .message { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .message p { margin: 4px 0 0; } .error-message { border-color: #f1b7b2; background: #fff7f6; color: #791b12; } .loading-page { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 24px 2px; } .spinner { width: 18px; height: 18px; border: 2px solid #c9c9c9; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .busy { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 9px 13px; display: flex; gap: 9px; align-items: center; font-size: 12px; } .busy .spinner { width: 14px; height: 14px; } #toast { position: fixed; right: 18px; bottom: 18px; z-index: 80; max-width: min(420px, calc(100vw - 36px)); background: #252525; color: #fff; border-radius: 6px; padding: 11px 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(8px); pointer-events: none; transition: 0.16s ease; } #toast.show { opacity: 1; transform: translateY(0); } #toast[data-tone='error'] { background: #a4262c; } @media (max-width: 1100px) { .editor-layout { grid-template-columns: minmax(0, 1fr); } .editor-info { position: static; } .summary-band { grid-template-columns: repeat(2, 1fr); } .summary-band > div:nth-child(2) { border-right: 0; } .summary-band > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .workspace-grid { grid-template-columns: 1fr; } } @media (max-width: 800px) { #app { grid-template-columns: 60px minmax(0, 1fr); } .titlebar { grid-template-columns: 60px minmax(160px, 1fr) auto; } .titlebar-brand span:last-child, .nav-item span, .user-name, .titlebar-spacer { display: none; } .titlebar-brand { padding: 0 17px; } .nav-item { justify-content: center; padding: 0; } .content { padding: 18px 14px 40px; } .field-grid { grid-template-columns: 1fr; } .field.wide { grid-column: auto; } .summary-band { grid-template-columns: 1fr; } .summary-band > div { border-right: 0 !important; border-bottom: 1px solid var(--line); } .summary-band > div:last-child { border-bottom: 0; } .commandbar { overflow-x: auto; } .commandbar::-webkit-scrollbar { height: 0; } .editor-page > .commandbar { top: 54px; } .editor-commandbar { top: 54px; } .content > .commandbar { top: 54px; } .list-caption { display: none; } .module-row { grid-template-columns: 42px minmax(0, 1fr) auto; } .module-state { display: none; } .page-heading h1 { font-size: 24px; } } @media (max-width: 520px) { .titlebar { grid-template-columns: 52px minmax(0, 1fr) auto; padding-right: 8px; gap: 8px; } .titlebar-brand { padding: 0 13px; } .searchbox input { font-size: 13px; } .nav-pane { padding-inline: 5px; } .content { padding-inline: 10px; } .command span { display: none; } .command { width: 34px; justify-content: center; padding: 0; } .command.primary { width: auto; } .command.primary span { display: inline; } .form-section > header, .field-grid { padding-left: 14px; padding-right: 14px; } .module-row .command span { display: none; } .module-row .command { width: 34px; padding: 0; justify-content: center; } .user-area { gap: 2px; } } .pivot-tabs { display: flex; align-items: flex-end; gap: 2px; min-height: 42px; margin: -4px 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .pivot-tabs::-webkit-scrollbar { display: none; } .pivot-tab { position: relative; display: inline-flex; align-items: center; height: 41px; padding: 0 14px; border: 0; background: transparent; color: #444; cursor: pointer; white-space: nowrap; border-radius: 5px 5px 0 0; text-decoration: none; } .pivot-tab:hover { background: #eaeaea; } .pivot-tab.active { font-weight: 600; color: var(--text); } .pivot-tab.active:after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); } .billing-rule-hint { display: block; color: #4d6f87 !important; margin-top: 1px; } .field select:disabled, .field input:disabled { background: #f2f2f2; color: #777; cursor: not-allowed; } .module-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #f5f9fd; border: 1px solid #cbdff1; border-radius: var(--radius); color: #294861; } .module-callout > .icon { color: #0067c0; margin-top: 1px; } .module-callout strong { display: block; color: #20384c; margin-bottom: 3px; } .module-callout p { margin: 0; color: #526979; line-height: 1.45; font-size: 12px; } .revenue-summary { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; margin-bottom: 12px; } .revenue-summary > div { min-width: 190px; flex: 1; padding: 17px 18px; border-right: 1px solid var(--line); } .revenue-summary > div:last-child { border-right: 0; } .revenue-summary span, .revenue-summary small { display: block; } .revenue-summary span { font-size: 12px; color: var(--muted); margin-bottom: 5px; } .revenue-summary strong { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .revenue-summary small { font-size: 11px; color: #7a7a7a; margin-top: 4px; line-height: 1.35; } .revenue-note { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; margin: 0 2px 14px; } .revenue-note .icon { width: 15px; height: 15px; margin-top: 1px; } .revenue-section { margin-top: 14px; } .revenue-section > .datagrid-wrap { border: 0; border-radius: 0; } .revenue-section > .empty-state { border: 0; border-radius: 0; min-height: 180px; } @media (max-width: 800px) { .pivot-tabs { margin-top: 0; } .pivot-tab { padding-inline: 11px; } .revenue-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; } .revenue-summary > div { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .revenue-summary > div:nth-child(2n) { border-right: 0; } .revenue-summary > div:nth-last-child(-n + 2) { border-bottom: 0; } } .position-help { margin: 0 2px 10px; color: var(--muted); font-size: 12px; line-height: 1.45; } .position-grid-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .position-grid { border-collapse: separate; border-spacing: 0; min-width: 1450px; width: 100%; font-size: 12px; } .position-grid th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 7px; text-align: left; background: #f7f7f7; border-bottom: 1px solid var(--line); white-space: nowrap; } .interior-sheet-grid thead .column-groups th { height: 30px; padding: 0 7px; text-align: center; font-size: 11px; color: #555; background: #f1f1f1; border-right: 1px solid var(--line-strong); } .interior-sheet-grid thead .column-groups .column-group-return { background: #eef4f8; } .interior-sheet-grid thead .column-groups .column-group-store { background: #f2f5ed; } .interior-sheet-grid thead .column-groups .column-group-deco { background: #f5f0f5; } .interior-sheet-grid thead .column-groups .column-group-calculated { background: #f1f1f1; color: #555; } .interior-sheet-grid thead .column-groups .column-group-coverage { min-width: 125px; background: #f1f1f1; color: #555; border-left: 2px solid var(--line-strong); } .interior-sheet-grid thead .column-labels th { border-right: 1px solid #e5e5e5; } .position-grid td { height: 52px; padding: 0; border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; } .interior-sheet-grid td.interior-group-start { border-left: 2px solid var(--line-strong); } .interior-sheet-grid td[data-field^='store_lfm_'], .interior-sheet-grid td[data-field^='deco_lfm_'], .interior-sheet-grid td[data-field^='store_'], .interior-sheet-grid td[data-field^='deco_'] { min-width: 92px; } .interior-sheet-grid thead .column-labels th.interior-group-start { border-left: 2px solid var(--line-strong); } .position-grid th.position-select-cell, .position-grid td.position-select-cell { width: 38px; min-width: 38px; text-align: center; } .position-select-cell input, .position-grid th input[data-position-select-all] { width: 17px; min-height: 17px; height: 17px; padding: 0; accent-color: var(--accent); cursor: pointer; } .position-grid tbody tr.position-selected { background: rgb(0 103 163 / 10%); } .report-work-grid { min-width: 0; table-layout: fixed; } .report-work-grid th:nth-child(1), .report-work-grid td:nth-child(1) { width: 52px; } .report-work-grid th:nth-child(2), .report-work-grid td:nth-child(2) { width: 78px; } .report-work-grid th:nth-child(3), .report-work-grid td:nth-child(3) { width: auto; } .report-work-grid th:nth-child(4), .report-work-grid td:nth-child(4) { width: 72px; } .position-grid tbody tr.position-drag-target { outline: 2px dashed var(--accent); outline-offset: -2px; } .position-grid tbody tr[draggable='true'] { cursor: grab; } .interior-sheet-grid td input.calculated-manual { background: #f4f1e8; box-shadow: inset 2px 0 0 rgb(138 91 0 / 45%); } .interior-sheet-grid td.interior-coverage-cell { width: 125px; min-width: 125px; border-left: 2px solid var(--line-strong); } .interior-sheet-grid input[type='number'] { -moz-appearance: textfield; } .interior-sheet-grid input[type='number']::-webkit-inner-spin-button, .interior-sheet-grid input[type='number']::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } .position-grid tbody tr[draggable='true']:active { cursor: grabbing; } .position-grid td:first-child, .position-grid td:first-child input[readonly] { cursor: grab; user-select: none; } .position-grid td:first-child:active, .position-grid td:first-child input[readonly]:active { cursor: grabbing; } .position-grid th:last-child, .position-grid td:last-child { border-right: 0; } .position-grid input, .position-grid select, .position-grid textarea { width: 100%; min-height: 51px; border: 0; border-radius: 0; background: transparent; padding: 6px 7px; color: var(--text); outline: none; font: inherit; } .position-grid input, .position-grid select { height: 51px; } .position-grid textarea { display: block; resize: vertical; line-height: 1.35; } .position-grid input:focus, .position-grid select:focus, .position-grid textarea:focus { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px var(--accent); background: #fff; } .editable-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; } .editable-grid th, .editable-grid td { border-bottom: 1px solid #ededed; } .editable-grid th { height: 36px; padding: 0 7px; text-align: left; background: #f7f7f7; white-space: nowrap; } .editable-grid td { height: 52px; padding: 0; } .editable-grid input, .editable-grid select, .editable-grid textarea { width: 100%; min-height: 51px; border: 0; border-radius: 0; background: transparent; padding: 6px 7px; color: var(--text); outline: none; font: inherit; } .position-grid th:nth-child(1) { width: 70px; } .position-grid th:nth-child(2) { width: 120px; } .position-grid th:nth-child(3) { width: 240px; } .position-grid th:nth-child(4) { width: 300px; } .position-grid th:nth-child(5), .position-grid th:nth-child(6) { width: 85px; } .position-grid th:nth-child(7), .position-grid th:nth-child(8), .position-grid th:nth-child(9), .position-grid th:nth-child(10) { width: 100px; } .position-grid th:nth-child(11) { width: 115px; } .position-grid th:nth-child(12) { width: 76px; } table.position-grid.report-work-grid th:nth-child(1), table.position-grid.report-work-grid td:nth-child(1) { width: 48px; min-width: 48px; } table.position-grid.report-work-grid th:nth-child(2), table.position-grid.report-work-grid td:nth-child(2) { width: 68px; min-width: 68px; } table.position-grid.report-work-grid th:nth-child(3), table.position-grid.report-work-grid td:nth-child(3) { width: auto; min-width: 260px; } table.position-grid.report-work-grid th:nth-child(4), table.position-grid.report-work-grid td:nth-child(4) { width: 64px; min-width: 64px; } .position-grid input[type='number'], .position-total, .position-grid tfoot td:nth-last-child(2) { text-align: right; font-variant-numeric: tabular-nums; } .position-total { padding: 0 8px !important; white-space: nowrap; } .position-actions { padding: 0 4px !important; white-space: nowrap; } .position-actions .icon-button { display: inline-grid; } .position-row[data-dirty='1'] { box-shadow: inset 3px 0 0 var(--accent); } .position-row.type-heading { background: #f3f3f3; font-weight: 600; } .position-row.type-heading input[name='title'] { font-weight: 600; } .position-row.type-internal { background: #fff8e8; } .position-row.type-alternative { background: #f4f7fb; } .position-row.type-spacer { height: 28px; background: #fafafa; } .position-row.type-spacer td { height: 28px; } .position-row.type-spacer input, .position-row.type-spacer select, .position-row.type-spacer textarea { min-height: 27px; height: 27px; color: #777; } .position-grid tfoot td { height: 40px; padding: 0 8px; background: #fafafa; border-top: 1px solid var(--line); font-weight: 600; } .position-grid tfoot td:first-child { text-align: right; } .custom-field-grid { min-width: 1250px; } .custom-field-grid th:nth-child(1) { width: 125px; } .custom-field-grid th:nth-child(2) { width: 180px; } .custom-field-grid th:nth-child(3) { width: 220px; } .custom-field-grid th:nth-child(4) { width: 145px; } .custom-field-grid th:nth-child(5) { width: 310px; } .custom-field-grid th:nth-child(6), .custom-field-grid th:nth-child(7) { width: 70px; text-align: center; } .custom-field-grid th:nth-child(8) { width: 95px; } .custom-field-grid th:nth-child(9) { width: 78px; } .custom-field-grid .custom-field-check { text-align: center; } .custom-field-grid .custom-field-check input { width: 18px; height: 18px; min-height: 0; vertical-align: middle; } .custom-field-row:not([data-id='']) .deactivate-custom-field { display: inline-grid; } .custom-field-row[data-id=''] .deactivate-custom-field { visibility: hidden; } @media (max-width: 520px) { .revenue-summary { grid-template-columns: 1fr; } .revenue-summary > div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } .revenue-summary > div:last-child { border-bottom: 0 !important; } } .designer-layout { display: grid; grid-template-columns: minmax(440px, 760px) minmax(330px, 470px); gap: 18px; align-items: start; } .document-preview { position: sticky; top: 118px; aspect-ratio: 210/297; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); overflow: hidden; color: #202020; } .preview-head { height: 13%; padding: 7% 8%; color: #fff; display: flex; justify-content: space-between; align-items: center; } .preview-head strong { font-size: 20px; } .preview-head small { max-width: 42%; text-align: right; } .preview-body { position: relative; padding: 7% 8%; font-size: 9px; } .preview-body h2 { font-size: 18px; color: #333; margin: 0 0 4px; } .preview-body > b { position: absolute; right: 8%; top: 8%; font-size: 11px; } .preview-recipient { margin-top: 9%; background: #f1f5f8; width: 58%; min-height: 52px; padding: 10px; line-height: 1.5; color: #666; } .preview-recipient strong { color: #222; } .preview-order { text-align: right; margin: 12px 0; color: #666; } .preview-table { display: grid; grid-template-columns: 10% 55% 15% 20%; border-top: 20px solid var(--preview-accent); margin-top: 15px; } .preview-table > span { color: #fff; margin-top: -17px; font-weight: 600; } .preview-table > span:nth-child(n + 3), .preview-table > i:nth-child(4n) { text-align: right; } .preview-table > i { font-style: normal; padding: 9px 3px; border-bottom: 1px solid #ddd; } .preview-table > i small { display: block; color: #777; margin-top: 4px; } .preview-total { float: right; color: #fff; margin-top: 16px; padding: 8px 12px; font-weight: 600; } .document-preview > footer { position: absolute; left: 8%; right: 8%; bottom: 4%; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #ddd; padding-top: 7px; color: #777; font-size: 7px; } .document-preview > footer span:last-child { text-align: right; } @media (max-width: 1150px) { .designer-layout { grid-template-columns: 1fr; } .document-preview { position: static; max-width: 520px; } } .schedule-tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .schedule-tools label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; } .schedule-tools select { min-width: 150px; height: 34px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; padding: 0 8px; } .schedule-conflict-summary { margin-left: auto; padding: 7px 10px; border-radius: 999px; background: #eaf6ed; color: #176b2c; font-size: 11px; font-weight: 600; } .schedule-conflict-summary.has-conflicts { background: #fff0ed; color: #a4262c; } .schedule-scroll { overflow: auto; border-radius: var(--radius); } .schedule-grid { display: grid; grid-template-columns: 260px repeat(var(--schedule-days), minmax(64px, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-width: max(100%, calc(260px + var(--schedule-days) * 64px)); } .schedule-corner, .schedule-day { position: sticky; top: 0; z-index: 2; height: 42px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7f7f7; font-weight: 600; font-size: 11px; } .schedule-corner { left: 0; z-index: 3; } .schedule-title { position: sticky; left: 0; z-index: 1; min-height: 84px; padding: 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; cursor: grab; } .schedule-title:active { cursor: grabbing; } .schedule-title strong, .schedule-title small, .schedule-warning { display: block; } .schedule-title small { color: var(--muted); margin-top: 3px; } .schedule-title select { width: 100%; max-height: 54px; margin-top: 6px; border: 1px solid var(--line); border-radius: 4px; } .schedule-warning { margin-top: 5px; color: #a4262c; font-size: 10px; font-weight: 600; } .schedule-title.conflict { box-shadow: inset 4px 0 0 #d13438; } .schedule-cell { min-height: 84px; border-right: 1px solid #eee; border-bottom: 1px solid var(--line); background: #fff; transition: background 0.12s, box-shadow 0.12s; } .schedule-cell.occupied { padding: 5px; background: linear-gradient(135deg, #dceefa, #c8e2f5); box-shadow: inset 0 0 0 1px #96c6e6; } .schedule-cell.occupied span { display: block; padding: 5px; border-radius: 4px; background: #0877bd; color: #fff; font-size: 10px; cursor: grab; overflow: hidden; text-overflow: ellipsis; } .schedule-cell.conflict { background: #ffe5e2; box-shadow: inset 0 0 0 2px #d13438; } .schedule-cell.conflict span { background: #c42b1c; } .schedule-cell.drop-target { background: #dff6dd; box-shadow: inset 0 0 0 3px #107c10; } .schedule-day:nth-child(7n), .schedule-day:nth-child(7n + 1) { background: #f0f0f0; } @media (max-width: 700px) { .schedule-tools { align-items: stretch; } .schedule-tools label, .schedule-tools select { width: 100%; } .schedule-conflict-summary { margin-left: 0; text-align: center; } } .admin-list { display: grid; } .admin-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); } .admin-row:last-child { border-bottom: 0; } .admin-row strong, .admin-row small { display: block; } .admin-row small { color: var(--muted); margin-top: 3px; } .admin-row select { min-height: 60px; border: 1px solid var(--line); border-radius: 4px; } .permission-row { grid-template-columns: 180px minmax(0, 1fr) auto; align-items: start; } .permission-grid { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 7px; font-size: 11px; } .permission-grid label { white-space: nowrap; } @media (max-width: 900px) { .admin-row, .permission-row { grid-template-columns: 1fr; } .permission-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } } .metric-grid { display: grid; grid-template-columns: repeat(6, minmax(135px, 1fr)); gap: 12px; margin-top: 16px; } .metric-grid article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; } .metric-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 7px; } .metric-grid strong { display: block; font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); } } @media (max-width: 650px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-grid strong { font-size: 17px; } } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 16px; } .photo-grid figure { margin: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fafafa; } .photo-grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } .photo-grid figcaption { padding: 8px; font-size: 11px; } .photo-grid figcaption strong, .photo-grid figcaption span { display: block; } .photo-grid figcaption span { color: var(--muted); margin-top: 3px; } .signature-canvas { display: block; width: 100%; height: 220px; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; touch-action: none; } .signature-preview { display: block; max-width: 100%; max-height: 180px; border-bottom: 1px solid var(--line); background: #fff; } .activity-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .activity-panel > header { padding: 18px 20px; border-bottom: 1px solid var(--line); } .activity-panel > header h2, .activity-panel > header p { margin: 0; } .activity-panel > header p { margin-top: 4px; color: var(--muted); font-size: 12px; } .activity-timeline { list-style: none; margin: 0; padding: 10px 20px 22px; } .activity { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; } .activity:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 39px; bottom: -10px; width: 1px; background: var(--line); } .activity-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8f2fb; color: #0067a3; } .activity.approval .activity-marker { background: #dff6dd; color: #107c10; } .activity.message .activity-marker { background: #f3e8ff; color: #744da9; } .activity.email .activity-marker { background: #fff4ce; color: #8a5d00; } .activity time, .activity strong, .activity small { display: block; } .activity time { color: var(--muted); font-size: 10px; } .activity strong { margin-top: 2px; font-size: 13px; } .activity p { margin: 4px 0; color: #4c5d6b; font-size: 12px; white-space: pre-wrap; } .activity small { margin-top: 4px; color: var(--muted); font-size: 10px; } .dashboard-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .dashboard-widget { display: grid; gap: 6px; text-align: left; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--text); box-shadow: var(--shadow-sm); } .dashboard-widget:hover, .dashboard-widget:focus { border-color: var(--accent); } .dashboard-widget-label { font-size: 12px; color: var(--muted); } .dashboard-widget strong { font-size: 25px; font-weight: 650; } .dashboard-widget small { font-size: 11px; color: var(--muted); } @media (max-width: 900px) { .dashboard-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .dashboard-widgets { grid-template-columns: 1fr; } } .notification-button { position: relative; border: 0; background: transparent; color: inherit; padding: 8px; border-radius: 7px; cursor: pointer; } .notification-button:hover { background: #ffffff18; } .notification-button span { position: absolute; right: 1px; top: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 9px; background: #c42b1c; color: #fff; font-size: 10px; line-height: 16px; text-align: center; } .notification-list { display: grid; } .notification-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--border); } .notification-item.unread { background: #eff6fc; } .notification-item.unread strong { color: var(--accent); } .notification-item p { margin: 4px 0; } .notification-item small { color: var(--muted); } .notification-item > div:last-child { display: flex; gap: 8px; } .notification-item.warning { border-left: 3px solid #ca5010; } .notification-item.error { border-left: 3px solid #c42b1c; } @media (max-width: 700px) { .notification-item { grid-template-columns: auto 1fr; } .notification-item > div:last-child { grid-column: 2; } } .time-tracker { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border: 1px solid #8cc8ea; border-radius: 14px; background: linear-gradient(135deg, #eaf7ff, #f8fcff); box-shadow: var(--shadow-sm); } .time-tracker.paused { border-color: #e8c36a; background: linear-gradient(135deg, #fff8df, #fffdf6); } .time-tracker > div:first-child { display: grid; gap: 5px; } .time-tracker strong { font-size: 2rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .time-tracker small { color: var(--muted); } .time-tracker-actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 700px) { .time-tracker { align-items: stretch; flex-direction: column; } .time-tracker-actions .command { flex: 1; } } .time-approval { margin-top: 18px; } .approval-list { display: grid; } .approval-list article { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); } .approval-list article:last-child { border-bottom: 0; } .approval-list strong, .approval-list span, .approval-list small { display: block; } .approval-list small { margin-top: 4px; color: var(--muted); } .approval-list label > span { font-size: 11px; color: var(--muted); } .approval-list textarea { width: 100%; resize: vertical; border: 1px solid var(--line-strong); border-radius: 5px; padding: 7px; } .approval-list article > div:last-child { display: flex; gap: 8px; } @media (max-width: 900px) { .approval-list article { grid-template-columns: 1fr; } .approval-list article > div:last-child { justify-content: flex-end; } } .inventory-count-list { display: grid; } .inventory-count { border-top: 1px solid var(--line); } .inventory-count > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; background: #fafafa; } .inventory-count > header strong, .inventory-count > header small { display: block; } .inventory-count > header small { margin-top: 4px; color: var(--muted); } .inventory-count .datagrid input { width: 130px; height: 32px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 5px 7px; } .inventory-count > footer { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); } .document-block-editor { display: grid; gap: 6px; } .document-block-head, .document-block-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 48px; gap: 12px; align-items: center; } .document-block-head { padding: 0 10px; color: var(--muted); font-size: 11px; font-weight: 600; } .document-block-row { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-subtle); } .document-block-row input[type='number'] { width: 100%; height: 32px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 4px 7px; } .document-block-row .layout-input { width: 100%; padding-inline: 4px; } .document-block-row input[type='checkbox'] { width: 18px; height: 18px; } .document-layout-canvas { position: relative; width: min(100%, 760px); aspect-ratio: 0.707 / 1; margin-top: 18px; border: 1px solid var(--line-strong); border-radius: 6px; background: linear-gradient(#fff, #fff), #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); overflow: hidden; } .document-layout-element { position: absolute; min-width: 34px; min-height: 22px; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px dashed var(--accent); border-radius: 4px; background: rgb(0 103 163 / 12%); color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: move; touch-action: none; overflow: hidden; } .document-layout-element strong { font-size: 11px; letter-spacing: 0.02em; } .document-layout-element > span:not(.document-layout-resize) { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .document-layout-resize { position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); cursor: nwse-resize; touch-action: none; } .designer-workspace { display: grid; grid-template-columns: 190px minmax(420px, 1fr) 260px; gap: 18px; align-items: start; } .designer-palette, .designer-inspector { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .designer-palette h3, .designer-inspector h3 { margin: 0 0 8px; } .designer-palette-item { display: block; width: 100%; margin: 8px 0; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-subtle); text-align: left; cursor: grab; } .designer-palette-item:hover { border-color: var(--accent); background: rgb(0 103 163 / 8%); } .designer-canvas { position: relative; width: min(100%, 760px); min-height: 760px; aspect-ratio: 0.707 / 1; max-height: 900px; border: 1px solid var(--line-strong); border-radius: 5px; background: linear-gradient(#fff 0 10%, #f7f8fa 10.1% 10.3%, #fff 10.4% 100%), repeating-linear-gradient(0deg, transparent 0 31px, rgb(0 0 0 / 3%) 32px); box-shadow: 0 10px 28px rgb(0 0 0 / 14%); overflow: hidden; touch-action: none; } .label-designer-canvas { min-height: 0; max-height: 760px; aspect-ratio: 2 / 1; background: #fff; } .label-designer-canvas::before { display: none; } .label-designer-workspace .designer-element { padding: 4px 6px; } .designer-canvas::before { content: ''; position: absolute; inset: 4% 6%; border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line); pointer-events: none; } .designer-canvas.grid-enabled { background-image: linear-gradient(rgb(0 103 163 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(0 103 163 / 10%) 1px, transparent 1px), linear-gradient(#fff 0 10%, #f7f8fa 10.1% 10.3%, #fff 10.4% 100%); background-size: 1% 1%, 1% 1%, 100% 100%; } .designer-element { position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px dashed var(--accent); border-radius: 4px; background: rgb(0 103 163 / 10%); cursor: move; overflow: hidden; user-select: none; touch-action: none; } .designer-element:hover, .designer-element.selected { z-index: 4; border-style: solid; box-shadow: 0 0 0 2px rgb(0 103 163 / 18%); } .designer-element strong { font-size: 11px; } .designer-element > span:not(.designer-resize) { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .designer-element.designer-shape { background: rgb(0 0 0 / 8%); border-style: solid; min-height: 2px; padding: 0; } .designer-element.designer-shape strong, .designer-element.designer-shape > span:not(.designer-resize) { display: none; } .designer-rich-editor { border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; } .designer-rich-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 5px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); } .designer-rich-toolbar button, .designer-rich-toolbar select, .designer-rich-toolbar input[type='color'] { min-height: 28px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--text); } .designer-rich-toolbar button { padding: 2px 8px; cursor: pointer; } .designer-rich-text { min-height: 110px; padding: 8px; outline: none; background: var(--surface); color: var(--text); } .designer-rich-text:focus { box-shadow: inset 0 0 0 2px rgb(0 103 163 / 18%); } .designer-resize { position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); cursor: nwse-resize; touch-action: none; } .designer-field { display: grid; gap: 4px; margin: 12px 0; font-size: 12px; } .designer-field input, .designer-field textarea, .designer-field select { width: 100%; box-sizing: border-box; padding: 7px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text); } .designer-field textarea { min-height: 70px; resize: vertical; } .designer-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .designer-style-grid .designer-field:first-child { grid-column: 1 / -1; } .designer-check { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-size: 12px; } @media (max-width: 1100px) { .designer-workspace { grid-template-columns: 160px minmax(340px, 1fr); } .designer-inspector { grid-column: 1 / -1; } } @media (max-width: 720px) { .designer-workspace { display: block; } .designer-palette, .designer-inspector { margin-bottom: 14px; } .designer-canvas { min-height: 600px; } } .document-layout-hint { margin: 4px 0 10px; color: var(--muted); font-size: 12px; } .document-block-editor { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .document-block-row .layout-input { display: none; } .document-layout-element:hover, .document-layout-element:focus-visible { z-index: 2; border-style: solid; outline: 2px solid rgb(0 103 163 / 25%); } .article-type-value-grid { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .article-type-field-grid th:nth-child(1), .article-type-field-grid td:nth-child(1) { min-width: 150px; } .article-type-field-grid th:nth-child(2), .article-type-field-grid td:nth-child(2) { min-width: 180px; } .article-type-field-grid th:nth-child(4), .article-type-field-grid td:nth-child(4) { min-width: 220px; } .article-type-field-grid textarea { min-height: 42px; resize: vertical; } .article-type-field-row[data-managed='1'] { background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface)); }