.db-page { padding: 0; } .db-header { background: linear-gradient(100deg, rgba(0, 81, 128, 0.956) 0%, #006fa8 100%); color: #fff; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .db-header__greeting { font-size: 1.15rem; font-weight: 700; line-height: 1.3; } .db-header__greeting small { display: block; font-weight: 400; font-size: 0.85rem; opacity: 0.8; margin-top: 2px; } .db-header__aside { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .db-header__meta { text-align: right; font-size: 0.83rem; opacity: 0.85; line-height: 1.2; } .db-header__time { font-size: 2rem; font-weight: 700; opacity: 1; display: block; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1; } .db-filter-bar { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .db-filter-bar__label { color: #94a3b8; font-size: 0.88rem; margin-right: 4px; padding-right: 8px; border-right: 1px solid #e2e8f0; flex-shrink: 0; } .db-filter-bar__actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } body.db-layout-open { overflow: hidden; } .db-layout-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1200; } .db-layout-backdrop.is-open { display: block; } .db-layout-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)); max-height: min(80vh, 560px); background: #fff; border-radius: 5px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); z-index: 1201; flex-direction: column; overflow: hidden; } .db-layout-panel.is-open { display: flex; } .db-layout-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; } .db-layout-panel__title { font-size: 0.95rem; font-weight: 700; color: #1e293b; } .db-layout-panel__title i { color: #64748b; margin-right: 6px; } .db-layout-panel__close { border: none; background: transparent; color: #94a3b8; cursor: pointer; padding: 4px 6px; font-size: 1rem; line-height: 1; } .db-layout-panel__close:hover { color: #475569; } .db-layout-panel__hint { margin: 0; padding: 10px 16px 0; font-size: 0.78rem; color: #94a3b8; line-height: 1.45; } .db-layout-list { list-style: none; margin: 10px 0 0; padding: 0 12px; overflow-y: auto; flex: 1; } .db-layout-item { display: flex; align-items: center; gap: 8px; padding: 10px 8px; margin-bottom: 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px; cursor: grab; user-select: none; } .db-layout-item.is-dragging { opacity: 0.55; cursor: grabbing; } .db-layout-item__handle { color: #cbd5e1; flex-shrink: 0; width: 16px; text-align: center; } .db-layout-item__label { flex: 1; font-size: 0.85rem; font-weight: 600; color: #334155; min-width: 0; } .db-layout-item__actions { display: flex; gap: 2px; flex-shrink: 0; } .db-layout-item__move { border: none; background: #fff; border: 1px solid #e2e8f0; color: #64748b; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; } .db-layout-item__move:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; } .db-layout-panel__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #f1f5f9; } .db-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; } @media (max-width: 700px) { .db-grid { grid-template-columns: 1fr; padding: 10px; gap: 10px; } } @media (min-width: 1200px) { .db-grid { padding: 10px 0; gap: 10px; } } @media (min-width: 1300px) { .db-grid { grid-template-columns: repeat(3, 1fr); } } .db-widget { background: #fff; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04); overflow: hidden; display: flex; flex-direction: column; } .db-widget__head { display: flex; align-items: center; gap: 9px; padding: 11px 14px 9px; border-bottom: 1px solid #f1f5f9; } .db-widget__icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; flex-shrink: 0; box-sizing: border-box; } .db-widget__icon--cached { border-bottom: 3px solid currentColor; } .db-widget__title { font-size: 0.87rem; font-weight: 700; color: #1e293b; flex: 1; min-width: 0; } .db-widget__more { font-size: 0.75rem; color: #94a3b8; text-decoration: none; white-space: nowrap; transition: color 0.15s; } .db-widget__more:hover { color: #2563eb; text-decoration: none; } .db-kpi-row { display: flex; border-bottom: 1px solid #f1f5f9; } .db-kpi { flex: 1; padding: 9px 14px; border-right: 1px solid #f1f5f9; min-width: 0; } .db-kpi:last-child { border-right: none; } .db-kpi__val { font-size: 1.45rem; font-weight: 800; color: #1e293b; line-height: 1.1; } .db-kpi__lbl { font-size: 0.7rem; color: #94a3b8; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-kpi__val--warn { color: #dc2626; } .db-kpi__val--ok { color: #16a34a; } .db-kpi__val--info { color: #2563eb; } .db-kpi__val--gold { color: #d97706; } .db-kpi__val--purple { color: #7c3aed; } .db-widget__body { flex: 1; overflow: hidden; font-size: 0.82rem; line-height: 1.35; } .db-list-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; border-bottom: 1px solid #f8fafc; gap: 8px; font-size: inherit; color: #334155; text-decoration: none; } .db-list-item:last-child { border-bottom: none; } a.db-list-item:hover { background: #f8fafc; text-decoration: none; color: #1d4ed8; } .db-list-item--static { cursor: default; } .db-list-item--section { color: #94a3b8; cursor: default; padding-bottom: 2px; } .db-list-item__main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .db-list-item__main--stacked { white-space: normal; overflow: visible; text-overflow: clip; } .db-list-item__main--stacked .db-list-item__sub { display: block; margin-top: 1px; } .db-widget--orders .db-list-item__main { text-transform: uppercase; } .db-list-item__sub { font-size: inherit; color: #94a3b8; flex-shrink: 0; } .db-list-item__sub.bold700 { font-weight: 700; color: #334155; } .db-list-item__sub--debt { color: #dc2626; } .db-list-item__badge { font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .db-widget__extra { padding: 6px 14px 10px; font-size: inherit; } .db-badge--green { background: #dcfce7; color: #15803d; } .db-badge--red { background: #fee2e2; color: #b91c1c; } .db-badge--blue { background: #dbeafe; color: #1d4ed8; } .db-badge--orange { background: #ffedd5; color: #c2410c; } .db-badge--gray { background: #f1f5f9; color: #475569; } .db-badge--yellow { background: #fef9c3; color: #854d0e; } .db-widget__foot { padding: 7px 14px; border-top: 1px solid #f1f5f9; text-align: center; } .db-widget__foot a { font-size: 0.78rem; color: #94a3b8; text-decoration: none; } .db-widget__foot a:hover { color: #2563eb; } .db-widget--orders .db-widget__icon { background: #eff6ff; color: #2563eb; } .db-widget--deadline .db-widget__icon { background: #fff1f2; color: #dc2626; } .db-widget--news .db-widget__icon { background: #f0fdf4; color: #16a34a; } .db-widget--notify .db-widget__icon { background: #fff7ed; color: #ea580c; } .db-widget--attend .db-widget__icon { background: #fff7ed; color: #ea580c; } .db-widget--prod .db-widget__icon { background: #faf5ff; color: #7c3aed; } .db-widget--gw .db-widget__icon { background: #f0fdfa; color: #0d9488; } .db-widget--expense .db-widget__icon { background: #fff1f2; color: #e11d48; } .db-widget--finance .db-widget__icon { background: #fefce8; color: #d97706; } .db-empty { padding: 22px 14px; text-align: center; color: #cbd5e1; font-size: inherit; } .db-empty i { font-size: 1.5rem; display: block; margin-bottom: 6px; opacity: 0.5; } .db-progress { height: 10px; background: #f1f5f9; border-radius: 5px; overflow: hidden; margin-top: 4px; } .db-progress__fill { height: 100%; border-radius: 5px; background: #22c55e; transition: width 0.4s; } .db-progress__fill--warn { background: #f59e0b; } .db-progress__fill--danger { background: #ef4444; } .db-progress__note { color: #94a3b8; margin-top: 3px; font-size: inherit; } @media (max-width: 480px) { .db-header { padding: 14px 16px; } .db-header__greeting { font-size: 1rem; } .db-header__time { font-size: 1.65rem; } .db-filter-bar { padding: 6px 10px; } .db-kpi__val { font-size: 1.2rem; } } body.dark .db-page, html.dark .db-page { --db-surface: #2d2e30; --db-surface-2: #202124; --db-surface-3: #35363a; --db-border: #3c4043; --db-text: #e8eaed; --db-muted: #9aa0a6; --db-accent: #8ab4f8; --db-accent-soft: rgba(138, 180, 248, 0.14); } body.dark .db-header, html.dark .db-header { background: linear-gradient(180deg, #323335 0%, #2d2e30 55%, #292a2d 100%); color: #e8eaed; border-bottom: 1px solid var(--db-border); } body.dark .db-filter-bar, html.dark .db-filter-bar { background: var(--db-surface-2); border-bottom-color: var(--db-border); } body.dark .db-filter-bar__label, html.dark .db-filter-bar__label { color: var(--db-muted); border-right-color: var(--db-border); } body.dark .db-layout-backdrop, html.dark .db-layout-backdrop { background: rgba(0, 0, 0, 0.62); } body.dark .db-layout-panel, html.dark .db-layout-panel { background: var(--db-surface); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } body.dark .db-layout-panel__head, html.dark .db-layout-panel__head, body.dark .db-layout-panel__foot, html.dark .db-layout-panel__foot { border-color: var(--db-border); } body.dark .db-layout-panel__title, html.dark .db-layout-panel__title { color: var(--db-text); } body.dark .db-layout-panel__title i, html.dark .db-layout-panel__title i { color: var(--db-muted); } body.dark .db-layout-panel__close, html.dark .db-layout-panel__close { color: var(--db-muted); } body.dark .db-layout-panel__close:hover, html.dark .db-layout-panel__close:hover { color: var(--db-text); } body.dark .db-layout-panel__hint, html.dark .db-layout-panel__hint { color: var(--db-muted); } body.dark .db-layout-item, html.dark .db-layout-item { background: var(--db-surface-2); border-color: var(--db-border); } body.dark .db-layout-item__handle, html.dark .db-layout-item__handle { color: #5f6368; } body.dark .db-layout-item__label, html.dark .db-layout-item__label { color: var(--db-text); } body.dark .db-layout-item__move, html.dark .db-layout-item__move { background: var(--db-surface); border-color: var(--db-border); color: var(--db-muted); } body.dark .db-layout-item__move:hover, html.dark .db-layout-item__move:hover { background: var(--db-accent-soft); border-color: #5f87c4; color: var(--db-accent); } body.dark .db-widget, html.dark .db-widget { background: var(--db-surface); border: 1px solid var(--db-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } body.dark .db-widget__head, html.dark .db-widget__head { background: linear-gradient(180deg, #323335 0%, #2d2e30 100%); border-bottom-color: var(--db-border); } body.dark .db-kpi-row, html.dark .db-kpi-row { border-bottom-color: var(--db-border); } body.dark .db-widget__foot, html.dark .db-widget__foot { border-top-color: var(--db-border); } body.dark .db-widget__title, html.dark .db-widget__title { color: var(--db-text); } body.dark .db-widget__more, html.dark .db-widget__more { color: var(--db-muted); } body.dark .db-widget__more:hover, html.dark .db-widget__more:hover { color: var(--db-accent); } body.dark .db-kpi, html.dark .db-kpi { border-right-color: var(--db-border); } body.dark .db-kpi__val, html.dark .db-kpi__val { color: var(--db-text); } body.dark .db-kpi__lbl, html.dark .db-kpi__lbl { color: var(--db-muted); } body.dark .db-kpi__val--info, html.dark .db-kpi__val--info { color: #8ab4f8; } body.dark .db-kpi__val--gold, html.dark .db-kpi__val--gold { color: #ffb74d; } body.dark .db-kpi__val--warn, html.dark .db-kpi__val--warn { color: #f28b82; } body.dark .db-kpi__val--ok, html.dark .db-kpi__val--ok { color: #81c784; } body.dark .db-kpi__val--purple, html.dark .db-kpi__val--purple { color: #c58af9; } body.dark .db-list-item, html.dark .db-list-item { border-bottom-color: var(--db-border); color: #bdc1c6; } body.dark a.db-list-item:hover, html.dark a.db-list-item:hover { background: rgba(138, 180, 248, 0.08); color: var(--db-accent); } body.dark .db-list-item__sub, html.dark .db-list-item__sub { color: var(--db-muted); } body.dark a.db-list-item:hover .db-list-item__sub, html.dark a.db-list-item:hover .db-list-item__sub { color: #8ab4f8; } body.dark .db-list-item__sub.bold700, html.dark .db-list-item__sub.bold700 { color: var(--db-text); } body.dark .db-list-item__sub--debt, html.dark .db-list-item__sub--debt { color: #f28b82; } body.dark .db-widget__foot a, html.dark .db-widget__foot a { color: var(--db-muted); } body.dark .db-widget__foot a:hover, html.dark .db-widget__foot a:hover { color: var(--db-accent); } body.dark .db-empty, html.dark .db-empty { color: #5f6368; } body.dark .db-progress, html.dark .db-progress { background: var(--db-surface-3); } body.dark .db-progress__note, html.dark .db-progress__note { color: var(--db-muted); } body.dark .db-list-item--section, html.dark .db-list-item--section { color: var(--db-muted); } body.dark .db-badge--green, html.dark .db-badge--green { background: rgba(46, 125, 50, 0.22); color: #81c784; } body.dark .db-badge--red, html.dark .db-badge--red { background: rgba(198, 40, 40, 0.22); color: #f28b82; } body.dark .db-badge--blue, html.dark .db-badge--blue { background: rgba(26, 115, 232, 0.22); color: #8ab4f8; } body.dark .db-badge--orange, html.dark .db-badge--orange { background: rgba(230, 81, 0, 0.22); color: #ffb74d; } body.dark .db-badge--gray, html.dark .db-badge--gray { background: var(--db-surface-3); color: #bdc1c6; } body.dark .db-badge--yellow, html.dark .db-badge--yellow { background: rgba(251, 192, 45, 0.18); color: #fdd663; } body.dark .db-widget--orders .db-widget__icon, html.dark .db-widget--orders .db-widget__icon { background: rgba(138, 180, 248, 0.14); color: #8ab4f8; } body.dark .db-widget--deadline .db-widget__icon, html.dark .db-widget--deadline .db-widget__icon { background: rgba(242, 139, 130, 0.14); color: #f28b82; } body.dark .db-widget--news .db-widget__icon, html.dark .db-widget--news .db-widget__icon { background: rgba(129, 199, 132, 0.14); color: #81c784; } body.dark .db-widget--notify .db-widget__icon, html.dark .db-widget--notify .db-widget__icon { background: rgba(255, 183, 77, 0.14); color: #ffb74d; } body.dark .db-widget--attend .db-widget__icon, html.dark .db-widget--attend .db-widget__icon { background: rgba(255, 183, 77, 0.14); color: #ffb74d; } body.dark .db-widget--prod .db-widget__icon, html.dark .db-widget--prod .db-widget__icon { background: rgba(197, 138, 249, 0.14); color: #c58af9; } body.dark .db-widget--gw .db-widget__icon, html.dark .db-widget--gw .db-widget__icon { background: rgba(128, 203, 196, 0.14); color: #80cbc4; } body.dark .db-widget--expense .db-widget__icon, html.dark .db-widget--expense .db-widget__icon { background: rgba(244, 143, 177, 0.14); color: #f48fb1; } body.dark .db-widget--finance .db-widget__icon, html.dark .db-widget--finance .db-widget__icon { background: rgba(255, 214, 102, 0.14); color: #fdd663; } body.dark .db-widget .db-list-item__sub.bold700, html.dark .db-widget .db-list-item__sub.bold700 { color: var(--db-text) !important; } body.dark .db-widget [style*="color:#94a3b8"], html.dark .db-widget [style*="color:#94a3b8"], body.dark .db-list-item[style*="color:#94a3b8"], html.dark .db-list-item[style*="color:#94a3b8"] { color: var(--db-muted) !important; } body.dark .db-widget [style*="color:#334155"], html.dark .db-widget [style*="color:#334155"] { color: var(--db-text) !important; } body.dark .db-widget [style*="color:#1d4ed8"], html.dark .db-widget [style*="color:#1d4ed8"] { color: #8ab4f8 !important; } body.dark .db-widget [style*="color:#15803d"], html.dark .db-widget [style*="color:#15803d"] { color: #81c784 !important; } body.dark .db-widget [style*="color:#0d9488"], html.dark .db-widget [style*="color:#0d9488"] { color: #80cbc4 !important; }