/* KANISANI panel theme - loaded by /admin, /portal and the public join page. No build step.
   Filament's own CSS lives in a cascade layer, so these unlayered rules win without !important. */
:root {
    --kn-r: .375rem; /* rounded-md: cards, inputs, buttons, menus */
    --kn-navy: #1e2a47;
    --kn-gold: #e9c46a;
    --kn-ink: #0f172a;
    --kn-line: rgba(15, 23, 42, .08);
    --kn-card: #fff;
    --kn-muted: #64748b;
    --kn-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --kn-indigo: #6366f1;
    --kn-violet: #8b5cf6;
}
.dark {
    --kn-line: rgba(255, 255, 255, .09);
    --kn-card: #111827;
    --kn-muted: #94a3b8;
}

/* ---------- Page: colorful soft background, glass top bar ---------- */
html:not(.dark) .fi-body {
    background:
        radial-gradient(60rem 28rem at -5% -8%, rgba(99, 102, 241, .13), transparent 60%),
        radial-gradient(48rem 26rem at 105% 0%, rgba(236, 72, 153, .09), transparent 60%),
        radial-gradient(50rem 30rem at 60% 110%, rgba(16, 185, 129, .08), transparent 60%),
        #f7f8fc !important;
}
html.dark .fi-body {
    background:
        radial-gradient(60rem 28rem at -5% -8%, rgba(99, 102, 241, .18), transparent 60%),
        radial-gradient(48rem 26rem at 105% 0%, rgba(236, 72, 153, .10), transparent 60%),
        #0b0f1c !important;
}

