/* =========================================================
   기본/리셋
   ====================================================== */
* {
    box-sizing: border-box
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    font-family: var(--fo-font-body);
}

body * {
    font-family: var(--fo-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

p,
ul,
ol {
    margin: 0;
}

::-webkit-scrollbar {
    width: var(--scrollbar-width, 10px);
    height: var(--scrollbar-width, 10px);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track, transparent);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.35));
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track, transparent);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.55));
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track, transparent);
}

/* =========================================================
   접근성
   ====================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   인증 화면 전용 (충돌을 피하기 위해 fo-auth- 접두사를 사용)
   ====================================================== */
.fo-auth-body {
    --auth-bg: var(--color-bg, #eef4f2);
    --auth-surface: var(--color-surface, #ffffff);
    --auth-surface-strong: var(--color-surfaceEmphasis, #f2f9f4);
    --auth-border: var(--color-border, rgba(7, 60, 46, 0.12));
    --auth-text: var(--color-text, #1f2a2e);
    --auth-text-muted: var(--color-textMuted, #556068);
    --auth-primary: var(--color-primary, #064133);
    --auth-accent: var(--color-accent, #1fa58b);
    --auth-on-primary: var(--color-onPrimary, #e8fff8);
    --auth-radius-sm: var(--fo-radius-sm, 8px);
    --auth-radius-md: var(--fo-radius-md, 14px);
    --auth-radius-lg: var(--fo-radius-lg, 24px);
    --auth-shadow-sm: var(--fo-shadow-sm, 0 6px 16px rgba(6, 65, 51, 0.07));
    --auth-shadow-md: var(--fo-shadow-md, 0 10px 32px rgba(6, 65, 51, 0.12));

    margin: 0;
    font-family: var(--fo-font-body);
    color: var(--auth-text);
    background: var(--auth-bg);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.fo-auth-body a {
    color: inherit;
}

.fo-auth-text-muted {
    color: var(--auth-text-muted);
}

.fo-auth-layout {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 24px;
    background:
        radial-gradient(1200px circle at 0% 0%, rgba(6, 65, 51, 0.12), transparent 60%),
        var(--auth-bg);
}

.fo-auth-region {
    width: min(960px, 100%);
}

.fo-auth-region__inner {
    display: grid;
    gap: 24px;
}

.fo-auth-region__content {
    display: grid;
    gap: 24px;
}

.fo-auth-page {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 18px;
}

.fo-auth-card {
    width: min(920px, 100%);
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(360px, 1fr);
    border-radius: 28px;
    background: var(--auth-surface);
    box-shadow: var(--auth-shadow-md);
    border: 1px solid var(--auth-border);
    overflow: hidden;
}

.fo-auth-card__visual {
    position: relative;
    color: var(--auth-on-primary);
    padding: 48px 44px;
    display: grid;
    gap: 20px;
    align-content: center;
    background: linear-gradient(145deg, rgba(6, 65, 51, 0.95) 0%, rgba(13, 140, 110, 0.92) 60%, rgba(31, 165, 139, 0.85) 100%);
    background: linear-gradient(145deg,
            color-mix(in srgb, var(--auth-primary, #064133) 95%, transparent) 0%,
            color-mix(in srgb, var(--auth-accent, #1fa58b) 92%, transparent) 60%,
            color-mix(in srgb, var(--auth-accent, #1fa58b) 85%, transparent) 100%);
}

.fo-auth-card__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(480px circle at 20% 20%, rgba(255, 255, 255, 0.25), transparent 65%);
    opacity: 0.6;
    pointer-events: none;
}

.fo-auth-card__visual>* {
    position: relative;
    z-index: 1;
}

.fo-auth-card__tag {
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.75;
}

.fo-auth-card__headline {
    margin: 0;
    font-size: 2.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.fo-auth-card__desc {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    opacity: 0.9;
}

.fo-auth-card__meta {
    font-size: 0.82rem;
    opacity: 0.75;
}

.fo-auth-card__form {
    display: grid;
    gap: 26px;
    padding: 44px 48px;
    background: var(--auth-surface);
}

.fo-auth-card__brand {
    justify-self: flex-start;
}

.fo-auth-card__title {
    margin: 0;
    font-size: 1.2rem;
}

.fo-auth-card__subtitle {
    margin: 0;
    color: var(--auth-text-muted);
}

.fo-auth-form {
    display: grid;
    gap: 18px;
}

.fo-auth-form__group {
    display: grid;
    gap: 8px;
}

.fo-auth-form__label {
    font-weight: 600;
    font-size: 0.9rem;
}

.fo-auth-form__input {
    padding: 12px 14px;
    border-radius: var(--auth-radius-sm);
    border: 1px solid var(--auth-border);
    background: var(--auth-surface);
    color: var(--auth-text);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fo-auth-form__input:focus {
    outline: none;
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px rgba(31, 165, 139, 0.16);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent, #1fa58b) 30%, transparent);
}

.fo-auth-form__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--auth-text-muted);
    flex-wrap: wrap;
}

.fo-auth-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fo-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--auth-radius-md);
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fo-auth-btn--primary {
    background: linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-accent) 100%);
    color: var(--auth-on-primary);
    box-shadow: var(--auth-shadow-sm);
}

.fo-auth-btn--primary:hover,
.fo-auth-btn--primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--auth-shadow-md);
}

.fo-auth-btn--ghost {
    background: transparent;
    color: var(--auth-text-muted);
}

.fo-auth-btn--full {
    width: 100%;
    justify-content: center;
}

.fo-auth-card__legal {
    margin: 0;
    font-size: 0.78rem;
    color: var(--auth-text-muted);
}

.fo-auth-card__divider {
    height: 1px;
    background: var(--auth-border);
    margin: 6px 0 12px;
}

.fo-auth-card__footer {
    font-size: 0.8rem;
    color: var(--auth-text-muted);
}

.fo-auth-alert {
    padding: 14px 16px;
    border-radius: var(--auth-radius-md);
    border: 1px solid rgba(31, 165, 139, 0.28);
    background: rgba(31, 165, 139, 0.08);
    border: 1px solid color-mix(in srgb, var(--auth-accent, #1fa58b) 55%, transparent);
    background: color-mix(in srgb, var(--auth-accent, #1fa58b) 12%, transparent);
    color: var(--auth-text);
    font-size: 0.88rem;
}

.fo-auth-alert--error {
    border-color: rgba(209, 67, 67, 0.32);
    background: rgba(209, 67, 67, 0.12);
    color: #8c1f1f;
    border-color: color-mix(in srgb, var(--color-danger, #d14343) 55%, transparent);
    background: color-mix(in srgb, var(--color-danger, #d14343) 14%, transparent);
    color: color-mix(in srgb, var(--color-danger, #d14343) 75%, #5a1c1c 25%);
}

.fo-auth-body.theme-dark .fo-auth-card__headline {
    color: var(--auth-on-primary);
}

.fo-auth-body.theme-dark .fo-auth-card {
    background: var(--auth-surface-strong);
    border-color: var(--auth-border);
    border-color: color-mix(in srgb, var(--auth-border) 65%, transparent);
}

.fo-auth-body.theme-dark .fo-auth-card__form {
    background: var(--auth-surface);
}

.fo-auth-body.theme-dark .fo-auth-form__input {
    background: var(--auth-surface);
    border-color: var(--auth-border);
    border-color: color-mix(in srgb, var(--auth-border) 65%, transparent);
}

.fo-auth-body.theme-dark .fo-auth-btn--ghost {
    color: var(--auth-text-muted);
}

.fo-auth-body.theme-dark .fo-auth-alert--error {
    color: color-mix(in srgb, var(--color-danger, #ff7b6b) 75%, #ffdede 25%);
}

@media (max-width: 1024px) {
    .fo-auth-region {
        width: min(720px, 100%);
    }

    .fo-auth-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .fo-auth-layout {
        padding: 24px 16px;
    }

    .fo-auth-card__form {
        padding: 32px 26px;
    }

    .fo-auth-card__visual {
        padding: 36px 30px;
    }

    .fo-auth-card__headline {
        font-size: 1.6rem;
    }
}

@media (max-height: 760px) {
    .fo-auth-layout {
        align-items: flex-start;
        padding: 20px 16px;
    }

    .fo-auth-card__visual {
        padding: 32px 30px;
        gap: 16px;
    }

    .fo-auth-card__form {
        padding: 32px 30px;
        gap: 20px;
    }

    .fo-auth-form {
        gap: 16px;
    }
}


/* =========================================================

   Shell Layout

   ====================================================== */

.fo-shell {
    --fo-sidebar-width: 220px;
    --fo-sidebar-collapsed-width: 60px;
    --fo-sidebar-transition: cubic-bezier(0.22, 1, 0.36, 1);
    height: 100%;
    height: 100dvh;
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
}

.fo-shell__layout {
    display: grid;
    grid-template-columns: var(--fo-sidebar-width) 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-columns .32s var(--fo-sidebar-transition);
}

body.fo-sidebar-collapsed .fo-shell__layout,
.fo-shell.fo-shell--sidebar-collapsed .fo-shell__layout {
    grid-template-columns: var(--fo-sidebar-collapsed-width) 1fr;
}



.fo-shell__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}



/* =========================================================
   Header
   Sticky top bar with navigation and quick actions.
   ====================================================== */
.fo-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .75rem;
    background: linear-gradient(135deg, var(--header-bg-top, var(--color-surface)) 0%, var(--header-bg-bottom, var(--color-surfaceEmphasis)) 100%);
    color: var(--header-text, var(--color-text));
    border-bottom: 1px solid var(--header-border, var(--color-border));
    box-shadow: var(--header-shadow, 0 12px 30px rgba(6, 65, 51, 0.08));
    backdrop-filter: blur(12px);
}

.fo-header__section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fo-header__toggle,
.fo-header__brand {
    display: flex;
    align-items: center;
}

.fo-header__toggle {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

.fo-header__brand {
    min-width: 0;
    flex: 0 1 auto;
    position: relative;
    z-index: 1;
    margin-left: .5rem;
}

.fo-hamburger {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    border-radius: 14px;
    border: 1px solid rgba(6, 65, 51, 0.12);
    background: var(--color-surfaceEmphasis);
    color: var(--color-primary);
    cursor: pointer;
    transition: background .24s ease, box-shadow .24s ease, transform .24s ease, border-color .24s ease;
    padding: 0;
}

.fo-hamburger:hover {
    background: rgba(31, 165, 139, 0.12);
    box-shadow: 0 10px 20px rgba(6, 65, 51, 0.12);
    transform: translateY(-1px);
}

.fo-hamburger:hover .fo-hamburger__icon {
    color: #fff;
}

.fo-hamburger:focus-visible {
    outline: 2px solid var(--color-primaryBright);
    outline-offset: 2px;
}

.fo-hamburger .material-icons,
.fo-hamburger .material-icons-outlined {
    font-size: 24px;
}

.fo-hamburger__icon {
    line-height: 1;
}

.fo-hamburger.is-collapsed {
    border-color: rgba(6, 65, 51, 0.18);
    box-shadow: 0 10px 24px rgba(6, 65, 51, 0.18);
}

.fo-hamburger.is-collapsed .fo-hamburger__arrow {
    width: 18px;
    opacity: 1;
    transform: translateX(0);
}

.fo-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
    color: var(--header-text, var(--color-text));
    transition: color .2s ease;
}

.fo-brand:hover,
.fo-brand:focus-visible,
.fo-brand:active {
    color: var(--color-primaryBright);
}

.fo-brand:focus-visible {
    outline: 2px solid var(--color-primaryBright);
    outline-offset: 2px;
}

.fo-brand__mark,
.fo-brand__divider {
    display: none;
}

.fo-brand__text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    white-space: nowrap;
    color: inherit;
}

.fo-brand__name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    color: inherit;
}

.fo-brand__meta {
    font-size: .75rem;
    font-weight: 500;
    color: inherit;
    opacity: .75;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fo-iconbtn,
.fo-icon-button {
    min-width: 0;
    height: 44px;
    padding: 0 .5rem;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--header-text, var(--color-text));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.fo-iconbtn .material-icons,
.fo-iconbtn .material-icons-outlined,
.fo-icon-button .material-icons,
.fo-icon-button .material-icons-outlined {
    font-size: 22px;
}

.fo-iconbtn:hover,
.fo-iconbtn:active,
.fo-icon-button:hover,
.fo-icon-button:active {
    color: var(--header-text, var(--color-onPrimary));
    background: rgba(255, 255, 255, 0.16);
}

.fo-iconbtn:focus-visible,
.fo-icon-button:focus-visible {
    outline: 2px solid var(--color-primaryBright);
    outline-offset: 2px;
}

.fo-layer-menu {
    position: relative;
    display: flex;
}

.fo-layer-menu__label {
    font-size: .8rem;
}

.fo-layer-menu__panel {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    width: min(320px, 80vw);
    padding: .9rem 1rem;
    border-radius: 18px;
    background: var(--color-surface);
    border: 1px solid rgba(6, 65, 51, 0.12);
    box-shadow: 0 32px 48px rgba(6, 65, 51, 0.18);
    opacity: 0;
    transform: translateY(-12px) scale(.96);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, transform .28s cubic-bezier(0.22, 1, 0.36, 1), visibility .24s ease;
}

.fo-layer-menu.is-open .fo-layer-menu__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.fo-layer-menu__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid rgba(6, 65, 51, 0.1);
    color: var(--color-text);
}

.fo-layer-menu__header strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text);
}

.fo-layer-menu__header p {
    margin: 0;
    font-size: .8rem;
    color: var(--color-textMuted);
}

.fo-layer-menu__content {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.fo-layer-menu__action {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .65rem .75rem;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.fo-layer-menu__action .material-icons,
.fo-layer-menu__action .material-icons-outlined {
    font-size: 22px;
    color: currentColor;
    transition: color .2s ease;
}

.fo-layer-menu__action:hover,
.fo-layer-menu__action:focus-visible {
    background: var(--color-primary);
    color: var(--color-onPrimary);
    transform: translateX(2px);
}

.fo-layer-menu__action:active {
    background: var(--color-primaryBright);
    color: var(--color-onPrimary);
    transform: translateX(2px);
}

.fo-empty-notice {
    margin: 0;
    padding: .75rem;
    border-radius: 12px;
    background: rgba(6, 65, 51, 0.08);
    color: var(--color-textMuted);
    text-align: center;
    font-size: .85rem;
}

.fo-badge {
    position: relative;
    display: inline-flex;
}

.fo-badge--dot::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-surface);
}

@media (max-width: 1080px) {
    .fo-layer-menu__label {
        display: none;
    }

    .fo-brand__meta {
        display: none;
    }
}

@media (max-width: 720px) {
    .fo-header {
        padding: .5rem .5rem;
    }

    .fo-hamburger {
        width: 35px;
        height: 35px;
    }

    .fo-brand__name {
        font-size: .95rem;
    }
}

/* =========================================================
   Sidebar Navigation
   Collapsible menu tree used across standard admin pages.
   ====================================================== */
/* Legacy grid class retained for backward compatibility. */
.fo-app {
    display: grid;
    grid-template-columns: var(--fo-sidebar-width) 1fr;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-columns .32s var(--fo-sidebar-transition);
}

body.fo-sidebar-collapsed .fo-app,
.fo-shell.fo-shell--sidebar-collapsed .fo-app {
    grid-template-columns: var(--fo-sidebar-collapsed-width) 1fr;
}

/* =========================================================
   Sidebar Navigation
   Collapsible menu tree used across standard admin pages.
   ====================================================== */
.fo-sidebar {
    position: relative;
    width: var(--fo-sidebar-width);
    overflow: hidden;
    background: linear-gradient(180deg, var(--sidebar-bg-top, #022e25) 0%, var(--sidebar-bg-middle, #03382c) 55%, var(--sidebar-bg-bottom, #064133) 100%);
    border-right: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08));
    transition:
        width .32s var(--fo-sidebar-transition),
        box-shadow .28s ease .2s;
    display: flex;
    flex-direction: column;
    color: var(--sidebar-text, rgba(236, 249, 246, 0.92));
    --fo-sidebar-text: var(--sidebar-text, rgba(236, 249, 246, 0.92));
    --fo-sidebar-text-muted: var(--sidebar-text-muted, rgba(236, 249, 246, 0.68));
    --fo-sidebar-heading: var(--sidebar-heading, rgba(236, 249, 246, 0.56));
    --fo-sidebar-icon-bg: var(--sidebar-icon-bg, rgba(31, 165, 139, 0.16));
    --fo-sidebar-icon-color: var(--sidebar-icon-color, #1fa58b);
    --fo-sidebar-hover-bg: var(--sidebar-hover-bg, rgba(255, 255, 255, 0.08));
    --fo-sidebar-active-bg: var(--sidebar-active-bg, rgba(255, 255, 255, 0.16));
    --fo-sidebar-active-border: var(--sidebar-active-border, #ff6b35);
    --fo-sidebar-separator: var(--sidebar-separator, rgba(255, 255, 255, 0.08));
    --fo-sidebar-subtle: var(--sidebar-subtle, rgba(255, 255, 255, 0.04));
    box-shadow:
        inset -1px 0 0 var(--fo-sidebar-separator),
        var(--sidebar-shadow, 8px 0 30px rgba(2, 46, 37, 0.25));
}

.fo-sidebar__scroll {
    height: 100%;
    overflow-y: auto;
    padding: 0.25rem;
    transition: padding .32s var(--fo-sidebar-transition);
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-scrollbar-thumb, var(--scrollbar-thumb)) var(--sidebar-scrollbar-track, var(--scrollbar-track, transparent));
}

.fo-sidebar__scroll::-webkit-scrollbar {
    width: var(--sidebar-scrollbar-width, 6px);
}

.fo-sidebar__scroll::-webkit-scrollbar-track {
    background: var(--sidebar-scrollbar-track, var(--scrollbar-track, transparent));
}

.fo-sidebar__scroll::-webkit-scrollbar-thumb {
    background-color: var(--sidebar-scrollbar-thumb, var(--scrollbar-thumb));
    border-radius: 999px;
    border: 2px solid var(--sidebar-scrollbar-track, transparent);
}

.fo-sidebar__scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--sidebar-scrollbar-thumb-hover, var(--scrollbar-thumb-hover, var(--sidebar-scrollbar-thumb, var(--scrollbar-thumb))));
}

.fo-sidebar {
    background: transparent;
    border-right: 0;
    box-shadow: none;
    padding: 0;
}

.fo-sidebar__scroll {
    padding: 0;
}

.sidebar {
    --sidebar-bg-top-local: var(--sidebar-bg-top, #022e25);
    --sidebar-bg-middle-local: var(--sidebar-bg-middle, #03382c);
    --sidebar-bg-bottom-local: var(--sidebar-bg-bottom, #064133);
    --sidebar-border-local: var(--sidebar-border, rgba(255, 255, 255, 0.08));
    --sidebar-text-local: var(--sidebar-text, rgba(236, 249, 246, 0.92));
    --sidebar-text-muted-local: var(--sidebar-text-muted, rgba(236, 249, 246, 0.68));
    --sidebar-heading-local: var(--sidebar-heading, rgba(236, 249, 246, 0.56));
    --sidebar-hover-bg-local: var(--sidebar-hover-bg, rgba(255, 255, 255, 0.08));
    --sidebar-active-bg-local: var(--sidebar-active-bg, rgba(255, 255, 255, 0.16));
    --sidebar-active-border-local: var(--sidebar-active-border, #ff6b35);
    --sidebar-icon-bg-local: var(--sidebar-icon-bg, rgba(31, 165, 139, 0.16));
    --sidebar-icon-color-local: var(--sidebar-icon-color, #1fa58b);
    --sidebar-subtle-local: var(--sidebar-subtle, rgba(255, 255, 255, 0.04));
    --transition-default: 0.3s ease-in-out;
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.06);
    --fw-medium: 500;
    --fz-body-small: 0.875rem;
    width: 220px;
    background: linear-gradient(180deg, var(--sidebar-bg-top-local) 0%, var(--sidebar-bg-middle-local) 55%, var(--sidebar-bg-bottom-local) 100%);
    color: var(--sidebar-text-local);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition:
        width var(--transition-default),
        padding var(--transition-default),
        background var(--transition-default),
        color var(--transition-default),
        box-shadow var(--transition-default) .2s;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 20;
    border-right: 1px solid var(--sidebar-border-local);
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar-header {
    padding: .6rem 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid var(--sidebar-border-local, rgba(255, 255, 255, 0.1));
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--sidebar-subtle-local, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-default), transform var(--transition-default);
}

.sidebar-toggle:hover {
    background-color: var(--sidebar-hover-bg-local, rgba(255, 255, 255, 0.2));
}

.sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-toggle {
    position: relative;
    left: 0;
}

.sidebar-menu {
    padding: 0;
    --sidebar-depth-base-padding: 1rem;
    --sidebar-depth-indent-step: 1rem;
}

.sidebar-module {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem 0.85rem 0.8rem;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    font: inherit;
    position: relative;
    transition: background-color var(--transition-default), color var(--transition-default), border-left-color var(--transition-default);
    margin-bottom: 0.25rem;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.sidebar-module:hover {
    background-color: var(--sidebar-hover-bg-local, rgba(255, 255, 255, 0.1));
    box-shadow: none;
    transform: none;
}

.sidebar-module.active {
    background-color: var(--sidebar-active-bg-local, rgba(255, 255, 255, 0.16));
    border-left: 3px solid var(--sidebar-active-border-local, #ff6b35);
    box-shadow: none;
}

.sidebar-icon {
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text-muted-local, #dfe6e9);
}

.sidebar.collapsed .sidebar-icon {
    margin-right: 0;
    margin-left: -4px;
}

.sidebar-module.active .sidebar-icon,
.sidebar-module:hover .sidebar-icon {
    color: var(--sidebar-text-local, #ffffff);
}

.sidebar-label {
    font-weight: var(--fw-medium);
    /*font-size: var(--fz-body-small);*/
    color: var(--sidebar-text-muted-local, #dfe6e9);
    transition: opacity var(--transition-default);
}

.sidebar:not(.collapsed) .sidebar-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: left;
    line-height: 1.35;
}

.sidebar-module.active .sidebar-label,
.sidebar-module:hover .sidebar-label {
    color: var(--sidebar-text-local, #ffffff);
}

.sidebar.collapsed .sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-module {
    padding: 0.85rem 1rem;
    justify-content: center;
}

.sidebar.collapsed .sidebar-module[data-depth]:not([data-depth="1"]) {
    display: none;
}

.sidebar .sidebar-module.sidebar-module--animating {
    will-change: max-height, opacity, margin-top, margin-bottom, padding-top, padding-bottom;
}

.sidebar .sidebar-module[hidden],
.sidebar .sidebar-module[aria-hidden="true"] {
    display: none !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.sidebar .fo-menu-link,
.sidebar .fo-submenu-link,
.sidebar .fo-menu__summary {
    color: inherit;
    background: transparent;
    border-radius: 0;
    border-left: 3px solid transparent;
    box-shadow: none;
    transform: none;
    text-decoration: none;
}

.sidebar .fo-menu-link:hover,
.sidebar .fo-submenu-link:hover,
.sidebar .fo-menu__summary:hover,
.sidebar .fo-menu-link:focus-visible,
.sidebar .fo-submenu-link:focus-visible,
.sidebar .fo-menu__summary:focus-visible {
    background-color: var(--sidebar-hover-bg-local, rgba(255, 255, 255, 0.1));
    border-left-color: var(--sidebar-active-border-local, #ff6b35);
    color: var(--sidebar-text-local, #ffffff);
    box-shadow: none;
    transform: none;
}

.sidebar .fo-menu-link.is-active,
.sidebar .fo-menu-link.fo-menu-link--active,
.sidebar .fo-menu-link[aria-current="page"],
.sidebar .fo-menu-link[aria-current="true"],
.sidebar .fo-menu__summary.is-active,
.sidebar .fo-menu__summary[aria-expanded="true"] {
    background-color: var(--sidebar-active-bg-local, rgba(255, 255, 255, 0.16));
    border-left-color: var(--sidebar-active-border-local, #ff6b35);
    color: var(--sidebar-text-local, #ffffff);
    box-shadow: none;
}

.sidebar .sidebar-module[data-has-children="true"] {
    padding-right: 2rem;
}

.sidebar .sidebar-module[data-has-children="true"]::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    font-size: 0.75rem;
    opacity: 0.6;
    transition: transform var(--transition-default, 0.3s ease-in-out), opacity var(--transition-default, 0.3s ease-in-out);
    pointer-events: none;
}

.sidebar .sidebar-module[data-has-children="true"][aria-expanded="false"]::after {
    transform: translateY(-50%) rotate(-90deg);
}

.sidebar .sidebar-module[data-has-children="true"][aria-expanded="true"]::after {
    opacity: 0.8;
}

.sidebar .sidebar-module[data-depth="1"]:not(.active) .sidebar-label {
    color: var(--sidebar-heading-local, rgba(255, 255, 255, 0.9));
    font-weight: 600;
}

.sidebar:not(.collapsed) .sidebar-module[data-depth="2"] {
    font-size: var(--fz-body-small);
    padding-left: calc(var(--sidebar-depth-base-padding) + var(--sidebar-depth-indent-step));
}

.sidebar .sidebar-module[data-depth="2"]:not(.active) .sidebar-label {
    color: var(--sidebar-text-muted-local, rgba(255, 255, 255, 0.8));
    font-weight: 500;
}

.sidebar .sidebar-module[data-depth="2"]:not(.active) .sidebar-icon {
    color: var(--sidebar-text-muted-local, rgba(255, 255, 255, 0.7));
}

.sidebar .sidebar-module[data-depth="2"],
.sidebar .sidebar-module[data-depth="3"],
.sidebar .sidebar-module[data-depth="4"],
.sidebar .sidebar-module[data-depth="5"] {
    margin-bottom: 0.2rem;
}

.sidebar:not(.collapsed) .sidebar-module[data-depth="3"],
.sidebar:not(.collapsed) .sidebar-module[data-depth="4"],
.sidebar:not(.collapsed) .sidebar-module[data-depth="5"] {
    font-size: 0.8rem;
}

.sidebar:not(.collapsed) .sidebar-module[data-depth="3"] {
    padding-left: calc(var(--sidebar-depth-base-padding) + (var(--sidebar-depth-indent-step) * 2));
}

.sidebar:not(.collapsed) .sidebar-module[data-depth="4"] {
    padding-left: calc(var(--sidebar-depth-base-padding) + (var(--sidebar-depth-indent-step) * 3));
}

.sidebar:not(.collapsed) .sidebar-module[data-depth="5"] {
    padding-left: calc(var(--sidebar-depth-base-padding) + (var(--sidebar-depth-indent-step) * 4));
}

.sidebar .sidebar-module[data-depth="3"]:not(.active) .sidebar-label,
.sidebar .sidebar-module[data-depth="4"]:not(.active) .sidebar-label,
.sidebar .sidebar-module[data-depth="5"]:not(.active) .sidebar-label {
    color: var(--sidebar-text-muted-local, rgba(255, 255, 255, 0.7));
    font-weight: 400;
}

.sidebar .sidebar-module[data-depth="3"]:not(.active) .sidebar-icon,
.sidebar .sidebar-module[data-depth="4"]:not(.active) .sidebar-icon,
.sidebar .sidebar-module[data-depth="5"]:not(.active) .sidebar-icon {
    color: var(--sidebar-text-muted-local, rgba(255, 255, 255, 0.65));
}

.sidebar .sidebar-module[data-depth="2"] .material-icons-outlined {
    font-size: 1.1rem;
}

.sidebar .sidebar-module[data-depth="3"] .material-icons-outlined,
.sidebar .sidebar-module[data-depth="4"] .material-icons-outlined,
.sidebar .sidebar-module[data-depth="5"] .material-icons-outlined {
    font-size: 1rem;
}

.sidebar.collapsed .sidebar-module[data-has-children="true"] {
    padding-right: 1rem;
}

.sidebar.collapsed .sidebar-module[data-has-children="true"]::after {
    display: none;
}

body.fo-sidebar-collapsed .fo-sidebar,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar {
    width: var(--fo-sidebar-collapsed-width);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
    overflow: visible;
}

body.fo-sidebar-collapsed .fo-sidebar:hover,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover {
    width: var(--fo-sidebar-width);
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        var(--sidebar-shadow, 8px 0 30px rgba(2, 46, 37, 0.25));
    z-index: 30;
    overflow: hidden;
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar {
    width: var(--fo-sidebar-width);
    box-shadow: var(--shadow-md, 0 5px 15px rgba(0, 0, 0, 0.06));
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed {
    transform: none;
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module {
    justify-content: flex-start;
    padding: 0.85rem 1.25rem;
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-icon {
    margin-right: 0.75rem;
    margin-left: 0;
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-label,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-label {
    opacity: 1;
    width: auto;
    overflow: visible;
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth]:not([data-depth="1"]),
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth]:not([data-depth="1"]) {
    display: flex;
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="2"],
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="2"] {
    padding-left: calc(var(--sidebar-depth-base-padding) + var(--sidebar-depth-indent-step));
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="3"],
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="3"] {
    padding-left: calc(var(--sidebar-depth-base-padding) + (var(--sidebar-depth-indent-step) * 2));
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="4"],
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="4"] {
    padding-left: calc(var(--sidebar-depth-base-padding) + (var(--sidebar-depth-indent-step) * 3));
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="5"],
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-depth="5"] {
    padding-left: calc(var(--sidebar-depth-base-padding) + (var(--sidebar-depth-indent-step) * 4));
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-has-children="true"],
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-has-children="true"] {
    padding-right: 2rem;
}

body.fo-sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-has-children="true"]::after,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar:hover .sidebar.collapsed .sidebar-module[data-has-children="true"]::after {
    display: block;
}

body.fo-sidebar-collapsed .fo-sidebar__scroll,
.fo-shell.fo-shell--sidebar-collapsed .fo-sidebar__scroll {
    padding-inline: 1rem;
}

.fo-sidebar__section+.fo-sidebar__section {
    margin-top: 2rem;
}

.fo-sidebar__menus {
    display: block;
    padding-top: .35rem;
}

.fo-sidebar__menus[hidden] {
    display: none !important;
}

.fo-sidebar__state {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: .75rem;
    background: var(--fo-sidebar-subtle);
    color: var(--fo-sidebar-heading);
    font-size: .875rem;
    line-height: 1.4;
}

.fo-sidebar__state .material-icons-outlined {
    font-size: 1.25rem;
    color: var(--fo-sidebar-icon-color);
}

.fo-sidebar__state--error {
    background: rgba(255, 107, 53, 0.16);
    color: rgba(255, 196, 179, 0.96);
}

.fo-sidebar__state[hidden] {
    display: none !important;
}

.fo-sidebar__noscript {
    margin: 0;
    padding: 1rem;
    border-radius: .75rem;
    background: var(--fo-sidebar-subtle);
    color: var(--fo-sidebar-text);
    font-size: .85rem;
    line-height: 1.5;
}

.fo-menu-group {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--fo-sidebar-separator);
    transition: border-color .24s ease, opacity .24s ease;
}

.fo-menu-group:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.fo-menu-group__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-inline: .25rem;
    color: var(--fo-sidebar-heading);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: 0.16em;
    font-weight: 600;
    transition: justify-content .32s var(--fo-sidebar-transition);
}

.fo-menu-group__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--fo-sidebar-icon-bg);
    color: var(--fo-sidebar-icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease, transform .24s ease, box-shadow .24s ease;
    box-shadow: 0 8px 18px rgba(31, 165, 139, 0.2);
}

.fo-menu-group__title {
    margin: 0;
    white-space: nowrap;
    transition: opacity .24s ease, transform .24s ease;
    color: var(--fo-sidebar-heading);
}

.fo-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.fo-menu--depth-1 {
    gap: .3rem;
}

.fo-menu--depth-1>.fo-menu-item>.fo-menu-item__main>.fo-menu-link {
    padding: .7rem .95rem;
}

.fo-menu-item__main {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.fo-menu-item--has-children>.fo-menu-item__main>.fo-menu-link {
    flex: 1 1 auto;
}

.fo-menu-item__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--fo-sidebar-text);
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .24s ease;
}

.fo-menu-item__toggle .material-icons-outlined {
    font-size: 20px;
    transition: transform .24s ease;
}

.fo-menu-item__toggle:hover,
.fo-menu-item__toggle:focus-visible {
    background: var(--fo-sidebar-hover-bg);
    color: var(--fo-sidebar-text);
    outline: none;
    box-shadow: 0 10px 20px rgba(31, 165, 139, 0.25);
}

.fo-menu-item__toggle:focus-visible {
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.fo-menu-item--has-children:not(.fo-menu-item--expanded) .fo-submenu {
    display: none;
}

.fo-menu-item--has-children:not(.fo-menu-item--expanded)>.fo-menu-item__main .fo-menu-item__toggle .material-icons-outlined {
    transform: rotate(-90deg);
}

.fo-menu-link,
.fo-submenu-link,
.fo-menu__summary {
    display: flex;
    align-items: center;
    /* gap: .75rem; */
    padding: .6rem .9rem .6rem .7rem;
    border-radius: 12px;
    border: 0;
    color: var(--fo-sidebar-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    background: transparent;
    border-left: 3px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .24s ease;
    cursor: pointer;
}

.fo-menu-link__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--fo-sidebar-icon-bg);
    color: var(--fo-sidebar-icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .24s ease;
}

.fo-menu-link__text {
    /*flex: 1 1 auto;*/
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    transition: opacity .24s ease, transform .24s ease, color .24s ease;
}

.fo-menu-link:hover,
.fo-submenu-link:hover,
.fo-menu__summary:hover,
.fo-menu-link:focus-visible,
.fo-submenu-link:focus-visible,
.fo-menu__summary:focus-visible {
    background: var(--fo-sidebar-hover-bg);
    color: var(--fo-sidebar-text);
    border-left-color: rgba(255, 255, 255, 0.28);
    transform: translateX(2px);
    box-shadow: 0 12px 26px rgba(2, 46, 37, 0.25);
}

.fo-menu-link:hover .fo-menu-link__icon,
.fo-submenu-link:hover .fo-menu-link__icon,
.fo-menu__summary:hover .fo-menu-link__icon {
    background: var(--fo-sidebar-icon-color);
    color: #022e25;
    box-shadow: 0 10px 20px rgba(31, 165, 139, 0.35);
}

.fo-menu-link.is-active,
.fo-menu-link.fo-menu-link--active,
.fo-menu-link[aria-current="page"],
.fo-menu-link[aria-current="true"],
.fo-menu__summary.is-active,
.fo-menu__summary[aria-expanded="true"] {
    background: var(--fo-sidebar-active-bg);
    color: #ffffff;
    border-left-color: var(--fo-sidebar-active-border);
    box-shadow: 0 16px 32px rgba(2, 46, 37, 0.32);
}

.fo-menu-link.is-active .fo-menu-link__icon,
.fo-menu-link.fo-menu-link--active .fo-menu-link__icon,
.fo-menu-link[aria-current="page"] .fo-menu-link__icon,
.fo-menu-link[aria-current="true"] .fo-menu-link__icon,
.fo-menu__summary.is-active .fo-menu-link__icon,
.fo-menu__summary[aria-expanded="true"] .fo-menu-link__icon {
    background: var(--fo-sidebar-active-border);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(255, 107, 53, 0.35);
}

.fo-submenu-link.is-active,
.fo-submenu-link.fo-menu-link--active,
.fo-submenu-link[aria-current="page"],
.fo-submenu-link[aria-current="true"] {
    background: var(--fo-sidebar-active-bg);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(2, 46, 37, 0.24);
    transform: translateX(3px);
}

.fo-submenu-link.is-active .fo-menu-link__icon,
.fo-submenu-link.fo-menu-link--active .fo-menu-link__icon,
.fo-submenu-link[aria-current="page"] .fo-menu-link__icon,
.fo-submenu-link[aria-current="true"] .fo-menu-link__icon {
    background: var(--fo-sidebar-active-border);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(255, 107, 53, 0.35);
}

.fo-submenu {
    position: relative;
    list-style: none;
    margin: 0 .4rem 0 1rem;
    padding: .45rem 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    border-left: 0;
    background: var(--fo-sidebar-subtle);
    border-radius: 12px;
    transition: margin .2s ease, padding .2s ease, background .2s ease;
}

.fo-menu>.fo-menu-item>.fo-menu-item__main>.fo-menu-link,
.fo-menu>.fo-menu-item>.fo-menu__details>.fo-menu__summary {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.fo-menu>.fo-menu-item>.fo-menu__details {
    border-radius: 14px;
    padding: .25rem .25rem .25rem 0;
    transition: background .2s ease, box-shadow .2s ease;
}

.fo-menu>.fo-menu-item>.fo-menu__details[open] {
    background: var(--fo-sidebar-subtle);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.fo-menu>.fo-menu-item>.fo-menu__details[open]>.fo-menu__summary {
    background: var(--fo-sidebar-active-bg);
    color: #ffffff;
    border-left-color: var(--fo-sidebar-active-border);
    box-shadow: 0 16px 32px rgba(2, 46, 37, 0.32);
}

.fo-menu>.fo-menu-item>.fo-menu__details[open]>.fo-menu__summary .fo-menu-link__icon {
    background: var(--fo-sidebar-active-border);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(255, 107, 53, 0.35);
}

.fo-submenu-item {
    position: relative;
}

.fo-submenu-item:last-child::after {
    content: "";
    position: absolute;
    left: -1.5rem;
    bottom: -.4rem;
    width: 2px;
    height: .4rem;
    background: transparent;
}

.fo-menu>.fo-menu-item>.fo-menu-item__main>.fo-menu-link:hover,
.fo-menu>.fo-menu-item>.fo-menu__details>.fo-menu__summary:hover,
.fo-menu>.fo-menu-item>.fo-menu-item__main>.fo-menu-link:focus-visible,
.fo-menu>.fo-menu-item>.fo-menu__details>.fo-menu__summary:focus-visible {
    border-left-color: var(--fo-sidebar-active-border);
    box-shadow: 0 14px 28px rgba(2, 46, 37, 0.28);
}

.fo-submenu-link {
    position: relative;
    font-size: .8rem;
    font-weight: 500;
    color: var(--fo-sidebar-text);
    gap: .6rem;
    padding: .4rem .65rem;
    border-radius: 9px;
    border: 0;
    background: transparent;
}

.fo-submenu-link .fo-menu-link__icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--fo-sidebar-icon-color);
    font-size: 16px;
}

.fo-submenu-link .fo-menu-link__text {
    letter-spacing: .003em;
}

.fo-submenu .fo-submenu-link:hover,
.fo-submenu .fo-submenu-link:focus-visible {
    background: var(--fo-sidebar-hover-bg);
    box-shadow: 0 10px 22px rgba(2, 46, 37, 0.22);
    color: var(--fo-sidebar-text);
    transform: translateX(3px);
}

.fo-submenu .fo-submenu-link:hover .fo-menu-link__icon,
.fo-submenu .fo-submenu-link:focus-visible .fo-menu-link__icon {
    background: var(--fo-sidebar-icon-color);
    color: #022e25;
    border-color: transparent;
}

.fo-submenu .fo-menu__details {
    padding: .15rem;
}

.fo-menu__details {
    border-radius: 12px;
    background: transparent;
    padding: .25rem;
}

.fo-menu__summary {
    list-style: none;
}

.fo-submenu .fo-menu__summary {
    font-size: .8rem;
    font-weight: 500;
    position: relative;
    padding: .35rem .6rem .35rem .25rem;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Progressive scaling for deeper navigation levels */
.fo-submenu .fo-submenu {
    /*margin-left: 2.25rem;*/
    margin-top: 0.25rem;
    padding: .35rem 0;
}

.fo-submenu .fo-submenu .fo-submenu {
    /*margin-left: 2.9rem;*/
    margin-top: 0.25rem;
    padding: .3rem 0;
}

.fo-submenu .fo-submenu .fo-submenu .fo-submenu {
    /*margin-left: 3.5rem;*/
    margin-top: 0.25rem;
    padding: .25rem 0;
}

.fo-submenu .fo-submenu .fo-submenu-link,
.fo-submenu .fo-submenu .fo-menu__summary {
    font-size: .75rem;
    /*padding-left: 1rem;*/
}

.fo-submenu .fo-submenu .fo-submenu .fo-submenu-link,
.fo-submenu .fo-submenu .fo-submenu .fo-menu__summary {
    font-size: .72rem;
    /*padding-left: 1.15rem;*/
}

.fo-submenu .fo-submenu .fo-submenu .fo-submenu .fo-submenu-link,
.fo-submenu .fo-submenu .fo-submenu .fo-submenu .fo-menu__summary {
    font-size: .68rem;
    /*padding-left: 1.3rem;*/
}

.fo-submenu .fo-submenu .fo-menu-link__icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 14px;
}

.fo-submenu .fo-submenu .fo-submenu .fo-menu-link__icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    font-size: 12px;
}

.fo-submenu .fo-submenu .fo-submenu .fo-submenu .fo-menu-link__icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    font-size: 11px;
}

.fo-menu__summary::-webkit-details-marker {
    display: none;
}

.fo-empty-state {
    padding: 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.fo-empty-state__icon {
    font-size: 32px;
    color: var(--fo-sidebar-icon-color);
}

.fo-empty-state__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fo-sidebar-text);
}

.fo-empty-state__description {
    margin: 0;
    font-size: .85rem;
    color: var(--fo-sidebar-text-muted);
}

body.fo-sidebar-collapsed .fo-menu-group__title,
body.fo-sidebar-collapsed .fo-menu-link__text,
body.fo-sidebar-collapsed .fo-submenu-link .fo-menu-link__text,
body.fo-sidebar-collapsed .fo-empty-state__description,
body.fo-sidebar-collapsed .fo-empty-state__title,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-group__title,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link__text,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link .fo-menu-link__text,
.fo-shell.fo-shell--sidebar-collapsed .fo-empty-state__description,
.fo-shell.fo-shell--sidebar-collapsed .fo-empty-state__title {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}

body.fo-sidebar-collapsed .fo-menu-item__toggle,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-item__toggle {
    display: none;
}

body.fo-sidebar-collapsed .fo-menu-group__header,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-group__header {
    justify-content: center;
}

body.fo-sidebar-collapsed .fo-menu-group__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-group__icon {
    background: rgba(255, 255, 255, 0.12);
    color: var(--fo-sidebar-icon-color);
    transform: translateX(0);
    box-shadow: none;
}

body.fo-sidebar-collapsed .fo-menu-group,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-group {
    align-items: center;
    border-bottom-color: transparent;
}

body.fo-sidebar-collapsed .fo-menu,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu {
    align-items: center;
}

body.fo-sidebar-collapsed .fo-menu-link,
body.fo-sidebar-collapsed .fo-submenu-link,
body.fo-sidebar-collapsed .fo-menu__summary,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary {
    justify-content: center;
}

body.fo-sidebar-collapsed .fo-submenu,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu {
    border-left: 0;
    margin-left: .5rem;
    margin-right: .5rem;
    padding: 0;
}

body.fo-sidebar-collapsed .fo-submenu-item:last-child::after,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-item:last-child::after {
    display: none;
}

body.fo-sidebar-collapsed .fo-menu-link,
body.fo-sidebar-collapsed .fo-submenu-link,
body.fo-sidebar-collapsed .fo-menu__summary,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary {
    gap: 0;
    width: 100%;
    padding: .25rem 0;
    border-left: 0;
    background: transparent;
    box-shadow: none;
    min-height: calc(var(--fo-collapsed-icon-size, 44px) + .35rem);
    justify-content: center;
    --fo-collapsed-icon-size: 44px;
    --fo-collapsed-icon-font: 24px;
}

body.fo-sidebar-collapsed .fo-menu-link.fo-menu-link--depth-2,
body.fo-sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-2,
body.fo-sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-2,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.fo-menu-link--depth-2,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-2,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-2 {
    --fo-collapsed-icon-size: 36px;
    --fo-collapsed-icon-font: 20px;
}

body.fo-sidebar-collapsed .fo-menu-link.fo-menu-link--depth-3,
body.fo-sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-3,
body.fo-sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-3,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.fo-menu-link--depth-3,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-3,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-3 {
    --fo-collapsed-icon-size: 32px;
    --fo-collapsed-icon-font: 18px;
}

body.fo-sidebar-collapsed .fo-menu-link.fo-menu-link--depth-4,
body.fo-sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-4,
body.fo-sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-4,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.fo-menu-link--depth-4,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-4,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-4 {
    --fo-collapsed-icon-size: 28px;
    --fo-collapsed-icon-font: 16px;
}

body.fo-sidebar-collapsed .fo-menu-link.fo-menu-link--depth-5,
body.fo-sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-5,
body.fo-sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-5,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.fo-menu-link--depth-5,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.fo-menu-link--depth-5,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary.fo-menu-link--depth-5 {
    --fo-collapsed-icon-size: 24px;
    --fo-collapsed-icon-font: 14px;
}

body.fo-sidebar-collapsed .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link__icon {
    width: var(--fo-collapsed-icon-size, 44px);
    height: var(--fo-collapsed-icon-size, 44px);
    border-radius: calc(var(--fo-collapsed-icon-size, 44px) / 3);
    font-size: var(--fo-collapsed-icon-font, 24px);
    background: rgba(255, 255, 255, 0.12);
    color: var(--fo-sidebar-text);
    margin-inline: auto;
}

body.fo-sidebar-collapsed .fo-menu-link__text,
body.fo-sidebar-collapsed .fo-submenu-link .fo-menu-link__text,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link__text,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link .fo-menu-link__text {
    display: none;
}

body.fo-sidebar-collapsed .fo-menu-link:hover,
body.fo-sidebar-collapsed .fo-menu-link:focus-visible,
body.fo-sidebar-collapsed .fo-submenu-link:hover,
body.fo-sidebar-collapsed .fo-submenu-link:focus-visible,
body.fo-sidebar-collapsed .fo-menu__summary:hover,
body.fo-sidebar-collapsed .fo-menu__summary:focus-visible,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link:hover,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link:focus-visible,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link:hover,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link:focus-visible,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary:hover,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu__summary:focus-visible {
    transform: none;
}

body.fo-sidebar-collapsed .fo-menu-link.is-active,
body.fo-sidebar-collapsed .fo-menu-link.fo-menu-link--active,
body.fo-sidebar-collapsed .fo-menu-link[aria-current="page"],
body.fo-sidebar-collapsed .fo-menu-link[aria-current="true"],
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.is-active,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.fo-menu-link--active,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link[aria-current="page"],
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link[aria-current="true"] {
    background: var(--fo-sidebar-active-bg);
    border-left: 0;
    box-shadow: 0 12px 24px rgba(2, 46, 37, 0.28);
}

body.fo-sidebar-collapsed .fo-menu-link.is-active .fo-menu-link__icon,
body.fo-sidebar-collapsed .fo-menu-link.fo-menu-link--active .fo-menu-link__icon,
body.fo-sidebar-collapsed .fo-menu-link[aria-current="page"] .fo-menu-link__icon,
body.fo-sidebar-collapsed .fo-menu-link[aria-current="true"] .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.is-active .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link.fo-menu-link--active .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link[aria-current="page"] .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-menu-link[aria-current="true"] .fo-menu-link__icon {
    background: var(--fo-sidebar-active-border);
    color: #ffffff;
}

body.fo-sidebar-collapsed .fo-submenu-link.is-active,
body.fo-sidebar-collapsed .fo-submenu-link.fo-menu-link--active,
body.fo-sidebar-collapsed .fo-submenu-link[aria-current="page"],
body.fo-sidebar-collapsed .fo-submenu-link[aria-current="true"],
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.is-active,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.fo-menu-link--active,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link[aria-current="page"],
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link[aria-current="true"] {
    background: var(--fo-sidebar-active-bg);
    box-shadow: 0 10px 22px rgba(2, 46, 37, 0.24);
}

body.fo-sidebar-collapsed .fo-submenu-link.is-active .fo-menu-link__icon,
body.fo-sidebar-collapsed .fo-submenu-link.fo-menu-link--active .fo-menu-link__icon,
body.fo-sidebar-collapsed .fo-submenu-link[aria-current="page"] .fo-menu-link__icon,
body.fo-sidebar-collapsed .fo-submenu-link[aria-current="true"] .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.is-active .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link.fo-menu-link--active .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link[aria-current="page"] .fo-menu-link__icon,
.fo-shell.fo-shell--sidebar-collapsed .fo-submenu-link[aria-current="true"] .fo-menu-link__icon {
    background: var(--fo-sidebar-active-border);
    color: #ffffff;
    border-color: transparent;
}

/* =========================================================
   Workspace Tabs
   Provides HTMX-driven multi-view navigation within the shell.
   ====================================================== */

.fo-tabbar {
    flex: 0 0 auto;
    background: var(--color-surface);
}

.fo-tabbar__inner {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .5rem .75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.fo-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: .25rem;
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: max-content;
}

.fo-tabs__viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.fo-tabs__viewport::-webkit-scrollbar {
    display: none;
}

.fo-tabs__scroll {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: .5rem .5rem 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: var(--color-surfaceEmphasis);
    color: var(--color-textMuted);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.fo-tabs__scroll:hover:not(:disabled) {
    background: var(--color-accentMuted);
    color: var(--color-text);
}

.fo-tabs__scroll:focus-visible {
    outline: 2px solid var(--color-primaryBright);
    outline-offset: 2px;
}

.fo-tabs__scroll:disabled {
    cursor: default;
    opacity: .4;
}



.fo-tabs__close-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: .5rem .5rem 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: var(--color-surfaceEmphasis);
    color: var(--color-textMuted);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}



.fo-tabs__close-all:hover:not(:disabled) {
    background: var(--color-accentMuted);
    color: var(--color-text);
}

.fo-tabs__close-all:focus-visible {
    outline: 2px solid var(--color-primaryBright);
    outline-offset: 2px;
}

.fo-tabs__close-all:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.fo-tabs__close-all .material-icons,
.fo-tabs__close-all .material-icons-outlined {
    font-size: 18px;
    line-height: 1;
}

.tab-item {
    position: relative;
    flex-shrink: 0;
}

.tab-button {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem .5rem 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: var(--color-surfaceEmphasis);
    white-space: nowrap;
    cursor: pointer;
    font-size: .875rem;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 120px;
    min-height: 37px;
}

.tab-button:hover {
    background: var(--color-accentMuted);
}

.tab-item[aria-selected="true"] .tab-button {
    background: var(--color-primary);
    color: var(--color-onPrimary);
    border-color: var(--color-primary);
    z-index: 1;
    position: relative;
}

.tab-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.tab-close {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

.tab-close:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.tab-item[aria-selected="true"] .tab-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Layout scaffolding */
.fo-tabs::-webkit-scrollbar {
    height: 4px;
}

.fo-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.fo-tabs::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

.fo-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--color-textMuted);
}


.fo-content {
    /* flex: 1 1 auto; */
    min-height: 0;
    padding: 1rem;
    margin-top: 0;
    overflow: auto
}

.fo-shell__main .fo-content {
    height: calc(100dvh - 118px);
}

.fo-popup__main .fo-content {
    height: 100vh;
}

.fo-tab-panels {
    position: relative;
    min-height: 100%;
}

.fo-static-content[hidden] {
    display: none !important;
}

.fo-tab-panel {
    position: relative;
    min-height: 12rem;
}

.fo-tab-panel[data-active="false"] {
    display: none !important;
}

.fo-tab-panel[data-loading="true"] {
    min-height: 16rem;
}

.fo-tab-panel[data-loading="true"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 26, 21, 0.06);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.fo-tab-panel[data-loading="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    border-radius: 50%;
    border: 3px solid rgba(4, 26, 21, 0.12);
    border-top-color: var(--color-primary);
    animation: fo-spin 0.8s linear infinite;
    z-index: 2;
}

.fo-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 160px;
    color: var(--color-textMuted);
    font-size: .95rem;
    text-align: center;
}

.fo-panel-error {
    margin: 2rem auto;
    padding: 2rem;
    max-width: 480px;
    text-align: center;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-danger, #c73535);
    box-shadow: 0 12px 30px rgba(6, 65, 51, 0.08);
}

.fo-global-loading__container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fo-global-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-width: 240px;
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-surface, #0a2f27), var(--color-surfaceEmphasis, #0e4033));
    color: var(--color-text, #e9f7f3);
    box-shadow: 0 18px 40px rgba(2, 46, 37, 0.25);
    text-align: center;
}

.fo-global-loading__spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(4, 26, 21, 0.16);
    border-top-color: var(--color-primary, #1fa58b);
    animation: fo-spin 0.9s linear infinite;
    box-shadow: 0 6px 20px rgba(2, 46, 37, 0.18);
}

.fo-global-loading__text {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text, #e9f7f3);
}

@keyframes fo-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Layout Systems
   Flexible grid helpers for dashboards and content areas.
   ====================================================== */
.fo-layout {
    --fo-layout-gap: 1.25rem;
    display: grid;
    gap: var(--fo-layout-gap);
    align-items: stretch;
    grid-auto-flow: row;
}

.fo-layout>* {
    min-width: 0;
    min-height: 0;
}

.fo-layout--stack {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
}

.fo-layout--stack.fo-layout--equal {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.fo-layout--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fo-layout--split.fo-layout--left-wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.fo-layout--split.fo-layout--right-wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.fo-layout--thirds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fo-layout--quarters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, 1fr);
}

.fo-layout--flow {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fo-layout__cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 1rem;
}

.fo-layout__cell:not(:last-child) {
    margin-bottom: 0;
}

@media (max-width: 1280px) {

    .fo-layout--split,
    .fo-layout--thirds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

    .fo-layout--split,
    .fo-layout--thirds,
    .fo-layout--quarters {
        grid-template-columns: minmax(0, 1fr);
    }

    .fo-layout--quarters {
        grid-auto-rows: minmax(0, auto);
    }
}

@media (max-width: 640px) {
    .fo-layout {
        --fo-layout-gap: 1rem;
    }
}

/* =========================================================
   Module Surface
   Reusable section container for feature areas.
   ====================================================== */
.fo-module {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid rgba(4, 26, 21, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(6, 65, 51, 0.06);
    transition: box-shadow .2s ease, transform .2s ease;
}

.fo-module:hover {
    box-shadow: 0 24px 60px rgba(6, 65, 51, 0.08);
    transform: translateY(-2px);
}

.fo-module__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
}

.fo-module__headline {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.fo-module__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-textMuted);
}

.fo-module__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--color-text);
}

.fo-module__subtitle {
    margin: 0;
    font-size: .95rem;
    color: var(--color-textMuted);
    line-height: 1.6;
}

.fo-module__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.fo-module__actions .fo-btn+.fo-btn {
    margin-left: 0;
}

.fo-module__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
}

.fo-module__footer {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(4, 26, 21, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: .875rem;
    color: var(--color-textMuted);
}

.fo-module__note {
    font-size: .8rem;
    color: var(--color-textMuted);
}

.fo-module__section {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.fo-module__section>h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

.fo-module__section>p {
    margin: 0;
    font-size: .9rem;
    color: var(--color-textMuted);
}

.fo-module--highlight {
    background: linear-gradient(155deg, rgba(6, 65, 51, 0.06) 0%, rgba(31, 165, 139, 0.08) 45%, rgba(255, 255, 255, 0.9) 100%);
}

@media (max-width: 640px) {
    .fo-module {
        padding: 1.25rem;
        border-radius: 14px;
    }

    .fo-module__header {
        flex-direction: column;
        align-items: stretch;
    }

    .fo-module__actions {
        justify-content: flex-start;
    }
}

/* =========================================================
   KPI Tiles
   Compact metric cards inspired by FrameOn dashboards.
   ====================================================== */
.fo-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.fo-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.25rem;
    background: var(--color-surfaceEmphasis);
    border: 1px solid rgba(4, 26, 21, 0.06);
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(6, 65, 51, 0.05);
    min-height: 0;
}

.fo-kpi__label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-textMuted);
}

.fo-kpi__value {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.fo-kpi__unit {
    font-size: .9rem;
    color: var(--color-textMuted);
    font-weight: 500;
}

.fo-kpi__trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .85rem;
    font-weight: 600;
}

.fo-kpi__trend .material-icons-outlined {
    font-size: 1.1rem;
}

.fo-kpi__trend--up {
    color: #1fa58b;
}

.fo-kpi__trend--down {
    color: #e75d4a;
}

.fo-kpi__trend--steady {
    color: var(--color-textMuted);
}

/* =========================================================
   Board-style list
   Lightweight alternative to tables for content feeds.
   ====================================================== */
.fo-board-list {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(4, 26, 21, 0.08);
    border-radius: 14px;
    background: var(--color-surface);
    overflow: hidden;
}

.fo-board-list__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid rgba(4, 26, 21, 0.06);
}

.fo-board-list__item:last-child {
    border-bottom: none;
}

.fo-board-list__badge {
    display: flex;
    align-items: flex-start;
}

.fo-board-list__content {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.fo-board-list__extra {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: flex-end;
}

.fo-board-list__category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #064133;
    background: rgba(31, 165, 139, 0.16);
}

.fo-board-list__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.fo-board-list__title a {
    color: inherit;
    text-decoration: none;
}

.fo-board-list__title a:hover,
.fo-board-list__title a:focus-visible {
    text-decoration: underline;
}

.fo-board-list__meta {
    display: flex;
    gap: 1rem;
    font-size: .85rem;
    color: var(--color-textMuted);
}

.fo-board-list__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.fo-board-list__meta-item dt {
    font-weight: 600;
}

.fo-board-list__meta-item dd {
    margin: 0;
}

.fo-board-list__attach {
    color: var(--color-textMuted);
}

.fo-board-list__attach .material-icons-outlined {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .fo-board-list__item {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .fo-board-list__extra {
        justify-content: flex-start;
    }

    .fo-board-list__meta {
        flex-wrap: wrap;
    }

    .fo-board-list__attach {
        align-self: flex-end;
    }
}

/* =========================================================
   Guide helpers
   Used for the UI handbook sample page.
   ====================================================== */
.fo-guide {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.fo-heading {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.fo-heading h1,
.fo-heading h2 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -.01em;
}

.fo-heading p {
    margin: 0;
    color: var(--color-textMuted);
    font-size: .95rem;
}

.fo-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fo-example {
    padding: 1.25rem;
    border-radius: var(--fo-radius);
    border: 1px solid rgba(4, 26, 21, 0.12);
    background: rgba(6, 65, 51, 0.03);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fo-note {
    font-size: .85rem;
    color: var(--color-textMuted);
}

.fo-code {
    position: relative;
}

.fo-code pre {
    margin: 0;
    padding: 1rem 1.25rem;
    background: #0d1f1a;
    color: #f5fdfc;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    font-size: .85rem;
    line-height: 1.6;
}

.fo-code code {
    font-family: 'Fira Code', 'Source Code Pro', Menlo, Consolas, monospace;
}

/* Identity primitives and badges */
/* =========================================================
   Badge / Chip Tokens
   Lightweight label styles used across hero and cards.
   ====================================================== */
.fo-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: var(--fo-font-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fo-color-primary);
    background: var(--fo-color-surface-muted);
    border: 1px solid transparent;
    transition: color var(--fo-transition-fast), background var(--fo-transition-fast), border var(--fo-transition-fast);
}

.fo-chip__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}

.fo-chip--ghost {
    color: var(--fo-color-text);
    background: transparent;
    border-color: var(--fo-color-border-soft);
}

.fo-chip--accent {
    color: #ffffff;
    background: var(--fo-color-accent-warm);
    border-color: transparent;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.15);
}

.fo-chip--contrast {
    color: var(--fo-color-on-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.fo-chip--info {
    color: #ffffff;
    background: var(--fo-color-info);
    border-color: transparent;
}

.fo-chip--success {
    color: #0f291f;
    background: rgba(57, 211, 179, 0.16);
    border-color: rgba(57, 211, 179, 0.35);
}

/* =========================================================
   Cards
   Lightweight panels used across dashboards and detail pages.
   ====================================================== */
.fo-card {
    background: var(--fo-color-surface);
    border: 1px solid var(--fo-color-border-soft);
    border-radius: var(--fo-radius-md);
    padding: var(--fo-spacing-md);
    box-shadow: var(--fo-shadow-sm);
    transition: transform var(--fo-transition-fast), box-shadow var(--fo-transition-fast), border-color var(--fo-transition-fast);
}

.fo-card--outline {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.fo-card--subtle {
    background: var(--fo-color-surface-muted);
    border-color: transparent;
}

.fo-card--elevated {
    box-shadow: var(--fo-shadow-md);
    transform: translateY(-2px);
}

.fo-card:hover {
    border-color: var(--fo-color-border-strong);
}

@media (prefers-reduced-motion: reduce) {
    .fo-card {
        transition: none;
    }
}

/* Button palette */
/* =========================================================
   Buttons
   Primary and secondary actions with consistent sizing.
   ====================================================== */
.fo-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fo-spacing-sm);
}

.fo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--fo-color-border-soft);
    border-radius: .5rem;
    background: var(--fo-color-surface);
    color: var(--fo-color-text);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--fo-transition-fast), box-shadow var(--fo-transition-fast), background var(--fo-transition-fast), border-color var(--fo-transition-fast), color var(--fo-transition-fast);
    min-height: 36px;
}

.fo-btn:hover {
    background: var(--fo-color-surface-emphasis);
    border-color: var(--fo-color-accent);
    transform: translateY(-1px);
}

.fo-btn--primary {
    background: var(--fo-color-primary);
    color: var(--fo-color-on-primary);
    border-color: var(--fo-color-primary);
}

.fo-btn--primary:hover {
    background: var(--fo-color-primary-bright);
    border-color: var(--fo-color-primary-bright);
}

.fo-btn--secondary {
    background: var(--fo-color-secondary);
    color: var(--fo-color-on-primary);
    border-color: var(--fo-color-secondary);
}

.fo-btn--secondary:hover {
    background: color-mix(in srgb, var(--fo-color-secondary) 88%, #ffffff 12%);
    border-color: color-mix(in srgb, var(--fo-color-secondary) 92%, #ffffff 8%);
}

.fo-btn--ghost {
    background: transparent;
    color: var(--fo-color-primary);
    border-color: transparent;
}

.fo-btn--ghost:hover {
    background: var(--fo-color-surface-muted);
    background: color-mix(in srgb, var(--fo-color-primary) 12%, transparent);
    border-color: var(--fo-color-border-soft);
    border-color: color-mix(in srgb, var(--fo-color-primary) 18%, transparent);
}

.fo-btn--soft {
    background: var(--fo-color-surface-muted);
    color: var(--fo-color-primary);
    border-color: var(--fo-color-border-soft);
    border-color: color-mix(in srgb, var(--fo-color-primary) 22%, transparent);
}

.fo-btn--soft:hover {
    background: color-mix(in srgb, var(--fo-color-surface-muted) 82%, #ffffff 18%);
    border-color: color-mix(in srgb, var(--fo-color-primary) 32%, transparent);
}

.fo-btn--contrast {
    color: var(--fo-color-on-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.fo-btn--contrast:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.26);
}

.fo-btn--pill {
    border-radius: 999px;
    padding-inline: 1.25rem;
}

.fo-btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.fo-btn--elevated {
    box-shadow: var(--fo-shadow-sm);
}

.fo-btn--elevated:hover {
    box-shadow: var(--fo-shadow-md);
}

.fo-btn--accent {
    background: var(--color-accent);
    color: var(--color-onPrimary);
    border-color: var(--color-accent);
}

.fo-btn--accent:hover {
    background: var(--color-primaryBright);
    border-color: var(--color-primaryBright);
}

/* 7.5.1 버튼 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--fz-body);
    font-weight: var(--fw-medium);
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0px);
    box-shadow: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primaryDark);
    border-color: var(--color-primaryDark);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--white);
    border-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-accent {
    background-color: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.btn-accent:hover {
    background-color: #e65c2e;
    border-color: #e65c2e;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-primaryDark);
    border-color: var(--color-primaryDark);
}

.btn-outline-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

.btn-outline-secondary:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-primaryDark);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accentMuted);
}

.btn-outline-bright {
    background-color: var(--color-neutral-050);
    color: var(--color-primary);
    border: 1px solid var(--color-accentMuted);
}

.btn-outline-bright:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-primaryDark);
    border-color: var(--color-primaryDark);
}

.btn-success {
    background-color: var(--success-green);
    color: var(--white);
    border-color: var(--success-green);
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-danger {
    background-color: var(--red);
    color: var(--white);
    border-color: var(--red);
}

.btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

.btn-ghost {
    background-color: transparent;
    color: var(--text);
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--gray-light);
    color: var(--primary);
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--fz-h4);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--fz-small);
}

.btn-mini {
    padding: var(--spacing-xxs) var(--spacing-sm);
    font-size: var(--fz-xs);
    border-radius: var(--radius-sm);
}

.btn-icon svg {
    width: 1.1em;
    height: 1.1em;
    margin-right: var(--spacing-xs);
}

.btn-icon-only {
    padding: var(--spacing-sm);
}

.btn-icon-only svg {
    margin-right: 0;
}

.btn.hover-state {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-primary.hover-state {
    background-color: var(--color-primaryDark);
    border-color: var(--color-primaryDark);
}

.btn-outline.hover-state {
    background-color: var(--color-neutral-100);
    color: var(--color-primaryDark);
    border-color: var(--color-primaryDark);
}

.btn.btn-danger.hover-state {
    background-color: #c0392b;
    border-color: #c0392b;
}

.btn.active-state {
    transform: translateY(0px);
    box-shadow: none;
}

.btn-primary.active-state {
    background-color: var(--color-primaryDark);
}

.btn-outline.active-state {
    background-color: var(--gray);
}

.btn-danger.active-state {
    background-color: #a93226;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================================================
   스플릿 버튼
   ====================================================== */
.fo-split-button {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.fo-split-button__main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fo-split-button__toggle {
    min-width: 28px;
    padding: 0 6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fo-split-button__caret {
    font-size: 10px;
    line-height: 1;
}

.fo-split-button__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 140px;
    padding: 4px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    display: none;
}

.fo-split-button__item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    color: #1f2328;
    cursor: pointer;
}

.fo-split-button__item:hover,
.fo-split-button__item:focus-visible {
    background: #f3f4f6;
}

.fo-split-button.is-open .fo-split-button__menu {
    display: block;
}

/* Identity showcase */
/* =========================================================
   Brand hero and preview widgets based on FrameOn identity.
   ====================================================== */
.fo-identity-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.2rem);
    padding: clamp(1.8rem, 4vw, 3.2rem);
    border-radius: var(--fo-radius);
    background: linear-gradient(135deg, var(--fo-color-primary-dark) 0%, var(--fo-color-primary) 55%, var(--fo-color-secondary) 100%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--fo-color-primary-dark) 92%, transparent) 0%, color-mix(in srgb, var(--fo-color-primary) 85%, transparent) 50%, color-mix(in srgb, var(--fo-color-secondary) 80%, transparent) 100%);
    color: var(--fo-color-on-primary);
    box-shadow: var(--fo-shadow-sm);
    overflow: hidden;
    isolation: isolate;
}

.fo-identity-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% -10%, rgba(255, 255, 255, 0.24) 0%, transparent 60%), radial-gradient(circle at 80% 120%, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
    opacity: .85;
    pointer-events: none;
}

.fo-identity-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--fo-spacing-md);
    font-family: var(--fo-font-body);
}

.fo-identity-hero__title {
    margin: 0;
    font-family: var(--fo-font-heading);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: var(--fo-font-weight-bold);
    letter-spacing: -.02em;
    line-height: 1.1;
}

.fo-identity-hero__subtitle {
    margin: 0;
    font-size: 1.05rem;
    line-height: var(--fo-line-height-relaxed);
    color: color-mix(in srgb, var(--fo-color-on-primary) 85%, rgba(255, 255, 255, 0.2) 15%);
    max-width: 52ch;
}

.fo-identity-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-spacing-sm);
    align-items: center;
}

.fo-identity-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-spacing-sm);
    align-items: center;
}

