/*
 * MTT-3290: fresher club dashboard (users/profile/managerIndex.blade.php).
 *
 * Everything is scoped to `.dashboard`, the root of that view, so no other page is
 * affected. Uses the tokens from ui_refresh.css. Removing the <link> in
 * layouts/app.blade.php reverts it.
 */

.dashboard {
    --db-card-radius: 16px;
    --db-card-shadow: 0 1px 2px rgba(18, 38, 63, .04), 0 4px 16px rgba(18, 38, 63, .04);
    --db-card-shadow-hover: 0 2px 4px rgba(18, 38, 63, .05), 0 10px 28px rgba(18, 38, 63, .08);
    --db-tile-bg: #F7F9FC;
    --db-title: #12263F;
}

/* ------------------------------------------------------------------ */
/* Cards in general                                                    */
/* ------------------------------------------------------------------ */

.dashboard .card {
    border: 1px solid var(--ui-border);
    border-radius: var(--db-card-radius);
    box-shadow: var(--db-card-shadow) !important; /* custom.css:1218 uses !important */
}

.dashboard .card > .card-header:first-child {
    border-radius: var(--db-card-radius) var(--db-card-radius) 0 0;
}

.dashboard .card-header {
    border-bottom-color: #EDF2F9;
}

.dashboard .card-header-title {
    font-size: 15px;
    font-weight: 600 !important;
    color: var(--db-title);
}

.dashboard .card-header a.small {
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    color: var(--ui-muted);
    transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease);
}

.dashboard .card-header a.small:hover {
    background-color: var(--ui-accent-soft);
    color: #0E9E86;
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Shortcut cards (partials/cta_buttons)                               */
/* ------------------------------------------------------------------ */

.dashboard .action-card {
    height: calc(100% - 1.5rem);
    padding: 0 !important;
    word-spacing: normal; /* was 9999px: one word per line */
    background-color: #fff;
    transition: border-color .15s var(--ui-ease), box-shadow .2s var(--ui-ease),
        transform .2s var(--ui-ease);
}

.dashboard .action-card .card-body {
    padding: 18px 20px;
}

.dashboard .action-card .row {
    flex-wrap: nowrap;
}

.dashboard .action-card h4 {
    font-size: 15px;
    font-weight: 600 !important;
    line-height: 1.35;
    color: var(--db-title);
    text-wrap: balance;
}

/* Icon first, in a soft mint circle. */
.dashboard .action-card .col-auto {
    order: -1;
    padding-right: 0;
}

.dashboard .action-card .action-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background-color: var(--ui-accent-soft);
    color: #0E9E86 !important;
    font-size: 20px;
    transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease);
}

.dashboard a:hover > .action-card,
.dashboard .action-card:hover {
    border-color: rgba(45, 224, 181, .6);
    background-color: #fff;
    color: inherit;
    box-shadow: var(--db-card-shadow-hover) !important;
    transform: translateY(-2px);
}

.dashboard .action-card:hover h4 {
    color: var(--db-title);
}

.dashboard .action-card:hover .action-card-icon {
    background-color: var(--ui-accent);
    color: #12263F !important;
}

.dashboard a:has(> .action-card):hover {
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Income chart header (partials/income_chart, dark)                   */
/* ------------------------------------------------------------------ */

.dashboard .header.bg-dark {
    border-radius: var(--db-card-radius) !important;
    background-color: #12263F !important;
    overflow: hidden;
}

.dashboard .header.bg-dark .header-title {
    font-weight: 600;
}

.dashboard .header.bg-dark .header-tabs {
    border-bottom: 0;
}

.dashboard .header.bg-dark .header-tabs .nav-item {
    margin: 6px !important;
}

.dashboard .header.bg-dark .header-tabs .nav-link {
    min-width: 132px;
    padding: 12px 16px;
    border: 1px solid rgba(160, 190, 255, .12);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .04);
    transition: background-color .15s var(--ui-ease), border-color .15s var(--ui-ease);
}

.dashboard .header.bg-dark .header-tabs .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
}

.dashboard .header.bg-dark .header-tabs .nav-link.active {
    border-color: rgba(45, 224, 181, .55);
    background-color: rgba(45, 224, 181, .1);
}

.dashboard .header.bg-dark .header-tabs .header-pretitle {
    color: #95AAC9 !important;
}

