/*
 * Shared UI component styles for the Ashby suite — pairs with shared-ui.js.
 * Requires shared-tokens.css to be loaded first (uses its custom properties).
 *
 * Deliberately self-contained: button variants here are scoped under
 * .modal-actions rather than global `button.secondary`/`button.danger`
 * rules, so loading this on an app with its own established button styling
 * (e.g. todo) only affects buttons inside a shared confirm dialog, not
 * every button on the page.
 */

/* ---- Toasts ---- */
.toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.toast {
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted); border-radius: 6px; padding: 12px 14px;
    font-size: 0.9rem; box-shadow: 0 4px 16px rgba(0,0,0,0.15); cursor: pointer;
    opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-left-color: var(--danger); }
.toast-success { border-left-color: var(--success-text); }
.toast-action { display: flex; align-items: center; gap: 12px; }
.toast-action-btn {
    background: none; border: none; color: var(--primary); font-weight: 700; font-size: 0.85rem;
    padding: 0; cursor: pointer; text-decoration: underline; flex-shrink: 0;
}
.toast-action-btn:hover { background: none; color: var(--primary-hover); }

/* ---- Confirm modal ---- */
.modal-overlay {
    position: fixed; inset: 0; background: var(--overlay-bg); z-index: 1001;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; max-width: 380px; width: 100%; box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.modal h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--text); }
.modal p.muted { color: var(--text-muted); margin: 0 0 12px; }
.modal-actions {
    display: flex; gap: 8px; margin-top: 16px; align-items: center; justify-content: flex-end;
}
.modal-actions button {
    display: inline-block; border: none; padding: 8px 16px; border-radius: 8px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.modal-actions button[data-action="confirm"] { background: var(--primary); color: #fff; }
.modal-actions button[data-action="confirm"]:hover { background: var(--primary-hover); }
.modal-actions button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.modal-actions button.secondary:hover { background: var(--bg); }
.modal-actions button.danger { background: var(--danger); color: #fff; }
.modal-actions button.danger:hover { background: var(--danger-hover); }

/* ---- Loading skeletons ---- */
.skeleton {
    position: relative; overflow: hidden; background: var(--border); border-radius: 4px;
}
.skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
    animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
.skeleton-row { pointer-events: none; }

/* ---- App switcher ---- */
/* Extracted from todo/styles.css, translated onto the shared tokens here
   (--text-secondary -> --text-muted, --bg-primary -> --surface,
   --border-color -> --border, --border-radius -> --radius,
   --primary-color -> --primary). #fff1ee (the hover/current tint) has no
   shared token but is already the same literal value as roadmap's Tailwind
   `brand-50`, so suite-wide consistency holds without one. */
.app-switcher {
    position: relative;
}
.app-switcher-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; background: none; border: none;
    border-radius: 9999px; color: var(--text-muted); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.app-switcher-btn:hover { background: #fff1ee; color: var(--text); }
.app-switcher-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
    display: flex; flex-direction: row; gap: 4px; padding: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
/* An author-stylesheet `display` rule on this element would otherwise beat
   the UA stylesheet's [hidden] { display: none } regardless of specificity,
   since author styles always win over UA styles — so the `hidden` attribute
   needs its own explicit override here to actually hide the menu. */
.app-switcher-menu[hidden] { display: none; }
.app-switcher-menu a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 64px; padding: 8px 4px; border-radius: 8px; color: var(--text-muted);
    text-decoration: none; font-size: 0.75rem; font-weight: 500; text-align: center;
}
.app-switcher-menu a img { border-radius: 6px; }
.app-switcher-menu a:hover { background: var(--surface-alt); }
.app-switcher-menu a.current { background: #fff1ee; color: var(--primary); }