/* _content/Mosaic.Tool/Components/Layout/LoginLayout.razor.rz.scp.css */
/* _content/Mosaic.Tool/Components/Layout/MainLayout.razor.rz.scp.css */
/* _content/Mosaic.Tool/Components/Pages/Templates.razor.rz.scp.css */
/* Mobile responsive styles for Templates page */

/* Desktop: Show table normally */
.table-responsive[b-b6eqzy3flk] {
    display: block;
}

.template-cards[b-b6eqzy3flk] {
    display: none;
}

/* Mobile: Hide table, show cards */
@media (max-width: 768px) {
    .table-responsive[b-b6eqzy3flk] {
        display: none !important;
    }

    .template-cards[b-b6eqzy3flk] {
        display: block;
    }

    .template-card[b-b6eqzy3flk] {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
        position: relative;
    }

    .template-card-header[b-b6eqzy3flk] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
    }

    .template-card-title[b-b6eqzy3flk] {
        font-weight: 600;
        font-size: 1rem;
        margin: 0;
        flex: 1;
        padding-right: 0.5rem;
    }

    .template-card-actions[b-b6eqzy3flk] {
        flex-shrink: 0;
    }

    .template-card-body[b-b6eqzy3flk] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .template-card-row[b-b6eqzy3flk] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
    }

    .template-card-label[b-b6eqzy3flk] {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
    }

    .template-card-value[b-b6eqzy3flk] {
        font-size: 0.875rem;
        color: #212529;
        text-align: right;
    }

    .template-card-amount[b-b6eqzy3flk] {
        font-weight: 600;
        color: #0054a6;
    }
}

/* Clickable template name styling */
.template-name-link[b-b6eqzy3flk] {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.template-name-link:hover[b-b6eqzy3flk] {
    color: var(--tblr-primary, #0054a6) !important;
    text-decoration: underline !important;
}

.template-name-link:active[b-b6eqzy3flk] {
    color: var(--tblr-primary-darken, #003d7a) !important;
}
/* _content/Mosaic.Tool/Components/Pages/UpnTemplate.razor.rz.scp.css */
/* Help tooltip styling */
.form-help[b-u809wmwp1w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    background-color: var(--tblr-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.form-help:hover[b-u809wmwp1w] {
    background-color: var(--tblr-primary-darken);
}

/* Ensure form labels with help tooltips are aligned properly */
.form-label[b-u809wmwp1w] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Make sure popover content is styled nicely */
.popover-body p[b-u809wmwp1w] {
    margin-bottom: 0.5rem;
}

.popover-body p:last-child[b-u809wmwp1w] {
    margin-bottom: 0;
}

.popover-body ul[b-u809wmwp1w] {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.popover-body li[b-u809wmwp1w] {
    margin-bottom: 0.25rem;
}

.popover-body strong[b-u809wmwp1w] {
    color: var(--tblr-primary);
}

/* Note: Popover styling moved to App.razor global styles because popovers render outside component scope */
/* _content/Mosaic.Tool/Components/Shared/ActionDropdown.razor.rz.scp.css */
/* Dropdown container positioning */
.dropdown[b-j9t98qlyxg] {
    position: relative;
    display: inline-block;
}

/* Prevent any CSS-generated dropdown toggle icons */
.dropdown .btn[b-j9t98qlyxg]::after {
    display: none !important;
    content: none !important;
}

/* Backdrop for closing dropdown */
.dropdown-backdrop[b-j9t98qlyxg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
    background: transparent;
}

/* Dropdown menu base styles - scoped to this component */
.dropdown-menu[b-j9t98qlyxg] {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    z-index: 1060;
}

/* Dropdown items - use ::deep to penetrate child component boundaries */
[b-j9t98qlyxg] .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    pointer-events: all;
    cursor: pointer;
}

[b-j9t98qlyxg] .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #16181b;
    text-decoration: none;
}

[b-j9t98qlyxg] .dropdown-item.text-danger:hover,
[b-j9t98qlyxg] .dropdown-item.text-danger:hover * {
    background-color: #dc3545 !important;
    color: white !important;
    text-decoration: none;
}