/* ---------- Top bar: blue to violet gradient, white controls ---------- */
.fi-topbar {
    background: linear-gradient(90deg, #2563eb 0%, #6d5ae6 55%, #7c3aed 100%);
    color: #fff; border: 0; box-shadow: 0 10px 22px -14px rgba(79, 70, 229, .9);
}
.fi-topbar .fi-icon-btn:not(.fi-dropdown-panel *), .fi-topbar svg:not(.fi-dropdown-panel *) { color: #fff; }
.fi-topbar .fi-icon-btn:not(.fi-dropdown-panel *):hover { background: rgba(255, 255, 255, .18); }
.fi-topbar .fi-logo { margin-bottom: 0; }
.fi-topbar .kn-brand-text { background: none; color: #fff; -webkit-text-fill-color: #fff; }
/* 2px red line under the bar: strongest in the middle, fading out to both sides */
.fi-topbar { position: relative; }
.fi-topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0) 0%, #fb7185 25%, #ef4444 50%, #fb7185 75%, rgba(239, 68, 68, 0) 100%);
}
/* Menus opened from the top bar keep normal dark-on-light colors */
.fi-topbar .fi-dropdown-panel { color: var(--kn-ink); }
.dark .fi-topbar .fi-dropdown-panel { color: #e5e7eb; }

/* ---------- Sidebar: grey background ---------- */
html:not(.dark) .fi-sidebar { background: linear-gradient(180deg, #e9ecf3 0%, #dde1ea 100%); }
html.dark .fi-sidebar { background: #141b2d; }
.fi-sidebar { box-shadow: inset -1px 0 0 rgba(15, 23, 42, .08); }
.fi-sidebar-header, .fi-sidebar-header-ctn { background: transparent; box-shadow: none; }
.fi-sidebar-item-btn:hover { background: rgba(15, 23, 42, .06); }
.dark .fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, .06); }

.fi-header-heading { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.fi-page-header-main-ctn { row-gap: .75rem; padding-block: 1rem; }
.fi-logo { display: flex; align-items: center; justify-content: center; }
.kn-brand { display: inline-flex; align-items: center; gap: .55rem; }
.kn-brand-mark { width: 2rem; height: 2rem; flex: none; border-radius: var(--kn-r); box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .9); }
.kn-brand-text { font-weight: 800; letter-spacing: .12em; font-size: 1rem; background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Sidebar: compact, colorful active item ---------- */
.fi-sidebar-nav { row-gap: .25rem; padding: .6rem; }
.fi-sidebar-item-btn { padding: .4rem .6rem; font-size: .8125rem; border-radius: var(--kn-r); }
.fi-sidebar-group-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12), inset 3px 0 0 var(--kn-gold);
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn { background: rgba(129, 140, 248, .2); box-shadow: inset 3px 0 0 var(--kn-gold); }

/* ---------- One radius for cards, inputs, buttons, menus ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-chart, .fi-modal-window, .fi-dropdown-panel, .fi-no-notification,
.fi-simple-main, .fi-sc-tabs, .fi-input-wrp, .fi-btn, .fi-icon-btn, .fi-badge, .fi-select-input,
.kn-tile, .kn-card, .kn-av, .kn-pill, .kn-btn { border-radius: var(--kn-r); }

/* ---------- Sections: every one gets its own color (cycles through 5 by position) ---------- */
.fi-sc-component { --sec-a: #6366f1; --sec-b: #8b5cf6; --sec-ink: #4338ca; --sec-tint: rgba(99, 102, 241, .10); }
.fi-sc-component:nth-child(5n+2) { --sec-a: #10b981; --sec-b: #14b8a6; --sec-ink: #047857; --sec-tint: rgba(16, 185, 129, .10); }
.fi-sc-component:nth-child(5n+3) { --sec-a: #f59e0b; --sec-b: #f97316; --sec-ink: #b45309; --sec-tint: rgba(245, 158, 11, .12); }
.fi-sc-component:nth-child(5n+4) { --sec-a: #0ea5e9; --sec-b: #3b82f6; --sec-ink: #0369a1; --sec-tint: rgba(14, 165, 233, .10); }
.fi-sc-component:nth-child(5n+5) { --sec-a: #f43f5e; --sec-b: #ec4899; --sec-ink: #be123c; --sec-tint: rgba(244, 63, 94, .10); }
.dark .fi-sc-component { --sec-ink: #a5b4fc; }
.dark .fi-sc-component:nth-child(5n+2) { --sec-ink: #6ee7b7; }
.dark .fi-sc-component:nth-child(5n+3) { --sec-ink: #fcd34d; }
.dark .fi-sc-component:nth-child(5n+4) { --sec-ink: #7dd3fc; }
.dark .fi-sc-component:nth-child(5n+5) { --sec-ink: #fda4af; }

.fi-sc-section > .fi-section {
    border-top: 3px solid var(--sec-a);
    box-shadow: 0 10px 24px -18px var(--sec-a);
    background-image: linear-gradient(180deg, var(--sec-tint), transparent 4.5rem);
}
.fi-sc-section .fi-section-header-heading { color: var(--sec-ink); font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; }
.fi-sc-section .fi-section-header-heading::before {
    content: ''; width: .5rem; height: .5rem; border-radius: 2px; flex: none;
    background: linear-gradient(135deg, var(--sec-a), var(--sec-b));
}

/* ---------- Tables and widgets ---------- */
.fi-ta-ctn { border-top: 3px solid #6366f1; box-shadow: 0 10px 24px -18px rgba(99, 102, 241, .8); }
.fi-ta-table thead { background: rgba(99, 102, 241, .07); }
.fi-ta-header-cell { font-weight: 600; letter-spacing: .02em; }
.fi-ta-row:hover { background: rgba(99, 102, 241, .05); }
.fi-wi-chart .fi-section, .fi-wi-chart.fi-section { border-top: 3px solid #0ea5e9; background-image: linear-gradient(180deg, rgba(14, 165, 233, .10), transparent 4.5rem); }
.fi-resource-relation-manager .fi-ta-ctn, .fi-rm .fi-ta-ctn { border-top-color: #10b981; }

/* ---------- Inputs ---------- */
.fi-input-wrp { transition: box-shadow .15s ease; }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }

/* ---------- Buttons: filled ones get a colored gradient ---------- */
.fi-btn { font-weight: 600; transition: filter .15s ease, transform .1s ease, box-shadow .15s ease; }
.fi-btn[class*="fi-bg-color"]:hover { filter: brightness(1.07); }
.fi-btn[class*="fi-bg-color"]:active { transform: translateY(1px); }
.fi-btn.fi-color-primary[class*="fi-bg-color"] { background-image: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 8px 16px -10px rgba(99, 102, 241, .9); }
.fi-btn.fi-color-success[class*="fi-bg-color"] { background-image: linear-gradient(135deg, #10b981, #14b8a6); color: #fff; box-shadow: 0 8px 16px -10px rgba(16, 185, 129, .9); }
.fi-btn.fi-color-danger[class*="fi-bg-color"] { background-image: linear-gradient(135deg, #f43f5e, #ec4899); color: #fff; box-shadow: 0 8px 16px -10px rgba(244, 63, 94, .9); }
.fi-btn.fi-color-info[class*="fi-bg-color"] { background-image: linear-gradient(135deg, #0ea5e9, #3b82f6); color: #fff; box-shadow: 0 8px 16px -10px rgba(14, 165, 233, .9); }
.fi-btn.fi-color-warning[class*="fi-bg-color"] { background-image: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; box-shadow: 0 8px 16px -10px rgba(245, 158, 11, .9); }

/* ---------- Login and other simple pages ---------- */
html:not(.dark) .fi-simple-layout {
    background:
        radial-gradient(40rem 24rem at 10% 0%, rgba(99, 102, 241, .22), transparent 60%),
        radial-gradient(40rem 24rem at 95% 15%, rgba(236, 72, 153, .16), transparent 60%),
        radial-gradient(44rem 26rem at 50% 105%, rgba(233, 196, 106, .28), transparent 60%),
        #f7f8fc;
}
.fi-simple-main { border-top: 3px solid #6366f1; box-shadow: 0 28px 50px -30px rgba(30, 42, 71, .5); }

/* ---------- KPI tiles ---------- */
.kn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 48rem) { .kn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .kn-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.kn-tile {
    position: relative; overflow: hidden; color: #fff; padding: .85rem .95rem; min-height: 6rem;
    box-shadow: 0 10px 22px -12px var(--glow); transition: transform .15s ease, box-shadow .15s ease;
}
.kn-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px var(--glow); }
.kn-tile::after { content: ''; position: absolute; right: -22px; top: -22px; width: 88px; height: 88px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.kn-tile-icon { position: absolute; right: .7rem; top: .7rem; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--kn-r); background: rgba(255, 255, 255, .22); }
.kn-tile-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; opacity: .9; }
.kn-tile-value { font-family: var(--kn-serif); font-size: 1.65rem; font-weight: 700; line-height: 1.15; margin-top: .2rem; }
.kn-tile-sub { font-size: .7rem; opacity: .92; margin-top: .15rem; }
.kn-tile--indigo { --glow: rgba(99, 102, 241, .65); background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.kn-tile--emerald { --glow: rgba(16, 185, 129, .6); background: linear-gradient(135deg, #10b981, #14b8a6); }
.kn-tile--amber { --glow: rgba(245, 158, 11, .6); background: linear-gradient(135deg, #f59e0b, #f97316); }
.kn-tile--sky { --glow: rgba(14, 165, 233, .6); background: linear-gradient(135deg, #0ea5e9, #3b82f6); }
.kn-tile--rose { --glow: rgba(244, 63, 94, .6); background: linear-gradient(135deg, #f43f5e, #ec4899); }
.kn-tile--navy { --glow: rgba(30, 42, 71, .6); background: linear-gradient(135deg, #1e2a47, #3b4b7a); }
.kn-tile--navy .kn-tile-value { color: var(--kn-gold); }

/* ---------- Cards (dashboard lists) ---------- */
.kn-card {
    --card-a: #6366f1; --card-tint: rgba(99, 102, 241, .10);
    background: var(--kn-card); border: 1px solid var(--kn-line); border-top: 3px solid var(--card-a);
    padding: .85rem 1rem; box-shadow: 0 10px 24px -18px var(--card-a);
    background-image: linear-gradient(180deg, var(--card-tint), transparent 4rem);
}
.kn-card--emerald { --card-a: #10b981; --card-tint: rgba(16, 185, 129, .10); }
.kn-card--amber { --card-a: #f59e0b; --card-tint: rgba(245, 158, 11, .12); }
.kn-card--sky { --card-a: #0ea5e9; --card-tint: rgba(14, 165, 233, .10); }
.kn-card--rose { --card-a: #f43f5e; --card-tint: rgba(244, 63, 94, .10); }
.kn-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.kn-card-head h3 { font-size: .85rem; font-weight: 700; }
.kn-link { font-size: .75rem; font-weight: 600; color: #6366f1; }
.kn-link:hover { text-decoration: underline; }

.kn-row { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; border-top: 1px solid var(--kn-line); }
.kn-row:first-of-type { border-top: 0; }
a.kn-row:hover .kn-row-title { color: #6366f1; }
.kn-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kn-row-title { font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-row-sub { font-size: .72rem; color: var(--kn-muted); }
.kn-row-time { font-size: .72rem; color: var(--kn-muted); white-space: nowrap; }

.kn-av { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .03em; }
.kn-av-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.kn-av-1 { background: linear-gradient(135deg, #10b981, #14b8a6); }
.kn-av-2 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.kn-av-3 { background: linear-gradient(135deg, #0ea5e9, #3b82f6); }
.kn-av-4 { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.kn-av-5 { background: linear-gradient(135deg, #1e2a47, #3b4b7a); }

.kn-pill { font-size: .68rem; font-weight: 600; padding: .12rem .5rem; }
.kn-pill--ok { background: rgba(16, 185, 129, .14); color: #059669; }
.kn-pill--off { background: rgba(244, 63, 94, .14); color: #e11d48; }
.kn-dot { flex: none; width: .55rem; height: .55rem; border-radius: 2px; }
.kn-dot--ok { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.kn-dot--warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }

.kn-empty { text-align: center; padding: 1rem 0 .5rem; color: var(--kn-muted); font-size: .8rem; }
.kn-btn { display: inline-block; margin-top: .5rem; padding: .4rem .9rem; font-size: .78rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); }

/* ---------- Public join page ---------- */
.kn-join { margin: 0; min-height: 100vh; display: grid; place-items: start center; padding: 1.5rem 1rem; font-family: Inter, system-ui, sans-serif; color: var(--kn-ink); background: radial-gradient(40rem 24rem at 10% 0%, rgba(99, 102, 241, .22), transparent 60%), radial-gradient(40rem 24rem at 95% 15%, rgba(236, 72, 153, .16), transparent 60%), radial-gradient(44rem 26rem at 50% 105%, rgba(233, 196, 106, .28), transparent 60%), #f7f8fc; }
.kn-join-card { width: 100%; max-width: 26rem; background: #fff; border-radius: var(--kn-r); border-top: 3px solid #6366f1; padding: 1.5rem 1.25rem; box-shadow: 0 24px 48px -28px rgba(30, 42, 71, .45); }
.kn-join-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .14em; font-size: .75rem; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); padding: .3rem .7rem; border-radius: var(--kn-r); }
.kn-join h1 { font-family: var(--kn-serif); font-size: 1.5rem; line-height: 1.2; margin: .9rem 0 .4rem; }
.kn-join-lead { font-size: .9rem; color: #475569; margin: 0 0 1rem; }
.kn-join-lead a { color: #6366f1; font-weight: 600; }
.kn-join-form { display: grid; gap: .7rem; }
.kn-join-form label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 600; color: #334155; }
.kn-join-form input { font: inherit; font-size: 1rem; padding: .65rem .75rem; min-height: 2.75rem; border: 1px solid #cbd5e1; border-radius: var(--kn-r); background: #fff; }
.kn-join-form input:focus { outline: 0; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.kn-join-form button { min-height: 2.9rem; margin-top: .25rem; border: 0; border-radius: var(--kn-r); font: inherit; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 8px 16px -10px rgba(99, 102, 241, .9); }
.kn-join-hint { margin: 0; font-size: .72rem; color: var(--kn-muted); }
.kn-join-errors { background: rgba(244, 63, 94, .1); color: #be123c; border-radius: var(--kn-r); padding: .6rem .8rem; font-size: .8rem; margin-bottom: .8rem; }

.kn-join-brand img { width: 1.4rem; height: 1.4rem; border-radius: 4px; }

/* ---------- Member import page ---------- */
.kn-import-steps { display: grid; gap: .75rem; }
@media (min-width: 48rem) { .kn-import-steps { grid-template-columns: 1fr 1fr; } }
.kn-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .kn-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kn-muted { color: var(--kn-muted); font-size: .8rem; margin-top: .3rem; }
.kn-error { color: #be123c; font-size: .85rem; font-weight: 600; margin-top: .3rem; }
.kn-file { margin-top: .5rem; font-size: .85rem; }
.kn-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.kn-table-wrap { overflow-x: auto; margin-top: .5rem; }
.kn-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.kn-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kn-muted); padding: .4rem .5rem; border-bottom: 1px solid var(--kn-line); }
.kn-table td { padding: .5rem; border-bottom: 1px solid var(--kn-line); vertical-align: top; }
.kn-choice { display: inline-flex; align-items: center; gap: .3rem; margin-right: .8rem; font-size: .8rem; cursor: pointer; }
.kn-bar { height: .6rem; margin-top: .5rem; border-radius: var(--kn-r); background: rgba(99, 102, 241, .15); overflow: hidden; }
.kn-bar span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width .25s ease; }