/* Each tab doubles as the legend: a dot in its curve colour (income_chart INCOME_COLORS). */
.dashboard .header-tabs [data-income-dataset] .header-pretitle::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 6px 1px 0;
    border-radius: 50%;
    vertical-align: middle;
}

.dashboard .header-tabs [data-income-dataset="0"] .header-pretitle::before { background-color: #A78BFA; }
.dashboard .header-tabs [data-income-dataset="1"] .header-pretitle::before { background-color: #5B9BFF; }
.dashboard .header-tabs [data-income-dataset="2"] .header-pretitle::before { background-color: #F6C343; }
.dashboard .header-tabs [data-income-dataset="3"] .header-pretitle::before { background-color: #2DE0B5; }

/* ------------------------------------------------------------------ */
/* Income / expense bar chart (partials/income_bar_chart)              */
/* ------------------------------------------------------------------ */

.dashboard .income-expense-card > .card-header {
    flex-wrap: wrap;
    gap: 10px;
    height: auto;
    min-height: 60px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.dashboard .chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard .chart-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background-color: var(--db-tile-bg);
    font-size: 12px;
    line-height: 1;
    color: var(--ui-muted);
    transition: background-color .15s var(--ui-ease), opacity .15s var(--ui-ease);
}

button.chart-legend-chip {
    cursor: pointer;
}

button.chart-legend-chip:hover {
    background-color: #EDF2F9;
}

button.chart-legend-chip:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

.dashboard .chart-legend-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard .chart-legend-chip__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--db-title);
}

.dashboard .chart-legend-chip__value.is-positive {
    color: #0B7A65;
}

.dashboard .chart-legend-chip__value.is-negative {
    color: #B4223F;
}

.dashboard .chart-legend-chip.is-off {
    opacity: .45;
}

.dashboard .chart-legend-chip.is-off .chart-legend-chip__label {
    text-decoration: line-through;
}

/* ------------------------------------------------------------------ */
/* Chart tooltip (partials/chart_tooltip): platform font, round swatches */
/* ------------------------------------------------------------------ */

.dashboard .chart {
    position: relative;
}

.mt-chart-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 180px;
    padding: 12px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 12px 32px rgba(18, 38, 63, .16);
    font-family: Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #283E59;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease, left .08s ease, top .08s ease;
}

.mt-chart-tooltip.is-visible {
    opacity: 1;
}

.mt-chart-tooltip__title {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #12263F;
}

.mt-chart-tooltip__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt-chart-tooltip__row + .mt-chart-tooltip__row {
    margin-top: 5px;
}

.mt-chart-tooltip__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mt-chart-tooltip__label {
    color: #6E84A3;
}

.mt-chart-tooltip__value {
    margin-left: auto;
    padding-left: 16px;
    font-weight: 600;
    color: #12263F;
}

.mt-chart-tooltip__footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EDF2F9;
    font-weight: 600;
    color: #12263F;
}

/* ------------------------------------------------------------------ */
/* Stat cards (partials/club_sport_statistics_cards)                   */
/* ------------------------------------------------------------------ */

.dashboard .stronger-text-muted.h2.fe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: #EAF2FD;
    color: #2C7BE5 !important;
    font-size: 18px;
}

.dashboard h5.stronger-text-muted {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}

.dashboard .progress.progress-sm {
    height: 6px;
    border-radius: 999px;
    background-color: #EDF2F9;
}

.dashboard #paid-subscription-percentage-bar {
    border-radius: 999px;
    background-color: var(--ui-accent);
}

/* ------------------------------------------------------------------ */
/* Feeds: announcements, surveys, latest events                        */
/* ------------------------------------------------------------------ */

.dashboard .activity-feed .list-group-item {
    transition: background-color .15s var(--ui-ease);
}

.dashboard .activity-feed .list-group-item:hover {
    background-color: var(--db-tile-bg);
}

.dashboard .activity-feed .list-group-item h5 {
    font-weight: 600;
    color: var(--db-title);
}

.dashboard .activity-feed small.text-muted {
    font-size: 12px;
}

/* ------------------------------------------------------------------ */
/* Club sports                                                         */
/* ------------------------------------------------------------------ */

.dashboard .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 600 !important;
    color: var(--db-title);
}

