/**
 * Dermabiu hybrid theme for Filament panels (admin + LMS).
 * Aligns sidebar/topbar/chrome with instructor Blade layout + DESIGN.md:
 * Plum #441044, Terracotta #E28D77, Alabaster #FAF9F6 — organic borders & soft shadows.
 */

/* font-heading utility for LMS Blade views (matches app.css) */
.font-heading {
    font-family: 'Playfair Display', ui-serif, Georgia, serif !important;
}

:root {
    --derm-plum: #441044;
    --derm-plum-rgb: 68, 16, 68;
    --derm-terracotta: #e28d77;
    --derm-alabaster: #faf9f6;
    --derm-border: rgba(68, 16, 68, 0.08);
    --derm-border-card: rgba(68, 16, 68, 0.1);
    --derm-shadow-organic: 0 4px 24px -4px rgba(68, 16, 68, 0.06),
        0 2px 8px -2px rgba(226, 141, 119, 0.04);
}

/* Page shell — alabaster surface (overrides Filament bg-gray-50 on body.fi-body) */
body.fi-body {
    background-color: var(--derm-alabaster) !important;
}

/* Organic grain — matches app.css grain-overlay--subtle. Skip on auth pages (login/register) to avoid odd sparse look */
body.fi-body:not(:has(.fi-simple-page))::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.018;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.fi-body .fi-layout,
body.fi-body .fi-main-ctn {
    position: relative;
    z-index: 1;
}

/* Sidebar — warm column like instructor aside */
.fi-sidebar {
    background-color: #fff !important;
}

@media (min-width: 1024px) {
    .fi-sidebar {
        background-color: var(--derm-alabaster) !important;
        border-inline-end: 1px solid var(--derm-border) !important;
        box-shadow: none !important;
    }
}

.fi-sidebar-header {
    background-color: var(--derm-alabaster) !important;
    border-color: var(--derm-border) !important;
    box-shadow: none !important;
}

/* Nav items — match /documentos sidebar: icon circles (h-10 w-10 rounded-2xl), active = bg-plum text-white */
.fi-sidebar-item-button {
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
    transition:
        background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background-color: rgba(var(--derm-plum-rgb), 0.05) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgba(var(--derm-plum-rgb), 0.1) !important;
}

/* Inactive item text — warm gray */
.fi-sidebar-item:not(.fi-active):not(.fi-sidebar-item-active) .fi-sidebar-item-label {
    color: rgb(55, 65, 81) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--derm-plum) !important;
    font-weight: 600 !important;
}

