/* letty — lty v3 page components (dashboard, tables, tenancy lifecycle,
   login, approval modal). Tokens, base and shell live in style.css, which
   loads first. */

svg.i{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}


/* shell extras */
.lty-userfoot .lty-iconbtn{margin-left:auto}
.lty-logout-form{display:contents}
.lty-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:.84rem;color:var(--lty-ink-2)}
.lty-pagination a{color:var(--lty-brand-ink);text-decoration:none}
.lty-pagination a:hover{text-decoration:underline}
.lty-pagination .dim{opacity:.4}
.lty-sort{color:inherit;text-decoration:none}
.lty-sort:hover{color:var(--lty-brand-ink)}
.lty-sort.is-active{color:var(--lty-brand-ink);font-weight:600}
.lty-filter{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.lty-filter select{padding:7px 10px;border:1px solid var(--lty-line-2);border-radius:var(--lty-r-sm);background:var(--lty-surface);font:inherit}
button.lty-iconbtn{background:none;border:0;cursor:pointer;font:inherit;padding:0}
.lty-iconbtn{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--lty-r-sm);color:var(--lty-ink-2)}
.lty-iconbtn:hover{background:var(--lty-soft);color:var(--lty-ink)}
.lty-topbar .lty-iconbtn{background:var(--lty-surface);border:1px solid var(--lty-line-2)}
.lty-sidebar .lty-iconbtn{color:var(--lty-rail-ink)}
.lty-sidebar .lty-iconbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.lty-iconbtn .bd{position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:99px;background:var(--lty-danger)}

/* collapsed sidebar */
@media(max-width:1000px){
  .lty-brand-name,.lty-brand-sub,.lty-nav-item span.t,.lty-nav-label,.lty-userfoot-name,.lty-userfoot-role,.lty-nav-item .n{display:none}
}

/* dashboard */
.lty-statgrid{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:28px;border-top:2px solid var(--lty-ink);border-bottom:1px solid var(--lty-line)}
.lty-statgrid .lty-card{background:none;border:0;border-radius:0}
.lty-stat{padding:14px 20px 18px 0;min-width:0}
.lty-stat + .lty-stat{padding-left:20px;border-left:1px solid var(--lty-line)}
.lty-stat-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lty-ink-3);display:flex;align-items:center;gap:8px}
.lty-stat-value{font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:12px;line-height:1;color:#000}
.lty-stat-note{font-size:.84rem;color:var(--lty-ink-3);margin-top:6px}

.lty-meta{list-style:none}
.lty-meta li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--lty-line);font-size:.88rem}
.lty-meta li:last-child{border-bottom:none;padding-bottom:0}
.lty-meta li:first-child{padding-top:0}
.lty-meta .k{color:var(--lty-ink-2)}
.lty-meta .v{font-weight:500;text-align:right}
.lty-meta .v.mono{font-family:var(--lty-mono);font-weight:400;font-variant-numeric:tabular-nums;font-size:.76rem}

.lty-feed{list-style:none}
.lty-feed li{display:flex;gap:12px;align-items:flex-start;padding:13px 20px;border-bottom:1px solid var(--lty-line)}
.lty-feed li:last-child{border-bottom:none}
.lty-feed li:hover{background:var(--lty-soft)}
.lty-feed li:last-child:hover{border-radius:0 0 var(--lty-r) var(--lty-r)}
.lty-feed .dot{margin-top:7px}
.lty-feed-body{flex:1;min-width:0}
.lty-feed-title{font-size:.9rem;font-weight:600;letter-spacing:-.015em}
.lty-feed-sub{font-size:.82rem;color:var(--lty-ink-2);margin-top:2px}
.lty-feed-when{font-family:var(--lty-mono);font-size:.68rem;color:var(--lty-ink-3);white-space:nowrap;margin-top:4px}

@media(max-width:1000px){
  .lty-statgrid{grid-template-columns:repeat(2,1fr)}
  .lty-stat:nth-child(3){padding-left:0;border-left:0}
  .lty-stat:nth-child(n+3){border-top:1px solid var(--lty-line)}
}