.fo-identity-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--fo-spacing-sm);
}

.fo-identity-stats__item {
    backdrop-filter: blur(10px);
    border-radius: var(--fo-radius-md);
    padding: var(--fo-spacing-sm) var(--fo-spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: var(--fo-color-on-primary);
}

.fo-identity-stats__label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: var(--fo-font-weight-semibold);
    opacity: .75;
}

.fo-identity-stats__value {
    font-size: 1.6rem;
    font-weight: var(--fo-font-weight-semibold);
}

.fo-identity-hero__preview {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--fo-spacing-sm);
    align-content: start;
}

.fo-preview-stack {
    display: grid;
    gap: var(--fo-spacing-sm);
}

.fo-preview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: var(--fo-spacing-md);
    border-radius: var(--fo-radius-md);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--fo-color-on-primary);
    box-shadow: var(--fo-shadow-sm);
    backdrop-filter: blur(18px);
}

.fo-preview-card__badge {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75;
}

.fo-preview-card__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--fo-font-weight-semibold);
}

.fo-preview-card__description {
    margin: 0;
    font-size: .9rem;
    line-height: var(--fo-line-height-base);
    opacity: .85;
}

.fo-preview-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    gap: .5rem;
    opacity: .75;
}

.fo-preview-card__metric {
    font-size: 1.8rem;
    font-weight: var(--fo-font-weight-semibold);
}

