:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: #172033; background: #f7f8fb; font-size: 15px; }
* { box-sizing: border-box; } body { margin: 0; } button, input, select, textarea { font: inherit; } button { cursor: pointer; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: #fff; }
.login-art { background: linear-gradient(145deg,#182c55,#0d1831); color:#fff; padding: clamp(3rem,10vw,9rem); position:relative; overflow:hidden; }
.login-art:after { content:''; position:absolute; width:450px; height:450px; border:80px solid rgba(255,255,255,.04); border-radius:50%; right:-130px; bottom:-130px; }
.brand-mark { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:15px; color:#fff; background:#e64443; font-size:30px; font-weight:800; box-shadow:0 10px 30px #e6444350; }
.brand-mark.small { width:34px; height:34px; border-radius:10px; font-size:19px; }
.login-art h1 { font-size:clamp(2.4rem,5vw,4.5rem); letter-spacing:-.06em; margin:7rem 0 1rem; } .login-art p { color:#b9c6e2; font-size:1.15rem; max-width:400px; line-height:1.6; }
.login-box { align-self:center; justify-self:center; width:min(420px,90%); padding:2rem; text-align:center; } .login-box h2 { font-size:2rem; margin:.5rem 0; } .login-box form { text-align:left; } .login-box .btn { margin-top:1rem; width:100%; } .login-box .auth-tabs { justify-content:center; }
.login-hint { display:block; color:#8d96a8; margin-top:1.2rem; text-align:center; }
.app-shell { display:flex; min-height:100vh; } .sidebar { width:245px; background:#182c55; color:#d3dbee; display:flex; flex-direction:column; flex-shrink:0; padding:24px 14px; }
.sidebar-brand { display:flex; gap:10px; align-items:center; color:#fff; font-size:1.08rem; font-weight:750; padding:0 10px 28px; } .sidebar-brand span span { color:#9eafd4; font-weight:400; }
.workspace { background:#243b69; border-radius:12px; padding:12px 13px; margin-bottom:22px; } .workspace small { display:block; font-size:.63rem; color:#91a4ce; letter-spacing:.12em; margin-bottom:5px; } .workspace strong,.workspace span { display:block; } .workspace span { color:#91a4ce; font-size:.72rem; margin-top:3px; }
.sidebar nav { display:grid; gap:4px; } .sidebar nav button { color:#b8c5df; background:transparent; border:0; border-radius:9px; padding:11px 12px; text-align:left; display:flex; gap:12px; align-items:center; } .sidebar nav button:hover,.sidebar nav button.active { color:#fff; background:#e64443; } .sidebar nav i { font-style:normal; font-size:1.1rem; width:18px; text-align:center; }
.sidebar-bottom { margin-top:auto; } .user-chip { display:flex; gap:9px; align-items:center; border-top:1px solid #314673; padding:18px 4px 14px; } .avatar { background:#f2a35b; color:#fff; border-radius:50%; width:34px; height:34px; display:grid; place-items:center; font-weight:700; } .user-chip strong,.user-chip small { display:block; max-width:165px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .user-chip strong { color:#fff; font-size:.78rem; } .user-chip small { color:#9eafd4; font-size:.7rem; margin-top:2px; } .logout { border:0; background:transparent; color:#94a5c9; padding:7px 4px; }
.main-area { flex:1; min-width:0; } .topbar { height:72px; border-bottom:1px solid #e7eaf0; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 4%; } .breadcrumb { color:#9aa3b4; } .top-actions { display:flex; align-items:center; gap:22px; } .connection { color:#5a6578; font-size:.82rem; } .connection i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#33b87a; margin-right:7px; } .icon-btn { border:0; background:transparent; color:#758096; font-size:1.3rem; }
main { max-width:1380px; padding:42px 4%; margin:auto; } .page-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; } h1 { font-size:2rem; letter-spacing:-.04em; margin:5px 0 7px; } h2 { font-size:1rem; margin:0; } .muted { color:#7c8799; margin:0; line-height:1.55; } .eyebrow { color:#e64443; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.btn { border:0; border-radius:8px; padding:11px 16px; background:#e64443; color:#fff; font-weight:700; box-shadow:0 5px 12px #e6444328; transition:.15s; } .btn:hover { background:#ce3635; transform:translateY(-1px); } .btn.secondary { color:#566175; background:#eef0f5; box-shadow:none; } .btn.link { color:#e64443; background:none; box-shadow:none; padding:0; font-size:.8rem; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; } .stat-card { background:#fff; border:1px solid #edf0f5; border-radius:12px; padding:19px; position:relative; } .stat-card > span { color:#768196; font-size:.78rem; display:block; } .stat-card strong { display:block; font-size:1.8rem; margin:13px 0 3px; letter-spacing:-.04em; } .stat-card small { color:#98a1b0; } .stat-icon { position:absolute; top:17px; right:17px; width:31px; height:31px; display:grid; place-items:center; border-radius:9px; font-weight:bold; } .stat-card.red .stat-icon { background:#ffebeb;color:#e64443; } .stat-card.green .stat-icon { background:#e6f8ef;color:#27a66b; } .stat-card.blue .stat-icon { background:#e8f0ff;color:#437ad9; } .stat-card.purple .stat-icon { background:#f0eaff;color:#8462d8; }
.two-col { display:grid; grid-template-columns:1.35fr .8fr; gap:18px; align-items:start; } .card { background:#fff; border:1px solid #edf0f5; border-radius:12px; padding:22px; margin-bottom:18px; } .card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; } .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:.82rem; } th { color:#96a0b0; text-align:left; text-transform:uppercase; letter-spacing:.07em; font-size:.64rem; font-weight:700; padding:0 12px 12px; white-space:nowrap; } td { border-top:1px solid #f0f1f5; padding:14px 12px; white-space:nowrap; } td strong { font-weight:700; } .subtext { display:block; color:#9da6b3; font-size:.7rem; margin-top:3px; max-width:220px; overflow:hidden; text-overflow:ellipsis; } .reference { color:#586579; font-family:monospace; font-size:.75rem; }
.status { border-radius:20px; padding:5px 9px; font-size:.68rem; font-weight:700; background:#f0f1f4; color:#6b7481; } .status.open { color:#c97816; background:#fff3dc; } .status.paid,.status.accepted { color:#21875a; background:#e7f8ef; } .status.partially_paid { color:#3774c5; background:#e8f1ff; } .status.draft { color:#737b89; background:#eff1f4; } .status.rejected,.status.expired,.status.cancelled { color:#b93b3b; background:#ffebeb; } .tag { background:#edf3ff; color:#4677cc; padding:5px 8px; border-radius:5px; font-size:.68rem; } .stock { color:#238c5d; font-weight:700; } .stock.low { color:#d47c27; }
.quick-actions { display:grid; gap:9px; } .quick-actions button { display:flex; align-items:center; gap:10px; border:1px solid #eef0f5; background:#fff; padding:13px; border-radius:8px; color:#27364f; text-align:left; } .quick-actions button:hover { background:#fafafa; border-color:#e64443; } .quick-actions i { font-style:normal; color:#e64443; } .quick-actions span { flex:1; font-weight:600; font-size:.8rem; }
.clickable-row { cursor:pointer; } .clickable-row:hover td { background:#fffafa; } .row-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row-actions .btn { padding:7px 10px; font-size:.72rem; } .detail-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:20px; margin-top:20px; border-top:1px solid #eef0f4; } .simple-list { margin:0; padding-left:18px; color:#5d6879; line-height:1.8; } .api-output { position:fixed; left:265px; bottom:18px; max-width:420px; z-index:5; font-size:.72rem; color:#596579; } .api-output pre { max-height:180px; overflow:auto; background:#fff; border:1px solid #e7eaf0; border-radius:8px; padding:10px; }
.filters { display:flex; gap:4px; } .filters button { border:0; background:transparent; color:#8993a4; font-size:.75rem; padding:6px 8px; border-radius:5px; } .filters button.selected { color:#e64443; background:#fff0f0; font-weight:700; } .search { width:180px; border:1px solid #e5e8ee; border-radius:7px; padding:8px 10px; color:#566175; outline:0; }
.field { display:block; color:#606b7c; font-size:.75rem; font-weight:650; } .field b { color:#e64443; } .field input,.field select,.field textarea { display:block; width:100%; border:1px solid #dfe3ea; border-radius:7px; padding:10px; margin-top:6px; color:#253148; background:#fff; outline:0; } .field textarea { min-height:96px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus { border-color:#e64443; box-shadow:0 0 0 3px #e6444314; } .field input[type=checkbox] { width:auto; display:inline-block; margin-right:8px; } .form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .form-grid .wide { grid-column:1 / -1; } .form-note { margin:0 0 16px; } .xml-field textarea { min-height:260px; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.empty { text-align:center; color:#98a1b0; padding:45px 20px; } .empty-icon { display:block; font-size:2rem; color:#c3cad5; margin-bottom:8px; } .toast { position:fixed; z-index:20; right:26px; bottom:24px; background:#1e9d68; color:#fff; padding:13px 18px; border-radius:8px; box-shadow:0 8px 25px #17203330; font-size:.82rem; } .toast.error { background:#d84848; } .xml-input { width:100%; min-height:170px; resize:vertical; border:1px solid #dfe3ea; border-radius:7px; padding:12px; margin:8px 0 15px; font:12px monospace; } .settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:900px; } .info-row { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #f0f1f5; color:#687386; font-size:.82rem; } .info-row:last-child { border:0; } .info-row strong { color:#24915f; }
.auth-tabs,.demo-logins,.list-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .auth-tabs { margin-bottom:22px; background:#f2f4f8; padding:4px; border-radius:10px; } .auth-tabs button,.demo-logins button { border:0; border-radius:8px; padding:8px 11px; background:transparent; color:#667286; font-weight:700; } .auth-tabs button.active,.demo-logins button:hover { background:#fff; color:#e64443; box-shadow:0 2px 9px #17203312; } .demo-logins { margin-top:12px; justify-content:center; } .tiny { font-size:.72rem; } .error-card { border-color:#ffd7d7; background:#fffafa; } .error-state .empty-icon { color:#d84848; } .loading .empty-icon { animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.position-list { display:grid; gap:14px; } .position-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:14px; align-items:start; padding:14px; border:1px solid #edf0f5; border-radius:12px; background:#fbfcfe; } .position-number { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#182c55; color:#fff; font-weight:800; } .position-main { min-width:0; } .form-grid.positions { grid-template-columns:1.4fr .5fr 1fr 1fr; } .form-grid.positions .wide { grid-column:1 / 3; } .auto-box { border:1px dashed #dfe3ea; border-radius:8px; padding:10px; background:#fff; color:#778297; font-size:.75rem; } .auto-box span,.line-summary span { display:block; color:#8a95a8; font-size:.72rem; } .auto-box strong { display:block; color:#28364e; margin-top:7px; } .override-field .btn.link { margin-top:6px; } .line-summary { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:10px; padding:10px 12px; background:#fff; border-radius:8px; border:1px solid #edf0f5; } .line-summary strong,.positions-footer strong { color:#182c55; } .positions-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid #edf0f5; }
@media (max-width:900px) { .sidebar { width:72px; padding:18px 9px; } .sidebar-brand span,.workspace,.sidebar nav button:not(.active)::after,.sidebar nav button { font-size:0; } .sidebar nav button { justify-content:center; } .sidebar nav i { font-size:1.1rem; } .user-chip div:not(.avatar),.logout { display:none; } .stat-grid { grid-template-columns:repeat(2,1fr); } .two-col,.settings-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .form-grid.positions { grid-template-columns:1fr 1fr; } .form-grid.positions .wide { grid-column:1 / -1; } .position-row { grid-template-columns:30px 1fr; } .position-row > .btn { grid-column:2; justify-self:start; } }
@media (max-width:620px) { .login-page { grid-template-columns:1fr; } .login-art { display:none; } main { padding:25px 16px; } .topbar { padding:0 16px; } .page-title { align-items:flex-start; flex-direction:column; } .stat-grid { grid-template-columns:1fr 1fr; gap:9px; } .stat-card { padding:13px; } .stat-card strong { font-size:1.4rem; } .form-grid,.form-grid.positions { grid-template-columns:1fr; } .card { padding:16px; } .positions-footer,.line-summary { align-items:flex-start; flex-direction:column; } }