/* wwwroot/css/custom.css */

.table-row-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
    width: 100%;
}

.clickable-row:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.clickable-cell {
    padding: 0;
}

.clickable-content {
    display: flex;
    padding: 0.75rem;
}

    .clickable-content > div {
        flex: 1;
    }

/* =========================================================
   Recupera branding layer (internal tool)
   ========================================================= */

:root {
    --rs-header-bg: #737373;
    --rs-header-border: #5a5a5a;
    --rs-accent: #BC4E4E;
    --rs-accent-hover: #a54040;
    --rs-page-bg: #f4f5f7;
    --rs-text: #111827;
    /* Dropdown theme in header */
    --rs-dropdown-bg: #666666;
    --rs-dropdown-text: #ffffff;
    --rs-dropdown-divider: rgba(255,255,255,0.18);
}

/* Global app polish */
/* Global app polish */
.rs-theme {
    background: var(--rs-page-bg);
    color: var(--rs-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .rs-theme a {
        color: var(--rs-accent);
    }

        .rs-theme a:hover {
            color: var(--rs-accent-hover);
        }

    /* Buttons */
    .rs-theme .btn-primary {
        background-color: var(--rs-accent);
        border-color: var(--rs-accent);
        color: #fff !important; /* <-- add */
    }

        .rs-theme .btn-primary:hover,
        .rs-theme .btn-primary:focus,
        .rs-theme .btn-primary:active,
        .rs-theme .btn-primary.active,
        .rs-theme .show > .btn-primary.dropdown-toggle {
            background-color: var(--rs-accent-hover);
            border-color: var(--rs-accent-hover);
            color: #fff !important; /* <-- add */
        }

        /* If anything inside the button is inheriting a dark color (icons/spans) */
        .rs-theme .btn-primary * {
            color: #fff !important;
        }

        /* Optional: disabled still readable */
        .rs-theme .btn-primary:disabled,
        .rs-theme .btn-primary.disabled {
            color: #fff !important;
            opacity: 0.85;
        }

    .rs-theme .btn-outline-primary {
        color: var(--rs-accent);
        border-color: var(--rs-accent);
    }

        .rs-theme .btn-outline-primary:hover {
            background-color: var(--rs-accent);
            border-color: var(--rs-accent);
            color: #fff;
        }

    /* Focus rings */
    .rs-theme .form-control:focus,
    .rs-theme .form-select:focus {
        border-color: rgba(188, 78, 78, 0.55);
        box-shadow: 0 0 0 0.2rem rgba(188, 78, 78, 0.22);
    }

    /* Cards/modals/dropdowns */
    .rs-theme .card,
    .rs-theme .modal-content,
    .rs-theme .dropdown-menu {
        border-radius: 12px;
    }

    .rs-theme .card,
    .rs-theme .modal-content {
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }

/* ----------------------------
   Header (desktop, tight, clean)
   ---------------------------- */

.rs-header,
.rs-header * {
    box-sizing: border-box;
}

.rs-header {
    background: var(--rs-header-bg);
    border-bottom: 1px solid var(--rs-header-border);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

    /* Tight padding so header isn't huge */
    .rs-header .rs-header-inner {
        max-width: 1380px;
        margin: 0 auto;
        padding: 0.35rem 1.25rem;
    }

    /* Remove Bootstrap default navbar padding */
    .rs-header .navbar {
        padding: 0;
        min-height: 56px;
    }

    /* Brand */
    .rs-header .rs-brand {
        color: #fff !important;
        text-decoration: none;
        font-weight: 800;
        letter-spacing: 0.2px;
    }

        .rs-header .rs-brand:hover {
            color: #f3f3f3 !important;
        }

    /* IMPORTANT: hard constrain logo (fixes your screenshot) */
    .rs-header .rs-logo {
        height: 38px; /* <- controls header size */
        width: auto !important; /* override any global img { width:100% } rules */
        max-width: none !important;
        display: block;
    }

    .rs-header .rs-brand-text {
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1;
    }

    /* Nav */
    .rs-header .rs-nav {
        gap: 0.15rem;
        flex-wrap: nowrap;
    }

        .rs-header .rs-nav .nav-link {
            color: #fff !important;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 650;
            padding: 0.35rem 0.65rem;
            border-radius: 10px;
            white-space: nowrap;
            transition: background 0.15s ease, transform 0.1s ease;
        }

            .rs-header .rs-nav .nav-link:hover,
            .rs-header .rs-nav .nav-link:focus {
                color: #fff !important;
                background: rgba(255,255,255,0.10);
                transform: translateY(-1px);
            }

    /* Dropdown menus feel modern */
    .rs-header .dropdown-menu {
        border: 1px solid rgba(0,0,0,0.12);
        padding: 0.40rem;
        margin-top: 0.55rem;
        box-shadow: 0 10px 28px rgba(0,0,0,0.18);
        /* Fix: prevent ?black text? + make header dropdowns consistent */
        background: var(--rs-dropdown-bg);
    }

    .rs-header .dropdown-item {
        border-radius: 10px;
        padding: 0.55rem 0.75rem;
        /* Fix: keep readable text color */
        color: var(--rs-dropdown-text);
    }

        /* Hover for mouse, focus-visible for keyboard */
        .rs-header .dropdown-item:hover,
        .rs-header .dropdown-item:focus-visible {
            background: rgba(188, 78, 78, 0.20);
            color: var(--rs-dropdown-text);
        }

        /* If focus happened via mouse, don't keep the highlight (but keep color) */
        .rs-header .dropdown-item:focus:not(:focus-visible) {
            background: transparent;
            color: var(--rs-dropdown-text);
        }

        .rs-header .dropdown-item.active,
        .rs-header .dropdown-item:active {
            background: var(--rs-accent);
            color: #fff;
        }

    .rs-header .dropdown-divider {
        border-top-color: var(--rs-dropdown-divider);
    }

    /* Nested submenu support (your dropend dropdown-submenu) */
    .rs-header .dropdown-submenu {
        position: relative;
    }

        /* ?Hover bridge?: makes it MUCH easier to move right into the submenu */
        .rs-header .dropdown-submenu::after {
            content: "";
            position: absolute;
            top: 0;
            right: -14px;
            width: 14px;
            height: 100%;
        }

        .rs-header .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -0.25rem;
            /* Reduce the gap so the submenu doesn?t collapse as you move right */
            margin-left: 0.10rem;
        }

        /* Keep parent item highlighted while submenu is open */
        .rs-header .dropdown-submenu.show > .dropdown-toggle {
            background: rgba(188, 78, 78, 0.20);
            color: var(--rs-dropdown-text);
        }

        .rs-header .dropdown-submenu > .dropdown-toggle::after {
            float: right;
            margin-top: 0.45rem;
        }

/* =========================================================
   Layout fix: keep the footer from overlapping long pages
   (replaces the old "sticky footer" absolute positioning pattern)
   ========================================================= */
body.rs-theme {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* The RenderBody container should grow and push footer down */
    body.rs-theme > .container,
    body.rs-theme > .container-fluid {
        flex: 1 0 auto;
    }

/* Ensure footer participates in normal document flow */
footer.footer {
    margin-top: auto;
    position: static !important;
    height: auto !important;
    line-height: normal !important;
}

/* If site.css still has margin-bottom for the old sticky-footer pattern, neutralize it */
body {
    margin-bottom: 0 !important;
}
/* =========================================================
   Law Office Scopes — Record Types + Scopes as scrollable lists
   ========================================================= */
#lo-scopes .lo-list-wrapper {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background: var(--bs-body-bg, #fff);
}

    #lo-scopes .lo-list-wrapper.is-disabled {
        opacity: 0.65;
        pointer-events: none;
    }

#lo-scopes .lo-count-badge {
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: rgba(0,0,0,0.04);
    color: inherit;
    font-weight: 600;
}

