/* Modal, drawer, toast, tabs, tables, stepper. No native alert/confirm/prompt anywhere (AGENTS.md). */

/* Tabs (helpmecto .solution-tabs) */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--text-2); font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .2s; }
.tabs a span, .tabs button span { color: var(--accent-text); font-family: var(--font-mono); font-size: .75rem; }
.tabs a:hover, .tabs button:hover { border-color: var(--accent); color: var(--text); }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* Table */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--panel); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.table__actions { display: flex; align-items: center; gap: 12px; width: max-content; }
.table__actions > .btn { flex: none; min-height: 44px; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--overlay-1); }
.table td strong { color: var(--text); font-weight: 650; }
.table td.mono, .table td .mono { font-size: .86rem; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: #000a; animation: rise .2s var(--ease); }
[data-theme="light"] .modal { background: #0e111655; }
.modal__dialog { display: grid; gap: 20px; width: min(100%, 520px); max-height: calc(100vh - 40px); overflow: auto; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line-2); border-radius: 18px; background: linear-gradient(180deg, var(--overlay-2), var(--overlay-1)), var(--panel); box-shadow: var(--shadow-deep); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal__head h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.modal__close { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.modal__close:hover { color: var(--text); border-color: var(--overlay-6); }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.modal__actions-start { margin-right: auto; }  /* e.g. Delete, away from Save */

/* Toast */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 10px; width: min(380px, calc(100vw - 40px)); }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--glass-2); color: var(--text); font-size: .92rem; box-shadow: var(--shadow-hud); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: rise .25s var(--ease); }
.toast::before { content: ""; width: 8px; height: 8px; margin-top: 7px; flex: none; border-radius: 50%; background: var(--accent); }
.toast--success::before { background: var(--green); }
.toast--error { border-color: var(--red-soft); }
.toast--error::before { background: var(--red); }

/* Stepper (onboarding) */
.stepper { display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; }
.stepper li { position: relative; display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--line-2); color: var(--muted); font-size: .88rem; font-weight: 600; }
.stepper li::before { content: ""; position: absolute; top: -2px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width .8s var(--ease); }
.stepper li span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; }
.stepper li[data-status="done"] { color: var(--text-2); }
.stepper li[data-status="done"]::before { width: 100%; background: var(--green); }
.stepper li[data-status="done"] span { color: var(--green); }
.stepper li[data-status="current"] { color: var(--text); }
.stepper li[data-status="current"]::before { width: 100%; }
.stepper li[data-status="current"] span { color: var(--accent-text); }
.stepper li[data-status="upcoming"] span::after { content: " · soon"; }
@media (max-width: 720px) { .stepper li { font-size: 0; } .stepper li span { font-size: .7rem; } }

/* Clickable rows (data-table rowHref) */
.table--links tbody tr { cursor: pointer; }
.table--links tbody tr:focus-visible td { background: var(--accent-tint); outline: none; }
.table--links tbody tr:hover td { background: var(--overlay-3); }

/* Pager */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.pager__range { margin-right: auto; color: var(--muted); font-size: .86rem; }
.pager__page { color: var(--text-2); font-size: .82rem; }

/* List pages (components/paged-table.js): search + actions above the table */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.list-toolbar__filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: end; gap: 12px; }
.list-toolbar__search { flex: 1 1 280px; max-width: 420px; }
.list-toolbar__select { flex: 0 1 240px; }
.row-arrow { color: var(--muted); }

/* Segmented control: view switches, workspace tabs, list filters */
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); }
.segmented button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font-size: .88rem; font-weight: 650; cursor: pointer; transition: background .2s, color .2s; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"] { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-border); }
.segmented--lg button { min-height: 44px; padding: 8px 20px; font-size: .95rem; }
.segmented__badge { padding: 2px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-text); font-family: var(--font-mono); font-size: .68rem; }
.list-toolbar__filter { align-self: end; margin-bottom: 4px; }