/* body{
    background-color:var(--smmcc-primary-soft);
} */

.m-0 {
    margin: 0 !important
}

.mt-0,
.my-0 {
    margin-top: 0 !important
}

.mr-0,
.mx-0 {
    margin-right: 0 !important
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important
}

.ml-0,
.mx-0 {
    margin-left: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.mt-1,
.my-1 {
    margin-top: .25rem !important
}

.mr-1,
.mx-1 {
    margin-right: .25rem !important
}

.mb-1,
.my-1 {
    margin-bottom: .25rem !important
}

.ml-1,
.mx-1 {
    margin-left: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.mt-2,
.my-2 {
    margin-top: .5rem !important
}

.mr-2,
.mx-2 {
    margin-right: .5rem !important
}

.mb-2,
.my-2 {
    margin-bottom: .5rem !important
}

.ml-2,
.mx-2 {
    margin-left: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.mt-3,
.my-3 {
    margin-top: 1rem !important
}

.mr-3,
.mx-3 {
    margin-right: 1rem !important
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important
}

.ml-3,
.mx-3 {
    margin-left: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem !important
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.mt-5,
.my-5 {
    margin-top: 3rem !important
}

.mr-5,
.mx-5 {
    margin-right: 3rem !important
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important
}

.ml-5,
.mx-5 {
    margin-left: 3rem !important
}

.m-4pt {
    margin: .25rem !important
}

.mt-4pt,
.my-4pt {
    margin-top: .25rem !important
}

.mr-4pt,
.mx-4pt {
    margin-right: .25rem !important
}

.mb-4pt,
.my-4pt {
    margin-bottom: .25rem !important
}

.ml-4pt,
.mx-4pt {
    margin-left: .25rem !important
}

.m-8pt {
    margin: .5rem !important
}

.mt-8pt,
.my-8pt {
    margin-top: .5rem !important
}

.mr-8pt,
.mx-8pt {
    margin-right: .5rem !important
}

.mb-8pt,
.my-8pt {
    margin-bottom: .5rem !important
}

.ml-8pt,
.mx-8pt {
    margin-left: .5rem !important
}

.m-12pt {
    margin: .75rem !important
}

.mt-12pt,
.my-12pt {
    margin-top: .75rem !important
}

.mr-12pt,
.mx-12pt {
    margin-right: .75rem !important
}

.mb-12pt,
.my-12pt {
    margin-bottom: .75rem !important
}

.ml-12pt,
.mx-12pt {
    margin-left: .75rem !important
}

.m-16pt {
    margin: 1rem !important
}

.mt-16pt,
.my-16pt {
    margin-top: 1rem !important
}

.mr-16pt,
.mx-16pt {
    margin-right: 1rem !important
}

.mb-16pt,
.my-16pt {
    margin-bottom: 1rem !important
}

.ml-16pt,
.mx-16pt {
    margin-left: 1rem !important
}

.m-20pt {
    margin: 1.25rem !important
}

.mt-20pt,
.my-20pt {
    margin-top: 1.25rem !important
}

.mr-20pt,
.mx-20pt {
    margin-right: 1.25rem !important
}

.mb-20pt,
.my-20pt {
    margin-bottom: 1.25rem !important
}

.ml-20pt,
.mx-20pt {
    margin-left: 1.25rem !important
}

.m-24pt {
    margin: 1.5rem !important
}

.mt-24pt,
.my-24pt {
    margin-top: 1.5rem !important
}

.mr-24pt,
.mx-24pt {
    margin-right: 1.5rem !important
}

.mb-24pt,
.my-24pt {
    margin-bottom: 1.5rem !important
}

.ml-24pt,
.mx-24pt {
    margin-left: 1.5rem !important
}

.m-32pt {
    margin: 2rem !important
}

.mt-32pt,
.my-32pt {
    margin-top: 2rem !important
}

.mr-32pt,
.mx-32pt {
    margin-right: 2rem !important
}

.mb-32pt,
.my-32pt {
    margin-bottom: 2rem !important
}

.ml-32pt,
.mx-32pt {
    margin-left: 2rem !important
}

.m-40pt {
    margin: 2.5rem !important
}

.mt-40pt,
.my-40pt {
    margin-top: 2.5rem !important
}

.mr-40pt,
.mx-40pt {
    margin-right: 2.5rem !important
}

.mb-40pt,
.my-40pt {
    margin-bottom: 2.5rem !important
}

.ml-40pt,
.mx-40pt {
    margin-left: 2.5rem !important
}

.m-44pt {
    margin: 2.75rem !important
}

.mt-44pt,
.my-44pt {
    margin-top: 2.75rem !important
}

.mr-44pt,
.mx-44pt {
    margin-right: 2.75rem !important
}

.mb-44pt,
.my-44pt {
    margin-bottom: 2.75rem !important
}

.ml-44pt,
.mx-44pt {
    margin-left: 2.75rem !important
}

.m-48pt {
    margin: 3rem !important
}

.mt-48pt,
.my-48pt {
    margin-top: 3rem !important
}

.mr-48pt,
.mx-48pt {
    margin-right: 3rem !important
}

.mb-48pt,
.my-48pt {
    margin-bottom: 3rem !important
}

.ml-48pt,
.mx-48pt {
    margin-left: 3rem !important
}

.m-64pt {
    margin: 4rem !important
}

.mt-64pt,
.my-64pt {
    margin-top: 4rem !important
}

.mr-64pt,
.mx-64pt {
    margin-right: 4rem !important
}

.mb-64pt,
.my-64pt {
    margin-bottom: 4rem !important
}

.ml-64pt,
.mx-64pt {
    margin-left: 4rem !important
}

.m-112pt {
    margin: 7rem !important
}

.mt-112pt,
.my-112pt {
    margin-top: 7rem !important
}

.mr-112pt,
.mx-112pt {
    margin-right: 7rem !important
}

.mb-112pt,
.my-112pt {
    margin-bottom: 7rem !important
}

.ml-112pt,
.mx-112pt {
    margin-left: 7rem !important
}

.m-128pt {
    margin: 8rem !important
}

.mt-128pt,
.my-128pt {
    margin-top: 8rem !important
}

.mr-128pt,
.mx-128pt {
    margin-right: 8rem !important
}

.mb-128pt,
.my-128pt {
    margin-bottom: 8rem !important
}

.ml-128pt,
.mx-128pt {
    margin-left: 8rem !important
}

.p-0 {
    padding: 0 !important
}

.pt-0,
.py-0 {
    padding-top: 0 !important
}

.pr-0,
.px-0 {
    padding-right: 0 !important
}

.pb-0,
.py-0 {
    padding-bottom: 0 !important
}

.pl-0,
.px-0 {
    padding-left: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.pt-1,
.py-1 {
    padding-top: .25rem !important
}

.pr-1,
.px-1 {
    padding-right: .25rem !important
}

.pb-1,
.py-1 {
    padding-bottom: .25rem !important
}

.pl-1,
.px-1 {
    padding-left: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.pt-2,
.py-2 {
    padding-top: .5rem !important
}

.pr-2,
.px-2 {
    padding-right: .5rem !important
}

.pb-2,
.py-2 {
    padding-bottom: .5rem !important
}

.pl-2,
.px-2 {
    padding-left: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.pt-3,
.py-3 {
    padding-top: 1rem !important
}

.pr-3,
.px-3 {
    padding-right: 1rem !important
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important
}

.pl-3,
.px-3 {
    padding-left: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.pt-4,
.py-4 {
    padding-top: 1.5rem !important
}

.pr-4,
.px-4 {
    padding-right: 1.5rem !important
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem !important
}

.pl-4,
.px-4 {
    padding-left: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.pt-5,
.py-5 {
    padding-top: 3rem !important
}

.pr-5,
.px-5 {
    padding-right: 3rem !important
}

.pb-5,
.py-5 {
    padding-bottom: 3rem !important
}

.pl-5,
.px-5 {
    padding-left: 3rem !important
}

.p-4pt {
    padding: .25rem !important
}

.pt-4pt,
.py-4pt {
    padding-top: .25rem !important
}

.pr-4pt,
.px-4pt {
    padding-right: .25rem !important
}

.pb-4pt,
.py-4pt {
    padding-bottom: .25rem !important
}

.pl-4pt,
.px-4pt {
    padding-left: .25rem !important
}

.p-8pt {
    padding: .5rem !important
}

.pt-8pt,
.py-8pt {
    padding-top: .5rem !important
}

.pr-8pt,
.px-8pt {
    padding-right: .5rem !important
}

.pb-8pt,
.py-8pt {
    padding-bottom: .5rem !important
}

.pl-8pt,
.px-8pt {
    padding-left: .5rem !important
}

.p-12pt {
    padding: .75rem !important
}

.pt-12pt,
.py-12pt {
    padding-top: .75rem !important
}

.pr-12pt,
.px-12pt {
    padding-right: .75rem !important
}

.pb-12pt,
.py-12pt {
    padding-bottom: .75rem !important
}

.pl-12pt,
.px-12pt {
    padding-left: .75rem !important
}

.p-16pt {
    padding: 1rem !important
}

.pt-16pt,
.py-16pt {
    padding-top: 1rem !important
}

.pr-16pt,
.px-16pt {
    padding-right: 1rem !important
}

.pb-16pt,
.py-16pt {
    padding-bottom: 1rem !important
}

.pl-16pt,
.px-16pt {
    padding-left: 1rem !important
}

.p-18pt {
    padding: 1.15rem !important
}

.pt-18pt,
.py-18pt {
    padding-top: 1.15rem !important
}

.p-20pt {
    padding: 1.25rem !important
}

.pt-20pt,
.py-20pt {
    padding-top: 1.25rem !important
}

.pr-20pt,
.px-20pt {
    padding-right: 1.25rem !important
}

.pb-20pt,
.py-20pt {
    padding-bottom: 1.25rem !important
}

.pl-20pt,
.px-20pt {
    padding-left: 1.25rem !important
}

.pt-22pt,
.py-22pt {
    padding-top: 1.18rem !important
}

.pt-22pt,
.py-22pt {
    padding-bottom: 1.18rem !important
}

.pl-20pt,
.px-20pt {
    padding-left: 1.25rem !important
}

.p-24pt {
    padding: 1.5rem !important
}

.pt-24pt,
.py-24pt {
    padding-top: 1.5rem !important
}

.pr-24pt,
.px-24pt {
    padding-right: 1.5rem !important
}

.pb-24pt,
.py-24pt {
    padding-bottom: 1.5rem !important
}

.pl-24pt,
.px-24pt {
    padding-left: 1.5rem !important
}

.p-32pt {
    padding: 2rem !important
}

.pt-32pt,
.py-32pt {
    padding-top: 2rem !important
}

.pr-32pt,
.px-32pt {
    padding-right: 2rem !important
}

.pb-32pt,
.py-32pt {
    padding-bottom: 2rem !important
}

.pl-32pt,
.px-32pt {
    padding-left: 2rem !important
}

.p-40pt {
    padding: 2.5rem !important
}

.pt-40pt,
.py-40pt {
    padding-top: 2.5rem !important
}

.pr-40pt,
.px-40pt {
    padding-right: 2.5rem !important
}

.pb-40pt,
.py-40pt {
    padding-bottom: 2.5rem !important
}

.pl-40pt,
.px-40pt {
    padding-left: 2.5rem !important
}

.p-44pt {
    padding: 2.75rem !important
}

.pt-44pt,
.py-44pt {
    padding-top: 2.75rem !important
}

.pr-44pt,
.px-44pt {
    padding-right: 2.75rem !important
}

.pb-44pt,
.py-44pt {
    padding-bottom: 2.75rem !important
}

.pl-44pt,
.px-44pt {
    padding-left: 2.75rem !important
}

.p-48pt {
    padding: 3rem !important
}

.pt-48pt,
.py-48pt {
    padding-top: 3rem !important
}

.pr-48pt,
.px-48pt {
    padding-right: 3rem !important
}

.pb-48pt,
.py-48pt {
    padding-bottom: 3rem !important
}

.pl-48pt,
.px-48pt {
    padding-left: 3rem !important
}

.p-64pt {
    padding: 4rem !important
}

.pt-64pt,
.py-64pt {
    padding-top: 4rem !important
}

.pr-64pt,
.px-64pt {
    padding-right: 4rem !important
}

.pb-64pt,
.py-64pt {
    padding-bottom: 4rem !important
}

.pl-64pt,
.px-64pt {
    padding-left: 4rem !important
}

.p-112pt {
    padding: 7rem !important
}

.pt-112pt,
.py-112pt {
    padding-top: 7rem !important
}

.pr-112pt,
.px-112pt {
    padding-right: 7rem !important
}

.pb-112pt,
.py-112pt {
    padding-bottom: 7rem !important
}

.pl-112pt,
.px-112pt {
    padding-left: 7rem !important
}

.p-128pt {
    padding: 8rem !important
}

.pt-128pt,
.py-128pt {
    padding-top: 8rem !important
}

.pr-128pt,
.px-128pt {
    padding-right: 8rem !important
}

.pb-128pt,
.py-128pt {
    padding-bottom: 8rem !important
}

.pl-128pt,
.px-128pt {
    padding-left: 8rem !important
}

.p-150pt {
    padding: 10rem !important
}

.pt-150pt,
.py-150pt {
    padding-top: 10rem !important
}

.pr-150pt,
.px-150pt {
    padding-right: 10rem !important
}

.pb-150pt,
.py-150pt {
    padding-bottom: 10rem !important
}

.pl-150pt,
.px-150pt {
    padding-left: 10rem !important
}

.rounded {
    border-radius: .25rem !important
}

.rounded20 {
    border-radius: 20px !important
}

.rounded-top {
    border-top-left-radius: .25rem !important
}

.rounded-tops {
    border-top-left-radius: 3rem !important;
    border-top-right-radius: 3rem !important;
}

.rounded-right,
.rounded-top {
    border-top-right-radius: .25rem !important
}

.rounded-bottom,
.rounded-right {
    border-bottom-right-radius: .25rem !important
}

.rounded-bottom,
.rounded-left {
    border-bottom-left-radius: .25rem !important
}

.rounded-left {
    border-top-left-radius: .25rem !important
}

.rounded-circle {
    border-radius: 50% !important
}

.rounded-pill {
    border-radius: 50rem !important
}

.rounded-0 {
    border-radius: 0 !important
}

.rounded-30 {
    border-radius: 30px;
}

.rounded-20 {
    border-radius: 20px;
}

.text-justify {
    text-align: justify !important;
}

label.error {
    color: var(--smmcc-danger) !important;
    font-weight: 600;
    margin-top: 10px;
    font-style: italic;
}

.font-red {
    color: var(--smmcc-danger) !important;
}

.required {
    color: var(--smmcc-danger) !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-30 {
    padding-left: 30px !important;
}

.pl-40 {
    padding-left: 40px !important;
}

.pl-60 {
    padding-left: 60px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

/* ==========================================================================
   Category filter tree
   Markup lives in resources/views/admin/partials/category-tree*.blade.php and is
   used by the post list. The card itself is left to the theme; only
   the tree inside it is styled here, off one set of custom properties declared on
   both the card and the tree so the header reads the same palette.
   ========================================================================== */

.cat-tree-card,
.cat-tree {
    --cat-fg: var(--smmcc-text);
    --cat-fg-strong: var(--smmcc-heading);
    --cat-muted: var(--smmcc-muted);
    --cat-hover-bg: var(--smmcc-primary-soft);
    --cat-active-bg: var(--smmcc-primary);
    --cat-active-fg: var(--smmcc-heading);
    --cat-active-shadow: var(--smmcc-focus);
    --cat-badge-bg: var(--smmcc-background);
    --cat-badge-fg: var(--smmcc-primary-ink);
    --cat-badge-active-bg: var(--smmcc-surface);
    --cat-line: var(--smmcc-border);
    --cat-folder: var(--smmcc-primary-ink);
    --cat-leaf: var(--smmcc-secondary-ink);
    --cat-focus: var(--smmcc-focus);
}

/* Beside a long table the filter is worth keeping in view. */
@media (min-width: 992px) {
    .cat-tree-card {
        position: sticky;
        top: 1.5rem;
    }
}

.cat-tree-card__header {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding-bottom: .75rem;
}

.cat-tree-card__title {
    align-items: center;
    color: var(--cat-fg-strong);
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    gap: .5rem;
}

.cat-tree-card__title i {
    color: var(--cat-badge-fg);
}

/* The theme drops the top padding of a body that follows a header, but here the
   collapse wrapper sits between the two and that sibling rule no longer bites.
   Matched on two classes so it outweighs the theme's own `.card .card-body`. */
.cat-tree-card .cat-tree-card__body {
    padding-top: 0;
}

/* The tree scrolls in both directions inside whatever width the card is given:
   never wider than its column, so a long category name can't stretch the page.
   `overscroll-behavior-x` keeps a sideways swipe or trackpad flick in the tree
   instead of handing it to the browser as a back gesture.
   The 2px right gutter is for the hover nudge further down - a row shifted right
   would otherwise read as overflow and flash a scrollbar on rows that fit. */
.cat-tree {
    max-height: 60vh;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-x: contain;
    padding-right: 2px;
    scrollbar-color: var(--cat-line) transparent;
    scrollbar-width: thin;
}

.cat-tree::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.cat-tree::-webkit-scrollbar-thumb {
    background-color: var(--cat-line);
    border-radius: 999px;
}

.cat-tree__list,
.cat-tree__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Guide line down each level of nesting. */
.cat-tree__children {
    border-left: 1px dashed var(--cat-line);
    margin-left: 1.4rem;
    padding-left: .5rem;
}

/* A name too long for the card is reached by scrolling sideways rather than cut
   short, and that only works if something in the scroll container is allowed to
   be wider than the container: each level grows to its own content, and the
   rows inside it follow. Where the names fit - the common case - `max-content`
   lands under the card's width, the level fills it as before, and a row's
   highlight still spans the full width.
   Nested levels need this as much as the root does, because their wrapper clips
   (see `.cat-tree__nest > .cat-tree__children`): a deep row is only reachable
   if the list holding it is wide enough to hold it.
   The reset button is a sibling of the root list rather than a row in it, so it
   is named here too - matched on two classes to outrank the `min-width: 0` that
   `.cat-tree__item` sets for the shrinking case. */
.cat-tree > .cat-tree__item--all,
.cat-tree__list,
.cat-tree__children {
    min-width: max-content;
}

.cat-tree__row {
    align-items: center;
    display: flex;
    gap: .15rem;
}

.cat-tree__item {
    align-items: center;
    background-color: transparent;
    border: 0;
    border-radius: .6rem;
    color: var(--cat-fg);
    display: flex;
    flex: 1 1 auto;
    font-size: .875rem;
    font-weight: 600;
    gap: .55rem;
    min-width: 0;
    padding: .5rem .6rem;
    text-align: left;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    width: 100%;
}

.cat-tree__item:hover {
    background-color: var(--cat-hover-bg);
    color: var(--cat-fg-strong);
    transform: translateX(2px);
}

.cat-tree__item:focus-visible {
    box-shadow: 0 0 0 .2rem var(--cat-focus);
    outline: 0;
}

.cat-tree__item.is-active {
    background-color: var(--cat-active-bg);
    box-shadow: 0 6px 14px -4px var(--cat-active-shadow);
    color: var(--cat-active-fg);
}

.cat-tree__item.is-active:hover {
    transform: none;
}

/* The reset sits above the tree rather than in it. */
.cat-tree__item--all {
    border-bottom: 1px solid var(--cat-line);
    border-radius: .6rem .6rem 0 0;
    margin-bottom: .4rem;
    padding-bottom: .6rem;
}

.cat-tree__item--all.is-active {
    border-bottom-color: transparent;
    border-radius: .6rem;
}

/* One line per name, whatever its length - the tree scrolls to the rest of it.
   The ellipsis is only a fallback for a browser without `max-content` sizing,
   or a container narrow enough that even the shortest row has to give. */
.cat-tree__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-tree__icon {
    flex: 0 0 1.1rem;
    text-align: center;
}

.cat-tree__icon i {
    color: var(--cat-folder);
    font-size: .95rem;
}

.cat-tree__icon .fa-tag {
    color: var(--cat-leaf);
}

.cat-tree__item--all .cat-tree__icon i {
    color: var(--cat-badge-fg);
}

/* On a filled row the icon has to take the row's own colour to stay readable. */
.cat-tree__item.is-active .cat-tree__icon i {
    color: currentColor;
}

/* Both folder icons are rendered; the open branch picks which one shows. */
.cat-tree__icon--open {
    display: none;
}

.cat-tree__branch.is-open > .cat-tree__row .cat-tree__icon--open {
    display: inline-block;
}

.cat-tree__branch.is-open > .cat-tree__row .cat-tree__icon--closed {
    display: none;
}

.cat-tree__count {
    background-color: var(--cat-badge-bg);
    border-radius: 999px;
    color: var(--cat-badge-fg);
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.85rem;
    padding: .3rem .45rem;
    text-align: center;
}

.cat-tree__item.is-active .cat-tree__count {
    background-color: var(--cat-badge-active-bg);
    color: var(--smmcc-heading);
}

.cat-tree__toggle {
    align-items: center;
    background-color: transparent;
    border: 0;
    border-radius: .45rem;
    color: var(--cat-muted);
    display: flex;
    flex: 0 0 1.35rem;
    height: 1.35rem;
    justify-content: center;
    padding: 0;
    transition: background-color .18s ease, color .18s ease;
}

.cat-tree__toggle i {
    font-size: .7rem;
    transition: transform .2s ease;
}

.cat-tree__toggle:hover {
    background-color: var(--cat-hover-bg);
    color: var(--cat-fg-strong);
}

.cat-tree__toggle:focus-visible {
    box-shadow: 0 0 0 .2rem var(--cat-focus);
    outline: 0;
}

.cat-tree__branch.is-open > .cat-tree__row > .cat-tree__toggle i {
    transform: rotate(90deg);
}

/* Keeps a leaf's label aligned with its siblings' without a dead control. */
.cat-tree__toggle--leaf {
    pointer-events: none;
}

/* Collapse and expand by animating the row track from nothing to its content
   height - no measuring, and it works whatever is nested inside.
   While folded, the branch is also taken out of the width calculation: `contain`
   keeps its names out of the ancestor lists' `max-content`, and clipping keeps
   its own box out of the scrollable area. Without the pair, a long name buried
   in a folded branch would widen the tree and leave it scrolling sideways into
   blank space. The reveal itself is unaffected - it is the list inside that
   clips during the animation, and that never changes. */
.cat-tree__nest {
    contain: inline-size;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .25s ease, visibility 0s linear .25s;
    visibility: hidden;
}

.cat-tree__nest > .cat-tree__children {
    min-height: 0;
    overflow: hidden;
}

.cat-tree__branch.is-open > .cat-tree__nest {
    contain: none;
    grid-template-rows: 1fr;
    overflow: visible;
    transition: grid-template-rows .25s ease, visibility 0s;
    visibility: visible;
}

.cat-tree__empty {
    color: var(--cat-muted);
    font-size: .85rem;
    margin: 1rem 0 .25rem;
    text-align: center;
}

.cat-tree__empty i {
    display: block;
    font-size: 1.4rem;
    margin-bottom: .4rem;
    opacity: .6;
}

/* On a phone the tree spans the screen and the indent is what a deep branch
   spends its width on, so tighten the nesting there to keep more of each name
   in view before any scrolling is needed. */
@media (max-width: 575.98px) {
    .cat-tree__children {
        margin-left: .9rem;
        padding-left: .4rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cat-tree__item,
    .cat-tree__toggle,
    .cat-tree__toggle i,
    .cat-tree__nest,
    .cat-tree__branch.is-open > .cat-tree__nest {
        transition: none;
    }

    .cat-tree__item:hover {
        transform: none;
    }
}

.ticket-number {
    font-weight: bolder;
    cursor: pointer;
}

.gj-datepicker-md [role=right-icon] {
    position: absolute;
    right: 5px;
    top: 7px;
    font-size: 24px;
}

.head-notify {
    padding: .9rem 1rem;
    border-radius: .75rem;
    transition: all .25s ease-in-out;
    background: var(--smmcc-surface);
    border: 1px solid var(--smmcc-disabled);
    margin-bottom: .25rem;
}

.head-notify:hover {
    background: var(--smmcc-background);
    border-color: var(--smmcc-border);
    transform: translateX(4px);
}

.head-notify .notify-title {
    font-weight: 600;
    color: var(--smmcc-heading);
    margin-bottom: .15rem;
    font-size: 0.93rem;
}

.head-notify .notify-code {
    color: var(--smmcc-primary-ink);
    font-weight: 700;
}

.head-notify .notify-type-personal {
    color: var(--smmcc-secondary-ink);
    font-weight: 700;
}

.head-notify .notify-type-vip {
    color: var(--smmcc-primary);
    font-weight: 700;
}

.head-notify .notify-type-institution {
    color: var(--smmcc-primary-light);
    font-weight: 700;
}

.head-notify .notify-type-employee {
    color: var(--smmcc-primary-ink);
    font-weight: 700;
}

.head-notify .notify-desc {
    font-size: 0.85rem;
    color: var(--smmcc-text);
}

.head-notify .notify-time {
    font-size: .75rem;
    color: var(--smmcc-muted);
    margin-top: .35rem;
    display: inline-block;
    text-align: right;
}


/* Modern bell + badge styles */

.navbar .nav-link .fa-bell {
    font-size: 1.15rem !important;
    color: var(--smmcc-text);
    padding: .45rem;
    border-radius: 999px;
    background: var(--smmcc-primary-soft);
    /* subtle blue */
    box-shadow: 0 4px 10px var(--smmcc-shadow-color);
    transition: transform .12s ease, background .12s ease, color .12s ease;
}

.navbar .nav-link .fa-bell:hover {
    transform: translateY(-3px);
    color: var(--smmcc-heading);
    background: var(--smmcc-primary-soft);
}

#notify-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    transform-origin: center center;
    box-shadow: 0 4px 10px var(--smmcc-shadow-color);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    user-select: none;
}

.user-name {
    max-width: 200px; /* sesuaikan */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Make badge overlap the bell and look integrated */

.bell-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.bell-wrap .fa-bell {
    margin: 0;
    display: inline-block;
}

#notify-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    transform: translate(0, 0) !important;
    min-width: 20px;
    height: 20px;
    padding: 0 6px !important;
    font-size: 0.66rem !important;
}


/* make the Notifications text slightly offset from the bell */

.nav-link>.ms-2 {
    vertical-align: middle;
    font-weight: 600;
    color: var(--smmcc-text);
}


/* subtle pulse when there are unread notifications */

.notify-pulse {
    animation: notify-pulse 1.6s infinite cubic-bezier(.4, 0, .2, 1);
}

@keyframes notify-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--smmcc-pulse);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 6px transparent;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}

.sidebar-wrapper .menu .submenu .submenu-item a {
    padding: 1rem 1.5rem !important;
}

.sidebar-wrapper .menu {
    padding: 1rem !important;
}

.sidebar-wrapper .menu .submenu {
    padding: 1rem;
}

.sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link::after {
    content: "\f054";
    /* default panah kanan */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: inherit;
}

.sidebar-wrapper .menu .sidebar-item.has-sub.active .sidebar-link::after {
    color: inherit;
}




/* jika submenu di dalamnya memiliki class .active */

.sidebar-wrapper .menu .sidebar-item.has-sub:has(.submenu.active) .sidebar-link::after {
    content: "\f078";
    /* panah bawah */
    color: inherit;
}

.sidebar-wrapper .menu .sidebar-item.has-sub.active:has(.submenu.active) .sidebar-link::after {
    content: "\f078";
    /* panah bawah */
    color: inherit;
}

/* Dropdown notifications */
.dropdown-notify {
    min-width: 16rem;       /* Lebar minimum di mobile */
    max-width: 22rem;       /* Lebar maksimum di desktop */
    width: 100%;            /* Memaksimalkan lebar container */
    box-shadow: 0 0.5rem 1rem var(--smmcc-shadow-color);
    overflow: hidden;
    border-radius: 0.5rem;
}

/* Wrapper notifikasi scrollable */
#notify-list-wrapper {
    max-height: 300px;      /* Maks tinggi dropdown */
    overflow-y: auto;       /* Scroll vertical jika banyak item */
}

/* Scrollbar modern (opsional) */
#notify-list-wrapper::-webkit-scrollbar {
    width: 6px;
}
#notify-list-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--smmcc-overlay);
    border-radius: 3px;
}

/* Dropdown item style */
.dropdown-notify .dropdown-item {
    white-space: normal;    /* Wrap teks panjang */
    padding: 0.5rem 1rem;
}

/* Dropdown header */
.dropdown-notify .dropdown-header {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
}

/* Divider spacing */
.dropdown-notify .dropdown-divider {
    margin: 0.25rem 0;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .dropdown-notify {
        min-width: 14rem;    /* Lebar lebih kecil di mobile */
        max-width: 100%;     /* Lebar penuh layar */
    }

    /* Teks lebih kecil di mobile */
    .dropdown-notify .dropdown-item,
    .dropdown-notify .dropdown-header {
        font-size: 0.85rem;
    }

    .dropdown-notify.dropdown-menu-end.show {
        left: -13em !important;
    }
}


input.error~.form-control-icon {
    top: 35% !important;
}

.r-0 {
    right: 0 !important;
    top: 60% !important;
    font-size: 1.6rem !important;
}

.btn-rounded {
    border-radius: 20px !important;
}

input.error~.r-0 {
    top: 40% !important;
}

.checklist-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--smmcc-control-border);
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--smmcc-surface);
}

.check-item i {
    font-size: 20px;
    color: var(--smmcc-muted);
    transition: color 0.2s ease;
}

.check-item.active {
    border-color: var(--smmcc-primary-ink);
    background: var(--smmcc-primary-soft);
}

.check-item.active i {
    color: var(--smmcc-primary-ink);
}

.check-item input {
    display: none;
}

.hidden-form {
    display: none;
    margin-top: 15px;
    border: 1px solid var(--smmcc-border);
    padding: 15px;
    border-radius: 8px;
    background: var(--smmcc-background);
}

.hidden-form h4 {
    margin-top: 0;
}

.form-control {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 2px solid var(--smmcc-primary-ink);
    border-radius: 12px;
    background-color: var(--smmcc-background);
    font-size: 15px;
    color: var(--smmcc-text);
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: url('https://cdn-icons-png.flaticon.com/512/747/747310.png') center/18px no-repeat;
    opacity: 0.8;
    cursor: pointer;
}

.batch-card {
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.batch-card.active {
    border-color: var(--smmcc-primary-ink);
    /* biru bootstrap */
    background-color: var(--smmcc-primary-soft);
    position: relative;
}

.batch-card.active::after {
    content: "\f00c";
    /* Font Awesome check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--smmcc-primary-ink);
    position: absolute;
    top: 10px;
    right: 10px;
}

.bg-theme {
    background: linear-gradient(90deg, var(--smmcc-primary) 0%, var(--smmcc-primary-light) 100%);
    padding: 25px;
    color: white;
    border-radius: 10px;
    border-color: var(--smmcc-primary-ink) !important;
    color: var(--smmcc-surface) !important;
}

.bg-gray{
    background-color: var(--smmcc-disabled) !important;
}
.icon-small {
    font-size: 70% !important;
}

.max-table-h100 {
    display: block !important;
    max-height: 100px !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    padding: 8px !important;
    margin: 5px;
    border-radius: 10px !important;
    border: 1px solid var(--smmcc-border) !important;
}

.max-table-h100::-webkit-scrollbar {
    width: 6px;
}

.max-table-h100::-webkit-scrollbar-track {
    background: var(--smmcc-disabled);
}

.max-table-h100::-webkit-scrollbar-thumb {
    background: var(--smmcc-muted);
    border-radius: 3px;
}

.max-table-h100::-webkit-scrollbar-thumb:hover {
    background: var(--smmcc-text);
}


/* 🌈 Modern Attendance Selection */

.attendance-wrapper {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.attendance-card {
    position: relative;
    width: 160px;
    height: 130px;
    border-radius: 1rem;
    background: linear-gradient(145deg, var(--smmcc-background), var(--smmcc-border));
    box-shadow: 0 5px 12px var(--smmcc-shadow-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--smmcc-text);
    cursor: pointer;
    transition: all .3s ease;
    overflow: hidden;
}

.attendance-card input {
    display: none;
}


/* ✨ Icon styling — hidden by default */

.attendance-card span.icon {
    font-size: 2.2rem;
    margin-bottom: .4rem;
    opacity: 1;
    transform: scale(0.8);
    transition: all .3s ease;
    z-index: 3;
    /* 🔥 ensure icon always on top */
    position: relative;
}


/* Hover effect */

.attendance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px var(--smmcc-shadow-color);
}


/* 💚 Hadir */

.attendance-card.hadir input:checked+span.icon {
    opacity: 1;
    transform: scale(1.2) rotate(8deg);
}

.attendance-card.hadir input:checked~.card-bg {
    background: linear-gradient(135deg, var(--smmcc-success), var(--smmcc-success-hover));
}

.attendance-card.hadir input:checked~.card-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 0 25px 5px var(--smmcc-success-glow);
    border-radius: 1rem;
}


/* ❤️ Tidak Hadir */

.attendance-card.tidak input:checked+span.icon {
    opacity: 1;
    transform: scale(1.2) rotate(-8deg);
}

.attendance-card.tidak input:checked~.card-bg {
    background: linear-gradient(135deg, var(--smmcc-danger), var(--smmcc-danger));
}

.attendance-card.tidak input:checked~.card-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 0 25px 5px var(--smmcc-danger-glow);
    border-radius: 1rem;
}


/* Text inside card */

.attendance-card span.label {
    position: relative;
    z-index: 3;
    /* 🔥 keep text above background */
    font-size: 1rem;
}


/* Inner background layer */

.card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* ✅ background always under icon & label */
    opacity: .1;
    border-radius: 1rem;
    transition: all .4s ease;
}


/* Checked text color */

.attendance-card input:checked~.card-bg {
    opacity: 1;
}

.attendance-card input:checked~span.label {
    color: var(--smmcc-surface);
}

.h-600 {
    height: 600px !important;
    overflow: auto !important;
}

.dt-buttons {
    margin-bottom: 30px !important;
    display: flex;
    gap: 10px;
}

.dt-button {
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background 0.2s;
}

footer {
    position: fixed;
    bottom: 0;
    width: auto;
    text-align: center;
    color: var(--smmcc-heading);
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
}

footer p {
    margin: 0;
}

.footer-home {
    position: fixed;
    bottom: 0;
    width: 100% !important;
    text-align: center;
    color: var(--smmcc-heading);
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
}



/* SMMCC identity: preserve the supplied artwork on both light and dark surfaces. */
.smmcc-logo { object-fit: contain; width: 200px; max-width: 100%; height: auto; background: var(--smmcc-surface); padding: 8px 12px; border-radius: 8px; }
.sidebar-header .smmcc-brand { display: block; max-width: calc(100% - 28px); }
.sidebar-wrapper .sidebar-header .smmcc-logo { width: 200px; height: auto; max-height: none; }
#auth-left .auth-logo .smmcc-logo { width: 280px; max-width: 100%; height: auto; }
.smmcc-dashboard-logo { width: 180px; }
.smmcc-stat-icon { width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }

@media (max-width: 575.98px) { #auth-left { padding: 2rem 1.25rem; } .smmcc-dashboard-logo { width: 145px; } }