@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.mnccjmrpdk.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   ITAMFY Dashboard Layout - Professional SaaS Design
   ========================================================================== */

/* Dashboard Layout Container */
.dashboard-layout[b-vgr28srdgl] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
    /* 100% of the containing block rather than 100vw: `vw` measures the viewport INCLUDING
       the classic scrollbar gutter, so it is always a few pixels too generous on a page
       that scrolls. It happens not to bind today (this is a block box, already the width
       of its parent), but it is the wrong number to have written down. */
    max-width: 100%;
    overflow-x: hidden;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar[b-vgr28srdgl] {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    border-right: 1px solid var(--sidebar-border);
    transition: width var(--transition-base);
    z-index: var(--z-fixed);
    display: flex;
    flex-direction: column;
    /* No resting shadow: at desktop width the sidebar is part of the page, not floating above
       it, so the border-right is what separates it. The old 15px black shadow was invisible
       against a dark sidebar and a smear against a light one. It comes back only off-canvas,
       below, where the drawer genuinely does float over the content. */
}
.sidebar.collapsed[b-vgr28srdgl] {
    width: var(--sidebar-collapsed-width);
}

/* Sidebar Brand */
.sidebar-brand[b-vgr28srdgl] {
    /* Must not shrink. The sidebar is a column flex box whose middle child (.sidebar-nav)
       has `flex: 1` - i.e. flex-basis 0 - so it contributes nothing to weighted shrinking
       and the brand and footer absorb ALL of any overflow instead. The brand then rendered
       a few pixels under 64px and its bottom rule stopped lining up with the top bar's,
       which is the misaligned divider. Only the scrollable nav may give way. */
    flex-shrink: 0;
    padding: 0 var(--space-5);
    font-family: var(--font-ui);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--toolbar-height);
    color: var(--sidebar-brand-fg);
    text-decoration: none;
    transition: padding var(--transition-base);
    box-sizing: border-box;
}

.sidebar-brand:hover[b-vgr28srdgl] {
    color: var(--sidebar-brand-fg);
    opacity: 0.9;
}

.sidebar-logo[b-vgr28srdgl] {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    object-fit: contain;
    /* No drop shadow: a logo is artwork on the panel, not a surface floating above it, and
       against a light sidebar the old one read as a smudge. */
}

.sidebar.collapsed .sidebar-brand[b-vgr28srdgl] {
    justify-content: center;
    padding: 0 var(--space-2);
}

/* Sidebar Navigation */
.sidebar-nav[b-vgr28srdgl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) 0;
}

/* Custom Scrollbar for Sidebar */
.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar-track {
    background: var(--sidebar-scroll-track);
}

.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar-thumb {
    background: var(--sidebar-scroll-thumb);
    border-radius: var(--radius-full);
}

.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-scroll-thumb-hover);
}

/* Sidebar Footer - Legal Links */
.sidebar-footer[b-vgr28srdgl] {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-legal[b-vgr28srdgl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.legal-link[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--sidebar-fg-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    line-height: 1.6;
}

.legal-link:hover[b-vgr28srdgl] {
    color: var(--sidebar-fg-strong);
    text-decoration: underline;
}

.sidebar-copyright[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--sidebar-fg-faint);
    margin-top: var(--space-2);
    line-height: 1.4;
}

.sidebar-version[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--sidebar-fg-faint);
    margin-top: var(--space-1);
}

/* Collapsed sidebar: swap the legal link list for a compact drop-up menu so the
   ToS/privacy/legal links stay reachable. */
.sidebar-legal-collapsed[b-vgr28srdgl] {
    display: none;
}

.legal-collapsed-btn[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--sidebar-fg-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.legal-collapsed-btn:hover[b-vgr28srdgl] {
    color: var(--sidebar-fg-strong);
    background: var(--sidebar-hover-bg);
}

.sidebar.collapsed .sidebar-legal[b-vgr28srdgl],
.sidebar.collapsed .sidebar-copyright[b-vgr28srdgl],
.sidebar.collapsed .sidebar-version[b-vgr28srdgl] {
    display: none;
}

.sidebar.collapsed .sidebar-footer[b-vgr28srdgl] {
    padding: var(--space-2);
}

.sidebar.collapsed .sidebar-legal-collapsed[b-vgr28srdgl] {
    display: block;
}

/* Navigation Sections */
.nav-section[b-vgr28srdgl] {
    margin: var(--space-2) 0;
}

.section-title[b-vgr28srdgl] {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sidebar-fg-muted);
    margin-top: var(--space-3);
}

/* Navigation Items */
.nav-item[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    color: var(--sidebar-fg);
    text-decoration: none;
    transition: all var(--transition-fast);
    gap: var(--space-3);
    font-size: var(--text-md);
    font-weight: 500;
    white-space: nowrap;
    border-left: 3px solid transparent;
    margin: var(--space-1) 0;
}

.sidebar.collapsed .nav-item[b-vgr28srdgl] {
    justify-content: center;
    padding: var(--space-3) 0;
    border-left: none;
}

.nav-item:hover[b-vgr28srdgl] {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
}

.nav-item.active[b-vgr28srdgl] {
    background: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-border);
    color: var(--sidebar-active-fg);
}

.sidebar.collapsed .nav-item.active[b-vgr28srdgl] {
    background: var(--sidebar-active-bg);
    border-radius: var(--radius-md);
    margin: var(--space-1) var(--space-2);
}

/* Nav Item Icons */
.nav-item i[b-vgr28srdgl],
.nav-item svg[b-vgr28srdgl] {
    font-size: var(--text-xl);
    width: 22px;
    text-align: center;
    opacity: 0.9;
}

/* ==========================================================================
   Main Content Wrapper
   ========================================================================== */

.main-wrapper[b-vgr28srdgl] {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    background: var(--bg-body);
}

.main-wrapper.sidebar-collapsed[b-vgr28srdgl] {
    margin-left: var(--sidebar-collapsed-width);
}

/* ==========================================================================
   Top Toolbar
   ========================================================================== */

.top-toolbar[b-vgr28srdgl] {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--space-6);
    height: var(--toolbar-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap + min-width:0 on the halves below: without them a long organization name is an
       unshrinkable flex item and pushes the bar wider than the viewport, which is what
       made it overflow on a phone rather than merely look cramped. */
    gap: var(--space-3);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: none;
}

/* Toolbar brand - the mobile counterpart of .sidebar-brand.
   Hidden on desktop where the sidebar already shows the logo; revealed at the exact
   breakpoint where the sidebar goes off-canvas, so the brand is never absent from the
   screen at any width. */
.toolbar-brand[b-vgr28srdgl] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.toolbar-brand:hover[b-vgr28srdgl] {
    color: var(--text-primary);
    opacity: 0.85;
}

.toolbar-logo[b-vgr28srdgl] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    object-fit: contain;
}

/* The product tagline beside the brand. Was `<h5 class="page-title">`, which is both a
   heading tag used for non-heading text and (since the shell owns `.page-title`) a name
   collision that restyled it to 20px Poppins. */
