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

@font-face {
    font-family: 'AdorNoirrit';
    src: url('../Bangla Font/LiAdorNoirritMultiweight/Unicode/Li Ador Noirrit Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'AdorNoirrit';
    src: url('../Bangla Font/LiAdorNoirritMultiweight/Unicode/Li Ador Noirrit SemiBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
}

@font-face {
    font-family: 'AdorNoirrit';
    src: url('../Bangla Font/LiAdorNoirritMultiweight/Unicode/Li Ador Noirrit Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

body {
    font-family: 'Plus Jakarta Sans', 'AdorNoirrit', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

body[lang='bn'] {
    font-family: 'AdorNoirrit', 'Noto Sans Bengali', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

@layer base {
    button,
    a,
    input,
    select,
    textarea {
        -webkit-tap-highlight-color: transparent;
    }
}

.app-shell {
    background:
        radial-gradient(ellipse at 92% 0%, rgba(216, 236, 255, .36), transparent 34rem),
        #f4f6fb;
}

.brand-mark {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(145deg, #f97316, #123f83);
    color: white;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(9, 38, 91, .2);
}

.side-link {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    gap: .75rem;
    border-radius: .9rem;
    padding: .65rem .8rem;
    color: #64748b;
    font-size: .875rem;
    font-weight: 600;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.side-link:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.side-link-active {
    background: #fff3e8;
    color: #c2410c;
}

.side-link-active svg {
    color: #ea580c;
}

aside[class*="fixed inset-y-0"] > div.flex-1 {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

aside[class*="fixed inset-y-0"] > div.flex-1::-webkit-scrollbar {
    width: 6px;
}

aside[class*="fixed inset-y-0"] > div.flex-1::-webkit-scrollbar-track {
    background: transparent;
}

aside[class*="fixed inset-y-0"] > div.flex-1::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

aside[class*="fixed inset-y-0"] > div.flex-1::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.user-avatar {
    display: inline-flex;
    height: 2.55rem;
    width: 2.55rem;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    border-radius: 9999px;
    background: linear-gradient(145deg, #dbeafe, #bfdbfe);
    color: #123f83;
    font-size: .9rem;
    font-weight: 800;
    box-shadow: 0 0 0 1px #dbe3ee;
}

.dock-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    color: #94a3b8;
    transition: color .18s ease, background-color .18s ease;
    text-decoration: none;
}

.dock-link:hover {
    color: #64748b;
}

.dock-icon {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.dock-link-active:not(.dock-link-home) {
    color: #2563eb;
}

.dock-link-active:not(.dock-link-home) .dock-icon {
    background: #dbeafe;
    color: #2563eb;
    box-shadow: 0 0 0 1px #bfdbfe inset;
}

.dock-link-home.dock-link-active .dock-icon {
    height: 3rem;
    width: 3rem;
    background: linear-gradient(145deg, #f97316, #e11d48);
    color: #fff;
    box-shadow: 0 7px 18px rgba(225, 29, 72, .24);
}

.dock-link-home.dock-link-active .dock-label {
    color: #c2410c;
    font-weight: 800;
}

.dock-label {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: color .18s ease;
}

.mobile-home {
    gap: .9rem;
}

.mobile-member-card,
.mobile-summary-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 1.25rem;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .045);
}

.mobile-member-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.mobile-summary-card.employee-stat-grid {
    display: grid;
    align-items: stretch;
}

.mobile-member-avatar {
    display: inline-flex;
    height: 3.25rem;
    width: 3.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff3e8;
    border-radius: 9999px;
    background: linear-gradient(145deg, #fb923c, #e11d48);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 0 0 1px #fed7aa;
}

.mobile-member-status {
    align-self: flex-start;
    border-radius: 9999px;
    background: #ecfdf5;
    padding: .3rem .55rem;
    color: #047857;
    font-size: .65rem;
    font-weight: 700;
}

.mobile-member-status-inactive {
    background: #fff1f2;
    color: #be123c;
}

.mobile-performance-card {
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 1.25rem;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .045);
}

.mobile-performance-stat {
    border-radius: .9rem;
    background: #f8fafc;
    padding: .75rem;
}

.employee-stats-panel {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 1.25rem;
    background: linear-gradient(160deg, #fff 0%, #fbfdff 100%);
    padding: 1rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.employee-stats-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}

.employee-stats-header-icon {
    display: inline-flex;
    height: 2.6rem;
    width: 2.6rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: linear-gradient(145deg, #fff3e8, #ffedd5);
    color: #c2410c;
}

.employee-stats-header h2 {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.employee-stats-header p {
    margin-top: .15rem;
    color: #94a3b8;
    font-size: .7rem;
}

.employee-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.employee-stat-tile {
    min-width: 0;
    border: 1px solid #eef2f7;
    border-radius: 1rem;
    background: #fff;
    padding: .7rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .025);
}

.employee-stat-icon {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: .7rem;
}

.employee-stat-label {
    overflow: hidden;
    margin-top: .55rem;
    color: #64748b;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-stat-value {
    overflow-wrap: anywhere;
    margin-top: .3rem;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.25;
}

.employee-stat-total {
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 600;
}

.employee-stat-tile-blue .employee-stat-icon {
    background: #eff6ff;
    color: #2563eb;
}

.employee-stat-tile-violet .employee-stat-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

.employee-stat-tile-cyan .employee-stat-icon {
    background: #ecfeff;
    color: #0891b2;
}

.employee-stat-tile-green .employee-stat-icon,
.employee-stat-tile-emerald .employee-stat-icon {
    background: #ecfdf5;
    color: #059669;
}

.employee-stat-tile-orange .employee-stat-icon {
    background: #fff7ed;
    color: #ea580c;
}

.employee-target-tile {
    grid-column: 1 / -1;
    border: 1px solid #fed7aa;
    border-radius: 1rem;
    background: linear-gradient(120deg, #fff7ed, #fff 75%);
    padding: .8rem;
}

.employee-target-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.employee-target-heading .employee-stat-icon {
    flex-shrink: 0;
    background: #ffedd5;
    color: #c2410c;
}

.employee-target-heading .employee-stat-label {
    margin-top: 0;
}

.employee-target-heading .employee-stat-value {
    margin-top: .2rem;
}

.employee-target-percent {
    flex-shrink: 0;
    border-radius: 9999px;
    background: #fff;
    padding: .35rem .55rem;
    color: #c2410c;
    font-size: .7rem;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(124, 45, 18, .08);
}

.employee-target-track {
    height: .5rem;
    overflow: hidden;
    margin-top: .7rem;
    border-radius: 9999px;
    background: #ffedd5;
}

.employee-target-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f97316, #e11d48);
    transition: width .35s ease;
}

.employee-target-caption {
    margin-top: .45rem;
    color: #64748b;
    font-size: .7rem;
    font-weight: 700;
}

.employee-target-caption span {
    padding: 0 .2rem;
    color: #cbd5e1;
}

.mobile-performance-action {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: #fff3e8;
    color: #c2410c;
}

.mobile-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
}

.mobile-shortcut {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(226, 232, 240, .8);
    border-radius: 1rem;
    background: #fff;
    padding: .6rem .15rem .55rem;
    text-align: center;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .035);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mobile-shortcut:active,
.mobile-feature-link:active {
    transform: scale(.97);
}

.mobile-shortcut-icon {
    display: inline-flex;
    height: 2.6rem;
    width: 2.6rem;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 13px color-mix(in srgb, currentColor 17%, transparent);
}

.mobile-shortcut-label {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    color: #475569;
    font-size: .62rem;
    font-weight: 700;
    line-height: .85rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mobile-feature-section {
    display: grid;
    gap: .65rem;
}

.mobile-feature-heading {
    color: #e11d48;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.015em;
}

.mobile-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.mobile-feature-link,
.mobile-referral-card {
    display: flex;
    min-width: 0;
    min-height: 3.4rem;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 9999px;
    background: #fff;
    padding: .45rem .7rem;
    color: #334155;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .035);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mobile-feature-icon {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 11px color-mix(in srgb, currentColor 16%, transparent);
}

.leaderboard-podium-card {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.leaderboard-podium-card > span:first-child {
    transition: box-shadow .18s ease, transform .18s ease;
}

.leaderboard-podium-rank-1 {
    box-shadow: 0 12px 26px rgba(51, 65, 85, .09), 0 0 20px rgba(148, 163, 184, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.leaderboard-podium-rank-2 {
    box-shadow: 0 12px 26px rgba(154, 52, 18, .1), 0 0 22px rgba(251, 146, 60, .24), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.leaderboard-podium-rank-3 {
    box-shadow: 0 14px 30px rgba(180, 83, 9, .12), 0 0 26px rgba(251, 191, 36, .27), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.leaderboard-podium-rank-4 {
    box-shadow: 0 14px 32px rgba(109, 40, 217, .14), 0 0 30px rgba(167, 139, 250, .32), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.leaderboard-podium-rank-1 > span:first-child,
.leaderboard-rank-tier-1 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 0 22px rgba(148, 163, 184, .42);
}

.leaderboard-podium-rank-2 > span:first-child,
.leaderboard-rank-tier-2 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 0 24px rgba(251, 146, 60, .48);
}

.leaderboard-podium-rank-3 > span:first-child,
.leaderboard-rank-tier-3 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 0 27px rgba(251, 191, 36, .55);
}

.leaderboard-podium-rank-4 > span:first-child,
.leaderboard-rank-tier-4 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 0 30px rgba(167, 139, 250, .62);
}

.leaderboard-rank-badge {
    background: rgba(255, 255, 255, .9);
    color: #334155;
}

.leaderboard-rank-tier-1 { color: #475569; }
.leaderboard-rank-tier-2 { color: #9a3412; }
.leaderboard-rank-tier-3 { color: #a16207; }
.leaderboard-rank-tier-4 { color: #6d28d9; }

.matching-bonus-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(110, 231, 183, .28), transparent 13rem),
        linear-gradient(135deg, #052e2b 0%, #065f46 52%, #0f766e 100%);
    color: #fff;
}

.matching-bonus-hero h2 {
    color: #fff;
}

.matching-bonus-hero p {
    color: rgba(236, 253, 245, .88);
}

.matching-bonus-hero > span {
    color: rgba(236, 253, 245, .9);
}

.mobile-referral-card {
    grid-column: 1 / -1;
    border-radius: 1rem;
}

.mobile-summary-card {
    display: block;
    padding: 1rem;
}

.mobile-summary-action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 9999px;
    background: #fff3e8;
    padding: .55rem .7rem;
    color: #c2410c;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.metric-card {
    border: 1px solid rgba(226, 232, 240, .85);
    border-radius: 1.25rem;
    background: #fff;
    padding: 1.2rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .035);
}

.panel-card {
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .04);
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll table {
    min-width: 600px;
}

.field-control {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: .85rem;
    background: #fff;
    padding: .72rem .9rem;
    color: #0f172a;
    font-size: .875rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field-control:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .14);
}

.mobile-dock {
    border-color: rgba(226, 232, 240, .8);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .075);
    backdrop-filter: blur(24px) saturate(180%);
}

@media (min-width: 1024px) {
    .desktop-dashboard > section:first-child {
        overflow: hidden;
        border: 1px solid rgba(191, 219, 254, .7);
        border-radius: 1.5rem;
        background:
            radial-gradient(ellipse at 92% 10%, rgba(147, 197, 253, .48), transparent 25rem),
            linear-gradient(120deg, #fff 0%, #eff6ff 58%, #f5f3ff 100%);
        padding: 1.65rem 1.8rem;
        box-shadow: 0 16px 38px rgba(30, 64, 175, .08);
    }

    .desktop-dashboard .metric-card {
        position: relative;
        overflow: hidden;
        border-color: rgba(191, 219, 254, .72);
        background: linear-gradient(145deg, #fff 28%, #eff6ff 100%);
        box-shadow: 0 12px 28px rgba(30, 64, 175, .075);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .desktop-dashboard .metric-card:nth-child(2) {
        background: linear-gradient(145deg, #fff 28%, #ecfdf5 100%);
    }

    .desktop-dashboard .metric-card:nth-child(3) {
        background: linear-gradient(145deg, #fff 28%, #f5f3ff 100%);
    }

    .desktop-dashboard .metric-card:nth-child(4) {
        background: linear-gradient(145deg, #fff 28%, #fffbeb 100%);
    }

    .desktop-dashboard .metric-card:nth-child(5) {
        background: linear-gradient(145deg, #fff 28%, #f0f9ff 100%);
    }

    .desktop-dashboard .metric-card:nth-child(6) {
        background: linear-gradient(145deg, #fff 28%, #fff7ed 100%);
    }

    .desktop-dashboard .metric-card:hover,
    .desktop-dashboard a.metric-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 34px rgba(30, 64, 175, .13);
    }

    .desktop-dashboard .panel-card {
        border-color: rgba(203, 213, 225, .8);
        box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
    }

    .desktop-dashboard .panel-card > div:first-child {
        background: linear-gradient(100deg, #fff 0%, #f8fbff 100%);
    }
}

@media (max-width: 1023px) {
    .app-shell {
        background:
            radial-gradient(ellipse at 92% 0%, rgba(255, 221, 231, .38), transparent 25rem),
            #fff9fb;
    }

    .mobile-home {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    @media (prefers-reduced-transparency: reduce) {
        .mobile-dock {
            background: #fff;
            backdrop-filter: none;
        }
    }
}

@media (max-width: 640px) {
    .guest-brand-panel > a {
        align-self: center;
    }

    .employee-stats-panel {
        padding: .85rem;
    }

    .employee-stat-grid {
        gap: .55rem;
    }

    .employee-stat-tile {
        padding: .65rem;
    }

    .auth-login > div {
        margin-bottom: 1rem;
    }

    .auth-login label,
    .auth-login .text-sm {
        font-size: .875rem;
    }

    .auth-login input {
        font-size: 1rem;
        padding: .75rem 1rem;
    }

    .auth-login input.auth-icon-input {
        padding-left: 3rem;
        padding-right: 1rem;
    }

    .auth-login input.auth-password-input {
        padding-right: 3rem;
    }

    .auth-login .mt-4 {
        margin-top: 1.5rem;
    }

    .auth-login .flex.items-center.justify-end {
        flex-direction: column;
        gap: .75rem;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .auth-login .ms-3 {
        margin-inline-start: 0 !important;
        margin-top: .5rem;
    }

    .auth-login button[type="submit"] {
        width: 100%;
        padding: .875rem;
        font-size: 1rem;
    }
}