/* Feature specific styles for app pages */

/* Dashboard */
.stat-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.stat-card .stat-top { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; }
.stat-card .stat-top .chip { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-weak); color: var(--on-accent-weak); }
.stat-card.warn .chip { background: var(--warn-bg); color: var(--warn-text); }
.stat-card.bad .chip { background: var(--bad-bg); color: var(--bad-text); }
.stat-card .stat-note { font-size: var(--text-xs); color: var(--text-muted); }
.alert-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--warn-bg); color: var(--warn-text); margin-bottom: var(--space-5); flex-wrap: wrap; }
.alert-banner b { font-weight: 650; }
.alert-banner .btn { margin-left: auto; background: var(--warn-text); color: var(--warn-bg); }
.deadline { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); flex: none; line-height: 1.05; }
.deadline b { font-family: var(--font-display); font-size: var(--text-xl); }
.deadline span { font-size: 11px; color: var(--text-muted); }
.deadline.warn { background: var(--warn-bg); border-color: transparent; }
.deadline.warn span, .deadline.warn b { color: var(--warn-text); }
.deadline.bad { background: var(--bad-bg); border-color: transparent; }
.deadline.bad span, .deadline.bad b { color: var(--bad-text); }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--text-xs); color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Document cards in vault grid view */
.doc-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.doc-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-muted); flex: none; }
.doc-icon.file { background: var(--accent-weak); color: var(--on-accent-weak); }
.doc-preview-frame { width: 100%; height: 62vh; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.doc-preview-img { max-width: 100%; max-height: 62vh; display: block; margin: 0 auto; border-radius: var(--radius-sm); }
.paper { background: #fff; color: #1a1f2b; border: 1px solid var(--border-strong); border-radius: 6px; padding: 36px 40px; font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.65; white-space: pre-wrap; max-height: 60vh; overflow: auto; box-shadow: var(--shadow-sm); }
.version-list li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.version-list li:last-child { border-bottom: 0; }

/* Custom field builder */
.field-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.field-row .field-extra { grid-column: 1 / -1; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.type-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 960px) { .type-layout { grid-template-columns: 1fr; } }
.type-list button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--border); text-align: left; font-size: var(--text-sm); font-weight: 600; }
.type-list button:last-child { border-bottom: 0; }
.type-list button:hover { background: var(--surface-2); }
.type-list button[aria-current="true"] { background: var(--accent-weak); color: var(--on-accent-weak); }
.type-list .n { margin-left: auto; font-weight: 500; color: var(--text-muted); font-size: var(--text-xs); }
.extra-fields { border-top: 1px dashed var(--border-strong); margin-top: var(--space-4); padding-top: var(--space-4); }
.extra-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 640px) { .extra-row { grid-template-columns: 1fr 1fr; } }

/* Composer */
.composer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 860px) { .composer { grid-template-columns: 1fr; } }
.composer .textarea { min-height: 340px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.token-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.token { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-pill); padding: 4px 10px; font-size: var(--text-xs); font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text); }
.token:hover { background: var(--accent-weak); border-color: var(--accent); }

/* Tender detail */
.tender-hero { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; padding: var(--space-5); }
.tender-meta { display: flex; gap: var(--space-5); flex-wrap: wrap; color: var(--text-muted); font-size: var(--text-sm); }
.tender-meta b { display: block; color: var(--text); font-weight: 600; }
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .ring-bg { stroke: var(--surface-3); }
.ring .ring-fg { stroke: var(--accent); transition: stroke-dashoffset var(--dur) var(--ease); }
.ring.warn .ring-fg { stroke: var(--brand-gold); }
.ring.bad .ring-fg { stroke: var(--bad-text); }
.ring .ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 650; font-size: var(--text-lg); }

/* Checklist */
.req-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px var(--space-5); border-bottom: 1px solid var(--border); }
.req-row:last-child { border-bottom: 0; }
.req-row .req-num { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
.req-row .req-title { font-weight: 600; font-size: var(--text-sm); }
.req-row .req-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.req-row .req-actions { display: flex; gap: 2px; }
@media (max-width: 720px) { .req-row { grid-template-columns: 30px minmax(0, 1fr); } .req-row > :nth-child(n+3) { grid-column: 2; } }

/* Readiness */
.gap-list li { display: flex; gap: 12px; align-items: center; padding: 12px var(--space-5); border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.gap-list li:last-child { border-bottom: 0; }

/* Pack builder */
.pack-steps li { display: flex; gap: 12px; padding: 12px var(--space-5); border-bottom: 1px solid var(--border); align-items: center; }
.pack-steps li:last-child { border-bottom: 0; }
.pack-preview { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.pack-log { font-size: var(--text-xs); color: var(--text-muted); max-height: 140px; overflow: auto; }

/* Users and roles */
.role-matrix th, .role-matrix td { text-align: center; }
.role-matrix th:first-child, .role-matrix td:first-child { text-align: left; }
.role-matrix .group-row td { background: var(--surface-2); font-weight: 650; font-size: var(--text-xs); color: var(--text-muted); }

/* Notifications */
.notif { display: flex; gap: 12px; padding: 14px var(--space-5); border-bottom: 1px solid var(--border); align-items: flex-start; }
.notif:last-child { border-bottom: 0; }
.notif.unread { background: var(--accent-weak); }
.notif .n-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--info-bg); color: var(--info-text); }
.notif .n-icon.warn { background: var(--warn-bg); color: var(--warn-text); }
.notif .n-icon.bad { background: var(--bad-bg); color: var(--bad-text); }
.notif .n-title { font-weight: 600; font-size: var(--text-sm); }
.notif .n-body { font-size: var(--text-sm); color: var(--text-muted); }
.notif .n-time { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; }
.notif-pop { width: min(400px, 92vw); padding: 0; right: -8px; }
.notif-pop .notif-list { max-height: 420px; overflow-y: auto; }

/* Settings */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 16px); }
@media (max-width: 860px) { .settings-nav { flex-direction: row; overflow-x: auto; position: static; } }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.settings-nav a:hover { background: var(--surface-2); color: var(--text); }
.settings-nav a[aria-current="page"] { background: var(--accent-weak); color: var(--on-accent-weak); }
.setting-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .grow b { display: block; font-weight: 600; font-size: var(--text-sm); }
.setting-row .grow span { font-size: var(--text-xs); color: var(--text-muted); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--text-sm); font-weight: 600; }
.swatch i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.logo-preview { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.logo-preview img { max-width: 100%; max-height: 100%; }
.thresholds { display: flex; gap: 8px; flex-wrap: wrap; }
.thresholds .input { width: 84px; }

/* Activity */
.activity-row { display: flex; gap: 12px; padding: 12px var(--space-5); border-bottom: 1px solid var(--border); font-size: var(--text-sm); align-items: center; }
.activity-row:last-child { border-bottom: 0; }
.activity-row time { margin-left: auto; font-size: var(--text-xs); color: var(--text-faint); white-space: nowrap; }

.demo-ribbon { background: var(--brand-gold); color: #3b2a00; text-align: center; padding: 8px 16px; font-size: var(--text-xs); font-weight: 600; }

.notif-pop a.notif { padding: 14px 16px; border-radius: 0; align-items: flex-start; width: auto; }
.notif-pop a.notif:hover { background: var(--surface-2); }
.notif-pop a.notif.unread:hover { background: var(--accent-weak); }