/*
 * HR Bingo brand theme for the Filament panels.
 * Brand colours come from the HR Bingo logo: navy #003268, yellow #FFC814.
 * Primary (buttons, links, focus) is navy, set in App\Support\Brand.
 * Menus (side or top) are white; the selected item is light blue with navy
 * text. Navy is kept for buttons; yellow for the thin line at the top.
 */
:root {
    --hb-navy: #003268;
    --hb-navy-dark: #00244c;
    --hb-yellow: #ffc814;
    --hb-page: #f4f6fa;
}

/* Page background: a faint navy tint instead of plain grey */
.fi-body {
    background-color: var(--hb-page);
}

/* Logo: the normal (navy) logo everywhere; a white-text version exists in
   public/images for any future dark surface. */
.hb-logo { display: block; height: 100%; width: auto; }
.hb-logo-light { display: none; }

/* Side menu (company panel): white, grey text, light-blue selected item with
   navy text. Navy is kept for buttons. */
.fi-sidebar .fi-sidebar-item-label {
    color: #374151;
}
.fi-sidebar .fi-sidebar-item-icon {
    color: #6b7280;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #e6edf7 !important;
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--hb-navy) !important;
    font-weight: 600;
}

/* Company name at the top of the company side menu */
.hb-company { margin: 0 0.25rem 0.5rem; padding: 0 0.25rem; line-height: 1.25; }
.hb-company-name { font-weight: 600; color: var(--hb-navy); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Thin yellow brand line across the top of every page */
.fi-topbar,
.fi-simple-layout {
    border-top: 3px solid var(--hb-yellow);
}

/* ---- Top navigation layout (panels using ->topNavigation(), e.g. the Super Admin) ----
 * White top bar with the normal logo; navy is kept for buttons, and the
 * selected tab gets a light-blue highlight with navy text.
 */
.fi-body-has-top-navigation .fi-topbar {
    background-color: #fff !important;
    border-bottom: 1px solid rgb(0 50 104 / 0.08) !important;
}
.fi-body-has-top-navigation .fi-topbar-item-label {
    color: #374151 !important;
}
.fi-body-has-top-navigation .fi-topbar-item-icon {
    color: #6b7280 !important;
}
.fi-body-has-top-navigation .fi-topbar-item-btn:hover {
    background-color: #f3f4f6 !important;
}
.fi-body-has-top-navigation .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: #e6edf7 !important;
}
.fi-body-has-top-navigation .fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-body-has-top-navigation .fi-topbar-item.fi-active .fi-topbar-item-icon {
    color: var(--hb-navy) !important;
    font-weight: 600;
}

/* Consultant access bar (company panel, while a Super Admin is visiting) */
.hb-consultant-bar {
    background-color: var(--hb-yellow);
    color: var(--hb-navy);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    padding: 0.4rem 1rem;
}