.toolbar-tagline[b-vgr28srdgl] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.toolbar-left[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.toolbar-right[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* Burger Menu Button */
.burger-menu[b-vgr28srdgl] {
    color: var(--text-secondary);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.burger-menu:hover[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--itamfy-primary);
}

/* Toolbar Icon Buttons */
.user-menu[b-vgr28srdgl] {
    gap: var(--space-2);
}

/* A dropdown row that holds a control rather than being a button itself. */
.dropdown-item-static[b-vgr28srdgl] {
    padding: var(--space-1) var(--space-4);
}

/* Preference controls shown inline on desktop, folded into the account menu on mobile.
   The wrapper must lay its children out itself: the language picker is a block-level
   .dropdown, so without this the picker and the theme button stack vertically and blow
   out the toolbar height. */
.toolbar-preferences[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dropdown-mobile-only[b-vgr28srdgl] {
    display: none;
}

.toolbar-icon[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none !important;
}

.toolbar-icon:hover[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--itamfy-primary) !important;
    text-decoration: none !important;
}
/* ==========================================================================
   Upgrade Now Button (Toolbar)
   ========================================================================== */

.upgrade-now-btn[b-vgr28srdgl] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #ffffff;
    background: var(--itamfy-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    white-space: nowrap;
}

.upgrade-now-btn:hover[b-vgr28srdgl] {
    background: var(--itamfy-primary-dark);
}
/* ==========================================================================
   Sidebar Upgrade Hint
   ========================================================================== */

.upgrade-hint[b-vgr28srdgl] {
    font-size: var(--text-xs);
    font-weight: 500;
    opacity: 0.6;
}

/* User Menu */
.user-menu[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none !important;
}

.user-menu:hover[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
    text-decoration: none !important;
}
/* ==========================================================================
   Organization Switcher
   ========================================================================== */

.org-switcher-toggle[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none !important;
    font-weight: 500;
    font-size: var(--text-md);
    max-width: 260px;
}

.org-switcher-toggle:hover[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
}

.org-switcher-name[b-vgr28srdgl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-switcher .dropdown-item[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    /* The organization you are in is the single most important thing in this bar - it scopes
       every page - and it was the one thing collapsed to a bare icon. It stays visible now;
       the language picker and theme toggle moved into the account menu to pay for the width. */
    .org-switcher-name[b-vgr28srdgl] {
        display: inline-block;
        max-width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .toolbar-preferences[b-vgr28srdgl] {
        display: none;
    }

    .dropdown-mobile-only[b-vgr28srdgl] {
        display: block;
    }

    /* The width toggle does nothing here: the sidebar is off-canvas and the content already
       spans the viewport, so there is nothing left to expand into. */
    .fullwidth-toggle[b-vgr28srdgl] {
        display: none;
    }

    /* The address is redundant next to the avatar and is what pushes the bar over. */
    .username[b-vgr28srdgl] {
        display: none;
    }
}

.username[b-vgr28srdgl] {
    font-weight: 500;
    font-size: var(--text-md);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

/* ==========================================================================
   Page Content
   ========================================================================== */

.page-content[b-vgr28srdgl] {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-body);
    min-width: 0;
    max-width: 100%;
}

/* ==========================================================================
   Mobile Legal Footer

   The mobile-only counterpart of .sidebar-footer: with the sidebar off-canvas its
   legal links are behind the burger menu, so they are repeated at the end of the
   page. Revealed at the same breakpoint the sidebar leaves the flow.
   ========================================================================== */

.mobile-legal-footer[b-vgr28srdgl] {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.mobile-legal-links[b-vgr28srdgl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}

.mobile-legal-links a[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mobile-legal-links a:hover[b-vgr28srdgl] {
    color: var(--text-primary);
    text-decoration: underline;
}

.mobile-legal-copyright[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    opacity: 0.8;
}
/* ==========================================================================
   Auth Layout (Non-Authenticated Users)
   ========================================================================== */

.auth-layout[b-vgr28srdgl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
    padding: var(--space-5);
}

/* Auth Branding */
.auth-branding[b-vgr28srdgl] {
    text-align: center;
    padding: var(--space-10) var(--space-5) var(--space-6);
}

.brand-logo[b-vgr28srdgl] {
    margin-bottom: var(--space-4);
    display: flex;
    justify-content: center;
}

.auth-logo[b-vgr28srdgl] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    object-fit: contain;
    box-shadow: var(--shadow-md);
}

.auth-branding h2[b-vgr28srdgl] {
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
}

.auth-branding p[b-vgr28srdgl] {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Auth Content */
.auth-content[b-vgr28srdgl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: var(--space-4);
}

/* Auth Footer */
.auth-footer[b-vgr28srdgl] {
    text-align: center;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.auth-legal[b-vgr28srdgl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.auth-legal a[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-legal a:hover[b-vgr28srdgl] {
    color: var(--text-primary);
    text-decoration: underline;
}

.legal-separator[b-vgr28srdgl] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    user-select: none;
}

.auth-copyright[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.auth-version[b-vgr28srdgl] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    opacity: 0.6;
}

.theme-toggle-auth[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: color var(--transition-fast);
    font-size: var(--text-base);
    font-weight: 500;
}

.theme-toggle-auth:hover[b-vgr28srdgl] {
    color: var(--itamfy-primary) !important;
}
/* ==========================================================================
   Mobile Sidebar Overlay
   ========================================================================== */

.sidebar-overlay[b-vgr28srdgl] {
    display: none;
}

/* ==========================================================================
   Desktop scrolling: the CONTENT scrolls, not the document

   The document scrollbar is a full-height column down the right edge of the window,
   so it runs past the top bar as well as the content - the bar visibly stops short of
   the window edge and the scrollbar cuts through its row. Making .page-content the
   scroll container instead puts the scrollbar's top edge directly under the bar, and
   the bar then spans the full width of the window as an app bar should.

   Deliberately desktop-only:
     - a phone uses overlay scrollbars, which take no layout space, so there is nothing
       to cut the bar off in the first place;
     - pinning the shell to 100vh on a phone stops the browser's address bar from
       collapsing on scroll and fights the on-screen keyboard;
     - the mobile legal footer is a sibling of .page-content and is meant to scroll away
       with the content, which it only does while the document is what scrolls.
   ========================================================================== */

@media (min-width: 769px) {
    .dashboard-layout[b-vgr28srdgl] {
        height: 100vh;
        overflow: hidden;
    }

    .main-wrapper[b-vgr28srdgl] {
        height: 100vh;
        min-height: 0;
    }

    /* min-height:0 is what actually lets a flex child shrink below its content and
       scroll; without it `flex: 1` still grows to fit and the document scrolls again. */
    .page-content[b-vgr28srdgl] {
        min-height: 0;
        scrollbar-gutter: stable;
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    /* The sidebar leaves the flow here, so the toolbar picks up the brand. */
    .toolbar-brand[b-vgr28srdgl] {
        display: flex;
    }

    

    .sidebar[b-vgr28srdgl] {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .sidebar.collapsed[b-vgr28srdgl] {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .sidebar.mobile-open[b-vgr28srdgl],
    .sidebar.collapsed.mobile-open[b-vgr28srdgl] {
        transform: translateX(0);
        width: var(--sidebar-width);
        z-index: var(--z-fixed);
        /* Open, the drawer really is above the page, so it gets the shadow that says so. */
        box-shadow: var(--shadow-lg);
    }

    /* Override collapsed styles on mobile when drawer is open */
    .sidebar.collapsed.mobile-open .sidebar-brand[b-vgr28srdgl] {
        justify-content: flex-start;
        padding: 0 var(--space-5);
    }

    .sidebar.collapsed.mobile-open .nav-item[b-vgr28srdgl] {
        justify-content: flex-start;
        padding: var(--space-3) var(--space-5);
        border-left: 3px solid transparent;
    }

    .sidebar.collapsed.mobile-open .nav-item.active[b-vgr28srdgl] {
        background: var(--sidebar-active-bg);
        border-left-color: var(--sidebar-active-border);
        color: var(--sidebar-active-fg);
        border-radius: 0;
        margin: var(--space-1) 0;
    }

    /* Mobile overlay shows the full sidebar, so restore the full legal links
       and hide the collapsed drop-up variant. */
    .sidebar.collapsed.mobile-open .sidebar-legal[b-vgr28srdgl],
    .sidebar.collapsed.mobile-open .sidebar-copyright[b-vgr28srdgl],
    .sidebar.collapsed.mobile-open .sidebar-version[b-vgr28srdgl] {
        display: block;
    }

    .sidebar.collapsed.mobile-open .sidebar-legal[b-vgr28srdgl] {
        display: flex;
    }

    .sidebar.collapsed.mobile-open .sidebar-legal-collapsed[b-vgr28srdgl] {
        display: none;
    }

    .sidebar.collapsed.mobile-open .sidebar-footer[b-vgr28srdgl] {
        padding: var(--space-3) var(--space-4);
    }

    .sidebar-overlay[b-vgr28srdgl] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-fixed) - 1);
        cursor: pointer;
    }

    .main-wrapper[b-vgr28srdgl],
    .main-wrapper.sidebar-collapsed[b-vgr28srdgl] {
        margin-left: 0;
    }

    .username[b-vgr28srdgl] {
        display: none;
    }

    /* Extra headroom: with no sidebar to separate them, a page heading like "Dashboard"
       sat almost flush against the app bar. The top gap is deliberately larger than the
       other three. */
    .page-content[b-vgr28srdgl] {
        padding: var(--space-4);
        padding-top: var(--space-8);
    }

    .mobile-legal-footer[b-vgr28srdgl] {
        display: flex;
    }

    .top-toolbar[b-vgr28srdgl] {
        padding: 0 var(--space-4);
    }

    /* The one control that changes what you are looking at - the organization switcher -
       has to fit here. The tagline is the widest thing on the bar and says nothing the
       brand next to it does not. */
    .toolbar-tagline[b-vgr28srdgl] {
        display: none;
    }

    

    .auth-branding[b-vgr28srdgl] {
        padding: var(--space-6) var(--space-4) var(--space-4);
    }

    .auth-logo[b-vgr28srdgl] {
        width: 72px;
        height: 72px;
    }

    .auth-branding h2[b-vgr28srdgl] {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 576px) {
    .toolbar-left[b-vgr28srdgl] {
        gap: var(--space-2);
    }

    .toolbar-right[b-vgr28srdgl] {
        gap: var(--space-2);
    }

    .toolbar-brand-name[b-vgr28srdgl] {
        display: none;
    }
}

/* ==========================================================================
   Smooth Transitions
   ========================================================================== */

.sidebar[b-vgr28srdgl],
.main-wrapper[b-vgr28srdgl] {
    transition: width var(--transition-base),
                margin-left var(--transition-base),
                transform var(--transition-base);
}

/* Theme transition for all elements */
*[b-vgr28srdgl] {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

/* Exclude specific elements from transition */
.sidebar-nav *[b-vgr28srdgl],
.nav-item[b-vgr28srdgl],
button[b-vgr28srdgl],
a[b-vgr28srdgl] {
    transition-property: background-color, border-color, color, box-shadow, transform;
}

@media (max-width: 480px) {
    .page-content[b-vgr28srdgl] {
        padding: var(--space-3);
        padding-top: var(--space-6);
    }

    .top-toolbar[b-vgr28srdgl] {
        padding: 0 var(--space-3);
    }

    .upgrade-now-btn[b-vgr28srdgl] {
        display: none;
    }
}

/* Workspace navigation: compact groups, explicit selected state, stable targets. */
.sidebar-brand[b-vgr28srdgl] { font-size: 19px; font-weight: 600; gap: 10px; padding: 0 24px; border-bottom-color: transparent; }
.sidebar-logo[b-vgr28srdgl] { width: 30px; height: 30px; }
.sidebar-nav[b-vgr28srdgl] { padding: 16px 10px; }
.nav-item[b-vgr28srdgl] { min-height: 40px; padding: 9px 12px; margin: 3px 0; border: 0; border-radius: var(--radius-md); font-size: var(--text-base); gap: 12px; }
.nav-item i[b-vgr28srdgl] { width: 18px; font-size: 15px; }
.nav-item.active[b-vgr28srdgl] { font-weight: 600; }
.section-title[b-vgr28srdgl] { margin-top: 20px; padding: 8px 12px; font-size: var(--text-xs); text-transform: none; letter-spacing: 0; }
.nav-section[b-vgr28srdgl] { margin: 0; }
.sidebar.collapsed .nav-item[b-vgr28srdgl] { padding: 10px 0; margin: 2px 0; }
.sidebar.collapsed .nav-item.active[b-vgr28srdgl] { margin: 2px 0; }
.sidebar.collapsed .nav-section[b-vgr28srdgl] { border-top: 1px solid var(--sidebar-border); margin-top: 12px; padding-top: 12px; }
.sidebar-footer[b-vgr28srdgl] { padding: 12px 20px; }
.sidebar-copyright[b-vgr28srdgl], .sidebar-version[b-vgr28srdgl] { font-size: 10px; }
.sidebar-legal[b-vgr28srdgl] { gap: 2px 12px; }
.legal-link[b-vgr28srdgl] { font-size: 10px; }
.toolbar-tagline[b-vgr28srdgl] { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.username[b-vgr28srdgl] { display: none; }
.user-menu[b-vgr28srdgl] { gap: 4px; }
.org-switcher-toggle[b-vgr28srdgl] { border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--text-sm); }
.page-content[b-vgr28srdgl] { padding: 32px; }
.top-toolbar[b-vgr28srdgl] { flex-shrink: 0; background: color-mix(in srgb, var(--bg-card) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.page-content > .container-fluid[b-vgr28srdgl] { padding: 0; }
@media (max-width: 1100px) { .toolbar-tagline[b-vgr28srdgl] { display: none; } .page-content[b-vgr28srdgl] { padding: 24px; } }
@media (max-width: 768px) {
    .page-content[b-vgr28srdgl] { padding: 24px 16px; }
    .sidebar[b-vgr28srdgl] { visibility: hidden; }
    .sidebar.mobile-open[b-vgr28srdgl] { visibility: visible; }
    .sidebar.collapsed.mobile-open .nav-item[b-vgr28srdgl] { padding: 8px 12px; border: 0; margin: 2px 0; border-radius: var(--radius-md); }
    .sidebar.collapsed.mobile-open .nav-section[b-vgr28srdgl] { border: 0; padding: 0; margin: 0; }
    .sidebar.collapsed.mobile-open .nav-item.active[b-vgr28srdgl] { margin: 2px 0; border: 0; border-radius: var(--radius-md); }
}
/* Primary application bar: find an asset from any page. */
.toolbar-left[b-vgr28srdgl] { flex: 1; }
.workspace-search[b-vgr28srdgl] { display: flex; align-items: center; gap: 10px; width: min(100%, 460px); padding: 0 10px; min-height: 34px; background: var(--surface-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-muted); }
.workspace-search > i[b-vgr28srdgl] { font-size: 13px; }
.workspace-search input[b-vgr28srdgl] { flex: 1; min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--text-primary); font-family: inherit; font-size: var(--text-sm); outline: none; }
.workspace-search input[b-vgr28srdgl]::placeholder { color: var(--text-muted); }
.workspace-search:focus-within[b-vgr28srdgl] { border-color: var(--itamfy-primary); outline: 2px solid var(--tone-info-border); outline-offset: 1px; }
.workspace-search button[b-vgr28srdgl] { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 12px; }
.workspace-search button:hover[b-vgr28srdgl] { background: var(--border-color); }
.nav-admin[b-vgr28srdgl] { border-top: 1px solid var(--sidebar-border); margin-top: 24px; padding-top: 16px; }
.nav-admin summary[b-vgr28srdgl] { list-style: none; cursor: pointer; }
.nav-admin summary[b-vgr28srdgl]::-webkit-details-marker { display: none; }
.nav-admin summary .admin-chevron[b-vgr28srdgl] { margin-left: auto; width: auto; font-size: 11px; }
.nav-admin[open] summary .admin-chevron[b-vgr28srdgl] { transform: rotate(180deg); }
.nav-admin[open] > a[b-vgr28srdgl] { font-size: var(--text-sm); }
.nav-admin summary:focus-visible[b-vgr28srdgl] { outline: 2px solid var(--itamfy-primary); outline-offset: 2px; }
@media (max-width: 768px) {
    .workspace-search[b-vgr28srdgl] { display: none; }
    .toolbar-left[b-vgr28srdgl] { flex: 1; min-width: 0; gap: 8px; }
    .toolbar-right[b-vgr28srdgl] { flex: 0 0 auto; }
    .toolbar-brand[b-vgr28srdgl] { display: none; }
    .toolbar-right[b-vgr28srdgl]  .mobile-workspace { display: none; }
}
/* /Components/Pages/Account/Account.razor.rz.scp.css */
/* Field Labels - consistent with other detail pages */

/* Card Headers */

/* ==========================================================================
   Vertical Tab Layout
   ========================================================================== */

/* ==========================================================================
   Overview Tab - Profile
   ========================================================================== */

.profile-header[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

/* The profile picture is <UserAvatar Size="64" /> - it carries its own (scoped) styling, which
   is why there is no .profile-avatar rule here: a rule in this file would never match markup
   emitted by another component. */

.profile-identity[b-9i80ayvclv] {
    min-width: 0;
}

.profile-email[b-9i80ayvclv] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.profile-badges[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.profile-facts[b-9i80ayvclv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.profile-fact[b-9i80ayvclv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.profile-fact-label[b-9i80ayvclv] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.profile-fact-value[b-9i80ayvclv] {
    color: var(--text-primary);
    font-size: var(--text-md);
}

/* ==========================================================================
   Overview Tab - Loyalty Section
   ========================================================================== */

.loyalty-level-name[b-9i80ayvclv] {
    font-weight: 600;
    color: var(--text-primary);
}

.loyalty-header[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.loyalty-info[b-9i80ayvclv] {
    flex: 1;
    min-width: 0;
}

.loyalty-stats[b-9i80ayvclv] {
    margin-top: var(--space-4);
}

.loyalty-stat[b-9i80ayvclv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loyalty-stat-label[b-9i80ayvclv] {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.loyalty-stat-value[b-9i80ayvclv] {
    font-weight: 600;
    font-size: var(--text-lg);
}

/* ==========================================================================
   Security Tab - 2FA Status
   ========================================================================== */

.security-status[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Push the enable/disable button to the right of the status row */
.security-status[b-9i80ayvclv]  .btn {
    margin-left: auto;
    flex-shrink: 0;
}

.security-status-icon[b-9i80ayvclv] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.security-status-icon.enabled[b-9i80ayvclv] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--itamfy-success);
}

.security-status-icon.disabled[b-9i80ayvclv] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--itamfy-warning);
}

.security-status-info[b-9i80ayvclv] {
    flex: 1;
    min-width: 0;
}

/* QR Code Image */
.qr-code-image[b-9i80ayvclv] {
    max-width: 200px;
    border: 4px solid white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Usage Tab - one row per resource inside a single card
   ========================================================================== */

.usage-list[b-9i80ayvclv] {
    display: flex;
    flex-direction: column;
}

.usage-row[b-9i80ayvclv] {
    display: grid;
    grid-template-columns: 180px 1fr 110px 130px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.usage-row:last-child[b-9i80ayvclv] {
    border-bottom: none;
}

.usage-row-label[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    color: var(--text-primary);
}

.usage-row-icon[b-9i80ayvclv] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 136, 255, 0.1);
    color: var(--itamfy-primary);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.usage-row-meter .progress[b-9i80ayvclv] {
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--border-color);
}

.usage-row-numbers[b-9i80ayvclv] {
    text-align: right;
    white-space: nowrap;
    font-size: var(--text-md);
}

.usage-row-remaining[b-9i80ayvclv] {
    text-align: right;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ==========================================================================
   Billing Tab
   ========================================================================== */

.subscription-summary[b-9i80ayvclv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.subscription-plan-name[b-9i80ayvclv] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.subscription-plan-period[b-9i80ayvclv] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-top: 0.125rem;
}

.subscription-price[b-9i80ayvclv] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--itamfy-primary);
    white-space: nowrap;
}

.subscription-facts[b-9i80ayvclv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.subscription-fact[b-9i80ayvclv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.subscription-fact-label[b-9i80ayvclv] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.subscription-fact-value[b-9i80ayvclv] {
    color: var(--text-primary);
    font-size: var(--text-md);
}

.cancel-section[b-9i80ayvclv] {
    margin-top: var(--space-4);
}

.cancel-actions[b-9i80ayvclv] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.invoice-link[b-9i80ayvclv] {
    text-decoration: none;
    color: var(--itamfy-primary);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.invoice-link:hover[b-9i80ayvclv] {
    text-decoration: underline;
    color: var(--itamfy-primary-light);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /* align-items: flex-start is a cross-axis rule, so once this stacks into a column it
       shrank every child to its own content width - which is why the Current Plan and
       Usage cards rendered at roughly half the screen. Stretch them back out. */

    .usage-row[b-9i80ayvclv] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label numbers"
            "meter meter"
            "remaining remaining";
        gap: var(--space-2) var(--space-3);
    }

    .usage-row-label[b-9i80ayvclv] { grid-area: label; }
    .usage-row-meter[b-9i80ayvclv] { grid-area: meter; }
    .usage-row-numbers[b-9i80ayvclv] { grid-area: numbers; }
    .usage-row-remaining[b-9i80ayvclv] { grid-area: remaining; }
}

@media (max-width: 480px) {


    .subscription-summary[b-9i80ayvclv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cancel-actions[b-9i80ayvclv] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/AdminAnnouncements.razor.rz.scp.css */
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* Admin summaries are grouped by the operational question they answer. */
.admin-summary-grid[b-9cx83lgd6w] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-bottom: 16px; }
.admin-summary-section[b-9cx83lgd6w] { min-width: 0; }
.admin-summary-section[b-9cx83lgd6w]  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-summary-section[b-9cx83lgd6w]  .stat-card { padding: 16px 20px; }
.admin-summary-section[b-9cx83lgd6w]  .stat-card:nth-child(2n) { border-right: 0; }
.admin-summary-section[b-9cx83lgd6w]  .stat-card:nth-child(n+3) { border-top: 1px solid var(--border-color); }
.charts-grid[b-9cx83lgd6w] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.charts-grid > *[b-9cx83lgd6w] { min-width: 0; }
@media (max-width: 1100px) { .admin-summary-grid[b-9cx83lgd6w], .charts-grid[b-9cx83lgd6w] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Pages/Admin/AdminOrganizationDetail.razor.rz.scp.css */
/* Admin Warning Banner */

.back-link[b-u0nb4sf78a] {
    padding: 0;
    font-size: var(--text-base);
}

/* ==========================================================================
   Info Grid
   ========================================================================== */

.info-item[b-u0nb4sf78a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label[b-u0nb4sf78a] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.info-value[b-u0nb4sf78a] {
    color: var(--text-primary);
    font-size: var(--text-md);
}

/* ==========================================================================
   Org Stats Grid
   ========================================================================== */

.org-stats-grid[b-u0nb4sf78a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
}

.org-stat[b-u0nb4sf78a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
}

.org-stat-value[b-u0nb4sf78a] {
    font-family: var(--font-ui);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--itamfy-primary);
}

.org-stat-label[b-u0nb4sf78a] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* ==========================================================================
   Two Column Layout
   ========================================================================== */

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 992px) {
    }

@media (max-width: 768px) {
    

    

    

    .org-stats-grid[b-u0nb4sf78a] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    

    .org-stats-grid[b-u0nb4sf78a] {
        grid-template-columns: 1fr 1fr;
    }

    
}
/* /Components/Pages/Admin/AdminOrganizations.razor.rz.scp.css */
/* ==========================================================================
   Admin Warning Banner
   ========================================================================== */

/* ==========================================================================
   Filter Card
   ========================================================================== */

.filter-card[b-ymhnuo0t70] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.filter-row[b-ymhnuo0t70] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.filter-item[b-ymhnuo0t70] {
    flex: 1;
    min-width: 150px;
}

.filter-search[b-ymhnuo0t70] {
    flex: 3;
}

th.sortable[b-ymhnuo0t70] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-ymhnuo0t70] {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

.page-info[b-ymhnuo0t70] {
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: 500;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    

    

    .filter-row[b-ymhnuo0t70] {
        flex-direction: column;
    }

    

    .page-info[b-ymhnuo0t70] {
        text-align: center;
    }
}
/* /Components/Pages/Admin/AdminPlans.razor.rz.scp.css */
/* Delete confirmation backdrop */
.modal-backdrop-custom[b-gidkk1ynr1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    overflow-y: auto;
}

/* Match the dense admin table sizing and keep the plan name compact */
.table td[b-gidkk1ynr1],
.table th[b-gidkk1ynr1] {
    font-size: var(--text-md);
    vertical-align: middle;
}

.table td:first-child[b-gidkk1ynr1] {
    min-width: 150px;
    max-width: 260px;
}

.plan-name[b-gidkk1ynr1] {
    display: inline-block;
    max-width: 100%;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Pages/Admin/AdminSettings.razor.rz.scp.css */
/* Admin Warning Banner */

/* Settings Card */
.settings-card[b-iyguei7rip] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
/* Settings Header */
.settings-header[b-iyguei7rip] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.settings-header-icon[b-iyguei7rip] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.settings-icon-danger[b-iyguei7rip] { background: rgba(239, 68, 68, 0.1); color: var(--itamfy-danger); }
.settings-icon-primary[b-iyguei7rip] { background: rgba(15, 136, 255, 0.1); color: var(--itamfy-primary); }
.settings-icon-info[b-iyguei7rip] { background: rgba(99, 102, 241, 0.1); color: var(--itamfy-info); }
.settings-icon-warning[b-iyguei7rip] { background: rgba(245, 158, 11, 0.1); color: var(--itamfy-warning); }
.settings-icon-success[b-iyguei7rip] { background: rgba(16, 185, 129, 0.1); color: var(--itamfy-success); }

.settings-header-action[b-iyguei7rip] {
    margin-left: auto;
}

.settings-description[b-iyguei7rip] {
    font-size: var(--text-base);
}

/* Settings Grid */
.settings-grid[b-iyguei7rip] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

/* Responsive */
@media (max-width: 768px) {
    

    

    .settings-header[b-iyguei7rip] {
        flex-direction: column;
    }

    .settings-header-action[b-iyguei7rip] {
        margin-left: 0;
        width: 100%;
    }
    .settings-grid[b-iyguei7rip] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/AdminUserDetail.razor.rz.scp.css */
/* Admin Warning Banner */

.back-link[b-s8kduhszsj] {
    padding: 0;
    font-size: var(--text-base);
}

/* Info Grid */

.info-item[b-s8kduhszsj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label[b-s8kduhszsj] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.info-value[b-s8kduhszsj] {
    color: var(--text-primary);
    font-size: var(--text-md);
}

/* Role Checkboxes */
.role-checkboxes[b-s8kduhszsj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    

    
}
/* /Components/Pages/Admin/AdminUsers.razor.rz.scp.css */
/* ==========================================================================
   Admin Warning Banner
   ========================================================================== */

/* ==========================================================================
   Filter Card
   ========================================================================== */

.filter-card[b-u3vb92y4qt] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.filter-row[b-u3vb92y4qt] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.filter-item[b-u3vb92y4qt] {
    flex: 1;
    min-width: 150px;
}

.filter-search[b-u3vb92y4qt] {
    flex: 2;
}

th.sortable[b-u3vb92y4qt] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-u3vb92y4qt] {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.action-buttons[b-u3vb92y4qt] {
    display: flex;
    gap: var(--space-2);
}

.page-info[b-u3vb92y4qt] {
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: 500;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    

    

    .filter-row[b-u3vb92y4qt] {
        flex-direction: column;
    }

    .filter-item[b-u3vb92y4qt] {
        width: 100%;
    }

    

    .page-info[b-u3vb92y4qt] {
        text-align: center;
    }
}
/* /Components/Pages/Assets/AssetDetails.razor.rz.scp.css */
/* Field Labels */

/* Card Headers */

/* User assignment search.
   AutoComplete renders its own .input-group root, so it must not be nested inside
   another one - it is laid out as a flex row instead so the field fills the card. */
.assignment-search[b-99xty8jf3f] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    width: 100%;
}

.assignment-search-field[b-99xty8jf3f] {
    flex: 1 1 auto;
    min-width: 0;
}

.assignment-search[b-99xty8jf3f]  .input-group {
    display: flex;
    width: 100%;
}

.assignment-search[b-99xty8jf3f]  .form-control,
.assignment-search[b-99xty8jf3f]  .b-is-autocomplete .form-control {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}

.assignment-search[b-99xty8jf3f]  .input-group-text {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}
/* /Components/Pages/Assets/AssetLabel.razor.rz.scp.css */
/* Label Page Container */
.label-page[b-jn4ayv94gx] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.label-page.full-width[b-jn4ayv94gx] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-jn4ayv94gx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-jn4ayv94gx] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: nowrap;
}
/* Print Controls */
.print-controls[b-jn4ayv94gx] {
    margin-bottom: 2rem;
}

/* Label Container */
.label-container[b-jn4ayv94gx] {
    display: flex;
    justify-content: center;
    padding: 3rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}
/* Asset Label Base */
.asset-label[b-jn4ayv94gx] {
    background: white;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 12px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Label Sizes */
.asset-label.small[b-jn4ayv94gx] {
    width: 288px; /* 2 inches scaled up for preview */
    min-height: 144px;
    font-size: 10px;
}

.asset-label.small .label-header[b-jn4ayv94gx] {
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.asset-label.small .brand[b-jn4ayv94gx] {
    font-size: 10px;
}

.asset-label.small .org-name[b-jn4ayv94gx] {
    font-size: 7px;
}

.asset-label.small .qr-code[b-jn4ayv94gx] {
    width: 50px;
    height: 50px;
}

.asset-label.small .scan-text[b-jn4ayv94gx] {
    font-size: 6px;
}

.asset-label.small .asset-name[b-jn4ayv94gx] {
    font-size: 10px;
    margin-bottom: 4px;
}

.asset-label.small .info-row[b-jn4ayv94gx] {
    font-size: 7px;
    margin-bottom: 2px;
}

.asset-label.small .label-footer[b-jn4ayv94gx] {
    padding-top: 4px;
    margin-top: 6px;
}

.asset-label.small .asset-id[b-jn4ayv94gx] {
    font-size: 6px;
}

.asset-label.medium[b-jn4ayv94gx] {
    width: 400px; /* 3 inches scaled up for preview */
    min-height: 260px;
    font-size: 13px;
}

.asset-label.medium .qr-code[b-jn4ayv94gx] {
    width: 110px;
    height: 110px;
}

.asset-label.medium .asset-name[b-jn4ayv94gx] {
    font-size: 17px;
}

.asset-label.large[b-jn4ayv94gx] {
    width: 520px; /* 4 inches scaled up for preview */
    min-height: 360px;
    font-size: 15px;
    padding: 20px;
}

.asset-label.large .qr-code[b-jn4ayv94gx] {
    width: 150px;
    height: 150px;
}

.asset-label.large .asset-name[b-jn4ayv94gx] {
    font-size: 22px;
}

.asset-label.large .brand[b-jn4ayv94gx] {
    font-size: 18px;
}

/* Label Header */
.label-header[b-jn4ayv94gx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.brand[b-jn4ayv94gx] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 14px;
}

.brand-logo[b-jn4ayv94gx] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
}

.asset-label.small .brand-logo[b-jn4ayv94gx] {
    width: 12px;
    height: 12px;
}

.asset-label.large .brand-logo[b-jn4ayv94gx] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.org-name[b-jn4ayv94gx] {
    font-size: 9px;
    color: #555;
    text-align: right;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Label Body */
.label-body[b-jn4ayv94gx] {
    display: flex;
    gap: 12px;
}

/* QR Section */
.qr-section[b-jn4ayv94gx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.qr-code[b-jn4ayv94gx] {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
}

.scan-text[b-jn4ayv94gx] {
    font-size: 7px;
    color: #666;
    margin-top: 4px;
    text-align: center;
}

/* Info Section */
.info-section[b-jn4ayv94gx] {
    flex: 1;
    min-width: 0;
}

.asset-name[b-jn4ayv94gx] {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    word-break: break-word;
    line-height: 1.2;
}

.info-row[b-jn4ayv94gx] {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.3;
}

.info-label[b-jn4ayv94gx] {
    font-weight: 600;
    color: #555;
    flex-shrink: 0;
}

.info-value[b-jn4ayv94gx] {
    word-break: break-word;
}

.info-value.serial[b-jn4ayv94gx] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 8px;
}

.info-value.status[b-jn4ayv94gx] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
}

.info-value.status.active[b-jn4ayv94gx] {
    background-color: #d4edda;
    color: #155724;
}

.info-value.status.instorage[b-jn4ayv94gx] {
    background-color: #cce5ff;
    color: #004085;
}

.info-value.status.maintenance[b-jn4ayv94gx] {
    background-color: #fff3cd;
    color: #856404;
}

.info-value.status.retired[b-jn4ayv94gx] {
    background-color: #e2e3e5;
    color: #383d41;
}

.info-value.status.disposed[b-jn4ayv94gx] {
    background-color: #f8d7da;
    color: #721c24;
}

/* Label Footer */
.label-footer[b-jn4ayv94gx] {
    border-top: 1px solid #ccc;
    padding-top: 6px;
    margin-top: 8px;
    text-align: right;
}

.asset-id[b-jn4ayv94gx] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 7px;
    color: #888;
}

/* Print Instructions */
.print-instructions[b-jn4ayv94gx] {
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-jn4ayv94gx] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-jn4ayv94gx] {
        flex-wrap: wrap;
    }

    /* The preview widths are fixed print sizes (medium 400px, large 520px), so on a phone
       both ran off the side of the screen. Cap them at the viewport and let the label's
       own flex body reflow; the sizes still differ by QR/type scale, and print is
       untouched because the print sheet is far wider than this cap. */
    .label-container[b-jn4ayv94gx] {
        padding: var(--space-4);
    }

    .asset-label[b-jn4ayv94gx] {
        max-width: 100%;
    }

    /* With the label capped at viewport width, the large preview's 150px QR left the
       info column too narrow and broke the asset name across three lines. */
    .asset-label.large .qr-code[b-jn4ayv94gx] {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 480px) {
    .header-actions[b-jn4ayv94gx] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .label-container[b-jn4ayv94gx] {
        padding: var(--space-3);
    }
}

/* Print Styles */
@media print {
    /* Hide non-printable elements */
    .no-print[b-jn4ayv94gx] {
        display: none !important;
    }

    /* Reset page */
    .label-page[b-jn4ayv94gx] {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    /* Label container for print */
    .label-container[b-jn4ayv94gx] {
        padding: 0;
        background: none;
        border-radius: 0;
        display: block;
    }

    /* Print the label at actual size */
    .asset-label[b-jn4ayv94gx] {
        box-shadow: none;
        page-break-inside: avoid;
        margin: 0 auto;
    }

    /* Ensure black text/borders print well */
    .asset-label[b-jn4ayv94gx],
    .asset-label *[b-jn4ayv94gx] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Page setup */
    @page {
        margin: 0.5in;
        size: auto;
    }
}
/* /Components/Pages/Assets/Assets.razor.rz.scp.css */
/* Sort Icon */
.sort-icon[b-u9j83ymh6l] {
    margin-left: var(--space-1);
    font-size: var(--text-xs);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.action-buttons[b-u9j83ymh6l] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.status-badge[b-u9j83ymh6l] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.status-active[b-u9j83ymh6l] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--itamfy-success);
}

.status-inactive[b-u9j83ymh6l] {
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-muted);
}

.status-maintenance[b-u9j83ymh6l] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--itamfy-warning);
}

.status-retired[b-u9j83ymh6l] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--itamfy-danger);
}
/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    

    

    

    

    

    

    

    .assets-table .cell-actions[b-u9j83ymh6l] {
        width: auto;
    }
}

@media (max-width: 576px) {
    

    

    .assets-table thead th[b-u9j83ymh6l],
    .assets-table tbody td[b-u9j83ymh6l] {
        padding: var(--space-3);
    }

    .action-buttons[b-u9j83ymh6l] {
        flex-direction: column;
        gap: var(--space-1);
    }
}
.inventory-table[b-u9j83ymh6l] {
    table-layout: fixed;
    min-width: 720px;
    font-size: var(--text-sm);
}
.inventory-table th:first-child[b-u9j83ymh6l] { width: 30%; }
.inventory-table th:nth-child(2)[b-u9j83ymh6l] { width: 12%; }
.inventory-table th:nth-child(3)[b-u9j83ymh6l] { width: 14%; }
.inventory-table th:nth-child(4)[b-u9j83ymh6l] { width: 21%; }
.inventory-table th:nth-child(5)[b-u9j83ymh6l] { width: 17%; }
.inventory-table th.cell-actions[b-u9j83ymh6l] { width: 6%; }
.inventory-table .cell-actions[b-u9j83ymh6l] {
    /* Keep the same header and row surface as the rest of the table. */
    position: static;
}
.inventory-table .badge[b-u9j83ymh6l] {
    font-size: 11px;
    padding: 4px 6px;
}
/* /Components/Pages/AttentionNeeded.razor.rz.scp.css */
/* Attention list (mirrors the dashboard styling) */
.attention-list[b-eer7497aen] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attention-item[b-eer7497aen] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.attention-item:hover[b-eer7497aen] {
    background-color: var(--bg-hover);
}

.attention-icon[b-eer7497aen] {
    flex-shrink: 0;
    width: 32px;
    display: flex;
    justify-content: center;
}

.attention-details[b-eer7497aen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attention-details strong[b-eer7497aen] {
    font-size: var(--text-md);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attention-type[b-eer7497aen] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.attention-status[b-eer7497aen] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.attention-date[b-eer7497aen] {
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    

    .attention-item[b-eer7497aen] {
        flex-wrap: wrap;
    }
}
.attention-item[b-eer7497aen] { color: var(--text-primary); text-decoration: none; }
.attention-type[b-eer7497aen] { text-transform: none; letter-spacing: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* /Components/Pages/Audit/AuditLog.razor.rz.scp.css */
.timestamp-cell[b-mq8z41chzl] {
    font-family: monospace;
    font-size: var(--text-base);
    white-space: nowrap;
}

/* Action Badges */
.action-badge[b-mq8z41chzl] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-created[b-mq8z41chzl] {
    background-color: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.badge-deleted[b-mq8z41chzl] {
    background-color: rgba(239, 68, 68, 0.14);
    color: #dc2626;
}

.badge-updated[b-mq8z41chzl],
.badge-login[b-mq8z41chzl],
.badge-logout[b-mq8z41chzl],
.badge-invited[b-mq8z41chzl],
.badge-default[b-mq8z41chzl] {
    background-color: rgba(107, 114, 128, 0.16);
    color: var(--gray-600);
}
/* Details Row */
.details-row[b-mq8z41chzl] {
    background-color: var(--bg-hover) !important;
}

.details-row:hover[b-mq8z41chzl] {
    background-color: var(--bg-hover) !important;
}

.changes-detail[b-mq8z41chzl] {
    padding: var(--space-3);
}

.change-section[b-mq8z41chzl] {
    margin-bottom: var(--space-3);
}

.change-section:last-child[b-mq8z41chzl] {
    margin-bottom: 0;
}

.change-json[b-mq8z41chzl] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
    overflow-x: auto;
    max-height: 200px;
    white-space: pre-wrap;
    word-break: break-word;
}

.page-indicator[b-mq8z41chzl] {
    padding: 0 var(--space-3);
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 500;
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* ==========================================================================
   Login Page - Professional SaaS Design
   ========================================================================== */

/* Login Card */
.login-card[b-dyp8as5vyi] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.login-card .card-body[b-dyp8as5vyi] {
    padding: var(--space-8);
    background: var(--bg-card);
}

.login-card .card-title[b-dyp8as5vyi] {
    font-family: var(--font-ui);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-2);
}

.login-subtitle[b-dyp8as5vyi] {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin-bottom: var(--space-6);
}

/* Form Fields */
.login-card .form-group[b-dyp8as5vyi] {
    margin-bottom: var(--space-5);
}

.login-card .form-label[b-dyp8as5vyi] {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.login-card .form-control[b-dyp8as5vyi] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border-color);
    transition: all var(--transition-fast);
}

.login-card .form-control:focus[b-dyp8as5vyi] {
    border-color: var(--itamfy-primary);
    box-shadow: 0 0 0 3px rgba(15, 136, 255, 0.1);
}

/* Login Button */
.login-btn[b-dyp8as5vyi] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
    font-weight: 600;
    border-radius: var(--radius-lg);
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-btn:hover[b-dyp8as5vyi] {
    background: var(--itamfy-primary-light);
    box-shadow: var(--shadow-md);
}

.login-btn:active[b-dyp8as5vyi] {
    background: var(--itamfy-primary-dark);
}

/* Divider */
.login-divider[b-dyp8as5vyi] {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.login-divider[b-dyp8as5vyi]::before,
.login-divider[b-dyp8as5vyi]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.login-divider span[b-dyp8as5vyi] {
    padding: 0 var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Social Login Buttons */
.social-login-btn[b-dyp8as5vyi] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md);
    font-weight: 500;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    transition: all var(--transition-fast);
    margin-bottom: var(--space-3);
}

.social-login-btn:hover[b-dyp8as5vyi] {
    border-color: var(--itamfy-primary);
    background: var(--bg-hover);
    color: var(--itamfy-primary);
}

.social-login-btn:last-child[b-dyp8as5vyi] {
    margin-bottom: 0;
}

.social-login-btn img[b-dyp8as5vyi],
.social-login-btn svg[b-dyp8as5vyi] {
    width: 20px;
    height: 20px;
}

/* Microsoft Button specific */
.microsoft-btn[b-dyp8as5vyi] {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #374151;
}

.microsoft-btn:hover[b-dyp8as5vyi] {
    background: #f3f4f6;
    border-color: #0078d4;
    color: #0078d4;
}

/* Google Button specific */
.google-btn[b-dyp8as5vyi] {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #374151;
}

.google-btn:hover[b-dyp8as5vyi] {
    background: #f3f4f6;
    border-color: #4285f4;
    color: #4285f4;
}

/* Links */
.login-links[b-dyp8as5vyi] {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
}

.login-links a[b-dyp8as5vyi] {
    color: var(--itamfy-primary);
    font-weight: 500;
    font-size: var(--text-md);
    transition: color var(--transition-fast);
}

.login-links a:hover[b-dyp8as5vyi] {
    color: var(--itamfy-primary-light);
}

.login-links p[b-dyp8as5vyi] {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0;
}

/* Remember Me Checkbox */
.remember-me[b-dyp8as5vyi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.remember-me label[b-dyp8as5vyi] {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0;
    cursor: pointer;
}

/* Forgot Password Link */
.forgot-password[b-dyp8as5vyi] {
    text-align: right;
    margin-bottom: var(--space-5);
}

.forgot-password a[b-dyp8as5vyi] {
    color: var(--itamfy-primary);
    font-size: var(--text-base);
    font-weight: 500;
}

/* Alert Messages */
.login-card .alert[b-dyp8as5vyi] {
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
}
/* .password-group / .password-toggle-btn live in app.css - shared with Register and
   ResetPassword, which cannot see rules scoped to this component. */

/* Responsive */
@media (max-width: 576px) {
    .login-card[b-dyp8as5vyi] {
        max-width: 100%;
        border-radius: var(--radius-xl);
    }

    .login-card .card-body[b-dyp8as5vyi] {
        padding: var(--space-6);
    }

    .login-card .card-title[b-dyp8as5vyi] {
        font-size: var(--text-2xl);
    }
}
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* Register page specific styles */
/* The auth-layout in MainLayout handles centering */

/* .password-group / .password-toggle-btn live in app.css - shared with Login and
   ResetPassword, which cannot see rules scoped to this component. */
/* /Components/Pages/Certificates/CertificateDetails.razor.rz.scp.css */
/* Field Labels */

/* Card Headers */

/* Decrypt Section */
.decrypt-section[b-dp749zopch] {
    margin-top: var(--space-4);
}

.decrypt-form[b-dp749zopch] {
    max-width: 600px;
}

/* Decrypted Content */
.decrypted-section[b-dp749zopch]  textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--text-base);
    background-color: var(--bg-hover, #f8f9fa);
    border-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    

    

    .decrypted-section .d-flex.justify-content-between[b-dp749zopch] {
        flex-direction: column;
        gap: var(--space-3);
    }
}
/* /Components/Pages/Certificates/Certificates.razor.rz.scp.css */
/* Responsive */
@media (max-width: 768px) {
    

    

    

    

    

    

    

    .certificates-table .cell-actions[b-a3z0061euv] {
        width: auto;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Only the daily dashboard composition belongs here. Shared panels, metrics and tabs live in shell.css. */
.overview-grid[b-gpga9i0npc] { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.overview-grid > *[b-gpga9i0npc] { min-width: 0; }
.overview-main[b-gpga9i0npc], .overview-rail[b-gpga9i0npc] { display: grid; gap: 24px; min-width: 0; align-content: start; }
.queue-count[b-gpga9i0npc] { display: inline-flex; justify-content: center; align-items: center; min-width: 23px; height: 23px; margin-left: 8px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--tone-warning-bg); color: var(--tone-warning-fg); font-size: var(--text-xs); vertical-align: middle; }
.work-list[b-gpga9i0npc] { display: grid; gap: 4px; padding: 8px 12px 12px; }
.work-item[b-gpga9i0npc] { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px; border-radius: var(--radius-lg); color: var(--text-primary); text-decoration: none; }
.work-item:last-child[b-gpga9i0npc] { border-bottom: 0; }
.work-item:hover[b-gpga9i0npc] { background: var(--surface-subtle); color: var(--text-primary); }
.work-icon[b-gpga9i0npc] { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--tone-warning-border); background: var(--tone-warning-bg); color: var(--tone-warning-accent); border-radius: var(--radius-md); font-size: 14px; }
.asset-icon[b-gpga9i0npc] { color: var(--text-secondary); border-color: var(--border-color); background: var(--surface-subtle); }
.work-details[b-gpga9i0npc] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.work-details strong[b-gpga9i0npc] { font-weight: 500; font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-details > span[b-gpga9i0npc] { color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-due[b-gpga9i0npc] { font-size: 11px; color: var(--tone-warning-fg); background: var(--tone-warning-bg); border-radius: var(--radius-sm); padding: 4px 6px; max-width: 40%; }
.work-meta[b-gpga9i0npc] { color: var(--text-secondary); font-size: var(--text-xs); }
.work-chevron[b-gpga9i0npc] { color: var(--text-muted); font-size: 10px; }
.status-breakdown[b-gpga9i0npc] { display: grid; gap: 17px; }
.status-label[b-gpga9i0npc] { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: var(--text-sm); }
.status-label i[b-gpga9i0npc] { width: 18px; color: var(--text-muted); }
.status-label strong[b-gpga9i0npc] { font-variant-numeric: tabular-nums; font-weight: 600; }
.status-track[b-gpga9i0npc] { height: 5px; border-radius: var(--radius-sm); background: var(--surface-subtle); overflow: hidden; }
.status-fill[b-gpga9i0npc] { display: block; height: 100%; border-radius: inherit; background: var(--itamfy-primary); }
.status-fill.storage[b-gpga9i0npc] { background: #7a98c5; }
.status-fill.maintenance[b-gpga9i0npc] { background: #c9952d; }
.status-fill.retired[b-gpga9i0npc] { background: #8993a5; }
.status-fill.disposed[b-gpga9i0npc] { background: #b7bfcc; }
.quick-links[b-gpga9i0npc] { padding: 8px 20px; }
.quick-link[b-gpga9i0npc] { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); font-size: var(--text-sm); text-decoration: none; }
.quick-link:last-child[b-gpga9i0npc] { border-bottom: 0; }
.quick-link > span[b-gpga9i0npc] { flex: 1; }
.quick-link > i[b-gpga9i0npc] { color: var(--text-muted); width: 16px; }
.quick-link:hover[b-gpga9i0npc] { color: var(--itamfy-primary); background: var(--surface-subtle); }
.trend-periods[b-gpga9i0npc] { display: flex; gap: 4px; flex-wrap: wrap; }
.dashboard-chart[b-gpga9i0npc] { position: relative; height: 360px; }
.dashboard-chart[b-gpga9i0npc]  > div { height: 100%; }
@media (max-width: 1150px) { .overview-grid[b-gpga9i0npc] { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 16px; } .work-meta[b-gpga9i0npc] { display: none; } .work-due[b-gpga9i0npc] { max-width: 34%; } }
@media (max-width: 950px) { .overview-grid[b-gpga9i0npc] { grid-template-columns: minmax(0, 1fr); } .work-meta[b-gpga9i0npc] { display: block; } }
@media (max-width: 576px) { .work-item[b-gpga9i0npc] { flex-wrap: wrap; gap: 8px; } .work-due[b-gpga9i0npc] { flex-basis: calc(100% - 42px); margin-left: 42px; max-width: calc(100% - 42px); background: transparent; padding: 0; } .work-meta[b-gpga9i0npc] { display: none; } .work-chevron[b-gpga9i0npc] { display: none; } .work-list[b-gpga9i0npc] { padding: 8px; } .dashboard-chart[b-gpga9i0npc] { height: 260px; } }
/* /Components/Pages/Invitation/AcceptInvitation.razor.rz.scp.css */
.invite-result-icon[b-p5iq0otsyr] {
    width: 5rem;
    height: 5rem;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-5xl);
}

.invite-result-icon-success[b-p5iq0otsyr] {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.invite-result-icon-muted[b-p5iq0otsyr] {
    background-color: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}
/* /Components/Pages/Licenses/LicenseDetails.razor.rz.scp.css */
/* Field Labels */

/* Card Headers */

/* Usage Stats */
.usage-stats[b-uabanbkjhs] {
    text-align: center;
}

.usage-stats .stat-label[b-uabanbkjhs] {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.usage-stats .stat-value[b-uabanbkjhs] {
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: 1.1;
}

/* A word sharing the line with the big number ("/ Unlimited"): sized to read as a label
   next to the figure rather than as another figure. */
.usage-stats .stat-value-word[b-uabanbkjhs] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Assignment Search */
/* AutoComplete renders its own .input-group root, so it must not be nested inside
   another one - it is laid out as a flex row instead so the field fills the card. */
.assignment-search[b-uabanbkjhs] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    width: 100%;
}

.assignment-search-field[b-uabanbkjhs] {
    flex: 1 1 auto;
    min-width: 0;
}

.assignment-search[b-uabanbkjhs]  .input-group {
    display: flex;
    width: 100%;
}

.assignment-search[b-uabanbkjhs]  .form-control,
.assignment-search[b-uabanbkjhs]  .b-is-autocomplete .form-control {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}

.assignment-search[b-uabanbkjhs]  .input-group-text {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}
/* Add User Form */
.add-user-form[b-uabanbkjhs] {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

/* License Key */
.license-key[b-uabanbkjhs] {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
    background-color: var(--bg-hover, #f8f9fa);
    border-radius: var(--radius-md);
    word-break: break-all;
}
/* /Components/Pages/Licenses/Licenses.razor.rz.scp.css */
/* Seats column: count + small usage meter (same style as the marketing mock) */
.seats-cell[b-oxmwhd687u] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.seats-meter[b-oxmwhd687u] {
    display: inline-block;
    width: 3rem;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: var(--border-color, #e5e7eb);
    overflow: hidden;
    flex-shrink: 0;
}

.seats-meter > span[b-oxmwhd687u] {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--itamfy-primary, #0F88FF);
}

.seats-meter > span.meter-warning[b-oxmwhd687u] {
    background: var(--itamfy-warning, #f59e0b);
}

.seats-meter > span.meter-danger[b-oxmwhd687u] {
    background: var(--itamfy-danger, #ef4444);
}

/* Responsive */
@media (max-width: 768px) {
    

    

    

    

    

    

    

    .licenses-table .cell-actions[b-oxmwhd687u] {
        width: auto;
    }
}
/* /Components/Pages/Locations/Locations.razor.rz.scp.css */
/* Locations List - horizontal rows (icon | name + org/address | badges | actions),
   same style as the Organizations page */
.locations-grid[b-rk39e57we7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Location Row Card */
.location-card[b-rk39e57we7] {
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    border: 1px solid var(--border-color);
}

.location-card:hover[b-rk39e57we7] {
    background-color: var(--bg-hover); border-color: var(--control-border);
}

.location-row[b-rk39e57we7] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.location-icon[b-rk39e57we7] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--bg-hover, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    font-size: var(--text-xl);
    flex-shrink: 0;
}
.location-row-main[b-rk39e57we7] {
    flex: 1;
    min-width: 0;
}

.location-card-title[b-rk39e57we7] {
    font-weight: 600;
    font-size: var(--text-lg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-card-sub[b-rk39e57we7] {
    font-size: var(--text-sm);
    color: var(--bs-secondary, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-footer-badges[b-rk39e57we7] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.location-card-actions[b-rk39e57we7] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.location-card:hover .location-card-actions[b-rk39e57we7] {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    

    /* Wrap the row: icon + name on the first line, badges/actions below */
    .location-row[b-rk39e57we7] {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .location-row-main[b-rk39e57we7] {
        flex: 1 1 60%;
    }

    /* No hover on touch devices - keep the actions visible */
    .location-card-actions[b-rk39e57we7] {
        opacity: 1;
    }

    
}

/* Searchable country picker (selection-only) */
.country-picker[b-rk39e57we7] {
    position: relative;
}

.country-backdrop[b-rk39e57we7] {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.country-menu[b-rk39e57we7] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1051;
    margin-top: var(--space-1);
    max-height: 280px;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.country-menu .dropdown-item[b-rk39e57we7] {
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
}

.country-menu .dropdown-item:hover[b-rk39e57we7] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.country-menu .dropdown-item.active[b-rk39e57we7],
.country-menu .dropdown-item.active:hover[b-rk39e57we7] {
    background-color: var(--itamfy-primary, #4f46e5);
    color: #fff;
}
/* /Components/Pages/Organizations/OrganizationDetails.razor.rz.scp.css */
/* Field Labels - consistent with other detail pages */

/* Card Headers */

.stat-item[b-vovujk4snx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg);
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.01));
    transition: background-color 0.15s ease;
}

.stat-item:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.03);
}

.stat-item-content[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
}

.stat-item-value[b-vovujk4snx] {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.stat-item-label[b-vovujk4snx] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #6c757d);
}

/* ==========================================================================
   Items List - Locations & Templates (Overview tab)
   ========================================================================== */

.items-list[b-vovujk4snx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.item-row[b-vovujk4snx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.item-row:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.02);
}

.item-row.clickable[b-vovujk4snx] {
    cursor: pointer;
}

.item-row.clickable:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.03);

}

.item-icon[b-vovujk4snx] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-hover, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    flex-shrink: 0;
}

.item-info[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
}

.item-arrow[b-vovujk4snx] {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.item-row.clickable:hover .item-arrow[b-vovujk4snx] {
    opacity: 0.8;
}

/* ==========================================================================
   Security List - Owners & Admins (Security tab)
   ========================================================================== */

.security-list[b-vovujk4snx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.security-item[b-vovujk4snx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease;
}

.security-item:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.02);
}

.security-item-icon[b-vovujk4snx] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-hover, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    flex-shrink: 0;
}

.security-item-info[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
}

.security-item-actions[b-vovujk4snx] {
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.security-item:hover .security-item-actions[b-vovujk4snx] {
    opacity: 1;
}

/* ==========================================================================
   Vertical Tab Layout
   ========================================================================== */

/* ==========================================================================
   Settings Tab - Two Column Layout
   ========================================================================== */

.settings-grid[b-vovujk4snx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
    gap: var(--space-4);
    align-items: start;
}

.settings-form[b-vovujk4snx] {
    min-width: 0;
}

.settings-guide[b-vovujk4snx] {
    min-width: 0;
}

.settings-section[b-vovujk4snx] {
    margin-bottom: var(--space-2);
}

.settings-section-title[b-vovujk4snx] {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
}

.settings-actions[b-vovujk4snx] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Setup Guide Steps */
.guide-steps[b-vovujk4snx] {
    padding: 0;
}

.guide-step[b-vovujk4snx] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.guide-step:last-child[b-vovujk4snx] {
    border-bottom: none;
}

.guide-step-number[b-vovujk4snx] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--itamfy-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    margin-top: 1px;
}

.guide-step-content[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
}

.guide-step-title[b-vovujk4snx] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.guide-list[b-vovujk4snx] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-list li[b-vovujk4snx] {
    position: relative;
    padding-left: var(--space-4);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.guide-list li[b-vovujk4snx]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

.guide-list li a[b-vovujk4snx] {
    color: var(--itamfy-primary);
    text-decoration: none;
}

.guide-list li a:hover[b-vovujk4snx] {
    text-decoration: underline;
}

.guide-sublist[b-vovujk4snx] {
    list-style: none;
    padding: 0;
    margin: var(--space-1) 0 0 var(--space-4);
}

.guide-sublist li[b-vovujk4snx] {
    padding-left: 0;
    margin-bottom: 0;
}

.guide-sublist li[b-vovujk4snx]::before {
    display: none;
}

.guide-sublist code[b-vovujk4snx] {
    font-size: var(--text-xs);
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.guide-footer[b-vovujk4snx] {
    padding: var(--space-3);
    border-top: 1px solid var(--border-color);
}
/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {

    .settings-grid[b-vovujk4snx] {
        grid-template-columns: 1fr;
    }

    .settings-actions[b-vovujk4snx] {
        flex-direction: column;
    }
    .security-item-actions[b-vovujk4snx] {
        opacity: 1;
    }
}

@media (max-width: 480px) {

    .item-row[b-vovujk4snx] {
        padding: var(--space-2) var(--space-3);
    }

    .security-item[b-vovujk4snx] {
        padding: var(--space-2) var(--space-3);
    }

    .stat-item[b-vovujk4snx] {
        padding: var(--space-2) var(--space-3);
    }
}
/* /Components/Pages/Organizations/Organizations.razor.rz.scp.css */
/* Organizations List - horizontal rows (icon | name + description | badges | date | actions) */
.organizations-grid[b-21ebgx9rbt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Organization Row Card */
.organization-card[b-21ebgx9rbt] {
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    border: 1px solid var(--border-color);
}

.organization-card:hover[b-21ebgx9rbt] {
    background-color: var(--bg-hover); border-color: var(--control-border);
}

.org-row[b-21ebgx9rbt] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.org-icon[b-21ebgx9rbt] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--bg-hover, #f1f3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    font-size: var(--text-xl);
    flex-shrink: 0;
}
.org-row-main[b-21ebgx9rbt] {
    flex: 1;
    min-width: 0;
}

.org-card-title[b-21ebgx9rbt] {
    font-weight: 600;
    font-size: var(--text-lg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-card-sub[b-21ebgx9rbt] {
    font-size: var(--text-sm);
    color: var(--bs-secondary, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.org-card-actions[b-21ebgx9rbt] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.organization-card:hover .org-card-actions[b-21ebgx9rbt] {
    opacity: 1;
}
/* Responsive */
@media (max-width: 768px) {
    

    /* Wrap the row: icon + name on the first line, role/actions below */
    .org-row[b-21ebgx9rbt] {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .org-row-main[b-21ebgx9rbt] {
        flex: 1 1 60%;
    }

    /* No hover on touch devices - keep the actions visible. They wrap onto a second
       line; push them to the trailing edge so edit/delete stay where the eye expects
       them instead of butting up against the role badge on the left. */
    .org-card-actions[b-21ebgx9rbt] {
        opacity: 1;
        margin-left: auto;
    }
}
/* /Components/Pages/Subscription/PaymentCancel.razor.rz.scp.css */
/* Centres the single result card in the viewport. This page has one thing on it. */
.payment-result-container[b-4st7sfvr2z] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-8);
}

.payment-card[b-4st7sfvr2z] {
    max-width: 600px;
    width: 100%;
}

/* The outcome glyph. Sized here rather than with an fa-5x utility: at 5x it was a 5rem
   decoration that dwarfed the sentence actually telling the customer what happened.
   Large enough to read as the page's subject, small enough that the text leads. */
.payment-icon[b-4st7sfvr2z] {
    font-size: var(--text-5xl);
    line-height: 1;
}
/* /Components/Pages/Subscription/PaymentSuccess.razor.rz.scp.css */
/* Centres the single result card in the viewport. This page has one thing on it. */
.payment-result-container[b-y29bqc0qib] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-8);
}

.payment-card[b-y29bqc0qib] {
    max-width: 600px;
    width: 100%;
}

/* The outcome glyph. Sized here rather than with an fa-5x utility: at 5x it was a 5rem
   decoration that dwarfed the sentence actually telling the customer what happened.
   Large enough to read as the page's subject, small enough that the text leads. */
.payment-icon[b-y29bqc0qib] {
    font-size: var(--text-5xl);
    line-height: 1;
}
/* /Components/Pages/Subscription/Plans.razor.rz.scp.css */
/* Field Labels */

/* Card Titles */

/* ==========================================================================
   Period Selection Bar
   ========================================================================== */

.period-bar[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    margin-bottom: var(--space-5);
}

.period-label[b-qkhel4upuw] {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-secondary, #6c757d);
    white-space: nowrap;
}

.period-buttons[b-qkhel4upuw] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.period-btn[b-qkhel4upuw] {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.period-btn:hover[b-qkhel4upuw] {
    border-color: var(--itamfy-primary, #4f46e5);
    color: var(--itamfy-primary, #4f46e5);
    background: rgba(15, 136, 255, 0.08);
}

.period-btn.active[b-qkhel4upuw] {
    background: var(--itamfy-primary, #4f46e5);
    border-color: var(--itamfy-primary, #4f46e5);
    color: #ffffff;
}

.period-discount[b-qkhel4upuw] {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    background: rgba(16, 185, 129, 0.12);
    color: var(--itamfy-success);
    border-radius: var(--radius-full);
}

.period-btn.active .period-discount[b-qkhel4upuw] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ==========================================================================
   Plans Grid
   ========================================================================== */

.plans-grid[b-qkhel4upuw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   Plan Card
   ========================================================================== */

.plan-card[b-qkhel4upuw] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.plan-card:hover[b-qkhel4upuw] {
    background-color: var(--bg-hover); border-color: var(--control-border);
}

.plan-current[b-qkhel4upuw] {
    border: 2px solid var(--itamfy-primary, #4f46e5);
}

.plan-badge[b-qkhel4upuw] {
    position: absolute;
    top: -1px;
    right: var(--space-4);
    background: var(--itamfy-primary, #4f46e5);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}

/* Plan Header */
.plan-header[b-qkhel4upuw] {
    text-align: center;
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.plan-icon[b-qkhel4upuw] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    margin: 0 auto var(--space-3);
}

.plan-icon.free[b-qkhel4upuw],
.plan-icon.paid[b-qkhel4upuw],
.plan-icon.enterprise[b-qkhel4upuw] {
    background: var(--bg-hover, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-secondary, #6b7280);
}

.plan-name[b-qkhel4upuw] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.plan-price[b-qkhel4upuw] {
    margin-bottom: var(--space-2);
}

.price-amount[b-qkhel4upuw] {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.price-period[b-qkhel4upuw] {
    font-size: var(--text-sm);
    color: var(--text-muted, #adb5bd);
}

.plan-description[b-qkhel4upuw] {
    font-size: var(--text-sm);
    color: var(--text-secondary, #6c757d);
    margin-top: var(--space-1);
}

/* Renewal/expiry date, shown only on the plan the organization is currently on */
.plan-renewal[b-qkhel4upuw] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--itamfy-primary, #0F88FF);
    margin-top: var(--space-2);
}

/* ==========================================================================
   Plan Features
   ========================================================================== */

.plan-features[b-qkhel4upuw] {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    flex: 1;
}

.feature-item[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.feature-item:last-child[b-qkhel4upuw] {
    border-bottom: none;
}

/* No tinted chip. Every quantity row on a plan card is "included" by definition, so a green
   tile behind each one coloured the whole card without saying anything - the same decorative
   pattern removed from both dashboards. The glyph stays (check vs cross genuinely distinguishes
   an included feature from an excluded one) and only THAT carries colour, from tokens rather
   than a hardcoded hex. */
.feature-icon[b-qkhel4upuw] {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    flex-shrink: 0;
    color: var(--text-secondary);
}

.feature-icon.included[b-qkhel4upuw] {
    color: var(--itamfy-success);
}

.feature-icon.excluded[b-qkhel4upuw] {
    color: var(--text-muted);
}

.feature-disabled[b-qkhel4upuw] {
    color: var(--text-muted, #adb5bd);
    text-decoration: line-through;
}

/* ==========================================================================
   Plan Footer
   ========================================================================== */

.plan-footer[b-qkhel4upuw] {
    padding: var(--space-3) var(--space-4) var(--space-4);
    margin-top: auto;
}
/* ==========================================================================
   Upgrade Modal
   ========================================================================== */

.modal-plan-summary[b-qkhel4upuw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--bg-hover, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.modal-plan-info[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.modal-plan-icon[b-qkhel4upuw] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--bg-hover, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.modal-plan-price[b-qkhel4upuw] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.modal-features-grid[b-qkhel4upuw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.modal-feature[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    font-size: var(--text-base);
    padding: var(--space-1) 0;
}

/* ==========================================================================
   MoR Notice
   ========================================================================== */

.mor-notice[b-qkhel4upuw] {
    margin-top: var(--space-2);
}
/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    

    .period-bar[b-qkhel4upuw] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .plans-grid[b-qkhel4upuw] {
        grid-template-columns: 1fr;
    }

    .plan-card:hover[b-qkhel4upuw] {
        transform: none;
    }

    .modal-features-grid[b-qkhel4upuw] {
        grid-template-columns: 1fr;
    }

    .modal-plan-summary[b-qkhel4upuw] {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .modal-plan-info[b-qkhel4upuw] {
        flex-direction: column;
    }

    .modal-plan-price[b-qkhel4upuw] {
        align-items: center;
    }
}
/* /Components/Pages/Templates/TemplateDetails.razor.rz.scp.css */
/* Field Labels */

/* Card Headers */

/* Default Fields Grid */
.default-fields-grid[b-aw3orykepb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-3);
}

.field-item[b-aw3orykepb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg);
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.01));
    transition: background-color 0.15s ease;
}

.field-item:hover[b-aw3orykepb] {
    background-color: rgba(0, 0, 0, 0.03);
}

.field-item-icon[b-aw3orykepb] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-hover, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.field-item-content[b-aw3orykepb] {
    min-width: 0;
    overflow-wrap: anywhere;
    flex: 1;
    font-size: var(--text-base);
}

/* Custom Properties List */
.properties-list[b-aw3orykepb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: var(--space-3);
}

.property-item[b-aw3orykepb] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease;
}

.property-item:hover[b-aw3orykepb] {
    background-color: rgba(0, 0, 0, 0.02);
}

.property-icon[b-aw3orykepb] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-hover, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.property-info[b-aw3orykepb] {
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
}

.property-header[b-aw3orykepb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.property-badges[b-aw3orykepb] {
    display: flex;
    gap: var(--space-1);
}

.property-actions[b-aw3orykepb] {
    display: flex;
    gap: var(--space-1);
    opacity: 1;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.property-item:hover .property-actions[b-aw3orykepb] {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    

    

    .default-fields-grid[b-aw3orykepb] {
        grid-template-columns: 1fr;
    }

    .property-item[b-aw3orykepb] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .property-actions[b-aw3orykepb] {
        opacity: 1;
        margin-left: auto;
        justify-content: flex-end;
    }
}
/* /Components/Pages/Templates/Templates.razor.rz.scp.css */
/* Templates List - horizontal rows (icon | name + counts | org badge | actions),
   same style as the Organizations page */
.templates-grid[b-j50znpxqob] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Template Row Card */
.template-card[b-j50znpxqob] {
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    border: 1px solid var(--border-color);
}

.template-card:hover[b-j50znpxqob] {
    background-color: var(--bg-hover); border-color: var(--control-border);
}

.template-row[b-j50znpxqob] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.template-icon[b-j50znpxqob] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--bg-hover, #f1f3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    font-size: var(--text-xl);
    flex-shrink: 0;
}
.template-row-main[b-j50znpxqob] {
    flex: 1;
    min-width: 0;
}

.template-card-title[b-j50znpxqob] {
    font-weight: 600;
    font-size: var(--text-lg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-card-sub[b-j50znpxqob] {
    font-size: var(--text-sm);
    color: var(--bs-secondary, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-org-badge[b-j50znpxqob] {
    flex-shrink: 0;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full);
    background: rgba(107, 114, 128, 0.16);
    color: var(--text-muted, #6b7280);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.template-card-actions[b-j50znpxqob] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.template-card:hover .template-card-actions[b-j50znpxqob] {
    opacity: 1;
}

/* Icon picker (create/edit modal) */
.icon-picker[b-j50znpxqob] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.icon-picker-item[b-j50znpxqob] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover, #f1f3f5);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--text-secondary, #6b7280);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: all 0.15s ease;
}

.icon-picker-item:hover[b-j50znpxqob] {
    border-color: var(--border-color, #e5e7eb);
    color: var(--text-primary, #160e27);
}

.icon-picker-item.selected[b-j50znpxqob] {
    background: rgba(15, 136, 255, 0.1);
    border-color: var(--itamfy-primary, #0F88FF);
    color: var(--itamfy-primary, #0F88FF);
}

/* Responsive */
@media (max-width: 768px) {
    

    /* Wrap the row: icon + name on the first line, badge/actions below */
    .template-row[b-j50znpxqob] {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .template-row-main[b-j50znpxqob] {
        flex: 1 1 60%;
    }

    /* No hover on touch devices - keep the actions visible. They wrap onto a second
       line; push them to the trailing edge so edit/delete stay where the eye expects
       them instead of butting up against the org badge on the left. */
    .template-card-actions[b-j50znpxqob] {
        opacity: 1;
        margin-left: auto;
    }

    
}
/* /Components/Pages/Users/UserDetails.razor.rz.scp.css */
.info-label[b-n5zlmcglga] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: var(--space-2) !important;
}

.timestamp-cell[b-n5zlmcglga] {
    white-space: nowrap;
    font-family: monospace;
    font-size: var(--text-sm);
}

.changes-detail[b-n5zlmcglga] {
    padding: var(--space-3);
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
}

.change-section[b-n5zlmcglga] {
    margin-bottom: var(--space-3);
}

.change-section:last-child[b-n5zlmcglga] {
    margin-bottom: 0;
}

.change-json[b-n5zlmcglga] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: var(--text-sm);
    max-height: 300px;
    overflow: auto;
    margin: var(--space-2) 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.page-indicator[b-n5zlmcglga] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    padding: 0 var(--space-2);
}
@media (max-width: 768px) {
    

    

    
}

@media (max-width: 576px) {
    

    
}
/* /Components/Pages/Users/Users.razor.rz.scp.css */
@media (max-width: 576px) {
    

    

    .users-table thead th[b-olbsr8sj1l],
    .users-table tbody td[b-olbsr8sj1l] {
        padding: var(--space-3);
    }
}
/* /Components/Shared/AnnouncementBanner.razor.rz.scp.css */
.announcement-container[b-mkj80fu3rt] {
    width: 100%;
}

.announcement-banner[b-mkj80fu3rt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-base);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.announcement-content[b-mkj80fu3rt] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

.announcement-message[b-mkj80fu3rt] {
    margin-left: var(--space-1);
}

.announcement-close[b-mkj80fu3rt] {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    padding: var(--space-1) var(--space-2);
    color: inherit;
}

.announcement-close:hover[b-mkj80fu3rt] {
    opacity: 1;
}

.announcement-info[b-mkj80fu3rt] {
    background-color: #dbeafe;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

.announcement-warning[b-mkj80fu3rt] {
    background-color: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.announcement-critical[b-mkj80fu3rt] {
    background-color: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.announcement-success[b-mkj80fu3rt] {
    background-color: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}
/* /Components/Shared/CookieConsentBanner.razor.rz.scp.css */
.cookie-consent-banner[b-5ns8wja2ju] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    background: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    padding: var(--space-3) var(--space-5);
}

.cookie-consent-content[b-5ns8wja2ju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-text[b-5ns8wja2ju] {
    display: flex;
    align-items: flex-start;
    flex: 1 1 300px;
    font-size: var(--text-base);
}

.cookie-consent-actions[b-5ns8wja2ju] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* /Components/Shared/LanguageSelector.razor.rz.scp.css */
/* MenuItems variant: the host passes ItemCssClass="dropdown-mobile-only" so the rows only
   appear on the breakpoint where the toolbar's own language control is hidden. The rule has
   to live HERE, not in MainLayout.razor.css - Blazor scoped CSS is keyed to the component
   that emits the markup, and these <li>s are emitted by this component. */
.dropdown-mobile-only[b-utmq1rzoe9] {
    display: none;
}

@media (max-width: 768px) {
    .dropdown-mobile-only[b-utmq1rzoe9] {
        display: block;
    }
}

.language-selector[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.language-selector:hover[b-utmq1rzoe9] {
    color: var(--itamfy-primary) !important;
    text-decoration: none !important;
}
.language-code[b-utmq1rzoe9] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    background: var(--itamfy-primary);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    min-width: 1.5rem;
    text-align: center;
}

/* Row wrapper is authored in this component, so it keeps the scoped attribute and lays out as a
   flex row inside the Bootstrap dropdown menu. The check icon is pushed to the right with the
   global .ms-auto class. */
.language-item-row[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.language-option[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.language-option-code[b-utmq1rzoe9] {
    font-size: var(--text-xs);
    font-weight: 600;
    background-color: var(--gray-500);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    min-width: 1.5rem;
    text-align: center;
}

.language-option-name[b-utmq1rzoe9] {
    font-size: var(--text-base);
}

.dropdown-item[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
}

/* MenuItems mode: the row that opens the list, and the language rows it reveals. */
.language-menu-chevron[b-utmq1rzoe9] {
    font-size: var(--text-xs);
    transition: transform var(--transition-fast);
}

.language-menu-chevron.expanded[b-utmq1rzoe9] {
    transform: rotate(180deg);
}

/* Indented so the revealed rows read as belonging to the row above them. */
.language-sub-item[b-utmq1rzoe9] {
    padding-left: var(--space-6);
}

/* Selected language: use a subtle neutral row highlight (works in light AND dark) and a solid
   brand-coloured code badge with white text, so the code stays high-contrast in both themes. */
.dropdown-item.active[b-utmq1rzoe9] {
    background: var(--bg-hover);
    /* Bootstrap's default .dropdown-item.active sets white text (for its blue background),
       which is unreadable on the neutral highlight - restore the theme text color. */
    color: var(--text-primary);
}

.dropdown-item.active:hover[b-utmq1rzoe9] {
    color: var(--text-primary);
}

.dropdown-item.active .language-option-code[b-utmq1rzoe9] {
    background-color: var(--itamfy-primary);
    color: #ffffff;
}
/* /Components/Shared/RateLimitedOverlay.razor.rz.scp.css */
.skeleton-container[b-hd8r5f1vnp] {
    max-width: 500px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rate-limited-overlay[b-hd8r5f1vnp] {
    padding: var(--space-8) 0;
}

.skeleton-line[b-hd8r5f1vnp] {
    height: 16px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--skeleton-base, #e0e6ed) 25%, var(--skeleton-shine, #f0f3f7) 50%, var(--skeleton-base, #e0e6ed) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-hd8r5f1vnp 1.5s ease-in-out infinite;
}

.skeleton-line-long[b-hd8r5f1vnp] {
    width: 100%;
}

.skeleton-line-medium[b-hd8r5f1vnp] {
    width: 75%;
}

.skeleton-line-short[b-hd8r5f1vnp] {
    width: 50%;
}

@keyframes skeleton-shimmer-b-hd8r5f1vnp {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Components/Shared/UserAvatar.razor.rz.scp.css */
/* Scoped to UserAvatar deliberately.

   These rules first lived in MainLayout.razor.css, which renders <UserAvatar> - but Blazor
   scoped CSS is keyed to the component that emits the MARKUP, not the one that places the tag.
   The span below carries UserAvatar's scope id, so MainLayout's rules never matched it and the
   circle collapsed to the width of a single character. */

.user-avatar[b-6gp1pffxf8] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}

/* Only the initials variant gets the brand fill - a photo supplies its own. */
.user-avatar-initials[b-6gp1pffxf8] {
    background: var(--itamfy-primary);
    color: #ffffff;
}

.user-avatar-img[b-6gp1pffxf8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}