#lo-scopes .lo-scope-group-header {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    background: rgba(0,0,0,0.02);
    pointer-events: none;
}

/* Use Recupera accent for active rows instead of Bootstrap blue */
.rs-theme #lo-scopes .list-group-item.active {
    background-color: var(--rs-accent);
    border-color: var(--rs-accent);
    color: #fff;
}

    .rs-theme #lo-scopes .list-group-item.active .lo-count-badge {
        background: rgba(255,255,255,0.18);
        border-color: rgba(255,255,255,0.35);
        color: #fff;
    }

/* =========================================================
   Law Office Scopes — Variable chips
   ========================================================= */
#lo-scopes .lo-var-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#lo-scopes .lo-var-chip {
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: rgba(0,0,0,0.03);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

    #lo-scopes .lo-var-chip:hover {
        border-color: rgba(188, 78, 78, 0.55);
    }

/* =========================================================
   Law Office Scopes — Highlight variables in Scope Text like portal signature tokens
   ========================================================= */

#lo-scopes .lo-highlight-wrap {
    position: relative;
    background: var(--bs-body-bg, #fff);
}

/* The highlighted text layer (behind the textarea) */
#lo-scopes .lo-highlight-layer {
    position: absolute;
    inset: 0;
    padding: .375rem .75rem; /* matches Bootstrap .form-control */
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    pointer-events: none;
    color: var(--bs-body-color, #212529);
    z-index: 0;
}

/* hide highlight layer scrollbars (textarea scrolls) */
#lo-scopes .lo-highlight-layer {
    scrollbar-width: none;
}

    #lo-scopes .lo-highlight-layer::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

/* The real textarea sits above; text is transparent so highlight layer shows through */
#lo-scopes textarea.lo-highlight-input {
    background: transparent !important;
    color: transparent !important;
    caret-color: var(--bs-body-color, #212529);
    position: relative;
    z-index: 1;
}

    /* Ensure placeholder is still visible */
    #lo-scopes textarea.lo-highlight-input::placeholder {
        color: var(--bs-secondary-color, #6c757d);
        opacity: 1;
    }

/* Token pills (mirrors your tools page #sb-editor .sig-token) */
#lo-scopes .lo-scope-token {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: rgba(188,78,78,.08);
    border: 1px solid rgba(188,78,78,.25);
    padding: 1px 6px;
    border-radius: 999px;
    display: inline-block;
    line-height: 1.35;
    margin: 0 2px 2px 0;
}

#lo-scopes .lo-scope-token--manual {
    border-style: dashed;
}

#lo-scopes .lo-scope-token--fixed { /* same look by default */
}

/* Unknown tokens typed by user (still highlighted, but warning-style) */
#lo-scopes .lo-scope-token--unknown {
    background: rgba(255,193,7,.14);
    border-color: rgba(255,193,7,.40);
}

/* Small badge on scope rows when includesVariables = true */
#lo-scopes .lo-scope-var-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: rgba(188,78,78,.08);
    border: 1px solid rgba(188,78,78,.25);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

#lo-scopes .list-group-item.active .lo-scope-var-badge {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.35);
    color: #fff;
}