/* Approval history in the inbox */
.hb-history { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.hb-history li { padding: .5rem 0; border-bottom: 1px solid #eef1f5; }
.hb-history li:last-child { border-bottom: 0; }
.hb-history-when { color: #6b7280; margin-left: .25rem; }
.hb-history-comment { color: #374151; margin-top: .25rem; }

/* Monthly attendance register: narrow day columns */
.hb-day-col { padding-left: 2px !important; padding-right: 2px !important; min-width: 30px; text-align: center; font-size: 12px; }
.hb-day { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; font-size: 12px; }
.hb-day small { color: #9ca3af; font-weight: 400; font-size: 10px; }
td.hb-sun { background: #fafbfc; }
/* Register: the month's totals (P, A, L ... Hours) on a tinted band */
td.hb-sum-col { background: #f0f5fc; font-weight: 600; }
th.hb-sum-col { background: #e2ecf8; }
.hb-sum-first { border-left: 1px solid #c8d9ef; }
.hb-sum-last { border-right: 1px solid #c8d9ef; }
.dark td.hb-sum-col { background: rgba(42, 120, 214, .10); }
.dark th.hb-sum-col { background: rgba(42, 120, 214, .18); }
.dark .hb-sum-first, .dark .hb-sum-last { border-color: rgba(42, 120, 214, .35); }
/* Monthly register: the employee column stays on the left while the days scroll. */
th.hb-name-col, td.hb-name-col { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 #e5e7eb, 4px 0 6px -4px rgba(15, 23, 42, .18); min-width: 170px; }
th.hb-name-col { z-index: 3; background: #f9fafb; }
.dark td.hb-name-col { background: rgb(24 24 27); box-shadow: 1px 0 0 rgba(255, 255, 255, .1), 4px 0 6px -4px rgba(0, 0, 0, .6); }
.dark th.hb-name-col { background: rgb(39 39 42); }
.hb-link { color: #003268; text-decoration: underline; }

/* Compact tables: less padding per row; employee code under the name in small type */
.fi-ta-text:not(.fi-inline), .fi-ta-icon:not(.fi-inline), .fi-ta-actions-cell .fi-ta-actions { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
.fi-ta-text-description { font-size: 0.75rem !important; line-height: 1rem !important; margin-top: 0 !important; }
.fi-ta-header-cell { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
.fi-ta-text-item, .fi-ta-text { font-size: 0.875rem; }

/* Expense claim details */
.hb-expense-items { width: 100%; font-size: .875rem; border-collapse: collapse; margin-bottom: .5rem; }
.hb-expense-items th { text-align: left; font-weight: 600; padding: .35rem .5rem; border-bottom: 1px solid #e5e7eb; }
.hb-expense-items td { padding: .35rem .5rem; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.hb-expense-items tfoot td { border-bottom: 0; }

/* Filters beside Search (lists with a few filters): one row on wide screens, stacked on phones */
.fi-ta-filters-above-content-ctn .fi-ta-filters-header { display: none; }
@media (min-width: 1024px) {
    .fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) { display: flex; flex-wrap: wrap; align-items: flex-end; }
    .fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) > .fi-ta-header { flex-basis: 100%; }
    .fi-ta-header-ctn > .fi-ta-filters-above-content-ctn { flex: 1 1 0; min-width: 0; border-bottom: 0 !important; padding-right: 0 !important; }
    .fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) > .fi-ta-header-toolbar { flex: 0 0 auto; border-top: 0 !important; }
    .fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) .fi-ta-search-field { width: 13rem; }
    .fi-ta-filters-above-content-ctn .fi-ta-filters .fi-grid { display: flex !important; flex-wrap: wrap; column-gap: .75rem; }
    .fi-ta-filters-above-content-ctn .fi-ta-filters .fi-grid > * { flex: 1 1 0; min-width: 8rem; max-width: 12rem; }
    /* a filter with several fields (Period with From and To) keeps them side by side, and grows when the dates show */
    .fi-ta-filters-above-content-ctn .fi-ta-filters .fi-grid .fi-grid { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: .75rem; }
    .fi-ta-filters-above-content-ctn .fi-ta-filters .fi-grid .fi-grid > * { min-width: 0; max-width: none; }
    .fi-ta-filters-above-content-ctn .fi-ta-filters .fi-grid > :has(.fi-grid .fi-fo-date-time-picker) { flex: 3 1 0; min-width: 24rem; max-width: 36rem; }
}

/* Search menu (App\Support\MenuSearch): the box above the side menu, and the menu while searching. */
.hb-menu-search { margin: 0 0 0.5rem; }
.hb-menu-search-box { position: relative; display: flex; align-items: center; }
.hb-menu-search-box svg { position: absolute; left: 0.6rem; width: 1rem; height: 1rem; color: #9ca3af; pointer-events: none; }
.hb-menu-search-box input {
    width: 100%; padding: 0.45rem 2rem 0.45rem 2rem; font-size: 0.875rem; border-radius: 0.5rem;
    border: 1px solid #d1d5db; background: #fff; color: #111827; outline: none;
}
.hb-menu-search-box input:focus { border-color: var(--hb-navy); box-shadow: 0 0 0 2px rgba(36, 85, 156, .2); }
.hb-menu-search-box input::-webkit-search-cancel-button { cursor: pointer; }
.hb-menu-search-box kbd {
    position: absolute; right: 0.5rem; font: 500 0.7rem/1 ui-monospace, monospace; color: #6b7280;
    border: 1px solid #d1d5db; border-radius: 0.25rem; padding: 0.15rem 0.35rem; background: #f9fafb;
}
.dark .hb-menu-search-box input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); color: #f3f4f6; }
.dark .hb-menu-search-box kbd { background: transparent; border-color: rgba(255, 255, 255, .2); color: #9ca3af; }
.hb-menu-search-extras { display: flex; flex-direction: column; row-gap: 0.25rem; margin-top: 0.5rem; }
.hb-menu-search-extras small { color: #6b7280; font-weight: 400; }
.hb-menu-search-none { margin-top: 0.5rem; font-size: 0.8rem; color: #6b7280; padding: 0 0.5rem; }
/* While searching, folded groups open so their matches show; misses hide. */
.hb-searching .fi-sidebar-group-items { display: flex !important; height: auto !important; overflow: visible !important; }
.hb-searching .hb-miss, .hb-menu-search .hb-miss { display: none !important; }
.hb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Today's celebrations (dashboard) */
.hb-celebrate-me { border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; background: linear-gradient(135deg, #fff7e0, #ffe9a8); border: 1px solid #f5d36b; color: #3b2f00; }
.hb-celebrate-card { border: 1px solid #f5d36b; background: #fffbea; border-radius: 12px; padding: .75rem .9rem; }
.dark .hb-celebrate-card { background: rgba(224, 168, 0, .08); border-color: rgba(224, 168, 0, .35); }
.hb-celebrate-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--hb-navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.hb-celebrate-input { flex: 1; min-width: 0; padding: .4rem .6rem; font-size: .875rem; border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; color: #111827; }
.dark .hb-celebrate-input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); color: #f3f4f6; }
.hb-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.hb-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: .9; animation-name: hb-confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards; }
@keyframes hb-confetti-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .7; } }
/* The birthday card that pops up for the person celebrating */
.hb-card-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .55); display: grid; place-items: center; padding: 1.25rem; }
.hb-card { width: 100%; max-width: 26rem; background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35); text-align: center; }
.hb-card-top { background: var(--hb-navy); padding: 1.5rem 1rem 1.25rem; }
.hb-card-strip { height: 6px; background: var(--hb-yellow); }
.hb-card-body { padding: 1.25rem 1.5rem 1.5rem; color: #111827; }
.hb-card-body h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .5rem; color: var(--hb-navy); }
.hb-card-body p { font-size: 1rem; line-height: 1.55; margin: 0; }
.hb-card-from { margin-top: .75rem; font-size: .875rem; font-weight: 600; color: #64748b; }
.hb-card-wishes { margin-top: .5rem; font-size: .875rem; font-weight: 600; color: var(--hb-navy); }
.dark .hb-card { background: #111827; }
.dark .hb-card-body { color: #f3f4f6; }
.dark .hb-card-body h2 { color: #93b4e4; }