@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-size: 0.88rem !important;
    }

    body,
    input,
    button,
    textarea,
    select {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.25;
    }
}

[x-cloak] {
    display: none;
}

/* Maintain 100% UI scale with consistent typography and padding */
@layer components {
    :root {
        --ui-scale: 0.9; /* 0.9 = 90% */
        --sidebar-width: calc(286px * var(--ui-scale));
    }

    html {
        font-size: 0.88rem !important;
    }

    body,
    input,
    button,
    textarea,
    select {
        font-size: 0.88rem !important;
    }
}

/* Ensure header icons remain visible when the header is scrolled.
   Use high-contrast colors and important flags to override any build ordering issues. */
@layer components {
    .top-header.scrolled .menu-toggle,
    .top-header.scrolled .header-icon-btn,
    .top-header.scrolled .user-profile-wrapper,
    .top-header.scrolled .header-search-wrapper .search-icon,
    .top-header.scrolled .user-profile-wrapper .user-name,
    .top-header.scrolled .user-profile-wrapper .user-role {
        color: #ffffff !important;
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.12) !important;
    }

    .top-header.scrolled .header-search-wrapper input {
        background: rgba(255,255,255,0.08) !important;
        border-color: rgba(255,255,255,0.12) !important;
        color: #ffffff !important;
    }

    .top-header.scrolled .header-search-wrapper input::placeholder {
        color: rgba(255,255,255,0.8) !important;
    }

    .top-header.scrolled .header-icon-btn .badge-notification {
        border-color: rgba(255,255,255,0.12) !important;
    }
}

/* Header typography and icon sizing for clarity */
@layer components {
    .top-header {
        backdrop-filter: saturate(120%) blur(6px);
    }

    .top-header .header-search-wrapper {
        max-width: 560px;
    }

    .top-header .header-search-wrapper input {
        font-size: 15px !important;
        color: #334155 !important;
    }

    .top-header .header-search-wrapper .search-icon {
        color: #94A3B8 !important;
        font-size: 16px !important;
    }

    .top-header .header-icon-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .top-header .user-profile-wrapper .user-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0F172A !important;
    }

    .top-header .user-profile-wrapper .user-role {
        font-size: 12px !important;
        color: #64748B !important;
    }

    /* Ensure header typography contrasts correctly when scrolled */
    .top-header.scrolled .user-profile-wrapper .user-name {
        color: #ffffff !important;
    }

    .top-header.scrolled .user-profile-wrapper .user-role {
        color: rgba(255,255,255,0.85) !important;
    }
}

/* Make scrolled header dark and ensure white text/icons */
@layer components {
    .top-header.scrolled {
        background: linear-gradient(90deg, rgba(15,23,42,0.98), rgba(15,23,42,0.95)) !important;
        border-color: transparent !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18) !important;
    }

    .top-header.scrolled .header-icon-btn {
        background: transparent !important;
        border-color: rgba(255,255,255,0.08) !important;
        color: #fff !important;
    }

    .top-header.scrolled .header-search-wrapper input {
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.08) !important;
        color: #fff !important;
        caret-color: #fff !important;
    }

    .top-header.scrolled .header-search-wrapper .search-icon {
        color: rgba(255,255,255,0.85) !important;
    }

    .top-header.scrolled .profile-dropdown-menu,
    .top-header.scrolled .profile-dropdown-menu * {
        color: #334155 !important;
    }

    .top-header.scrolled .dropdown-user-header .user-name {
        color: #0f172a !important;
    }

    .top-header.scrolled .dropdown-user-header .user-role,
    .top-header.scrolled .profile-dropdown-menu small {
        color: #64748b !important;
    }

    .top-header.scrolled .profile-dropdown-menu .text-danger,
    .top-header.scrolled .profile-dropdown-menu .text-danger * {
        color: #ef4444 !important;
    }
}

/* Sidebar typography improvements */
@layer components {
    .sidebar-logo-text h2 {
        font-size: 22px !important;
        font-weight: 900 !important;
        letter-spacing: -0.6px !important;
    }

    .sidebar-logo-text small {
        font-size: 11px !important;
    }

    .sidebar-section-title {
        font-size: 11px !important;
        letter-spacing: 1.2px !important;
        padding: 10px 12px !important;
    }

    .sidebar-nav-link {
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 12px 16px !important;
        color: #E6EEF8 !important;
    }

    .sidebar-nav-link i {
        font-size: 18px !important;
        width: 28px !important;
    }

    .sidebar-nav-link.active {
        color: #fff !important;
        background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(124,58,237,0.06)) !important;
    }

    .sidebar {
        padding-bottom: 48px !important;
    }
}