@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Reddit+Mono:wght@200..900&display=swap');
@import './theme.css';
@import './pagy.css';

@source inline("bg-brand-{25..950}");

a.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}


.superadmin-only:not(.superadmin-show .superadmin-only),
.superadmin-show .superadmin-only-hide {
    display: none !important;
    visibility: hidden !important;
}

.list-action {
    width: 42px;
    margin: 0;
    padding: 0;

    &.border {
        padding: 0 0.5em;
    }

    &.chip {
        padding: 0 0.5em;
    }
}

.breadcrumb-divider {
    margin-left: -50px;
}

.field > :is(input, select) {
    font-size: inherit;
}

.field > :is(input, textarea, select) {
    padding-right: .5rem;
}

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

#sigma-dashboard {
    height: calc(100vh - 10rem);
    width: 100%;
    border: 0;
}

/* TODO: get rid of this */
details > summary:first-of-type {
    display: block;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--s-neutral-700);
}


.snackbar.active {
    animation: appear-then-fade 4s both;
}

@keyframes appear-then-fade {
    0%, 100% {
        opacity:0
    }

    5%, 60% {
        opacity:1
    }
}

/* Holdovers from beercss that are still in the codebase. These should be removed and updated to tailwind */
:root {
    --s-neutral-700: #757a85;
    --s-warning-text: #B42318;
    --s-success-text: #3b5730;
    --s-button-bg-primary: #D77C3C;
    --s-button-border-secondary: #D0D5DD;
    --s-button-border-disabled: #E4E7EC;
    --s-text-secondary: #344054;
    --s-text-disabled: #98A2B3;
    --s-bg-primary: #FFF;
    --s-bg-hover: #F9FAFB;
    --s-brand-secondary: #AC6330;

    .translation_missing { /* stylelint-disable-line */
        background-color: deeppink !important;
    }
}

/*  Collapsible left nav */

[data-nav-container] details > summary ~ div {
    display: grid;
    grid-template-rows: 1fr;
}

[data-nav-container] details.animating[open] > summary ~ div {
    animation: nav-section-expand 200ms ease-out forwards;
}

@keyframes nav-section-expand {
    from { 
        grid-template-rows: 0fr; 
        opacity: 0; 
    }

    to { 
        grid-template-rows: 1fr; 
        opacity: 1; 
    }
}

[data-primary-grid-layout] {
    --nav-width: 230px;
    --drawer-width: 0px;
    
    grid-template-columns: var(--nav-width) 1fr var(--drawer-width);
}

[data-primary-grid-layout][data-drawer-open="true"] { --drawer-width: auto; }

.nav-toggle {
    top: 22px;
    right: 8px;
    left: auto;
    transform: none;
    transition: all 300ms ease-out;
}

.nav-header {
    padding-bottom: 1.5rem;
    transition: padding 300ms ease-out;
}

.nav-logo {
    width: 125px;
    transition: width 300ms ease-out;
}

.nav-collapsed-view { display: none; }

/* Sidebar collapsed state only applies at md+ */
@media (width >= 768px) {
    [data-primary-grid-layout][data-sidebar-collapsed="true"] { --nav-width: 64px; }

    [data-sidebar-collapsed="true"] .nav-collapsed-view { display: flex; }
    [data-sidebar-collapsed="true"] .nav-expanded-view { display: none; }

    [data-sidebar-collapsed="true"] .nav-toggle {
        top: 68px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    [data-sidebar-collapsed="true"] .nav-header { padding-bottom: 72px; }

    [data-sidebar-collapsed="true"] .nav-logo { width: 37px; }
    [data-sidebar-collapsed="true"] .nav-logo-spacer { display: none; }
}

/* Mobile: collapse grid column below md breakpoint */
@media (width < 768px) {
    [data-primary-grid-layout] {
        --nav-width: 0px;
    }

    /*
     * Prevent overscroll/scroll-chaining on mobile.
     * AG Grid's internal viewports can chain scroll events to the page,
     * causing unwanted page scrolling beyond content boundaries.
     * html needs overflow:hidden to clip any content extending beyond viewport.
     */
    html {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        overscroll-behavior: none;
    }

    .ag-body-viewport,
    .ag-body-vertical-scroll-viewport {
        overscroll-behavior: contain;
    }

    /* Mobile nav slide transform */
    [data-nav-container] nav {
        transform: translateX(-100%);
        transition: transform 300ms ease-in-out;
    }

    [data-mobile-nav-open="true"] [data-nav-container] nav {
        transform: translateX(0);
    }

    .nav-toggle { display: none !important; }

    /* Ensure Intercom widget stays within viewport */
    .intercom-lightweight-app,
    .intercom-launcher,
    #intercom-container {
        inset: auto 10px 10px auto !important;
    }

    /* Intercom messenger frame - fullscreen on mobile */
    .intercom-messenger-frame,
    .intercom-borderless-frame {
        position: fixed !important;
        inset: 0 !important;
        width: 100dvw !important;
        height: 100dvh !important;
        max-width: 100dvw !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .intercom-notifications-frame {
        inset: auto 10px 10px auto !important;
    }
}