.fo-preview-card--accent {
    background: linear-gradient(160deg, rgba(255, 107, 53, 0.38) 0%, rgba(6, 65, 51, 0.28) 100%);
    border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1024px) {
    .fo-identity-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .fo-identity-hero {
        padding: 1.75rem;
    }

    .fo-identity-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Token specification */
/* =========================================================
   Color, typography, spacing token presentation helpers.
   ====================================================== */
.fo-token-grid {
    display: grid;
    gap: var(--fo-spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fo-token-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--fo-radius-md);
    overflow: hidden;
    border: 1px solid var(--fo-color-border-soft);
    background: var(--fo-color-surface);
    box-shadow: var(--fo-shadow-sm);
    min-height: 220px;
}

.fo-token-card__swatch {
    position: relative;
    min-height: 110px;
    background: var(--token-swatch, var(--fo-color-primary));
    color: var(--token-on-swatch, var(--fo-color-on-primary));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--fo-spacing-sm) var(--fo-spacing-md);
}

.fo-token-card__swatch-label {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.fo-token-card__swatch-value {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--fo-font-weight-semibold);
}

.fo-token-card__body {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: var(--fo-spacing-md);
    flex: 1 1 auto;
}

.fo-token-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--fo-font-weight-semibold);
    color: var(--fo-color-text);
}

