/*
 * Design tokens and component overrides matching heroui.com's visual language
 * (Inter type, pill-shaped controls, soft layered shadows, zinc-based dark
 * surfaces). Values were measured directly off the live site: primary blue,
 * button height/radius/weight, card shadow layers, and light/dark surface
 * colors. Secondary/success/warning/danger use HeroUI's documented semantic
 * palette, which isn't exposed on the marketing pages.
 *
 * This file restyles the Bootstrap classes already used across every page
 * (.btn, .card, .form-control, .badge, ...) rather than replacing Bootstrap,
 * so no markup changes were needed to apply it.
 */

:root {
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --radius-pill: 9999px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-card:
        0 2px 4px rgba(0, 0, 0, .04),
        0 1px 2px rgba(0, 0, 0, .06),
        0 0 1px rgba(0, 0, 0, .06);

    --color-primary: #0485f7;
    --color-primary-fg: #fcfcfc;
    --color-primary-hover: #0270d1;
    --color-primary-tint: #e6f2fe;

    --color-secondary: #7828c8;
    --color-secondary-fg: #fcfcfc;

    --color-success: #17c964;
    --color-success-fg: #04351c;
    --color-success-tint: #e2fbec;

    --color-warning: #f5a524;
    --color-warning-fg: #3a2504;
    --color-warning-tint: #fef4e4;

    --color-danger: #f31260;
    --color-danger-fg: #fcfcfc;
    --color-danger-tint: #fee7ef;

    /* Light surfaces (default) */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --fg: #18181b;
    --fg-muted: #71717a;
    --border: #e4e4e7;
    --divider: #ececee;
    --link: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #060607;
        --surface: #18181b;
        --surface-2: #27272a;
        --fg: #fafafa;
        --fg-muted: #a1a1aa;
        --border: #3f3f46;
        --divider: rgba(255, 255, 255, .08);
        --shadow-card:
            0 2px 4px rgba(0, 0, 0, .3),
            0 1px 2px rgba(0, 0, 0, .4),
            0 0 1px rgba(0, 0, 0, .5);

        --color-primary-tint: rgba(4, 133, 247, .18);
        --color-success-tint: rgba(23, 201, 100, .18);
        --color-warning-tint: rgba(245, 165, 36, .18);
        --color-danger-tint: rgba(243, 18, 96, .18);
    }
}

:root[data-theme="dark"] {
    --bg: #060607;
    --surface: #18181b;
    --surface-2: #27272a;
    --fg: #fafafa;
    --fg-muted: #a1a1aa;
    --border: #3f3f46;
    --divider: rgba(255, 255, 255, .08);
    --shadow-card:
        0 2px 4px rgba(0, 0, 0, .3),
        0 1px 2px rgba(0, 0, 0, .4),
        0 0 1px rgba(0, 0, 0, .5);

    --color-primary-tint: rgba(4, 133, 247, .18);
    --color-success-tint: rgba(23, 201, 100, .18);
    --color-warning-tint: rgba(245, 165, 36, .18);
    --color-danger-tint: rgba(243, 18, 96, .18);
}

html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link {
    color: var(--link);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ---------- Buttons: pill-shaped, medium weight, no hard borders ---------- */

.btn {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1;
    border-radius: var(--radius-pill);
    border: none;
    padding: .625rem 1.1rem;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.btn-sm {
    padding: .4rem .85rem;
    font-size: .8125rem;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-fg);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-hover);
    color: var(--color-primary-fg);
}

.btn-success {
    background-color: var(--color-success);
    color: var(--color-success-fg);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-danger-fg);
}

.btn-secondary {
    background-color: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--border);
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--fg);
}

.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--fg);
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Cards: large radius, soft layered shadow, no hard border ---------- */

.card {
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    font-weight: 600;
}

/* ---------- Forms: rounded, subtle border, primary focus ring ---------- */

.form-control, .form-select {
    background: var(--surface);
    color: var(--fg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .55rem .9rem;
    font-family: var(--font-sans);
}

.form-control:focus, .form-select:focus {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}

/* Bootstrap's own placeholder color assumes a light input background (near-black
   at ~75% opacity) and was never overridden - unreadable against --surface in
   dark mode. */
.form-control::placeholder {
    color: var(--fg-muted);
    opacity: 1;
}

/* Native date/time picker glyph defaults to a dark icon baked into the browser,
   invisible against a dark input background - invert it in dark mode only. */
:root[data-theme="dark"] input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
}

.form-select-sm, .form-control-sm {
    border-radius: var(--radius-lg);
}

