/*
 * Tenduro Admin Panel Custom Styles
 * Dark sidebar header with brand colors - #1E293B from styleguide
 */

/* =============================================
   SIDEBAR HEADER (logo area) - ALWAYS DARK
   ============================================= */

.fi-sidebar-header {
    background-color: #1E293B !important;
    border-bottom: none !important;
}

.fi-sidebar-header > nav,
.fi-sidebar-header nav {
    background-color: #1E293B !important;
}

.fi-sidebar-header .fi-sidebar-header-content {
    background-color: #1E293B !important;
}

/* =============================================
   TOPBAR (header bar next to sidebar)
   ============================================= */

.fi-topbar {
    background-color: #1E293B !important;
    border-bottom: none !important;
}

.fi-topbar > nav,
.fi-topbar nav {
    background-color: #1E293B !important;
}

/* Unified border below header */
.fi-layout > .fi-topbar,
.fi-sidebar-header {
    box-shadow: 0 1px 0 0 #334155 !important;
}

/* Align heights */
.fi-topbar {
    min-height: 4rem;
}

.fi-sidebar-header {
    min-height: 4rem;
    display: flex;
    align-items: center;
}

/* =============================================
   GLOBAL SEARCH - Complete restyling
   ============================================= */

/* Main search wrapper - make everything transparent */
.fi-global-search-field,
.fi-global-search-field > div,
.fi-global-search-field > span,
.fi-global-search-field label {
    background-color: transparent !important;
    background: transparent !important;
}

/* The container that wraps icon + input */
.fi-global-search-field > div {
    background-color: #334155 !important;
    border: 1px solid #475569 !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
}

/* Remove any inner backgrounds */
.fi-global-search-field > div > div,
.fi-global-search-field > div > span {
    background-color: transparent !important;
    background: transparent !important;
}

/* The icon container on the left */
.fi-global-search-field .fi-input-wrapper-prefix,
.fi-global-search-field [class*="prefix"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* The actual input field */
.fi-global-search-field input {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    caret-color: #FFFFFF !important;
}

/* Ensure typed text is always white */
.fi-global-search-field input,
.fi-global-search-field input:focus,
.fi-global-search-field input:active {
    color: #FFFFFF !important;
    background-color: transparent !important;
    background: transparent !important;
}

.fi-global-search-field input::placeholder {
    color: #94A3B8 !important;
}

/* Focus state - apply to the wrapper, not input */
.fi-global-search-field:focus-within > div {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Search icon */
.fi-global-search-field svg {
    color: #94A3B8 !important;
}

/* Override any ring/focus states from Filament */
.fi-global-search-field input:focus,
.fi-global-search-field input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
}

/* Search button if exists */
.fi-global-search-field button {
    background-color: transparent !important;
    color: #94A3B8 !important;
}

.fi-global-search-field button:hover {
    color: #F1F5F9 !important;
}

/* =============================================
   TOPBAR ICONS AND BUTTONS
   ============================================= */

.fi-topbar button,
.fi-topbar a {
    color: #CBD5E1 !important;
}

.fi-topbar button:hover,
.fi-topbar a:hover {
    color: #F1F5F9 !important;
}

.fi-topbar button svg,
.fi-topbar a svg {
    color: #CBD5E1 !important;
}

.fi-topbar button:hover svg,
.fi-topbar a:hover svg {
    color: #F1F5F9 !important;
}

/* User menu */
.fi-topbar .fi-dropdown-trigger,
.fi-topbar .fi-user-menu {
    color: #F1F5F9 !important;
}

.fi-topbar .fi-dropdown-trigger span,
.fi-topbar .fi-user-menu span {
    color: #F1F5F9 !important;
}

/* Notification badge */
.fi-topbar .fi-badge {
    background-color: #3B82F6 !important;
    color: #FFFFFF !important;
}

/* =============================================
   BREADCRUMBS
   ============================================= */

.fi-topbar .fi-breadcrumbs a,
.fi-topbar .fi-breadcrumbs span {
    color: #94A3B8 !important;
}

.fi-topbar .fi-breadcrumbs a:hover {
    color: #F1F5F9 !important;
}

.fi-topbar .fi-breadcrumbs svg {
    color: #64748B !important;
}

/* =============================================
   DARK MODE
   ============================================= */

.dark .fi-sidebar-header {
    background-color: #0F172A !important;
}

.dark .fi-sidebar-header > nav,
.dark .fi-sidebar-header nav {
    background-color: #0F172A !important;
}

.dark .fi-topbar {
    background-color: #0F172A !important;
}

.dark .fi-topbar > nav,
.dark .fi-topbar nav {
    background-color: #0F172A !important;
}

.dark .fi-layout > .fi-topbar,
.dark .fi-sidebar-header {
    box-shadow: 0 1px 0 0 #1E293B !important;
}

.dark .fi-global-search-field > div {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

/* =============================================
   LOGIN / AUTH PAGES - Dark background
   ============================================= */

/* Simple auth layout (login, register, etc.) */
.fi-simple-layout {
    background-color: #1E293B !important;
    min-height: 100vh;
}

/* The main container/card */
.fi-simple-main {
    background-color: #0F172A !important;
    border: 1px solid #334155 !important;
    border-radius: 1rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Form container inside the card */
.fi-simple-main > div {
    background-color: transparent !important;
}

/* Labels */
.fi-simple-layout label {
    color: #CBD5E1 !important;
}

/* Input fields */
.fi-simple-layout input {
    background-color: #1E293B !important;
    border-color: #475569 !important;
    color: #F1F5F9 !important;
}

.fi-simple-layout input::placeholder {
    color: #64748B !important;
}

.fi-simple-layout input:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Checkbox styling */
.fi-simple-layout .fi-checkbox-input {
    background-color: #1E293B !important;
    border-color: #475569 !important;
}

.fi-simple-layout .fi-checkbox-input:checked {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
}

/* Text and links */
.fi-simple-layout p,
.fi-simple-layout span {
    color: #94A3B8 !important;
}

.fi-simple-layout a {
    color: #60A5FA !important;
}

.fi-simple-layout a:hover {
    color: #93C5FD !important;
}

/* Headings */
.fi-simple-layout h1,
.fi-simple-layout h2,
.fi-simple-layout h3 {
    color: #F1F5F9 !important;
}

/* Primary button */
.fi-simple-layout .fi-btn-primary {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
}

.fi-simple-layout .fi-btn-primary:hover {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
}

/* Error messages */
.fi-simple-layout .fi-fo-field-wrp-error-message {
    color: #F87171 !important;
}

/* Logo on login page - make it larger */
.fi-simple-layout .fi-logo,
.fi-simple-layout [class*="fi-logo"] {
    max-width: 280px !important;
    width: 280px !important;
    height: auto !important;
}

.fi-simple-layout .fi-logo img,
.fi-simple-layout [class*="fi-logo"] img,
.fi-simple-layout .fi-logo svg,
.fi-simple-layout [class*="fi-logo"] svg {
    max-width: 280px !important;
    width: 280px !important;
    height: auto !important;
}