.fo-token-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .8rem;
    color: var(--fo-color-text-muted);
}

.fo-token-card__meta code {
    padding: .2rem .5rem;
    background: var(--fo-color-surface-muted);
    border-radius: var(--fo-radius-sm);
    border: 1px solid var(--fo-color-border-soft);
}

.fo-type-scale {
    display: grid;
    gap: .75rem;
}

.fo-type-scale__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: var(--fo-spacing-sm) var(--fo-spacing-md);
    border: 1px solid var(--fo-color-border-soft);
    border-radius: var(--fo-radius-md);
    background: var(--fo-color-surface);
}

.fo-type-scale__sample {
    margin: 0;
}

.fo-type-scale__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fo-color-text-muted);
}

.fo-spacing-ramp {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.fo-spacing-ramp__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem var(--fo-spacing-md);
    border-radius: var(--fo-radius-md);
    border: 1px dashed var(--fo-color-border-soft);
    background: var(--fo-color-surface-muted);
    font-size: .85rem;
    color: var(--fo-color-text-muted);
}

.fo-spacing-ramp__item::before {
    content: '';
    display: block;
    width: var(--spacing-ramp-bar, 20px);
    height: 10px;
    border-radius: 999px;
    background: var(--fo-color-primary);
}

.fo-spacing-ramp__metrics {
    margin-left: auto;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fo-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--fo-spacing-sm);
}