.dashboard .section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-left: 10px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: var(--ui-accent-soft);
    color: #0E9E86;
    font-size: 12px;
    font-weight: 700;
}

/* Grid that adapts to however many sports the user can see: 1 = full width,
   2 = halves, 3 = thirds on wide screens, never an empty half column. */
.dashboard .sports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 24px;
    margin: 12px 0 24px;
}

.dashboard .sports-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.dashboard .sport-card {
    container-type: inline-size;
    height: 100%;
    margin-bottom: 0;
    transition: border-color .15s var(--ui-ease), box-shadow .2s var(--ui-ease),
        transform .2s var(--ui-ease);
}

.dashboard .sport-card:hover {
    border-color: rgba(45, 224, 181, .45);
    box-shadow: var(--db-card-shadow-hover) !important;
    transform: translateY(-2px);
}

.dashboard .sport-card > .card-body:first-child {
    padding: 20px 20px 4px;
}

/* Header: sport icon + name + "new event" */
.dashboard .sport-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 12px;
    background-color: var(--ui-accent-soft);
    color: #0E9E86;
    font-size: 20px;
}

.dashboard .sport-card__icon > span::before {
    margin: 0;
}

.dashboard .sport-card a.h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--db-title);
    transition: color .15s var(--ui-ease);
}

.dashboard .sport-card a.h3:hover {
    color: #0E9E86;
    text-decoration: none;
}

.dashboard .sport-card .card-body:first-child > .row.align-items-center {
    margin-bottom: 16px !important;
}

.dashboard .sport-card .btn-white.btn-sm::before {
    content: "+";
    margin-right: 4px;
    font-weight: 700;
}

/* Stat tiles: even 2-column grid, soft background, no borders/shadows. */
.dashboard .sport-card .row.no-gutters:has(.light-shadow) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.dashboard .sport-card .row.no-gutters:has(.light-shadow) > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0 !important;
}

.dashboard .sport-card .light-shadow {
    height: 100%;
    margin: 0 !important;
    padding: 14px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background-color: var(--db-tile-bg);
    box-shadow: none;
}

.dashboard .sport-card .light-shadow h5 {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--ui-muted) !important;
}

.dashboard .sport-card .light-shadow h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--db-title);
}

.dashboard .sport-card .light-shadow small,
.dashboard .sport-card .light-shadow .small {
    color: var(--ui-muted);
}

/* Icon tiles: icon on the left, label + value beside it. */
.dashboard .sport-card .stat-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
    text-align: left;
}

.dashboard .sport-card .stat-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: #FFFFFF;
    color: var(--ui-muted);
    font-size: 17px;
}

.dashboard .sport-card .stat-tile__text {
    min-width: 0;
}

.dashboard .sport-card .stat-tile h5 {
    margin-bottom: 2px;
}

.dashboard .sport-card .stat-tile h2 {
    font-size: 20px;
    white-space: nowrap;
}

.dashboard .sport-card .stat-tile--income {
    background-color: #EEFBF7;
}

.dashboard .sport-card .stat-tile--income .stat-tile__icon {
    background-color: #D5F5EC;
    color: #0E9E86;
}

.dashboard .sport-card .stat-tile--income h2 {
    color: #0B7A65;
}

/* Expenses in a soft red, gentler than the danger red. */
.dashboard .sport-card .stat-tile--expense {
    background-color: #FDF4F5;
}

.dashboard .sport-card .stat-tile--expense .stat-tile__icon {
    background-color: #FBE3E7;
    color: #D9536B;
}

.dashboard .sport-card .stat-tile--expense h2 {
    color: #C24A60;
}

/* A wide card (e.g. a club with a single sport) shows the tiles in 3 columns. */
@container (min-width: 760px) {
    .dashboard .sport-card .row.no-gutters:has(.light-shadow) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Quick links: two columns of pill links with a soft icon tile. */
.dashboard .sport-card > .card-body:last-child {
    margin: 12px 20px 0;
    padding: 12px 0 16px;
    border-top: 1px solid #EDF2F9;
}

.dashboard .sport-card .navbar-nav {
    margin-bottom: 0 !important;
}

.dashboard .sport-card .navbar-light .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    margin: 2px 4px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #283E59;
    transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease);
}

.dashboard .sport-card .navbar-nav .nav-link .fe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 8px;
    background-color: var(--db-tile-bg);
    color: var(--ui-muted);
    font-size: 14px;
    transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease);
}

