/* GST Lookup - the small amount of styling Bootstrap does not already cover. */

.gstin-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .02em;
}

/* Status is the one thing people scan for, so give the row itself a tint
   rather than relying on a badge they have to find. */
tr.row-inactive > td {
    background-color: var(--bs-danger-bg-subtle);
}

tr.row-failing > td {
    background-color: var(--bs-warning-bg-subtle);
}

.diff-old {
    color: var(--bs-danger);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.diff-new {
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

.filter-bar {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.snapshot-history td {
    font-size: .875rem;
}

/* ---------------------------------------------------------------------------
   Application shell: fixed left sidebar, slim top bar.

   Below lg the sidebar is a Bootstrap responsive offcanvas, which keeps the
   navigation in one place in the markup. Above lg Bootstrap forces the aside
   and its body transparent, so the colour lives on .sidebar-inner instead of
   fighting that with !important.
   --------------------------------------------------------------------------- */

:root {
    --app-sidebar-width: 264px;
    --app-sidebar-bg: #111827;
    --app-sidebar-fg: #9aa4b2;
    --app-topbar-height: 58px;
}

.app-sidebar {
    --bs-offcanvas-width: var(--app-sidebar-width);
    --bs-offcanvas-bg: var(--app-sidebar-bg);
}

.app-sidebar .offcanvas-body {
    padding: 0;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background: var(--app-sidebar-bg);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1.15rem 1.25rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-brand:hover {
    color: #fff;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .75rem 0;
}

.sidebar-heading {
    padding: .95rem .95rem .3rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .34);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: .1rem .6rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: var(--app-sidebar-fg);
    font-size: .925rem;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar-link i {
    width: 1.25rem;
    font-size: 1.02rem;
    text-align: center;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.sidebar-link.active {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.sidebar-foot {
    padding: .6rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border-radius: .5rem;
    color: var(--app-sidebar-fg);
    text-decoration: none;
    overflow: hidden;
}

.sidebar-user:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.sidebar-user::after {
    margin-left: auto;
    flex: 0 0 auto;
}

.sidebar-user-role {
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
}

.sidebar-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--app-topbar-height);
    padding: .5rem 1.25rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.topbar-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.topbar-icon:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.topbar-dot {
    position: absolute;
    top: .3rem;
    right: .35rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--bs-danger);
    border: 2px solid var(--bs-body-bg);
}

.app-main {
    padding: 1.5rem 1.25rem 3rem;
}

@media (min-width: 992px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--app-sidebar-width);
        height: 100vh;
        z-index: 1030;
    }

    /* Bootstrap leaves the body auto-height above the breakpoint; the sidebar
       needs the full viewport so the footer sits at the bottom and a long nav
       scrolls on its own rather than pushing the user menu off screen. */
    .app-sidebar .offcanvas-body {
        height: 100vh;
        overflow: hidden;
    }

    .sidebar-inner {
        height: 100%;
    }

    .app-content {
        margin-left: var(--app-sidebar-width);
    }

    .app-main {
        padding: 1.75rem 1.75rem 3rem;
    }

    .app-topbar {
        padding: .5rem 1.75rem;
    }
}