.fo-icon-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: var(--fo-spacing-sm);
    border-radius: var(--fo-radius-md);
    border: 1px solid var(--fo-color-border-soft);
    background: var(--fo-color-surface);
    font-size: .75rem;
    color: var(--fo-color-text-muted);
}

.fo-icon-grid__item i {
    font-size: 1.8rem;
    color: var(--fo-color-secondary);
}

/* Component gallery */
.fo-component-grid {
    display: grid;
    gap: var(--fo-spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fo-component-grid--dense {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fo-component-card {
    display: flex;
    flex-direction: column;
    gap: var(--fo-spacing-sm);
    padding: var(--fo-spacing-md);
    border-radius: var(--fo-radius-md);
    border: 1px solid var(--fo-color-border-soft);
    background: var(--fo-color-surface);
    box-shadow: var(--fo-shadow-sm);
}

.fo-component-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--fo-font-weight-semibold);
}

.fo-component-card__subtitle {
    margin: 0;
    font-size: .85rem;
    color: var(--fo-color-text-muted);
}

.fo-component-card__footer {
    margin-top: auto;
    font-size: .75rem;
    color: var(--fo-color-text-muted);
}

.fo-segmented {
    display: inline-flex;
    padding: .25rem;
    border-radius: 999px;
    border: 1px solid var(--fo-color-border-soft);
    background: var(--fo-color-surface-muted);
    gap: .25rem;
}

.fo-segmented__option {
    border: none;
    background: transparent;
    color: var(--fo-color-text-muted);
    font-size: .85rem;
    font-weight: var(--fo-font-weight-medium);
    padding: .45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--fo-transition-fast), color var(--fo-transition-fast);
}

.fo-segmented__option:hover {
    background: var(--fo-color-surface);
    color: var(--fo-color-text);
}

.fo-segmented__option--active {
    background: var(--fo-color-surface);
    box-shadow: 0 4px 12px rgba(6, 65, 51, 0.1);
    color: var(--fo-color-primary);
    font-weight: var(--fo-font-weight-semibold);
}

.fo-toggle {
    --toggle-track: var(--fo-color-neutral-300);
    --toggle-thumb: var(--fo-color-surface);
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .75rem;
    border-radius: var(--fo-radius-lg);
    border: 1px solid var(--fo-color-border-soft);
    background: var(--fo-color-surface);
    color: var(--fo-color-text);
    font-size: .875rem;
}

.fo-toggle__switch {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--toggle-track);
    transition: background var(--fo-transition-fast);
}

.fo-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--toggle-thumb);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
    transition: transform var(--fo-transition-fast);
}

.fo-toggle__label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fo-color-text-muted);
}

.fo-toggle--on {
    --toggle-track: color-mix(in srgb, var(--fo-color-primary) 90%, #ffffff 10%);
    --toggle-thumb: #ffffff;
    border-color: color-mix(in srgb, var(--fo-color-primary) 65%, transparent);
}

.fo-toggle--on .fo-toggle__thumb {
    transform: translateX(20px);
}

.fo-toggle--accent {
    --toggle-track: color-mix(in srgb, var(--fo-color-accent-warm) 90%, #ffffff 10%);
    border-color: color-mix(in srgb, var(--fo-color-accent-warm) 60%, transparent);
}

.fo-metric-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--fo-spacing-md);
}

.fo-metric {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: var(--fo-spacing-md);
    border-radius: var(--fo-radius-md);
    background: var(--fo-color-surface);
    border: 1px solid var(--fo-color-border-soft);
    box-shadow: var(--fo-shadow-sm);
}

