:root { --bg: #0b1015; --bg-soft: #111922; --surface: #15202b; --surface-2: #1d2a37; --line: rgba(196, 210, 228, 0.2); --text: #f3f7fc; --muted: #9db0c5; --brand: #d4a86a; --brand-soft: rgba(212, 168, 106, 0.14); --ok: #4dbe93; --danger: #ff7f7f; --radius: 16px; --shadow: 0 24px 58px rgba(0, 0, 0, 0.34); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: radial-gradient(circle at 12% 2%, #1a2532, var(--bg) 50%), var(--bg); color: var(--text); font-family: "Manrope", sans-serif; } body.modal-open { overflow: hidden; } .layout { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; } .sidebar { border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(19, 29, 39, 0.94), rgba(13, 20, 27, 0.94)); padding: 1rem; position: sticky; top: 0; height: 100vh; } .logo { font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: #ebf2fb; margin-bottom: 1.2rem; } .logo a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .brand-mark { width: 24px; height: 24px; display: inline-block; flex-shrink: 0; border-radius: 50%; } .menu { display: flex; flex-direction: column; gap: 0.45rem; } .menu button { width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: #d4deec; padding: 0.72rem 0.78rem; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.92rem; } .menu button:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.03); } .menu button.active { border-color: rgba(212, 168, 106, 0.45); background: var(--brand-soft); color: #fde5c2; } .menu-tree { display: flex; flex-direction: column; gap: 0.35rem; padding-left: 0.6rem; padding-right: 0.2rem; border-left: 1px dashed rgba(212, 168, 106, 0.3); margin: 0.2rem 0 0.1rem 0.2rem; max-height: 38vh; overflow-y: auto; overflow-x: hidden; } .menu-tree button { font-size: 0.85rem; padding: 0.52rem 0.62rem; color: #c8d8ea; } .auth-box { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; font-size: 0.86rem; color: var(--muted); line-height: 1.45; } .auth-box b { color: #f4f7fc; font-weight: 700; } .main { padding: 1.2rem; min-width: 0; overflow-x: hidden; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(130deg, rgba(22, 33, 45, 0.94), rgba(15, 23, 31, 0.97)); padding: 0.85rem 1rem; box-shadow: var(--shadow); } .topbar h1 { margin: 0; font-family: "Prata", serif; font-size: 1.5rem; letter-spacing: 0.01em; } .badge { border: 1px solid rgba(212, 168, 106, 0.35); border-radius: 999px; background: var(--brand-soft); color: #fedfb1; font-size: 0.76rem; font-weight: 700; padding: 0.32rem 0.55rem; text-transform: uppercase; letter-spacing: 0.06em; } .topbar-actions { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .topbar-alert-btn { width: 38px; height: 38px; border-radius: 50%; position: relative; color: #cbd9ee; } .topbar-alert-btn.has-alert.alert-success { border-color: rgba(62, 214, 146, 0.52); background: rgba(62, 214, 146, 0.14); color: #bff7de; box-shadow: 0 0 0 3px rgba(62, 214, 146, 0.12); } .topbar-alert-btn.has-alert.alert-danger { border-color: rgba(255, 98, 98, 0.58); background: rgba(255, 98, 98, 0.14); color: #ffd7d7; box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.12); } .topbar-alert-dot { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(8, 16, 24, 0.96); background: #6f839e; opacity: 0; transform: scale(0.85); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; } .topbar-alert-btn.has-alert .topbar-alert-dot { opacity: 1; transform: scale(1); } .topbar-alert-btn.has-alert.alert-success .topbar-alert-dot { background: #3ed692; box-shadow: 0 0 0 3px rgba(62, 214, 146, 0.18); } .topbar-alert-btn.has-alert.alert-danger .topbar-alert-dot { background: #ff6767; box-shadow: 0 0 0 3px rgba(255, 103, 103, 0.16); } .btn { border: 1px solid transparent; border-radius: 999px; background: linear-gradient(120deg, #d9b57f, #c59048); color: #1b2430; padding: 0.64rem 1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; } .btn:hover { filter: brightness(1.05); } .btn.secondary { border-color: var(--line); background: rgba(255, 255, 255, 0.04); color: #dbe6f5; } .btn.secondary.active-success { border-color: rgba(77, 190, 147, 0.48); background: rgba(77, 190, 147, 0.22); color: #c8f5e4; } .btn.danger { border-color: rgba(255, 127, 127, 0.3); background: rgba(255, 127, 127, 0.13); color: #ffd3d3; } .section { display: none; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(20, 30, 40, 0.93), rgba(14, 22, 30, 0.96)); box-shadow: var(--shadow); padding: 1rem; min-width: 0; } .section.active { display: block; } .section h2 { margin: 0; font-family: "Prata", serif; font-size: 1.35rem; } .section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; } .section-head-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .config-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .ui-glyph { width: 17px; height: 17px; display: block; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .muted { color: var(--muted); margin: 0.45rem 0 0; line-height: 1.55; font-size: 0.94rem; } .breadcrumbs { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.4; } .breadcrumbs b { color: #dce7f7; font-weight: 700; } .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } .card { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.025); padding: 0.8rem; } .card p { margin: 0; color: var(--muted); font-size: 0.83rem; } .card b { display: block; margin-top: 0.3rem; font-size: 1.2rem; color: #f6dab0; } .lawyer-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; align-items: stretch; } .lawyer-dashboard-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); padding: 0.8rem; color: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 120px 1fr; gap: 0.8rem; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .lawyer-dashboard-card:hover, .lawyer-dashboard-card:focus-visible { border-color: rgba(212, 168, 106, 0.45); background: rgba(212, 168, 106, 0.04); transform: translateY(-1px); outline: none; } .lawyer-dashboard-left { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; text-align: center; } .lawyer-dashboard-avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); } .lawyer-dashboard-name { color: #eaf2ff; line-height: 1.25; font-size: 0.95rem; margin-top: 0.1rem; } .lawyer-dashboard-topic { color: var(--muted); font-size: 0.8rem; line-height: 1.3; } .lawyer-dashboard-right { display: grid; grid-template-columns: 1fr; gap: 0.38rem; align-content: start; } .lawyer-metric-pair { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); padding-bottom: 0.22rem; } .lawyer-metric-pair span { color: var(--muted); font-size: 0.78rem; } .lawyer-metric-pair b { color: #f6dab0; font-size: 0.88rem; text-align: right; } .lawyer-dashboard-modal { width: min(1180px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .lawyer-dashboard-modal .modal-head { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; padding-bottom: 0.45rem; background: linear-gradient(160deg, rgba(21, 31, 42, 0.96), rgba(14, 21, 28, 0.98)); } .lawyer-dashboard-modal-summary { display: grid; grid-template-columns: 120px 1fr; gap: 0.85rem; align-items: center; margin-bottom: 0.65rem; flex: 0 0 auto; } .lawyer-dashboard-modal-avatar { border: none; border-radius: 0; min-height: 110px; background: transparent; display: grid; place-items: center; align-self: center; } .lawyer-dashboard-modal-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.75rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.65rem 0.75rem; background: rgba(255, 255, 255, 0.02); } .lawyer-dashboard-modal-scroll { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); padding: 0.55rem; overflow: hidden; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.45rem; } .lawyer-dashboard-modal-table-area { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .lawyer-dashboard-modal-table-area .table-wrap { min-height: 220px; max-height: min(42vh, 420px); overflow: auto; border: none; border-radius: 0; background: transparent; } .lawyer-dashboard-modal-table-area thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(160deg, rgba(24, 36, 48, 0.98), rgba(16, 24, 32, 0.98)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); } .lawyer-dashboard-modal-footer { margin-top: 0.55rem; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.55rem; background: linear-gradient(180deg, rgba(13, 20, 27, 0), rgba(13, 20, 27, 0.42)); } .lawyer-dashboard-total-chip { border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.65rem; background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 0.82rem; } .lawyer-dashboard-total-chip b { color: #f6dab0; margin-left: 0.25rem; } .kanban-wrap { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .kanban-board { display: flex; flex-wrap: nowrap; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: 0.25rem; align-items: stretch; align-content: stretch; } .kanban-column { flex: 0 0 320px; min-width: 260px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); min-height: 460px; display: flex; flex-direction: column; transition: border-color 0.18s ease, background 0.18s ease; } .kanban-column.drag-over { border-color: rgba(212, 168, 106, 0.55); background: rgba(212, 168, 106, 0.08); } .kanban-column-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--line); } .kanban-column-head b { font-size: 0.95rem; color: #e5eefb; } .kanban-column-head span { border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.45rem; font-size: 0.76rem; color: var(--muted); background: rgba(255, 255, 255, 0.04); } .kanban-column-body { padding: 0.65rem; display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; max-height: 68vh; } .kanban-card { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; cursor: pointer; } .kanban-card.draggable { cursor: grab; } .kanban-card.draggable:active { cursor: grabbing; } .kanban-card:focus-visible { outline: 2px solid rgba(137, 178, 255, 0.55); outline-offset: 1px; } .kanban-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; } .kanban-card-head code { color: #f5dbb5; font-size: 0.8rem; font-weight: 700; } .kanban-status-badge { border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.72rem; line-height: 1.2; color: #dce8f9; background: rgba(255, 255, 255, 0.06); max-width: 68%; text-align: right; word-break: break-word; } .kanban-status-badge.group-new { border-color: rgba(76, 160, 255, 0.5); color: #b8d8ff; } .kanban-status-badge.group-in_progress { border-color: rgba(212, 168, 106, 0.5); color: #f8d8aa; } .kanban-status-badge.group-waiting { border-color: rgba(137, 165, 218, 0.5); color: #c9dbff; } .kanban-status-badge.group-done { border-color: rgba(77, 190, 147, 0.55); color: #b7efda; } .kanban-card-desc { margin: 0; color: #e8f0fb; font-size: 0.86rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8rem; } .kanban-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.76rem; } .danger-text { color: #ffb7b7; } .kanban-card-actions { margin-top: 0.1rem; display: flex; align-items: center; justify-content: flex-start; gap: 0.45rem; flex-wrap: wrap; } .kanban-update-icons { display: inline-flex; align-items: center; gap: 0.35rem; } .kanban-update-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(122, 139, 163, 0.38); background: rgba(111, 133, 160, 0.14); color: #9daec4; font-size: 0.76rem; line-height: 1; } .kanban-update-icon.is-unread { border-color: rgba(74, 197, 143, 0.52); background: rgba(74, 197, 143, 0.2); color: #b9f3dd; box-shadow: 0 0 0 2px rgba(74, 197, 143, 0.14); } .kanban-deadline-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 0.18rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: #dde9fa; font-size: 0.75rem; line-height: 1.2; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } .kanban-deadline-chip.tone-ok { border-color: rgba(76, 197, 145, 0.5); background: rgba(76, 197, 145, 0.2); color: #c5f8e3; } .kanban-deadline-chip.tone-warn { border-color: rgba(228, 182, 92, 0.52); background: rgba(228, 182, 92, 0.22); color: #f9e0ac; } .kanban-deadline-chip.tone-danger { border-color: rgba(255, 98, 98, 0.58); background: rgba(255, 98, 98, 0.24); color: #ffd4d4; } .kanban-transition-select { flex: 1; min-width: 140px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: #dbe7f8; padding: 0.34rem 0.55rem; font-size: 0.78rem; } .kanban-empty { margin: 0.3rem 0 0; text-align: center; } .filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.75rem; } .filter-toolbar { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.75rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } .filter-chips { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; flex: 1 1 auto; min-height: 34px; } .filter-chip { display: inline-flex; align-items: center; gap: 0; padding: 0.25rem 0.5rem; border: 1px solid rgba(212, 168, 106, 0.3); border-radius: 999px; background: var(--brand-soft); color: #f9dfb5; font-size: 0.76rem; line-height: 1.2; cursor: pointer; transition: padding-right 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .filter-chip button { border: none; width: 0; height: 18px; min-width: 0; margin-left: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fce3bd; cursor: pointer; font-size: 0.82rem; line-height: 1; padding: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: scale(0.85); transition: width 0.18s ease, margin-left 0.18s ease, opacity 0.14s ease, transform 0.18s ease, background 0.18s ease; } .filter-chip:hover, .filter-chip:focus-within { padding-right: 0.35rem; border-color: rgba(212, 168, 106, 0.44); } .filter-chip:hover button, .filter-chip:focus-within button { width: 18px; margin-left: 0.35rem; opacity: 1; pointer-events: auto; transform: scale(1); } .filter-chip button:hover { background: rgba(255, 255, 255, 0.18); } .chip-placeholder { color: var(--muted); font-size: 0.84rem; } .filter-action { margin-left: auto; flex-shrink: 0; } .field { display: flex; flex-direction: column; gap: 0.3rem; } .field label { text-transform: uppercase; letter-spacing: 0.06em; color: #9fb3c8; font-size: 0.73rem; font-weight: 700; } .field-inline { display: flex; align-items: center; gap: 0.45rem; } .btn-sm { min-height: 38px; padding: 0.5rem 0.68rem; font-size: 0.82rem; } input, textarea, select { width: 100%; border: 1px solid #3c4d62; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; padding: 0.58rem 0.68rem; min-height: 38px; } input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(120, 163, 235, 0.72); box-shadow: 0 0 0 3px rgba(89, 133, 210, 0.18); background: rgba(255, 255, 255, 0.045); } textarea { min-height: 108px; resize: vertical; } .table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: rgba(255, 255, 255, 0.015); } /* Main table data lives in its own scroll area; controls and pager remain outside of it. */ .table-scroll-region { min-height: 240px; max-height: clamp(260px, 50vh, 620px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; } table { width: 100%; border-collapse: collapse; min-width: 840px; } .request-track-link { border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; } .request-track-link code { color: #f5dbb5; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(245, 219, 181, 0.35); text-underline-offset: 2px; } .request-track-link:hover code, .request-track-link:focus-visible code { text-decoration-color: rgba(245, 219, 181, 0.9); } th, td { padding: 0.63rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.89rem; } th { text-align: left; color: #9fb3c8; font-size: 0.77rem; text-transform: uppercase; letter-spacing: 0.06em; } .table-scroll-region thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(160deg, rgba(23, 34, 46, 0.98), rgba(16, 24, 33, 0.98)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(6px); } .table-scroll-region tbody tr:last-child td { border-bottom-color: transparent; } .sortable-th { cursor: pointer; user-select: none; } .sortable-head { display: inline-flex; align-items: center; gap: 0.35rem; } .sort-indicator { color: #6d7f96; font-weight: 700; font-size: 0.8rem; line-height: 1; } .sort-indicator.active { color: #f1d3a3; } td code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #f7dfb8; } .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #f5f8ff; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); text-transform: uppercase; letter-spacing: 0.02em; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-identity { display: inline-flex; align-items: center; gap: 0.52rem; min-width: 0; } .user-identity-text { display: flex; flex-direction: column; min-width: 0; } .user-identity-text b { font-size: 0.88rem; font-weight: 700; color: #eaf2fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; } .table-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .request-updates-stack { display: inline-flex; flex-direction: column; gap: 0.24rem; align-items: flex-start; } .request-update-chip { display: inline-flex; align-items: center; gap: 0.32rem; border: 1px solid rgba(95, 182, 145, 0.34); border-radius: 999px; background: rgba(77, 190, 147, 0.14); color: #bef5df; font-size: 0.74rem; line-height: 1.1; padding: 0.18rem 0.45rem; white-space: nowrap; } .request-update-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ed692; box-shadow: 0 0 0 3px rgba(62, 214, 146, 0.18); flex-shrink: 0; } .request-update-empty { color: #8ea1b8; font-size: 0.8rem; } .icon-btn { border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.03); color: #d8e4f4; cursor: pointer; width: 30px; height: 30px; display: inline-grid; place-items: center; font-size: 0.95rem; line-height: 1; position: relative; } .icon-btn:hover { border-color: rgba(212, 168, 106, 0.42); background: rgba(212, 168, 106, 0.16); color: #fce0b6; } .icon-btn.danger:hover { border-color: rgba(255, 127, 127, 0.45); background: rgba(255, 127, 127, 0.16); color: #ffd9d9; } .icon-btn::after, .has-tooltip::after { content: none; display: none; } .global-tooltip-layer { position: fixed; z-index: 2000; transform: translate(-50%, -100%); background: #081018; border: 1px solid var(--line); color: #dce6f5; font-size: 0.72rem; line-height: 1.3; border-radius: 8px; padding: 0.28rem 0.45rem; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.12s ease; } .global-tooltip-layer.open { opacity: 1; visibility: visible; } .pager { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-top: 0.72rem; color: var(--muted); font-size: 0.86rem; flex-wrap: wrap; } .table-footer-bar { margin-top: 0; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; background: linear-gradient(160deg, rgba(18, 28, 37, 0.96), rgba(13, 20, 28, 0.98)); position: sticky; bottom: 0; z-index: 1; } .table-scroll-region + .table-footer-bar { margin-top: -1px; } .table-footer-actions { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-left: auto; } .table-control-btn { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; line-height: 1; } .table-control-loadall { width: auto; min-width: 58px; padding: 0 0.62rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.33rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; } .table-control-loadall .ui-glyph { width: 15px; height: 15px; } .filter-toolbar + .table-scroll-region { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .status { margin: 0.6rem 0 0; min-height: 1.1rem; color: var(--muted); font-size: 0.87rem; } .status.ok { color: var(--ok); } .status.error { color: var(--danger); } .stack { display: grid; gap: 0.9rem; } .triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } .config-layout { display: grid; grid-template-columns: 1fr; gap: 0.85rem; } .config-panel { min-width: 0; } .config-panel-flat .config-content { border: 0; border-radius: 0; padding: 0; background: transparent; } .config-floating-actions { position: fixed; right: 1.15rem; top: 164px; z-index: 35; display: inline-flex; align-items: center; gap: 0.45rem; } .config-panel-flat .config-content .table-wrap table { min-width: 640px; } .config-controls-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .config-controls-summary { color: var(--muted); font-size: 0.86rem; } .config-controls-actions { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-left: auto; } .block { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem; background: rgba(255, 255, 255, 0.02); } .block h3 { margin: 0 0 0.5rem; font-size: 1rem; } .block .table-wrap table { min-width: 640px; } .status-designer { border: 1px solid var(--line); border-radius: 12px; padding: 0.65rem; background: rgba(255, 255, 255, 0.015); margin-bottom: 0.72rem; } .status-designer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .status-designer-head h4 { margin: 0; font-size: 0.95rem; } .status-designer-head p { margin: 0.3rem 0 0; font-size: 0.82rem; } .status-designer-controls { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .status-designer-controls select { min-width: 220px; max-width: 340px; } .status-designer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.55rem; } .status-node-card { border: 1px solid var(--line); border-radius: 10px; padding: 0.52rem; background: rgba(255, 255, 255, 0.018); display: grid; gap: 0.46rem; } .status-node-head { display: flex; justify-content: space-between; align-items: center; gap: 0.45rem; } .status-node-head b { display: block; color: #e6effd; margin-bottom: 0.1rem; font-size: 0.9rem; } .status-node-head code { font-size: 0.74rem; color: #aac0dd; } .status-node-terminal { border: 1px solid rgba(214, 144, 95, 0.45); border-radius: 999px; padding: 0.14rem 0.48rem; font-size: 0.68rem; color: #f3d2a8; white-space: nowrap; } .status-node-links li { margin-bottom: 0.34rem; } .status-link-chip { width: 100%; text-align: left; border: 1px solid rgba(118, 145, 184, 0.45); border-radius: 10px; background: rgba(45, 67, 98, 0.28); color: #dce8f8; padding: 0.34rem 0.46rem; cursor: pointer; display: grid; gap: 0.2rem; } .status-link-chip small { color: #9eb1ca; font-size: 0.72rem; line-height: 1.35; } .status-link-chip:hover { border-color: rgba(138, 168, 210, 0.7); background: rgba(71, 102, 148, 0.3); } .json { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem; background: #0e151d; color: #ccdef4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.83rem; overflow: auto; max-height: 380px; white-space: pre-wrap; word-break: break-word; } .simple-list { margin: 0; padding: 0; list-style: none; } .simple-list li { padding: 0.52rem 0.55rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.025); margin-bottom: 0.4rem; font-size: 0.86rem; } .simple-list li:last-child { margin-bottom: 0; } .request-modal { width: min(1120px, 100%); } .request-modal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .request-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.8rem; flex-wrap: wrap; } .request-workspace-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr); gap: 0.75rem; align-items: start; } .request-main-column { display: grid; gap: 0.75rem; } .request-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; } .request-card-head h3 { margin: 0; } .request-card-head-actions { display: inline-flex; align-items: center; gap: 0.35rem; } .request-card-finance-btn { width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-size: 0.95rem; color: #f2d39d; border-color: rgba(228, 184, 104, 0.35); background: rgba(219, 162, 67, 0.09); } .request-card-data-btn { width: 34px; height: 34px; border-radius: 10px; color: #b8d6ff; border-color: rgba(110, 160, 230, 0.28); background: rgba(92, 139, 214, 0.08); } .request-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .request-card-grid-compact { align-items: start; } .request-field { border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); padding: 0.5rem 0.55rem; display: grid; gap: 0.2rem; } .request-field-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .request-field-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9fb0c5; font-weight: 700; } .request-field-value { font-size: 0.9rem; color: #d8e5f7; word-break: break-word; line-height: 1.35; } .request-contact-value { position: relative; display: inline-flex; align-items: center; gap: 0.28rem; width: fit-content; max-width: 100%; cursor: help; border-bottom: 1px dashed rgba(159, 176, 197, 0.45); padding-bottom: 1px; } .request-contact-value:hover { border-bottom-color: rgba(229, 196, 132, 0.5); color: #eef5ff; } .request-field-span-2 { grid-column: 1 / -1; } .request-field-description .request-field-value { white-space: pre-wrap; display: block; min-height: calc(1.35em * 4); max-height: calc(1.35em * 4); overflow: auto; padding-right: 0.1rem; } .request-field-expand-btn { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; } .request-description-block, .request-extra-block { margin-top: 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); padding: 0.58rem; } .request-description-block p { margin: 0.4rem 0 0; color: #d8e5f7; line-height: 1.5; white-space: pre-wrap; word-break: break-word; font-size: 0.9rem; } .request-extra-list { margin-top: 0.45rem; max-height: 220px; overflow: auto; } .request-finance-modal { width: min(560px, 100%); } .request-finance-subtitle { margin: 0.2rem 0 0; } .request-finance-grid { margin-top: 0.2rem; } .request-data-modal { width: min(860px, 100%); } .request-data-summary-modal { width: min(760px, 100%); max-height: min(78vh, 760px); display: grid; grid-template-rows: auto minmax(0, 1fr); } .request-data-summary-list { min-height: 0; overflow-y: auto; display: grid; gap: 0.45rem; padding-right: 0.1rem; } .request-data-summary-row { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.6fr); gap: 0.6rem; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.55rem; background: rgba(255, 255, 255, 0.02); } .request-data-summary-label { color: #a9bad0; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .request-data-summary-value { color: #e5eefb; word-break: break-word; white-space: pre-wrap; } .request-data-summary-file .chat-message-file-chip { margin-top: 0; } .request-status-change-modal { width: min(920px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .request-status-change-modal form.stack { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.75rem; } .request-status-change-modal input, .request-status-change-modal textarea, .request-status-change-modal select { color-scheme: dark; } .request-status-change-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr); gap: 0.6rem; align-items: end; } .request-status-change-files { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); padding: 0.55rem; display: grid; gap: 0.45rem; } .request-status-change-files-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .request-status-history-block { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); padding: 0.55rem; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; } .request-status-history-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .request-status-history-list { border: 1px solid rgba(120, 144, 175, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.01); padding: 0.5rem 0.55rem 0.35rem; max-height: 260px; overflow-y: auto; margin: 0; list-style: none; } .request-status-history-route-item { padding-left: 2rem; padding-bottom: 0.7rem; } .request-status-history-route-item .route-dot { top: 0.32rem; width: 1.04rem; height: 1.04rem; } .request-status-history-route-item::before { left: 0.52rem; top: 0.56rem; bottom: -0.16rem; } .request-status-history-route-item .route-body { border: 1px solid rgba(120, 144, 175, 0.14); border-radius: 10px; padding: 0.45rem 0.5rem; background: rgba(255, 255, 255, 0.015); display: grid; gap: 0.2rem; } .request-status-history-row { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; } .request-status-history-chip { border-radius: 999px; border: 1px solid rgba(200, 138, 87, 0.35); background: rgba(200, 138, 87, 0.13); color: #f4cfaa; padding: 0.14rem 0.45rem; font-size: 0.7rem; font-weight: 700; white-space: nowrap; } .request-status-history-meta { display: flex; justify-content: space-between; gap: 0.55rem; color: #a4b5cb; font-size: 0.78rem; flex-wrap: wrap; } .request-status-history-list .route-body b { font-size: 0.88rem; text-transform: none; letter-spacing: normal; } .request-status-history-list .route-time { margin-top: 0; font-size: 0.74rem; } .request-status-history-comment { color: #dfe9f8; font-size: 0.84rem; white-space: pre-wrap; word-break: break-word; margin-top: 0.1rem; } .request-data-modal-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; align-items: end; } .request-data-manual-row { grid-template-columns: minmax(0, 1fr) 180px auto; } .request-data-modal-actions-inline { display: flex; align-items: flex-end; gap: 0.45rem; flex-wrap: wrap; padding-bottom: 0.05rem; } .request-data-combobox { position: relative; z-index: 5; } .request-data-template-badge { position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%); border-radius: 999px; padding: 0.14rem 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid rgba(120, 149, 186, 0.35); background: rgba(47, 66, 96, 0.3); color: #d9e7fb; pointer-events: none; max-width: 52%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .request-data-template-badge.create { color: #cdeecf; border-color: rgba(95, 179, 106, 0.35); background: rgba(65, 137, 77, 0.16); } .request-data-template-badge.existing { color: #d7e8ff; border-color: rgba(109, 150, 210, 0.35); background: rgba(70, 110, 170, 0.16); } .request-data-template-badge.readonly { color: #ffd6a8; border-color: rgba(214, 153, 83, 0.35); background: rgba(175, 114, 54, 0.16); } .request-data-suggest-list { position: absolute; left: 0; right: 0; top: calc(100% + 0.3rem); z-index: 80; border: 1px solid rgba(95, 124, 163, 0.55); background: linear-gradient(180deg, rgba(18, 28, 41, 0.98), rgba(13, 20, 31, 0.98)); border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); max-height: 240px; overflow: auto; padding: 0.25rem; display: grid; gap: 0.18rem; } .request-data-suggest-item { width: 100%; border: 1px solid transparent; background: rgba(255, 255, 255, 0.02); color: #e7effc; border-radius: 10px; padding: 0.4rem 0.5rem; text-align: left; cursor: pointer; display: grid; gap: 0.1rem; font: inherit; } .request-data-suggest-item small { color: #9ab0cc; font-size: 0.72rem; } .request-data-suggest-item:hover { border-color: rgba(123, 159, 205, 0.45); background: rgba(75, 111, 163, 0.18); } .request-data-rows { border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem; background: rgba(255, 255, 255, 0.02); max-height: 260px; overflow: auto; display: grid; gap: 0.45rem; } .request-data-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 170px 38px; gap: 0.45rem; align-items: end; border-bottom: 1px solid rgba(130, 151, 180, 0.1); padding-bottom: 0.45rem; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .request-data-row:last-child { border-bottom: none; padding-bottom: 0; } .request-data-row.drag-over { background: rgba(77, 126, 199, 0.1); border-color: rgba(112, 161, 228, 0.28); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(112, 161, 228, 0.22); } .request-data-row.dragging { opacity: 0.82; transform: scale(0.995); } .request-data-row.row-locked { opacity: 0.96; } .request-data-row-controls { display: flex; gap: 0.35rem; align-items: center; justify-content: flex-end; padding-bottom: 0.02rem; } .request-data-progress-line { display: flex; justify-content: flex-end; margin-top: -0.08rem; } .request-data-progress-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(105, 179, 132, 0.42); background: rgba(57, 138, 88, 0.18); color: #d5f5df; padding: 0.16rem 0.56rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.015em; } .request-data-row-client-value { grid-column: 2 / -1; display: flex; align-items: center; gap: 0.4rem; margin-top: 0.05rem; min-height: 1.6rem; } .request-data-row-client-label { font-size: 0.73rem; color: #94a9c4; white-space: nowrap; } .request-data-row-client-text { color: #dbe8f8; font-size: 0.83rem; line-height: 1.3; word-break: break-word; } .modal-actions-right { justify-content: flex-end; } .request-data-row-index-handle, .request-data-row-action-btn { width: 38px; height: 38px; border-radius: 10px; } .request-data-row-index-handle { align-self: end; margin-bottom: 0.02rem; color: #bfd0e4; font-weight: 700; font-size: 0.8rem; cursor: grab; } .request-data-row-index-handle:active { cursor: grabbing; } .request-data-row-index-handle span { display: inline-block; transform: translateY(0.5px); } .request-data-row.row-locked .request-data-row-index-handle { cursor: not-allowed; color: #879bb3; } .request-data-submit-btn { min-height: 38px; padding: 0.48rem 0.9rem; align-self: flex-end; } .request-data-modal .modal-actions { margin-top: 0.35rem; } .request-description-modal { width: min(980px, 100%); height: min(86vh, 900px); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; } .request-description-modal-headline { margin-top: 0.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .request-description-modal-headline .request-finance-subtitle { margin: 0; min-width: 0; } .request-description-status-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(121, 152, 197, 0.38); background: rgba(76, 110, 165, 0.2); color: #deebff; padding: 0.18rem 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; } .request-description-modal-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.55rem; min-height: 0; flex: 1 1 auto; overflow: hidden; } .request-description-modal-main { min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); padding: 0.65rem; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.45rem; min-height: 0; } .request-description-modal-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .request-description-modal-text { padding: 0.5rem 0.2rem 0.55rem 0.1rem; color: #dfe9f8; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow: auto; font-size: 0.95rem; } .request-description-modal-meta-wrap { border: 1px solid rgba(130, 151, 180, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.015); padding: 0.55rem 0.65rem; } .request-description-modal-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.8rem; align-content: start; } .request-description-meta-item { min-width: 0; display: grid; gap: 0.18rem; align-content: start; padding: 0.05rem 0; } .request-description-meta-item.align-right { justify-items: end; text-align: right; } .request-description-meta-item .request-field-value { font-size: 0.92rem; } .request-status-route { margin-top: 0.85rem; padding-top: 0.8rem; border-top: 1px solid var(--line); } .request-status-route h4 { margin: 0 0 0.7rem; font-size: 0.96rem; } .request-route-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; } .route-item { position: relative; padding: 0 0 0.85rem 2.1rem; } .route-item::before { content: ""; position: absolute; left: 0.56rem; top: 0.52rem; bottom: -0.2rem; width: 2px; background: #5c6573; opacity: 0.6; } .route-item:last-child::before { display: none; } .route-dot { position: absolute; left: 0; top: 0.28rem; width: 1.12rem; height: 1.12rem; border-radius: 50%; background: #818999; border: 2px solid rgba(18, 30, 43, 0.95); box-shadow: 0 0 0 1px rgba(129, 137, 153, 0.35); } .route-item.completed .route-dot, .route-item.current .route-dot { background: #3f72ff; box-shadow: 0 0 0 1px rgba(63, 114, 255, 0.35); } .route-item.completed::before, .route-item.current::before { background: #3f72ff; opacity: 0.85; } .route-body b { display: block; font-size: 1.02rem; color: #ebf2ff; text-transform: uppercase; letter-spacing: 0.01em; } .route-body p { margin: 0.25rem 0 0; color: #9fb0c5; line-height: 1.45; font-size: 0.9rem; white-space: pre-wrap; } .route-time { margin-top: 0.22rem; font-size: 0.78rem; } .request-modal-list { max-height: 220px; overflow: auto; margin-bottom: 0.75rem; } .request-modal-item-meta { margin-top: 0.18rem; font-size: 0.78rem; } .request-file-actions { margin-top: 0.45rem; display: flex; gap: 0.45rem; flex-wrap: wrap; } .request-file-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .file-action-btn { width: 34px; height: 34px; border-radius: 10px; color: #d8e4f5; } .request-file-link-icon { text-decoration: none; } .request-attachments-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.65rem; } .request-upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .request-chat-block .request-modal-list { max-height: 480px; } .request-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; margin-bottom: 0.58rem; flex-wrap: wrap; } .request-chat-live-row { display: inline-flex; align-items: center; gap: 0.42rem; margin: -0.1rem 0 0.55rem; min-height: 1rem; } .chat-live-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(68, 208, 138, 0.95); box-shadow: 0 0 0 3px rgba(68, 208, 138, 0.16); flex-shrink: 0; } .chat-live-dot.degraded { background: rgba(240, 167, 72, 0.95); box-shadow: 0 0 0 3px rgba(240, 167, 72, 0.16); } .request-chat-live-text { font-size: 0.77rem; color: #a8bad0; line-height: 1.2; letter-spacing: 0.01em; } .request-chat-tabs { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.02); } .tab-btn { border: none; background: transparent; color: #9fb3cf; border-radius: 999px; padding: 0.26rem 0.64rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; } .tab-btn.active { background: rgba(90, 126, 194, 0.38); color: #e8f1ff; box-shadow: inset 0 0 0 1px rgba(104, 145, 223, 0.45); } .request-chat-list { max-height: 470px; overflow: auto; display: flex; flex-direction: column; gap: 0.28rem; padding: 0.45rem 0.28rem 0.28rem; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(ellipse at top left, rgba(82, 109, 156, 0.16), transparent 45%), radial-gradient(ellipse at bottom right, rgba(57, 86, 126, 0.12), transparent 45%), rgba(15, 23, 34, 0.72); } .request-chat-list .chat-message { padding: 0; margin: 0; border: none; background: transparent; display: flex; flex-direction: column; gap: 0.2rem; max-width: min(79%, 680px); } .request-chat-list .chat-message.incoming { align-self: flex-start; align-items: flex-start; } .request-chat-list .chat-message.outgoing { align-self: flex-end; align-items: flex-end; } .chat-message-author { font-size: 0.72rem; color: #9db3cf; line-height: 1.3; padding-inline: 0.3rem; } .chat-message-bubble { border: 1px solid #44556f; border-radius: 15px 15px 15px 6px; background: linear-gradient(165deg, rgba(39, 52, 69, 0.94), rgba(24, 35, 49, 0.98)); padding: 0.5rem 0.62rem 0.44rem; min-width: 120px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16); } .chat-message.outgoing .chat-message-bubble { border-color: #5f86d1; border-radius: 15px 15px 6px 15px; background: linear-gradient(165deg, rgba(63, 98, 169, 0.94), rgba(44, 73, 130, 0.98)); } .chat-message-text { margin: 0; font-size: 0.9rem; line-height: 1.43; color: #e6eef9; white-space: pre-wrap; word-break: break-word; } .chat-message-time { margin-top: 0.32rem; font-size: 0.74rem; color: #aab9cc; text-align: right; } .chat-request-data-bubble { cursor: pointer; border-color: rgba(221, 168, 87, 0.42); background: linear-gradient(165deg, rgba(96, 69, 20, 0.92), rgba(58, 41, 14, 0.96)); } .chat-message.outgoing .chat-request-data-bubble { border-color: rgba(228, 180, 96, 0.52); background: linear-gradient(165deg, rgba(123, 86, 26, 0.95), rgba(85, 59, 18, 0.98)); } .chat-request-data-bubble.all-filled { border-color: rgba(87, 177, 113, 0.42); background: linear-gradient(165deg, rgba(36, 96, 52, 0.92), rgba(24, 66, 35, 0.96)); } .chat-request-data-head { font-size: 0.84rem; font-weight: 800; color: #ffe0a6; margin-bottom: 0.2rem; } .chat-request-data-bubble.all-filled .chat-request-data-head { color: #d3f4dc; margin-bottom: 0.08rem; } .chat-request-data-list { display: grid; gap: 0.16rem; max-height: 11.6rem; overflow: hidden; } .chat-request-data-item { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.8rem; color: #edf1f8; } .chat-request-data-item.filled .chat-request-data-label { text-decoration: line-through; color: #c4cfde; } .chat-request-data-index { display: inline-flex; align-items: center; gap: 0.15rem; min-width: 2rem; color: #ffe1af; font-weight: 700; } .chat-request-data-check { color: #66db87; font-weight: 900; } .chat-request-data-collapsed { margin: 0; color: #d3f5dc; font-weight: 800; font-size: 0.86rem; } .chat-request-data-more { color: #c2cfde; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; padding-left: 2.02rem; } @media (max-width: 900px) { .request-data-summary-row { grid-template-columns: 1fr; gap: 0.25rem; } .request-data-row-client-value { grid-column: 1 / -1; flex-wrap: wrap; } } .chat-message-files { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.32rem; } .chat-message-file-chip { border: 1px solid rgba(130, 153, 183, 0.45); background: rgba(31, 45, 63, 0.58); color: #d8e6f8; border-radius: 999px; padding: 0.16rem 0.46rem 0.16rem 0.36rem; display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer; max-width: 100%; font-size: 0.75rem; line-height: 1.2; } .chat-message-file-chip:hover { border-color: rgba(170, 198, 236, 0.65); background: rgba(52, 74, 104, 0.66); } .chat-message-file-icon { color: #a9c1df; flex-shrink: 0; } .chat-message-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .request-chat-list li.chat-date-divider { margin: 0.32rem 0 0.24rem; padding: 0; border: none; background: transparent; display: flex; justify-content: center; max-width: none; width: 100%; } .request-chat-list li.chat-date-divider span { display: inline-flex; align-items: center; justify-content: center; padding: 0.16rem 0.56rem; border-radius: 999px; border: 1px solid rgba(131, 151, 178, 0.34); background: rgba(46, 61, 84, 0.5); color: #b8c9df; font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1.2; } .request-chat-composer-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .composer-attach-btn { width: 36px; height: 36px; border-radius: 50%; } .request-chat-composer-dropzone { border: 1px dashed rgba(111, 140, 186, 0.42); border-radius: 12px; padding: 0.55rem; background: rgba(255, 255, 255, 0.015); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .request-chat-composer-dropzone.drag-active { border-color: rgba(119, 165, 241, 0.88); background: rgba(87, 128, 206, 0.12); box-shadow: inset 0 0 0 1px rgba(119, 165, 241, 0.32); } .request-drop-hint { margin-top: 0.38rem; font-size: 0.77rem; } .request-pending-files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: -0.18rem; } .pending-file-chip { display: inline-flex; align-items: center; gap: 0.34rem; border: 1px solid rgba(112, 142, 191, 0.4); border-radius: 999px; background: rgba(49, 73, 109, 0.32); padding: 0.2rem 0.34rem 0.2rem 0.42rem; max-width: min(100%, 360px); min-height: 30px; } .pending-file-icon { color: #a4bde0; font-size: 0.8rem; line-height: 1; flex-shrink: 0; } .pending-file-name { font-size: 0.79rem; color: #dce7f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pending-file-remove { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(156, 184, 224, 0.4); background: rgba(17, 29, 44, 0.72); color: #d7e4f8; cursor: pointer; line-height: 1; padding: 0; font-size: 0.88rem; flex-shrink: 0; } .request-files-tab .request-modal-list { max-height: 520px; overflow: auto; } .request-files-tab-actions { margin-top: 0.55rem; display: flex; justify-content: flex-start; gap: 0.45rem; flex-wrap: wrap; } .request-preview-modal { width: min(980px, 100%); } .request-preview-head-actions { display: inline-flex; align-items: center; gap: 0.4rem; } .request-preview-body { width: 100%; min-height: 280px; max-height: calc(92vh - 90px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #0f1722; display: grid; place-items: center; gap: 0.7rem; padding: 0.45rem; } .request-preview-frame { width: 100%; height: min(72vh, 760px); border: none; } .request-preview-text { width: 100%; min-height: min(60vh, 520px); margin: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 16, 24, 0.88); color: #dbe7f8; padding: 0.7rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 500 0.86rem/1.45 "JetBrains Mono", "Fira Code", monospace; } .request-preview-image { max-width: 100%; max-height: 72vh; object-fit: contain; } .request-preview-video { width: min(100%, 860px); max-height: 72vh; } .request-preview-note { color: var(--muted); text-align: center; margin: 0; } .request-preview-download-icon { text-decoration: none; } .workspace-head-icon { width: 36px; height: 36px; border-radius: 50%; font-size: 0.96rem; } .workspace-head-icon-glyph { display: inline-block; transform: rotate(180deg); line-height: 1; } .overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 40; background: rgba(6, 10, 14, 0.78); backdrop-filter: blur(4px); } .overlay.open { display: flex; } .modal { width: min(680px, 100%); max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, rgba(21, 31, 42, 0.95), rgba(14, 21, 28, 0.98)); padding: 0.9rem; box-shadow: var(--shadow); } .modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.65rem; } .modal-head-actions { display: inline-flex; align-items: center; gap: 0.45rem; } .modal-head h3 { margin: 0; font-family: "Prata", serif; font-size: 1.2rem; } .totp-setup-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0.9rem; margin-bottom: 0.8rem; align-items: start; } .totp-qr-box { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); padding: 0.6rem; display: grid; place-items: center; min-height: 240px; } .totp-qr-img { width: 220px; height: 220px; max-width: 100%; object-fit: contain; border-radius: 8px; background: #fff; } .account-modal { width: min(760px, 100%); } .account-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .account-security-box { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem; background: rgba(255, 255, 255, 0.03); } .close { border: 1px solid var(--line); width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: #d7e4f5; cursor: pointer; font-size: 1.05rem; } .login-screen { position: fixed; inset: 0; z-index: 60; background: rgba(7, 11, 15, 0.86); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 1rem; } .login-card { width: min(420px, 100%); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, rgba(24, 36, 48, 0.95), rgba(15, 24, 32, 0.98)); box-shadow: var(--shadow); padding: 1rem; } .login-card h2 { margin: 0; font-family: "Prata", serif; font-size: 1.4rem; } @media (max-width: 1160px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lawyer-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kanban-column { flex-basis: calc(50% - 0.375rem); min-width: 240px; } .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .triple { grid-template-columns: 1fr; } .config-layout { grid-template-columns: 1fr; } .request-modal-grid { grid-template-columns: 1fr; } .request-workspace-layout { grid-template-columns: 1fr; } .request-card-grid { grid-template-columns: 1fr; } .request-description-modal-body { grid-template-rows: minmax(0, 1fr) auto; } .request-description-modal-meta { grid-template-columns: 1fr; } .request-description-meta-item.align-right { justify-items: start; text-align: left; } } @media (max-width: 920px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } } @media (max-width: 620px) { .cards, .filters { grid-template-columns: 1fr; } .totp-setup-grid { grid-template-columns: 1fr; } .totp-qr-box { min-height: 200px; } .totp-qr-img { width: 200px; height: 200px; } .account-modal-grid { grid-template-columns: 1fr; } .lawyer-dashboard-grid { grid-template-columns: 1fr; } .lawyer-dashboard-card { grid-template-columns: 1fr; } .lawyer-dashboard-left { align-items: flex-start; text-align: left; } .lawyer-dashboard-modal-summary { grid-template-columns: 1fr; } .lawyer-dashboard-modal-metrics { grid-template-columns: 1fr; } .kanban-column { flex-basis: 100%; min-width: 0; } .filter-toolbar { flex-direction: column; align-items: stretch; } .filter-action { margin-left: 0; } .config-controls-summary { width: 100%; } .config-controls-actions { width: 100%; margin-left: 0; } .config-floating-actions { position: static; justify-content: flex-end; width: 100%; margin-bottom: 0.5rem; } .topbar { flex-direction: column; align-items: flex-start; } }