/* Shared UI-kit primitives — Button, Input, Tag, Avatar, Icon. Uses colors_and_type.css tokens. */
/* global */
*, *::before, *::after { box-sizing: border-box; }
.app { font-family: var(--font-sans); color: var(--color-fg); }

/* Button */
.btn{font-family:var(--font-ui);font-weight:700;font-size:14px;padding:8px 16px;border-radius:6px;border:0;cursor:pointer;display:inline-flex;gap:6px;align-items:center;line-height:1;transition:background var(--dur-fast) var(--ease-std)}
.btn-primary{background:var(--color-brand);color:var(--color-brand-text)}
.btn-primary:hover{background:var(--color-brand-hover)}
.btn-outline{background:#fff;color:var(--tan-ink);border:1px solid rgba(6,31,39,.24)}
.btn-outline:hover{background:rgba(6,31,39,.04)}
.btn-ghost{background:transparent;color:var(--tan-ink)}
.btn-ghost:hover{background:rgba(6,31,39,.06)}
.btn-danger{background:var(--tan-red);color:#fff}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-lg{padding:11px 20px;font-size:15px}
.btn-icon{width:32px;height:32px;padding:0;justify-content:center}

/* Input */
.input{display:flex;align-items:center;gap:8px;border:1px solid rgba(6,31,39,.24);border-radius:6px;padding:8px 12px;background:#fff;font:400 14px Roboto;color:var(--tan-ink)}
.input input{border:0;outline:0;flex:1;font:inherit;color:inherit;background:transparent}
.input:focus-within{border-color:var(--tan-cyan);box-shadow:0 0 0 3px rgba(61,202,220,.3)}

/* Tag */
.tag{font-family:Figtree,Inter,sans-serif;font-weight:600;font-size:12px;padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;line-height:1.4}
.tag-todo{background:rgba(6,31,39,.08);color:rgba(6,31,39,.7)}
.tag-progress{background:rgba(38,130,143,.12);color:#26828F}
.tag-review{background:rgba(255,156,69,.18);color:#B55E0F}
.tag-approve{background:rgba(151,71,255,.14);color:#7B3BE6}
.tag-done{background:rgba(36,159,88,.14);color:#249F58}
.tag-paused{background:rgba(6,31,39,.06);color:rgba(6,31,39,.4)}
.tag-rejected{background:rgba(249,57,57,.12);color:#AF010D}

/* Avatar */
.avatar{width:28px;height:28px;border-radius:999px;background:var(--tan-cyan);color:var(--tan-ink);font:700 11px Inter;display:inline-flex;align-items:center;justify-content:center;flex:none}

/* Caps label */
.caps{font-family:Figtree,Inter,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(6,31,39,.55);font-size:11px}

/* Sidebar */
.sidebar{width:248px;background:#fff;border-right:1px solid rgba(6,31,39,.08);display:flex;flex-direction:column;padding:16px 0;flex:none}
.sidebar-logo{padding:4px 20px 20px;font:800 22px Inter;letter-spacing:-1px;color:var(--tan-ink)}
.sidebar-sec{padding:16px 20px 6px;font-family:Figtree,Inter;font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(6,31,39,.45)}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:7px 20px;color:rgba(6,31,39,.75);font:500 13px Roboto;cursor:pointer;border-left:2px solid transparent}
.sidebar-item:hover{background:rgba(6,31,39,.04);color:var(--tan-ink)}
.sidebar-item.active{color:var(--tan-ink);background:rgba(61,202,220,.1);border-left-color:var(--tan-cyan);font-weight:600}
.sidebar-item svg{flex:none}

/* Panel / card */
.panel{background:#fff;border:1px solid rgba(6,31,39,.12);border-radius:8px}

/* Row item (inbox-like) */
.row-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;padding:12px 20px;border-top:1px solid rgba(6,31,39,.08);font-size:14px}
.row-item:first-child{border-top:0}
.row-item:hover{background:rgba(6,31,39,.03)}