/* Icon circles — smaller for breathing room (h-9 w-9, rounded-xl) */
.fi-sidebar-item .fi-sidebar-item-icon {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    border-radius: 0.75rem !important;
    background: rgba(var(--derm-plum-rgb), 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: rgb(55, 65, 81) !important;
    transition:
        background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    padding: 0.40rem;
}

.fi-sidebar-item .fi-sidebar-item-icon svg {
    width: 1rem !important;
    height: 1rem !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon {
    background: var(--derm-plum) !important;
    color: #fff !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:focus-visible .fi-sidebar-item-icon {
    background: var(--derm-plum) !important;
    color: #fff !important;
}

.fi-sidebar-group-label {
    color: rgba(var(--derm-plum-rgb), 0.55) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.fi-sidebar-group-button:hover {
    background-color: rgba(var(--derm-plum-rgb), 0.03) !important;
    border-radius: 0.5rem;
}

/* Topbar */
.fi-topbar nav {
    background-color: #fff !important;
    border-bottom: 1px solid var(--derm-border) !important;
    box-shadow: var(--derm-shadow-organic) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.fi-topbar-item-button:hover,
.fi-topbar-item-button:focus-visible {
    background-color: rgba(var(--derm-plum-rgb), 0.05) !important;
}

/* Topbar: inactive item icons + labels (match sidebar plum, not cold gray) */
.fi-topbar-item:not(.fi-active) .fi-topbar-item-icon,
.fi-topbar-item:not(.fi-active) .fi-topbar-group-toggle-icon {
    color: rgba(var(--derm-plum-rgb), 0.45) !important;
}

.fi-topbar-item:not(.fi-active) .fi-topbar-item-label {
    color: rgb(55, 65, 81) !important;
}

.fi-topbar-item.fi-active .fi-topbar-item-icon,
.fi-topbar-item.fi-active .fi-topbar-group-toggle-icon {
    color: var(--derm-plum) !important;
}

/* Gray icon buttons — menu, collapse, search, notifications */
.fi-icon-btn.fi-color-gray .fi-icon-btn-icon,
.fi-icon-btn.fi-color-gray svg {
    color: rgba(var(--derm-plum-rgb), 0.42) !important;
}

.fi-icon-btn.fi-color-gray:hover .fi-icon-btn-icon,
.fi-icon-btn.fi-color-gray:hover svg,
.fi-icon-btn.fi-color-gray:focus-visible .fi-icon-btn-icon {
    color: var(--derm-plum) !important;
}

/* Topbar: any neutral icon button not using primary/danger/success */
.fi-topbar .fi-icon-btn.fi-color-gray .fi-icon-btn-icon {
    color: rgba(var(--derm-plum-rgb), 0.42) !important;
}

/* Tabs (resource relations, etc.) */
.fi-tabs-item:not(.fi-active) .fi-tabs-item-icon {
    color: rgba(var(--derm-plum-rgb), 0.45) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: var(--derm-plum) !important;
}

/* Breadcrumbs chevron / separator */
.fi-breadcrumbs-item-separator {
    color: rgba(var(--derm-plum-rgb), 0.38) !important;
}

.fi-breadcrumbs-item-label {
    color: rgba(var(--derm-plum-rgb), 0.55) !important;
}

/* Page headings — Playfair Display (font-heading) to match /documentos */
.fi-header-heading,
.fi-section-header-heading {
    font-family: 'Playfair Display', ui-serif, Georgia, serif !important;
}

/* Page heading icon (resource view) */
.fi-header-heading .fi-icon,
.fi-header-heading-icon {
    color: rgba(var(--derm-plum-rgb), 0.5) !important;
}

/* Table: header actions + row action icon buttons (gray) */
.fi-ta-header-toolbar .fi-icon-btn.fi-color-gray .fi-icon-btn-icon,
.fi-ta-actions .fi-icon-btn.fi-color-gray .fi-icon-btn-icon {
    color: rgba(var(--derm-plum-rgb), 0.42) !important;
}

/* Form field prefix/suffix icons */
.fi-input-wrp .fi-input-wrp-icon.fi-icon,
.fi-fo-field-wrp .fi-icon {
    color: rgba(var(--derm-plum-rgb), 0.4) !important;
}

/* User / tenant menu items — neutral icons */
.fi-dropdown-panel .fi-dropdown-list-item-icon,
.fi-tenant-menu .fi-icon {
    color: rgba(var(--derm-plum-rgb), 0.45) !important;
}

/* Main content cards / sections — auth-card pattern: single unified container like /instructor and /documentos.
   The fi-section IS the card; header and content are transparent children with no own borders/shadows. */
.fi-section:not(.not-contained) {
    background-color: #fff !important;
    border: 2px solid var(--derm-border-card) !important;
    border-radius: 1rem !important;
    box-shadow: var(--derm-shadow-organic) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    overflow: hidden !important;
}

/* Header: lightweight separator, no own card styling */
.fi-section:not(.not-contained) .fi-section-header {
    border-width: 0 !important;
    border-bottom: 1px solid rgba(68, 16, 68, 0.06) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Content: transparent, clipped by parent */
.fi-section:not(.not-contained) .fi-section-content-ctn {
    border-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-width: 2px !important;
    border-color: var(--derm-border-card) !important;
    box-shadow: var(--derm-shadow-organic) !important;
    border-radius: 1rem !important;
    background-color: #fff !important;
}

/* Welcome / account widget — compact bar, no dead space */
.fi-account-widget .fi-section-content {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
}

/* Chart widget containers — same auth-card treatment */
.fi-wi-chart {
    border-width: 2px !important;
    border-color: var(--derm-border-card) !important;
    box-shadow: var(--derm-shadow-organic) !important;
    border-radius: 1rem !important;
    background-color: #fff !important;
}

/* Simple auth pages (login, register) — single background: alabaster outside, white card.
   Do NOT set fi-simple-page background; it sits inside the card and would create a second color. */
.fi-simple-layout,
.fi-simple-main-ctn {
    background-color: var(--derm-alabaster) !important;
}

/* Auth card — DESIGN.md: bento surfaces, plum/10 border, organic shadow */
.fi-simple-main {
    background-color: #fff !important;
    border: 2px solid var(--derm-border-card) !important;
    border-radius: 1rem !important;
    box-shadow: var(--derm-shadow-organic) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
}

/* Auth header — Playfair Display, plum (matches DESIGN.md) */
.fi-simple-header-heading {
    font-family: 'Playfair Display', ui-serif, Georgia, serif !important;
    color: var(--derm-plum) !important;
}

.fi-simple-header-subheading {
    color: rgba(var(--derm-plum-rgb), 0.6) !important;
}

/* Auth form inputs — warm focus ring */
.fi-simple-page .fi-fo-field-wrp .fi-input-wrp:focus-within,
.fi-simple-page .fi-fo-field-wrp .fi-input:focus {
    --tw-ring-color: rgba(var(--derm-plum-rgb), 0.25) !important;
}

/* Auth CTA button — terracotta to match dashboard/documentos */
.fi-simple-page .fi-btn-color-primary,
.fi-simple-page .fi-btn.bg-primary-600 {
    background-color: var(--derm-terracotta) !important;
}
.fi-simple-page .fi-btn-color-primary:hover,
.fi-simple-page .fi-btn.bg-primary-600:hover {
    background-color: #c97a66 !important; /* terracotta-dark */
}