.fo-metric__label {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fo-color-text-muted);
}

.fo-metric__value {
    font-size: 1.6rem;
    font-weight: var(--fo-font-weight-semibold);
    color: var(--fo-color-text);
}

.fo-metric__trend {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    font-weight: var(--fo-font-weight-medium);
}

.fo-metric__trend--up {
    color: var(--fo-color-success);
}

.fo-metric__trend--down {
    color: var(--fo-color-danger);
}

.fo-metric__trend--steady {
    color: var(--fo-color-warning);
}

.fo-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--fo-spacing-md);
    padding-left: 1.75rem;
}

.fo-timeline::before {
    content: '';
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: .6rem;
    width: 2px;
    background: var(--fo-color-border-soft);
}

.fo-timeline__item {
    position: relative;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.fo-timeline__item::before {
    content: '';
    position: absolute;
    left: -1.15rem;
    top: .2rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    border: 2px solid var(--fo-color-surface);
    background: var(--fo-color-primary);
    box-shadow: 0 0 0 6px rgba(6, 65, 51, 0.08);
}

.fo-timeline__title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--fo-font-weight-semibold);
    color: var(--fo-color-text);
}

.fo-timeline__meta {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fo-color-text-muted);
}

.fo-timeline__description {
    margin: 0;
    font-size: .9rem;
    color: var(--fo-color-text-muted);
}

.fo-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--fo-spacing-sm);
    padding: var(--fo-spacing-sm) var(--fo-spacing-md);
    border-radius: var(--fo-radius-md);
    border: 1px solid var(--fo-color-border-soft);
    background: var(--fo-color-surface-muted);
    color: var(--fo-color-text);
    box-shadow: var(--fo-shadow-sm);
}

.fo-alert__icon {
    font-size: 1.35rem;
    line-height: 1;
}

.fo-alert__content {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.fo-alert__title {
    margin: 0;
    font-weight: var(--fo-font-weight-semibold);
}

.fo-alert__description {
    margin: 0;
    font-size: .9rem;
    color: var(--fo-color-text-muted);
}

.fo-alert--info {
    border-color: color-mix(in srgb, var(--fo-color-info) 42%, transparent);
    background: color-mix(in srgb, var(--fo-color-info) 16%, transparent);
    color: color-mix(in srgb, var(--fo-color-info) 82%, #0f1c24 18%);
}

.fo-alert--success {
    border-color: color-mix(in srgb, var(--fo-color-success) 42%, transparent);
    background: color-mix(in srgb, var(--fo-color-success) 14%, transparent);
    color: color-mix(in srgb, var(--fo-color-success) 80%, #0f241c 20%);
}

.fo-alert--warning {
    border-color: color-mix(in srgb, var(--fo-color-warning) 42%, transparent);
    background: color-mix(in srgb, var(--fo-color-warning) 18%, transparent);
    color: color-mix(in srgb, var(--fo-color-warning) 78%, #422c05 22%);
}

.fo-alert--danger {
    border-color: color-mix(in srgb, var(--fo-color-danger) 45%, transparent);
    background: color-mix(in srgb, var(--fo-color-danger) 16%, transparent);
    color: color-mix(in srgb, var(--fo-color-danger) 80%, #3d1414 20%);
}

.fo-toast-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.fo-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fo-spacing-sm);
    padding: .65rem 1rem;
    border-radius: var(--fo-radius-md);
    background: var(--fo-color-surface);
    border: 1px solid var(--fo-color-border-soft);
    box-shadow: var(--fo-shadow-sm);
    font-size: .85rem;
}

.fo-toast__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: var(--fo-font-weight-medium);
}

.fo-toast__dismiss {
    border: none;
    background: transparent;
    color: var(--fo-color-text-muted);
    cursor: pointer;
    padding: .25rem;
    border-radius: var(--fo-radius-sm);
}

.fo-toast__dismiss:hover {
    background: var(--fo-color-surface-muted);
    color: var(--fo-color-text);
}

.fo-toast--success .fo-toast__status {
    color: var(--fo-color-success);
}

.fo-toast--warning .fo-toast__status {
    color: var(--fo-color-warning);
}

.fo-toast--danger .fo-toast__status {
    color: var(--fo-color-danger);
}

/* Form adornments */
.fo-input {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .875rem;
    transition: all 0.2s ease;
}

.fo-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accentMuted);
}

.fo-select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fo-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accentMuted);
}

.fo-select[multiple] {
    min-height: 110px;
    padding-top: .75rem;
    padding-bottom: .75rem;
    line-height: 1.35;
    overflow-y: auto;
}

.fo-radio {
    width: 100%;
    padding-top: .5rem;
    color: var(--color-text);
    font-size: .875rem;
}

.fo-form__group.is-disabled-radio {
    background-color: #f5f5f5;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    padding: .5rem .75rem 2px .75rem;
}

.fo-form__group.is-disabled-radio .fo-form__label {
    background-color: transparent;
}

.fo-form__group.is-disabled-radio input[type="checkbox"]:disabled {
    opacity: 1;
}

.fo-radio.is-disabled input[type="radio"]:disabled {
    opacity: 1;
}

/* Table utilities */
/* =========================================================
   Data Tables
   Table scaffolding reused by admin listings and grids.
   ====================================================== */
