:root { --ink:#152433; --muted:#5a6c7b; --line:#d6e0e8; --surface:#fff; --canvas:#f4f7fa; --accent:#005f8f; --accent-dark:#00476b; --danger:#a22727; --success:#1c6b42; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
.app-header,main { max-width:1180px; margin:0 auto; padding-left:24px; padding-right:24px; }
.app-header { min-height:128px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
main { padding-bottom:48px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.8rem,4vw,2.5rem); } h2,h3 { margin-bottom:8px; }
.eyebrow { margin-bottom:6px; color:var(--accent); font-size:.78rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; } .muted { color:var(--muted); }
.panel { padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 4px 18px rgb(19 40 58 / 6%); }
.login-panel { max-width:640px; margin:24px auto; } .intro-row { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:24px 0; } .toolbar-actions,.session-status,.dialog-actions { display:flex; align-items:center; gap:12px; } .session-status { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; } .form-grid label { display:grid; gap:6px; font-weight:650; font-size:.92rem; } .input-hint { color:var(--muted); font-size:.78rem; font-weight:400; } .full-width,.form-actions { grid-column:1 / -1; } .form-actions { display:flex; gap:8px; align-items:center; }
.form-grid[hidden] { display:none !important; }
input,select,textarea { width:100%; padding:10px 12px; border:1px solid #aebdca; border-radius:7px; background:#fff; color:var(--ink); font:inherit; } textarea { min-height:220px; resize:vertical; } input:focus,select:focus,textarea:focus { outline:3px solid rgb(0 95 143 / 20%); border-color:var(--accent); }
.login-panel #remember-sso { width:auto; padding:0; accent-color:var(--accent); } .login-panel .form-grid label:has(#remember-sso) { display:flex; align-items:center; gap:8px; grid-column:1 / -1; } .login-panel .form-grid > p { grid-column:1 / -1; margin-bottom:0; color:var(--muted); font-size:.9rem; } .login-panel .form-grid > .button { grid-column:1 / -1; }
.button { width:fit-content; padding:10px 15px; border:1px solid var(--accent); border-radius:7px; background:var(--accent); color:#fff; cursor:pointer; font:inherit; font-weight:700; } a.button { text-decoration:none; } .button:hover { background:var(--accent-dark); border-color:var(--accent-dark); } .button-secondary { background:#fff; color:var(--accent); } .button-secondary:hover { color:#fff; }
.table-wrapper { overflow-x:auto; } .project-table { width:100%; border-collapse:collapse; min-width:920px; } .project-table th,.project-table td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .project-table th { color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; } .project-table td { font-size:.92rem; } .project-table td.description { min-width:260px; white-space:pre-wrap; } .repository-link { color:var(--accent); font-weight:700; } .tag { display:inline-block; padding:2px 8px; border-radius:999px; background:#e8f2f7; color:#174e6b; font-weight:700; } .row-actions { display:flex; flex-wrap:wrap; gap:8px; } .button-small { padding:6px 10px; font-size:.86rem; } .button-danger { border-color:var(--danger); background:var(--danger); } .button-danger:hover { border-color:#7e1616; background:#7e1616; } .button:disabled { cursor:not-allowed; opacity:.55; } .project-dialog { width:min(680px,calc(100vw - 32px)); padding:0; border:0; border-radius:14px; box-shadow:0 18px 50px rgb(19 40 58 / 28%); } .project-dialog::backdrop { background:rgb(21 36 51 / 48%); } .project-dialog form { padding:28px; margin:0; } .dialog-heading h2 { margin-bottom:8px; } .error-message { color:var(--danger); font-weight:650; } .status-message { color:var(--success); font-weight:650; }
.project-detail-dialog { width:90vw; max-width:90vw; height:90vh; max-height:90vh; } .detail-dialog-content { padding:28px; overflow:auto; height:90vh; max-height:90vh; } .detail-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .detail-section { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); } .detail-section h3 { margin-bottom:6px; } .compact-form { margin-top:14px; } .compact-form label { font-size:.86rem; } .compact-table { min-width:660px; margin-top:16px; } .artifact-table { min-width:760px; } .artifact-table th:last-child,.artifact-table td:last-child { min-width:360px; } .status-draft { background:#fff3d6; color:#755600; } .status-approved { background:#e2f4e8; color:#1c6b42; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; } .section-heading h3 { margin:0; } #item-detail-dialog { width:min(1100px,calc(100vw - 32px)); max-width:1100px; max-height:90vh; } #item-detail-dialog .detail-dialog-content { height:auto; max-height:90vh; } #item-detail-host form { padding:0; } #item-detail-host textarea { min-height:280px; }
.detail-tabs { display:flex; gap:4px; margin-top:24px; padding-bottom:1px; border-bottom:1px solid var(--line); overflow-x:auto; } .detail-tab { padding:10px 13px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-weight:700; white-space:nowrap; } .detail-tab:hover { color:var(--accent); } .detail-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); } .detail-tab-panel[hidden] { display:none; } .artifact-actions { display:flex; align-items:center; gap:8px; }
@media (max-width:760px) { .app-header,.intro-row { align-items:flex-start; flex-direction:column; } .form-grid { grid-template-columns:1fr; } .full-width { grid-column:auto; } }