/* ============================================================
   Syncfusion Component Overrides — HireARef Brand Theme
   ============================================================
   All Syncfusion component customizations go here.
   Never modify the Syncfusion theme file directly.
   ============================================================ */

/* ── Button Base Padding ── */
/* Syncfusion's Bootstrap5 default button padding is very tight (0 12px).
   These overrides give buttons more breathing room site-wide. */
.e-btn:not(.e-icon-btn):not(.e-tbar-btn) {
    padding: 0.375rem 1.25rem !important;
    min-height: 2.125rem !important;
    line-height: 1.5 !important;
}

.e-btn.e-small:not(.e-icon-btn):not(.e-tbar-btn) {
    padding: 0.2rem 0.75rem !important;
    min-height: 1.75rem !important;
    line-height: 1.5 !important;
}

/* ── Primary Button — Brand Orange ── */

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--har-accent-orange);
    border-color: var(--har-accent-orange);
    color: #fff;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
    background-color: var(--har-accent-hover);
    border-color: var(--har-accent-hover);
    color: #fff;
}

.e-btn.e-primary:focus,
.e-css.e-btn.e-primary:focus {
    background-color: var(--har-accent-hover);
    border-color: var(--har-accent-hover);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.35);
}

.e-btn.e-primary:active,
.e-css.e-btn.e-primary:active,
.e-btn.e-primary.e-active,
.e-css.e-btn.e-primary.e-active {
    background-color: #cc5500;
    border-color: #cc5500;
    color: #fff;
}

.e-btn.e-primary:disabled,
.e-css.e-btn.e-primary:disabled,
.e-btn.e-primary[disabled],
.e-css.e-btn.e-primary[disabled] {
    background-color: var(--har-accent-orange);
    border-color: var(--har-accent-orange);
    color: #fff;
    opacity: 0.6;
}

/* ── Toolbar (Top Navigation Bar) ── */

.har-toolbar.e-toolbar {
    background-color: var(--har-nav-bg);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    height: 56px;
    padding: 0 0.5rem;
}

.har-toolbar.e-toolbar .e-toolbar-items {
    background-color: transparent;
}

.har-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
    padding: 0;
}

.har-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.har-menu-item {
    margin-left: 5px;
}

.har-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
    color: var(--har-nav-text);
    background: transparent;
}

.har-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover {
    color: var(--har-nav-hover);
    background: transparent;
}

/* ── Menu (Top Nav Links) ── */

.har-nav-menu.e-menu-wrapper {
    background-color: transparent;
}

.har-nav-menu.e-menu-wrapper .e-menu {
    background-color: transparent;
}

.har-nav-menu.e-menu-wrapper .e-menu .e-menu-item {
    color: var(--har-nav-text);
    background-color: transparent;
    font-size: 0.9rem;
}

.har-nav-menu.e-menu-wrapper .e-menu .e-menu-item:hover,
.har-nav-menu.e-menu-wrapper .e-menu .e-menu-item.e-focused,
.har-nav-menu.e-menu-wrapper .e-menu .e-menu-item.e-selected {
    color: var(--har-nav-hover);
    background-color: rgba(255, 255, 255, 0.1);
}

.har-nav-menu.e-menu-wrapper .e-menu .e-menu-item .e-menu-url {
    color: inherit;
    text-decoration: none;
}

/* ── Menu Hamburger / Mobile Popup ── */

/* When SfMenu collapses to hamburger mode the popup is rendered as a sibling
   outside the toolbar — it needs an explicit dark background so white text shows. */
.har-nav-menu.e-menu-wrapper .e-menu-popup,
.har-nav-menu.e-menu-wrapper ul.e-menu.e-menu-parent {
    background-color: var(--har-nav-bg) !important;
}

.har-nav-menu.e-menu-wrapper .e-menu-popup .e-menu-item,
.har-nav-menu.e-menu-wrapper ul.e-menu.e-menu-parent .e-menu-item {
    color: var(--har-nav-text) !important;
    background-color: transparent !important;
}

