:root { color: #182837; background: #f5f7f8; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; } body { margin: 0; } button, input { font: inherit; } button { cursor: pointer; }
.login-layout { min-height: 100vh; padding: 40px 24px; display: grid; align-content: center; justify-items: center; gap: 32px; background: radial-gradient(circle at 80% 10%, #dcece6 0, transparent 34%), #f5f7f8; }
.brand { display: flex; align-items: center; gap: 10px; } .brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: white; background: #116149; font-weight: 800; } .brand strong, .brand small { display: block; } .brand small { color: #70808d; font-size: 12px; }
.card { background: white; border: 1px solid #e2e8eb; border-radius: 15px; box-shadow: 0 16px 40px #213b4814; } .login-card { width: min(100%, 390px); padding: 32px; } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 8px; font-size: 30px; letter-spacing: -.8px; } .eyebrow, .label { color: #45806c; font-weight: 750; font-size: 11px; letter-spacing: .1em; } .muted { color: #6d7d89; } label { display: grid; gap: 7px; margin-top: 18px; color: #344651; font-size: 14px; font-weight: 600; } input { border: 1px solid #cbd6da; border-radius: 8px; padding: 11px 12px; color: #182837; background: white; } input:focus { outline: 3px solid #cfe6dd; border-color: #38826a; } button { border: 0; border-radius: 8px; padding: 12px 16px; font-weight: 700; background: #116149; color: white; } .login-card button { width: 100%; margin-top: 25px; } .demo-note { margin: 20px 0 0; color: #81909a; text-align: center; font-size: 12px; } .form-error { padding: 10px; color: #9c2e2e; background: #fff1f1; border-radius: 7px; font-size: 14px; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; } aside { padding: 28px 20px; color: #e7f4ee; display: flex; flex-direction: column; background: #123a32; } aside .brand small { color: #a8c1b6; } aside .brand-mark { background: #a7d6c4; color: #123a32; } nav { margin-top: 54px; } nav a { display: block; padding: 11px 12px; border-radius: 7px; color: #c7ddd3; text-decoration: none; font-size: 14px; } nav .active { color: white; background: #276050; } .account { margin-top: auto; display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; font-size: 12px; } .account strong, .account small { display: block; } .account small { color: #a8c1b6; } .avatar { display: grid; place-items: center; height: 34px; border-radius: 50%; color: #133d33; font-weight: 800; background: #b6dfcf; } .text-button { grid-column: 2; width: fit-content; padding: 3px 0; background: transparent; color: #b6dfcf; font-size: 12px; }
.content { max-width: 1240px; width: 100%; padding: 50px clamp(24px, 5vw, 76px); margin: 0 auto; } header { display: flex; justify-content: space-between; gap: 20px; align-items: start; } .read-only { color: #276050; border: 1px solid #aed3c4; border-radius: 99px; padding: 7px 11px; background: #edf8f3; font-size: 13px; white-space: nowrap; } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 36px 0 15px; } .search { display: flex; align-items: center; gap: 8px; width: min(100%, 500px); margin: 0; padding: 0 11px; border: 1px solid #cbd6da; border-radius: 8px; background: white; color: #6d7d89; } .search input { width: 100%; border: 0; padding-left: 0; } .search input:focus { outline: 0; } .client-list { overflow: hidden; background: white; border: 1px solid #e0e7e9; border-radius: 12px; } .client-row { display: grid; grid-template-columns: 1.4fr 1.3fr 1.25fr auto; gap: 22px; padding: 21px 23px; align-items: center; border-bottom: 1px solid #edf0f1; } .client-row:last-child { border-bottom: 0; } .client-row h2 { margin-bottom: 5px; color: #1b303d; font-size: 15px; } .client-row p { margin: 5px 0 0; color: #697983; font-size: 13px; line-height: 1.5; } .status { font-weight: 700; font-size: 12px; } .current { color: #21805d; } .renewal { color: #a25d16; } .policy-count { color: #687985; font-size: 13px; white-space: nowrap; } .empty { padding: 44px; text-align: center; color: #70808d; } .client-row.with-actions { grid-template-columns: 1.4fr 1.3fr 1.25fr auto auto; } .row-action { padding: 8px 13px; color: #1d6b53; background: #e9f5f0; font-size: 13px; } .row-action:hover { background: #d9ede5; }
.form-dialog { width: min(100%, 430px); padding: 28px; } .form-dialog::backdrop { background: #10251f73; } .form-dialog h2 { margin-bottom: 6px; font-size: 22px; letter-spacing: -.4px; } .form-dialog .muted { margin: 0; font-size: 13px; } .form-dialog .form-error { margin: 18px 0 0; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; } .ghost { color: #37505c; background: #eef2f3; } .ghost:hover { background: #e3e9eb; }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } aside { min-height: auto; padding: 16px 22px; display: flex; flex-direction: row; align-items: center; } aside nav { display: none; } .account { margin: 0 0 0 auto; grid-template-columns: 34px 1fr; } .account .text-button { display: none; } .client-row, .client-row.with-actions { grid-template-columns: 1fr 1fr; } .policy-count { display: none; } .row-actions { justify-self: end; } }
@media (max-width: 580px) { .content { padding: 30px 17px; } header { display: block; } .read-only { display: inline-block; margin-top: 14px; } .toolbar { display: block; margin-top: 26px; } .toolbar > .muted { display: block; margin-top: 12px; } .client-row, .client-row.with-actions { grid-template-columns: 1fr; gap: 13px; } .form-dialog { padding: 22px; } }