.fo-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.fo-table th,
.fo-table td {
    padding: .75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.fo-table th {
    background: var(--color-surfaceEmphasis);
    font-weight: 600;
    color: var(--color-text);
}

.fo-table tbody tr:hover {
    background: var(--color-accentMuted);
}

.fo-table tbody tr:last-child td {
    border-bottom: none;
}

/* Status indicators */
.fo-status {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
    font-size: .75rem;
    font-weight: 500;
}

.fo-status--success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.fo-status--warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.fo-status--error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.fo-status--info {
    background: var(--color-accentMuted);
    color: var(--color-primary);
}

.fo-status--success-solid {
    background: rgba(1, 133, 49, 0.97);
    color: #ffffff;
}

.fo-status--warning-solid {
    background: rgb(241, 156, 2);
    color: #ffffff;
}

.fo-status--error-solid {
    background: rgb(239, 68, 68);
    color: #ffffff;
}

.fo-status--info-solid {
    background: rgb(68, 128, 239);
    color: #ffffff;
}

.fo-status--temp-solid {
    background: rgb(113, 116, 119);
    color: #ffffff;
}

/* Responsive helpers */
/* =========================================================
   Responsive
   Collapse sidebar and compact controls on tablets.
   ====================================================== */
@media (max-width: 768px) {

    .fo-shell__layout,
    .fo-app {
        grid-template-columns: 1fr;
    }

    .fo-sidebar {
        position: fixed;
        top: 69px;
        left: 0;
        width: var(--fo-sidebar-width);
        height: calc(100dvh - 69px);
        transform: translateX(0);
        transition: transform .32s var(--fo-sidebar-transition), box-shadow .32s ease;
        box-shadow: none;
        z-index: 24;
    }

    body:not(.fo-sidebar-collapsed) .fo-sidebar {
        box-shadow: 0 18px 40px rgba(6, 65, 51, 0.18);
    }

    .fo-sidebar.fo-sidebar--shadow-hidden {
        box-shadow: none;
    }

    body.fo-sidebar-collapsed .fo-sidebar,
    .fo-shell.fo-shell--sidebar-collapsed .fo-sidebar {
        transform: translateX(-110%);
        width: var(--fo-sidebar-width);
    }

    body.fo-sidebar-collapsed .fo-shell__layout,
    .fo-shell.fo-shell--sidebar-collapsed .fo-shell__layout {
        grid-template-columns: 1fr;
    }

    .fo-sidebar__scroll {
        padding: 1.25rem;
    }

    .fo-header__section.fo-header__right {
        gap: .25rem;
    }

    .fo-layer-menu__label {
        display: none;
    }

    .fo-tabbar__inner {
        padding: .25rem .5rem 0;
    }

    .fo-tabs__scroll,
    .fo-tabs__close-all {
        width: 36px;
        height: 36px;
    }

    .tab-button {
        min-width: 100px;
        padding: .375rem .5rem;
        font-size: .8rem;
    }

    .fo-shell__main .fo-content {
        height: calc(100dvh - 110px);
    }
}

@media (max-width: 720px) {
    .fo-sidebar {
        top: 61px;
        height: calc(100dvh - 61px);
    }

    .fo-shell__main .fo-content {
        height: calc(100dvh - 102px);
    }
}

/* =========================================================
   Extra Small
   Fine-tuned adjustments for handheld devices.
   ====================================================== */
@media (max-width: 480px) {
    .fo-header {
        padding: .4rem .4rem;
    }

    .fo-header__left {
        gap: .5rem;
    }

    .fo-hamburger {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .fo-hamburger .material-icons,
    .fo-hamburger .material-icons-outlined {
        font-size: 20px;
    }

    .fo-system__name {
        font-size: .875rem;
    }

    .fo-shell__main .fo-content {
        padding: .5rem;
        height: calc(100dvh - 99px);
    }

    .fo-card {
        padding: .75rem;
        border-radius: 8px;
    }

    .fo-btn {
        padding: .375rem .75rem;
        font-size: .8rem;
        min-height: 32px;
    }

    .fo-input,
    .fo-select {
        padding: .375rem .5rem;
        font-size: .8rem;
    }

    .fo-sidebar {
        top: 58px;
        height: calc(100dvh - 58px);
    }
}



/* =========================================================
   Legacy Layout Utilities Compatibility
   - Purpose: Provide missing layout-related utility classes used by legacy templates
   - Source: Ported from static/css/legacy/base.css (float, alignment, width/height, spacing, display)
   ====================================================== */

/* Float */
.fl {
    float: left !important;
}

.fr {
    float: right !important;
}

.fc {
    clear: both !important;
    margin: 0;
    padding: 0;
    border: none;
}

/* Text and vertical alignment */
.justify {
    text-align: justify !important;
}

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

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

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

.top {
    vertical-align: top !important;
}

.middle {
    vertical-align: middle !important;
}

.bottom {
    vertical-align: bottom !important;
}

/* Width (percent) */
.w1p {
    width: 1% !important;
}

.w5p {
    width: 5% !important;
}

.w10p {
    width: 10% !important;
}

.w15p {
    width: 15% !important;
}

.w20p {
    width: 20% !important;
}

.w25p {
    width: 25% !important;
}

.w30p {
    width: 30% !important;
}

.w33p {
    width: 33% !important;
}

.w35p {
    width: 35% !important;
}

.w40p {
    width: 40% !important;
}

.w45p {
    width: 45% !important;
}

.w49p {
    width: 49% !important;
}

.w50p {
    width: 50% !important;
}

.w55p {
    width: 55% !important;
}

.w60p {
    width: 60% !important;
}

.w65p {
    width: 65% !important;
}

.w70p {
    width: 70% !important;
}

.w75p {
    width: 75% !important;
}

.w80p {
    width: 80% !important;
}

.w85p {
    width: 85% !important;
}

.w90p {
    width: 90% !important;
}

.w95p {
    width: 95% !important;
}

.w98p {
    width: 98% !important;
}

.w99p {
    width: 99% !important;
}

.w100p {
    width: 100% !important;
}

/* Width (px) */
.w30px {
    width: 30px !important;
}

.w40px {
    width: 40px !important;
}

.w50px {
    width: 50px !important;
}

.w65px {
    width: 65px !important;
}

.w70px {
    width: 70px !important;
}

.w80px {
    width: 80px !important;
}

.w90px {
    width: 90px !important;
}

.w100px {
    width: 100px !important;
}

.w110px {
    width: 110px !important;
}

.w120px {
    width: 120px !important;
}

.w130px {
    width: 130px !important;
}

.w140px {
    width: 140px !important;
}

.w150px {
    width: 150px !important;
}

.w200px {
    width: 200px !important;
}

.w250px {
    width: 250px !important;
}

.w300px {
    width: 300px !important;
}

/* Height */
.h100p {
    height: 100% !important;
}

.h30px {
    height: 30px !important;
}

.h50px {
    height: 50px !important;
}

.h60px {
    height: 60px !important;
}

.h70px {
    height: 70px !important;
}

.h80px {
    height: 80px !important;
}

.h90px {
    height: 90px !important;
}

.h100px {
    height: 100px !important;
}

.h150px {
    height: 150px !important;
}

.h200px {
    height: 200px !important;
}

.h250px {
    height: 250px !important;
}

.h300px {
    height: 300px !important;
}

.h400px {
    height: 400px !important;
}

/* Margin */
.mb {
    margin-bottom: 20px !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb25 {
    margin-bottom: 25px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mt {
    margin-top: 50px !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mt2 {
    margin-top: 2px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt7 {
    margin-top: 7px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt50 {
    margin-top: 50px !important;
}

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

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

.ml0 {
    margin-left: 0 !important;
}

.ml2 {
    margin-left: 2px !important;
}

.ml3 {
    margin-left: 3px !important;
}

.ml5 {
    margin-left: 5px !important;
}

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

.ml15 {
    margin-left: 15px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml25 {
    margin-left: 25px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.mr {
    margin-right: 20px !important;
}

.mr0 {
    margin-right: 0 !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr23 {
    margin-right: 23px !important;
}

.mr25 {
    margin-right: 25px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr40 {
    margin-right: 40px !important;
}

/* Padding */
.pd0 {
    padding: 0 !important;
}

.pd10 {
    padding: 10px !important;
}

.pd20 {
    padding: 20px !important;
}

.pd30 {
    padding: 30px !important;
}

.pb {
    padding-bottom: 20px !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb5 {
    padding-bottom: 5px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb25 {
    padding-bottom: 25px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

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

.pt0 {
    padding-top: 0 !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt15 {
    padding-top: 15px !important;
}

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

.pt25 {
    padding-top: 25px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt50 {
    padding-top: 50px !important;
}

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

.pl0 {
    padding-left: 0 !important;
}

.pl2 {
    padding-left: 2px !important;
}

.pl3 {
    padding-left: 3px !important;
}

.pl5 {
    padding-left: 5px !important;
}

.pl10 {
    padding-left: 10px !important;
}

.pl15 {
    padding-left: 15px !important;
}

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

.pl50 {
    padding-left: 50px !important;
}

.pr {
    padding-right: 20px !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pr3 {
    padding-right: 3px !important;
}

.pr5 {
    padding-right: 5px !important;
}

.pr10 {
    padding-right: 10px !important;
}

.pr15 {
    padding-right: 15px !important;
}

.pr16 {
    padding-right: 16px !important;
}

.pr17 {
    padding-right: 17px !important;
}

.pr20 {
    padding-right: 20px !important;
}

.pr25 {
    padding-right: 25px !important;
}

.pr30 {
    padding-right: 30px !important;
}

/* Display & visibility */
.display_none {
    display: none !important;
}

.display_block {
    display: block !important;
}

.display_inlineblock {
    display: inline-block !important;
}

.display_inline {
    display: inline !important;
}

.display_table {
    display: table;
    position: relative;
}

.display_tablecell {
    display: table-cell;
    position: relative;
}

.visible_visible {
    visibility: visible;
}

.visible_hidden {
    visibility: hidden;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    font-size: 0;
    border: 0;
}

/* Utility */
.ovf_x_auto {
    overflow-x: auto;
}

.wrap:after {
    content: "";
    display: block;
    clear: both;
}


/* =========================================================
   Legacy Search Wrap & Table Row Compatibility
   - Purpose: Restore legacy search header and row layout used by legacy templates
   - Scope: Strictly under to avoid leaking into new system
   - Source: Ported minimally from static/css/legacy/board.css
   ====================================================== */

/* table_row: table/table-cell based horizontal layout */
.table_row {
    position: relative;
    display: table;
    width: 100%;
    margin-bottom: 5px;
}

.table_row.top>div {
    vertical-align: top;
}

.table_row>div,
.table_row>.cell {
    position: relative;
    display: table-cell;
    width: auto;
    vertical-align: middle;
}

/* search-wrap: compact search area reset and alignment */
.search-wrap {
    position: relative;
    margin-bottom: 0;
    text-align: center;
    border: 1px solid var(--fo-border, #e5e7eb);
    border-radius: var(--fo-radius, 8px);
    background: var(--fo-surface, #fff);
    padding: 8px 12px;
}

.search-wrap:after {
    clear: both;
    display: block;
    content: "";
}

.search-wrap table.tableStyle {
    width: auto;
    border-top: none;
    background: none;
}

.search-wrap table.tableStyle>tbody>tr,
.search-wrap table.tableStyle>tbody>tr>td,
.search-wrap table.tableStyle>tbody>tr>th {
    border: none;
}

.search-wrap table.tableStyle>tbody>tr>td,
.search-wrap table.tableStyle>tbody>tr>th {
    padding: 2px 10px;
    border-style: none;
    background: none !important;
    height: 27px;
}

.search-wrap table.tableStyle>tbody>tr>th {
    min-width: 70px;
    color: #656565;
    white-space: nowrap;
    padding: 0 !important;
    text-align: right;
    background: none;
}

.search-wrap label {
    color: #656565;
    white-space: nowrap;
    padding: 0;
    text-align: right;
    background: none;
    line-height: 26px;
    margin-right: 2px;
}

.search-wrap .right {
    vertical-align: top;
}


/* =========================================================
   Legacy Panel Component (scoped)
   - Purpose: Provide a rounded card-like container with a distinct header area
   - Notes: Designed to wrap legacy grids/forms without breaking existing markup
   ====================================================== */
.panel {
    border: 1px solid var(--fo-border, #e5e7eb);
    border-radius: var(--fo-radius, 6px);
    background: var(--fo-surface, #fff);
}

.panel+.panel {
    margin-top: 10px;
}

.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-surfaceEmphasis, var(--fo-surface, #fff));
    border-bottom: 1px solid var(--fo-border, #e5e7eb);
    min-height: 56px;
    border-radius: var(--fo-radius, 6px) var(--fo-radius, 6px) 0 0;
}

.panel__title-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    /* space between h3 and dl.tit_count */
}

.panel__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.modal-footer .panel__actions {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
    /* Add vertical padding */
}

/* Normalize legacy h3 inside header and keep its visual weight */
.panel__header h3 {
    margin: 0;
}

/* Let legacy counter sit well next to the title */
.panel__header .tit_count {
    margin: 0;
}

.panel__body {
    padding: 12px 12px;
}

.panel__footer {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px solid var(--fo-border, #e5e7eb);
    height: 56px;
}

.panel__footer .panel__actions {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
    /* Add vertical padding */
}

/* Responsive tweak: stack header content on very narrow widths */
@media (max-width: 640px) {
    .panel__header {
        flex-wrap: wrap;
    }
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .panel__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-height: 0;
        height: auto;
        padding: 10px;
    }

    .panel__title-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .panel__title-group h2,
    .panel__title-group h3 {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.35 !important;
    }

    .panel__title-group .tit_count {
        flex-wrap: wrap;
    }

    .panel__actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    .panel__actions>.btn,
    .panel__actions>button,
    .panel__actions>.fo-select,
    .panel__actions>.fo-form__input,
    .panel__actions>input[type="number"] {
        max-width: 100%;
    }

    .panel__body {
        padding: 10px;
    }

    .panel__footer {
        height: auto;
        min-height: 56px;
        align-items: stretch;
        padding: 10px;
    }

    .panel__footer .panel__actions {
        justify-content: flex-start;
        padding: 0;
    }

    .panel__title-group .inline-search {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    .panel__title-group .inline-search .fo-form__input {
        width: 100% !important;
        min-width: 0;
    }

    .fo-search-form {
        flex-wrap: wrap;
    }

    .fo-search-form .right {
        text-align: left !important;
    }

    .fo-search-form .w20p,
    .fo-search-form .w80p {
        width: 100% !important;
    }

    .fo-search-form>[class^="w"],
    .fo-search-form>[class*=" w"] {
        width: 100% !important;
    }

    .fo-search-form .fo-form__input,
    .fo-search-form .fo-select {
        max-width: 100%;
    }

    .fo-search-form .input-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .fo-search-form .input-group .fo-form__input {
        flex: 1 1 100%;
        min-width: 0;
        width: 100% !important;
    }

    .panel__actions .perPage {
        width: 100% !important;
    }

    .search-wrap table.tableStyle>tbody>tr>td {
        flex-wrap: wrap;
    }

    .fo-flex-content {
        flex-direction: column;
    }

    .content.wrap>.fl,
    .content.wrap>.fr {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .content.wrap>.fl+.fr,
    .content.wrap>.fr+.fl {
        margin-top: 10px;
    }

    .fo-flex-content.table_row>[class^="w"],
    .fo-flex-content.table_row>[class*=" w"] {
        width: 100% !important;
    }

    .fo-flex-content.table_row>.dept-user-transfer {
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 2px 0;
    }

    .fo-flex-content.table_row>.dept-user-transfer p {
        display: none;
    }

    .fo-flex-content.table_row>.dept-user-transfer .btn {
        width: 38px;
        height: 38px;
    }

    .content.top.wrap .panel[style*="height"] {
        height: auto !important;
    }

    .frameon-modal .frameon-modal-dialog,
    .frameon-modal .modal-dialog {
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .frameon-modal .frameon-modal-content,
    .frameon-modal .modal-content {
        max-width: calc(100vw - 24px) !important;
    }
}

/* Custom styles for panel__title-group */
.panel__title-group h2,
.panel__title-group h3 {
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.panel__title-group .tit_count {
    font-size: var(--fz-small);
    display: inline-flex;
    /* flex 컨테이너로 변경 */
    align-items: baseline;
    /* 텍스트 베이스라인 정렬 */
    gap: var(--spacing-xxs);
    /* dt와 dd 사이 간격 추가 */
}

.panel__title-group .tit_count dt,
.panel__title-group .tit_count dd {
    font-size: var(--fz-small);
    margin: 0;
    /* 기본 마진 제거 */
    padding: 0;
    /* 기본 패딩 제거 */
}

.panel__title-group .tit_count dd {
    color: var(--accent);
}

/* =========================================================
   Custom fo-select Dropdown Style
   ====================================================== */

/* 1. 화살표 버튼 오른쪽 여백 확보 */
.fo-select {
    padding-right: 2.5rem;
    /* 기존보다 패딩을 늘려 공간 확보 */
}

/* 2. 드롭다운 메뉴 패널 스타일링 */
/*
.tui-select-box-dropdown {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-accent) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
*/
/* 둥근 모서리가 내부 아이템에 적용되도록 */
/*
    margin-top: 4px !important;
}
*/

/* 3. 옵션 아이템 간격 및 스타일 조정 */
/*
.tui-select-box-item {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
    font-size: var(--fz-small) !important;
}
*/

/* 선택된 아이템 스타일 (선택사항) */
/*
.tui-select-box-item.tui-is-selected {
    background-color: var(--color-neutral-100) !important;
    color: var(--color-primaryDark) !important;
}
*/

/*
.select {
    position: relative;
    width: 292px;
}

.select::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 10px;
    width: 24px;
    height: 24px;
    background: url("./images/select_arrow.png") no-repeat left top;
    background-size: 100% auto
}

.select.selected>button {
    color: #000
}

.select.on ul {
    display: block
}

.select.on>button {
    color: #000;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select.on::after {
    background-image: url("./images/select_arrow_on.png")
}

.select>button {
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.36px
}

.select>button:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accentMuted);
}

.select>button .num {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 21px;
    background-color: #c70000;
    color: #fff;
    text-align: center;
    font-size: 10px;
    font-family: "Poppins", sans-serif;
    border-radius: 20px;
    padding-left: 1px;
    margin-left: 5px;
    box-sizing: border-box
}

.select ul {
    display: none;
    position: absolute;
    top: 39px;
    left: 0;
    z-index: 999;
    width: 100%;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accentMuted);
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
}

.select ul li {
    background-color: #fff
}

.select ul li:before,
.select ul li:after {
    content: "";
    display: table
}

.select ul li:after {
    clear: both
}

.select ul li .num {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 21px;
    background-color: #c70000;
    color: #fff;
    text-align: center;
    font-size: 10px;
    font-family: "Poppins", sans-serif;
    border-radius: 20px;
    padding-left: 1px;
    box-sizing: border-box
}

.select ul li:hover button {
    color: #0e67c1
}

.select ul li:hover button:disabled {
    color: #0e67c1
}

.select ul li button {
    display: block;
    padding: 0 16px;
    width: 100%;
    font-size: .875rem;
    text-align: left;
    border: none;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0);
    letter-spacing: -0.36px
}

.select ul li button:disabled {
    color: #ccc
}

.select ul li button:disabled .left,
.select ul li button:disabled .right {
    color: #ccc
}
*/

/* =========================================================
   Legacy Search Wrap Customization
   - Purpose: Align select and input on a single line.
   ====================================================== */
.search-wrap table.tableStyle>tbody>tr>td {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 요소 사이의 간격 */
}

.search-wrap table.tableStyle>tbody>tr>td select,
.search-wrap table.tableStyle>tbody>tr>td input {
    flex-shrink: 0;
    /* 요소의 너비가 줄어들지 않도록 함 */
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.fo-flex-content {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.fo-flex-content>.panel {
    flex: 1 1 auto;
    width: 100%;
}

/* =========================================================
   Form Input Group
   - Purpose: Horizontally align input fields with appended or prepended elements.
   - Usage: Wrap an input and a button/addon in .fo-form__input-group.
   ====================================================== */

.fo-form__input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap on smaller screens if needed */
    align-items: stretch;
    width: 100%;
}

.fo-form__input-group>.fo-form__input,
.fo-form__input-group>.fo-custom-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    /* Flexbox bug fix for IE11 */
    min-width: 0;
    /* Prevent overflow */
}

/* Appended element styles */
.fo-form__input-group-append {
    display: flex;
    margin-left: -1px;
    /* Overlap borders */
}

.fo-form__input-group-append .btn {
    position: relative;
    z-index: 2;
}

/* Adjust border-radius for a seamless look */
.fo-form__input-group>.fo-form__input:not(:last-child),
.fo-form__input-group>.fo-custom-select:not(:last-child)>.custom-select-trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fo-form__input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fo-form__input-group-append .btn:hover {
    transform: none;
}

.fo-form__input-group-append .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fo-form__label u {
    color: #ed6464;
    margin-left: 5px;
    font-weight: bold;
}

.tableStyle th u {
    color: #ed6464;
    margin-left: 5px;
    font-weight: bold;
}

.date-button {
    display: flex;
    height: 32px;
}

.date-button .btn-date-type {
    cursor: pointer;
    min-height: calc(1.5em + 0.56rem + 2px);
    height: 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: .3rem .75rem;
    color: var(--color-text);
    font-size: .875rem;
    /*line-height: 1.5;*/
    text-decoration: none;
    text-align: center;
}

/* 기간 조건선택 버튼 */
.date-button a+a {
    border-left: none;
}

.date-button .btn-date-type:first-child {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.date-button .btn-date-type:last-child {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.date-button .btn-date-type.active {
    border: 1px solid;
    border-color: var(--color-accent);
    font-weight: 700;
}

u {
    text-decoration: none;
}

.tui-calendar-pop-container {
    margin-left: -1px;
    margin-top: 3px;
    position: relative;
    z-index: 999;
}

.table_viewCont,
.table_writeCont {
    line-height: 1.7em;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    font-size: 14px;
    background: #fff;
    font-family: "Poppins", sans-serif;
}

.table_viewCont {
    flex: 1 1 auto;
    min-height: 150px;
    height: 450px;
    padding: 15px;
    overflow-y: auto;
}

.table_tit+.table_viewCont {
    border-top: 0;
}

/* =========================================================
   Form Styles & Flexible Layout
   - Restored/Added to fix missing classes
   ====================================================== */
.fo-search-form {
    display: flex;
    gap: 10px;
    padding: 0;
}

.fo-detail-form {
    display: grid;
    gap: 10px;
    padding: 0;
}

.fo-form__group {
    display: grid;
    gap: 8px;
}

.fo-form__label {
    font-weight: 600;
    font-size: 0.9rem;
}

.fo-form__input {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .875rem;
    transition: all 0.2s ease;
}

.fo-form__textarea {
    font-family: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.fo-form__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accentMuted);
}

.fo-form__row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--fo-color-text-muted, #556068);
    flex-wrap: wrap;
}

.fo-form__row--flexible {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
}

.col-flex {
    flex: 1 1 0;
    min-width: 0;
}

.col-flex-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-flex-1 {
    flex: 1 1 0;
    min-width: 0;
}

.col-flex-2 {
    flex: 2 1 0;
    min-width: 0;
}

.col-flex-3 {
    flex: 3 1 0;
    min-width: 0;
}

.col-flex-4 {
    flex: 4 1 0;
    min-width: 0;
}

.col-flex-5 {
    flex: 5 1 0;
    min-width: 0;
}

/* =========================================================
   CSS Grid System (12 Columns)
   - Purpose: Table-like vertical alignment with responsive behavior
   ====================================================== */
.fo-form__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: center;
}

/* Column Spans */
.fo-col-1 {
    grid-column: span 1;
    min-width: 0;
}

.fo-col-2 {
    grid-column: span 2;
    min-width: 0;
}

.fo-col-3 {
    grid-column: span 3;
    min-width: 0;
}

.fo-col-4 {
    grid-column: span 4;
    min-width: 0;
}

.fo-col-5 {
    grid-column: span 5;
    min-width: 0;
}

.fo-col-6 {
    grid-column: span 6;
    min-width: 0;
}

.fo-col-7 {
    grid-column: span 7;
    min-width: 0;
}

.fo-col-8 {
    grid-column: span 8;
    min-width: 0;
}

.fo-col-9 {
    grid-column: span 9;
    min-width: 0;
}

.fo-col-10 {
    grid-column: span 10;
    min-width: 0;
}

.fo-col-11 {
    grid-column: span 11;
    min-width: 0;
}

.fo-col-12 {
    grid-column: span 12;
    min-width: 0;
}

.fo-grid-container {
    width: 100%;
    min-width: 0;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .fo-form__grid {
        grid-template-columns: 1fr;
    }

    .fo-col-1,
    .fo-col-2,
    .fo-col-3,
    .fo-col-4,
    .fo-col-5,
    .fo-col-6,
    .fo-col-7,
    .fo-col-8,
    .fo-col-9,
    .fo-col-10,
    .fo-col-11,
    .fo-col-12 {
        grid-column: span 1;
    }
}

.search-form-panel {
    overflow: visible !important;
}

/* =========================================================
   코드/에디터 영역
   - 코드 블록 및 모노스페이스 보조
   ====================================================== */
.code-view-area {
    font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', 'monospace' !important;
    padding: 9px;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid #ccc;
}

/* =========================================================
   JSON 뷰어
   - 컨테이너와 문법 색상
   ====================================================== */
.json-container {
    font-family: D2Coding, 'D2 coding', consolas, menlo, monaco, ubuntu mono, source-code-pro, monospace;
    white-space: pre-wrap;
    /*background-color: #f6f8fa;*/
    padding: 10px;
    overflow: auto;
    color: #000;
    word-break: break-all;
}

/* JSON Formatter */
.json-key {
    color: #881295;
    font-weight: bold;
}

.json-string {
    color: #087e19;
}

.json-number {
    color: #0037ff;
}

.json-boolean {
    color: #d19a66;
    font-style: italic;
}

.json-null {
    color: #0235b4;
}

.json-bracket {
    /*color: #c8c8c8;*/
    color: #000;
}

.json-colon {
    /*color: #c8c8c8;*/
    color: #000;
}

.fo-token-card--primary .fo-token-card__swatch {
    background: var(--color-primary);
    color: var(--color-onPrimary);
}

.fo-token-card--secondary .fo-token-card__swatch {
    background: var(--color-secondary);
    color: var(--color-onPrimary);
}

.text-cir {
    position: relative;
    display: inline-block;
    line-height: 1;
    padding-left: 12px;
}

.text-cir:before {
    content: "";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    top: 3px;
    left: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    /*background-color: #8c317e;*/
    background-color: var(--color-secondary);
}

.text-cir:after {
    content: "";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    top: 12px;
    left: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    /*background-color: #6773d2;*/
    background-color: var(--color-info);
}

/* Christmas Theme Pattern */
body.theme-christmas .fo-header {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2740%27%20height%3D%2740%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20transform%3D%27translate%2820%2020%29%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%270.35%27%20fill%3D%27none%27%3E%3Cpolygon%20points%3D%270%2C-4%203.5%2C-2%203.5%2C2%200%2C4%20-3.5%2C2%20-3.5%2C-2%27/%3E%3Cg%3E%3Cline%20x1%3D%270%27%20y1%3D%27-4%27%20x2%3D%270%27%20y2%3D%27-16%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%274%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%27-4%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%274.5%27%20y2%3D%27-15%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%27-4.5%27%20y2%3D%27-15%27/%3E%3C/g%3E%3Cg%20transform%3D%27rotate%2860%29%27%3E%3Cline%20x1%3D%270%27%20y1%3D%27-4%27%20x2%3D%270%27%20y2%3D%27-16%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%274%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%27-4%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%274.5%27%20y2%3D%27-15%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%27-4.5%27%20y2%3D%27-15%27/%3E%3C/g%3E%3Cg%20transform%3D%27rotate%28120%29%27%3E%3Cline%20x1%3D%270%27%20y1%3D%27-4%27%20x2%3D%270%27%20y2%3D%27-16%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%274%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%27-4%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%274.5%27%20y2%3D%27-15%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%27-4.5%27%20y2%3D%27-15%27/%3E%3C/g%3E%3Cg%20transform%3D%27rotate%28180%29%27%3E%3Cline%20x1%3D%270%27%20y1%3D%27-4%27%20x2%3D%270%27%20y2%3D%27-16%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%274%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%27-4%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%274.5%27%20y2%3D%27-15%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%27-4.5%27%20y2%3D%27-15%27/%3E%3C/g%3E%3Cg%20transform%3D%27rotate%28240%29%27%3E%3Cline%20x1%3D%270%27%20y1%3D%27-4%27%20x2%3D%270%27%20y2%3D%27-16%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%274%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%27-4%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%274.5%27%20y2%3D%27-15%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%27-4.5%27%20y2%3D%27-15%27/%3E%3C/g%3E%3Cg%20transform%3D%27rotate%28300%29%27%3E%3Cline%20x1%3D%270%27%20y1%3D%27-4%27%20x2%3D%270%27%20y2%3D%27-16%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%274%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-8%27%20x2%3D%27-4%27%20y2%3D%27-11%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%274.5%27%20y2%3D%27-15%27/%3E%3Cline%20x1%3D%270%27%20y1%3D%27-12%27%20x2%3D%27-4.5%27%20y2%3D%27-15%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(to bottom, var(--sidebar-bg-top), var(--sidebar-bg-bottom));

    background-repeat: round;
    background-size: 200px 100px, auto;
    /* 눈꽃 크기/간격 조절 */
}

/* 공통 */
.fo-link-text {
    color: dodgerblue;
    cursor: pointer;
    display: inline;
    font-family: 'D2Coding', 'Nanum Gothic Coding', 'Noto Sans Mono', 'Noto Sans KR', monospace;
    text-decoration: underline;
}

.isScript {
    color: dodgerblue !important;
    text-decoration: underline;
    cursor: pointer;
}

.fixed-font {
    font-size: 13px;
    font-family: 'D2Coding', 'Nanum Gothic Coding', 'Noto Sans Mono', 'Noto Sans KR', monospace;
}

/* =========================================================
   Modal
   ====================================================== */
.modal-open {
    overflow: hidden !important;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow: hidden;
    outline: 0;
    z-index: 1050;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: none;
    margin: 0.5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal.show .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-dialog-centered {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (0.5rem * 2));
}

.modal-content {
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 800px;
    max-width: 98vw;
    max-height: 95vh;
    margin: 0 auto;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    border: 1px solid #4a4a49;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0.3;
}

.modal_xs {
    width: 350px;
}

.modal_sm {
    width: 400px;
}

.modal_md {
    width: 600px;
}

.modal_lg {
    width: 800px;
}

.modal_xl {
    width: 1000px;
}

.modal_max {
    width: 98vw;
}

/* =========================================================
   Quasar Style Input & Select Box
   - Floating labels (Inside Top)
   - Clear button
   - Placeholder visibility control
   ====================================================== */

.quasar-input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Remove grid gap effect since label is absolute */
.quasar-input-group.fo-form__group {
    gap: 0;
    display: flex;
    /* Override grid */
}

.quasar-input-group .fo-form__label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--color-accentLessMuted, #666);
    z-index: 10;
    font-size: .825rem;
    padding: 0 2px;
    margin: 0;
    line-height: 1;
}

.quasar-input-group.quasar-input-group--multiselect .clear-btn {
    display: none !important;
}

.quasar-input-group.quasar-input-group--multiselect .fo-form__label {
    top: 6px;
    /* Position inside top */
    left: 12px;
    transform: none;
    font-size: 0.60rem;
    font-weight: bolder;
    z-index: 11;
}

/* Focused or Has Value State */
.quasar-input-group.focused .fo-form__label,
.quasar-input-group.has-value .fo-form__label {
    top: 6px;
    /* Position inside top */
    left: 12px;
    transform: none;
    /* Remove translateY */
    font-size: 0.60rem;
    /* Smaller font */
    color: var(--color-accent, #007bff);
    font-weight: bold;
    z-index: 11;
    /* Ensure label is above the input border */
}

.quasar-input-group.has-value:not(.focused) .fo-form__label {
    color: var(--color-primaryBright, #666);
    font-weight: bolder;
}

/* Input Styling */
.quasar-input-group .fo-form__input,
.quasar-input-group input[type="password"],
.quasar-input-group .tagify,
.quasar-input-group .fo-select,
.quasar-input-group .tui-datepicker-input {
    height: 40px;
    /* Increase height to fit label and text */
    padding-top: 15px;
    /* Push text down */
    padding-bottom: 2px;
    padding-right: 30px;
}


.quasar-input-group .tagify {
    min-height: 55px;
    width: 100%;
    height: auto;
}

.quasar-input-group .fo-select[multiple] {
    height: auto;
    min-height: 72px;
    padding-top: 18px;
    padding-bottom: 10px;
    padding-right: 14px;
    line-height: 1.4;
    background-image: none;
    overflow-y: auto;
}

/* tui-datepicker 내부 input 스타일 조정 */
.quasar-input-group .tui-datepicker-input input {
    height: 100%;
    padding-top: 15px;
    padding-bottom: 2px;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
}

.quasar-input-group textarea {
    padding-top: 18px !important;
}

.quasar-input-group .tui-datepicker-input {
    border: none;
    /* wrapper의 border 제거 */
    padding: 0;
}

.quasar-input-group.focused .tui-datepicker-input input,
.quasar-input-group.focused .tagify,
/* tagify 포커스 스타일 추가 */
.quasar-input-group.focused input[type="password"] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accentMuted);
}


/* Placeholder - only show when focused */
.quasar-input-group .fo-form__input::placeholder,
.quasar-input-group input[type="password"]::placeholder,
.quasar-input-group .tui-datepicker-input input::placeholder,
.quasar-input-group .tagify .tagify__input::placeholder {
    /* tagify placeholder 추가 */
    opacity: 0;
    transition: opacity 0.2s;
}

.quasar-input-group.focused .fo-form__input::placeholder,
.quasar-input-group.focused input[type="password"]::placeholder,
.quasar-input-group.focused .tui-datepicker-input input::placeholder,
.quasar-input-group.focused .tagify .tagify__input::placeholder {
    /* tagify placeholder 추가 */
    opacity: 1;
}

/* Clear Button */
.quasar-input-group .clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    display: none;
    z-index: 12;
    /* 아이콘보다 위에 오도록 */
    font-size: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
    /* Fine-tune vertical alignment */
}

.quasar-input-group .clear-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #666;
}

.quasar-input-group.has-value .clear-btn {
    display: flex;
}

/* Adjustments for Select Box */
.quasar-input-group .fo-select {
    appearance: none;
    /* Remove default arrow to avoid clash or custom style it */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 52px;
    /* reserve room for swapped arrow/clear */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    /* Arrow sits at the far right */
    background-size: 16px;
}

.quasar-input-group .fo-select~.clear-btn {
    right: 30px;
    /* move clear button left of arrow */
}

.quasar-input-group .fo-select[multiple]~.clear-btn {
    right: 10px;
}

/* tui-datepicker 아이콘 위치 조정 */
.quasar-input-group .tui-ico-date {
    right: 30px;
    /* clear 버튼 공간 확보 */
    z-index: 11;
}

/* datepicker range일 경우 clear 버튼 위치 조정 */
.quasar-input-group .fo-tui-datepicker-range-div~.clear-btn {
    right: 10px;
}


/* Disabled/Readonly State */
.quasar-input-group.is-disabled .fo-form__label {
    top: 6px;
    left: 12px;
    transform: none;
    font-size: 0.65rem;
    color: #666;
    font-weight: bold;
}

.quasar-input-group.is-disabled .clear-btn {
    display: none;
}

.quasar-input-group.is-disabled .fo-form__input,
.quasar-input-group.is-disabled input[type="password"],
.quasar-input-group.is-disabled .fo-select,
.quasar-input-group.is-disabled .tui-datepicker-input input {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* =========================================================
   Quasar Style Radio Group
   ====================================================== */

.quasar-radio-group {
    position: relative;
    padding: 6px 12px 0 12px;
    /* 상단에 레이블을 위한 공간 확보 */
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    height: 40px;
    display: flex;
    align-items: center;
    /* 라디오 버튼들을 수직 중앙에 정렬 */
}

.quasar-radio-group .fo-form__label {
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 0.60rem;
    color: var(--color-primaryBright, #666);
    font-weight: bolder;
    background-color: var(--color-surface);
    /* 배경색과 동일하게 하여 경계선과 겹칠 때 가려지도록 */
    padding: 0 4px;
    margin: 0;
    line-height: 1;
    z-index: 1;
}

.quasar-radio-group>div {
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 100%;
}

.quasar-radio-group .form-fo-page-wrapper {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: .785rem;
}

.quasar-radio-group input[type="radio"] {
    margin-right: 4px;
}

.quasar-radio-group input[type="radio"]+label {
    font-size: .785rem;
}


/* =========================================================
   Quasar Style Checkbox Group
   ====================================================== */

.quasar-checkbox-group {
    position: relative;
    padding: 12px 12px 0 12px;
    /* Space for label at the top */
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    height: 40px;
    display: flex;
    align-items: center;
    /* Vertically center checkboxes */
}

.quasar-checkbox-group .fo-form__label {
    position: absolute;
    top: 5px;
    left: 12px;
    font-size: 0.60rem;
    color: var(--color-primaryBright, #666);
    font-weight: bolder;
    background-color: var(--color-surface);
    /* Match background to hide border when overlapping */
    padding: 0 4px;
    margin: 0;
    line-height: 1;
    z-index: 1;
}

.quasar-checkbox-group .fo-form__row {
    /* Target the div containing the checkboxes */
    display: flex;
    gap: 1rem;
    /* Space between checkboxes */
    align-items: center;
    height: 100%;
}

.quasar-checkbox-group .form-check {
    display: flex;
    align-items: center;
    margin: 0;
    /* Remove default margin */
    font-size: .875rem;
}

.quasar-checkbox-group input[type="checkbox"] {
    margin-right: 4px;
    /* Space between checkbox and its label */
}

/* Disabled state for checkbox group */
.quasar-checkbox-group.is-disabled .fo-form__label {
    color: #999;
    /* Lighter color for disabled label */
}

.quasar-checkbox-group.is-disabled .form-check-input {
    cursor: not-allowed;
    background-color: #e9ecef;
    /* Bootstrap default disabled background */
}

/* =========================================================
   Quasar Input Wrapper (for Input Groups)
   ====================================================== */
.fo-form__input-group .fo-quasar-input-wrapper {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    display: flex;
    /* To contain input properly */
}

.fo-form__input-group .fo-quasar-input-wrapper>.fo-form__input,
.fo-form__input-group .fo-quasar-input-wrapper>.fo-custom-select {
    width: 100%;
}

/* Flexbox bug fix for IE11 - wrapper replaces input as flex child */
.fo-form__input-group>.fo-quasar-input-wrapper {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Border radius adjustments when inside wrapper */
.fo-form__input-group>.fo-quasar-input-wrapper:not(:last-child)>.fo-form__input,
.fo-form__input-group>.fo-quasar-input-wrapper:not(:last-child)>.fo-custom-select>.custom-select-trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fo-form__input-group>.fo-quasar-input-wrapper+.fo-form__input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Clear btn position inside wrapper */
.fo-quasar-input-wrapper .clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    display: none;
    z-index: 12;
    font-size: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
}

.fo-quasar-input-wrapper .clear-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #666;
}

/* When the GROUP has value, show clear btn inside wrapper */
.quasar-input-group.has-value .fo-quasar-input-wrapper .clear-btn {
    display: flex;
}

/* Global Accent Color for Inputs */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
}

/* Table utilities */
/* =========================================================
   Data Tables
   Table scaffolding reused by admin listings and grids.
   ====================================================== */
.fo-form-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.fo-form-table th,
.fo-form-table td {
    padding: .75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.fo-form-table th {
    background: var(--color-surfaceEmphasis);
    font-weight: 600;
    color: var(--color-text);
}

.fo-form-table tbody tr:hover {
    background: var(--color-accentMuted);
}

.fo-form-table tbody tr:last-child td {
    border-bottom: none;
}

.ui-datepicker {
    z-index: 1000 !important;
}