.form-check-input {
    border-radius: 6px;
    border: 1.5px solid var(--border);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-label {
    color: var(--fg-muted);
    font-weight: 500;
}

/* ---------- Badges: pill, tinted (not solid) ---------- */

.badge {
    font-weight: 600;
    font-size: .75rem;
    border-radius: var(--radius-pill);
    padding: .3rem .65rem;
}

.badge.bg-success { background-color: var(--color-success-tint) !important; color: var(--color-success) !important; }
.badge.bg-danger  { background-color: var(--color-danger-tint) !important; color: var(--color-danger) !important; }
.badge.bg-warning { background-color: var(--color-warning-tint) !important; color: var(--color-warning) !important; }
.badge.bg-info    { background-color: var(--color-primary-tint) !important; color: var(--color-primary) !important; }
.badge.bg-secondary, .badge.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--fg-muted) !important;
    border: 1px solid var(--border);
}

/* ---------- Tables & lists ---------- */

.table {
    color: var(--fg);
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--fg);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--fg);
    --bs-table-border-color: var(--divider);
}

.list-group-item {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--divider);
}

.list-group-item:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

/* ---------- Utility overrides used across pages ---------- */

.text-muted { color: var(--fg-muted) !important; }
.text-dark { color: var(--fg) !important; }
.border { border-color: var(--divider) !important; }
.bg-light, .bg-light-subtle { background-color: var(--surface-2) !important; }
.shadow-sm { box-shadow: var(--shadow-card) !important; }

input[type="checkbox"] { accent-color: var(--color-primary); }

/* ---------- Theme toggle button ---------- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease;
}

.theme-toggle:hover {
    background: var(--surface-2);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* ---------- Sidebar nav links ----------
   ModuleNavLinks.razor lives in RemoteTeams.Shared and is rendered inside each
   host's own NavMenu.razor - scoped CSS isolation can't reach across that
   project boundary (NavMenu.razor.css's `.nav-item ::deep .nav-link` never
   matches because .nav-item itself isn't part of NavMenu's own scope), so
   these rules live here globally instead. */

/* Icons are painted with background-color: currentColor through a CSS mask
   rather than fill='currentColor' inside the SVG itself - background-image
   with an embedded currentColor fill turned out to be unreliable for at
   least one of these glyphs (rendered solid black instead of picking up
   the muted/active text color, illegible in dark mode) - masking is the
   more robust technique and doesn't care what fill the source SVG uses. */
.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-color: currentColor;
    color: var(--fg-muted);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.bi-house-door-fill-nav-menu {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-calendar-week-nav-menu {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM3.5 6a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm2.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z'/%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3E%3C/svg%3E");
}

.bi-clock-fill-nav-menu {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v4l.146.354 2.5 2.5a.5.5 0 0 0 .708-.708L8.5 8.293z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-9.995 7h.169c.51 0 .997-.02 1.469-.078A3 3 0 0 1 2 12.373c0-1.354.744-2.514 1.6-3.334.542-.518 1.185-.947 1.876-1.256A6 6 0 0 0 4.196 7.75a5.6 5.6 0 0 0-1.407-.199c-1.24 0-2.4.375-3.03 1.036-.4.42-.618.94-.618 1.529 0 1.108.87 2.023 1.916 2.023.164 0 .317-.023.454-.07M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

.bi[class*="-nav-menu"] {
    -webkit-mask-image: var(--bi-icon);
    mask-image: var(--bi-icon);
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.35rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-item .nav-link {
    color: var(--fg-muted);
    background: none;
    border: none;
    border-radius: 10px;
    height: 2.75rem;
    display: flex;
    align-items: center;
    line-height: 2.75rem;
    width: 100%;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.nav-item a.active {
    background-color: var(--color-primary-tint);
    color: var(--color-primary);
}

.nav-item a.active .bi {
    color: var(--color-primary);
}

.nav-item .nav-link:hover {
    background-color: var(--surface-2);
    color: var(--fg);
    text-decoration: none;
}

/* Top-bar user menu (CurrentUserBadge) - see its own comment for why this is a native <details>
   rather than Bootstrap's dropdown JS or a hand-rolled Blazor toggle. */
.rt-user-menu {
    position: relative;
}

.rt-user-menu > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.rt-user-menu > summary::-webkit-details-marker {
    display: none;
}

.rt-user-menu > summary:hover {
    color: var(--fg);
}

.rt-user-menu-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 12rem;
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    padding: .25rem;
    z-index: 1000;
}

.rt-user-menu-panel a,
.rt-user-menu-panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .75rem;
    border: 0;
    background: none;
    color: var(--fg);
    border-radius: .375rem;
    text-decoration: none;
    font-size: .875rem;
}

.rt-user-menu-panel a:hover,
.rt-user-menu-panel button:hover {
    background: var(--surface-2);
}