/* properties */
.lty-btn-primary{background:var(--lty-ink);color:#FBFBF9}
.lty-btn-primary:hover{background:#2A2A28}
.lty-btn-accent{background:var(--lty-accent);color:#000}
.lty-btn-ghost{border-color:var(--lty-line-2);background:var(--lty-surface);color:var(--lty-ink)}
.lty-btn-ghost:hover{border-color:var(--lty-ink)}
.lty-table-wrap{overflow-x:auto}
.lty-main-cell{font-weight:600;letter-spacing:-.015em;line-height:1.3}
.lty-sub-cell{font-size:.8rem;color:var(--lty-ink-3);margin-top:2px}
.lty-table tfoot td{border-radius:0 0 var(--lty-r) var(--lty-r)}

/* rent */
.lty-btn-sm{padding:6px 12px;font-size:.8rem}
.lty-head-actions + .lty-head-meta,.lty-head-meta + .lty-head-actions{margin-left:0}

/* tenancy */
.lty-notice .lty-btn{margin-left:auto;flex:none}
.lty-notice .dot{margin-top:1px}
.lty-life{display:flex;align-items:flex-start;padding:6px 0 2px}
.lty-life-step{display:flex;flex-direction:column;gap:7px;min-width:110px}
.lty-life-dot{width:10px;height:10px;border-radius:99px;background:var(--lty-line-2);margin-top:1px}
.lty-life-step.done .lty-life-dot{background:var(--lty-ink)}
.lty-life-step.now .lty-life-dot{background:var(--lty-accent);border:2.5px solid #000;width:14px;height:14px;margin:-2px 0 0 -2px}
.lty-life-name{font-size:.84rem;font-weight:600;color:var(--lty-ink-3)}
.lty-life-step.done .lty-life-name,.lty-life-step.now .lty-life-name{color:var(--lty-ink)}
.lty-life-date{font-family:var(--lty-mono);font-size:.66rem;color:var(--lty-ink-3);margin-top:-3px}
.lty-life-bar{height:2px;flex:1;background:var(--lty-line);margin:5px 12px 0 -66px;min-width:30px}
.lty-life-bar.done{background:var(--lty-ink)}
/* deviations from the mock: one Agreements card stacks several agreement
   lifecycles, and the issue form sits in the card head */
.lty-agreement + .lty-agreement{border-top:1px solid var(--lty-line);margin-top:16px;padding-top:16px}
.lty-agreement-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.lty-agreement-head .ref{margin-left:auto}
.lty-card-head .inline-form{margin-left:auto}

/* actions */
.lty-feed .lty-btn{margin-top:0;align-self:center}
/* deviation from the mock: mark-done posts as a real form in the feed row */
.lty-feed form{align-self:center;display:flex}

/* login */
.lty-login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--lty-bg)}
.lty-login-card{width:100%;max-width:400px}
.lty-login-brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px;text-align:center}
.lty-login-brand .lty-mark{width:44px;height:44px;font-size:.95rem;border-radius:8px}
.lty-login-brand h1{font-size:clamp(1.6rem,3.6vw,2.1rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:#000}
.lty-login-brand p{font-size:.92rem;color:var(--lty-ink-2);margin-top:10px}
.lty-login .lty-card-body{padding:28px}
.lty-login .lty-btn{width:100%;justify-content:center;padding:11px 16px;font-size:.92rem}
.lty-field{margin-bottom:16px}
.lty-field label{display:block;font-size:.8rem;font-weight:600;color:var(--lty-ink);margin-bottom:6px}
.lty-input{width:100%;border:1px solid var(--lty-line-2);border-radius:var(--lty-r-sm);padding:9px 12px;font:inherit;font-size:.92rem;background:var(--lty-surface)}
.lty-input:focus{outline:none;border-color:#000;box-shadow:0 0 0 1px #000}
.lty-login-foot{margin-top:24px;text-align:center;font-family:var(--lty-mono);font-size:.68rem;color:var(--lty-ink-3)}
/* deviation from the mock: flashed auth errors render inside the card */
.lty-login .flashes{margin:0 0 14px}

/* modal */
.lty-scrim{position:fixed;inset:0;background:rgba(17,17,16,.45);z-index:50;display:none;align-items:center;justify-content:center;padding:24px}
.lty-scrim.is-open{display:flex}
.lty-modal{background:var(--lty-surface);border-radius:var(--lty-r);box-shadow:var(--lty-shadow-lg);width:100%;max-width:600px;max-height:88vh;overflow:auto}
.lty-modal-head{display:flex;align-items:center;gap:10px;padding:22px 24px 0}
.lty-modal-title{font-size:1.25rem;font-weight:600;letter-spacing:-.035em}
.lty-modal-head .lty-iconbtn{margin-left:auto}
.lty-modal-body{padding:14px 24px 22px}
.lty-modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--lty-line)}
.lty-diff{border:1px solid var(--lty-line);border-radius:var(--lty-r-md);overflow:hidden;margin-top:14px}
.lty-diff-head,.lty-diff-row{display:grid;grid-template-columns:130px 1fr 1fr}
.lty-diff-head>div{padding:8px 14px;font-size:.7rem;color:var(--lty-ink-3);border-bottom:1px solid var(--lty-line);background:var(--lty-soft)}
.lty-diff-row>div{padding:9px 14px;border-bottom:1px solid var(--lty-line);font-size:.78rem}
.lty-diff-row:last-child>div{border-bottom:none}
.lty-diff-row .f{color:var(--lty-ink-2)}
.lty-diff-row .old{font-family:var(--lty-mono);font-size:.73rem;color:var(--lty-ink-3);text-decoration:line-through}
.lty-diff-row .new{font-family:var(--lty-mono);font-size:.73rem;color:var(--lty-ink);font-weight:500}
/* deviation from the mock: the checkbox hack replaces the .is-open JS toggle */
.lty-modal-toggle{display:none}
.lty-modal-toggle:checked + .lty-scrim{display:flex}
label.lty-btn,label.lty-iconbtn{cursor:pointer}