.har-nav-menu.e-menu-wrapper .e-menu-popup .e-menu-item:hover,
.har-nav-menu.e-menu-wrapper .e-menu-popup .e-menu-item.e-focused,
.har-nav-menu.e-menu-wrapper ul.e-menu.e-menu-parent .e-menu-item:hover {
    color: var(--har-nav-hover) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Also target the generic popup in case Syncfusion renders it outside the wrapper */
.e-popup.e-menu-popup.har-nav-menu,
.e-popup .e-menu.e-menu-parent {
    background-color: var(--har-nav-bg) !important;
}

/* ── Sidebar ── */
/* Note: Syncfusion SfSidebar does NOT apply CssClass to the .e-sidebar element itself,
   so we target it via its parent .har-body context instead. */

.har-body .e-sidebar {
    background-color: var(--har-primary) !important;
    color: var(--har-nav-text);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    /* Offset below the sticky header so nav items are never hidden behind it */
    top: var(--har-header-height, 56px) !important;
    height: calc(100vh - var(--har-header-height, 56px)) !important;
    overflow-y: auto;
    z-index: 999;
}

/* Cover any inner wrappers Syncfusion adds inside the sidebar */
.har-body .e-sidebar > *,
.har-body .e-sidebar .e-sidebar-content {
    background-color: var(--har-primary) !important;
}

/* Sidebar nav styling (global because NavLink components are children) */
.har-sidebar-nav {
    padding: 1rem 0;
}

.har-nav-section {
    margin-bottom: 0.5rem;
}

.har-nav-heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.75rem 1.25rem 0.25rem;
    margin: 0;
    font-weight: 600;
}

.har-nav-link {
    display: block;
    padding: 0.5rem 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 0;
    transition: all 0.15s ease;
}

.har-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--har-accent-orange);
}

.har-nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--har-accent-orange);
    font-weight: 600;
    border-left: 3px solid var(--har-accent-orange);
}

/* ── Admin Sidebar Accordion ── */

.har-admin-accordion.e-accordion {
    background-color: transparent;
    border: none;
}

.har-admin-accordion.e-accordion .e-acrdn-item {
    border: none;
}

.har-admin-accordion.e-accordion .e-acrdn-item .e-acrdn-header {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.har-admin-accordion.e-accordion .e-acrdn-item .e-acrdn-header:hover {
    background-color: transparent;
}

.har-admin-accordion.e-accordion .e-acrdn-item .e-acrdn-panel {
    background-color: transparent;
    padding: 0;
}

/* ── Role Selector Dropdown ── */

.har-role-dropdown.e-ddl.e-input-group {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.har-role-dropdown.e-ddl.e-input-group .e-input {
    color: var(--har-nav-text);
    font-size: 0.8125rem;
}

.har-role-dropdown.e-ddl.e-input-group .e-input-group-icon {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Sidebar overlay backdrop ── */

.e-sidebar-overlay {
    z-index: 998;
}

/* ── Green Button (used for Boost action) ── */

.e-btn.har-btn-green,
.e-css.e-btn.har-btn-green {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

.e-btn.har-btn-green:hover,
.e-css.e-btn.har-btn-green:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #fff !important;
}

.e-btn.har-btn-green:focus,
.e-css.e-btn.har-btn-green:focus {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.35);
}

.e-btn.har-btn-green:active,
.e-css.e-btn.har-btn-green:active,
.e-btn.har-btn-green.e-active,
.e-css.e-btn.har-btn-green.e-active {
    background-color: #1e7e34 !important;
    border-color: #1c7430 !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   OfficialScheduleDialog — calendar event coloring
   Games render in the brand orange; unavailability (one-off blocks AND weekly
   days off) render in a muted red so the Scheduler can see at a glance where
   the official is open vs. blocked.
   --------------------------------------------------------------------------- */
.e-schedule .e-appointment.har-cal-game,
.e-schedule .e-appointment.har-cal-game .e-appointment-details {
    background-color: var(--har-accent-orange, #FF6B00) !important;
    border-color: #d95a00 !important;
    color: #fff !important;
}

.e-schedule .e-appointment.har-cal-unavailable,
.e-schedule .e-appointment.har-cal-unavailable .e-appointment-details {
    background-color: #b94a48 !important;
    border-color: #a23c3a !important;
    color: #fff !important;
}

/* All-day / month-view rendering of the unavailable blocks */
.e-schedule .e-appointment.har-cal-unavailable .e-subject {
    color: #fff !important;
}

/* Calendar colour legend (Official schedule calendar) */
.har-cal-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.har-cal-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}