.dashboard .sport-card .navbar-light .navbar-nav .nav-link:hover {
    background-color: var(--db-tile-bg);
    color: var(--db-title);
}

.dashboard .sport-card .navbar-nav .nav-link:hover .fe {
    background-color: var(--ui-accent-soft);
    color: #0E9E86;
}

/* ------------------------------------------------------------------ */
/* Latest events: minimal list (partials/latest_events_feed)           */
/* Not scoped to .dashboard: the feed is shared by every role dashboard. */
/* ------------------------------------------------------------------ */

.latest-events-feed .event-item {
    --event-accent: #95AAC9;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.latest-events-feed .event-item--training {
    --event-accent: #2DE0B5;
}

.latest-events-feed .event-item--game {
    --event-accent: #FF7A8A;
}

.latest-events-feed .activity-feed .event-item:last-child {
    border-bottom: 0;
}

/* Dashkit's .list-group-activity draws a vertical "activity" line between items (not on the
   last one), which looks broken next to the date column. */
.latest-events-feed .list-group-activity .event-item::before {
    content: none;
}

/* Neutral date column: weekday / day / month. */
.latest-events-feed .event-item__date {
    display: flex;
    flex: 0 0 58px;
    flex-direction: column;
    align-items: center;
    padding-right: 14px;
    border-right: 1px solid #EDF2F9;
    line-height: 1.15;
    text-transform: uppercase;
}

.latest-events-feed .event-item__weekday {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #95AAC9;
}

.latest-events-feed .event-item__day {
    margin: 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: #12263F;
}

.latest-events-feed .event-item__month {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #6E84A3;
}

.latest-events-feed .event-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* ● Type · time · field */
.latest-events-feed .event-item__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    font-size: 12px;
    color: #6E84A3;
}

.latest-events-feed .event-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--event-accent);
}

.latest-events-feed .event-item__type {
    font-weight: 600;
    color: #283E59;
}

.latest-events-feed .event-item__sep {
    color: #C6D3E6;
}

.latest-events-feed .event-item__kicker .fe {
    color: #95AAC9;
}

.latest-events-feed .event-item__title {
    margin: 2px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #12263F;
}

.latest-events-feed .event-item__title a {
    color: inherit;
}

/* Rows that open the event preview (stretched title link). */
.latest-events-feed .event-item:has(.stretched-link) {
    cursor: pointer;
}

/* Hover only tints the row background (activity-feed); the title keeps its colour. */
.latest-events-feed .event-item__title a:hover,
.latest-events-feed .event-item__title a:focus {
    color: inherit;
    text-decoration: none;
}

/* Team links inside a clickable row stay clickable on their own. */
.latest-events-feed .event-item__involved a {
    position: relative;
    z-index: 2;
}

.latest-events-feed .event-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12.5px;
    color: #6E84A3;
}

.latest-events-feed .event-item__involved {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.latest-events-feed .event-item__meta .badge {
    padding: 3px 8px;
    font-size: 11.5px;
}

.latest-events-feed .event-item__note {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #6E84A3;
}

/* ------------------------------------------------------------------ */
/* Empty states (components/empty-state)                               */
/* ------------------------------------------------------------------ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px;
    text-align: center;
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background-color: #F3F6FA;
    color: #95AAC9;
    font-size: 24px;
}

.empty-state__title {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #12263F;
}

.empty-state__text {
    max-width: 320px;
    margin-bottom: 0;
    font-size: 13px;
    color: #6E84A3;
}

.empty-state__action {
    margin-top: 14px;
}

/* ------------------------------------------------------------------ */
/* Loading skeleton for values filled in by AJAX                       */
/* ------------------------------------------------------------------ */

.dashboard .is-loading {
    display: inline-block;
    width: 72px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(90deg, #EDF2F9 0%, #F7F9FC 50%, #EDF2F9 100%);
    background-size: 200% 100%;
    color: transparent !important;
    vertical-align: middle;
    animation: db-skeleton 1.2s ease-in-out infinite;
}

@keyframes db-skeleton {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard .is-loading {
        animation: none;
    }

    .dashboard .sport-card,
    .dashboard .action-card {
        transition: none;
    }

    .dashboard .sport-card:hover,
    .dashboard .action-card:hover {
        transform: none;
    }
}