/*
 * Hand-crafted utility classes for filament-pages.
 *
 * - No @layer declarations (unlayered CSS beats all layered CSS).
 * - References Filament's CSS custom properties so colours follow the panel theme.
 * - Normal class selectors give proper specificity (no :where() wrapper).
 */

/* ── Layout ── */

.flex            { display: flex; }
.inline-flex     { display: inline-flex; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }

/* ── Spacing ── */

.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.m-2    { margin: 0.5rem; }
.mb-4   { margin-bottom: 1rem; }
.mt-2   { margin-top: 0.5rem; }
.ml-2   { margin-left: 0.5rem; }
.p-1    { padding: 0.25rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pr-2   { padding-right: 0.5rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }

/* ── Sizing ── */

.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }

/* ── Typography ── */

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.font-medium { font-weight: 500; }
.text-center { text-align: center; }

/* ── Colors (reference Filament custom properties) ── */

.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-900 { color: var(--color-gray-900); }

.bg-white { background-color: #fff; }

.border           { border: 1px solid; }
.border-r         { border-right: 1px solid; }
.border-gray-200  { border-color: var(--color-gray-200); }

/* ── Border radius & shadow ── */

.rounded-full { border-radius: 9999px; }
.rounded-lg   { border-radius: 0.5rem; }
.shadow-sm    { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* ── Cursor ── */

.cursor-grab { cursor: grab; }

/* ── Hover states ── */

.hover\:text-primary-500:hover { color: var(--primary-500); }
.hover\:text-danger-500:hover  { color: var(--danger-500); }

/* ── Markdown TOC layouts ── */

.fp-toc-wrapper       { display: flex; gap: 2rem; }
.fp-toc-sidebar       { position: sticky; top: 1rem; align-self: flex-start; width: 16rem; flex-shrink: 0; max-height: calc(100vh - 2rem); overflow-y: auto; }
.fp-toc-content       { min-width: 0; flex: 1 1 0%; }
.fp-toc-top           { margin-bottom: 1.5rem; }

/* ── Collapse toggle ── */

.collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    margin-left: 0.25rem;
    border: none;
    background: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--color-gray-400);
}

.collapse-toggle:hover {
    background-color: var(--color-gray-100);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 {
    transition-duration: 200ms;
}

/* ── Split layout (tree + form) ── */

.fp-split-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    min-height: 0;
}

.fp-tree-panel {
    flex-shrink: 0;
    width: 33.333%;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 7rem);
    overflow: hidden;
    padding-right: 0.5rem;
    transition: width 200ms ease;
}

.fp-tree-panel > div:last-child {
    overflow-y: auto;
    max-height: calc(100vh - 10rem);
}

.fp-tree-panel-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
}

.fp-tree-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    background: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--color-gray-400);
}

.fp-tree-toggle:hover {
    background-color: var(--color-gray-100);
}

.fp-tree-panel-collapsed {
    width: 2.5rem;
}

.fp-form-panel {
    flex: 1 1 0%;
    min-width: 0;
}

/* ── Tree item row (replaces inline styles) ── */

.page-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.5rem;
    background-color: #fff;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding-right: 0.5rem;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.page-item-active {
    border-color: var(--primary-500);
    background-color: var(--primary-50, rgb(239 246 255));
}

/* ── Form panel components ── */

.fp-form-wrapper {
    background-color: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
}

.fp-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.fp-form-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fp-form-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.fp-form-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.fp-form-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50, rgb(249 250 251));
}

/* ── Empty state ── */

.fp-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24rem;
    background-color: #fff;
    border: 1px dashed var(--color-gray-300);
    border-radius: 0.75rem;
}

.fp-empty-state-content {
    text-align: center;
    padding: 2rem;
}

.fp-empty-state-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-gray-400);
    margin: 0 auto 1rem;
}

.fp-empty-state-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-900);
    margin: 0 0 0.25rem;
}

.fp-empty-state-subtext {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* ── Dark mode ── */

.dark\:bg-gray-800:is(.dark *)     { background-color: var(--color-gray-800); }
.dark\:border-gray-700:is(.dark *)  { border-color: var(--color-gray-700); }
.dark\:text-gray-400:is(.dark *)    { color: var(--color-gray-400); }
.dark\:text-white:is(.dark *)       { color: #fff; }

.dark .collapse-toggle:hover        { background-color: var(--color-gray-700); }
.dark .fp-tree-toggle:hover         { background-color: var(--color-gray-700); }

.dark .page-item-row {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

.dark .page-item-active {
    border-color: var(--primary-500);
    background-color: var(--primary-950, rgb(23 37 84));
}

.dark .fp-form-wrapper {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

.dark .fp-form-header {
    border-bottom-color: var(--color-gray-700);
}

.dark .fp-form-title {
    color: #fff;
}

.dark .fp-form-footer {
    border-top-color: var(--color-gray-700);
    background-color: var(--color-gray-900);
}

.dark .fp-empty-state {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-600);
}

.dark .fp-empty-state-text {
    color: #fff;
}

.dark .fp-empty-state-icon {
    color: var(--color-gray-500);
}

.dark .fp-empty-state-subtext {
    color: var(--color-gray-400);
}

/* ── Responsive: stack on small screens ── */

@media (max-width: 1023px) {
    .fp-split-layout {
        flex-direction: column;
    }

    .fp-tree-panel {
        width: 100%;
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin-bottom: 1rem;
    }
}